xiaoshu/src/components/DialogWrap.vue

<template>
  <div class="dialog-flex-wrap" :data-chat="dialogId">
    <div class="dialog-flex" ref="dialogScroll">
      <div class="section-open" v-if="open">
        <header class="dialog-header">
          <a-avatar shape="circle" :size="28">
            <img alt="avatar" src="/src/assets/slider/logo.jpg" />
          </a-avatar>
        </header>
        <footer class="dialog-footer">
          <p>{{ open }}</p>
        </footer>
      </div>

      <Suggestion :suggestions="suggestions" :readonly="readonly" />

      <div class="dialog-list" v-if="dialogList.length > 0">
        <div
          :class="['dialog-item', isSetting ? '' : 'dialog-absolute', 'dialog-item-' + key]"
          v-for="(item, key) in dialogList"
          :key="item.client_gen_id"
          :data-item-index="key"
          :data-item-key="item.client_gen_id"
        >
          <div class="dialog-header header-question" v-if="item?.question">
            <!-- <div class="user-name" style="background-color: rgb(255, 110, 110)">
              {{ userName.slice(0, 1) }}
            </div> -->

            <ClientUserAvatar />
          </div>

          <div class="dialog-footer" v-if="item?.question">
            <Question :question="item.question" :index="key" :chat_id="dialogId" :chat_type="type" :agentId="agentId" />
          </div>
          <!-- 如果是代码则不显示头像 -->
          <div class="dialog-header header-answer" :class="{ 'has-code': item.code || item.sql }" v-if="item?.capacity">
            <img alt="avatar" src="/src/assets/slider/logo.jpg" width="28" />
          </div>

          <!-- 处理python代码和SQL代码 -->
          <div class="dialog-code-footer" v-if="item.code || item.sql">
            <CodeDisplay v-if="item.code" type="python" :code="item.code" :index="key" />

            <CodeDisplay v-if="item.sql" type="sql" :code="item.sql" :index="key" />
          </div>

          <div
            class="dialog-footer"
            v-else-if="item?.capacity"
            :style="{ display: dialogConfig.type === 'paper' ? 'inline-block' : 'block' }"
          >
            <div
              v-if="type === 'knowledge'"
              @click="openCapacity(key)"
              :class="[readonly || item.capacity.status === 'loading' ? 'disabled' : '']"
            >
              <a-spin :size="18" v-if="item.capacity.status === 'loading'" />
              <icon-check-circle-fill :size="18" v-else />
              <span>{{ item.capacity.status === 'loading' ? '小数正在检索' : '查看检索信息' }}</span>
              <!-- <b>{{ item.capacity.text }}</b> -->
              <icon-caret-right size="18" v-if="item.capacity.status === 'loaded' && !menuList[key]?.open" />
              <icon-caret-down size="18" v-if="item.capacity.status === 'loaded' && menuList[key]?.open" />
            </div>

            <div
              v-else
              v-show="item.capacity.status === 'loading'"
              :class="[readonly || item.capacity.status === 'loading' ? 'disabled' : '']"
            >
              <a-spin :size="18" />
              <span v-if="type !== 'document_report'">{{
                type === 'excel' ? '正在为您合并...' : '正在为您搜索答案...'
              }}</span>
              <span v-if="type === 'document_report'">{{ document_report_system_message }}</span>
            </div>

            <section v-if="type === 'knowledge' && item.capacity.status === 'loaded'" v-show="menuList[key].open">
              <div v-if="item.capacity.data.list">
                <p v-for="(item, key) in item.capacity.data.list" :key="key">
                  <a-typography-paragraph :ellipsis="{ rows: 1, css: true }" :style="{ flex: 1, margin: '0' }">
                    {{ item }}
                  </a-typography-paragraph>
                </p>
              </div>

              <div v-if="item.capacity.data.documents">
                <div v-for="(document, documentKey) in item.capacity.data.documents" :key="documentKey">
                  <div @click="openDocument(key, documentKey)" :class="[readonly ? 'disabled' : '']">
                    <span>{{ document.type }}</span>
                    <a-typography-paragraph :ellipsis="{ rows: 1, css: true }" :style="{ flex: 1, margin: '0' }">
                      <span>{{ document.title }}</span>
                    </a-typography-paragraph>
                    <span>
                      <em v-for="(item, documentIndex) in document.list" :key="documentIndex">{{ item.title }}</em>
                    </span>
                    <icon-caret-down size="12" v-if="documentKey === menuList[key].documentOpenIndex" />
                    <icon-caret-right size="12" v-else />
                  </div>

                  <div v-show="documentKey === menuList[key].documentOpenIndex">
                    <p v-for="(item, index) in document.list" :key="index">
                      <span>{{ item.title }}</span>
                      <a-typography-paragraph :ellipsis="{ rows: 3, css: true }" :style="{ flex: 1, margin: '0' }">
                        <span style="color: rgba(153, 153, 153, 1); font-size: 12px">{{ item.content }}</span>
                      </a-typography-paragraph>
                    </p>
                  </div>
                </div>
              </div>
            </section>

            <p v-if="type === 'knowledge' && item.answer" style="margin-top: 10px; font-size: 18px; font-weight: bold">
              答案生成结果
            </p>

            <p v-if="item.answer" :style="{ 'margin-top': type === 'knowledge' ? '12px' : '0' }">
              <span v-if="type === 'paper'" class="paper-wrap">
                <img src="@/assets/question/word.svg" />
                <span>
                  <b>黄冈试卷考试题</b>
                  <em>DOCX,13.19KB</em>
                </span>
              </span>

              <Answer
                v-else
                :answer="item.answer"
                :index="key"
                :chat_id="dialogId"
                :chat_type="type"
                :agentId="agentId"
                :special_4_refference="item.fullRefference"
                :special_4_image="item.fullImageUrls"
              />
            </p>
          </div>

          <div class="dialog-footer" v-else>
            <Answer
              :answer="item.answer"
              :index="key"
              :chat_id="dialogId"
              :chat_type="type"
              :agentId="agentId"
              :special_4_refference="item.fullRefference"
              :special_4_image="item.fullImageUrls"
            />
          </div>

          <!-- 处理来源 -->
          <div
            v-if="(type === 'knowledge' || type === 'knowledgeQuiz') && item.reference && item.reference.length > 0"
            class="knowledge-wrap"
          >
            <header>
              <p>来源</p>
              <!-- TODO详情暂时注释 -->
              <p @click="checkAllReference(item)">查看全部关联 ></p>
            </header>

            <section>
              <DocRefItem
                v-for="(knowledge, knowledgeIndex) in item.reference.slice(0, 3)"
                :key="knowledgeIndex"
                :knowledge="knowledge"
                :knowledgeIndex="knowledgeIndex"
                @go-document="goKnowledge($event, item)"
              />
            </section>
          </div>

          <!-- 如果有图片 -->
          <div v-if="item?.image_url" style="margin-left: 50px">
            <a-image width="500" :src="item?.image_url" />
          </div>

          <div v-if="item.file" class="paper-wrap" @click="downloadFile(item.file.file_url)">
            <img v-if="item.file.file_type === 'excel'" src="@/assets/question/excel.svg" />
            <img v-if="item.file.file_type === 'word'" src="@/assets/question/word.svg" />
            <span>
              <b>{{ item.file.file_name }}</b>
            </span>

            <icon-download style="margin-right: 24px; font-size: 32px" />
          </div>
          <div class="dialog-other" v-if="item?.other">
            <p v-if="isSetting">
              <img src="@/assets/icons/check.png" width="16" />
              <span>{{ item.other.token }}</span>
            </p>
            <p v-else></p>
            <div v-if="chat_type !== 'huitu'">
              <a-tooltip content="重新生成">
                <p @click="reQuestion(item.question)" :class="[readonly ? 'disabled' : '']">
                  <img src="@/assets/icons/refresh.png" width="15" />
                </p>
              </a-tooltip>
              <a-tooltip content="复制">
                <p @click="copyAnswer(item.answer)" :class="[readonly ? 'disabled' : '']">
                  <img src="@/assets/icons/copy.png" width="15" />
                </p>
              </a-tooltip>
              <a-tooltip content="收藏">
                <p @click="saveAnswer(key)" :class="[readonly ? 'disabled' : '']" v-if="!isSetting">
                  <img src="@/assets/icons/star-full.png" width="15" v-if="menuList[key]?.save" />
                  <img src="@/assets/icons/star.png" width="15" v-else />
                </p>
              </a-tooltip>
              <a-tooltip content="点赞">
                <p :class="[readonly ? 'disabled' : '']" v-if="!isSetting">
                  <img src="@/assets/icons/thumb-up.png" width="15" />
                </p>
              </a-tooltip>
              <a-tooltip content="反馈">
                <p @click="feedbackAnswer" :class="[readonly ? 'disabled' : '']" v-if="!isSetting">
                  <img src="@/assets/icons/thumb-down.png" width="15" />
                </p>
              </a-tooltip>
              <a-tooltip content="分享">
                <p :class="[readonly ? 'disabled' : '']" v-if="!isSetting">
                  <img src="@/assets/icons/share.png" width="15" />
                </p>
              </a-tooltip>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div v-show="readonly" @click="stopWriting" class="dialog-writing-button">
            <icon-record-stop :size="20" style="margin-right: 4px" />停止生成
        </div> -->
    <dialog-feedback :showFeedback="showFeedback" @handleCancel="handleCancel" @handleOk="handleOk" v-if="!isSetting" />
  </div>
