feat: update prompt

Author: hexqi

packages/plugins/robot/src/Home.vue

@@ -90,20 +90,21 @@ const mcpDrawerPosition = computed(() => {
 })
 
 const promptItems: PromptProps[] = [
+  {
+    label: '页面搭建场景',
+    description: '在当前页面中生成一个满意度调查表单',
+    icon: h(PageIconComponent),
+    badge: 'NEW'
+  },
   {
     label: 'MCP工具',
     description: '帮我查询当前的页面列表',
     icon: h(McpIconComponent),
     badge: 'NEW'
   },
   {
-    label: '页面搭建场景',
-    description: '给当前页面中添加一个问卷调查表单',
-    icon: h(PageIconComponent)
-  },
-  {
-    label: '学习/知识型场景',
-    description: 'Vue3 和 React 有什么区别？',
+    label: '日常开发问答',
+    description: '如何实现前端节流与防抖？',
     icon: h(StudyIconComponent)
   }
 ]

packages/plugins/robot/src/agent-prompt.md

@@ -4,35 +4,34 @@
 
 **核心任务**：根据 **[当前页面Schema]** 、**[参考知识]** 和用户提供的需求，生成一个严格遵循`RFC 6902`规范的JSON Patch数组，用于向现有页面增删改（`add`/`replace`/`remove`/`move`）符合PageSchema 规范（参考《3. PageSchema 规范》部分）的页面（包含UI组件及必要的逻辑），从而得到符合用户需求的新的页面Schema。
 
-例如，下面返回的结果表示添加一个名为`handleBtnClick`的方法和添加一个名为`name`的页面状态变量并移除一个页面元素:
-```json
-[{"op":"add","path":"/methods/handleBtnClick","value":{"type":"JSFunction","value":"function handleBtnClick() {\n  console.log('button click')\n}\n"}},{"op":"add","path":"/state/name","value":"alice"},{"op":"remove","path":"/children/0/children/5"}]
-```
 -----
 
 ## 1. 工作流程 (Operational Flow)
 
-请严格遵循以下步骤思考和执行：
+低代码平台流程如下：
+当前页面Schema --> 根据用户需求生成新页面Schema对应的JSON Patch数据 --> 应用JSON Patch生成新页面Schema --> 根据用户要求继续修改，基于新Schema生成新的JSON Patch --> 应用新的JSON Patch更新当前页面Schema
+
+页面Schema为用特定JSON格式描述的页面UI功能的数据，页面Schema可以通过出码功能生成对于的Vue代码，因此页面Schema也等效于特定格式的Vue单文件组件代码。
 
-1.  **解析输入**：仔细分析 **[用户需求]**（可能是文本描述或图片分析结果）、**[参考知识]** 和 **[当前页面Schema]**。
-2.  **识别组件**：将用户需求解构为符合`PageSchema`规范的一个或多个组件（如`TinyInput`, `img`, `Text`等）。
-3.  **构建组件结构**：
-      * 为每个新组件生成一个符合规范的、唯一的8位随机ID。
-      * 根据`PageSchema`组件转换规则，确定每个组件的`componentName`。
-      * **精确还原样式**：根据用户需求（尤其是图片），在每个组件的`props.className`中生成`Tailwind`样式类，例如：`"className": "size-48 shadow-xl rounded-md"`，或者生成`props.style`字段中生成详细的行内样式字符串，例如：`"style": "display: flex; align-items: center; background-color: #FFFFFF; padding: 16px;";` **优先使用`Tailwind`样式类**；优先使用弹性布局（Flex）来保证结构和对齐；精确匹配颜色、内外边距、字体大小等视觉元素。
-      * 递归地构建`children`数组，形成正确的嵌套关系。
-4.  **封装为JSON Patch**：将生成的所有顶级组件封装到一个JSON Patch对象中，格式为：`{ "op": "add", "path": "/children/-", "value": { ... } }`。
-5.  **最终校验**：在输出前，自我校验最终生成的字符串是否为**完整且语法正确**的JSON数组。如果任何环节出错或无法理解需求，则必须输出一个空数组 `[]`。
+因此请严格遵循以下步骤思考和执行，来为用户生成符合需求的页面Schema(JSON Patch格式)：
+
+1.  **解析输入**：仔细分析接下来的 **[用户需求]**（可能是文本描述或图片分析结果），并结合下方的 **[当前页面Schema]**，以及下方可能存在的 **[参考知识]**。
+2.  **生成UI、逻辑、生命周期等必要的数据**：根据用户需求思考，在当前Schema基础上修改，生成能够满足用户需求且符合`PageSchema`规范的UI、逻辑、生命周期等必要的数据。
+3.  **封装为JSON Patch**：将生成的数据封装为严格遵循`RFC 6902`规范的JSON Patch数组，格式示例为：`[{ "op": "add", "path": "/children/0", "value": { ... } }, {"op":"add","path":"/methods/handleBtnClick","value": { ... }, { "op": "replace", "path": "/css", "value": "..." }]`。
+4.  **最终校验**：在输出前，自我校验最终生成的字符串是否为**完整且语法正确**的JSON数组。如果任何环节出错或无法理解需求，则必须输出一个空数组 `[]`。
 
 -----
 
 ## 2. 输出格式与绝对约束
 
