examples(langgraph): add a tool fallback (#757)

Yonom · Sep 7, 2024 · eaa726b · eaa726b
1 parent 34ad491
commit eaa726b
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 2 deletions.
diff --git a/examples/with-langgraph/app/page.tsx b/examples/with-langgraph/app/page.tsx
@@ -3,6 +3,7 @@
 import { Thread } from "@assistant-ui/react";
 import { PriceSnapshotTool } from "@/components/tools/price-snapshot/PriceSnapshotTool";
 import { PurchaseStockTool } from "@/components/tools/purchase-stock/PurchaseStockTool";
+import { ToolFallback } from "@/components/tools/ToolFallback";
 
 export default function Home() {
   return (
@@ -21,9 +22,9 @@ export default function Home() {
             },
           ],
         }}
+        assistantMessage={{ components: { ToolFallback } }}
+        tools={[PriceSnapshotTool, PurchaseStockTool]}
       />
-      <PriceSnapshotTool />
-      <PurchaseStockTool />
     </div>
   );
 }
diff --git a/examples/with-langgraph/components/tools/ToolFallback.tsx b/examples/with-langgraph/components/tools/ToolFallback.tsx
@@ -0,0 +1,42 @@
+import { ToolCallContentPartComponent } from "@assistant-ui/react";
+import { TooltipIconButton } from "@assistant-ui/react/internal";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { useState } from "react";
+
+export const ToolFallback: ToolCallContentPartComponent = ({ part }) => {
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  return (
+    <div className="mb-4 flex w-full flex-col gap-3 rounded-lg border py-3">
+      <div className="flex items-center gap-2 px-4">
+        <CheckIcon className="size-4" />
+        <p className="">
+          Used tool: <b>{part.toolName}</b>
+        </p>
+        <div className="flex-grow" />
+        <TooltipIconButton
+          tooltip={isCollapsed ? "Expand" : "Collapse"}
+          onClick={() => setIsCollapsed(!isCollapsed)}
+        >
+          {isCollapsed ? <ChevronUpIcon /> : <ChevronDownIcon />}
+        </TooltipIconButton>
+      </div>
+      {!isCollapsed && (
+        <div className="flex flex-col gap-2 border-t pt-2">
+          <div className="px-4">
+            <pre className="whitespace-pre-wrap">{part.argsText}</pre>
+          </div>
+          {part.result !== undefined && (
+            <div className="border-t border-dashed px-4 pt-2">
+              <p className="font-semibold">Result:</p>
+              <pre className="whitespace-pre-wrap">
+                {typeof part.result === "string"
+                  ? part.result
+                  : JSON.stringify(part.result, null, 2)}
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};