From c36142deafc72a673be48cf1a358a022440a173d Mon Sep 17 00:00:00 2001 From: Soulter <905617992@qq.com> Date: Mon, 30 Jun 2025 15:20:29 +0800 Subject: [PATCH] perf: chatpage UI --- dashboard/src/theme/LightTheme.ts | 2 +- dashboard/src/views/ChatPage.vue | 334 +++++++++++------------------- 2 files changed, 118 insertions(+), 218 deletions(-) diff --git a/dashboard/src/theme/LightTheme.ts b/dashboard/src/theme/LightTheme.ts index a555fddd7..94e011867 100644 --- a/dashboard/src/theme/LightTheme.ts +++ b/dashboard/src/theme/LightTheme.ts @@ -20,7 +20,7 @@ const PurpleTheme: ThemeTypes = { lightsuccess: '#b9f6ca', lighterror: '#f9d8d8', lightwarning: '#fff8e1', - primaryText: '#000000dd', + primaryText: '#1b1c1d', secondaryText: '#000000aa', darkprimary: '#1565c0', darksecondary: '#4527a0', diff --git a/dashboard/src/views/ChatPage.vue b/dashboard/src/views/ChatPage.vue index c47509ab5..2954153ae 100644 --- a/dashboard/src/views/ChatPage.vue +++ b/dashboard/src/views/ChatPage.vue @@ -3,13 +3,16 @@
-
+
AstrBot Logo - AstrBot + AstrBot
- +
{{ tm('actions.newChat') }} + v-if="!sidebarCollapsed" prepend-icon="mdi-plus" + style="background-color: transparent !important; border-radius: 4px;">{{ + tm('actions.newChat') }}
@@ -29,11 +34,12 @@
-
- + + style="background-color: transparent;" @update:selected="getConversationMessages"> {{ item.title @@ -62,42 +68,13 @@
-
-
- {{ tm('conversation.systemStatus') }} -
-
- - - {{ tm('conversation.llmService') }} - - - - - {{ tm('conversation.speechToText') }} - -
- - +
+
+ @click="deleteConversation(currCid)" color="error" density="comfortable" + size="small"> mdi-delete {{ tm('actions.deleteChat') }} @@ -111,14 +88,18 @@
-

{{ getCurrentConversation.title || tm('conversation.newConversation') }}

-
{{ formatDate(getCurrentConversation.updated_at) }}
+

{{ getCurrentConversation.title || + tm('conversation.newConversation') + }}

+
{{ formatDate(getCurrentConversation.updated_at) }} +
@@ -131,7 +112,8 @@ @@ -175,8 +157,9 @@
-
-
+
+
{{ msg.message }} @@ -212,34 +195,21 @@
- - - - - +
+ +
+ + +
+
@@ -260,16 +230,17 @@
+
- + {{ tm('actions.editTitle') }} - + @@ -277,9 +248,9 @@ {{ t('core.common.save') }} - + - + mdi-information-outline {{ tm('connection.title') }} @@ -293,13 +264,8 @@
{{ tm('connection.message') }}
- - + +
{{ tm('connection.reasons') }}
@@ -310,12 +276,7 @@ - +
{{ tm('connection.notice') }}
@@ -324,12 +285,7 @@ - + {{ tm('connection.understand') }} @@ -337,15 +293,10 @@ - + - {{ connectionStatusColor === 'success' ? 'mdi-check-circle' : - connectionStatusColor === 'warning' ? 'mdi-alert-circle' : 'mdi-information' }} + {{ connectionStatusColor === 'success' ? 'mdi-check-circle' : + connectionStatusColor === 'warning' ? 'mdi-alert-circle' : 'mdi-information' }} {{ connectionStatusMessage }} @@ -374,10 +325,10 @@ export default { type: Boolean, default: false } - }, setup() { + }, setup() { const { t } = useI18n(); const { tm } = useModuleI18n('features/chat'); - + return { t, tm, @@ -410,7 +361,7 @@ export default { eventSourceReader: null, sseReconnecting: false, // 添加重连状态标志 - + // // Ctrl键长按相关变量 ctrlKeyDown: false, ctrlKeyTimer: null, @@ -437,7 +388,7 @@ export default { connectionStatusColor: 'info', } }, - + computed: { isDark() { return useCustomizerStore().uiTheme === 'PurpleThemeDark'; @@ -455,13 +406,13 @@ export default { immediate: true, handler(to, from) { console.log('Route changed:', to.path, 'from:', from?.path); // 如果是从不同的路由模式切换（chat <-> chatbox），重新建立SSE连接 - if (from && + if (from && ((from.path.startsWith('/chat') && to.path.startsWith('/chatbox')) || - (from.path.startsWith('/chatbox') && to.path.startsWith('/chat')))) { + (from.path.startsWith('/chatbox') && to.path.startsWith('/chat')))) { console.log('Route mode changed, reconnecting SSE...'); this.reconnectSSE(); } - + // Check if the route matches /chat/ or /chatbox/ pattern if (to.path.startsWith('/chat/') || to.path.startsWith('/chatbox/')) { const pathCid = to.path.split('/')[2]; @@ -481,7 +432,7 @@ export default { } } }, - + // Watch for conversations loaded to handle pending cid conversations: { handler(newConversations) { @@ -527,7 +478,7 @@ export default { beforeUnmount() { this.disconnectSSE(); - + // 移除keyup事件监听 document.removeEventListener('keyup', this.handleInputKeyUp); @@ -538,7 +489,7 @@ export default { // Cleanup blob URLs this.cleanupMediaCache(); - }, + }, methods: { // 显示连接冲突对话框 showConnectionConflictDialog() { @@ -658,7 +609,7 @@ export default { } this.eventSourceReader = null; } - + if (this.eventSource) { try { this.eventSource.cancel(); @@ -676,33 +627,33 @@ export default { console.log('SSE reconnection already in progress'); return; } - + this.sseReconnecting = true; console.log('Reconnecting SSE...'); this.disconnectSSE(); - + // 等待更长时间确保后端连接完全清理 await new Promise(resolve => setTimeout(resolve, 1000)); - + this.startListeningEvent(); }, async startListeningEvent() { // 确保之前的连接已断开 this.disconnectSSE(); - + // 如果正在重连过程中，等待一下 if (this.sseReconnecting) { await new Promise(resolve => setTimeout(resolve, 500)); } - + let retryCount = 0; const maxRetries = 3; - + while (retryCount < maxRetries) { try { console.log(`尝试建立SSE连接 (${retryCount + 1}/${maxRetries})`); - + const response = await fetch('/api/chat/listen', { method: 'GET', headers: { @@ -716,13 +667,13 @@ export default { } const reader = response.body.getReader(); - const decoder = new TextDecoder(); + const decoder = new TextDecoder(); this.eventSource = reader; this.eventSourceReader = reader; this.sseReconnecting = false; let in_streaming = false; - let message_obj = null; + let message_obj = null; console.log('SSE连接已建立'); // 显示连接成功状态 if (retryCount > 0) { @@ -856,28 +807,28 @@ export default { break; } } - + // 如果成功连接并正常结束，跳出重试循环 break; - + } catch (error) { console.error(`SSE连接错误 (尝试 ${retryCount + 1}):`, error); - - retryCount++; + + retryCount++; if (error.message === 'CONNECTION_CONFLICT' && retryCount < maxRetries) { console.log(`连接冲突，等待 ${2000 * retryCount}ms 后重试...`); this.showConnectionStatus(`${this.tm('connection.status.reconnecting')} (${retryCount}/${maxRetries})`, 'warning'); await new Promise(resolve => setTimeout(resolve, 2000 * retryCount)); continue; } - + if (retryCount >= maxRetries) { console.error('SSE连接重试次数已达上限'); this.showConnectionStatus(this.tm('connection.status.failed'), 'error'); this.sseReconnecting = false; break; } - + // 等待一段时间后重试 await new Promise(resolve => setTimeout(resolve, 1000 * retryCount)); } finally { @@ -885,7 +836,7 @@ export default { this.eventSourceReader = null; } } - + this.sseReconnecting = false; }, @@ -981,7 +932,7 @@ export default { 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); @@ -1000,7 +951,7 @@ export default { 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')) { @@ -1010,7 +961,7 @@ export default { } } - + axios.get('/api/chat/get_conversation?conversation_id=' + cid[0]).then(async response => { this.currCid = cid[0]; let message = JSON.parse(response.data.data.history); @@ -1098,9 +1049,9 @@ export default { // 检查是否可以发送消息 canSendMessage() { - return (this.prompt && this.prompt.trim()) || - this.stagedImagesName.length > 0 || - this.stagedAudioUrl; + return (this.prompt && this.prompt.trim()) || + this.stagedImagesName.length > 0 || + this.stagedAudioUrl; }, async sendMessage() { @@ -1180,11 +1131,11 @@ export default { const container = this.$refs.messageContainer; container.scrollTop = container.scrollHeight; }); - }, + }, handleInputKeyDown(e) { if (e.ctrlKey && e.keyCode === 66) { // Ctrl+B组合键 e.preventDefault(); // 防止默认行为 - + // 防止重复触发 if (this.ctrlKeyDown) return; @@ -1197,7 +1148,7 @@ export default { } }, this.ctrlKeyLongPressThreshold); } - }, + }, handleInputKeyUp(e) { if (e.keyCode === 66) { // B键释放 this.ctrlKeyDown = false; @@ -1305,26 +1256,27 @@ export default { opacity: 0; } - -/* 聊天页面布局 */ .chat-page-card { - margin-bottom: 16px; width: 100%; - height: 100%; - border-radius: 16px; + 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: calc(100vh - 120px); + max-height: 100%; padding: 0; + overflow: hidden; } .chat-layout { height: 100%; + max-height: 100%; display: flex; + overflow: hidden; } .sidebar-panel { @@ -1334,29 +1286,11 @@ export default { flex-direction: column; padding: 0; border-right: 1px solid rgba(0, 0, 0, 0.05); - background-color: var(--v-theme-containerBg); height: 100%; + max-height: 100%; position: relative; transition: all 0.3s ease; overflow: hidden; - /* 防止内容溢出 */ -} - -.sidebar-panel ::-webkit-scrollbar { - width: 6px; -} - -.sidebar-panel ::-webkit-scrollbar-track { - background: transparent; -} - -.sidebar-panel ::-webkit-scrollbar-thumb { - background-color: rgba(0, 0, 0, 0.2); - border-radius: 3px; -} - -.sidebar-panel ::-webkit-scrollbar-thumb:hover { - background-color: rgba(0, 0, 0, 0.3); } /* 侧边栏折叠状态 */ @@ -1439,7 +1373,7 @@ export default { .status-chips .v-chip { flex: 1 1 0; justify-content: center; - opacity: 0.7; /* Make border and text slightly transparent */ + opacity: 0.7; } .status-chip { @@ -1467,7 +1401,8 @@ export default { } .delete-btn-container { - /* margin-top: -8px; */ /* Removed for better layout practices */ + /* margin-top: -8px; */ + /* Removed for better layout practices */ } .expand-enter-active, @@ -1492,20 +1427,24 @@ export default { 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: calc(100% - 80px); + height: 100%; + max-height: 100%; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; + flex: 1; + min-height: 0; } /* 欢迎页样式 */ @@ -1577,8 +1516,9 @@ export default { } .user-bubble { - background-color: var(--v-theme-chatMessageBubble); color: var(--v-theme-primaryText); + padding: 12px 16px; + font-size: 16px; } .bot-bubble { @@ -1633,17 +1573,8 @@ export default { background-color: var(--v-theme-surface); position: relative; border-top: 1px solid var(--v-theme-border); -} - -.message-input { - border-radius: 24px; - max-width: 900px; - margin: 0 auto; -} - -.send-btn, -.record-btn { - margin-left: 4px; + flex-shrink: 0; + /* 防止输入区域被压缩 */ } /* 附件预览区 */ @@ -1797,38 +1728,7 @@ export default { border-bottom: 1px solid var(--v-theme-border); width: 100%; padding-right: 32px; -} - -.conversation-header-content { - display: flex; - flex-direction: column; -} - -.conversation-header-title { - font-size: 18px; - font-weight: 600; - margin: 0; - color: var(--v-theme-primaryText); -} - -.conversation-header-time { - font-size: 12px; - color: var(--v-theme-secondaryText); - margin-top: 4px; -} - -.conversation-header-actions { - display: flex; - align-items: center; -} - -.fullscreen-icon { - opacity: 0.7; - transition: opacity 0.2s; - cursor: pointer; -} - -.fullscreen-icon:hover { - opacity: 1; + flex-shrink: 0; + /* 防止header被压缩 */ } \ No newline at end of file