sulibao-mini/components/agent-ui/index.vue

<template>
    <!-- agent ui 组件根容器 -->
    <view class="agent-ui">
        <view class="navBar" v-if="chatMode === 'bot'">
            <view class="nav-content">
                <!-- <image src="{{bot.avatar}}" mode="aspectFill" class="bot-avatar"/> -->
                <text class="bot-name">{{ bot.name }}</text>
            </view>
        </view>
        <!-- 聊天对话区 -->
        <scroll-view
            @wheel="onWheel"
            :enhanced="true"
            @scroll="onScroll"
            @dragstart="handleScrollStart"
            class="main"
            :style="'height: ' + (windowInfo.windowHeight - footerHeight - (chatMode === 'bot' ? 45 : 0)) + 'px;'"
            :scroll-y="true"
            :scroll-top="viewTop"
            :scroll-into-view="scrollTo"
            lower-threshold="1"
            @scrolltolower="handleScrollToLower"
            :show-scrollbar="false"
            :refresher-enabled="showPullRefresh"
            :refresher-threshold="80"
            @refresherrefresh="handelRefresh"
            :refresher-triggered="triggered"
            :bounces="false"
        >
            <view v-if="chatMode === 'bot' && showPullRefresh" class="tips">
                {{ refreshText }}
            </view>
            <view v-if="chatMode === 'model'" class="nav">
                <image :src="bot.avatar || modelConfig.logo" mode="aspectFill" class="avatar" />
                <view style="line-height: 47px; font-size: 20px; font-weight: 500">{{ chatMode === 'bot' ? bot.name : modelConfig.modelProvider }}</view>
                <view style="line-height: 26px; padding: 0px 16px; font-size: 32rpx">{{ chatMode === 'bot' ? '' : modelConfig.welcomeMsg }}</view>
            </view>
            <block v-for="(item, index) in chatRecords" :key="index">
                <!-- 系统聊天 -->

                <view class="system" :style="'padding-left: ' + (showBotAvatar ? 100 : 0) + 'rpx;'" v-if="item.role === 'assistant'">
                    <view class="avatar-left" v-if="showBotAvatar">
                        <image :src="chatMode === 'bot' ? bot.avatar : modelConfig.logo" mode="aspectFill" style="width: 90rpx; height: 90rpx; border-radius: 28rpx" />
                    </view>
                    <view>
                        <!-- 最后一条消息，并且是发送状态显示发送中 -->
                        <block v-if="chatRecords.length - 1 === index && chatStatus === 1">
                            <view style="display: flex; align-items: center; gap: 4px; font-size: 32rpx; line-height: 1.8">
                                <image src="/static/components/agent-ui/imgs/loading.svg" mode="aspectFill" style="width: 14px; height: 14px" />
                                请稍等，正在卖力思考中 🤔
                            </view>
                        </block>
                        <block v-else>
                            <!-- 联网搜索 -->
                            <FoldedCard v-if="item.search_info" :initStatus="false" :showBgColor="true">
                                <view slot="title" style="opacity: 0.7; font-size: 14px; display: flex; align-items: center; gap: 8px">
                                    <image src="/static/components/agent-ui/imgs/search.svg" mode="aspectFill" style="width: 36rpx; height: 36rpx" />
                                    <text>已参考 {{ item.search_info.search_results.length }} 个网页</text>
                                </view>
                                <view slot="content" class="link-box">
                                    <block v-for="(itemz, index1) in item.search_info.search_results" :key="index1">
                                        <view
                                            @tap="copyUrl"
                                            :data-url="itemz.url"
                                            style="
                                                margin-bottom: 3px;
                                                font-size: 14px;
                                                color: rgb(0, 82, 217);
                                                line-height: 24px;
                                                white-space: nowrap;
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                            "
                                        >
                                            {{ index1 + 1 }}.{{ itemz.title }}
                                        </view>
                                    </block>
                                </view>
                            </FoldedCard>
                            <!-- 知识库 -->
                            <view
                                v-if="item.knowledge_base && item.knowledge_base.length"
                                style="
                                    border-radius: 8px;
                                    margin-bottom: 12px;
                                    background-color: #f5f5f5;
                                    padding: 18rpx 26rpx;
                                    display: inline-block;
                                    opacity: 0.7;
                                    font-size: 14px;
                                "
                            >
                                已参考 {{ item.knowledge_base.length }} 个知识库
                            </view>
                            <!-- 推理过程 -->
                            <FoldedCard v-if="!!item.reasoning_content" :initStatus="true" :showBgColor="false">
                                <view slot="title" style="opacity: 0.7; font-size: 14px; display: flex; align-items: center; gap: 8px">
                                    <image src="/static/components/agent-ui/imgs/system-sum.svg" mode="aspectFill" style="width: 36rpx; height: 36rpx" />
                                    <block v-if="item.pauseThinking">已停止思考</block>
                                    <block v-else>
                                        <text>{{ item.reasoning_content && !item.content ? '思考中...' : '已深度思考（用时' + item.thinkingTime + '秒）' }}</text>
                                    </block>
                                </view>
                                <view style="padding-left: 25rpx; margin-top: 28rpx; border-left: rgb(165, 164, 164) solid 2px; opacity: 0.7" slot="content">
                                    <markdownPreview :markdown="item.reasoning_content || ''" :fontSize="28"></markdownPreview>
                                </view>
                            </FoldedCard>
                            <markdownPreview :markdown="item.content || ''"></markdownPreview>
                            <!-- 下面的按钮 -->
                            <view style="display: flex; gap: 10px; justify-content: flex" v-if="!item.hiddenBtnGround">
                                <image
                                    mode="widthFix"
                                    @tap="copyChatRecord"
                                    src="/static/components/agent-ui/imgs/copy.svg"
                                    style="width: 36rpx; height: 36rpx"
                                    :data-content="item.content"
                                />
                                <button class="share_btn" open-type="share">
                                    <image mode="widthFix" src="/static/components/agent-ui/imgs/share.svg" style="width: 36rpx; height: 36rpx; vertical-align: top" @tap="share" />
                                </button>
                                <block v-if="chatMode === 'bot'">
                                    <image
                                        mode="widthFix"
                                        @tap="openFeedback"
                                        data-feedbackType="upvote"
                                        :data-feedbackRecordId="item.record_id"
                                        src="/static/components/agent-ui/imgs/thumb-up.svg"
                                        style="width: 36rpx; height: 36rpx"
                                    />
                                    <image
                                        mode="widthFix"
                                        @tap="openFeedback"
                                        data-feedbackType="downvote"
                                        :data-feedbackRecordId="item.record_id"
                                        src="/static/components/agent-ui/imgs/thumb-down.svg"
                                        style="width: 36rpx; height: 36rpx"
                                    />
                                </block>
                            </view>
                        </block>
                    </view>
                </view>

                <!-- 用户输入 -->

                <view class="userContent" v-if="item.role === 'user'">
                    <view class="user" :style="'padding-left: ' + (showBotAvatar ? 80 : 0) + 'rpx;'">
                        <view class="user_content">
                            {{ item.content }}
                        </view>
                    </view>
                    <view class="fileBar">
                        <chatFile
                            :enableDel="false"
                            :fileData="innerItem"
                            @removeChild="handleRemoveChild"
                            @changeChild="handleChangeChild"
                            v-for="(innerItem, index1) in item.fileList"
                            :key="index1"
                        ></chatFile>
                    </view>
                </view>
            </block>
            <!-- 推荐问题 -->
            <block v-for="(item, index) in questions" :key="index">
                <view class="questions" :style="'padding-left: ' + (showBotAvatar ? 80 : 0) + 'rpx;'">
                    <view class="question_content" @tap="handleSendMessage" :data-message="item">{{ item }}</view>
                </view>
            </block>
            <view id="scroll-bottom" style="width: 100%; height: 20px"></view>
        </scroll-view>
        <!-- 底部输入区 -->
        <view class="footer">
            <view class="feature_list" v-if="showFeatureList">
                <view @tap="handleClickWebSearch" :class="'webSearchSwitch ' + (useWebSearch ? 'feature_enable' : '')">
                    <image :src="useWebSearch ? '/static/components/agent-ui/imgs/internetUse.svg' : '/static/components/agent-ui/imgs/internet.svg'" mode="" style="width: 40rpx; height: 30px; margin-right: 10rpx" />
                    <text>联网搜索</text>
                </view>
            </view>
            <view class="file_list" v-if="showFileList">
                <chatFile
                    :enableDel="true"
                    :fileData="item"
                    @removeChild="handleRemoveChild"
                    @changeChild="handleChangeChild"
                    v-for="(item, index) in sendFileList"
                    :key="index"
                ></chatFile>
            </view>
            <view class="foot_function">
                <!-- <scroll-view class="img-box" scroll-x="true" wx:if="{{!!imageList.length}}">
        <block wx:for="{{imageList}}" wx:key="tempFilePath">
          <view class="img-preview">
            <image src="{{item.tempFilePath}}" alt="" model='aspectFill' class="img-preview-image" />
            <view class="img-preview-loading" wx:if="{{!!!item.base64Url}}"></view>
            <image src="./imgs/close.svg" mode="aspectFill" class="img-preview-close" bind:tap="deleteImg" data-index="{{index}}" />
          </view>
        </block>
      </scroll-view> -->

                <view class="input_box">
                    <view class="input_inner_box">
                        <textarea
                            class="input"
                            :value="inputValue"
                            maxlength="1024"
                            @focus="bindInputFocus"
                            @input="bindKeyInput"
                            placeholder="说点什么吧"
                            @confirm="sendMessage"
                            confirm-type="send"
                            adjust-position
                            cursor-spacing="40"
                            :auto-height="true"
                            :show-confirm-bar="false"
                            @linechange="handleLineChange"
                        />
                    </view>
                    <view class="right_btns">
                        <!-- 加号 -->
                        <image src="/static/components/agent-ui/imgs/set.svg" class="set" mode="widthFix" @tap="handleClickTools" />
                        <!-- 发送按钮 -->
                        <image
                            src="/static/components/agent-ui/imgs/send.svg"
                            class="set"
                            mode="widthFix"
                            v-if="!!inputValue && chatStatus === 0"
                            @tap="sendMessage"
                            style="transform: rotate(-40deg); transform-origin: 8px 8px"
                        />
                        <!-- 暂停按钮 -->
                        <image src="/static/components/agent-ui/imgs/stop.svg" class="set" mode="widthFix" v-if="!(chatStatus === 0)" @tap="stop" />
                    </view>
                </view>
            </view>
            <!-- 底部工具栏 -->
            <view class="tool_box" v-if="showTools">
                <view class="function" @tap="clearChatRecords">
                    <image src="/static/components/agent-ui/imgs/clear.svg" alt="widthFix" class="icon" />
                    <text class="text_desc">清除</text>
                </view>
                <view v-if="showUploadImg && chatMode === 'bot'" class="function" @tap="handleAlbum">
                    <image src="/static/components/agent-ui/imgs/uploadImg.svg" alt="widthFix" class="icon" />
                    <text class="text_desc">图片</text>
                </view>
                <view v-if="showUploadFile && chatMode === 'bot'" class="function" @tap="handleUploadMessageFile">
                    <image src="/static/components/agent-ui/imgs/wechat.svg" alt="widthFix" class="icon" />
                    <text class="text_desc">微信文件</text>
                </view>
                <view v-if="showUploadImg && chatMode === 'bot'" class="function" @tap="handleCamera">
                    <image src="/static/components/agent-ui/imgs/camera.svg" alt="widthFix" class="icon" />
                    <text class="text_desc">相机</text>
                </view>
            </view>
        </view>
        <image
            @tap="autoToBottom"
            v-if="manualScroll"
            style="width: 35px; height: 35px; border-radius: 50px; position: absolute; bottom: 150px; right: 20px; padding: 5px; background-color: white"
            src="/static/components/agent-ui/imgs/toBottom.svg"
            mode="aspectFit"
            @error=""
            @load=""
        />
        <feedback
            :input="input"
            :aiAnswer="aiAnswer"
            :isShowFeedback="isShowFeedback"
            @close="closefeedback"
            :feedbackRecordId="feedbackRecordId"
            :feedbackType="feedbackType"
            :botId="bot.botId"
        ></feedback>
    </view>
