|  |  |  | 
|---|
|  |  |  | @click="querySessionDetail(session)" | 
|---|
|  |  |  | :class="{ isLeftActive: activeSessionId === session.id }" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div class="text" :class="{ light: theme === 'dark' }" | 
|---|
|  |  |  | <div class="text" :class="{ time: theme === 'dark' }" | 
|---|
|  |  |  | >{{ session.name }} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="time" | 
|---|
|  |  |  | 
|---|
|  |  |  | </a-col> | 
|---|
|  |  |  | <a-col :span="18"> | 
|---|
|  |  |  | <a-card class="center"> | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | <!-- <div | 
|---|
|  |  |  | v-if="sessionDetailList.length === 0" | 
|---|
|  |  |  | style=" | 
|---|
|  |  |  | width: 90%; | 
|---|
|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </a-col> | 
|---|
|  |  |  | </a-row> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> --> | 
|---|
|  |  |  | <a-scrollbar | 
|---|
|  |  |  | ref="scrollbar" | 
|---|
|  |  |  | id="home" | 
|---|
|  |  |  | v-else | 
|---|
|  |  |  | class="chat-list" | 
|---|
|  |  |  | style=" | 
|---|
|  |  |  | width: 90%; | 
|---|
|  |  |  | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | <template #content> | 
|---|
|  |  |  | <div class="chart-user-text" | 
|---|
|  |  |  | <div :class="{ chartUserText: theme === 'light' }" | 
|---|
|  |  |  | >{{ sessionDetail.content }} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | <template #content> | 
|---|
|  |  |  | <a-card class="chat-item-answer"> | 
|---|
|  |  |  | <a-card :class="{ chatItemAnswer: theme === 'light' }"> | 
|---|
|  |  |  | <div :class="{ light: theme === 'light' }" | 
|---|
|  |  |  | >{{ sessionDetail.content }} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | readonly | 
|---|
|  |  |  | auto-size | 
|---|
|  |  |  | v-model="displayedText" | 
|---|
|  |  |  | class="chat-item-answer" | 
|---|
|  |  |  | :class="{ chatItemAnswer: theme === 'light' }" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | </a-textarea> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | 
|---|
|  |  |  | </a-textarea> --> | 
|---|
|  |  |  | <a-textarea | 
|---|
|  |  |  | v-model="inputMsg" | 
|---|
|  |  |  | @keydown.shift.enter="handleShiftEnter" | 
|---|
|  |  |  | @keydown.enter="sendMessage" | 
|---|
|  |  |  | placeholder="输入您想了解的内容,Shift+Enter换行,Enter发送" | 
|---|
|  |  |  | allow-clear | 
|---|
|  |  |  | show-word-limit | 
|---|
|  |  |  | :disabled="chatDis" | 
|---|
|  |  |  | :class="{ textItemAnswer: theme === 'dark' }" | 
|---|
|  |  |  | :auto-size="{ | 
|---|
|  |  |  | minRows: 12, | 
|---|
|  |  |  | maxRows: 5, | 
|---|
|  |  |  | 
|---|
|  |  |  | IconTiktokColor, | 
|---|
|  |  |  | } from '@arco-design/web-vue/es/icon'; | 
|---|
|  |  |  | import { useAppStore, useUserStore } from '@/store'; | 
|---|
|  |  |  | import { computed, nextTick, onMounted, reactive, ref } from 'vue'; | 
|---|
|  |  |  | import { computed, nextTick, onMounted, watch, reactive, ref } from 'vue'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | import { Message } from '@arco-design/web-vue'; | 
|---|
|  |  |  | import { EventSourceParserStream } from 'eventsource-parser/stream'; | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | const handleShiftEnter = (event) => { | 
|---|
|  |  |  | event.preventDefault(); | 
|---|
|  |  |  | inputMsg.value += '\n'; | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | const dialogChange = (val) => { | 
|---|
|  |  |  | dialogId.value = val; | 
|---|
|  |  |  | querySessionList(); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | const sentClick = (event) => { | 
|---|
|  |  |  | sendMessage(event); | 
|---|
|  |  |  | const sentClick = () => { | 
|---|
|  |  |  | sendMessage('click'); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | const sendMessage = async (event) => { | 
|---|
|  |  |  | event.preventDefault(); | 
|---|
|  |  |  | chatDis.value = true; | 
|---|
|  |  |  | loading.value = true; | 
|---|
|  |  |  | if (!activeSessionId.value) { | 
|---|
|  |  |  | Message.warning('请选择会话'); | 
|---|
|  |  |  | chatDis.value = false; | 
|---|
|  |  |  | loading.value = false; | 
|---|
|  |  |  | return; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // if (displayedText.value) { | 
|---|
|  |  |  | //   querySessionList(); | 
|---|
|  |  |  | // } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | if (inputMsg.value) { | 
|---|
|  |  |  | sessionDetailList.value.push({ content: inputMsg.value, role: 'user' }); | 
|---|
|  |  |  | sessionDetailList.value.push({ role: 'last' }); | 
|---|
|  |  |  | refreshScroll(); | 
|---|
|  |  |  | const response = await fetch( | 
|---|
|  |  |  | '/api/tech/cloudminds/query?modeltype=localragflow', | 
|---|
|  |  |  | { | 
|---|
|  |  |  | method: 'POST', | 
|---|
|  |  |  | headers: { | 
|---|
|  |  |  | 'Authorization': getAuthorization(), | 
|---|
|  |  |  | 'Content-Type': 'application/json', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | body: JSON.stringify({ | 
|---|
|  |  |  | conversation_id: activeSessionId.value, | 
|---|
|  |  |  | messages: inputMsg.value, | 
|---|
|  |  |  | }), | 
|---|
|  |  |  | if (event.keyCode == 13 || event === 'click') { | 
|---|
|  |  |  | if (!event.shiftKey) { | 
|---|
|  |  |  | //只有enter没有shift,或进行你的其他逻辑 | 
|---|
|  |  |  | if (event !== 'click') { | 
|---|
|  |  |  | event.preventDefault(); // 阻止默认行为,即不换行 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | ); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const reader = response?.body | 
|---|
|  |  |  | ?.pipeThrough(new TextDecoderStream()) | 
|---|
|  |  |  | .pipeThrough(new EventSourceParserStream()) | 
|---|
|  |  |  | .getReader(); | 
|---|
|  |  |  | currIndex.value = 0; | 
|---|
|  |  |  | while (true) { | 
|---|
|  |  |  | const x = await reader?.read(); | 
|---|
|  |  |  | if (x) { | 
|---|
|  |  |  | const { done, value } = x; | 
|---|
|  |  |  | console.log(x, 999); | 
|---|
|  |  |  | try { | 
|---|
|  |  |  | const val = JSON.parse(value?.data || ''); | 
|---|
|  |  |  | const d = val?.data; | 
|---|
|  |  |  | if (typeof d !== 'boolean') { | 
|---|
|  |  |  | console.info('data:', d); | 
|---|
|  |  |  | streamStr.value = d.content; | 
|---|
|  |  |  | startDisplayStr(); | 
|---|
|  |  |  | chatDis.value = true; | 
|---|
|  |  |  | loading.value = true; | 
|---|
|  |  |  | if (!activeSessionId.value) { | 
|---|
|  |  |  | Message.warning('请选择会话'); | 
|---|
|  |  |  | chatDis.value = false; | 
|---|
|  |  |  | loading.value = false; | 
|---|
|  |  |  | return; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // if (displayedText.value) { | 
|---|
|  |  |  | //   querySessionList(); | 
|---|
|  |  |  | // } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | if (inputMsg.value) { | 
|---|
|  |  |  | sessionDetailList.value.push({ | 
|---|
|  |  |  | content: inputMsg.value, | 
|---|
|  |  |  | role: 'user', | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | sessionDetailList.value.push({ role: 'last' }); | 
|---|
|  |  |  | refreshScroll(); | 
|---|
|  |  |  | const response = await fetch( | 
|---|
|  |  |  | '/api/tech/cloudminds/query?modeltype=localragflow', | 
|---|
|  |  |  | { | 
|---|
|  |  |  | method: 'POST', | 
|---|
|  |  |  | headers: { | 
|---|
|  |  |  | 'Authorization': getAuthorization(), | 
|---|
|  |  |  | 'Content-Type': 'application/json', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | body: JSON.stringify({ | 
|---|
|  |  |  | conversation_id: activeSessionId.value, | 
|---|
|  |  |  | messages: inputMsg.value, | 
|---|
|  |  |  | }), | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } catch (e) { | 
|---|
|  |  |  | console.warn(e); | 
|---|
|  |  |  | ); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const reader = response?.body | 
|---|
|  |  |  | ?.pipeThrough(new TextDecoderStream()) | 
|---|
|  |  |  | .pipeThrough(new EventSourceParserStream()) | 
|---|
|  |  |  | .getReader(); | 
|---|
|  |  |  | currIndex.value = 0; | 
|---|
|  |  |  | while (true) { | 
|---|
|  |  |  | const x = await reader?.read(); | 
|---|
|  |  |  | if (x) { | 
|---|
|  |  |  | const { done, value } = x; | 
|---|
|  |  |  | console.log(x, 999); | 
|---|
|  |  |  | try { | 
|---|
|  |  |  | const val = JSON.parse(value?.data || ''); | 
|---|
|  |  |  | const d = val?.data; | 
|---|
|  |  |  | if (typeof d !== 'boolean') { | 
|---|
|  |  |  | console.info('data:', d); | 
|---|
|  |  |  | streamStr.value = d.content; | 
|---|
|  |  |  | startDisplayStr(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } catch (e) { | 
|---|
|  |  |  | console.warn(e); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (done) { | 
|---|
|  |  |  | console.info('done'); | 
|---|
|  |  |  | displayedText.value = ''; | 
|---|
|  |  |  | querySessionDetail(sectionList.value); | 
|---|
|  |  |  | break; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (done) { | 
|---|
|  |  |  | console.info('done'); | 
|---|
|  |  |  | displayedText.value = ''; | 
|---|
|  |  |  | querySessionDetail(sectionList.value); | 
|---|
|  |  |  | break; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | chatDis.value = false; | 
|---|
|  |  |  | loading.value = false; | 
|---|
|  |  |  | inputMsg.value = ''; | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | Message.warning('消息不能为空'); | 
|---|
|  |  |  | chatDis.value = false; | 
|---|
|  |  |  | loading.value = false; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | chatDis.value = false; | 
|---|
|  |  |  | loading.value = false; | 
|---|
|  |  |  | inputMsg.value = ''; | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | Message.warning('消息不能为空'); | 
|---|
|  |  |  | chatDis.value = false; | 
|---|
|  |  |  | loading.value = false; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | const querySessionDetail = async (session) => { | 
|---|
|  |  |  | 
|---|
|  |  |  | onMounted(() => { | 
|---|
|  |  |  | DialogList(); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const appStore = useAppStore(); | 
|---|
|  |  |  | const theme = computed(() => { | 
|---|
|  |  |  | return appStore.theme; | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | //文字动态输出 | 
|---|
|  |  |  | const startDisplayStr = () => { | 
|---|
|  |  |  | if (timer) { | 
|---|
|  |  |  | 
|---|
|  |  |  | .card-btn-2 { | 
|---|
|  |  |  | margin: 10px 10px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .chat-item-answer { | 
|---|
|  |  |  | .chatItemAnswer { | 
|---|
|  |  |  | box-sizing: border-box; | 
|---|
|  |  |  | background: #f1f1f1; | 
|---|
|  |  |  | border-radius: 14px; | 
|---|
|  |  |  | 
|---|
|  |  |  | background: #f1f1f1; | 
|---|
|  |  |  | border-radius: 14px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .textItemAnswer { | 
|---|
|  |  |  | background-color: #373739; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .center { | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .chat-item { | 
|---|
|  |  |  | padding: 10px 0; | 
|---|
|  |  |  | .chart-user-text { | 
|---|
|  |  |  | .chartUserText { | 
|---|
|  |  |  | font-weight: 600; | 
|---|
|  |  |  | font-size: 14px; | 
|---|
|  |  |  | color: #333; | 
|---|