feat: Add create MCP function (#3885)

Co-authored-by: wangdan-fit2cloud <[email protected]>

Author: shaohuzhang1

ui/src/assets/icon_tool_shop.svg

@@ -17,6 +17,7 @@
           :source="prologue"
           :send-message="sendMessage"
           reasoning_content=""
+          :type="type"
         ></MdRenderer>
       </el-card>
     </div>
@@ -35,7 +36,6 @@ const props = defineProps<{
   sendMessage: (question: string, other_params_data?: any, chat?: chatType) => void
 }>()
 
-
 const showAvatar = computed(() => {
   return props.application.show_avatar == undefined ? true : props.application.show_avatar
 })

ui/src/assets/node/icon_tool.svg

@@ -0,0 +1,21 @@
+<template>
+  <el-avatar v-if="type == 'MCP'" shape="square" :size="size">
+    <img src="@/assets/workflow/icon_mcp.svg" style="width: 75%" alt="" />
+  </el-avatar>
+  <el-avatar v-else class="avatar-green" shape="square" :size="size">
+    <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
+  </el-avatar>
+</template>
+<script setup lang="ts">
+defineOptions({ name: 'ToolIcon' })
+const props = defineProps({
+  type: {
+    type: [String, Number],
+    default: '',
+  },
+  size: {
+    type: [String, Number],
+    default: 32,
+  },
+})
+</script>

ui/src/components/ai-chat/component/prologue-content/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <el-breadcrumb separator-icon="ArrowRight" style="line-height: 22px">
-    <h2 v-if="breadcrumbData?.length === 1" class="ellipsis" :title="breadcrumbData[0]?.name">
-      {{ breadcrumbData[0]?.name }}
-    </h2>
-    <el-breadcrumb-item v-for="(item, index) in breadcrumbData" :key="index" v-else>
+  <h2 v-if="breadcrumbData?.length === 1" class="ellipsis" :title="breadcrumbData[0]?.name">
+    {{ breadcrumbData[0]?.name }}
+  </h2>
+  <el-breadcrumb separator-icon="ArrowRight" style="line-height: normal" class="mt-4" v-else>
+    <el-breadcrumb-item v-for="(item, index) in breadcrumbData" :key="index">
       <h5 class="ml-4 ellipsis" v-if="index === breadcrumbData.length - 1" :title="item.name">
         {{ item.name }}
       </h5>

ui/src/components/app-icon/ToolIcon.vue

@@ -23,6 +23,7 @@ import TagEllipsis from './tag-ellipsis/index.vue'
 import CardCheckbox from './card-checkbox/index.vue'
 import AiChat from './ai-chat/index.vue'
 import KnowledgeIcon from './app-icon/KnowledgeIcon.vue'
+import ToolIcon from './app-icon/ToolIcon.vue'
 import TagGroup from './tag-group/index.vue'
 import WorkspaceDropdown from './workspace-dropdown/index.vue'
 import FolderBreadcrumb from './folder-breadcrumb/index.vue'
@@ -52,6 +53,7 @@ export default {
     app.component('CardCheckbox', CardCheckbox)
     app.component('AiChat', AiChat)
     app.component('KnowledgeIcon', KnowledgeIcon)
+    app.component('ToolIcon', ToolIcon)
     app.component('TagGroup', TagGroup)
     app.component('WorkspaceDropdown', WorkspaceDropdown)
     app.component('FolderBreadcrumb', FolderBreadcrumb)

ui/src/components/folder-breadcrumb/index.vue

@@ -5,9 +5,11 @@
     <template v-for="(item, index) in md_view_list" :key="index">
       <div
         v-if="item.type === 'question'"
-        @click="sendMessage ? sendMessage(item.content, 'new') : (content: string) => {}"
+        @click="
+          sendMessage && type !== 'log' ? sendMessage(item.content, 'new') : (content: string) => {}
+        "
         class="problem-button mt-4 mb-4 flex"
-        :class="sendMessage ? 'cursor' : 'disabled'"
+        :class="sendMessage && type !== 'log' ? 'cursor' : 'disabled'"
       >
         <AppIcon iconName="app-edit" class="mr-8" style="margin-top: 2px"></AppIcon>
         {{ item.content }}
@@ -61,6 +63,7 @@ config({
       tokens[idx].attrSet('target', '_blank')
       return md.renderer.renderToken(tokens, idx, options)
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     document.appendChild
   },
 })
@@ -74,6 +77,7 @@ const props = withDefaults(
     chat_record_id?: string
     runtime_node_id?: string
     disabled?: boolean
+    type?: 'log' | 'ai-chat' | 'debug-ai-chat'
   }>(),
   {
     source: '',

ui/src/components/index.ts

@@ -11,12 +11,12 @@
       >
         <img :src="resetUrl(current?.icon, resetUrl('./favicon.ico'))" alt="" />
       </el-avatar>
-      <LogoIcon
+      <!-- <LogoIcon
         v-else-if="isApplication"
         height="28px"
         style="width: 28px; height: 28px; display: block"
         class="mr-8"
-      />
+      /> -->
       <KnowledgeIcon v-else-if="isKnowledge" :type="current?.type" class="mr-8" />
 
       <div class="ellipsis" :title="current?.name">{{ current?.name }}</div>

ui/src/components/markdown/MdRenderer.vue

@@ -68,9 +68,11 @@ export default {
       inputPlaceholder: 'Please enter parameter values',
     },
     mcp: {
+      title: 'MCP Service',
       label: 'MCP Server Config',
       placeholder: 'Please enter MCP Server config',
       tip: 'Only supports SSE and Streamable HTTP calling methods',
+      requiredMessage: 'Please enter MCP Server Config',
     },
     debug: {
       run: 'Run',

ui/src/layout/components/breadcrumb/index.vue

@@ -64,9 +64,11 @@ export default {
       inputPlaceholder: '请输入参数值',
     },
     mcp: {
+      title: 'MCP 服务',
       label: 'MCP Server Config',
       placeholder: '请输入MCP Server配置',
       tip: '仅支持SSE、Streamable HTTP调用方式',
+      requiredMessage: '请输入 MCP Server Config',
     },
     debug: {
       run: '运行',