feat(skills): add AI skill optimization with streaming support (agentscope-ai#853)

walker83 · walker83 · web-flow · commit 790138c3f7c1 · 2026-03-12T16:17:28.000+08:00
Co-authored-by: walker83 &lt;itkigntao@126.com&gt;
diff --git a/console/src/api/modules/skill.ts b/console/src/api/modules/skill.ts
@@ -1,6 +1,15 @@
 import { request } from "../request";
 import type { HubSkillSpec, SkillSpec } from "../types";
 
+// Declare BASE_URL as global (injected by Vite)
+declare const BASE_URL: string;
+
+// Get the API base URL for streaming requests
+function getStreamApiUrl(): string {
+  const base = typeof BASE_URL === "string" ? BASE_URL : "";
+  return `${base}/api`;
+}
+
 export const skillApi = {
   listSkills: () => request<SkillSpec[]>("/skills"),
 
@@ -54,4 +63,68 @@ export const skillApi = {
       method: "POST",
       body: JSON.stringify(payload),
     }),
+
+  // Stream optimize skill with SSE (supports abort via signal)
+  streamOptimizeSkill: async function (
+    content: string,
+    onChunk: (text: string) => void,
+    signal: AbortSignal,
+    language: string = "en",
+  ): Promise<void> {
+    const apiUrl = getStreamApiUrl();
+
+    const response = await fetch(`${apiUrl}/skills/ai/optimize/stream`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ content, language }),
+      signal,
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const reader = response.body?.getReader();
+    if (!reader) {
+      throw new Error("No reader available");
+    }
+
+    const decoder = new TextDecoder();
+    let buffer = "";
+
+    try {
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+
+        for (let i = 0; i < lines.length - 1; i++) {
+          const line = lines[i].trim();
+          if (line.startsWith("data: ")) {
+            const data = line.slice(6);
+            try {
+              const parsed = JSON.parse(data);
+              if (parsed.text) {
+                onChunk(parsed.text);
+              } else if (parsed.error) {
+                throw new Error(parsed.error);
+              } else if (parsed.done) {
+                return;
+              }
+            } catch {
+              // Skip invalid JSON
+            }
+          }
+        }
+
+        buffer = lines[lines.length - 1];
+      }
+    } finally {
+      reader.releaseLock();
+    }
+  },
 };
diff --git a/console/src/locales/en.json b/console/src/locales/en.json
@@ -20,6 +20,7 @@
     "copied": "Copied to clipboard",
     "copyFailed": "Failed to copy to clipboard",
     "contentPlaceholder": "Enter content...",
+    "help": "Help",
     "close": "Close"
   },
   "nav": {
@@ -80,7 +81,7 @@
     "pleaseInputName": "Please input skill name",
     "pleaseInputContent": "Please input skill content",
     "skillNamePlaceholder": "e.g., weather_query",
-    "contentPlaceholder": "---\nname: <skill_name> (required)\ndescription: <skill description> (required)\nmetadata: { \"copaw\": { \"emoji\": \"🔧\" } }\n---\n\nSkill implementation content...\n\n# Example:\n# ---\n# name: cron\n# description: Manage cron jobs via copaw commands - create, query, pause, resume, delete tasks\n# metadata: { \"copaw\": { \"emoji\": \"⏰\" } }\n# ---",
+    "contentPlaceholder": "[Format]\n---\nname: skill_name (required, lowercase with underscores)\ndescription: Brief description (required)\n---\n\nSkill implementation (Markdown format)\n\n[Example]\n---\nname: weather_query\ndescription: Query weather info for a city\n---\n\n## Features\nQuery real-time weather data.\n\n## Usage\nUser inputs city name, returns weather info.",
     "createSuccess": "Skill created successfully",
     "createFailed": "Failed to create skill",
     "deleteConfirm": "Are you sure you want to delete this skill?",
@@ -93,7 +94,12 @@
     "frontmatterDescriptionRequired": "Skills missing required field : description",
     "editNotSupported": "Edit operation is not supported by backend API",
     "editNote": "Note: Backend API does not support editing skills. You can only view or toggle enable/disable status.",
-    "create": "Create"
+    "create": "Create",
+    "optimizeWithAI": "AI Optimize",
+    "stopOptimize": "Stop",
+    "optimizeSuccess": "Skill optimized successfully",
+    "optimizeFailed": "Failed to optimize skill",
+    "noContentToOptimize": "No content to optimize"
   },
   "mcp": {
     "title": "MCP Clients",
diff --git a/console/src/locales/ru.json b/console/src/locales/ru.json
@@ -80,7 +80,7 @@
     "pleaseInputName": "Пожалуйста, введите название навыка",
     "pleaseInputContent": "Пожалуйста, введите содержимое навыка",
     "skillNamePlaceholder": "например, weather_query",
-    "contentPlaceholder": "---\nname: <skill_name> (обязательно)\ndescription: <описание навыка> (обязательно)\nmetadata: { \"copaw\": { \"emoji\": \"🔧\" } }\n---\n\nСодержимое реализации навыка...\n\n# Пример:\n# ---\n# name: cron\n# description: Управление cron-задачами через команды copaw - создание, просмотр, пауза, возобновление и удаление задач\n# metadata: { \"copaw\": { \"emoji\": \"⏰\" } }\n# ---",
+    "contentPlaceholder": "[Формат]\n---\nname: skill_name (обязательно, строчные буквы с подчёркиванием)\ndescription: Краткое описание (обязательно)\n---\n\nРеализация навыка (формат Markdown)\n\n[Пример]\n---\nname: weather_query\ndescription: Запрос информации о погоде для города\n---\n\n## Функции\nЗапрос данных о погоде в реальном времени.\n\n## Использование\nПользователь вводит название города, возвращается информация о погоде.",
     "createSuccess": "Навык успешно создан",
     "createFailed": "Не удалось создать навык",
     "deleteConfirm": "Вы уверены, что хотите удалить этот навык?",
@@ -93,7 +93,12 @@
     "frontmatterDescriptionRequired": "В навыке отсутствует обязательное поле: description",
     "editNotSupported": "Операция редактирования не поддерживается API бэкенда",
     "editNote": "Примечание: API бэкенда не поддерживает редактирование навыков. Можно только просматривать и переключать статус включения/отключения.",
-    "create": "Создать"
+    "create": "Создать",
+    "optimizeWithAI": "AI Оптимизация",
+    "stopOptimize": "Стоп",
+    "optimizeSuccess": "Навык успешно оптимизирован",
+    "optimizeFailed": "Не удалось оптимизировать навык",
+    "noContentToOptimize": "Нет содержимого для оптимизации"
   },
   "mcp": {
     "title": "MCP-клиенты",
diff --git a/console/src/locales/zh.json b/console/src/locales/zh.json
@@ -20,6 +20,7 @@
     "copied": "已复制到剪贴板",
     "copyFailed": "复制到剪贴板失败",
     "contentPlaceholder": "输入内容...",
+    "help": "帮助",
     "close": "关闭"
   },
   "nav": {
@@ -80,7 +81,7 @@
     "pleaseInputName": "请输入技能名称",
     "pleaseInputContent": "请输入技能内容",
     "skillNamePlaceholder": "例如：weather_query",
-    "contentPlaceholder": "---\nname: <技能名称>（必填）\ndescription: <技能功能描述>（必填）\nmetadata: { \"copaw\": { \"emoji\": \"🔧\" } }\n---\n\n技能实现内容...\n\n# 示例：\n# ---\n# name: cron\n# description: 通过 copaw 命令管理定时任务 - 创建、查询、暂停、恢复、删除任务\n# metadata: { \"copaw\": { \"emoji\": \"⏰\" } }\n# ---",
+    "contentPlaceholder": "【格式要求】\n---\nname: 技能名称（必填，英文小写下划线）\ndescription: 功能描述（必填，简洁清晰）\n---\n\n技能实现内容（Markdown格式）\n\n【示例】\n---\nname: weather_query\ndescription: 查询指定城市的天气信息\n---\n\n## 功能\n查询实时天气数据。\n\n## 使用\n用户输入城市名，返回天气信息。",
     "createSuccess": "技能创建成功",
     "createFailed": "技能创建失败",
     "deleteConfirm": "确定要删除此技能吗？",
@@ -93,7 +94,12 @@
     "frontmatterDescriptionRequired": "Skills 中缺少必填字段：description",
     "editNotSupported": "后端API不支持编辑操作",
     "editNote": "注意：后端API不支持编辑技能。您只能查看或切换启用/禁用状态。",
-    "create": "创建"
+    "create": "创建",
+    "optimizeWithAI": "AI优化",
+    "stopOptimize": "停止",
+    "optimizeSuccess": "技能优化成功",
+    "optimizeFailed": "技能优化失败",
+    "noContentToOptimize": "没有可优化的内容"
   },
   "mcp": {
     "title": "MCP 客户端",
diff --git a/console/src/pages/Agent/Skills/components/SkillDrawer.tsx b/console/src/pages/Agent/Skills/components/SkillDrawer.tsx
@@ -1,9 +1,11 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { Drawer, Form, Input, Button, message } from "@agentscope-ai/design";
 import { useTranslation } from "react-i18next";
+import { ThunderboltOutlined, StopOutlined } from "@ant-design/icons";
 import type { FormInstance } from "antd";
 import type { SkillSpec } from "../../../../api/types";
 import { MarkdownCopy } from "../../../../components/MarkdownCopy/MarkdownCopy";
+import { api } from "../../../../api";
 
 /**
  * Parse frontmatter from content string.
@@ -48,9 +50,11 @@ export function SkillDrawer({
   onSubmit,
   onContentChange,
 }: SkillDrawerProps) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const [showMarkdown, setShowMarkdown] = useState(true);
   const [contentValue, setContentValue] = useState("");
+  const [optimizing, setOptimizing] = useState(false);
+  const abortControllerRef = useRef<AbortController | null>(null);
 
   const validateFrontmatter = useCallback(
     (_: unknown, value: string) => {
@@ -105,13 +109,55 @@ export function SkillDrawer({
   const handleContentChange = (content: string) => {
     setContentValue(content);
     form.setFieldsValue({ content });
-    // Re-validate the content field to give real-time feedback
     form.validateFields(["content"]).catch(() => {});
     if (onContentChange) {
       onContentChange(content);
     }
   };
 
+  const handleOptimize = async () => {
+    if (!contentValue.trim()) {
+      message.warning(t("skills.noContentToOptimize"));
+      return;
+    }
+
+    setOptimizing(true);
+    abortControllerRef.current = new AbortController();
+    const originalContent = contentValue;
+    setContentValue(""); // Clear content for streaming output
+
+    try {
+      await api.streamOptimizeSkill(
+        originalContent,
+        (textChunk) => {
+          setContentValue((prev) => {
+            const newContent = prev + textChunk;
+            form.setFieldsValue({ content: newContent });
+            return newContent;
+          });
+        },
+        abortControllerRef.current.signal,
+        i18n.language, // Pass current language to API
+      );
+      message.success(t("skills.optimizeSuccess"));
+    } catch (error: any) {
+      if (error.name !== "AbortError") {
+        message.error(error.message || t("skills.optimizeFailed"));
+      }
+    } finally {
+      setOptimizing(false);
+      abortControllerRef.current = null;
+    }
+  };
+
+  const handleStopOptimize = () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      setOptimizing(false);
+      abortControllerRef.current = null;
+    }
+  };
+
   return (
     <Drawer
       width={520}
@@ -154,15 +200,37 @@ export function SkillDrawer({
               <div
                 style={{
                   display: "flex",
-                  justifyContent: "flex-end",
-                  gap: 8,
+                  justifyContent: "space-between",
                   marginTop: 16,
                 }}
               >
-                <Button onClick={onClose}>{t("common.cancel")}</Button>
-                <Button type="primary" htmlType="submit">
-                  {t("skills.create")}
-                </Button>
+                <div style={{ display: "flex", gap: 8 }}>
+                  {!optimizing ? (
+                    <Button
+                      type="default"
+                      icon={<ThunderboltOutlined />}
+                      onClick={handleOptimize}
+                      disabled={!contentValue.trim()}
+                    >
+                      {t("skills.optimizeWithAI")}
+                    </Button>
+                  ) : (
+                    <Button
+                      type="default"
+                      danger
+                      icon={<StopOutlined />}
+                      onClick={handleStopOptimize}
+                    >
+                      {t("skills.stopOptimize")}
+                    </Button>
+                  )}
+                </div>
+                <div style={{ display: "flex", gap: 8 }}>
+                  <Button onClick={onClose}>{t("common.cancel")}</Button>
+                  <Button type="primary" htmlType="submit">
+                    {t("skills.create")}
+                  </Button>
+                </div>
               </div>
             </Form.Item>
           </>
diff --git a/src/copaw/app/routers/__init__.py b/src/copaw/app/routers/__init__.py
@@ -6,6 +6,7 @@
 from .local_models import router as local_models_router
 from .providers import router as providers_router
 from .skills import router as skills_router
+from .skills_stream import router as skills_stream_router
 from .workspace import router as workspace_router
 from .envs import router as envs_router
 from .ollama_models import router as ollama_models_router
@@ -29,6 +30,7 @@
 router.include_router(providers_router)
 router.include_router(runner_router)
 router.include_router(skills_router)
+router.include_router(skills_stream_router)
 router.include_router(tools_router)
 router.include_router(workspace_router)
 router.include_router(envs_router)
diff --git a/src/copaw/app/routers/skills.py b/src/copaw/app/routers/skills.py
@@ -229,9 +229,12 @@ async def load_skill_file(
     Returns:
         File content as string, or None if not found
 
-    Example:
-        GET /skills/my_skill/files/customized/references/doc.md
-        GET /skills/builtin_skill/files/builtin/scripts/utils/helper.py
+        Example:
+
+            GET /skills/my_skill/files/customized/references/doc.md
+
+            GET /skills/builtin_skill/files/builtin/scripts/utils/helper.py
+
     """
     content = SkillService.load_skill_file(
         skill_name=skill_name,
diff --git a/src/copaw/app/routers/skills_stream.py b/src/copaw/app/routers/skills_stream.py
