@blocklet/pages-kit-agents 0.5.40 → 0.5.42

package/lib/cjs/agents/template-designer.d.ts

@@ -0,0 +1,13 @@
+import { AIAgent } from '@aigne/core';
+/**
+ * 用于设计页面结构的 workflow
+ * 1. AI 根据拿到的 collectorResult 和 componentList，生成一个页面设计模板，需要用 ASCII 图画出来，给到用户确认
+ * 2. 用户确认后，AI 保存页面设计模板，并返回页面设计模板
+ */
+export declare const designerAgent: AIAgent<{
+    collectResult: string;
+}, {
+    ascii: string;
+    $message: string;
+    filteredComponentList: string[];
+}>;

package/lib/cjs/agents/template-designer.js

@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.designerAgent = void 0;
+const index_js_1 = require("@aigne/agent-library/default-memory/index.js");
+const core_1 = require("@aigne/core");
+const node_assert_1 = __importDefault(require("node:assert"));
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
+const zod_1 = require("zod");
+const { OPENAI_API_KEY } = process.env;
+(0, node_assert_1.default)(OPENAI_API_KEY, 'Please set the OPENAI_API_KEY environment variable');
+const memory = new index_js_1.DefaultMemory({
+    storage: {
+        url: 'file:./dbs/memory.db', // Path to store memory data, such as 'file:./memory.db'
+    },
+});
+const componentList = node_fs_1.default.readFileSync(node_path_1.default.join(__dirname, '../data-sources/pages-kit-component-list.yaml'), 'utf-8');
+const agentInstructions = `
+你是一个专业的页面设计师，名叫小设。你的任务是根据整理好的用户需求，设计一个页面结构。
+
+设计规则：
+1. 设计的页面结构，需要画出 ASCII 图，给到用户确认
+2. 需要在 ASCII 图上，标注出结构和放什么内容
+3. 需要在限定的组件列表中，选择合适的组件
+4. 具有把拼装复合组件的能力，如果涉及到复合组件，请将他们框选起来，标注出复合组件的结构
+5. 不用告诉用户这是 ASCII 图，用户不关心，用户只关心页面设计模板
+6. 你只能使用支持的组件列表中的组件，不能使用其他组件
+7. 如果在没有找到合适的组件，请使用拼装组件的能力，将多个组件拼装起来，形成一个复合组件
+
+
+支持使用的组件列表：
+<component-list>
+${componentList}
+</component-list>
+
+整理好的用户需求：
+<collect-result>
+{{collectResult}}
+</collect-result>
+
+用户反馈：
+<<< {{userFeedBack}} >>>
+`;
+/**
+ * 用于设计页面结构的 workflow
+ * 1. AI 根据拿到的 collectorResult 和 componentList，生成一个页面设计模板，需要用 ASCII 图画出来，给到用户确认
+ * 2. 用户确认后，AI 保存页面设计模板，并返回页面设计模板
+ */
+exports.designerAgent = core_1.AIAgent.from({
+    name: 'designer',
+    description: '设计页面结构，并且给到用户确认',
+    inputSchema: zod_1.z.object({
+        collectResult: zod_1.z.string().describe('整理好的用户需求'),
+    }),
+    outputSchema: zod_1.z.object({
+        ascii: zod_1.z.string().describe('ASCII 图'),
+        $message: zod_1.z.string().describe('给到用户的信息，用于用户确认，不需要包含 ASCII 图'),
+        filteredComponentList: zod_1.z.array(zod_1.z.string()).describe('过滤后的组件列表，只包含页面设计需要的组件'),
+    }),
+    memory,
+    instructions: `
+${agentInstructions}
+  `,
+});

package/lib/cjs/agents/template-generator.d.ts

@@ -0,0 +1,18 @@
+import { FunctionAgent } from '@aigne/core';
+import { ReflectionAgent } from '../workflow-agents/reflection-agent.js';
+export declare const generatorAgentWithReflection: ReflectionAgent<{
+    ascii: string;
+    collectResult: string;
+    $message: string;
+    filteredComponentList: string[];
+    feedback?: string | null | undefined;
+}, {
+    isApproved: boolean;
+    feedback: string;
+}>;
+export declare const saveYamlAgent: FunctionAgent<{
+    $message: string;
+    yaml: string;
+}, {
+    $message: string;
+} & import("@aigne/core").Message>;

package/lib/cjs/agents/template-generator.js

