aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
X1627315083
2025-05-21 20:05:08 +08:00
parent 2487e3dbbc
commit 7ba4c70baf
8 changed files with 333 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src/component/home/chat/index.vue
View File

@@ -1,6 +1,9 @@
<template>
<div class="chat" :class="{active:!openChat}" @click.stop="">
<div v-show="!openChat" class="left" @click="()=>{openChat = !openChat;isChattingRecords=false}">
<div class="top" :class="{active:!isChattingRecords}" @click="()=>{isChattingRecords=!isChattingRecords}">
<i class="fi fi-br-angle-small-down"></i>
</div>
<div v-show="!openChat" class="left" @click="()=>{openChat = !openChat;isChattingRecords=true}">
<i class="fi fi-br-angle-small-down"></i>
</div>
<div class="chatBox">
@@ -9,8 +12,15 @@
<div class="item" v-for="item in chatList" :class="{user:item.role == 'user'}">
<div class="textBox">
<div class="icon">ICON</div>
<div class="text" v-show="item.content.message || item.content.img || item.content.color">
<span>{{item.content.message}}</span>
<div class="text" v-show="item.content.think || item.content.message || item.content.img || item.content.color">
<span class="content">
<div class="showThink" :class="{active:item.content?.isThink}" v-show="item.content.think" @click="()=>item.content?.isThink?(item.content.isThink = false):(item.content.isThink = true)">
<div>已深度思考</div>
<i class="fi fi-br-angle-small-down"></i>
</div>
<div class="think" v-show="item.content?.isThink">{{item.content.think}}</div>
<div class="txt">{{item.content.message}}</div>
</span>
<div class="fileBox">
<div v-if="item?.fileList?.length > 0" class="item" v-for="fileItem in item.fileList">
<div>{{fileItem.name}}</div>
@@ -26,7 +36,7 @@
</div>
</div>
</div>
<i class="fi fi-br-loading" v-if="!item.content.message && !item.content.img && !item.content.color"></i>
<i class="fi fi-br-loading" v-if="!item.content.think && !item.content.message && !item.content.img && !item.content.color"></i>
</div>
</div>
</div>
@@ -41,7 +51,7 @@
<span class="icon iconfont icon-shanchu" @click="deleteFile(item,index)"></span>
</div>
</div>
<i class="fi fi-br-upload">
<i class="fi fi-rs-paperclip-vertical">
<input type="file" @change="handleFileUpload($event)">
</i>
</div>
@@ -111,12 +121,13 @@ export default defineComponent({
let fileList = JSON.parse(JSON.stringify(data.filList))
let fileUrl = (fileList.filter((item:any)=>item.type == 'file').length > 0) ? fileList.filter((item:any)=>item.type == 'file')[0].minioPath : ''
let imageUrlList = (fileList.filter((item:any)=>item.type == 'image').length > 0)? fileList.filter((item:any)=>item.type == 'image').map((item:any)=>item.minioPath).join(',') : ''
data.chatList.push({content:{message:data.chatContent},role:'user',fileList:fileList})
data.chatList.push({content:{message:''},role:'system'})
data.chatList.push({content:{message:data.chatContent,think:''},role:'user',fileList:fileList})
data.chatList.push({content:{message:'',think:''},role:'system'})
const eventSource = new EventSource(`${process.env.VUE_APP_BASE_URL}${Https.httpUrls.llmStream}?token=${getCookie('token')}&prompt=${data.chatContent}&projectId=${data.selectObject.id}&fileUrl=${fileUrl}&imageUrlList=${imageUrlList}&enableThinking=${data.enableThinking}`);
data.chatContent = ''
dataDom.textarea.value = ''
data.filList = []
let isText = !data.enableThinking
eventSource.onmessage = function(event) {
data.isFinish = false
// console.log('收到数据:', JSON.parse(event.data));
@@ -128,7 +139,14 @@ export default defineComponent({
const container = dataDom.chatBox;
container.scrollTop = container.scrollHeight;
if(JSON.parse(event.data).status == "[RUNNING]"){
data.chatList[data.chatList.length-1].content.message+=JSON.parse(event.data).content
if(/\[TEXT\]/.test(JSON.parse(event.data).content)){
isText = true
}
if(isText){
data.chatList[data.chatList.length-1].content.message+=JSON.parse(event.data).content
}else{
data.chatList[data.chatList.length-1].content.think+=JSON.parse(event.data).content
}
}else{
if(JSON.parse(event.data).status == "[DESIGN_SIGNAL]"){
@@ -141,13 +159,11 @@ export default defineComponent({
data.chatList[data.chatList.length-1].content.img = JSON.parse(JSON.parse(event.data).tools_data).receiveCollectionElementList
data.chatList.push({content:{message:''},role:'system'})
}
console.log(data.chatList[data.chatList.length-1].content)
emit('chatChange',{type:JSON.parse(event.data).status})
}
};
eventSource.onerror = function(error) {
console.log(error,EventSource.CLOSED,eventSource.readyState)
if (eventSource.readyState === EventSource.CLOSED) {
data.chatList[data.chatList.length-1].content.message='服务器繁忙，请稍后再试。'
@@ -168,17 +184,29 @@ export default defineComponent({
rv.content.forEach((item:any,index:number) => {
if(rv.content[rv.content.length - index -1].role == 'system'){
let text = rv.content[rv.content.length - index -1].content
if(rv.content[rv.content.length - index -1].isImage == 1){
if(rv.content[rv.content.length - index -1].isImage == 2){
rv.content[rv.content.length - index -1].content={
img : JSON.parse(rv.content[rv.content.length - index -1].content)
}
}else if(rv.content[rv.content.length - index -1].isImage==2){
}else if(rv.content[rv.content.length - index -1].isImage==1){
rv.content[rv.content.length - index -1].content={
color : JSON.parse(rv.content[rv.content.length - index -1].content)
}
}else{
let think = ''
let message = ''
if(text.split('[TEXT]').length > 1){
think = text.split('[TEXT]')[0]
text.split('[TEXT]').forEach((text:any,index:number) => {
if(index == 0)return
message += ('[TEXT]'+text)
});
}else{
message = text
}
rv.content[rv.content.length - index -1].content = {
message:text
message:message,
think:think,
}
}
}else{
@@ -209,11 +237,11 @@ export default defineComponent({
}
const openChattingRecords = ()=>{
data.isChattingRecords = true
let setRecords = ()=>{
data.isChattingRecords = false
document.removeEventListener('click',setRecords)
}
document.addEventListener('click',setRecords)
// let setRecords = ()=>{
// data.isChattingRecords = false
// document.removeEventListener('click',setRecords)
// }
// document.addEventListener('click',setRecords)
}
const handleFileUpload = (event:any)=>{
if (event.target.files[0].size > 5 * 1024 * 1024) { // 5MB
@@ -313,6 +341,14 @@ export default defineComponent({
background: #f5f5f5;
max-width: 60%;
> .text{
> .content{
> .txt{
}
> .showThink{
display: none;
}
}
> .fileBox{
> .item{
height: 3rem;
@@ -343,7 +379,8 @@ export default defineComponent({
display: flex;
padding: 1.2rem 2rem;
border-radius: 2.4rem;
-webkit-user-select: none;
> .text{
// display: inline-block;
// width: min-content;
@@ -351,6 +388,40 @@ export default defineComponent({
width: 100%;
// width: min-content;
// word-wrap: break-word;
> .content{
> .txt{
}
> .showThink{
cursor: pointer;
display: flex;
padding: .7rem 1.4rem;
margin-bottom: 1.2rem;
background: rgb(237 237 237);
border-radius: 1rem;
align-items: center;
&.active{
>i{
transform: rotate(180deg);
}
}
> i{
display: flex;
transition: all .3s;
}
}
> .think{
margin-bottom: 2rem;
padding-left: 2rem;
color: #8b8b8b;
white-space: pre-wrap;
border-left: 2px solid #e5e5e5;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}
> .imgBox{
display: flex;
flex-wrap: wrap;
@@ -503,7 +574,7 @@ export default defineComponent({
}
}
}
> .right,> .left{
> .right,> .left,>.top{
display: flex;
align-items: center;
cursor: pointer;
@@ -515,6 +586,18 @@ export default defineComponent({
transition: all .3s;
}
}
> .top{
width: 100%;
margin: 0 3rem;
height: 3rem;
&.active{
> i{
transform: rotate(180deg);
}
}
> i{
}
}
> .right{
border-left: 1px solid #e5e5e5;
> i{
@@ -527,5 +610,6 @@ export default defineComponent({
transform: rotate(90deg);
}
}
flex-wrap: wrap;
}
</style>