|
<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:#eeeeee;">智能体配置</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;background: #ffffff;color: #666666" />
|
</div>
|
|
</div>
|
<div style="background:#eeeeee;width: 50%;">
|
<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-space direction="vertical" size="large">
|
<a-select :size="'large'" 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'
|
:value="obj.llm_id"
|
>
|
{{obj.llm_name}}
|
</a-option>
|
</a-optgroup>
|
</a-select>
|
</a-space>
|
</a-collapse-item>
|
<a-collapse-item header="开场引导" :key="'2'" disabled>
|
|
</a-collapse-item>
|
<a-collapse-item header="知识库" key="3">
|
<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-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">
|
<div :style="{height:heightrg}">
|
<div style="padding: 10px">
|
<a-avatar :style="{ backgroundColor: '#3370ff' }">
|
<img
|
:style="{ width: '100%'}"
|
alt="dessert"
|
src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
|
/>
|
</a-avatar>
|
调试预览
|
</div>
|
<a-divider style="margin: 0;margin-left: 10px"/>
|
|
<div class="bottom">
|
<div class="input">
|
<a-input placeholder="输入您想了解的内容，按Enter发送">
|
<template #suffix>
|
<icon-send style="cursor: pointer" />
|
</template>
|
</a-input></div>
|
<div class="text">内容由AI生成，仅供参考</div>
|
</div>
|
</div>
|
</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";
|
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",
|
parameters: [
|
{
|
"key": "knowledge",
|
"optional": false
|
}
|
]
|
},
|
kb_ids: [
|
"985eda244efc11ef9a7a0242ac120006"
|
],
|
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 heightrg = ref('calc(100vh - 100px)')
|
const emit = defineEmits(['cancelModal'])
|
const rules = {
|
name: [
|
{
|
required: true,
|
message:'名称不允许为空',
|
},
|
],
|
}
|
|
|
const handleSubmit = async({values, errors}) => {
|
// console.log('values:', values, '\nerrors:', 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()
|
|
}
|
|
}
|
|
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;
|
})
|
};
|
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');
|
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;
|
}
|
}
|
</style>
|
