base-callcenter-web/src/components/main/Navbar/cpns/aiDialog/aiDialog.vue

<template>
    <div>
        <div class="aiWrap"
            id="gundong"
            :style="{ 'background': 'url(' + base64data.aiBG2 + ') right -36px/400px 300px no-repeat' }">
            <!-- 新会话开始 -->
            <div v-show="dialogState !== '会话中'" class="ai_girl"
                :style="{ 'background': 'url(' + base64data.aiBG3 + ')  -16px -36px/400px 300px no-repeat'}">
                <div class="ai_content">
                    <div class="ai_des">
                        我是你的智能助手，可以帮你撰写营销文案、查询数据和功能，助力你更高效的完成工作。
                    </div>
                    <div class="ai_tips">
                        💡你可能想知道
                    </div>
                    <div class="ai_text">
                        <div class="ai_item" @click="chatModalHandle(item.content)" v-for="(item,index) in conModelData" :key="index">
                            <span class="ai_label">{{item.icon}}{{item.title}}</span>
                            <span class="ai_value">{{item.content}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 新会话结束 -->

            <!-- 会话中 -->
            <div class="ai-conversation"   v-show="dialogState == '会话中' ">
                <div v-for="(item, index) in chatData" :key="index">

                    <div class="conversation_item" v-if="item.direction ===1 ">
                        <div class="item_user">
                            <div class="aiHtml">{{item.page_content}}</div>
                        </div>
                    </div>
                    <div class="conversation_item" v-if="item.direction === 2 ">
                        <div class="item_ai" v-loading="item.loadingFlag">
                            <!-- v-for="(item,index) in productDetails.content && productDetails.content.split('\n')" :key="index" -->
                            <!-- productDetails.content.split('\n')  pre-wrap -->
                            <!-- v-text="item.page_content" -->
                            <!-- v-for="(itemChild,indexChild) in item.page_content && item.page_content.split('\n')" -->
                            <div class="aiHtml" >
                                {{item.page_content}}
                            </div>
                            <div class="tools-wrap">
                                <div class="item-ai-tools">
                                    <div class="tools-left">
                                        <!-- <div class="tool">
                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                                xmlns="http://www.w3.org/2000/svg" class="sc-ai-conversation">
                                                <g id="Frame 427321419" class="sc-ai-conversation">
                                                    <rect id="Rectangle 34624950" x="2.50018" y="4.3335" width="9.16667"
                                                        height="9.16667" rx="1.83333" stroke="#86909C"
                                                        stroke-width="1.2" class="sc-ai-conversation"></rect>
                                                    <path id="Subtract" fill-rule="evenodd" clip-rule="evenodd"
                                                        d="M6.16649 1.8999C4.82259 1.8999 3.73315 2.98935 3.73315 4.33324V4.43394C3.92124 4.36879 4.12323 4.3334 4.33348 4.3334H4.93315V4.33324C4.93315 3.65209 5.48534 3.0999 6.16649 3.0999H11.6665C12.3476 3.0999 12.8998 3.65209 12.8998 4.33324V9.83323C12.8998 10.5143 12.3478 11.0664 11.6668 11.0666V11.6667C11.6668 11.8768 11.6315 12.0786 11.5664 12.2666H11.6665C13.0104 12.2666 14.0998 11.1771 14.0998 9.83323V4.33324C14.0998 2.98934 13.0104 1.8999 11.6665 1.8999H6.16649Z"
                                                        fill="#86909C" class="sc-ai-conversation"></path>
                                                </g>
                                            </svg>
                                            <div class="text">复制</div>
                                        </div> -->
                                        <!-- <div class="tool">
                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                                xmlns="http://www.w3.org/2000/svg" class="sc-ai-conversation">
                                                <g id="Frame 427321538" class="sc-ai-conversation">
                                                    <path id="Ellipse 2705"
                                                        d="M3.48167 10.6094C4.92242 13.1048 8.11334 13.9598 10.6088 12.5191C12.1804 11.6117 13.1014 10.0101 13.208 8.32526M12.5185 5.39195C11.0777 2.8965 7.88683 2.04149 5.39138 3.48224C3.81975 4.38962 2.89879 5.99121 2.79222 7.67605"
                                                        stroke="#86909C" stroke-width="1.2" stroke-linecap="round"
                                                        stroke-linejoin="round" class="sc-ai-conversation"></path>
                                                    <path id="Rectangle 34625018"
                                                        d="M10.437 5.36768L12.7034 5.36768L12.7034 3.1013"
                                                        stroke="#86909C" stroke-width="1.2" stroke-linecap="round"
                                                        stroke-linejoin="round" class="sc-ai-conversation"></path>
                                                    <path id="Rectangle 34625019"
                                                        d="M5.51387 10.3096L3.2475 10.3096L3.2475 12.5759"
                                                        stroke="#86909C" stroke-width="1.2" stroke-linecap="round"
                                                        stroke-linejoin="round" class="sc-ai-conversation"></path>
                                                </g>
                                            </svg>
                                            <div class="text">重新生成</div>
                                        </div> -->
                                    </div>
                                    <div class="tools-right">
                                        <!-- <div class="pointer">
                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                                xmlns="http://www.w3.org/2000/svg" class="sc-ai-conversation">
                                                <g id="Frame 427321417" class="sc-ai-conversation">
                                                    <path id="Rectangle 34624947"
                                                        d="M5 6H4.5C3.39543 6 2.5 6.89543 2.5 8V11.5C2.5 12.6046 3.39543 13.5 4.5 13.5H5M5 6L5.11992 5.96672C5.79688 5.77882 6.32561 5.2495 6.51275 4.57233L6.96307 2.94285C7.20278 2.07547 8.28898 1.78898 8.9253 2.4253V2.4253C9.28996 2.78996 9.4765 3.29611 9.43569 3.81021L9.34753 4.92087C9.30136 5.50252 9.76091 6 10.3444 6H11.5604C12.8225 6 13.7691 7.15465 13.5216 8.39223L12.8216 11.8922C12.6346 12.8271 11.8138 13.5 10.8604 13.5H5M5 6V13.5"
                                                        stroke="#86909C" stroke-width="1.2" class="sc-ai-conversation">
                                                    </path>
                                                </g>
                                            </svg>
                                        </div> -->
                                        <!-- <div class="pointer">
                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                                xmlns="http://www.w3.org/2000/svg" class="sc-ai-conversation">
                                                <g id="Frame 427321417" class="sc-ai-conversation">
                                                    <path id="Rectangle 34624947"
                                                        d="M5 6H4.5C3.39543 6 2.5 6.89543 2.5 8V11.5C2.5 12.6046 3.39543 13.5 4.5 13.5H5M5 6L5.11992 5.96672C5.79688 5.77882 6.32561 5.2495 6.51275 4.57233L6.96307 2.94285C7.20278 2.07547 8.28898 1.78898 8.9253 2.4253V2.4253C9.28996 2.78996 9.4765 3.29611 9.43569 3.81021L9.34753 4.92087C9.30136 5.50252 9.76091 6 10.3444 6H11.5604C12.8225 6 13.7691 7.15465 13.5216 8.39223L12.8216 11.8922C12.6346 12.8271 11.8138 13.5 10.8604 13.5H5M5 6V13.5"
                                                        stroke="#86909C" stroke-width="1.2" class="sc-ai-conversation">
                                                    </path>
                                                </g>
                                            </svg>
                                        </div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 会话中结束 -->


        </div>
        <!-- 提示指令内容 -->
        <div class="tip_bg" v-show="tipFlag " @click="tipBgHandle"></div>
        <div class="tip_dialog" v-show="tipFlag ">
            <div class="bottomItem">
                <!-- <div class="ai_bttton_wrap">
                    <button class="primary" v-if="tipState === '内容创作' " @click="tipHandle('内容创作')">
                        <img class="btn_icon" :src="base64data.aiBG11">
                        <span style="padding-left: 15px;">内容创作</span>
                    </button>
                    <button class="default" v-if="tipState !== '内容创作' " @click="tipHandle('内容创作')">
                        <img class="btn_icon" :src="base64data.aiBG12">
                        <span style="padding-left: 15px;">内容创作</span>
                    </button>
                </div> -->
                <div class="ai_bttton_wrap">
                    <button class="primary" v-if="tipState === '问题咨询' " @click="tipHandle('问题咨询')">
                        <img class="btn_icon" :src="base64data.aiBG14">
                        <span style="padding-left: 15px;">问题咨询</span>
                    </button>
                    <button class="default" v-if="tipState !== '问题咨询' " @click="tipHandle('问题咨询')">
                        <img class="btn_icon" :src="base64data.aiBG13">
                        <span style="padding-left: 15px;">问题咨询</span>
                    </button>

                </div>
                <div class="ai_bttton_wrap">
                    <button class="primary" v-if="tipState === '数据查询' " @click="tipHandle('数据查询')">
                        <img class="btn_icon" :src="base64data.aiBG16">
                        <span style="padding-left: 15px;">数据查询</span>
                    </button>
                    <button class="default" v-if="tipState !== '数据查询' " @click="tipHandle('数据查询')">
                        <img class="btn_icon" :src="base64data.aiBG15">
                        <span style="padding-left: 15px;">数据查询</span>
                    </button>
                </div>
            </div>
            <div class="ai_content_scroll">
                <div class="scroll_ele">
                    <div class="ai_item" @click="modelItemHandle(item.content)"  v-for="(item,index) in modelData" :key="index">
                        <div class="ai_label">{{item.title}}</div>
                        <div class="ai_value">{{item.content}}</div>
                    </div>
                   
                </div>
            </div>
        </div>
        <!-- 提示指令内容结束 -->

        <!-- 回话底部按钮 -->
        <div class="sc-ai-dialog">
            <div class="bottomItem">
                <!-- <div class="ai_bttton_wrap">
                    <button class="primary" @click="dialogHandle('提示指令')">
                        <img class="btn_icon" :src="base64data.aiBG4">
                        <span style="padding-left: 15px;">提示指令</span>
                    </button>
                </div> -->
                <div class="ai_bttton_wrap">
                    <button class="default" @click="dialogHandle('新建会话')">
                        <img class="btn_icon" :src="base64data.aiBG5">
                        <span style="padding-left: 15px;">新建会话</span>
                    </button>
                </div>
                <!-- <div class="ai_bttton_wrap">
                    <button class="default" @click="dialogHandle('历史记录')">
                        <img class="btn_icon" :src="base64data.aiBG6">
                        <span style="padding-left: 15px;">历史记录</span>
                    </button>
                </div> -->
            </div>
            <div class="textareaBox">
                <div class="textarea_wrap">
                    <textarea v-model="postChatText" @keydown.enter="enterHnadle" placeholder="输入你想了解的内容，Shift + Enter 换行" rows="1"></textarea>
                    <button class="send-btn-disabled" @click="enterHnadle">
                        <img :src="base64data.aiBG7">
                    </button>
                </div>
            </div>
            <div class="ai-tips">内容由 AI 生成，请结合实际情况进行甄别</div>
        </div>

        <!-- 回话底部按钮结束 -->
        <el-drawer direction="btt" size="90%" :style="{ 'background-image': 'url(' + base64data.aiBG10 + ')'}"
            :append-to-body="false" v-model="drawer">
            <template #header="{ close, titleId, titleClass }">
                <h4 :id="titleId" :class="titleClass">历史记录</h4>
                <img class="ai_delete pointer" :src="base64data.aiBG8" alt="">
            </template>
            <div class="ai_history_list">
                <div v-for="o in 10" :key="o">
                    <div class="title">2024-10-16</div>
                    <div class="item-module">
                        <div class="itemBg">
                            <!-- @mouseover="showButton" @mouseleave="hideButton" -->
                            <div class="item" @mouseover="hisItemOver" @mouseleave="hisItemLeave">
                                <div class="item-content">
                                    你是个专业文本润色专家，注重细节，提升文章质量，现在将下面的文本优化一下：
                                </div>
                            </div>
                            <div class="item_close" v-show="hisItemFlag">
                                <img class="item_close_icon" :src="base64data.aiBG9" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-drawer>

    </div>
</template>
<script setup>
    import { onMounted, ref, watch, defineProps } from 'vue'
    import axios from 'axios';
    import aiIcon from '@/assets/images/aiIcon.png' // 默认头像
    import { getToken } from '@/utils/auth'
    import { base64data } from '@/utils/baseUrlData'
    const { proxy } = getCurrentInstance();
    const drawer = ref(false)
    const props = defineProps({
        text: {
            type: String,
            default: ''
        },
    });

    onMounted(() => {
        console.log('onMounted-ai')
        // getSearchDocs()
        modelData.value = quesModelData

        if (props.text) {
            postChatText.value = props.text;
            enterHnadle();
        }
    })

    

    watch(props , (newVal, oldVal) => {
        console.log('watch-ai', newVal, oldVal)
        if (newVal.text) {
            postChatText.value = newVal.text;
            enterHnadle();
        }
    })

    const dialogState = ref('新建会话')
    const tipFlag = ref(false)

    
    // dialogState === '历史记录'
    function dialogHandle(name) {
        console.log(name)
        if (name == '新建会话') {
            if (dialogState.value == '新建会话') {
                proxy.$modal.msgWarning('当前已是最新会话');
            }
            postChatText.value = ''
            chatData.value = []
            dialogState.value = name
        } else if (name === '历史记录') {
            drawer.value = true
        } else if (name === '提示指令'){
            tipFlag.value = true
        } else{
            dialogState.value = name
        }
    }

    function chatModalHandle(value) {
        console.log('chatModalHandle')
        // dialogState.value = '会话中'
        postChatText.value = value
    }
    function tipBgHandle() {
        tipFlag.value = false
    }

    const modelData = ref([])
    const tipState = ref('问题咨询')
    function tipHandle(name) {
        tipState.value = name
        if (name === '问题咨询') {
            modelData.value = quesModelData
        } else if (name === '数据查询') {
            modelData.value = baseModelData
        }
    }
    function modelItemHandle(value) {
        postChatText.value = value

    }

    const postChatText = ref()
    function enterHnadle() {
        if (postChatText.value) {
            dialogState.value = '会话中'
            tipFlag.value = false
            sendChatText(1, postChatText.value)
            
            if (tipState.value === '问题咨询') {
                getSearchDocs()
            } else if (tipState.value === '数据查询') {
                getSearchDb()
            }

            postChatText.value = ''
        }
        
    }

    const hisItemFlag = ref(false)
    function hisItemOver() {
        hisItemFlag.value = true
    }
    function hisItemLeave() {
        hisItemFlag.value = false
    }
    // 滚动核心代码
    function roll() {
        nextTick(() => {
            var msg = document.getElementById('gundong'); // 获取对象
            if (msg) {
                msg.scrollTop = msg.scrollHeight; // 滚动高度
            }
        });
    }
    const chatData = ref([])
    function sendChatText(direction, dataValue) {
        const obj = {
            direction,
            page_content: dataValue
        }
        chatData.value.push(obj)
        
        setTimeout(() => {
            roll();
        }, 200);
    }

    const getChatResultText = ref('')

    function getSearchDb() {
        console.log(postChatText.value)
        const obj = {
            direction:2,
            loadingFlag:true,
            page_content: ''
        }
        chatData.value.push(obj)
        axios({
            method: 'post',
            url: 'http://192.168.1.89:7861/db_base/search_db',
            headers: {
                "Content-Type": 'application/json'
            },
            data: postChatText.value
        }).then(function (response) {
            console.log(response.data)
            if (response.data) {
                const resultText = response.data.analysis
                chatData.value[chatData.value.length-1].loadingFlag = false
                chatData.value[chatData.value.length-1].page_content = resultText
                setTimeout(() => {
                    roll();
                }, 200);
            }
        }).catch(function (error) {
        
        })

        // axios.post('http://192.168.1.89:7861/db_base/search_db', {postChatText.value},
        //     {
        //         headers: {
        //         'Content-Type':'application/json;charset=utf-8',
        //         // responseType: 'stream'
        //         // 'Authorization': 'Bearer ' + getToken()
        //         },
        //     }
        // ).then(function (response) {
        //     console.log(response)
        // }).catch(function (error) {
        //     console.log(error);
        // });
    }

    async function getSearchDocs() {
        let params = {}
        const obj = {
            direction:2,
            loadingFlag:true,
            page_content: getChatResultText.value
        }
        chatData.value.push(obj)
        setTimeout(() => {
            roll();
        }, 200);
        try {
            params = {
                model: 'deepseek-r1:32b',
				messages: [{
					role: 'system',
					content: `你是一位专业的心理咨询师，擅长帮助来访者探索情绪、压力、人际关系等问题。请根据以下用户输入，提供专业、温暖且有针对性的心理咨询建议。如果用户的问题涉及具体心理困扰，请尝试引导用户深入思考，并提供适当的应对策略或情绪调节方法。

用户输入：{用户输入信息}

请根据以下步骤进行回复：
1. **共情与理解**：首先对用户的情绪或困扰表示理解，建立信任感。
2. **问题分析**：分析用户问题的可能根源或核心矛盾。
3. **建议与引导**：提供具体的建议或引导用户思考解决方案。
4. **总结与支持**：总结关键点，并鼓励用户尝试行动或进一步探索。

注意：保持语气温和、专业，避免使用过于绝对的判断或建议，内容尽量言简意赅。`
				}, {
					role: 'user',
					content: postChatText.value,
				}],
				stop: ['stop'],
				stream: true,
            }
            // 发送请求
            // let response = await fetch("http://192.168.1.89:7861/chat/kb_chat",
            const url = import.meta.env.VITE_APP_AI_API || 'https://open.bigmodel.cn/api/paas/v4/chat/completions'
            let response = await fetch(url,
            
                {
                    method: "post",
                    responseType: "stream",
                    headers: {
                        "Content-Type": "application/json",
                        "Authorization": `Bearer ${import.meta.env.VITE_APP_AI_API_KEY}`
                    },
                    body: JSON.stringify(params),
                }
            );
            // // 发送请求
            //     let response = await fetch("https://open.bigmodel.cn/api/paas/v4/chat/completions",
            // // let response = await fetch("http://192.168.1.89:7861/chat/kb_chat",
            //     {
            //         method: "post",
            //         responseType: "stream",
            //         headers: {
            //             "Content-Type": "application/json",
            //             "Authorization": 'Bearer 1711c0bfa059f253fce0921015a44fc8.VZVQz66PrwJ2NqLP',
            //         },
            //         body: JSON.stringify(params),
            //     }
            // );
            // ok字段判断是否成功获取到数据流
            if (!response.ok) {
                throw new Error("Network response was not ok");
            }
            // 用来获取一个可读的流的读取器（Reader）以流的方式处理响应体数据
            const reader = response.body.getReader();
            // 将流中的字节数据解码为文本字符串
            const textDecoder = new TextDecoder();
            let result = true;
            let sqlValue = ''
            
            while (result) {
                // done表示流是否已经完成读取  value包含读取到的数据块
                const { done, value } = await reader.read();
                if (done) {
                    result = false;
                    break;
                }
                // 拿到的value就是后端分段返回的数据，大多是以data:开头的字符串
                // 需要通过decode方法处理数据块，例如转换为文本或进行其他操作
                const chunkText = textDecoder.decode(value).split("\n").forEach((val) => {
                    if (!val) return;
                    try {
                        // 后端返回的流式数据一般都是以data:开头的字符，排除掉data:后就是需要的数据
                        // 具体返回结构可以跟后端约定
                        let text = val?.replace("data:", "") || ""
                        const resultData = JSON.parse(text)
                        let resultText = resultData.choices[0].delta.content
                        // console.log(resultData.choices[0].delta.content, "输出分段返回的数据")
                        chatData.value[chatData.value.length -1].page_content += resultText || ''
                        chatData.value[chatData.value.length-1].loadingFlag = false
                        setTimeout(() => {
                            roll();
                        }, 200);
                    } catch (err) { 
                        // console.log(err)
                    }
                });
            }
            
            console.log(chatData.value, '输出所有返回数据')
            // console.log(getChatResultText.value, '输出所有返回数据')
        } catch (err) { 
            console.log(err)
        }

    }
    const conModelData = [
        // {
        //     icon:'✍️',
        //     title:'标题大师',
        //     content:'请帮我拟定几个合适的标题，我的主题或内容是：'
        // },
        // {
        //     icon:'💬 ',
        //     title:'疾病咨询',
        //     content:'请帮我查询一下，心脏病'
        // },
        
        // {
        //     icon:'🔍',
        //     title:'功能查询',
        //     content:'怎么添加员工？'
        // },
        // {
        //     icon:'📈 ',
        //     title:'工单查询',
        //     content:'帮我查询所有产品线下2024-10-01 到 2024-10-31的工单数据'
        // },
    ]
    
    const quesModelData = [
        {
            title:'标题大师',
            content:'请帮我拟定几个合适的标题，我的主题或内容是：'
        },
        {
            title:'疾病查询',
            content:'请帮我查询一下，心脏病'
        },
        
        {
            title:'故障措施',
            content:'请帮我查询一下，冬季供水防冻的措施'
        },
    ]
    
    const baseModelData = [
        {
            title:'工单查询',
            content:'帮我查询工单数据，手机号为：'
        },
        {
            title:'用户查询',
            content:'帮我查询用户数据，用户手机号为：'
        },
        
        {
            title:'患者查询',
            content:'帮我查询患者数据，手机号为：'
        },
        
        {
            title:'计划查询',
            content:'帮我查询计划数据，关键字：'
        },
        {
            title:'问卷查询',
            content:'帮我查询问卷数据，关键字：'
        },
        
    ]

</script>

<style scoped lang="scss">
    :deep(.el-overlay) {
        position: absolute;
    }

    :deep(.el-drawer) {
        position: absolute;
        width: 100%;
        border-radius: 8px 8px 0px 0px;
        background-color: rgb(248, 251, 255);
        box-shadow: rgba(18, 110, 254, 0.1) 0px 2px 16px 0px;
        margin-top: 60px;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100%;
    }

    :deep(.el-drawer__header) {
        margin-bottom: 0px;
    }

    .aiWrap {
        height: 550px;
        overflow: auto;
        position: relative;
        padding-right: 15px;

        .ai_girl {

            width: 100%;
            padding-top: 136px;

            .ai_content {
                box-sizing: border-box;
                padding: 8px 12px;
                background: rgba(255, 255, 255, 0.8);
                border-radius: 2px 16px 16px;

                .ai_des {
                    font-family: "PingFang SC", "PingFang SC";
                    font-weight: 400;
                    font-size: 14px;
                    color: rgb(29, 33, 41);
                    padding-bottom: 8px;
                    margin-bottom: 8px;
                    line-height: 22px;
                    border-bottom: 1px dashed rgb(240, 240, 240);
                    white-space: normal;
                }

                .ai_tips {
                    font-family: "PingFang SC", "PingFang SC";
                    font-weight: 400;
                    font-size: 12px;
                    color: rgb(134, 144, 156);
                }

                .ai_text {
                    list-style: none;
                    padding: 0px;
                    margin: 8px 0px;

                    .ai_item:hover {
                        border-radius: 8px;
                        background-clip: padding-box, border-box;
                        background-origin: padding-box, border-box;
                        /* background-image: 
                    -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)), 
                    -webkit-gradient(linear, left top, right top, from(#3D8EFF), to(#7835FF)); */
                        background-image: linear-gradient(89deg, rgba(61, 142, 255, 0.16) 5.48%, rgba(120, 53, 255, 0.16) 105.77%);
                        display: -ms-flexbox;
                    }

                    .ai_item {
                        height: 36px;
                        padding: 0px 8px;
                        background: linear-gradient(89deg, rgba(61, 142, 255, 0.06) 5.48%, rgba(120, 53, 255, 0.06) 105.77%);
                        border-radius: 8px;
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        cursor: pointer;
                        margin: 8px 0px;

                        .ai_label {
                            font-family: "PingFang SC", "PingFang SC";
                            font-weight: 500;
                            font-size: 14px;
                            color: rgb(29, 33, 41);
                            line-height: 22px;
                            text-align: left;
                            flex-shrink: 0;
                        }

                        .ai_value {
                            font-family: "PingFang SC", "PingFang SC";
                            font-weight: 400;
                            font-size: 14px;
                            color: rgb(78, 89, 105);
                            margin-left: 8px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
            }
        }

        .ai-conversation {
            .conversation_item {
                display: flex;

                .item_user {
                    display: inline-block;
                    margin-left: auto;
                    width: auto;
                    max-width: 640px;
                    background: linear-gradient(89deg, #3D8EFF 0%, #7835FF 100%);
                    border-radius: 16px 2px 16px 16px;
                    margin-bottom: 24px;
                    overflow: visible;
                    white-space: normal !important;
                    word-break: break-all !important;

                    .aiHtml {
                        white-space: pre-wrap;
                        font-size: 14px;
                        color: #FFFFFF;
                        line-height: 22px;
                        padding: 8px 12px;
                        overflow: visible;
                        white-space: normal !important;
                        word-break: break-all !important;
                        position: relative;
                    }
                }

                .item_ai {
                    margin-right: auto;
                    width: atuo;
                    max-width: 640px;
                    background: #ffffff;
                    border-radius: 2px 16px 16px 16px;
                    margin-bottom: 24px;

                    .aiHtml {
                        white-space: pre-wrap;
                        font-size: 14px;
                        color: #1D2129;
                        line-height: 22px;
                        padding: 8px 12px;
                        overflow: hidden;
                        /* white-space: normal !important;
                    word-break: break-all !important; */
                    }

                    .tools-wrap {
                        position: relative;

                        .item-ai-tools {
                            display: flex;
                            -ms-flex-align: center;
                            align-items: center;
                            -ms-flex-pack: justify;
                            justify-content: space-between;
                            height: 20px;
                            margin-bottom: 8px;
                            font-family: PingFang SC, PingFang SC;
                            font-weight: 400;
                            font-size: 12px;
                            color: #86909C;
                            padding: 0 12px;

                            .tools-left {
                                display: flex;
                                -ms-flex-align: center;
                                align-items: center;
                                -ms-flex-pack: center;
                                justify-content: center;

                                .tool {
                                    display: flex;
                                    padding: 0 4px;
                                    height: 20px;
                                }
                            }

                            .tools-right {
                                margin-left: 12px;
                                display: flex;

                                .pointer {
                                    position: relative;
                                    width: 20px;
                                    height: 20px;
                                    border-radius: 4px;
                                }
                            }
                        }
                    }
                }
            }
        }

    }

    .tip_bg {

        width: 100%;
        height: 600px;
        top: 0;
        position: absolute;
        z-index: 1;
    }

    .tip_dialog {

        position: absolute;
        bottom: 69px;
        left: 16px;
        min-height: 400px;
        width: calc(100% - 32px);
        box-sizing: border-box;
        padding: 12px 8px 8px;
        background: linear-gradient(89deg, rgba(61, 142, 255, 0.4), rgba(120, 53, 255, 0.4)), rgb(255, 255, 255);
        box-shadow: rgba(18, 110, 254, 0.2) 0px 2px 16px 0px;
        border-radius: 8px;
        z-index: 2;

        .bottomItem {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            gap: 8px;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin-bottom: 8px;

            .ai_bttton_wrap {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: center;
                align-items: center;
                gap: 8px;

                .primary {
                    background: linear-gradient(89deg, #3D8EFF 0%, #7835FF 100%);
                    color: #fff;
                    position: relative;

                    .btn_icon {
                        position: absolute;
                        top: 6px;
                        left: 5px;
                        width: 16px;
                        height: 16px;
                        margin-right: 2px;
                    }

                }

                .default {
                    position: relative;

                    .btn_icon {
                        position: absolute;
                        top: 6px;
                        left: 5px;
                        width: 16px;
                        height: 16px;
                        margin-right: 2px;
                    }
                }

                button {
                    margin: 0;
                    padding: 0;
                    border: 0;
                    outline: 0;
                    background: none;
                    cursor: pointer;
                    padding: 5px 10px;
                    background: rgba(255, 255, 255, 0.6);
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    color: #000;
                    border-radius: 8px;
                }
            }
        }

        .ai_content_scroll {
            margin-top: 8px;
            padding-right: 10px;
            box-sizing: border-box;
            overflow: auto;
            width: 100%;
            max-height: 340px;

            .scroll_ele {
                list-style: none;
                padding: 0px;
                margin: 8px 0px;

                .ai_item {
                    box-sizing: border-box;
                    height: 62px;
                    padding: 10px 12px;
                    background: rgba(255, 255, 255, 0.7);
                    border-radius: 8px;
                    border: 1.5px solid transparent;
                    cursor: pointer;
                    margin: 8px 0px;

                    .ai_label {
                        font-family: "PingFang SC", "PingFang SC";
                        font-weight: 500;
                        font-size: 14px;
                        color: rgb(29, 33, 41);
                        line-height: 22px;
                        text-align: left;
                    }

                    .ai_value {
                        font-family: "PingFang SC", "PingFang SC";
                        font-weight: 400;
                        font-size: 12px;
                        color: rgb(134, 144, 156);
                        line-height: 20px;
                        text-align: left;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }

                .ai_item:hover {
                    border: 1.5px solid transparent;
                    background-clip: padding-box, border-box;
                    background-origin: padding-box, border-box;
                    background-image: -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)), -webkit-gradient(linear, left top, right top, from(#3D8EFF), to(#7835FF));
                    background-image: linear-gradient(to right, #fff, #fff), linear-gradient(90deg, #3D8EFF, #7835FF);
                    display: -ms-flexbox;
                }
            }
        }
    }

    .sc-ai-dialog {
        position: absolute;
        bottom: 24px;
        bottom: 0px;
        left: 16px;
        right: 16px;

        .bottomItem {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            gap: 8px;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin-bottom: 8px;

            .ai_bttton_wrap {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: center;
                align-items: center;
                gap: 8px;

                .primary {
                    background: linear-gradient(89deg, #3D8EFF 0%, #7835FF 100%);
                    color: #fff;
                    position: relative;

                    .btn_icon {
                        position: absolute;
                        top: 6px;
                        left: 5px;
                        width: 16px;
                        height: 16px;
                        margin-right: 2px;
                    }

                }

                .default {
                    position: relative;

                    .btn_icon {
                        position: absolute;
                        top: 6px;
                        left: 5px;
                        width: 16px;
                        height: 16px;
                        margin-right: 2px;
                    }
                }

                button {
                    margin: 0;
                    padding: 0;
                    border: 0;
                    outline: 0;
                    background: none;
                    cursor: pointer;
                    padding: 5px 10px;
                    background: rgba(255, 255, 255, 0.6);
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    color: #000;
                    border-radius: 8px;
                }
            }
        }

        .textareaBox {
            .textarea_wrap {
                padding: 4.5px;
                border: 1.5px solid transparent;
                border-radius: 12px;
                background-clip: padding-box, border-box;
                background-origin: padding-box, border-box;
                background-image: -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)), -webkit-gradient(linear, left top, right top, from(#3D8EFF), to(#7835FF));
                background-image: linear-gradient(to right, #fff, #fff), linear-gradient(90deg, #3D8EFF, #7835FF);
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: center;
                align-items: center;
                -ms-flex-pack: justify;
                justify-content: space-between;

                textarea {
                    margin: 0;
                    padding: 0;
                    border: 0;
                    outline: 0;
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    color: #1D2129;
                    background: none;
                    resize: none;
                    width: 100%;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    line-height: 1.5;
                    -webkit-transition: height 0.3s;
                    transition: height 0.3s;

                }

                .send-btn-disabled {
                    /* pointer-events: none; */
                    /* cursor: default; */
                    opacity: 0.5;
                    /* pointer-events: auto !important;
                    cursor: not-allowed !important; */
                }

                button {
                    -ms-flex-item-align: end;
                    align-self: flex-end;
                    width: 40px;
                    height: 28px;
                    background: linear-gradient(89deg, #3DADFF 0%, #7835FF 100%);
                    border-radius: 8px 8px 8px 8px;
                    border: none;
                    cursor: pointer;

                    img {
                        margin-top: 4px;
                        width: 16px;
                        height: 18px;
                    }
                }
            }
        }

        .ai-tips {
            height: 24px;
            width: 100%;
            font-size: 12px;
            color: #A9AEB8;
            line-height: 24px;
            text-align: center;
        }
    }

    .ai_history_list {
        display: flex;
        flex-direction: column;
        padding-left: 16px;
        padding-right: 16px;
        margin-top: 16px;
        width: 100%;
        height: calc(100% - 70px);
        box-sizing: border-box;
        overflow: auto;

        .title {
            font-size: 12px;
            color: rgb(134, 144, 156);
            line-height: 20px;
        }

        .item-module {
            margin-bottom: 24px;

            .itemBg {
                position: relative;
                cursor: pointer;
                border-radius: 8px;

                .item {
                    margin-top: 7px;
                    background: linear-gradient(89deg, rgba(61, 142, 255, 0.06) 5.48%, rgba(120, 53, 255, 0.06) 105.77%);
                    border-radius: 8px;

                    .item-content {
                        padding: 12px;
                        font-size: 14px;
                        color: rgb(29, 33, 41);
                        line-height: 22px;
                        line-break: anywhere;
                        white-space: normal !important;
                        word-break: break-all !important;
                    }
                }

                .item:hover {
                    background: linear-gradient(89deg, rgba(61, 142, 255, 0.16) 5.48%, rgba(120, 53, 255, 0.16) 105.77%);
                    border-radius: 8px;
                }

                .item_close {
                    position: absolute;
                    right: 0px;
                    top: 0px;
                    width: 16px;
                    height: 16px;
                    background: rgba(0, 0, 0, 0.4);
                    border-radius: 0px 8px;
                    /* display: none; */
                    cursor: pointer;
                    z-index: 1008;

                    .item_close_icon {
                        display: flex;
                        margin: 2px;
                        width: 12px;
                        height: 12px;
                    }
                }
            }
        }
    }
</style>