chore(ui): Toaster 对齐 originui 用法与样式

.vscode/settings.json

@@ -0,0 +1,67 @@
+{
+    "window.title": "${activeEditorShort}${separator}${separator}deer-flow/frontend",
+    "todo-tree.regex.regex": "((%|#|//|<!--|\\{/\\*|^\\s*\\*)\\s*($TAGS)|^\\s*- \\[ \\])",
+    "todo-tree.general.tags": [
+        "TODO:",
+        "BUG:",
+        "TAG:",
+        "DONE:",
+        "MARK:",
+        "TEST:",
+        "XXX:"
+    ],
+    "todo-tree.regex.regexCaseSensitive": false,
+    "todo-tree.highlights.defaultHighlight": {
+        "foreground": "#000000",
+        "background": "#fff700",
+        "icon": "check",
+        "rulerColour": "#fff700",
+        "type": "tag",
+        "iconColour": "#fff700"
+    },
+    "todo-tree.highlights.customHighlight": {
+        "TODO:": {
+            "icon": "todo",
+            "background": "#fff700",
+            "rulerColour": "#fff700",
+            "iconColour": "#fff700"
+        },
+        "BUG:": {
+            "background": "#eb5c5c",
+            "icon": "bug",
+            "rulerColour": "#eb5c5c",
+            "iconColour": "#eb5c5c"
+        },
+        "TAG:": {
+            "background": "#38b2f4",
+            "icon": "tag",
+            "rulerColour": "#38b2f4",
+            "iconColour": "#38b2f4",
+            "rulerLane": "full"
+        },
+        "DONE:": {
+            "background": "#5eec95",
+            "icon": "check",
+            "rulerColour": "#5eec95",
+            "iconColour": "#5eec95"
+        },
+        "MARK:": {
+            "background": "#f90",
+            "icon": "note",
+            "rulerColour": "#f90",
+            "iconColour": "#f90"
+        },
+        "TEST:": {
+            "background": "#df7be6",
+            "icon": "flame",
+            "rulerColour": "#df7be6",
+            "iconColour": "#df7be6"
+        },
+        "XXX:": {
+            "background": "#d65d8e",
+            "icon": "versions",
+            "rulerColour": "#d65d8e",
+            "iconColour": "#d65d8e"
+        }
+    }
+}

frontend/src/app/workspace/chats/[thread_id]/page.tsx

@@ -6,6 +6,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { ConversationEmptyState } from "@/components/ai-elements/conversation";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   DevDialog,
   DevDialogContent,
@@ -57,13 +58,16 @@ export default function ChatPage() {
   const { threadId, isNewThread, setIsNewThread, isMock } = useThreadChat();
   const searchParams = useSearchParams();
 
-  // Submission strategy is controlled by `isnew` query param only.
-  // - isnew=false: reuse existing thread
-  // - otherwise: create/start a new session
+  // Submission strategy:
+  // - xclaw_used=true: follow `isnew` (isnew=false => reuse existing thread)
+  // - xclaw_used!=true: always create/start a new session (no history)
   const createNewSession = useMemo(() => {
     if (!isNewThread) {
       return false;
     }
+    if (searchParams.get("xclaw_used")?.trim().toLowerCase() !== "true") {
+      return true;
+    }
     return searchParams.get("isnew")?.trim().toLowerCase() !== "false";
   }, [isNewThread, searchParams]);
   const streamThreadId = useMemo(() => {
@@ -110,6 +114,7 @@ export default function ChatPage() {
   }, [thread.values?.title]);
 
   const [hasSubmitted, setHasSubmitted] = useState(false);
+  const showInputBox = !(isNewThread && thread.isThreadLoading);
 
   useEffect(() => {
     const pageTitle = isNewThread
@@ -359,36 +364,41 @@ export default function ChatPage() {
               isNewThread && !hasSubmitted && "-translate-y-[calc(50vh-96px)]",
             )}
           >
-            <InputBox
-              className={cn("w-full rounded-[20px] bg-[#FBFAFC]")}
-              threadId={threadId}
-              isNewThread={isNewThread}
-              hasSubmitted={hasSubmitted}
-              autoFocus={isNewThread}
-              status={
-                thread.error
-                  ? "error"
-                  : isUploading || thread.isLoading
-                    ? "streaming"
-                    : "ready"
-              }
-              context={settings.context}
-              extraHeader={
-                <div className="flex flex-col gap-4">
-                  {isNewThread && !hasSubmitted && (
-                    <Welcome mode={settings.context.mode} />
-                  )}
-                </div>
-              }
-              disabled={
-                env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" ||
-                isSelectedSkillBootstrapping ||
-                isUploading
-              }
-              onContextChange={(context) => setSettings("context", context)}
-              onSubmit={handleSubmit}
-              onStop={handleStop}
-            />
+            {showInputBox ? (
+              <InputBox
+                className={cn("w-full rounded-[20px] bg-[#FBFAFC]")}
+                threadId={threadId}
+                isNewThread={isNewThread}
+                hasSubmitted={hasSubmitted}
+                autoFocus={isNewThread}
+                status={
+                  thread.error
+                    ? "error"
+                    : isUploading || thread.isLoading
+                      ? "streaming"
+                      : "ready"
+                }
+                context={settings.context}
+                extraHeader={
+                  <div className="flex flex-col gap-4">
+                    {isNewThread && !hasSubmitted && (
+                      <Welcome mode={settings.context.mode} />
+                    )}
+                  </div>
+                }
+                disabled={
+                  env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" ||
+                  isSelectedSkillBootstrapping ||
+                  isUploading
+                }
+                onContextChange={(context) => setSettings("context", context)}
+                onSubmit={handleSubmit}
+                onStop={handleStop}
+              />
+            ) : (
+              // <InputBoxSkeleton />
+              ''
+            )}
 
             {/* {isSelectedSkillBootstrapping && (
               <div className="text-muted-foreground w-full translate-y-8 text-center text-xs">
@@ -477,3 +487,21 @@ export default function ChatPage() {
     </ThreadContext.Provider>
   );
 }
+
+function InputBoxSkeleton() {
+  return (
+    <div className="w-full rounded-[20px] bg-[#FBFAFC] p-4 shadow-[0_0_20px_0_rgba(0,0,0,0.10)]">
+      <div className="flex flex-col gap-4">
+        <Skeleton className="h-6 w-[220px]" />
+        <Skeleton className="h-[120px] w-full rounded-[16px]" />
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-9 w-9 rounded-full" />
+            <Skeleton className="h-9 w-9 rounded-full" />
+          </div>
+          <Skeleton className="h-9 w-20 rounded-full" />
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/workspace/layout.tsx

@@ -9,7 +9,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { Toaster } from "sonner";
+import { Toaster } from "@/components/ui/sonner";
 
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import { CommandPalette } from "@/components/workspace/command-palette";
@@ -121,7 +121,34 @@ export default function WorkspaceLayout({
         <SidebarInset className="min-w-0">{children}</SidebarInset>
       </SidebarProvider>
       <CommandPalette />
-      <Toaster position="top-center" />
+      <Toaster
+        position="top-center"
+        toastOptions={{
+          duration: 2200,
+          classNames: {
+            toast: [
+              /* 灰色圆角矩形容器 */
+              "rounded-[20px] border-none",
+              /* 浅灰色背景 + 轻微透明 */
+              "bg-[#999999]! backdrop-blur-sm",
+              /* 阴影极轻 */
+              "shadow-[0_2px_12px_0_rgba(0,0,0,0.18)]",
+              /* 内边距：宽松居中 */
+              "px-5 py-2.5",
+              /* 单行布局，内容水平居中 */
+              "flex items-center justify-center gap-0",
+              /* 整体文字样式 */
+              "text-white text-sm font-normal font-sans",
+              /* 去掉 icon 区域间距 */
+              "[&>[data-icon]]:hidden",
+            ].join(" "),
+            title:
+              "text-white! text-sm font-normal text-center w-full leading-snug",
+            description: "hidden",
+            icon: "hidden",
+          },
+        }}
+      />
     </QueryClientProvider>
   );
 }

