From 72b9ebcf041fd0118b31bf2120e2867e8437ba0f Mon Sep 17 00:00:00 2001 From: bracesproul Date: Tue, 11 Mar 2025 10:59:49 -0700 Subject: [PATCH 1/3] feat: add option to hide tool calls --- package.json | 1 + pnpm-lock.yaml | 52 +++++++++++++++++++++++++++ src/components/thread/index.tsx | 23 +++++++++++- src/components/thread/messages/ai.tsx | 26 ++++++++++---- src/components/ui/switch.tsx | 29 +++++++++++++++ 5 files changed, 123 insertions(+), 8 deletions(-) create mode 100644 src/components/ui/switch.tsx diff --git a/package.json b/package.json index 9beb83c..e28c631 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@radix-ui/react-label": "^2.1.2", "@radix-ui/react-separator": "^1.1.2", "@radix-ui/react-slot": "^1.1.2", + "@radix-ui/react-switch": "^1.1.3", "@radix-ui/react-tooltip": "^1.1.8", "@tailwindcss/postcss": "^4.0.9", "@tailwindcss/vite": "^4.0.9", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 688797d..a3a07dd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -46,6 +46,9 @@ importers: "@radix-ui/react-slot": specifier: ^1.1.2 version: 1.1.2(@types/react@19.0.10)(react@19.0.0) + "@radix-ui/react-switch": + specifier: ^1.1.3 + version: 1.1.3(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) "@radix-ui/react-tooltip": specifier: ^1.1.8 version: 1.1.8(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) @@ -1184,6 +1187,22 @@ packages: "@types/react": optional: true + "@radix-ui/react-switch@1.1.3": + resolution: + { + integrity: sha512-1nc+vjEOQkJVsJtWPSiISGT6OKm4SiOdjMo+/icLxo2G4vxz1GntC5MzfL4v8ey9OEfw787QCD1y3mUv0NiFEQ==, + } + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + "@radix-ui/react-tooltip@1.1.8": resolution: { @@ -1248,6 +1267,18 @@ packages: "@types/react": optional: true + "@radix-ui/react-use-previous@1.1.0": + resolution: + { + integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==, + } + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@radix-ui/react-use-rect@1.1.0": resolution: { @@ -6184,6 +6215,21 @@ snapshots: optionalDependencies: "@types/react": 19.0.10 + "@radix-ui/react-switch@1.1.3(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)": + dependencies: + "@radix-ui/primitive": 1.1.1 + "@radix-ui/react-compose-refs": 1.1.1(@types/react@19.0.10)(react@19.0.0) + "@radix-ui/react-context": 1.1.1(@types/react@19.0.10)(react@19.0.0) + "@radix-ui/react-primitive": 2.0.2(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + "@radix-ui/react-use-controllable-state": 1.1.0(@types/react@19.0.10)(react@19.0.0) + "@radix-ui/react-use-previous": 1.1.0(@types/react@19.0.10)(react@19.0.0) + "@radix-ui/react-use-size": 1.1.0(@types/react@19.0.10)(react@19.0.0) + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) + optionalDependencies: + "@types/react": 19.0.10 + "@types/react-dom": 19.0.4(@types/react@19.0.10) + "@radix-ui/react-tooltip@1.1.8(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)": dependencies: "@radix-ui/primitive": 1.1.1 @@ -6230,6 +6276,12 @@ snapshots: optionalDependencies: "@types/react": 19.0.10 + "@radix-ui/react-use-previous@1.1.0(@types/react@19.0.10)(react@19.0.0)": + dependencies: + react: 19.0.0 + optionalDependencies: + "@types/react": 19.0.10 + "@radix-ui/react-use-rect@1.1.0(@types/react@19.0.10)(react@19.0.0)": dependencies: "@radix-ui/rect": 1.1.0 diff --git a/src/components/thread/index.tsx b/src/components/thread/index.tsx index 1d2be8d..72b558e 100644 --- a/src/components/thread/index.tsx +++ b/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" /> -
+
+
+
+ + +
+
{stream.isLoading ? (