assistant-tool-fallback

1"use client";
2 
3import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
4import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
5import { useState } from "react";
6import { Button } from "@/components/ui/button";
7 
8export const ToolFallback: ToolCallMessagePartComponent = ({
9  toolName,
10  argsText,
11  result,
12}) => {
13  const [isCollapsed, setIsCollapsed] = useState(true);
14  return (
15    <div className="aui-tool-fallback-root mb-4 flex w-full flex-col gap-3 overflow-hidden rounded-2xl border py-3">
16      <div className="aui-tool-fallback-header flex items-center gap-2 px-4">
17        <CheckIcon className="aui-tool-fallback-icon size-4" />
18        <p className="aui-tool-fallback-title flex-grow">
19          Used tool: <b>{toolName}</b>
20        </p>
21        <Button
22          className="rounded-xl"
23          onClick={() => setIsCollapsed(!isCollapsed)}
24        >
25          {isCollapsed ? <ChevronUpIcon /> : <ChevronDownIcon />}
26        </Button>
27      </div>
28      {!isCollapsed && (
29        <div className="aui-tool-fallback-content bg-muted flex flex-col gap-2 border-t pt-2">
30          <div className="aui-tool-fallback-args-root px-4">
31            <pre className="aui-tool-fallback-args-value whitespace-pre-wrap">
32              {argsText}
33            </pre>
34          </div>
35          {result !== undefined && (
36            <div className="aui-tool-fallback-result-root border-t border-dashed px-4 pt-2">
37              <p className="aui-tool-fallback-result-header font-semibold">
38                Result:
39              </p>
40              <pre className="aui-tool-fallback-result-content whitespace-pre-wrap text-[012px]">
41                {typeof result === "string"
42                  ? result
43                  : JSON.stringify(result, null, 2)}
44              </pre>
45            </div>
46          )}
47        </div>
48      )}
49    </div>
50  );
51};