feat: update system prompt and model list

Author: hexqi

packages/plugins/robot/src/BuildLoadingRenderer.vue renamed to packages/plugins/robot/src/AgentRenderer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="build-loading-renderer">
+  <div class="build-loading-renderer" v-if="!hasReasoningFinished">
     <img :src="getIconUrl(statusData.icon)" :alt="status" />
     <div class="build-loading-renderer-content">
       <div class="build-loading-renderer-content-header">{{ statusData.title }}</div>
@@ -20,6 +20,9 @@ export default {
     status: {
       type: String,
       default: 'loading'
+    },
+    contentType: {
+      type: String
     }
   },
   setup(props) {
@@ -28,6 +31,11 @@ export default {
     }
 
     const statusDataMap = {
+      reasoning: {
+        title: '深度思考中，请稍等片刻',
+        icon: 'loading.webp',
+        content: () => props.content?.slice(-30)
+      },
       loading: {
         title: '页面生成中，请稍等片刻',
         icon: 'loading.webp',
@@ -45,8 +53,14 @@ export default {
       }
     }
 
+    const hasReasoningFinished = computed(() => props.contentType === 'reasoning' && props.status !== 'reasoning')
+
     const statusData = computed(() => {
-      const data = statusDataMap[props.status as keyof typeof statusDataMap] || statusDataMap.loading
+      let status = props.status as keyof typeof statusDataMap
+      if (props.contentType === 'reasoning') {
+        status = 'reasoning'
+      }
+      const data = statusDataMap[status] || statusDataMap.loading
       return {
         ...data,
         content: typeof data.content === 'function' ? data.content() : data.content
@@ -55,7 +69,8 @@ export default {
 
     return {
       statusData,
-      getIconUrl
+      getIconUrl,
+      hasReasoningFinished
     }
   }
 }

packages/plugins/robot/src/Home.vue

@@ -12,12 +12,8 @@
         <robot-chat
           ref="robotChatRef"
           :prompt-items="promptItems"
-          :bubbleRenderers="
-            robotSettingState.chatMode === CHAT_MODE.Agent
-              ? { markdown: BuildLoadingRenderer, loading: BuildLoadingRenderer }
-              : {}
-          "
-          :allowFiles="isVisualModel() && robotSettingState.chatMode === CHAT_MODE.Agent"
+          :bubble-renderers="bubbleRenderers"
+          :allowFiles="isVisualModel && robotSettingState.chatMode === CHAT_MODE.Agent"
           @fileSelected="handleFileSelected"
         >
           <template #operations>
@@ -45,7 +41,20 @@
               :chatMode="robotSettingState.chatMode"
               @typeChange="handleChatModeChange"
             ></robot-type-select>
-            <mcp-server :position="mcpDrawerPosition" v-if="robotSettingState.chatMode === CHAT_MODE.Chat"></mcp-server>
+            <mcp-server
+              :position="mcpDrawerPosition"
+              v-if="robotSettingState.chatMode === CHAT_MODE.Chat && isToolsModel"
+            ></mcp-server>
+            <footer-button
+              :active="robotSettingState.enableThinking"
+              tooltip-content="深度思考"
+              @update:active="toggleActive"
+            >
+              <template #icon>
+                <IconThink class="icon-think" />
+              </template>
+              <template #text> 深度思考 </template>
+            </footer-button>
           </template>
         </robot-chat>
       </div>
@@ -66,8 +75,10 @@ import StudyIconComponent from './icons/study-icon.vue'
 import type { PromptProps } from '@opentiny/tiny-robot'
 import RobotTypeSelect from './components/RobotTypeSelect.vue'
 import McpServer from './mcp/McpServer.vue'
-import BuildLoadingRenderer from './BuildLoadingRenderer.vue'
+import AgentRenderer from './AgentRenderer.vue'
 import useChat from './composables/useChat'
+import { IconThink } from '@opentiny/tiny-robot-svgs'
+import FooterButton from './mcp/FooterButton.vue'
 
 const { options } = defineProps({
   options: {
@@ -76,12 +87,19 @@ const { options } = defineProps({
   }
 })
 
+const { robotSettingState, CHAT_MODE, getModelCapabilities, saveRobotSettingState } = useRobot()
+
 const robotChatRef = ref(null)
 
 const fullscreen = computed(() => {
   return robotChatRef.value?.fullscreen
 })
 
+const toggleActive = () => {
+  robotSettingState.enableThinking = !robotSettingState.enableThinking
+  saveRobotSettingState({ enableThinking: robotSettingState.enableThinking })
+}
+
 const mcpDrawerPosition = computed(() => {
   return {
     type: 'fixed',
@@ -116,14 +134,23 @@ const promptItems: PromptProps[] = [
 const showTeleport = ref(false)
 const showSettingPopover = ref(false)
 
-const { robotSettingState, CHAT_MODE, AIModelOptions } = useRobot()
 const { inputMessage, changeChatMode } = useChat()
 
-const isVisualModel = () => {
-  const platform = AIModelOptions.find((option) => option.value === robotSettingState.selectedModel.baseUrl)
-  const modelAbility = platform?.model.find((item) => item.value === robotSettingState.selectedModel.model)
-  return modelAbility?.ability?.includes('visual') || false
-}
+const isVisualModel = computed(() => {
+  const modelCapabilities = getModelCapabilities(
+    robotSettingState.selectedModel.baseUrl,
+    robotSettingState.selectedModel.model
+  )
+  return modelCapabilities?.visual || false
+})
+
+const isToolsModel = computed(() => {
+  const modelCapabilities = getModelCapabilities(
+    robotSettingState.selectedModel.baseUrl,
+    robotSettingState.selectedModel.model
+  )
+  return modelCapabilities?.tools || false
+})
 
 const handleChatModeChange = (type: string) => {
   changeChatMode(type)
@@ -141,6 +168,12 @@ const openAIRobot = () => {
   robotChatRef.value?.openAIRobot()
 }
 
+const bubbleRenderers = computed(() => {
+  return robotSettingState.chatMode === CHAT_MODE.Agent
+    ? { markdown: AgentRenderer, loading: AgentRenderer, 'collapsible-text': AgentRenderer }
+    : {}
+})
+
 const handleFileSelected = (formData: unknown, updateAttachment: (resourceUrl: string) => void) => {
   try {
     getMetaApi(META_SERVICE.Http)

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

@@ -4,6 +4,11 @@
 
 **核心任务**：根据 **[当前页面Schema]** 、**[参考知识]** 和用户提供的需求，生成一个严格遵循`RFC 6902`规范的JSON Patch数组，用于向现有页面增删改（`add`/`replace`/`remove`/`move`）符合PageSchema 规范（参考《3. PageSchema 规范》部分）的页面（包含UI组件及必要的逻辑），从而得到符合用户需求的新的页面Schema。
 
+**⚠️ 关键提醒**：你的输出将直接被 `JSON.parse()` 解析，任何格式错误都会导致系统崩溃。请务必：
+  1. 不使用 JavaScript 模板字符串（backticks `` ` ``），改用字符串拼接
+  2. 所有换行符必须转义为 `\n`，不能有真实换行
+  3. 输出纯JSON，不带任何标记或注释
+
 -----
 
 ## 1. 工作流程 (Operational Flow)
@@ -18,34 +23,114 @@
 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数组。如果任何环节出错或无法理解需求，则必须输出一个空数组 `[]`。
+4.  **最终校验**：在输出前，必须执行以下验证步骤：
+    - 确认输出是否为**单行**的紧凑JSON字符串（不包含真实换行）
+    - 确认所有字符串内的换行都已转义为 `\n`，而非真实换行符
+    - 确认没有使用JavaScript模板字符串语法（backticks `` ` ``）
+    - 确认所有双引号都已正确转义
+    - **【新增】检查数组元素分隔**：搜索整个输出，确保没有 `]}{` 模式，应该是 `]},{`
+    - **【新增】检查对象分隔**：搜索整个输出，确保没有 `},"op":` 模式，应该是 `},{"op":`
+    - **【新增】检查括号平衡**：统计 `{` 和 `}` 的数量必须相等，`[` 和 `]` 的数量必须相等
+    - **【新增】检查嵌套深度**：从头到尾模拟括号匹配，确保深度永不为负
+    - 在心中模拟执行 `JSON.parse(你的输出)`，确保不会抛出 `SyntaxError`
+    - 如果任何环节出错或无法理解需求，则必须输出一个空数组 `[]`。
 
 -----
 
 ## 2. 输出格式与绝对约束
 
-**你必须且只能输出一个原始且完整的JSON字符串，该字符串本身是一个JSON Patch数组，该字符串必须可以通过JSON.parse解析成JSON对象。并通过\`\`\`schema与\`\`\`包裹JSON字符串内容**，例如，下面返回的结果表示添加一个名为`handleBtnClick`的方法和添加一个名为`name`的页面状态变量并移除一个页面元素:
-```schema
+**请按照json格式输出。你必须且只能输出一个原始且完整的JSON字符串，该字符串本身是一个JSON Patch数组，该字符串必须可以通过JSON.parse解析成JSON对象。**，例如，下面返回的结果表示添加一个名为`handleBtnClick`的方法和添加一个名为`name`的页面状态变量并移除一个页面元素:
 [{"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 或者 \`\`\`
       * 在JSON内部或外部添加任何注释（如 `//` 或 `/* */`）。
       * 任何形式的省略号或未完成的占位符（如 `...`）。
   * **JSON语法铁律**：
       * 所有键（key）和字符串值（value）必须使用**双引号** (`"`)。
       * 对象或数组的最后一个元素后**禁止**有多余的逗号。
       * 布尔值必须是小写的`true`或`false`，而非字符串。
       * 确保所有括号 `{}`, `[]` 都正确闭合匹配。
-      * 不允许出现空行或不必要的空格。
+      * 输出必须是**单行**的紧凑JSON字符串，不允许出现真实换行或不必要的空格。
+  * **数组和对象分隔规则（极其重要！）**：
+      * **数组元素间必须有逗号**：
+          * ❌ 致命错误：`[{...}{...}]` 或 `[{...}]{...}]` 或 `...]}{"componentName"...`
+          * ✅ 正确：`[{...},{...}]` 或 `...},{{"componentName"...`
+          * **特别注意**：`children` 数组中每个子组件间都必须有逗号！
+          * **检查模式**：绝不允许出现 `]}{` 模式，应该是 `]},{`
+      * **JSON Patch 对象间必须正确分隔**：
+          * ❌ 致命错误：`{"op":"add",...},"op":"add"` （同一对象内重复 op 字段）
+          * ✅ 正确：`{"op":"add",...},{"op":"add",...}`
+          * **检查模式**：绝不允许在对象结束后出现 `},"op":` 模式，应该是 `},{"op":`
+      * **括号必须严格平衡**：
+          * 生成完成后，必须检查 `{` 和 `}` 的数量相等，`[` 和 `]` 的数量相等
+          * 深层嵌套时特别小心，每个 `]` 和 `}` 都要有对应的开始括号
+          * 绝不允许多余的闭合括号
+  * **字符串转义铁律**（关键！避免JSON.parse失败）：
+      * 在JSON中的所有字符串值内部，必须正确转义特殊字符：
+          * 双引号转义为 `\"`
+          * 反斜杠转义为 `\\`
+          * 换行符转义为 `\n`（不能是真实换行）
+          * 制表符转义为 `\t`
+      * **严禁使用JavaScript模板字符串**（backticks `` ` ``）语法，必须使用字符串拼接或普通引号：
+          * ❌ 错误：`"console.log(\`hello ${name}\`)"`
+          * ✅ 正确：`"console.log('hello ' + name)"`
+      * 在JavaScript代码字符串内部，优先使用单引号包裹字符串字面量，避免转义双引号
+      * CSS样式字符串中的换行必须使用 `\n` 转义
   * **占位符资源**：当需要占位资源时，必须使用以下链接：
       * 图片: `"src": "https://placehold.co/600x400"`
       * 视频: `"src": "https://placehold.co/640x360.mp4"`
   * 其他
       * 每个新组件都要有一个符合规范的、唯一的8位随机ID。
 
+### 2.1 常见错误示例（绝对禁止）
+
+为避免JSON.parse失败，以下是常见错误及正确写法对比：
+
+**❌ 错误示例 1**：使用JavaScript模板字符串（会导致JSON解析失败）
+```
+{"value":"function test(name) { console.log(`hello ${name}`) }"}
+```
+
+**✅ 正确示例 1**：使用字符串拼接
+```
+{"value":"function test(name) { console.log('hello ' + name) }"}
+```
+
+**❌ 错误示例 2**：包含真实换行符（会导致JSON解析失败）
+```
+{"value":"function test() {
+  console.log('hello')
+}"}
+```
+
+**✅ 正确示例 2**：正确转义换行符为 `\n`
+```
+{"value":"function test() {\n  console.log('hello')\n}"}
+```
+
+**❌ 错误示例 3**：使用代码块标记
+```json
+[{"op":"add","path":"/state/name","value":"test"}]
+```
+
+**✅ 正确示例 3**：纯JSON输出，无任何标记
+```
+[{"op":"add","path":"/state/name","value":"test"}]
+```
+
+**❌ 错误示例 4**：字符串内双引号未转义
+```
+{"value":"function test() { console.log(\"hello\") }"}
+```
+
+**✅ 正确示例 4**：使用单引号或正确转义双引号
+```
+{"value":"function test() { console.log('hello') }"}
+```
+
 -----
 
 ## 3. PageSchema 规范
@@ -144,10 +229,8 @@ interface ComponentSchema { // 组件 schema
 -----
 
 ## 4. 示例
-下面是添加一个聊天消息列表的示例：
-```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" } } ]
-```
+下面是添加一个聊天消息列表的完整示例（注意：所有JavaScript代码都使用字符串拼接，不使用模板字符串）：
+[ { "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" } } ]
 
 -----