</template>

<script>
import markdownPreview from '@/components/agent-ui/wd-markdown/index';
import FoldedCard from '@/components/agent-ui/collapse/index';
import chatFile from '@/components/agent-ui/chatFile/index';
import feedback from '@/components/agent-ui/feedback/index';
// components/agent-ui/index.js
import { checkConfig, randomSelectInitquestion } from './tools';
import md5 from './md5.js';
export default {
    components: {
        markdownPreview,
        FoldedCard,
        chatFile,
        feedback
    },
    data() {
        return {
            isLoading: true,

            // 判断是否尚在加载中
            article: {},

            windowInfo: uni.getWindowInfo(),

            bot: {
                name: '',
                avatar: '',
                botId: ''
            },

            inputValue: '',
            output: '',
            chatRecords: [],
            scrollTop: 0,
            setPanelVisibility: false,
            questions: [],
            scrollTop: 0,
            scrollTop: 0,

            // 文字撑起来后能滚动的最大高度
            viewTop: 0,

            // 根据实际情况，可能用户手动滚动，需要记录当前滚动的位置
            scrollTo: '',

            // 快速定位到指定元素，置底用
            scrollTimer: null,

            //
            manualScroll: false,

            // 当前为手动滚动/自动滚动
            showTools: false,

            // 展示底部工具栏
            showFileList: false,

            // 展示输入框顶部文件行
            showTopBar: false,

            // 展示顶部bar
            sendFileList: [],

            footerHeight: 73,
            lastScrollTop: 0,
            showUploadFile: true,
            showUploadImg: false,
            showWebSearchSwitch: false,
            showPullRefresh: true,
            useWebSearch: false,
            showFeatureList: false,
            chatStatus: 0,

            // 页面状态： 0-正常状态，可输入，可发送， 1-发送中 2-思考中 3-输出content中
            triggered: false,

            page: 1,
            size: 10,
            total: 0,
            refreshText: '下拉加载历史记录',
            contentHeightInScrollViewTop: 0,

            // scroll区域顶部固定区域高度
            shouldAddScrollTop: false,

            isShowFeedback: false,
            feedbackRecordId: '',
            feedbackType: '',
            textareaHeight: 50,
            curLineCount: 1,
            aiAnswer: '',
            input: '',
            innerItem: ''
        };
    },
    props: {
        chatMode: {
            type: String,
            default: ''
        },
        showBotAvatar: {
            type: Boolean,
            default: false
        },
        presentationMode: {
            type: String,
            default: ''
        },
        agentConfig: {
            type: Object,
            default: () => ({
                botId: String,
                allowUploadFile: Boolean,
                allowWebSearch: Boolean,

                // allowUploadImage: Boolean,
                allowPullRefresh: Boolean
            })
        },

        modelConfig: {
            type: Object,
            default: () => ({
                modelProvider: String,
                quickResponseModel: String,

                // deepReasoningModel: String, // 待支持
                logo: String,

                welcomeMsg: String
            })
        }
    },
    watch: {
        showWebSearchSwitch: function (showWebSearchSwitch) {
            this.setData({
                showFeatureList: showWebSearchSwitch
            });
        },
        showTools: function (isShow) {
            // console.log('showTools', isShow)
            if (isShow) {
                this.setData({
                    footerHeight: this.footerHeight + 80
                });
            } else {
                this.setData({
                    footerHeight: this.footerHeight - 80
                });
            }
        },
        showFileList: function (isShow) {
            console.log('showFileList', isShow);
            if (isShow) {
                this.setData({
                    footerHeight: this.footerHeight + 80
                });
            } else {
                this.setData({
                    footerHeight: this.footerHeight - 80
                });
            }
        },
        showFeatureList: function (isShow) {
            console.log('showFeatureList', isShow);
            if (isShow) {
                this.setData({
                    footerHeight: this.footerHeight + 30
                });
            } else {
                const subHeight = this.footerHeight - 30;
                this.setData({
                    footerHeight: subHeight >= 80 ? subHeight : 80
                });
            }
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached: async function () {
            const chatMode = this.chatMode;
            // 检查配置
            const [check, message] = checkConfig(chatMode, this.agentConfig, this.modelConfig);
            if (!check) {
                uni.showModal({
                    title: '提示',
                    content: message
                });
                return;
            }
            if (chatMode === 'bot') {
                const { botId } = this.agentConfig;
                const ai = wx.cloud.extend.AI;
                const bot = await ai.bot.get({
                    botId
                });
                // 新增错误提示
                if (bot.code) {
                    uni.showModal({
                        title: '提示',
                        content: bot.message
                    });
                    return;
                }

                // 初始化第一条记录为welcomeMessage
                const record = {
                    content: bot.welcomeMessage,
                    record_id: 'record_id' + String(+new Date() + 10),
                    role: 'assistant',
                    hiddenBtnGround: true
                };
                const { chatRecords } = this;
                // 随机选取三个初始化问题
                const questions = randomSelectInitquestion(bot.initQuestions, 3);
                let { allowWebSearch, allowUploadFile, allowPullRefresh } = this.agentConfig;
                console.log('allowWebSearch', allowWebSearch);
                allowWebSearch = allowWebSearch === undefined ? true : allowWebSearch;
                allowUploadFile = allowUploadFile === undefined ? true : allowUploadFile;
                allowPullRefresh = allowPullRefresh === undefined ? true : allowPullRefresh;
                console.log('allowUploadFile', allowUploadFile);
				console.error(chatRecords);
                this.setData({
                    bot,
                    questions,
                    chatRecords: [...chatRecords, record],
                    showWebSearchSwitch: !!(bot.searchEnable && allowWebSearch),
                    showUploadFile: allowUploadFile,
                    showPullRefresh: allowPullRefresh
                });
            }
            const topHeight = await this.calculateContentInTop();
            // console.log('topHeight', topHeight)
            this.setData({
                contentHeightInScrollViewTop: topHeight
            });
        },

        handleLineChange: function (e) {
            console.log('linechange', e.detail.lineCount);
            // 查foot-function height
            const that = this;
            const query = uni.createSelectorQuery().in(this);
            query
                .select('.foot_function')
                .boundingClientRect(function (res) {
                    if (res) {
                        if (res.height < that.textareaHeight) {
                            that.setData({
                                footerHeight: that.footerHeight - (that.textareaHeight - res.height)
                            });
                        }
                        if (res.height > that.textareaHeight) {
                            that.setData({
                                footerHeight: that.footerHeight + (res.height - that.textareaHeight)
                            });
                        }
                        that.setData({
                            textareaHeight: res.height
                        });
                    } else {
                        console.log('未找到指定元素');
                    }
                })
                .exec();
        },

        openFeedback: function (e) {
            const { feedbackrecordid, feedbacktype } = e.currentTarget.dataset;
            let index = null;
            this.chatRecords.forEach((item, _index) => {
                if (item.record_id === feedbackrecordid) {
                    index = _index;
                }
            });
            const inputRecord = this.chatRecords[index - 1];
            const answerRecord = this.chatRecords[index];
            // console.log(record)
            this.setData({
                isShowFeedback: true,
                feedbackRecordId: feedbackrecordid,
                feedbackType: feedbacktype,
                aiAnswer: answerRecord.content,
                input: inputRecord.content
            });
        },

        closefeedback: function () {
            this.setData({
                isShowFeedback: false,
                feedbackRecordId: '',
                feedbackType: ''
            });
        },

        // 滚动相关处理
        calculateContentHeight() {
            return new Promise((resolve) => {
                const query = uni.createSelectorQuery().in(this);
                query
                    .selectAll('.main >>> .system, .main >>> .userContent')
                    .boundingClientRect((rects) => {
                        let totalHeight = 0;
                        rects.forEach((rect) => {
                            totalHeight += rect.height;
                        });
                        resolve(totalHeight);
                    })
                    .exec();
            });
        },

        calculateContentInTop() {
            // console.log('执行top 部分计算')
            return new Promise((resolve) => {
                const query = uni.createSelectorQuery().in(this);
                query
                    .selectAll('.main >>> .nav, .main >>> .tips')
                    .boundingClientRect((rects) => {
                        let totalHeight = 0;
                        rects.forEach((rect) => {
                            totalHeight += rect.height;
                        });
                        // console.log('top height', totalHeight);
                        resolve(totalHeight);
                    })
                    .exec();
            });
        },

        onWheel: function (e) {
            // 解决小程序开发工具中滑动
            if (!this.manualScroll && e.detail.deltaY < 0) {
                this.setData({
                    manualScroll: true
                });
            }
        },

        onScroll: function (e) {
            if (e.detail.scrollTop < this.lastScrollTop) {
                // 鸿蒙系统上可能滚动事件，拖动事件失效，兜底处理
                this.setData({
                    manualScroll: true
                });
            }
            this.setData({
                lastScrollTop: e.detail.scrollTop
            });

            // 针对连续滚动的最后一次进行处理，scroll-view的 scroll end事件不好判定
            if (this.scrollTimer) {
                clearTimeout(this.scrollTimer);
            }
            this.setData({
                scrollTimer: setTimeout(() => {
                    const newTop = Math.max(this.scrollTop, e.detail.scrollTop);
                    if (this.manualScroll) {
                        this.setData({
                            scrollTop: newTop
                        });
                    } else {
                        this.setData({
                            scrollTop: newTop,
                            viewTop: newTop
                        });
                    }
                }, 100)
            });
        },

        handleScrollStart: function (e) {
            // console.log("drag start", e);
            if (e.detail.scrollTop > 0 && !this.manualScroll) {
                // 手动开始滚
                this.setData({
                    manualScroll: true
                });
            }
        },

        handleScrollToLower: function (e) {
            // console.log("scroll to lower", e);
            // 到底转自动
            this.setData({
                manualScroll: false
            });
        },

        autoToBottom: function () {
            // console.log("autoToBottom");
            this.setData({
                manualScroll: false,
                scrollTo: 'scroll-bottom'
            });
            // console.log('scrollTop', this.data.scrollTop);
        },

        bindInputFocus: function (e) {
            this.setData({
                manualScroll: false
            });
            this.autoToBottom();
        },

        bindKeyInput: function (e) {
            this.setData({
                inputValue: e.detail.value
            });
        },

        handelRefresh: function (e) {
            this.setData(
                {
                    triggered: true,
                    refreshText: '刷新中'
                },
                async () => {
                    // 模拟请求回数据后 停止加载
                    // console.log('this.data.agentConfig.type', this.data.agentConfig.type)
                    if (this.chatMode === 'bot') {
                        // 判断当前是否大于一条 （一条则为系统默认提示，直接从库里拉出最近的一页）
                        if (this.chatRecords.length > 1) {
                            const newPage = Math.floor(this.chatRecords.length / this.size) + 1;
                            this.setData({
                                page: newPage
                            });
                        }
                        const res = await wx.cloud.extend.AI.bot.getChatRecords({
                            botId: this.agentConfig.botId,
                            pageNumber: this.page,
                            pageSize: this.size,
                            sort: 'desc'
                        });
                        if (res.recordList) {
                            this.setData({
                                total: res.total
                            });

                            // 找出新获取的一页中，不在内存中的数据
                            const freshNum = this.size - ((this.chatRecords.length - 1) % this.size);
                            const freshChatRecords = res.recordList
                                .reverse()
                                .slice(0, freshNum)
                                .map((item) => ({
                                    ...item,
                                    record_id: item.recordId
                                }));
                            this.setData({
                                chatRecords: [...freshChatRecords, ...this.chatRecords]
                            });
                            console.log('totalChatRecords', this.chatRecords);
                        }
                        this.setData({
                            triggered: false,
                            refreshText: '下拉加载历史记录'
                        });
                    }
                }
            );
        },

        clearChatRecords: function () {
            const chatMode = this.chatMode;
            const { bot } = this;
            this.setData({
                showTools: false
            });
            if (chatMode === 'model') {
                this.setData({
                    chatRecords: [],
                    chatStatus: 0
                });
                return;
            }
            // 只有一条不需要清
            if (this.chatRecords.length === 1) {
                return;
            }
            const record = {
                content: bot.welcomeMessage,
                record_id: 'record_id' + String(+new Date() + 10),
                role: 'assistant',
                hiddenBtnGround: true
            };
            const questions = randomSelectInitquestion(bot.initQuestions, 3);
            this.setData({
                chatRecords: [record],
                chatStatus: 0,
                questions,
                page: 1 // 重置分页页码
            });
        },

        chooseMedia: function (sourceType) {
            const that = this;
            uni.chooseMedia({
                count: 1,
                mediaType: ['image'],
                sourceType: [sourceType],
                maxDuration: 30,
                camera: 'back',
                success(res) {
                    console.log('res', res);
                    console.log('tempFiles', res.tempFiles);
                    const isImageSizeValid = res.tempFiles.every((item) => item.size <= 31457280);
                    if (!isImageSizeValid) {
                        uni.showToast({
                            title: '图片大小30M限制',
                            icon: 'error'
                        });
                        return;
                    }
                    const tempFiles = res.tempFiles.map((item) => {
                        const tempFileInfos = item.tempFilePath.split('.');
                        const tempFileName = md5(tempFileInfos[0]) + '.' + tempFileInfos[1];
                        return {
                            tempId: tempFileName,
                            rawType: item.fileType,
                            // 微信选择默认的文件类型 image/video/file
                            tempFileName: tempFileName,
                            // 文件名
                            rawFileName: '',
                            // 图片类不带源文件名
                            tempPath: item.tempFilePath,
                            fileSize: item.size,
                            fileUrl: '',
                            fileId: '',
                            botId: that.agentConfig.botId,
                            parsed: false
                        };
                    });
                    const finalFileList = [...tempFiles];
                    console.log('final', finalFileList);
                    that.setData({
                        sendFileList: finalFileList //
                    });

                    if (finalFileList.length) {
                        that.setData({
                            showTools: false
                        });
                        if (!that.showFileList) {
                            that.setData({
                                showFileList: true
                            });
                        }
                    }
                }
            });
        },

        handleUploadImg: function (sourceType) {
            const that = this;
            const isCurSendFile = this.sendFileList.find((item) => item.rawType === 'file');
            if (isCurSendFile) {
                uni.showModal({
                    title: '确认替换吗',
                    content: '上传图片将替换当前文件内容',
                    showCancel: 'true',
                    cancelText: '取消',
                    confirmText: '确认',
                    success(res) {
                        console.log('res', res);
                        that.chooseMedia(sourceType);
                    },
                    fail(error) {
                        console.log('choose file e', error);
                    }
                });
            } else {
                that.chooseMedia(sourceType);
            }
        },

        chooseMessageFile: function () {
            console.log('触发choose');
            const that = this;
            const oldFileLen = this.sendFileList.filter((item) => item.rawType === 'file').length;
            console.log('oldFileLen', oldFileLen);
            const subFileCount = oldFileLen <= 5 ? 5 - oldFileLen : 0;
            if (subFileCount === 0) {
                uni.showToast({
                    title: '文件数量限制5个',
                    icon: 'error'
                });
                return;
            }
            uni.chooseMessageFile({
                count: subFileCount,
                type: 'file',
                success(res) {
                    // tempFilePath可以作为img标签的src属性显示图片
                    // const tempFilePaths = res.tempFiles;
                    console.log('res', res);
                    // 检验文件后缀
                    const isFileExtValid = res.tempFiles.every((item) => that.checkFileExt(item.name.split('.')[1]));
                    if (!isFileExtValid) {
                        uni.showModal({
                            content: '当前支持文件类型为 pdf、txt、doc、docx、ppt、pptx、xls、xlsx、csv',
                            showCancel: false,
                            confirmText: '确定'
                        });
                        return;
                    }
                    // 校验各文件大小是否小于10M
                    const isFileSizeValid = res.tempFiles.every((item) => item.size <= 10485760);
                    if (!isFileSizeValid) {
                        uni.showToast({
                            title: '单文件10M限制',
                            icon: 'error'
                        });
                        return;
                    }
                    const tempFiles = res.tempFiles.map((item) => {
                        const tempFileInfos = item.path.split('.');
                        const tempFileName = md5(tempFileInfos[0]) + '.' + tempFileInfos[1];
                        return {
                            tempId: tempFileName,
                            rawType: item.type,
                            // 微信选择默认的文件类型 image/video/file
                            tempFileName: tempFileName,
                            // 文件名
                            rawFileName: item.name,
                            tempPath: item.path,
                            fileSize: item.size,
                            fileUrl: '',
                            fileId: '',
                            botId: that.agentConfig.botId,
                            parsed: false
                        };
                    });
                    // 过滤掉已选择中的 image 文件（保留file)
                    const filterFileList = that.sendFileList.filter((item) => item.rawType !== 'image');
                    const finalFileList = [...filterFileList, ...tempFiles];
                    console.log('final', finalFileList);
                    that.setData({
                        sendFileList: finalFileList //
                    });

                    if (finalFileList.length) {
                        that.setData({
                            showTools: false
                        });
                        if (!that.showFileList) {
                            that.setData({
                                showFileList: true
                            });
                        }
                    }
                },
                fail(e) {
                    console.log('choose e', e);
                }
            });
        },

        handleUploadMessageFile: function () {
            if (this.useWebSearch) {
                uni.showModal({
                    title: '提示',
                    content: '联网搜索不支持上传附件'
                });
                return;
            }
            const that = this;
            const isCurSendImage = this.sendFileList.find((item) => item.rawType === 'image');
            if (isCurSendImage) {
                uni.showModal({
                    title: '确认替换吗',
                    content: '上传文件将替换当前图片内容',
                    showCancel: 'true',
                    cancelText: '取消',
                    confirmText: '确认',
                    success(res) {
                        console.log('res', res);
                        that.chooseMessageFile();
                    },
                    fail(error) {
                        console.log('choose file e', error);
                    }
                });
            } else {
                that.chooseMessageFile();
            }
        },

        handleAlbum: function () {
            this.handleUploadImg('album');
        },

        handleCamera: function () {
            this.handleUploadImg('camera');
        },

        checkFileExt: function (ext) {
            return ['pdf', 'txt', 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'csv'].includes(ext);
        },

        stop: function () {
            this.autoToBottom();
            const { chatRecords, chatStatus } = this;
            const newChatRecords = [...chatRecords];
            const record = newChatRecords[newChatRecords.length - 1];
            if (chatStatus === 1) {
                record.content = '已暂停生成';
            }
            // 暂停思考
            if (chatStatus === 2) {
                record.pauseThinking = true;
            }
            this.setData({
                chatRecords: newChatRecords,
                manualScroll: false,
                chatStatus: 0 // 暂停之后切回正常状态
            });
        },

        openSetPanel: function () {
            this.setData({
                setPanelVisibility: true
            });
        },

        closeSetPanel: function () {
            this.setData({
                setPanelVisibility: false
            });
        },

        handleSendMessage: async function (event) {
            // 发送消息前校验所有文件上传状态
            if (this.sendFileList.some((item) => !item.fileId || !item.parsed)) {
                uni.showToast({
                    title: '文件上传及解析中',
                    icon: 'error'
                });
                return;
            }
            await this.sendMessage(event);
        },

        sendMessage: async function (event) {
            if (this.showFileList) {
                this.setData({
                    showFileList: !this.showFileList
                });
            }
            if (this.showTools) {
                this.setData({
                    showTools: !this.showTools
                });
            }
            const { message } = event.currentTarget.dataset;
            let { inputValue, bot, agentConfig, chatRecords, chatStatus, modelConfig } = this;
            // 如果正在进行对话，不让发送消息
            if (chatStatus !== 0) {
                return;
            }
            // 将传进来的消息给到inputValue
            if (message) {
                inputValue = message;
            }
            // 空消息返回
            if (!inputValue) {
                return;
            }
            const { modelProvider, quickResponseModel } = modelConfig;
            const chatMode = this.chatMode;
            // console.log(inputValue,bot.botId)
            const userRecord = {
                content: inputValue,
                record_id: 'record_id' + String(+new Date() - 10),
                role: 'user',
                fileList: this.sendFileList
            };
            if (this.sendFileList.length) {
                this.setData({
                    sendFileList: []
                });
            }
            const record = {
                content: '',
                record_id: 'record_id' + String(+new Date() + 10),
                role: 'assistant',
                hiddenBtnGround: true
            };
            this.setData({
                inputValue: '',
                questions: [],
                chatRecords: [...chatRecords, userRecord, record],
                chatStatus: 1 // 聊天状态切换为1发送中
            });

            // 新增一轮对话记录时 自动往下滚底
            this.autoToBottom();
            if (chatMode === 'bot') {
                const ai = wx.cloud.extend.AI;
                const res = await ai.bot.sendMessage({
                    data: {
                        botId: bot.botId,
                        msg: inputValue,
                        files: this.showUploadFile ? userRecord.fileList.map((item) => item.fileId) : undefined,
                        searchEnable: this.useWebSearch
                    }
                });
                let contentText = '';
                let reasoningContentText = '';
                let isManuallyPaused = false; //这个标记是为了处理手动暂停时，不要请求推荐问题，不显示下面的按钮
                let startTime = null; //记录开始思考时间
                let endTime = null; // 记录结束思考时间
                let index = 0;
                for await (let event of res.eventStream) {
                    const { chatStatus } = this;
                    if (chatStatus === 0) {
                        isManuallyPaused = true;
                        break;
                    }
                    if (index % 10 === 0) {
                        // 更新频率降为1/10
                        this.toBottom(40);
                    }
                    const { data } = event;
                    try {
                        const dataJson = JSON.parse(data);
                        const { type, content, reasoning_content, record_id, search_info, role, knowledge_meta, knowledge_base, finish_reason } = dataJson;
                        const newValue = [...this.chatRecords];
                        // 取最后一条消息更新
                        const lastValueIndex = newValue.length - 1;
                        const lastValue = newValue[lastValueIndex];
                        lastValue.role = role || 'assistant';
                        lastValue.record_id = record_id;
                        // 优先处理错误,直接中断
                        if (finish_reason === 'error' || finish_reason === 'content_filter') {
                            lastValue.search_info = null;
                            lastValue.reasoning_content = '';
                            lastValue.knowledge_meta = [];
                            lastValue.content = '网络繁忙，请稍后重试!';
                            this.setData({
                                [`chatRecords[${lastValueIndex}].search_info`]: lastValue.search_info,
                                [`chatRecords[${lastValueIndex}].reasoning_content`]: lastValue.reasoning_content,
                                [`chatRecords[${lastValueIndex}].knowledge_meta`]: lastValue.knowledge_meta,
                                [`chatRecords[${lastValueIndex}].content`]: lastValue.content,
                                [`chatRecords[${lastValueIndex}].record_id`]: lastValue.record_id
                            });
                            break;
                        }
                        // 下面根据type来确定输出的内容
                        // 只更新一次参考文献，后续再收到这样的消息丢弃
                        if (type === 'search' && !lastValue.search_info) {
                            lastValue.search_info = search_info;
                            this.setData({
                                chatStatus: 2,
                                [`chatRecords[${lastValueIndex}].search_info`]: lastValue.search_info,
                                [`chatRecords[${lastValueIndex}].record_id`]: lastValue.record_id
                            }); // 聊天状态切换为思考中,展示联网的信息
                        }
                        // 思考过程
                        if (type === 'thinking') {
                            if (!startTime) {
                                startTime = +new Date();
                                endTime = +new Date();
                            } else {
                                endTime = +new Date();
                            }
                            reasoningContentText += reasoning_content;
                            lastValue.reasoning_content = reasoningContentText;
                            lastValue.thinkingTime = Math.floor((endTime - startTime) / 1000);
                            this.setData({
                                [`chatRecords[${lastValueIndex}].reasoning_content`]: lastValue.reasoning_content,
                                [`chatRecords[${lastValueIndex}].thinkingTime`]: lastValue.thinkingTime,
                                [`chatRecords[${lastValueIndex}].record_id`]: lastValue.record_id,
                                chatStatus: 2
                            }); // 聊天状态切换为思考中
                        }
                        // 内容
                        if (type === 'text') {
                            contentText += content;
                            lastValue.content = contentText;
                            this.setData({
                                [`chatRecords[${lastValueIndex}].content`]: lastValue.content,
                                [`chatRecords[${lastValueIndex}].record_id`]: lastValue.record_id,
                                chatStatus: 3
                            }); // 聊天状态切换为输出content中
                        }
                        // 知识库，只更新一次
                        if (type === 'knowledge' && !lastValue.knowledge_meta) {
                            // console.log('ryan',knowledge_base)
                            lastValue.knowledge_base = knowledge_base;
                            this.setData({
                                [`chatRecords[${lastValueIndex}].knowledge_base`]: lastValue.knowledge_base,
                                chatStatus: 2
                            });
                        }
                    } catch (e) {
                        console.log('CatchClause', e);
                        console.log('CatchClause', e);
                        // console.log('err', event, e)
                        break;
                    }
                    index++;
                }
                this.toBottom(40);
                const newValue = [...this.chatRecords];
                const lastValueIndex = newValue.length - 1;
                // 取最后一条消息更新
                const lastValue = newValue[lastValueIndex];
                lastValue.hiddenBtnGround = isManuallyPaused;
                this.setData({
                    chatStatus: 0,
                    [`chatRecords[${lastValueIndex}].hiddenBtnGround`]: isManuallyPaused
                }); // 对话完成，切回0 ,并且修改最后一条消息的状态，让下面的按钮展示
                if (bot.isNeedRecommend && !isManuallyPaused) {
                    const ai = wx.cloud.extend.AI;
                    const chatRecords = this.chatRecords;
                    const lastPairChatRecord = chatRecords.length >= 2 ? chatRecords.slice(chatRecords.length - 2) : [];
                    const recommendRes = await ai.bot.getRecommendQuestions({
                        data: {
                            botId: bot.botId,
                            history: lastPairChatRecord.map((item) => ({
                                role: item.role,
                                content: item.content
                            })),
                            msg: inputValue,
                            agentSetting: '',
                            introduction: '',
                            name: ''
                        }
                    });
                    let result = '';
                    for await (let str of recommendRes.textStream) {
                        // this.toBottom();
                        this.toBottom();
                        result += str;
                        this.setData({
                            questions: result.split('\n').filter((item) => !!item)
                        });
                    }
                }
            }
            if (chatMode === 'model') {
                const aiModel = wx.cloud.extend.AI.createModel(modelProvider);
                const res = await aiModel.streamText({
                    data: {
                        model: quickResponseModel,
                        messages: [
                            ...chatRecords.map((item) => ({
                                role: item.role,
                                content: item.content
                            })),
                            {
                                role: 'user',
                                content: inputValue
                            }
                        ]
                    }
                });
                let contentText = '';
                let reasoningText = '';
                let chatStatus = 2;
                let isManuallyPaused = false;
                let startTime = null; //记录开始思考时间
                let endTime = null; // 记录结束思考时间
                for await (let event of res.eventStream) {
                    if (this.chatStatus === 0) {
                        isManuallyPaused = true;
                        break;
                    }
                    this.toBottom();
                    const { data } = event;
                    try {
                        const dataJson = JSON.parse(data);
                        const { id, choices = [] } = dataJson || {};
                        const { delta, finish_reason } = choices[0] || {};
                        if (finish_reason === 'stop') {
                            break;
                        }
                        const { content, reasoning_content, role } = delta;
                        reasoningText += reasoning_content || '';
                        contentText += content || '';
                        const newValue = [...this.chatRecords];
                        const lastValue = newValue[newValue.length - 1];
                        lastValue.content = contentText;
                        lastValue.reasoning_content = reasoningText;
                        lastValue.record_id = 'record_id' + String(id);
                        if (!!reasoningText && !contentText) {
                            // 推理中
                            chatStatus = 2;
                            if (!startTime) {
                                startTime = +new Date();
                                endTime = +new Date();
                            } else {
                                endTime = +new Date();
                            }
                        } else {
                            chatStatus = 3;
                        }
                        lastValue.thinkingTime = endTime ? Math.floor((endTime - startTime) / 1000) : 0;
                        this.setData({
                            chatRecords: newValue,
                            chatStatus
                        });
                    } catch (e) {
                        console.log('CatchClause', e);
                        console.log('CatchClause', e);
                        // console.log(e, event)
                        break;
                    }
                }
                const newValue = [...this.chatRecords];
                const lastValue = newValue[newValue.length - 1];
                lastValue.hiddenBtnGround = isManuallyPaused; // 用户手动暂停，不显示下面的按钮
                this.setData({
                    chatRecords: newValue,
                    chatStatus: 0
                }); // 回正
            }
        },

        toBottom: async function (unit) {
            const addUnit = unit === undefined ? 4 : unit;
            if (this.shouldAddScrollTop) {
                const newTop = this.scrollTop + addUnit;
                if (this.manualScroll) {
                    this.setData({
                        scrollTop: newTop
                    });
                } else {
                    this.setData({
                        scrollTop: newTop,
                        viewTop: newTop
                    });
                }
                return;
            }

            // 只有当内容高度接近scroll 区域视口高度时才开始增加 scrollTop
            const clientHeight = this.windowInfo.windowHeight - this.footerHeight - (this.chatMode === 'bot' ? 40 : 0); // 视口高度
            const contentHeight = (await this.calculateContentHeight()) + (this.contentHeightInScrollViewTop || (await this.calculateContentInTop())); // 内容总高度
            // console.log(
            //   'contentHeight clientHeight newTop',
            //   contentHeight,
            //   clientHeight,
            //   this.data.scrollTop + 4
            // );
            if (clientHeight - contentHeight < 10) {
                this.setData({
                    shouldAddScrollTop: true
                });
            }
        },

        copyChatRecord: function (e) {
            // console.log(e)
            const { content } = e.currentTarget.dataset;
            uni.setClipboardData({
                data: content,
                success: function (res) {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'success'
                    });
                }
            });
        },

        addFileList: function () {
            // 顶部文件行展现时，隐藏底部工具栏
            this.setData({});
        },

        subFileList: function () {},

        copyUrl: function (e) {
            const { url } = e.currentTarget.dataset;
            console.log(url);
            uni.setClipboardData({
                data: url,
                success: function (res) {
                    uni.showToast({
                        title: '网页链接复制成功',
                        icon: 'success'
                    });
                }
            });
        },

        handleRemoveChild: function (e) {
            // console.log("remove", e.detail.tempId);
            if (e.detail.tempId) {
                const newSendFileList = this.sendFileList.filter((item) => item.tempId !== e.detail.tempId);
                console.log('newSendFileList', newSendFileList);
                this.setData({
                    sendFileList: newSendFileList
                });
                if (newSendFileList.length === 0 && this.showFileList) {
                    this.setData({
                        showFileList: false
                    });
                }
            }
        },

        handleChangeChild: function (e) {
            console.log('change', e.detail);
            const { fileId, tempId, parsed } = e.detail;
            // const curFile = this.data.sendFileList.find(item => item.tempId === tempId)
            // curFile.fileId = fileId
            const newSendFileList = this.sendFileList.map((item) => {
                if (item.tempId === tempId) {
                    return {
                        ...item,
                        fileId,
                        parsed
                    };
                }
                return item;
            });
            this.setData({
                sendFileList: newSendFileList
            });
        },

        handleClickTools: function () {
            this.setData({
                showTools: !this.showTools
            });
        },

        handleClickWebSearch: function () {
            if (this.sendFileList.length) {
                uni.showModal({
                    title: '提示',
                    content: '上传附件后不支持联网搜索'
                });
                return;
            }
            this.setData({
                useWebSearch: !this.useWebSearch
            });
        },

        share() {
            console.log('占位：函数 share 未声明');
        }
    },
    created: function () {}
};
</script>
<style>
/* components/agent-ui/index.wxss */
.agent-ui {
    width: 750rpx;
    height: 100vh;
    position: relative;
}

