mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-27 01:23:55 +08:00
feat: 智控台智能体级插件/工具调用改造。
新增支持从控制台控制大模型插件工具与配置插件工具的管理能力。 关联issue: issue(#1358)
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="welcome">
|
||||
<HeaderBar />
|
||||
<HeaderBar/>
|
||||
|
||||
<div class="operation-bar">
|
||||
<h2 class="page-title">角色配置</h2>
|
||||
@@ -34,47 +34,50 @@
|
||||
<div class="form-grid">
|
||||
<div class="form-column">
|
||||
<el-form-item label="助手昵称:">
|
||||
<el-input v-model="form.agentName" class="form-input" maxlength="10" />
|
||||
<el-input v-model="form.agentName" class="form-input" maxlength="10"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色模版:">
|
||||
<div class="template-container">
|
||||
<div v-for="(template, index) in templates" :key="`template-${index}`" class="template-item"
|
||||
:class="{ 'template-loading': loadingTemplate }" @click="selectTemplate(template)">
|
||||
:class="{ 'template-loading': loadingTemplate }" @click="selectTemplate(template)">
|
||||
{{ template.agentName }}
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色介绍:">
|
||||
<el-input type="textarea" rows="9" resize="none" placeholder="请输入内容" v-model="form.systemPrompt"
|
||||
maxlength="2000" show-word-limit class="form-textarea" />
|
||||
<el-input type="textarea" rows="9" resize="none" placeholder="请输入内容"
|
||||
v-model="form.systemPrompt"
|
||||
maxlength="2000" show-word-limit class="form-textarea"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="记忆:">
|
||||
<el-input type="textarea" rows="6" resize="none" v-model="form.summaryMemory" maxlength="2000"
|
||||
show-word-limit class="form-textarea"
|
||||
:disabled="form.model.memModelId !== 'Memory_mem_local_short'" />
|
||||
show-word-limit class="form-textarea"
|
||||
:disabled="form.model.memModelId !== 'Memory_mem_local_short'"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="语言编码:" style="display: none;">
|
||||
<el-input v-model="form.langCode" placeholder="请输入语言编码,如:zh_CN" maxlength="10" show-word-limit
|
||||
class="form-input" />
|
||||
<el-input v-model="form.langCode" placeholder="请输入语言编码,如:zh_CN" maxlength="10"
|
||||
show-word-limit
|
||||
class="form-input"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="交互语种:" style="display: none;">
|
||||
<el-input v-model="form.language" placeholder="请输入交互语种,如:中文" maxlength="10" show-word-limit
|
||||
class="form-input" />
|
||||
<el-input v-model="form.language" placeholder="请输入交互语种,如:中文" maxlength="10"
|
||||
show-word-limit
|
||||
class="form-input"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-column">
|
||||
<el-form-item v-for="(model, index) in models" :key="`model-${index}`" :label="model.label"
|
||||
class="model-item">
|
||||
class="model-item">
|
||||
<div class="model-select-wrapper">
|
||||
<el-select v-model="form.model[model.key]" filterable placeholder="请选择" class="form-select"
|
||||
@change="handleModelChange(model.type, $event)">
|
||||
@change="handleModelChange(model.type, $event)">
|
||||
<el-option v-for="(item, optionIndex) in modelOptions[model.type]"
|
||||
:key="`option-${index}-${optionIndex}`" :label="item.label" :value="item.value" />
|
||||
:key="`option-${index}-${optionIndex}`" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
<div v-if="showFunctionIcons(model.type)" class="function-icons">
|
||||
<el-tooltip v-for="func in currentFunctions" :key="func.name" effect="dark" placement="top"
|
||||
popper-class="custom-tooltip">
|
||||
popper-class="custom-tooltip">
|
||||
<div slot="content">
|
||||
<div><strong>功能名称:</strong> {{ func.name }}</div>
|
||||
<div v-if="Object.keys(func.params).length > 0">
|
||||
@@ -89,13 +92,15 @@
|
||||
{{ func.name.charAt(0) }}
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-button class="edit-function-btn" @click="showFunctionDialog = true"
|
||||
:class="{ 'active-btn': showFunctionDialog }">
|
||||
<el-button
|
||||
class="edit-function-btn"
|
||||
@click="openFunctionDialog"
|
||||
:class="{ 'active-btn': showFunctionDialog }">
|
||||
编辑功能
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="model.type === 'Memory' && form.model.memModelId !== 'Memory_nomem'"
|
||||
class="chat-history-options">
|
||||
class="chat-history-options">
|
||||
<el-radio-group v-model="form.chatHistoryConf" @change="updateChatHistoryConf">
|
||||
<el-radio-button :label="1">上报文字</el-radio-button>
|
||||
<el-radio-button :label="2">上报文字+语音</el-radio-button>
|
||||
@@ -106,7 +111,7 @@
|
||||
<el-form-item label="角色音色">
|
||||
<el-select v-model="form.ttsVoiceId" placeholder="请选择" class="form-select">
|
||||
<el-option v-for="(item, index) in voiceOptions" :key="`voice-${index}`" :label="item.label"
|
||||
:value="item.value" />
|
||||
:value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
@@ -118,8 +123,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<function-dialog v-model="showFunctionDialog" :functions="currentFunctions"
|
||||
@update-functions="handleUpdateFunctions" @dialog-closed="handleDialogClosed" />
|
||||
<function-dialog
|
||||
v-model="showFunctionDialog"
|
||||
:functions="currentFunctions"
|
||||
:all-functions="allFunctions"
|
||||
@update-functions="handleUpdateFunctions"
|
||||
@dialog-closed="handleDialogClosed"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -130,7 +139,7 @@ import HeaderBar from "@/components/HeaderBar.vue";
|
||||
|
||||
export default {
|
||||
name: 'RoleConfigPage',
|
||||
components: { HeaderBar, FunctionDialog },
|
||||
components: {HeaderBar, FunctionDialog},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
@@ -153,12 +162,12 @@ export default {
|
||||
}
|
||||
},
|
||||
models: [
|
||||
{ label: '语音活动检测(VAD)', key: 'vadModelId', type: 'VAD' },
|
||||
{ label: '语音识别(ASR)', key: 'asrModelId', type: 'ASR' },
|
||||
{ label: '大语言模型(LLM)', key: 'llmModelId', type: 'LLM' },
|
||||
{ label: '意图识别(Intent)', key: 'intentModelId', type: 'Intent' },
|
||||
{ label: '记忆(Memory)', key: 'memModelId', type: 'Memory' },
|
||||
{ label: '语音合成(TTS)', key: 'ttsModelId', type: 'TTS' },
|
||||
{label: '语音活动检测(VAD)', key: 'vadModelId', type: 'VAD'},
|
||||
{label: '语音识别(ASR)', key: 'asrModelId', type: 'ASR'},
|
||||
{label: '大语言模型(LLM)', key: 'llmModelId', type: 'LLM'},
|
||||
{label: '意图识别(Intent)', key: 'intentModelId', type: 'Intent'},
|
||||
{label: '记忆(Memory)', key: 'memModelId', type: 'Memory'},
|
||||
{label: '语音合成(TTS)', key: 'ttsModelId', type: 'TTS'},
|
||||
],
|
||||
modelOptions: {},
|
||||
templates: [],
|
||||
@@ -170,12 +179,8 @@ export default {
|
||||
'#FF6B6B', '#4ECDC4', '#45B7D1',
|
||||
'#96CEB4', '#FFEEAD', '#D4A5A5', '#A2836E'
|
||||
],
|
||||
allFunctions: [
|
||||
{ name: '天气', params: {} },
|
||||
{ name: '新闻', params: {} },
|
||||
{ name: '工具', params: {} },
|
||||
{ name: '退出', params: {} }
|
||||
],
|
||||
allFunctions: [],
|
||||
originalFunctions: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -199,9 +204,15 @@ export default {
|
||||
langCode: this.form.langCode,
|
||||
language: this.form.language,
|
||||
sort: this.form.sort,
|
||||
functions: this.currentFunctions
|
||||
functions: this.currentFunctions.map(item => {
|
||||
console.log(item)
|
||||
return ({
|
||||
pluginId: item.id,
|
||||
paramInfo: item.params
|
||||
})
|
||||
})
|
||||
};
|
||||
Api.agent.updateAgentConfig(this.$route.query.agentId, configData, ({ data }) => {
|
||||
Api.agent.updateAgentConfig(this.$route.query.agentId, configData, ({data}) => {
|
||||
if (data.code === 0) {
|
||||
this.$message.success({
|
||||
message: '配置保存成功',
|
||||
@@ -245,10 +256,11 @@ export default {
|
||||
message: '配置已重置',
|
||||
showClose: true
|
||||
})
|
||||
}).catch(() => { });
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
fetchTemplates() {
|
||||
Api.agent.getAgentTemplate(({ data }) => {
|
||||
Api.agent.getAgentTemplate(({data}) => {
|
||||
if (data.code === 0) {
|
||||
this.templates = data.data;
|
||||
} else {
|
||||
@@ -295,7 +307,7 @@ export default {
|
||||
};
|
||||
},
|
||||
fetchAgentConfig(agentId) {
|
||||
Api.agent.getDeviceConfig(agentId, ({ data }) => {
|
||||
Api.agent.getDeviceConfig(agentId, ({data}) => {
|
||||
if (data.code === 0) {
|
||||
this.form = {
|
||||
...this.form,
|
||||
@@ -309,7 +321,33 @@ export default {
|
||||
intentModelId: data.data.intentModelId
|
||||
}
|
||||
};
|
||||
this.currentFunctions = data.data.functions || [];
|
||||
// 后端只给了最小映射:[{ id, agentId, pluginId }, ...]
|
||||
const savedMappings = data.data.functions || [];
|
||||
|
||||
// 先保证 allFunctions 已经加载(如果没有,则先 fetchAllFunctions)
|
||||
const ensureFuncs = this.allFunctions.length
|
||||
? Promise.resolve()
|
||||
: this.fetchAllFunctions();
|
||||
|
||||
ensureFuncs.then(() => {
|
||||
// 合并:按照 pluginId(id 字段)把全量元数据信息补齐
|
||||
this.currentFunctions = savedMappings.map(mapping => {
|
||||
const meta = this.allFunctions.find(f => f.id === mapping.pluginId);
|
||||
if (!meta) {
|
||||
// 插件定义没找到,退化处理
|
||||
return { id: mapping.pluginId, name: mapping.pluginId, params: {} };
|
||||
}
|
||||
return {
|
||||
id: mapping.pluginId,
|
||||
name: meta.name,
|
||||
// 后端如果还有 paramInfo 字段就用 mapping.paramInfo,否则用 meta.params 默认值
|
||||
params: mapping.paramInfo || { ...meta.params },
|
||||
fieldsMeta: meta.fieldsMeta // 保留以便对话框渲染 tooltip
|
||||
};
|
||||
});
|
||||
// 备份原始,以备取消时恢复
|
||||
this.originalFunctions = JSON.parse(JSON.stringify(this.currentFunctions));
|
||||
});
|
||||
} else {
|
||||
this.$message.error(data.msg || '获取配置失败');
|
||||
}
|
||||
@@ -317,7 +355,7 @@ export default {
|
||||
},
|
||||
fetchModelOptions() {
|
||||
this.models.forEach(model => {
|
||||
Api.model.getModelNames(model.type, '', ({ data }) => {
|
||||
Api.model.getModelNames(model.type, '', ({data}) => {
|
||||
if (data.code === 0) {
|
||||
this.$set(this.modelOptions, model.type, data.data.map(item => ({
|
||||
value: item.id,
|
||||
@@ -334,7 +372,7 @@ export default {
|
||||
this.voiceOptions = [];
|
||||
return;
|
||||
}
|
||||
Api.model.getModelVoices(modelId, '', ({ data }) => {
|
||||
Api.model.getModelVoices(modelId, '', ({data}) => {
|
||||
if (data.code === 0 && data.data) {
|
||||
this.voiceOptions = data.data.map(voice => ({
|
||||
value: voice.id,
|
||||
@@ -347,17 +385,15 @@ export default {
|
||||
},
|
||||
getFunctionColor(name) {
|
||||
const hash = [...name].reduce((acc, char) => acc + char.charCodeAt(0), 0);
|
||||
return this.functionColorMap[hash % 7];
|
||||
return this.functionColorMap[hash % this.functionColorMap.length];
|
||||
},
|
||||
showFunctionIcons(type) {
|
||||
// TODO 暂时不放出来
|
||||
return false;
|
||||
// return type === 'Intent' &&
|
||||
// this.form.model.intentModelId !== 'Intent_nointent';
|
||||
return type === 'Intent' &&
|
||||
this.form.model.intentModelId !== 'Intent_nointent';
|
||||
},
|
||||
handleModelChange(type, value) {
|
||||
if (type === 'Intent' && value !== 'Intent_nointent') {
|
||||
this.fetchFunctionList();
|
||||
this.fetchAllFunctions();
|
||||
}
|
||||
if (type === 'Memory' && value === 'Memory_nomem') {
|
||||
this.form.chatHistoryConf = 0;
|
||||
@@ -366,18 +402,34 @@ export default {
|
||||
this.form.chatHistoryConf = 2;
|
||||
}
|
||||
},
|
||||
fetchFunctionList() {
|
||||
// 使用假数据代替API调用
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
this.currentFunctions = [
|
||||
{ name: '天气', params: { city: '北京' } },
|
||||
{ name: '新闻', params: { type: '科技' } }
|
||||
];
|
||||
resolve();
|
||||
}, 500);
|
||||
fetchAllFunctions() {
|
||||
return new Promise((resolve, reject) => {
|
||||
Api.model.getPluginFunctionList(null, ({ data }) => {
|
||||
if (data.code === 0) {
|
||||
this.allFunctions = data.data.map(item => {
|
||||
const meta = JSON.parse(item.fields || '[]');
|
||||
const params = meta.reduce((m, f) => {
|
||||
m[f.key] = f.default;
|
||||
return m;
|
||||
}, {});
|
||||
return { ...item, fieldsMeta: meta, params };
|
||||
});
|
||||
resolve();
|
||||
} else {
|
||||
this.$message.error(data.msg || '获取插件列表失败');
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
openFunctionDialog() {
|
||||
// 显示编辑对话框时,确保 allFunctions 已经加载
|
||||
if (this.allFunctions.length === 0) {
|
||||
this.fetchAllFunctions().then(() => this.showFunctionDialog=true);
|
||||
} else {
|
||||
this.showFunctionDialog = true;
|
||||
}
|
||||
},
|
||||
handleUpdateFunctions(selected) {
|
||||
this.currentFunctions = selected;
|
||||
console.log('保存的功能列表:', selected);
|
||||
@@ -385,9 +437,11 @@ export default {
|
||||
},
|
||||
handleDialogClosed(saved) {
|
||||
if (!saved) {
|
||||
// 如果未保存,恢复原始功能列表
|
||||
this.currentFunctions = JSON.parse(JSON.stringify(this.originalFunctions));
|
||||
} else {
|
||||
this.originalFunctions = JSON.parse(JSON.stringify(this.currentFunctions));
|
||||
}
|
||||
this.showFunctionDialog = false;
|
||||
},
|
||||
updateChatHistoryConf() {
|
||||
if (this.form.model.memModelId === 'Memory_nomem') {
|
||||
@@ -420,9 +474,7 @@ export default {
|
||||
const agentId = this.$route.query.agentId;
|
||||
if (agentId) {
|
||||
this.fetchAgentConfig(agentId);
|
||||
this.fetchFunctionList().then(() => {
|
||||
this.originalFunctions = JSON.parse(JSON.stringify(this.currentFunctions));
|
||||
});
|
||||
this.fetchAllFunctions();
|
||||
}
|
||||
this.fetchModelOptions();
|
||||
this.fetchTemplates();
|
||||
|
||||
Reference in New Issue
Block a user