@@ -0,0 +1,186 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.saveYamlAgent = exports.generatorAgentWithReflection = void 0;
+const index_js_1 = require("@aigne/agent-library/default-memory/index.js");
+const core_1 = require("@aigne/core");
+const node_assert_1 = __importDefault(require("node:assert"));
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
+const zod_1 = require("zod");
+const reflection_agent_js_1 = require("../workflow-agents/reflection-agent.js");
+const { OPENAI_API_KEY } = process.env;
+(0, node_assert_1.default)(OPENAI_API_KEY, 'Please set the OPENAI_API_KEY environment variable');
+const memory = new index_js_1.DefaultMemory({
+    storage: {
+        url: 'file:./dbs/memory.db', // Path to store memory data, such as 'file:./memory.db'
+    },
+});
+const componentList = node_fs_1.default.readFileSync(node_path_1.default.join(__dirname, '../data-sources/pages-kit-component-list.yaml'), 'utf-8');
+const pagesKitTemplateRule = node_fs_1.default.readFileSync(node_path_1.default.join(__dirname, '../data-sources/pages-kit-template-rule.md'), 'utf-8');
+const generatorAgentInstructions = `
+你是专业的 Pages Kit 模板工程师小猿。你的任务是根据用户需求和设计师的页面设计模板，生成完全符合 Pages Kit 框架规范的 YAML 结构。
+
+## 核心职责
+基于提供的用户需求、设计师ASCII图和组件列表，生成可直接使用的 Pages Kit YAML 模板。
+
+## 严格遵循的编码原则
+1. **结构完整性**: 必须完全符合 Pages Kit 框架的 YAML Schema 结构规范
+2. **设计一致性**: 严格按照设计师的页面设计模板实现，不得擅自修改布局和结构
+3. **组件组合**: 当单个组件无法满足设计需求时，使用多个组件组合实现复杂布局
+4. **ID唯一性**: 所有涉及 id 的属性值必须唯一，使用16位随机字符串（字母+数字混合，无语义化）
+5. **语义准确性**: 确保组件选择和属性配置准确反映用户需求和设计意图
+
+## 输出要求
+- 生成完整可执行的 YAML 结构
+- 在 $message 中简洑说明实现思路和关键设计决策
+- 确保所有组件都来自提供的过滤组件列表
+- 必须返回所有输入字段以保持数据流的完整性
+
+## 技术规范参考
+<pages-kit-template-rule>
+${pagesKitTemplateRule}
+</pages-kit-template-rule>
+
+## 全部可用组件
+<component-list>
+${componentList}
+</component-list>
+
+## 当前任务输入
+用户需求：
+<collect-result>
+{{collectResult}}
+</collect-result>
+
+设计师页面模板：
+<ascii>
+{{ascii}}
+</ascii>
+
+本次可使用的组件（已过滤）：
+<filtered-component-list>
+{{filteredComponentList}}
+</filtered-component-list>
+
+<#if feedback>
+## 验证反馈
+上一次生成的YAML结构存在以下问题，请根据反馈进行修正：
+<feedback>
+{{feedback}}
+</feedback>
+</#if>
+
+<#if yaml>
+## 上一次生成的YAML结构
+<yaml>
+{{yaml}}
+</yaml>
+</#if>
+
+请严格按照上述要求生成YAML结构，并确保返回所有必需的字段。`;
+const validatorAgentInstructions = `
+你是专业的 Pages Kit 模板验证专家小验。你的任务是严格验证生成的 YAML 结构是否完全符合 Pages Kit 框架规范。
+
+## 核心职责
+对生成的 YAML 模板进行全面技术验证，确保其在 Pages Kit 框架中能够正确运行。
+
+## 验证检查清单
+1. **结构规范性**: 严格检查是否完全符合 Pages Kit 框架的 YAML Schema 结构
+2. **语法正确性**: 验证 YAML 语法格式是否正确，缩进、字段名等是否准确
+3. **ID唯一性**: 所有 id 属性值必须唯一且为16位随机字符串（字母数字混合，非语义化）
+4. **组件合法性**: 确认所有使用的组件都在允许的组件列表中
+5. **属性完整性**: 检查必需属性是否全部提供，可选属性是否合理
+6. **嵌套层级**: 验证嵌套结构深度和层级关系是否正确
+7. **数据类型**: 确认各字段的数据类型符合规范要求
+
+## 技术规范依据
+<pages-kit-template-rule>
+${pagesKitTemplateRule}
+</pages-kit-template-rule>
+
+## 验证输入
+用户需求：{{collectResult}}
+设计师ASCII图：{{ascii}}
+可用组件列表：{{filteredComponentList}}
+生成的YAML：{{yaml}}
+
+## 验证原则
+- 零容忍态度对待规范违规
+- 优先保证模板的可执行性和稳定性
+- 发现问题时提供清晰的改进建议
+
+请对提供的 YAML 结构进行全面验证。`;
+/**
+ * 用于实现页面结构的 workflow
+ * 1. AI 根据拿到的 ASCII 图，整理好的用户需求，支持使用的组件列表，生成一个 Yaml 结构，给到验证器验证
+ * 2. 使用反思工作流，AI 自动根据验证器反馈，自动修改 Yaml 结构，直到验证器验证通过
+ * 3. 验证器验证通过后，AI 保存 Yaml 结构，并返回 Yaml 结构
+ */
+const generatorAgent = core_1.AIAgent.from({
+    name: 'generator',
+    description: '实现页面结构，并且给到用户确认',
+    inputSchema: zod_1.z.object({
+        ascii: zod_1.z.string().describe('ASCII 图'),
+        collectResult: zod_1.z.string().describe('整理好的用户需求'),
+        filteredComponentList: zod_1.z.array(zod_1.z.string()).describe('过滤后的组件列表，只包含页面设计需要的组件'),
+        $message: zod_1.z.string(),
+        feedback: zod_1.z.string().nullish().describe('Feedback from the reviewer'),
+    }),
+    outputSchema: zod_1.z.object({
+        ascii: zod_1.z.string().describe('ASCII 图'),
+        collectResult: zod_1.z.string().describe('整理好的用户需求'),
+        filteredComponentList: zod_1.z.array(zod_1.z.string()).describe('过滤后的组件列表，只包含页面设计需要的组件'),
+        $message: zod_1.z.string().describe('给到用户的信息，用于用户确认'),
+        yaml: zod_1.z.string().describe('Yaml 结构'),
+        feedback: zod_1.z.string().nullish().describe('Feedback from the reviewer'),
+    }),
+    memory,
+    instructions: `
+${generatorAgentInstructions}
+  `,
+});
+const validatorAgent = core_1.AIAgent.from({
+    name: 'validator',
+    description: '验证 Yaml 结构符合 Pages Kit 框架的 Yaml Schema 结构',
+    inputSchema: zod_1.z.object({
+        ascii: zod_1.z.string().describe('ASCII 图'),
+        collectResult: zod_1.z.string().describe('整理好的用户需求'),
+        filteredComponentList: zod_1.z.array(zod_1.z.string()).describe('过滤后的组件列表，只包含页面设计需要的组件'),
+        $message: zod_1.z.string(),
+        yaml: zod_1.z.string().describe('Yaml 结构'),
+        feedback: zod_1.z.string().nullish().describe('Feedback from the reviewer'),
+    }),
+    memory,
+    outputSchema: zod_1.z.object({
+        isApproved: zod_1.z.boolean().describe('是否符合 Pages Kit 框架的 Yaml Schema 结构'),
+        feedback: zod_1.z.string().describe('Feedback for the markdown'),
+    }),
+    instructions: `
+${validatorAgentInstructions}
+  `,
+});
+exports.generatorAgentWithReflection = new reflection_agent_js_1.ReflectionAgent({
+    name: 'generator-with-reflection',
+    maxIterations: 3,
+    editor: generatorAgent,
+    reviewer: validatorAgent,
+    isApproved: (result) => result.isApproved,
+});
+exports.saveYamlAgent = core_1.FunctionAgent.from({
+    inputSchema: zod_1.z.object({
+        $message: zod_1.z.string().describe('给到用户的信息，用于用户确认'),
+        yaml: zod_1.z.string().describe('Yaml 结构'),
+    }),
+    name: 'save-yaml',
+    description: '保存 Yaml 结构到文件',
+    async process({ yaml }) {
+        const templateName = new Date().toISOString().replace(/[:.]/g, '-');
+        const filePath = node_path_1.default.join(__dirname, `../test-templates/template-${templateName}.yaml`);
+        // 把 yaml 结构保存到文件
+        node_fs_1.default.writeFileSync(filePath, yaml);
+        return (0, core_1.createMessage)(`Yaml 结构已保存到 ${filePath}`);
+    },
+});