feat: enhance welcome component and input box with skill mode handling and localization updates

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

@@ -9,6 +9,7 @@ import {
   PlusIcon,
   ZapIcon,
 } from "lucide-react";
+import { useSearchParams } from "next/navigation";
 import { useCallback, useMemo, useState, type ComponentProps } from "react";
 
 import {
@@ -96,6 +97,7 @@ export function InputBox({
   onStop?: () => void;
 }) {
   const { t } = useI18n();
+  const searchParams = useSearchParams();
   const [modelDialogOpen, setModelDialogOpen] = useState(false);
   const { models } = useModels();
   const selectedModel = useMemo(() => {
@@ -347,7 +349,7 @@ export function InputBox({
           />
         </PromptInputTools>
       </PromptInputFooter>
-      {isNewThread && (
+      {isNewThread && searchParams.get("mode") !== "skill" && (
         <div className="absolute right-0 -bottom-12 left-0 z-0 flex items-center justify-center">
           <SuggestionList />
         </div>

frontend/src/components/workspace/welcome.tsx

@@ -17,16 +17,28 @@ export function Welcome({ className }: { className?: string }) {
     >
       <div className="text-2xl font-bold">
         {searchParams.get("mode") === "skill"
-          ? `🚀 ${t.settings.skills.createSkill}`
+          ? `✨ ${t.welcome.createYourOwnSkill} ✨`
           : t.welcome.greeting}
       </div>
-      <div className="text-muted-foreground text-sm">
-        {t.welcome.description.includes("\n") ? (
-          <pre className="whitespace-pre">{t.welcome.description}</pre>
-        ) : (
-          <p>{t.welcome.description}</p>
-        )}
-      </div>
+      {searchParams.get("mode") === "skill" ? (
+        <div className="text-muted-foreground text-sm">
+          {t.welcome.createYourOwnSkillDescription.includes("\n") ? (
+            <pre className="font-sans whitespace-pre">
+              {t.welcome.createYourOwnSkillDescription}
+            </pre>
+          ) : (
+            <p>{t.welcome.createYourOwnSkillDescription}</p>
+          )}
+        </div>
+      ) : (
+        <div className="text-muted-foreground text-sm">
+          {t.welcome.description.includes("\n") ? (
+            <pre className="whitespace-pre">{t.welcome.description}</pre>
+          ) : (
+            <p>{t.welcome.description}</p>
+          )}
+        </div>
+      )}
     </div>
   );
 }

frontend/src/core/i18n/locales/en-US.ts

@@ -48,6 +48,10 @@ export const enUS: Translations = {
     greeting: "👋 Hello, again!",
     description:
       "Welcome to 🦌 DeerFlow, an open source super agent. With built-in and custom skills, DeerFlow helps you search on the web, analyze data, and generate artifacts like slides, web pages and do almost anything.",
+
+    createYourOwnSkill: "Create Your Own Skill",
+    createYourOwnSkillDescription:
+      "Create your own skill to release the power of DeerFlow. With customized skills,\nDeerFlow can help you search on the web, analyze data, and generate\n artifacts like slides, web pages and do almost anything.",
   },
 
   // Clipboard

frontend/src/core/i18n/locales/types.ts

@@ -36,6 +36,8 @@ export interface Translations {
   welcome: {
     greeting: string;
     description: string;
+    createYourOwnSkill: string;
+    createYourOwnSkillDescription: string;
   };
 
   // Clipboard

frontend/src/core/i18n/locales/zh-CN.ts

@@ -48,6 +48,10 @@ export const zhCN: Translations = {
     greeting: "👋 你好，欢迎回来！",
     description:
       "欢迎使用 🦌 DeerFlow，一个完全开源的超级智能体。通过内置和\n自定义的 Skills，DeerFlow 可以帮你搜索网络、分析数据，\n还能为你生成幻灯片、网页等作品，几乎可以做任何事情。",
+
+    createYourOwnSkill: "创建你自己的 Agent SKill",
+    createYourOwnSkillDescription:
+      "创建你的 Agent Skill 来释放 DeerFlow 的潜力。通过自定义技能，DeerFlow\n可以帮你搜索网络、分析数据，还能为你生成幻灯片、\n网页等作品，几乎可以做任何事情。",
   },
 
   // Clipboard