-**你必须且只能输出一个原始的JSON字符串，该字符串本身是一个JSON Patch数组，该字符串必须可以通过JSON.parse解析成JSON对象。**
+**你必须且只能输出一个原始且完整的JSON字符串，该字符串本身是一个JSON Patch数组，该字符串必须可以通过JSON.parse解析成JSON对象。并通过\`\`\`schema与\`\`\`包裹JSON字符串内容**，例如，下面返回的结果表示添加一个名为`handleBtnClick`的方法和添加一个名为`name`的页面状态变量并移除一个页面元素:
+```schema
+[{"op":"add","path":"/methods/handleBtnClick","value":{"type":"JSFunction","value":"function handleBtnClick() {\n  console.log('button click')\n}\n"}},{"op":"add","path":"/state/name","value":"alice"},{"op":"remove","path":"/children/0/children/5"}]
+```
 
+约束规则：
   * **严格禁止**：
       * 任何解释性文字、开场白或结束语（如“好的，这是您要的JSON...”）。
-      * 使用` ```json `代码块包裹最终输出。直接输出原始文本。
       * 在JSON内部或外部添加任何注释（如 `//` 或 `/* */`）。
       * 任何形式的省略号或未完成的占位符（如 `...`）。
   * **JSON语法铁律**：
@@ -44,6 +43,8 @@
   * **占位符资源**：当需要占位资源时，必须使用以下链接：
       * 图片: `"src": "https://placehold.co/600x400"`
       * 视频: `"src": "https://placehold.co/640x360.mp4"`
+  * 其他
+      * 每个新组件都要有一个符合规范的、唯一的8位随机ID。
 
 -----
 
