feat: add option to hide tool calls

src/components/thread/index.tsx

@@ -25,6 +25,8 @@ import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 import ThreadHistory from "./history";
 import { toast } from "sonner";
 import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { Label } from "../ui/label";
+import { Switch } from "../ui/switch";
 
 function StickyToBottomContent(props: {
   content: ReactNode;
@@ -70,6 +72,10 @@ export function Thread() {
     "chatHistoryOpen",
     BooleanParam,
   );
+  const [hideToolCalls, setHideToolCalls] = useQueryParam(
+    "hideToolCalls",
+    BooleanParam,
+  );
   const [input, setInput] = useState("");
   const [firstTokenReceived, setFirstTokenReceived] = useState(false);
   const isLargeScreen = useMediaQuery("(min-width: 1024px)");
@@ -335,7 +341,22 @@ export function Thread() {
                       className="p-3.5 pb-0 border-none bg-transparent field-sizing-content shadow-none ring-0 outline-none focus:outline-none focus:ring-0 resize-none"
                     />
 
-                    <div className="flex items-center justify-end p-2 pt-0">
+                    <div className="flex items-center justify-between p-2 pt-4">
+                      <div>
+                        <div className="flex items-center space-x-2">
+                          <Switch
+                            id="render-tool-calls"
+                            checked={hideToolCalls ?? false}
+                            onCheckedChange={setHideToolCalls}
+                          />
+                          <Label
+                            htmlFor="render-tool-calls"
+                            className="text-sm text-gray-600"
+                          >
+                            Hide Tool Calls
+                          </Label>
+                        </div>
+                      </div>
                       {stream.isLoading ? (
                         <Button key="stop" onClick={() => stream.stop()}>
                           <LoaderCircle className="w-4 h-4 animate-spin" />

src/components/thread/messages/ai.tsx

@@ -11,6 +11,7 @@ import { MessageContentComplex } from "@langchain/core/messages";
 import { Fragment } from "react/jsx-runtime";
 import { isAgentInboxInterruptSchema } from "@/lib/agent-inbox-interrupt";
 import { ThreadView } from "../agent-inbox";
+import { BooleanParam, useQueryParam } from "use-query-params";
 
 function CustomComponent({
   message,
@@ -78,6 +79,7 @@ export function AssistantMessage({
   handleRegenerate: (parentCheckpoint: Checkpoint | null | undefined) => void;
 }) {
   const contentString = getContentString(message.content);
+  const [hideToolCalls] = useQueryParam("hideToolCalls", BooleanParam);
 
   const thread = useStreamContext();
   const isLastMessage =
@@ -101,6 +103,10 @@ export function AssistantMessage({
   const hasAnthropicToolCalls = !!anthropicStreamedToolCalls?.length;
   const isToolResult = message.type === "tool";
 
+  if (isToolResult && hideToolCalls) {
+    return null;
+  }
+
   return (
     <div className="flex items-start mr-auto gap-2 group">
       {isToolResult ? (
@@ -112,13 +118,19 @@ export function AssistantMessage({
               <MarkdownText>{contentString}</MarkdownText>
             </div>
           )}
-          {(hasToolCalls && toolCallsHaveContents && (
-            <ToolCalls toolCalls={message.tool_calls} />
-          )) ||
-            (hasAnthropicToolCalls && (
-              <ToolCalls toolCalls={anthropicStreamedToolCalls} />
-            )) ||
-            (hasToolCalls && <ToolCalls toolCalls={message.tool_calls} />)}
+
+          {!hideToolCalls && (
+            <>
+              {(hasToolCalls && toolCallsHaveContents && (
+                <ToolCalls toolCalls={message.tool_calls} />
+              )) ||
+                (hasAnthropicToolCalls && (
+                  <ToolCalls toolCalls={anthropicStreamedToolCalls} />
+                )) ||
+                (hasToolCalls && <ToolCalls toolCalls={message.tool_calls} />)}
+            </>
+          )}
+
           <CustomComponent message={message} thread={thread} />
           {isAgentInboxInterruptSchema(interrupt?.value) && isLastMessage && (
             <ThreadView interrupt={interrupt.value[0]} />

src/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+
+import { cn } from "@/lib/utils";
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background pointer-events-none block size-4 rounded-full ring-0 shadow-lg transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };