create-windy 0.8.2 → 0.9.1

package/template/apps/agent-server/plugins/skill-library/client.form.js

@@ -0,0 +1,316 @@
+window.__ModuleLoader__.load({
+  id: "@southwind-ai/dsh-skill-library",
+  chunk: "client.form.js",
+  factory(require) {
+    const React = require("react"),
+      h = React.createElement;
+    const { Button } = require("@deepseek-ai/dsh-client-ui-primitives");
+    const fields = [
+      ["displayName", "技能名称", "例如：材料时间线整理", 60, true],
+      [
+        "name",
+        "调用标识",
+        "例如：material-timeline；小写英文、数字与连字符",
+        64,
+        true,
+      ],
+      [
+        "description",
+        "用途与触发场景",
+        "什么时候使用？例如：需要将多份材料中的事件按时间整理，并标明来源。",
+        2048,
+        true,
+      ],
+      [
+        "inputs",
+        "所需材料",
+        "需要用户提供哪些材料或范围？缺少信息时应先询问什么？",
+        4000,
+        false,
+      ],
+      [
+        "steps",
+        "执行步骤",
+        "每行一个步骤，例如：\n1. 确认材料与时间范围。\n2. 提取事件、时间和来源。\n3. 按时间排序，核查冲突与缺失。",
+        12000,
+        true,
+      ],
+      [
+        "output",
+        "输出要求",
+        "例如：输出时间、事件、来源三列表格，单独列出待核查项。",
+        4000,
+        true,
+      ],
+      [
+        "constraints",
+        "注意事项（选填）",
+        "例如：不补写材料中没有的事实；结论保留来源，由用户复核。",
+        4000,
+        false,
+      ],
+    ];
+    const help = {
+      displayName: "列表中显示的名称，最多 60 个字符。",
+      name: "保存后的调用方式：/调用标识。最多 64 个字符。",
+      description: "写明要解决的问题，以及什么情况下调用。",
+      inputs: "填写材料类型和范围，不填真实材料内容。",
+      steps: "按执行顺序逐行填写，信息不足时先询问用户。",
+      output: "说明输出格式、必需字段与核查方式。",
+      constraints: "可限定数据来源、允许的操作与人工复核要求。",
+    };
+    function serialize(values) {
+      const clean = (key) => (values[key] || "").trim();
+      const sections = [
+        ["所需材料", "inputs"],
+        ["执行步骤", "steps"],
+        ["输出要求", "output"],
+        ["注意事项", "constraints"],
+      ]
+        .filter(([, key]) => clean(key))
+        .map(([label, key]) => `## ${label}\n\n${clean(key)}`);
+      return `---\nname: ${JSON.stringify(clean("name"))}\nmetadata:\n  displayName: ${JSON.stringify(clean("displayName"))}\ndescription: ${JSON.stringify(clean("description"))}\nuser-invocable: true\ndisable-model-invocation: true\n---\n\n${sections.join("\n\n")}\n`;
+    }
+    function validate(values) {
+      const errors = {};
+      for (const [key, label, , limit, required] of fields) {
+        const value = values[key] || "";
+        if (required && !value.trim()) errors[key] = `请填写${label}。`;
+        else if (value.length > limit)
+          errors[key] = `${label}最多 ${limit} 个字符。`;
+        else if (value.includes("\0")) errors[key] = `${label}含无效字符。`;
+      }
+      if (values.name && !/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(values.name))
+        errors.name =
+          "请使用小写英文、数字和单个连字符，不能以连字符开头或结尾。";
+      if (
+        values.displayName &&
+        [...values.displayName].some(
+          (char) => char.charCodeAt(0) < 32 || char.charCodeAt(0) === 127,
+        )
+      )
+        errors.displayName = "技能名称须为单行文字。";
+      return errors;
+    }
+    function SkillForm({
+      editor,
+      setEditor,
+      busy,
+      save,
+      closeEditor,
+      generate,
+      error,
+    }) {
+      const [errors, setErrors] = React.useState({});
+      const values = editor.fields || {};
+      const raw = serialize(values);
+      const update = (key, value) => {
+        setEditor({ ...editor, fields: { ...values, [key]: value } });
+        setErrors((previous) => ({ ...previous, [key]: undefined }));
+      };
+      function submit(event) {
+        event.preventDefault();
+        if (busy) return;
+        const invalid = validate(values);
+        setErrors(invalid);
+        const first = Object.keys(invalid)[0];
+        if (first) {
+          event.currentTarget.elements.namedItem(first)?.focus();
+          return;
+        }
+        save(event, raw);
+      }
+      return h(
+        "form",
+        {
+          className: "windy-skills-editor windy-skills-form",
+          noValidate: true,
+          onSubmit: submit,
+        },
+        h("h2", null, "新建个人技能"),
+        h(
+          "p",
+          { className: "windy-skills-form-hint" },
+          "把可重复使用的方法写成技能。填写后自动整理为 SKILL.md，保存后可在对话中调用。",
+        ),
+        h(
+          "section",
+          { className: "windy-skills-assist", "aria-label": "Agent 辅助" },
+          h("label", { htmlFor: "skill-workflow" }, "一句话描述工作流"),
+          h("textarea", {
+            id: "skill-workflow",
+            name: "workflow",
+            rows: 2,
+            maxLength: 2000,
+            disabled: busy,
+            value: editor.workflow || "",
+            placeholder:
+              "例如：把多份材料里的事件按时间整理成表格，标明来源和矛盾点。",
+            "aria-describedby": "skill-workflow-help",
+            onChange: (event) =>
+              setEditor({ ...editor, workflow: event.target.value }),
+          }),
+          h(
+            "p",
+            { id: "skill-workflow-help", className: "windy-skills-form-hint" },
+            "只描述通用方法，不填写案件内容、个人信息或凭据。也可以直接填写下方表单。",
+          ),
+          h(
+            Button,
+            {
+              type: "button",
+              disabled: busy || !editor.workflow?.trim(),
+              onClick: generate,
+            },
+            editor.generating ? "正在生成…" : "Agent 生成草稿",
+          ),
+          editor.assistError
+            ? h("p", { role: "alert" }, editor.assistError)
+            : null,
+          editor.suggestion
+            ? h(
+                "div",
+                { className: "windy-skills-suggestion" },
+                h(
+                  "p",
+                  { role: "status" },
+                  "草稿已生成，请检查后填入表单。填入会替换当前表单内容。",
+                ),
+                h(
+                  "dl",
+                  null,
+                  fields.map(([key, label]) =>
+                    h(
+                      React.Fragment,
+                      { key },
+                      h("dt", null, label),
+                      h("dd", null, editor.suggestion[key] || "未填写"),
+                    ),
+                  ),
+                ),
+                h(
+                  "div",
+                  { className: "windy-skills-actions" },
+                  h(
+                    Button,
+                    {
+                      type: "button",
+                      disabled: busy,
+                      onClick: () => {
+                        setEditor({
+                          ...editor,
+                          fields: editor.suggestion,
+                          suggestion: null,
+                        });
+                        setErrors({});
+                      },
+                      variant: "outline",
+                    },
+                    "填入表单",
+                  ),
+                  h(
+                    Button,
+                    {
+                      type: "button",
+                      disabled: busy,
+                      onClick: () => setEditor({ ...editor, suggestion: null }),
+                    },
+                    "放弃草稿",
+                  ),
+                ),
+              )
+            : null,
+        ),
+        h(
+          "fieldset",
+          { disabled: busy },
+          h("legend", null, "技能内容"),
+          h(
+            "p",
+            { className: "windy-skills-form-hint" },
+            "标有 * 的项目为必填。",
+          ),
+          fields.map(([key, label, hint, maxLength, required]) =>
+            h(
+              "div",
+              { key, className: "windy-skills-field" },
+              h(
+                "label",
+                { htmlFor: `skill-${key}` },
+                `${label}${required ? " *" : ""}`,
+              ),
+              h(
+                key === "name" || key === "displayName" ? "input" : "textarea",
+                {
+                  id: `skill-${key}`,
+                  name: key,
+                  value: values[key] || "",
+                  required,
+                  maxLength,
+                  rows: key === "steps" ? 5 : 2,
+                  placeholder: hint,
+                  ...(key === "name"
+                    ? {
+                        autoCapitalize: "none",
+                        autoCorrect: "off",
+                        spellCheck: false,
+                      }
+                    : {}),
+                  "aria-invalid": Boolean(errors[key]),
+                  "aria-describedby": `skill-${key}-help${errors[key] ? ` skill-${key}-error` : ""}`,
+                  onChange: (event) => update(key, event.target.value),
+                  onBlur: () =>
+                    setErrors((previous) => ({
+                      ...previous,
+                      [key]: validate(values)[key],
+                    })),
+                },
+              ),
+              h(
+                "p",
+                {
+                  id: `skill-${key}-help`,
+                  className: "windy-skills-form-hint",
+                },
+                help[key],
+              ),
+              errors[key]
+                ? h(
+                    "p",
+                    { id: `skill-${key}-error`, role: "alert" },
+                    errors[key],
+                  )
+                : null,
+            ),
+          ),
+          h(
+            "details",
+            { className: "windy-skills-preview" },
+            h("summary", null, "预览 SKILL.md"),
+            h("pre", { tabIndex: 0 }, raw),
+          ),
+        ),
+        error ? h("p", { role: "alert" }, error) : null,
+        h(
+          "div",
+          { className: "windy-skills-actions windy-skills-save" },
+          h(
+            Button,
+            { type: "submit", disabled: busy, variant: "primary" },
+            "保存技能",
+          ),
+          h(
+            Button,
+            {
+              type: "button",
+              disabled: busy && !editor.generating,
+              onClick: closeEditor,
+            },
+            editor.generating ? "取消生成" : "取消",
+          ),
+        ),
+      );
+    }
+    return { default: SkillForm, serialize, validate };
+  },
+});

