| | |
| | | @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%; |
| | | overflow: auto; |
| | | height: 65vh; |
| | | height: calc(100vh - 380px); |
| | | margin: 0px auto 20px; |
| | | " |
| | | > |
| | |
| | | /> |
| | | </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; |