.nav {
    width: 750rpx;
    padding: 20px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.navBar {
    height: 45px;
    width: 100%;
    box-shadow: 0 16px 16px #fff;
    /* background: linear-gradient(to bottom, 
    rgba(245, 245, 245, 0.98) 60%, 
    rgba(235, 235, 235, 0.92)
  ); */
    /* border-bottom: 1rpx solid rgba(0, 0, 0, 0.08); */
    /* margin-bottom: 10px */
}

/* .tips {
  width: 100%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  color: rgb(95, 92, 92)
} */

.tips {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    color: rgb(128, 128, 128);
    font-size: 12px;
    height: 52px;
}
.tips::before,
.tips::after {
    content: '';
    display: inline-block;
    height: 1px;
    transform: scaleY(0.5);
    flex-grow: 1;
    border-radius: 2px;
}
.tips::before {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}
.tips::after {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}

.nav-content {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.bot-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bot-name {
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

.main {
    background-color: #fff;
    /* padding-top:10px; */
}

.share_btn {
    background-color: #fff;
    margin: 0px !important;
    padding: 0px !important;
    width: 36rpx !important;
    height: 36rpx;
}

.avatar {
    width: 160rpx;
    height: 160rpx;
    border-radius: 75rpx;
}

.questions {
    margin: 0px 16px 10px 16px;
    /* background-color: blueviolet; */
}

.question_content {
    background-color: #f5f5f5;
    padding: 16rpx 24rpx;
    border-radius: 12px;
    display: inline-block;
    font-size: 14px;
    font-weight: 300;
}

.footer {
    width: 100%;
    min-height: 80px;
    max-height: 380px;
    /* background-color: aquamarine; */
    position: absolute;
    bottom: 0;
}

.foot_function {
    margin: 8px 8px 15px;
}

.footer .file_list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 0px 16px;
    overflow-x: scroll;
    height: 80px;
}

.img-box {
    position: absolute;
    top: -100px;
    left: 0px;
    white-space: nowrap;
    /* 防止内部元素换行 */
    width: 100%;
    /* 设置容器宽度 */
    background-color: #fff;
}

.img-preview {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin-right: 8px;
    position: relative;
    margin-top: 10px;
}

.img-preview-image {
    width: 80px;
    height: 80px;
    border-radius: 10px;
}

.img-preview-loading {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #eee;
    border-radius: 10px;
}

.img-preview-close {
    width: 16px;
    height: 16px;
    position: absolute;
    right: -8px;
    top: -8px;
    /* background-color: blueviolet; */
}

.input_box {
    /* display: flex; */
    display: flex;
    align-items: flex-end;
    /* padding: 0 16px; */
    flex-direction: row;
    /* align-items: center; */
    gap: 10rpx;
    position: relative;
    min-height: 40px;
    /* max-height: 120px; */
    /* margin: 8px 0px 15px; */
    padding: 0px 8px;
    /* position: relative; */
    background-color: white;
    transition: all 0.3s;
}

.set_panel_modal {
    position: fixed;
    width: 750rpx;
    height: 100vh;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

.set_panel {
    background-color: #f3f3f3;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 750rpx;
}

.set_panel_funtion {
    display: flex;
    flex-direction: row;
    padding: 10px 16px;
    box-sizing: border-box;
    gap: 10px;
}

.set_panel_cancel {
    height: 60px;
    text-align: center;
    line-height: 40px;
    color: black;
    border-top: #cfcdcd solid 1px;
}

.function {
    width: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background-color: #fff;
    color: black;
    padding: 0px 6px;
    border-radius: 16px;
    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.253);
}

.icon {
    width: 48rpx;
    height: 48rpx;
}

.text_desc {
    font-weight: 300;
    font-size: 24rpx;
}

.input_inner_box {
    width: 100%;
    min-height: 50px;
    background-color: #fff;
    padding: 12px 12px;
    color: black;
    border: #f3f3f3 solid 1px;
    box-sizing: border-box;
    border-radius: 16px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.input {
    width: 100%;
    flex: 1;
    /* height: 40px; */
    max-height: 160px;
    /* overflow-y: hidden; */
    /* line-height: 22px; */
    font-size: 16px;
    /* display: flex;
  align-items: center; */
    height: 20px;
    /* padding-top: 10px; */
    /* align-items: center; */
}

.right_btns {
    height: 50px;
    display: flex;
    align-items: center;
    /* flex: 1; */
    gap: 10rpx;
    /* padding: 0 8px; */
}

.set {
    width: 58rpx;
    height: 58rpx;
}

.system {
    margin-left: 32rpx;
    margin-right: 32rpx;
    border-radius: 12rpx;
    padding-bottom: 16px;
    box-sizing: border-box;
    position: relative;
}
.avatar-left {
    position: absolute;
    top: 0px;
    left: 0px;
}
.guide_system {
    padding-left: 32rpx;
    padding-right: 32rpx;
    border-radius: 12rpx;
    padding-bottom: 16px;
    box-sizing: border-box;
}

.bot_intro_system {
    padding-left: 32rpx;
    padding-right: 32rpx;
    border-radius: 12rpx;
    padding-bottom: 16px;
    box-sizing: border-box;
}

.user {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.userContent .fileBar {
    /* display: flex;
  overflow-x: scroll;
  justify-content: flex-end; */
    display: flex;
    flex-direction: row;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    padding: 0px 16px;
    overflow-x: scroll;
    max-height: 80px;
    gap: 10px;
}

.user .user_content {
    background-color: #f3f5fb;
    border-radius: 12rpx 0rpx 12rpx 12rpx;
    margin-left: 32rpx;
    margin-right: 32rpx;
    padding: 24rpx;
    word-wrap: break-word;
    word-break: break-all;
    font-size: 32rpx;
}

.feedback_modal {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 750rpx;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal {
    background-color: #fff;
    width: 700rpx;
    border-radius: 16rpx;
    overflow: hidden;
}

.modal_head {
    height: 40px;
    line-height: 40px;
    padding: 0px 10px;
}

.modal_body {
    padding: 10px;
}

.modal_footer {
    display: flex;
}

.link-box {
    padding: 0px 16px 6px 16px;
}

.tool_box {
    height: 80px;
    display: flex;
    flex-direction: row;
    padding: 5px 16px;
    box-sizing: border-box;
    gap: 10px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: scroll;
}

.tool_box .function {
    flex: 0 0 calc(25% - 20px);
}

.webSearchSwitch {
    width: 200rpx;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 14px;
}

.feature_enable {
    background-color: rgb(219, 234, 254);
    color: rgb(77, 107, 254);
    border-color: rgba(0, 122, 255, 0.15);
}

.feature_list {
    margin: 0 16px;
}
</style>