<template>
    <div>
        <div class="aiWrap" 
        :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">
                            <span class="ai_label">✍️ 内容创作</span>
                            <span class="ai_value">你是个内容创作大师，需要以中秋为主题创作一段推广文案，字数100左右</span>
                        </div>
                        <div class="ai_item">
                            <span class="ai_label">💬 产品咨询</span>
                            <span class="ai_value">产品线应该怎么配置？</span>
                        </div>
                        <div class="ai_item">
                            <span class="ai_label">🔍 功能查询</span>
                            <span class="ai_value">怎么添加员工？</span>
                        </div>
                        <div class="ai_item" v-for="o in 1" :key="o">
                            <span class="ai_label">📈 业绩查询</span>
                            <span class="ai_value">帮我查询所有产品线下2024-10-09 到 2024-10-15的订单业绩</span>
                        </div>
                        
                    </div>
                </div>
            </div>
            <!-- 新会话结束 -->
            
            <!-- 会话中 -->
            <div class="ai-conversation" v-show="dialogState == '会话中' ">
                <div class="conversation_item" v-for="o in 1" :key="o">
                    <div class="item_user">
                        <div class="aiHtml">111</div>
                    </div>
                </div>
                <div class="conversation_item" v-for="o in 1" :key="o">
                    <div class="item_ai">
                        <div class="aiHtml">
                            非常抱歉，但您只输入了一个数字“2”，这并没有给我足够的信
                            息来回答您的问题。如果您是关于库课云系统的具体功能、使用
                            方法、常见问题或其他任何方面的疑问，请提供更详细的信息或
                            问题，以便我能够给出准确的解答。
                        </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 class="tip_bg" v-show="dialogState == '提示指令' " @click="tipBgHandle"></div>
        <div class="tip_dialog" v-show="dialogState == '提示指令' ">
            <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">
                        <div class="ai_label">标题大师</div>
                        <div class="ai_value">请帮我拟定几个合适的标题，我的主题或内容是：</div>
                    </div>
                    <div class="ai_item">
                        <div class="ai_label">内容创作</div>
                        <div class="ai_value">你是个内容创作大师，需要以中秋为主题创作一段推广文案，字数100左右</div>
                    </div>
                    <div class="ai_item">
                        <div class="ai_label">文本润色</div>
                        <div class="ai_value">请帮我拟定几个合适的标题，我的主题或内容是：</div>
                    </div>
                    <div class="ai_item" v-for="o in 10" :key="o">
                        <div class="ai_label">文本提炼</div>
                        <div class="ai_value">你是个内容概括专家，擅长文本提炼的核心信息，现在将下面的内容概括核心：</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 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} from 'vue'
    import aiIcon from '@/assets/images/aiIcon.png' // 默认头像
    import { base64data } from '@/utils/baseUrlData'
    const { proxy } = getCurrentInstance();
    const drawer= ref(false)
    onMounted(()=>{})

    const dialogState =ref('新建会话')
    // dialogState === '历史记录'
    function dialogHandle(name) {
        console.log(name)
        if(name == '新建会话'){
            if (dialogState.value == '新建会话' ) {
                proxy.$modal.msgWarning('当前已是最新会话');
            }
            dialogState.value = name
        } else if(name === '历史记录'){
            drawer.value = true
        } else{
            dialogState.value = name
        }
    }
    function chatModalHandle() {
        console.log('chatModalHandle')
        dialogState.value = '会话中'
    }
    function tipBgHandle(){
        dialogState.value = '新建会话' 
    }
    const tipState = ref('内容创作')
    function tipHandle(name) {
        tipState.value = name
    }
    function enterHnadle() {
        dialogState.value = '会话中'
    }

    const hisItemFlag =ref(false)
    function hisItemOver() {
        hisItemFlag.value = true
    }
    function hisItemLeave() {
        hisItemFlag.value = false
    }


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