Merge pull request #14 from langchain-ai/brace/tool-result

feat: Render tool result messages

src/components/thread/messages/ai.tsx

@@ -6,7 +6,7 @@ import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { MarkdownText } from "../markdown-text";
 import { LoadExternalComponent } from "@langchain/langgraph-sdk/react-ui/client";
 import { cn } from "@/lib/utils";
-import { ToolCalls } from "./tool-calls";
+import { ToolCalls, ToolResult } from "./tool-calls";
 
 function CustomComponent({
   message,
@@ -61,40 +61,45 @@ export function AssistantMessage({
     "tool_calls" in message &&
     message.tool_calls &&
     message.tool_calls.length > 0;
+  const isToolResult = message.type === "tool";
 
   return (
     <div className="flex items-start mr-auto gap-2 group">
       <Avatar>
         <AvatarFallback>A</AvatarFallback>
       </Avatar>
-      <div className="flex flex-col gap-2">
+      {isToolResult ? (
-        {hasToolCalls && <ToolCalls toolCalls={message.tool_calls} />}
+        <ToolResult message={message} />
-        <CustomComponent message={message} thread={thread} />
+      ) : (
-        {contentString.length > 0 && (
+        <div className="flex flex-col gap-2">
-          <div className="rounded-2xl bg-muted px-4 py-2">
+          {hasToolCalls && <ToolCalls toolCalls={message.tool_calls} />}
-            <MarkdownText>{contentString}</MarkdownText>
+          <CustomComponent message={message} thread={thread} />
-          </div>
+          {contentString.length > 0 && (
-        )}
+            <div className="rounded-2xl bg-muted px-4 py-2">
-        <div
+              <MarkdownText>{contentString}</MarkdownText>
-          className={cn(
+            </div>
-            "flex gap-2 items-center mr-auto transition-opacity",
-            "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100",
           )}
-        >
+          <div
-          <BranchSwitcher
+            className={cn(
-            branch={meta?.branch}
+              "flex gap-2 items-center mr-auto transition-opacity",
-            branchOptions={meta?.branchOptions}
+              "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100",
-            onSelect={(branch) => thread.setBranch(branch)}
+            )}
-            isLoading={isLoading}
+          >
-          />
+            <BranchSwitcher
-          <CommandBar
+              branch={meta?.branch}
-            content={contentString}
+              branchOptions={meta?.branchOptions}
-            isLoading={isLoading}
+              onSelect={(branch) => thread.setBranch(branch)}
-            isAiMessage={true}
+              isLoading={isLoading}
-            handleRegenerate={() => handleRegenerate(parentCheckpoint)}
+            />
-          />
+            <CommandBar
+              content={contentString}
+              isLoading={isLoading}
+              isAiMessage={true}
+              handleRegenerate={() => handleRegenerate(parentCheckpoint)}
+            />
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }

src/components/thread/messages/tool-calls.tsx

@@ -1,4 +1,7 @@
-import { AIMessage } from "@langchain/langgraph-sdk";
+import { AIMessage, ToolMessage } from "@langchain/langgraph-sdk";
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { ChevronDown, ChevronUp } from "lucide-react";
 
 function isComplexValue(value: any): boolean {
   return Array.isArray(value) || (typeof value === "object" && value !== null);
@@ -23,7 +26,14 @@ export function ToolCalls({
             className="border border-gray-200 rounded-lg overflow-hidden"
           >
             <div className="bg-gray-50 px-4 py-2 border-b border-gray-200">
-              <h3 className="text-lg font-medium text-gray-900">{tc.name}</h3>
+              <h3 className="font-medium text-gray-900">
+                {tc.name}
+                {tc.id && (
+                  <code className="ml-2 text-sm bg-gray-100 px-2 py-1 rounded">
+                    {tc.id}
+                  </code>
+                )}
+              </h3>
             </div>
             <table className="min-w-full divide-y divide-gray-200">
               <tbody className="divide-y divide-gray-200">
@@ -51,3 +61,123 @@ export function ToolCalls({
     </div>
   );
 }
+
+export function ToolResult({ message }: { message: ToolMessage }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  let parsedContent: any;
+  let isJsonContent = false;
+
+  try {
+    if (typeof message.content === "string") {
+      parsedContent = JSON.parse(message.content);
+      isJsonContent = true;
+    }
+  } catch {
+    // Content is not JSON, use as is
+    parsedContent = message.content;
+  }
+
+  const contentStr = isJsonContent
+    ? JSON.stringify(parsedContent, null, 2)
+    : String(message.content);
+  const contentLines = contentStr.split("\n");
+  const shouldTruncate = contentLines.length > 4 || contentStr.length > 500;
+  const displayedContent =
+    shouldTruncate && !isExpanded
+      ? contentStr.length > 500
+        ? contentStr.slice(0, 500) + "..."
+        : contentLines.slice(0, 4).join("\n") + "\n..."
+      : contentStr;
+
+  return (
+    <div className="border border-gray-200 rounded-lg overflow-hidden">
+      <div className="bg-gray-50 px-4 py-2 border-b border-gray-200">
+        <div className="flex items-center justify-between gap-2 flex-wrap">
+          {message.name ? (
+            <h3 className="font-medium text-gray-900">
+              Tool Result:{" "}
+              <code className="bg-gray-100 px-2 py-1 rounded">
+                {message.name}
+              </code>
+            </h3>
+          ) : (
+            <h3 className="font-medium text-gray-900">Tool Result</h3>
+          )}
+          {message.tool_call_id && (
+            <code className="ml-2 text-sm bg-gray-100 px-2 py-1 rounded">
+              {message.tool_call_id}
+            </code>
+          )}
+        </div>
+      </div>
+      <motion.div
+        className="min-w-full bg-gray-100"
+        initial={false}
+        animate={{ height: "auto" }}
+        transition={{ duration: 0.3 }}
+      >
+        <div className="p-3">
+          <AnimatePresence mode="wait" initial={false}>
+            <motion.div
+              key={isExpanded ? "expanded" : "collapsed"}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.2 }}
+            >
+              {isJsonContent ? (
+                <table className="min-w-full divide-y divide-gray-200">
+                  <tbody className="divide-y divide-gray-200">
+                    {(Array.isArray(parsedContent)
+                      ? isExpanded
+                        ? parsedContent
+                        : parsedContent.slice(0, 5)
+                      : Object.entries(parsedContent)
+                    ).map((item, argIdx) => {
+                      const [key, value] = Array.isArray(parsedContent)
+                        ? [argIdx, item]
+                        : [item[0], item[1]];
+                      return (
+                        <tr key={argIdx}>
+                          <td className="px-4 py-2 text-sm font-medium text-gray-900 whitespace-nowrap">
+                            {key}
+                          </td>
+                          <td className="px-4 py-2 text-sm text-gray-500">
+                            {isComplexValue(value) ? (
+                              <code className="bg-gray-50 rounded px-2 py-1 font-mono text-sm">
+                                {JSON.stringify(value, null, 2)}
+                              </code>
+                            ) : (
+                              String(value)
+                            )}
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              ) : (
+                <code className="text-sm block">{displayedContent}</code>
+              )}
+            </motion.div>
+          </AnimatePresence>
+        </div>
+        {((shouldTruncate && !isJsonContent) ||
+          (isJsonContent &&
+            Array.isArray(parsedContent) &&
+            parsedContent.length > 5)) && (
+          <motion.button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="w-full py-2 flex items-center justify-center border-t-[1px] border-gray-200 text-gray-500 hover:text-gray-600 hover:bg-gray-50 transition-all ease-in-out duration-200 cursor-pointer"
+            initial={{ scale: 1 }}
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+          >
+            {isExpanded ? <ChevronUp /> : <ChevronDown />}
+          </motion.button>
+        )}
+      </motion.div>
+    </div>
+  );
+}