100 lines
2.9 KiB
Vue
100 lines
2.9 KiB
Vue
<script lang="ts" setup>
|
||
import SvgIcon from '@/components/SvgIcon/index.vue'
|
||
import KnowledgeList from './KnowledgeList.vue'
|
||
import ModelSelect from '@/views/common/ModelSelect.vue'
|
||
import { ref } from 'vue'
|
||
import { useAppStore } from '@/views/ai/app/store'
|
||
import { ArrowRight, ArrowDown } from '@element-plus/icons-vue'
|
||
const emit = defineEmits(['update'])
|
||
const appStore = useAppStore()
|
||
const knowledgeRef = ref()
|
||
|
||
async function onSaveModel(val) {
|
||
appStore.modelId = val.id
|
||
console.log(val)
|
||
emit('update')
|
||
}
|
||
|
||
function onShowKbPane() {
|
||
knowledgeRef.value.show()
|
||
}
|
||
|
||
function onRemove(item) {
|
||
appStore.removeKnowledge(item)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="p-2 py-4 flex flex-col gap-3">
|
||
<el-collapse :model-value="['0', '1']">
|
||
<el-collapse-item name="0" title="基础配置">
|
||
<div class="flex items-center">
|
||
<div class="w-24">对话模型：</div>
|
||
<ModelSelect :id="appStore.modelId" class="w-full" @update="onSaveModel" />
|
||
</div>
|
||
</el-collapse-item>
|
||
|
||
<el-collapse-item name="1" title="知识库">
|
||
<template #icon="{ isActive }">
|
||
<div class="flex-1 text-right">
|
||
<el-button text @click.stop="onShowKbPane" class="flot-right">
|
||
<SvgIcon class="text-lg" icon="ic:round-plus" />
|
||
</el-button>
|
||
<el-icon class="el-collapse-item__arrow " :class="{ 'is-active': isActive }">
|
||
<ArrowRight />
|
||
</el-icon>
|
||
</div>
|
||
</template>
|
||
<div v-if="appStore.knowledges">
|
||
<div class="knowledge-list">
|
||
<div
|
||
v-for="item in appStore.knowledges"
|
||
:key="item.id"
|
||
class="knowledge-item w-full bg-white overflow-hidden rounded-lg hover:bg-gray-100 p-3 mb-2"
|
||
>
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex gap-1 items-center">
|
||
<SvgIcon class="text-3xl" icon="flat-color-icons:document" />
|
||
<div>{{ item.name }}</div>
|
||
</div>
|
||
<el-button text @click="onRemove(item)">
|
||
<SvgIcon icon="gg:remove" />
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="appStore.knowledges.length == 0" class="text-gray-400 text-md">
|
||
将文档、URL、三方数据源上传为文本知识库后，用户发送消息时，Bot
|
||
能够引用文本知识中的内容回答用户问题。
|
||
</div>
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
|
||
<KnowledgeList ref="knowledgeRef" />
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.el-collapse-item__header {
|
||
font-weight: 600 !important;
|
||
color: #060709cc;
|
||
}
|
||
|
||
.knowledge-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.knowledge-item {
|
||
transition: all 0.2s ease;
|
||
border: 1px solid #eee;
|
||
|
||
&:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||
}
|
||
}
|
||
</style>
|