xiaoshu/src/components/DialogWrap.vue

<template>
  <div class="dialog-flex-wrap">
    <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>
      <div class="section-suggestions">
        <div :class="['section-suggestion', readonly ? 'disabled' : '']" v-for="(suggestion, key) in suggestions"
          :key="key" @click="selectSuggestion(suggestion)">
          {{ suggestion }}<icon-arrow-right />
        </div>
      </div>

      <div class="dialog-list" v-if="dialogList.length > 0" :key="randomKey">
        <div :class="['dialog-item', isSetting ? '' : 'dialog-absolute']" v-for="(item, key) in dialogList"
          :key="item.key">
          <div class="dialog-header" v-if="item?.question">
            <div class="user-name" style="background-color: rgb(255, 110, 110)">
              {{ userName.slice(0, 1) }}
            </div>
          </div>
          <div class="dialog-footer" v-if="item?.question">
            <p style="margin-top: 0">{{ item.question }}</p>
          </div>
          <!-- 如果是代码则不显示头像 -->
          <div class="dialog-header" v-if="item?.capacity && !(item.code || item.sql)">
            <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>
              <span v-else v-html="getHTML(item.answer)"></span>
            </p>
          </div>

          <div class="dialog-footer" v-else>
            <span v-html="getHTML(item.answer)"></span>
          </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>
              <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>
                        <!-- TODO详情暂时注释 -->
                        <!-- <p @click="goKnowledge(knowledge.id)">查看详情></p> -->
                      </div>
                    </div>
                  </template>
                </a-popover>
              </div>
            </section>
          </div>

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

          <div v-if="item.file" class="paper-wrap" @click="downloadFile(item.file.file_url)">
            <img src="@/assets/question/excel.svg" />
            <!-- <img src="@/assets/question/word.svg" v-else /> -->
            <span>
              <b>{{ item.file.file_name }}</b>
            </span>
          </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>
              <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 './refference-effect/format-anwser-string';
import applyRefferencePopover from './refference-effect/apply-refference-popover';

export default defineComponent({
  components: {
    DialogFeedback
  },
  props: ["open", "suggestions", "isSetting", "readonly", "type", "list", "agentId", "dialogId", 'reference'],
  setup(props, { emit }) {
    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}"></span>`
      return text.replace(/##\d\$\$/g, icon);
    }

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

    const list = props.list.map((item, index) => {
      return {
        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]
          }
        }) : []
      }
    });
    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 openDocument = (index, documentIndex) => {
      if (menuList[index].documentOpenIndex === documentIndex) {
        menuList[index].documentOpenIndex = -1;
      } else {
        menuList[index].documentOpenIndex = documentIndex;
      }
    };
    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 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}`;

      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 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.image_url = imageUrl.value;
      data.code = answerCode.value;
      data.file = answerFile.value;
      data.sql = answerSql.value;
      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);


      // socket 消息队列
      let msg_list = [];

      function createSocket(){
        const token = helper.read("token");
        // 如果是智能数据，则拿缓存里的数据开启对话
        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, props.type);

          // 创建对话之后清空缓存
          helper.write('sendData', {});
        } else {
          helper.webSocket = ajax.message.create(token, props.agentId, props.dialogId, props.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){
          // 正在关闭
        }
        if(helper.webSocket.readyState === 3){
          msg_list.push(dt);

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

      // 创建socket链接
      createSocket();

      

      helper.webSocket.onmessage = (event) => {
        const { type, reference, step_message, files } = JSON.parse(event.data);

        let { message } = JSON.parse(event.data);

        if (!loadingData.value) return;

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

          if (files && files.length > 0) {
            loadingData.value.file = files[0];
            addData(loadingData.value);
          } else {
            answerData.value += step_message ? getHTML(step_message) + "</br>" : message

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

            addAnswer(loadingData.value);
          }
        }

        if (type === "message") {
          message = replaceCode(message);
          answerData.value = getHTML(message);
          answerReference.value = [];

          // 如有文档引用处理接收到的新消息和引用
          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 (props.type == 'smartData') {
            answerData.value = '正在处理中...'
            // 以下是智能数据对话的变量
            const { image_url, excel_url, excel_name, code, sql } = JSON.parse(event.data);
            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_url: `http://${window.location.hostname}${port}${excel_url}`,
                file_name: `${excel_name}.xlsx` || '点击下载',
              }

              answerFile.value = file
            }

            if (code) answerCode.value = getHTML(code);

            if (sql) answerSql.value = getHTML(sql);
          }

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

          addAnswer(loadingData.value);
        }

        if (type === "close") {
          if (!answerData.value) {
            answerLoaded();
            answerData.value = getHTML(message);
            addAnswer(loadingData.value);
          }
          stopWriting();
          answerData.value = "";
          isLoaded.value = false;
        }
      };

      helper.$bus.on("send-message", (value) => {
        dialogConfig.value = helper.dialogConfig;
        const question = props.type === "report" ? value.inputs.report_name : value;
        const data = addQuestion(question);
        loadingData.value = addLoading(data);
        let sendData =
          props.type === "report" || props.type === "excel"
            ? value
            : {
              message: value
            };

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

        const dt = JSON.stringify(sendData);

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

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

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

    return {
      goKnowledge,
      randomKey,
      openDocument,
      showFeedback,
      copyAnswer,
      dialogList,
      getHTML,
      selectSuggestion,
      dialogScroll,
      reQuestion,
      menuList,
      saveAnswer,
      openCapacity,
      feedbackAnswer,
      handleOk,
      handleCancel,
      stopWriting,
      knowledgeList,
      dialogConfig,
      userName,
      downloadFile,

      openDocuementPage
    };
  }
});
</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;

  >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;

    .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;
}

.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>