【增加】stream 聊天进行中删除,调用 stream 控制器中断

This commit is contained in:
cherishsince 2024-05-12 22:22:34 +08:00
parent 151076a79e
commit c1b9baf8b6

View File

@ -147,11 +147,13 @@
</div>
</el-main>
<el-footer class="footer-container">
<textarea class="prompt-input" v-model="prompt" placeholder="问我任何问题...Shift+Enter 换行,按下 Enter 发送)"></textarea>
<div class="prompt-btns">
<el-switch/>
<el-button type="primary" size="default" @click="onSend()">发送</el-button>
</div>
<form @submit.prevent="onSend" class="prompt-from">
<textarea class="prompt-input" v-model="prompt" @keyup.enter="onSend" placeholder="问我任何问题...Shift+Enter 换行,按下 Enter 发送)"></textarea>
<div class="prompt-btns">
<el-switch/>
<el-button type="primary" size="default" @click="onSend()">发送</el-button>
</div>
</form>
</el-footer>
</el-container>
</el-container>
@ -162,11 +164,23 @@ import {ChatMessageApi, ChatMessageSendVO, ChatMessageVO} from "@/api/ai/chat/me
import {formatDate} from "@/utils/formatTime";
import {useClipboard} from '@vueuse/core'
// copy
const { copy } = useClipboard();
const searchName = ref('') //
const conversationId = ref('1781604279872581648') // id
const conversationInProgress = ref<Boolean>() //
const conversationInAbortController = ref<any>() // abort ( stream )
const prompt = ref<string>() // prompt
const promptRes = ref<string>() // prompt res
// ()
const messageContainer: any = ref(null);
const isScrolling = ref(false)//
/** chat message 列表 */
defineOptions({ name: 'chatMessageList' })
const list = ref<ChatMessageVO[]>([]) //
const changeConversation = (conversation) => {
console.log(conversation)
@ -190,82 +204,71 @@ const searchConversation = () => {
/** send */
const onSend = async () => {
const content = prompt.value;
//
prompt.value = ''
const requestParams = {
conversationId: conversationId.value,
content: prompt.value,
content: content,
} as unknown as ChatMessageSendVO
// message
const userMessage = await ChatMessageApi.add(requestParams) as unknown as ChatMessageVO;
list.value.push(userMessage)
//
scrollToBottom();
//
// stream
await doSendStream(userMessage)
//
}
const doSendStream = async (userMessage: ChatMessageVO) => {
// AbortController便
const ctrl = new AbortController()
// event stream
let isFirstMessage = true
ChatMessageApi.sendStream(userMessage.id, ctrl,(message) => {
console.log('message', message)
const data = JSON.parse(message.data) as unknown as ChatMessageVO
//
if (data.content === '') {
ctrl.abort()
}
// message
if (isFirstMessage) {
isFirstMessage = false;
list.value.push(data)
} else {
const lastMessage = list.value[list.value.length - 1];
lastMessage.content = lastMessage.content + data.content
list.value[list.value - 1] = lastMessage
}
//
scrollToBottom();
}, (error) => {
console.log('error', error)
}, () => {
console.log('close')
})
conversationInAbortController.value = new AbortController()
//
conversationInProgress.value = true
try {
// event stream
let isFirstMessage = true
ChatMessageApi.sendStream(userMessage.id, conversationInAbortController.value,(message) => {
console.log('message', message)
const data = JSON.parse(message.data) as unknown as ChatMessageVO
//
if (data.content === '') {
//
conversationInProgress.value = false;
// stream
conversationInAbortController.value.abort()
}
// message
if (isFirstMessage) {
isFirstMessage = false;
list.value.push(data)
} else {
const lastMessage = list.value[list.value.length - 1];
lastMessage.content = lastMessage.content + data.content
list.value[list.value - 1] = lastMessage
}
//
scrollToBottom();
}, (error) => {
console.log('error', error)
//
conversationInProgress.value = false;
// stream
conversationInAbortController.value.abort()
}, () => {
console.log('close')
//
conversationInProgress.value = false;
// stream
conversationInAbortController.value.abort()
})
} finally {
}
// // message
// const chatMessage = {
// id: null, //
// conversationId: conversationId.value, //
// type: 'system', //
// userId: null, //
// roleId: null, //
// model: null, //
// modelId: null, //
// content: '...', //
// tokens: null, // Token
// createTime: new Date(), //
// } as unknown as ChatMessageVO
// list.value.push(chatMessage)
// //
// scrollToBottom();
}
/** Prompt */
const onPromptInput = async (e) => {
console.log(e.data)
// prompt.value = e.data
}
// copy
const { copy, isSupported } = useClipboard();
/** chat message 列表 */
defineOptions({ name: 'chatMessageList' })
const list = ref<ChatMessageVO[]>([]) //
// id TODO @
const content = '苹果是什么颜色?'
/** 查询列表 */
const messageList = async () => {
try {
@ -277,9 +280,7 @@ const messageList = async () => {
} finally {
}
}
// ref
const messageContainer: any = ref(null);
const isScrolling = ref(false)//
function scrollToBottom() {
nextTick(() => {
@ -321,6 +322,10 @@ const onDelete = async (id) => {
message: '删除成功!',
type: 'success',
})
// tip stream message controller
if (conversationInAbortController.value) {
conversationInAbortController.value.abort()
}
// message
await messageList();
}
@ -525,8 +530,8 @@ onMounted(async () => {
display: flex;
flex-direction: column;
overflow-wrap: break-word;
background-color: #e4e4e4;
box-shadow: 0 0 0 1px #e4e4e4;
background-color: rgba(228, 228, 228, 0.80);
box-shadow: 0 0 0 1px rgba(228, 228, 228, 0.80);
border-radius: 10px;
padding: 10px 10px 5px 10px;
@ -587,10 +592,18 @@ onMounted(async () => {
display: flex;
flex-direction: column;
height: auto;
border: 1px solid #e3e3e3;
border-radius: 10px;
margin: 20px 20px;
padding: 9px 10px;
margin: 0;
padding: 0;
.prompt-from {
display: flex;
flex-direction: column;
height: auto;
border: 1px solid #e3e3e3;
border-radius: 10px;
margin: 20px 20px;
padding: 9px 10px;
}
.prompt-input {
height: 80px;