From db0ea1ab187b03ee6cb1ed285d785d2068e2ad73 Mon Sep 17 00:00:00 2001
From: Titan <titan@xueai.art>
Date: Sun, 5 Apr 2026 23:39:44 +0800
Subject: [PATCH] feat(chats): implement dynamic styling based on xclaw_used
 parameter

---
 .../app/workspace/chats/[thread_id]/page.tsx  | 41 ++++++++++++-------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/workspace/chats/[thread_id]/page.tsx b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
index 89ea9467..3a522b2f 100644
--- a/frontend/src/app/workspace/chats/[thread_id]/page.tsx
+++ b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
@@ -38,13 +38,19 @@ const UUID_REGEX =
 export default function ChatPage() {
   const { t } = useI18n();
   const [showFollowups, setShowFollowups] = useState(false);
-  const searchParams = useSearchParams();  const generatedThreadIdRef = useRef<string>("");
+  const searchParams = useSearchParams();
+  const generatedThreadIdRef = useRef<string>("");
   if (!generatedThreadIdRef.current) {
     const queryThreadId = searchParams.get("thread_id")?.trim();
     generatedThreadIdRef.current =
       queryThreadId && UUID_REGEX.test(queryThreadId) ? queryThreadId : uuid();
   }
 
+  // 检查 xclaw_used 参数，仅用于界面风格控制，不影响线程创建逻辑
+  const xclawUsedParam = searchParams.get("xclaw_used");
+  const initialForceNewStyle = xclawUsedParam === "false";
+  const [forceNewStyle, setForceNewStyle] = useState(initialForceNewStyle);
+
   const { threadId, isNewThread, setIsNewThread, isMock } = useThreadChat({
     newThreadId: generatedThreadIdRef.current,
   });
@@ -155,8 +161,12 @@ export default function ChatPage() {
   const handleSubmit = useCallback(
     (message: PromptInputMessage) => {
       void sendMessage(threadId, message);
+      // 仅切换界面风格，不影响线程状态
+      if (forceNewStyle) {
+        setForceNewStyle(false);
+      }
     },
-    [sendMessage, threadId],
+    [sendMessage, threadId, forceNewStyle],
   );
   const handleStop = useCallback(async () => {
     await thread.stop();
@@ -174,7 +184,7 @@ export default function ChatPage() {
           <header
             className={cn(
               "absolute top-0 right-0 left-0 z-30 flex h-12 shrink-0 items-center px-4",
-              isNewThread
+              (forceNewStyle || isNewThread)
                 ? "bg-background/0 backdrop-blur-none"
                 : "bg-background/80 shadow-xs backdrop-blur",
             )}
@@ -190,19 +200,22 @@ export default function ChatPage() {
           </header>
           <main className="flex min-h-0 max-w-full grow flex-col">
             <div className="flex size-full justify-center">
-              <MessageList
-                className={cn("size-full", !isNewThread && "pt-10")}
-                threadId={threadId}
-                thread={thread}
-                paddingBottom={messageListPaddingBottom}
-              />
+              {/* forceNewStyle 时隐藏消息列表，提交后再显示 */}
+              {!(forceNewStyle) && (
+                <MessageList
+                  className={cn("size-full", !isNewThread && "pt-10")}
+                  threadId={threadId}
+                  thread={thread}
+                  paddingBottom={messageListPaddingBottom}
+                />
+              )}
             </div>
             <div className="absolute right-0 bottom-0 left-0 z-30 flex justify-center px-4">
               <div
                 className={cn(
                   "relative w-full",
-                  isNewThread && "-translate-y-[calc(50vh-96px)]",
-                  isNewThread
+                  (forceNewStyle || isNewThread) && "-translate-y-[calc(50vh-96px)]",
+                  (forceNewStyle || isNewThread)
                     ? "max-w-(--container-width-sm)"
                     : "max-w-(--container-width-md)",
                 )}
@@ -221,9 +234,9 @@ export default function ChatPage() {
                 {mounted ? (
                   <InputBox
                     className={cn("bg-background/5 w-full -translate-y-4")}
-                    isNewThread={isNewThread}
+                    isNewThread={forceNewStyle || isNewThread}
                     threadId={threadId}
-                    autoFocus={isNewThread}
+                    autoFocus={forceNewStyle || isNewThread}
                     status={
                       thread.error
                         ? "error"
@@ -233,7 +246,7 @@ export default function ChatPage() {
                     }
                     context={settings.context}
                     extraHeader={
-                      isNewThread && <Welcome mode={settings.context.mode} />
+                      (forceNewStyle || isNewThread) && <Welcome mode={settings.context.mode} />
                     }
                     disabled={
                       env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" ||