From d784ec4611a25ae9108f7c9bc00c3bdabc8f832f Mon Sep 17 00:00:00 2001
From: SiYue-ZO <2835601846@qq.com>
Date: Sat, 25 Apr 2026 00:14:28 +0800
Subject: [PATCH] feat: add thought visibility toggle

---
 .../src/components/chat/chat-page.tsx         | 56 +++++++++++++------
 web/frontend/src/i18n/locales/en.json         |  1 +
 web/frontend/src/i18n/locales/zh.json         |  1 +
 web/frontend/src/store/chat.ts                |  7 +++
 4 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/web/frontend/src/components/chat/chat-page.tsx b/web/frontend/src/components/chat/chat-page.tsx
index 1012fe7ad..b0244c0b5 100644
--- a/web/frontend/src/components/chat/chat-page.tsx
+++ b/web/frontend/src/components/chat/chat-page.tsx
@@ -1,4 +1,5 @@
 import { IconPlus } from "@tabler/icons-react"
+import { useAtom } from "jotai"
 import { type ChangeEvent, useEffect, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
@@ -15,12 +16,14 @@ import { TypingIndicator } from "@/components/chat/typing-indicator"
 import { UserMessage } from "@/components/chat/user-message"
 import { PageHeader } from "@/components/page-header"
 import { Button } from "@/components/ui/button"
+import { Switch } from "@/components/ui/switch"
 import { useChatModels } from "@/hooks/use-chat-models"
 import { useGateway } from "@/hooks/use-gateway"
 import { usePicoChat } from "@/hooks/use-pico-chat"
 import { useSessionHistory } from "@/hooks/use-session-history"
 import type { ConnectionState } from "@/store/chat"
 import type { ChatAttachment } from "@/store/chat"
+import { showThoughtsAtom } from "@/store/chat"
 import type { GatewayState } from "@/store/gateway"
 
 const MAX_IMAGE_SIZE_BYTES = 7 * 1024 * 1024
@@ -109,6 +112,7 @@ export function ChatPage() {
   const [hasScrolled, setHasScrolled] = useState(false)
   const [input, setInput] = useState("")
   const [attachments, setAttachments] = useState<ChatAttachment[]>([])
+  const [showThoughts, setShowThoughts] = useAtom(showThoughtsAtom)
 
   const {
     messages,
@@ -265,6 +269,18 @@ export function ChatPage() {
           )
         }
       >
+        <div className="hidden items-center gap-2 rounded-lg border border-border/60 px-3 py-1.5 sm:flex">
+          <span className="text-muted-foreground text-sm">
+            {t("chat.showThoughts")}
+          </span>
+          <Switch
+            checked={showThoughts}
+            onCheckedChange={setShowThoughts}
+            aria-label={t("chat.showThoughts")}
+            size="sm"
+          />
+        </div>
+
         <Button
           variant="secondary"
           size="sm"
@@ -306,23 +322,29 @@ export function ChatPage() {
             />
           )}
 
-          {messages.map((msg) => (
-            <div key={msg.id} className="flex w-full">
-              {msg.role === "assistant" ? (
-                <AssistantMessage
-                  content={msg.content}
-                  attachments={msg.attachments}
-                  isThought={msg.kind === "thought"}
-                  timestamp={msg.timestamp}
-                />
-              ) : (
-                <UserMessage
-                  content={msg.content}
-                  attachments={msg.attachments}
-                />
-              )}
-            </div>
-          ))}
+          {messages.map((msg) => {
+            if (msg.kind === "thought" && !showThoughts) {
+              return null
+            }
+
+            return (
+              <div key={msg.id} className="flex w-full">
+                {msg.role === "assistant" ? (
+                  <AssistantMessage
+                    content={msg.content}
+                    attachments={msg.attachments}
+                    isThought={msg.kind === "thought"}
+                    timestamp={msg.timestamp}
+                  />
+                ) : (
+                  <UserMessage
+                    content={msg.content}
+                    attachments={msg.attachments}
+                  />
+                )}
+              </div>
+            )
+          })}
 
           {isTyping && <TypingIndicator />}
         </div>
diff --git a/web/frontend/src/i18n/locales/en.json b/web/frontend/src/i18n/locales/en.json
index d188bb1d0..9ab28c894 100644
--- a/web/frontend/src/i18n/locales/en.json
+++ b/web/frontend/src/i18n/locales/en.json
@@ -60,6 +60,7 @@
       "step4": "Almost there..."
     },
     "reasoningLabel": "Reasoning",
+    "showThoughts": "Show reasoning",
     "toolLabel": "Tool",
     "history": "History",
     "noHistory": "No chat history yet",
diff --git a/web/frontend/src/i18n/locales/zh.json b/web/frontend/src/i18n/locales/zh.json
index fcefdb01b..2dde62818 100644
--- a/web/frontend/src/i18n/locales/zh.json
+++ b/web/frontend/src/i18n/locales/zh.json
@@ -60,6 +60,7 @@
       "step4": "马上就好..."
     },
     "reasoningLabel": "思考",
+    "showThoughts": "展示思考过程",
     "toolLabel": "工具",
     "history": "历史记录",
     "noHistory": "暂无对话历史",
diff --git a/web/frontend/src/store/chat.ts b/web/frontend/src/store/chat.ts
index 21d6ad709..1749a7d2f 100644
--- a/web/frontend/src/store/chat.ts
+++ b/web/frontend/src/store/chat.ts
@@ -1,4 +1,5 @@
 import { atom, getDefaultStore } from "jotai"
+import { atomWithStorage } from "jotai/utils"
 
 import {
   getInitialActiveSessionId,
@@ -47,6 +48,8 @@ export interface ChatStoreState {
 
 type ChatStorePatch = Partial<ChatStoreState>
 
+const SHOW_THOUGHTS_STORAGE_KEY = "picoclaw:chat-show-thoughts"
+
 const DEFAULT_CHAT_STATE: ChatStoreState = {
   messages: [],
   connectionState: "disconnected",
@@ -56,6 +59,10 @@ const DEFAULT_CHAT_STATE: ChatStoreState = {
 }
 
 export const chatAtom = atom<ChatStoreState>(DEFAULT_CHAT_STATE)
+export const showThoughtsAtom = atomWithStorage<boolean>(
+  SHOW_THOUGHTS_STORAGE_KEY,
+  true,
+)
 
 const store = getDefaultStore()