frontend/src/components/ui/sonner.tsx

@@ -1,12 +1,5 @@
 "use client";
 
-import {
-  CircleCheckIcon,
-  InfoIcon,
-  Loader2Icon,
-  OctagonXIcon,
-  TriangleAlertIcon,
-} from "lucide-react";
 import { useTheme } from "next-themes";
 import { Toaster as Sonner, type ToasterProps } from "sonner";
 
@@ -14,15 +7,15 @@ const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme();
 
   return (
-    <Sonner
+      <Sonner
       theme={theme as ToasterProps["theme"]}
       className="toaster group"
       icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
-        loading: <Loader2Icon className="size-4 animate-spin" />,
+        success: null,
+        info: null,
+        warning: null,
+        error: null,
+        loading: null,
       }}
       style={
         {

frontend/src/components/workspace/chats/use-thread-chat.ts

@@ -10,12 +10,14 @@ export function useThreadChat() {
   const pathname = usePathname();
 
   const searchParams = useSearchParams();
+  const xClawUsedFromQuery = searchParams.get("xclaw_used");
   const [threadId, setThreadId] = useState(() => {
     if (threadIdFromPath === "new") {
       const shouldUseQueryThreadId = pathname.startsWith("/workspace/chats/");
-      const queryThreadId = shouldUseQueryThreadId
-        ? searchParams.get("thread_id")?.trim()
-        : undefined;
+      const queryThreadId =
+        shouldUseQueryThreadId && xClawUsedFromQuery === "true"
+          ? searchParams.get("thread_id")?.trim()
+          : undefined;
       return queryThreadId ?? uuid();
     }
     return threadIdFromPath;
@@ -29,9 +31,10 @@ export function useThreadChat() {
     if (pathname.endsWith("/new")) {
       setIsNewThread(true);
       const shouldUseQueryThreadId = pathname.startsWith("/workspace/chats/");
-      const queryThreadId = shouldUseQueryThreadId
-        ? searchParams.get("thread_id")?.trim()
-        : undefined;
+      const queryThreadId =
+        shouldUseQueryThreadId && xClawUsedFromQuery === "true"
+          ? searchParams.get("thread_id")?.trim()
+          : undefined;
       setThreadId(queryThreadId ?? uuid());
       return;
     }

frontend/src/hooks/use-iframe-skill.ts

@@ -42,6 +42,8 @@ export function useIframeSkill(): UseIframeSkillReturn {
 
   // 0. 监听 query 中 XClawUsed=true 且带 thread_id 时跳转并清理 query
   useEffect(() => {
+    console.log(xClawUsedFromQuery, threadIdFromQuery, lastThreadIdRef.current);
+    
     if (!threadIdFromQuery) return;
     if (xClawUsedFromQuery !== "true") return;
     if (lastThreadIdRef.current === threadIdFromQuery) return;