</template>
<script>
import DialogFeedback from './DialogFeedback.vue';
import { defineComponent, ref, onBeforeUnmount, onMounted, reactive, nextTick, inject } from 'vue';

import formatAnwserString from './answer-effect/format-anwser-string';
import initTempHistory, { getChatIdFromUrl } from './answer-effect/temp-history';

// import { getDocumentUrl } from '../ajax/document';

import Question from './dialog-wrap/Question.vue';
import Suggestion from './dialog-wrap/Suggestion.vue';
import ClientUserAvatar from './dialog-wrap/ClientUserAvatar.vue';

import Answer from './dialog-wrap/Answer.vue';

import { huituSetTempImageIndex } from './dialog-wrap/temp-image';

import generateClientUniqueId from './dialog-wrap/generate-client-unique-id';
import formatDialogItem from './dialog-wrap/format-dialog-item';

import DocRefItem from './dialog-wrap/DocRefItem.vue';

import CodeDisplay from './dialog-wrap/CodeDisplay.vue';

import { useImageUploadStatus } from '../store/index';

import { formatCodePython, formatCodeSql } from './dialog-wrap/format-code-string';

import formatFieldDownloadUrl from './dialog-wrap/format-field-download-url';

export default defineComponent({
  components: {
    DialogFeedback,

    Suggestion,
    ClientUserAvatar,

    Question,
    Answer,

    DocRefItem,
    CodeDisplay
  },
  props: ['open', 'suggestions', 'isSetting', 'readonly', 'type', 'list', 'agentId', 'dialogId', 'reference'],
  setup(props, { emit }) {
    // 图片上传的状态
    const imageUploadStatus = useImageUploadStatus();

    const knowledgeList = ref([[{}]]);
    const DOCUMENT_RESULT = {};

    const getHTML = (string) => {
      return formatAnwserString(string);
    };
    const replaceCode = (text, index) => {
      const icon = `  <span class="circle" data-list-index="${index || 0}"></span>`;
      return text.replace(/##\d\$\$/g, icon);
    };

    const { helper, ajax } = inject('$global');
    // const userName = ref(helper.read("userName") || "");

    /**
     * 此数据定义，仅用于暂时隐藏 重新生成、复制、收藏、点赞、反馈、分享 按钮
     * 如果这些按钮需要显示，则可将此定义移除，同时移除 对应的 v-if
     */
    const show_info_btns = ref(false);

    const chat_type = props.type; // 对话的类型

    // 系统消息
    const document_report_system_message = ref('');

    /**
     * 初始化临时历史记录
     * 在对话过程中，消息记录是一条一条的呈现
     * 而在历史记录面板中，一个对话框中可能有多条对话，一次性直接加载
     */
    const tempHistory = initTempHistory();

    const list =
      (props.list &&
        Array.isArray(props.list) &&
        props.list.map((item, index) => {
          return formatDialogItem(item, index);
        })) ||
      [];

    const dialogList = reactive(list || []);
    const randomKey = ref(0);
    const showFeedback = ref(false);
    const menuList = reactive([]);
    let dialogIndex = dialogList.length;
    const dialogScroll = ref('');
    const dialogConfig = ref({});

    const scrollToEnd = async () => {
      await nextTick();
      if (dialogScroll.value) {
        dialogScroll.value.scrollTop = dialogScroll.value.scrollHeight;
      }
    };

    let answerInterval = null;

    const stopWriting = () => {
      window.clearInterval(answerInterval);
      emit('set-readonly', false);
      if (dialogList[dialogIndex]) {
        dialogList[dialogIndex].other = {
          token: '4.0s ｜ Tokens'
        };
      }
      scrollToEnd();
      dialogIndex += 1;
    };

    const addData = (data) => {
      dialogList.splice(dialogIndex, 1, data);

      randomKey.value = Math.random();
      scrollToEnd();
    };

    const saveAnswer = (index) => {
      if (!props.readonly) {
        menuList[index].save = !menuList[index].save;
      }
    };

    const openCapacity = (index) => {
      if (!props.readonly) {
        menuList[index].open = !menuList[index].open;
      }
    };

    const feedbackAnswer = () => {
      if (!props.readonly) {
        showFeedback.value = true;
      }
    };
    const handleOk = () => {
      showFeedback.value = false;
    };
    const handleCancel = () => {
      showFeedback.value = false;
    };
    // const selectSuggestion = (text) => {
    //   if (!props.readonly) {

    //   }
    // };

    const copyAnswer = (text) => {
      if (!props.readonly) {
        helper.copyText(text, '复制成功');
      }
    };

    const reQuestion = (text) => {
      if (!props.readonly) {
        setTimeout(() => {
          helper.$bus.emit('send-message', text);
        }, 200);
      }
    };

    const openDocument = (index, documentIndex) => {
      if (menuList[index].documentOpenIndex === documentIndex) {
        menuList[index].documentOpenIndex = -1;
      } else {
        menuList[index].documentOpenIndex = documentIndex;
      }
    };
    const goKnowledge = (knowledge, fullRef) => {
      let targetDocument = { ...knowledge, ...fullRef.fullRefference, question: fullRef.question };
      emit('go-document', targetDocument);
    };
    const checkAllReference = (fullRef) => {
      const knowledge = fullRef.reference[0];
      goKnowledge(knowledge, fullRef);
    };
    // // 点击文档，打开新页面
    // const openDocuementPage = (knowledge) => {
    //   const doc_name = knowledge.doc_name;
    //   const doc_id = knowledge.id;

    //   // const pdf_url = `http://192.168.20.119:11080/v1/document/get/${doc_id}`;
    //   const pdf_url = getDocumentUrl(doc_id);

    //   window.open(pdf_url);
    // }

    const addLoading = (data) => {
      const mockData = DOCUMENT_RESULT;
      data.capacity = {
        type: mockData.type,
        text: mockData.text,
        status: 'loading',
        data: null
      };
      menuList[dialogIndex] = {
        save: false,
        open: false,
        documentOpenIndex: -1
      };
      addData(data);
      return data;
    };
    const loadingData = ref(null);
    const isLoaded = ref(false);
    const answerData = ref('');
    const answerReference = ref([]);

    const fullRefference = reactive({
      full_ref: {}
    });
    const fullImageUrls = reactive({
      url: []
    });

    const imageUrl = ref(undefined);
    const answerFile = ref(undefined);
    const answerCode = ref(undefined);
    const answerSql = ref(undefined);
    const addQuestion = (question, file = null) => {
      let result = {
        question,
        capacity: null,
        answer: '',
        other: null,
        file: null
      };

      addData(result);

      return result;
    };
    const addAnswer = (data) => {
      data.answer = answerData.value;
      data.reference = answerReference.value;

      data.fullRefference = fullRefference.full_ref; // 完整的引用数据
      data.fullImageUrls = fullImageUrls.url; // 图片地址数据

      data.image_url = imageUrl.value;
      data.code = answerCode.value;
      data.file = answerFile.value;
      data.sql = answerSql.value;

      // 客户端生成的唯一的key
      data.client_gen_id = generateClientUniqueId(JSON.stringify(data));

      addData(data);
    };
    const answerLoaded = () => {
      isLoaded.value = true;
      emit('set-readonly', true);
      loadingData.value.capacity = DOCUMENT_RESULT;
      addAnswer(loadingData.value);
    };
    const downloadFile = (url) => {
      let file_url = url.replace('/./', '/');
      // file_url = file_url.replace('//', '/');

      window.open(file_url, '_blank');
    };
    onBeforeUnmount(() => {
      helper.$bus.off('send-message');
      helper.$bus.off('clear-message');
      helper.$bus.off('stop-writing');
      helper.webSocket?.close();
    });

    onMounted(() => {
      scrollToEnd();

      /**
       * TODO: 只允许保存一条消息，避免出现多条消息同时发送的情况
       * 当网络状况不佳，用户发送第一条数据时，socket还未连接成功，紧接着又发送第二条数据，第三条数据....
       * 此时，消息队列里将会有多条数据等待发送
       * 当socket连接成功后，遍历消息队列里的数据，会将这多条数据一同发送，此时就会出现异常情况。
       */
      let msg_list = [];

      function createSocket() {
        const token = helper.read('token');
        const p_type = props.type;

        // 如果是智能数据，则拿缓存里的数据开启对话
        if (helper.read('sendData') && helper.read('sendData').agent_id == 'basic_excel_talk') {
          const data = helper.read('sendData');

          helper.webSocket = ajax.message.create(token, data.agent_id, data.chat_id, p_type);

          // 创建对话之后清空缓存
          helper.write('sendData', {});
        } else {
          helper.webSocket = ajax.message.create(token, props.agentId, props.dialogId, p_type);
        }

        // 监听socket开启事件
        // 当socket开启后，遍历消息，并发送
        helper.webSocket.onopen = function (event) {
          msg_list.forEach((item) => {
            helper.webSocket.send(item);
          });

          // 所有消息发送完成后，清空消息队列
          msg_list = [];
        };
      }

      // 发送socket数据
      function sendSocketMsg(dt) {
        // 判断socket是否开启
        // 如果开启，则直接发送，如果没有开启，则将数据推入消息队列
        if (helper.webSocket.readyState === 0) {
          msg_list.push(dt);
        }
        if (helper.webSocket.readyState === 1) {
          helper.webSocket.send(dt);
        }
        if (helper.webSocket.readyState === 2) {
          // 正在关闭
          console.log('web socket正在关闭');
        }
        if (helper.webSocket.readyState === 3) {
          msg_list.push(dt);

          // 已关闭: 重新开启socket
          createSocket();
        }
      }

      // 创建socket链接
      createSocket();

      // let temp_step_msg = '';

      /**
       * 当 websocket 返回的消息 type=stream 时
       * 消息内容是一个字一个字返回的，此时，前端需要将返回的消息进行拼接，以显示完整的消息内容
       * 当 type=stream 消息开始时，temp_stream_msg = temp_stream_msg + new_message，
       * 并在界面上显示 temp_stream_msg 对应的值
       * 当 type=stream 类型的消息结束时，应清空 temp_stream_msg 数据内容
       * 以便下一次 type=stream 的消息来临时继续重新拼接
       */
      let temp_stream_msg = '';
      const download_server = window.ASSETS_BASE_URL;

      /**
       * 处理socket数据
       */
      function handleSocketMessage(evt_dt, cur_chat_id) {
        let res_data = null;

        try {
          res_data = JSON.parse(evt_dt);
        } catch (err) {
          console.log(err);
        }

        if (!res_data) {
          return;
        }

        const { type, reference, step_message, files } = res_data;
        const msg_type = type; // 返回的消息类型
        const chat_type = props.type; // 对话的类型

        let { message } = res_data;

        if (!loadingData.value) return;

        if (msg_type === 'stream') {
          // 没解析完就一直loading
          if (step_message == '文件上传完成，开始解析') {
            emit('changeParse', true);
          }
          if (step_message == '文件解析完成') {
            emit('changeParse', false);
          }

          if (files && files.length > 0) {
            const file_name = files[0].file_name;
            const file_info_arr = file_name.split('.');
            const end_fix = file_info_arr[file_info_arr.length - 1];

            const file_info = {
              file_name: files[0].file_name,
              file_url: files[0].file_url
            };

            // 理论上报表合并，只能是 excel
            // if(chat_type === 'excel'){
            //   file_info.file_type = 'excel'
            // }
            if (end_fix === 'xlsx') {
              file_info.file_type = 'excel';
            }
            if (end_fix === 'docx') {
              file_info.file_type = 'word';
            }

            loadingData.value.file = file_info;

            answerFile.value = file_info;

            addData(loadingData.value);
          } else {
            // if(step_message){
            //   answerData.value = answerData.value + getHTML(step_message)  + "</br>";
            // }else{
            //   answerData.value = answerData.value +  message
            // }

            if (step_message) {
              temp_stream_msg = temp_stream_msg + step_message;
              // temp_stream_msg = '';

              answerData.value = getHTML(temp_stream_msg);
            } else {
              temp_stream_msg = temp_stream_msg + message;
              // temp_step_msg = '';

              answerData.value = getHTML(temp_stream_msg);
            }

            // answerData.value += step_message ? getHTML(step_message) + "</br>" : message

            if (answerData.value && !isLoaded.value) {
              answerLoaded();
            }

            addAnswer(loadingData.value);
          }
        } else {
          // 当 type 不是 stream 时，及时清理此值
          // 避免下一次拼接时，与前一次拼接冲突
          temp_stream_msg = '';
        }

        if (msg_type === 'message') {
          // 获取此时的聊天临时聊天记录中的序号
          const cur_index = tempHistory.getChatIndex(cur_chat_id);

          message = replaceCode(message, cur_index);
          answerData.value = getHTML(message);
          answerReference.value = [];

          fullRefference.full_ref = reference; // 完整引用数据

          // 如有文档引用处理接收到的新消息和引用
          if (reference && reference.doc_aggs && reference.doc_aggs.length > 0) {
            answerReference.value = reference.doc_aggs.map((item) => {
              return {
                id: item.doc_id,
                doc_name: item.doc_name,
                page: 0,
                content_ltks: [reference.chunks.find((chunk) => chunk.doc_id == item.doc_id).content_ltks]
              };
            });
          }

          // 智能数据
          if (chat_type == 'smartData') {
            answerData.value = '正在处理中...';
            // 以下是智能数据对话的变量
            const { image_url, excel_url, excel_name, code, sql } = JSON.parse(evt_dt);
            // const port = window.location.port ? `:${window.location.port}` : '';

            // 如果有图片或excel，则更新图片或excel地址
            if (image_url) {
              imageUrl.value = `${download_server}${image_url}`;
            }

            if (excel_url) {
              const file = {
                file_type: 'excel',
                file_url: `${download_server}${excel_url}`,
                file_name: `${excel_name}.xlsx` || '点击下载'
              };

              answerFile.value = file;
            }

            if (code) {
              const python_code = formatCodePython(code);

              answerCode.value = python_code;
            }

            if (sql) {
              const sql_code = formatCodeSql(sql);

              answerSql.value = sql_code;
            }
          }

          if (chat_type === 'document_report') {
            if (res_data.download_url) {
              // const file_url = res_data.download_url;
              // const file_url_arr = decodeURIComponent(file_url).split('/');
              // const file_name = file_url_arr[file_url_arr.length - 1]

              // const file = {
              //     file_type: 'word',
              //     // file_url: `http://${window.location.hostname}${port}${file_url}`,
              //     file_url: res_data.download_url,
              //     file_name: `${file_name}.docx` || '点击下载',
              // }

              const file = formatFieldDownloadUrl(res_data.download_url);

              answerFile.value = file;
            }
          }

          // 出题
          if (chat_type == 'question') {
            const { file_url, file_name } = JSON.parse(evt_dt);
            // const port = window.location.port ? `:${window.location.port}` : '';

            if (file_url) {
              const file = {
                file_type: 'word',
                file_url: `${download_server}${file_url}`,
                file_name: `${file_name}.docx` || '点击下载'
              };
              answerFile.value = file;
            }
          }

          if (answerData.value && !isLoaded.value) {
            answerLoaded();
          }

          addAnswer(loadingData.value);
        }

        if (msg_type === 'system') {
          if (chat_type === 'document_report') {
            document_report_system_message.value = res_data.message;
          }
        }

        if (msg_type === 'close') {
          // let temp_step_msg = '';
          // let temp_stream_msg = '';

          /**
           * 在小数绘图对话结束时
           * 存在一个字段数据
           */
          if (chat_type === 'huitu') {
            // 获取此时的聊天临时聊天记录中的序号
            const cur_index = tempHistory.getChatIndex(cur_chat_id);

            message = replaceCode(message, cur_index);
            answerData.value = getHTML(message);

            // 小数绘图
            if (res_data.message_files) {
              const arr = [];

              if (Array.isArray(res_data.message_files)) {
                res_data.message_files.forEach((item, index) => {
                  arr.push(item);
                });

                fullImageUrls.url = arr;
              } else {
                fullImageUrls.url = arr;
              }
            }

            answerLoaded();

            stopWriting();
            answerData.value = '';
            isLoaded.value = false;
          } else if (chat_type === 'excel') {
            // 报表合并
            answerLoaded();
            answerData.value = getHTML(message);

            addAnswer(loadingData.value);

            answerData.value = getHTML(message);

            stopWriting();
          } else {
            if (!answerData.value) {
              answerLoaded();
              answerData.value = getHTML(message);

              addAnswer(loadingData.value);
            }
            stopWriting();
            answerData.value = '';
            isLoaded.value = false;
          }
        }
      }

      helper.webSocket.onmessage = (event) => {
        const evt_dt = event.data;

        /**
         * 例如：ws://localhost/api/chat/ws/42e4fcdc9bea11efac300242ac160006/765f672c700f49b79a473fc906fe388c?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ1c2VyIiwidXNlcl9pZCI6MjEsImV4cCI6MTczMjQzNzkzNH0.7SPOZpnaTUu2KPzWIJrhhkRehjePeuL8TABo7rNgnCY
         */
        const socket_url = event.target.url; // socket连接地址
        const cur_chat_id = getChatIdFromUrl(socket_url);

        // setTempHistory(event);
        tempHistory.setHistory(event);

        // 处理socket数据
        handleSocketMessage(evt_dt, cur_chat_id);
      };

      /**
       * 所有数据的发送，统一走到这里
       * 通过websocket进行发送
       */
      helper.$bus.on('send-message', (value) => {
        // console.log(value, '会话的内容');

        /**
         * 当消息发送时，及时清理stream的拼接值
         * 避免本次发送，返回的stream数据与前一次返回的stream数据冲突
         */
        temp_stream_msg = '';

        dialogConfig.value = helper.dialogConfig;

        const chat_type = props.type; // 对话的类型

        const question = chat_type === 'report' ? value.inputs.report_name : value;
        const data = addQuestion(question);

        loadingData.value = addLoading(data);

        let sendData = {
          message: value
        };

        if (chat_type === 'report') {
          sendData = value;
        }

        if (chat_type === 'wendangzhineng') {
          const msgObj = value;
          const question = msgObj.message;
          const data = addQuestion(question);
          loadingData.value = addLoading(data);

          // 文档智能
          sendData = value;
        }

        if (chat_type === 'excel') {
          sendData = value;
        }

        if (chat_type === 'doc') {
          sendData.doc_ids = [helper.read('docId')];
        }

        // 小数绘图
        if (chat_type === 'huitu') {
          const img_file = helper.read('sendData');
          if (img_file) {
            const upload_file_id = img_file.upload_file_id;

            if (upload_file_id) {
              sendData = {
                message: value,
                upload_file_id: upload_file_id
              };

              setTimeout(() => {
                // 文字消息上传成功
                imageUploadStatus.messageFinish();

                // 记录此时页面中的问题记录
                huituSetTempImageIndex(dialogList.length);

                helper.write('sendData', {});
              });
            }
          } else {
            sendData = {
              message: value
            };
          }
        }

        if (chat_type === 'document_report') {
          const docReport = helper.read('sendData');

          if (docReport) {
            const upload_files = docReport.upload_files;

            sendData = {
              title: value,
              upload_files: docReport.upload_files,
              workflow: docReport.workflow
            };

            setTimeout(() => {
              // // 文字消息上传成功
              // imageUploadStatus.messageFinish();

              // // 记录此时页面中的问题记录
              // huituSetTempImageIndex(dialogList.length);

              helper.write('sendData', {});
            });
          } else {
            console.log('无数据信息');

            sendData = {
              message: value
            };
          }
        }

        const dt = JSON.stringify(sendData);

        // 发送socket数据
        sendSocketMsg(dt);
      });

      helper.$bus.on('clear-message', () => {
        dialogList.splice(0);
      });

      helper.$bus.on('stop-writing', () => {
        stopWriting();
      });
    });

    /**
     * 检查对话数据记录中是否存在代码（python或者SQL）
     * 在 智能数据 显示代码时，不用显示用户头像
     **/
    const chatItemHasCode = (item) => {
      if (item) {
        if (item.code || item.sql) {
          console.log('有代码');
          return true;
        }
      }

      console.log('无代码');

      return false;
    };

    return {
      dialogId: props.dialogId,

      goKnowledge,
      randomKey,

      showFeedback,
      copyAnswer,
      dialogList,
      getHTML,
      // selectSuggestion,
      dialogScroll,
      reQuestion,
      menuList,
      saveAnswer,
      openCapacity,
      feedbackAnswer,
      handleOk,
      handleCancel,
      stopWriting,
      knowledgeList,
      dialogConfig,
      // userName,
      downloadFile,

      openDocument,
      // openDocuementPage,

      show_info_btns,
      checkAllReference,
      chatItemHasCode,

      document_report_system_message
    };
  }
});
</script>
<style>
.dialog-header {
  display: flex;
  align-items: center;

  .dialog-span {
    color: rgba(51, 51, 51, 1);
    font-size: 14px;
    font-weight: bold;
  }
}

/* 如果有代码，则不显示头像 */
.dialog-header.header-answer.has-code {
  display: none;
}
</style>
<style scoped>
/* .user-name {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
} */

.paper-download {
  padding-left: 50px;

  > span {
    width: 26px;
    height: 26px;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      background: rgba(150, 171, 185, 0.2);
    }
  }
}

