会话实时显示

yinbangzhong

2024-08-08 4ace68af4236a1be8b57dbcfc185871eda76fed9

 src/views/session/sessionRecordsManager/index.vue

@@ -306,6 +306,7 @@
  import { useAppStore } from '@/store';
  import { computed, nextTick, onMounted, reactive, ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { EventSourceParserStream } from 'eventsource-parser/stream';
  import moment from 'moment';
  import AddSession from '@/views/session/sessionManager/components/addSession.vue';
  import {
@@ -314,6 +315,8 @@
    getSessionDetailsApi,
    sessionListApi,
  } from '@/api/session';
  import { getAuthorization } from "@/utils/auth";


  const sessionDetailList = ref([]); //根据会话id出来的会话详情
  const sessionList = ref([]); //会话列表
@@ -353,30 +356,49 @@
      return;
    }
    if (inputMsg.value) {
      const data = await chatApi({
        conversation_id: activeSessionId.value,
        messages: 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 (data) {
        chatDis.value = false;

        // inputMsg.value = '';
        // querySessionDetail({ id: activeSessionId.value });
      }
      const res = await getSessionDetailsApi(activeSessionId.value);
      if (res.code === 200) {
        sessionDetailList.value = res.data.message.map((item, index) => {
          if (index === res.data.message.length - 1) {
            item.role = 'last';
            displayedText.value = '';
            currIndex.value = 0;
            streamStr.value = item.content;
            startDisplayStr();
      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;
          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);
          }
          return item;
        });
        refreshScroll();
          if (done) {
            console.info('done');
            break;
          }
        }
      }
      chatDis.value=false;
      inputMsg.value = '';
    } else {
      Message.warning('消息不能为空');
@@ -428,6 +450,7 @@
      displayedText.value += res[currIndex.value];
      currIndex.value++;
      setTimeout(startDisplayStr, 100);
      refreshScroll();
    } else {
      clearTimeout(timer!);
      timer = null;