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">
            <img alt="avatar" src="/src/assets/slider/logo.jpg" width="28" />
          </div>
          <div class="dialog-footer" v-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="item.answer"></span>
            </p>
          </div>
          <div class="dialog-footer" v-else>
            <p v-if="item.answer" v-html="item.answer"></p>

          </div>
          <div v-if="(type === 'knowledge' || type === 'knowledgeQuiz') && knowledgeList.length > 0"
            class="knowledge-wrap">
            <header>
              <p>来源</p>
              <!-- TODO详情暂时注释 -->
              <!-- <p @click="goKnowledge">查看全部关联 ></p> -->
            </header>
            <section>
              <div v-for="(knowledge, knowledgeIndex) in knowledgeList" :key="knowledgeIndex">
                <a-popover :title="knowledge.name" position="left">
                  <div>
                    <span>{{ knowledgeIndex + 1 }}</span>
                    <span>{{ knowledge.name }}</span>
                  </div>
                  <template #content>
                    <div class="knowledge-detail">
                      <div class="knowledge-content">
                        {{ knowledge.contents[knowledge.page] }}
                      </div>
                      <div class="knowledge-footer">
                        <p>检索片段</p>
                        <p>
                          <span v-for="(content, contentIndex) in knowledge.contents" :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.file" class="paper-wrap" @click="downloadFile(item.file.file_url)">
            <img src="@/assets/question/excel.svg" v-if="type === 'excel'" />
            <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 { marked } from "marked";
export default defineComponent({
  components: {
    DialogFeedback
  },
  props: ["open", "suggestions", "isSetting", "readonly", "type", "list", "agentId", "dialogId", 'reference'],
  setup(props, { emit }) {
    console.log('type', props.type)
    const knowledgeList = ref([]);
    const DOCUMENT_RESULT = {
      type: "document",
      text: "谷歌知识库",
      status: "loaded",
      data: {
        title: "AI Agent的论文",
        documents: [
          {
            type: "PDF",
            title: "科比的传奇一生，你知道多少？",
            list: [
              {
                title: "P1",
                content:
                  "科比·布莱恩特（Kobe Bryant），1978年8月23日出生，2020年1月26日不幸逝世，是美国著名的职业篮球运动员，司职得分后卫/小前锋。他的NBA生涯全部在洛杉矶湖人队度过，共获得5次NBA总冠军、1次NBA常规赛MVP、2次NBA总决赛MVP"
              },
              {
                title: "P2",
                content:
                  "科比·布莱恩特（Kobe Bryant），1978年8月23日出生，2020年1月26日不幸逝世，是美国著名的职业篮球运动员，司职得分后卫/小前锋。他的NBA生涯全部在洛杉矶湖人队度过，共获得5次NBA总冠军、1次NBA常规赛MVP、2次NBA总决赛MVP"
              }
            ]
          },
          {
            type: "PDF",
            title: "科比的传奇一生，你知道多少？",
            list: [
              {
                title: "P1",
                content:
                  "科比·布莱恩特（Kobe Bryant），1978年8月23日出生，2020年1月26日不幸逝世，是美国著名的职业篮球运动员，司职得分后卫/小前锋。他的NBA生涯全部在洛杉矶湖人队度过，共获得5次NBA总冠军、1次NBA常规赛MVP、2次NBA总决赛MVP"
              },
              {
                title: "P2",
                content:
                  "科比·布莱恩特（Kobe Bryant），1978年8月23日出生，2020年1月26日不幸逝世，是美国著名的职业篮球运动员，司职得分后卫/小前锋。他的NBA生涯全部在洛杉矶湖人队度过，共获得5次NBA总冠军、1次NBA常规赛MVP、2次NBA总决赛MVP"
              }
            ]
          }
        ]
      }
    };
    const { helper, ajax } = inject("$global");
    const userName = ref(helper.read("userName") || "");
    const dialogList = reactive(props.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 mockLink = (text, file = null) => {
      let num2 = 0;
      let p1 = text;
      const p2 = `尊敬的领导，

因个人原因，我计划于2023年11月6日至11月10日请假。在此期间，我将妥善安排工作，确保任务顺利完成。恳请批准。

谢谢！`;
      let result = { question: "", capacity: null, answer: "", other: null, file: null };
      // 第一步，输入问题
      const step1 = () => {
        result.question = p1;
        if (file) {
          result.file = file;
          addData(result);
        }
        step2();
      };
      // 第二步，调用能力
      const step2 = () => {
        const mockData = DOCUMENT_RESULT;
        result.capacity = {
          type: mockData.type,
          text: mockData.text,
          status: "loading",
          data: null
        };
        menuList[dialogIndex] = {
          save: false,
          open: false,
          documentOpenIndex: -1
        };
        addData(result);
        setTimeout(() => {
          result.capacity = mockData;
          addData(result);
          step3();
        }, 1000);
      };
      // 第三步，输出答案
      const step3 = () => {
        emit("set-readonly", true);
        answerInterval = setInterval(() => {
          if (num2 < p2.length + 1) {
            result.answer = p2.slice(0, num2);
            num2 += 1;
            addData(result);
          } else {
            stopWriting();
          }
        }, 50);
      };
      step1();
    };
    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) {
        mockLink(text);
      }
    };
    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 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 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;
      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();
    });
    const getHTML = (string) => {
      return marked.parse(string);
    };
    onMounted(() => {
      scrollToEnd();
      helper.webSocket = ajax.message.create(helper.read("token"), props.agentId, props.dialogId, props.type);
      helper.webSocket.onmessage = (event) => {
        const { type, message, reference, step_message, files } = JSON.parse(event.data);
        if (!loadingData.value) return;
        if (type === "stream") {
          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") {
          answerData.value = getHTML(message);
          if (answerData.value && !isLoaded.value) {
            answerLoaded();
          }
          addAnswer(loadingData.value);
          if (reference.chunks && reference.chunks.length > 0) {
            knowledgeList.value = reference.chunks.map(item => {
              return {
                id: item.doc_id,
                name: item.docnm_kwd,
                page: 0,
                contents: [item.content_ltks]
              }
            })
          }
        }
        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')];
        }
        helper.webSocket.send(JSON.stringify(sendData));
      });
      helper.$bus.on("clear-message", () => {
        dialogList.splice(0);
      });
      helper.$bus.on("stop-writing", () => {
        stopWriting();
      });
    });
    return {
      goKnowledge,
      randomKey,
      openDocument,
      showFeedback,
      copyAnswer,
      dialogList,
      selectSuggestion,
      dialogScroll,
      reQuestion,
      menuList,
      saveAnswer,
      openCapacity,
      feedbackAnswer,
      handleOk,
      handleCancel,
      stopWriting,
      knowledgeList,
      dialogConfig,
      userName,
      downloadFile
    };
  }
});
</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;
  max-width: 200px;
  align-items: center;
  margin-left: 40px;
  margin-bottom: 10px;
  cursor: pointer;

  >img {
    width: 50px;
    margin-right: 10px;
  }

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