feat: AI dialogue nodes support calling tools configured in the system (#3896)
This commit is contained in:
wangdan-fit2cloud
GitHub
parent
cf68e3664b
commit
738bbb3564
@ -3,8 +3,11 @@ export default {
|
||||
all: 'All',
|
||||
createTool: 'Create Tool',
|
||||
editTool: 'Edit Tool',
|
||||
createMcpTool: 'Create MCP',
|
||||
editMcpTool: 'Edit MCP',
|
||||
copyTool: 'Copy Tool',
|
||||
importTool: 'Import Tool',
|
||||
settingTool: 'Set Tool',
|
||||
toolStore: {
|
||||
title: 'Tool Store',
|
||||
createFromToolStore: 'Create from Tool Store',
|
||||
|
||||
@ -7,6 +7,7 @@ export default {
|
||||
editMcpTool: '编辑MCP',
|
||||
copyTool: '复制工具',
|
||||
importTool: '导入工具',
|
||||
settingTool: '设置工具',
|
||||
toolStore: {
|
||||
title: '工具商店',
|
||||
createFromToolStore: '从工具商店创建',
|
||||
|
||||
@ -3,8 +3,11 @@ export default {
|
||||
all: '全部',
|
||||
createTool: '建立工具',
|
||||
editTool: '編輯工具',
|
||||
createMcpTool: '建立MCP',
|
||||
editMcpTool: '編輯MCP',
|
||||
copyTool: '複製工具',
|
||||
importTool: '匯入工具',
|
||||
settingTool: '設定工具',
|
||||
toolStore: {
|
||||
title: '工具商店',
|
||||
createFromToolStore: '從工具商店創建',
|
||||
|
||||
@ -56,7 +56,7 @@ div:focus {
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: circle;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -21,6 +21,9 @@
|
||||
border: 0 !important;
|
||||
max-width: 360px !important;
|
||||
}
|
||||
ul {
|
||||
list-style: circle;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
|
||||
@ -1,89 +1,227 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
align-center
|
||||
:title="$t('common.setting')"
|
||||
v-model="dialogVisible"
|
||||
style="width: 550px"
|
||||
width="1000"
|
||||
append-to-body
|
||||
class="addTool-dialog"
|
||||
align-center
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
>
|
||||
<el-form
|
||||
label-position="top"
|
||||
ref="paramFormRef"
|
||||
:model="form"
|
||||
require-asterisk-position="right"
|
||||
<template #header="{ titleId, titleClass }">
|
||||
<div class="flex-between mb-8">
|
||||
<div class="flex">
|
||||
<h4 :id="titleId" :class="titleClass" class="mr-8">
|
||||
{{ $t('views.tool.settingTool') }}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<el-button link class="mr-24" @click="refresh">
|
||||
<el-icon :size="18"><Refresh /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<LayoutContainer class="application-manage">
|
||||
<template #left>
|
||||
<div class="p-8">
|
||||
<folder-tree
|
||||
:data="folderList"
|
||||
:currentNodeKey="currentFolder?.id"
|
||||
@handleNodeClick="folderClickHandle"
|
||||
v-loading="folderLoading"
|
||||
:canOperation="false"
|
||||
showShared
|
||||
:shareTitle="$t('views.shared.shared_tool')"
|
||||
:treeStyle="{ height: 'calc(100vh - 240px)' }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<div class="layout-bg">
|
||||
<div class="flex-between p-16 ml-8">
|
||||
<h4>{{ currentFolder?.name }}</h4>
|
||||
<el-input
|
||||
v-model="searchValue"
|
||||
:placeholder="$t('common.search')"
|
||||
prefix-icon="Search"
|
||||
class="w-240 mr-8"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-scrollbar>
|
||||
<div class="p-16-24 pt-0" style="height: calc(100vh - 200px)">
|
||||
<el-row :gutter="12" v-loading="apiLoading" v-if="searchData.length">
|
||||
<el-col :span="12" v-for="(item, index) in searchData" :key="index" class="mb-16">
|
||||
<CardCheckbox
|
||||
value-field="id"
|
||||
:data="item"
|
||||
v-model="checkList"
|
||||
@change="changeHandle"
|
||||
>
|
||||
<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"
|
||||
<template #icon>
|
||||
<el-avatar
|
||||
v-if="item?.icon"
|
||||
shape="square"
|
||||
:size="32"
|
||||
style="background: none"
|
||||
class="mr-8"
|
||||
>
|
||||
<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>
|
||||
<img :src="resetUrl(item?.icon)" alt="" />
|
||||
</el-avatar>
|
||||
<ToolIcon v-else :size="32" :type="item?.tool_type" />
|
||||
</template>
|
||||
<span class="ellipsis cursor ml-12" :title="item.name"> {{ item.name }}</span>
|
||||
</CardCheckbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-empty :description="$t('common.noData')" v-else />
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</LayoutContainer>
|
||||
|
||||
<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') }}
|
||||
<div class="flex-between">
|
||||
<div class="flex">
|
||||
<el-text type="info" class="color-secondary mr-8" v-if="checkList.length > 0">
|
||||
{{ $t('common.selected') }} {{ checkList.length }}
|
||||
</el-text>
|
||||
<el-button link type="primary" v-if="checkList.length > 0" @click="clearCheck">
|
||||
{{ $t('common.clear') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<span>
|
||||
<el-button @click.prevent="dialogVisible = false">
|
||||
{{ $t('common.cancel') }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="submitHandle">
|
||||
{{ $t('common.add') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {ref, watch} from 'vue'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import useStore from '@/stores'
|
||||
import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
|
||||
import { uniqueArray } from '@/utils/array'
|
||||
import { resetUrl } from '@/utils/common'
|
||||
const route = useRoute()
|
||||
|
||||
const emit = defineEmits(['refresh'])
|
||||
|
||||
const paramFormRef = ref()
|
||||
|
||||
const form = ref<any>({
|
||||
tool_ids: [],
|
||||
const { folder, user } = useStore()
|
||||
const apiType = computed(() => {
|
||||
if (route.path.includes('shared')) {
|
||||
return 'systemShare'
|
||||
} else if (route.path.includes('resource-management')) {
|
||||
return 'systemManage'
|
||||
} else {
|
||||
return 'workspace'
|
||||
}
|
||||
})
|
||||
|
||||
const toolSelectOptions = ref<any[]>([])
|
||||
|
||||
const dialogVisible = ref<boolean>(false)
|
||||
|
||||
const loading = ref(false)
|
||||
const checkList = ref<Array<string>>([])
|
||||
const searchValue = ref('')
|
||||
const searchData = ref<Array<any>>([])
|
||||
const toolList = ref<Array<any>>([])
|
||||
const apiLoading = ref(false)
|
||||
|
||||
watch(dialogVisible, (bool) => {
|
||||
if (!bool) {
|
||||
form.value = {
|
||||
tool_ids: [],
|
||||
}
|
||||
checkList.value = []
|
||||
searchValue.value = ''
|
||||
searchData.value = []
|
||||
toolList.value = []
|
||||
}
|
||||
})
|
||||
|
||||
watch(searchValue, (val) => {
|
||||
if (val) {
|
||||
searchData.value = toolList.value.filter((v) => v.name.includes(val))
|
||||
} else {
|
||||
searchData.value = toolList.value
|
||||
}
|
||||
})
|
||||
|
||||
const open = (data: any, selectOptions: any) => {
|
||||
form.value = {...form.value, ...data}
|
||||
dialogVisible.value = true
|
||||
toolSelectOptions.value = selectOptions
|
||||
function changeHandle() {}
|
||||
function clearCheck() {
|
||||
checkList.value = []
|
||||
}
|
||||
|
||||
const submit = () => {
|
||||
paramFormRef.value.validate().then((valid: any) => {
|
||||
if (valid) {
|
||||
emit('refresh', form.value)
|
||||
const open = (checked: any) => {
|
||||
checkList.value = checked || []
|
||||
getFolder()
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const submitHandle = () => {
|
||||
emit('refresh', {
|
||||
tool_ids: checkList.value,
|
||||
})
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
const refresh = () => {
|
||||
searchValue.value = ''
|
||||
toolList.value = []
|
||||
getList()
|
||||
}
|
||||
|
||||
const folderList = ref<any[]>([])
|
||||
const currentFolder = ref<any>({})
|
||||
const folderLoading = ref(false)
|
||||
// 文件
|
||||
function folderClickHandle(row: any) {
|
||||
if (row.id === currentFolder.value?.id) {
|
||||
return
|
||||
}
|
||||
currentFolder.value = row
|
||||
getList()
|
||||
}
|
||||
|
||||
function getFolder() {
|
||||
const params = {}
|
||||
folder.asyncGetFolder('TOOL', params, folderLoading).then((res: any) => {
|
||||
folderList.value = res.data
|
||||
currentFolder.value = res.data?.[0] || {}
|
||||
getList()
|
||||
})
|
||||
}
|
||||
|
||||
function getList() {
|
||||
const folder_id = currentFolder.value?.id || user.getWorkspaceId()
|
||||
loadSharedApi({
|
||||
type: 'tool',
|
||||
systemType: apiType.value,
|
||||
})
|
||||
.getToolList({ folder_id }, apiLoading)
|
||||
.then((res: any) => {
|
||||
toolList.value = uniqueArray([...toolList.value, ...res.data.tools], 'id')
|
||||
searchData.value = res.data.tools
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
defineExpose({open})
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss">
|
||||
.addTool-dialog {
|
||||
padding: 0;
|
||||
.el-dialog__header {
|
||||
padding: 12px 20px 4px 24px;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
}
|
||||
.el-dialog__footer {
|
||||
padding: 12px 24px 12px 24px;
|
||||
border-top: 1px solid var(--el-border-color-light);
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
top: 2px;
|
||||
right: 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -247,7 +247,6 @@ const model_change = (model_id?: string) => {
|
||||
}
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
const defaultPrompt = `${t('views.applicationWorkflow.nodes.aiChatNode.defaultPrompt')}：
|
||||
{{${t('views.applicationWorkflow.nodes.searchKnowledgeNode.label')}.data}}
|
||||
${t('views.problem.title')}：
|
||||
@ -364,10 +363,7 @@ function submitMcpServersDialog(config: any) {
|
||||
|
||||
const toolDialogRef = ref()
|
||||
function openToolDialog() {
|
||||
const config = {
|
||||
tool_ids: chat_data.value.tool_ids,
|
||||
}
|
||||
toolDialogRef.value.open(config, toolSelectOptions.value)
|
||||
toolDialogRef.value.open(chat_data.value.tool_ids)
|
||||
}
|
||||
function submitToolDialog(config: any) {
|
||||
set(props.nodeModel.properties.node_data, 'tool_ids', config.tool_ids)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user