.paper-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
  background-color: #f5f7fe;
  border-radius: 16px;
  padding: 6px;
  margin-left: 50px;

  > img {
    width: 50px;
    margin: 8px 6px;
  }

  > span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    > b {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
      width: 100%;
    }

    > em {
      font-style: normal;
    }
  }
}

.knowledge-detail {
  width: 320px;
  padding-top: 20px;

  .knowledge-content {
    height: 300px;
    overflow-y: auto;
    line-height: 30px;
  }

  .knowledge-footer {
    border-top: 1px solid rgba(229, 229, 229, 1);
    margin-top: 20px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    p {
      &:nth-child(1) {
        opacity: 0.8;
      }

      &:nth-child(2) {
        flex: 1;
        display: flex;
        justify-content: left;
        margin: 0 30px;

        > span {
          margin: 0 5px;
          cursor: pointer;

          &:hover,
          &.active {
            color: #00aea3;
          }
        }
      }

      &:nth-child(3) {
        font-weight: bold;
        cursor: pointer;

        &:hover {
          color: #00aea3;
        }
      }
    }
  }
}

.knowledge-wrap {
  padding: 10px 0 20px 50px;

  > header {
    display: flex;
    justify-content: space-between;

    > p {
      &:nth-child(1) {
        color: #7f7f7f;
        font-weight: bold;
      }

      &:nth-child(2) {
        cursor: pointer;

        &:hover {
          color: #00aea3;
        }
      }
    }
  }

  > section {
    > div {
      > div {
        height: 40px;
        display: inline-flex;
        align-items: center;

        > span {
          &:nth-child(1) {
            display: inline-block;
            background-color: rgba(0, 174, 163, 0.2);
            color: #00aea3;
            padding: 1px 5px;
            border-radius: 2px;
            margin-right: 5px;
            font-size: 12px;
          }

          &:nth-child(2) {
            cursor: pointer;

            &:hover {
              color: #00aea3;
            }
          }
        }
      }
    }
  }
}

