feat: enhance MCP tool dialog with source selection and dynamic tool options

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

@@ -14,11 +14,31 @@
       :model="form"
       require-asterisk-position="right"
     >
-      <el-form-item label="MCP" prop="mcp_enable" @click.prevent>
-        <el-switch v-model="form.mcp_enable" />
+      <el-form-item>
+        <el-radio-group v-model="form.mcp_source">
+          <el-radio value="referencing">
+            {{ $t('views.applicationWorkflow.nodes.mcpNode.reference') }}
+          </el-radio>
+          <el-radio value="custom">{{ $t('common.custom') }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="form.mcp_source === 'referencing'">
+        <el-select v-model="form.mcp_tool_id" filterable>
+          <el-option
+            v-for="mcpTool in mcpToolSelectOptions"
+            :key="mcpTool.id"
+            :label="mcpTool.name"
+            :value="mcpTool.id"
+          >
+            <span>{{ mcpTool.name }}</span>
+            <el-tag v-if="mcpTool.scope === 'SHARED'" type="info" class="info-tag ml-8 mt-4">
+              {{ $t('views.shared.title') }}
+            </el-tag>
+          </el-option>
+        </el-select>
       </el-form-item>
       <el-form-item
-        v-if="form.mcp_enable"
+        v-else
         :label="$t('views.applicationWorkflow.nodes.mcpNode.configLabel')"
         prop="mcp_servers"
         :rules="[{ required: true, message: $t('common.required') }]"
@@ -43,10 +63,21 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import {computed, inject, onMounted, ref, watch} from 'vue'
+import {loadSharedApi} from "@/utils/dynamics-api/shared-api.ts";
+import {useRoute} from "vue-router";
 
+const getApplicationDetail = inject('getApplicationDetail') as any
+const applicationDetail = getApplicationDetail()
 const emit = defineEmits(['refresh'])
-
+const route = useRoute()
+const apiType = computed(() => {
+  if (route.path.includes('resource-management')) {
+    return 'systemManage'
+  } else {
+    return 'workspace'
+  }
+})
 const paramFormRef = ref()
 
 const mcpServerJson = `{
@@ -58,22 +89,50 @@ const mcpServerJson = `{
 
 const form = ref<any>({
   mcp_servers: '',
-  mcp_enable: false,
+  mcp_tool_id: '',
+  mcp_source: 'referencing',
 })
 
+const mcpToolSelectOptions = ref<any[]>([])
+
 const dialogVisible = ref<boolean>(false)
+
 const loading = ref(false)
+
 watch(dialogVisible, (bool) => {
   if (!bool) {
     form.value = {
       mcp_servers: '',
-      mcp_enable: false,
+      mcp_tool_id: '',
+      mcp_source: 'referencing',
     }
   }
 })
 
+
+function getMcpToolSelectOptions() {
+  const obj =
+    apiType.value === 'systemManage'
+      ? {
+        scope: 'WORKSPACE',
+        tool_type: 'MCP',
+        workspace_id: applicationDetail.value?.workspace_id,
+      }
+      : {
+        scope: 'WORKSPACE',
+        tool_type: 'MCP',
+      }
+
+  loadSharedApi({type: 'tool', systemType: apiType.value})
+    .getAllToolList(obj, loading)
+    .then((res: any) => {
+      mcpToolSelectOptions.value = [...res.data.shared_tools, ...res.data.tools]
+        .filter((item: any) => item.is_active)
+    })
+}
+
 const open = (data: any) => {
-  form.value = { ...form.value, ...data }
+  form.value = {...form.value, ...data}
   dialogVisible.value = true
 }
 
@@ -86,6 +145,10 @@ const submit = () => {
   })
 }
 
-defineExpose({ open })
+onMounted(() => {
+  getMcpToolSelectOptions()
+})
+
+defineExpose({open})
 </script>
 <style lang="scss" scoped></style>

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

@@ -0,0 +1,89 @@
+<template>
+  <el-dialog
+    align-center
+    :title="$t('common.setting')"
+    v-model="dialogVisible"
+    style="width: 550px"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      label-position="top"
+      ref="paramFormRef"
+      :model="form"
+      require-asterisk-position="right"
+    >
+      <el-form-item>
+        <el-select v-model="form.tool_ids" filterable multiple>
+          <el-option
+            v-for="mcpTool in toolSelectOptions"
+            :key="mcpTool.id"
+            :label="mcpTool.name"
+            :value="mcpTool.id"
+          >
+            <span>{{ mcpTool.name }}</span>
+            <el-tag v-if="mcpTool.scope === 'SHARED'" type="info" class="info-tag ml-8 mt-4">
+              {{ $t('views.shared.title') }}
+            </el-tag>
+          </el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="submit()" :loading="loading">
+          {{ $t('common.save') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import {ref, watch} from 'vue'
+
+const emit = defineEmits(['refresh'])
+
+const paramFormRef = ref()
+
+const form = ref<any>({
+  tool_ids: [],
+})
+
+const toolSelectOptions = ref<any[]>([])
+
+const dialogVisible = ref<boolean>(false)
+
+const loading = ref(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      tool_ids: [],
+    }
+  }
+})
+
+
+const open = (data: any, selectOptions: any) => {
+  form.value = {...form.value, ...data}
+  dialogVisible.value = true
+  toolSelectOptions.value = selectOptions
+}
+
+const submit = () => {
+  paramFormRef.value.validate().then((valid: any) => {
+    if (valid) {
+      emit('refresh', form.value)
+      dialogVisible.value = false
+    }
+  })
+}
+
+
+
+defineExpose({open})
+</script>
+<style lang="scss" scoped></style>

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

@@ -114,11 +114,23 @@
           />
         </el-form-item>
 
+        <div class="flex-between mb-16">
+          <div class="lighter">MCP</div>
+          <div>
+            <el-button type="primary" link @click="openMcpServersDialog" @refreshForm="refreshParam">
+              <AppIcon iconName="app-setting"></AppIcon>
+            </el-button>
+            <el-switch size="small" v-model="chat_data.mcp_enable" />
+          </div>
+        </div>
         <div class="flex-between mb-16">
           <div class="lighter">{{ $t('views.applicationWorkflow.nodes.mcpNode.tool') }}</div>
-          <el-button type="primary" link @click="openMcpServersDialog" @refreshForm="refreshParam">
-            <AppIcon iconName="app-setting"></AppIcon>
-          </el-button>
+          <div>
+            <el-button type="primary" link @click="openToolDialog" @refreshForm="refreshParam">
+              <AppIcon iconName="app-setting"></AppIcon>
+            </el-button>
+            <el-switch size="small" v-model="chat_data.tool_enable" />
+          </div>
         </div>
 
         <el-form-item @click.prevent>
@@ -166,6 +178,7 @@
       @refresh="submitReasoningDialog"
     />
     <McpServersDialog ref="mcpServersDialogRef" @refresh="submitMcpServersDialog" />
+    <ToolDialog ref="toolDialogRef" @refresh="submitToolDialog"/>
   </NodeContainer>
 </template>
 <script setup lang="ts">
@@ -180,6 +193,7 @@ import ReasoningParamSettingDialog from '@/views/application/component/Reasoning
 import McpServersDialog from '@/views/application/component/McpServersDialog.vue'
 import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
 import { useRoute } from 'vue-router'
+import ToolDialog from "@/views/application/component/ToolDialog.vue";
 const getApplicationDetail = inject('getApplicationDetail') as any
 const route = useRoute()
 
@@ -324,16 +338,53 @@ const mcpServersDialogRef = ref()
 function openMcpServersDialog() {
   const config = {
     mcp_servers: chat_data.value.mcp_servers,
-    mcp_enable: chat_data.value.mcp_enable,
+    mcp_tool_id: chat_data.value.mcp_tool_id,
+    mcp_source: chat_data.value.mcp_source,
   }
   mcpServersDialogRef.value.open(config)
 }
 
 function submitMcpServersDialog(config: any) {
   set(props.nodeModel.properties.node_data, 'mcp_servers', config.mcp_servers)
-  set(props.nodeModel.properties.node_data, 'mcp_enable', config.mcp_enable)
+  set(props.nodeModel.properties.node_data, 'mcp_tool_id', config.mcp_tool_id)
+  set(props.nodeModel.properties.node_data, 'mcp_source', config.mcp_source)
 }
 
+const toolDialogRef = ref()
+function openToolDialog() {
+  const config = {
+    tool_ids: chat_data.value.tool_ids,
+  }
+  toolDialogRef.value.open(config, toolSelectOptions.value)
+}
+function submitToolDialog(config: any) {
+  set(props.nodeModel.properties.node_data, 'tool_ids', config.tool_ids)
+}
+
+const toolSelectOptions = ref<any[]>([])
+function getToolSelectOptions() {
+  const obj =
+    apiType.value === 'systemManage'
+      ? {
+        scope: 'WORKSPACE',
+        tool_type: 'CUSTOM',
+        workspace_id: application.value?.workspace_id,
+      }
+      : {
+        scope: 'WORKSPACE',
+        tool_type: 'CUSTOM',
+      }
+
+  loadSharedApi({type: 'tool', systemType: apiType.value})
+    .getAllToolList(obj)
+    .then((res: any) => {
+      toolSelectOptions.value = [...res.data.shared_tools, ...res.data.tools]
+        .filter((item: any) => item.is_active)
+    })
+}
+
+
+
 onMounted(() => {
   getSelectModel()
   if (typeof props.nodeModel.properties.node_data?.is_result === 'undefined') {
@@ -345,6 +396,8 @@ onMounted(() => {
   if (!chat_data.value.dialogue_type) {
     chat_data.value.dialogue_type = 'WORKFLOW'
   }
+
+  getToolSelectOptions()
 })
 </script>
 <style lang="scss" scoped></style>