herenshan112
4 months ago
9 changed files with 333 additions and 31 deletions
@ -0,0 +1,177 @@ |
|||||
|
<!-- |
||||
|
@ 作者: han2015 |
||||
|
@ 时间: 2025-05-12 15:39:13 |
||||
|
@ 备注: aibot组件 |
||||
|
--> |
||||
|
<script lang="ts" setup> |
||||
|
|
||||
|
import { doAiChat,aiChatData} 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 baseURL=import.meta.env.VITE_APP_BASE_API |
||||
|
const conversation=ref("") //当前会话的uuid |
||||
|
const myquestion=ref('') |
||||
|
const controller = ref<AbortController | null>(null) |
||||
|
|
||||
|
const interact_msg=ref<{ask:boolean,think:string,content:string}[]>([]) |
||||
|
const props = withDefaults(defineProps<{ |
||||
|
//closefunc:()=>void, |
||||
|
//agent:{model:boolean,name:string,uuid:string[]} |
||||
|
}>(),{}) |
||||
|
|
||||
|
|
||||
|
//消息体 |
||||
|
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 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
defineExpose({onSendParamToAI}) |
||||
|
|
||||
|
async function onSendParamToAI(user:string,arr:Array<{ uuids: string[]; params: { [key: string]: any } }>){ |
||||
|
interact_msg.value=[] |
||||
|
for (let ele of arr){ |
||||
|
interact_msg.value.unshift({ask:true,think:"", content:"AI正在分析。。。"}) |
||||
|
for (let uid of ele.uuids){ |
||||
|
await doRequest(user,uid,ele.params) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async function doRequest(_user:string,uuid:string,param:any){ |
||||
|
let mRespMsg="" |
||||
|
const params={ |
||||
|
"onlineSearch":"否", |
||||
|
"useDataset":"否" |
||||
|
} |
||||
|
for (let item of checkedModel.value){ |
||||
|
if(item==="onlineSearch") params.onlineSearch="是" |
||||
|
if(item==="useDataset") params.useDataset="是" |
||||
|
} |
||||
|
|
||||
|
controller.value = new AbortController(); |
||||
|
try{ |
||||
|
const res= await doAiChat(`${baseURL}/aibot/assisted/${uuid}/chat`,{ |
||||
|
inputs: params, |
||||
|
query:JSON.stringify(param), |
||||
|
response_mode:"streaming", |
||||
|
conversation_id:"",//conversation.value, |
||||
|
user:_user,//这里已经base64解析了 |
||||
|
},controller.value.signal |
||||
|
) |
||||
|
|
||||
|
if (!res.ok) { |
||||
|
throw new Error(`HTTP ${res.status} ${res.statusText}`); |
||||
|
} |
||||
|
|
||||
|
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 |
||||
|
mRespMsg+=json.answer |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}catch (e: any) { |
||||
|
if (e.name === 'AbortError') { |
||||
|
console.log('用户手动中断') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
interact_msg.value.unshift({ask:true,think:"", content:JSON.stringify(param)}) |
||||
|
const arr=mRespMsg.split("</think>") |
||||
|
if(arr.length===1){ |
||||
|
interact_msg.value.unshift({ask:false,think:"",content:arr[0]}) |
||||
|
}else{ |
||||
|
//思考模式 |
||||
|
interact_msg.value.unshift({ask:false,think:arr[0],content:arr[1]}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function resetContext(){ |
||||
|
interact_msg.value=[] |
||||
|
conversation.value="" |
||||
|
//props.closefunc() |
||||
|
} |
||||
|
|
||||
|
//渲染完页面再执行 |
||||
|
// onMounted(() => { |
||||
|
// }); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div :style="{backgroundColor:'#f3f3f3'}"> |
||||
|
<div class="reply_area" > |
||||
|
<template v-for="msg of interact_msg"> |
||||
|
<div v-if="msg.ask" class="t_ask" >{{ msg.content }}</div> |
||||
|
<div v-else class="t_resp"> |
||||
|
{{ msg.content }} |
||||
|
<!-- <VueMarkdown :markdown="msg.content"></VueMarkdown> --> |
||||
|
</div> |
||||
|
</template> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
.reply_area{ |
||||
|
width: 260px; |
||||
|
background: white; |
||||
|
overflow-y: auto; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
overflow-wrap:anywhere; |
||||
|
} |
||||
|
|
||||
|
.t_ask{ |
||||
|
margin: 5px; |
||||
|
align-self: end; |
||||
|
background-color: rgb(188 211 241); |
||||
|
border-radius:10px; |
||||
|
} |
||||
|
.t_resp{ |
||||
|
margin: 5px; |
||||
|
align-self: start; |
||||
|
color: black; |
||||
|
background-color: rgb(222, 243, 222); |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue