chore: update mcp_tool_id to mcp_tool_ids for multi-select functionality

Author: liuruibin

ui/src/views/application/component/McpServersDialog.vue

@@ -32,13 +32,13 @@
             message: $t('common.selectPlaceholder') + ` MCP ${$t('views.tool.title')}`,
           },
         ]"
-        prop="mcp_tool_id"
+        prop="mcp_tool_ids"
       >
         <template #label>
           {{ `MCP ${$t('views.tool.title')}` }}
           <span class="color-danger">*</span>
         </template>
-        <el-select v-model="form.mcp_tool_id" filterable>
+        <el-select v-model="form.mcp_tool_ids" filterable multiple>
           <el-option
             v-for="mcpTool in mcpToolSelectOptions"
             :key="mcpTool.id"
@@ -121,7 +121,7 @@ const mcpServerJson = `{
 
 const form = ref<any>({
   mcp_servers: '',
-  mcp_tool_id: '',
+  mcp_tool_ids: [],
   mcp_source: 'referencing',
 })
 
@@ -135,7 +135,7 @@ watch(dialogVisible, (bool) => {
   if (!bool) {
     form.value = {
       mcp_servers: '',
-      mcp_tool_id: '',
+      mcp_tool_ids: '',
       mcp_source: 'referencing',
     }
     paramFormRef.value?.clearValidate()
@@ -146,17 +146,17 @@ function mcpSourceChange() {
   if (form.value.mcp_source === 'referencing') {
     form.value.mcp_servers = ''
   } else {
-    form.value.mcp_tool_id = ''
+    form.value.mcp_tool_ids = ''
   }
 }
 
 const open = (data: any, selectOptions: any) => {
   form.value = { ...form.value, ...data }
   if (data.mcp_servers) {
     form.value.mcp_source = 'custom'
-  } else if (data.mcp_tool_id) {
+  } else if (data.mcp_tool_ids) {
     form.value.mcp_source = 'referencing'
-    form.value.mcp_tool_id = data.mcp_tool_id
+    form.value.mcp_tool_ids = data.mcp_tool_ids
     form.value.mcp_servers = ''
   } else {
     form.value.mcp_source = data.mcp_source || 'referencing'

ui/src/workflow/nodes/ai-chat-node/index.vue

@@ -134,38 +134,40 @@
         <div
           class="w-full mb-16"
           v-if="
-            chat_data.mcp_tool_id || (chat_data.mcp_servers && chat_data.mcp_servers.length > 0)
+            chat_data.mcp_tool_ids?.length > 0 || (chat_data.mcp_servers && chat_data.mcp_servers.length > 0)
           "
         >
-          <div class="flex-between border border-r-6 white-bg mb-4" style="padding: 5px 8px"
-            v-if="relatedObject(mcpToolSelectOptions, chat_data.mcp_tool_id, 'id')"
-          >
-            <div class="flex align-center" style="line-height: 20px">
-              <el-avatar
-                v-if="relatedObject(mcpToolSelectOptions, chat_data.mcp_tool_id, 'id')?.icon"
-                shape="square"
-                :size="20"
-                style="background: none"
-                class="mr-8"
-              >
-                <img :src="resetUrl(relatedObject(mcpToolSelectOptions, chat_data.mcp_tool_id, 'id')?.icon)" alt="" />
-              </el-avatar>
-              <ToolIcon v-else type="MCP" class="mr-8" :size="20" />
+          <template v-for="(item, index) in chat_data.mcp_tool_ids" :key="index">
+            <div class="flex-between border border-r-6 white-bg mb-4" style="padding: 5px 8px"
+              v-if="relatedObject(mcpToolSelectOptions, item, 'id')"
+            >
+              <div class="flex align-center" style="line-height: 20px">
+                <el-avatar
+                  v-if="relatedObject(mcpToolSelectOptions, item, 'id')?.icon"
+                  shape="square"
+                  :size="20"
+                  style="background: none"
+                  class="mr-8"
+                >
+                  <img :src="resetUrl(relatedObject(mcpToolSelectOptions, item, 'id')?.icon)" alt="" />
+                </el-avatar>
+                <ToolIcon v-else type="MCP" class="mr-8" :size="20" />
 
-              <div
-                class="ellipsis"
-                :title="relatedObject(mcpToolSelectOptions, chat_data.mcp_tool_id, 'id')?.name"
-              >
-                {{
-                  relatedObject(mcpToolSelectOptions, chat_data.mcp_tool_id, 'id')?.name ||
-                  $t('common.custom') + ' MCP'
-                }}
+                <div
+                  class="ellipsis"
+                  :title="relatedObject(mcpToolSelectOptions, item, 'id')?.name"
+                >
+                  {{
+                    relatedObject(mcpToolSelectOptions, item, 'id')?.name ||
+                    $t('common.custom') + ' MCP'
+                  }}
+                </div>
               </div>
+              <el-button text @click="removeMcpTool(item)">
+                <el-icon><Close /></el-icon>
+              </el-button>
             </div>
-            <el-button text @click="chat_data.mcp_tool_id = ''">
-              <el-icon><Close /></el-icon>
-            </el-button>
-          </div>
+          </template>
         </div>
         <!-- 工具       -->
         <div class="flex-between mb-16">
@@ -424,15 +426,15 @@ const mcpServersDialogRef = ref()
 function openMcpServersDialog() {
   const config = {
     mcp_servers: chat_data.value.mcp_servers,
-    mcp_tool_id: chat_data.value.mcp_tool_id,
+    mcp_tool_ids: chat_data.value.mcp_tool_ids,
     mcp_source: chat_data.value.mcp_source,
   }
   mcpServersDialogRef.value.open(config, mcpToolSelectOptions.value)
 }
 
 function submitMcpServersDialog(config: any) {
   set(props.nodeModel.properties.node_data, 'mcp_servers', config.mcp_servers)
-  set(props.nodeModel.properties.node_data, 'mcp_tool_id', config.mcp_tool_id)
+  set(props.nodeModel.properties.node_data, 'mcp_tool_ids', config.mcp_tool_ids)
   set(props.nodeModel.properties.node_data, 'mcp_source', config.mcp_source)
 }
 
@@ -447,6 +449,10 @@ function removeTool(id: any) {
   const list = props.nodeModel.properties.node_data.tool_ids.filter((v: any) => v !== id)
   set(props.nodeModel.properties.node_data, 'tool_ids', list)
 }
+function removeMcpTool(id: any) {
+  const list = props.nodeModel.properties.node_data.mcp_tool_ids.filter((v: any) => v !== id)
+  set(props.nodeModel.properties.node_data, 'mcp_tool_ids', list)
+}
 
 const toolSelectOptions = ref<any[]>([])
 function getToolSelectOptions() {
@@ -506,6 +512,11 @@ onMounted(() => {
     chat_data.value.dialogue_type = 'WORKFLOW'
   }
 
+  if (props.nodeModel.properties.node_data?.mcp_tool_id) {
+   set(props.nodeModel.properties.node_data, 'mcp_tool_ids', [props.nodeModel.properties.node_data?.mcp_tool_id])
+   set(props.nodeModel.properties.node_data, 'mcp_tool_id', undefined)
+  }
+
   getToolSelectOptions()
   getMcpToolSelectOptions()
 })