.dialog-absolute {
  .dialog-header {
    position: absolute;

    &:nth-child(1) {
      transform: translateY(10px);
    }

    &:nth-child(3) {
      transform: translateY(16px);
    }
  }

  .dialog-footer {
    margin-left: 50px;

    &:nth-child(2) {
      margin-left: 50px;
      padding-left: 0;
    }
  }

  .dialog-code-footer {
    border-radius: 12px;
    background-color: rgba(245, 247, 254, 1);
    padding: 12px 16px;
    /* margin: 16px 0; */
    margin: 16px 0 16px 50px;
  }

  /* .dialog-code-footer {
    border-radius: 12px;
    font-size: 14px;
    background-color: #32333c;
    color: #BCBDC3;
    margin: 16px 0;
    margin-left: 50px;

    .dialog-code-footer-title {
      font-size: 16px;
      font-weight: 500;
      width: 100%;
      color: #BCBDC3;
    }

        &:nth-child(2) {
            background-color: rgba(0, 0, 0, 0);
            margin: 0;
        }

        >p {
            font-size: 14px;
        }

        >div {
            font-size: 14px;
            padding: 4px 8px;
            border-radius: 4px;
            align-items: center;
            cursor: pointer;

            &.disabled {
                cursor: not-allowed;
            }

            >b {
                margin-right: 8px;
            }
        }

        >section {
            padding: 0 16px;
            background-color: #ffffff;
            border-radius: 12px;
            margin-top: 16px;

            >p {
                display: inline-block;
                color: rgba(16, 16, 16, 1);
                font-size: 12px;
                margin-top: 16px;
                width: 100%;
            }

            >div {
                margin-top: 4px;
                overflow: hidden;
                margin-bottom: 16px;
                display: inline-block;
                width: 100%;

                >div {
                    margin-top: 8px;

                    >div {
                        &:nth-child(1) {
                            border-radius: 4px;
                            color: rgba(16, 16, 16, 1);
                            font-size: 12px;
                            height: 24px;
                            border: 1px solid rgba(229, 229, 229, 1);
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            padding-right: 8px;
                            cursor: pointer;

                            &.disabled {
                                cursor: not-allowed;
                            }

                            &:hover {
                                background: rgba(229, 229, 229, 0.2);
                            }

                            >span {
                                &:nth-child(1) {
                                    background-color: rgba(0, 174, 163, 0.2);
                                    color: #00aea3;
                                    font-size: 12px;
                                    border: 1px solid rgba(64, 95, 234, 0.13);
                                    padding: 0 4px;
                                    margin: 0 4px 0 0;
                                }

                                &:nth-child(3) {
                                    color: #00aea3;
                                    font-size: 12px;

                                    em {
                                        padding: 0 4px;
                                        font-style: normal;
                                        border-left: 1px solid rgba(64, 95, 234, 1);
                                        font-weight: bold;

                                        &:nth-child(1) {
                                            border: none;
                                        }
                                    }
                                }
                            }
                        }

                        &:nth-child(2) {
                            >p {
                                margin: 8px 0;
                                display: flex;

                                >span {
                                    transform: translateY(2px);
                                    color: #00aea3;
                                    font-weight: bold;
                                    font-size: 12px;
                                    margin-right: 8px;
                                }
                            }
                        }
                    }
                }

                >p {
                    float: left;
                    width: 48%;
                    border-radius: 4px;
                    background-color: rgba(245, 247, 254, 1);
                    color: rgba(16, 16, 16, 1);
                    font-size: 12px;
                    margin-top: 8px;
                    height: 36px;
                    line-height: 36px;
                    padding: 0 8px;
                    display: flex;
                    align-items: center;

          &:nth-child(odd) {
            margin-right: 4%;
          }
        }
      }
    }
  } */
}

