diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css b/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
index da960e963..75ae0fd2b 100644
--- a/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
+++ b/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
@@ -1,4 +1,4 @@
-/* Auto-generated MDI subset – 256 icons */
+/* Auto-generated MDI subset – 243 icons */
 /* Do not edit manually. Run: pnpm run subset-icons */
 
 @font-face {
@@ -36,10 +36,6 @@
   content: "\F0899";
 }
 
-.mdi-account-voice::before {
-  content: "\F05CB";
-}
-
 .mdi-alert::before {
   content: "\F0026";
 }
@@ -180,10 +176,6 @@
   content: "\F0132";
 }
 
-.mdi-checkbox-multiple-marked-outline::before {
-  content: "\F0139";
-}
-
 .mdi-chevron-double-left::before {
   content: "\F013D";
 }
@@ -244,14 +236,6 @@
   content: "\F0626";
 }
 
-.mdi-code-tags::before {
-  content: "\F0174";
-}
-
-.mdi-code-tags-check::before {
-  content: "\F0694";
-}
-
 .mdi-cog::before {
   content: "\F0493";
 }
@@ -360,14 +344,6 @@
   content: "\F0C68";
 }
 
-.mdi-emoticon-confused::before {
-  content: "\F10DE";
-}
-
-.mdi-emoticon-confused-outline::before {
-  content: "\F10DF";
-}
-
 .mdi-export::before {
   content: "\F0207";
 }
@@ -440,10 +416,6 @@
   content: "\F0A4D";
 }
 
-.mdi-file-upload-outline::before {
-  content: "\F0A4E";
-}
-
 .mdi-file-word-box::before {
   content: "\F022D";
 }
@@ -456,14 +428,6 @@
   content: "\F0236";
 }
 
-.mdi-flash::before {
-  content: "\F0241";
-}
-
-.mdi-flash-off::before {
-  content: "\F0243";
-}
-
 .mdi-folder::before {
   content: "\F024B";
 }
@@ -552,6 +516,10 @@
   content: "\F0EFE";
 }
 
+.mdi-image-outline::before {
+  content: "\F0976";
+}
+
 .mdi-import::before {
   content: "\F02FA";
 }
@@ -576,18 +544,10 @@
   content: "\F0309";
 }
 
-.mdi-keyboard-outline::before {
-  content: "\F097B";
-}
-
 .mdi-label::before {
   content: "\F0315";
 }
 
-.mdi-lan-connect::before {
-  content: "\F0318";
-}
-
 .mdi-language-markdown::before {
   content: "\F0354";
 }
@@ -648,12 +608,12 @@
   content: "\F035D";
 }
 
-.mdi-menu-right::before {
-  content: "\F035F";
+.mdi-menu-open::before {
+  content: "\F0BAB";
 }
 
-.mdi-message-off-outline::before {
-  content: "\F164E";
+.mdi-menu-right::before {
+  content: "\F035F";
 }
 
 .mdi-message-outline::before {
@@ -668,10 +628,6 @@
   content: "\F036A";
 }
 
-.mdi-microphone::before {
-  content: "\F036C";
-}
-
 .mdi-microphone-message::before {
   content: "\F050A";
 }
@@ -756,10 +712,6 @@
   content: "\F1353";
 }
 
-.mdi-phone-in-talk::before {
-  content: "\F03F6";
-}
-
 .mdi-pin::before {
   content: "\F0403";
 }
@@ -1036,10 +988,6 @@
   content: "\F05B7";
 }
 
-.mdi-wrench-outline::before {
-  content: "\F0BE0";
-}
-
 .mdi-zip-box::before {
   content: "\F05C4";
 }
diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff
index 2027f555a..f918d30e0 100644
Binary files a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff and b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff differ
diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2
index 79b3946fb..25ae74b9a 100644
Binary files a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 and b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 differ
diff --git a/dashboard/src/components/chat/Chat.vue b/dashboard/src/components/chat/Chat.vue
index 631b9d600..8fa74a311 100644
--- a/dashboard/src/components/chat/Chat.vue
+++ b/dashboard/src/components/chat/Chat.vue
@@ -1,942 +1,2087 @@
 <template>
-    <v-card class="chat-page-card" elevation="0" rounded="0">
-        <v-card-text class="chat-page-container">
-            <!-- 遮罩层 (手机端) -->
-            <div class="mobile-overlay" v-if="isMobile && mobileMenuOpen" @click="closeMobileSidebar"></div>
+  <div
+    class="chat-ui"
+    :class="{ 'is-dark': isDark, 'sidebar-collapsed': isSidebarCollapsed }"
+  >
+    <v-navigation-drawer
+      v-model="chatSidebarDrawer"
+      class="chat-sidebar"
+      :class="{ collapsed: isSidebarCollapsed }"
+      :permanent="lgAndUp"
+      :temporary="!lgAndUp"
+      :rail="lgAndUp && sidebarCollapsed"
+      :width="280"
+      :rail-width="68"
+      location="left"
+      floating
+    >
+      <div class="sidebar-top">
+        <div v-if="lgAndUp" class="brand-row">
+          <v-btn
+            icon
+            size="small"
+            variant="text"
+            class="sidebar-toggle"
+            @click="sidebarCollapsed = !sidebarCollapsed"
+          >
+            <v-icon
+              size="20"
+              class="sidebar-action-icon"
+              :class="{ 'chevron-collapsed': isSidebarCollapsed }"
+            >
+              mdi-chevron-left
+            </v-icon>
+          </v-btn>
+        </div>
 
-            <div class="chat-layout">
-                <ConversationSidebar
-                    :sessions="sessions"
-                    :selectedSessions="selectedSessions"
-                    :currSessionId="currSessionId"
-                    :selectedProjectId="selectedProjectId"
-                    :transportMode="transportMode"
-                    :sendShortcut="sendShortcut"
-                    :isDark="isDark"
-                    :chatboxMode="chatboxMode"
-                    :isMobile="isMobile"
-                    :mobileMenuOpen="mobileMenuOpen"
-                    :projects="projects"
-                    @newChat="handleNewChat"
-                    @selectConversation="handleSelectConversation"
-                    @editTitle="showEditTitleDialog"
-                    @deleteConversation="handleDeleteConversation"
-                    @batchDeleteConversations="handleBatchDeleteConversations"
-                    @closeMobileSidebar="closeMobileSidebar"
-                    @toggleTheme="toggleTheme"
-                    @toggleFullscreen="toggleFullscreen"
-                    @selectProject="handleSelectProject"
-                    @createProject="showCreateProjectDialog"
-                    @editProject="showEditProjectDialog"
-                    @deleteProject="handleDeleteProject"
-                    @updateTransportMode="setTransportMode"
-                    @updateSendShortcut="setSendShortcut"
-                />
+        <v-btn
+          class="new-chat-btn"
+          :class="{ 'icon-only': isSidebarCollapsed }"
+          variant="text"
+          :icon="isSidebarCollapsed"
+          @click="startNewChat"
+        >
+          <v-icon
+            size="20"
+            class="sidebar-action-icon"
+            :class="{ 'mr-2': !isSidebarCollapsed }"
+            >mdi-square-edit-outline</v-icon
+          >
+          <span v-if="!isSidebarCollapsed">{{ tm("actions.newChat") }}</span>
+        </v-btn>
 
-                <!-- 右侧聊天内容区域 -->
-                <div class="chat-content-panel">
-                    <!-- Live Mode -->
-                    <LiveMode v-if="liveModeOpen" @close="closeLiveMode" />
+        <ProjectList
+          v-if="!isSidebarCollapsed"
+          :projects="projects"
+          :selected-project-id="selectedProjectId"
+          @create-project="openCreateProjectDialog"
+          @edit-project="openEditProjectDialog"
+          @delete-project="handleDeleteProject"
+          @select-project="selectProject"
+        />
+      </div>
 
-                    <!-- 正常聊天界面 -->
-                    <template v-else>
+      <div v-if="!isSidebarCollapsed" class="session-list">
+        <div
+          v-for="session in sessions"
+          :key="session.session_id"
+          class="session-item"
+          :class="{ active: currSessionId === session.session_id }"
+          role="button"
+          tabindex="0"
+          @click="selectSession(session.session_id)"
+          @keydown.enter="selectSession(session.session_id)"
+          @keydown.space.prevent="selectSession(session.session_id)"
+        >
+          <span v-if="!isSidebarCollapsed" class="session-title">{{
+            sessionTitle(session)
+          }}</span>
+          <div class="session-actions" @click.stop>
+            <v-btn
+              icon="mdi-pencil-outline"
+              size="x-small"
+              variant="text"
+              class="session-action-btn"
+              :title="tm('conversation.editDisplayName')"
+              @click="editSidebarSessionTitle(session)"
+            />
+            <v-btn
+              icon="mdi-delete-outline"
+              size="x-small"
+              variant="text"
+              class="session-action-btn"
+              :title="tm('actions.deleteChat')"
+              @click="deleteSidebarSession(session)"
+            />
+          </div>
+          <v-progress-circular
+            v-if="isSessionRunning(session.session_id)"
+            class="session-progress"
+            indeterminate
+            size="16"
+            width="2"
+          />
+        </div>
 
-                        <div v-if="currentSessionProject && messages && messages.length > 0" class="breadcrumb-container">
-                            <div class="breadcrumb-content">
-                                <span class="breadcrumb-emoji">{{ currentSessionProject.emoji || '📁' }}</span>
-                                <span class="breadcrumb-project" @click="handleSelectProject(currentSessionProject.project_id)">{{ currentSessionProject.title }}</span>
-                                <v-icon size="small" class="breadcrumb-separator">mdi-chevron-right</v-icon>
-                                <span class="breadcrumb-session">{{ getCurrentSession?.display_name || tm('conversation.newConversation') }}</span>
-                            </div>
-                        </div>
+        <div
+          v-if="!isSidebarCollapsed && !sessions.length && !loadingSessions"
+          class="empty-sessions"
+        >
+          {{ tm("conversation.noHistory") }}
+        </div>
+      </div>
 
-                        <div class="message-list-wrapper" v-if="currSessionId && !selectedProjectId">
-                            <MessageList :messages="messages" :isDark="isDark"
-                                :isStreaming="isStreaming || isConvRunning" 
-                                :isLoadingMessages="isLoadingMessages"
-                                @openImagePreview="openImagePreview"
-                                @replyMessage="handleReplyMessage"
-                                @replyWithText="handleReplyWithText"
-                                @openRefs="handleOpenRefs"
-                                ref="messageList" />
-                            <div class="message-list-fade" :class="{ 'fade-dark': isDark }"></div>
-                        </div>
-                        <ProjectView 
-                            v-else-if="selectedProjectId"
-                            :project="currentProject"
-                            :sessions="projectSessions"
-                            @selectSession="(sessionId) => handleSelectConversation([sessionId])"
-                            @editSessionTitle="showEditTitleDialog"
-                            @deleteSession="handleDeleteConversation"
-                        >
-                            <ChatInput
-                                v-model:prompt="prompt"
-                                :stagedImagesUrl="stagedImagesUrl"
-                                :stagedAudioUrl="stagedAudioUrl"
-                                :stagedFiles="stagedNonImageFiles"
-                                :disabled="false"
-                                :is-running="isStreaming || isConvRunning"
-                                :enableStreaming="enableStreaming"
-                                :isRecording="isRecording"
-                                :session-id="currSessionId || null"
-                                :current-session="getCurrentSession"
-                                :replyTo="replyTo"
-                                :send-shortcut="sendShortcut"
-                                @send="handleSendMessage"
-                                @stop="handleStopMessage"
-                                @toggleStreaming="toggleStreaming"
-                                @removeImage="removeImage"
-                                @removeAudio="removeAudio"
-                                @removeFile="removeFile"
-                                @startRecording="handleStartRecording"
-                                @stopRecording="handleStopRecording"
-                            @pasteImage="handlePaste"
-                            @fileSelect="handleFileSelect"
-                            @clearReply="clearReply"
-                            @openLiveMode="openLiveMode"
-                            ref="chatInputRef"
-                        />
-                        </ProjectView>
-                        <WelcomeView 
-                            v-else
-                            :isLoading="isLoadingMessages"
-                        >
-                            <ChatInput
-                                v-model:prompt="prompt"
-                                :stagedImagesUrl="stagedImagesUrl"
-                                :stagedAudioUrl="stagedAudioUrl"
-                                :stagedFiles="stagedNonImageFiles"
-                                :disabled="false"
-                                :is-running="isStreaming || isConvRunning"
-                                :enableStreaming="enableStreaming"
-                                :isRecording="isRecording"
-                                :session-id="currSessionId || null"
-                                :current-session="getCurrentSession"
-                                :replyTo="replyTo"
-                                :send-shortcut="sendShortcut"
-                                @send="handleSendMessage"
-                                @stop="handleStopMessage"
-                                @toggleStreaming="toggleStreaming"
-                                @removeImage="removeImage"
-                                @removeAudio="removeAudio"
-                                @removeFile="removeFile"
-                                @startRecording="handleStartRecording"
-                                @stopRecording="handleStopRecording"
-                                @pasteImage="handlePaste"
-                                @fileSelect="handleFileSelect"
-                                @clearReply="clearReply"
-                                @openLiveMode="openLiveMode"
-                                ref="chatInputRef"
-                            />
-                        </WelcomeView>
+      <div class="sidebar-footer">
+        <StyledMenu
+          location="top start"
+          offset="10"
+          :close-on-content-click="false"
+        >
+          <template #activator="{ props: menuProps }">
+            <v-btn
+              v-bind="menuProps"
+              class="settings-btn"
+              :class="{ 'icon-only': isSidebarCollapsed }"
+              variant="text"
+              :icon="isSidebarCollapsed"
+            >
+              <v-icon
+                size="20"
+                class="sidebar-action-icon"
+                :class="{ 'mr-2': !isSidebarCollapsed }"
+                >mdi-cog-outline</v-icon
+              >
+              <span v-if="!isSidebarCollapsed">{{
+                t("core.common.settings")
+              }}</span>
+            </v-btn>
+          </template>
 
-                        <!-- 输入区域 -->
-                        <ChatInput
-                            v-if="currSessionId && !selectedProjectId"
-                            v-model:prompt="prompt"
-                            :stagedImagesUrl="stagedImagesUrl"
-                            :stagedAudioUrl="stagedAudioUrl"
-                            :stagedFiles="stagedNonImageFiles"
-                            :disabled="false"
-                            :is-running="isStreaming || isConvRunning"
-                            :enableStreaming="enableStreaming"
-                            :isRecording="isRecording"
-                            :session-id="currSessionId || null"
-                            :current-session="getCurrentSession"
-                            :replyTo="replyTo"
-                            :send-shortcut="sendShortcut"
-                            @send="handleSendMessage"
-                            @stop="handleStopMessage"
-                            @toggleStreaming="toggleStreaming"
-                            @removeImage="removeImage"
-                            @removeAudio="removeAudio"
-                            @removeFile="removeFile"
-                            @startRecording="handleStartRecording"
-                            @stopRecording="handleStopRecording"
-                            @pasteImage="handlePaste"
-                            @fileSelect="handleFileSelect"
-                            @clearReply="clearReply"
-                            @openLiveMode="openLiveMode"
-                            ref="chatInputRef"
-                        />
+          <div class="settings-menu-content">
+            <v-menu
+              location="end"
+              offset="8"
+              open-on-hover
+              :close-on-content-click="true"
+            >
+              <template #activator="{ props: transportMenuProps }">
+                <v-list-item
+                  v-bind="transportMenuProps"
+                  class="styled-menu-item"
+                  rounded="md"
+                >
+                  <template #prepend>
+                    <v-icon size="18">mdi-connection</v-icon>
+                  </template>
+                  <v-list-item-title>{{
+                    tm("transport.title")
+                  }}</v-list-item-title>
+                  <template #append>
+                    <span class="settings-menu-value">{{
+                      currentTransportLabel
+                    }}</span>
+                    <v-icon size="18">mdi-chevron-right</v-icon>
+                  </template>
+                </v-list-item>
+              </template>
+
+              <v-card class="styled-menu-card" elevation="8" rounded="lg">
+                <v-list density="compact" class="styled-menu-list pa-1">
+                  <v-list-item
+                    v-for="item in transportOptions"
+                    :key="item.value"
+                    class="styled-menu-item"
+                    :class="{
+                      'styled-menu-item-active': transportMode === item.value,
+                    }"
+                    rounded="md"
+                    @click="transportMode = item.value"
+                  >
+                    <v-list-item-title>{{
+                      tm(item.labelKey)
+                    }}</v-list-item-title>
+                    <template #append>
+                      <v-icon v-if="transportMode === item.value" size="18">
+                        mdi-check
+                      </v-icon>
                     </template>
+                  </v-list-item>
+                </v-list>
+              </v-card>
+            </v-menu>
+
+            <v-menu
+              location="end"
+              offset="8"
+              open-on-hover
+              :close-on-content-click="true"
+            >
+              <template #activator="{ props: languageMenuProps }">
+                <v-list-item
+                  v-bind="languageMenuProps"
+                  class="styled-menu-item"
+                  rounded="md"
+                >
+                  <template #prepend>
+                    <v-icon size="18">mdi-translate</v-icon>
+                  </template>
+                  <v-list-item-title>{{
+                    t("core.common.language")
+                  }}</v-list-item-title>
+                  <template #append>
+                    <span class="settings-menu-value">{{
+                      currentLanguage?.label || locale
+                    }}</span>
+                    <v-icon size="18">mdi-chevron-right</v-icon>
+                  </template>
+                </v-list-item>
+              </template>
+
+              <v-card class="styled-menu-card" elevation="8" rounded="lg">
+                <v-list density="compact" class="styled-menu-list pa-1">
+                  <v-list-item
+                    v-for="lang in languageOptions"
+                    :key="lang.value"
+                    class="styled-menu-item"
+                    :class="{
+                      'styled-menu-item-active': locale === lang.value,
+                    }"
+                    rounded="md"
+                    @click="switchLanguage(lang.value as Locale)"
+                  >
+                    <template #prepend>
+                      <span class="language-flag">{{ lang.flag }}</span>
+                    </template>
+                    <v-list-item-title>{{ lang.label }}</v-list-item-title>
+                    <template #append>
+                      <v-icon v-if="locale === lang.value" size="18">
+                        mdi-check
+                      </v-icon>
+                    </template>
+                  </v-list-item>
+                </v-list>
+              </v-card>
+            </v-menu>
+
+            <v-list-item
+              class="styled-menu-item"
+              rounded="md"
+              @click="providerDialog = true"
+            >
+              <template #prepend>
+                <v-icon size="18">mdi-robot-outline</v-icon>
+              </template>
+              <v-list-item-title>{{
+                tm("actions.providerConfig")
+              }}</v-list-item-title>
+            </v-list-item>
+
+            <v-list-item
+              class="styled-menu-item"
+              rounded="md"
+              @click="toggleTheme"
+            >
+              <template #prepend>
+                <v-icon size="18">{{
+                  isDark ? "mdi-white-balance-sunny" : "mdi-weather-night"
+                }}</v-icon>
+              </template>
+              <v-list-item-title>{{
+                isDark ? tm("modes.lightMode") : tm("modes.darkMode")
+              }}</v-list-item-title>
+            </v-list-item>
+          </div>
+        </StyledMenu>
+      </div>
+    </v-navigation-drawer>
+
+    <main
+      class="chat-main"
+      :class="{
+        'empty-chat':
+          !selectedProject && !loadingMessages && !activeMessages.length,
+      }"
+    >
+      <ProjectView
+        v-if="selectedProject"
+        :project="selectedProject"
+        :sessions="projectSessions"
+        @select-session="selectProjectSession"
+        @edit-session-title="editProjectSessionTitle"
+        @delete-session="deleteProjectSession"
+      >
+        <section class="project-composer-shell">
+          <ChatInput
+            ref="inputRef"
+            v-model:prompt="draft"
+            :staged-images-url="stagedImagesUrl"
+            :staged-audio-url="stagedAudioUrl"
+            :staged-files="stagedNonImageFiles"
+            :disabled="sending"
+            :enable-streaming="enableStreaming"
+            :is-recording="isRecording"
+            :is-running="
+              Boolean(currSessionId && isSessionRunning(currSessionId))
+            "
+            :session-id="currSessionId || null"
+            :current-session="currentSession"
+            :reply-to="chatInputReplyTarget"
+            :send-shortcut="sendShortcut"
+            @send="sendCurrentMessage"
+            @stop="stopCurrentSession"
+            @toggle-streaming="toggleStreaming"
+            @remove-image="removeImage"
+            @remove-audio="removeAudio"
+            @remove-file="removeFile"
+            @start-recording="startRecording"
+            @stop-recording="stopRecording"
+            @paste-image="handlePaste"
+            @file-select="handleFilesSelected"
+            @clear-reply="replyTarget = null"
+          />
+        </section>
+      </ProjectView>
+
+      <template v-else>
+        <section
+          ref="messagesContainer"
+          class="messages-panel"
+          @scroll="handleMessagesScroll"
+        >
+          <div v-if="loadingMessages" class="center-state">
+            <v-progress-circular indeterminate size="32" width="3" />
+          </div>
+
+          <div v-else-if="sessionProject" class="session-project-breadcrumb">
+            <span>{{ sessionProject.title }}</span>
+            <v-icon size="16">mdi-chevron-right</v-icon>
+            <span>{{ currentSessionTitle }}</span>
+          </div>
+
+          <div v-else-if="!activeMessages.length" class="welcome-state">
+            <div class="welcome-title">{{ tm("welcome.title") }}</div>
+          </div>
+
+          <div
+            v-if="!loadingMessages && activeMessages.length"
+            class="messages-list"
+          >
+            <div
+              v-for="(msg, msgIndex) in activeMessages"
+              :key="msg.id || `${msgIndex}-${msg.created_at || ''}`"
+              class="message-row"
+              :class="isUserMessage(msg) ? 'from-user' : 'from-bot'"
+            >
+              <v-avatar v-if="!isUserMessage(msg)" class="bot-avatar" size="56">
+                <v-progress-circular
+                  style="margin-top: -4px"
+                  v-if="isMessageStreaming(msg, msgIndex)"
+                  indeterminate
+                  size="22"
+                  width="2"
+                />
+                <span v-else class="bot-avatar-symbol" aria-hidden="true">
+                  ✦
+                </span>
+              </v-avatar>
+
+              <div class="message-stack">
+                <div
+                  class="message-bubble"
+                  :class="{
+                    user: isUserMessage(msg),
+                    bot: !isUserMessage(msg),
+                  }"
+                >
+                  <div
+                    v-if="messageContent(msg).isLoading"
+                    class="loading-message"
+                  >
+                    <span>{{ tm("message.loading") }}</span>
+                  </div>
+
+                  <template v-else>
+                    <ReasoningBlock
+                      v-if="messageContent(msg).reasoning"
+                      :reasoning="messageContent(msg).reasoning || ''"
+                      :is-dark="isDark"
+                      :initial-expanded="false"
+                      :is-streaming="isMessageStreaming(msg, msgIndex)"
+                      :has-non-reasoning-content="hasNonReasoningContent(msg)"
+                    />
+
+                    <template
+                      v-for="(part, partIndex) in messageParts(msg)"
+                      :key="`${msgIndex}-${partIndex}-${part.type}`"
+                    >
+                      <button
+                        v-if="part.type === 'reply'"
+                        class="reply-quote"
+                        type="button"
+                        @click="scrollToMessage(part.message_id)"
+                      >
+                        <v-icon size="15">mdi-reply</v-icon>
+                        <span>{{
+                          replyPreview(part.message_id, part.selected_text)
+                        }}</span>
+                      </button>
+
+                      <div
+                        v-else-if="part.type === 'plain' && isUserMessage(msg)"
+                        class="plain-content"
+                      >
+                        {{ part.text || "" }}
+                      </div>
+
+                      <MarkdownMessagePart
+                        v-else-if="part.type === 'plain'"
+                        :content="part.text || ''"
+                        :refs="resolvedMessageRefs(msg)"
+                        :is-dark="isDark"
+                        :custom-html-tags="customMarkdownTags"
+                      />
+
+                      <button
+                        v-else-if="part.type === 'image'"
+                        class="image-part"
+                        type="button"
+                        @click="openImage(partUrl(part))"
+                      >
+                        <img
+                          :src="partUrl(part)"
+                          :alt="part.filename || 'image'"
+                        />
+                      </button>
+
+                      <audio
+                        v-else-if="part.type === 'record'"
+                        class="audio-part"
+                        controls
+                        :src="partUrl(part)"
+                      />
+
+                      <video
+                        v-else-if="part.type === 'video'"
+                        class="video-part"
+                        controls
+                        :src="partUrl(part)"
+                      />
+
+                      <div v-else-if="part.type === 'file'" class="file-part">
+                        <v-icon size="20">mdi-file-document-outline</v-icon>
+                        <span>{{ part.filename || "file" }}</span>
+                        <v-btn
+                          icon="mdi-download"
+                          size="x-small"
+                          variant="text"
+                          :loading="
+                            downloadingFiles.has(
+                              part.attachment_id || part.filename || '',
+                            )
+                          "
+                          @click="downloadPart(part)"
+                        />
+                      </div>
+
+                      <div
+                        v-else-if="part.type === 'tool_call'"
+                        class="tool-call-block"
+                      >
+                        <template
+                          v-for="tool in part.tool_calls || []"
+                          :key="tool.id || tool.name"
+                        >
+                          <ToolCallItem
+                            v-if="isIPythonToolCall(tool)"
+                            :is-dark="isDark"
+                          >
+                            <template #label>
+                              <v-icon size="16">mdi-code-braces</v-icon>
+                              <span>{{ tool.name || "python" }}</span>
+                              <span class="tool-call-inline-status">
+                                {{ toolCallStatusText(tool) }}
+                              </span>
+                            </template>
+                            <template #details>
+                              <IPythonToolBlock
+                                :tool-call="normalizeToolCall(tool)"
+                                :is-dark="isDark"
+                                :show-header="false"
+                                :force-expanded="true"
+                              />
+                            </template>
+                          </ToolCallItem>
+                          <ToolCallCard
+                            v-else
+                            :tool-call="normalizeToolCall(tool)"
+                            :is-dark="isDark"
+                          />
+                        </template>
+                      </div>
+
+                      <div v-else class="unknown-part">
+                        {{ formatJson(part) }}
+                      </div>
+                    </template>
+                  </template>
                 </div>
 
-                <!-- Refs Sidebar -->
-                <RefsSidebar v-model="refsSidebarOpen" :refs="refsSidebarRefs" />
+                <div v-if="showMessageMeta(msg, msgIndex)" class="message-meta">
+                  <span v-if="msg.created_at">{{
+                    formatTime(msg.created_at)
+                  }}</span>
+                  <v-btn
+                    v-if="!isUserMessage(msg)"
+                    icon="mdi-content-copy"
+                    size="x-small"
+                    variant="text"
+                    @click="copyMessage(msg)"
+                  />
+                  <v-btn
+                    icon="mdi-reply-outline"
+                    size="x-small"
+                    variant="text"
+                    @click="setReplyTarget(msg)"
+                  />
+                  <v-menu
+                    v-if="messageContent(msg).agentStats"
+                    location="bottom"
+                  >
+                    <template #activator="{ props: statsProps }">
+                      <v-btn
+                        v-bind="statsProps"
+                        icon="mdi-information-outline"
+                        size="x-small"
+                        variant="text"
+                      />
+                    </template>
+                    <v-card class="stats-card" elevation="4">
+                      <div class="stats-row">
+                        <span>{{ tm("stats.inputTokens") }}</span>
+                        <strong>{{
+                          inputTokens(messageContent(msg).agentStats)
+                        }}</strong>
+                      </div>
+                      <div class="stats-row">
+                        <span>{{ tm("stats.outputTokens") }}</span>
+                        <strong>{{
+                          outputTokens(messageContent(msg).agentStats)
+                        }}</strong>
+                      </div>
+                      <div
+                        v-if="agentTtft(messageContent(msg).agentStats)"
+                        class="stats-row"
+                      >
+                        <span>{{ tm("stats.ttft") }}</span>
+                        <strong>{{
+                          agentTtft(messageContent(msg).agentStats)
+                        }}</strong>
+                      </div>
+                      <div class="stats-row">
+                        <span>{{ tm("stats.duration") }}</span>
+                        <strong>{{
+                          agentDuration(messageContent(msg).agentStats)
+                        }}</strong>
+                      </div>
+                    </v-card>
+                  </v-menu>
+                  <div v-if="messageRefs(msg).length" class="message-meta-refs">
+                    <ActionRef
+                      :refs="resolvedMessageRefs(msg)"
+                      @open-refs="openRefsSidebar"
+                    />
+                  </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="handleSaveTitle" autofocus />
-            </v-card-text>
-            <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn variant="text" @click="editTitleDialog = false" color="grey-darken-1">{{ t('core.common.cancel') }}</v-btn>
-                <v-btn variant="text" @click="handleSaveTitle" color="primary">{{ t('core.common.save') }}</v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
+          </div>
+        </section>
 
-    <!-- 图片预览对话框 -->
-    <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>
+        <section class="composer-shell">
+          <ChatInput
+            ref="inputRef"
+            v-model:prompt="draft"
+            :staged-images-url="stagedImagesUrl"
+            :staged-audio-url="stagedAudioUrl"
+            :staged-files="stagedNonImageFiles"
+            :disabled="sending"
+            :enable-streaming="enableStreaming"
+            :is-recording="isRecording"
+            :is-running="
+              Boolean(currSessionId && isSessionRunning(currSessionId))
+            "
+            :session-id="currSessionId || null"
+            :current-session="currentSession"
+            :reply-to="chatInputReplyTarget"
+            :send-shortcut="sendShortcut"
+            @send="sendCurrentMessage"
+            @stop="stopCurrentSession"
+            @toggle-streaming="toggleStreaming"
+            @remove-image="removeImage"
+            @remove-audio="removeAudio"
+            @remove-file="removeFile"
+            @start-recording="startRecording"
+            @stop-recording="stopRecording"
+            @paste-image="handlePaste"
+            @file-select="handleFilesSelected"
+            @clear-reply="replyTarget = null"
+          />
+        </section>
+      </template>
+    </main>
 
-    <!-- 创建/编辑项目对话框 -->
+    <ProviderConfigDialog v-model="providerDialog" />
     <ProjectDialog
-        v-model="projectDialog"
-        :project="editingProject"
-        @save="handleSaveProject"
+      v-model="projectDialogOpen"
+      :project="editingProject"
+      @save="saveProject"
     />
+    <v-dialog v-model="sessionTitleDialogOpen" max-width="420">
+      <v-card>
+        <v-card-title class="text-h6">
+          {{ tm("conversation.editDisplayName") }}
+        </v-card-title>
+        <v-card-text>
+          <v-text-field
+            v-model="sessionTitleDraft"
+            :label="tm('conversation.displayName')"
+            variant="outlined"
+            density="comfortable"
+            hide-details
+            autofocus
+            @keydown.enter="saveSessionTitleDialog"
+          />
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="sessionTitleDialogOpen = false">
+            {{ t("core.common.cancel") }}
+          </v-btn>
+          <v-btn
+            color="primary"
+            :loading="savingSessionTitle"
+            @click="saveSessionTitleDialog"
+          >
+            {{ t("core.common.save") }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <RefsSidebar v-model="refsSidebarOpen" :refs="selectedRefs" />
+
+    <v-overlay
+      v-model="imagePreview.visible"
+      class="image-preview-overlay"
+      @click="closeImage"
+    >
+      <img
+        :src="imagePreview.url"
+        class="preview-image"
+        alt="preview"
+        @click.stop
+      />
+    </v-overlay>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-import { useCustomizerStore } from '@/stores/customizer';
-import { useI18n, useModuleI18n } from '@/i18n/composables';
-import { useTheme } from 'vuetify';
-import MessageList from '@/components/chat/MessageList.vue';
-import ConversationSidebar from '@/components/chat/ConversationSidebar.vue';
-import ChatInput from '@/components/chat/ChatInput.vue';
-import ProjectDialog from '@/components/chat/ProjectDialog.vue';
-import ProjectView from '@/components/chat/ProjectView.vue';
-import WelcomeView from '@/components/chat/WelcomeView.vue';
-import RefsSidebar from '@/components/chat/message_list_comps/RefsSidebar.vue';
-import LiveMode from '@/components/chat/LiveMode.vue';
-import type { ProjectFormData } from '@/components/chat/ProjectDialog.vue';
-import { useSessions } from '@/composables/useSessions';
-import { useMessages } from '@/composables/useMessages';
-import { useMediaHandling } from '@/composables/useMediaHandling';
-import { useProjects } from '@/composables/useProjects';
-import type { Project } from '@/components/chat/ProjectList.vue';
-import { useRecording } from '@/composables/useRecording';
-import { useToast } from '@/utils/toast';
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  reactive,
+  ref,
+  watch,
+} from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useDisplay } from "vuetify";
+import axios from "axios";
+import { MarkdownCodeBlockNode, setCustomComponents } from "markstream-vue";
+import "markstream-vue/index.css";
+import StyledMenu from "@/components/shared/StyledMenu.vue";
+import ProviderConfigDialog from "@/components/chat/ProviderConfigDialog.vue";
+import ProjectDialog, {
+  type ProjectFormData,
+} from "@/components/chat/ProjectDialog.vue";
+import ProjectList, { type Project } from "@/components/chat/ProjectList.vue";
+import ProjectView from "@/components/chat/ProjectView.vue";
+import ChatInput from "@/components/chat/ChatInput.vue";
+import ReasoningBlock from "@/components/chat/message_list_comps/ReasoningBlock.vue";
+import ToolCallCard from "@/components/chat/message_list_comps/ToolCallCard.vue";
+import ToolCallItem from "@/components/chat/message_list_comps/ToolCallItem.vue";
+import IPythonToolBlock from "@/components/chat/message_list_comps/IPythonToolBlock.vue";
+import RefsSidebar from "@/components/chat/message_list_comps/RefsSidebar.vue";
+import RefNode from "@/components/chat/message_list_comps/RefNode.vue";
+import ActionRef from "@/components/chat/message_list_comps/ActionRef.vue";
+import MarkdownMessagePart from "@/components/chat/message_list_comps/MarkdownMessagePart.vue";
+import { useSessions, type Session } from "@/composables/useSessions";
+import {
+  useMessages,
+  type ChatRecord,
+  type MessagePart,
+  type TransportMode,
+} from "@/composables/useMessages";
+import { useMediaHandling } from "@/composables/useMediaHandling";
+import { useProjects } from "@/composables/useProjects";
+import { useCustomizerStore } from "@/stores/customizer";
+import {
+  useI18n,
+  useLanguageSwitcher,
+  useModuleI18n,
+} from "@/i18n/composables";
+import type { Locale } from "@/i18n/types";
+import { askForConfirmation, useConfirmDialog } from "@/utils/confirmDialog";
 
