feat: update skill settings

frontend/TODO.md

@@ -0,0 +1,4 @@
+[ ] feat - Skills 页面根据 Category 分组展示
+[ ] fix - autoOpen
+[ ] fix - local settings
+[ ] feat - todo

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

@@ -153,7 +153,7 @@ export function InputBox({
                         : "text-muted-foreground",
                     )}
                   >
-                    Thinking
+                    {t.inputBox.thinking}
                   </span>
                 </>
               </PromptInputButton>

frontend/src/components/workspace/settings/skill-settings-page.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import { SparklesIcon } from "lucide-react";
+import { useMemo, useState } from "react";
 
-import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   Empty,
   EmptyDescription,
@@ -44,7 +45,13 @@ export function SkillSettingsPage() {
 }
 
 function SkillSettingsList({ skills }: { skills: Skill[] }) {
+  const { t } = useI18n();
+  const [filter, setFilter] = useState<"public" | "custom">("public");
   const { mutate: enableSkill } = useEnableSkill();
+  const filteredSkills = useMemo(
+    () => skills.filter((skill) => skill.category === filter),
+    [skills, filter],
+  );
   if (skills.length === 0) {
     return (
       <Empty>
@@ -63,29 +70,59 @@ function SkillSettingsList({ skills }: { skills: Skill[] }) {
   }
   return (
     <div className="flex w-full flex-col gap-4">
-      {skills.map((skill) => (
+      <header className="flex gap-2">
-        <Item className="w-full" variant="outline" key={skill.name}>
+        <Button
-          <ItemContent>
+          className="rounded-xl"
-            <ItemTitle>
+          size="sm"
-              <div className="flex items-center gap-2">
+          variant={filter === "public" ? "default" : "outline"}
-                <div>{skill.name}</div>
+          onClick={() => setFilter("public")}
-                <Badge variant="outline">{skill.category}</Badge>
+        >
-              </div>
+          {t.common.public}
-            </ItemTitle>
+        </Button>
-            <ItemDescription className="line-clamp-4">
+        <Button
-              {skill.description}
+          className="rounded-xl"
-            </ItemDescription>
+          size="sm"
-          </ItemContent>
+          variant={filter === "custom" ? "default" : "outline"}
-          <ItemActions>
+          onClick={() => setFilter("custom")}
-            <Switch
+        >
-              checked={skill.enabled}
+          {t.common.custom}
-              onCheckedChange={(checked) =>
+        </Button>
-                enableSkill({ skillName: skill.name, enabled: checked })
+      </header>
-              }
+      {filteredSkills.length === 0 && (
-            />
+        <Empty>
-          </ItemActions>
+          <EmptyHeader>
-        </Item>
+            <EmptyMedia variant="icon">
-      ))}
+              <SparklesIcon />
+            </EmptyMedia>
+            <EmptyTitle>No skill yet</EmptyTitle>
+            <EmptyDescription>
+              Put your skill folders under the `/skills/{filter}` folder under
+              the root folder of DeerFlow.
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )}
+      {filteredSkills.length > 0 &&
+        filteredSkills.map((skill) => (
+          <Item className="w-full" variant="outline" key={skill.name}>
+            <ItemContent>
+              <ItemTitle>
+                <div className="flex items-center gap-2">{skill.name}</div>
+              </ItemTitle>
+              <ItemDescription className="line-clamp-4">
+                {skill.description}
+              </ItemDescription>
+            </ItemContent>
+            <ItemActions>
+              <Switch
+                checked={skill.enabled}
+                onCheckedChange={(checked) =>
+                  enableSkill({ skillName: skill.name, enabled: checked })
+                }
+              />
+            </ItemActions>
+          </Item>
+        ))}
     </div>
   );
 }

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

@@ -18,6 +18,8 @@ export const enUS: Translations = {
     download: "Download",
     thinking: "Thinking",
     artifacts: "Artifacts",
+    public: "Public",
+    custom: "Custom",
   },
 
   // Welcome
@@ -37,6 +39,7 @@ export const enUS: Translations = {
   // Input Box
   inputBox: {
     placeholder: "How can I assist you today?",
+    thinking: "Thinking",
     thinkingEnabled: "Thinking is enabled",
     thinkingDisabled: "Thinking is disabled",
     clickToDisableThinking: "Click to disable thinking",

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

@@ -16,6 +16,8 @@ export interface Translations {
     download: string;
     thinking: string;
     artifacts: string;
+    public: string;
+    custom: string;
   };
 
   // Welcome
@@ -34,6 +36,7 @@ export interface Translations {
   // Input Box
   inputBox: {
     placeholder: string;
+    thinking: string;
     thinkingEnabled: string;
     thinkingDisabled: string;
     clickToDisableThinking: string;

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

@@ -18,6 +18,8 @@ export const zhCN: Translations = {
     download: "下载",
     thinking: "思考",
     artifacts: "文件",
+    public: "公共",
+    custom: "自定义",
   },
 
   // Welcome
@@ -37,6 +39,7 @@ export const zhCN: Translations = {
   // Input Box
   inputBox: {
     placeholder: "今天我能为你做些什么？",
+    thinking: "思考",
     thinkingEnabled: "思考功能已启用",
     thinkingDisabled: "思考功能已禁用",
     clickToDisableThinking: "点击禁用思考功能",