package/template/apps/agent-server/plugins/skill-library/client.js

@@ -0,0 +1,348 @@
+window.__ModuleLoader__.load({
+  id: "@southwind-ai/dsh-skill-library",
+  factory(require) {
+    const React = require("react"),
+      h = React.createElement;
+    const {
+      Button,
+      IconSkillOutlineRegular,
+    } = require("@deepseek-ai/dsh-client-ui-primitives");
+    const Editor = React.lazy(() => require.async("./client.editor.js"));
+    async function request(...args) {
+      return (await require.async("./client.request.js")).request(...args);
+    }
+    async function useSkill(ctx, workspaceId, item, signal) {
+      const action = await require.async("./client.use.js");
+      await action.useSkill(ctx, workspaceId, item, signal);
+    }
+    function Page({ useWorkspaces, onUse }) {
+      const workspaces = useWorkspaces((state) => state.items);
+      const [chosen, setChosen] = React.useState("");
+      const workspaceId = workspaces.some((item) => item.workspaceId === chosen)
+        ? chosen
+        : workspaces[0]?.workspaceId;
+      const [items, setItems] = React.useState([]),
+        [editor, setEditor] = React.useState(null),
+        [busy, setBusy] = React.useState(false),
+        [error, setError] = React.useState(""),
+        [notice, setNotice] = React.useState(""),
+        [confirm, setConfirm] = React.useState(false);
+      const active = React.useRef(),
+        upload = React.useRef();
+      React.useEffect(() => () => active.current?.abort(), []);
+      async function perform(operation) {
+        active.current?.abort();
+        const controller = new AbortController();
+        active.current = controller;
+        setBusy(true);
+        setError("");
+        setNotice("");
+        try {
+          await operation(controller.signal);
+        } catch (reason) {
+          if (!controller.signal.aborted)
+            setError(reason.message ?? "操作失败，请重试。");
+        } finally {
+          if (!controller.signal.aborted) setBusy(false);
+        }
+      }
+      async function refresh(signal) {
+        const response = await request({ action: "list", workspaceId }, signal);
+        const data = await response.json();
+        if (!signal.aborted) setItems(data.items);
+      }
+      React.useEffect(() => {
+        setItems([]);
+        setEditor(null);
+        setConfirm(false);
+        if (workspaceId) void perform(refresh);
+        else {
+          active.current?.abort();
+          setBusy(false);
+        }
+        return () => active.current?.abort();
+      }, [workspaceId]);
+      function edit(item) {
+        void perform(async (signal) => {
+          const response = await request(
+            {
+              action: "read",
+              workspaceId,
+              name: item.name,
+              source: item.source,
+            },
+            signal,
+          );
+          const data = await response.json();
+          if (!signal.aborted) {
+            setConfirm(false);
+            setEditor({ ...item, ...data });
+          }
+        });
+      }
+      function mutate(action, raw = editor.raw) {
+        void perform(async (signal) => {
+          await request(
+            {
+              action,
+              workspaceId,
+              name: editor.name,
+              source: editor.source,
+              raw,
+              version: editor.version,
+              ...(action === "delete" ? { confirmed: true } : {}),
+            },
+            signal,
+          );
+          if (!signal.aborted) {
+            setEditor(null);
+            setConfirm(false);
+            setNotice(
+              action === "delete"
+                ? "个人技能已删除。"
+                : "技能已保存，下一轮对话可使用。",
+            );
+          }
+          await refresh(signal);
+        });
+      }
+      function save(event, raw = editor.raw) {
+        event.preventDefault();
+        if (!busy) mutate(editor.isNew ? "create" : "save", raw);
+      }
+      function generate() {
+        if (busy) return;
+        void perform(async (signal) => {
+          const { generateDraft } = await require.async("./client.request.js");
+          signal.throwIfAborted();
+          await generateDraft(editor, workspaceId, setEditor, signal);
+        });
+      }
+      const remove = () => mutate("delete");
+      function exportSkill(item) {
+        void perform(async (signal) => {
+          const { exportSkill } = await require.async("./client.transfer.js");
+          await exportSkill(item, workspaceId, request, signal);
+          if (signal.aborted) return;
+          setNotice("技能包已导出，可分享给其他用户主动导入。");
+        });
+      }
+      function importFile(event) {
+        const file = event.target.files?.[0];
+        event.target.value = "";
+        if (!file) return;
+        void perform(async (signal) => {
+          const { importSkill } = await require.async("./client.transfer.js");
+          const raw = await importSkill(file, workspaceId, request, signal);
+          if (signal.aborted) return;
+          if (raw !== null) setEditor({ isNew: true, raw, source: "personal" });
+          else {
+            setNotice("技能包已导入，附件已保留。");
+            await refresh(signal);
+          }
+        });
+      }
+      const text = (value, props) => h("p", props, value);
+      const actions = (...children) =>
+        h("div", { className: "windy-skills-actions" }, ...children);
+      const button = (label, onClick, props = {}) =>
+        h(Button, { type: "button", disabled: busy, onClick, ...props }, label);
+      const closeEditor = () => {
+        active.current?.abort();
+        setBusy(false);
+        setEditor(editor?.generating ? { ...editor, generating: false } : null);
+        setConfirm(false);
+        setError("");
+      };
+      return h(
+        "section",
+        { className: "windy-skills", "aria-label": "技能", "aria-busy": busy },
+        h(
+          "div",
+          { className: "windy-skills-content" },
+          h(
+            "header",
+            null,
+            h(
+              "div",
+              null,
+              h("h1", null, "技能"),
+              text("选择技能，开始处理当前任务。", {
+                className: "windy-skills-intro",
+              }),
+            ),
+            actions(
+              button(
+                "新建技能",
+                () => {
+                  setEditor({
+                    key: Date.now(),
+                    isNew: true,
+                    structured: true,
+                    fields: {},
+                    raw: "",
+                    source: "personal",
+                  });
+                  setError("");
+                  setNotice("");
+                  setConfirm(false);
+                },
+                { disabled: busy || !workspaceId, variant: "primary" },
+              ),
+              button("导入技能", () => upload.current?.click(), {
+                disabled: busy || !workspaceId,
+                variant: "outline",
+              }),
+              button("刷新", () => void perform(refresh), {
+                disabled: busy || !workspaceId,
+              }),
+            ),
+          ),
+          h(
+            "label",
+            { className: "windy-skills-workspace" },
+            "工作区",
+            h(
+              "select",
+              {
+                value: workspaceId ?? "",
+                disabled: busy,
+                onChange: (event) => setChosen(event.target.value),
+              },
+              workspaces.map((workspace) =>
+                h(
+                  "option",
+                  { key: workspace.workspaceId, value: workspace.workspaceId },
+                  workspace.title === "default-workspace"
+                    ? "默认工作区"
+                    : workspace.title,
+                ),
+              ),
+            ),
+          ),
+          h("input", {
+            type: "file",
+            accept: ".md,.zip",
+            hidden: true,
+            ref: upload,
+            onChange: importFile,
+            "aria-label": "导入技能文件",
+          }),
+          error && !editor ? text(error, { role: "alert" }) : null,
+          notice ? text(notice, { role: "status" }) : null,
+          !workspaceId ? text("请先创建或选择一个工作区。") : null,
+          editor
+            ? h(
+                React.Suspense,
+                { fallback: text("正在打开技能…", { role: "status" }) },
+                h(Editor, {
+                  key: editor.key,
+                  editor,
+                  busy,
+                  save,
+                  setEditor,
+                  closeEditor,
+                  exportSkill,
+                  confirm,
+                  setConfirm,
+                  remove,
+                  generate,
+                  error,
+                }),
+              )
+            : h(
+                React.Fragment,
+                null,
+                text("默认技能只读；个人技能保存在所选工作区，可导出分享。", {
+                  className: "windy-skills-hint",
+                }),
+                busy && !items.length
+                  ? text("正在加载技能…", { role: "status" })
+                  : null,
+                !busy && workspaceId && !items.length
+                  ? text("当前没有技能，可新建或导入。")
+                  : null,
+                h(
+                  "ul",
+                  { className: "windy-skills-grid" },
+                  items.map((item) =>
+                    h(
+                      "li",
+                      {
+                        key: `${item.source}:${item.name}`,
+                        className: "windy-skill-card",
+                      },
+                      h(
+                        "div",
+                        { className: "windy-skill-heading" },
+                        h(IconSkillOutlineRegular, {
+                          size: 22,
+                          "aria-hidden": true,
+                        }),
+                        h("h2", null, item.displayName ?? item.name),
+                        h("small", null, item.readOnly ? "默认" : "个人"),
+                      ),
+                      text(item.description, {
+                        className: "windy-skill-description",
+                      }),
+                      actions(
+                        button(
+                          "使用",
+                          () =>
+                            void perform((signal) =>
+                              onUse(workspaceId, item, signal),
+                            ),
+                          {
+                            variant: "outline",
+                            disabled:
+                              busy ||
+                              !workspaceId ||
+                              item.userInvocable === false,
+                            "aria-label": `使用${item.displayName ?? item.name}`,
+                            title:
+                              item.userInvocable === false
+                                ? "此技能仅供 Agent 自动调用"
+                                : "在所选工作区准备技能对话",
+                          },
+                        ),
+                        button(item.readOnly ? "查看" : "编辑", () =>
+                          edit(item),
+                        ),
+                        button("导出分享包", () => exportSkill(item)),
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+        ),
+      );
+    }
+    function apply(ctx) {
+      ctx.slots.inject("main", () =>
+        ctx.slots.register({ name: "main", key: "windy-skills" }, (props) =>
+          h(Page, {
+            ...props,
+            onUse: (workspaceId, item, signal) =>
+              useSkill(ctx, workspaceId, item, signal),
+          }),
+        ),
+      );
+      ctx.slots.inject("sidebar.panellist", () =>
+        ctx.slots.register(
+          {
+            name: "sidebar.panellist",
+            id: "windy-skills",
+            order: 5,
+            label: () => "技能",
+          },
+          IconSkillOutlineRegular,
+        ),
+      );
+    }
+    return {
+      inject: ["slots", "uiWorkspace", "sessions", "conversation"],
+      apply,
+      useSkill,
+    };
+  },
+});