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" 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" v-if="item?.capacity">
            <img alt="avatar" src="/src/assets/slider/logo.jpg" width="28" />
          </div>

          <!-- 没有处理答案则渲染代码和sql -->
          <div class="dialog-code-footer" v-if="item.code || item.sql">
            <div v-if="item.code">
              <p class="dialog-code-footer-title" v-if="item.code">Python：</p>
              <span v-html="item.code"></span>
            </div>

            <div v-if="item.sql">
              <p class="dialog-code-footer-title" v-if="item.sql">SQL：</p>
              <span v-html="item.sql"></span>
            </div>
          </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>{{ type === 'excel' ? '正在为您合并...' : '正在为您搜索答案...' }}</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="goKnowledge">查看全部关联 ></p> -->
            </header>

            <section>
              <DocRefItem 
                v-for="(knowledge, knowledgeIndex) in item.reference" 
                :key="knowledgeIndex" 
                :knowledge="knowledge" 
                :knowledgeIndex="knowledgeIndex"
              />

              <!-- <div v-for="(knowledge, knowledgeIndex) in item.reference" :key="knowledgeIndex">
                <a-popover :title="knowledge.doc_name" position="left">
                  <div @click="openDocuementPage(knowledge)">
                    <span>{{ knowledgeIndex + 1 }}</span>
                    <span>{{ knowledge.doc_name }}</span>
                  </div>
                  <template #content>
                    <div class="knowledge-detail">
                      <div class="knowledge-content">
                        {{ knowledge.content_ltks }}
                      </div>
                      <div class="knowledge-footer">
                        <p>检索片段</p>
                        <p>
                          <span v-for="(content, contentIndex) in knowledge.content_ltks" :key="contentIndex"
                            :class="{ active: knowledge.page === contentIndex }" @click="() => {
                              knowledge.page = contentIndex;
                            }
                              ">{{ contentIndex + 1 }}</span>
                        </p>
                      </div>
                    </div>
                  </template>
                </a-popover>
              </div> -->
            </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 {useImageUploadStatus} from '../store/index';

import {applyHighLight} from './answer-effect/marked-lib';

export default defineComponent({
  components: {
    DialogFeedback,

    Suggestion,
    ClientUserAvatar,

    Question,
    Answer,

    DocRefItem
  },
  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 tempHistory = initTempHistory();

    const list = props.list.map((item, index) => {
      // const client_id = generateClientUniqueId(JSON.stringify(item));

      return formatDialogItem(item, index);

      // return {
      //   /**
      //    * 客户端生成的ID
      //    * 此数据作为列表唯一的key
      //    */
      //   client_gen_id: client_id,

      //   answer: item.answer && replaceCode(item.answer, index),
      //   question: item.question,
      //   // 如果有引用
      //   reference: (item.reference && item.reference.chunks && item.reference.doc_aggs) ? item.reference.doc_aggs.map(reference => {
      //     return {
      //       id: reference.doc_id,
      //       doc_name: reference.doc_name,
      //       page: 0,
      //       content_ltks: [item.reference.chunks.find(chunk => chunk.doc_id == reference.doc_id).content_ltks]
      //     }
      //   }) : [],

      //   // 完整的引用数据: pdf文档引用效果需要使用此数据
      //   fullRefference: item.reference,
      //   // 合法可用的图片地址
      //   fullImageUrls: (() => {
      //     if(item.images){
      //       return item.images;
      //     }else{
      //       return [];
      //     }
      //   })(),

      //   // 如果有文件处理完拿第一个，后续有变动再改
      //   file: (item.files && item.files.length > 0) ? item.files.map(item => {
      //     const port = window.location.port ? `:${window.location.port}` : '';
      //     return {
      //       file_type: 'word',
      //       file_name: item.file_name,
      //       file_url: `http://${window.location.hostname}${port}${item.file_url}`,
      //     }
      //   })[0] : null,
      // }
    });

    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 = () => {
      // emit("go-document");
    };
    // // 点击文档，打开新页面
    // 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) => {
      window.open(url, "_blank");
    };
    onBeforeUnmount(() => {
      helper.$bus.off("send-message");
      helper.$bus.off("clear-message");
      helper.$bus.off("stop-writing");
      helper.webSocket?.close();
    });

    onMounted(() => {
      scrollToEnd();
      /**
       * 应用引用效果
       * 答案中 引用图标（感叹号）点击时，浮层显示引用内容
       */
      // applyRefferencePopover(props.list);
      // applyImageDisplay(props.list);

      /**
       * 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 = '';
      let temp_stream_msg = '';

      /**
       * 处理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_step_msg = temp_step_msg + step_message
              temp_stream_msg = '';

              answerData.value = getHTML(temp_step_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);
          }
        }

        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 = `http://${window.location.hostname}${port}${image_url}`
            }

            if (excel_url) {
              const file = {
                file_type: 'excel',
                file_url: `http://${window.location.hostname}${port}${excel_url}`,
                file_name: `${excel_name}.xlsx` || '点击下载',
              }

              answerFile.value = file
            }

            if (code) {
              const python_code = `
              <pre>
              <code class="hljs language-python">
${code}
              </code>
              </pre>
              `

              answerCode.value = python_code;
            }

            if (sql) {
              const sql_code = `
              <pre>
              <code class="hljs language-sql">
${sql}
              </code>
              </pre>
              `

              answerSql.value = sql_code;
            }
          }

          // 出题
          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: `http://${window.location.hostname}${port}${file_url}`,
                file_name: `${file_name}.docx` || '点击下载',
              }
              answerFile.value = file
            }
          }

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

          addAnswer(loadingData.value);

          // 应用代码高亮效果
          setTimeout(() => {
            applyHighLight();
          });
        }

        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) => {
        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 === "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
            };
          }
        }

        const dt = JSON.stringify(sendData);

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

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

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

    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,
      chat_type
    };
  }
});
</script>
<style>
.dialog-header {
  display: flex;
  align-items: center;

  .dialog-span {
    color: rgba(51, 51, 51, 1);
    font-size: 14px;
    font-weight: bold;
  }
}
</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;
    font-size: 14px;
    background-color: #32333c;
    color: #BCBDC3;
    margin: 16px 0;
    margin-left: 50px;

    .dialog-code-footer-title {
      font-size: 16px;
      font-weight: 500;
      /* margin: 12px 0; */
      width: 100%;
      /* padding: 4px 8px; */
      /* background-color: #3D3F3F; */
      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>