herenshan112
4 months ago
7 changed files with 879 additions and 70 deletions
@ -0,0 +1,325 @@ |
|||||
|
<!-- |
||||
|
@ 作者: han2015 |
||||
|
@ 时间: 2025-05-12 15:39:13 |
||||
|
@ 备注: aibot组件 |
||||
|
--> |
||||
|
<script lang="ts" setup> |
||||
|
import { |
||||
|
Promotion, |
||||
|
Remove |
||||
|
} from '@element-plus/icons-vue' |
||||
|
import { doAiTraining,doAiChat,aiChatData,getAiChatList,getAiChat,setAiChat,delAiChat} from "@/api/doc/space" |
||||
|
import {ElText,ElInput, ButtonInstance} from "element-plus"; |
||||
|
import { VueMarkdown } from '@crazydos/vue-markdown' |
||||
|
import rehypeRaw from 'rehype-raw' |
||||
|
import remarkGfm from 'remark-gfm' |
||||
|
|
||||
|
//选中的咨询模式 |
||||
|
const checkedModel = ref([]) |
||||
|
//支持的模式 |
||||
|
const aimodels = [{name:'联网检索',key:"onlineSearch"}, {name:'公司知识库',key:"useDataset"}] |
||||
|
const baseURL=import.meta.env.VITE_APP_BASE_API |
||||
|
const conversation=ref("") //当前会话的uuid |
||||
|
const myquestion=ref('') |
||||
|
const controller = ref<AbortController | null>(null) |
||||
|
const inputState=ref(true) |
||||
|
const conversations=ref<chatRecord[]>([]) |
||||
|
const centHoverItem=ref("") |
||||
|
|
||||
|
const interact_msg=ref<{ask:boolean,think:string,content:string}[]>([]) |
||||
|
const props = withDefaults(defineProps<{ |
||||
|
userid:string, |
||||
|
closefunc:()=>void, |
||||
|
agent:{model:boolean,name:string,uuid:string} |
||||
|
}>(),{}) |
||||
|
|
||||
|
const respMsg=ref("") |
||||
|
|
||||
|
//消息体 |
||||
|
interface message{ |
||||
|
ask:boolean, |
||||
|
think:string, |
||||
|
content:string |
||||
|
} |
||||
|
//会话记录 |
||||
|
interface chatRecord{ |
||||
|
uuid:string, |
||||
|
agentuuid:string, |
||||
|
brief:string, |
||||
|
messages:message[] |
||||
|
} |
||||
|
|
||||
|
/* 中断函数，供按钮调用 */ |
||||
|
function abortFetch() { |
||||
|
if (controller.value) { |
||||
|
controller.value.abort() |
||||
|
controller.value = null |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async function onSendTextToAI(){ |
||||
|
if(myquestion.value==="")return; |
||||
|
inputState.value=false |
||||
|
|
||||
|
const params={ |
||||
|
"onlineSearch":"否", |
||||
|
"useDataset":"否" |
||||
|
} |
||||
|
for (let item of checkedModel.value){ |
||||
|
if(item==="onlineSearch") params.onlineSearch="是" |
||||
|
if(item==="useDataset") params.useDataset="是" |
||||
|
} |
||||
|
if (conversation.value==""){ |
||||
|
//开启新对话 |
||||
|
interact_msg.value=[{ask:true,think:"", content:myquestion.value}] |
||||
|
}else{ |
||||
|
interact_msg.value.push({ask:true,think:"", content:myquestion.value}) |
||||
|
} |
||||
|
|
||||
|
controller.value = new AbortController(); |
||||
|
try{ |
||||
|
const res= await doAiChat(`${baseURL}/aibot/agents/${props.agent.uuid}/chat`,{ |
||||
|
inputs: params, |
||||
|
query:myquestion.value, |
||||
|
response_mode:"streaming", |
||||
|
conversation_id:conversation.value, |
||||
|
user:atob(props.userid),//这里已经base64解析了 |
||||
|
},controller.value.signal |
||||
|
) |
||||
|
|
||||
|
if (!res.ok) { |
||||
|
throw new Error(`HTTP ${res.status} ${res.statusText}`); |
||||
|
} |
||||
|
|
||||
|
myquestion.value="" |
||||
|
const reader = res.body!.getReader(); |
||||
|
const decoder = new TextDecoder('utf-8'); |
||||
|
|
||||
|
let chunk = ''; // 行缓存 |
||||
|
while (true) { |
||||
|
const {done, value} = await reader.read() |
||||
|
if (done) break; |
||||
|
|
||||
|
// 服务器可能一次返回多行，需要手动按行拆分 |
||||
|
chunk += decoder.decode(value, {stream: true}); |
||||
|
const lines = chunk.split(/\n/); |
||||
|
chunk = lines.pop() || '' |
||||
|
for (const line of lines) { |
||||
|
if (!line.trim()) continue; // 跳过空行 |
||||
|
if (line.startsWith('data: ')) { |
||||
|
const data = line.slice(6); |
||||
|
const json = JSON.parse(data); |
||||
|
if(json.event==="message"){ |
||||
|
conversation.value=json.conversation_id |
||||
|
respMsg.value+=json.answer |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}catch (e: any) { |
||||
|
if (e.name === 'AbortError') { |
||||
|
console.log('用户手动中断') |
||||
|
} |
||||
|
}finally{ |
||||
|
inputState.value=true |
||||
|
} |
||||
|
|
||||
|
const arr=respMsg.value.split("</think>") |
||||
|
if(arr.length===1){ |
||||
|
interact_msg.value.push({ask:false,think:"",content:arr[0]}) |
||||
|
}else{ |
||||
|
//思考模式 |
||||
|
interact_msg.value.push({ask:false,think:arr[0],content:arr[1]}) |
||||
|
} |
||||
|
|
||||
|
respMsg.value="" |
||||
|
|
||||
|
setAiChat({ |
||||
|
"userid":atob(props.userid), |
||||
|
"uuid":conversation.value, |
||||
|
"brief":interact_msg.value[0].content, |
||||
|
"content":JSON.stringify(interact_msg.value) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
//加载交流记录列表 |
||||
|
function loadKnownLibList(){ |
||||
|
//userid 需要 base64解析 |
||||
|
getAiChatList({"userid":atob(props.userid)}).then(resp=>{ |
||||
|
conversations.value=resp.data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
//查看具体的历史记录 |
||||
|
function showChat(uuid:string){ |
||||
|
getAiChat({ |
||||
|
"userid":atob(props.userid), |
||||
|
"uuid":uuid |
||||
|
}).then(resp=>{ |
||||
|
interact_msg.value = JSON.parse(resp.data.content) |
||||
|
conversation.value=resp.data.uuid |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
//删除具体的历史记录 |
||||
|
function onDelChat(uuid:string){ |
||||
|
delAiChat({ |
||||
|
"userid":atob(props.userid), |
||||
|
"uuid":uuid |
||||
|
}).then(resp=>{ |
||||
|
loadKnownLibList() |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
function handleMouseEnter(row:any){ |
||||
|
if(centHoverItem.value==row.uuid) return; |
||||
|
centHoverItem.value=row.uuid |
||||
|
} |
||||
|
function handleMouseLeave(){ |
||||
|
centHoverItem.value="" |
||||
|
} |
||||
|
|
||||
|
function newContext(){ |
||||
|
inputState.value=true |
||||
|
interact_msg.value=[] |
||||
|
conversation.value="" |
||||
|
loadKnownLibList() //刷新对话列表 |
||||
|
} |
||||
|
|
||||
|
function resetContext(){ |
||||
|
interact_msg.value=[] |
||||
|
conversation.value="" |
||||
|
props.closefunc() |
||||
|
} |
||||
|
|
||||
|
//渲染完页面再执行 |
||||
|
onMounted(() => { |
||||
|
loadKnownLibList() |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<el-drawer |
||||
|
:model-value="agent.model" |
||||
|
:title="agent.name+' : 知识库'" |
||||
|
direction="rtl" |
||||
|
size="80%" |
||||
|
@close="resetContext" |
||||
|
:style="{padding:'17px',backgroundColor:'#f3f3f3'}"> |
||||
|
<div style="display:grid;grid-template-columns:1fr 4fr; width: 100%;height: 100%;"> |
||||
|
<div style="overflow-y: auto;"> |
||||
|
<ul> |
||||
|
<li class="action_menu" @click="newContext"> |
||||
|
【新建会话】 |
||||
|
</li> |
||||
|
<li class="list_item" v-for="item in conversations" @mouseover="handleMouseEnter(item)" @mouseleave="handleMouseLeave()" @click="showChat(item.uuid)">{{ item.brief }} |
||||
|
<el-button v-show="centHoverItem == item.uuid" icon="Delete" size="small" circle @click="(e)=>{e.stopPropagation();onDelChat(item.uuid)}"></el-button> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div style="position: relative;background: white;overflow-y: auto;"> |
||||
|
<div class="reply_area" > |
||||
|
<template v-for="msg of interact_msg"> |
||||
|
<el-text v-if="msg.ask" class="t_ask" >{{ msg.content }}</el-text> |
||||
|
<div v-else class="t_resp"> |
||||
|
<el-text style="white-space: pre-line" v-html="msg.think"></el-text> |
||||
|
<VueMarkdown :markdown="msg.content" :rehype-plugins="[rehypeRaw]" :remark-plugins="[remarkGfm]" ></VueMarkdown> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
<VueMarkdown :markdown="respMsg" :rehype-plugins="[rehypeRaw]" class="t_resp"></VueMarkdown> |
||||
|
</div> |
||||
|
<div class="question_com" :class="{newquestion:conversation!='' || !inputState}"> |
||||
|
<h1 v-show="conversation =='' && inputState" style="font-size: 78px;margin: 10px;">恒信高科AI平台</h1> |
||||
|
<el-checkbox-group v-model="checkedModel" style="display:flex; margin-bottom: 10px;"> |
||||
|
<el-checkbox-button v-for="mod in aimodels" :value="mod.key"> |
||||
|
{{ mod.name }} |
||||
|
</el-checkbox-button> |
||||
|
</el-checkbox-group> |
||||
|
|
||||
|
<el-input placeholder="问灵犀..." v-model="myquestion" input-style="border-radius: 20px;" |
||||
|
resize="none" :autosize="{minRows: 4}" type="textarea" /> |
||||
|
<el-button :style="{display :inputState ? '':'none'}" type="primary" :icon="Promotion" circle @click="onSendTextToAI"/> |
||||
|
<el-button :style="{display :inputState ? 'none':''}" type="primary" :icon="Remove" circle @click="abortFetch"/> |
||||
|
<span>内容由 AI 生成，请仔细甄别</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</el-drawer> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.app_container { |
||||
|
padding: 10px 30px 0px 30px; |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.newquestion{ |
||||
|
bottom: 20px; |
||||
|
} |
||||
|
.question_com{ |
||||
|
position: fixed; |
||||
|
width: 52%; |
||||
|
margin: 0 50px; |
||||
|
text-align: center; |
||||
|
display: block; |
||||
|
button{ |
||||
|
position: absolute; |
||||
|
bottom: 25px; |
||||
|
right: 5px; |
||||
|
} |
||||
|
} |
||||
|
.reply_area{ |
||||
|
display: flex; |
||||
|
min-height: 20%; |
||||
|
flex-direction: column; |
||||
|
margin: 15px 15px 110px 0px; |
||||
|
} |
||||
|
.t_ask{ |
||||
|
align-self: end; |
||||
|
line-height: 34px; |
||||
|
background-color: rgb(188 211 241); |
||||
|
padding: 0 30px; |
||||
|
border-radius:10px; |
||||
|
margin: 15px; |
||||
|
} |
||||
|
.t_resp{ |
||||
|
align-self: start; |
||||
|
line-height: 30px; |
||||
|
margin: 20px 33px; |
||||
|
font-size: 18px; |
||||
|
color: black; |
||||
|
} |
||||
|
.dynamic-width-message-box-byme .el-message-box__message{ |
||||
|
width: 100%; |
||||
|
} |
||||
|
.action_menu{ |
||||
|
background-color: white; |
||||
|
padding: 10px 8px; |
||||
|
margin: 3px 14px 18px 0; |
||||
|
border-radius: 8px; |
||||
|
border: 1px solid #c9c6c6; |
||||
|
} |
||||
|
.list_item{ |
||||
|
display: flex; |
||||
|
background-color: #dddddd; |
||||
|
padding: 10px 8px; |
||||
|
margin: 3px 14px 3px 0; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
border-radius: 8px; |
||||
|
text-wrap-mode: nowrap; |
||||
|
button{ |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
|
<style> |
||||
|
think { |
||||
|
color: #939393; |
||||
|
margin-bottom: 8px; |
||||
|
display: block; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue