feat: implement create skill

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

@@ -56,6 +56,7 @@ export function InputBox({
   context,
   extraHeader,
   isNewThread,
+  initialValue,
   onContextChange,
   onSubmit,
   onStop,
@@ -72,6 +73,7 @@ export function InputBox({
   };
   extraHeader?: React.ReactNode;
   isNewThread?: boolean;
+  initialValue?: string;
   onContextChange?: (
     context: Omit<
       AgentThreadContext,
@@ -164,6 +166,7 @@ export function InputBox({
           disabled={disabled}
           placeholder={t.inputBox.placeholder}
           autoFocus={autoFocus}
+          defaultValue={initialValue}
         />
       </PromptInputBody>
       <PromptInputFooter className="flex">

frontend/src/components/workspace/settings/settings-dialog.tsx

@@ -31,6 +31,7 @@ type SettingsDialogProps = React.ComponentProps<typeof Dialog> & {
 
 export function SettingsDialog({
   defaultSection = "appearance",
+  onOpenChange,
   ...dialogProps
 }: SettingsDialogProps) {
   const { t } = useI18n();
@@ -60,7 +61,7 @@ export function SettingsDialog({
     ],
   );
   return (
-    <Dialog {...dialogProps}>
+    <Dialog {...dialogProps} onOpenChange={onOpenChange}>
       <DialogContent
         className="flex h-[75vh] max-h-[calc(100vh-2rem)] flex-col sm:max-w-5xl md:max-w-6xl"
         aria-describedby={undefined}
@@ -100,7 +101,11 @@ export function SettingsDialog({
             <div className="space-y-8 p-6">
               {activeSection === "appearance" && <AppearanceSettingsPage />}
               {activeSection === "tools" && <ToolSettingsPage />}
-              {activeSection === "skills" && <SkillSettingsPage />}
+              {activeSection === "skills" && (
+                <SkillSettingsPage
+                  onClose={() => onOpenChange?.(false)}
+                />
+              )}
               {activeSection === "notification" && <NotificationSettingsPage />}
               {activeSection === "acknowledge" && <AcknowledgePage />}
             </div>

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { SparklesIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
 
 import { Button } from "@/components/ui/button";
@@ -28,7 +29,7 @@ import { env } from "@/env";
 
 import { SettingsSection } from "./settings-section";
 
-export function SkillSettingsPage() {
+export function SkillSettingsPage({ onClose }: { onClose?: () => void } = {}) {
   const { t } = useI18n();
   const { skills, isLoading, error } = useSkills();
   return (
@@ -41,14 +42,21 @@ export function SkillSettingsPage() {
       ) : error ? (
         <div>Error: {error.message}</div>
       ) : (
-        <SkillSettingsList skills={skills} />
+        <SkillSettingsList skills={skills} onClose={onClose} />
       )}
     </SettingsSection>
   );
 }
 
-function SkillSettingsList({ skills }: { skills: Skill[] }) {
+function SkillSettingsList({
+  skills,
+  onClose,
+}: {
+  skills: Skill[];
+  onClose?: () => void;
+}) {
   const { t } = useI18n();
+  const router = useRouter();
   const [filter, setFilter] = useState<string>("public");
   const { mutate: enableSkill } = useEnableSkill();
   const filteredSkills = useMemo(
@@ -56,7 +64,8 @@ function SkillSettingsList({ skills }: { skills: Skill[] }) {
     [skills, filter],
   );
   const handleCreateSkill = () => {
-    console.log("create skill");
+    onClose?.();
+    router.push("/workspace/chats/new?mode=skill");
   };
   return (
     <div className="flex w-full flex-col gap-4">