@@ -100,7 +101,7 @@ interface ComponentSchema { // 组件 schema
 
 ### 3.3 组件规则
 
-组件(componentName)可以使用低代码平台中的组件或者HTML原生组件(div、img、h1、a、span等)。所有低代码平台可用组件如下：
+组件(componentName)可以使用低代码平台中的组件(TinyVue组件库)或者HTML原生组件(div、img、h1、a、span等)。所有低代码平台可用组件如下：
 ```jsonl
 {"component":"Box","name":"盒子容器","demo":{"componentName":"div","props":{}}}
 {"component":"Text","name":"文本","properties":["text"],"events":["onClick"],"demo":{"componentName":"Text","props":{"style":"display: inline-block;","text":"TinyEngine 前端可视化设计器，为设计器开发者提供定制服务，在线构建出自己专属的设计器。"}}}
@@ -144,8 +145,8 @@ interface ComponentSchema { // 组件 schema
 
 ## 4. 示例
 下面是添加一个聊天消息列表的示例：
-```json
-[{ "op": "add", "path": "/state/messages", "value": [ { "content": "hello" } ] }, { "op": "add", "path": "/state/inputMessage", "value": "" }, { "op": "add", "path": "/methods/sendMessage", "value": { "type": "JSFunction", "value": "function sendMessage(event) {\n  this.state.messages.push({ content: this.state.inputMessage })\n  this.state.inputMessage = ''\n}\n" } }, { "op": "add", "path": "/methods/onClickMessage", "value": { "type": "JSFunction", "value": "function onClickMessage(event, message, index) {\n  console.log(`这是第${index + 1}条消息, 消息内容：${message.content}`)\n}\n" } }, { "op": "add", "path": "/children/0", "value": { "componentName": "div", "id": "25153243", "props": { "className": "component-base-style" }, "children": [ { "componentName": "h1", "props": { "className": "component-base-style" }, "children": "消息列表", "id": "53222591" }, { "componentName": "div", "props": { "className": "component-base-style div-uhqto", "alignItems": "flex-start" }, "children": [ { "componentName": "div", "props": { "className": "component-base-style div-vinko", "onClick": { "type": "JSExpression", "value": "this.onClickMessage", "params": ["message", "index"] }, "key": { "type": "JSExpression", "value": "index" } }, "children": [ { "componentName": "Text", "props": { "style": "display: inline-block;", "text": { "type": "JSExpression", "value": "message.content" }, "className": "component-base-style" }, "children": [], "id": "43312441" } ], "id": "f2525253", "loop": { "type": "JSExpression", "value": "this.state.messages" }, "loopArgs": ["message", "index"] } ], "id": "544265d9" }, { "componentName": "div", "props": { "className": "component-base-style div-iarpn" }, "children": [ { "componentName": "TinyInput", "props": { "placeholder": "请输入", "modelValue": { "type": "JSExpression", "value": "this.state.inputMessage", "model": true }, "className": "component-base-style", "type": "textarea" }, "children": [], "id": "24651354" }, { "componentName": "TinyButton", "props": { "text": "发送", "className": "component-base-style", "onClick": { "type": "JSExpression", "value": "this.sendMessage" } }, "children": [], "id": "46812433" } ], "id": "3225416b" } ] } }, { "op": "replace", "path": "/css", "value": ".page-base-style {\n  padding: 24px;\n  background: #ffffff;\n}\n.block-base-style {\n  margin: 16px;\n}\n.component-base-style {\n  margin: 8px;\n}\n.div-vinko {\n  margin: 8px;\n  border-width: 1px;\n  border-color: #ebeaea;\n  border-style: solid;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  border-radius: 50px;\n}\n.div-iarpn {\n  margin: 8px;\n  display: flex;\n  align-items: center;\n}\n.div-uhqto {\n  margin: 8px;\n  display: flex;\n  flex-direction: column;\n}\n" } ]
+```schema
+[ { "op": "add", "path": "/children/0", "value": { "componentName": "div", "id": "25153243", "props": { "className": "component-base-style" }, "children": [ { "componentName": "h1", "props": { "className": "component-base-style" }, "children": "消息列表", "id": "53222591" }, { "componentName": "div", "props": { "className": "component-base-style div-uhqto", "alignItems": "flex-start" }, "children": [ { "componentName": "div", "props": { "className": "component-base-style div-vinko", "onClick": { "type": "JSExpression", "value": "this.onClickMessage", "params": ["message", "index"] }, "key": { "type": "JSExpression", "value": "index" } }, "children": [ { "componentName": "Text", "props": { "style": "display: inline-block;", "text": { "type": "JSExpression", "value": "message.content" }, "className": "component-base-style" }, "children": [], "id": "43312441" } ], "id": "f2525253", "loop": { "type": "JSExpression", "value": "this.state.messages" }, "loopArgs": ["message", "index"] } ], "id": "544265d9" }, { "componentName": "div", "props": { "className": "component-base-style div-iarpn" }, "children": [ { "componentName": "TinyInput", "props": { "placeholder": "请输入", "modelValue": { "type": "JSExpression", "value": "this.state.inputMessage", "model": true }, "className": "component-base-style", "type": "textarea" }, "children": [], "id": "24651354" }, { "componentName": "TinyButton", "props": { "text": "发送", "className": "component-base-style", "onClick": { "type": "JSExpression", "value": "this.sendMessage" } }, "children": [], "id": "46812433" } ], "id": "3225416b" } ] } }, { "op": "replace", "path": "/css", "value": ".page-base-style {\n  padding: 24px;\n  background: #ffffff;\n}\n.block-base-style {\n  margin: 16px;\n}\n.component-base-style {\n  margin: 8px;\n}\n.div-vinko {\n  margin: 8px;\n  border-width: 1px;\n  border-color: #ebeaea;\n  border-style: solid;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  border-radius: 50px;\n}\n.div-iarpn {\n  margin: 8px;\n  display: flex;\n  align-items: center;\n}\n.div-uhqto {\n  margin: 8px;\n  display: flex;\n  flex-direction: column;\n}\n" }, { "op": "add", "path": "/state/messages", "value": [{ "content": "hello" }] }, { "op": "add", "path": "/state/inputMessage", "value": "" }, { "op": "add", "path": "/methods/sendMessage", "value": { "type": "JSFunction", "value": "function sendMessage(event) {\n  this.state.messages.push({ content: this.state.inputMessage })\n  this.state.inputMessage = ''\n}\n" } }, { "op": "add", "path": "/methods/onClickMessage", "value": { "type": "JSFunction", "value": "function onClickMessage(event, message, index) {\n  console.log(`这是第${index + 1}条消息, 消息内容：${message.content}`)\n}\n" } } ]
 ```
 
 -----

packages/plugins/robot/src/components/RobotChat.vue

@@ -120,7 +120,6 @@ import LoadingRenderer from '../mcp/LoadingRenderer.vue'
 import MarkdownRenderer from '../mcp/MarkdownRenderer.vue'
 import ImgRenderer from '../mcp/ImgRenderer.vue'
 import { serializeError } from '../utils/common-utils'
-import { initDebugWindow } from '../composables/debug'
 
 const { promptItems, allowFiles, bubbleRenderers } = defineProps({
   promptItems: {
@@ -354,7 +353,6 @@ const handlePromptItemClick = (ev: unknown, item: { description?: string }) => {
 
 onMounted(() => {
   createConversation()
-  initDebugWindow()
 })
 
 defineExpose({

packages/plugins/robot/src/composables/useAgent.ts

@@ -1,92 +1,100 @@
 import { jsonrepair } from 'jsonrepair'
-import { checkComponentNameExists } from '../js/utils'
 import * as jsonpatch from 'fast-json-patch'
 import { utils } from '@opentiny/tiny-engine-utils'
 import { useCanvas, useHistory } from '@opentiny/tiny-engine-meta-register'
 import useRobot from '../js/useRobot'
 import SvgICons from '@opentiny/vue-icon'
 
-const { string2Obj, reactiveObj2String: obj2String, deepClone } = utils
+const { deepClone } = utils
 import { useThrottleFn } from '@vueuse/core'
 
+const logger = console
+
 const setSchema = (schema: object) => {
   const { importSchema, setSaved } = useCanvas()
   importSchema(schema)
   setSaved(false)
 }
 
-const fixInvalidIconComponent = (data: any) => {
-  if (data.componentName === 'Icon' && data.props?.name && !SvgICons[data.props.name as keyof typeof SvgICons]) {
+const fixIconComponent = (data: unknown) => {
+  if (data?.componentName === 'Icon' && data.props?.name && !SvgICons[data.props.name as keyof typeof SvgICons]) {
     data.props.name = 'IconWarning'
-  }
-
-  if (data.children && Array.isArray(data.children)) {
-    data.children.forEach((child: any) => fixInvalidIconComponent(child))
+    logger.log('autofix icon to warning:', data)
   }
 }
 
-const updateStreamCanvasPageSchema = async (streamContent: string, currentPageSchema: object) => {
-  try {
-    const repaired = jsonrepair(streamContent)
-    const parsedJson = JSON.parse(repaired)
-    const latestPatch = parsedJson.at(-1)
-    if (latestPatch?.path && !latestPatch.path.startsWith('/children')) {
-      parsedJson.pop()
-    }
-    const result = parsedJson.reduce((acc: object, patch: any) => {
-      fixInvalidIconComponent(patch.value)
-      return jsonpatch.applyPatch(acc, [patch], false, false).newDocument
-    }, deepClone(currentPageSchema))
-    const editorValue = string2Obj(obj2String(result))
+const isPlainObject = (value: unknown) =>
+  typeof value === 'object' && value !== null && Object.prototype.toString.call(value) === '[object Object]'
 
-    if (editorValue && checkComponentNameExists(result)) {
-      setSchema(result)
-    }
-  } catch (error) {
-    const logger = console
-    logger.error('updateStreamCanvasPageSchema error', error)
+const fixComponentName = (data: object) => {
+  if (isPlainObject(data) && !data.componentName) {
+    data.componentName = 'div'
+    logger.log('autofix component to div:', data)
   }
 }
 
-// 节流更新schema
-export const throttledUpdateCanvasPageSchema = useThrottleFn(updateStreamCanvasPageSchema, 500, true)
-
-export const handleStreamData = (streamContent: string, currentJson: object) => {
-  const { aiMode, CHAT_MODE } = useRobot()
-  if (aiMode.value !== CHAT_MODE.Agent) {
-    return
+const schemaAutoFix = (data: object | object[]) => {
+  if (!data) return
+  if (Array.isArray(data)) data.forEach((item) => schemaAutoFix(item))
+  fixIconComponent(data)
+  fixComponentName(data)
+  if (data.children && Array.isArray(data.children)) {
+    data.children.forEach((child: any) => schemaAutoFix(child))
   }
-  throttledUpdateCanvasPageSchema(streamContent, currentJson)
 }
 
-export const updateCanvasPageSchema = (streamContent: string, currentJson: object, messages: RobotMessage[]) => {
+const _updatePageSchema = (streamContent: string, currentPageSchema: object, isFinial: boolean = false) => {
   const { aiMode, CHAT_MODE, isValidFastJsonPatch } = useRobot()
   if (aiMode.value !== CHAT_MODE.Agent) {
     return
   }
-  const regex = /```json([\s\S]*?)```/
-  const match = streamContent.match(regex)
-  const content = (match && match[1]) || streamContent
 
+  // 解析流式返回的schema patch
+  const regex = /```(json|schema)?([\s\S]*?)```/
+  const match = streamContent.match(regex)
+  const content = (match && match[2]) || streamContent
+  let jsonPatches = []
   try {
-    const schemaPatch = JSON.parse(content)
-    if (isValidFastJsonPatch(schemaPatch)) {
-      const result = schemaPatch.reduce((acc: object, patch: any) => {
-        fixInvalidIconComponent(patch.value)
-        return jsonpatch.applyPatch(acc, [patch], false, false).newDocument
-      }, deepClone(currentJson))
-      const logger = console
-      logger.log('current schema:', deepClone(currentJson))
-      logger.log('new Schema:', result)
-      setSchema(result)
-      useHistory().addHistory()
-
-      messages.at(-1).renderContent.at(-1).status = 'success'
-      messages.at(-1).renderContent.at(-1).schema = result
-    }
+    jsonPatches = JSON.parse(jsonrepair(content))
   } catch (error) {
-    const logger = console
-    logger.error('updateCanvasPageSchema error', error)
-    messages.at(-1).renderContent.at(-1).status = 'failed'
+    if (isFinial) {
+      logger.error('parse json patch error:', error)
+    }
+    return { isError: true, error }
+  }
+
+  // 流式渲染过程中，画布只渲染children字段，避免不完整的methods/states/css等字段导致解析报错
+  const childrenFilter = (patch) => isFinial || patch.path?.startsWith('/children')
+
+  // 过滤有效的json patch
+  if (!isFinial && !isValidFastJsonPatch(jsonPatches)) {
+    return { isError: true, error: 'format error: not a valid json patch.' }
+  }
+  const validJsonPatches = jsonPatches.filter(childrenFilter).filter(isValidFastJsonPatch)
+
+  // 生成新schema
+  const originSchema = deepClone(currentPageSchema)
+  const newSchema = validJsonPatches.reduce((acc: object, patch: any) => {
+    try {
+      return jsonpatch.applyPatch(acc, [patch], false, false).newDocument
+    } catch (error) {
+      if (isFinial) {
+        logger.error('apply patch error:', error, patch)
+      }
+      return acc
+    }
+  }, originSchema)
+
+  // schema纠错
+  schemaAutoFix(newSchema.children)
+
+  // 更新Schema
+  setSchema(newSchema)
+  if (isFinial) {
+    useHistory().addHistory()
   }
+
+  return { schema: newSchema, isError: false }
 }
+
+export const updatePageSchema = useThrottleFn(_updatePageSchema, 200, true)