.dialog-flex-wrap {
  position: relative;
  flex: 1;
  margin-top: 16px;
  height: 100%;
}

.dialog-flex {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 32px;
}

.section-open {
  margin-top: 12px;
}

.dialog-file {
  width: 421px;
  height: 48px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  border: 1px solid rgba(229, 229, 229, 1);
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 8px;
}

.dialog-footer {
  border-radius: 12px;
  background-color: rgba(245, 247, 254, 1);
  padding: 12px 16px;
  margin: 16px 0;

  &:nth-child(2) {
    background-color: rgba(0, 0, 0, 0);
    margin: 0;
  }

  > p {
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
  }

  > div {
    border: 1px solid rgba(64, 95, 234, 0.42);
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 4px;
    align-items: center;
    cursor: pointer;
    height: 30px;

    &.disabled {
      cursor: not-allowed;
    }

    &:hover {
      background: rgb(245, 247, 254, 0.4);
    }

    > span {
      margin: 0 8px;
    }

    > b {
      margin-right: 8px;
    }
  }

  > section {
    padding: 0 16px;
    background-color: #ffffff;
    border-radius: 12px;
    margin-top: 16px;

    > p {
      display: inline-block;
      color: rgba(16, 16, 16, 1);
      font-size: 12px;
      margin-top: 16px;
      width: 100%;
    }

    > div {
      margin-top: 4px;
      overflow: hidden;
      margin-bottom: 16px;
      display: inline-block;
      width: 100%;

      > div {
        margin-top: 8px;

        > div {
          &:nth-child(1) {
            border-radius: 4px;
            color: rgba(16, 16, 16, 1);
            font-size: 12px;
            height: 24px;
            border: 1px solid rgba(229, 229, 229, 1);
            display: flex;
            justify-content: center;
            align-items: center;
            padding-right: 8px;
            cursor: pointer;

            &.disabled {
              cursor: not-allowed;
            }

            &:hover {
              background: rgba(229, 229, 229, 0.2);
            }

            > span {
              &:nth-child(1) {
                background-color: rgba(0, 174, 163, 0.2);
                color: #00aea3;
                font-size: 12px;
                border: 1px solid rgba(64, 95, 234, 0.13);
                padding: 0 4px;
                margin: 0 4px 0 0;
              }

              &:nth-child(3) {
                color: #00aea3;
                font-size: 12px;

                em {
                  padding: 0 4px;
                  font-style: normal;
                  border-left: 1px solid rgba(64, 95, 234, 1);
                  font-weight: bold;

                  &:nth-child(1) {
                    border: none;
                  }
                }
              }
            }
          }

          &:nth-child(2) {
            > p {
              margin: 8px 0;
              display: flex;

              > span {
                transform: translateY(2px);
                color: #00aea3;
                font-weight: bold;
                font-size: 12px;
                margin-right: 8px;
              }
            }
          }
        }
      }

      > p {
        float: left;
        width: 48%;
        border-radius: 4px;
        background-color: rgba(245, 247, 254, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 12px;
        margin-top: 8px;
        height: 36px;
        line-height: 36px;
        padding: 0 8px;
        display: flex;
        align-items: center;

        &:nth-child(odd) {
          margin-right: 4%;
        }
      }
    }
  }
}

/**
.section-suggestions {
  margin: 12px 0 20px;

  .section-suggestion {
    width: 380px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin-top: 8px;

    &.disabled {
      cursor: not-allowed;
    }

    &:hover {
      background: rgb(245, 247, 254);
    }
  }
}
 */

.dialog-other {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  > p {
    display: flex;
    align-items: center;

    span {
      margin-left: 8px;
      color: rgba(16, 16, 16, 1);
      font-size: 12px;
    }
  }

  > div {
    display: flex;

    p {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 15px;
      border: 1px solid rgba(229, 229, 229, 1);
      margin-left: 8px;
      cursor: pointer;

      &.disabled {
        cursor: not-allowed;
      }

      &:hover {
        background-color: rgba(245, 247, 254, 1);
      }
    }
  }
}

.feedback-title {
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  margin: 0 0 8px 4px;
}

.feedback-content {
  margin-bottom: 16px;
}

.dialog-writing-button {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 106px;
  height: 34px;
  line-height: 34px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  border: 1px solid rgba(229, 229, 229, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;

  &:hover {
    background: rgb(245, 247, 254);
  }
}
</style>
<style>
.circle {
  width: 13px;
  height: 13px;
  margin-left: 4px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #888;
}

.circle::before {
  content: '!';
  font-size: 12px;
  color: #000;
  line-height: 12px;
  text-align: center;
  display: block;
}
</style>