From 25dce05cbb52b92018eb051b458a1a0885319188 Mon Sep 17 00:00:00 2001
From: Soulter <37870767+Soulter@users.noreply.github.com>
Date: Tue, 23 Sep 2025 10:19:26 +0800
Subject: [PATCH] refactor: improve webchat UI (#2853)

---
 dashboard/src/components/chat/Chat.vue        | 1347 +++++++++++
 dashboard/src/components/chat/MessageList.vue |  775 +++++++
 .../src/components/shared/UiParentCard.vue    |   20 -
 dashboard/src/views/ChatBoxPage.vue           |   24 +-
 dashboard/src/views/ChatPage.vue              | 2055 +----------------
 dashboard/src/views/ConversationPage.vue      |  270 +--
 dashboard/src/views/PersonaPage.vue           |   14 +-
 .../dashboards/default/DefaultDashboard.vue   |   26 +-
 8 files changed, 2200 insertions(+), 2331 deletions(-)
 create mode 100644 dashboard/src/components/chat/Chat.vue
 create mode 100644 dashboard/src/components/chat/MessageList.vue
 delete mode 100644 dashboard/src/components/shared/UiParentCard.vue

diff --git a/dashboard/src/components/chat/Chat.vue b/dashboard/src/components/chat/Chat.vue
new file mode 100644
index 00000000..651cf83e
--- /dev/null
+++ b/dashboard/src/components/chat/Chat.vue
@@ -0,0 +1,1347 @@
+<template>
+    <v-card class="chat-page-card">
+        <v-card-text class="chat-page-container">
+            <div class="chat-layout">
+                <div class="sidebar-panel" :class="{ 'sidebar-collapsed': sidebarCollapsed }"
+                    :style="{ 'background-color': isDark ? sidebarCollapsed ? '#1e1e1e' : '#2d2d2d' : sidebarCollapsed ? '#ffffff' : '#f5f5f5' }"
+                    @mouseenter="handleSidebarMouseEnter" @mouseleave="handleSidebarMouseLeave">
+
+                    <div style="display: flex; align-items: center; justify-content: center; padding: 16px; padding-bottom: 0px;"
+                        v-if="chatboxMode">
+                        <img width="50" src="@/assets/images/astrbot_logo_mini.webp" alt="AstrBot Logo">
+                        <span v-if="!sidebarCollapsed" style="font-weight: 1000; font-size: 26px; margin-left: 8px;">AstrBot</span>
+                    </div>
+
+
+                    <div class="sidebar-collapse-btn-container">
+                        <v-btn icon class="sidebar-collapse-btn" @click="toggleSidebar" variant="text"
+                            color="deep-purple">
+                            <v-icon>{{ (sidebarCollapsed || (!sidebarCollapsed && sidebarHoverExpanded)) ?
+                                'mdi-chevron-right' : 'mdi-chevron-left' }}</v-icon>
+                        </v-btn>
+                    </div>
+
+                    <div style="padding: 16px; padding-top: 8px;">
+                        <v-btn block variant="text" class="new-chat-btn" @click="newC" :disabled="!currCid"
+                            v-if="!sidebarCollapsed" prepend-icon="mdi-plus"
+                            style="background-color: transparent !important; border-radius: 4px;">{{
+                                tm('actions.newChat') }}</v-btn>
+                        <v-btn icon="mdi-plus" rounded="lg" @click="newC" :disabled="!currCid" v-if="sidebarCollapsed"
+                            elevation="0"></v-btn>
+                    </div>
+                    <div v-if="!sidebarCollapsed">
+                        <v-divider class="mx-4"></v-divider>
+                    </div>
+
+
+                    <div style="overflow-y: auto; flex-grow: 1;" :class="{ 'fade-in': sidebarHoverExpanded }"
+                        v-if="!sidebarCollapsed">
+                        <v-card v-if="conversations.length > 0" flat style="background-color: transparent;">
+                            <v-list density="compact" nav class="conversation-list"
+                                style="background-color: transparent;" v-model:selected="selectedConversations"
+                                @update:selected="getConversationMessages">
+                                <v-list-item v-for="(item, i) in conversations" :key="item.cid" :value="item.cid"
+                                    rounded="lg" class="conversation-item" active-color="secondary">
+                                    <v-list-item-title v-if="!sidebarCollapsed" class="conversation-title">{{ item.title
+                                        || tm('conversation.newConversation') }}</v-list-item-title>
+                                    <v-list-item-subtitle v-if="!sidebarCollapsed" class="timestamp">{{
+                                        formatDate(item.updated_at)
+                                        }}</v-list-item-subtitle>
+
+                                    <template v-if="!sidebarCollapsed" v-slot:append>
+                                        <div class="conversation-actions">
+                                            <v-btn icon="mdi-pencil" size="x-small" variant="text"
+                                                class="edit-title-btn"
+                                                @click.stop="showEditTitleDialog(item.cid, item.title)" />
+                                            <v-btn icon="mdi-delete" size="x-small" variant="text"
+                                                class="delete-conversation-btn" color="error"
+                                                @click.stop="deleteConversation(item.cid)" />
+                                        </div>
+                                    </template>
+                                </v-list-item>
+                            </v-list>
+                        </v-card>
+
+                        <v-fade-transition>
+                            <div class="no-conversations" v-if="conversations.length === 0">
+                                <v-icon icon="mdi-message-text-outline" size="large" color="grey-lighten-1"></v-icon>
+                                <div class="no-conversations-text" v-if="!sidebarCollapsed || sidebarHoverExpanded">
+                                    {{ tm('conversation.noHistory') }}</div>
+                            </div>
+                        </v-fade-transition>
+                    </div>
+
+                </div>
+
+                <!-- 右侧聊天内容区域 -->
+                <div class="chat-content-panel">
+
+                    <div class="conversation-header fade-in">
+                        <div v-if="currCid && getCurrentConversation">
+                            <h3
+                                style="max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                                {{ getCurrentConversation.title || tm('conversation.newConversation') }}</h3>
+                            <span style="font-size: 12px;">{{ formatDate(getCurrentConversation.updated_at) }}</span>
+                        </div>
+                        <div class="conversation-header-actions">
+                            <!-- router 推送到 /chatbox -->
+                            <v-tooltip :text="tm('actions.fullscreen')" v-if="!chatboxMode">
+                                <template v-slot:activator="{ props }">
+                                    <v-icon v-bind="props"
+                                        @click="router.push(currCid ? `/chatbox/${currCid}` : '/chatbox')"
+                                        class="fullscreen-icon">mdi-fullscreen</v-icon>
+                                </template>
+                            </v-tooltip>
+                            <!-- 语言切换按钮 -->
+                            <v-tooltip :text="t('core.common.language')" v-if="chatboxMode">
+                                <template v-slot:activator="{ props }">
+                                    <LanguageSwitcher variant="chatbox" />
+                                </template>
+                            </v-tooltip>
+                            <!-- 主题切换按钮 -->
+                            <v-tooltip :text="isDark ? tm('modes.lightMode') : tm('modes.darkMode')" v-if="chatboxMode">
+                                <template v-slot:activator="{ props }">
+                                    <v-btn v-bind="props" icon @click="toggleTheme" class="theme-toggle-icon"
+                                        size="small" rounded="sm" style="margin-right: 8px;" variant="text">
+                                        <v-icon>{{ isDark ? 'mdi-weather-night' : 'mdi-white-balance-sunny' }}</v-icon>
+                                    </v-btn>
+                                </template>
+                            </v-tooltip>
+                            <!-- router 推送到 /chat -->
+                            <v-tooltip :text="tm('actions.exitFullscreen')" v-if="chatboxMode">
+                                <template v-slot:activator="{ props }">
+                                    <v-icon v-bind="props" @click="router.push(currCid ? `/chat/${currCid}` : '/chat')"
+                                        class="fullscreen-icon">mdi-fullscreen-exit</v-icon>
+                                </template>
+                            </v-tooltip>
+                        </div>
+                    </div>
+                    <v-divider v-if="currCid && getCurrentConversation" class="conversation-divider"></v-divider>
+
+                    <MessageList v-if="messages && messages.length > 0" :messages="messages" :isDark="isDark" :isStreaming="isStreaming"
+                        @openImagePreview="openImagePreview" ref="messageList" />
+                    <div class="welcome-container fade-in" v-else>
+                        <div class="welcome-title">
+                            <span>Hello, I'm</span>
+                            <span class="bot-name">AstrBot ⭐</span>
+                        </div>
+                        <div class="welcome-hint markdown-content">
+                            <span>{{ t('core.common.type') }}</span>
+                            <code>help</code>
+                            <span>{{ tm('shortcuts.help') }} 😊</span>
+                        </div>
+                        <div class="welcome-hint markdown-content">
+                            <span>{{ t('core.common.longPress') }}</span>
+                            <code>Ctrl + B</code>
+                            <span>{{ tm('shortcuts.voiceRecord') }} 🎤</span>
+                        </div>
+                        <div class="welcome-hint markdown-content">
+                            <span>{{ t('core.common.press') }}</span>
+                            <code>Ctrl + V</code>
+                            <span>{{ tm('shortcuts.pasteImage') }} 🏞️</span>
+                        </div>
+                    </div>
+
+                    <!-- 输入区域 -->
+                    <div class="input-area fade-in">
+                        <div
+                            style="width: 85%; max-width: 900px; margin: 0 auto; border: 1px solid #e0e0e0; border-radius: 24px; padding: 4px;">
+                            <textarea id="input-field" v-model="prompt" @keydown="handleInputKeyDown" :disabled="isStreaming"
+                                @click:clear="clearMessage" placeholder="Ask AstrBot..."
+                                style="width: 100%; resize: none; outline: none; border: 1px solid var(--v-theme-border); border-radius: 12px; padding: 8px 16px; min-height: 40px; font-family: inherit; font-size: 16px; background-color: var(--v-theme-surface);"></textarea>
+                            <div
+                                style="display: flex; justify-content: space-between; align-items: center; padding: 0px 8px;">
+                                <div style="display: flex; justify-content: flex-start; margin-top: 4px;">
+                                    <!-- 选择提供商和模型 -->
+                                    <ProviderModelSelector ref="providerModelSelector" />
+                                </div>
+                                <div style="display: flex; justify-content: flex-end; margin-top: 8px;">
+                                    <input type="file" ref="imageInput" @change="handleFileSelect" accept="image/*"
+                                        style="display: none" multiple />
+                                    <v-btn @click="triggerImageInput" icon="mdi-plus" variant="text" color="deep-purple"
+                                        class="add-btn" size="small" />
+                                    <v-btn @click="sendMessage" icon="mdi-send" variant="text" color="deep-purple"
+                                        :disabled="!prompt && stagedImagesName.length === 0 && !stagedAudioUrl"
+                                        class="send-btn" size="small" />
+                                    <v-btn @click="isRecording ? stopRecording() : startRecording()"
+                                        :icon="isRecording ? 'mdi-stop-circle' : 'mdi-microphone'" variant="text"
+                                        :color="isRecording ? 'error' : 'deep-purple'" class="record-btn"
+                                        size="small" />
+                                </div>
+                            </div>
+
+                        </div>
+
+                        <!-- 附件预览区 -->
+                        <div class="attachments-preview" v-if="stagedImagesUrl.length > 0 || stagedAudioUrl">
+                            <div v-for="(img, index) in stagedImagesUrl" :key="index" class="image-preview">
+                                <img :src="img" class="preview-image" />
+                                <v-btn @click="removeImage(index)" class="remove-attachment-btn" icon="mdi-close"
+                                    size="small" color="error" variant="text" />
+                            </div>
+
+                            <div v-if="stagedAudioUrl" class="audio-preview">
+                                <v-chip color="deep-purple-lighten-4" class="audio-chip">
+                                    <v-icon start icon="mdi-microphone" size="small"></v-icon>
+                                    {{ tm('voice.recording') }}
+                                </v-chip>
+                                <v-btn @click="removeAudio" class="remove-attachment-btn" icon="mdi-close" size="small"
+                                    color="error" variant="text" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </v-card-text>
+    </v-card>
+    <!-- 编辑对话标题对话框 -->
+    <v-dialog v-model="editTitleDialog" max-width="400">
+        <v-card>
+            <v-card-title class="dialog-title">{{ tm('actions.editTitle') }}</v-card-title>
+            <v-card-text>
+                <v-text-field v-model="editingTitle" :label="tm('conversation.newConversation')" variant="outlined"
+                    hide-details class="mt-2" @keyup.enter="saveTitle" autofocus />
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn text @click="editTitleDialog = false" color="grey-darken-1">{{ t('core.common.cancel') }}</v-btn>
+                <v-btn text @click="saveTitle" color="primary">{{ t('core.common.save') }}</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+
+    <!-- 图片预览对话框 -->
+    <v-dialog v-model="imagePreviewDialog" max-width="90vw" max-height="90vh">
+        <v-card class="image-preview-card" elevation="8">
+            <v-card-title class="d-flex justify-space-between align-center pa-4">
+                <span>{{ t('core.common.imagePreview') }}</span>
+                <v-btn icon="mdi-close" variant="text" @click="imagePreviewDialog = false" />
+            </v-card-title>
+            <v-card-text class="text-center pa-4">
+                <img :src="previewImageUrl" class="preview-image-large" />
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+import { router } from '@/router';
+import axios from 'axios';
+import { ref } from 'vue';
+import { useCustomizerStore } from '@/stores/customizer';
+import { useI18n, useModuleI18n } from '@/i18n/composables';
+import LanguageSwitcher from '@/components/shared/LanguageSwitcher.vue';
+import ProviderModelSelector from '@/components/chat/ProviderModelSelector.vue';
+import MessageList from '@/components/chat/MessageList.vue';
+import 'highlight.js/styles/github.css';
+
+export default {
+    name: 'ChatPage',
+    components: {
+        LanguageSwitcher,
+        ProviderModelSelector,
+        MessageList
+    },
+    props: {
+        chatboxMode: {
+            type: Boolean,
+            default: false
+        }
+    }, setup() {
+        const { t } = useI18n();
+        const { tm } = useModuleI18n('features/chat');
+
+        return {
+            t,
+            tm,
+            router,
+            ref
+        };
+    },
+    data() {
+        return {
+            prompt: '',
+            messages: [],
+            conversations: [],
+            selectedConversations: [], // 用于控制左侧列表的选中状态
+            currCid: '',
+            stagedImagesName: [], // 用于存储图片文件名的数组
+            stagedImagesUrl: [], // 用于存储图片的blob URL数组
+            loadingChat: false,
+
+            inputFieldLabel: '',
+
+            isRecording: false,
+            audioChunks: [],
+            stagedAudioUrl: "",
+            mediaRecorder: null,
+
+            // Ctrl键长按相关变量
+            ctrlKeyDown: false,
+            ctrlKeyTimer: null,
+            ctrlKeyLongPressThreshold: 300, // 长按阈值，单位毫秒
+
+            mediaCache: {}, // Add a cache to store media blobs
+
+            // 添加对话标题编辑相关变量
+            editTitleDialog: false,
+            editingTitle: '',
+            editingCid: '',
+
+            // 侧边栏折叠状态
+            sidebarCollapsed: true,
+            sidebarHovered: false,
+            sidebarHoverTimer: null,
+            sidebarHoverExpanded: false,
+            sidebarHoverDelay: 100, // 悬停延迟，单位毫秒            
+            pendingCid: null, // Store pending conversation ID for route handling
+
+            // 图片预览相关变量
+            imagePreviewDialog: false,
+            previewImageUrl: '',
+
+            isStreaming: false
+        }
+    },
+
+    computed: {
+        isDark() {
+            return useCustomizerStore().uiTheme === 'PurpleThemeDark';
+        },
+        // Get the current conversation from the conversations array
+        getCurrentConversation() {
+            if (!this.currCid) return null;
+            return this.conversations.find(c => c.cid === this.currCid);
+        }
+    },
+
+    watch: {
+        // Watch for route changes to handle direct navigation to /chat/<cid>
+        '$route': {
+            immediate: true,
+            handler(to, from) {
+                console.log('Route changed:', to.path, 'from:', from?.path);
+                if (from &&
+                    ((from.path.startsWith('/chat') && to.path.startsWith('/chatbox')) ||
+                        (from.path.startsWith('/chatbox') && to.path.startsWith('/chat')))) {
+                }
+
+                // Check if the route matches /chat/<cid> or /chatbox/<cid> pattern
+                if (to.path.startsWith('/chat/') || to.path.startsWith('/chatbox/')) {
+                    const pathCid = to.path.split('/')[2];
+                    console.log('Path CID:', pathCid);
+                    if (pathCid && pathCid !== this.currCid) {
+                        // If conversations are already loaded
+                        if (this.conversations.length > 0) {
+                            const conversation = this.conversations.find(c => c.cid === pathCid);
+                            if (conversation) {
+                                this.getConversationMessages([pathCid]);
+                            }
+                        } else {
+                            // Store the cid to be used after conversations are loaded
+                            this.pendingCid = pathCid;
+                        }
+                    }
+                }
+            }
+        },
+
+        // Watch for conversations loaded to handle pending cid
+        conversations: {
+            handler(newConversations) {
+                if (this.pendingCid && newConversations.length > 0) {
+                    const conversation = newConversations.find(c => c.cid === this.pendingCid);
+                    if (conversation) {
+                        // 先设置选中状态，然后加载对话消息
+                        this.selectedConversations = [this.pendingCid];
+                        this.getConversationMessages([this.pendingCid]);
+                        this.pendingCid = null;
+                    }
+                } else {
+                    // 如果没有URL参数指定的对话，且当前没有选中对话，则默认打开第一个对话
+                    if (!this.currCid && newConversations.length > 0) {
+                        const firstConversation = newConversations[0];
+                        this.selectedConversations = [firstConversation.cid];
+                        this.getConversationMessages([firstConversation.cid]);
+                    }
+                }
+            }
+        }
+    },
+
+    mounted() {
+        // Theme is now handled globally by the customizer store.
+        // 从 localStorage 读取侧边栏折叠状态，默认为 true（折叠）
+        const savedCollapsedState = localStorage.getItem('sidebarCollapsed');
+        if (savedCollapsedState !== null) {
+            this.sidebarCollapsed = JSON.parse(savedCollapsedState);
+        } else {
+            this.sidebarCollapsed = true; // 默认折叠状态
+        }
+        
+        // 设置输入框标签
+        this.inputFieldLabel = this.tm('input.chatPrompt');
+        this.getConversations();
+        let inputField = document.getElementById('input-field');
+        inputField.addEventListener('paste', this.handlePaste);
+        inputField.addEventListener('keydown', function (e) {
+            if (e.keyCode == 13 && !e.shiftKey) {
+                e.preventDefault();
+                // 检查是否有内容可发送
+                if (this.canSendMessage()) {
+                    this.sendMessage();
+                }
+            }
+        }.bind(this));
+
+        // 添加keyup事件监听
+        document.addEventListener('keyup', this.handleInputKeyUp);
+    },
+
+    beforeUnmount() {
+        // 移除keyup事件监听
+        document.removeEventListener('keyup', this.handleInputKeyUp);
+
+        // 清除悬停定时器
+        if (this.sidebarHoverTimer) {
+            clearTimeout(this.sidebarHoverTimer);
+        }
+
+        // Cleanup blob URLs
+        this.cleanupMediaCache();
+    },
+    methods: {
+        toggleTheme() {
+            const customizer = useCustomizerStore();
+            const newTheme = customizer.uiTheme === 'PurpleTheme' ? 'PurpleThemeDark' : 'PurpleTheme';
+            customizer.SET_UI_THEME(newTheme);
+        },
+        // 切换侧边栏折叠状态
+        toggleSidebar() {
+            if (this.sidebarHoverExpanded) {
+                this.sidebarHoverExpanded = false;
+                return
+            }
+            this.sidebarCollapsed = !this.sidebarCollapsed;
+            // 保存折叠状态到 localStorage
+            localStorage.setItem('sidebarCollapsed', JSON.stringify(this.sidebarCollapsed));
+        },
+
+        // 侧边栏鼠标悬停处理
+        handleSidebarMouseEnter() {
+            if (!this.sidebarCollapsed) return;
+
+            this.sidebarHovered = true;
+
+            // 设置延迟定时器
+            this.sidebarHoverTimer = setTimeout(() => {
+                if (this.sidebarHovered) {
+                    this.sidebarHoverExpanded = true;
+                    this.sidebarCollapsed = false;
+                }
+            }, this.sidebarHoverDelay);
+        },
+
+        handleSidebarMouseLeave() {
+            this.sidebarHovered = false;
+
+            // 清除定时器
+            if (this.sidebarHoverTimer) {
+                clearTimeout(this.sidebarHoverTimer);
+                this.sidebarHoverTimer = null;
+            }
+
+            if (this.sidebarHoverExpanded) {
+                this.sidebarCollapsed = true;
+            }
+            this.sidebarHoverExpanded = false;
+        },
+
+        // 显示编辑对话标题对话框
+        showEditTitleDialog(cid, title) {
+            this.editingCid = cid;
+            this.editingTitle = title || ''; // 如果标题为空，则设置为空字符串
+            this.editTitleDialog = true;
+        },
+
+        // 保存对话标题
+        saveTitle() {
+            if (!this.editingCid) return;
+
+            const trimmedTitle = this.editingTitle.trim();
+            axios.post('/api/chat/rename_conversation', {
+                conversation_id: this.editingCid,
+                title: trimmedTitle
+            })
+                .then(response => {
+                    // 更新本地对话列表中的标题
+                    const conversation = this.conversations.find(c => c.cid === this.editingCid);
+                    if (conversation) {
+                        conversation.title = trimmedTitle;
+                    }
+                    this.editTitleDialog = false;
+                })
+                .catch(err => {
+                    console.error('重命名对话失败:', err);
+                });
+        },
+
+        async getMediaFile(filename) {
+            if (this.mediaCache[filename]) {
+                return this.mediaCache[filename];
+            }
+
+            try {
+                const response = await axios.get('/api/chat/get_file', {
+                    params: { filename },
+                    responseType: 'blob'
+                });
+
+                const blobUrl = URL.createObjectURL(response.data);
+                this.mediaCache[filename] = blobUrl;
+                return blobUrl;
+            } catch (error) {
+                console.error('Error fetching media file:', error);
+                return '';
+            }
+        },
+
+        removeAudio() {
+            this.stagedAudioUrl = null;
+        },
+
+        openImagePreview(imageUrl) {
+            this.previewImageUrl = imageUrl;
+            this.imagePreviewDialog = true;
+        },
+
+        async startRecording() {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            this.mediaRecorder = new MediaRecorder(stream);
+            this.mediaRecorder.ondataavailable = (event) => {
+                this.audioChunks.push(event.data);
+            };
+            this.mediaRecorder.start();
+            this.isRecording = true;
+            this.inputFieldLabel = this.tm('input.recordingPrompt');
+        },
+
+        async stopRecording() {
+            this.isRecording = false;
+            this.inputFieldLabel = this.tm('input.chatPrompt');
+            this.mediaRecorder.stop();
+            this.mediaRecorder.onstop = async () => {
+                const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
+                this.audioChunks = [];
+
+                this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
+
+                const formData = new FormData();
+                formData.append('file', audioBlob);
+
+                try {
+                    const response = await axios.post('/api/chat/post_file', formData, {
+                        headers: {
+                            'Content-Type': 'multipart/form-data'
+                        }
+                    });
+
+                    const audio = response.data.data.filename;
+                    console.log('Audio uploaded:', audio);
+
+                    this.stagedAudioUrl = audio; // Store just the filename
+                } catch (err) {
+                    console.error('Error uploading audio:', err);
+                }
+            };
+        },
+
+        async processAndUploadImage(file) {
+            const formData = new FormData();
+            formData.append('file', file);
+
+            try {
+                const response = await axios.post('/api/chat/post_image', formData, {
+                    headers: {
+                        'Content-Type': 'multipart/form-data'
+                    }
+                });
+
+                const img = response.data.data.filename;
+                this.stagedImagesName.push(img); // Store just the filename
+                this.stagedImagesUrl.push(URL.createObjectURL(file)); // Create a blob URL for immediate display
+
+            } catch (err) {
+                console.error('Error uploading image:', err);
+            }
+        },
+
+        async handlePaste(event) {
+            console.log('Pasting image...');
+            const items = event.clipboardData.items;
+            for (let i = 0; i < items.length; i++) {
+                if (items[i].type.indexOf('image') !== -1) {
+                    const file = items[i].getAsFile();
+                    this.processAndUploadImage(file);
+                }
+            }
+        },
+
+        removeImage(index) {
+            // Revoke the blob URL to prevent memory leaks
+            const urlToRevoke = this.stagedImagesUrl[index];
+            if (urlToRevoke && urlToRevoke.startsWith('blob:')) {
+                URL.revokeObjectURL(urlToRevoke);
+            }
+
+            this.stagedImagesName.splice(index, 1);
+            this.stagedImagesUrl.splice(index, 1);
+        },
+
+        clearMessage() {
+            this.prompt = '';
+        },
+
+        triggerImageInput() {
+            this.$refs.imageInput.click();
+        },
+
+        handleFileSelect(event) {
+            const files = event.target.files;
+            if (files) {
+                for (const file of files) {
+                    this.processAndUploadImage(file);
+                }
+            }
+            // Reset the input value to allow selecting the same file again
+            event.target.value = '';
+        },
+        getConversations() {
+            axios.get('/api/chat/conversations').then(response => {
+                this.conversations = response.data.data;
+
+                // If there's a pending conversation ID from the route
+                if (this.pendingCid) {
+                    const conversation = this.conversations.find(c => c.cid === this.pendingCid);
+                    if (conversation) {
+                        this.getConversationMessages([this.pendingCid]);
+                        this.pendingCid = null;
+                    }
+                } else {
+                    // 如果没有URL参数指定的对话，且当前没有选中对话，则默认打开第一个对话
+                    if (!this.currCid && this.conversations.length > 0) {
+                        const firstConversation = this.conversations[0];
+                        this.selectedConversations = [firstConversation.cid];
+                        this.getConversationMessages([firstConversation.cid]);
+                    }
+                }
+            }).catch(err => {
+                if (err.response.status === 401) {
+                    this.$router.push('/auth/login?redirect=/chatbox');
+                }
+                console.error(err);
+            });
+        },
+        getConversationMessages(cid) {
+            if (!cid[0])
+                return;
+
+            // Update the URL to reflect the selected conversation
+            if (this.$route.path !== `/chat/${cid[0]}` && this.$route.path !== `/chatbox/${cid[0]}`) {
+                if (this.$route.path.startsWith('/chatbox')) {
+                    this.$router.push(`/chatbox/${cid[0]}`);
+                } else {
+                    this.$router.push(`/chat/${cid[0]}`);
+                }
+                return
+            }
+
+            axios.get('/api/chat/get_conversation?conversation_id=' + cid[0]).then(async response => {
+                this.currCid = cid[0];
+                // Update the selected conversation in the sidebar
+                this.selectedConversations = [cid[0]];
+                let history = response.data.data.history;
+                for (let i = 0; i < history.length; i++) {
+                    let content = history[i].content;
+                    if (content.message.startsWith('[IMAGE]')) {
+                        let img = content.message.replace('[IMAGE]', '');
+                        const imageUrl = await this.getMediaFile(img);
+                        if (!content.embedded_images) {
+                            content.embedded_images = [];
+                        }
+                        content.embedded_images.push(imageUrl);
+                        content.message = ''; // 清空message，避免显示标记文本
+                    }
+
+                    if (content.message.startsWith('[RECORD]')) {
+                        let audio = content.message.replace('[RECORD]', '');
+                        const audioUrl = await this.getMediaFile(audio);
+                        content.embedded_audio = audioUrl;
+                        content.message = ''; // 清空message，避免显示标记文本
+                    }
+
+                    if (content.image_url && content.image_url.length > 0) {
+                        for (let j = 0; j < content.image_url.length; j++) {
+                            content.image_url[j] = await this.getMediaFile(content.image_url[j]);
+                        }
+                    }
+
+                    if (content.audio_url) {
+                        content.audio_url = await this.getMediaFile(content.audio_url);
+                    }
+                }
+                this.messages = history;
+            }).catch(err => {
+                console.error(err);
+            });
+        },
+        async newConversation() {
+            return axios.get('/api/chat/new_conversation').then(response => {
+                const cid = response.data.data.conversation_id;
+                this.currCid = cid;
+                // Update the URL to reflect the new conversation
+                if (this.$route.path.startsWith('/chatbox')) {
+                    this.$router.push(`/chatbox/${cid}`);
+                } else {
+                    this.$router.push(`/chat/${cid}`);
+                }
+                this.getConversations();
+                return cid;
+            }).catch(err => {
+                console.error(err);
+                throw err;
+            });
+        },
+
+        newC() {
+            this.currCid = '';
+            this.selectedConversations = []; // 清除选中状态
+            this.messages = [];
+            if (this.$route.path.startsWith('/chatbox')) {
+                this.$router.push('/chatbox');
+            } else {
+                this.$router.push('/chat');
+            }
+        },
+
+        formatDate(timestamp) {
+            const date = new Date(timestamp * 1000); // 假设时间戳是以秒为单位
+            const options = {
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+                hour12: false
+            };
+            // 使用当前语言环境的locale
+            const locale = this.t('core.common.locale') || 'zh-CN';
+            return date.toLocaleString(locale, options).replace(/\//g, '-').replace(/, /g, ' ');
+        },
+
+        deleteConversation(cid) {
+            axios.get('/api/chat/delete_conversation?conversation_id=' + cid).then(response => {
+                this.getConversations();
+                this.currCid = '';
+                this.selectedConversations = []; // 清除选中状态
+                this.messages = [];
+            }).catch(err => {
+                console.error(err);
+            });
+        },
+
+        // 检查是否可以发送消息
+        canSendMessage() {
+            return (this.prompt && this.prompt.trim()) ||
+                this.stagedImagesName.length > 0 ||
+                this.stagedAudioUrl;
+        },
+
+        async sendMessage() {
+            // 检查是否有内容可发送
+            if (!this.canSendMessage()) {
+                console.log('没有内容可发送');
+                return;
+            }
+
+            if (this.currCid == '') {
+                const cid = await this.newConversation();
+                // URL is already updated in newConversation method
+            }
+
+            // 保存当前要发送的数据到临时变量
+            const promptToSend = this.prompt.trim();
+            const imageNamesToSend = [...this.stagedImagesName];
+            const audioNameToSend = this.stagedAudioUrl;
+
+            // 立即清空输入和附件预览
+            this.prompt = '';
+            this.stagedImagesName = [];
+            this.stagedImagesUrl = [];
+            this.stagedAudioUrl = "";
+
+            // Create a message object with actual URLs for display
+            const userMessage = {
+                type: 'user',
+                message: promptToSend,
+                image_url: [],
+                audio_url: null
+            };
+
+            // Convert image filenames to blob URLs for display
+            if (imageNamesToSend.length > 0) {
+                const imagePromises = imageNamesToSend.map(name => {
+                    if (!name.startsWith('blob:')) {
+                        return this.getMediaFile(name);
+                    }
+                    return Promise.resolve(name);
+                });
+                userMessage.image_url = await Promise.all(imagePromises);
+            }
+
+            // Convert audio filename to blob URL for display
+            if (audioNameToSend) {
+                if (!audioNameToSend.startsWith('blob:')) {
+                    userMessage.audio_url = await this.getMediaFile(audioNameToSend);
+                } else {
+                    userMessage.audio_url = audioNameToSend;
+                }
+            }
+
+            this.messages.push({
+                "content": userMessage,
+            });
+            this.loadingChat = true
+
+            // 从ProviderModelSelector组件获取当前选择
+            const selection = this.$refs.providerModelSelector?.getCurrentSelection();
+            const selectedProviderId = selection?.providerId || '';
+            const selectedModelName = selection?.modelName || '';
+
+            try {
+                const response = await fetch('/api/chat/send', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': 'Bearer ' + localStorage.getItem('token')
+                    },
+                    body: JSON.stringify({
+                        message: promptToSend,
+                        conversation_id: this.currCid,
+                        image_url: imageNamesToSend,
+                        audio_url: audioNameToSend ? [audioNameToSend] : [],
+                        selected_provider: selectedProviderId,
+                        selected_model: selectedModelName
+                    })
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+                let in_streaming = false;
+                let message_obj = null;
+
+                this.isStreaming = true
+
+                while (true) {
+                    try {
+                        const { done, value } = await reader.read();
+                        if (done) {
+                            console.log('SSE stream completed');
+                            break;
+                        }
+
+                        const chunk = decoder.decode(value, { stream: true });
+                        const lines = chunk.split('\n\n');
+
+                        for (let i = 0; i < lines.length; i++) {
+                            let line = lines[i].trim();
+
+                            if (!line) {
+                                continue;
+                            }
+
+                            // Parse SSE data
+                            let chunk_json;
+                            try {
+                                chunk_json = JSON.parse(line.replace('data: ', ''));
+                            } catch (parseError) {
+                                console.warn('JSON解析失败:', line, parseError);
+                                continue;
+                            }
+
+                            // 检查解析后的数据是否有效
+                            if (!chunk_json || typeof chunk_json !== 'object' || !chunk_json.hasOwnProperty('type')) {
+                                console.warn('无效的数据对象:', chunk_json);
+                                continue;
+                            }
+
+                            if (chunk_json.type === 'error') {
+                                console.error('Error received:', chunk_json.data);
+                                continue;
+                            }
+
+                            if (chunk_json.type === 'image') {
+                                let img = chunk_json.data.replace('[IMAGE]', '');
+                                const imageUrl = await this.getMediaFile(img);
+                                let bot_resp = {
+                                    type: 'bot',
+                                    message: '',
+                                    embedded_images: [imageUrl]
+                                }
+                                this.messages.push({
+                                    "content": bot_resp
+                                });
+                            } else if (chunk_json.type === 'record') {
+                                let audio = chunk_json.data.replace('[RECORD]', '');
+                                const audioUrl = await this.getMediaFile(audio);
+                                let bot_resp = {
+                                    type: 'bot',
+                                    message: '',
+                                    embedded_audio: audioUrl
+                                }
+                                this.messages.push({
+                                    "content": bot_resp
+                                });
+                            } else if (chunk_json.type === 'plain') {
+                                if (!in_streaming) {
+                                    message_obj = {
+                                        type: 'bot',
+                                        message: this.ref(chunk_json.data),
+                                    }
+                                    this.messages.push({
+                                        "content": message_obj
+                                    });
+                                    in_streaming = true;
+                                } else {
+                                    message_obj.message.value += chunk_json.data;
+                                }
+                            } else if (chunk_json.type === 'update_title') {
+                                // 更新对话标题
+                                const conversation = this.conversations.find(c => c.cid === chunk_json.cid);
+                                if (conversation) {
+                                    conversation.title = chunk_json.data;
+                                }
+                            }
+                            if ((chunk_json.type === 'break' && chunk_json.streaming) || !chunk_json.streaming) {
+                                // break means a segment end
+                                in_streaming = false;
+                            }
+                        }
+                    } catch (readError) {
+                        console.error('SSE读取错误:', readError);
+                        break;
+                    }
+                }
+
+                // Input and attachments are already cleared
+                this.loadingChat = false;
+
+                // get the latest conversations
+                this.getConversations();
+
+            } catch (err) {
+                console.error('发送消息失败:', err);
+                this.loadingChat = false;
+            } finally {
+                this.isStreaming = false;
+            }
+        },
+
+        handleInputKeyDown(e) {
+            if (e.ctrlKey && e.keyCode === 66) { // Ctrl+B组合键
+                e.preventDefault(); // 防止默认行为
+
+                // 防止重复触发
+                if (this.ctrlKeyDown) return;
+
+                this.ctrlKeyDown = true;
+
+                // 设置定时器识别长按
+                this.ctrlKeyTimer = setTimeout(() => {
+                    if (this.ctrlKeyDown && !this.isRecording) {
+                        this.startRecording();
+                    }
+                }, this.ctrlKeyLongPressThreshold);
+            }
+        },
+        handleInputKeyUp(e) {
+            if (e.keyCode === 66) { // B键释放
+                this.ctrlKeyDown = false;
+
+                // 清除定时器
+                if (this.ctrlKeyTimer) {
+                    clearTimeout(this.ctrlKeyTimer);
+                    this.ctrlKeyTimer = null;
+                }
+
+                // 如果正在录音，停止录音
+                if (this.isRecording) {
+                    this.stopRecording();
+                }
+            }
+        },
+
+        cleanupMediaCache() {
+            Object.values(this.mediaCache).forEach(url => {
+                if (url.startsWith('blob:')) {
+                    URL.revokeObjectURL(url);
+                }
+            });
+            this.mediaCache = {};
+        },
+    },
+}
+</script>
+
+<style>
+/* 基础动画 */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.05);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(20px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* 添加淡入动画 */
+@keyframes fadeInContent {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+/* 欢迎页样式 */
+.welcome-container {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.welcome-title {
+    font-size: 28px;
+    margin-bottom: 16px;
+}
+
+.bot-name {
+    font-weight: 700;
+    margin-left: 8px;
+    color: var(--v-theme-secondary);
+}
+
+.welcome-hint {
+    margin-top: 8px;
+    color: rgb(var(--v-theme-secondaryText));
+    font-size: 14px;
+}
+
+.welcome-hint code {
+    background-color: rgb(var(--v-theme-codeBg));
+    padding: 2px 6px;
+    margin: 0 4px;
+    border-radius: 4px;
+    font-family: 'Fira Code', monospace;
+    font-size: 13px;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+
+.chat-page-card {
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
+    overflow: hidden;
+}
+
+.chat-page-container {
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    padding: 0;
+    overflow: hidden;
+}
+
+.chat-layout {
+    height: 100%;
+    max-height: 100%;
+    display: flex;
+    overflow: hidden;
+}
+
+.sidebar-panel {
+    max-width: 270px;
+    min-width: 240px;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    border-right: 1px solid rgba(0, 0, 0, 0.05);
+    height: 100%;
+    max-height: 100%;
+    position: relative;
+    transition: all 0.3s ease;
+    overflow: hidden;
+}
+
+/* 侧边栏折叠状态 */
+.sidebar-collapsed {
+    max-width: 75px;
+    min-width: 75px;
+    transition: all 0.3s ease;
+}
+
+/* 当悬停展开时 */
+.sidebar-collapsed.sidebar-hovered {
+    max-width: 270px;
+    min-width: 240px;
+    transition: all 0.3s ease;
+}
+
+/* 侧边栏折叠按钮 */
+.sidebar-collapse-btn-container {
+    margin: 16px;
+    margin-bottom: 0px;
+    z-index: 10;
+}
+
+.sidebar-collapse-btn {
+    opacity: 0.6;
+    max-height: none;
+    overflow-y: visible;
+    padding: 0;
+}
+
+.conversation-item {
+    margin-bottom: 4px;
+    border-radius: 8px !important;
+    transition: all 0.2s ease;
+    height: auto !important;
+    min-height: 56px;
+    padding: 8px 16px !important;
+    position: relative;
+}
+
+.conversation-item:hover {
+    background-color: rgba(103, 58, 183, 0.05);
+}
+
+.conversation-item:hover .conversation-actions {
+    opacity: 1;
+    visibility: visible;
+}
+
+.conversation-actions {
+    display: flex;
+    gap: 4px;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.2s ease;
+}
+
+.edit-title-btn,
+.delete-conversation-btn {
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+}
+
+.edit-title-btn:hover,
+.delete-conversation-btn:hover {
+    opacity: 1;
+}
+
+.conversation-title {
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 1.3;
+    margin-bottom: 2px;
+    transition: opacity 0.25s ease;
+}
+
+.timestamp {
+    font-size: 11px;
+    color: var(--v-theme-secondaryText);
+    line-height: 1;
+    transition: opacity 0.25s ease;
+}
+
+.sidebar-section-title {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--v-theme-secondaryText);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 12px;
+    padding-left: 4px;
+    transition: opacity 0.25s ease;
+    white-space: nowrap;
+}
+
+.status-chips {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 8px;
+    margin-bottom: 8px;
+    transition: opacity 0.25s ease;
+}
+
+.status-chips .v-chip {
+    flex: 1 1 0;
+    justify-content: center;
+    opacity: 0.7;
+}
+
+.status-chip {
+    font-size: 12px;
+    height: 24px !important;
+}
+
+.no-conversations {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 150px;
+    opacity: 0.6;
+    gap: 12px;
+}
+
+.no-conversations-text {
+    font-size: 14px;
+    color: var(--v-theme-secondaryText);
+    transition: opacity 0.25s ease;
+}
+
+.chat-content-panel {
+    height: 100%;
+    max-height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/* 输入区域样式 */
+.input-area {
+    padding: 16px;
+    background-color: var(--v-theme-surface);
+    position: relative;
+    border-top: 1px solid var(--v-theme-border);
+    flex-shrink: 0;
+    /* 防止输入区域被压缩 */
+}
+
+/* 附件预览区 */
+.attachments-preview {
+    display: flex;
+    gap: 8px;
+    margin-top: 8px;
+    max-width: 900px;
+    margin: 8px auto 0;
+    flex-wrap: wrap;
+}
+
+.image-preview,
+.audio-preview {
+    position: relative;
+    display: inline-flex;
+}
+
+.preview-image {
+    width: 60px;
+    height: 60px;
+    object-fit: cover;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.audio-chip {
+    height: 36px;
+    border-radius: 18px;
+}
+
+.remove-attachment-btn {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    opacity: 0.8;
+    transition: opacity 0.2s;
+}
+
+.remove-attachment-btn:hover {
+    opacity: 1;
+}
+
+/* 动画类 */
+.fade-in {
+    animation: fadeIn 0.3s ease-in-out;
+}
+
+/* 对话框标题样式 */
+.dialog-title {
+    font-size: 18px;
+    font-weight: 500;
+    padding-bottom: 8px;
+}
+
+/* 对话标题和时间样式 */
+.conversation-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px;
+    padding-left: 16px;
+    border-bottom: 1px solid var(--v-theme-border);
+    width: 100%;
+    padding-right: 32px;
+    flex-shrink: 0;
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/src/components/chat/MessageList.vue b/dashboard/src/components/chat/MessageList.vue
new file mode 100644
index 00000000..8d244d44
--- /dev/null
+++ b/dashboard/src/components/chat/MessageList.vue
@@ -0,0 +1,775 @@
+<template>
+    <div class="messages-container" ref="messageContainer">
+        <!-- 聊天消息列表 -->
+        <div class="message-list">
+            <div class="message-item fade-in" v-for="(msg, index) in messages" :key="index">
+                <!-- 用户消息 -->
+                <div v-if="msg.content.type == 'user'" class="user-message">
+                    <div class="message-bubble user-bubble" :class="{ 'has-audio': msg.content.audio_url }"
+                        :style="{ backgroundColor: isDark ? '#2d2e30' : '#e7ebf4' }">
+                        <pre
+                            style="font-family: inherit; white-space: pre-wrap; word-wrap: break-word;">{{ msg.content.message }}</pre>
+
+                        <!-- 图片附件 -->
+                        <div class="image-attachments" v-if="msg.content.image_url && msg.content.image_url.length > 0">
+                            <div v-for="(img, index) in msg.content.image_url" :key="index" class="image-attachment">
+                                <img :src="img" class="attached-image" @click="$emit('openImagePreview', img)" />
+                            </div>
+                        </div>
+
+                        <!-- 音频附件 -->
+                        <div class="audio-attachment" v-if="msg.content.audio_url && msg.content.audio_url.length > 0">
+                            <audio controls class="audio-player">
+                                <source :src="msg.content.audio_url" type="audio/wav">
+                                {{ t('messages.errors.browser.audioNotSupported') }}
+                            </audio>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Bot Messages -->
+                <div v-else class="bot-message">
+                    <div v-if="isStreaming && index === messages.length - 1" style="width: 36px; height: 36px;">
+                        <v-progress-circular indeterminate size="28" width="2"
+                            style="margin-top: 16px;"></v-progress-circular>
+                    </div>
+                    <v-avatar v-else class="bot-avatar" size="36">
+                        <span class="text-h2">✨</span>
+                    </v-avatar>
+                    <div class="bot-message-content">
+                        <div class="message-bubble bot-bubble">
+                            <!-- Text -->
+                            <div v-if="msg.content.message && msg.content.message.trim()"
+                                v-html="md.render(msg.content.message)" class="markdown-content"></div>
+
+                            <!-- Image -->
+                            <div class="embedded-images"
+                                v-if="msg.content.embedded_images && msg.content.embedded_images.length > 0">
+                                <div v-for="(img, imgIndex) in msg.content.embedded_images" :key="imgIndex"
+                                    class="embedded-image">
+                                    <img :src="img" class="bot-embedded-image"
+                                        @click="$emit('openImagePreview', img)" />
+                                </div>
+                            </div>
+
+                            <!-- Audio -->
+                            <div class="embedded-audio" v-if="msg.content.embedded_audio">
+                                <audio controls class="audio-player">
+                                    <source :src="msg.content.embedded_audio" type="audio/wav">
+                                    {{ t('messages.errors.browser.audioNotSupported') }}
+                                </audio>
+                            </div>
+                        </div>
+                        <div class="message-actions">
+                            <v-btn :icon="getCopyIcon(index)" size="small" variant="text" class="copy-message-btn"
+                                :class="{ 'copy-success': isCopySuccess(index) }"
+                                @click="copyBotMessage(msg.content.message, index)" :title="t('core.common.copy')" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { useI18n, useModuleI18n } from '@/i18n/composables';
+import MarkdownIt from 'markdown-it';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/github.css';
+
+const md = new MarkdownIt({
+    html: false,
+    breaks: true,
+    linkify: true,
+    highlight: function (code, lang) {
+        if (lang && hljs.getLanguage(lang)) {
+            try {
+                return hljs.highlight(code, { language: lang }).value;
+            } catch (err) {
+                console.error('Highlight error:', err);
+            }
+        }
+        return hljs.highlightAuto(code).value;
+    }
+});
+
+export default {
+    name: 'MessageList',
+    props: {
+        messages: {
+            type: Array,
+            required: true
+        },
+        isDark: {
+            type: Boolean,
+            default: false
+        },
+        isStreaming: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['openImagePreview'],
+    setup() {
+        const { t } = useI18n();
+        const { tm } = useModuleI18n('features/chat');
+
+        return {
+            t,
+            tm,
+            md
+        };
+    },
+    data() {
+        return {
+            copiedMessages: new Set(),
+            isUserNearBottom: true,
+            scrollThreshold: 1,
+            scrollTimer: null
+        };
+    },
+    mounted() {
+        this.initCodeCopyButtons();
+        this.initImageClickEvents();
+        this.addScrollListener();
+        this.scrollToBottom();
+    },
+    updated() {
+        this.initCodeCopyButtons();
+        this.initImageClickEvents();
+        if (this.isUserNearBottom) {
+            this.scrollToBottom();
+        }
+    },
+    methods: {
+        // 复制代码到剪贴板
+        copyCodeToClipboard(code) {
+            navigator.clipboard.writeText(code).then(() => {
+                console.log('代码已复制到剪贴板');
+            }).catch(err => {
+                console.error('复制失败:', err);
+                // 如果现代API失败，使用传统方法
+                const textArea = document.createElement('textarea');
+                textArea.value = code;
+                document.body.appendChild(textArea);
+                textArea.select();
+                try {
+                    document.execCommand('copy');
+                    console.log('代码已复制到剪贴板 (fallback)');
+                } catch (fallbackErr) {
+                    console.error('复制失败 (fallback):', fallbackErr);
+                }
+                document.body.removeChild(textArea);
+            });
+        },
+
+        // 复制bot消息到剪贴板
+        copyBotMessage(message, messageIndex) {
+            // 获取对应的消息对象
+            const msgObj = this.messages[messageIndex].content;
+            let textToCopy = '';
+
+            // 如果有文本消息，添加到复制内容中
+            if (message && message.trim()) {
+                // 移除HTML标签，获取纯文本
+                const tempDiv = document.createElement('div');
+                tempDiv.innerHTML = message;
+                textToCopy = tempDiv.textContent || tempDiv.innerText || message;
+            }
+
+            // 如果有内嵌图片，添加说明
+            if (msgObj && msgObj.embedded_images && msgObj.embedded_images.length > 0) {
+                if (textToCopy) textToCopy += '\n\n';
+                textToCopy += `[包含 ${msgObj.embedded_images.length} 张图片]`;
+            }
+
+            // 如果有内嵌音频，添加说明
+            if (msgObj && msgObj.embedded_audio) {
+                if (textToCopy) textToCopy += '\n\n';
+                textToCopy += '[包含音频内容]';
+            }
+
+            // 如果没有任何内容，使用默认文本
+            if (!textToCopy.trim()) {
+                textToCopy = '[媒体内容]';
+            }
+
+            navigator.clipboard.writeText(textToCopy).then(() => {
+                console.log('消息已复制到剪贴板');
+                this.showCopySuccess(messageIndex);
+            }).catch(err => {
+                console.error('复制失败:', err);
+                // 如果现代API失败，使用传统方法
+                const textArea = document.createElement('textarea');
+                textArea.value = textToCopy;
+                document.body.appendChild(textArea);
+                textArea.select();
+                try {
+                    document.execCommand('copy');
+                    console.log('消息已复制到剪贴板 (fallback)');
+                    this.showCopySuccess(messageIndex);
+                } catch (fallbackErr) {
+                    console.error('复制失败 (fallback):', fallbackErr);
+                }
+                document.body.removeChild(textArea);
+            });
+        },
+
+        // 显示复制成功提示
+        showCopySuccess(messageIndex) {
+            this.copiedMessages.add(messageIndex);
+
+            // 2秒后移除成功状态
+            setTimeout(() => {
+                this.copiedMessages.delete(messageIndex);
+            }, 2000);
+        },
+
+        // 获取复制按钮图标
+        getCopyIcon(messageIndex) {
+            return this.copiedMessages.has(messageIndex) ? 'mdi-check' : 'mdi-content-copy';
+        },
+
+        // 检查是否为复制成功状态
+        isCopySuccess(messageIndex) {
+            return this.copiedMessages.has(messageIndex);
+        },
+
+        // 获取复制图标SVG
+        getCopyIconSvg() {
+            return '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
+        },
+
+        // 获取成功图标SVG
+        getSuccessIconSvg() {
+            return '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20,6 9,17 4,12"></polyline></svg>';
+        },
+
+        // 初始化代码块复制按钮
+        initCodeCopyButtons() {
+            this.$nextTick(() => {
+                const codeBlocks = this.$refs.messageContainer?.querySelectorAll('pre code') || [];
+                codeBlocks.forEach((codeBlock, index) => {
+                    const pre = codeBlock.parentElement;
+                    if (pre && !pre.querySelector('.copy-code-btn')) {
+                        const button = document.createElement('button');
+                        button.className = 'copy-code-btn';
+                        button.innerHTML = this.getCopyIconSvg();
+                        button.title = '复制代码';
+                        button.addEventListener('click', () => {
+                            this.copyCodeToClipboard(codeBlock.textContent);
+                            // 显示复制成功提示
+                            button.innerHTML = this.getSuccessIconSvg();
+                            button.style.color = '#4caf50';
+                            setTimeout(() => {
+                                button.innerHTML = this.getCopyIconSvg();
+                                button.style.color = '';
+                            }, 2000);
+                        });
+                        pre.style.position = 'relative';
+                        pre.appendChild(button);
+                    }
+                });
+            });
+        },
+
+        initImageClickEvents() {
+            this.$nextTick(() => {
+                // 查找所有动态生成的图片（在markdown-content中）
+                const images = document.querySelectorAll('.markdown-content img');
+                images.forEach((img) => {
+                    if (!img.hasAttribute('data-click-enabled')) {
+                        img.style.cursor = 'pointer';
+                        img.setAttribute('data-click-enabled', 'true');
+                        img.onclick = () => this.$emit('openImagePreview', img.src);
+                    }
+                });
+            });
+        },
+
+        scrollToBottom() {
+            this.$nextTick(() => {
+                const container = this.$refs.messageContainer;
+                if (container) {
+                    container.scrollTop = container.scrollHeight;
+                    this.isUserNearBottom = true; // 程序滚动到底部后标记用户在底部
+                }
+            });
+        },
+
+        // 添加滚动事件监听器
+        addScrollListener() {
+            const container = this.$refs.messageContainer;
+            if (container) {
+                container.addEventListener('scroll', this.throttledHandleScroll);
+            }
+        },
+
+        // 节流处理滚动事件
+        throttledHandleScroll() {
+            if (this.scrollTimer) return;
+
+            this.scrollTimer = setTimeout(() => {
+                this.handleScroll();
+                this.scrollTimer = null;
+            }, 50); // 50ms 节流
+        },
+
+        // 处理滚动事件
+        handleScroll() {
+            const container = this.$refs.messageContainer;
+            if (container) {
+                const { scrollTop, scrollHeight, clientHeight } = container;
+                const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
+
+                // 判断用户是否在底部附近
+                this.isUserNearBottom = distanceFromBottom <= this.scrollThreshold;
+            }
+        },
+
+        // 组件销毁时移除监听器
+        beforeUnmount() {
+            const container = this.$refs.messageContainer;
+            if (container) {
+                container.removeEventListener('scroll', this.throttledHandleScroll);
+            }
+            // 清理定时器
+            if (this.scrollTimer) {
+                clearTimeout(this.scrollTimer);
+                this.scrollTimer = null;
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+/* 基础动画 */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.messages-container {
+    height: 100%;
+    max-height: 100%;
+    overflow-y: auto;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+}
+
+/* 消息列表样式 */
+.message-list {
+    max-width: 900px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+.message-item {
+    margin-bottom: 24px;
+    animation: fadeIn 0.3s ease-out;
+}
+
+.user-message {
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.bot-message {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.bot-message-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    max-width: 80%;
+    position: relative;
+}
+
+.message-actions {
+    display: flex;
+    gap: 4px;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    margin-left: 8px;
+}
+
+.bot-message:hover .message-actions {
+    opacity: 1;
+}
+
+.copy-message-btn {
+    opacity: 0.6;
+    transition: all 0.2s ease;
+    color: var(--v-theme-secondary);
+}
+
+.copy-message-btn:hover {
+    opacity: 1;
+    background-color: rgba(103, 58, 183, 0.1);
+}
+
+.copy-message-btn.copy-success {
+    color: #4caf50;
+    opacity: 1;
+}
+
+.copy-message-btn.copy-success:hover {
+    color: #4caf50;
+    background-color: rgba(76, 175, 80, 0.1);
+}
+
+.message-bubble {
+    padding: 8px 16px;
+    border-radius: 12px;
+}
+
+.user-bubble {
+    color: var(--v-theme-primaryText);
+    padding: 18px 20px;
+    font-size: 15px;
+    max-width: 60%;
+    border-radius: 1.5rem;
+}
+
+.bot-bubble {
+    border: 1px solid var(--v-theme-border);
+    color: var(--v-theme-primaryText);
+    font-size: 15px;
+    max-width: 100%;
+}
+
+.user-avatar,
+.bot-avatar {
+    align-self: flex-start;
+    margin-top: 12px;
+}
+
+/* 附件样式 */
+.image-attachments {
+    display: flex;
+    gap: 8px;
+    margin-top: 8px;
+    flex-wrap: wrap;
+}
+
+.image-attachment {
+    position: relative;
+    display: inline-block;
+}
+
+.attached-image {
+    width: 120px;
+    height: 120px;
+    object-fit: cover;
+    border-radius: 12px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s ease;
+}
+
+.audio-attachment {
+    margin-top: 8px;
+    min-width: 250px;
+}
+
+/* 包含音频的消息气泡最小宽度 */
+.message-bubble.has-audio {
+    min-width: 280px;
+}
+
+.audio-player {
+    width: 100%;
+    height: 36px;
+    border-radius: 18px;
+}
+
+.embedded-images {
+    margin-top: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.embedded-image {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.bot-embedded-image {
+    max-width: 80%;
+    width: auto;
+    height: auto;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+
+.bot-embedded-image:hover {
+    transform: scale(1.02);
+}
+
+.embedded-audio {
+    width: 300px;
+    margin-top: 8px;
+}
+
+.embedded-audio .audio-player {
+    width: 100%;
+    max-width: 300px;
+}
+
+/* 动画类 */
+.fade-in {
+    animation: fadeIn 0.3s ease-in-out;
+}
+</style>
+
+<style>
+/* Markdown内容样式 - 需要全局样式 */
+.markdown-content {
+    font-family: inherit;
+    line-height: 1.6;
+}
+
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4,
+.markdown-content h5,
+.markdown-content h6 {
+    margin-top: 16px;
+    margin-bottom: 10px;
+    font-weight: 600;
+    color: var(--v-theme-primaryText);
+}
+
+.markdown-content h1 {
+    font-size: 1.8em;
+    border-bottom: 1px solid var(--v-theme-border);
+    padding-bottom: 6px;
+}
+
+.markdown-content h2 {
+    font-size: 1.5em;
+}
+
+.markdown-content h3 {
+    font-size: 1.3em;
+}
+
+.markdown-content li {
+    margin-left: 16px;
+    margin-bottom: 4px;
+}
+
+.markdown-content p {
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+}
+
+.markdown-content pre {
+    background-color: var(--v-theme-surface);
+    padding: 12px;
+    border-radius: 6px;
+    overflow-x: auto;
+    margin: 12px 0;
+    position: relative;
+}
+
+.markdown-content code {
+    background-color: rgb(var(--v-theme-codeBg));
+    padding: 2px 4px;
+    border-radius: 4px;
+    font-family: 'Fira Code', monospace;
+    font-size: 0.9em;
+    color: var(--v-theme-code);
+}
+
+/* 代码块中的code标签样式 */
+.markdown-content pre code {
+    background-color: transparent;
+    padding: 0;
+    border-radius: 0;
+    font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: 0.85em;
+    color: inherit;
+    display: block;
+    overflow-x: auto;
+    line-height: 1.5;
+}
+
+/* 自定义代码高亮样式 */
+.markdown-content pre {
+    border: 1px solid var(--v-theme-border);
+    background-color: rgb(var(--v-theme-preBg));
+    border-radius: 16px;
+    padding: 16px;
+}
+
+/* 确保highlight.js的样式正确应用 */
+.markdown-content pre code.hljs {
+    background: transparent !important;
+    color: inherit;
+}
+
+/* 亮色主题下的代码高亮 */
+.v-theme--light .markdown-content pre {
+    background-color: #f6f8fa;
+}
+
+/* 暗色主题下的代码块样式 */
+.v-theme--dark .markdown-content pre {
+    background-color: #0d1117 !important;
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+.v-theme--dark .markdown-content pre code {
+    color: #e6edf3 !important;
+}
+
+/* 暗色主题下的highlight.js样式覆盖 */
+.v-theme--dark .hljs {
+    background: #0d1117 !important;
+    color: #e6edf3 !important;
+}
+
+.v-theme--dark .hljs-keyword,
+.v-theme--dark .hljs-selector-tag,
+.v-theme--dark .hljs-built_in,
+.v-theme--dark .hljs-name,
+.v-theme--dark .hljs-tag {
+    color: #ff7b72 !important;
+}
+
+.v-theme--dark .hljs-string,
+.v-theme--dark .hljs-title,
+.v-theme--dark .hljs-section,
+.v-theme--dark .hljs-attribute,
+.v-theme--dark .hljs-literal,
+.v-theme--dark .hljs-template-tag,
+.v-theme--dark .hljs-template-variable,
+.v-theme--dark .hljs-type,
+.v-theme--dark .hljs-addition {
+    color: #a5d6ff !important;
+}
+
+.v-theme--dark .hljs-comment,
+.v-theme--dark .hljs-quote,
+.v-theme--dark .hljs-deletion,
+.v-theme--dark .hljs-meta {
+    color: #8b949e !important;
+}
+
+.v-theme--dark .hljs-number,
+.v-theme--dark .hljs-regexp,
+.v-theme--dark .hljs-symbol,
+.v-theme--dark .hljs-variable,
+.v-theme--dark .hljs-template-variable,
+.v-theme--dark .hljs-link,
+.v-theme--dark .hljs-selector-attr,
+.v-theme--dark .hljs-selector-pseudo {
+    color: #79c0ff !important;
+}
+
+.v-theme--dark .hljs-function,
+.v-theme--dark .hljs-class,
+.v-theme--dark .hljs-title.class_ {
+    color: #d2a8ff !important;
+}
+
+/* 复制按钮样式 */
+.copy-code-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: rgba(255, 255, 255, 0.9);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    padding: 6px;
+    cursor: pointer;
+    opacity: 0;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #666;
+    font-size: 12px;
+    z-index: 10;
+    backdrop-filter: blur(4px);
+}
+
+.copy-code-btn:hover {
+    background: rgba(255, 255, 255, 1);
+    color: #333;
+    transform: scale(1.05);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.copy-code-btn:active {
+    transform: scale(0.95);
+}
+
+.markdown-content pre:hover .copy-code-btn {
+    opacity: 1;
+}
+
+.v-theme--dark .copy-code-btn {
+    background: rgba(45, 45, 45, 0.9);
+    border-color: rgba(255, 255, 255, 0.15);
+    color: #ccc;
+}
+
+.v-theme--dark .copy-code-btn:hover {
+    background: rgba(45, 45, 45, 1);
+    color: #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.markdown-content img {
+    max-width: 100%;
+    border-radius: 8px;
+    margin: 10px 0;
+}
+
+.markdown-content blockquote {
+    border-left: 4px solid var(--v-theme-secondary);
+    padding-left: 16px;
+    color: var(--v-theme-secondaryText);
+    margin: 16px 0;
+}
+
+.markdown-content table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 16px 0;
+}
+
+.markdown-content th,
+.markdown-content td {
+    border: 1px solid var(--v-theme-background);
+    padding: 8px 12px;
+    text-align: left;
+}
+
+.markdown-content th {
+    background-color: var(--v-theme-containerBg);
+}
+</style>
diff --git a/dashboard/src/components/shared/UiParentCard.vue b/dashboard/src/components/shared/UiParentCard.vue
deleted file mode 100644
index 5eda86a4..00000000
--- a/dashboard/src/components/shared/UiParentCard.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  title: String
-});
-</script>
-
-<template>
-  <v-card variant="outlined" elevation="0" class="withbg">
-    <v-card-item>
-      <div class="d-sm-flex align-center justify-space-between">
-        <v-card-title>{{ props.title }}</v-card-title>
-        <slot name="action"></slot>
-      </div>
-    </v-card-item>
-    <v-divider></v-divider>
-    <v-card-text>
-      <slot />
-    </v-card-text>
-  </v-card>
-</template>
diff --git a/dashboard/src/views/ChatBoxPage.vue b/dashboard/src/views/ChatBoxPage.vue
index 123b7b4a..940b52dc 100644
--- a/dashboard/src/views/ChatBoxPage.vue
+++ b/dashboard/src/views/ChatBoxPage.vue
@@ -1,5 +1,5 @@
 <script setup>
-import ChatPage from './ChatPage.vue';
+import Chat from '@/components/chat/Chat.vue'
 import { useCustomizerStore } from '@/stores/customizer';
 const customizer = useCustomizerStore();
 </script>
@@ -9,7 +9,7 @@ const customizer = useCustomizerStore();
         <div
             style="height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
             <div id="container">
-                <ChatPage :chatbox-mode="true"></ChatPage>
+                <Chat :chatbox-mode="true"></Chat>
             </div>
         </div>
     </v-app>
@@ -18,24 +18,6 @@ const customizer = useCustomizerStore();
 <style scoped>
 #container {
     width: 100%;
-    height: 100%;
-}
-
-@media (min-width: 768px) {
-    #container {
-        min-width: 600px;
-        min-height: 370px;
-        max-width: 1100px;
-        max-height: 860px;
-        padding: 36px;
-    }
-}
-
-@media (max-width: 767px) {
-    #container {
-        width: 100%;
-        height: 100%;
-        padding: 0;
-    }
+    height: 100vh;
 }
 </style>
\ No newline at end of file
diff --git a/dashboard/src/views/ChatPage.vue b/dashboard/src/views/ChatPage.vue
index eb0bdf23..93dfdad8 100644
--- a/dashboard/src/views/ChatPage.vue
+++ b/dashboard/src/views/ChatPage.vue
@@ -1,2048 +1,15 @@
-<template>
-    <v-card class="chat-page-card">
-        <v-card-text class="chat-page-container">
-            <div class="chat-layout">
-                <div class="sidebar-panel" :class="{ 'sidebar-collapsed': sidebarCollapsed }"
-                    :style="{ 'background-color': isDark ? sidebarCollapsed ? '#1e1e1e' : '#2d2d2d' : sidebarCollapsed ? '#ffffff' : '#f5f5f5' }"
-                    @mouseenter="handleSidebarMouseEnter" @mouseleave="handleSidebarMouseLeave">
-
-                    <div style="display: flex; align-items: center; justify-content: center; padding: 16px; padding-bottom: 0px;"
-                        v-if="chatboxMode">
-                        <img width="50" src="@/assets/images/astrbot_logo_mini.webp" alt="AstrBot Logo">
-                        <span v-if="!sidebarCollapsed" style="font-weight: 1000; font-size: 26px; margin-left: 8px;"
-                            class="text-secondary">AstrBot</span>
-                    </div>
-
-
-                    <div class="sidebar-collapse-btn-container">
-                        <v-btn icon class="sidebar-collapse-btn" @click="toggleSidebar" variant="text"
-                            color="deep-purple">
-                            <v-icon>{{ (sidebarCollapsed || (!sidebarCollapsed && sidebarHoverExpanded)) ?
-                                'mdi-chevron-right' : 'mdi-chevron-left' }}</v-icon>
-                        </v-btn>
-                    </div>
-
-                    <div style="padding: 16px; padding-top: 8px;">
-                        <v-btn block variant="text" class="new-chat-btn" @click="newC" :disabled="!currCid"
-                            v-if="!sidebarCollapsed" prepend-icon="mdi-plus"
-                            style="background-color: transparent !important; border-radius: 4px;">{{
-                                tm('actions.newChat') }}</v-btn>
-                        <v-btn icon="mdi-plus" rounded="lg" @click="newC" :disabled="!currCid" v-if="sidebarCollapsed"
-                            elevation="0"></v-btn>
-                    </div>
-                    <div v-if="!sidebarCollapsed">
-                        <v-divider class="mx-4"></v-divider>
-                    </div>
-
-
-                    <div style="overflow-y: auto; flex-grow: 1;" :class="{ 'fade-in': sidebarHoverExpanded }"
-                        v-if="!sidebarCollapsed">
-                        <v-card v-if="conversations.length > 0" flat style="background-color: transparent;">
-                            <v-list density="compact" nav class="conversation-list"
-                                style="background-color: transparent;" v-model:selected="selectedConversations" @update:selected="getConversationMessages">
-                                <v-list-item v-for="(item, i) in conversations" :key="item.cid" :value="item.cid"
-                                    rounded="lg" class="conversation-item" active-color="secondary">
-                                    <v-list-item-title v-if="!sidebarCollapsed" class="conversation-title">{{ item.title
-                                        || tm('conversation.newConversation') }}</v-list-item-title>
-                                    <!-- <v-list-item-subtitle v-if="!sidebarCollapsed" class="timestamp">{{
-                                        formatDate(item.updated_at)
-                                        }}</v-list-item-subtitle> -->
-
-                                    <template v-if="!sidebarCollapsed" v-slot:append>
-                                        <div class="conversation-actions">
-                                            <v-btn icon="mdi-pencil" size="x-small" variant="text"
-                                                class="edit-title-btn"
-                                                @click.stop="showEditTitleDialog(item.cid, item.title)" />
-                                            <v-btn icon="mdi-delete" size="x-small" variant="text"
-                                                class="delete-conversation-btn" color="error"
-                                                @click.stop="deleteConversation(item.cid)" />
-                                        </div>
-                                    </template>
-                                </v-list-item>
-                            </v-list>
-                        </v-card>
-
-                        <v-fade-transition>
-                            <div class="no-conversations" v-if="conversations.length === 0">
-                                <v-icon icon="mdi-message-text-outline" size="large" color="grey-lighten-1"></v-icon>
-                                <div class="no-conversations-text" v-if="!sidebarCollapsed || sidebarHoverExpanded">
-                                    {{ tm('conversation.noHistory') }}</div>
-                            </div>
-                        </v-fade-transition>
-                    </div>
-
-                </div>
-
-                <!-- 右侧聊天内容区域 -->
-                <div class="chat-content-panel">
-
-                    <div class="conversation-header fade-in">
-                        <div class="conversation-header-content" v-if="currCid && getCurrentConversation">
-                            <h2 class="conversation-header-title">{{ getCurrentConversation.title ||
-                                tm('conversation.newConversation')
-                                }}</h2>
-                            <div class="conversation-header-time">{{ formatDate(getCurrentConversation.updated_at) }}
-                            </div>
-                        </div>
-                        <div class="conversation-header-actions">
-                            <!-- router 推送到 /chatbox -->
-                            <v-tooltip :text="tm('actions.fullscreen')" v-if="!chatboxMode">
-                                <template v-slot:activator="{ props }">
-                                    <v-icon v-bind="props"
-                                        @click="router.push(currCid ? `/chatbox/${currCid}` : '/chatbox')"
-                                        class="fullscreen-icon">mdi-fullscreen</v-icon>
-                                </template>
-                            </v-tooltip>
-                            <!-- 语言切换按钮 -->
-                            <v-tooltip :text="t('core.common.language')" v-if="chatboxMode">
-                                <template v-slot:activator="{ props }">
-                                    <LanguageSwitcher variant="chatbox" />
-                                </template>
-                            </v-tooltip>
-                            <!-- 主题切换按钮 -->
-                            <v-tooltip :text="isDark ? tm('modes.lightMode') : tm('modes.darkMode')" v-if="chatboxMode">
-                                <template v-slot:activator="{ props }">
-                                    <v-btn v-bind="props" icon @click="toggleTheme" class="theme-toggle-icon"
-                                        size="small" rounded="sm" style="margin-right: 8px;" variant="text">
-                                        <v-icon>{{ isDark ? 'mdi-weather-night' : 'mdi-white-balance-sunny' }}</v-icon>
-                                    </v-btn>
-                                </template>
-                            </v-tooltip>
-                            <!-- router 推送到 /chat -->
-                            <v-tooltip :text="tm('actions.exitFullscreen')" v-if="chatboxMode">
-                                <template v-slot:activator="{ props }">
-                                    <v-icon v-bind="props" @click="router.push(currCid ? `/chat/${currCid}` : '/chat')"
-                                        class="fullscreen-icon">mdi-fullscreen-exit</v-icon>
-                                </template>
-                            </v-tooltip>
-                        </div>
-                    </div>
-                    <v-divider v-if="currCid && getCurrentConversation" class="conversation-divider"></v-divider>
-
-                    <div class="messages-container" ref="messageContainer">
-                        <!-- 空聊天欢迎页 -->
-                        <div class="welcome-container fade-in" v-if="messages.length == 0">
-                            <div class="welcome-title">
-                                <span>Hello, I'm</span>
-                                <span class="bot-name">AstrBot ⭐</span>
-                            </div>
-                            <div class="welcome-hint markdown-content">
-                                <span>{{ t('core.common.type') }}</span>
-                                <code>help</code>
-                                <span>{{ tm('shortcuts.help') }} 😊</span>
-                            </div>
-                            <div class="welcome-hint markdown-content">
-                                <span>{{ t('core.common.longPress') }}</span>
-                                <code>Ctrl + B</code>
-                                <span>{{ tm('shortcuts.voiceRecord') }} 🎤</span>
-                            </div>
-                            <div class="welcome-hint markdown-content">
-                                <span>{{ t('core.common.press') }}</span>
-                                <code>Ctrl + V</code>
-                                <span>{{ tm('shortcuts.pasteImage') }} 🏞️</span>
-                            </div>
-                        </div>
-
-                        <!-- 聊天消息列表 -->
-                        <div v-else class="message-list">
-                            <div class="message-item fade-in" v-for="(msg, index) in messages" :key="index">
-                                <!-- 用户消息 -->
-                                <div v-if="msg.content.type == 'user'" class="user-message">
-                                    <div class="message-bubble user-bubble"
-                                        :class="{ 'has-audio': msg.content.audio_url }"
-                                        :style="{ backgroundColor: isDark ? '#2d2e30' : '#e7ebf4' }">
-                                        <pre style="font-family: inherit; white-space: pre-wrap; word-wrap: break-word;">{{ msg.content.message }}</pre>
-
-                                        <!-- 图片附件 -->
-                                        <div class="image-attachments" v-if="msg.content.image_url && msg.content.image_url.length > 0">
-                                            <div v-for="(img, index) in msg.content.image_url" :key="index"
-                                                class="image-attachment">
-                                                <img :src="img" class="attached-image" @click="openImagePreview(img)" />
-                                            </div>
-                                        </div>
-
-                                        <!-- 音频附件 -->
-                                        <div class="audio-attachment" v-if="msg.content.audio_url && msg.content.audio_url.length > 0">
-                                            <audio controls class="audio-player">
-                                                <source :src="msg.content.audio_url" type="audio/wav">
-                                                {{ t('messages.errors.browser.audioNotSupported') }}
-                                            </audio>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <!-- Bot Messages -->
-                                <div v-else class="bot-message">
-                                    <v-avatar class="bot-avatar" size="36">
-                                        <span class="text-h2">✨</span>
-                                    </v-avatar>
-                                    <div class="bot-message-content">
-                                        <div class="message-bubble bot-bubble">
-                                            <!-- Text -->
-                                            <div v-if="msg.content.message && msg.content.message.trim()" 
-                                                 v-html="md.render(msg.content.message)" 
-                                                 class="markdown-content"></div>
-                                            
-                                            <!-- Image -->
-                                            <div class="embedded-images" v-if="msg.content.embedded_images && msg.content.embedded_images.length > 0">
-                                                <div v-for="(img, imgIndex) in msg.content.embedded_images" :key="imgIndex"
-                                                     class="embedded-image">
-                                                    <img :src="img" class="bot-embedded-image" @click="openImagePreview(img)" />
-                                                </div>
-                                            </div>
-                                            
-                                            <!-- Audio -->
-                                            <div class="embedded-audio" v-if="msg.content.embedded_audio">
-                                                <audio controls class="audio-player">
-                                                    <source :src="msg.content.embedded_audio" type="audio/wav">
-                                                    {{ t('messages.errors.browser.audioNotSupported') }}
-                                                </audio>
-                                            </div>
-                                        </div>
-                                        <div class="message-actions">
-                                            <v-btn :icon="getCopyIcon(index)" size="small" variant="text"
-                                                class="copy-message-btn"
-                                                :class="{ 'copy-success': isCopySuccess(index) }"
-                                                @click="copyBotMessage(msg.content.message, index)"
-                                                :title="t('core.common.copy')" />
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- 输入区域 -->
-                    <div class="input-area fade-in">
-                        <div
-                            style="width: 85%; max-width: 900px; margin: 0 auto; border: 1px solid #e0e0e0; border-radius: 24px; padding: 4px;">
-                            <textarea id="input-field" v-model="prompt" @keydown="handleInputKeyDown"
-                                @click:clear="clearMessage" placeholder="Ask AstrBot..."
-                                style="width: 100%; resize: none; outline: none; border: 1px solid var(--v-theme-border); border-radius: 12px; padding: 8px 16px; min-height: 40px; font-family: inherit; font-size: 16px; background-color: var(--v-theme-surface);"></textarea>
-                            <div
-                                style="display: flex; justify-content: space-between; align-items: center; padding: 0px 8px;">
-                                <div style="display: flex; justify-content: flex-start; margin-top: 4px;">
-                                    <!-- 选择提供商和模型 -->
-                                    <ProviderModelSelector ref="providerModelSelector" />
-                                </div>
-                                <div style="display: flex; justify-content: flex-end; margin-top: 8px;">
-                                    <input type="file" ref="imageInput" @change="handleFileSelect" accept="image/*" style="display: none" multiple />
-                                    <v-btn @click="triggerImageInput" icon="mdi-plus" variant="text" color="deep-purple"
-                                        class="add-btn" size="small" />
-                                    <v-btn @click="sendMessage" icon="mdi-send" variant="text" color="deep-purple"
-                                        :disabled="!prompt && stagedImagesName.length === 0 && !stagedAudioUrl"
-                                        class="send-btn" size="small" />
-                                    <v-btn @click="isRecording ? stopRecording() : startRecording()"
-                                        :icon="isRecording ? 'mdi-stop-circle' : 'mdi-microphone'" variant="text"
-                                        :color="isRecording ? 'error' : 'deep-purple'" class="record-btn"
-                                        size="small" />
-                                </div>
-                            </div>
-
-                        </div>
-
-                        <!-- 附件预览区 -->
-                        <div class="attachments-preview" v-if="stagedImagesUrl.length > 0 || stagedAudioUrl">
-                            <div v-for="(img, index) in stagedImagesUrl" :key="index" class="image-preview">
-                                <img :src="img" class="preview-image" />
-                                <v-btn @click="removeImage(index)" class="remove-attachment-btn" icon="mdi-close"
-                                    size="small" color="error" variant="text" />
-                            </div>
-
-                            <div v-if="stagedAudioUrl" class="audio-preview">
-                                <v-chip color="deep-purple-lighten-4" class="audio-chip">
-                                    <v-icon start icon="mdi-microphone" size="small"></v-icon>
-                                    {{ tm('voice.recording') }}
-                                </v-chip>
-                                <v-btn @click="removeAudio" class="remove-attachment-btn" icon="mdi-close" size="small"
-                                    color="error" variant="text" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-            </div>
-        </v-card-text>
-    </v-card>
-    <!-- 编辑对话标题对话框 -->
-    <v-dialog v-model="editTitleDialog" max-width="400">
-        <v-card>
-            <v-card-title class="dialog-title">{{ tm('actions.editTitle') }}</v-card-title>
-            <v-card-text>
-                <v-text-field v-model="editingTitle" :label="tm('conversation.newConversation')" variant="outlined"
-                    hide-details class="mt-2" @keyup.enter="saveTitle" autofocus />
-            </v-card-text>
-            <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn text @click="editTitleDialog = false" color="grey-darken-1">{{ t('core.common.cancel') }}</v-btn>
-                <v-btn text @click="saveTitle" color="primary">{{ t('core.common.save') }}</v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
-
-    <!-- 图片预览对话框 -->
-    <v-dialog v-model="imagePreviewDialog" max-width="90vw" max-height="90vh">
-        <v-card class="image-preview-card" elevation="8">
-            <v-card-title class="d-flex justify-space-between align-center pa-4">
-                <span>{{ t('core.common.imagePreview') }}</span>
-                <v-btn icon="mdi-close" variant="text" @click="imagePreviewDialog = false" />
-            </v-card-title>
-            <v-card-text class="text-center pa-4">
-                <img :src="previewImageUrl" class="preview-image-large" />
-            </v-card-text>
-        </v-card>
-    </v-dialog>
-</template>
-
-<script>
-import { router } from '@/router';
-import axios from 'axios';
-import MarkdownIt from 'markdown-it';
-import { ref } from 'vue';
-import { useCustomizerStore } from '@/stores/customizer';
-import { useI18n, useModuleI18n } from '@/i18n/composables';
-import LanguageSwitcher from '@/components/shared/LanguageSwitcher.vue';
-import ProviderModelSelector from '@/components/chat/ProviderModelSelector.vue';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-
-// 配置markdown-it，启用代码高亮
-const md = new MarkdownIt({
-    html: false,        // 禁用HTML标签，防XSS
-    breaks: true,       // 换行转<br>
-    linkify: true,      // 自动转链接
-    highlight: function (code, lang) {
-        if (lang && hljs.getLanguage(lang)) {
-            try {
-                return hljs.highlight(code, { language: lang }).value;
-            } catch (err) {
-                console.error('Highlight error:', err);
-            }
-        }
-        return hljs.highlightAuto(code).value;
-    }
-});
-
-export default {
-    name: 'ChatPage',
-    components: {
-        LanguageSwitcher,
-        ProviderModelSelector
-    },
-    props: {
-        chatboxMode: {
-            type: Boolean,
-            default: false
-        }
-    }, setup() {
-        const { t } = useI18n();
-        const { tm } = useModuleI18n('features/chat');
-
-        return {
-            t,
-            tm,
-            router,
-            md,
-            ref
-        };
-    },
-    data() {
-        return {
-            prompt: '',
-            messages: [],
-            conversations: [],
-            selectedConversations: [], // 用于控制左侧列表的选中状态
-            currCid: '',
-            stagedImagesName: [], // 用于存储图片**文件名**的数组
-            stagedImagesUrl: [], // 用于存储图片的blob URL数组
-            loadingChat: false,
-
-            inputFieldLabel: '',
-
-            isRecording: false,
-            audioChunks: [],
-            stagedAudioUrl: "",
-            mediaRecorder: null,
-
-            eventSource: null,
-            eventSourceReader: null,
-
-            // // Ctrl键长按相关变量
-            ctrlKeyDown: false,
-            ctrlKeyTimer: null,
-            ctrlKeyLongPressThreshold: 300, // 长按阈值，单位毫秒
-
-            mediaCache: {}, // Add a cache to store media blobs
-
-            // 添加对话标题编辑相关变量
-            editTitleDialog: false,
-            editingTitle: '',
-            editingCid: '',
-
-            // 侧边栏折叠状态
-            sidebarCollapsed: false,
-            sidebarHovered: false,
-            sidebarHoverTimer: null,
-            sidebarHoverExpanded: false,
-            sidebarHoverDelay: 100, // 悬停延迟，单位毫秒            
-            pendingCid: null, // Store pending conversation ID for route handling
-
-            // 复制成功提示
-            copySuccessMessage: null,
-            copySuccessTimeout: null,
-            copiedMessages: new Set(), // 存储已复制的消息索引
-
-            // 图片预览相关变量
-            imagePreviewDialog: false,
-            previewImageUrl: ''
-        }
-    },
-
-    computed: {
-        isDark() {
-            return useCustomizerStore().uiTheme === 'PurpleThemeDark';
-        },
-        // Get the current conversation from the conversations array
-        getCurrentConversation() {
-            if (!this.currCid) return null;
-            return this.conversations.find(c => c.cid === this.currCid);
-        }
-    },
-
-    watch: {
-        // Watch for route changes to handle direct navigation to /chat/<cid>
-        '$route': {
-            immediate: true,
-            handler(to, from) {
-                console.log('Route changed:', to.path, 'from:', from?.path);                // 如果是从不同的路由模式切换（chat <-> chatbox），重新建立SSE连接
-                if (from &&
-                    ((from.path.startsWith('/chat') && to.path.startsWith('/chatbox')) ||
-                        (from.path.startsWith('/chatbox') && to.path.startsWith('/chat')))) {
-                }
-
-                // Check if the route matches /chat/<cid> or /chatbox/<cid> pattern
-                if (to.path.startsWith('/chat/') || to.path.startsWith('/chatbox/')) {
-                    const pathCid = to.path.split('/')[2];
-                    console.log('Path CID:', pathCid);
-                    if (pathCid && pathCid !== this.currCid) {
-                        // If conversations are already loaded
-                        if (this.conversations.length > 0) {
-                            const conversation = this.conversations.find(c => c.cid === pathCid);
-                            if (conversation) {
-                                this.getConversationMessages([pathCid]);
-                            }
-                        } else {
-                            // Store the cid to be used after conversations are loaded
-                            this.pendingCid = pathCid;
-                        }
-                    }
-                }
-            }
-        },
-
-        // Watch for conversations loaded to handle pending cid
-        conversations: {
-            handler(newConversations) {
-                if (this.pendingCid && newConversations.length > 0) {
-                    const conversation = newConversations.find(c => c.cid === this.pendingCid);
-                    if (conversation) {
-                        // 先设置选中状态，然后加载对话消息
-                        this.selectedConversations = [this.pendingCid];
-                        this.getConversationMessages([this.pendingCid]);
-                        this.pendingCid = null;
-                    }
-                } else {
-                    // 如果没有URL参数指定的对话，且当前没有选中对话，则默认打开第一个对话
-                    if (!this.currCid && newConversations.length > 0) {
-                        const firstConversation = newConversations[0];
-                        this.selectedConversations = [firstConversation.cid];
-                        this.getConversationMessages([firstConversation.cid]);
-                    }
-                }
-            }
-        }
-    },
-
-    mounted() {
-        // Theme is now handled globally by the customizer store.
-        // 设置输入框标签
-        this.inputFieldLabel = this.tm('input.chatPrompt');
-        this.getConversations();
-        let inputField = document.getElementById('input-field');
-        inputField.addEventListener('paste', this.handlePaste);
-        inputField.addEventListener('keydown', function (e) {
-            if (e.keyCode == 13 && !e.shiftKey) {
-                e.preventDefault();
-                // 检查是否有内容可发送
-                if (this.canSendMessage()) {
-                    this.sendMessage();
-                }
-            }
-        }.bind(this));
-
-        // 添加keyup事件监听
-        document.addEventListener('keyup', this.handleInputKeyUp);
-    },
-
-    beforeUnmount() {
-        // 移除keyup事件监听
-        document.removeEventListener('keyup', this.handleInputKeyUp);
-
-        // 清除悬停定时器
-        if (this.sidebarHoverTimer) {
-            clearTimeout(this.sidebarHoverTimer);
-        }
-
-        // Cleanup blob URLs
-        this.cleanupMediaCache();
-    },
-    methods: {
-        toggleTheme() {
-            const customizer = useCustomizerStore();
-            const newTheme = customizer.uiTheme === 'PurpleTheme' ? 'PurpleThemeDark' : 'PurpleTheme';
-            customizer.SET_UI_THEME(newTheme);
-        },
-        // 切换侧边栏折叠状态
-        toggleSidebar() {
-            if (this.sidebarHoverExpanded) {
-                this.sidebarHoverExpanded = false;
-                return
-            }
-            this.sidebarCollapsed = !this.sidebarCollapsed;
-            // 保存折叠状态到 localStorage
-            localStorage.setItem('sidebarCollapsed', JSON.stringify(this.sidebarCollapsed));
-        },
-
-        // 侧边栏鼠标悬停处理
-        handleSidebarMouseEnter() {
-            if (!this.sidebarCollapsed) return;
-
-            this.sidebarHovered = true;
-
-            // 设置延迟定时器
-            this.sidebarHoverTimer = setTimeout(() => {
-                if (this.sidebarHovered) {
-                    this.sidebarHoverExpanded = true;
-                    this.sidebarCollapsed = false;
-                }
-            }, this.sidebarHoverDelay);
-        },
-
-        handleSidebarMouseLeave() {
-            this.sidebarHovered = false;
-
-            // 清除定时器
-            if (this.sidebarHoverTimer) {
-                clearTimeout(this.sidebarHoverTimer);
-                this.sidebarHoverTimer = null;
-            }
-
-            if (this.sidebarHoverExpanded) {
-                this.sidebarCollapsed = true;
-            }
-            this.sidebarHoverExpanded = false;
-        },
-
-        // 显示编辑对话标题对话框
-        showEditTitleDialog(cid, title) {
-            this.editingCid = cid;
-            this.editingTitle = title || ''; // 如果标题为空，则设置为空字符串
-            this.editTitleDialog = true;
-        },
-
-        // 保存对话标题
-        saveTitle() {
-            if (!this.editingCid) return;
-
-            const trimmedTitle = this.editingTitle.trim();
-            axios.post('/api/chat/rename_conversation', {
-                conversation_id: this.editingCid,
-                title: trimmedTitle
-            })
-                .then(response => {
-                    // 更新本地对话列表中的标题
-                    const conversation = this.conversations.find(c => c.cid === this.editingCid);
-                    if (conversation) {
-                        conversation.title = trimmedTitle;
-                    }
-                    this.editTitleDialog = false;
-                })
-                .catch(err => {
-                    console.error('重命名对话失败:', err);
-                });
-        },
-
-        async getMediaFile(filename) {
-            if (this.mediaCache[filename]) {
-                return this.mediaCache[filename];
-            }
-
-            try {
-                const response = await axios.get('/api/chat/get_file', {
-                    params: { filename },
-                    responseType: 'blob'
-                });
-
-                const blobUrl = URL.createObjectURL(response.data);
-                this.mediaCache[filename] = blobUrl;
-                return blobUrl;
-            } catch (error) {
-                console.error('Error fetching media file:', error);
-                return '';
-            }
-        },
-
-
-        showConnectionStatus(message, type) {
-            // You can implement a toast notification here or update UI status
-            console.log(`Connection status: ${message} (${type})`);
-        },
-
-        removeAudio() {
-            this.stagedAudioUrl = null;
-        },
-
-        openImagePreview(imageUrl) {
-            this.previewImageUrl = imageUrl;
-            this.imagePreviewDialog = true;
-        },
-
-        initImageClickEvents() {
-            this.$nextTick(() => {
-                // 查找所有动态生成的图片（在markdown-content中）
-                const images = document.querySelectorAll('.markdown-content img');
-                images.forEach((img) => {
-                    if (!img.hasAttribute('data-click-enabled')) {
-                        img.style.cursor = 'pointer';
-                        img.setAttribute('data-click-enabled', 'true');
-                        img.onclick = () => this.openImagePreview(img.src);
-                    }
-                });
-            });
-        },
-
-        async startRecording() {
-            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-            this.mediaRecorder = new MediaRecorder(stream);
-            this.mediaRecorder.ondataavailable = (event) => {
-                this.audioChunks.push(event.data);
-            };
-            this.mediaRecorder.start();
-            this.isRecording = true;
-            this.inputFieldLabel = this.tm('input.recordingPrompt');
-        },
-
-        async stopRecording() {
-            this.isRecording = false;
-            this.inputFieldLabel = this.tm('input.chatPrompt');
-            this.mediaRecorder.stop();
-            this.mediaRecorder.onstop = async () => {
-                const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
-                this.audioChunks = [];
-
-                this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
-
-                const formData = new FormData();
-                formData.append('file', audioBlob);
-
-                try {
-                    const response = await axios.post('/api/chat/post_file', formData, {
-                        headers: {
-                            'Content-Type': 'multipart/form-data'
-                        }
-                    });
-
-                    const audio = response.data.data.filename;
-                    console.log('Audio uploaded:', audio);
-
-                    this.stagedAudioUrl = audio; // Store just the filename
-                } catch (err) {
-                    console.error('Error uploading audio:', err);
-                }
-            };
-        },
-
-        async processAndUploadImage(file) {
-            const formData = new FormData();
-            formData.append('file', file);
-
-            try {
-                const response = await axios.post('/api/chat/post_image', formData, {
-                    headers: {
-                        'Content-Type': 'multipart/form-data'
-                    }
-                });
-
-                const img = response.data.data.filename;
-                this.stagedImagesName.push(img); // Store just the filename
-                this.stagedImagesUrl.push(URL.createObjectURL(file)); // Create a blob URL for immediate display
-
-            } catch (err) {
-                console.error('Error uploading image:', err);
-            }
-        },
-
-        async handlePaste(event) {
-            console.log('Pasting image...');
-            const items = event.clipboardData.items;
-            for (let i = 0; i < items.length; i++) {
-                if (items[i].type.indexOf('image') !== -1) {
-                    const file = items[i].getAsFile();
-                    this.processAndUploadImage(file);
-                }
-            }
-        },
-
-        removeImage(index) {
-            // Revoke the blob URL to prevent memory leaks
-            const urlToRevoke = this.stagedImagesUrl[index];
-            if (urlToRevoke && urlToRevoke.startsWith('blob:')) {
-                URL.revokeObjectURL(urlToRevoke);
-            }
-
-            this.stagedImagesName.splice(index, 1);
-            this.stagedImagesUrl.splice(index, 1);
-        },
-
-        clearMessage() {
-            this.prompt = '';
-        },
-
-        triggerImageInput() {
-            this.$refs.imageInput.click();
-        },
-
-        handleFileSelect(event) {
-            const files = event.target.files;
-            if (files) {
-                for (const file of files) {
-                    this.processAndUploadImage(file);
-                }
-            }
-            // Reset the input value to allow selecting the same file again
-            event.target.value = '';
-        },
-        getConversations() {
-            axios.get('/api/chat/conversations').then(response => {
-                this.conversations = response.data.data;
-
-                // If there's a pending conversation ID from the route
-                if (this.pendingCid) {
-                    const conversation = this.conversations.find(c => c.cid === this.pendingCid);
-                    if (conversation) {
-                        this.getConversationMessages([this.pendingCid]);
-                        this.pendingCid = null;
-                    }
-                } else {
-                    // 如果没有URL参数指定的对话，且当前没有选中对话，则默认打开第一个对话
-                    if (!this.currCid && this.conversations.length > 0) {
-                        const firstConversation = this.conversations[0];
-                        this.selectedConversations = [firstConversation.cid];
-                        this.getConversationMessages([firstConversation.cid]);
-                    }
-                }
-            }).catch(err => {
-                if (err.response.status === 401) {
-                    this.$router.push('/auth/login?redirect=/chatbox');
-                }
-                console.error(err);
-            });
-        },
-        getConversationMessages(cid) {
-            if (!cid[0])
-                return;
-
-            // Update the URL to reflect the selected conversation
-            if (this.$route.path !== `/chat/${cid[0]}` && this.$route.path !== `/chatbox/${cid[0]}`) {
-                if (this.$route.path.startsWith('/chatbox')) {
-                    this.$router.push(`/chatbox/${cid[0]}`);
-                } else {
-                    this.$router.push(`/chat/${cid[0]}`);
-                }
-                return
-            }
-
-            axios.get('/api/chat/get_conversation?conversation_id=' + cid[0]).then(async response => {
-                this.currCid = cid[0];
-                // Update the selected conversation in the sidebar
-                this.selectedConversations = [cid[0]];
-                let history = response.data.data.history;
-                for (let i = 0; i < history.length; i++) {
-                    let content = history[i].content;
-                    if (content.message.startsWith('[IMAGE]')) {
-                        let img = content.message.replace('[IMAGE]', '');
-                        const imageUrl = await this.getMediaFile(img);
-                        if (!content.embedded_images) {
-                            content.embedded_images = [];
-                        }
-                        content.embedded_images.push(imageUrl);
-                        content.message = ''; // 清空message，避免显示标记文本
-                    }
-                    
-                    if (content.message.startsWith('[RECORD]')) {
-                        let audio = content.message.replace('[RECORD]', '');
-                        const audioUrl = await this.getMediaFile(audio);
-                        content.embedded_audio = audioUrl;
-                        content.message = ''; // 清空message，避免显示标记文本
-                    }
-                    
-                    if (content.image_url && content.image_url.length > 0) {
-                        for (let j = 0; j < content.image_url.length; j++) {
-                            content.image_url[j] = await this.getMediaFile(content.image_url[j]);
-                        }
-                    }
-                    
-                    if (content.audio_url) {
-                        content.audio_url = await this.getMediaFile(content.audio_url);
-                    }
-                }
-                this.messages = history;
-                this.initCodeCopyButtons();
-                this.initImageClickEvents();
-            }).catch(err => {
-                console.error(err);
-            });
-        },
-        async newConversation() {
-            return axios.get('/api/chat/new_conversation').then(response => {
-                const cid = response.data.data.conversation_id;
-                this.currCid = cid;
-                // Update the URL to reflect the new conversation
-                if (this.$route.path.startsWith('/chatbox')) {
-                    this.$router.push(`/chatbox/${cid}`);
-                } else {
-                    this.$router.push(`/chat/${cid}`);
-                }
-                this.getConversations();
-                return cid;
-            }).catch(err => {
-                console.error(err);
-                throw err;
-            });
-        },
-
-        newC() {
-            this.currCid = '';
-            this.selectedConversations = []; // 清除选中状态
-            this.messages = [];
-            if (this.$route.path.startsWith('/chatbox')) {
-                this.$router.push('/chatbox');
-            } else {
-                this.$router.push('/chat');
-            }
-        },
-
-        formatDate(timestamp) {
-            const date = new Date(timestamp * 1000); // 假设时间戳是以秒为单位
-            const options = {
-                year: 'numeric',
-                month: '2-digit',
-                day: '2-digit',
-                hour: '2-digit',
-                minute: '2-digit',
-                second: '2-digit',
-                hour12: false
-            };
-            // 使用当前语言环境的locale
-            const locale = this.t('core.common.locale') || 'zh-CN';
-            return date.toLocaleString(locale, options).replace(/\//g, '-').replace(/, /g, ' ');
-        },
-
-        deleteConversation(cid) {
-            axios.get('/api/chat/delete_conversation?conversation_id=' + cid).then(response => {
-                this.getConversations();
-                this.currCid = '';
-                this.selectedConversations = []; // 清除选中状态
-                this.messages = [];
-            }).catch(err => {
-                console.error(err);
-            });
-        },
-
-        // 检查是否可以发送消息
-        canSendMessage() {
-            return (this.prompt && this.prompt.trim()) ||
-                this.stagedImagesName.length > 0 ||
-                this.stagedAudioUrl;
-        },
-
-        async sendMessage() {
-            // 检查是否有内容可发送
-            if (!this.canSendMessage()) {
-                console.log('没有内容可发送');
-                return;
-            }
-
-            if (this.currCid == '') {
-                const cid = await this.newConversation();
-                // URL is already updated in newConversation method
-            }
-
-            // 保存当前要发送的数据到临时变量
-            const promptToSend = this.prompt.trim();
-            const imageNamesToSend = [...this.stagedImagesName];
-            const audioNameToSend = this.stagedAudioUrl;
-
-            // 立即清空输入和附件预览
-            this.prompt = '';
-            this.stagedImagesName = [];
-            this.stagedImagesUrl = [];
-            this.stagedAudioUrl = "";
-
-            // Create a message object with actual URLs for display
-            const userMessage = {
-                type: 'user',
-                message: promptToSend,
-                image_url: [],
-                audio_url: null
-            };
-
-            // Convert image filenames to blob URLs for display
-            if (imageNamesToSend.length > 0) {
-                const imagePromises = imageNamesToSend.map(name => {
-                    if (!name.startsWith('blob:')) {
-                        return this.getMediaFile(name);
-                    }
-                    return Promise.resolve(name);
-                });
-                userMessage.image_url = await Promise.all(imagePromises);
-            }
-
-            // Convert audio filename to blob URL for display
-            if (audioNameToSend) {
-                if (!audioNameToSend.startsWith('blob:')) {
-                    userMessage.audio_url = await this.getMediaFile(audioNameToSend);
-                } else {
-                    userMessage.audio_url = audioNameToSend;
-                }
-            }
-
-            this.messages.push({
-                "content": userMessage,
-            });
-            this.scrollToBottom();
-
-            this.loadingChat = true
-
-            // 从ProviderModelSelector组件获取当前选择
-            const selection = this.$refs.providerModelSelector?.getCurrentSelection();
-            const selectedProviderId = selection?.providerId || '';
-            const selectedModelName = selection?.modelName || '';
-
-            try {
-                const response = await fetch('/api/chat/send', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Authorization': 'Bearer ' + localStorage.getItem('token')
-                    },
-                    body: JSON.stringify({
-                        message: promptToSend,
-                        conversation_id: this.currCid,
-                        image_url: imageNamesToSend,
-                        audio_url: audioNameToSend ? [audioNameToSend] : [],
-                        selected_provider: selectedProviderId,
-                        selected_model: selectedModelName
-                    })
-                });
-
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-
-                const reader = response.body.getReader();
-                const decoder = new TextDecoder();
-                let in_streaming = false;
-                let message_obj = null;
-
-                while (true) {
-                    try {
-                        const { done, value } = await reader.read();
-                        if (done) {
-                            console.log('SSE stream completed');
-                            break;
-                        }
-
-                        const chunk = decoder.decode(value, { stream: true });
-                        const lines = chunk.split('\n\n');
-
-                        for (let i = 0; i < lines.length; i++) {
-                            let line = lines[i].trim();
-
-                            if (!line) {
-                                continue;
-                            }
-
-                            // Parse SSE data
-                            let chunk_json;
-                            try {
-                                chunk_json = JSON.parse(line.replace('data: ', ''));
-                            } catch (parseError) {
-                                console.warn('JSON解析失败:', line, parseError);
-                                continue;
-                            }
-
-                            // 检查解析后的数据是否有效
-                            if (!chunk_json || typeof chunk_json !== 'object' || !chunk_json.hasOwnProperty('type')) {
-                                console.warn('无效的数据对象:', chunk_json);
-                                continue;
-                            }
-
-                            if (chunk_json.type === 'error') {
-                                console.error('Error received:', chunk_json.data);
-                                continue;
-                            }
-
-                            if (chunk_json.type === 'image') {
-                                let img = chunk_json.data.replace('[IMAGE]', '');
-                                const imageUrl = await this.getMediaFile(img);
-                                let bot_resp = {
-                                    type: 'bot',
-                                    message: '',
-                                    embedded_images: [imageUrl]
-                                }
-                                this.messages.push({
-                                    "content": bot_resp
-                                });
-                            } else if (chunk_json.type === 'record') {
-                                let audio = chunk_json.data.replace('[RECORD]', '');
-                                const audioUrl = await this.getMediaFile(audio);
-                                let bot_resp = {
-                                    type: 'bot',
-                                    message: '',
-                                    embedded_audio: audioUrl
-                                }
-                                this.messages.push({
-                                    "content": bot_resp
-                                });
-                            } else if (chunk_json.type === 'plain') {
-                                if (!in_streaming) {
-                                    message_obj = {
-                                        type: 'bot',
-                                        message: this.ref(chunk_json.data),
-                                    }
-                                    this.messages.push({
-                                        "content": message_obj
-                                    });
-                                    in_streaming = true;
-                                } else {
-                                    message_obj.message.value += chunk_json.data;
-                                }
-                            } else if (chunk_json.type === 'update_title') {
-                                // 更新对话标题
-                                const conversation = this.conversations.find(c => c.cid === chunk_json.cid);
-                                if (conversation) {
-                                    conversation.title = chunk_json.data;
-                                }
-                            }
-                            if ((chunk_json.type === 'break' && chunk_json.streaming) || !chunk_json.streaming) {
-                                // break means a segment end
-                                in_streaming = false;
-                                // 在消息流结束后初始化代码复制按钮和图片点击事件
-                                this.initCodeCopyButtons();
-                                this.initImageClickEvents();
-                            }
-                            this.scrollToBottom();
-                        }
-                    } catch (readError) {
-                        console.error('SSE读取错误:', readError);
-                        break;
-                    }
-                }
-
-                // Input and attachments are already cleared
-                this.loadingChat = false;
-
-                // get the latest conversations
-                this.getConversations();
-
-            } catch (err) {
-                console.error('发送消息失败:', err);
-                this.loadingChat = false;
-                this.showConnectionStatus(this.tm('connection.status.failed'), 'error');
-            }
-        },
-
-        scrollToBottom() {
-            this.$nextTick(() => {
-                const container = this.$refs.messageContainer;
-                container.scrollTop = container.scrollHeight;
-                // 在滚动后初始化代码复制按钮和图片点击事件
-                this.initCodeCopyButtons();
-                this.initImageClickEvents();
-            });
-        },
-        handleInputKeyDown(e) {
-            if (e.ctrlKey && e.keyCode === 66) { // Ctrl+B组合键
-                e.preventDefault(); // 防止默认行为
-
-                // 防止重复触发
-                if (this.ctrlKeyDown) return;
-
-                this.ctrlKeyDown = true;
-
-                // 设置定时器识别长按
-                this.ctrlKeyTimer = setTimeout(() => {
-                    if (this.ctrlKeyDown && !this.isRecording) {
-                        this.startRecording();
-                    }
-                }, this.ctrlKeyLongPressThreshold);
-            }
-        },
-        handleInputKeyUp(e) {
-            if (e.keyCode === 66) { // B键释放
-                this.ctrlKeyDown = false;
-
-                // 清除定时器
-                if (this.ctrlKeyTimer) {
-                    clearTimeout(this.ctrlKeyTimer);
-                    this.ctrlKeyTimer = null;
-                }
-
-                // 如果正在录音，停止录音
-                if (this.isRecording) {
-                    this.stopRecording();
-                }
-            }
-        },
-
-        cleanupMediaCache() {
-            Object.values(this.mediaCache).forEach(url => {
-                if (url.startsWith('blob:')) {
-                    URL.revokeObjectURL(url);
-                }
-            });
-            this.mediaCache = {};
-        },
-
-        // 复制代码到剪贴板
-        copyCodeToClipboard(code) {
-            navigator.clipboard.writeText(code).then(() => {
-                console.log('代码已复制到剪贴板');
-            }).catch(err => {
-                console.error('复制失败:', err);
-                // 如果现代API失败，使用传统方法
-                const textArea = document.createElement('textarea');
-                textArea.value = code;
-                document.body.appendChild(textArea);
-                textArea.select();
-                try {
-                    document.execCommand('copy');
-                    console.log('代码已复制到剪贴板 (fallback)');
-                } catch (fallbackErr) {
-                    console.error('复制失败 (fallback):', fallbackErr);
-                }
-                document.body.removeChild(textArea);
-            });
-        },
-
-        // 复制bot消息到剪贴板
-        copyBotMessage(message, messageIndex) {
-            // 获取对应的消息对象
-            const msgObj = this.messages[messageIndex].content;
-            let textToCopy = '';
-            
-            // 如果有文本消息，添加到复制内容中
-            if (message && message.trim()) {
-                // 移除HTML标签，获取纯文本
-                const tempDiv = document.createElement('div');
-                tempDiv.innerHTML = message;
-                textToCopy = tempDiv.textContent || tempDiv.innerText || message;
-            }
-            
-            // 如果有内嵌图片，添加说明
-            if (msgObj && msgObj.embedded_images && msgObj.embedded_images.length > 0) {
-                if (textToCopy) textToCopy += '\n\n';
-                textToCopy += `[包含 ${msgObj.embedded_images.length} 张图片]`;
-            }
-            
-            // 如果有内嵌音频，添加说明
-            if (msgObj && msgObj.embedded_audio) {
-                if (textToCopy) textToCopy += '\n\n';
-                textToCopy += '[包含音频内容]';
-            }
-            
-            // 如果没有任何内容，使用默认文本
-            if (!textToCopy.trim()) {
-                textToCopy = '[媒体内容]';
-            }
-
-            navigator.clipboard.writeText(textToCopy).then(() => {
-                console.log('消息已复制到剪贴板');
-                this.showCopySuccess(messageIndex);
-            }).catch(err => {
-                console.error('复制失败:', err);
-                // 如果现代API失败，使用传统方法
-                const textArea = document.createElement('textarea');
-                textArea.value = textToCopy;
-                document.body.appendChild(textArea);
-                textArea.select();
-                try {
-                    document.execCommand('copy');
-                    console.log('消息已复制到剪贴板 (fallback)');
-                    this.showCopySuccess(messageIndex);
-                } catch (fallbackErr) {
-                    console.error('复制失败 (fallback):', fallbackErr);
-                }
-                document.body.removeChild(textArea);
-            });
-        },
-
-        // 显示复制成功提示
-        showCopySuccess(messageIndex) {
-            this.copiedMessages.add(messageIndex);
-
-            // 2秒后移除成功状态
-            setTimeout(() => {
-                this.copiedMessages.delete(messageIndex);
-            }, 2000);
-        },
-
-        // 获取复制按钮图标
-        getCopyIcon(messageIndex) {
-            return this.copiedMessages.has(messageIndex) ? 'mdi-check' : 'mdi-content-copy';
-        },
-
-        // 检查是否为复制成功状态
-        isCopySuccess(messageIndex) {
-            return this.copiedMessages.has(messageIndex);
-        },
-
-        // 获取复制图标SVG
-        getCopyIconSvg() {
-            return '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
-        },
-
-        // 获取成功图标SVG
-        getSuccessIconSvg() {
-            return '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20,6 9,17 4,12"></polyline></svg>';
-        },
-
-        // 初始化代码块复制按钮
-        initCodeCopyButtons() {
-            this.$nextTick(() => {
-                const codeBlocks = this.$refs.messageContainer?.querySelectorAll('pre code') || [];
-                codeBlocks.forEach((codeBlock, index) => {
-                    const pre = codeBlock.parentElement;
-                    if (pre && !pre.querySelector('.copy-code-btn')) {
-                        const button = document.createElement('button');
-                        button.className = 'copy-code-btn';
-                        button.innerHTML = this.getCopyIconSvg();
-                        button.title = '复制代码';
-                        button.addEventListener('click', () => {
-                            this.copyCodeToClipboard(codeBlock.textContent);
-                            // 显示复制成功提示
-                            button.innerHTML = this.getSuccessIconSvg();
-                            button.style.color = '#4caf50';
-                            setTimeout(() => {
-                                button.innerHTML = this.getCopyIconSvg();
-                                button.style.color = '';
-                            }, 2000);
-                        });
-                        pre.style.position = 'relative';
-                        pre.appendChild(button);
-                    }
-                });
-            });
-        },
-    },
-}
+<script setup>
+import Chat from '@/components/chat/Chat.vue'
 </script>
 
-<style>
-/* 基础动画 */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes pulse {
-    0% {
-        transform: scale(1);
-    }
-
-    50% {
-        transform: scale(1.05);
-    }
-
-    100% {
-        transform: scale(1);
-    }
-}
-
-@keyframes slideIn {
-    from {
-        transform: translateX(20px);
-        opacity: 0;
-    }
-
-    to {
-        transform: translateX(0);
-        opacity: 1;
-    }
-}
-
-/* 添加淡入动画 */
-@keyframes fadeInContent {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}
-
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
-}
-
-.chat-page-card {
-    width: 100%;
-    height: calc(100vh - 84px);
-    max-height: 100%;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
-    overflow: hidden;
-}
-
-.chat-page-container {
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    padding: 0;
-    overflow: hidden;
-}
-
-.chat-layout {
-    height: 100%;
-    max-height: 100%;
-    display: flex;
-    overflow: hidden;
-}
-
-.sidebar-panel {
-    max-width: 270px;
-    min-width: 240px;
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    border-right: 1px solid rgba(0, 0, 0, 0.05);
-    height: 100%;
-    max-height: 100%;
-    position: relative;
-    transition: all 0.3s ease;
-    overflow: hidden;
-}
-
-/* 侧边栏折叠状态 */
-.sidebar-collapsed {
-    max-width: 75px;
-    min-width: 75px;
-    transition: all 0.3s ease;
-}
-
-/* 当悬停展开时 */
-.sidebar-collapsed.sidebar-hovered {
-    max-width: 270px;
-    min-width: 240px;
-    transition: all 0.3s ease;
-}
-
-/* 侧边栏折叠按钮 */
-.sidebar-collapse-btn-container {
-    margin: 16px;
-    margin-bottom: 0px;
-    z-index: 10;
-}
-
-.sidebar-collapse-btn {
-    opacity: 0.6;
-    max-height: none;
-    overflow-y: visible;
-    padding: 0;
-}
-
-.conversation-item {
-    margin-bottom: 4px;
-    border-radius: 8px !important;
-    transition: all 0.2s ease;
-    height: auto !important;
-    min-height: 56px;
-    padding: 8px 16px !important;
-    position: relative;
-}
-
-.conversation-item:hover {
-    background-color: rgba(103, 58, 183, 0.05);
-}
-
-.conversation-item:hover .conversation-actions {
-    opacity: 1;
-    visibility: visible;
-}
-
-.conversation-actions {
-    display: flex;
-    gap: 4px;
-    opacity: 0;
-    visibility: hidden;
-    transition: all 0.2s ease;
-}
-
-.edit-title-btn,
-.delete-conversation-btn {
-    opacity: 0.7;
-    transition: opacity 0.2s ease;
-}
-
-.edit-title-btn:hover,
-.delete-conversation-btn:hover {
-    opacity: 1;
-}
-
-.conversation-title {
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 1.3;
-    margin-bottom: 2px;
-    transition: opacity 0.25s ease;
-}
-
-.timestamp {
-    font-size: 11px;
-    color: var(--v-theme-secondaryText);
-    line-height: 1;
-    transition: opacity 0.25s ease;
-}
-
-.sidebar-section-title {
-    font-size: 12px;
-    font-weight: 500;
-    color: var(--v-theme-secondaryText);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    margin-bottom: 12px;
-    padding-left: 4px;
-    transition: opacity 0.25s ease;
-    white-space: nowrap;
-}
-
-.status-chips {
-    display: flex;
-    flex-wrap: nowrap;
-    gap: 8px;
-    margin-bottom: 8px;
-    transition: opacity 0.25s ease;
-}
-
-.status-chips .v-chip {
-    flex: 1 1 0;
-    justify-content: center;
-    opacity: 0.7;
-}
-
-.status-chip {
-    font-size: 12px;
-    height: 24px !important;
-}
-
-.no-conversations {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 150px;
-    opacity: 0.6;
-    gap: 12px;
-}
-
-.no-conversations-text {
-    font-size: 14px;
-    color: var(--v-theme-secondaryText);
-    transition: opacity 0.25s ease;
-}
-
-.chat-content-panel {
-    height: 100%;
-    max-height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-}
-
-.messages-container {
-    height: 100%;
-    max-height: 100%;
-    overflow-y: auto;
-    padding: 16px;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 0;
-}
-
-/* 欢迎页样式 */
-.welcome-container {
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-.welcome-title {
-    font-size: 28px;
-    margin-bottom: 16px;
-}
-
-.bot-name {
-    font-weight: 700;
-    margin-left: 8px;
-    color: var(--v-theme-secondary);
-}
-
-.welcome-hint {
-    margin-top: 8px;
-    color: var(--v-theme-secondaryText);
-    font-size: 14px;
-}
-
-.welcome-hint code {
-    background-color: rgb(var(--v-theme-codeBg));
-    padding: 2px 6px;
-    margin: 0 4px;
-    border-radius: 4px;
-    color: rgb(var(--v-theme-code));
-    font-family: 'Fira Code', monospace;
-    font-size: 13px;
-}
-
-/* 消息列表样式 */
-.message-list {
-    max-width: 900px;
-    margin: 0 auto;
-    width: 100%;
-}
-
-.message-item {
-    margin-bottom: 24px;
-    animation: fadeIn 0.3s ease-out;
-}
-
-.user-message {
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-start;
-    gap: 12px;
-}
-
-.bot-message {
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: 12px;
-}
-
-.bot-message-content {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    max-width: 80%;
-    position: relative;
-}
-
-.message-actions {
-    display: flex;
-    gap: 4px;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-    margin-left: 8px;
-}
-
-.bot-message:hover .message-actions {
-    opacity: 1;
-}
-
-.copy-message-btn {
-    opacity: 0.6;
-    transition: all 0.2s ease;
-    color: var(--v-theme-secondary);
-}
-
-.copy-message-btn:hover {
-    opacity: 1;
-    background-color: rgba(103, 58, 183, 0.1);
-}
-
-.copy-message-btn.copy-success {
-    color: #4caf50;
-    opacity: 1;
-}
-
-.copy-message-btn.copy-success:hover {
-    color: #4caf50;
-    background-color: rgba(76, 175, 80, 0.1);
-}
-
-.message-bubble {
-    padding: 8px 16px;
-    border-radius: 12px;
-}
-
-.user-bubble {
-    color: var(--v-theme-primaryText);
-    padding: 18px 20px;
-    font-size: 16px;
-    max-width: 60%;
-    border-radius: 1.5rem;
-}
-
-.bot-bubble {
-    border: 1px solid var(--v-theme-border);
-    color: var(--v-theme-primaryText);
-    font-size: 16px;
-    max-width: 100%;
-}
-
-.user-avatar,
-.bot-avatar {
-    align-self: flex-start;
-    margin-top: 12px;
-}
-
-/* 附件样式 */
-.image-attachments {
-    display: flex;
-    gap: 8px;
-    margin-top: 8px;
-    flex-wrap: wrap;
-}
-
-.image-attachment {
-    position: relative;
-    display: inline-block;
-}
-
-.attached-image {
-    width: 120px;
-    height: 120px;
-    object-fit: cover;
-    border-radius: 12px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    transition: transform 0.2s ease;
-}
-
-.attached-image:hover {
-    transform: scale(1.02);
-    cursor: pointer;
-}
-
-/* 图片预览对话框样式 */
-.image-preview-card {
-    background-color: var(--v-theme-surface) !important;
-    border: 1px solid var(--v-theme-border);
-}
-
-/* 亮色主题下的图片预览对话框 */
-.v-theme--light .image-preview-card,
-.v-theme--PurpleTheme .image-preview-card {
-    background-color: #ffffff !important;
-    border-color: #e0e0e0 !important;
-}
-
-/* 暗色主题下的图片预览对话框 */
-.v-theme--dark .image-preview-card,
-.v-theme--PurpleThemeDark .image-preview-card {
-    background-color: #1e1e1e !important;
-    border-color: #333333 !important;
-}
-
-/* 确保对话框标题栏和内容区域的背景色 */
-.image-preview-card .v-card-title {
-    background-color: inherit;
-}
-
-.image-preview-card .v-card-text {
-    background-color: inherit;
-}
-
-.preview-image-large {
-    max-width: 100%;
-    max-height: 75vh;
-    width: auto;
-    height: auto;
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-.audio-attachment {
-    margin-top: 8px;
-    min-width: 250px;
-}
-
-/* 包含音频的消息气泡最小宽度 */
-.message-bubble.has-audio {
-    min-width: 280px;
-}
-
-.audio-player {
-    width: 100%;
-    height: 36px;
-    border-radius: 18px;
-}
-
-/* 输入区域样式 */
-.input-area {
-    padding: 16px;
-    background-color: var(--v-theme-surface);
-    position: relative;
-    border-top: 1px solid var(--v-theme-border);
-    flex-shrink: 0;
-    /* 防止输入区域被压缩 */
-}
-
-/* 附件预览区 */
-.attachments-preview {
-    display: flex;
-    gap: 8px;
-    margin-top: 8px;
-    max-width: 900px;
-    margin: 8px auto 0;
-    flex-wrap: wrap;
-}
-
-.image-preview,
-.audio-preview {
-    position: relative;
-    display: inline-flex;
-}
-
-.preview-image {
-    width: 60px;
-    height: 60px;
-    object-fit: cover;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.audio-chip {
-    height: 36px;
-    border-radius: 18px;
-}
-
-.remove-attachment-btn {
-    position: absolute;
-    top: -8px;
-    right: -8px;
-    opacity: 0.8;
-    transition: opacity 0.2s;
-}
-
-.remove-attachment-btn:hover {
-    opacity: 1;
-}
-
-/* Markdown内容样式 */
-.markdown-content {
-    font-family: inherit;
-    line-height: 1.6;
-}
-
-.markdown-content h1,
-.markdown-content h2,
-.markdown-content h3,
-.markdown-content h4,
-.markdown-content h5,
-.markdown-content h6 {
-    margin-top: 16px;
-    margin-bottom: 10px;
-    font-weight: 600;
-    color: var(--v-theme-primaryText);
-}
-
-.markdown-content h1 {
-    font-size: 1.8em;
-    border-bottom: 1px solid var(--v-theme-border);
-    padding-bottom: 6px;
-}
-
-.markdown-content h2 {
-    font-size: 1.5em;
-}
-
-.markdown-content h3 {
-    font-size: 1.3em;
-}
-
-.markdown-content li {
-    margin-left: 16px;
-    margin-bottom: 4px;
-}
-
-.markdown-content p {
-    margin-top: .5rem;
-    margin-bottom: .5rem;
-}
-
-.markdown-content pre {
-    background-color: var(--v-theme-surface);
-    padding: 12px;
-    border-radius: 6px;
-    overflow-x: auto;
-    margin: 12px 0;
-    position: relative;
-}
-
-.markdown-content code {
-    background-color: rgb(var(--v-theme-codeBg));
-    padding: 2px 4px;
-    border-radius: 4px;
-    font-family: 'Fira Code', monospace;
-    font-size: 0.9em;
-    color: var(--v-theme-code);
-}
-
-/* 代码块中的code标签样式 */
-.markdown-content pre code {
-    background-color: transparent;
-    padding: 0;
-    border-radius: 0;
-    font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
-    font-size: 0.85em;
-    color: inherit;
-    display: block;
-    overflow-x: auto;
-    line-height: 1.5;
-}
-
-/* 自定义代码高亮样式 */
-.markdown-content pre {
-    border: 1px solid var(--v-theme-border);
-    background-color: rgb(var(--v-theme-preBg));
-    border-radius: 16px;
-    padding: 16px;
-}
-
-/* 确保highlight.js的样式正确应用 */
-.markdown-content pre code.hljs {
-    background: transparent !important;
-    color: inherit;
-}
-
-/* 亮色主题下的代码高亮 */
-.v-theme--light .markdown-content pre {
-    background-color: #f6f8fa;
-}
-
-/* 暗色主题下的代码块样式 */
-.v-theme--dark .markdown-content pre {
-    background-color: #0d1117 !important;
-    border-color: rgba(255, 255, 255, 0.1);
-}
-
-.v-theme--dark .markdown-content pre code {
-    color: #e6edf3 !important;
-}
-
-/* 暗色主题下的highlight.js样式覆盖 */
-.v-theme--dark .hljs {
-    background: #0d1117 !important;
-    color: #e6edf3 !important;
-}
-
-.v-theme--dark .hljs-keyword,
-.v-theme--dark .hljs-selector-tag,
-.v-theme--dark .hljs-built_in,
-.v-theme--dark .hljs-name,
-.v-theme--dark .hljs-tag {
-    color: #ff7b72 !important;
-}
-
-.v-theme--dark .hljs-string,
-.v-theme--dark .hljs-title,
-.v-theme--dark .hljs-section,
-.v-theme--dark .hljs-attribute,
-.v-theme--dark .hljs-literal,
-.v-theme--dark .hljs-template-tag,
-.v-theme--dark .hljs-template-variable,
-.v-theme--dark .hljs-type,
-.v-theme--dark .hljs-addition {
-    color: #a5d6ff !important;
-}
-
-.v-theme--dark .hljs-comment,
-.v-theme--dark .hljs-quote,
-.v-theme--dark .hljs-deletion,
-.v-theme--dark .hljs-meta {
-    color: #8b949e !important;
-}
-
-.v-theme--dark .hljs-number,
-.v-theme--dark .hljs-regexp,
-.v-theme--dark .hljs-symbol,
-.v-theme--dark .hljs-variable,
-.v-theme--dark .hljs-template-variable,
-.v-theme--dark .hljs-link,
-.v-theme--dark .hljs-selector-attr,
-.v-theme--dark .hljs-selector-pseudo {
-    color: #79c0ff !important;
-}
-
-.v-theme--dark .hljs-function,
-.v-theme--dark .hljs-class,
-.v-theme--dark .hljs-title.class_ {
-    color: #d2a8ff !important;
-}
-
-/* 复制按钮样式 */
-.copy-code-btn {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    background: rgba(255, 255, 255, 0.9);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 4px;
-    padding: 6px;
-    cursor: pointer;
-    opacity: 0;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #666;
-    font-size: 12px;
-    z-index: 10;
-    backdrop-filter: blur(4px);
-}
-
-.copy-code-btn:hover {
-    background: rgba(255, 255, 255, 1);
-    color: #333;
-    transform: scale(1.05);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-.copy-code-btn:active {
-    transform: scale(0.95);
-}
-
-.markdown-content pre:hover .copy-code-btn {
-    opacity: 1;
-}
-
-.v-theme--dark .copy-code-btn {
-    background: rgba(45, 45, 45, 0.9);
-    border-color: rgba(255, 255, 255, 0.15);
-    color: #ccc;
-}
-
-.v-theme--dark .copy-code-btn:hover {
-    background: rgba(45, 45, 45, 1);
-    color: #fff;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}
-
-.markdown-content img {
-    max-width: 100%;
-    border-radius: 8px;
-    margin: 10px 0;
-}
-
-.markdown-content blockquote {
-    border-left: 4px solid var(--v-theme-secondary);
-    padding-left: 16px;
-    color: var(--v-theme-secondaryText);
-    margin: 16px 0;
-}
-
-.markdown-content table {
-    border-collapse: collapse;
-    width: 100%;
-    margin: 16px 0;
-}
-
-.markdown-content th,
-.markdown-content td {
-    border: 1px solid var(--v-theme-background);
-    padding: 8px 12px;
-    text-align: left;
-}
-
-.markdown-content th {
-    background-color: var(--v-theme-containerBg);
-}
-
-/* 动画类 */
-.fade-in {
-    animation: fadeIn 0.3s ease-in-out;
-}
-
-/* 对话框标题样式 */
-.dialog-title {
-    font-size: 18px;
-    font-weight: 500;
-    padding-bottom: 8px;
-}
-
-/* 对话标题和时间样式 */
-.conversation-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px 16px 16px 16px;
-    border-bottom: 1px solid var(--v-theme-border);
-    width: 100%;
-    padding-right: 32px;
-    flex-shrink: 0;
-}
-
-.embedded-images {
-    margin-top: 8px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.embedded-image {
-    display: flex;
-    justify-content: flex-start;
-}
-
-.bot-embedded-image {
-    max-width: 80%;
-    width: auto;
-    height: auto;
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    cursor: pointer;
-    transition: transform 0.2s ease;
-}
-
-.bot-embedded-image:hover {
-    transform: scale(1.02);
-}
-
-.embedded-audio {
-    width: 300px;
-    margin-top: 8px;
-}
-
-.embedded-audio .audio-player {
-    width: 100%;
-    max-width: 300px;
+<template>
+    <div class="chat-container">
+        <Chat />
+    </div>
+</template>
+
+<style scoped>
+.chat-container {
+    height: calc(100vh - 88px)
 }
 </style>
\ No newline at end of file
diff --git a/dashboard/src/views/ConversationPage.vue b/dashboard/src/views/ConversationPage.vue
index 9d93bb27..d632afd4 100644
--- a/dashboard/src/views/ConversationPage.vue
+++ b/dashboard/src/views/ConversationPage.vue
@@ -167,46 +167,12 @@
                             <p class="text-disabled mt-2">{{ tm('status.emptyContent') }}</p>
                         </div>
 
-                        <!-- 消息列表 -->
-                        <div v-else class="message-list">
-                            <div class="message-item" v-for="(msg, index) in conversationHistory" :key="index">
-                                <!-- 用户消息 -->
-                                <div v-if="msg.role === 'user'" class="user-message">
-                                    <div class="message-bubble user-bubble">
-                                        <span v-html="formatMessage(msg.content)"></span>
-
-                                        <!-- 图片附件 -->
-                                        <div class="image-attachments" v-if="msg.image_url && msg.image_url.length > 0">
-                                            <div v-for="(img, imgIndex) in msg.image_url" :key="imgIndex"
-                                                class="image-attachment">
-                                                <img :src="img" class="attached-image" />
-                                            </div>
-                                        </div>
-
-                                        <!-- 音频附件 -->
-                                        <div class="audio-attachment" v-if="msg.audio_url">
-                                            <audio controls class="audio-player">
-                                                <source :src="msg.audio_url" type="audio/wav">
-                                                {{ tm('status.audioNotSupported') }}
-                                            </audio>
-                                        </div>
-                                    </div>
-                                    <v-avatar class="user-avatar" color="deep-purple-lighten-3" size="36">
-                                        <v-icon icon="mdi-account" />
-                                    </v-avatar>
-                                </div>
-
-                                <!-- 机器人消息 -->
-                                <div v-else class="bot-message">
-                                    <v-avatar class="bot-avatar" color="deep-purple" size="36">
-                                        <span class="text-h6">✨</span>
-                                    </v-avatar>
-                                    <div class="message-bubble bot-bubble">
-                                        <div v-html="formatMessage(msg.content)" class="markdown-content"></div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                        <!-- 消息列表组件 -->
+                        <MessageList 
+                            v-else
+                            :messages="formattedMessages" 
+                            :isDark="false"
+                        />
                     </div>
                 </v-card-text>
 
@@ -291,6 +257,7 @@ import { VueMonacoEditor } from '@guolao/vue-monaco-editor';
 import MarkdownIt from 'markdown-it';
 import { useCommonStore } from '@/stores/common';
 import { useI18n, useModuleI18n } from '@/i18n/composables';
+import MessageList from '@/components/chat/MessageList.vue';
 
 // 配置markdown-it，默认安全设置
 const md = new MarkdownIt({
@@ -303,7 +270,8 @@ const md = new MarkdownIt({
 export default {
     name: 'ConversationPage',
     components: {
-        VueMonacoEditor
+        VueMonacoEditor,
+        MessageList
     },
 
     setup() {
@@ -484,6 +452,30 @@ export default {
                 messageTypes: this.messageTypeFilter,
                 search: this.search
             };
+        },
+
+        // 将对话历史转换为 MessageList 组件期望的格式
+        formattedMessages() {
+            return this.conversationHistory.map(msg => {
+                console.log('处理消息:', msg.role, msg.image_url, msg.audio_url);
+                if (msg.role === 'user') {
+                    return {
+                        content: {
+                            type: 'user',
+                            message: this.extractTextFromContent(msg.content),
+                            image_url: this.extractImagesFromContent(msg.content),
+                        }
+                    };
+                } else {
+                    return {
+                        content: {
+                            type: 'bot',
+                            message: this.extractTextFromContent(msg.content),
+                            embedded_images: this.extractImagesFromContent(msg.content),
+                        }
+                    };
+                }
+            });
         }
     },
 
@@ -861,6 +853,30 @@ export default {
             this.message = message;
             this.messageType = 'error';
             this.showMessage = true;
+        },
+
+        // 从内容中提取文本
+        extractTextFromContent(content) {
+            if (typeof content === 'string') {
+                return content;
+            } else if (Array.isArray(content)) {
+                return content.filter(item => item.type === 'text')
+                    .map(item => item.text)
+                    .join('\n');
+            } else if (typeof content === 'object') {
+                return Object.values(content).filter(val => typeof val === 'string').join('');
+            }
+            return '';
+        },
+
+        // 从内容中提取图片URL
+        extractImagesFromContent(content) {
+            if (Array.isArray(content)) {
+                return content.filter(item => item.type === 'image_url')
+                    .map(item => item.image_url?.url)
+                    .filter(url => url);
+            }
+            return [];
         }
     }
 }
@@ -885,7 +901,7 @@ export default {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
-/* 聊天消息样式 */
+/* 聊天消息容器样式 */
 .conversation-messages-container {
     max-height: 500px;
     overflow-y: auto;
@@ -894,87 +910,6 @@ export default {
     background-color: #f9f9f9;
 }
 
-.message-list {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-.message-item {
-    margin-bottom: 8px;
-    animation: fadeIn 0.3s ease-out;
-}
-
-.user-message {
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-start;
-    gap: 12px;
-}
-
-.bot-message {
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: 12px;
-}
-
-.message-bubble {
-    padding: 12px 16px;
-    border-radius: 18px;
-    max-width: 80%;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.user-bubble {
-    background-color: #f0f4ff;
-    color: #333;
-    border-top-right-radius: 4px;
-}
-
-.bot-bubble {
-    background-color: #fff;
-    border: 1px solid #eaeaea;
-    color: #333;
-    border-top-left-radius: 4px;
-}
-
-.user-avatar,
-.bot-avatar {
-    margin-top: 2px;
-}
-
-/* 附件样式 */
-.image-attachments {
-    display: flex;
-    gap: 8px;
-    margin-top: 8px;
-    flex-wrap: wrap;
-}
-
-.attached-image {
-    width: 120px;
-    height: 120px;
-    object-fit: cover;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    transition: transform 0.2s ease;
-}
-
-.attached-image:hover {
-    transform: scale(1.05);
-}
-
-.audio-attachment {
-    margin-top: 8px;
-}
-
-.audio-player {
-    width: 100%;
-    height: 36px;
-    border-radius: 18px;
-}
-
 /* 对话详情卡片 */
 .conversation-detail-card {
     max-height: 90vh;
@@ -982,95 +917,6 @@ export default {
     flex-direction: column;
 }
 
-/* Markdown内容样式 */
-.markdown-content {
-    font-family: inherit;
-    line-height: 1.6;
-}
-
-.markdown-content h1,
-.markdown-content h2,
-.markdown-content h3,
-.markdown-content h4,
-.markdown-content h5,
-.markdown-content h6 {
-    margin-top: 16px;
-    margin-bottom: 10px;
-    font-weight: 600;
-    color: #333;
-}
-
-.markdown-content h1 {
-    font-size: 1.8em;
-    border-bottom: 1px solid #eee;
-    padding-bottom: 6px;
-}
-
-.markdown-content h2 {
-    font-size: 1.5em;
-}
-
-.markdown-content h3 {
-    font-size: 1.3em;
-}
-
-.markdown-content li {
-    margin-left: 16px;
-    margin-bottom: 4px;
-}
-
-.markdown-content p {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-.markdown-content pre {
-    background-color: #f8f8f8;
-    padding: 12px;
-    border-radius: 6px;
-    overflow-x: auto;
-    margin: 12px 0;
-}
-
-.markdown-content code {
-    background-color: #f5f0ff;
-    padding: 2px 4px;
-    border-radius: 4px;
-    font-family: 'Fira Code', monospace;
-    font-size: 0.9em;
-    color: #673ab7;
-}
-
-.markdown-content img {
-    max-width: 100%;
-    border-radius: 8px;
-    margin: 10px 0;
-}
-
-.markdown-content blockquote {
-    border-left: 4px solid #673ab7;
-    padding-left: 16px;
-    color: #666;
-    margin: 16px 0;
-}
-
-.markdown-content table {
-    border-collapse: collapse;
-    width: 100%;
-    margin: 16px 0;
-}
-
-.markdown-content th,
-.markdown-content td {
-    border: 1px solid #eee;
-    padding: 8px 12px;
-    text-align: left;
-}
-
-.markdown-content th {
-    background-color: #f5f0ff;
-}
-
 /* 动画 */
 @keyframes fadeIn {
     from {
diff --git a/dashboard/src/views/PersonaPage.vue b/dashboard/src/views/PersonaPage.vue
index 18cc5445..1da6a7de 100644
--- a/dashboard/src/views/PersonaPage.vue
+++ b/dashboard/src/views/PersonaPage.vue
@@ -23,7 +23,7 @@
             <!-- 人格卡片网格 -->
             <v-row>
                 <v-col v-for="persona in personas" :key="persona.persona_id" cols="12" md="6" lg="4" xl="3">
-                    <v-card class="persona-card" elevation="2" rounded="lg" @click="viewPersona(persona)">
+                    <v-card class="persona-card" rounded="md" @click="viewPersona(persona)">
                         <v-card-title class="d-flex justify-space-between align-center">
                             <div class="text-truncate ml-2">
                                 {{ persona.persona_id }}
@@ -296,9 +296,9 @@
                 <v-card-text>
                     <div class="mb-4">
                         <h4 class="text-h6 mb-2">{{ tm('form.systemPrompt') }}</h4>
-                        <div class="system-prompt-content">
+                        <pre class="system-prompt-content">
                             {{ viewingPersona.system_prompt }}
-                        </div>
+                        </pre>
                     </div>
 
                     <div v-if="viewingPersona.begin_dialogs && viewingPersona.begin_dialogs.length > 0" class="mb-4">
@@ -759,10 +759,6 @@ export default {
     cursor: pointer;
 }
 
-.persona-card:hover {
-    box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15);
-}
-
 .system-prompt-preview {
     font-size: 14px;
     line-height: 1.4;
@@ -775,10 +771,10 @@ export default {
 }
 
 .system-prompt-content {
-    background-color: rgba(var(--v-theme-surface-variant), 0.3);
+    max-height: 400px;
+    overflow: auto;
     padding: 12px;
     border-radius: 8px;
-    font-family: 'Roboto Mono', monospace;
     font-size: 14px;
     line-height: 1.5;
     white-space: pre-wrap;
diff --git a/dashboard/src/views/dashboards/default/DefaultDashboard.vue b/dashboard/src/views/dashboards/default/DefaultDashboard.vue
index 3b66f83d..4037a004 100644
--- a/dashboard/src/views/dashboards/default/DefaultDashboard.vue
+++ b/dashboard/src/views/dashboards/default/DefaultDashboard.vue
@@ -1,10 +1,5 @@
 <template>
   <div class="dashboard-container">
-    <div class="dashboard-header">
-      <h1 class="dashboard-title">{{ t('title') }}</h1>
-      <div class="dashboard-subtitle">{{ t('subtitle') }}</div>
-    </div>
-    
     <v-slide-y-transition>
       <v-row v-if="noticeTitle && noticeContent" class="notice-row">
         <v-alert
@@ -166,29 +161,10 @@ export default {
   background-color: var(--v-theme-background);
   min-height: calc(100vh - 64px);
   border-radius: 10px;
-  
-}
-
-.dashboard-header {
-  margin-bottom: 24px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-}
-
-.dashboard-title {
-  font-size: 24px;
-  font-weight: 600;
-  color: var(--v-theme-primaryText);
-  margin-bottom: 4px;
-}
-
-.dashboard-subtitle {
-  font-size: 14px;
-  color: var(--v-theme-secondaryText);
 }
 
 .notice-row {
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 }
 
 .dashboard-alert {