-interface Props {
-    chatboxMode?: boolean;
-}
-type SendShortcut = 'enter' | 'shift_enter';
-const SEND_SHORTCUT_STORAGE_KEY = 'chat_send_shortcut';
-
-const props = withDefaults(defineProps<Props>(), {
-    chatboxMode: false
+const props = withDefaults(defineProps<{ chatboxMode?: boolean }>(), {
+  chatboxMode: false,
+});
+
+setCustomComponents("chat-message", {
+  ref: RefNode,
+  code_block: MarkdownCodeBlockNode,
 });
 
-const router = useRouter();
 const route = useRoute();
-const { t } = useI18n();
-const { tm } = useModuleI18n('features/chat');
-const { warning: toastWarning } = useToast();
-const theme = useTheme();
+const router = useRouter();
+const { lgAndUp } = useDisplay();
 const customizer = useCustomizerStore();
-
-// UI 状态
-const isMobile = ref(false);
-const mobileMenuOpen = ref(false);
-const imagePreviewDialog = ref(false);
-const previewImageUrl = ref('');
-const isLoadingMessages = ref(false);
-const liveModeOpen = ref(false);
-
-// 使用 composables
+const { t } = useI18n();
+const { tm } = useModuleI18n("features/chat");
+const confirmDialog = useConfirmDialog();
+const { languageOptions, currentLanguage, switchLanguage, locale } =
+  useLanguageSwitcher();
 const {
-    sessions,
-    selectedSessions,
-    currSessionId,
-    pendingSessionId,
-    editTitleDialog,
-    editingTitle,
-    editingSessionId,
-    getCurrentSession,
-    getSessions,
-    newSession,
-    deleteSession: deleteSessionFn,
-    batchDeleteSessions,
-    showEditTitleDialog,
-    saveTitle,
-    updateSessionTitle,
-    newChat
+  sessions,
+  currSessionId,
+  getSessions,
+  newSession,
+  newChat,
+  deleteSession,
+  updateSessionTitle,
 } = useSessions(props.chatboxMode);
-
 const {
-    stagedImagesUrl,
-    stagedAudioUrl,
-    stagedFiles,
-    stagedNonImageFiles,
-    getMediaFile,
-    processAndUploadImage,
-    processAndUploadFile,
-    handlePaste,
-    removeImage,
-    removeAudio,
-    removeFile,
-    clearStaged,
-    cleanupMediaCache
-} = useMediaHandling();
-
-const { isRecording: isRecording, startRecording: startRec, stopRecording: stopRec } = useRecording();
-
-const {
-    projects,
-    selectedProjectId,
-    getProjects,
-    createProject,
-    updateProject,
-    deleteProject,
-    addSessionToProject,
-    getProjectSessions
+  projects,
+  selectedProjectId,
+  getProjects,
+  createProject,
+  updateProject,
+  deleteProject: deleteProjectById,
+  addSessionToProject,
+  getProjectSessions,
 } = useProjects();
 
 const {
-    messages,
-    isStreaming,
-    isConvRunning,
-    enableStreaming,
-    transportMode,
-    currentSessionProject,
-    getSessionMessages: getSessionMsg,
-    sendMessage: sendMsg,
-    stopMessage: stopMsg,
-    toggleStreaming,
-    setTransportMode,
-    cleanupTransport
-} = useMessages(currSessionId, getMediaFile, updateSessionTitle, getSessions);
+  stagedFiles,
+  stagedImagesUrl,
+  stagedAudioUrl,
+  stagedNonImageFiles,
+  processAndUploadImage,
+  processAndUploadFile,
+  handlePaste,
+  removeImage,
+  removeAudio,
+  removeFile,
+  clearStaged,
+  cleanupMediaCache,
+} = useMediaHandling();
 
-// 组件引用
-const messageList = ref<InstanceType<typeof MessageList> | null>(null);
-const chatInputRef = ref<InstanceType<typeof ChatInput> | null>(null);
-
-// 输入状态
-const prompt = ref('');
-
-// 项目状态
-const projectDialog = ref(false);
+const sidebarCollapsed = ref(false);
+const providerDialog = ref(false);
+const projectDialogOpen = ref(false);
 const editingProject = ref<Project | null>(null);
-const projectSessions = ref<any[]>([]);
-const currentProject = computed(() =>
-    projects.value.find(p => p.project_id === selectedProjectId.value)
-);
-
-// 引用消息状态
-interface ReplyInfo {
-    messageId: number;  // PlatformSessionHistoryMessage 的 id
-    selectedText?: string;  // 选中的文本内容（可选）
-}
-const replyTo = ref<ReplyInfo | null>(null);
-
-const isDark = computed(() => useCustomizerStore().uiTheme === 'PurpleThemeDark');
-const sendShortcut = ref<SendShortcut>('shift_enter');
-
-function setSendShortcut(mode: SendShortcut) {
-    sendShortcut.value = mode;
-    localStorage.setItem(SEND_SHORTCUT_STORAGE_KEY, mode);
-}
-
-function focusChatInput() {
-    nextTick(() => {
-        chatInputRef.value?.focusInput?.();
-    });
-}
-
-// 检测是否为手机端
-function checkMobile() {
-    isMobile.value = window.innerWidth <= 768;
-    if (!isMobile.value) {
-        mobileMenuOpen.value = false;
-        customizer.SET_CHAT_SIDEBAR(false);
-    }
-}
-
-function toggleMobileSidebar() {
-    mobileMenuOpen.value = !mobileMenuOpen.value;
-    customizer.SET_CHAT_SIDEBAR(mobileMenuOpen.value);
-}
-
-function closeMobileSidebar() {
-    mobileMenuOpen.value = false;
-    customizer.SET_CHAT_SIDEBAR(false);
-}
-
-// 同步 nav header 中的 sidebar toggle
-watch(() => customizer.chatSidebarOpen, (val) => {
-    if (isMobile.value) {
-        mobileMenuOpen.value = val;
-    }
-});
-
-function toggleTheme() {
-    const newTheme = customizer.uiTheme === 'PurpleTheme' ? 'PurpleThemeDark' : 'PurpleTheme';
-    customizer.SET_UI_THEME(newTheme);
-    theme.global.name.value = newTheme;
-}
-
-function toggleFullscreen() {
-    if (props.chatboxMode) {
-        router.push(currSessionId.value ? `/chat/${currSessionId.value}` : '/chat');
-    } else {
-        router.push(currSessionId.value ? `/chatbox/${currSessionId.value}` : '/chatbox');
-    }
-}
-
-function openImagePreview(imageUrl: string) {
-    previewImageUrl.value = imageUrl;
-    imagePreviewDialog.value = true;
-}
-
-async function handleSaveTitle() {
-    await saveTitle();
-
-    // 如果在项目视图中，刷新项目会话列表
-    if (selectedProjectId.value) {
-        const sessions = await getProjectSessions(selectedProjectId.value);
-        projectSessions.value = sessions;
-    }
-}
-
-function handleReplyMessage(msg: any, index: number) {
-    // 从消息中获取 id (PlatformSessionHistoryMessage 的 id)
-    const messageId = msg.id;
-    if (!messageId) {
-        console.warn('Message does not have an id');
-        return;
-    }
-
-    // 获取消息内容用于显示
-    let messageContent = '';
-    if (typeof msg.content.message === 'string') {
-        messageContent = msg.content.message;
-    } else if (Array.isArray(msg.content.message)) {
-        // 从消息段数组中提取纯文本
-        const textParts = msg.content.message
-            .filter((part: any) => part.type === 'plain' && part.text)
-            .map((part: any) => part.text);
-        messageContent = textParts.join('');
-    }
-
-    // 截断过长的内容
-    if (messageContent.length > 100) {
-        messageContent = messageContent.substring(0, 100) + '...';
-    }
-
-    replyTo.value = {
-        messageId,
-        selectedText: messageContent || '[媒体内容]'
-    };
-}
-
-function clearReply() {
-    replyTo.value = null;
-}
-
-function handleReplyWithText(replyData: any) {
-    // 处理选中文本的引用
-    const { messageId, selectedText, messageIndex } = replyData;
-
-    if (!messageId) {
-        console.warn('Message does not have an id');
-        return;
-    }
-
-    replyTo.value = {
-        messageId,
-        selectedText: selectedText  // 保存原始的选中文本
-    };
-}
-
-// Refs Sidebar 状态
+const sessionTitleDialogOpen = ref(false);
+const sessionTitleDraft = ref("");
+const editingSessionTitleId = ref("");
+const refreshProjectSessionsAfterTitleSave = ref(false);
+const savingSessionTitle = ref(false);
+const projectSessions = ref<Session[]>([]);
+const loadingSessions = ref(false);
+const draft = ref("");
+const downloadingFiles = ref(new Set<string>());
+const messagesContainer = ref<HTMLElement | null>(null);
+const inputRef = ref<InstanceType<typeof ChatInput> | null>(null);
+const shouldStickToBottom = ref(true);
+const replyTarget = ref<ChatRecord | null>(null);
+const imagePreview = reactive({ visible: false, url: "" });
 const refsSidebarOpen = ref(false);
-const refsSidebarRefs = ref<any>(null);
-
-function handleOpenRefs(refs: any) {
-    // 如果sidebar已打开且点击的是同一个refs，则关闭
-    if (refsSidebarOpen.value && refsSidebarRefs.value === refs) {
-        refsSidebarOpen.value = false;
-    } else {
-        // 否则打开sidebar并更新refs
-        refsSidebarRefs.value = refs;
-        refsSidebarOpen.value = true;
+const selectedRefs = ref<Record<string, unknown> | null>(null);
+const enableStreaming = ref(true);
+const isRecording = ref(false);
+const sendShortcut = ref<"enter" | "shift_enter">("enter");
+const chatSidebarDrawer = computed({
+  get: () => lgAndUp.value || customizer.chatSidebarOpen,
+  set: (value: boolean) => {
+    if (!lgAndUp.value) {
+      customizer.SET_CHAT_SIDEBAR(value);
     }
-}
-
-async function handleSelectConversation(sessionIds: string[]) {
-    if (!sessionIds[0]) return;
-
-    // 退出项目视图
-    selectedProjectId.value = null;
-    projectSessions.value = [];
-
-    // 立即更新选中状态，避免需要点击两次
-    currSessionId.value = sessionIds[0];
-    selectedSessions.value = [sessionIds[0]];
-
-    // 更新 URL
-    const basePath = props.chatboxMode ? '/chatbox' : '/chat';
-    if (route.path !== `${basePath}/${sessionIds[0]}`) {
-        router.push(`${basePath}/${sessionIds[0]}`);
-    }
-
-    // 手机端关闭侧边栏
-    if (isMobile.value) {
-        closeMobileSidebar();
-    }
-
-    // 清除引用状态
-    clearReply();
-
-    // 开始加载消息
-    isLoadingMessages.value = true;
-
-    try {
-        await getSessionMsg(sessionIds[0]);
-    } finally {
-        isLoadingMessages.value = false;
-    }
-
-    nextTick(() => {
-        messageList.value?.scrollToBottom();
-    });
-    focusChatInput();
-}
-
-function handleNewChat() {
-    newChat(closeMobileSidebar);
-    messages.value = [];
-    clearReply();
-    // 退出项目视图
-    selectedProjectId.value = null;
-    projectSessions.value = [];
-    focusChatInput();
-}
-
-async function handleDeleteConversation(sessionId: string) {
-    await deleteSessionFn(sessionId);
-    messages.value = [];
-
-    // 如果在项目视图中，刷新项目会话列表
-    if (selectedProjectId.value) {
-        const sessions = await getProjectSessions(selectedProjectId.value);
-        projectSessions.value = sessions;
-    }
-}
-
-async function handleBatchDeleteConversations(sessionIds: string[]) {
-    try {
-        const result = await batchDeleteSessions(sessionIds);
-
-        // 仅在当前会话成功删除时清除信息
-        if (result.currentSessionDeleted) {
-            messages.value = [];
-        }
-
-        // 失败处理
-        if (result.failed_count > 0) {
-            toastWarning(
-                tm('batch.partialFailure', { failed: result.failed_count, total: sessionIds.length })
-            );
-        }
-
-        // 如果在项目视图中，刷新项目会话列表
-        if (selectedProjectId.value) {
-            const sessions = await getProjectSessions(selectedProjectId.value);
-            projectSessions.value = sessions;
-        }
-    } catch (err) {
-        console.error('Batch delete sessions failed:', err);
-        toastWarning(tm('batch.requestFailed'));
-    }
-}
-
-async function handleSelectProject(projectId: string) {
-    selectedProjectId.value = projectId;
-    const sessions = await getProjectSessions(projectId);
-    projectSessions.value = sessions;
-    messages.value = [];
-
-    // 清空当前会话ID，准备在项目中创建新对话
-    currSessionId.value = '';
-    selectedSessions.value = [];
-
-    // 手机端关闭侧边栏
-    if (isMobile.value) {
-        closeMobileSidebar();
-    }
-}
-
-function showCreateProjectDialog() {
-    editingProject.value = null;
-    projectDialog.value = true;
-}
-
-function showEditProjectDialog(project: Project) {
-    editingProject.value = project;
-    projectDialog.value = true;
-}
-
-async function handleSaveProject(formData: ProjectFormData, projectId?: string) {
-    if (projectId) {
-        await updateProject(
-            projectId,
-            formData.title,
-            formData.emoji,
-            formData.description
-        );
-    } else {
-        await createProject(
-            formData.title,
-            formData.emoji,
-            formData.description
-        );
-    }
-}
-
-async function handleDeleteProject(projectId: string) {
-    await deleteProject(projectId);
-}
-
-async function handleStartRecording() {
-    await startRec();
-}
-
-async function handleStopRecording() {
-    const audioFilename = await stopRec();
-    stagedAudioUrl.value = audioFilename;
-}
-
-async function handleFileSelect(files: FileList) {
-    const imageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
-    // 将 FileList 转换为数组，避免异步处理时 FileList 被清空
-    const fileArray = Array.from(files);
-    for (let i = 0; i < fileArray.length; i++) {
-        const file = fileArray[i];
-        if (imageTypes.includes(file.type)) {
-            await processAndUploadImage(file);
-        } else {
-            await processAndUploadFile(file);
-        }
-    }
-}
-
-function openLiveMode() {
-    liveModeOpen.value = true;
-}
-
-function closeLiveMode() {
-    liveModeOpen.value = false;
-}
-
-async function handleSendMessage() {
-    // 只有引用不能发送，必须有输入内容
-    if (!prompt.value.trim() && stagedFiles.value.length === 0 && !stagedAudioUrl.value) {
-        return;
-    }
-
-    const isCreatingNewSession = !currSessionId.value;
-    const currentProjectId = selectedProjectId.value; // 保存当前项目ID
-
-    if (isCreatingNewSession) {
-        await newSession();
-
-        // 如果在项目视图中创建新会话，立即退出项目视图
-        if (currentProjectId) {
-            selectedProjectId.value = null;
-            projectSessions.value = [];
-        }
-    }
-
-    const promptToSend = prompt.value.trim();
-    const audioNameToSend = stagedAudioUrl.value;
-    const filesToSend = stagedFiles.value.map(f => ({
-        attachment_id: f.attachment_id,
-        url: f.url,
-        original_name: f.original_name,
-        type: f.type
-    }));
-    const replyToSend = replyTo.value ? { ...replyTo.value } : null;
-
-    // 清空输入和附件和引用
-    prompt.value = '';
-    clearStaged();
-    clearReply();
-
-    // 获取选择的提供商和模型
-    const selection = chatInputRef.value?.getCurrentSelection();
-    const selectedProviderId = selection?.providerId || '';
-    const selectedModelName = selection?.modelName || '';
-
-    // 点击发送后立即将消息区滚到底部，确保用户看到最新消息
-    nextTick(() => {
-        messageList.value?.scrollToBottom();
-    });
-
-    await sendMsg(
-        promptToSend,
-        filesToSend,
-        audioNameToSend,
-        selectedProviderId,
-        selectedModelName,
-        replyToSend
-    );
-
-    // 发送流程结束后再兜底一次，处理异步渲染场景
-    nextTick(() => {
-        messageList.value?.scrollToBottom();
-    });
-
-    // 如果在项目中创建了新会话，将其添加到项目
-    if (isCreatingNewSession && currentProjectId && currSessionId.value) {
-        await addSessionToProject(currSessionId.value, currentProjectId);
-        // 刷新会话列表，移除已添加到项目的会话
-        await getSessions();
-        // 重新获取会话消息以更新项目信息（用于面包屑显示）
-        await getSessionMsg(currSessionId.value);
-    }
-}
-
-async function handleStopMessage() {
-    await stopMsg();
-}
-
-// 路由变化监听
-watch(
-    () => route.path,
-    (to, from) => {
-        if (from &&
-            ((from.startsWith('/chat') && to.startsWith('/chatbox')) ||
-                (from.startsWith('/chatbox') && to.startsWith('/chat')))) {
-            return;
-        }
-
-        if (to.startsWith('/chat/') || to.startsWith('/chatbox/')) {
-            const pathSessionId = to.split('/')[2];
-            if (pathSessionId && pathSessionId !== currSessionId.value) {
-                if (sessions.value.length > 0) {
-                    const session = sessions.value.find(s => s.session_id === pathSessionId);
-                    if (session) {
-                        handleSelectConversation([pathSessionId]);
-                    }
-                } else {
-                    pendingSessionId.value = pathSessionId;
-                }
-            }
-        }
-    },
-    { immediate: true }
+  },
+});
+const isSidebarCollapsed = computed(() =>
+  lgAndUp.value ? sidebarCollapsed.value : !customizer.chatSidebarOpen,
 );
 
-// 会话列表加载后处理待定会话
-watch(sessions, (newSessions) => {
-    if (pendingSessionId.value && newSessions.length > 0) {
-        const session = newSessions.find(s => s.session_id === pendingSessionId.value);
-        if (session) {
-            selectedSessions.value = [pendingSessionId.value];
-            handleSelectConversation([pendingSessionId.value]);
-            pendingSessionId.value = null;
-        }
-    } else if (!currSessionId.value && newSessions.length > 0) {
-        const firstSession = newSessions[0];
-        selectedSessions.value = [firstSession.session_id];
-        handleSelectConversation([firstSession.session_id]);
+const {
+  loadingMessages,
+  sending,
+  loadedSessions,
+  sessionProjects,
+  activeMessages,
+  isSessionRunning,
+  isUserMessage,
+  isMessageStreaming,
+  messageContent,
+  messageParts,
+  loadSessionMessages,
+  createLocalExchange,
+  sendMessageStream,
+  stopSession,
+} = useMessages({
+  currentSessionId: currSessionId,
+  onSessionsChanged: getSessions,
+  onStreamUpdate: (sessionId) => {
+    if (sessionId === currSessionId.value && shouldStickToBottom.value) {
+      scrollToBottom();
     }
+  },
 });
 
-onMounted(() => {
-    const storedShortcut = localStorage.getItem(SEND_SHORTCUT_STORAGE_KEY);
-    if (storedShortcut === 'enter' || storedShortcut === 'shift_enter') {
-        sendShortcut.value = storedShortcut;
+const transportMode = ref<TransportMode>(
+  (localStorage.getItem("chat.transportMode") as TransportMode) === "websocket"
+    ? "websocket"
+    : "sse",
+);
+const transportOptions: Array<{ value: TransportMode; labelKey: string }> = [
+  { value: "sse", labelKey: "transport.sse" },
+  { value: "websocket", labelKey: "transport.websocket" },
+];
+const currentTransportLabel = computed(() =>
+  tm(
+    transportOptions.find((item) => item.value === transportMode.value)
+      ?.labelKey || "transport.sse",
+  ),
+);
+
+watch(transportMode, (mode) => {
+  localStorage.setItem("chat.transportMode", mode);
+});
+
+const isDark = computed(() => customizer.uiTheme === "PurpleThemeDark");
+const canSend = computed(
+  () =>
+    Boolean(draft.value.trim() || stagedFiles.value.length) && !sending.value,
+);
+const customMarkdownTags = ["ref"];
+const currentSession = computed(
+  () =>
+    sessions.value.find(
+      (session) => session.session_id === currSessionId.value,
+    ) ||
+    projectSessions.value.find(
+      (session) => session.session_id === currSessionId.value,
+    ) ||
+    null,
+);
+const sessionProject = computed(() =>
+  currSessionId.value ? sessionProjects[currSessionId.value] : null,
+);
+const currentSessionTitle = computed(() =>
+  currentSession.value ? sessionTitle(currentSession.value) : "",
+);
+const selectedProject = computed(
+  () =>
+    projects.value.find(
+      (project) => project.project_id === selectedProjectId.value,
+    ) || null,
+);
+const chatInputReplyTarget = computed(() =>
+  replyTarget.value?.id == null
+    ? null
+    : {
+        messageId: replyTarget.value.id,
+        selectedText: replyPreview(replyTarget.value.id, ""),
+      },
+);
+
+provide("isDark", isDark);
+
+onMounted(async () => {
+  loadingSessions.value = true;
+  try {
+    await Promise.all([getSessions(), getProjects()]);
+    const routeSessionId = getRouteSessionId();
+    if (routeSessionId) {
+      await selectSession(routeSessionId, false);
     }
-    checkMobile();
-    window.addEventListener('resize', checkMobile);
-    getSessions();
-    getProjects();
+  } finally {
+    loadingSessions.value = false;
+  }
 });
 
 onBeforeUnmount(() => {
-    window.removeEventListener('resize', checkMobile);
-    cleanupMediaCache();
-    cleanupTransport();
+  cleanupMediaCache();
 });
+
+watch(
+  () => route.params.conversationId,
+  async () => {
+    const routeSessionId = getRouteSessionId();
+    if (routeSessionId && routeSessionId !== currSessionId.value) {
+      selectedProjectId.value = null;
+      await selectSession(routeSessionId, false);
+    } else if (!routeSessionId && currSessionId.value) {
+      currSessionId.value = "";
+    }
+  },
+);
+
+watch(activeMessages, () => {
+  if (shouldStickToBottom.value) {
+    scrollToBottom();
+  }
+});
+
+function getRouteSessionId() {
+  const raw = route.params.conversationId;
+  return Array.isArray(raw) ? raw[0] : raw || "";
+}
+
+function basePath() {
+  return props.chatboxMode ? "/chatbox" : "/chat";
+}
+
+function closeMobileSidebar() {
+  if (!lgAndUp.value) {
+    customizer.SET_CHAT_SIDEBAR(false);
+  }
+}
+
+function sessionTitle(session: Session) {
+  return session.display_name?.trim() || tm("conversation.newConversation");
+}
+
+async function startNewChat() {
+  selectedProjectId.value = null;
+  replyTarget.value = null;
+  newChat();
+  closeMobileSidebar();
+}
+
+function openCreateProjectDialog() {
+  editingProject.value = null;
+  projectDialogOpen.value = true;
+}
+
+function openEditProjectDialog(project: Project) {
+  editingProject.value = project;
+  projectDialogOpen.value = true;
+}
+
+async function selectProject(projectId: string) {
+  selectedProjectId.value = projectId;
+  currSessionId.value = "";
+  replyTarget.value = null;
+  await router.push(basePath());
+  await loadProjectSessions(projectId);
+  closeMobileSidebar();
+}
+
+async function loadProjectSessions(projectId = selectedProjectId.value) {
+  if (!projectId) {
+    projectSessions.value = [];
+    return;
+  }
+  projectSessions.value = await getProjectSessions(projectId);
+}
+
+async function handleDeleteProject(projectId: string) {
+  await deleteProjectById(projectId);
+  if (selectedProjectId.value === projectId) {
+    selectedProjectId.value = null;
+    projectSessions.value = [];
+  }
+}
+
+function openSessionTitleDialog(
+  sessionId: string,
+  title: string,
+  refreshProjectSessions = false,
+) {
+  editingSessionTitleId.value = sessionId;
+  sessionTitleDraft.value = title;
+  refreshProjectSessionsAfterTitleSave.value = refreshProjectSessions;
+  sessionTitleDialogOpen.value = true;
+}
+
+async function saveSessionTitleDialog() {
+  if (!editingSessionTitleId.value) return;
+
+  savingSessionTitle.value = true;
+  try {
+    const sessionId = editingSessionTitleId.value;
+    const displayName = sessionTitleDraft.value.trim();
+    await axios.post("/api/chat/update_session_display_name", {
+      session_id: sessionId,
+      display_name: displayName,
+    });
+    updateSessionTitle(sessionId, displayName);
+    const projectSession = projectSessions.value.find(
+      (session) => session.session_id === sessionId,
+    );
+    if (projectSession) {
+      projectSession.display_name = displayName;
+    }
+    if (refreshProjectSessionsAfterTitleSave.value) {
+      await loadProjectSessions();
+    }
+    sessionTitleDialogOpen.value = false;
+  } finally {
+    savingSessionTitle.value = false;
+  }
+}
+
+function editSidebarSessionTitle(session: Session) {
+  openSessionTitleDialog(session.session_id, session.display_name || "");
+}
+
+async function deleteSidebarSession(session: Session) {
+  const title = sessionTitle(session);
+  const message = tm("conversation.confirmDelete", { name: title });
+  if (!(await askForConfirmation(message, confirmDialog))) return;
+
+  const wasCurrent = currSessionId.value === session.session_id;
+  await deleteSession(session.session_id);
+  if (wasCurrent) {
+    selectedProjectId.value = null;
+    await router.push(basePath());
+  }
+}
+
+async function selectProjectSession(sessionId: string) {
+  selectedProjectId.value = null;
+  await selectSession(sessionId);
+}
+
+async function editProjectSessionTitle(sessionId: string, title: string) {
+  openSessionTitleDialog(sessionId, title, true);
+}
+
+async function deleteProjectSession(sessionId: string) {
+  await deleteSession(sessionId);
+  await loadProjectSessions();
+}
+
+async function saveProject(formData: ProjectFormData, projectId?: string) {
+  if (projectId) {
+    await updateProject(
+      projectId,
+      formData.title,
+      formData.emoji,
+      formData.description,
+    );
+    return;
+  }
+
+  await createProject(formData.title, formData.emoji, formData.description);
+}
+
+async function selectSession(sessionId: string, pushRoute = true) {
+  selectedProjectId.value = null;
+  currSessionId.value = sessionId;
+  replyTarget.value = null;
+  if (pushRoute && route.path !== `${basePath()}/${sessionId}`) {
+    await router.push(`${basePath()}/${sessionId}`);
+  }
+  if (!loadedSessions[sessionId]) {
+    await loadSessionMessages(sessionId);
+  }
+  scrollToBottom();
+  closeMobileSidebar();
+}
+
+async function sendCurrentMessage() {
+  if (!canSend.value) return;
+
+  sending.value = true;
+  try {
+    let sessionId = currSessionId.value;
+    const targetProjectId = selectedProjectId.value;
+    const targetProject = selectedProject.value;
+    if (!sessionId) {
+      sessionId = await newSession();
+      if (targetProjectId) {
+        await addSessionToProject(sessionId, targetProjectId);
+        sessionProjects[sessionId] = targetProject
+          ? {
+              project_id: targetProject.project_id,
+              title: targetProject.title,
+              emoji: targetProject.emoji,
+            }
+          : null;
+        await loadProjectSessions(targetProjectId);
+        selectedProjectId.value = null;
+      }
+    }
+
+    const text = draft.value.trim();
+    const messageId = crypto.randomUUID?.() || `${Date.now()}-${Math.random()}`;
+    const outgoingParts = buildOutgoingParts(text);
+    const selection = inputRef.value?.getCurrentSelection();
+    const { botRecord } = createLocalExchange({
+      sessionId,
+      messageId,
+      parts: outgoingParts,
+    });
+    updateTitleFromText(sessionId, text);
+
+    draft.value = "";
+    replyTarget.value = null;
+    clearStaged();
+    scrollToBottom();
+
+    sendMessageStream({
+      sessionId,
+      messageId,
+      parts: outgoingParts,
+      transport: transportMode.value,
+      enableStreaming: enableStreaming.value,
+      selectedProvider: selection?.providerId || "",
+      selectedModel: selection?.modelName || "",
+      botRecord,
+    });
+  } catch (error) {
+    console.error("Failed to send message:", error);
+  } finally {
+    sending.value = false;
+  }
+}
+
+function buildOutgoingParts(text: string): MessagePart[] {
+  const parts: MessagePart[] = [];
+  if (replyTarget.value?.id != null) {
+    parts.push({
+      type: "reply",
+      message_id: replyTarget.value.id,
+      selected_text: "",
+    });
+  }
+  if (text) {
+    parts.push({ type: "plain", text });
+  }
+  stagedFiles.value.forEach((file) => {
+    parts.push({
+      type: file.type,
+      attachment_id: file.attachment_id,
+      filename: file.filename,
+      embedded_url: file.url,
+    });
+  });
+  return parts;
+}
+
+function hasNonReasoningContent(message: ChatRecord) {
+  return messageParts(message).some((part) => {
+    if (part.type === "reply") return false;
+    if (part.type === "plain") return Boolean(String(part.text || "").trim());
+    return true;
+  });
+}
+
+function updateTitleFromText(sessionId: string, text: string) {
+  const session = sessions.value.find((item) => item.session_id === sessionId);
+  if (!session || session.display_name || !text) return;
+  updateSessionTitle(sessionId, text.slice(0, 40));
+}
+
+function partUrl(part: MessagePart) {
+  if (part.embedded_url) return part.embedded_url;
+  if (part.embedded_file?.url) return part.embedded_file.url;
+  if (part.attachment_id)
+    return `/api/chat/get_attachment?attachment_id=${encodeURIComponent(
+      part.attachment_id,
+    )}`;
+  if (part.filename)
+    return `/api/chat/get_file?filename=${encodeURIComponent(part.filename)}`;
+  return "";
+}
+
+function formatJson(value: unknown) {
+  if (typeof value === "string") {
+    const parsed = parseJsonSafe(value);
+    if (parsed !== value) return JSON.stringify(parsed, null, 2);
+    return value;
+  }
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value ?? "");
+  }
+}
+
+function replyPreview(messageId?: string | number, fallback?: string) {
+  if (fallback) return truncate(fallback, 80);
+  const found = activeMessages.value.find(
+    (message) => String(message.id) === String(messageId),
+  );
+  const text = found ? plainTextFromMessage(found) : "";
+  return text ? truncate(text, 80) : tm("reply.replyTo");
+}
+
+function plainTextFromMessage(message: ChatRecord) {
+  return messageParts(message)
+    .filter((part) => part.type === "plain" && part.text)
+    .map((part) => part.text)
+    .join("\n");
+}
+
+function truncate(value: string, max: number) {
+  return value.length > max ? `${value.slice(0, max)}...` : value;
+}
+
+function scrollToMessage(messageId?: string | number) {
+  if (!messageId) return;
+  const index = activeMessages.value.findIndex(
+    (message) => String(message.id) === String(messageId),
+  );
+  if (index < 0) return;
+  const rows = messagesContainer.value?.querySelectorAll(".message-row");
+  rows?.[index]?.scrollIntoView({ behavior: "smooth", block: "center" });
+}
+
+function setReplyTarget(message: ChatRecord) {
+  replyTarget.value = message;
+  nextTick(() => inputRef.value?.focusInput?.());
+}
+
+function showMessageMeta(message: ChatRecord, msgIndex: number) {
+  return (
+    !messageContent(message).isLoading && !isMessageStreaming(message, msgIndex)
+  );
+}
+
+function messageRefs(message: ChatRecord) {
+  return resolvedMessageRefs(message).used;
+}
+
+function resolvedMessageRefs(message: ChatRecord) {
+  return normalizeRefs(messageContent(message).refs);
+}
+
+function normalizeRefs(refs: unknown) {
+  if (!refs) return { used: [] as Array<Record<string, unknown>> };
+  const used = Array.isArray((refs as any)?.used)
+    ? (refs as any).used
+    : Array.isArray(refs)
+    ? refs
+    : [];
+
+  return {
+    used: normalizeRefItems(used),
+  };
+}
+
+function normalizeRefItems(items: unknown[]) {
+  return items
+    .map((item: any) => ({
+      index: item?.index,
+      title: item?.title || item?.url || tm("refs.title"),
+      url: item?.url,
+      snippet: item?.snippet,
+      favicon: item?.favicon,
+    }))
+    .filter((item) => item.url);
+}
+
+function openRefsSidebar(refs: unknown) {
+  selectedRefs.value =
+    refs && typeof refs === "object" ? (refs as Record<string, unknown>) : null;
+  refsSidebarOpen.value = true;
+}
+
+function normalizeToolCall(tool: Record<string, unknown>) {
+  const normalized = { ...tool };
+  normalized.args = normalized.args ?? normalized.arguments ?? {};
+  normalized.ts = normalized.ts ?? Date.now() / 1000;
+  if (normalized.result && typeof normalized.result === "object") {
+    normalized.result = JSON.stringify(normalized.result, null, 2);
+  }
+  return normalized;
+}
+
+function isIPythonToolCall(tool: Record<string, unknown>) {
+  const name = String(tool.name || "").toLowerCase();
+  return name.includes("python") || name.includes("ipython");
+}
+
+function toolCallStatusText(tool: Record<string, unknown>) {
+  if (tool.finished_ts) return tm("toolStatus.done");
+  return tm("toolStatus.running");
+}
+
+function parseJsonSafe(value: unknown) {
+  if (typeof value !== "string") return value;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+
+async function copyMessage(message: ChatRecord) {
+  const text = plainTextFromMessage(message);
+  if (!text) return;
+  await navigator.clipboard?.writeText(text);
+}
+
+async function downloadPart(part: MessagePart) {
+  const key = part.attachment_id || part.filename || "";
+  if (!key) return;
+  downloadingFiles.value = new Set(downloadingFiles.value).add(key);
+  try {
+    const response = await axios.get(partUrl(part), { responseType: "blob" });
+    const url = URL.createObjectURL(response.data);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = part.filename || "file";
+    anchor.click();
+    URL.revokeObjectURL(url);
+  } finally {
+    const next = new Set(downloadingFiles.value);
+    next.delete(key);
+    downloadingFiles.value = next;
+  }
+}
+
+function openImage(url: string) {
+  imagePreview.url = url;
+  imagePreview.visible = true;
+}
+
+function closeImage() {
+  imagePreview.visible = false;
+  imagePreview.url = "";
+}
+
+async function handleFilesSelected(files: FileList) {
+  const selectedFiles = Array.from(files || []);
+  for (const file of selectedFiles) {
+    if (file.type.startsWith("image/")) {
+      await processAndUploadImage(file);
+    } else {
+      await processAndUploadFile(file);
+    }
+  }
+}
+
+function toggleStreaming() {
+  enableStreaming.value = !enableStreaming.value;
+}
+
+function startRecording() {
+  isRecording.value = true;
+}
+
+function stopRecording() {
+  isRecording.value = false;
+}
+
+function handleMessagesScroll() {
+  const container = messagesContainer.value;
+  if (!container) return;
+  const distance =
+    container.scrollHeight - container.scrollTop - container.clientHeight;
+  shouldStickToBottom.value = distance < 80;
+}
+
+function scrollToBottom() {
+  nextTick(() => {
+    const container = messagesContainer.value;
+    if (!container) return;
+    container.scrollTop = container.scrollHeight;
+    shouldStickToBottom.value = true;
+  });
+}
+
+async function stopCurrentSession() {
+  if (!currSessionId.value) return;
+  try {
+    await stopSession(currSessionId.value);
+  } catch (error) {
+    console.error("Failed to stop session:", error);
+  }
+}
+
+function toggleTheme() {
+  customizer.SET_UI_THEME(isDark.value ? "PurpleTheme" : "PurpleThemeDark");
+}
+
+function formatTime(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+
+function inputTokens(stats: any) {
+  const usage = stats?.token_usage || {};
+  return (usage.input_other || 0) + (usage.input_cached || 0);
+}
+
+function outputTokens(stats: any) {
+  return stats?.token_usage?.output || 0;
+}
+
+function agentDuration(stats: any) {
+  const directDuration = readPositiveNumber(stats, [
+    "duration",
+    "total_duration",
+  ]);
+  if (directDuration !== null) return formatDuration(directDuration);
+
+  const startTime = readPositiveNumber(stats, ["start_time"]);
+  const endTime = readPositiveNumber(stats, ["end_time"]);
+  if (startTime === null || endTime === null || endTime < startTime) return "-";
+  return formatDuration(endTime - startTime);
+}
+
+function agentTtft(stats: any) {
+  const ttft = readPositiveNumber(stats, [
+    "time_to_first_token",
+    "ttft",
+    "first_token_latency",
+  ]);
+  if (ttft === null) return "";
+  return formatDuration(ttft);
+}
+
+function readPositiveNumber(source: any, keys: string[]) {
+  for (const key of keys) {
+    const value = Number(source?.[key]);
+    if (Number.isFinite(value) && value > 0) return value;
+  }
+  return null;
+}
+
+function formatDuration(seconds: number) {
+  if (seconds < 1) return `${Math.round(seconds * 1000)}ms`;
+  if (seconds < 60) return `${seconds.toFixed(1)}s`;
+  const minutes = Math.floor(seconds / 60);
+  const restSeconds = Math.round(seconds % 60);
+  return `${minutes}m ${restSeconds}s`;
+}
 </script>
 
 <style scoped>
-/* 基础动画 */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+.chat-ui {
+  --chat-sidebar-bg: #fbfbfb;
+  --chat-session-active-bg: #efefef;
+  --chat-page-bg: rgb(var(--v-theme-background));
+  --chat-border: rgba(var(--v-border-color), 0.16);
+  --chat-muted: rgba(var(--v-theme-on-surface), 0.62);
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--chat-page-bg);
+  color: rgb(var(--v-theme-on-surface));
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Open Sans",
+    "Helvetica Neue",
+    sans-serif;
 }
 
-.chat-page-card {
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    overflow: hidden;
-    overscroll-behavior: none;
+.chat-ui.is-dark {
+  --chat-sidebar-bg: #2d2d2d;
+  --chat-session-active-bg: rgba(255, 255, 255, 0.08);
+  --chat-border: rgba(255, 255, 255, 0.1);
 }
 
-.chat-page-container {
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    padding: 0;
-    overflow: hidden;
+.chat-sidebar {
+  height: 100%;
+  background: var(--chat-sidebar-bg);
 }
 
-.chat-layout {
-    height: 100%;
-    max-height: 100%;
-    display: flex;
-    overflow: hidden;
+.chat-sidebar.collapsed {
+  background: transparent;
 }
 
-/* 手机端遮罩层 */
-.mobile-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 999;
-    animation: fadeIn 0.3s ease;
+.chat-sidebar :deep(.v-navigation-drawer__content) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
-.chat-content-panel {
-    height: 100%;
-    max-height: 100%;
-    width: 100%;
-    display: flex;
+.sidebar-top {
+  padding: 12px;
+}
+
+.brand-row,
+.composer-actions,
+.message-meta,
+.reply-target,
+.staged-files {
+  display: flex;
+  align-items: center;
+}
+
+.brand-row {
+  justify-content: flex-start;
+  min-height: 36px;
+  margin-bottom: 8px;
+}
+
+.sidebar-toggle,
+.new-chat-btn,
+.settings-btn {
+  color: var(--chat-muted);
+  border-radius: 8px;
+}
+
+.sidebar-action-icon {
+  color: currentcolor;
+}
+
+.sidebar-toggle {
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+}
+
+.new-chat-btn,
+.settings-btn {
+  width: 100%;
+  justify-content: flex-start;
+  border-radius: 8px;
+  text-transform: none;
+  font-weight: 500;
+}
+
+.new-chat-btn:not(.icon-only),
+.settings-btn:not(.icon-only) {
+  padding-inline: 12px;
+}
+
+.new-chat-btn.icon-only,
+.settings-btn.icon-only {
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  justify-content: center;
+}
+
+.chat-sidebar.collapsed .brand-row,
+.chat-sidebar.collapsed .sidebar-footer {
+  display: flex;
+  justify-content: center;
+}
+
+.sidebar-toggle:hover,
+.new-chat-btn:hover,
+.settings-btn:hover {
+  background: var(--chat-session-active-bg);
+}
+
+.chevron-collapsed {
+  transform: rotate(180deg);
+}
+
+.session-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 12px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.session-item {
+  width: 100%;
+  min-height: 38px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.session-item:hover,
+.session-item.active {
+  background: var(--chat-session-active-bg);
+}
+
+.session-title {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.session-progress {
+  flex-shrink: 0;
+}
+
+.session-actions {
+  display: none;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.session-item:hover .session-actions,
+.session-item:focus-within .session-actions {
+  display: flex;
+}
+
+.session-action-btn {
+  color: var(--chat-muted);
+}
+
+.session-action-btn:hover {
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.empty-sessions {
+  padding: 12px;
+  color: var(--chat-muted);
+  font-size: 13px;
+}
+
+.sidebar-footer {
+  margin-top: auto;
+  padding: 10px 12px 14px;
+}
+
+.settings-menu-content {
+  min-width: 230px;
+  padding: 6px;
+}
+
+.settings-menu-value {
+  color: var(--chat-muted);
+  font-size: 12px;
+  margin-right: 4px;
+  max-width: 92px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.language-flag {
+  display: inline-block;
+  width: 20px;
+  margin-right: 8px;
+}
+
+.chat-main {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.chat-main.empty-chat {
+  justify-content: center;
+}
+
+.messages-panel {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 24px max(24px, calc((100% - 980px) / 2)) 18px;
+}
+
+.empty-chat .messages-panel {
+  flex: 0 0 auto;
+  min-height: auto;
+  overflow: visible;
+  padding: 0 max(24px, calc((100% - 980px) / 2)) 20px;
+}
+
+.center-state,
+.welcome-state {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.empty-chat .welcome-state {
+  height: auto;
+}
+
+.welcome-title {
+  font-size: 28px;
+  font-weight: 800;
+}
+
+.welcome-subtitle {
+  margin-top: 8px;
+  color: var(--chat-muted);
+  font-size: 16px;
+}
+
+.session-project-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  max-width: min(760px, 82%);
+  margin-bottom: 18px;
+  color: var(--chat-muted);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.session-project-breadcrumb span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.messages-list {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+
+.message-row {
+  display: flex;
+  gap: 10px;
+  max-width: 100%;
+}
+
+.message-row.from-user {
+  justify-content: flex-end;
+}
+
+.message-stack {
+  max-width: min(760px, 82%);
+}
+
+.from-user .message-stack {
+  align-items: flex-end;
+  max-width: 60%;
+}
+
+.bot-avatar {
+  margin-top: 2px;
+  color: rgb(var(--v-theme-primary));
+  user-select: none;
+}
+
+.bot-avatar-symbol {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30px;
+  margin-top: -2px;
+  line-height: 0;
+  pointer-events: none;
+  user-select: none;
+}
+
+.message-bubble {
+  border-radius: 8px;
+  padding: 10px 14px;
+  line-height: 1.65;
+  overflow-wrap: anywhere;
+}
+
+.message-bubble.user {
+  color: var(--v-theme-primaryText);
+  padding: 12px 18px;
+  font-size: 15px;
+  max-width: 100%;
+  border-radius: 1.5rem;
+  background: rgba(var(--v-theme-primary), 0.12);
+}
+
+.message-bubble.bot {
+  background: transparent;
+  padding-left: 0;
+}
+
+.plain-content {
+  white-space: pre-wrap;
+}
+
+.loading-message {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+  color: var(--chat-muted);
+}
+
+.markdown-content :deep(p) {
+  margin: 0.25rem 0;
+}
+
+.markdown-content :deep(pre),
+.unknown-part {
+  max-width: 100%;
+  overflow-x: auto;
+  border-radius: 8px;
+  padding: 10px;
+  background: rgba(var(--v-theme-on-surface), 0.06);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.reply-quote {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border: 0;
+  border-left: 3px solid rgb(var(--v-theme-primary));
+  border-radius: 6px;
+  padding: 7px 9px;
+  margin-bottom: 8px;
+  background: rgba(var(--v-theme-primary), 0.08);
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.image-part {
+  display: block;
+  border: 0;
+  padding: 0;
+  margin-top: 8px;
+  background: transparent;
+  cursor: zoom-in;
+}
+
+.image-part img {
+  max-width: min(420px, 100%);
+  max-height: 360px;
+  border-radius: 8px;
+  object-fit: contain;
+}
+
+.audio-part,
+.video-part {
+  display: block;
+  max-width: 100%;
+  margin-top: 8px;
+}
+
+.video-part {
+  max-height: 360px;
+  border-radius: 8px;
+}
+
+.file-part {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--chat-border);
+  border-radius: 8px;
+}
+
+.file-part span {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tool-call-block {
+  margin: 8px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.message-bubble.bot
+  > .tool-call-block:first-child
+  :deep(.tool-call-card:first-child) {
+  margin-top: 0;
+}
+
+.tool-call-inline-status {
+  color: var(--chat-muted);
+  font-size: 12px;
+}
+
+.message-meta {
+  gap: 2px;
+  min-height: 24px;
+  color: var(--chat-muted);
+  font-size: 12px;
+}
+
+.message-meta-refs {
+  display: flex;
+  align-items: center;
+}
+
+.from-user .message-meta {
+  justify-content: flex-end;
+}
+
+.stats-card {
+  min-width: 150px;
+  padding: 8px 10px;
+}
+
+.stats-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 2px 0;
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.stats-row span {
+  color: var(--chat-muted);
+}
+
+.stats-row strong {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.composer-shell {
+  position: relative;
+  z-index: 1;
+  background: var(--chat-page-bg);
+  padding: 0 0 18px;
+}
+
+.composer-shell::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  left: 0;
+  right: 0;
+  top: -36px;
+  height: 36px;
+  pointer-events: none;
+  background: linear-gradient(
+    to bottom,
+    rgba(var(--v-theme-background), 0),
+    var(--chat-page-bg)
+  );
+}
+
+.composer-shell :deep(.input-area) {
+  border-top: 0;
+}
+
+.empty-chat .composer-shell {
+  padding-bottom: 0;
+}
+
+.empty-chat .composer-shell::before {
+  display: none;
+}
+
+.reply-target,
+.staged-files {
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.reply-target {
+  max-width: 100%;
+  border-left: 3px solid rgb(var(--v-theme-primary));
+  border-radius: 6px;
+  padding: 6px 8px;
+  background: rgba(var(--v-theme-primary), 0.08);
+}
+
+.reply-target span {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.staged-files {
+  flex-wrap: wrap;
+}
+
+.composer {
+  min-height: 96px;
+  border: 1px solid var(--chat-border);
+  border-radius: 8px;
+  background: rgb(var(--v-theme-surface));
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+}
+
+.message-input {
+  flex: 1;
+}
+
+.composer-actions {
+  justify-content: space-between;
+}
+
+.file-input {
+  display: none;
+}
+
+.composer-hint {
+  margin-top: 8px;
+  text-align: center;
+  color: var(--chat-muted);
+  font-size: 12px;
+}
+
+kbd {
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: rgba(var(--v-theme-on-surface), 0.08);
+  font: inherit;
+}
+
+.image-preview-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.preview-image {
+  max-width: min(92vw, 1200px);
+  max-height: 88vh;
+  border-radius: 8px;
+  object-fit: contain;
+}
+
+@media (max-width: 760px) {
+  .messages-panel {
+    padding: 18px 14px;
+  }
+
+  .message-stack {
+    max-width: 88%;
+  }
+
+  .message-row.from-bot {
     flex-direction: column;
-    overflow: hidden;
-}
+    gap: 2px;
+  }
 
-.message-list-wrapper {
-    flex: 1;
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-}
+  .message-row.from-bot .message-stack {
+    max-width: 100%;
+  }
 
-.message-list-fade {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 40px;
-    background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
-    pointer-events: none;
-    z-index: 1;
-}
+  .message-row.from-bot .bot-avatar {
+    display: none;
+  }
 
-.message-list-fade.fade-dark {
-    background: linear-gradient(to top, rgba(30, 30, 30, 1) 0%, rgba(30, 30, 30, 0) 100%);
-}
-
-.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;
-}
-
-.mobile-menu-btn {
-    margin-right: 8px;
-}
-
-.conversation-header-actions {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-}
-
-.fullscreen-icon {
-    cursor: pointer;
-    margin-left: 8px;
-}
-
-.breadcrumb-container {
-    padding: 8px 16px;
-    border-bottom: 1px solid var(--v-theme-border);
-    flex-shrink: 0;
-}
-
-.breadcrumb-content {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 14px;
-}
-
-.breadcrumb-emoji {
-    font-size: 16px;
-}
-
-.breadcrumb-project {
-    font-weight: 500;
-    cursor: pointer;
-    transition: opacity 0.2s;
-}
-
-.breadcrumb-project:hover {
-    opacity: 0.7;
-}
-
-.breadcrumb-separator {
-    opacity: 0.5;
-}
-
-.breadcrumb-session {
-    opacity: 0.7;
-}
-
-.fade-in {
-    animation: fadeIn 0.3s ease-in-out;
-}
-
-.dialog-title {
-    font-size: 18px;
-    font-weight: 500;
-    padding-bottom: 8px;
-}
-
-/* 手机端样式调整 */
-@media (max-width: 768px) {
-    .chat-content-panel {
-        width: 100%;
-    }
-
-    .chat-page-container {
-        padding: 0 !important;
-    }
-
-    .conversation-header {
-        padding: 2px;
-    }
+  .composer-shell {
+    padding: 0 0 12px;
+  }
 }
 </style>
diff --git a/dashboard/src/components/chat/ChatInput.vue b/dashboard/src/components/chat/ChatInput.vue
index aff404958..7f2117377 100644
--- a/dashboard/src/components/chat/ChatInput.vue
+++ b/dashboard/src/components/chat/ChatInput.vue
@@ -1,82 +1,184 @@
 <template>
-    <div class="input-area fade-in" @dragover.prevent="handleDragOver" @dragleave.prevent="handleDragLeave"
-        @drop.prevent="handleDrop">
-        <div class="input-container" :style="{
-            width: '85%',
-            maxWidth: '900px',
-            margin: '0 auto',
-            border: isDark ? 'none' : '1px solid #e0e0e0',
-            borderRadius: '24px',
-            boxShadow: isDark ? 'none' : '0px 2px 2px rgba(0, 0, 0, 0.1)',
-            backgroundColor: isDark ? '#2d2d2d' : 'transparent',
-            position: 'relative'
-        }">
-            <!-- 拖拽上传遮罩 -->
-            <transition name="fade">
-                <div v-if="isDragging" class="drop-overlay">
-                    <div class="drop-overlay-content">
-                        <v-icon size="48" color="primary">mdi-cloud-upload</v-icon>
-                        <span class="drop-text">{{ tm('input.dropToUpload') }}</span>
-                    </div>
-                </div>
-            </transition>
-            <!-- 引用预览区 -->
-            <transition name="slideReply" @after-leave="handleReplyAfterLeave">
-                <div class="reply-preview" v-if="props.replyTo && !isReplyClosing">
-                    <div class="reply-content">
-                        <v-icon size="small" class="reply-icon">mdi-reply</v-icon>
-                        "<span class="reply-text">{{ props.replyTo.selectedText }}</span>"
-                    </div>
-                    <v-btn @click="handleClearReply" class="remove-reply-btn" icon="mdi-close" size="x-small"
-                        color="grey" variant="text" />
-                </div>
-            </transition>
-            <textarea ref="inputField" v-model="localPrompt" @keydown="handleKeyDown" :disabled="disabled"
-                placeholder="Ask AstrBot..." class="chat-textarea"
-                autocomplete="off" autocorrect="off" autocapitalize="sentences" spellcheck="false"
-                style="width: 100%; resize: none; outline: none; border: 1px solid var(--v-theme-border); border-radius: 12px; padding: 16px 20px; min-height: 40px; max-height: 200px; overflow-y: auto; 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: 6px 14px;">
-                <div
-                    style="display: flex; justify-content: flex-start; margin-top: 4px; align-items: center; gap: 8px; min-width: 0; flex: 1; overflow: hidden;">
-                    <!-- Settings Menu -->
-                    <StyledMenu offset="8" location="top start" :close-on-content-click="false">
-                        <template v-slot:activator="{ props: activatorProps }">
-                            <v-btn v-bind="activatorProps" icon="mdi-plus" variant="text" color="primary" />
-                        </template>
+  <div
+    class="input-area fade-in"
+    :class="{ 'is-dark': isDark }"
+    @dragover.prevent="handleDragOver"
+    @dragleave.prevent="handleDragLeave"
+    @drop.prevent="handleDrop"
+  >
+    <div
+      class="input-container"
+      :style="{
+        width: '85%',
+        maxWidth: '900px',
+        margin: '0 auto',
+        border: isDark ? 'none' : '1px solid #e0e0e0',
+        borderRadius: '24px',
+        boxShadow: isDark ? 'none' : '0px 2px 2px rgba(0, 0, 0, 0.1)',
+        backgroundColor: isDark ? '#2d2d2d' : 'transparent',
+        position: 'relative',
+      }"
+    >
+      <!-- 拖拽上传遮罩 -->
+      <transition name="fade">
+        <div v-if="isDragging" class="drop-overlay">
+          <div class="drop-overlay-content">
+            <v-icon size="48" color="primary">mdi-cloud-upload</v-icon>
+            <span class="drop-text">{{ tm("input.dropToUpload") }}</span>
+          </div>
+        </div>
+      </transition>
+      <!-- 引用预览区 -->
+      <transition name="slideReply" @after-leave="handleReplyAfterLeave">
+        <div class="reply-preview" v-if="props.replyTo && !isReplyClosing">
+          <div class="reply-content">
+            <v-icon size="small" class="reply-icon">mdi-reply</v-icon>
+            "<span class="reply-text">{{ props.replyTo.selectedText }}</span
+            >"
+          </div>
+          <v-btn
+            @click="handleClearReply"
+            class="remove-reply-btn"
+            icon="mdi-close"
+            size="x-small"
+            color="grey"
+            variant="text"
+          />
+        </div>
+      </transition>
+      <textarea
+        ref="inputField"
+        v-model="localPrompt"
+        @keydown="handleKeyDown"
+        :disabled="disabled"
+        placeholder="Ask AstrBot..."
+        class="chat-textarea"
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="sentences"
+        spellcheck="false"
+        style="
+          width: 100%;
+          resize: none;
+          outline: none;
+          border: 1px solid var(--v-theme-border);
+          border-radius: 12px;
+          padding: 12px 18px;
+          min-height: 34px;
+          max-height: 200px;
+          overflow-y: auto;
+          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: 6px 14px;
+        "
+      >
+        <div
+          style="
+            display: flex;
+            justify-content: flex-start;
+            margin-top: 4px;
+            align-items: center;
+            gap: 8px;
+            min-width: 0;
+            flex: 1;
+            overflow: hidden;
+          "
+        >
+          <!-- Settings Menu -->
+          <StyledMenu
+            offset="8"
+            location="top start"
+            :close-on-content-click="false"
+          >
+            <template v-slot:activator="{ props: activatorProps }">
+              <v-btn
+                v-bind="activatorProps"
+                icon="mdi-plus"
+                variant="text"
+                class="input-neutral-btn"
+              />
+            </template>
 
-                        <!-- Upload Files -->
-                        <v-list-item class="styled-menu-item" rounded="md" @click="triggerImageInput">
-                            <template v-slot:prepend>
-                                <v-icon icon="mdi-file-upload-outline" size="small"></v-icon>
-                            </template>
-                            <v-list-item-title>
-                                {{ tm('input.upload') }}
-                            </v-list-item-title>
-                        </v-list-item>
+            <!-- Upload Files -->
+            <v-list-item
+              class="styled-menu-item"
+              rounded="md"
+              @click="triggerImageInput"
+            >
+              <template v-slot:prepend>
+                <v-icon icon="mdi-file-upload" size="small"></v-icon>
+              </template>
+              <v-list-item-title>
+                {{ tm("input.upload") }}
+              </v-list-item-title>
+            </v-list-item>
 
-                        <!-- Config Selector in Menu -->
-                        <ConfigSelector :session-id="sessionId || null" :platform-id="sessionPlatformId"
-                            :is-group="sessionIsGroup" :initial-config-id="props.configId"
-                            @config-changed="handleConfigChange" />
+            <!-- Config Selector in Menu -->
+            <ConfigSelector
+              :session-id="sessionId || null"
+              :platform-id="sessionPlatformId"
+              :is-group="sessionIsGroup"
+              :initial-config-id="props.configId"
+              @config-changed="handleConfigChange"
+            />
 
-                        <!-- Streaming Toggle in Menu -->
-                        <v-list-item class="styled-menu-item" rounded="md" @click="$emit('toggleStreaming')">
-                            <template v-slot:prepend>
-                                <v-icon :icon="enableStreaming ? 'mdi-flash' : 'mdi-flash-off'" size="small"></v-icon>
-                            </template>
-                            <v-list-item-title>
-                                {{ enableStreaming ? tm('streaming.enabled') : tm('streaming.disabled') }}
-                            </v-list-item-title>
-                        </v-list-item>
-                    </StyledMenu>
+            <!-- Streaming Toggle in Menu -->
+            <v-list-item
+              class="styled-menu-item"
+              rounded="md"
+              @click="$emit('toggleStreaming')"
+            >
+              <template v-slot:prepend>
+                <v-icon icon="mdi-lightning-bolt" size="small"></v-icon>
+              </template>
+              <v-list-item-title>
+                {{
+                  enableStreaming
+                    ? tm("streaming.enabled")
+                    : tm("streaming.disabled")
+                }}
+              </v-list-item-title>
+            </v-list-item>
+          </StyledMenu>
 
-                    <!-- Provider/Model Selector Menu -->
-                    <ProviderModelMenu v-if="showProviderSelector" ref="providerModelMenuRef" />
-                </div>
-                <div style="display: flex; justify-content: flex-end; margin-top: 8px; align-items: center; flex-shrink: 0;">
-                    <input type="file" ref="imageInputRef" @change="handleFileSelect" style="display: none" multiple />
-                    <v-progress-circular v-if="disabled && !mobile" indeterminate size="16" class="mr-1" width="1.5" />
-                    <!-- <v-btn @click="$emit('openLiveMode')"
+          <!-- Provider/Model Selector Menu -->
+          <ProviderModelMenu
+            v-if="showProviderSelector"
+            ref="providerModelMenuRef"
+          />
+        </div>
+        <div
+          style="
+            display: flex;
+            justify-content: flex-end;
+            margin-top: 8px;
+            align-items: center;
+            flex-shrink: 0;
+          "
+        >
+          <input
+            type="file"
+            ref="imageInputRef"
+            @change="handleFileSelect"
+            style="display: none"
+            multiple
+          />
+          <v-progress-circular
+            v-if="disabled && !mobile"
+            indeterminate
+            size="16"
+            class="mr-1"
+            width="1.5"
+          />
+          <!-- <v-btn @click="$emit('openLiveMode')"
                         icon
                         variant="text"
                         color="purple" 
@@ -87,141 +189,213 @@
                             {{ tm('voice.liveMode') }}
                         </v-tooltip>
                     </v-btn> -->
-                    <v-btn @click="handleRecordClick" icon variant="text" :color="isRecording ? 'error' : 'primary'"
-                        class="record-btn">
-                        <v-icon :icon="isRecording ? 'mdi-stop-circle' : 'mdi-microphone'" variant="text"
-                            plain></v-icon>
-                        <v-tooltip activator="parent" location="top">
-                            {{ isRecording ? tm('voice.speaking') : tm('voice.startRecording') }}
-                        </v-tooltip>
-                    </v-btn>
-                    <v-btn icon v-if="isRunning && !canSend" @click="$emit('stop')" variant="tonal" color="primary" class="send-btn">
-                        <v-icon icon="mdi-stop" variant="text" plain></v-icon>
-                        <v-tooltip activator="parent" location="top">
-                            {{ tm('input.stopGenerating') }}
-                        </v-tooltip>
-                    </v-btn>
-                    <v-btn v-else @click="$emit('send')" icon="mdi-send" variant="tonal" color="primary"
-                        :disabled="!canSend" class="send-btn" />
-                </div>
-            </div>
-        </div>
-
-        <!-- 附件预览区 -->
-        <div class="attachments-preview"
-            v-if="stagedImagesUrl.length > 0 || stagedAudioUrl || (stagedFiles && stagedFiles.length > 0)">
-            <div v-for="(img, index) in stagedImagesUrl" :key="'img-' + index" class="image-preview">
-                <img :src="img" class="preview-image" />
-                <v-btn @click="$emit('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="primary" variant="tonal" class="audio-chip">
-                    <v-icon start icon="mdi-microphone" size="small"></v-icon>
-                    {{ tm('voice.recording') }}
-                </v-chip>
-                <v-btn @click="$emit('removeAudio')" class="remove-attachment-btn" icon="mdi-close" size="small"
-                    color="error" variant="text" />
-            </div>
-
-            <div v-for="(file, index) in stagedFiles" :key="'file-' + index" class="file-preview">
-                <v-chip color="primary" variant="tonal" class="file-chip">
-                    <v-icon start icon="mdi-file-document-outline" size="small"></v-icon>
-                    <span class="file-name-preview">{{ file.original_name }}</span>
-                </v-chip>
-                <v-btn @click="$emit('removeFile', index)" class="remove-attachment-btn" icon="mdi-close" size="small"
-                    color="error" variant="text" />
-            </div>
+          <v-btn
+            @click="handleRecordClick"
+            icon
+            variant="text"
+            :color="isRecording ? 'error' : 'primary'"
+            class="record-btn"
+          >
+            <v-icon
+              :icon="isRecording ? 'mdi-stop-circle' : 'mdi-microphone'"
+              variant="text"
+              plain
+            ></v-icon>
+            <v-tooltip activator="parent" location="top">
+              {{
+                isRecording ? tm("voice.speaking") : tm("voice.startRecording")
+              }}
+            </v-tooltip>
+          </v-btn>
+          <v-btn
+            icon
+            v-if="isRunning && !canSend"
+            @click="$emit('stop')"
+            variant="tonal"
+            class="send-btn input-neutral-btn input-neutral-btn--tonal"
+          >
+            <v-icon icon="mdi-stop" variant="text" plain></v-icon>
+            <v-tooltip activator="parent" location="top">
+              {{ tm("input.stopGenerating") }}
+            </v-tooltip>
+          </v-btn>
+          <v-btn
+            v-else
+            @click="$emit('send')"
+            icon="mdi-send"
+            variant="tonal"
+            :disabled="!canSend"
+            class="send-btn input-neutral-btn input-neutral-btn--tonal"
+          />
         </div>
+      </div>
     </div>
+
+    <!-- 附件预览区 -->
+    <div
+      class="attachments-preview"
+      v-if="
+        stagedImagesUrl.length > 0 ||
+        stagedAudioUrl ||
+        (stagedFiles && stagedFiles.length > 0)
+      "
+    >
+      <div
+        v-for="(img, index) in stagedImagesUrl"
+        :key="'img-' + index"
+        class="image-preview"
+      >
+        <img :src="img" class="preview-image" />
+        <v-btn
+          @click="$emit('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="primary" variant="tonal" class="audio-chip">
+          <v-icon start icon="mdi-microphone" size="small"></v-icon>
+          {{ tm("voice.recording") }}
+        </v-chip>
+        <v-btn
+          @click="$emit('removeAudio')"
+          class="remove-attachment-btn"
+          icon="mdi-close"
+          size="small"
+          color="error"
+          variant="text"
+        />
+      </div>
+
+      <div
+        v-for="(file, index) in stagedFiles"
+        :key="'file-' + index"
+        class="file-preview"
+      >
+        <v-chip color="primary" variant="tonal" class="file-chip">
+          <v-icon start icon="mdi-file-document-outline" size="small"></v-icon>
+          <span class="file-name-preview">{{ file.original_name }}</span>
+        </v-chip>
+        <v-btn
+          @click="$emit('removeFile', index)"
+          class="remove-attachment-btn"
+          icon="mdi-close"
+          size="small"
+          color="error"
+          variant="text"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
-import { useDisplay } from 'vuetify';
-import { useModuleI18n } from '@/i18n/composables';
-import { useCustomizerStore } from '@/stores/customizer';
-import ConfigSelector from './ConfigSelector.vue';
-import ProviderModelMenu from './ProviderModelMenu.vue';
-import StyledMenu from '@/components/shared/StyledMenu.vue';
-import type { Session } from '@/composables/useSessions';
+import {
+  ref,
+  computed,
+  watch,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+} from "vue";
+import { useDisplay } from "vuetify";
+import { useModuleI18n } from "@/i18n/composables";
+import { useCustomizerStore } from "@/stores/customizer";
+import ConfigSelector from "./ConfigSelector.vue";
+import ProviderModelMenu from "./ProviderModelMenu.vue";
+import StyledMenu from "@/components/shared/StyledMenu.vue";
+import type { Session } from "@/composables/useSessions";
 
 interface StagedFileInfo {
-    attachment_id: string;
-    filename: string;
-    original_name: string;
-    url: string;
-    type: string;
+  attachment_id: string;
+  filename: string;
+  original_name: string;
+  url: string;
+  type: string;
 }
 
 interface ReplyInfo {
-    messageId: number;
-    selectedText?: string;
+  messageId: string | number;
+  selectedText?: string;
 }
 
 interface Props {
-    prompt: string;
-    stagedImagesUrl: string[];
-    stagedAudioUrl: string;
-    stagedFiles?: StagedFileInfo[];
-    disabled: boolean;
-    enableStreaming: boolean;
-    isRecording: boolean;
-    isRunning: boolean;
-    sessionId?: string | null;
-    currentSession?: Session | null;
-    configId?: string | null;
-    replyTo?: ReplyInfo | null;
-    sendShortcut?: 'enter' | 'shift_enter';
+  prompt: string;
+  stagedImagesUrl: string[];
+  stagedAudioUrl: string;
+  stagedFiles?: StagedFileInfo[];
+  disabled: boolean;
+  enableStreaming: boolean;
+  isRecording: boolean;
+  isRunning: boolean;
+  sessionId?: string | null;
+  currentSession?: Session | null;
+  configId?: string | null;
+  replyTo?: ReplyInfo | null;
+  sendShortcut?: "enter" | "shift_enter";
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    sessionId: null,
-    currentSession: null,
-    configId: null,
-    stagedFiles: () => [],
-    replyTo: null,
-    sendShortcut: 'shift_enter'
+  sessionId: null,
+  currentSession: null,
+  configId: null,
+  stagedFiles: () => [],
+  replyTo: null,
+  sendShortcut: "shift_enter",
 });
 
 const emit = defineEmits<{
-    'update:prompt': [value: string];
-    send: [];
-    stop: [];
-    toggleStreaming: [];
-    removeImage: [index: number];
-    removeAudio: [];
-    removeFile: [index: number];
-    startRecording: [];
-    stopRecording: [];
-    pasteImage: [event: ClipboardEvent];
-    fileSelect: [files: FileList];
-    clearReply: [];
-    openLiveMode: [];
+  "update:prompt": [value: string];
+  send: [];
+  stop: [];
+  toggleStreaming: [];
+  removeImage: [index: number];
+  removeAudio: [];
+  removeFile: [index: number];
+  startRecording: [];
+  stopRecording: [];
+  pasteImage: [event: ClipboardEvent];
+  fileSelect: [files: FileList];
+  clearReply: [];
+  openLiveMode: [];
 }>();
 
-const { tm } = useModuleI18n('features/chat');
-const isDark = computed(() => useCustomizerStore().uiTheme === 'PurpleThemeDark');
+const { tm } = useModuleI18n("features/chat");
+const isDark = computed(
+  () => useCustomizerStore().uiTheme === "PurpleThemeDark",
+);
 
 const inputField = ref<HTMLTextAreaElement | null>(null);
 const imageInputRef = ref<HTMLInputElement | null>(null);
-const providerModelMenuRef = ref<InstanceType<typeof ProviderModelMenu> | null>(null);
+const providerModelMenuRef = ref<InstanceType<typeof ProviderModelMenu> | null>(
+  null,
+);
 const showProviderSelector = ref(true);
 const isReplyClosing = ref(false);
 const isDragging = ref(false);
 let dragLeaveTimeout: number | null = null;
 
 const localPrompt = computed({
-    get: () => props.prompt,
-    set: (value) => emit('update:prompt', value)
+  get: () => props.prompt,
+  set: (value) => emit("update:prompt", value),
 });
 
-const sessionPlatformId = computed(() => props.currentSession?.platform_id || 'webchat');
+const sessionPlatformId = computed(
+  () => props.currentSession?.platform_id || "webchat",
+);
 const sessionIsGroup = computed(() => Boolean(props.currentSession?.is_group));
 
 const canSend = computed(() => {
-    return (props.prompt && props.prompt.trim()) || props.stagedImagesUrl.length > 0 || props.stagedAudioUrl || (props.stagedFiles && props.stagedFiles.length > 0);
+  return (
+    (props.prompt && props.prompt.trim()) ||
+    props.stagedImagesUrl.length > 0 ||
+    props.stagedAudioUrl ||
+    (props.stagedFiles && props.stagedFiles.length > 0)
+  );
 });
 
 // Ctrl+B 长按录音相关
@@ -231,392 +405,420 @@ const ctrlKeyLongPressThreshold = 300;
 
 // 处理清除引用 - 触发关闭动画
 function handleClearReply() {
-    isReplyClosing.value = true;
+  isReplyClosing.value = true;
 }
 
 // 动画完成后发送clearReply事件
 function handleReplyAfterLeave() {
-    emit('clearReply');
-    isReplyClosing.value = false;
+  emit("clearReply");
+  isReplyClosing.value = false;
 }
 
 const { mobile } = useDisplay();
 
 // Auto-resize textarea
 function autoResize() {
-    const el = inputField.value;
-    if (!el) return;
-    el.style.height = 'auto';
-    el.style.height = Math.min(el.scrollHeight, 200) + 'px';
+  const el = inputField.value;
+  if (!el) return;
+  el.style.height = "auto";
+  el.style.height = Math.min(el.scrollHeight, 200) + "px";
 }
 
 watch(localPrompt, () => {
-    nextTick(autoResize);
+  nextTick(autoResize);
 });
 
 function handleKeyDown(e: KeyboardEvent) {
-    const isEnter = e.key === 'Enter';
-    if (!isEnter) {
-        // Ctrl+B 录音
-        if (e.ctrlKey && e.keyCode === 66) {
-            e.preventDefault();
-            if (ctrlKeyDown.value) return;
+  const isEnter = e.key === "Enter";
+  if (!isEnter) {
+    // Ctrl+B 录音
+    if (e.ctrlKey && e.keyCode === 66) {
+      e.preventDefault();
+      if (ctrlKeyDown.value) return;
 
-            ctrlKeyDown.value = true;
-            ctrlKeyTimer.value = window.setTimeout(() => {
-                if (ctrlKeyDown.value && !props.isRecording) {
-                    emit('startRecording');
-                }
-            }, ctrlKeyLongPressThreshold);
+      ctrlKeyDown.value = true;
+      ctrlKeyTimer.value = window.setTimeout(() => {
+        if (ctrlKeyDown.value && !props.isRecording) {
+          emit("startRecording");
         }
-        return;
+      }, ctrlKeyLongPressThreshold);
     }
+    return;
+  }
 
-    const isSendHotkey =
-        e.ctrlKey ||
-        e.metaKey ||
-        (props.sendShortcut === 'enter' ? !e.shiftKey : e.shiftKey);
+  const isSendHotkey =
+    e.ctrlKey ||
+    e.metaKey ||
+    (props.sendShortcut === "enter" ? !e.shiftKey : e.shiftKey);
 
-    if (isSendHotkey) {
-        e.preventDefault();
-        if (localPrompt.value.trim() === '/astr_live_dev') {
-            emit('openLiveMode');
-            localPrompt.value = '';
-            return;
-        }
-        if (canSend.value) {
-            emit('send');
-        }
-        return;
+  if (isSendHotkey) {
+    e.preventDefault();
+    if (localPrompt.value.trim() === "/astr_live_dev") {
+      emit("openLiveMode");
+      localPrompt.value = "";
+      return;
     }
+    if (canSend.value) {
+      emit("send");
+    }
+    return;
+  }
 }
 
 function handleKeyUp(e: KeyboardEvent) {
-    if (e.keyCode === 66) {
-        ctrlKeyDown.value = false;
+  if (e.keyCode === 66) {
+    ctrlKeyDown.value = false;
 
-        if (ctrlKeyTimer.value) {
-            clearTimeout(ctrlKeyTimer.value);
-            ctrlKeyTimer.value = null;
-        }
-
-        if (props.isRecording) {
-            emit('stopRecording');
-        }
+    if (ctrlKeyTimer.value) {
+      clearTimeout(ctrlKeyTimer.value);
+      ctrlKeyTimer.value = null;
     }
+
+    if (props.isRecording) {
+      emit("stopRecording");
+    }
+  }
 }
 
 function handlePaste(e: ClipboardEvent) {
-    emit('pasteImage', e);
+  emit("pasteImage", e);
 }
 
 function handleDragOver(e: DragEvent) {
-    // 清除之前的 leave timeout
-    if (dragLeaveTimeout) {
-        clearTimeout(dragLeaveTimeout);
-        dragLeaveTimeout = null;
-    }
+  // 清除之前的 leave timeout
+  if (dragLeaveTimeout) {
+    clearTimeout(dragLeaveTimeout);
+    dragLeaveTimeout = null;
+  }
 
-    // 检查是否有文件
-    if (e.dataTransfer?.types.includes('Files')) {
-        isDragging.value = true;
-    }
+  // 检查是否有文件
+  if (e.dataTransfer?.types.includes("Files")) {
+    isDragging.value = true;
+  }
 }
 
 function handleDragLeave(e: DragEvent) {
-    // 使用 timeout 避免在子元素间移动时闪烁
-    dragLeaveTimeout = window.setTimeout(() => {
-        isDragging.value = false;
-    }, 50);
+  // 使用 timeout 避免在子元素间移动时闪烁
+  dragLeaveTimeout = window.setTimeout(() => {
+    isDragging.value = false;
+  }, 50);
 }
 
 function handleDrop(e: DragEvent) {
-    isDragging.value = false;
+  isDragging.value = false;
 
-    const files = e.dataTransfer?.files;
-    if (files && files.length > 0) {
-        emit('fileSelect', files);
-    }
+  const files = e.dataTransfer?.files;
+  if (files && files.length > 0) {
+    emit("fileSelect", files);
+  }
 }
 
 function triggerImageInput() {
-    imageInputRef.value?.click();
+  imageInputRef.value?.click();
 }
 
 function handleFileSelect(event: Event) {
-    const target = event.target as HTMLInputElement;
-    const files = target.files;
-    if (files) {
-        emit('fileSelect', files);
-    }
-    target.value = '';
+  const target = event.target as HTMLInputElement;
+  const files = target.files;
+  if (files) {
+    emit("fileSelect", files);
+  }
+  target.value = "";
 }
 
 function handleRecordClick() {
-    if (props.isRecording) {
-        emit('stopRecording');
-    } else {
-        emit('startRecording');
-    }
+  if (props.isRecording) {
+    emit("stopRecording");
+  } else {
+    emit("startRecording");
+  }
 }
 
-function handleConfigChange(payload: { configId: string; agentRunnerType: string }) {
-    const runnerType = (payload.agentRunnerType || '').toLowerCase();
-    const isInternal = runnerType === 'internal' || runnerType === 'local';
-    showProviderSelector.value = isInternal;
+function handleConfigChange(payload: {
+  configId: string;
+  agentRunnerType: string;
+}) {
+  const runnerType = (payload.agentRunnerType || "").toLowerCase();
+  const isInternal = runnerType === "internal" || runnerType === "local";
+  showProviderSelector.value = isInternal;
 }
 
 function getCurrentSelection() {
-    if (!showProviderSelector.value) {
-        return null;
-    }
-    return providerModelMenuRef.value?.getCurrentSelection();
+  if (!showProviderSelector.value) {
+    return null;
+  }
+  return providerModelMenuRef.value?.getCurrentSelection();
 }
 
 function focusInput() {
-    if (!inputField.value) return;
-    inputField.value.focus();
+  if (!inputField.value) return;
+  inputField.value.focus();
 }
 
 onMounted(() => {
-    if (inputField.value) {
-        inputField.value.addEventListener('paste', handlePaste);
-    }
-    document.addEventListener('keyup', handleKeyUp);
+  if (inputField.value) {
+    inputField.value.addEventListener("paste", handlePaste);
+  }
+  document.addEventListener("keyup", handleKeyUp);
 });
 
 onBeforeUnmount(() => {
-    if (inputField.value) {
-        inputField.value.removeEventListener('paste', handlePaste);
-    }
-    document.removeEventListener('keyup', handleKeyUp);
+  if (inputField.value) {
+    inputField.value.removeEventListener("paste", handlePaste);
+  }
+  document.removeEventListener("keyup", handleKeyUp);
 });
 
 defineExpose({
-    getCurrentSelection,
-    focusInput
+  getCurrentSelection,
+  focusInput,
 });
 </script>
 
 <style scoped>
 .input-area {
-    padding: 16px;
-    background-color: transparent;
-    position: relative;
-    border-top: 1px solid var(--v-theme-border);
-    flex-shrink: 0;
+  padding: 12px 16px 0;
+  background-color: transparent;
+  position: relative;
+  border-top: 1px solid var(--v-theme-border);
+  flex-shrink: 0;
+}
+
+.input-neutral-btn {
+  color: #6f6f6f !important;
+}
+
+.input-neutral-btn:hover {
+  background: #efefef;
+}
+
+.input-neutral-btn--tonal {
+  background: #efefef;
+  color: #4f4f4f !important;
+}
+
+.input-neutral-btn--tonal:hover {
+  background: #e7e7e7;
+}
+
+.input-area.is-dark .input-neutral-btn {
+  color: rgba(255, 255, 255, 0.78) !important;
+}
+
+.input-area.is-dark .input-neutral-btn:hover,
+.input-area.is-dark .input-neutral-btn--tonal {
+  background: rgba(255, 255, 255, 0.1);
 }
 
 /* 拖拽上传遮罩 */
 .drop-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(var(--v-theme-primary), 0.12);
-    border: 2px dashed rgba(var(--v-theme-primary), 0.45);
-    border-radius: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 100;
-    pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(var(--v-theme-primary), 0.12);
+  border: 2px dashed rgba(var(--v-theme-primary), 0.45);
+  border-radius: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  pointer-events: none;
 }
 
 .drop-overlay-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
 }
 
 .drop-text {
-    font-size: 16px;
-    font-weight: 500;
-    color: rgb(var(--v-theme-primary));
+  font-size: 16px;
+  font-weight: 500;
+  color: rgb(var(--v-theme-primary));
 }
 
 /* Fade transition for drop overlay */
 .fade-enter-active,
 .fade-leave-active {
-    transition: opacity 0.2s ease;
+  transition: opacity 0.2s ease;
 }
 
 .fade-enter-from,
 .fade-leave-to {
-    opacity: 0;
+  opacity: 0;
 }
 
 .reply-preview {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 16px;
-    margin: 8px 8px 0 8px;
-    background-color: rgba(var(--v-theme-primary), 0.06);
-    border-radius: 12px;
-    gap: 8px;
-    max-height: 500px;
-    overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  margin: 8px 8px 0 8px;
+  background-color: rgba(var(--v-theme-primary), 0.06);
+  border-radius: 12px;
+  gap: 8px;
+  max-height: 500px;
+  overflow: hidden;
 }
 
 /* Transition animations for reply preview */
 .slideReply-enter-active {
-    animation: slideDown 0.2s ease-out;
+  animation: slideDown 0.2s ease-out;
 }
 
 .slideReply-leave-active {
-    animation: slideUp 0.2s ease-out;
+  animation: slideUp 0.2s ease-out;
 }
 
 @keyframes slideDown {
-    from {
-        max-height: 0;
-        opacity: 0;
-        margin-top: 0;
-        padding-top: 0;
-        padding-bottom: 0;
-    }
+  from {
+    max-height: 0;
+    opacity: 0;
+    margin-top: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
 
-    to {
-        max-height: 500px;
-        opacity: 1;
-        margin-top: 8px;
-        padding-top: 8px;
-        padding-bottom: 8px;
-    }
+  to {
+    max-height: 500px;
+    opacity: 1;
+    margin-top: 8px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
 }
 
 @keyframes slideUp {
-    from {
-        max-height: 500px;
-        opacity: 1;
-        margin-top: 8px;
-        padding-top: 8px;
-        padding-bottom: 8px;
-    }
+  from {
+    max-height: 500px;
+    opacity: 1;
+    margin-top: 8px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
 
-    to {
-        max-height: 0;
-        opacity: 0;
-        margin-top: 0;
-        padding-top: 0;
-        padding-bottom: 0;
-    }
+  to {
+    max-height: 0;
+    opacity: 0;
+    margin-top: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
 }
 
 .reply-content {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .reply-icon {
-    color: var(--v-theme-secondary);
-    flex-shrink: 0;
+  color: var(--v-theme-secondary);
+  flex-shrink: 0;
 }
 
 .reply-text {
-    font-size: 13px;
-    color: var(--v-theme-secondaryText);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-    min-width: 0;
+  font-size: 13px;
+  color: var(--v-theme-secondaryText);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
 }
 
 .remove-reply-btn {
-    flex-shrink: 0;
-    opacity: 0.6;
+  flex-shrink: 0;
+  opacity: 0.6;
 }
 
 .attachments-preview {
-    display: flex;
-    gap: 8px;
-    margin-top: 8px;
-    max-width: 900px;
-    margin: 8px auto 0;
-    flex-wrap: wrap;
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+  max-width: 900px;
+  margin: 8px auto 0;
+  flex-wrap: wrap;
 }
 
 .image-preview,
 .audio-preview,
 .file-preview {
-    position: relative;
-    display: inline-flex;
+  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);
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .audio-chip,
 .file-chip {
-    height: 36px;
-    border-radius: 18px;
+  height: 36px;
+  border-radius: 18px;
 }
 
 .file-name-preview {
-    max-width: 120px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .remove-attachment-btn {
-    position: absolute;
-    top: -8px;
-    right: -8px;
-    opacity: 0.8;
-    transition: opacity 0.2s;
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  opacity: 0.8;
+  transition: opacity 0.2s;
 }
 
 .remove-attachment-btn:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 .fade-in {
-    animation: fadeIn 0.3s ease-in-out;
+  animation: fadeIn 0.3s ease-in-out;
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
 
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @media (max-width: 768px) {
-    .input-area {
-        padding: 0 !important;
-        padding-bottom: 10px !important;
-    }
+  .input-area {
+    padding: 0 !important;
+  }
 
-    .input-container {
-        width: 100% !important;
-        max-width: 100% !important;
-    }
+  .input-container {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
 
-    .input-area textarea,
-    .chat-textarea {
-        min-height: 32px !important;
-        max-height: 160px !important;
-        font-size: 16px !important;
-        padding: 16px 16px 12px 16px !important;
-    }
+  .input-area textarea,
+  .chat-textarea {
+    min-height: 30px !important;
+    max-height: 160px !important;
+    font-size: 16px !important;
+    padding: 12px 16px 10px 16px !important;
+  }
 }
 </style>
diff --git a/dashboard/src/components/chat/ConversationSidebar.vue b/dashboard/src/components/chat/ConversationSidebar.vue
deleted file mode 100644
index 8045fd8d1..000000000
--- a/dashboard/src/components/chat/ConversationSidebar.vue
+++ /dev/null
@@ -1,696 +0,0 @@
-<template>
-    <div class="sidebar-panel" 
-        :class="{ 
-            'sidebar-collapsed': sidebarCollapsed && !isMobile,
-            'mobile-sidebar-open': isMobile && mobileMenuOpen,
-            'mobile-sidebar': isMobile
-        }"
-        :style="{ backgroundColor: sidebarCollapsed && !isMobile ? 'rgb(var(--v-theme-surface))' : 'rgb(var(--v-theme-mcpCardBg))' }">
-
-        <div class="sidebar-collapse-btn-container" v-if="!isMobile">
-            <v-btn icon class="sidebar-collapse-btn" @click="toggleSidebar" variant="text" color="deep-purple">
-                <v-icon>{{ sidebarCollapsed ? 'mdi-chevron-right' : 'mdi-chevron-left' }}</v-icon>
-            </v-btn>
-        </div>
-
-        <div class="sidebar-collapse-btn-container" v-if="isMobile">
-            <v-btn icon class="sidebar-collapse-btn" @click="$emit('closeMobileSidebar')" variant="text"
-                color="deep-purple">
-                <v-icon>mdi-close</v-icon>
-            </v-btn>
-        </div>
-
-        <div style="padding: 8px; opacity: 0.6;">
-            <div class="new-chat-row" v-if="!sidebarCollapsed || isMobile">
-                <v-btn block variant="text" class="new-chat-btn" @click="$emit('newChat')" :disabled="!currSessionId && !selectedProjectId"
-                    prepend-icon="mdi-square-edit-outline">{{ tm('actions.newChat') }}</v-btn>
-                <v-btn v-if="sessions.length > 0" icon size="small" variant="text" @click="toggleBatchMode"
-                    :color="batchMode ? 'primary' : undefined">
-                    <v-icon>mdi-checkbox-multiple-marked-outline</v-icon>
-                </v-btn>
-            </div>
-            <v-btn icon="mdi-square-edit-outline" rounded="xl" @click="$emit('newChat')" :disabled="!currSessionId && !selectedProjectId"
-                v-if="sidebarCollapsed && !isMobile" elevation="0"></v-btn>
-        </div>
-
-        <!-- Batch action bar -->
-        <div v-if="batchMode && (!sidebarCollapsed || isMobile)" class="batch-action-bar">
-            <v-btn size="x-small" variant="text" @click="toggleSelectAll">
-                {{ isAllSelected ? tm('batch.deselectAll') : tm('batch.selectAll') }}
-            </v-btn>
-            <span class="batch-selected-count">{{ tm('batch.selected', { count: batchSelected.length }) }}</span>
-            <v-spacer />
-            <v-btn size="x-small" variant="text" color="error" :disabled="batchSelected.length === 0"
-                @click="handleBatchDelete">
-                {{ tm('batch.delete') }}
-            </v-btn>
-        </div>
-
-        <!-- 项目列表组件 -->
-        <ProjectList
-            v-if="!sidebarCollapsed || isMobile"
-            :projects="projects"
-            @selectProject="$emit('selectProject', $event)"
-            @createProject="$emit('createProject')"
-            @editProject="$emit('editProject', $event)"
-            @deleteProject="$emit('deleteProject', $event)"
-        />
-
-        <div style="overflow-y: auto; flex-grow: 1; overscroll-behavior-y: contain;"
-            v-if="!sidebarCollapsed || isMobile">
-            <v-card v-if="sessions.length > 0" flat style="background-color: transparent;">
-                <v-list density="compact" nav class="conversation-list"
-                    style="background-color: transparent;" :selected="batchMode ? [] : selectedSessions"
-                    @update:selected="handleListSelect">
-                    <v-list-item v-for="item in sessions" :key="item.session_id" :value="item.session_id"
-                        rounded="lg" class="conversation-item" active-color="secondary"
-                        @click="batchMode ? toggleBatchItem(item.session_id) : undefined">
-
-                        <template v-slot:prepend>
-                            <div class="batch-checkbox-slot" :class="{ 'batch-checkbox-slot--active': batchMode }">
-                                <v-checkbox-btn
-                                    :model-value="batchSelected.includes(item.session_id)"
-                                    @update:model-value="toggleBatchItem(item.session_id)"
-                                    @click.stop
-                                    density="compact"
-                                    hide-details
-                                    class="batch-checkbox"
-                                />
-                            </div>
-                        </template>
-
-                        <v-list-item-title v-if="!sidebarCollapsed || isMobile" class="conversation-title"
-                            :style="{ color: 'rgb(var(--v-theme-primaryText))' }">
-                            {{ item.display_name || tm('conversation.newConversation') }}
-                        </v-list-item-title>
-                        <!-- <v-list-item-subtitle v-if="!sidebarCollapsed || isMobile" class="timestamp">
-                            {{ new Date(item.updated_at).toLocaleString() }}
-                        </v-list-item-subtitle> -->
-
-                        <template v-if="!batchMode && (!sidebarCollapsed || isMobile)" v-slot:append>
-                            <div class="conversation-actions">
-                                <v-btn icon="mdi-pencil" size="x-small" variant="text"
-                                    class="edit-title-btn"
-                                    @click.stop="$emit('editTitle', item.session_id, item.display_name ?? '')" />
-                                <v-btn icon="mdi-delete" size="x-small" variant="text"
-                                    class="delete-conversation-btn" color="error"
-                                    @click.stop="handleDeleteConversation(item)" />
-                            </div>
-                        </template>
-                    </v-list-item>
-                </v-list>
-            </v-card>
-
-            <v-fade-transition>
-                <div class="no-conversations" v-if="sessions.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 || isMobile">
-                        {{ tm('conversation.noHistory') }}
-                    </div>
-                </div>
-            </v-fade-transition>
-        </div>
-
-        <!-- 收起时的占位元素 -->
-        <div class="sidebar-spacer" v-if="sidebarCollapsed && !isMobile"></div>
-
-        <!-- 底部设置按钮 -->
-        <div class="sidebar-footer">
-            <StyledMenu location="top" :close-on-content-click="false">
-                <template v-slot:activator="{ props: menuProps }">
-                    <v-btn 
-                        v-bind="menuProps"
-                        :icon="sidebarCollapsed && !isMobile"
-                        :block="!sidebarCollapsed || isMobile"
-                        variant="text" 
-                        class="settings-btn"
-                        :class="{ 'settings-btn-collapsed': sidebarCollapsed && !isMobile }"
-                        :prepend-icon="(!sidebarCollapsed || isMobile) ? 'mdi-cog-outline' : undefined"
-                    >
-                        <v-icon v-if="sidebarCollapsed && !isMobile">mdi-cog-outline</v-icon>
-                        <template v-if="!sidebarCollapsed || isMobile">{{ t('core.common.settings') }}</template>
-                    </v-btn>
-                </template>
-                
-                <!-- 语言切换（分组） -->
-                <v-menu
-                    :open-on-hover="!isMobile"
-                    :open-on-click="isMobile"
-                    :open-delay="!isMobile ? 60 : 0"
-                    :close-delay="!isMobile ? 120 : 0"
-                    :location="isMobile ? 'bottom' : 'end center'"
-                    offset="8"
-                    close-on-content-click
-                >
-                    <template v-slot:activator="{ props: languageMenuProps }">
-                        <v-list-item
-                            v-bind="languageMenuProps"
-                            class="styled-menu-item chat-settings-group-trigger"
-                            rounded="md"
-                        >
-                            <template v-slot:prepend>
-                                <v-icon>mdi-translate</v-icon>
-                            </template>
-                            <v-list-item-title>{{ t('core.common.language') }}</v-list-item-title>
-                            <template v-slot:append>
-                                <span class="chat-settings-group-current">{{ currentLanguage?.flag }}</span>
-                                <v-icon size="18" class="chat-settings-group-arrow">mdi-chevron-right</v-icon>
-                            </template>
-                        </v-list-item>
-                    </template>
-
-                    <v-card class="styled-menu-card" style="min-width: 180px;" elevation="8" rounded="lg">
-                        <v-list density="compact" class="styled-menu-list pa-1">
-                            <v-list-item
-                                v-for="lang in languages"
-                                :key="lang.code"
-                                :value="lang.code"
-                                @click="changeLanguage(lang.code)"
-                                :class="{ 'styled-menu-item-active': currentLocale === lang.code }"
-                                class="styled-menu-item"
-                                rounded="md"
-                            >
-                                <template v-slot:prepend>
-                                    <span class="language-flag">{{ lang.flag }}</span>
-                                </template>
-                                <v-list-item-title>{{ lang.name }}</v-list-item-title>
-                            </v-list-item>
-                        </v-list>
-                    </v-card>
-                </v-menu>
-                
-                <!-- 主题切换 -->
-                <v-list-item class="styled-menu-item" @click="$emit('toggleTheme')">
-                    <template v-slot:prepend>
-                        <v-icon>{{ isDark ? 'mdi-weather-night' : 'mdi-white-balance-sunny' }}</v-icon>
-                    </template>
-                    <v-list-item-title>{{ isDark ? tm('modes.lightMode') : tm('modes.darkMode') }}</v-list-item-title>
-                </v-list-item>
-
-                <!-- 通信传输模式（分组） -->
-                <v-menu
-                    :open-on-hover="!isMobile"
-                    :open-on-click="isMobile"
-                    :open-delay="!isMobile ? 60 : 0"
-                    :close-delay="!isMobile ? 120 : 0"
-                    :location="isMobile ? 'bottom' : 'end center'"
-                    offset="8"
-                    close-on-content-click
-                >
-                    <template v-slot:activator="{ props: transportMenuProps }">
-                        <v-list-item
-                            v-bind="transportMenuProps"
-                            class="styled-menu-item chat-settings-group-trigger"
-                            rounded="md"
-                        >
-                            <template v-slot:prepend>
-                                <v-icon>mdi-lan-connect</v-icon>
-                            </template>
-                            <v-list-item-title>{{ tm('transport.title') }}</v-list-item-title>
-                            <template v-slot:append>
-                                <span class="chat-settings-group-current chat-settings-transport-current">{{ currentTransportLabel }}</span>
-                                <v-icon size="18" class="chat-settings-group-arrow">mdi-chevron-right</v-icon>
-                            </template>
-                        </v-list-item>
-                    </template>
-
-                    <v-card class="styled-menu-card" style="min-width: 220px;" elevation="8" rounded="lg">
-                        <v-list density="compact" class="styled-menu-list pa-1">
-                            <v-list-item
-                                v-for="opt in transportOptions"
-                                :key="opt.value"
-                                :value="opt.value"
-                                @click="handleTransportModeChange(opt.value)"
-                                :class="{ 'styled-menu-item-active': transportMode === opt.value }"
-                                class="styled-menu-item"
-                                rounded="md"
-                            >
-                                <v-list-item-title>{{ opt.label }}</v-list-item-title>
-                            </v-list-item>
-                        </v-list>
-                    </v-card>
-                </v-menu>
-
-                <!-- 发送快捷键（分组） -->
-                <v-menu
-                    :open-on-hover="!isMobile"
-                    :open-on-click="isMobile"
-                    :open-delay="!isMobile ? 60 : 0"
-                    :close-delay="!isMobile ? 120 : 0"
-                    :location="isMobile ? 'bottom' : 'end center'"
-                    offset="8"
-                    close-on-content-click
-                >
-                    <template v-slot:activator="{ props: sendShortcutMenuProps }">
-                        <v-list-item
-                            v-bind="sendShortcutMenuProps"
-                            class="styled-menu-item chat-settings-group-trigger"
-                            rounded="md"
-                        >
-                            <template v-slot:prepend>
-                                <v-icon>mdi-keyboard-outline</v-icon>
-                            </template>
-                            <v-list-item-title>{{ tm('shortcuts.sendKey.title') }}</v-list-item-title>
-                            <template v-slot:append>
-                                <span class="chat-settings-group-current chat-settings-transport-current">{{ currentSendShortcutLabel }}</span>
-                                <v-icon size="18" class="chat-settings-group-arrow">mdi-chevron-right</v-icon>
-                            </template>
-                        </v-list-item>
-                    </template>
-
-                    <v-card class="styled-menu-card" style="min-width: 220px;" elevation="8" rounded="lg">
-                        <v-list density="compact" class="styled-menu-list pa-1">
-                            <v-list-item
-                                v-for="opt in sendShortcutOptions"
-                                :key="opt.value"
-                                :value="opt.value"
-                                @click="handleSendShortcutChange(opt.value)"
-                                :class="{ 'styled-menu-item-active': props.sendShortcut === opt.value }"
-                                class="styled-menu-item"
-                                rounded="md"
-                            >
-                                <v-list-item-title>{{ opt.label }}</v-list-item-title>
-                            </v-list-item>
-                        </v-list>
-                    </v-card>
-                </v-menu>
-
-                <!-- 全屏/退出全屏 -->
-                <v-list-item class="styled-menu-item" @click="$emit('toggleFullscreen')">
-                    <template v-slot:prepend>
-                        <v-icon>{{ chatboxMode ? 'mdi-fullscreen-exit' : 'mdi-fullscreen' }}</v-icon>
-                    </template>
-                    <v-list-item-title>{{ chatboxMode ? tm('actions.exitFullscreen') : tm('actions.fullscreen') }}</v-list-item-title>
-                </v-list-item>
-
-                <!-- 提供商配置 -->
-                <v-list-item class="styled-menu-item" @click="showProviderConfigDialog = true">
-                    <template v-slot:prepend>
-                        <v-icon>mdi-creation</v-icon>
-                    </template>
-                    <v-list-item-title>{{ tm('actions.providerConfig') }}</v-list-item-title>
-                </v-list-item>
-            </StyledMenu>
-        </div>
-
-        <!-- 提供商配置对话框 -->
-        <ProviderConfigDialog v-model="showProviderConfigDialog" />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useI18n, useModuleI18n } from '@/i18n/composables';
-import type { Session } from '@/composables/useSessions';
-import { askForConfirmation, useConfirmDialog } from '@/utils/confirmDialog';
-import StyledMenu from '@/components/shared/StyledMenu.vue';
-import ProviderConfigDialog from '@/components/chat/ProviderConfigDialog.vue';
-import ProjectList from '@/components/chat/ProjectList.vue';
-import type { Project } from '@/components/chat/ProjectList.vue';
-import { useLanguageSwitcher } from '@/i18n/composables';
-import type { Locale } from '@/i18n/types';
-
-interface Props {
-    sessions: Session[];
-    selectedSessions: string[];
-    currSessionId: string;
-    selectedProjectId?: string | null;
-    transportMode: 'sse' | 'websocket';
-    isDark: boolean;
-    chatboxMode: boolean;
-    isMobile: boolean;
-    mobileMenuOpen: boolean;
-    projects?: Project[];
-    sendShortcut: 'enter' | 'shift_enter';
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    projects: () => []
-});
-
-const emit = defineEmits<{
-    newChat: [];
-    selectConversation: [sessionIds: string[]];
-    editTitle: [sessionId: string, title: string];
-    deleteConversation: [sessionId: string];
-    batchDeleteConversations: [sessionIds: string[]];
-    closeMobileSidebar: [];
-    toggleTheme: [];
-    toggleFullscreen: [];
-    selectProject: [projectId: string];
-    createProject: [];
-    editProject: [project: Project];
-    deleteProject: [projectId: string];
-    updateTransportMode: [mode: 'sse' | 'websocket'];
-    updateSendShortcut: [mode: 'enter' | 'shift_enter'];
-}>();
-
-const { t } = useI18n();
-const { tm } = useModuleI18n('features/chat');
-
-const confirmDialog = useConfirmDialog();
-
-const sidebarCollapsed = ref(true);
-const showProviderConfigDialog = ref(false);
-
-// Batch mode state
-const batchMode = ref(false);
-const batchSelected = ref<string[]>([]);
-
-const isAllSelected = computed(() =>
-    props.sessions.length > 0 && batchSelected.value.length === props.sessions.length
-);
-
-function toggleBatchMode() {
-    batchMode.value = !batchMode.value;
-    batchSelected.value = [];
-}
-
-function toggleBatchItem(sessionId: string) {
-    const idx = batchSelected.value.indexOf(sessionId);
-    if (idx >= 0) {
-        batchSelected.value.splice(idx, 1);
-    } else {
-        batchSelected.value.push(sessionId);
-    }
-}
-
-function toggleSelectAll() {
-    if (isAllSelected.value) {
-        batchSelected.value = [];
-    } else {
-        batchSelected.value = props.sessions.map(s => s.session_id);
-    }
-}
-
-async function handleBatchDelete() {
-    const count = batchSelected.value.length;
-    if (count === 0) return;
-    const message = tm('batch.confirmDelete', { count });
-    if (await askForConfirmation(message, confirmDialog)) {
-        emit('batchDeleteConversations', [...batchSelected.value]);
-        batchSelected.value = [];
-        batchMode.value = false;
-    }
-}
-
-function handleListSelect(sessionIds: string[]) {
-    if (!batchMode.value) {
-        emit('selectConversation', sessionIds);
-    }
-}
-const transportOptions = [
-    { label: tm('transport.sse'), value: 'sse' as const },
-    { label: tm('transport.websocket'), value: 'websocket' as const }
-];
-const sendShortcutOptions = [
-    { label: tm('shortcuts.sendKey.enterToSend'), value: 'enter' as const },
-    { label: tm('shortcuts.sendKey.shiftEnterToSend'), value: 'shift_enter' as const }
-];
-
-// Language switcher
-const { languageOptions, currentLanguage, switchLanguage, locale } = useLanguageSwitcher();
-const languages = computed(() =>
-    languageOptions.value.map(lang => ({
-        code: lang.value,
-        name: lang.label,
-        flag: lang.flag
-    }))
-);
-const currentLocale = computed(() => locale.value);
-const changeLanguage = async (langCode: string) => {
-    await switchLanguage(langCode as Locale);
-};
-
-const currentTransportLabel = computed(() => {
-    const found = transportOptions.find(opt => opt.value === props.transportMode);
-    return found?.label ?? '';
-});
-const currentSendShortcutLabel = computed(() => {
-    const found = sendShortcutOptions.find(opt => opt.value === props.sendShortcut);
-    return found?.label ?? '';
-});
-
-// 从 localStorage 读取侧边栏折叠状态
-const savedCollapsedState = localStorage.getItem('sidebarCollapsed');
-if (savedCollapsedState !== null) {
-    sidebarCollapsed.value = JSON.parse(savedCollapsedState);
-} else {
-    sidebarCollapsed.value = true;
-}
-
-function toggleSidebar() {
-    sidebarCollapsed.value = !sidebarCollapsed.value;
-    localStorage.setItem('sidebarCollapsed', JSON.stringify(sidebarCollapsed.value));
-}
-
-async function handleDeleteConversation(session: Session) {
-    const sessionTitle = session.display_name || tm('conversation.newConversation');
-    const message = tm('conversation.confirmDelete', { name: sessionTitle });
-    if (await askForConfirmation(message, confirmDialog)) {
-        emit('deleteConversation', session.session_id);
-    }
-}
-
-function handleTransportModeChange(mode: string | null) {
-    if (mode === 'sse' || mode === 'websocket') {
-        emit('updateTransportMode', mode);
-    }
-}
-
-function handleSendShortcutChange(mode: string | null) {
-    if (mode === 'enter' || mode === 'shift_enter') {
-        emit('updateSendShortcut', mode);
-    }
-}
-</script>
-
-<style scoped>
-.sidebar-panel {
-    max-width: 270px;
-    min-width: 240px;
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    height: 100%;
-    max-height: 100%;
-    position: relative;
-    transition: all 0.3s ease;
-    overflow: hidden;
-}
-
-.sidebar-collapsed {
-    max-width: 60px;
-    min-width: 60px;
-    transition: all 0.3s ease;
-}
-
-.mobile-sidebar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    max-width: 280px !important;
-    min-width: 280px !important;
-    transform: translateX(-100%);
-    transition: transform 0.3s ease;
-    z-index: 1000;
-}
-
-.mobile-sidebar-open {
-    transform: translateX(0) !important;
-}
-
-.sidebar-collapse-btn-container {
-    margin: 8px;
-    margin-bottom: 0px;
-    z-index: 10;
-}
-
-.sidebar-collapse-btn {
-    opacity: 0.6;
-    max-height: none;
-    overflow-y: visible;
-    padding: 0;
-}
-
-.new-chat-btn {
-    justify-content: flex-start;
-    background-color: transparent !important;
-    border-radius: 20px;
-    padding: 8px 16px !important;
-}
-
-.conversation-item {
-    /* margin-bottom: 4px; */
-    border-radius: 20px !important;
-    height: auto !important;
-    /* min-height: 56px; */
-    padding: 0px 16px !important;
-    position: relative;
-}
-
-.conversation-item:hover {
-    background-color: rgba(var(--v-theme-primary), 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;
-}
-
-@media (max-width: 768px) {
-    .conversation-actions {
-        opacity: 1 !important;
-        visibility: visible !important;
-    }
-}
-
-.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;
-}
-
-.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;
-}
-
-.sidebar-spacer {
-    flex-grow: 1;
-}
-
-.sidebar-footer {
-    padding: 8px 8px;
-    padding-bottom: 16px;
-    flex-shrink: 0;
-}
-
-.settings-btn {
-    opacity: 0.6;
-    justify-content: flex-start;
-    padding: 8px 16px !important;
-    border-radius: 20px !important;
-}
-
-.settings-btn:hover {
-    opacity: 1;
-}
-
-.settings-btn-collapsed {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-}
-
-.chat-settings-group-trigger :deep(.v-list-item__append) {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-}
-
-.chat-settings-group-current {
-    font-size: 14px;
-    line-height: 1;
-    opacity: 0.8;
-}
-
-.chat-settings-transport-current {
-    font-size: 12px;
-}
-
-.chat-settings-group-arrow {
-    opacity: 0.7;
-}
-
-.language-flag {
-    font-size: 16px;
-    margin-right: 8px;
-}
-
-.new-chat-row {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-}
-
-.new-chat-row .new-chat-btn {
-    flex: 1;
-    min-width: 0;
-}
-
-.batch-action-bar {
-    display: flex;
-    align-items: center;
-    padding: 4px 12px;
-    gap: 4px;
-    flex-shrink: 0;
-}
-
-.batch-selected-count {
-    font-size: 12px;
-    opacity: 0.7;
-    white-space: nowrap;
-}
-
-.batch-checkbox {
-    flex: none;
-    transition: opacity 0.2s ease, transform 0.2s ease;
-}
-
-.batch-checkbox-slot {
-    width: 0;
-    opacity: 0;
-    overflow: hidden;
-    pointer-events: none;
-    transform: translateX(-8px);
-    transition: width 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
-}
-
-.batch-checkbox-slot--active {
-    width: 28px;
-    opacity: 1;
-    pointer-events: auto;
-    transform: translateX(0);
-}
-</style>
diff --git a/dashboard/src/components/chat/MessageList.vue b/dashboard/src/components/chat/MessageListDEPRECATED.vue
similarity index 100%
rename from dashboard/src/components/chat/MessageList.vue
rename to dashboard/src/components/chat/MessageListDEPRECATED.vue
diff --git a/dashboard/src/components/chat/ProjectList.vue b/dashboard/src/components/chat/ProjectList.vue
index 34491c529..5c14d8745 100644
--- a/dashboard/src/components/chat/ProjectList.vue
+++ b/dashboard/src/components/chat/ProjectList.vue
@@ -1,162 +1,228 @@
 <template>
-    <div>
-        <!-- 项目按钮 -->
-        <div style="padding: 0 8px 0px 8px; opacity: 0.6;">
-            <v-btn block variant="text" class="project-btn" @click="toggleExpanded" prepend-icon="mdi-folder-outline">
-                {{ tm('project.title') }}
-                <template v-slot:append>
-                    <v-icon size="small">{{ expanded ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
-                </template>
-            </v-btn>
-        </div>
-
-        <!-- 项目列表 -->
-        <v-expand-transition>
-            <div v-show="expanded" style="padding: 0 8px;">
-                <v-list density="compact" nav class="project-list" style="background-color: transparent;">
-                    <v-list-item @click="$emit('createProject')" class="create-project-item" rounded="lg">
-                        <template v-slot:prepend>
-                            <span class="project-emoji"><v-icon size="small">mdi-plus</v-icon></span>
-                        </template>
-                        <v-list-item-title style="font-size: 13px;">{{ tm('project.create') }}</v-list-item-title>
-                    </v-list-item>
-                    <v-list-item v-for="project in projects" :key="project.project_id"
-                        @click="$emit('selectProject', project.project_id)" rounded="lg" class="project-item">
-                        <template v-slot:prepend>
-                            <span class="project-emoji">{{ project.emoji || '📁' }}</span>
-                        </template>
-                        <v-list-item-title class="project-title">{{ project.title }}</v-list-item-title>
-                        <template v-slot:append>
-                            <div class="project-actions">
-                                <v-btn icon="mdi-pencil" size="x-small" variant="text" class="edit-project-btn"
-                                    @click.stop="$emit('editProject', project)" />
-                                <v-btn icon="mdi-delete" size="x-small" variant="text" class="delete-project-btn"
-                                    color="error" @click.stop="handleDeleteProject(project)" />
-                            </div>
-                        </template>
-                    </v-list-item>
-                </v-list>
-            </div>
-        </v-expand-transition>
+  <div class="project-list-shell">
+    <!-- 项目按钮 -->
+    <div class="project-button-wrap">
+      <v-btn block variant="text" class="project-btn" @click="toggleExpanded">
+        <v-icon size="20" class="project-action-icon mr-2">
+          mdi-folder-outline
+        </v-icon>
+        <span class="project-btn-title">{{ tm("project.title") }}</span>
+        <v-spacer />
+        <v-icon size="18" class="project-toggle-icon">
+          {{ expanded ? "mdi-chevron-up" : "mdi-chevron-down" }}
+        </v-icon>
+      </v-btn>
     </div>
+
+    <!-- 项目列表 -->
+    <v-expand-transition>
+      <div v-show="expanded" class="project-list-wrap">
+        <button
+          class="project-row create-project-item"
+          type="button"
+          @click="$emit('createProject')"
+        >
+          <span class="project-emoji">
+            <v-icon size="18">mdi-plus</v-icon>
+          </span>
+          <span class="project-title">{{ tm("project.create") }}</span>
+        </button>
+
+        <button
+          v-for="project in projects"
+          :key="project.project_id"
+          class="project-row project-item"
+          :class="{ active: selectedProjectId === project.project_id }"
+          type="button"
+          @click="$emit('selectProject', project.project_id)"
+        >
+          <span class="project-emoji">{{ project.emoji || "📁" }}</span>
+          <span class="project-title">{{ project.title }}</span>
+          <span class="project-actions">
+            <v-btn
+              icon="mdi-pencil"
+              size="x-small"
+              variant="text"
+              class="edit-project-btn"
+              @click.stop="$emit('editProject', project)"
+            />
+            <v-btn
+              icon="mdi-delete"
+              size="x-small"
+              variant="text"
+              class="delete-project-btn"
+              color="error"
+              @click.stop="handleDeleteProject(project)"
+            />
+          </span>
+        </button>
+      </div>
+    </v-expand-transition>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useModuleI18n } from '@/i18n/composables';
-import { askForConfirmation, useConfirmDialog } from '@/utils/confirmDialog';
+import { ref } from "vue";
+import { useModuleI18n } from "@/i18n/composables";
+import { askForConfirmation, useConfirmDialog } from "@/utils/confirmDialog";
 
 export interface Project {
-    project_id: string;
-    title: string;
-    emoji?: string;
-    description?: string;
-    created_at: string;
-    updated_at: string;
+  project_id: string;
+  title: string;
+  emoji?: string;
+  description?: string;
+  created_at: string;
+  updated_at: string;
 }
 
 interface Props {
-    projects: Project[];
-    initialExpanded?: boolean;
+  projects: Project[];
+  initialExpanded?: boolean;
+  selectedProjectId?: string | null;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    initialExpanded: false
+  initialExpanded: false,
+  selectedProjectId: null,
 });
 
 const emit = defineEmits<{
-    selectProject: [projectId: string];
-    createProject: [];
-    editProject: [project: Project];
-    deleteProject: [projectId: string];
+  selectProject: [projectId: string];
+  createProject: [];
+  editProject: [project: Project];
+  deleteProject: [projectId: string];
 }>();
 
-const { tm } = useModuleI18n('features/chat');
+const { tm } = useModuleI18n("features/chat");
 
 const confirmDialog = useConfirmDialog();
 
 const expanded = ref(props.initialExpanded);
 
 // 从 localStorage 读取项目展开状态
-const savedProjectsExpandedState = localStorage.getItem('projectsExpanded');
+const savedProjectsExpandedState = localStorage.getItem("projectsExpanded");
 if (savedProjectsExpandedState !== null) {
-    expanded.value = JSON.parse(savedProjectsExpandedState);
+  expanded.value = JSON.parse(savedProjectsExpandedState);
 }
 
 function toggleExpanded() {
-    expanded.value = !expanded.value;
-    localStorage.setItem('projectsExpanded', JSON.stringify(expanded.value));
+  expanded.value = !expanded.value;
+  localStorage.setItem("projectsExpanded", JSON.stringify(expanded.value));
 }
 
 async function handleDeleteProject(project: Project) {
-    const message = tm('project.confirmDelete', { title: project.title });
-    if (await askForConfirmation(message, confirmDialog)) {
-        emit('deleteProject', project.project_id);
-    }
+  const message = tm("project.confirmDelete", { title: project.title });
+  if (await askForConfirmation(message, confirmDialog)) {
+    emit("deleteProject", project.project_id);
+  }
 }
 </script>
 
 <style scoped>
+.project-list-shell {
+  margin-top: 6px;
+}
+
+.project-button-wrap {
+  opacity: 0.6;
+}
+
 .project-btn {
-    justify-content: flex-start;
-    background-color: transparent !important;
-    border-radius: 20px;
-    padding: 8px 16px !important;
-    text-transform: none;
+  justify-content: flex-start;
+  background-color: transparent !important;
+  border-radius: 8px;
+  padding: 8px 12px !important;
+  text-transform: none;
+  font-weight: 500;
 }
 
-.project-item {
-    border-radius: 16px !important;
-    padding: 4px 12px !important;
-    margin-bottom: 2px;
+.project-action-icon {
+  color: currentcolor;
 }
 
-.project-item:hover {
-    background-color: rgba(103, 58, 183, 0.05);
+.project-btn-title {
+  min-width: 0;
+}
+
+.project-toggle-icon {
+  margin-left: 10px;
+}
+
+.project-list-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 8px;
+}
+
+.project-row {
+  width: 100%;
+  min-height: 38px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.project-row:hover,
+.project-row.active {
+  background: var(--chat-session-active-bg);
 }
 
 .project-item:hover .project-actions {
-    opacity: 1;
-    visibility: visible;
+  opacity: 1;
+  visibility: visible;
 }
 
 .project-emoji {
-    font-size: 16px;
-    margin-right: 6px;
+  width: 20px;
+  flex: 0 0 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
 }
 
 .project-title {
-    font-size: 13px;
-    font-weight: 500;
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  font-weight: 500;
 }
 
 .project-actions {
-    display: flex;
-    gap: 2px;
-    opacity: 0;
-    visibility: hidden;
-    transition: all 0.2s ease;
+  display: flex;
+  gap: 2px;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.2s ease;
 }
 
 .edit-project-btn,
 .delete-project-btn {
-    opacity: 0.7;
-    transition: opacity 0.2s ease;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
 }
 
 .edit-project-btn:hover,
 .delete-project-btn:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 .create-project-item {
-    border-radius: 16px !important;
-    padding: 4px 12px !important;
-    opacity: 0.7;
+  opacity: 0.7;
 }
 
 .create-project-item:hover {
-    background-color: rgba(103, 58, 183, 0.08);
-    opacity: 1;
+  opacity: 1;
 }
 </style>
diff --git a/dashboard/src/components/chat/ProjectView.vue b/dashboard/src/components/chat/ProjectView.vue
index 2358b34af..7c87f3539 100644
--- a/dashboard/src/components/chat/ProjectView.vue
+++ b/dashboard/src/components/chat/ProjectView.vue
@@ -1,189 +1,214 @@
 <template>
-    <div class="project-sessions-container fade-in">
-        <div class="project-header">
-            <div class="project-header-info">
-                <span class="project-header-emoji">{{ project?.emoji || '📁' }}</span>
-                <h2 class="project-header-title">{{ project?.title }}</h2>
-            </div>
-            <p class="project-header-description" v-if="project?.description">
-                {{ project.description }}
-            </p>
-        </div>
-
-        <div class="project-input-slot">
-            <slot></slot>
-        </div>
-
-        <v-card flat class="project-sessions-list">
-            <v-list v-if="sessions.length > 0">
-                <v-list-item v-for="session in sessions" :key="session.session_id"
-                    @click="$emit('selectSession', session.session_id)" class="project-session-item" rounded="lg">
-                    <v-list-item-title>
-                        {{ session.display_name || tm('conversation.newConversation') }}
-                    </v-list-item-title>
-                    <v-list-item-subtitle>
-                        {{ formatDate(session.updated_at) }}
-                    </v-list-item-subtitle>
-                    <template v-slot:append>
-                        <div class="session-actions">
-                            <v-btn icon="mdi-pencil" size="x-small" variant="text"
-                                class="edit-session-btn"
-                                @click.stop="$emit('editSessionTitle', session.session_id, session.display_name ?? '')" />
-                            <v-btn icon="mdi-delete" size="x-small" variant="text"
-                                class="delete-session-btn" color="error"
-                                @click.stop="handleDeleteSession(session)" />
-                        </div>
-                    </template>
-                </v-list-item>
-            </v-list>
-            <div v-else class="no-sessions-in-project">
-                <v-icon icon="mdi-message-off-outline" size="large" color="grey-lighten-1"></v-icon>
-                <p>{{ tm('project.noSessions') }}</p>
-            </div>
-        </v-card>
+  <div class="project-sessions-container fade-in">
+    <div class="project-header">
+      <div class="project-header-info">
+        <span class="project-header-emoji">{{ project?.emoji || "📁" }}</span>
+        <h2 class="project-header-title">{{ project?.title }}</h2>
+      </div>
+      <p class="project-header-description" v-if="project?.description">
+        {{ project.description }}
+      </p>
     </div>
+
+    <div class="project-input-slot">
+      <slot></slot>
+    </div>
+
+    <v-card flat class="project-sessions-list">
+      <v-list v-if="sessions.length > 0">
+        <v-list-item
+          v-for="session in sessions"
+          :key="session.session_id"
+          @click="$emit('selectSession', session.session_id)"
+          class="project-session-item"
+          rounded="lg"
+        >
+          <v-list-item-title>
+            {{ session.display_name || tm("conversation.newConversation") }}
+          </v-list-item-title>
+          <v-list-item-subtitle>
+            {{ formatDate(session.updated_at) }}
+          </v-list-item-subtitle>
+          <template v-slot:append>
+            <div class="session-actions">
+              <v-btn
+                icon="mdi-pencil"
+                size="x-small"
+                variant="text"
+                class="edit-session-btn"
+                @click.stop="
+                  $emit(
+                    'editSessionTitle',
+                    session.session_id,
+                    session.display_name ?? '',
+                  )
+                "
+              />
+              <v-btn
+                icon="mdi-delete"
+                size="x-small"
+                variant="text"
+                class="delete-session-btn"
+                color="error"
+                @click.stop="handleDeleteSession(session)"
+              />
+            </div>
+          </template>
+        </v-list-item>
+      </v-list>
+      <div v-else class="no-sessions-in-project">
+        <v-icon
+          icon="mdi-message-outline"
+          size="large"
+          color="grey-lighten-1"
+        ></v-icon>
+        <p>{{ tm("project.noSessions") }}</p>
+      </div>
+    </v-card>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { useModuleI18n } from '@/i18n/composables';
-import type { Project } from '@/components/chat/ProjectList.vue';
-import { askForConfirmation, useConfirmDialog } from '@/utils/confirmDialog';
+import { useModuleI18n } from "@/i18n/composables";
+import type { Project } from "@/components/chat/ProjectList.vue";
+import { askForConfirmation, useConfirmDialog } from "@/utils/confirmDialog";
 
 interface Session {
-    session_id: string;
-    display_name?: string;
-    updated_at: string;
+  session_id: string;
+  display_name?: string | null;
+  updated_at: string;
 }
 
 interface Props {
-    project?: Project | null;
-    sessions: Session[];
+  project?: Project | null;
+  sessions: Session[];
 }
 
 defineProps<Props>();
 
 const emit = defineEmits<{
-    selectSession: [sessionId: string];
-    editSessionTitle: [sessionId: string, title: string];
-    deleteSession: [sessionId: string];
+  selectSession: [sessionId: string];
+  editSessionTitle: [sessionId: string, title: string];
+  deleteSession: [sessionId: string];
 }>();
 
-const { tm } = useModuleI18n('features/chat');
+const { tm } = useModuleI18n("features/chat");
 
 const confirmDialog = useConfirmDialog();
 
 function formatDate(dateString: string): string {
-    return new Date(dateString).toLocaleString();
+  return new Date(dateString).toLocaleString();
 }
 
 async function handleDeleteSession(session: Session) {
-    const sessionTitle = session.display_name || tm('conversation.newConversation');
-    const message = tm('conversation.confirmDelete', { name: sessionTitle });
-    if (await askForConfirmation(message, confirmDialog)) {
-        emit('deleteSession', session.session_id);
-    }
+  const sessionTitle =
+    session.display_name || tm("conversation.newConversation");
+  const message = tm("conversation.confirmDelete", { name: sessionTitle });
+  if (await askForConfirmation(message, confirmDialog)) {
+    emit("deleteSession", session.session_id);
+  }
 }
 </script>
 
 <style scoped>
 .project-sessions-container {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 32px;
-    overflow-y: auto;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 32px;
+  overflow-y: auto;
 }
 
 .project-header {
-    text-align: center;
-    margin-bottom: 32px;
-    max-width: 600px;
+  text-align: center;
+  margin-bottom: 32px;
+  max-width: 600px;
 }
 
 .project-header-info {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 12px;
 }
 
 .project-header-emoji {
-    font-size: 48px;
+  font-size: 48px;
 }
 
 .project-header-title {
-    font-size: 32px;
-    font-weight: 600;
+  font-size: 32px;
+  font-weight: 600;
 }
 
 .project-header-description {
-    font-size: 14px;
-    color: var(--v-theme-secondaryText);
-    margin: 0;
+  font-size: 14px;
+  color: var(--v-theme-secondaryText);
+  margin: 0;
 }
 
 .project-input-slot {
-    width: 100%;
-    max-width: 800px;
-    margin-bottom: 24px;
+  width: 100%;
+  max-width: 800px;
+  margin-bottom: 24px;
 }
 
 .project-sessions-list {
-    width: 100%;
-    max-width: 680px;
-    background-color: transparent !important;
+  width: 100%;
+  max-width: 680px;
+  background-color: transparent !important;
 }
 
 .project-session-item {
-    margin-bottom: 8px;
-    border-radius: 12px !important;
-    cursor: pointer;
+  margin-bottom: 8px;
+  border-radius: 12px !important;
+  cursor: pointer;
 }
 
 .project-session-item:hover {
-    background-color: rgba(103, 58, 183, 0.05);
+  background-color: rgba(103, 58, 183, 0.05);
 }
 
 .project-session-item:hover .session-actions {
-    opacity: 1;
-    visibility: visible;
+  opacity: 1;
+  visibility: visible;
 }
 
 .session-actions {
-    display: flex;
-    gap: 2px;
-    opacity: 1;
+  display: flex;
+  gap: 2px;
+  opacity: 1;
 }
 
 .no-sessions-in-project {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 48px;
-    opacity: 0.6;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px;
+  opacity: 0.6;
 }
 
 .no-sessions-in-project p {
-    margin-top: 12px;
-    font-size: 14px;
+  margin-top: 12px;
+  font-size: 14px;
 }
 
 .fade-in {
-    animation: fadeIn 0.3s ease-in-out;
+  animation: fadeIn 0.3s ease-in-out;
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
 
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 </style>
diff --git a/dashboard/src/components/chat/StandaloneChat.vue b/dashboard/src/components/chat/StandaloneChat.vue
index 4dca255c5..aa69ed5ba 100644
--- a/dashboard/src/components/chat/StandaloneChat.vue
+++ b/dashboard/src/components/chat/StandaloneChat.vue
@@ -1,356 +1,616 @@
 <template>
-    <v-card class="standalone-chat-card" elevation="0" rounded="0">
-        <v-card-text class="standalone-chat-container">
-            <div class="chat-layout">
-                <!-- 聊天内容区域 -->
-                <div class="chat-content-panel">
-                    <MessageList v-if="messages && messages.length > 0" :messages="messages" :isDark="isDark"
-                        :isStreaming="isStreaming || isConvRunning" @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>
-                        <p class="text-caption text-medium-emphasis mt-2">
-                            测试配置: {{ configId || 'default' }}
-                        </p>
-                    </div>
+  <div class="standalone-chat">
+    <section ref="messagesContainer" class="standalone-messages">
+      <div v-if="initializing" class="standalone-state">
+        <v-progress-circular indeterminate size="28" width="3" />
+      </div>
 
-                    <!-- 输入区域 -->
-                    <ChatInput
-                        v-model:prompt="prompt"
-                        :stagedImagesUrl="stagedImagesUrl"
-                        :stagedAudioUrl="stagedAudioUrl"
-                        :disabled="false"
-                        :is-running="isStreaming || isConvRunning"
-                        :enableStreaming="enableStreaming"
-                        :isRecording="isRecording"
-                        :session-id="currSessionId || null"
-                        :current-session="getCurrentSession"
-                        :config-id="configId"
-                        @send="handleSendMessage"
-                        @stop="handleStopMessage"
-                        @toggleStreaming="toggleStreaming"
-                        @removeImage="removeImage"
-                        @removeAudio="removeAudio"
-                        @startRecording="handleStartRecording"
-                        @stopRecording="handleStopRecording"
-                        @pasteImage="handlePaste"
-                        @fileSelect="handleFileSelect"
-                        @openLiveMode=""
-                        ref="chatInputRef"
-                    />
-                </div>
+      <div v-else-if="!activeMessages.length" class="standalone-state">
+        <div class="welcome-title">{{ tm("welcome.title") }}</div>
+      </div>
+
+      <div v-else class="message-list">
+        <div
+          v-for="(msg, msgIndex) in activeMessages"
+          :key="msg.id || `${msgIndex}-${msg.created_at || ''}`"
+          class="message-row"
+          :class="isUserMessage(msg) ? 'from-user' : 'from-bot'"
+        >
+          <div class="message-stack">
+            <div
+              class="message-bubble"
+              :class="{ user: isUserMessage(msg), bot: !isUserMessage(msg) }"
+            >
+              <div v-if="messageContent(msg).isLoading" class="loading-message">
+                {{ tm("message.loading") }}
+              </div>
+
+              <template v-else>
+                <ReasoningBlock
+                  v-if="messageContent(msg).reasoning"
+                  :reasoning="messageContent(msg).reasoning || ''"
+                  :is-dark="isDark"
+                  :initial-expanded="false"
+                  :is-streaming="isMessageStreaming(msg, msgIndex)"
+                  :has-non-reasoning-content="hasNonReasoningContent(msg)"
+                />
+
+                <template
+                  v-for="(part, partIndex) in messageParts(msg)"
+                  :key="`${msgIndex}-${partIndex}-${part.type}`"
+                >
+                  <div
+                    v-if="part.type === 'plain' && isUserMessage(msg)"
+                    class="plain-content"
+                  >
+                    {{ part.text || "" }}
+                  </div>
+
+                  <MarkdownMessagePart
+                    v-else-if="part.type === 'plain'"
+                    :content="part.text || ''"
+                    :refs="messageRefs(msg)"
+                    :is-dark="isDark"
+                    :custom-html-tags="customMarkdownTags"
+                  />
+
+                  <button
+                    v-else-if="part.type === 'image'"
+                    class="image-part"
+                    type="button"
+                    @click="openImage(partUrl(part))"
+                  >
+                    <img :src="partUrl(part)" :alt="part.filename || 'image'" />
+                  </button>
+
+                  <audio
+                    v-else-if="part.type === 'record'"
+                    class="audio-part"
+                    controls
+                    :src="partUrl(part)"
+                  />
+
+                  <video
+                    v-else-if="part.type === 'video'"
+                    class="video-part"
+                    controls
+                    :src="partUrl(part)"
+                  />
+
+                  <div v-else-if="part.type === 'file'" class="file-part">
+                    <v-icon size="20">mdi-file-document-outline</v-icon>
+                    <span>{{ part.filename || "file" }}</span>
+                  </div>
+
+                  <div
+                    v-else-if="part.type === 'tool_call'"
+                    class="tool-call-block"
+                  >
+                    <template
+                      v-for="tool in part.tool_calls || []"
+                      :key="tool.id || tool.name"
+                    >
+                      <ToolCallItem
+                        v-if="isIPythonToolCall(tool)"
+                        :is-dark="isDark"
+                      >
+                        <template #label>
+                          <v-icon size="16">mdi-code-braces</v-icon>
+                          <span>{{ tool.name || "python" }}</span>
+                          <span class="tool-call-inline-status">
+                            {{ toolCallStatusText(tool) }}
+                          </span>
+                        </template>
+                        <template #details>
+                          <IPythonToolBlock
+                            :tool-call="normalizeToolCall(tool)"
+                            :is-dark="isDark"
+                            :show-header="false"
+                            :force-expanded="true"
+                          />
+                        </template>
+                      </ToolCallItem>
+                      <ToolCallCard
+                        v-else
+                        :tool-call="normalizeToolCall(tool)"
+                        :is-dark="isDark"
+                      />
+                    </template>
+                  </div>
+
+                  <pre v-else class="unknown-part">{{ formatJson(part) }}</pre>
+                </template>
+              </template>
             </div>
-        </v-card-text>
-    </v-card>
+          </div>
+        </div>
+      </div>
+    </section>
 
-    <!-- 图片预览对话框 -->
-    <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>
+    <section class="standalone-composer">
+      <ChatInput
+        ref="inputRef"
+        v-model:prompt="draft"
+        :staged-images-url="stagedImagesUrl"
+        :staged-audio-url="stagedAudioUrl"
+        :staged-files="stagedNonImageFiles"
+        :disabled="sending || initializing"
+        :enable-streaming="enableStreaming"
+        :is-recording="false"
+        :is-running="Boolean(currSessionId && isSessionRunning(currSessionId))"
+        :session-id="currSessionId || null"
+        :current-session="currentSession"
+        :config-id="configId || 'default'"
+        send-shortcut="enter"
+        @send="sendCurrentMessage"
+        @stop="stopCurrentSession"
+        @toggle-streaming="enableStreaming = !enableStreaming"
+        @remove-image="removeImage"
+        @remove-audio="removeAudio"
+        @remove-file="removeFile"
+        @paste-image="handlePaste"
+        @file-select="handleFilesSelected"
+      />
+    </section>
+
+    <v-overlay
+      v-model="imagePreview.visible"
+      class="image-preview-overlay"
+      scrim="rgba(0, 0, 0, 0.86)"
+      @click="closeImage"
+    >
+      <img class="preview-image" :src="imagePreview.url" alt="preview" />
+    </v-overlay>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
-import axios from 'axios';
-import { useCustomizerStore } from '@/stores/customizer';
-import { useI18n, useModuleI18n } from '@/i18n/composables';
-import { useTheme } from 'vuetify';
-import MessageList from '@/components/chat/MessageList.vue';
-import ChatInput from '@/components/chat/ChatInput.vue';
-import { useMessages } from '@/composables/useMessages';
-import { useMediaHandling } from '@/composables/useMediaHandling';
-import { useRecording } from '@/composables/useRecording';
-import { useToast } from '@/utils/toast';
-import { buildWebchatUmoDetails } from '@/utils/chatConfigBinding';
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+} from "vue";
+import axios from "axios";
+import { MarkdownCodeBlockNode, setCustomComponents } from "markstream-vue";
+import "markstream-vue/index.css";
+import ChatInput from "@/components/chat/ChatInput.vue";
+import IPythonToolBlock from "@/components/chat/message_list_comps/IPythonToolBlock.vue";
+import MarkdownMessagePart from "@/components/chat/message_list_comps/MarkdownMessagePart.vue";
+import ReasoningBlock from "@/components/chat/message_list_comps/ReasoningBlock.vue";
+import RefNode from "@/components/chat/message_list_comps/RefNode.vue";
+import ToolCallCard from "@/components/chat/message_list_comps/ToolCallCard.vue";
+import ToolCallItem from "@/components/chat/message_list_comps/ToolCallItem.vue";
+import { useMediaHandling } from "@/composables/useMediaHandling";
+import {
+  useMessages,
+  type ChatRecord,
+  type MessagePart,
+  type TransportMode,
+} from "@/composables/useMessages";
+import type { Session } from "@/composables/useSessions";
+import { useModuleI18n } from "@/i18n/composables";
+import { useCustomizerStore } from "@/stores/customizer";
+import { buildWebchatUmoDetails } from "@/utils/chatConfigBinding";
 
-interface Props {
-    configId?: string | null;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    configId: null
+const props = withDefaults(defineProps<{ configId?: string | null }>(), {
+  configId: "default",
 });
 
-const { t } = useI18n();
-const { error: showError } = useToast();
+setCustomComponents("chat-message", {
+  ref: RefNode,
+  code_block: MarkdownCodeBlockNode,
+});
 
+const { tm } = useModuleI18n("features/chat");
+const customizer = useCustomizerStore();
+const currSessionId = ref("");
+const currentSession = ref<Session | null>(null);
+const draft = ref("");
+const initializing = ref(false);
+const enableStreaming = ref(true);
+const shouldStickToBottom = ref(true);
+const messagesContainer = ref<HTMLElement | null>(null);
+const inputRef = ref<InstanceType<typeof ChatInput> | null>(null);
+const imagePreview = reactive({ visible: false, url: "" });
 
-// UI 状态
-const imagePreviewDialog = ref(false);
-const previewImageUrl = ref('');
-
-// 会话管理（不使用 useSessions 避免路由跳转）
-const currSessionId = ref('');
-const getCurrentSession = computed(() => null); // 独立测试模式不需要会话信息
-
-async function bindConfigToSession(sessionId: string) {
-    const confId = (props.configId || '').trim();
-    if (!confId || confId === 'default') {
-        return;
-    }
-
-    const umoDetails = buildWebchatUmoDetails(sessionId, false);
-
-    await axios.post('/api/config/umo_abconf_route/update', {
-        umo: umoDetails.umo,
-        conf_id: confId
-    });
-}
-
-async function newSession() {
-    try {
-        const response = await axios.get('/api/chat/new_session');
-        const sessionId = response.data.data.session_id;
-
-        try {
-            await bindConfigToSession(sessionId);
-        } catch (err) {
-            console.error('Failed to bind config to session', err);
-        }
-
-        currSessionId.value = sessionId;
-
-        return sessionId;
-    } catch (err) {
-        console.error(err);
-        throw err;
-    }
-}
-
-function updateSessionTitle(sessionId: string, title: string) {
-    // 独立模式不需要更新会话标题
-}
-
-function getSessions() {
-    // 独立模式不需要加载会话列表
-}
+const isDark = computed(() => customizer.uiTheme === "PurpleThemeDark");
+const customMarkdownTags = ["ref"];
 
 const {
-    stagedImagesUrl,
-    stagedAudioUrl,
-    stagedFiles,
-    getMediaFile,
-    processAndUploadImage,
-    handlePaste,
-    removeImage,
-    removeAudio,
-    clearStaged,
-    cleanupMediaCache
+  stagedFiles,
+  stagedImagesUrl,
+  stagedAudioUrl,
+  stagedNonImageFiles,
+  processAndUploadImage,
+  processAndUploadFile,
+  handlePaste,
+  removeImage,
+  removeAudio,
+  removeFile,
+  clearStaged,
+  cleanupMediaCache,
 } = useMediaHandling();
 
-const { isRecording, startRecording: startRec, stopRecording: stopRec } = useRecording();
-
 const {
-    messages,
-    isStreaming,
-    isConvRunning,
-    enableStreaming,
-    getSessionMessages: getSessionMsg,
-    sendMessage: sendMsg,
-    stopMessage: stopMsg,
-    toggleStreaming
-} = useMessages(currSessionId, getMediaFile, updateSessionTitle, getSessions);
-
-// 组件引用
-const messageList = ref<InstanceType<typeof MessageList> | null>(null);
-const chatInputRef = ref<InstanceType<typeof ChatInput> | null>(null);
-
-// 输入状态
-const prompt = ref('');
-
-const isDark = computed(() => useCustomizerStore().uiTheme === 'PurpleThemeDark');
-
-function openImagePreview(imageUrl: string) {
-    previewImageUrl.value = imageUrl;
-    imagePreviewDialog.value = true;
-}
-
-async function handleStartRecording() {
-    await startRec();
-}
-
-async function handleStopRecording() {
-    const audioFilename = await stopRec();
-    stagedAudioUrl.value = audioFilename;
-}
-
-async function handleFileSelect(files: FileList) {
-    for (const file of files) {
-        await processAndUploadImage(file);
+  sending,
+  activeMessages,
+  isSessionRunning,
+  isMessageStreaming,
+  isUserMessage,
+  messageContent,
+  messageParts,
+  createLocalExchange,
+  sendMessageStream,
+  stopSession,
+} = useMessages({
+  currentSessionId: currSessionId,
+  onStreamUpdate: () => {
+    if (shouldStickToBottom.value) {
+      scrollToBottom();
     }
-}
+  },
+});
 
-async function handleSendMessage() {
-    if (!prompt.value.trim() && stagedFiles.value.length === 0 && !stagedAudioUrl.value) {
-        return;
-    }
-
-    try {
-        if (!currSessionId.value) {
-            await newSession();
-        }
-
-        const promptToSend = prompt.value.trim();
-        const audioNameToSend = stagedAudioUrl.value;
-        const filesToSend = stagedFiles.value.map(f => ({
-            attachment_id: f.attachment_id,
-            url: f.url,
-            original_name: f.original_name,
-            type: f.type
-        }));
-
-        // 清空输入和附件
-        prompt.value = '';
-        clearStaged();
-
-        // 获取选择的提供商和模型
-        const selection = chatInputRef.value?.getCurrentSelection();
-        const selectedProviderId = selection?.providerId || '';
-        const selectedModelName = selection?.modelName || '';
-
-        await sendMsg(
-            promptToSend,
-            filesToSend,
-            audioNameToSend,
-            selectedProviderId,
-            selectedModelName
-        );
-
-        // 滚动到底部
-        nextTick(() => {
-            messageList.value?.scrollToBottom();
-        });
-    } catch (err) {
-        console.error('Failed to send message:', err);
-        showError(t('features.chat.errors.sendMessageFailed'));
-        // 恢复输入内容，让用户可以重试
-        // 注意：附件已经上传到服务器，所以不恢复附件
-    }
-}
-
-async function handleStopMessage() {
-    await stopMsg();
-}
+const transportMode = computed<TransportMode>(() =>
+  (localStorage.getItem("chat.transportMode") as TransportMode) === "websocket"
+    ? "websocket"
+    : "sse",
+);
 
 onMounted(async () => {
-    // 独立模式在挂载时创建新会话
-    try {
-        await newSession();
-    } catch (err) {
-        console.error('Failed to create initial session:', err);
-        showError(t('features.chat.errors.createSessionFailed'));
-    }
+  await ensureSession();
+  inputRef.value?.focusInput();
 });
 
 onBeforeUnmount(() => {
-    cleanupMediaCache();
+  cleanupMediaCache();
 });
+
+async function ensureSession() {
+  if (currSessionId.value) return currSessionId.value;
+  initializing.value = true;
+  try {
+    const response = await axios.get("/api/chat/new_session");
+    const session = response.data?.data as Session;
+    currSessionId.value = session.session_id;
+    currentSession.value = session;
+    await bindConfigToSession(session.session_id);
+    return session.session_id;
+  } finally {
+    initializing.value = false;
+  }
+}
+
+async function bindConfigToSession(sessionId: string) {
+  const confId = props.configId || "default";
+  const umo = buildWebchatUmoDetails(sessionId, false).umo;
+  await axios.post("/api/config/umo_abconf_route/update", {
+    umo,
+    conf_id: confId,
+  });
+}
+
+async function sendCurrentMessage() {
+  if (!draft.value.trim() && !stagedFiles.value.length) return;
+  const sessionId = await ensureSession();
+  const text = draft.value.trim();
+  const parts = buildOutgoingParts(text);
+  const messageId = crypto.randomUUID?.() || `${Date.now()}-${Math.random()}`;
+  const selection = inputRef.value?.getCurrentSelection();
+  const { botRecord } = createLocalExchange({ sessionId, messageId, parts });
+
+  draft.value = "";
+  clearStaged();
+  scrollToBottom();
+
+  sendMessageStream({
+    sessionId,
+    messageId,
+    parts,
+    transport: transportMode.value,
+    enableStreaming: enableStreaming.value,
+    selectedProvider: selection?.providerId || "",
+    selectedModel: selection?.modelName || "",
+    botRecord,
+  });
+}
+
+function buildOutgoingParts(text: string): MessagePart[] {
+  const parts: MessagePart[] = [];
+  if (text) {
+    parts.push({ type: "plain", text });
+  }
+  stagedFiles.value.forEach((file) => {
+    parts.push({
+      type: file.type,
+      attachment_id: file.attachment_id,
+      filename: file.filename,
+      embedded_url: file.url,
+    });
+  });
+  return parts;
+}
+
+function hasNonReasoningContent(message: ChatRecord) {
+  return messageParts(message).some((part) => {
+    if (part.type === "reply") return false;
+    if (part.type === "plain") return Boolean(String(part.text || "").trim());
+    return true;
+  });
+}
+
+async function stopCurrentSession() {
+  if (!currSessionId.value) return;
+  await stopSession(currSessionId.value);
+}
+
+async function handleFilesSelected(files: FileList) {
+  const selectedFiles = Array.from(files || []);
+  for (const file of selectedFiles) {
+    if (file.type.startsWith("image/")) {
+      await processAndUploadImage(file);
+    } else {
+      await processAndUploadFile(file);
+    }
+  }
+}
+
+function scrollToBottom() {
+  nextTick(() => {
+    const container = messagesContainer.value;
+    if (!container) return;
+    container.scrollTop = container.scrollHeight;
+    shouldStickToBottom.value = true;
+  });
+}
+
+function messageRefs(message: ChatRecord) {
+  const refs = messageContent(message).refs;
+  if (refs && typeof refs === "object" && Array.isArray(refs.used)) {
+    return refs as { used?: Array<Record<string, unknown>> };
+  }
+  return null;
+}
+
+function partUrl(part: MessagePart) {
+  if (part.embedded_url) return part.embedded_url;
+  if (part.embedded_file?.url) return part.embedded_file.url;
+  if (part.attachment_id)
+    return `/api/chat/get_attachment?attachment_id=${encodeURIComponent(
+      part.attachment_id,
+    )}`;
+  if (part.filename)
+    return `/api/chat/get_file?filename=${encodeURIComponent(part.filename)}`;
+  return "";
+}
+
+function normalizeToolCall(tool: Record<string, unknown>) {
+  const normalized = { ...tool };
+  normalized.args = parseJsonSafe(normalized.args || normalized.arguments);
+  normalized.result = parseJsonSafe(normalized.result);
+  if (!normalized.ts) normalized.ts = Date.now() / 1000;
+  if (normalized.result && typeof normalized.result === "object") {
+    normalized.result = JSON.stringify(normalized.result, null, 2);
+  }
+  return normalized;
+}
+
+function isIPythonToolCall(tool: Record<string, unknown>) {
+  const name = String(tool.name || "").toLowerCase();
+  return name.includes("python") || name.includes("ipython");
+}
+
+function toolCallStatusText(tool: Record<string, unknown>) {
+  if (tool.finished_ts) return tm("toolStatus.done");
+  return tm("toolStatus.running");
+}
+
+function formatJson(value: unknown) {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value ?? "");
+  }
+}
+
+function parseJsonSafe(value: unknown) {
+  if (typeof value !== "string") return value;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+
+function openImage(url: string) {
+  imagePreview.url = url;
+  imagePreview.visible = true;
+}
+
+function closeImage() {
+  imagePreview.visible = false;
+  imagePreview.url = "";
+}
 </script>
 
 <style scoped>
-/* 基础动画 */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+.standalone-chat {
+  --standalone-muted: rgba(var(--v-theme-on-surface), 0.62);
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: rgb(var(--v-theme-background));
 }
 
-.standalone-chat-card {
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    overflow: hidden;
+.standalone-messages {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 20px 22px 14px;
 }
 
-.standalone-chat-container {
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    padding: 0;
-    overflow: hidden;
-}
-
-.chat-layout {
-    height: 100%;
-    max-height: 100%;
-    display: flex;
-    overflow: hidden;
-}
-
-.chat-content-panel {
-    height: 100%;
-    max-height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-}
-
-.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;
-}
-
-.conversation-header-info h4 {
-    margin: 0;
-    font-weight: 500;
-}
-
-.conversation-header-actions {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-}
-
-.welcome-container {
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
+.standalone-state {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
 }
 
 .welcome-title {
-    font-size: 28px;
-    margin-bottom: 8px;
+  font-size: 24px;
+  font-weight: 700;
 }
 
-.bot-name {
-    font-weight: 700;
-    margin-left: 8px;
-    color: var(--v-theme-secondary);
+.message-list {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
 }
 
-.fade-in {
-    animation: fadeIn 0.3s ease-in-out;
+.message-row {
+  display: flex;
 }
 
-.preview-image-large {
-    max-width: 100%;
-    max-height: 70vh;
-    object-fit: contain;
+.message-row.from-user {
+  justify-content: flex-end;
+}
+
+.message-stack {
+  max-width: 88%;
+}
+
+.from-user .message-stack {
+  max-width: 70%;
+}
+
+.message-bubble {
+  border-radius: 8px;
+  padding: 10px 14px;
+  line-height: 1.65;
+  overflow-wrap: anywhere;
+}
+
+.message-bubble.user {
+  padding: 12px 18px;
+  border-radius: 1.5rem;
+  background: rgba(var(--v-theme-primary), 0.12);
+}
+
+.message-bubble.bot {
+  padding-left: 0;
+  background: transparent;
+}
+
+.plain-content {
+  white-space: pre-wrap;
+}
+
+.loading-message,
+.tool-call-inline-status {
+  color: var(--standalone-muted);
+}
+
+.image-part {
+  display: block;
+  border: 0;
+  padding: 0;
+  margin-top: 8px;
+  background: transparent;
+  cursor: zoom-in;
+}
+
+.image-part img {
+  max-width: min(360px, 100%);
+  max-height: 320px;
+  border-radius: 8px;
+  object-fit: contain;
+}
+
+.audio-part,
+.video-part {
+  display: block;
+  max-width: 100%;
+  margin-top: 8px;
+}
+
+.video-part {
+  max-height: 320px;
+  border-radius: 8px;
+}
+
+.file-part {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.tool-call-block {
+  margin: 8px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.message-bubble.bot
+  > .tool-call-block:first-child
+  :deep(.tool-call-card:first-child) {
+  margin-top: 0;
+}
+
+.unknown-part {
+  max-width: 100%;
+  overflow-x: auto;
+  border-radius: 8px;
+  padding: 10px;
+  background: rgba(var(--v-theme-on-surface), 0.06);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.standalone-composer {
+  position: relative;
+  z-index: 1;
+  padding-bottom: 10px;
+  background: rgb(var(--v-theme-background));
+}
+
+.standalone-composer::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  left: 0;
+  right: 0;
+  top: -32px;
+  height: 32px;
+  pointer-events: none;
+  background: linear-gradient(
+    to bottom,
+    rgba(var(--v-theme-background), 0),
+    rgb(var(--v-theme-background))
+  );
+}
+
+.standalone-composer :deep(.input-area) {
+  border-top: 0;
+}
+
+.image-preview-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.preview-image {
+  max-width: min(92vw, 1000px);
+  max-height: 88vh;
+  border-radius: 8px;
+  object-fit: contain;
 }
 </style>
diff --git a/dashboard/src/components/chat/WelcomeView.vue b/dashboard/src/components/chat/WelcomeView.vue
deleted file mode 100644
index 29565bd5c..000000000
--- a/dashboard/src/components/chat/WelcomeView.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-    <div class="welcome-container fade-in">
-        <div v-if="isLoading" class="loading-overlay-welcome">
-            <v-progress-circular
-                indeterminate
-                size="48"
-                width="4"
-                color="primary"
-            ></v-progress-circular>
-        </div>
-        <template v-else>
-            <div class="welcome-content">
-                <div class="welcome-title">
-                    <span class="bot-name-container">
-                        <span class="bot-name-text">
-                            Hello, I'm <span class="highlight-name">AstrBot</span>
-                        </span>
-                        <span class="bot-name-star">⭐</span>
-                    </span>
-                </div>
-            </div>
-            <div class="welcome-input">
-                <slot></slot>
-            </div>
-        </template>
-    </div>
-</template>
-
-<script setup lang="ts">
-interface Props {
-    isLoading?: boolean;
-}
-
-withDefaults(defineProps<Props>(), {
-    isLoading: false
-});
-</script>
-
-<style scoped>
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.welcome-container {
-    height: 100%;
-    width: 100%;
-    justify-content: center;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    position: relative;
-}
-
-.welcome-content {
-    padding: 24px 0px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-.welcome-title {
-    font-size: 28px;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.welcome-input {
-    width: 75%;
-}
-
-.loading-overlay-welcome {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.bot-name-container {
-    display: flex;
-    align-items: center;
-}
-
-.highlight-name {
-    color: var(--v-theme-secondary);
-    font-weight: 700;
-}
-
-.bot-name-text {
-    overflow: hidden;
-    white-space: nowrap;
-    width: 0;
-    opacity: 0;
-    animation: revealText 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
-    animation-delay: 0.2s;
-}
-
-.bot-name-star {
-    margin-left: 0;
-    display: inline-block;
-    transform-origin: center;
-    animation: rotateStar 1.2s cubic-bezier(0.34, 1, 0.64, 1) forwards;
-    animation-delay: 0.2s;
-    padding-left: 4px;
-}
-
-@keyframes revealText {
-    from {
-        width: 0;
-        opacity: 0;
-    }
-    to {
-        width: 9.2em;
-        opacity: 1;
-    }
-}
-
-@keyframes rotateStar {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.fade-in {
-    animation: fadeIn 0.3s ease-in-out;
-}
-
-@media (max-width: 600px) {
-    .welcome-input {
-        width: 100%;
-    }
-}
-</style>
diff --git a/dashboard/src/components/chat/message_list_comps/ActionRef.vue b/dashboard/src/components/chat/message_list_comps/ActionRef.vue
index ef096c2ed..d83443f3c 100644
--- a/dashboard/src/components/chat/message_list_comps/ActionRef.vue
+++ b/dashboard/src/components/chat/message_list_comps/ActionRef.vue
@@ -1,109 +1,121 @@
 <template>
-    <div v-if="refs && refs.used && refs.used.length > 0" class="refs-container" @click="handleClick">
-        <div class="refs-avatars">
-            <div v-for="(ref, refIdx) in refs.used.slice(0, 3)" :key="refIdx" class="ref-avatar"
-                :style="{ zIndex: 3 - refIdx }">
-                <img v-if="ref.favicon" :src="ref.favicon" class="ref-favicon"
-                    @error="(e) => e.target.style.display = 'none'" />
-                <span v-else class="ref-initial">{{ getRefInitial(ref.title) }}</span>
-            </div>
-            <span v-if="refs.used.length > 3" class="refs-more">
-                +{{ refs.used.length - 3 }}
-            </span>
-            <span class="ml-2" style="color: gray;">
-                {{ tm('refs.sources') }}
-            </span>
-        </div>
+  <div
+    v-if="refs && refs.used && refs.used.length > 0"
+    class="refs-container"
+    @click="handleClick"
+  >
+    <div class="refs-avatars">
+      <div
+        v-for="(ref, refIdx) in refs.used.slice(0, 3)"
+        :key="refIdx"
+        class="ref-avatar"
+        :style="{ zIndex: 3 - refIdx }"
+      >
+        <img
+          v-if="ref.favicon"
+          :src="ref.favicon"
+          class="ref-favicon"
+          @error="(e) => (e.target.style.display = 'none')"
+        />
+        <span v-else class="ref-initial">{{ getRefInitial(ref.title) }}</span>
+      </div>
+      <span v-if="refs.used.length > 3" class="refs-more">
+        +{{ refs.used.length - 3 }}
+      </span>
+      <span class="ml-2" style="color: gray">
+        {{ tm("refs.sources") }}
+      </span>
     </div>
+  </div>
 </template>
 
 <script>
-import { useModuleI18n } from '@/i18n/composables';
+import { useModuleI18n } from "@/i18n/composables";
 
 export default {
-    name: 'ActionRef',
-    props: {
-        refs: {
-            type: Object,
-            default: null
-        }
+  name: "ActionRef",
+  props: {
+    refs: {
+      type: Object,
+      default: null,
     },
-    emits: ['open-refs'],
-    setup() {
-        const { tm } = useModuleI18n('features/chat');
-        return { tm };
+  },
+  emits: ["open-refs"],
+  setup() {
+    const { tm } = useModuleI18n("features/chat");
+    return { tm };
+  },
+  methods: {
+    // Get first character of ref title for fallback display
+    getRefInitial(title) {
+      if (!title) return "?";
+      return title.charAt(0).toUpperCase();
     },
-    methods: {
-        // Get first character of ref title for fallback display
-        getRefInitial(title) {
-            if (!title) return '?';
-            return title.charAt(0).toUpperCase();
-        },
 
-        // Handle click to open refs sidebar
-        handleClick() {
-            this.$emit('open-refs', this.refs);
-        }
-    }
-}
+    // Handle click to open refs sidebar
+    handleClick() {
+      this.$emit("open-refs", this.refs);
+    },
+  },
+};
 </script>
 
 <style scoped>
 .refs-container {
-    display: flex;
-    align-items: center;
-    margin-left: 8px;
-    padding: 4px 8px;
-    border-radius: 12px;
-    cursor: pointer;
-    transition: background-color;
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+  padding: 4px 8px;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: background-color;
 }
 
 .refs-container:hover {
-    background-color: rgba(103, 58, 183, 0.08);
+  background-color: rgba(103, 58, 183, 0.08);
 }
 
 .refs-avatars {
-    display: flex;
-    align-items: center;
-    position: relative;
+  display: flex;
+  align-items: center;
+  position: relative;
 }
 
 .ref-avatar {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    opacity: 0.9;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  opacity: 0.9;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
 }
 
 .ref-avatar:not(:first-child) {
-    margin-left: -8px;
+  margin-left: -8px;
 }
 
 .ref-favicon {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .ref-initial {
-    font-size: 10px;
-    font-weight: 600;
-    color: white;
-    user-select: none;
+  font-size: 10px;
+  font-weight: 600;
+  color: white;
+  user-select: none;
 }
 
 .refs-more {
-    margin-left: 6px;
-    font-size: 11px;
-    color: var(--v-theme-secondaryText);
-    opacity: 0.7;
-    font-weight: 500;
+  margin-left: 6px;
+  font-size: 11px;
+  color: var(--v-theme-secondaryText);
+  opacity: 0.7;
+  font-weight: 500;
 }
 </style>
diff --git a/dashboard/src/components/chat/message_list_comps/MarkdownMessagePart.vue b/dashboard/src/components/chat/message_list_comps/MarkdownMessagePart.vue
new file mode 100644
index 000000000..bfc85a44a
--- /dev/null
+++ b/dashboard/src/components/chat/message_list_comps/MarkdownMessagePart.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="markdown-content">
+    <MarkdownRender
+      custom-id="chat-message"
+      :content="content"
+      :custom-html-tags="customHtmlTags"
+      :is-dark="isDark"
+      :typewriter="false"
+      :max-live-nodes="0"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, provide } from "vue";
+import { MarkdownRender } from "markstream-vue";
+
+const props = defineProps<{
+  content: string;
+  refs: { used?: Array<Record<string, unknown>> } | null;
+  isDark: boolean;
+  customHtmlTags: string[];
+}>();
+
+const isDarkRef = computed(() => props.isDark);
+const refsByIndex = computed(() => {
+  const messageRefs = props.refs;
+  const refs =
+    messageRefs && Array.isArray(messageRefs.used) ? messageRefs.used : [];
+  return refs.reduce<Record<string, Record<string, unknown>>>((acc, item) => {
+    if (item.index != null) {
+      acc[String(item.index)] = item;
+    }
+    return acc;
+  }, {});
+});
+
+provide("isDark", isDarkRef);
+provide("webSearchResults", () => refsByIndex.value);
+</script>
diff --git a/dashboard/src/components/chat/message_list_comps/MessagePartsRenderer.vue b/dashboard/src/components/chat/message_list_comps/MessagePartsRenderer.vue
deleted file mode 100644
index cadd5fb56..000000000
--- a/dashboard/src/components/chat/message_list_comps/MessagePartsRenderer.vue
+++ /dev/null
@@ -1,433 +0,0 @@
-<template>
-    <template v-for="(renderPart, renderIndex) in getRenderParts(parts)" :key="renderPart.key">
-        <!-- Grouped Tool Calls (consecutive tool_call parts) -->
-        <div v-if="renderPart.type === 'tool_group'" class="tool-call-compact">
-            <transition-group name="tool-call-item" tag="div" class="tool-call-items">
-                <ToolCallItem v-for="(toolCall, tcIndex) in renderPart.toolCalls" :key="toolCall.id" :is-dark="isDark">
-                    <template #label="{ expanded }">
-                        <v-icon size="x-small" v-if="toolCall.name.includes('web_search') || toolCall.name.includes('tavily')">
-                            mdi-web
-                        </v-icon>
-                        <v-icon size="x-small" v-else-if="toolCall.name === 'astrbot_execute_shell'">
-                            mdi-console-line
-                        </v-icon>
-                        <v-icon size="x-small" v-else>
-                            mdi-wrench
-                        </v-icon>
-                        {{ tm('actions.toolCallUsed', { name: toolCall.name }) }}
-                        <span style="opacity: 0.6;">{{ toolCall.finished_ts ? formatDuration(toolCall.finished_ts -
-                            toolCall.ts) : getElapsedTime(toolCall.ts) }}</span>
-                        <v-icon size="x-small" class="tool-call-chevron" :class="{ rotated: expanded }">
-                            mdi-chevron-right
-                        </v-icon>
-                    </template>
-                    <template #details>
-                        <div class="tool-call-detail-row">
-                            <span class="detail-label">ID:</span>
-                            <code class="detail-value">{{ toolCall.id }}</code>
-                        </div>
-                        <div class="tool-call-detail-row">
-                            <span class="detail-label">Args:</span>
-                            <pre class="detail-value detail-json">{{ formatToolArgs(toolCall.args) }}</pre>
-                        </div>
-                        <div v-if="toolCall.result" class="tool-call-detail-row">
-                            <span class="detail-label">Result:</span>
-                            <pre
-                                class="detail-value detail-json detail-result">{{ formatToolResult(toolCall.result) }}</pre>
-                        </div>
-                    </template>
-                </ToolCallItem>
-            </transition-group>
-        </div>
-
-        <!-- iPython Tool Block -->
-        <ToolCallItem v-else-if="renderPart.type === 'ipython'" :is-dark="isDark" style="margin: 8px 0 4px;">
-            <template #label="{ expanded }">
-                <v-icon size="x-small">
-                    mdi-code-json
-                </v-icon>
-                <span class="ipython-label">{{ tm('actions.pythonCodeAnalysis') }}</span>
-                <span style="opacity: 0.6;">{{ renderPart.toolCall.finished_ts ?
-                    formatDuration(renderPart.toolCall.finished_ts -
-                        renderPart.toolCall.ts) : getElapsedTime(renderPart.toolCall.ts) }}</span>
-                <v-icon size="small" class="ipython-icon" :class="{ rotated: expanded }">
-                    mdi-chevron-right
-                </v-icon>
-            </template>
-            <template #details>
-                <IPythonToolBlock :tool-call="renderPart.toolCall" :is-dark="isDark" :show-header="false"
-                    :force-expanded="true" />
-            </template>
-        </ToolCallItem>
-
-        <!-- Text (Markdown) -->
-        <MarkdownRender
-            v-else-if="renderPart.part.type === 'plain' && renderPart.part.text && renderPart.part.text.trim()"
-            custom-id="message-list" :custom-html-tags="['ref']"
-            :content="normalizeMarkdownContent(renderPart.part.text)" :typewriter="false"
-            class="markdown-content" :is-dark="isDark" :monacoOptions="{ theme: isDark ? 'vs-dark' : 'vs-light' }"
-            :key="`${renderPart.key}-${isDark ? 'dark' : 'light'}`"/>
-
-        <!-- Image -->
-        <div v-else-if="renderPart.part.type === 'image' && renderPart.part.embedded_url" class="embedded-images">
-            <div class="embedded-image">
-                <img :src="renderPart.part.embedded_url" class="bot-embedded-image"
-                    @click="emitOpenImage(renderPart.part.embedded_url)" />
-            </div>
-        </div>
-
-        <!-- Audio -->
-        <div v-else-if="renderPart.part.type === 'record' && renderPart.part.embedded_url" class="embedded-audio">
-            <audio controls class="audio-player">
-                <source :src="renderPart.part.embedded_url" type="audio/wav">
-                {{ t('messages.errors.browser.audioNotSupported') }}
-            </audio>
-        </div>
-
-        <!-- Files -->
-        <div v-else-if="renderPart.part.type === 'file' && renderPart.part.embedded_file" class="embedded-files">
-            <div class="embedded-file">
-                <a v-if="renderPart.part.embedded_file.url" :href="renderPart.part.embedded_file.url"
-                    :download="renderPart.part.embedded_file.filename" class="file-link" :class="{ 'is-dark': isDark }"
-                    :style="isDark ? {
-                        backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                        borderColor: 'rgba(255, 255, 255, 0.1)',
-                        color: 'var(--v-theme-secondary)'
-                    } : {}">
-                    <v-icon size="small" class="file-icon"
-                        :style="isDark ? { color: 'var(--v-theme-secondary)' } : {}">mdi-file-document-outline</v-icon>
-                    <span class="file-name">{{ renderPart.part.embedded_file.filename }}</span>
-                </a>
-                <a v-else @click="emitDownloadFile(renderPart.part.embedded_file)" class="file-link file-link-download"
-                    :class="{ 'is-dark': isDark }" :style="isDark ? {
-                        backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                        borderColor: 'rgba(255, 255, 255, 0.1)',
-                        color: 'var(--v-theme-secondary)'
-                    } : {}">
-                    <v-icon size="small" class="file-icon"
-                        :style="isDark ? { color: 'var(--v-theme-secondary)' } : {}">mdi-file-document-outline</v-icon>
-                    <span class="file-name">{{ renderPart.part.embedded_file.filename }}</span>
-                    <v-icon v-if="downloadingFiles?.has(renderPart.part.embedded_file.attachment_id)" size="small"
-                        class="download-icon">mdi-loading mdi-spin</v-icon>
-                    <v-icon v-else size="small" class="download-icon">mdi-download</v-icon>
-                </a>
-            </div>
-        </div>
-    </template>
-</template>
-
-<script setup>
-import { useI18n, useModuleI18n } from '@/i18n/composables';
-import { MarkdownRender } from 'markstream-vue';
-import IPythonToolBlock from './IPythonToolBlock.vue';
-import ToolCallItem from './ToolCallItem.vue';
-
-const props = defineProps({
-    parts: {
-        type: Array,
-        required: true
-    },
-    isDark: {
-        type: Boolean,
-        default: false
-    },
-    currentTime: {
-        type: Number,
-        default: 0
-    },
-    downloadingFiles: {
-        type: Object,
-        default: () => new Set()
-    }
-});
-
-const emit = defineEmits(['open-image-preview', 'download-file']);
-const { t } = useI18n();
-const { tm } = useModuleI18n('features/chat');
-
-const emitOpenImage = (url) => {
-    emit('open-image-preview', url);
-};
-
-const emitDownloadFile = (file) => {
-    emit('download-file', file);
-};
-
-const isMarkdownCodeFence = (text) => /^(```|~~~)/.test(text.trim());
-
-const looksLikeStandaloneHtml = (text) => {
-    const normalized = text.trim();
-    if (!normalized) return false;
-    if (!/(<!doctype\s+html|<html\b|<head\b|<body\b)/i.test(normalized)) return false;
-    return /(<\/html>|<\/body>|<\/head>|<form\b|<input\b|<button\b)/i.test(normalized);
-};
-
-const normalizeMarkdownContent = (text) => {
-    if (typeof text !== 'string') return text;
-    if (isMarkdownCodeFence(text) || !looksLikeStandaloneHtml(text)) return text;
-    return `\`\`\`\`html\n${text}\n\`\`\`\``;
-};
-
-const formatDuration = (seconds) => {
-    if (seconds < 1) {
-        return `${Math.round(seconds * 1000)}ms`;
-    }
-    if (seconds < 60) {
-        return `${seconds.toFixed(1)}s`;
-    }
-    const minutes = Math.floor(seconds / 60);
-    const secs = Math.round(seconds % 60);
-    return `${minutes}m ${secs}s`;
-};
-
-const getElapsedTime = (startTs) => {
-    const elapsed = props.currentTime - startTs;
-    return formatDuration(elapsed);
-};
-
-const formatToolResult = (result) => {
-    if (!result) return '';
-    if (typeof result === 'string') {
-        try {
-            const parsed = JSON.parse(result);
-            return JSON.stringify(parsed, null, 2);
-        } catch {
-            return result;
-        }
-    }
-    return JSON.stringify(result, null, 2);
-};
-
-const formatToolArgs = (args) => {
-    if (!args) return '';
-    if (typeof args === 'string') {
-        try {
-            const parsed = JSON.parse(args);
-            return JSON.stringify(parsed, null, 2);
-        } catch {
-            return args;
-        }
-    }
-    return JSON.stringify(args, null, 2);
-};
-
-const isIPythonTool = (toolCall) => {
-    return toolCall.name === 'astrbot_execute_ipython' || toolCall.name === 'astrbot_execute_python';
-};
-
-const getRenderParts = (messageParts) => {
-    if (!Array.isArray(messageParts)) return [];
-    const rendered = [];
-    let pendingToolCalls = [];
-    let groupIndex = 0;
-
-    const flushPending = (endIndex) => {
-        if (!pendingToolCalls.length) return;
-        rendered.push({
-            type: 'tool_group',
-            toolCalls: pendingToolCalls,
-            key: `tool-group-${groupIndex}-${endIndex}`
-        });
-        pendingToolCalls = [];
-        groupIndex += 1;
-    };
-
-    messageParts.forEach((part, idx) => {
-        if (part?.type === 'tool_call' && Array.isArray(part.tool_calls) && part.tool_calls.length) {
-            part.tool_calls.forEach((toolCall, tcIndex) => {
-                if (isIPythonTool(toolCall)) {
-                    flushPending(idx - 1);
-                    rendered.push({
-                        type: 'ipython',
-                        toolCall,
-                        key: `ipython-${idx}-${tcIndex}`
-                    });
-                    return;
-                }
-
-                pendingToolCalls.push(toolCall);
-            });
-            return;
-        }
-
-        flushPending(idx - 1);
-        rendered.push({
-            type: 'part',
-            part,
-            key: `part-${idx}`
-        });
-    });
-
-    flushPending(messageParts.length - 1);
-    return rendered;
-};
-</script>
-
-<style scoped>
-.tool-call-compact {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin: 8px 0 4px;
-}
-
-.tool-call-group-title {
-    font-size: 13px;
-    color: var(--v-theme-secondaryText);
-    opacity: 0.7;
-}
-
-.tool-call-items {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.tool-call-detail-row {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 6px;
-}
-
-.tool-call-detail-row:last-child {
-    margin-bottom: 0;
-}
-
-.detail-label {
-    font-size: 11px;
-    font-weight: 600;
-    color: var(--v-theme-secondaryText);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    margin-bottom: 4px;
-}
-
-.detail-value {
-    font-size: 12px;
-    color: var(--v-theme-primaryText);
-    background-color: transparent;
-    padding: 2px 6px;
-    border-radius: 4px;
-    word-break: break-word;
-}
-
-.detail-json {
-    font-family: 'Fira Code', 'Consolas', monospace;
-    white-space: pre-wrap;
-    max-height: 220px;
-    overflow-y: auto;
-    margin: 0;
-}
-
-.detail-result {
-    max-height: 320px;
-    background-color: transparent;
-}
-
-.tool-call-item-enter-active,
-.tool-call-item-leave-active {
-    transition: all 0.2s ease;
-}
-
-.tool-call-item-enter-from,
-.tool-call-item-leave-to {
-    opacity: 0;
-    transform: translateY(-4px);
-}
-
-.ipython-icon,
-.tool-call-chevron {
-    margin-left: 6px;
-    transition: transform 0.2s ease;
-}
-
-.ipython-icon.rotated {
-    transform: rotate(90deg);
-}
-
-.tool-call-chevron.rotated {
-    transform: rotate(90deg);
-}
-
-
-.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: 55%;
-    width: auto;
-    height: auto;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: transform 0.2s ease;
-}
-
-.embedded-audio {
-    width: 300px;
-    margin-top: 8px;
-}
-
-.embedded-audio .audio-player {
-    width: 100%;
-    max-width: 300px;
-}
-
-/* 文件附件样式 */
-.file-attachments,
-.embedded-files {
-    margin-top: 8px;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-
-.file-attachment,
-.embedded-file {
-    display: flex;
-    align-items: center;
-}
-
-
-/* 文件附件样式 */
-.file-attachments,
-.embedded-files {
-    margin-top: 8px;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-
-.file-attachment,
-.embedded-file {
-    display: flex;
-    align-items: center;
-}
-
-.file-link {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 12px;
-    background-color: rgba(var(--v-theme-primary), 0.08);
-    border: 1px solid rgba(var(--v-theme-primary), 0.2);
-    border-radius: 8px;
-    text-decoration: none;
-    font-size: 13px;
-    transition: all 0.2s ease;
-    max-width: 320px;
-}
-
-.file-link-download {
-    cursor: pointer;
-}
-
-</style>
diff --git a/dashboard/src/components/chat/message_list_comps/ReasoningBlock.vue b/dashboard/src/components/chat/message_list_comps/ReasoningBlock.vue
index 42e5971de..4af61d49e 100644
--- a/dashboard/src/components/chat/message_list_comps/ReasoningBlock.vue
+++ b/dashboard/src/components/chat/message_list_comps/ReasoningBlock.vue
@@ -1,122 +1,288 @@
 <template>
-    <div class="reasoning-block" :class="{ 'reasoning-block--dark': isDark }">
-        <div class="reasoning-header" @click="toggleExpanded">
-            <v-icon size="small" class="reasoning-icon" :class="{ 'rotate-90': isExpanded }">
-                mdi-chevron-right
-            </v-icon>
-            <span class="reasoning-title">
-                {{ tm('reasoning.thinking') }}
-            </span>
-        </div>
-        <div v-if="isExpanded" class="reasoning-content animate-fade-in">
-            <MarkdownRender :key="`reasoning-${isDark ? 'dark' : 'light'}`" :content="reasoning" class="reasoning-text markdown-content"
-                :typewriter="false" :is-dark="isDark" :style="isDark ? { opacity: '0.85' } : {}" />
-        </div>
+  <div class="reasoning-block" :class="{ 'reasoning-block--dark': isDark }">
+    <button class="reasoning-header" type="button" @click="toggleExpanded">
+      <span class="reasoning-title">
+        {{ tm("reasoning.thinking") }}
+      </span>
+      <v-icon
+        size="22"
+        class="reasoning-icon"
+        :class="{ 'rotate-90': isExpanded }"
+      >
+        mdi-chevron-right
+      </v-icon>
+    </button>
+    <div v-if="isExpanded" class="reasoning-content animate-fade-in">
+      <MarkdownRender
+        :key="`reasoning-${isDark ? 'dark' : 'light'}`"
+        :content="reasoning"
+        class="reasoning-text markdown-content"
+        :typewriter="false"
+        :is-dark="isDark"
+      />
     </div>
+    <transition :name="previewTransitionName" mode="out-in">
+      <div
+        v-if="showStreamingPreview"
+        :key="previewKey"
+        class="reasoning-preview"
+      >
+        {{ previewText }}
+      </div>
+    </transition>
+  </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { useModuleI18n } from '@/i18n/composables';
-import { MarkdownRender } from 'markstream-vue';
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { useModuleI18n } from "@/i18n/composables";
+import { MarkdownRender } from "markstream-vue";
 
 const props = defineProps({
-    reasoning: {
-        type: String,
-        required: true
-    },
-    isDark: {
-        type: Boolean,
-        default: false
-    },
-    initialExpanded: {
-        type: Boolean,
-        default: false
-    }
+  reasoning: {
+    type: String,
+    required: true,
+  },
+  isDark: {
+    type: Boolean,
+    default: false,
+  },
+  initialExpanded: {
+    type: Boolean,
+    default: false,
+  },
+  isStreaming: {
+    type: Boolean,
+    default: false,
+  },
+  hasNonReasoningContent: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const { tm } = useModuleI18n('features/chat');
+const { tm } = useModuleI18n("features/chat");
 const isExpanded = ref(props.initialExpanded);
+const previewText = ref("");
+const previewKey = ref(0);
+let previewTimer = null;
+let previewStartTimer = null;
+
+const showStreamingPreview = computed(
+  () =>
+    props.isStreaming &&
+    !isExpanded.value &&
+    !props.hasNonReasoningContent &&
+    previewText.value,
+);
+const previewTransitionName = computed(() =>
+  props.hasNonReasoningContent
+    ? "reasoning-preview-collapse"
+    : "reasoning-preview-fade",
+);
 
 const toggleExpanded = () => {
-    isExpanded.value = !isExpanded.value;
+  isExpanded.value = !isExpanded.value;
 };
+
+const latestReasoningPreview = () => {
+  const lines = props.reasoning
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean);
+  return lines.slice(-3).join("\n");
+};
+
+const updatePreviewLine = () => {
+  const nextText = latestReasoningPreview();
+  if (!nextText || nextText === previewText.value) return;
+  previewText.value = nextText;
+  previewKey.value += 1;
+};
+
+const stopPreviewTimer = () => {
+  if (!previewTimer) return;
+  clearInterval(previewTimer);
+  previewTimer = null;
+};
+
+const stopPreviewStartTimer = () => {
+  if (!previewStartTimer) return;
+  clearTimeout(previewStartTimer);
+  previewStartTimer = null;
+};
+
+const startPreviewTimer = () => {
+  updatePreviewLine();
+  if (!previewTimer) {
+    previewTimer = setInterval(updatePreviewLine, 2000);
+  }
+};
+
+const syncPreviewTimer = () => {
+  if (props.isStreaming && !isExpanded.value && !props.hasNonReasoningContent) {
+    if (!previewTimer && !previewStartTimer) {
+      previewStartTimer = setTimeout(() => {
+        previewStartTimer = null;
+        if (
+          props.isStreaming &&
+          !isExpanded.value &&
+          !props.hasNonReasoningContent
+        ) {
+          startPreviewTimer();
+        }
+      }, 2000);
+    }
+    return;
+  }
+
+  stopPreviewStartTimer();
+  stopPreviewTimer();
+  if (!props.isStreaming) {
+    previewText.value = "";
+  }
+};
+
+watch(
+  () => [props.isStreaming, isExpanded.value, props.hasNonReasoningContent],
+  syncPreviewTimer,
+  {
+    immediate: true,
+  },
+);
+
+onBeforeUnmount(() => {
+  stopPreviewStartTimer();
+  stopPreviewTimer();
+});
 </script>
 
 <style scoped>
-
-
-/* Reasoning 区块样式 */
-.reasoning-container {
-    margin-bottom: 12px;
-    margin-top: 6px;
-    border: 1px solid var(--v-theme-border);
-    border-radius: 20px;
-    overflow: hidden;
-    width: fit-content;
+.reasoning-block {
+  margin: 6px 0;
+  max-width: 100%;
+  color: rgba(var(--v-theme-on-surface), 0.7);
+  font-size: inherit;
+  line-height: inherit;
 }
 
 .reasoning-header {
-    display: inline-flex;
-    align-items: center;
-    padding: 8px 8px;
-    cursor: pointer;
-    user-select: none;
-    transition: background-color 0.2s ease;
-    border-radius: 20px;
+  max-width: 100%;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font: inherit;
+  text-align: left;
 }
 
 .reasoning-header:hover {
-    background-color: rgba(103, 58, 183, 0.08);
-}
-
-.reasoning-header.is-dark:hover {
-    background-color: rgba(103, 58, 183, 0.15);
+  color: rgba(var(--v-theme-on-surface), 0.88);
 }
 
 .reasoning-icon {
-    margin-right: 6px;
-    color: var(--v-theme-secondary);
-    transition: transform 0.2s ease;
+  color: currentcolor;
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
 }
 
-.reasoning-label {
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--v-theme-secondary);
-    letter-spacing: 0.3px;
+.reasoning-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .reasoning-content {
-    padding: 0px 12px;
-    border-top: 1px solid var(--v-theme-border);
-    color: gray;
-    animation: fadeIn 0.2s ease-in-out;
-    font-style: italic;
+  margin-top: 8px;
+  padding: 0;
+  color: rgba(var(--v-theme-on-surface), 0.7);
+  animation: fadeIn 0.2s ease-in-out;
+  font-style: italic;
+}
+
+.reasoning-preview {
+  max-width: 100%;
+  margin-top: 4px;
+  color: rgba(var(--v-theme-on-surface), 0.52);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  white-space: pre-line;
+  font: inherit;
+  font-style: italic;
 }
 
 .reasoning-text {
-    font-size: 14px;
-    line-height: 1.6;
-    color: var(--v-theme-secondaryText);
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
 }
 
 .animate-fade-in {
-    animation: fadeIn 0.2s ease-in-out;
+  animation: fadeIn 0.2s ease-in-out;
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
+  from {
+    opacity: 0;
+  }
 
-    to {
-        opacity: 1;
-    }
+  to {
+    opacity: 1;
+  }
 }
 
 .rotate-90 {
-    transform: rotate(90deg);
+  transform: rotate(90deg);
 }
 
+.reasoning-preview-fade-enter-active {
+  transition: opacity 0.25s ease;
+}
+
+.reasoning-preview-fade-leave-active {
+  transition: opacity 0.25s ease;
+}
+
+.reasoning-preview-fade-enter-from,
+.reasoning-preview-fade-leave-to {
+  opacity: 0;
+}
+
+.reasoning-preview-collapse-enter-active {
+  transition: opacity 0.25s ease;
+}
+
+.reasoning-preview-collapse-leave-active {
+  overflow: hidden;
+  transition:
+    max-height 0.45s cubic-bezier(0.55, 0, 1, 0.45),
+    margin-top 0.45s cubic-bezier(0.55, 0, 1, 0.45),
+    opacity 0.35s ease-in,
+    transform 0.45s cubic-bezier(0.55, 0, 1, 0.45);
+}
+
+.reasoning-preview-collapse-enter-from {
+  opacity: 0;
+}
+
+.reasoning-preview-collapse-leave-from {
+  max-height: 5rem;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.reasoning-preview-collapse-leave-to {
+  max-height: 0;
+  margin-top: 0;
+  opacity: 0;
+  transform: translateY(-8px);
+}
 </style>
diff --git a/dashboard/src/components/chat/message_list_comps/RefNode.vue b/dashboard/src/components/chat/message_list_comps/RefNode.vue
index 2c41008ed..e79e2b7d7 100644
--- a/dashboard/src/components/chat/message_list_comps/RefNode.vue
+++ b/dashboard/src/components/chat/message_list_comps/RefNode.vue
@@ -1,76 +1,91 @@
 <template>
-    <v-chip v-if="domain" class="ref-chip" size="x-small" variant="flat"
-        :style="chipStyle" :href="url"
-        target="_blank" clickable>
-        <v-icon start size="x-small" color>mdi-link-variant</v-icon>
-        <span>{{ domain }}</span>
-
-    </v-chip>
-    <span v-else class="ref-fallback" :style="fallbackStyle">{{ 'site' }}</span>
+  <v-chip
+    v-if="resultData"
+    class="ref-chip"
+    size="x-small"
+    variant="flat"
+    :style="chipStyle"
+    :href="url"
+    target="_blank"
+    clickable
+  >
+    <v-icon start size="x-small" color>mdi-link-variant</v-icon>
+    <span>{{ domain || resultData.title || refIndex }}</span>
+  </v-chip>
 </template>
 
 <script setup>
-import { computed, inject } from 'vue'
+import { computed, inject, unref, useSlots } from "vue";
 
 const props = defineProps({
-    node: {
-        type: Object,
-        required: true
-    }
-})
+  node: {
+    type: Object,
+    default: null,
+  },
+});
 
-console.log('RefNode node:', props.node);
+const slots = useSlots();
+const injectedIsDark = inject("isDark", false);
+const webSearchResults = inject("webSearchResults", () => ({}));
 
-// 从父组件注入的暗黑模式状态和搜索结果
-const isDark = inject('isDark', false)
-const webSearchResults = inject('webSearchResults', () => ({}))
+const isDark = computed(() => Boolean(unref(injectedIsDark)));
+const refIndex = computed(() => {
+  const nodeContent = props.node?.content?.trim();
+  if (nodeContent) return nodeContent;
+  return slotText(slots.default?.()).trim();
+});
 
-// 从 node.content 中提取 ref index (格式: uuid.idx)
-const refIndex = computed(() => props.node?.content?.trim() || '')
-
-// 根据 refIndex 查找对应的 URL
 const resultData = computed(() => {
-    if (!refIndex.value) return null
-    const results = typeof webSearchResults === 'function' ? webSearchResults() : webSearchResults
-    return results?.[refIndex.value] || null
-})
+  if (!refIndex.value) return null;
+  const results =
+    typeof webSearchResults === "function"
+      ? webSearchResults()
+      : webSearchResults;
+  return results?.[refIndex.value] || null;
+});
 
-const url = computed(() => resultData.value?.url || '')
+const url = computed(() => resultData.value?.url || "");
 
 const domain = computed(() => {
-    if (!url.value) return ''
-    try {
-        const urlObj = new URL(url.value)
-        return urlObj.hostname.replace(/^www\./, '')
-    } catch (e) {
-        return ''
-    }
-})
+  if (!url.value) return "";
+  try {
+    const urlObj = new URL(url.value);
+    return urlObj.hostname.replace(/^www\./, "");
+  } catch (e) {
+    return "";
+  }
+});
 
 const chipStyle = computed(() => ({
-    backgroundColor: isDark ? 'rgba(var(--v-theme-on-surface), 0.08)' : 'rgba(var(--v-theme-on-surface), 0.04)',
-    color: isDark ? 'rgba(var(--v-theme-on-surface), 0.62)' : 'rgba(var(--v-theme-on-surface), 0.72)'
-}))
+  backgroundColor: isDark.value
+    ? "rgba(var(--v-theme-on-surface), 0.08)"
+    : "rgba(var(--v-theme-on-surface), 0.04)",
+  color: isDark.value
+    ? "rgba(var(--v-theme-on-surface), 0.62)"
+    : "rgba(var(--v-theme-on-surface), 0.72)",
+}));
 
-const fallbackStyle = computed(() => ({
-    color: isDark ? 'rgba(var(--v-theme-on-surface), 0.62)' : 'rgba(var(--v-theme-on-surface), 0.72)'
-}))
+function slotText(nodes = []) {
+  return nodes
+    .map((node) => {
+      if (typeof node.children === "string") return node.children;
+      if (Array.isArray(node.children)) return slotText(node.children);
+      return "";
+    })
+    .join("");
+}
 </script>
 
 <style scoped>
 .ref-chip {
-    margin: 0 2px;
-    cursor: pointer;
-    text-decoration: none;
-    transition: opacity;
-    margin-left: 4px;
+  margin: 0 2px;
+  cursor: pointer;
+  text-decoration: none;
+  transition: opacity;
+  margin-left: 4px;
 }
 
 .ref-chip:hover {
-    opacity: 0.8;
-}
-
-.ref-fallback {
-    font-size: 0.9em;
+  opacity: 0.8;
 }
 </style>
diff --git a/dashboard/src/components/chat/message_list_comps/RefsSidebar.vue b/dashboard/src/components/chat/message_list_comps/RefsSidebar.vue
index c4dd37e09..d622ee7f7 100644
--- a/dashboard/src/components/chat/message_list_comps/RefsSidebar.vue
+++ b/dashboard/src/components/chat/message_list_comps/RefsSidebar.vue
@@ -1,225 +1,262 @@
 <template>
-    <transition name="slide-left">
-        <div v-if="isOpen" class="refs-sidebar">
-            <div class="sidebar-header">
-                <h3 class="sidebar-title">{{ tm('refs.title') }}</h3>
-                <v-btn icon="mdi-close" size="small" variant="text" @click="close"></v-btn>
-            </div>
+  <transition name="slide-left">
+    <div v-if="isOpen" class="refs-sidebar">
+      <div class="sidebar-header">
+        <h3 class="sidebar-title">{{ tm("refs.title") }}</h3>
+        <v-btn
+          icon="mdi-close"
+          size="small"
+          variant="text"
+          @click="close"
+        ></v-btn>
+      </div>
 
-            <div class="refs-list">
-                <div v-for="(ref, index) in refs?.used || []" :key="index" class="ref-item" @click="openLink(ref.url)">
-                    <div class="ref-item-icon">
-                        <img v-if="ref.favicon" :src="ref.favicon" class="ref-item-favicon"
-                            @error="(e) => e.target.style.display = 'none'" />
-                        <div v-else class="ref-item-initial">{{ getRefInitial(ref.title) }}</div>
-                    </div>
-                    <div class="ref-item-content">
-                        <div class="ref-item-title">{{ ref.title }}</div>
-                        <div class="ref-item-url">{{ formatUrl(ref.url) }}</div>
-                        <div v-if="ref.snippet" class="ref-item-snippet">{{ ref.snippet }}</div>
-                    </div>
-                    <v-icon size="small" class="ref-item-arrow">mdi-open-in-new</v-icon>
-                </div>
+      <div class="refs-list">
+        <div
+          v-for="(ref, index) in normalizedRefs"
+          :key="ref.index || index"
+          class="ref-item"
+          @click="openLink(ref.url)"
+        >
+          <div class="ref-item-icon">
+            <img
+              v-if="ref.favicon"
+              :src="ref.favicon"
+              class="ref-item-favicon"
+              @error="(e) => (e.target.style.display = 'none')"
+            />
+            <div v-else class="ref-item-initial">
+              {{ getRefInitial(ref.title) }}
             </div>
+          </div>
+          <div class="ref-item-content">
+            <div class="ref-item-title">{{ ref.title }}</div>
+            <div class="ref-item-url">{{ formatUrl(ref.url) }}</div>
+            <div v-if="ref.snippet" class="ref-item-snippet">
+              {{ ref.snippet }}
+            </div>
+          </div>
+          <v-icon size="small" class="ref-item-arrow">mdi-open-in-new</v-icon>
         </div>
-    </transition>
+      </div>
+    </div>
+  </transition>
 </template>
 
 <script>
-import { useModuleI18n } from '@/i18n/composables';
+import { useModuleI18n } from "@/i18n/composables";
 
 export default {
-    name: 'RefsSidebar',
-    props: {
-        modelValue: {
-            type: Boolean,
-            default: false
-        },
-        refs: {
-            type: Object,
-            default: null
-        }
+  name: "RefsSidebar",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
     },
-    emits: ['update:modelValue'],
-    setup() {
-        const { tm } = useModuleI18n('features/chat');
-        return { tm };
+    refs: {
+      type: Object,
+      default: null,
     },
-    computed: {
-        isOpen: {
-            get() {
-                return this.modelValue;
-            },
-            set(value) {
-                this.$emit('update:modelValue', value);
-            }
-        }
+  },
+  emits: ["update:modelValue"],
+  setup() {
+    const { tm } = useModuleI18n("features/chat");
+    return { tm };
+  },
+  computed: {
+    isOpen: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
     },
-    methods: {
-        close() {
-            this.isOpen = false;
-        },
 
-        getRefInitial(title) {
-            if (!title) return '?';
-            return title.charAt(0).toUpperCase();
-        },
+    normalizedRefs() {
+      const used = Array.isArray(this.refs?.used)
+        ? this.refs.used
+        : Array.isArray(this.refs)
+        ? this.refs
+        : [];
 
-        formatUrl(url) {
-            if (!url) return '';
-            try {
-                const urlObj = new URL(url);
-                return urlObj.hostname;
-            } catch {
-                return url;
-            }
-        },
+      return used
+        .map((ref) => ({
+          index: ref?.index,
+          title: ref?.title || ref?.url || "Reference",
+          url: ref?.url,
+          snippet: ref?.snippet,
+          favicon: ref?.favicon,
+        }))
+        .filter((ref) => ref.url);
+    },
+  },
+  methods: {
+    close() {
+      this.isOpen = false;
+    },
 
-        openLink(url) {
-            if (url) {
-                window.open(url, '_blank');
-            }
-        }
-    }
-}
+    getRefInitial(title) {
+      if (!title) return "?";
+      return title.charAt(0).toUpperCase();
+    },
+
+    formatUrl(url) {
+      if (!url) return "";
+      try {
+        const urlObj = new URL(url);
+        return urlObj.hostname;
+      } catch {
+        return url;
+      }
+    },
+
+    openLink(url) {
+      if (url) {
+        window.open(url, "_blank");
+      }
+    },
+  },
+};
 </script>
 
 <style scoped>
 .refs-sidebar {
-    width: 360px;
-    height: 100%;
-    background-color: var(--v-theme-surface);
-    border-left: 1px solid var(--v-theme-border);
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
+  width: 360px;
+  height: 100%;
+  background-color: rgb(var(--v-theme-surface));
+  border-left: 1px solid rgba(var(--v-border-color), 0.16);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  color: rgb(var(--v-theme-on-surface));
 }
 
 .slide-left-enter-active,
 .slide-left-leave-active {
-    transition: all 0.3s ease;
+  transition: all 0.3s ease;
 }
 
 .slide-left-enter-from {
-    transform: translateX(100%);
-    opacity: 0;
+  transform: translateX(100%);
+  opacity: 0;
 }
 
 .slide-left-leave-to {
-    transform: translateX(100%);
-    opacity: 0;
+  transform: translateX(100%);
+  opacity: 0;
 }
 
 .sidebar-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px 20px;
-    flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  flex-shrink: 0;
 }
 
 .sidebar-title {
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--v-theme-primaryText);
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--v-theme-primaryText);
 }
 
 .refs-list {
-    padding: 12px;
-    padding-top: 0;
-    overflow-y: auto;
-    flex: 1;
+  padding: 12px;
+  padding-top: 0;
+  overflow-y: auto;
+  flex: 1;
 }
 
 .ref-item {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-    padding: 12px;
-    margin-bottom: 8px;
-    border-radius: 8px;
-    border: 1px solid var(--v-theme-border);
-    cursor: pointer;
-    transition: all 0.2s ease;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px;
+  margin-bottom: 8px;
+  border-radius: 8px;
+  border: 1px solid var(--v-theme-border);
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
 .ref-item:hover {
-    background-color: rgba(103, 58, 183, 0.05);
-    border-color: rgba(103, 58, 183, 0.3);
+  background-color: rgba(103, 58, 183, 0.05);
+  border-color: rgba(103, 58, 183, 0.3);
 }
 
 .ref-item-icon {
-    flex-shrink: 0;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
 
 .ref-item-favicon {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .ref-item-initial {
-    font-size: 14px;
-    font-weight: 600;
-    color: white;
+  font-size: 14px;
+  font-weight: 600;
+  color: white;
 }
 
 .ref-item-content {
-    flex: 1;
-    min-width: 0;
+  flex: 1;
+  min-width: 0;
 }
 
 .ref-item-title {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--v-theme-primaryText);
-    margin-bottom: 4px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--v-theme-primaryText);
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 
 .ref-item-url {
-    font-size: 12px;
-    color: var(--v-theme-secondaryText);
-    opacity: 0.7;
-    margin-bottom: 6px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  font-size: 12px;
+  color: var(--v-theme-secondaryText);
+  opacity: 0.7;
+  margin-bottom: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .ref-item-snippet {
-    font-size: 12px;
-    color: var(--v-theme-secondaryText);
-    opacity: 0.8;
-    line-height: 1.5;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
+  font-size: 12px;
+  color: var(--v-theme-secondaryText);
+  opacity: 0.8;
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
 }
 
 .ref-item-arrow {
-    flex-shrink: 0;
-    margin-top: 4px;
-    color: var(--v-theme-secondaryText);
-    opacity: 0.5;
-    transition: opacity 0.2s ease;
+  flex-shrink: 0;
+  margin-top: 4px;
+  color: var(--v-theme-secondaryText);
+  opacity: 0.5;
+  transition: opacity 0.2s ease;
 }
 
 .ref-item:hover .ref-item-arrow {
-    opacity: 1;
+  opacity: 1;
 }
 </style>
diff --git a/dashboard/src/components/chat/message_list_comps/ToolCallCard.vue b/dashboard/src/components/chat/message_list_comps/ToolCallCard.vue
index 2429eed10..c90f8ebb4 100644
--- a/dashboard/src/components/chat/message_list_comps/ToolCallCard.vue
+++ b/dashboard/src/components/chat/message_list_comps/ToolCallCard.vue
@@ -1,290 +1,271 @@
 <template>
-    <div class="tool-call-card" :class="{ 'is-dark': isDark, 'expanded': isExpanded }" :style="isDark ? {
-        backgroundColor: 'rgba(40, 60, 100, 0.4)',
-        borderColor: 'rgba(100, 140, 200, 0.4)'
-    } : {}">
-        <!-- Header -->
-        <div class="tool-call-header" :class="{ 'is-dark': isDark }" @click="toggleExpanded">
-            <v-icon size="small" class="tool-call-expand-icon" :class="{ 'expanded': isExpanded }">
-                mdi-chevron-right
-            </v-icon>
-            <v-icon size="small" class="tool-call-icon">mdi-wrench-outline</v-icon>
-            <div class="tool-call-info">
-                <span class="tool-call-name">{{ toolCall.name }}</span>
-            </div>
-            <span class="tool-call-status"
-                :class="{ 'status-running': !toolCall.finished_ts, 'status-finished': toolCall.finished_ts }">
-                <template v-if="toolCall.finished_ts">
-                    <v-icon size="x-small" class="status-icon">mdi-check-circle</v-icon>
-                    {{ formatDuration(toolCall.finished_ts - toolCall.ts) }}
-                </template>
-                <template v-else>
-                    <v-icon size="x-small" class="status-icon spinning">mdi-loading</v-icon>
-                    {{ elapsedTime }}
-                </template>
-            </span>
-        </div>
+  <div class="tool-call-card" :class="{ expanded: isExpanded }">
+    <button class="tool-call-header" type="button" @click="toggleExpanded">
+      <v-icon size="16" class="tool-call-icon">{{ toolCallIcon }}</v-icon>
+      <span class="tool-call-title">
+        {{ tm("actions.toolCallUsed", { name: displayToolName }) }}
+      </span>
+      <span class="tool-call-duration">{{ toolCallDuration }}</span>
+      <v-icon
+        size="22"
+        class="tool-call-expand-icon"
+        :class="{ expanded: isExpanded }"
+      >
+        mdi-chevron-right
+      </v-icon>
+    </button>
 
-        <!-- Details -->
-        <div v-if="isExpanded" class="tool-call-details" :style="isDark ? {
-            borderTopColor: 'rgba(100, 140, 200, 0.3)',
-            backgroundColor: 'rgba(30, 45, 70, 0.5)'
-        } : {}">
-            <!-- ID -->
-            <div class="tool-call-detail-row">
-                <span class="detail-label">ID:</span>
-                <code class="detail-value" :style="isDark ? { backgroundColor: 'transparent' } : {}">
-            {{ toolCall.id }}
+    <div v-if="isExpanded" class="tool-call-details">
+      <div v-if="toolCall.id" class="tool-call-detail-row">
+        <span class="detail-label">ID:</span>
+        <code class="detail-value">
+          {{ toolCall.id }}
         </code>
-            </div>
+      </div>
 
-            <!-- Args -->
-            <div class="tool-call-detail-row">
-                <span class="detail-label">Args:</span>
-                <pre class="detail-value detail-json" :style="isDark ? { backgroundColor: 'transparent' } : {}">{{
-                    JSON.stringify(toolCall.args, null, 2) }}</pre>
-            </div>
+      <div class="tool-call-detail-row">
+        <span class="detail-label">Args:</span>
+        <pre class="detail-value detail-json">{{
+          JSON.stringify(toolCall.args, null, 2)
+        }}</pre>
+      </div>
 
-            <!-- Result -->
-            <div v-if="toolCall.result" class="tool-call-detail-row">
-                <span class="detail-label">Result:</span>
-                <pre class="detail-value detail-json detail-result"
-                    :style="isDark ? { backgroundColor: 'transparent' } : {}">{{
-            formattedResult }}</pre>
-            </div>
-        </div>
+      <div v-if="toolCall.result" class="tool-call-detail-row">
+        <span class="detail-label">Result:</span>
+        <pre class="detail-value detail-json detail-result">{{
+          formattedResult
+        }}</pre>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { useModuleI18n } from "@/i18n/composables";
 
 const props = defineProps({
-    toolCall: {
-        type: Object,
-        required: true
-    },
-    isDark: {
-        type: Boolean,
-        default: false
-    },
-    initialExpanded: {
-        type: Boolean,
-        default: false
-    }
+  toolCall: {
+    type: Object,
+    required: true,
+  },
+  isDark: {
+    type: Boolean,
+    default: false,
+  },
+  initialExpanded: {
+    type: Boolean,
+    default: false,
+  },
 });
 
+const { tm } = useModuleI18n("features/chat");
 const isExpanded = ref(props.initialExpanded);
 const currentTime = ref(Date.now() / 1000);
 let timer = null;
 
 const elapsedTime = computed(() => {
-    if (props.toolCall.finished_ts) return '';
-    const elapsed = currentTime.value - props.toolCall.ts;
-    return formatDuration(elapsed);
+  if (props.toolCall.finished_ts) return "";
+  const startTime = Number(props.toolCall.ts);
+  if (!Number.isFinite(startTime) || startTime <= 0) return "";
+  return formatDuration(currentTime.value - startTime);
+});
+
+const displayToolName = computed(() => props.toolCall.name || "tool");
+
+const toolCallIcon = computed(() => {
+  const name = String(props.toolCall.name || "");
+  if (name === "astrbot_execute_ipython" || name === "astrbot_execute_python") {
+    return "mdi-code-braces";
+  }
+  if (name.includes("web_search") || name.includes("tavily")) {
+    return "mdi-web";
+  }
+  if (name === "astrbot_execute_shell") {
+    return "mdi-console-line";
+  }
+  return "mdi-wrench";
+});
+
+const toolCallDuration = computed(() => {
+  const startTime = Number(props.toolCall.ts);
+  if (!Number.isFinite(startTime) || startTime <= 0) return "";
+  if (props.toolCall.finished_ts) {
+    return formatDuration(Number(props.toolCall.finished_ts) - startTime);
+  }
+  return elapsedTime.value;
 });
 
 const formattedResult = computed(() => {
-    if (!props.toolCall.result) return '';
-    try {
-        const parsed = JSON.parse(props.toolCall.result);
-        return JSON.stringify(parsed, null, 2);
-    } catch {
-        return props.toolCall.result;
-    }
+  if (!props.toolCall.result) return "";
+  try {
+    const parsed = JSON.parse(props.toolCall.result);
+    return JSON.stringify(parsed, null, 2);
+  } catch {
+    return props.toolCall.result;
+  }
 });
 
 const formatDuration = (seconds) => {
-    if (seconds < 1) {
-        return `${Math.round(seconds * 1000)}ms`;
-    } else if (seconds < 60) {
-        return `${seconds.toFixed(1)}s`;
-    } else {
-        const minutes = Math.floor(seconds / 60);
-        const secs = Math.round(seconds % 60);
-        return `${minutes}m ${secs}s`;
-    }
+  if (!Number.isFinite(seconds) || seconds < 0) return "";
+  if (seconds < 1) {
+    return `${Math.round(seconds * 1000)}ms`;
+  } else if (seconds < 60) {
+    return `${seconds.toFixed(1)}s`;
+  } else {
+    const minutes = Math.floor(seconds / 60);
+    const secs = Math.round(seconds % 60);
+    return `${minutes}m ${secs}s`;
+  }
 };
 
 const toggleExpanded = () => {
-    isExpanded.value = !isExpanded.value;
+  isExpanded.value = !isExpanded.value;
 };
 
 const updateTime = () => {
-    currentTime.value = Date.now() / 1000;
+  currentTime.value = Date.now() / 1000;
 };
 
 onMounted(() => {
-    // Update time periodically if tool call is running
-    if (!props.toolCall.finished_ts) {
-        timer = setInterval(updateTime, 100);
-    }
+  if (!props.toolCall.finished_ts) {
+    timer = setInterval(updateTime, 100);
+  }
 });
 
 onUnmounted(() => {
-    if (timer) {
-        clearInterval(timer);
-    }
+  if (timer) {
+    clearInterval(timer);
+  }
 });
 </script>
 
 <style scoped>
 .tool-call-card {
-    border-radius: 8px;
-    overflow: hidden;
-    background-color: #eff3f6;
-    margin: 8px 0px;
-    width: fit-content;
-    min-width: 320px;
-    max-width: 100%;
-    transition: all 0.1s ease;
+  margin: 6px 0;
+  max-width: 100%;
+  color: rgba(var(--v-theme-on-surface), 0.7);
+  font-size: inherit;
+  line-height: inherit;
 }
 
 .tool-call-card.expanded {
-    width: 100%;
+  width: 100%;
 }
 
 .tool-call-header {
-    display: flex;
-    align-items: center;
-    padding: 10px 12px;
-    cursor: pointer;
-    user-select: none;
-    transition: background-color;
-    gap: 8px;
+  max-width: 100%;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font: inherit;
+  text-align: left;
 }
 
 .tool-call-header:hover {
-    background-color: rgba(169, 194, 219, 0.15);
-}
-
-.tool-call-header.is-dark:hover {
-    background-color: rgba(100, 150, 200, 0.2);
+  color: rgba(var(--v-theme-on-surface), 0.88);
 }
 
 .tool-call-expand-icon {
-    color: var(--v-theme-secondary);
-    transition: transform 0.2s ease;
-    flex-shrink: 0;
+  color: currentcolor;
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
 }
 
 .tool-call-expand-icon.expanded {
-    transform: rotate(90deg);
+  transform: rotate(90deg);
 }
 
 .tool-call-icon {
-    color: var(--v-theme-secondary);
-    flex-shrink: 0;
+  color: currentcolor;
+  flex-shrink: 0;
 }
 
-.tool-call-info {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    flex: 1;
-    min-width: 0;
+.tool-call-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.tool-call-name {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--v-theme-secondary);
-}
-
-.tool-call-status {
-    margin-left: 8px;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 12px;
-    font-weight: 500;
-    flex-shrink: 0;
-}
-
-.tool-call-status.status-running {
-    color: #ff9800;
-}
-
-.tool-call-status.status-finished {
-    color: #4caf50;
-}
-
-.tool-call-status .status-icon {
-    font-size: 14px;
-}
-
-.tool-call-status .status-icon.spinning {
-    animation: spin 1s linear infinite;
+.tool-call-duration {
+  flex-shrink: 0;
+  color: rgba(var(--v-theme-on-surface), 0.48);
 }
 
 .tool-call-details {
-    padding: 12px;
-    background-color: rgba(255, 255, 255, 0.5);
-    animation: fadeIn 0.2s ease-in-out;
+  margin-top: 8px;
+  padding-left: 26px;
+  animation: fadeIn 0.2s ease-in-out;
 }
 
 .tool-call-detail-row {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 8px;
 }
 
 .tool-call-detail-row:last-child {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 .detail-label {
-    font-size: 11px;
-    font-weight: 600;
-    color: var(--v-theme-secondaryText);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    margin-bottom: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  color: rgba(var(--v-theme-on-surface), 0.55);
+  text-transform: uppercase;
+  margin-bottom: 4px;
 }
 
 .detail-value {
-    font-size: 12px;
-    color: var(--v-theme-primaryText);
-    background-color: transparent;
-    padding: 4px 8px;
-    border-radius: 4px;
-    word-break: break-all;
+  font-size: 12px;
+  color: rgba(var(--v-theme-on-surface), 0.8);
+  background-color: transparent;
+  padding: 0;
+  border-radius: 4px;
+  word-break: break-all;
 }
 
 .detail-json {
-    font-family: 'Fira Code', 'Consolas', monospace;
-    white-space: pre-wrap;
-    max-height: 200px;
-    overflow-y: auto;
-    margin: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  white-space: pre-wrap;
+  max-height: 200px;
+  overflow-y: auto;
+  margin: 0;
 }
 
 .detail-result {
-    max-height: 300px;
-    background-color: transparent;
+  max-height: 300px;
+  background-color: transparent;
 }
 
 .animate-fade-in {
-    animation: fadeIn 0.2s ease-in-out;
+  animation: fadeIn 0.2s ease-in-out;
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
+  from {
+    opacity: 0;
+  }
 
-    to {
-        opacity: 1;
-    }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
+  from {
+    transform: rotate(0deg);
+  }
 
-    to {
-        transform: rotate(360deg);
-    }
+  to {
+    transform: rotate(360deg);
+  }
 }
 </style>
diff --git a/dashboard/src/composables/useMessages.ts b/dashboard/src/composables/useMessages.ts
index aed32c596..af6228e06 100644
--- a/dashboard/src/composables/useMessages.ts
+++ b/dashboard/src/composables/useMessages.ts
@@ -1,1109 +1,597 @@
-import { ref, reactive, type Ref } from 'vue';
-import axios from 'axios';
-import { useToast } from '@/utils/toast';
+import { computed, onBeforeUnmount, reactive, ref, type Ref } from "vue";
+import axios from "axios";
 
-// 工具调用信息
-export interface ToolCall {
-    id: string;
-    name: string;
-    args: Record<string, any>;
-    ts: number;              // 开始时间戳
-    result?: string;         // 工具调用结果
-    finished_ts?: number;    // 完成时间戳
-}
+export type TransportMode = "sse" | "websocket";
 
-// Token 使用统计
-export interface TokenUsage {
-    input_other: number;
-    input_cached: number;
-    output: number;
-}
-
-// Agent 统计信息
-export interface AgentStats {
-    token_usage: TokenUsage;
-    start_time: number;
-    end_time: number;
-    time_to_first_token: number;
-}
-
-// 文件信息结构
-export interface FileInfo {
-    url?: string;           // blob URL (可选，点击时才加载)
-    filename: string;
-    attachment_id?: string; // 用于按需下载
-}
-
-// 消息部分的类型定义
 export interface MessagePart {
-    type: 'plain' | 'image' | 'record' | 'file' | 'video' | 'reply' | 'tool_call';
-    text?: string;           // for plain
-    attachment_id?: string;  // for image, record, file, video
-    filename?: string;       // for file (filename from backend)
-    message_id?: number;     // for reply (PlatformSessionHistoryMessage.id)
-    tool_calls?: ToolCall[]; // for tool_call
-    // embedded fields - 加载后填充
-    embedded_url?: string;   // blob URL for image, record
-    embedded_file?: FileInfo; // for file (保留 attachment_id 用于按需下载)
-    selected_text?: string;  // for reply - 被引用消息的内容
+  type: string;
+  text?: string;
+  message_id?: string | number;
+  selected_text?: string;
+  embedded_url?: string;
+  embedded_file?: { url?: string; filename?: string; attachment_id?: string };
+  attachment_id?: string;
+  filename?: string;
+  tool_calls?: ToolCall[];
+  [key: string]: unknown;
 }
 
-// 引用信息 (用于发送消息时)
-export interface ReplyInfo {
-    messageId: number;
-    selectedText?: string;  // 选中的文本内容（可选）
+export interface ToolCall {
+  id?: string;
+  name?: string;
+  arguments?: unknown;
+  result?: unknown;
+  ts?: number;
+  finished_ts?: number;
+  [key: string]: unknown;
 }
 
-// 简化的消息内容结构
-export interface MessageContent {
-    type: string;                    // 'user' | 'bot'
-    message: MessagePart[];          // 消息部分列表 (保持顺序)
-    reasoning?: string;              // reasoning content (for bot)
-    isLoading?: boolean;             // loading state
-    agentStats?: AgentStats;         // agent 统计信息 (for bot)
+export interface ChatContent {
+  type: "user" | "bot" | string;
+  message: MessagePart[];
+  reasoning?: string;
+  isLoading?: boolean;
+  agentStats?: any;
+  refs?: any;
 }
 
-export interface Message {
-    id?: number;
-    content: MessageContent;
-    created_at?: string;
+export interface ChatRecord {
+  id?: string | number;
+  content: ChatContent;
+  created_at?: string;
+  sender_id?: string;
+  sender_name?: string;
 }
 
-export type ChatTransportMode = 'sse' | 'websocket';
-
-type StreamChunk = {
-    type?: string;
-    t?: string;
-    data?: any;
-    chain_type?: string;
-    streaming?: boolean;
-    session_id?: string;
-    message_id?: string;
-    code?: string;
-    ct?: string;
-    [key: string]: any;
-};
-
-type WsStreamContext = {
-    handleChunk: (payload: StreamChunk) => Promise<void>;
-    finish: (err?: unknown) => void;
-};
-
-const STREAMING_STORAGE_KEY = 'enableStreaming';
-const TRANSPORT_MODE_STORAGE_KEY = 'chatTransportMode';
-const HIDDEN_TOOL_CALL_NAMES = new Set(['send_message_to_user']);
-
-function isHiddenToolCall(toolCall: ToolCall | { name?: unknown } | null | undefined): boolean {
-    if (!toolCall || typeof toolCall !== 'object') {
-        return false;
-    }
-    const name = toolCall.name;
-    return typeof name === 'string' && HIDDEN_TOOL_CALL_NAMES.has(name);
+export interface ChatSessionProject {
+  project_id: string;
+  title: string;
+  emoji?: string;
 }
 
-export function useMessages(
-    currSessionId: Ref<string>,
-    getMediaFile: (filename: string) => Promise<string>,
-    updateSessionTitle: (sessionId: string, title: string) => void,
-    onSessionsUpdate: () => void
-) {
-    const messages = ref<Message[]>([]);
-    const isStreaming = ref(false);
-    const isConvRunning = ref(false);
-    const isToastedRunningInfo = ref(false);
-    const activeStreamCount = ref(0);
-    const enableStreaming = ref(true);
-    const transportMode = ref<ChatTransportMode>('sse');
-    const attachmentCache = new Map<string, string>();  // attachment_id -> blob URL
-    const currentRequestController = ref<AbortController | null>(null);
-    const currentReader = ref<ReadableStreamDefaultReader<Uint8Array> | null>(null);
-    const currentRunningSessionId = ref('');
-    const currentWsMessageId = ref('');
-    const currentBoundSessionId = ref('');
-    const userStopRequested = ref(false);
-
-    const currentWebSocket = ref<WebSocket | null>(null);
-    const webSocketConnectPromise = ref<Promise<WebSocket> | null>(null);
-    const wsContexts = new Map<string, WsStreamContext>();
-
-    // 当前会话的项目信息
-    const currentSessionProject = ref<{ project_id: string; title: string; emoji: string } | null>(null);
-
-    // 从 localStorage 读取配置
-    const savedStreamingState = localStorage.getItem(STREAMING_STORAGE_KEY);
-    if (savedStreamingState !== null) {
-        enableStreaming.value = JSON.parse(savedStreamingState);
-    }
-
-    const savedTransportMode = localStorage.getItem(TRANSPORT_MODE_STORAGE_KEY);
-    if (savedTransportMode === 'sse' || savedTransportMode === 'websocket') {
-        transportMode.value = savedTransportMode;
-    }
-
-    function toggleStreaming() {
-        enableStreaming.value = !enableStreaming.value;
-        localStorage.setItem(STREAMING_STORAGE_KEY, JSON.stringify(enableStreaming.value));
-    }
-
-    function setTransportMode(mode: ChatTransportMode) {
-        transportMode.value = mode;
-        localStorage.setItem(TRANSPORT_MODE_STORAGE_KEY, mode);
-        if (mode === 'websocket') {
-            if (currSessionId.value) {
-                void bindSessionToWebSocket(currSessionId.value).catch((err) => {
-                    console.error('建立 WebSocket 连接失败:', err);
-                });
-            }
-        } else {
-            closeChatWebSocket();
-        }
-    }
-
-    function generateMessageId(): string {
-        if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
-            return crypto.randomUUID();
-        }
-        return `msg_${Date.now()}_${Math.random().toString(36).slice(2)}`;
-    }
-
-    function buildWebSocketUrl(): string {
-        const token = localStorage.getItem('token');
-        if (!token) {
-            throw new Error('Missing authentication token');
-        }
-        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        const wsUrl = new URL('/api/unified_chat/ws', window.location.href);
-        wsUrl.protocol = protocol;
-        wsUrl.searchParams.set('token', token);
-        return wsUrl.toString();
-    }
-
-    function closeChatWebSocket() {
-        if (currentWebSocket.value) {
-            try {
-                currentWebSocket.value.close();
-            } catch {
-                // ignore websocket close errors
-            }
-            currentWebSocket.value = null;
-        }
-        webSocketConnectPromise.value = null;
-        currentBoundSessionId.value = '';
-    }
-
-    async function bindSessionToWebSocket(sessionId: string) {
-        if (!sessionId || transportMode.value !== 'websocket') {
-            return;
-        }
-        const ws = await ensureChatWebSocket();
-        if (ws.readyState !== WebSocket.OPEN) {
-            return;
-        }
-        if (currentBoundSessionId.value === sessionId) {
-            return;
-        }
-
-        ws.send(JSON.stringify({
-            ct: 'chat',
-            t: 'bind',
-            session_id: sessionId
-        }));
-        currentBoundSessionId.value = sessionId;
-    }
-
-    async function handlePassiveWebSocketChunk(payload: StreamChunk) {
-        if (!payload.type) {
-            return;
-        }
-
-        if (payload.type === 'plain') {
-            const chainType = payload.chain_type || 'normal';
-            if (chainType === 'reasoning') {
-                messages.value.push({
-                    content: {
-                        type: 'bot',
-                        message: [],
-                        reasoning: String(payload.data || '')
-                    }
-                });
-                return;
-            }
-
-            messages.value.push({
-                content: {
-                    type: 'bot',
-                    message: [{
-                        type: 'plain',
-                        text: String(payload.data || '')
-                    }]
-                }
-            });
-            return;
-        }
-
-        if (payload.type === 'image') {
-            const img = String(payload.data || '').replace('[IMAGE]', '');
-            const imageUrl = await getMediaFile(img);
-            messages.value.push({
-                content: {
-                    type: 'bot',
-                    message: [{ type: 'image', embedded_url: imageUrl }]
-                }
-            });
-            return;
-        }
-
-        if (payload.type === 'record') {
-            const audio = String(payload.data || '').replace('[RECORD]', '');
-            const audioUrl = await getMediaFile(audio);
-            messages.value.push({
-                content: {
-                    type: 'bot',
-                    message: [{ type: 'record', embedded_url: audioUrl }]
-                }
-            });
-            return;
-        }
-
-        if (payload.type === 'file') {
-            const fileData = String(payload.data || '').replace('[FILE]', '');
-            const [filename, originalName] = fileData.includes('|')
-                ? fileData.split('|', 2)
-                : [fileData, fileData];
-            const fileUrl = await getMediaFile(filename);
-            messages.value.push({
-                content: {
-                    type: 'bot',
-                    message: [{
-                        type: 'file',
-                        embedded_file: { url: fileUrl, filename: originalName }
-                    }]
-                }
-            });
-        }
-    }
-
-    async function dispatchWebSocketMessage(event: MessageEvent) {
-        let payload: StreamChunk;
-        try {
-            payload = JSON.parse(event.data);
-        } catch (err) {
-            console.warn('WebSocket JSON parse failed:', err);
-            return;
-        }
-
-        if (payload.ct && payload.ct !== 'chat') {
-            return;
-        }
-
-        if (payload.type === 'session_bound') {
-            if (typeof payload.session_id === 'string') {
-                currentBoundSessionId.value = payload.session_id;
-            }
-            return;
-        }
-
-        if (payload.t === 'error') {
-            const targetMessageId = payload.message_id || currentWsMessageId.value;
-            if (!targetMessageId) {
-                console.warn('WebSocket chat error:', payload);
-                return;
-            }
-            const ctx = wsContexts.get(targetMessageId);
-            if (!ctx) {
-                console.warn('WebSocket chat error (no ctx):', payload);
-                return;
-            }
-
-            if (userStopRequested.value || payload.code === 'INTERRUPTED') {
-                ctx.finish();
-            } else {
-                ctx.finish(new Error(payload.data || 'WebSocket chat error'));
-            }
-            return;
-        }
-
-        const targetMessageId = payload.message_id || currentWsMessageId.value;
-        if (!targetMessageId) {
-            return;
-        }
-
-        const ctx = wsContexts.get(targetMessageId);
-        if (!ctx) {
-            await handlePassiveWebSocketChunk(payload);
-            return;
-        }
-
-        try {
-            await ctx.handleChunk(payload);
-        } catch (err) {
-            ctx.finish(err);
-            return;
-        }
-
-        if (payload.type === 'end') {
-            ctx.finish();
-        }
-    }
-
-    function ensureChatWebSocket(): Promise<WebSocket> {
-        if (currentWebSocket.value?.readyState === WebSocket.OPEN) {
-            return Promise.resolve(currentWebSocket.value);
-        }
-
-        if (webSocketConnectPromise.value) {
-            return webSocketConnectPromise.value;
-        }
-
-        const connectPromise = new Promise<WebSocket>((resolve, reject) => {
-            let settled = false;
-            let ws: WebSocket;
-
-            try {
-                ws = new WebSocket(buildWebSocketUrl());
-            } catch (err) {
-                reject(err);
-                return;
-            }
-
-            const timeoutId = window.setTimeout(() => {
-                if (settled) {
-                    return;
-                }
-                settled = true;
-                webSocketConnectPromise.value = null;
-                try {
-                    ws.close();
-                } catch {
-                    // ignore close errors
-                }
-                reject(new Error('WebSocket connection timeout'));
-            }, 5000);
-
-            ws.onopen = () => {
-                if (settled) {
-                    return;
-                }
-                settled = true;
-                window.clearTimeout(timeoutId);
-                currentWebSocket.value = ws;
-                resolve(ws);
-            };
-
-            ws.onerror = () => {
-                if (settled) {
-                    return;
-                }
-                settled = true;
-                window.clearTimeout(timeoutId);
-                webSocketConnectPromise.value = null;
-                reject(new Error('WebSocket connection failed'));
-            };
-
-            ws.onmessage = (event) => {
-                void dispatchWebSocketMessage(event);
-            };
-
-            ws.onclose = () => {
-                currentWebSocket.value = null;
-                webSocketConnectPromise.value = null;
-                const pending = Array.from(wsContexts.values());
-                for (const ctx of pending) {
-                    if (userStopRequested.value) {
-                        ctx.finish();
-                    } else {
-                        ctx.finish(new Error('WebSocket closed'));
-                    }
-                }
-            };
-        });
-
-        webSocketConnectPromise.value = connectPromise;
-        return connectPromise;
-    }
-
-    function createStreamChunkProcessor() {
-        let inStreaming = false;
-        let messageObj: MessageContent | null = null;
-
-        return async (chunkJson: StreamChunk) => {
-            if (!chunkJson || typeof chunkJson !== 'object') {
-                return;
-            }
-
-            if (chunkJson.type === 'session_id') {
-                return;
-            }
-
-            if (!chunkJson.type) {
-                return;
-            }
-
-            const lastMsg = messages.value[messages.value.length - 1];
-            if (lastMsg?.content?.isLoading) {
-                messages.value.pop();
-            }
-
-            if (chunkJson.type === 'error') {
-                console.error('Error received:', chunkJson.data);
-                return;
-            }
-
-            if (chunkJson.type === 'image') {
-                const img = String(chunkJson.data || '').replace('[IMAGE]', '');
-                const imageUrl = await getMediaFile(img);
-                const botResp: MessageContent = {
-                    type: 'bot',
-                    message: [{
-                        type: 'image',
-                        embedded_url: imageUrl
-                    }]
-                };
-                messages.value.push({ content: botResp });
-            } else if (chunkJson.type === 'record') {
-                const audio = String(chunkJson.data || '').replace('[RECORD]', '');
-                const audioUrl = await getMediaFile(audio);
-                const botResp: MessageContent = {
-                    type: 'bot',
-                    message: [{
-                        type: 'record',
-                        embedded_url: audioUrl
-                    }]
-                };
-                messages.value.push({ content: botResp });
-            } else if (chunkJson.type === 'file') {
-                const fileData = String(chunkJson.data || '').replace('[FILE]', '');
-                const [filename, originalName] = fileData.includes('|')
-                    ? fileData.split('|', 2)
-                    : [fileData, fileData];
-                const fileUrl = await getMediaFile(filename);
-                const botResp: MessageContent = {
-                    type: 'bot',
-                    message: [{
-                        type: 'file',
-                        embedded_file: {
-                            url: fileUrl,
-                            filename: originalName
-                        }
-                    }]
-                };
-                messages.value.push({ content: botResp });
-            } else if (chunkJson.type === 'plain') {
-                const chainType = chunkJson.chain_type || 'normal';
-
-                if (chainType === 'tool_call') {
-                    let toolCallData: any;
-                    try {
-                        toolCallData = JSON.parse(String(chunkJson.data || '{}'));
-                    } catch {
-                        return;
-                    }
-                    if (isHiddenToolCall(toolCallData)) {
-                        return;
-                    }
-
-                    const toolCall: ToolCall = {
-                        id: toolCallData.id,
-                        name: toolCallData.name,
-                        args: toolCallData.args,
-                        ts: toolCallData.ts
-                    };
-
-                    if (!inStreaming) {
-                        messageObj = reactive<MessageContent>({
-                            type: 'bot',
-                            message: [{
-                                type: 'tool_call',
-                                tool_calls: [toolCall]
-                            }]
-                        });
-                        messages.value.push({ content: messageObj });
-                        inStreaming = true;
-                    } else {
-                        const lastPart = messageObj!.message[messageObj!.message.length - 1];
-                        if (lastPart?.type === 'tool_call') {
-                            const existingIndex = lastPart.tool_calls!.findIndex((tc: ToolCall) => tc.id === toolCall.id);
-                            if (existingIndex === -1) {
-                                lastPart.tool_calls!.push(toolCall);
-                            }
-                        } else {
-                            messageObj!.message.push({
-                                type: 'tool_call',
-                                tool_calls: [toolCall]
-                            });
-                        }
-                    }
-                } else if (chainType === 'tool_call_result') {
-                    let resultData: any;
-                    try {
-                        resultData = JSON.parse(String(chunkJson.data || '{}'));
-                    } catch {
-                        return;
-                    }
-                    if (isHiddenToolCall(resultData)) {
-                        return;
-                    }
-
-                    if (messageObj) {
-                        for (const part of messageObj.message) {
-                            if (part.type === 'tool_call' && part.tool_calls) {
-                                const toolCall = part.tool_calls.find((tc: ToolCall) => tc.id === resultData.id);
-                                if (toolCall) {
-                                    toolCall.result = resultData.result;
-                                    toolCall.finished_ts = resultData.ts;
-                                    break;
-                                }
-                            }
-                        }
-                    }
-                } else if (chainType === 'reasoning') {
-                    if (!inStreaming) {
-                        messageObj = reactive<MessageContent>({
-                            type: 'bot',
-                            message: [],
-                            reasoning: String(chunkJson.data || '')
-                        });
-                        messages.value.push({ content: messageObj });
-                        inStreaming = true;
-                    } else {
-                        messageObj!.reasoning = (messageObj!.reasoning || '') + String(chunkJson.data || '');
-                    }
-                } else {
-                    if (!inStreaming) {
-                        messageObj = reactive<MessageContent>({
-                            type: 'bot',
-                            message: [{
-                                type: 'plain',
-                                text: String(chunkJson.data || '')
-                            }]
-                        });
-                        messages.value.push({ content: messageObj });
-                        inStreaming = true;
-                    } else {
-                        const lastPart = messageObj!.message[messageObj!.message.length - 1];
-                        if (lastPart?.type === 'plain') {
-                            lastPart.text = (lastPart.text || '') + String(chunkJson.data || '');
-                        } else {
-                            messageObj!.message.push({
-                                type: 'plain',
-                                text: String(chunkJson.data || '')
-                            });
-                        }
-                    }
-                }
-            } else if (chunkJson.type === 'update_title') {
-                if (chunkJson.session_id) {
-                    updateSessionTitle(chunkJson.session_id, chunkJson.data);
-                }
-            } else if (chunkJson.type === 'message_saved') {
-                const lastBotMsg = messages.value[messages.value.length - 1];
-                if (lastBotMsg && lastBotMsg.content?.type === 'bot') {
-                    lastBotMsg.id = chunkJson.data?.id;
-                    lastBotMsg.created_at = chunkJson.data?.created_at;
-                }
-            } else if (chunkJson.type === 'agent_stats') {
-                if (messageObj) {
-                    messageObj.agentStats = chunkJson.data;
-                }
-            }
-
-            if (typeof chunkJson.streaming === 'boolean') {
-                if ((chunkJson.type === 'break' && chunkJson.streaming) || !chunkJson.streaming) {
-                    inStreaming = false;
-                    if (!chunkJson.streaming) {
-                        isStreaming.value = false;
-                    }
-                }
-            }
-        };
-    }
-
-    // 获取 attachment 文件并返回 blob URL
-    async function getAttachment(attachmentId: string): Promise<string> {
-        if (attachmentCache.has(attachmentId)) {
-            return attachmentCache.get(attachmentId)!;
-        }
-        try {
-            const response = await axios.get(`/api/chat/get_attachment?attachment_id=${attachmentId}`, {
-                responseType: 'blob'
-            });
-            const blobUrl = URL.createObjectURL(response.data);
-            attachmentCache.set(attachmentId, blobUrl);
-            return blobUrl;
-        } catch (err) {
-            console.error('Failed to get attachment:', attachmentId, err);
-            return '';
-        }
-    }
-
-    // 解析消息内容，填充 embedded 字段 (保持原始顺序)
-    async function parseMessageContent(content: any): Promise<void> {
-        const message = content.message;
-
-        // 如果 message 是字符串 (旧格式)，转换为数组格式
-        if (typeof message === 'string') {
-            const parts: MessagePart[] = [];
-            let text = message;
-
-            // 处理旧格式的特殊标记
-            if (text.startsWith('[IMAGE]')) {
-                const img = text.replace('[IMAGE]', '');
-                const imageUrl = await getMediaFile(img);
-                parts.push({
-                    type: 'image',
-                    embedded_url: imageUrl
-                });
-            } else if (text.startsWith('[RECORD]')) {
-                const audio = text.replace('[RECORD]', '');
-                const audioUrl = await getMediaFile(audio);
-                parts.push({
-                    type: 'record',
-                    embedded_url: audioUrl
-                });
-            } else if (text) {
-                parts.push({
-                    type: 'plain',
-                    text: text
-                });
-            }
-
-            content.message = parts;
-            return;
-        }
-
-        // 如果 message 是数组 (新格式)，遍历并填充 embedded 字段
-        if (Array.isArray(message)) {
-            const filteredMessage: MessagePart[] = [];
-            for (const part of message as MessagePart[]) {
-                if (part.type === 'tool_call' && Array.isArray(part.tool_calls)) {
-                    const visibleToolCalls = part.tool_calls.filter(
-                        (toolCall) => !isHiddenToolCall(toolCall),
-                    );
-                    if (!visibleToolCalls.length) {
-                        continue;
-                    }
-                    part.tool_calls = visibleToolCalls;
-                }
-
-                if (part.type === 'image' && part.attachment_id) {
-                    part.embedded_url = await getAttachment(part.attachment_id);
-                } else if (part.type === 'record' && part.attachment_id) {
-                    part.embedded_url = await getAttachment(part.attachment_id);
-                } else if (part.type === 'file' && part.attachment_id) {
-                    // file 类型不预加载，保留 attachment_id 以便点击时下载
-                    part.embedded_file = {
-                        attachment_id: part.attachment_id,
-                        filename: part.filename || 'file'
-                    };
-                }
-                // plain, reply, tool_call, video 保持原样
-                filteredMessage.push(part);
-            }
-            content.message = filteredMessage;
-        }
-
-        // 处理 agent_stats (snake_case -> camelCase)
-        if (content.agent_stats) {
-            content.agentStats = content.agent_stats;
-            delete content.agent_stats;
-        }
-    }
-
-    async function getSessionMessages(sessionId: string) {
-        if (!sessionId) return;
-
-        try {
-            if (transportMode.value === 'websocket') {
-                try {
-                    await bindSessionToWebSocket(sessionId);
-                } catch (err) {
-                    console.error('进入会话时建立 WebSocket 连接失败:', err);
-                }
-            }
-
-            const response = await axios.get('/api/chat/get_session?session_id=' + sessionId);
-            isConvRunning.value = response.data.data.is_running || false;
-            let history = response.data.data.history;
-
-            // 保存项目信息（如果存在）
-            currentSessionProject.value = response.data.data.project || null;
-
-            if (isConvRunning.value) {
-                if (!isToastedRunningInfo.value) {
-                    useToast().info('该会话正在运行中。', { timeout: 5000 });
-                    isToastedRunningInfo.value = true;
-                }
-
-                // 如果会话还在运行，3秒后重新获取消息
-                setTimeout(() => {
-                    getSessionMessages(currSessionId.value);
-                }, 3000);
-            }
-
-            // 处理历史消息
-            for (let i = 0; i < history.length; i++) {
-                let content = history[i].content;
-                await parseMessageContent(content);
-            }
-
-            messages.value = history;
-        } catch (err) {
-            console.error(err);
-        }
-    }
-
-    function buildBackendMessageParts(
-        prompt: string,
-        stagedFiles: { attachment_id: string; url: string; original_name: string; type: string }[],
-        audioAttachmentId: string,
-        replyTo: ReplyInfo | null
-    ): MessagePart[] {
-        const parts: MessagePart[] = [];
-
-        if (replyTo) {
-            parts.push({
-                type: 'reply',
-                message_id: replyTo.messageId,
-                selected_text: replyTo.selectedText
-            });
-        }
-
-        if (prompt) {
-            parts.push({
-                type: 'plain',
-                text: prompt
-            });
-        }
-
-        for (const f of stagedFiles) {
-            const partType = f.type === 'image' ? 'image' :
-                f.type === 'record' ? 'record' : 'file';
-            parts.push({
-                type: partType as 'image' | 'record' | 'file',
-                attachment_id: f.attachment_id
-            });
-        }
-
-        if (audioAttachmentId) {
-            parts.push({
-                type: 'record',
-                attachment_id: audioAttachmentId
-            });
-        }
-
-        return parts;
-    }
-
-    async function sendMessageViaSSE(
-        messageToSend: string | MessagePart[],
-        selectedProviderId: string,
-        selectedModelName: string
+interface ActiveConnection {
+  sessionId: string;
+  messageId: string;
+  transport: TransportMode;
+  abort?: AbortController;
+  ws?: WebSocket;
+}
+
+interface SendMessageStreamOptions {
+  sessionId: string;
+  messageId: string;
+  parts: MessagePart[];
+  transport: TransportMode;
+  enableStreaming?: boolean;
+  selectedProvider?: string;
+  selectedModel?: string;
+  botRecord: ChatRecord;
+}
+
+interface CreateLocalExchangeOptions {
+  sessionId: string;
+  messageId: string;
+  parts: MessagePart[];
+}
+
+interface UseMessagesOptions {
+  currentSessionId: Ref<string>;
+  onSessionsChanged?: () => Promise<void> | void;
+  onStreamUpdate?: (sessionId: string) => void;
+}
+
+export function useMessages(options: UseMessagesOptions) {
+  const loadingMessages = ref(false);
+  const sending = ref(false);
+  const messagesBySession = reactive<Record<string, ChatRecord[]>>({});
+  const loadedSessions = reactive<Record<string, boolean>>({});
+  const activeConnections = reactive<Record<string, ActiveConnection>>({});
+  const sessionProjects = reactive<Record<string, ChatSessionProject | null>>(
+    {},
+  );
+
+  const activeMessages = computed(() =>
+    options.currentSessionId.value
+      ? messagesBySession[options.currentSessionId.value] || []
+      : [],
+  );
+
+  onBeforeUnmount(() => {
+    cleanupConnections();
+  });
+
+  function isSessionRunning(sessionId: string) {
+    return Boolean(activeConnections[sessionId]);
+  }
+
+  function isUserMessage(msg: ChatRecord) {
+    return messageContent(msg).type === "user";
+  }
+
+  function messageContent(msg: ChatRecord): ChatContent {
+    return msg.content || { type: "bot", message: [] };
+  }
+
+  function messageParts(msg: ChatRecord): MessagePart[] {
+    const parts = messageContent(msg).message;
+    if (Array.isArray(parts)) return parts;
+    if (typeof parts === "string") return [{ type: "plain", text: parts }];
+    return [];
+  }
+
+  function isMessageStreaming(msg: ChatRecord, msgIndex: number) {
+    if (
+      !options.currentSessionId.value ||
+      !isSessionRunning(options.currentSessionId.value)
     ) {
-        const controller = new AbortController();
-        currentRequestController.value = controller;
-
-        const response = await fetch('/api/chat/send', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': 'Bearer ' + localStorage.getItem('token')
-            },
-            signal: controller.signal,
-            body: JSON.stringify({
-                message: messageToSend,
-                session_id: currSessionId.value,
-                selected_provider: selectedProviderId,
-                selected_model: selectedModelName,
-                enable_streaming: enableStreaming.value
-            })
-        });
-
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-        }
-
-        const reader = response.body!.getReader();
-        currentReader.value = reader;
-        const decoder = new TextDecoder();
-        const processChunk = createStreamChunkProcessor();
-
-        isStreaming.value = true;
-
-        while (true) {
-            try {
-                const { done, value } = await reader.read();
-                if (done) {
-                    if (currSessionId.value) {
-                        await getSessionMessages(currSessionId.value);
-                    }
-                    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;
-
-                    let chunkJson: StreamChunk;
-                    try {
-                        chunkJson = JSON.parse(line.replace('data: ', ''));
-                    } catch (parseError) {
-                        console.warn('JSON解析失败:', line, parseError);
-                        continue;
-                    }
-
-                    await processChunk(chunkJson);
-                }
-            } catch (readError) {
-                if (!userStopRequested.value) {
-                    console.error('SSE读取错误:', readError);
-                }
-                break;
-            }
-        }
+      return false;
     }
+    return !isUserMessage(msg) && msgIndex === activeMessages.value.length - 1;
+  }
 
-    async function sendMessageViaWebSocket(
-        messageParts: MessagePart[],
-        selectedProviderId: string,
-        selectedModelName: string
-    ) {
-        await bindSessionToWebSocket(currSessionId.value);
-        const ws = await ensureChatWebSocket();
-        const messageId = generateMessageId();
-        currentWsMessageId.value = messageId;
-
-        const processChunk = createStreamChunkProcessor();
-
-        isStreaming.value = true;
-
-        await new Promise<void>((resolve, reject) => {
-            let finished = false;
-
-            const finish = (err?: unknown) => {
-                if (finished) {
-                    return;
-                }
-                finished = true;
-                wsContexts.delete(messageId);
-                if (err) {
-                    reject(err);
-                } else {
-                    resolve();
-                }
-            };
-
-            wsContexts.set(messageId, {
-                handleChunk: processChunk,
-                finish
-            });
-
-            try {
-                ws.send(JSON.stringify({
-                    ct: 'chat',
-                    t: 'send',
-                    message_id: messageId,
-                    session_id: currSessionId.value,
-                    message: messageParts,
-                    selected_provider: selectedProviderId,
-                    selected_model: selectedModelName,
-                    enable_streaming: enableStreaming.value
-                }));
-            } catch (err) {
-                finish(err);
-            }
-        });
-
-        if (currSessionId.value) {
-            await getSessionMessages(currSessionId.value);
-        }
+  async function loadSessionMessages(sessionId: string) {
+    if (!sessionId) return;
+    loadingMessages.value = true;
+    try {
+      const response = await axios.get("/api/chat/get_session", {
+        params: { session_id: sessionId },
+      });
+      const payload = response.data?.data || {};
+      const history = payload.history || [];
+      messagesBySession[sessionId] = history.map(normalizeHistoryRecord);
+      sessionProjects[sessionId] = normalizeSessionProject(payload.project);
+      loadedSessions[sessionId] = true;
+    } catch (error) {
+      console.error("Failed to load session messages:", error);
+      messagesBySession[sessionId] = messagesBySession[sessionId] || [];
+    } finally {
+      loadingMessages.value = false;
     }
+  }
 
-    async function sendMessage(
-        prompt: string,
-        stagedFiles: { attachment_id: string; url: string; original_name: string; type: string }[],
-        audioAttachmentId: string,
-        selectedProviderId: string,
-        selectedModelName: string,
-        replyTo: ReplyInfo | null = null
-    ) {
-        const userMessageParts: MessagePart[] = [];
+  function createLocalExchange({
+    sessionId,
+    messageId,
+    parts,
+  }: CreateLocalExchangeOptions) {
+    loadedSessions[sessionId] = true;
+    messagesBySession[sessionId] = messagesBySession[sessionId] || [];
 
-        if (replyTo) {
-            userMessageParts.push({
-                type: 'reply',
-                message_id: replyTo.messageId,
-                selected_text: replyTo.selectedText
-            });
-        }
+    const userRecord: ChatRecord = {
+      id: `local-user-${messageId}`,
+      created_at: new Date().toISOString(),
+      content: {
+        type: "user",
+        message: parts.map(stripUploadOnlyFields),
+      },
+    };
 
-        if (prompt) {
-            userMessageParts.push({
-                type: 'plain',
-                text: prompt
-            });
-        }
+    const botRecord: ChatRecord = {
+      id: `local-bot-${messageId}`,
+      created_at: new Date().toISOString(),
+      content: {
+        type: "bot",
+        message: [{ type: "plain", text: "" }],
+        reasoning: "",
+        isLoading: true,
+      },
+    };
 
-        for (const f of stagedFiles) {
-            const partType = f.type === 'image' ? 'image' :
-                f.type === 'record' ? 'record' : 'file';
+    messagesBySession[sessionId].push(userRecord, botRecord);
 
-            const embeddedUrl = await getAttachment(f.attachment_id);
+    const sessionMessages = messagesBySession[sessionId];
+    return {
+      userRecord: sessionMessages[sessionMessages.length - 2],
+      botRecord: sessionMessages[sessionMessages.length - 1],
+    };
+  }
 
-            userMessageParts.push({
-                type: partType as 'image' | 'record' | 'file',
-                attachment_id: f.attachment_id,
-                filename: f.original_name,
-                embedded_url: partType !== 'file' ? embeddedUrl : undefined,
-                embedded_file: partType === 'file' ? {
-                    attachment_id: f.attachment_id,
-                    filename: f.original_name
-                } : undefined
-            });
-        }
-
-        if (audioAttachmentId) {
-            const embeddedUrl = await getAttachment(audioAttachmentId);
-            userMessageParts.push({
-                type: 'record',
-                attachment_id: audioAttachmentId,
-                embedded_url: embeddedUrl
-            });
-        }
-
-        const userMessage: MessageContent = {
-            type: 'user',
-            message: userMessageParts
-        };
-
-        messages.value.push({ content: userMessage });
-
-        const loadingMessage = reactive<MessageContent>({
-            type: 'bot',
-            message: [],
-            reasoning: '',
-            isLoading: true
-        });
-        messages.value.push({ content: loadingMessage });
-
-        try {
-            activeStreamCount.value++;
-            if (activeStreamCount.value === 1) {
-                isConvRunning.value = true;
-            }
-
-            userStopRequested.value = false;
-            currentRunningSessionId.value = currSessionId.value;
-
-            const backendMessageParts = buildBackendMessageParts(
-                prompt,
-                stagedFiles,
-                audioAttachmentId,
-                replyTo
-            );
-            const hasAttachmentOrReply = stagedFiles.length > 0 || !!audioAttachmentId || !!replyTo;
-
-            if (transportMode.value === 'websocket') {
-                await sendMessageViaWebSocket(
-                    backendMessageParts,
-                    selectedProviderId,
-                    selectedModelName
-                );
-            } else {
-                const messageToSend: string | MessagePart[] = hasAttachmentOrReply
-                    ? backendMessageParts
-                    : prompt;
-                await sendMessageViaSSE(
-                    messageToSend,
-                    selectedProviderId,
-                    selectedModelName
-                );
-            }
-
-            onSessionsUpdate();
-
-        } catch (err) {
-            if (!userStopRequested.value) {
-                console.error('发送消息失败:', err);
-            }
-            const lastMsg = messages.value[messages.value.length - 1];
-            if (lastMsg?.content?.isLoading) {
-                messages.value.pop();
-            }
-        } finally {
-            isStreaming.value = false;
-            currentReader.value = null;
-            currentRequestController.value = null;
-            currentRunningSessionId.value = '';
-            currentWsMessageId.value = '';
-            userStopRequested.value = false;
-            activeStreamCount.value--;
-            if (activeStreamCount.value === 0) {
-                isConvRunning.value = false;
-            }
-        }
+  function sendMessageStream({
+    sessionId,
+    messageId,
+    parts,
+    transport,
+    enableStreaming = true,
+    selectedProvider = "",
+    selectedModel = "",
+    botRecord,
+  }: SendMessageStreamOptions) {
+    if (transport === "websocket") {
+      startWebSocketStream(
+        sessionId,
+        messageId,
+        parts,
+        botRecord,
+        enableStreaming,
+        selectedProvider,
+        selectedModel,
+      );
+      return;
     }
+    startSseStream(
+      sessionId,
+      messageId,
+      parts,
+      botRecord,
+      enableStreaming,
+      selectedProvider,
+      selectedModel,
+    );
+  }
 
-    async function stopMessage() {
-        const sessionId = currentRunningSessionId.value || currSessionId.value;
-        if (!sessionId) {
-            return;
-        }
+  async function stopSession(sessionId: string) {
+    if (!sessionId) return;
+    await axios.post("/api/chat/stop", { session_id: sessionId });
+  }
 
-        userStopRequested.value = true;
+  function cleanupConnections() {
+    Object.values(activeConnections).forEach((connection) => {
+      connection.abort?.abort();
+      connection.ws?.close();
+    });
+  }
 
-        try {
-            await axios.post('/api/chat/stop', {
-                session_id: sessionId
-            });
-        } catch (err) {
-            console.error('停止会话失败:', err);
-        }
-
-        if (transportMode.value === 'websocket' && currentWebSocket.value?.readyState === WebSocket.OPEN) {
-            try {
-                currentWebSocket.value.send(JSON.stringify({
-                    ct: 'chat',
-                    t: 'interrupt',
-                    session_id: sessionId,
-                    message_id: currentWsMessageId.value || undefined
-                }));
-            } catch (err) {
-                console.error('发送 websocket interrupt 失败:', err);
-            }
-        }
-
-        try {
-            await currentReader.value?.cancel();
-        } catch {
-            // ignore reader cancel failures
-        }
-        currentReader.value = null;
-        currentRequestController.value?.abort();
-        currentRequestController.value = null;
-
-        isStreaming.value = false;
-    }
-
-    function cleanupTransport() {
-        closeChatWebSocket();
-    }
+  function normalizeHistoryRecord(record: any): ChatRecord {
+    const content = record.content || {};
+    const normalizedContent: ChatContent = {
+      type: content.type || (record.sender_id === "bot" ? "bot" : "user"),
+      message: normalizeParts(content.message || []),
+      reasoning: content.reasoning || "",
+      agentStats: content.agentStats || content.agent_stats,
+      refs: content.refs,
+    };
 
     return {
-        messages,
-        isStreaming,
-        isConvRunning,
-        enableStreaming,
-        transportMode,
-        currentSessionProject,
-        getSessionMessages,
-        sendMessage,
-        stopMessage,
-        toggleStreaming,
-        setTransportMode,
-        cleanupTransport,
-        getAttachment
+      ...record,
+      content: normalizedContent,
     };
+  }
+
+  function normalizeParts(parts: unknown): MessagePart[] {
+    if (typeof parts === "string") {
+      return parts ? [{ type: "plain", text: parts }] : [];
+    }
+    if (!Array.isArray(parts)) return [];
+    return parts.map((part: any) => {
+      if (!part || typeof part !== "object")
+        return { type: "plain", text: String(part ?? "") };
+      return part;
+    });
+  }
+
+  function startSseStream(
+    sessionId: string,
+    messageId: string,
+    parts: MessagePart[],
+    botRecord: ChatRecord,
+    enableStreaming: boolean,
+    selectedProvider: string,
+    selectedModel: string,
+  ) {
+    const abort = new AbortController();
+    activeConnections[sessionId] = {
+      sessionId,
+      messageId,
+      transport: "sse",
+      abort,
+    };
+
+    fetch("/api/chat/send", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${localStorage.getItem("token") || ""}`,
+      },
+      body: JSON.stringify({
+        session_id: sessionId,
+        message: parts.map(partToPayload),
+        enable_streaming: enableStreaming,
+        selected_provider: selectedProvider,
+        selected_model: selectedModel,
+      }),
+      signal: abort.signal,
+    })
+      .then(async (response) => {
+        if (!response.ok || !response.body) {
+          throw new Error(`SSE connection failed: ${response.status}`);
+        }
+        await readSseStream(response.body, (payload) => {
+          processStreamPayload(botRecord, payload);
+          options.onStreamUpdate?.(sessionId);
+        });
+      })
+      .catch((error) => {
+        if (abort.signal.aborted) return;
+        appendPlain(botRecord, `\n\n${String(error?.message || error)}`);
+        console.error("SSE chat failed:", error);
+      })
+      .finally(async () => {
+        delete activeConnections[sessionId];
+        await options.onSessionsChanged?.();
+      });
+  }
+
+  function startWebSocketStream(
+    sessionId: string,
+    messageId: string,
+    parts: MessagePart[],
+    botRecord: ChatRecord,
+    enableStreaming: boolean,
+    selectedProvider: string,
+    selectedModel: string,
+  ) {
+    const token = encodeURIComponent(localStorage.getItem("token") || "");
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const ws = new WebSocket(
+      `${protocol}//${window.location.host}/api/unified_chat/ws?token=${token}`,
+    );
+
+    activeConnections[sessionId] = {
+      sessionId,
+      messageId,
+      transport: "websocket",
+      ws,
+    };
+
+    ws.onopen = () => {
+      ws.send(
+        JSON.stringify({
+          ct: "chat",
+          t: "send",
+          session_id: sessionId,
+          message_id: messageId,
+          message: parts.map(partToPayload),
+          enable_streaming: enableStreaming,
+          selected_provider: selectedProvider,
+          selected_model: selectedModel,
+        }),
+      );
+    };
+    ws.onmessage = (event) => {
+      try {
+        const payload = JSON.parse(event.data);
+        processStreamPayload(botRecord, payload);
+        options.onStreamUpdate?.(sessionId);
+        if (payload.type === "end" || payload.t === "end") {
+          ws.close();
+        }
+      } catch (error) {
+        console.error("Failed to parse WebSocket payload:", error);
+      }
+    };
+    ws.onerror = () => {
+      appendPlain(botRecord, "\n\nWebSocket connection failed.");
+    };
+    ws.onclose = async () => {
+      delete activeConnections[sessionId];
+      await options.onSessionsChanged?.();
+    };
+  }
+
+  function processStreamPayload(botRecord: ChatRecord, payload: any) {
+    const normalized =
+      payload?.ct === "chat"
+        ? { ...payload, type: payload.type || payload.t }
+        : payload;
+    const msgType = normalized?.type || normalized?.t;
+    const chainType = normalized?.chain_type;
+    const data = normalized?.data ?? "";
+
+    if (msgType === "session_id" || msgType === "session_bound") return;
+    if (msgType === "message_saved") {
+      markMessageStarted(botRecord);
+      botRecord.id = data?.id || botRecord.id;
+      botRecord.created_at = data?.created_at || botRecord.created_at;
+      if (data?.refs) {
+        messageContent(botRecord).refs = data.refs;
+      }
+      return;
+    }
+    if (msgType === "agent_stats" || chainType === "agent_stats") {
+      markMessageStarted(botRecord);
+      messageContent(botRecord).agentStats = data;
+      return;
+    }
+    if (msgType === "error") {
+      markMessageStarted(botRecord);
+      appendPlain(botRecord, `\n\n${String(data)}`);
+      return;
+    }
+    if (msgType === "complete" || msgType === "break") {
+      markMessageStarted(botRecord);
+      const finalText = payloadText(data);
+      if (finalText && !hasPlainText(botRecord)) {
+        appendPlain(botRecord, finalText, false);
+      }
+      return;
+    }
+    if (msgType === "end") {
+      markMessageStarted(botRecord);
+      return;
+    }
+
+    if (msgType === "plain") {
+      markMessageStarted(botRecord);
+      if (chainType === "reasoning") {
+        messageContent(botRecord).reasoning = `${
+          messageContent(botRecord).reasoning || ""
+        }${payloadText(data)}`;
+        return;
+      }
+      if (chainType === "tool_call") {
+        upsertToolCall(botRecord, parseJsonSafe(data));
+        return;
+      }
+      if (chainType === "tool_call_result") {
+        finishToolCall(botRecord, parseJsonSafe(data));
+        return;
+      }
+      appendPlain(botRecord, payloadText(data), normalized.streaming !== false);
+      return;
+    }
+
+    if (["image", "record", "file", "video"].includes(msgType)) {
+      markMessageStarted(botRecord);
+      const filename = String(data)
+        .replace("[IMAGE]", "")
+        .replace("[RECORD]", "")
+        .replace("[FILE]", "")
+        .replace("[VIDEO]", "")
+        .split("|", 1)[0];
+      messageContent(botRecord).message.push({ type: msgType, filename });
+    }
+  }
+
+  return {
+    loadingMessages,
+    sending,
+    messagesBySession,
+    loadedSessions,
+    sessionProjects,
+    activeMessages,
+    isSessionRunning,
+    isUserMessage,
+    isMessageStreaming,
+    messageContent,
+    messageParts,
+    loadSessionMessages,
+    createLocalExchange,
+    sendMessageStream,
+    stopSession,
+    cleanupConnections,
+  };
+}
+
+function stripUploadOnlyFields(part: MessagePart): MessagePart {
+  const copied = { ...part };
+  delete copied.path;
+  return copied;
+}
+
+function normalizeSessionProject(value: unknown): ChatSessionProject | null {
+  if (!value || typeof value !== "object") return null;
+  const project = value as Record<string, unknown>;
+  if (
+    typeof project.project_id !== "string" ||
+    typeof project.title !== "string"
+  ) {
+    return null;
+  }
+
+  return {
+    project_id: project.project_id,
+    title: project.title,
+    emoji: typeof project.emoji === "string" ? project.emoji : undefined,
+  };
+}
+
+function partToPayload(part: MessagePart) {
+  if (part.type === "plain") return { type: "plain", text: part.text || "" };
+  if (part.type === "reply") {
+    return {
+      type: "reply",
+      message_id: part.message_id,
+      selected_text: part.selected_text || "",
+    };
+  }
+  return {
+    type: part.type,
+    attachment_id: part.attachment_id,
+    filename: part.filename,
+  };
+}
+
+async function readSseStream(
+  body: ReadableStream<Uint8Array>,
+  onPayload: (payload: any) => void,
+) {
+  const reader = body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+
+  while (true) {
+    const { value, done } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+    const events = buffer.split("\n\n");
+    buffer = events.pop() || "";
+
+    for (const event of events) {
+      const data = event
+        .split("\n")
+        .filter((line) => line.startsWith("data:"))
+        .map((line) => line.slice(5).trimStart())
+        .join("\n");
+      if (!data) continue;
+      try {
+        onPayload(JSON.parse(data));
+      } catch (error) {
+        console.error("Failed to parse SSE payload:", error, data);
+      }
+    }
+  }
+}
+
+function appendPlain(record: ChatRecord, text: string, append = true) {
+  markMessageStarted(record);
+  const content = record.content;
+  let last = content.message[content.message.length - 1];
+  if (!last || last.type !== "plain") {
+    last = { type: "plain", text: "" };
+    content.message.push(last);
+  }
+  last.text = append ? `${last.text || ""}${text}` : text;
+}
+
+function upsertToolCall(record: ChatRecord, toolCall: any) {
+  markMessageStarted(record);
+  if (!toolCall || typeof toolCall !== "object") return;
+  record.content.message.push({ type: "tool_call", tool_calls: [toolCall] });
+}
+
+function finishToolCall(record: ChatRecord, result: any) {
+  markMessageStarted(record);
+  if (!result || typeof result !== "object") return;
+  const targetId = result.id;
+  for (const part of record.content.message) {
+    if (part.type !== "tool_call" || !Array.isArray(part.tool_calls)) continue;
+    const tool = part.tool_calls.find((item) => item.id === targetId);
+    if (tool) {
+      tool.result = result.result;
+      tool.finished_ts = result.ts || Date.now() / 1000;
+      return;
+    }
+  }
+}
+
+function markMessageStarted(record: ChatRecord) {
+  record.content.isLoading = false;
+}
+
+function hasPlainText(record: ChatRecord) {
+  return record.content.message.some(
+    (part) =>
+      part.type === "plain" && typeof part.text === "string" && part.text,
+  );
+}
+
+function payloadText(value: unknown) {
+  if (typeof value === "string") return value;
+  if (value == null) return "";
+  if (typeof value === "object") {
+    const payload = value as Record<string, unknown>;
+    if (typeof payload.text === "string") return payload.text;
+    if (typeof payload.content === "string") return payload.content;
+    if (typeof payload.message === "string") return payload.message;
+  }
+  return String(value);
+}
+
+function parseJsonSafe(value: unknown) {
+  if (typeof value !== "string") return value;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
 }
diff --git a/dashboard/src/i18n/locales/en-US/features/chat.json b/dashboard/src/i18n/locales/en-US/features/chat.json
index 23dbf675e..4b87cc8ab 100644
--- a/dashboard/src/i18n/locales/en-US/features/chat.json
+++ b/dashboard/src/i18n/locales/en-US/features/chat.json
@@ -56,6 +56,10 @@
   "ipython": {
     "output": "Output"
   },
+  "toolStatus": {
+    "done": "Done",
+    "running": "Running"
+  },
   "conversation": {
     "newConversation": "New Conversation",
     "noHistory": "No conversation history",
@@ -158,4 +162,4 @@
     "partialFailure": "{failed} of {total} conversations failed to delete",
     "requestFailed": "Failed to delete conversations. Please try again."
   }
-} 
+}
diff --git a/dashboard/src/i18n/locales/ru-RU/features/chat.json b/dashboard/src/i18n/locales/ru-RU/features/chat.json
index 40d74852b..cf574a1a0 100644
--- a/dashboard/src/i18n/locales/ru-RU/features/chat.json
+++ b/dashboard/src/i18n/locales/ru-RU/features/chat.json
@@ -1,151 +1,155 @@
 {
-    "title": "Давай пообщаемся!",
-    "subtitle": "Общение с AI-помощником",
-    "input": {
-        "placeholder": "Введите сообщение...",
-        "send": "Отправить",
-        "clear": "Очистить",
-        "upload": "Загрузить файл",
-        "voice": "Голосовой ввод",
-        "recordingPrompt": "Запись... говорите",
-        "chatPrompt": "Давай пообщаемся!",
-        "dropToUpload": "Отпустите, чтобы загрузить файл",
-        "stopGenerating": "Остановить генерацию"
-    },
-    "message": {
-        "user": "Вы",
-        "assistant": "Ассистент",
-        "system": "Система",
-        "error": "Ошибка в сообщении",
-        "loading": "Думаю..."
-    },
-    "voice": {
-        "start": "Начать запись",
-        "stop": "Стоп",
-        "recording": "Запись",
-        "processing": "Обработка...",
-        "error": "Ошибка записи",
-        "listening": "Слушаю...",
-        "speaking": "Говорю",
-        "startRecording": "Начать голосовой ввод",
-        "liveMode": "Общение в реальном времени"
-    },
-    "welcome": {
-        "title": "Добро пожаловать в AstrBot",
-        "subtitle": "Ваш умный помощник",
-        "quickActions": "Быстрые действия",
-        "examples": "Примеры вопросов"
-    },
-    "actions": {
-        "copy": "Копировать",
-        "regenerate": "Перегенерировать",
-        "like": "Нравится",
-        "dislike": "Не нравится",
-        "share": "Поделиться",
-        "newChat": "Новый чат",
-        "deleteChat": "Удалить чат",
-        "editTitle": "Изменить заголовок",
-        "fullscreen": "На весь экран",
-        "exitFullscreen": "Выход из полноэкранного режима",
-        "reply": "Ответить",
-        "providerConfig": "Настройки AI",
-        "toolsUsed": "Использованные инструменты",
-        "toolCallUsed": "Использован инструмент {name}",
-        "pythonCodeAnalysis": "Использован анализ кода Python"
-    },
-    "ipython": {
-        "output": "Вывод"
-    },
-    "conversation": {
-        "newConversation": "Новый чат",
-        "noHistory": "История диалогов пуста",
-        "systemStatus": "Статус системы",
-        "llmService": "Сервис LLM",
-        "speechToText": "Преобразование речи",
-        "editDisplayName": "Изменить имя чата",
-        "displayName": "Имя чата",
-        "displayNameUpdated": "Имя чата обновлено",
-        "displayNameUpdateFailed": "Не удалось обновить имя чата",
-        "confirmDelete": "Вы уверены, что хотите удалить «{name}»? Это действие необратимо."
-    },
-    "modes": {
-        "darkMode": "Темная тема",
-        "lightMode": "Светлая тема"
-    },
-    "shortcuts": {
-        "help": "Справка",
-        "voiceRecord": "Запись голоса",
-        "pasteImage": "Вставить изображение",
-        "sendKey": {
-            "title": "Клавиша отправки",
-            "enterToSend": "Enter для отправки",
-            "shiftEnterToSend": "Shift+Enter для отправки"
-        }
-    },
-    "streaming": {
-        "enabled": "Потоковый ответ включен",
-        "disabled": "Потоковый ответ выключен",
-        "on": "Поток",
-        "off": "Обычный"
-    },
-    "transport": {
-        "title": "Протокол передачи",
-        "sse": "SSE",
-        "websocket": "WebSocket"
-    },
-    "config": {
-        "title": "Конфигурация"
-    },
-    "reasoning": {
-        "thinking": "Рассуждение"
-    },
-    "reply": {
-        "replyTo": "В ответ на",
-        "notFound": "Сообщение не найдено"
-    },
-    "project": {
-        "title": "Проект",
-        "create": "Создать проект",
-        "edit": "Изменить проект",
-        "name": "Имя проекта",
-        "emoji": "Иконка (Emoji)",
-        "description": "Описание проекта (опционально)",
-        "noSessions": "В этом проекте пока нет диалогов",
-        "confirmDelete": "Вы уверены, что хотите удалить проект «{title}»? Диалоги внутри проекта не будут удалены."
-    },
-    "time": {
-        "today": "Сегодня",
-        "yesterday": "Вчера"
-    },
-    "stats": {
-        "tokens": "Токены",
-        "inputTokens": "Входящие",
-        "outputTokens": "Исходящие",
-        "cachedTokens": "Кэшированные",
-        "duration": "Время",
-        "ttft": "Время до первого токена"
-    },
-    "refs": {
-        "title": "Ссылки",
-        "sources": "Источники"
-    },
-    "connection": {
-        "title": "Статус подключения",
-        "message": "Системе необходимо переустановить соединение с чатом.",
-        "reasons": "Это может быть вызвано следующими причинами:",
-        "reasonWindowResize": "Изменение размера окна (нормально)",
-        "reasonMultipleTabs": "Страница чата открыта в другой вкладке",
-        "reasonNetworkIssue": "Временная проблема с сетью",
-        "notice": "Примечание: для стабильной работы допускается только одно активное соединение. Если вы используете чат в нескольких вкладках, рекомендуем оставить только одну.",
-        "understand": "Понятно",
-        "status": {
-            "reconnecting": "Переподключение...",
-            "reconnected": "Соединение восстановлено",
-            "failed": "Ошибка подключения, обновите страницу"
-        }
-    },
-    "errors": {
-        "sendMessageFailed": "Ошибка отправки сообщения, попробуйте еще раз",
-        "createSessionFailed": "Ошибка создания сессии, обновите страницу"
+  "title": "Давай пообщаемся!",
+  "subtitle": "Общение с AI-помощником",
+  "input": {
+    "placeholder": "Введите сообщение...",
+    "send": "Отправить",
+    "clear": "Очистить",
+    "upload": "Загрузить файл",
+    "voice": "Голосовой ввод",
+    "recordingPrompt": "Запись... говорите",
+    "chatPrompt": "Давай пообщаемся!",
+    "dropToUpload": "Отпустите, чтобы загрузить файл",
+    "stopGenerating": "Остановить генерацию"
+  },
+  "message": {
+    "user": "Вы",
+    "assistant": "Ассистент",
+    "system": "Система",
+    "error": "Ошибка в сообщении",
+    "loading": "Думаю..."
+  },
+  "voice": {
+    "start": "Начать запись",
+    "stop": "Стоп",
+    "recording": "Запись",
+    "processing": "Обработка...",
+    "error": "Ошибка записи",
+    "listening": "Слушаю...",
+    "speaking": "Говорю",
+    "startRecording": "Начать голосовой ввод",
+    "liveMode": "Общение в реальном времени"
+  },
+  "welcome": {
+    "title": "Добро пожаловать в AstrBot",
+    "subtitle": "Ваш умный помощник",
+    "quickActions": "Быстрые действия",
+    "examples": "Примеры вопросов"
+  },
+  "actions": {
+    "copy": "Копировать",
+    "regenerate": "Перегенерировать",
+    "like": "Нравится",
+    "dislike": "Не нравится",
+    "share": "Поделиться",
+    "newChat": "Новый чат",
+    "deleteChat": "Удалить чат",
+    "editTitle": "Изменить заголовок",
+    "fullscreen": "На весь экран",
+    "exitFullscreen": "Выход из полноэкранного режима",
+    "reply": "Ответить",
+    "providerConfig": "Настройки AI",
+    "toolsUsed": "Использованные инструменты",
+    "toolCallUsed": "Использован инструмент {name}",
+    "pythonCodeAnalysis": "Использован анализ кода Python"
+  },
+  "ipython": {
+    "output": "Вывод"
+  },
+  "toolStatus": {
+    "done": "Готово",
+    "running": "Выполняется"
+  },
+  "conversation": {
+    "newConversation": "Новый чат",
+    "noHistory": "История диалогов пуста",
+    "systemStatus": "Статус системы",
+    "llmService": "Сервис LLM",
+    "speechToText": "Преобразование речи",
+    "editDisplayName": "Изменить имя чата",
+    "displayName": "Имя чата",
+    "displayNameUpdated": "Имя чата обновлено",
+    "displayNameUpdateFailed": "Не удалось обновить имя чата",
+    "confirmDelete": "Вы уверены, что хотите удалить «{name}»? Это действие необратимо."
+  },
+  "modes": {
+    "darkMode": "Темная тема",
+    "lightMode": "Светлая тема"
+  },
+  "shortcuts": {
+    "help": "Справка",
+    "voiceRecord": "Запись голоса",
+    "pasteImage": "Вставить изображение",
+    "sendKey": {
+      "title": "Клавиша отправки",
+      "enterToSend": "Enter для отправки",
+      "shiftEnterToSend": "Shift+Enter для отправки"
     }
+  },
+  "streaming": {
+    "enabled": "Потоковый ответ включен",
+    "disabled": "Потоковый ответ выключен",
+    "on": "Поток",
+    "off": "Обычный"
+  },
+  "transport": {
+    "title": "Протокол передачи",
+    "sse": "SSE",
+    "websocket": "WebSocket"
+  },
+  "config": {
+    "title": "Конфигурация"
+  },
+  "reasoning": {
+    "thinking": "Рассуждение"
+  },
+  "reply": {
+    "replyTo": "В ответ на",
+    "notFound": "Сообщение не найдено"
+  },
+  "project": {
+    "title": "Проект",
+    "create": "Создать проект",
+    "edit": "Изменить проект",
+    "name": "Имя проекта",
+    "emoji": "Иконка (Emoji)",
+    "description": "Описание проекта (опционально)",
+    "noSessions": "В этом проекте пока нет диалогов",
+    "confirmDelete": "Вы уверены, что хотите удалить проект «{title}»? Диалоги внутри проекта не будут удалены."
+  },
+  "time": {
+    "today": "Сегодня",
+    "yesterday": "Вчера"
+  },
+  "stats": {
+    "tokens": "Токены",
+    "inputTokens": "Входящие",
+    "outputTokens": "Исходящие",
+    "cachedTokens": "Кэшированные",
+    "duration": "Время",
+    "ttft": "Время до первого токена"
+  },
+  "refs": {
+    "title": "Ссылки",
+    "sources": "Источники"
+  },
+  "connection": {
+    "title": "Статус подключения",
+    "message": "Системе необходимо переустановить соединение с чатом.",
+    "reasons": "Это может быть вызвано следующими причинами:",
+    "reasonWindowResize": "Изменение размера окна (нормально)",
+    "reasonMultipleTabs": "Страница чата открыта в другой вкладке",
+    "reasonNetworkIssue": "Временная проблема с сетью",
+    "notice": "Примечание: для стабильной работы допускается только одно активное соединение. Если вы используете чат в нескольких вкладках, рекомендуем оставить только одну.",
+    "understand": "Понятно",
+    "status": {
+      "reconnecting": "Переподключение...",
+      "reconnected": "Соединение восстановлено",
+      "failed": "Ошибка подключения, обновите страницу"
+    }
+  },
+  "errors": {
+    "sendMessageFailed": "Ошибка отправки сообщения, попробуйте еще раз",
+    "createSessionFailed": "Ошибка создания сессии, обновите страницу"
+  }
 }
diff --git a/dashboard/src/i18n/locales/zh-CN/features/chat.json b/dashboard/src/i18n/locales/zh-CN/features/chat.json
index 24ea2a84b..0bb669382 100644
--- a/dashboard/src/i18n/locales/zh-CN/features/chat.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/chat.json
@@ -56,6 +56,10 @@
   "ipython": {
     "output": "输出"
   },
+  "toolStatus": {
+    "done": "已完成",
+    "running": "运行中"
+  },
   "conversation": {
     "newConversation": "新的聊天",
     "noHistory": "暂无对话历史",
@@ -158,4 +162,4 @@
     "partialFailure": "{total} 个对话中有 {failed} 个删除失败",
     "requestFailed": "删除对话失败，请重试。"
   }
-} 
+}