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">
                            {{ item.answer }}
                        </p>
                    </div>
                    <div v-if="type === 'knowledge' && item.other" class="knowledge-wrap">
                        <header>
                            <p>来源</p>
                            <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>
                                                <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"],
    setup(props, { emit }) {
        const knowledgeList = ref([
            {
                id: "111",
                name: "十四届全国人大二次会议政府工作报告1.docx ",
                page: 0,
                contents: [
                    `促进社会综合融资成本稳中有降。畅通货币政策传导机制，避免资金沉
                    淀空转。增强资本市场内在稳定性。保持人民币汇率在合理均衡水平上的基本
                    稳定。大力发展科技金融、绿色金融、普惠金融、养老金融、数字金融。优化
                    融资增信、风险分担、信息共享等配套措施，更好满足中小微企业融资需求。
                    增强宏观政策取向一致性。围绕发展大局，加强财政、货币、就业、产业、
                    区域、科技、环保等政策协调配合，把非经济性政策纳入宏观政策取向一致性
                    评估，强化政策统筹，确保同向发力、形成合力。各地区各部门制定政策要认`,
                    `制定推动文化传承发展的政策举措。深入推进国家文化数字化战略。
                    深化全民阅读活动。完善网络综合治理，培育积极健康、向上向善的网络文化。
                    创新实施文化惠民工程，提高公共文化场馆免费开放服务水平。大力发展文化
                    产业。开展第四次全国文物普查，加强文物系统性保护和合理利用。推进非物`
                ]
            },
            {
                id: "222",
                name: "十四届全国人大二次会议政府工作报告2.docx ",
                page: 0,
                contents: [
                    `促进社会综合融资成本稳中有降。畅通货币政策传导机制，避免资金沉
                    淀空转。增强资本市场内在稳定性。保持人民币汇率在合理均衡水平上的基本
                    稳定。大力发展科技金融、绿色金融、普惠金融、养老金融、数字金融。优化
                    融资增信、风险分担、信息共享等配套措施，更好满足中小微企业融资需求。
                    增强宏观政策取向一致性。围绕发展大局，加强财政、货币、就业、产业、
                    区域、科技、环保等政策协调配合，把非经济性政策纳入宏观政策取向一致性
                    评估，强化政策统筹，确保同向发力、形成合力。各地区各部门制定政策要认`,
                    `制定推动文化传承发展的政策举措。深入推进国家文化数字化战略。
                    深化全民阅读活动。完善网络综合治理，培育积极健康、向上向善的网络文化。
                    创新实施文化惠民工程，提高公共文化场馆免费开放服务水平。大力发展文化
                    产业。开展第四次全国文物普查，加强文物系统性保护和合理利用。推进非物`
                ]
            }
        ]);
        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) {
                mockLink(text);
            }
        };
        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, 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): getHTML(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 (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);
                const 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>