feat: welcome, again

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

@@ -21,6 +21,7 @@ import { InputBox } from "@/components/workspace/input-box";
 import { MessageList } from "@/components/workspace/messages";
 import { ThreadTitle } from "@/components/workspace/thread-title";
 import { Tooltip } from "@/components/workspace/tooltip";
+import { Welcome } from "@/components/workspace/welcome";
 import { useLocalSettings } from "@/core/settings";
 import { type AgentThread } from "@/core/threads";
 import { useSubmitThread, useThreadStream } from "@/core/threads/hooks";
@@ -125,18 +126,33 @@ export default function ChatPage() {
               />
             </div>
             <div className="absolute right-0 bottom-0 left-0 flex justify-center px-4">
-              <InputBox
+              <div
                 className={cn(
-                  "w-full max-w-(--container-width-md) transition-transform duration-300 ease-in-out",
+                  "relative w-full",
                   isNewThread && "-translate-y-[calc(50vh-120px)]",
+                  isNewThread
+                    ? "max-w-(--container-width-sm)"
+                    : "max-w-(--container-width-md)",
                 )}
-                autoFocus={isNewThread}
-                status={thread.isLoading ? "streaming" : "ready"}
-                context={settings.context}
-                onContextChange={(context) => setSettings("context", context)}
-                onSubmit={handleSubmit}
-                onStop={handleStop}
-              />
+              >
+                <div
+                  className={cn(
+                    "absolute right-0 bottom-[148px] left-0 flex",
+                    isNewThread ? "" : "pointer-events-none opacity-0",
+                  )}
+                >
+                  <Welcome />
+                </div>
+                <InputBox
+                  className={cn("z-30 w-full")}
+                  autoFocus={isNewThread}
+                  status={thread.isLoading ? "streaming" : "ready"}
+                  context={settings.context}
+                  onContextChange={(context) => setSettings("context", context)}
+                  onSubmit={handleSubmit}
+                  onStop={handleStop}
+                />
+              </div>
             </div>
           </main>
         </div>

frontend/src/components/workspace/input-box.tsx

@@ -12,6 +12,7 @@ import {
   PromptInputBody,
   PromptInputButton,
   PromptInputFooter,
+  PromptInputHeader,
   PromptInputSubmit,
   PromptInputTextarea,
   type PromptInputMessage,
@@ -45,6 +46,7 @@ export function InputBox({
   autoFocus,
   status = "ready",
   context,
+  showWelcome = false,
   onContextChange,
   onSubmit,
   onStop,
@@ -53,6 +55,7 @@ export function InputBox({
   assistantId?: string | null;
   status?: ChatStatus;
   context: Omit<AgentThreadContext, "thread_id">;
+  showWelcome?: boolean;
   onContextChange?: (context: Omit<AgentThreadContext, "thread_id">) => void;
   onSubmit?: (message: PromptInputMessage) => void;
   onStop?: () => void;
@@ -94,7 +97,7 @@ export function InputBox({
   return (
     <PromptInput
       className={cn(
-        "bg-background/50 rounded-2xl drop-shadow-2xl backdrop-blur-sm transition-all duration-300 ease-out *:data-[slot='input-group']:rounded-2xl",
+        "bg-background/50 rounded-2xl backdrop-blur-sm transition-all duration-300 ease-out *:data-[slot='input-group']:rounded-2xl",
         "focus-within:bg-background/85 h-48 translate-y-14 overflow-hidden",
         className,
       )}

frontend/src/components/workspace/welcome.tsx

@@ -0,0 +1,25 @@
+import { cn } from "@/lib/utils";
+
+export function Welcome({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "mx-auto flex w-full flex-col items-center justify-center gap-2 px-8 py-4 text-center",
+        className,
+      )}
+    >
+      <div className="text-2xl font-bold">👋 Hello, again!</div>
+      <div className="text-muted-foreground text-sm">
+        <p>
+          Welcome to 🦌 DeerFlow, an open source super agent. With built-in and
+          custom
+        </p>
+        <p>
+          skills, DeerFlow helps you search on the web, analyze data, and
+          generate
+        </p>{" "}
+        <p>artifacts like slides, web pages and do almost anything.</p>
+      </div>
+    </div>
+  );
+}