<template>
|
<a-button
|
v-if="typeAngint == 'edit'"
|
type="text"
|
size="small"
|
@click="editClick"
|
>
|
<template #icon>
|
<icon-tool />
|
</template>
|
</a-button>
|
<!-- <a-button v-if="typeAngint=='add'" style="margin-left: 10px" type="primary" @click="handleClick">确定</a-button>-->
|
<a-modal
|
v-model:visible="visible"
|
title=""
|
@before-open="handleOpened"
|
@cancel="handleCancel"
|
:footer="false"
|
title-align="start"
|
fullscreen
|
>
|
<div class="main-container">
|
<div class="main-container-lf">
|
<div style="padding: 10px;font-size: 16px;background: var(--color-neutral-3);">智能体配置</div>
|
<div style="display: flex;width: 100%;" :style="{height:height}">
|
<div style="width: 50%;height: 100%">
|
<div style="padding: 10px;font-size: 12px;color: #2a2a2b;">智能体画像</div>
|
<div>
|
<a-textarea v-model="system" placeholder="" disabled style="height: 400px;" />
|
</div>
|
|
</div>
|
<div style="width: 50%;border: 1px solid var(--color-neutral-3);background: var(--color-neutral-3)">
|
<a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit" layout="vertical" >
|
<a-collapse :default-active-key="['1']">
|
<a-collapse-item header="基础信息" key="0" v-if="typeAngint == 'edit'">
|
<a-input v-model="form.name" placeholder="请输入智能体名称" style="width:200px;margin-top: 10px" />
|
</a-collapse-item>
|
<a-collapse-item header="AI模型配置" key="1">
|
<a-form-item field="llm_id" label="模型">
|
<a-space direction="vertical" size="large">
|
<a-select :size="'large'" field="llm_id" v-model="form.llm_id" :style="{width:'25rem'}" placeholder="请选择 ...">
|
<a-optgroup
|
:label="index"
|
v-for="(item, index) in modelList"
|
:key="index"
|
>
|
<a-option
|
v-for="obj in item"
|
:key="obj.fid"
|
:disabled="!obj.available"
|
:value="obj.llm_id"
|
>
|
{{ obj.llm_name }}
|
</a-option>
|
</a-optgroup>
|
</a-select>
|
</a-space>
|
</a-form-item>
|
</a-collapse-item>
|
<a-collapse-item header="开场引导" :key="'2'" disabled>
|
</a-collapse-item>
|
<a-collapse-item header="知识库" key="3">
|
<a-form-item field="kb_ids" label="知识库">
|
<a-select
|
v-model="form.kb_ids"
|
:style="{ width: '25rem' }"
|
placeholder="请选择 ..."
|
multiple
|
>
|
<a-option
|
v-for="item in tabs"
|
:key="item.id"
|
:value="item.id"
|
>{{ item.name }}</a-option
|
>
|
</a-select>
|
</a-form-item>
|
</a-collapse-item>
|
<a-collapse-item header="工具" key="4" disabled>
|
</a-collapse-item>
|
<a-collapse-item header="工作流" key="5" disabled>
|
</a-collapse-item>
|
</a-collapse>
|
|
<a-form-item>
|
<div
|
style="
|
position: absolute;
|
right: 10px;
|
top: 0px;
|
z-index: 99999;
|
"
|
>
|
<!-- <a-button @click="visible = false">取消</a-button>-->
|
<a-button
|
style="margin-left: 10px"
|
type="primary"
|
html-type="submit"
|
>保存</a-button
|
>
|
</div>
|
</a-form-item>
|
</a-form>
|
</div>
|
</div>
|
</div>
|
<div class="main-container-rt">
|
<sessionAction></sessionAction>
|
</div>
|
</div>
|
</a-modal>
|
</template>
|
|
<script lang="ts" setup>
|
import { onMounted, onBeforeMount, reactive, ref, nextTick } from 'vue';
|
import { IconSend } from '@arco-design/web-vue/es/icon';
|
import { queryKbList, queryModelList } from '@/api/kbList';
|
import useLoading from '@/hooks/loading';
|
import { dialogSet } from '@/api/Agent';
|
import { Message } from '@arco-design/web-vue';
|
import EventBus from "@/utils/EventBus";
|
import sessionAction from "@/views/dmx/IntelligentAgent/components/sessionAction.vue";
|
const { setLoading } = useLoading(true);
|
const props = defineProps(['typeAngint', 'formData']);
|
const visible = ref(false);
|
const loading = ref(false);
|
const form = reactive({
|
name: '',
|
icon: '',
|
language: 'English',
|
prompt_config: {
|
empty_response: '',
|
prologue: '你好！ 我是你的助理，有什么可以帮到你的吗？',
|
quote: true,
|
self_rag: true,
|
system:
|
'示例：\n' +
|
'你是 XX，具有 XX 经验，擅长 XX，…\n' +
|
'你的任务是 XX ，需要按照以下步骤执行：\n' +
|
'1. XX\n' +
|
'2. XX\n' +
|
'3. …\n' +
|
'{knowlege}',
|
parameters: [
|
{
|
key: 'knowledge',
|
optional: false,
|
},
|
],
|
},
|
kb_ids: [],
|
llm_id: 'qwen-plus',
|
llm_setting: {
|
temperature: 0.1,
|
top_p: 0.3,
|
presence_penalty: 0.4,
|
frequency_penalty: 0.7,
|
max_tokens: 512,
|
},
|
similarity_threshold: 0.2,
|
vector_similarity_weight: 0.30000000000000004,
|
top_n: 8,
|
});
|
const system = ref('');
|
const embdId = ref('');
|
const modelList = ref({});
|
const renderData = ref([]);
|
const formRef = ref(null);
|
let tabs = ref([]);
|
const height = ref('calc(100vh - 150px)');
|
const emit = defineEmits(['cancelModal']);
|
const rules = {
|
name: [
|
{
|
required: true,
|
message: '名称不允许为空',
|
},
|
],
|
llm_id: [
|
{
|
required: true,
|
message: '模型不能为空',
|
},
|
],
|
kb_ids: [
|
{
|
required: true,
|
message: '知识库不能为空',
|
},
|
],
|
};
|
|
const handleSubmit = async ({ values, errors }) => {
|
// console.log('values:', values, '\nerrors:', errors)
|
if(!errors){
|
let title = '创建成功';
|
let formNew = { ...form };
|
if (props.typeAngint == 'edit') {
|
formNew.dialog_id = form.id;
|
delete formNew.id;
|
delete formNew.off;
|
title = '修改成功';
|
}
|
const data = await dialogSet(formNew);
|
if (data.code == 0) {
|
Message.success(title);
|
handleCancel();
|
EventBus.emit('queryList');
|
}
|
}
|
};
|
|
const editClick = (data) => {
|
visible.value = true;
|
console.log(props.formData);
|
Object.assign(form, props.formData);
|
console.log(form);
|
system.value = form.prompt_config.system;
|
};
|
|
const handleClick = (data) => {
|
visible.value = true;
|
nextTick(() => {
|
Object.assign(form, data);
|
console.log(form,'传值');
|
system.value = form.prompt_config.system;
|
if(tabs.value && tabs.value.length>0){
|
form.kb_ids = [tabs.value[0].id];
|
}
|
});
|
};
|
defineExpose({
|
handleClick,
|
});
|
const handleBeforeOk = (done) => {
|
formRef.value.validate().then((res) => {
|
console.log('form:', form);
|
if (!form.name) {
|
done(false);
|
} else {
|
console.log('请求数据');
|
}
|
});
|
};
|
const handleCancel = () => {
|
visible.value = false;
|
emit('cancelModal');
|
};
|
|
const handleOpened = (el) => {
|
// formRef.value.resetFields();
|
};
|
const queryModel = async (params) => {
|
try {
|
const data = await queryModelList(params);
|
// console.log(data.data, '大模型列表');
|
modelList.value = data.data;
|
} catch (err) {
|
// you can report use errorHandler or other
|
} finally {
|
}
|
};
|
const file = ref();
|
|
const onChange = (_, currentFile) => {
|
file.value = {
|
...currentFile,
|
// url: URL.createObjectURL(currentFile.file),
|
};
|
};
|
const onProgress = (currentFile) => {
|
file.value = currentFile;
|
};
|
|
const knowledgeData = async (params = { page: 1, page_size: 20 }) => {
|
setLoading(true);
|
try {
|
const { data } = await queryKbList(params);
|
console.log(data, 'data');
|
nextTick(() => {
|
tabs.value = data;
|
console.log(tabs.value, 'tabs');
|
});
|
} catch (err) {
|
// you can report use errorHandler or other
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
onBeforeMount(() => {
|
queryModel({});
|
knowledgeData();
|
});
|
onMounted(() => {});
|
</script>
|
|
<style scoped lang="less">
|
.main-container {
|
width: 100%;
|
display: flex;
|
.main-container-lf {
|
width: 60%;
|
}
|
.main-container-rt {
|
position: relative;
|
width: 40%;
|
}
|
}
|
.bottom {
|
width: 100%;
|
position: absolute;
|
bottom: 40px;
|
left: 0;
|
.input {
|
margin-left: 20%;
|
width: 60%;
|
}
|
.text {
|
margin-left: 40%;
|
font-size: 12px;
|
color: lightgrey;
|
line-height: 40px;
|
}
|
}
|
:deep(.arco-textarea-wrapper.arco-textarea-disabled){
|
background: var(--color-bg-2);
|
color: var(--color-text-1);
|
}
|
</style>
|
