fix: mcp issue

Author: hexqi

packages/plugins/page/src/mcp/tools/editSpecificPage.ts

@@ -6,7 +6,7 @@ const inputSchema = z.object({
 })
 
 export const editSpecificPage = {
-  name: 'Edit_page_in_canvas.',
+  name: 'edit_page_in_canvas',
   title: '在画布中编辑页面',
   order: 9,
   description: 'Edit a specific page in canvas. Use this tool when you need to edit some page in canvas.',

packages/plugins/robot/assets/loading.webp

@@ -53,7 +53,7 @@
                 @item-click="handlePromptItemClick"
               ></tr-prompts>
             </div>
-            <tr-bubble-provider :content-renderers="{ markdown: MarkdownRenderer }" v-else>
+            <tr-bubble-provider :content-renderers="contentRenderers" v-else>
               <tr-bubble-list :items="activeMessages" :roles="roles" autoScroll></tr-bubble-list>
             </tr-bubble-provider>
           </div>
@@ -80,7 +80,18 @@
 
 <script lang="ts">
 /* metaService: engine.plugins.robot.Main */
-import { ref, onMounted, watchEffect, type CSSProperties, h, resolveComponent, computed, watch } from 'vue'
+import {
+  ref,
+  onMounted,
+  watchEffect,
+  type CSSProperties,
+  h,
+  resolveComponent,
+  computed,
+  watch,
+  nextTick,
+  type Component
+} from 'vue'
 import { Notify, Loading, TinyPopover } from '@opentiny/vue'
 import { useCanvas, useHistory, usePage, useModal, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { extend } from '@opentiny/vue-renderless/common/object'
@@ -92,6 +103,7 @@ import { getBlockContent, initBlockList, getAIModelOptions } from './js/robotSet
 import McpServer from './mcp/McpServer.vue'
 import useMcpServer from './mcp/useMcp'
 import MarkdownRenderer from './mcp/MarkdownRenderer.vue'
+import LoadingRenderer from './mcp/LoadingRenderer.vue'
 import { sendMcpRequest } from './mcp/utils'
 
 export default {
@@ -151,6 +163,14 @@ export default {
       )
     }
 
+    const scrollContent = async () => {
+      await nextTick()
+      const el = chatContainerRef.value as HTMLElement | null
+      if (el) {
+        el.scrollTop = el.scrollHeight
+      }
+    }
+
     const createNewPage = (schema) => {
       if (!(pageSettingState.isNew && pageSettingState.isAIPage)) {
         pageSettingState.isNew = true
@@ -206,7 +226,7 @@ export default {
       if (useMcpServer().isToolsEnabled) {
         try {
           requestLoading.value = true
-          await scrollContent() // eslint-disable-line
+          await scrollContent()
           await sendMcpRequest(messages.value, {
             model: selectedModel.value.value,
             headers: {
@@ -218,7 +238,7 @@ export default {
         } finally {
           inProcesing.value = false
           requestLoading.value = false
-          await scrollContent() // eslint-disable-line
+          await scrollContent()
         }
         return
       }
@@ -246,12 +266,6 @@ export default {
         })
     }
 
-    const scrollContent = async () => {
-      if (chatContainerRef.value) {
-        chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight
-      }
-    }
-
     const resetContent = async () => {
       activeMessages.value = messages.value
       await scrollContent()
@@ -429,10 +443,15 @@ export default {
       user: { placement: 'end', avatar: userAvatar, maxWidth: '90%', contentRenderer: MarkdownRenderer }
     }
 
-    watch([activeMessages.value.length, activeMessages.value.at(-1)?.renderContent?.length], async () => {
-      await scrollContent()
+    watch([() => activeMessages.value.length, () => activeMessages.value.at(-1)?.renderContent?.length ?? 0], () => {
+      scrollContent()
     })
 
+    const contentRenderers: Record<string, Component> = {
+      markdown: MarkdownRenderer,
+      loading: LoadingRenderer
+    }
+
     const mcpDrawerPosition = computed(() => {
       return {
         type: 'fixed',
@@ -468,7 +487,7 @@ export default {
       handlePromptItemClick,
       welcomeIcon,
       roles,
-      MarkdownRenderer,
+      contentRenderers,
       requestLoading,
       mcpDrawerPosition
     }

packages/plugins/robot/src/Main.vue

@@ -0,0 +1,3 @@
+<template>
+  <img src="../../assets/loading.webp" alt="loading" style="width: 24px; height: 24px" />
+</template>

packages/plugins/robot/src/mcp/LoadingRenderer.vue

@@ -3,12 +3,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch, onMounted, nextTick } from 'vue'
+import { computed } from 'vue'
 import DOMPurify from 'dompurify'
 import MarkdownIt, { type Options } from 'markdown-it'
 import hljs from 'highlight.js/lib/core'
 import 'highlight.js/styles/github.css'
-import 'highlight.js/styles/github-dark.css'
 
 // 按需加载语言
 import bash from 'highlight.js/lib/languages/bash'
@@ -35,7 +34,7 @@ const props = defineProps({
   },
   theme: {
     type: String as () => 'light' | 'dark',
-    default: 'dark'
+    default: 'light'
   },
   options: {
     type: Object as () => Options,
@@ -70,26 +69,6 @@ const markdownIt = new MarkdownIt({
 const renderContent = computed(() => {
   return DOMPurify.sanitize(markdownIt.render(props.content))
 })
-
-// 动态切换主题时重新高亮
-watch(
-  () => props.theme,
-  () => {
-    nextTick(() => {
-      document.querySelectorAll('.markdown-renderer pre code').forEach((el) => {
-        hljs.highlightElement(el as HTMLElement)
-      })
-    })
-  }
-)
-
-onMounted(() => {
-  nextTick(() => {
-    document.querySelectorAll('.markdown-renderer pre code').forEach((el) => {
-      hljs.highlightElement(el as HTMLElement)
-    })
-  })
-})
 </script>
 
 <style lang="less">
@@ -101,8 +80,12 @@ onMounted(() => {
     padding: 1em;
     overflow: auto;
     line-height: 1.45;
+    > code {
+      font-size: 12px;
+    }
   }
 
+  // TODO: 适配TInyEngine主题，实现跟随主题自动切换
   /* 亮色主题 */
   &.hljs-theme-light {
     @import 'highlight.js/styles/github.css';

packages/plugins/robot/src/mcp/MarkdownRenderer.vue

@@ -90,13 +90,6 @@ onMounted(() => {
     display: none !important;
   }
 }
-:deep(.mcp-server-picker__content-item) {
-  .plugin-card__operations {
-    .tiny-popconfirm {
-      display: none !important;
-    }
-  }
-}
 
 :deep(.mcp-server-picker__content) {
   .tiny-tabs.tiny-tabs .tiny-tabs__header .tiny-tabs__nav {
@@ -109,13 +102,23 @@ onMounted(() => {
   .tiny-tabs.tiny-tabs .tiny-tabs__header .tiny-tabs__nav {
     width: 160px;
   }
-}
-
-:deep(.tiny-tabs__content) {
-  .plugin-card__add-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .tiny-tabs__content {
+    .plugin-card__operations {
+      .tiny-popconfirm {
+        display: none;
+      }
+    }
+    .plugin-card__add-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .plugin-card__name {
+      text-align: left;
+    }
+    .plugin-card__desc {
+      font-size: 12px;
+    }
   }
 }
 

packages/plugins/robot/src/mcp/McpServer.vue

@@ -5,9 +5,9 @@ import type { McpListToolsResponse, McpTool, RequestTool } from './types'
 
 const ENGINE_MCP_SERVER: PluginInfo = {
   id: 'tiny-engine-mcp-server',
-  name: 'Tiny Engine MCP 服务器',
+  name: 'Tiny Engine MCP 工具',
   icon: 'https://res.hc-cdn.com/lowcode-portal/1.1.80.20250515160330/assets/opentiny-tinyengine-logo-4f8a3801.svg',
-  description: '使用TinyEngine设计器能力，如添加国际化',
+  description: '使用TinyEngine设计器能力，如操作画布、编辑页面等',
   added: true
 }
 
@@ -27,7 +27,7 @@ const updateEngineTools = async () => {
     (await getMetaApi(META_SERVICE.McpService)?.getToolList?.()) || []
   const engineTools = tools.map((tool) => ({
     id: tool.name,
-    name: tool.title ? `${tool.title}（${tool.name}）` : tool.name,
+    name: tool.title ? `${tool.title} ${tool.name}` : tool.name,
     description: tool.description,
     enabled: tool.status === 'enabled'
   }))

packages/plugins/robot/src/mcp/useMcp.ts

@@ -89,7 +89,9 @@ const handleToolCall = async (
         result: toolCallResult.content
       }
     }
+    currentMessage.renderContent.push({ type: 'loading', content: '' })
     const newResp = await fetchLLM(toolMessages, tools)
+    currentMessage.renderContent.pop()
     const hasToolCall = newResp.choices[0].message.tool_calls?.length > 0
     if (hasToolCall) {
       await handleToolCall(newResp, tools, messages, toolMessages)
@@ -110,7 +112,9 @@ export const sendMcpRequest = async (messages: LLMMessage[], options: RequestOpt
   }
   const tools = await useMcpServer().getLLMTools()
   requestOptions = options
+  messages.at(-1)!.renderContent = [{ type: 'loading', content: '' }]
   const res = await fetchLLM(formatMessages(messages.slice(0, -1)), tools, options)
+  delete messages.at(-1)!.renderContent
   const hasToolCall = res.choices[0].message.tool_calls?.length > 0
   if (hasToolCall) {
     await handleToolCall(res, tools, messages)