From 293c41f039db1d91dea66717fe01aff7d32cf372 Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <shaohu.zhang@fit2cloud.com>
Date: Tue, 21 Jul 2026 11:24:26 +0800
Subject: [PATCH 1/2] cache

---
 apps/application/urls.py                      |   3 +
 apps/application/views/application_chat.py    |  68 ++-
 ui/src/components/conversation/api/index.ts   |  68 ++-
 .../conversation/chat-panel/index.vue         | 489 +++++++++---------
 .../components/conversation/common/types.ts   |  22 +
 .../common/use-chat-store/chat/index.ts       | 130 +++++
 .../common/use-chat-store/debug/index.ts      | 135 +++++
 .../common/use-chat-store/index.ts            |   6 +
 .../shared/use-conversation-crud.ts           |  44 ++
 .../shared/use-message-pagination.ts          |  72 +++
 .../shared/use-stream-manager.ts              |  63 +++
 ui/src/components/conversation/composable.ts  | 353 -------------
 .../components/conversation/content/index.vue |   4 +-
 .../conversation/content/items/question.vue   | 148 ++++++
 ui/src/components/conversation/index.vue      | 324 ++++++------
 .../components/conversation/sidebar/index.vue |   3 -
 ui/src/views/application-workflow/index.vue   |   2 -
 17 files changed, 1157 insertions(+), 777 deletions(-)
 create mode 100644 ui/src/components/conversation/common/types.ts
 create mode 100644 ui/src/components/conversation/common/use-chat-store/chat/index.ts
 create mode 100644 ui/src/components/conversation/common/use-chat-store/debug/index.ts
 create mode 100644 ui/src/components/conversation/common/use-chat-store/index.ts
 create mode 100644 ui/src/components/conversation/common/use-chat-store/shared/use-conversation-crud.ts
 create mode 100644 ui/src/components/conversation/common/use-chat-store/shared/use-message-pagination.ts
 create mode 100644 ui/src/components/conversation/common/use-chat-store/shared/use-stream-manager.ts
 delete mode 100644 ui/src/components/conversation/composable.ts
 create mode 100644 ui/src/components/conversation/content/items/question.vue

diff --git a/apps/application/urls.py b/apps/application/urls.py
index 1c473b63935..976fb1fbb0c 100644
--- a/apps/application/urls.py
+++ b/apps/application/urls.py
@@ -44,4 +44,7 @@
     path('workspace/<str:workspace_id>/application/<str:application_id>/mcp_tools', views.McpServers.as_view()),
     path('workspace/<str:workspace_id>/application/<str:application_id>/model/<str:model_id>/prompt_generate', views.PromptGenerateView.as_view()),
     path('chat_message/<str:chat_id>', views.ChatView.as_view()),
+    path('workspace/<str:workspace_id>/application/<str:application_id>/historical_conversation/<int:current_page>/<int:page_size>', views.DebugHistoricalConversation.PageView.as_view()),
+    path('workspace/<str:workspace_id>/application/<str:application_id>/historical_conversation/<str:chat_id>', views.DebugHistoricalConversation.Operate.as_view()),
+    path('workspace/<str:workspace_id>/application/<str:application_id>/historical_conversation_record/<str:chat_id>/<int:current_page>/<int:page_size>', views.DebugHistoricalConversation.RecordPageView.as_view()),
 ]
diff --git a/apps/application/views/application_chat.py b/apps/application/views/application_chat.py
index d60206ded5a..664f3c37eac 100644
--- a/apps/application/views/application_chat.py
+++ b/apps/application/views/application_chat.py
@@ -176,4 +176,70 @@ class PromptGenerateView(APIView):
     @log(menu='Application', operate='Generate prompt',
          get_operation_object=lambda r, k: get_application_operation_object(k.get('application_id')))
     def post(self, request: Request, workspace_id: str, model_id:str, application_id: str):
-        return PromptGenerateSerializer(data={'workspace_id': workspace_id, 'model_id': model_id, 'application_id': application_id}).generate_prompt(instance=request.data)
\ No newline at end of file
+        return PromptGenerateSerializer(data={'workspace_id': workspace_id, 'model_id': model_id, 'application_id': application_id}).generate_prompt(instance=request.data)
+
+
+class DebugHistoricalConversation(APIView):
+    authentication_classes = [TokenAuth]
+
+    class PageView(APIView):
+        authentication_classes = [TokenAuth]
+
+        def get(self, request: Request, workspace_id: str, application_id: str, current_page: int, page_size: int):
+            from chat.serializers.chat_record import HistoricalConversationSerializer, page_search, HistoryChatModel
+            from django.db.models import QuerySet
+            from application.models import Chat
+
+            queryset = QuerySet(Chat).filter(
+                application_id=application_id,
+                is_deleted=False
+            ).order_by('-update_time', 'id')
+
+            return result.success(
+                page_search(current_page, page_size, queryset, lambda r: HistoryChatModel(r).data)
+            )
+
+    class RecordPageView(APIView):
+        authentication_classes = [TokenAuth]
+
+        def get(self, request: Request, workspace_id: str, application_id: str, chat_id: str, current_page: int, page_size: int):
+            from chat.serializers.chat_record import HistoricalConversationRecordSerializer
+
+            serializer = HistoricalConversationRecordSerializer(
+                data={
+                    'application_id': application_id,
+                    'chat_id': chat_id,
+                    'chat_user_id': str(uuid.uuid7()),
+                }
+            )
+            try:
+                return result.success(serializer.page(current_page, page_size))
+            except Exception:
+                from django.db.models import QuerySet
+                from application.models import ChatRecord
+                from common.db.search import page_search
+                from application.serializers.application_chat_record import ChatRecordSerializerModel
+
+                queryset = QuerySet(ChatRecord).filter(
+                    chat_id=chat_id,
+                ).order_by('create_time', 'id')
+
+                return result.success(
+                    page_search(current_page, page_size, queryset, lambda r: ChatRecordSerializerModel(r).data)
+                )
+
+    class Operate(APIView):
+        authentication_classes = [TokenAuth]
+
+        def delete(self, request: Request, workspace_id: str, application_id: str, chat_id: str):
+            from django.db.models import QuerySet
+            from application.models import Chat
+            QuerySet(Chat).filter(id=chat_id, application_id=application_id).update(is_deleted=True)
+            return result.success(True)
+
+        def put(self, request: Request, workspace_id: str, application_id: str, chat_id: str):
+            from django.db.models import QuerySet
+            from application.models import Chat
+            abstract = request.data.get('abstract', '')
+            QuerySet(Chat).filter(id=chat_id, application_id=application_id).update(abstract=abstract)
+            return result.success(True)
\ No newline at end of file
diff --git a/ui/src/components/conversation/api/index.ts b/ui/src/components/conversation/api/index.ts
index 382b6bc97bb..b8f4f5771ff 100644
--- a/ui/src/components/conversation/api/index.ts
+++ b/ui/src/components/conversation/api/index.ts
@@ -1,5 +1,5 @@
-import { get as adminGet, postStream as adminPostStream, del as adminDel, put as adminPut } from '@/request/index'
-import { get as chatGet, postStream as chatPostStream, del as chatDel, put as chatPut } from '@/request/chat/index'
+import { get as adminGet, postStream as adminPostStream, del as adminDel, put as adminPut, post as adminPost } from '@/request/index'
+import { get as chatGet, postStream as chatPostStream, del as chatDel, put as chatPut, post as chatPost } from '@/request/chat/index'
 import useStore from '@/stores'
 
 const adminPrefix = (window.MaxKB?.prefix || '/admin') + '/api'
@@ -14,17 +14,52 @@ export const debugApi = {
   chat: (chatId: string, data: any) =>
     adminPostStream(`${adminPrefix}/chat_message/${chatId}`, data),
 
-  history: (page: number, size: number) =>
-    adminGet(`/historical_conversation/${page}/${size}`),
+  history: (page: number, size: number, applicationId?: string) => {
+    const { user } = useStore()
+    const wsId = user.getWorkspaceId()
+    if (applicationId) {
+      return adminGet(`/workspace/${wsId}/application/${applicationId}/historical_conversation/${page}/${size}`)
+    }
+    return adminGet(`/historical_conversation/${page}/${size}`)
+  },
 
-  records: (chatId: string, page: number, size: number) =>
-    adminGet(`/historical_conversation_record/${chatId}/${page}/${size}`),
+  records: (chatId: string, page: number, size: number, applicationId?: string) => {
+    const { user } = useStore()
+    const wsId = user.getWorkspaceId()
+    if (applicationId) {
+      return adminGet(`/workspace/${wsId}/application/${applicationId}/historical_conversation_record/${chatId}/${page}/${size}`)
+    }
+    return adminGet(`/historical_conversation_record/${chatId}/${page}/${size}`)
+  },
 
-  deleteChat: (chatId: string) =>
-    adminDel(`/historical_conversation/${chatId}`),
+  deleteChat: (chatId: string, applicationId?: string) => {
+    const { user } = useStore()
+    const wsId = user.getWorkspaceId()
+    if (applicationId) {
+      return adminDel(`/workspace/${wsId}/application/${applicationId}/historical_conversation/${chatId}`)
+    }
+    return adminDel(`/historical_conversation/${chatId}`)
+  },
 
-  modifyChat: (chatId: string, data: any) =>
-    adminPut(`/historical_conversation/${chatId}`, data)
+  modifyChat: (chatId: string, data: any, applicationId?: string) => {
+    const { user } = useStore()
+    const wsId = user.getWorkspaceId()
+    if (applicationId) {
+      return adminPut(`/workspace/${wsId}/application/${applicationId}/historical_conversation/${chatId}`, data)
+    }
+    return adminPut(`/historical_conversation/${chatId}`, data)
+  },
+
+  uploadFile: (file: File, chatId: string) => {
+    const fd = new FormData()
+    fd.append('file', file)
+    fd.append('source_id', chatId)
+    fd.append('source_type', 'CHAT')
+    return adminPost('/oss/file', fd)
+  },
+
+  speechToText: (data: any) =>
+    adminPost(`/speech_to_text`, data),
 }
 
 export const chatApi = {
@@ -44,7 +79,18 @@ export const chatApi = {
     chatDel(`/historical_conversation/${chatId}`),
 
   modifyChat: (chatId: string, data: any) =>
-    chatPut(`/historical_conversation/${chatId}`, data)
+    chatPut(`/historical_conversation/${chatId}`, data),
+
+  uploadFile: (file: File, chatId: string) => {
+    const fd = new FormData()
+    fd.append('file', file)
+    fd.append('source_id', chatId)
+    fd.append('source_type', 'CHAT')
+    return chatPost('/oss/file', fd)
+  },
+
+  speechToText: (data: any) =>
+    chatPost(`/speech_to_text`, data),
 }
 
 export type ChatType = 'CHAT' | 'DEBUG'
diff --git a/ui/src/components/conversation/chat-panel/index.vue b/ui/src/components/conversation/chat-panel/index.vue
index af280128128..ff50e1595dc 100644
--- a/ui/src/components/conversation/chat-panel/index.vue
+++ b/ui/src/components/conversation/chat-panel/index.vue
@@ -1,63 +1,93 @@
 <template>
-  <main class="chat-panel">
-    <header class="panel-header">
-      <button class="header-btn" @click="chat.toggleSidebar?.()">
+  <main class="chat-panel" @drop.prevent="handleDrop" @dragover.prevent>
+    <header v-if="showHeader" class="panel-header">
+      <button class="header-btn" @click="$emit('toggle')">
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
           <path d="M2 4h12M2 8h12M2 12h12" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
         </svg>
       </button>
       <div class="header-info">
-        <img v-if="icon" :src="icon" class="header-icon" />
-        <span class="header-title">{{ title || '新对话' }}</span>
+        <img v-if="appInfo?.icon" :src="appInfo.icon" class="header-icon" />
+        <div class="header-text">
+          <span v-if="appInfo?.name" class="header-app-name">{{ appInfo.name }}</span>
+          <span class="header-title">{{ currentConversation?.name || '新对话' }}</span>
+        </div>
       </div>
       <slot name="header" />
     </header>
 
     <div ref="msgBoxRef" class="panel-messages" @scroll="onScroll">
-      <div v-if="chat.messages.value.length === 0 && !chat.msgLoading.value" class="welcome">
-        <p class="welcome-title">AI 助手</p>
+      <div v-if="messages.length === 0 && !msgLoading" class="welcome">
+        <p class="welcome-title">{{ appInfo?.name || 'AI 助手' }}</p>
         <p class="welcome-sub">有什么可以帮你的？</p>
       </div>
 
       <template v-else>
         <div
-          v-for="(msg, i) in chat.messages.value"
+          v-for="(msg, i) in messages"
           :key="msg.id || i"
           :class="['msg-row', msg.role === 'USER' ? 'user' : 'assistant']"
         >
           <ContentList :content-list="msg.content" />
         </div>
 
-        <div v-if="chat.streamLoading.value" class="msg-row assistant">
+        <div v-if="streamLoading" class="msg-row assistant">
           <Loading :size="18" />
         </div>
       </template>
     </div>
 
     <footer class="panel-input">
+      <div v-if="fileList.length" class="file-thumbs">
+        <div v-for="(f, i) in fileList" :key="f.uid" class="file-thumb">
+          <img v-if="f.previewUrl" :src="f.previewUrl" class="thumb-img" />
+          <span v-else class="thumb-icon">📎</span>
+          <span class="thumb-name">{{ f.name }}</span>
+          <button class="thumb-rm" @click="removeFile(i)">✕</button>
+        </div>
+      </div>
+
       <div class="input-wrapper" :class="{ focused }">
+        <input
+          ref="fileInputRef"
+          type="file"
+          multiple
+          :accept="acceptList"
+          style="display: none"
+          @change="handleFileSelect"
+        />
         <textarea
           ref="inputRef"
           v-model="question.content"
-          :disabled="chat.streamLoading.value"
-          :placeholder="chat.streamLoading.value ? '正在回复中...' : '输入消息...'"
+          :disabled="streamLoading"
+          :placeholder="placeholder"
           @keydown="onKeydown"
+          @paste="handlePaste"
           @focus="focused = true"
           @blur="focused = false"
           rows="1"
         />
         <button
-          v-if="!chat.streamLoading.value"
+          class="upload-btn"
+          :disabled="streamLoading"
+          @click="fileInputRef?.click()"
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path d="M14 10v2.5a1.5 1.5 0 01-1.5 1.5h-9A1.5 1.5 0 012 12.5V10M8 2v8.5M5 5l3-3 3 3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+        <button
+          v-if="!streamLoading"
           class="send-btn"
-          :class="{ active: hasContent }"
-          :disabled="!hasContent"
-          @click="conversation(question)"
+          :class="{ active: canSend }"
+          :disabled="!canSend"
+          @click="send"
         >
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
             <path d="M8 14V2M3 7l5-5 5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </button>
-        <button v-else class="send-btn stop" @click="chat.stopStream()">
+        <button v-else class="send-btn stop" @click="$emit('stop')">
           <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
             <rect x="2" y="2" width="10" height="10" rx="2" fill="currentColor"/>
           </svg>
@@ -68,141 +98,196 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, nextTick, watch, onMounted, inject, reactive } from 'vue'
+import { ref, computed, nextTick, watch, onMounted, reactive } from 'vue'
 import ContentList from '../content-list/index.vue'
 import Loading from '../loading/index.vue'
-import { Scroll, aggregators } from '../index'
-
-const props = defineProps<{
-  icon?: string
-  title?: string
+import { Scroll } from '../index'
+import type { ChatMessage } from '../common/types'
+
+const props = withDefaults(
+  defineProps<{
+    store: any
+    currentChatId?: string
+    appInfo?: { name: string; icon: string } | null
+    showHeader?: boolean
+  }>(),
+  { showHeader: true },
+)
+
+const emit = defineEmits<{
+  toggle: []
+  send: [text: string, files?: any[]]
+  stop: []
+  chatOpened: [chatId: string]
 }>()
 
-const chat = inject<any>('chat')
+const { messages, msgLoading, streamLoading, currentConversation } = props.store
 
 const focused = ref(false)
 const question = ref<any>({ content: '' })
 const inputRef = ref<HTMLTextAreaElement | null>(null)
+const fileInputRef = ref<HTMLInputElement | null>(null)
 const msgBoxRef = ref<HTMLElement | null>(null)
-
 let scroll: InstanceType<typeof Scroll> | null = null
 
-const hasContent = computed(() => question.value.content.trim())
+// ── 文件 ────────────────────────────────────────────────
+const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
+const documentExts = ['pdf', 'docx', 'txt', 'xls', 'xlsx', 'md', 'html', 'csv']
+const videoExts = ['mp4', 'avi', 'mkv', 'mov', 'flv', 'wmv']
+const audioExts = ['mp3', 'wav', 'ogg', 'aac', 'm4a']
+const acceptList = [...imageExts, ...documentExts, ...videoExts, ...audioExts].map(e => `.${e}`).join(',')
+const getExt = (name: string) => name.split('.').pop()?.toLowerCase() || ''
+const isImage = (name: string) => imageExts.includes(getExt(name))
+
+interface FileItem {
+  uid: number; name: string; size: number; raw: File
+  url?: string; file_id?: string; previewUrl?: string; uploading?: boolean
+}
+
+const fileList = ref<FileItem[]>([])
+const uploadPromises = ref<Promise<any>[]>([])
+const maxFiles = 10
+const maxSizeMB = 50
 
-// ── 创建 AI 占位消息 ──────────────────────────────────
-const createAnswerMessage = () => reactive({
-  role: 'ASSISTANT' as const,
-  content: reactive([] as any[]),
-  id: '',
-  write_ed: false,
+const placeholder = computed(() => {
+  if (streamLoading.value) return '正在回复中...'
+  return '输入消息...'
 })
 
-// ── 流式聚合 ──────────────────────────────────────────
-const getOnStream = (message: any) => {
-  const indexList: string[] = Array.isArray(message.content)
-    ? message.content.map((c: any) => c.id + '_' + c.type)
-    : []
+const canSend = computed(() => question.value.content.trim() && !streamLoading.value)
 
-  return (chunk: any) => {
-    console.log('[onStream] chunk:', chunk)
-    console.log('[onStream] message.content before:', JSON.stringify(message.content))
+const validateFile = (file: File): boolean => {
+  if (fileList.value.length >= maxFiles) return false
+  if (file.size === 0) return false
+  if (file.size > maxSizeMB * 1024 * 1024) return false
+  return true
+}
 
-    if (!Array.isArray(chunk.content)) {
-      console.log('[onStream] chunk.content is not array:', chunk.content)
-      return
+const addFile = (file: File) => {
+  if (!validateFile(file)) return
+  const item: FileItem = reactive({
+    uid: Date.now() + Math.random(),
+    name: file.name,
+    size: file.size,
+    raw: file,
+    uploading: true,
+  })
+  if (isImage(file.name)) item.previewUrl = URL.createObjectURL(file)
+  fileList.value.push(item)
+
+  const uploadPromise = (async () => {
+    try {
+      let cid = props.currentChatId
+      if (!cid) {
+        cid = await props.store.openChat()
+        emit('chatOpened', cid)
+      }
+      const result = await props.store.uploadFile(file, cid)
+      item.url = result.url
+      const parts = result.url.split('/')
+      item.file_id = parts[parts.length - 1]
+    } catch (e) {
+      console.error('upload failed:', e)
+    } finally {
+      item.uploading = false
     }
+  })()
 
-    chunk.content.forEach((content: any) => {
-      const id = content.id + '_' + content.type
-      let i = indexList.indexOf(id)
+  uploadPromises.value.push(uploadPromise)
+  uploadPromise.finally(() => {
+    uploadPromises.value = uploadPromises.value.filter(p => p !== uploadPromise)
+  })
+}
 
-      if (i < 0) {
-        i = indexList.length
-        indexList.push(id)
-      }
+const removeFile = (index: number) => {
+  const item = fileList.value[index]
+  if (item.previewUrl) URL.revokeObjectURL(item.previewUrl)
+  fileList.value.splice(index, 1)
+}
 
-      if (i < message.content.length) {
-        const aggregated = aggregators[content.type]?.(message.content[i], content)
-        console.log('[onStream] aggregated:', aggregated)
-        if (aggregated) {
-          message.content[i] = aggregated
-        }
-      } else {
-        const newItem = aggregators[content.type]?.({}, content) || content
-        console.log('[onStream] new item:', newItem)
-        message.content.push(newItem)
-      }
-    })
+const clearFiles = () => {
+  fileList.value.forEach(f => { if (f.previewUrl) URL.revokeObjectURL(f.previewUrl) })
+  fileList.value = []
+}
 
-    console.log('[onStream] message.content after:', JSON.stringify(message.content))
-    scroll?.scrollBottom()
-  }
+const handleFileSelect = (e: Event) => {
+  const input = e.target as HTMLInputElement
+  if (!input.files) return
+  Array.from(input.files).forEach(addFile)
+  input.value = ''
 }
 
-// ── 主发送函数 ────────────────────────────────────────
-const conversation = async (q: any) => {
-  if (!q.content?.trim() && !hasContent.value) return
-  if (chat.streamLoading.value) return
+const handlePaste = (e: ClipboardEvent) => {
+  const files = e.clipboardData?.files
+  if (!files?.length) return
+  e.preventDefault()
+  Array.from(files).forEach(addFile)
+}
 
-  if (!chat.currentConversation.value) {
-    await chat.openChat()
-    await nextTick()
-  }
+const handleDrop = (e: DragEvent) => {
+  const files = e.dataTransfer?.files
+  if (!files) return
+  Array.from(files).forEach(addFile)
+}
 
-  chat.pushMessage({
-    role: 'USER',
-    content: [{ type: 'QUESTION', content: q.content }],
-    id: '',
+const categorize = () => {
+  const images: any[] = []; const documents: any[] = []
+  const audio: any[] = []; const video: any[] = []; const files: any[] = []
+  fileList.value.forEach(f => {
+    const entry = { url: f.url || '', name: f.name }
+    if (isImage(f.name)) images.push(entry)
+    else if (documentExts.includes(getExt(f.name))) documents.push(entry)
+    else if (audioExts.includes(getExt(f.name))) audio.push(entry)
+    else if (videoExts.includes(getExt(f.name))) video.push(entry)
+    else files.push(entry)
   })
+  return { images, documents, audio, video, files }
+}
 
-  chat.pushMessage(createAnswerMessage())
-  const aiMsg = chat.messages.value[chat.messages.value.length - 1]
-
-  chat.startStream({
-    cid: chat.currentChatId.value,
-    request: () => chat.chat(chat.currentChatId.value, {
-      message: q.content,
-      stream: true,
-      re_chat: false,
-    }),
-    onStream: getOnStream(aiMsg),
-    onFinish: () => {},
-  })
+// ── 发送 ────────────────────────────────────────────────
+const send = async () => {
+  if (!canSend.value) return
+  if (uploadPromises.value.length) await Promise.all(uploadPromises.value)
+
+  const text = question.value.content.trim()
+  const media = categorize()
+
+  let content = text
+  if (!content) {
+    const types = [
+      media.images.length && '图片', media.documents.length && '文档',
+      media.audio.length && '音频', media.video.length && '视频', media.files.length && '文件',
+    ].filter(Boolean)
+    content = types.length > 1 ? '文件消息' : `${types[0]}消息`
+  }
 
+  emit('send', content, fileList.value.length ? fileList.value : undefined)
   question.value.content = ''
+  clearFiles()
 }
 
-// ── 键盘 ──────────────────────────────────────────────
+// ── 键盘 ────────────────────────────────────────────────
 const onKeydown = (e: KeyboardEvent) => {
-  if (e.key === 'Enter' && !e.shiftKey) {
-    e.preventDefault()
-    conversation(question.value)
-  }
+  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send() }
 }
 
-// ── 滚动 ──────────────────────────────────────────────
-const onScroll = async () => {
+// ── 滚动 ────────────────────────────────────────────────
+const onScroll = () => {
   const el = msgBoxRef.value
   if (!el || el.scrollTop > 60) return
-  if (!chat.hasMoreMsg?.value || chat.msgLoading.value) return
-  await chat.loadMoreMessages?.()
 }
 
-const scrollToBottom = () => {
-  scroll?.forceBottom()
-}
+const scrollToBottom = () => { scroll?.forceBottom() }
 
 onMounted(() => {
-  if (msgBoxRef.value) {
-    scroll = new Scroll(msgBoxRef.value)
-  }
+  if (msgBoxRef.value) scroll = new Scroll(msgBoxRef.value)
 })
 
-watch(() => chat?.messages?.value?.length, () => {
+watch(() => messages.value.length, () => {
   nextTick(() => scroll?.scrollBottom())
 })
 
-defineExpose({ scrollToBottom, conversation })
+defineExpose({ scrollToBottom })
 </script>
 
 <style scoped>
@@ -216,7 +301,6 @@ defineExpose({ scrollToBottom, conversation })
   background: var(--bg, #fff);
   overflow: hidden;
   position: relative;
-  z-index: 1;
 }
 
 .panel-header {
@@ -227,177 +311,102 @@ defineExpose({ scrollToBottom, conversation })
   padding: 0 12px;
   flex-shrink: 0;
   border-bottom: 1px solid var(--bd, #dcdfe6);
-  background: var(--bg, #fff);
-  position: relative;
-  z-index: 50;
 }
 
 .header-btn {
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
-  color: var(--t2, #606266);
-  flex-shrink: 0;
-}
-
-.header-btn:hover {
-  background: rgba(0, 0, 0, 0.05);
+  width: 32px; height: 32px; border: none; background: transparent;
+  cursor: pointer; display: flex; align-items: center; justify-content: center;
+  border-radius: 6px; color: var(--t2, #606266); flex-shrink: 0;
 }
+.header-btn:hover { background: rgba(0, 0, 0, 0.05); }
 
 .header-info {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: 1;
-  min-width: 0;
-}
-
-.header-icon {
-  width: 24px;
-  height: 24px;
-  border-radius: 6px;
-  object-fit: cover;
-  flex-shrink: 0;
-}
-
-.header-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--t1, #303133);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
 }
+.header-icon { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
+.header-text { display: flex; flex-direction: column; min-width: 0; }
+.header-app-name { font-size: 11px; font-weight: 400; color: var(--t3, #909399); line-height: 1.2; }
+.header-title { font-size: 13px; font-weight: 500; color: var(--t1, #303133); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
 .panel-messages {
-  flex: 1;
-  min-height: 0;
-  max-height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 16px;
-  scrollbar-width: thin;
-  display: block;
+  flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px;
+  scrollbar-width: thin; display: flex; flex-direction: column; align-items: center;
 }
 
 .welcome {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: 32px 16px;
-}
-
-.welcome-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--t1, #303133);
-  margin-bottom: 8px;
-}
-
-.welcome-sub {
-  font-size: 14px;
-  color: var(--t3, #909399);
+  flex: 1; display: flex; flex-direction: column; align-items: center;
+  justify-content: center; text-align: center; padding: 32px 16px;
 }
+.welcome-title { font-size: 18px; font-weight: 600; color: var(--t1, #303133); margin-bottom: 8px; }
+.welcome-sub { font-size: 14px; color: var(--t3, #909399); }
 
 .msg-row {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-bottom: 12px;
-  max-width: 680px;
-  width: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
+  display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px;
+  max-width: 680px; width: 100%; box-sizing: border-box;
 }
-
-.msg-row.user { align-items: flex-end; }
+.msg-row.user { align-items: flex-end; flex-direction: row-reverse; }
 .msg-row.assistant { align-items: flex-start; }
 
 .panel-input {
-  flex-shrink: 0;
-  padding: 12px 16px 16px;
-  background: var(--bg, #fff);
-  display: flex;
-  justify-content: center;
+  flex-shrink: 0; padding: 12px 16px 16px; background: var(--bg, #fff);
+  display: flex; flex-direction: column; align-items: center;
 }
 
-.input-wrapper {
-  width: 100%;
-  max-width: 680px;
-  display: flex;
-  align-items: flex-end;
-  gap: 8px;
-  background: #fff;
-  border: 1px solid var(--bd, #dcdfe6);
-  border-radius: 16px;
-  padding: 8px 8px 8px 16px;
-  transition: border-color 0.2s, box-shadow 0.2s;
+.file-thumbs {
+  display: flex; gap: 8px; padding: 0 0 8px; flex-wrap: wrap; width: 100%; max-width: 680px;
+}
+.file-thumb {
+  position: relative; display: flex; align-items: center; gap: 6px;
+  padding: 4px 8px; border-radius: 6px; border: 1px solid var(--bd, #dcdfe6);
+  font-size: 12px;
+}
+.thumb-img { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; }
+.thumb-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t2, #606266); }
+.thumb-rm {
+  position: absolute; top: -4px; right: -4px; width: 16px; height: 16px;
+  border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.5); color: #fff;
+  font-size: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center;
+  opacity: 0; transition: opacity 0.15s;
 }
+.file-thumb:hover .thumb-rm { opacity: 1; }
 
+.input-wrapper {
+  width: 100%; max-width: 680px; display: flex; align-items: flex-end; gap: 8px;
+  background: #fff; border: 1px solid var(--bd, #dcdfe6); border-radius: 16px;
+  padding: 8px 8px 8px 16px; transition: border-color 0.2s, box-shadow 0.2s;
+}
 .input-wrapper.focused {
   border-color: var(--el-color-primary, #3370ff);
   box-shadow: 0 0 0 2px rgba(51, 112, 255, 0.1);
 }
 
 .input-wrapper textarea {
-  flex: 1;
-  border: none;
-  outline: none;
-  resize: none;
-  font-family: inherit;
-  font-size: 14px;
-  line-height: 1.5;
-  background: transparent;
-  color: var(--t1, #303133);
-  min-height: 24px;
-  max-height: 160px;
-  padding: 4px 0;
-  word-break: break-word;
+  flex: 1; border: none; outline: none; resize: none; font-family: inherit;
+  font-size: 14px; line-height: 1.5; background: transparent;
+  color: var(--t1, #303133); min-height: 24px; max-height: 160px;
+  padding: 4px 0; word-break: break-word;
 }
+.input-wrapper textarea::placeholder { color: var(--t3, #909399); }
 
-.input-wrapper textarea::placeholder {
-  color: var(--t3, #909399);
+.upload-btn {
+  width: 32px; height: 32px; border-radius: 8px; border: none;
+  background: transparent; color: var(--t3, #909399); cursor: pointer;
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+  transition: background 0.15s, color 0.15s;
 }
+.upload-btn:hover { background: rgba(0, 0, 0, 0.05); color: var(--t2, #606266); }
+.upload-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 
 .send-btn {
-  width: 36px;
-  height: 36px;
-  border-radius: 10px;
-  border: none;
-  background: var(--bd, #dcdfe6);
-  color: var(--t3, #909399);
-  cursor: not-allowed;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+  width: 36px; height: 36px; border-radius: 10px; border: none;
+  background: var(--bd, #dcdfe6); color: var(--t3, #909399); cursor: not-allowed;
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
   transition: background 0.2s, color 0.2s, transform 0.1s;
 }
-
-.send-btn.active {
-  background: var(--t1, #303133);
-  color: #fff;
-  cursor: pointer;
-}
-
+.send-btn.active { background: var(--t1, #303133); color: #fff; cursor: pointer; }
 .send-btn.active:hover { opacity: 0.85; }
 .send-btn.active:active { transform: scale(0.92); }
-
-.send-btn.stop {
-  background: #ef4444;
-  color: #fff;
-  cursor: pointer;
-}
-
+.send-btn.stop { background: #ef4444; color: #fff; cursor: pointer; }
 .send-btn.stop:hover { background: #dc2626; }
 .send-btn.stop:active { transform: scale(0.92); }
 </style>
diff --git a/ui/src/components/conversation/common/types.ts b/ui/src/components/conversation/common/types.ts
new file mode 100644
index 00000000000..415c745134e
--- /dev/null
+++ b/ui/src/components/conversation/common/types.ts
@@ -0,0 +1,22 @@
+export interface Conversation {
+  id: string
+  name: string
+  createTime?: string
+  updateTime?: string
+}
+
+export interface ChatMessage {
+  role: 'USER' | 'ASSISTANT'
+  content: any[]
+  id: string
+  write_ed?: boolean
+}
+
+export interface StreamChunk {
+  content?: any[]
+  chat_id?: string
+  chat_record_id?: string
+  [key: string]: any
+}
+
+export type ChatType = 'CHAT' | 'DEBUG'
diff --git a/ui/src/components/conversation/common/use-chat-store/chat/index.ts b/ui/src/components/conversation/common/use-chat-store/chat/index.ts
new file mode 100644
index 00000000000..76ee3d7308d
--- /dev/null
+++ b/ui/src/components/conversation/common/use-chat-store/chat/index.ts
@@ -0,0 +1,130 @@
+import { ref, computed } from 'vue'
+import { chatApi } from '../../../api'
+import { useStreamManager } from '../shared/use-stream-manager'
+import { useMessagePagination } from '../shared/use-message-pagination'
+import { useConversationCrud } from '../shared/use-conversation-crud'
+import { aggregators } from '../../../index'
+import type { ChatMessage } from '../../types'
+
+export function useChatStore() {
+  const appInfo = ref<{ name: string; icon: string } | null>(null)
+  const currentChatId = computed(() => '')
+
+  const fetchAppInfo = async (applicationId?: string) => {
+    try {
+      // 对话模式下，应用信息通常由外部传入或从路由获取
+      // 如果有获取应用详情的接口，在这里调用
+    } catch (e) {
+      // 静默处理
+    }
+  }
+
+  // ── 会话 CRUD ─────────────────────────────────────────
+  const { conversations, loadConversations, loadMore } = useConversationCrud({
+    pageConversationAPI: (query: any) => chatApi.history(query.currentPage, query.pageSize),
+  })
+
+  // ── 消息分页 ─────────────────────────────────────────
+  const {
+    messages,
+    msgLoading,
+    hasMore,
+    loadMessages,
+    loadMoreMessages,
+    pushMessage,
+    resetMsgState,
+  } = useMessagePagination({
+    pageConversationMessage: (cid: string, query: any) =>
+      chatApi.records(cid, query.currentPage, query.pageSize),
+  })
+
+  // ── 流式管理 ─────────────────────────────────────────
+  const streamManager = useStreamManager()
+
+  // ── 流式聚合（内部） ─────────────────────────────────
+  const appendChunk = (message: ChatMessage, chunk: any) => {
+    if (!chunk) return
+    const contentArray = Array.isArray(chunk.content)
+      ? chunk.content
+      : chunk.type ? [chunk] : null
+    if (!contentArray) return
+
+    contentArray.forEach((item: any) => {
+      if (!item?.type) return
+      const aggregator = aggregators[item.type]
+      if (!aggregator) return
+      const index = message.content.findIndex(
+        (c: any) => c.id === item.id && c.type === item.type,
+      )
+      if (index >= 0) {
+        message.content[index] = aggregator(message.content[index], item)
+      } else {
+        message.content.push(aggregator({}, item))
+      }
+    })
+  }
+
+  const createAnswerMessage = (): ChatMessage => ({
+    role: 'ASSISTANT',
+    content: [],
+    id: '',
+    write_ed: false,
+  })
+
+  // ── 会话操作 ─────────────────────────────────────────
+  const openChat = async () => {
+    const res = await chatApi.open()
+    return res.data
+  }
+
+  const deleteChat = async (id: string) => {
+    await chatApi.deleteChat(id)
+    const idx = conversations.value.findIndex((c) => c.id === id)
+    if (idx >= 0) conversations.value.splice(idx, 1)
+  }
+
+  const renameChat = async (id: string, name: string) => {
+    await chatApi.modifyChat(id, { name })
+    const c = conversations.value.find((x) => x.id === id)
+    if (c) c.name = name
+  }
+
+  const chat = (chatId: string, data: any) => chatApi.chat(chatId, data)
+
+  // ── 文件上传 ─────────────────────────────────────────
+  const uploadFile = async (file: File): Promise<{ url: string; name: string }> => {
+    const res = await chatApi.uploadFile(file, '')
+    return { url: res.data, name: file.name }
+  }
+
+  return {
+    // 状态
+    appInfo,
+    conversations,
+    messages,
+    msgLoading,
+    hasMore,
+    streamLoading: computed(() => false),
+    // 会话
+    loadConversations,
+    loadMore,
+    openChat,
+    deleteChat,
+    renameChat,
+    fetchAppInfo,
+    // 消息
+    loadMessages,
+    loadMoreMessages,
+    pushMessage,
+    resetMsgState,
+    createAnswerMessage,
+    appendChunk,
+    // 流式
+    chat,
+    startStream: streamManager.startStream,
+    cancelStream: streamManager.cancelStream,
+    getStreamLoading: streamManager.getStreamLoading,
+    // 文件
+    uploadFile,
+  }
+}
diff --git a/ui/src/components/conversation/common/use-chat-store/debug/index.ts b/ui/src/components/conversation/common/use-chat-store/debug/index.ts
new file mode 100644
index 00000000000..95e3b0236de
--- /dev/null
+++ b/ui/src/components/conversation/common/use-chat-store/debug/index.ts
@@ -0,0 +1,135 @@
+import { ref, computed } from 'vue'
+import { debugApi } from '../../../api'
+import { useStreamManager } from '../shared/use-stream-manager'
+import { useMessagePagination } from '../shared/use-message-pagination'
+import { useConversationCrud } from '../shared/use-conversation-crud'
+import { aggregators } from '../../../index'
+import type { ChatMessage } from '../../types'
+
+export function useDebugStore(applicationId?: string) {
+  const appInfo = ref<{ name: string; icon: string } | null>(null)
+
+  const fetchAppInfo = async (appId?: string) => {
+    try {
+      const { getApi } = await import('../../../api')
+      const api = getApi('DEBUG')
+      // 如果有获取应用详情的接口，在这里调用
+      // const res = await api.getApplicationDetail(appId || applicationId)
+      // appInfo.value = { name: res.data.name, icon: res.data.icon }
+    } catch (e) {
+      // 静默处理
+    }
+  }
+  // ── 会话 CRUD ─────────────────────────────────────────
+  const { conversations, loadConversations, loadMore } = useConversationCrud({
+    pageConversationAPI: (query: any) => debugApi.history(query.currentPage, query.pageSize, applicationId),
+  })
+
+  // ── 消息分页 ─────────────────────────────────────────
+  const {
+    messages,
+    msgLoading,
+    hasMore,
+    loadMessages,
+    loadMoreMessages,
+    pushMessage,
+    resetMsgState,
+  } = useMessagePagination({
+    pageConversationMessage: (cid: string, query: any) =>
+      debugApi.records(cid, query.currentPage, query.pageSize, applicationId),
+  })
+
+  // ── 流式管理 ─────────────────────────────────────────
+  const streamManager = useStreamManager()
+
+  // ── 流式聚合（内部） ─────────────────────────────────
+  const appendChunk = (message: ChatMessage, chunk: any) => {
+    if (!chunk) return
+    const contentArray = Array.isArray(chunk.content)
+      ? chunk.content
+      : chunk.type ? [chunk] : null
+    if (!contentArray) return
+
+    contentArray.forEach((item: any) => {
+      if (!item?.type) return
+      const aggregator = aggregators[item.type]
+      if (!aggregator) return
+      const index = message.content.findIndex(
+        (c: any) => c.id === item.id && c.type === item.type,
+      )
+      if (index >= 0) {
+        message.content[index] = aggregator(message.content[index], item)
+      } else {
+        message.content.push(aggregator({}, item))
+      }
+    })
+  }
+
+  const createAnswerMessage = (): ChatMessage => ({
+    role: 'ASSISTANT',
+    content: [],
+    id: '',
+    write_ed: false,
+  })
+
+  // ── 会话操作 ─────────────────────────────────────────
+  const openChat = async (applicationId: string) => {
+    const res = await debugApi.open(applicationId)
+    return res.data
+  }
+
+  const deleteChat = async (id: string) => {
+    await debugApi.deleteChat(id, applicationId)
+    const idx = conversations.value.findIndex((c) => c.id === id)
+    if (idx >= 0) conversations.value.splice(idx, 1)
+  }
+
+  const renameChat = async (id: string, name: string) => {
+    await debugApi.modifyChat(id, { name }, applicationId)
+    const c = conversations.value.find((x) => x.id === id)
+    if (c) c.name = name
+  }
+
+  const chat = (chatId: string, data: any) => debugApi.chat(chatId, data)
+
+  // ── 文件上传 ─────────────────────────────────────────
+  const uploadFile = async (file: File, chatId: string): Promise<{ url: string; name: string }> => {
+    let cid = chatId
+    if (!cid) {
+      cid = await openChat(applicationId)
+    }
+    const res = await debugApi.uploadFile(file, cid)
+    return { url: res.data, name: file.name }
+  }
+
+  return {
+    // 状态
+    appInfo,
+    conversations,
+    messages,
+    msgLoading,
+    hasMore,
+    streamLoading: computed(() => false),
+    // 会话
+    loadConversations,
+    loadMore,
+    openChat,
+    deleteChat,
+    renameChat,
+    fetchAppInfo,
+    // 消息
+    loadMessages,
+    loadMoreMessages,
+    pushMessage,
+    resetMsgState,
+    createAnswerMessage,
+    appendChunk,
+    // 流式
+    chat,
+    startStream: streamManager.startStream,
+    cancelStream: streamManager.cancelStream,
+    getStreamLoading: streamManager.getStreamLoading,
+    // 文件
+    uploadFile,
+  }
+}
diff --git a/ui/src/components/conversation/common/use-chat-store/index.ts b/ui/src/components/conversation/common/use-chat-store/index.ts
new file mode 100644
index 00000000000..b0e6e0c9fd2
--- /dev/null
+++ b/ui/src/components/conversation/common/use-chat-store/index.ts
@@ -0,0 +1,6 @@
+import { useChatStore } from './chat'
+import { useDebugStore } from './debug'
+
+export function useChatStoreByType(type: 'CHAT' | 'DEBUG', applicationId?: string) {
+  return type === 'DEBUG' ? useDebugStore(applicationId) : useChatStore()
+}
diff --git a/ui/src/components/conversation/common/use-chat-store/shared/use-conversation-crud.ts b/ui/src/components/conversation/common/use-chat-store/shared/use-conversation-crud.ts
new file mode 100644
index 00000000000..33cf91fb129
--- /dev/null
+++ b/ui/src/components/conversation/common/use-chat-store/shared/use-conversation-crud.ts
@@ -0,0 +1,44 @@
+import { ref } from 'vue'
+import type { Conversation } from '../../types'
+
+export function useConversationCrud(opts: {
+  pageConversationAPI: (query: any) => Promise<any>
+}) {
+  const conversations = ref<Conversation[]>([])
+  const currentPage = ref(1)
+  const pageSize = 50
+  const hasMore = ref(true)
+  const loading = ref(false)
+
+  const loadConversations = async (page = 1) => {
+    loading.value = true
+    try {
+      const res = await opts.pageConversationAPI({ currentPage: page, pageSize })
+      const records = res.data?.records || []
+      if (page === 1) {
+        conversations.value = records
+      } else {
+        conversations.value = [...conversations.value, ...records]
+      }
+      currentPage.value = page
+      hasMore.value = records.length >= pageSize
+    } catch (e) {
+      // debug 模式下历史接口可能不存在，静默处理
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const loadMore = async () => {
+    if (!hasMore.value || loading.value) return
+    await loadConversations(currentPage.value + 1)
+  }
+
+  return {
+    conversations,
+    loading,
+    hasMore,
+    loadConversations,
+    loadMore,
+  }
+}
diff --git a/ui/src/components/conversation/common/use-chat-store/shared/use-message-pagination.ts b/ui/src/components/conversation/common/use-chat-store/shared/use-message-pagination.ts
new file mode 100644
index 00000000000..8083444a553
--- /dev/null
+++ b/ui/src/components/conversation/common/use-chat-store/shared/use-message-pagination.ts
@@ -0,0 +1,72 @@
+import { ref } from 'vue'
+import type { ChatMessage } from '../../types'
+
+export function useMessagePagination(opts: {
+  pageConversationMessage: (cid: string, query: any) => Promise<any>
+}) {
+  const messages = ref<ChatMessage[]>([])
+  const msgLoading = ref(false)
+  const currentPage = ref(1)
+  const pageSize = 20
+  const hasMore = ref(true)
+
+  const loadMessages = async (cid: string, page = 1) => {
+    msgLoading.value = true
+    try {
+      const res = await opts.pageConversationMessage(cid, { currentPage: page, pageSize })
+      const records = res.data?.records || []
+      const result: ChatMessage[] = []
+      records.forEach((record: any) => {
+        result.push({
+          id: record.id,
+          role: 'USER',
+          content: [{ type: 'QUESTION', content: record.problem_text }],
+        })
+        if (record.answer_text_list) {
+          result.push({
+            id: record.id + '-answer',
+            role: 'ASSISTANT',
+            content: record.answer_text_list.flat(),
+            write_ed: true,
+          })
+        }
+      })
+      if (page === 1) {
+        messages.value = result
+      } else {
+        messages.value = [...result, ...messages.value]
+      }
+      currentPage.value = page
+      hasMore.value = records.length >= pageSize
+    } catch (e) {
+      // 静默处理
+    } finally {
+      msgLoading.value = false
+    }
+  }
+
+  const loadMoreMessages = async (cid: string) => {
+    if (!hasMore.value || msgLoading.value) return
+    await loadMessages(cid, currentPage.value + 1)
+  }
+
+  const pushMessage = (msg: ChatMessage) => {
+    messages.value.push(msg)
+  }
+
+  const resetMsgState = () => {
+    messages.value = []
+    currentPage.value = 1
+    hasMore.value = true
+  }
+
+  return {
+    messages,
+    msgLoading,
+    hasMore,
+    loadMessages,
+    loadMoreMessages,
+    pushMessage,
+    resetMsgState,
+  }
+}
diff --git a/ui/src/components/conversation/common/use-chat-store/shared/use-stream-manager.ts b/ui/src/components/conversation/common/use-chat-store/shared/use-stream-manager.ts
new file mode 100644
index 00000000000..953d6268880
--- /dev/null
+++ b/ui/src/components/conversation/common/use-chat-store/shared/use-stream-manager.ts
@@ -0,0 +1,63 @@
+import { ref } from 'vue'
+import { ConversationStream } from '../../../stream'
+
+export function useStreamManager() {
+  const streams = new Map<string, ConversationStream>()
+  const loadingSet = ref(new Set<string>())
+
+  const getStreamLoading = (cid: string) => loadingSet.value.has(cid)
+
+  const startStream = (opts: {
+    cid: string
+    request: () => Promise<any>
+    onStream: (chunk: any) => void
+    onFinish?: () => void
+    onFailure?: (e: any) => void
+  }) => {
+    loadingSet.value.add(opts.cid)
+
+    opts.request().then((response: any) => {
+      const stream = new ConversationStream(
+        response,
+        opts.onStream,
+        () => {
+          loadingSet.value.delete(opts.cid)
+          streams.delete(opts.cid)
+          opts.onFinish?.()
+        },
+        (e: any) => {
+          loadingSet.value.delete(opts.cid)
+          streams.delete(opts.cid)
+          opts.onFailure?.(e)
+        },
+      )
+      streams.set(opts.cid, stream)
+      stream.start()
+    }).catch((e: any) => {
+      loadingSet.value.delete(opts.cid)
+      opts.onFailure?.(e)
+    })
+  }
+
+  const cancelStream = (cid: string) => {
+    const stream = streams.get(cid)
+    if (stream) {
+      stream.cancel()
+      streams.delete(cid)
+      loadingSet.value.delete(cid)
+    }
+  }
+
+  const cancelAll = () => {
+    streams.forEach((s) => s.cancel())
+    streams.clear()
+    loadingSet.value.clear()
+  }
+
+  return {
+    getStreamLoading,
+    startStream,
+    cancelStream,
+    cancelAll,
+  }
+}
diff --git a/ui/src/components/conversation/composable.ts b/ui/src/components/conversation/composable.ts
deleted file mode 100644
index 4d29bc95517..00000000000
--- a/ui/src/components/conversation/composable.ts
+++ /dev/null
@@ -1,353 +0,0 @@
-import { ref, computed, type Ref, unref } from 'vue'
-import { aggregators } from './index'
-import { getApi, type ChatType } from './api'
-import { ConversationStream } from './stream'
-
-interface ChatMessage {
-  role: 'USER' | 'ASSISTANT'
-  content: any[]
-  id: string
-}
-
-interface ChatConversation {
-  id: string
-  name: string
-}
-
-export function useChat(type: ChatType, applicationId?: string | Ref<string>) {
-  const api = getApi(type)
-  const conversations = ref<ChatConversation[]>([])
-  const currentChatId = ref('')
-  const messages = ref<ChatMessage[]>([])
-  const msgLoading = ref(false)
-  const streamLoading = ref(false)
-  let activeStream: ConversationStream | null = null
-
-  const getApplicationId = () => unref(applicationId)
-
-  const currentConversation = computed(() =>
-    conversations.value.find((c) => c.id === currentChatId.value)
-  )
-
-  const appInfo = computed(() => ({
-    name: 'AI Chat',
-    icon: ''
-  }))
-
-  const loadConversations = async (page = 1, size = 50) => {
-    try {
-      const res = await api.history(page, size)
-      conversations.value = res.data?.records || []
-    } catch (e) {
-      console.error('Failed to load conversations:', e)
-    }
-    return conversations.value
-  }
-
-  const openChat = async (appId?: string) => {
-    try {
-      const id = appId || getApplicationId()
-      if (!id) throw new Error('No application ID')
-      const res = await api.open(id)
-      currentChatId.value = res.data
-      messages.value = []
-      return res.data
-    } catch (e) {
-      console.error('Failed to open chat:', e)
-      throw e
-    }
-  }
-
-  const switchChat = async (chatId: string) => {
-    currentChatId.value = chatId
-    await loadMessages(chatId)
-    return chatId
-  }
-
-  const deleteChat = async (id: string) => {
-    try {
-      await api.deleteChat(id)
-      conversations.value = conversations.value.filter((c) => c.id !== id)
-      if (currentChatId.value === id) {
-        currentChatId.value = conversations.value[0]?.id || ''
-      }
-    } catch (e) {
-      console.error('Failed to delete chat:', e)
-    }
-  }
-
-  const renameChat = async (id: string, name: string) => {
-    try {
-      await api.modifyChat(id, { name })
-      const conv = conversations.value.find((c) => c.id === id)
-      if (conv) conv.name = name
-    } catch (e) {
-      console.error('Failed to rename chat:', e)
-    }
-  }
-
-  const loadMessages = async (chatId: string) => {
-    msgLoading.value = true
-    try {
-      const res = await api.records(chatId, 1, 100)
-      const records = res.data?.records || []
-      messages.value = records.map((record: any) => ({
-        id: record.id,
-        role: 'USER',
-        content: [{ type: 'TEXT', content: record.problem_text }]
-      }))
-      // Add assistant messages
-      records.forEach((record: any, index: number) => {
-        if (record.answer_text_list) {
-          messages.value.splice(index * 2 + 1, 0, {
-            id: record.id + '-answer',
-            role: 'ASSISTANT',
-            content: record.answer_text_list.flat()
-          })
-        }
-      })
-    } catch (e) {
-      console.error('Failed to load messages:', e)
-    } finally {
-      msgLoading.value = false
-    }
-  }
-
-  const createAnswerMessage = (): ChatMessage => {
-    return {
-      role: 'ASSISTANT',
-      content: [],
-      id: ''
-    }
-  }
-
-  const pushMessage = (msg: ChatMessage) => {
-    messages.value.push(msg)
-  }
-
-  const getOrCreateLastAnswerMessage = (): ChatMessage => {
-    const last = messages.value[messages.value.length - 1]
-    if (last && last.role === 'ASSISTANT') {
-      return last
-    }
-    const answerMessage = createAnswerMessage()
-    pushMessage(answerMessage)
-    return answerMessage
-  }
-
-  const appendChunk = (message: ChatMessage, chunk: any) => {
-    console.log('appendChunk received:', chunk)
-    
-    if (!chunk) return
-    
-    // 处理直接包含 content 数组的情况
-    let contentArray = chunk.content
-    if (!Array.isArray(contentArray)) {
-      // 如果 chunk 本身就是一个内容项（如 FORM），包装成数组
-      if (chunk.type) {
-        contentArray = [chunk]
-      } else {
-        return
-      }
-    }
-
-    contentArray.forEach((item: any) => {
-      if (!item || !item.type) return
-      
-      const aggregator = aggregators[item.type]
-      if (!aggregator) {
-        console.warn('No aggregator for type:', item.type)
-        return
-      }
-
-      const index = message.content.findIndex(
-        (c) => c.id === item.id && c.type === item.type
-      )
-
-      if (index >= 0) {
-        message.content[index] = aggregator(message.content[index], item)
-      } else {
-        message.content.push(aggregator({}, item))
-      }
-    })
-    
-    console.log('Updated message content:', message.content)
-  }
-
-  const sendMessage = async (
-    text: string,
-    options?: { re_chat?: boolean; form_data?: any; position?: any; chat_record_id?: string; chunk_id?: string; onScroll?: () => void }
-  ) => {
-    const re_chat = options?.re_chat || false
-    const form_data = options?.form_data || {}
-    const position = options?.position || null
-    const chat_record_id = options?.chat_record_id || null
-    const chunk_id = options?.chunk_id || null
-    const onScroll = options?.onScroll || (() => {})
-
-    console.log('sendMessage called:', {
-      text,
-      options,
-      re_chat,
-      form_data,
-      position,
-      chat_record_id,
-      currentChatId: currentChatId.value
-    })
-
-    return new Promise<any>((resolve, reject) => {
-      if (!currentChatId.value) {
-        console.error('No chat open, currentChatId is empty')
-        reject(new Error('No chat open'))
-        return
-      }
-
-      // 表单提交时，找到包含相同 chunk_id 的消息，否则新建
-      let aiMsg: ChatMessage
-      if (chunk_id) {
-        const existing = messages.value.find(m => 
-          m.role === 'ASSISTANT' && 
-          m.content.some((c: any) => c.id === chunk_id)
-        )
-        if (existing) {
-          aiMsg = existing
-        } else {
-          aiMsg = createAnswerMessage()
-          pushMessage(aiMsg)
-        }
-      } else {
-        aiMsg = createAnswerMessage()
-        pushMessage(aiMsg)
-      }
-
-      streamLoading.value = true
-
-      const requestData: any = {
-        message: text,
-        stream: true,
-        re_chat,
-        form_data
-      }
-      
-      // position、chat_record_id、chunk_id 与 re_chat 同级别
-      if (position) {
-        requestData.position = position
-      }
-      if (chat_record_id) {
-        requestData.chat_record_id = chat_record_id
-      }
-      if (chunk_id) {
-        requestData.chunk_id = chunk_id
-      }
-
-      console.log('Sending request to API:', {
-        chatId: currentChatId.value,
-        data: requestData
-      })
-
-      const responsePromise = api.chat(currentChatId.value, requestData)
-
-      // postStream 返回 Promise，需要 await
-      responsePromise.then((response: any) => {
-        console.log('API response resolved:', response)
-        
-        activeStream = new ConversationStream(
-          response,
-          (chunk: any) => {
-            console.log('Stream chunk received:', chunk)
-            appendChunk(aiMsg, chunk)
-            onScroll()
-          },
-          () => {
-            console.log('Stream finished, aiMsg:', aiMsg)
-            aiMsg.id = aiMsg.id || Date.now().toString()
-            streamLoading.value = false
-            activeStream = null
-            onScroll()
-            resolve(aiMsg)
-          },
-          (e: any) => {
-            console.error('Stream error:', e)
-            aiMsg.content.push({ type: 'FAILURE', content: String(e) })
-            aiMsg.id = aiMsg.id || Date.now().toString()
-            streamLoading.value = false
-            activeStream = null
-            reject(e)
-          }
-        )
-        activeStream.start()
-      }).catch((e: any) => {
-        console.error('API call failed:', e)
-        aiMsg.content.push({ type: 'FAILURE', content: String(e) })
-        aiMsg.id = aiMsg.id || Date.now().toString()
-        streamLoading.value = false
-        reject(e)
-      })
-    })
-  }
-
-  const stopStream = () => {
-    if (activeStream) {
-      activeStream.cancel()
-      activeStream = null
-    }
-    streamLoading.value = false
-  }
-
-  const chatRequest = (chatId: string, data: any) => {
-    return api.chat(chatId, data)
-  }
-
-  const startStream = (opts: {
-    cid: string
-    request: () => Promise<any>
-    onStream: (chunk: any) => void
-    onFinish?: () => void
-    onFailure?: (e: any) => void
-  }) => {
-    streamLoading.value = true
-    opts.request().then((response: any) => {
-      activeStream = new ConversationStream(
-        response,
-        opts.onStream,
-        () => {
-          streamLoading.value = false
-          activeStream = null
-          opts.onFinish?.()
-        },
-        (e: any) => {
-          streamLoading.value = false
-          activeStream = null
-          opts.onFailure?.(e)
-        },
-      )
-      activeStream.start()
-    }).catch((e: any) => {
-      streamLoading.value = false
-      opts.onFailure?.(e)
-    })
-  }
-
-  return {
-    appInfo,
-    conversations,
-    currentChatId,
-    currentConversation,
-    messages,
-    msgLoading,
-    streamLoading,
-    loadConversations,
-    openChat,
-    switchChat,
-    deleteChat,
-    renameChat,
-    loadMessages,
-    pushMessage,
-    createAnswerMessage,
-    getOrCreateLastAnswerMessage,
-    sendMessage,
-    stopStream,
-    chatRequest,
-    startStream,
-  }
-}
diff --git a/ui/src/components/conversation/content/index.vue b/ui/src/components/conversation/content/index.vue
index c75a364677f..a852e68385d 100644
--- a/ui/src/components/conversation/content/index.vue
+++ b/ui/src/components/conversation/content/index.vue
@@ -9,13 +9,15 @@ import ReasoningItem from './items/reasoning.vue'
 import ToolItem from './items/tool.vue'
 import FormItem from './items/form.vue'
 import FailureItem from './items/failure.vue'
+import QuestionItem from './items/question.vue'
 
 const typeRenderers: Record<string, any> = {
   TEXT: TextItem,
   REASONING: ReasoningItem,
   TOOL: ToolItem,
   FORM: FormItem,
-  FAILURE: FailureItem
+  FAILURE: FailureItem,
+  QUESTION: QuestionItem,
 }
 
 defineProps<{ content: any }>()
diff --git a/ui/src/components/conversation/content/items/question.vue b/ui/src/components/conversation/content/items/question.vue
new file mode 100644
index 00000000000..0b258d70b87
--- /dev/null
+++ b/ui/src/components/conversation/content/items/question.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="question-content">
+    <div class="question-bubble" :class="bubbleClass">
+      <div v-if="content.documents?.length" class="q-section">
+        <div v-for="(f, i) in content.documents" :key="'doc-'+i" class="q-file-card" @click="download(f)">
+          <span class="q-file-icon">📄</span>
+          <span class="q-file-name" :title="f.name">{{ f.name }}</span>
+        </div>
+      </div>
+      <div v-if="content.images?.length" class="q-section">
+        <div class="q-images">
+          <template v-for="(img, i) in content.images" :key="'img-'+i">
+            <img v-if="img.url" :src="img.url" class="q-img" />
+          </template>
+        </div>
+      </div>
+      <div v-if="content.audio?.length" class="q-section">
+        <div v-for="(a, i) in content.audio" :key="'aud-'+i" class="q-audio-wrap">
+          <audio :src="a.url" controls />
+        </div>
+      </div>
+      <div v-if="content.video?.length" class="q-section">
+        <div class="q-videos">
+          <div v-for="(v, i) in content.video" :key="'vid-'+i" class="q-video-wrap">
+            <video :src="v.url" controls />
+          </div>
+        </div>
+      </div>
+      <div v-if="content.files?.length" class="q-section">
+        <div v-for="(f, i) in content.files" :key="'file-'+i" class="q-file-card" @click="download(f)">
+          <span class="q-file-icon">📎</span>
+          <span class="q-file-name" :title="f.name">{{ f.name }}</span>
+        </div>
+      </div>
+      <span v-if="content.content">{{ content.content }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ content: any }>()
+
+const bubbleClass = computed(() => {
+  const c = props.content
+  const count = [c.documents?.length, c.images?.length, c.audio?.length, c.video?.length, c.files?.length]
+    .filter((n: number) => n > 0).length
+  return count >= 2 ? 'multi-media' : ''
+})
+
+const download = (file: any) => {
+  if (file.url) window.open(file.url, '_blank')
+}
+</script>
+
+<style scoped>
+.question-content {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.question-bubble {
+  background: #d6e2ff;
+  padding: 12px 16px;
+  border-radius: 12px;
+  border-bottom-right-radius: 4px;
+  max-width: 70%;
+  word-break: break-word;
+  font-size: 14px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.q-section {
+  margin-bottom: 8px;
+}
+
+.q-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.q-img {
+  width: 170px;
+  height: 170px;
+  border-radius: 6px;
+  object-fit: cover;
+  cursor: pointer;
+  display: block;
+}
+
+.q-audio-wrap audio {
+  width: 350px;
+  height: 43px;
+  border-radius: 6px;
+}
+
+.q-videos {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.q-video-wrap video {
+  width: 170px;
+  border-radius: 6px;
+  display: block;
+}
+
+.q-file-card {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  max-width: 100%;
+  transition: background 0.15s;
+}
+
+.q-file-card:hover {
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.q-file-icon {
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.q-file-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 200px;
+}
+
+@media only screen and (max-width: 768px) {
+  .question-bubble { max-width: 85%; }
+  .q-img { width: 120px; height: 120px; }
+  .q-audio-wrap audio { width: 100%; }
+}
+</style>
diff --git a/ui/src/components/conversation/index.vue b/ui/src/components/conversation/index.vue
index 57c6bbed77c..8f50d034935 100644
--- a/ui/src/components/conversation/index.vue
+++ b/ui/src/components/conversation/index.vue
@@ -1,239 +1,231 @@
 <template>
-  <div class="conversation-plus">
-    <div v-if="open && mode === 'drawer'" class="mask" @click="open = false" />
-
-    <Sidebar
-      :open="open"
-      :mode="mode"
-      :conversations="conversations"
-      :current-id="currentChatId"
-      @update:open="open = $event"
-      @update:mode="mode = $event"
-      @switch="handleSwitch"
-      @delete="handleDelete"
-      @rename="handleRename"
-      @new="handleNewChat"
-    />
-
-    <ChatPanel
-      ref="panelRef"
-      :title="currentConversation?.name"
-      :icon="appInfo?.icon"
-    >
-      <template #header>
-        <slot name="header" />
-      </template>
-    </ChatPanel>
+  <div class="conversation-plus" :class="{ 'sidebar-open': sidebarOpen }">
+    <div class="conv-sidebar" :class="{ open: sidebarOpen }">
+      <Sidebar
+        :conversations="store.conversations.value"
+        :current-id="currentChatId"
+        :mode="sidebarMode"
+        :open="sidebarOpen"
+        @open="handleOpen"
+        @create="handleNewChat"
+        @delete="handleDelete"
+        @rename="handleRename"
+      />
+    </div>
+
+    <div v-if="sidebarOpen && isMobile" class="conv-mask" @click="sidebarOpen = false" />
+
+    <div class="conv-main">
+      <ChatPanel
+        ref="panelRef"
+        :store="store"
+        :current-chat-id="currentChatId"
+        :app-info="store.appInfo.value"
+        @toggle="sidebarOpen = !sidebarOpen"
+        @send="handleSend"
+        @stop="store.cancelStream(currentChatId)"
+        @chat-opened="(id: string) => { currentChatId = id }"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, onUnmounted, nextTick, provide } from 'vue'
-import Sidebar from './sidebar/index.vue'
+import { ref, computed, watch, onMounted, onBeforeUnmount, provide } from 'vue'
+import { useRoute } from 'vue-router'
+import { useChatStoreByType } from './common/use-chat-store'
+import type { ChatType } from './common/types'
 import ChatPanel from './chat-panel/index.vue'
-import { useChat } from './composable'
+import Sidebar from './sidebar/index.vue'
 
 type OpenMode = boolean | 'auto'
 type LayoutMode = 'push' | 'drawer' | 'auto'
 
 const props = withDefaults(
   defineProps<{
-    type?: 'CHAT' | 'DEBUG'
-    applicationId?: string
-    applicationDetails?: any
+    type?: ChatType
     defaultOpen?: OpenMode
     defaultMode?: LayoutMode
   }>(),
   {
     type: 'CHAT',
     defaultOpen: 'auto',
-    defaultMode: 'auto'
-  }
+    defaultMode: 'auto',
+  },
 )
 
 const emit = defineEmits<{
   openChat: [chatId: string]
   refresh: [chatId: string]
-  close: []
 }>()
 
-const BREAKPOINT = 768
-const isMobile = ref(window.innerWidth < BREAKPOINT)
+const route = useRoute()
+const applicationId = computed(() => route.params.id as string || route.params.applicationId as string || '')
 
-// 计算初始 open 状态
-const getInitialOpen = (): boolean => {
-  if (props.defaultOpen === 'auto') {
-    return !isMobile.value
-  }
-  return props.defaultOpen as boolean
-}
+const store = useChatStoreByType(props.type, applicationId.value)
+provide('chat', store)
 
-// 计算初始 mode 状态
-const getInitialMode = (): 'push' | 'drawer' => {
-  if (props.defaultMode === 'auto') {
-    return isMobile.value ? 'drawer' : 'push'
-  }
-  return props.defaultMode as 'push' | 'drawer'
-}
+const BREAKPOINT = 768
+const isMobile = ref(window.innerWidth < BREAKPOINT)
+const updateMobile = () => { isMobile.value = window.innerWidth < BREAKPOINT }
+onMounted(() => window.addEventListener('resize', updateMobile))
+onBeforeUnmount(() => window.removeEventListener('resize', updateMobile))
 
-const open = ref(getInitialOpen())
-const mode = ref<'push' | 'drawer'>(getInitialMode())
-
-const updateMobile = () => {
-  const wasMobile = isMobile.value
-  isMobile.value = window.innerWidth < BREAKPOINT
-  
-  // 只有 auto 模式才自动切换
-  if (props.defaultOpen === 'auto') {
-    // 移动端 -> 桌面端：展开
-    if (wasMobile && !isMobile.value) {
-      open.value = true
-    }
-    // 桌面端 -> 移动端：收起
-    if (!wasMobile && isMobile.value) {
-      open.value = false
-    }
-  }
-  
-  if (props.defaultMode === 'auto') {
-    mode.value = isMobile.value ? 'drawer' : 'push'
-  }
-}
+const sidebarMode = ref<'push' | 'drawer'>(
+  props.defaultMode === 'auto'
+    ? isMobile.value ? 'drawer' : 'push'
+    : props.defaultMode
+)
 
-onMounted(() => window.addEventListener('resize', updateMobile))
-onUnmounted(() => window.removeEventListener('resize', updateMobile))
-
-const resolvedAppId = computed(() => props.applicationId || props.applicationDetails?.id)
-const {
-  appInfo,
-  conversations,
-  currentChatId,
-  currentConversation,
-  messages,
-  msgLoading,
-  streamLoading,
-  loadConversations,
-  openChat,
-  switchChat,
-  deleteChat,
-  renameChat,
-  sendMessage,
-  pushMessage,
-  stopStream,
-  chatRequest,
-  startStream,
-} = useChat(props.type, resolvedAppId)
+const sidebarOpen = ref(
+  props.defaultOpen === 'auto' ? !isMobile.value : props.defaultOpen
+)
 
 const panelRef = ref()
+const currentChatId = ref('')
 
-provide('chat', {
-  messages,
-  msgLoading,
-  streamLoading,
-  currentChatId,
-  currentConversation,
-  conversations,
-  openChat,
-  switchChat,
-  deleteChat,
-  renameChat,
-  sendMessage,
-  pushMessage,
-  stopStream,
-  chat: chatRequest,
-  startStream,
-  toggleSidebar: () => { open.value = !open.value },
-  scrollToBottom: () => nextTick(() => panelRef.value?.scrollToBottom())
-})
+if (props.defaultOpen === 'auto') {
+  watch(isMobile, (mobile) => {
+    sidebarOpen.value = !mobile
+  })
+}
+
+if (props.defaultMode === 'auto') {
+  watch(isMobile, (mobile) => {
+    sidebarMode.value = mobile ? 'drawer' : 'push'
+  })
+}
 
 const handleNewChat = async () => {
-  const chatId = await openChat()
-  emit('openChat', chatId)
+  const id = await store.openChat(applicationId.value)
+  currentChatId.value = id
+  sidebarOpen.value = false
+  emit('openChat', id)
 }
 
-const handleSwitch = (id: string) => {
-  switchChat(id)
+const handleOpen = async (id: string) => {
+  currentChatId.value = id
+  await store.loadMessages(id)
+  sidebarOpen.value = false
 }
 
-const handleDelete = (id: string) => {
-  deleteChat(id)
+const handleDelete = async (id: string) => {
+  await store.deleteChat(id)
+  if (currentChatId.value === id) {
+    currentChatId.value = store.conversations.value[0]?.id || ''
+  }
 }
 
 const handleRename = (id: string, name: string) => {
-  renameChat(id, name)
+  store.renameChat(id, name)
 }
 
-const handleSend = async (text: string) => {
-  if (!text.trim() || streamLoading.value) return
-
+const handleSend = async (text: string, files?: any[]) => {
   if (!currentChatId.value) {
     await handleNewChat()
   }
 
-  messages.value.push({
+  const cid = currentChatId.value
+
+  store.pushMessage({
     role: 'USER',
-    content: [{ type: 'TEXT', content: text }],
-    id: ''
+    content: [{ type: 'QUESTION', content: text }],
+    id: '',
   })
 
-  try {
-    await sendMessage(text, {
-      onScroll: () => nextTick(() => panelRef.value?.scrollToBottom())
-    })
-    emit('refresh', currentChatId.value)
-  } catch {}
-}
+  store.pushMessage(store.createAnswerMessage())
+  const aiMsg = store.messages.value[store.messages.value.length - 1]
 
-const handleScroll = () => {
-  // Load more messages if needed
+  const payload: any = { message: text, stream: true, re_chat: false }
+  if (files?.length) {
+    payload.image_list = files.filter((f: any) => /\.(jpg|jpeg|png|gif|bmp)$/i.test(f.name))
+    payload.document_list = files.filter((f: any) => /\.(pdf|docx|txt|xls|xlsx|md|html|csv)$/i.test(f.name))
+    payload.audio_list = files.filter((f: any) => /\.(mp3|wav|ogg|aac|m4a)$/i.test(f.name))
+    payload.video_list = files.filter((f: any) => /\.(mp4|avi|mkv|mov|flv|wmv)$/i.test(f.name))
+  }
+
+  store.startStream({
+    cid,
+    request: () => store.chat(cid, payload),
+    onStream: (chunk: any) => store.appendChunk(aiMsg, chunk),
+    onFinish: () => {
+      aiMsg.write_ed = true
+      emit('refresh', cid)
+    },
+    onFailure: () => {
+      aiMsg.write_ed = true
+    },
+  })
 }
 
+const onResize = () => { isMobile.value = window.innerWidth < 768 }
+
 onMounted(() => {
-  if (props.type === 'CHAT') {
-    loadConversations()
-  }
+  window.addEventListener('resize', onResize)
+  store.loadConversations()
+  store.fetchAppInfo(applicationId.value)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', onResize)
+  store.cancelStream(currentChatId.value)
 })
 </script>
 
 <style scoped>
 .conversation-plus {
-  --sb-w: 260px;
-  --bg: #fff;
-  --bg2: #fafafa;
-  --bd: #dcdfe6;
-  --t1: #303133;
-  --t2: #606266;
-  --t3: #909399;
-  --hv: #f5f7fa;
-  --ac: #ecf5ff;
-  --ub: #d6e2ff;
-  --ab: #f5f7fa;
-  --mask: rgba(0, 0, 0, 0.4);
-  --shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-  --danger-bg: rgba(239, 68, 68, 0.15);
-  --danger-text: #ef4444;
-  --focus-border: #3370ff;
-
-  position: relative;
   display: flex;
-  width: 100%;
   height: 100%;
+  position: relative;
   overflow: hidden;
-  font-family: 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
-  background: var(--bg);
-  color: var(--t1);
 }
 
-.mask {
+.conv-sidebar {
+  width: 260px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--bd, #dcdfe6);
+  overflow-y: auto;
+  transition: width 0.25s ease, transform 0.25s ease;
+}
+
+.conv-sidebar:not(.open) {
+  width: 0;
+  overflow: hidden;
+  border-right: none;
+}
+
+.conv-mask {
   display: none;
   position: absolute;
   inset: 0;
   z-index: 30;
-  background: var(--mask);
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.conv-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
 }
 
-@media (max-width: 768px) {
-  .mask {
+@media only screen and (max-width: 768px) {
+  .conv-sidebar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 40;
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+  }
+
+  .conv-sidebar.open {
+    transform: translateX(0);
+    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
+  }
+
+  .conversation-plus.sidebar-open .conv-mask {
     display: block;
   }
 }
diff --git a/ui/src/components/conversation/sidebar/index.vue b/ui/src/components/conversation/sidebar/index.vue
index 5c6724a69b7..02626bc9dc8 100644
--- a/ui/src/components/conversation/sidebar/index.vue
+++ b/ui/src/components/conversation/sidebar/index.vue
@@ -25,9 +25,6 @@
       <button @click="handleNew">
         <span>+</span> 新对话
       </button>
-      <button @click="toggleMode">
-        {{ mode === 'push' ? '抽屉模式' : '侧边模式' }}
-      </button>
     </div>
   </aside>
 </template>
diff --git a/ui/src/views/application-workflow/index.vue b/ui/src/views/application-workflow/index.vue
index 2837a1b32dc..1a32c01e191 100644
--- a/ui/src/views/application-workflow/index.vue
+++ b/ui/src/views/application-workflow/index.vue
@@ -99,10 +99,8 @@
       <div class="workflow-debug-container" v-if="showDebug">
         <div class="scrollbar-height">
           <Conversation 
-            :application-details="detail" 
             :type="'DEBUG'"
             :default-open="false"
-            :default-mode="'auto'"
           >
             <template #header>
               <el-button link @click="showDebug = false">

From d2d7d6c6941be9083bdf1658c36ab50c0ffd46ee Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <shaohu.zhang@fit2cloud.com>
Date: Wed, 22 Jul 2026 13:51:20 +0800
Subject: [PATCH 2/2] feat: Optimization of front-end AI dialog box

---
 .../migrations/0015_chat_execute_type.py      |  18 +
 apps/application/models/application_chat.py   |  15 +-
 apps/application/serializers/common.py        | 101 ++--
 apps/application/views/application_chat.py    |  22 +-
 apps/chat/serializers/chat.py                 |  24 +-
 ui/src/api/application/chat-log.ts            |  28 +-
 .../system-resource-management/chat-log.ts    |  28 +-
 ui/src/api/system-shared/tool.ts              |   2 +-
 ui/src/components/conversation/api/index.ts   |   8 +-
 .../conversation/chat-panel/index.vue         | 523 +++++++++++++-----
 .../components/conversation/common/types.ts   |   7 +-
 .../common/use-chat-store/chat/index.ts       |  68 ++-
 .../common/use-chat-store/debug/index.ts      |  84 +--
 .../common/use-chat-store/index.ts            |   5 +-
 .../conversation/content/items/question.vue   |   9 +-
 ui/src/components/conversation/index.vue      |  98 ++--
 .../components/conversation/sidebar/index.vue | 318 +++++++----
 ui/src/components/dynamics-form/FormItem.vue  |   2 +-
 ui/src/components/markdown/EchartsRander.vue  |   2 +-
 .../nodes/knowledge-write-node/index.vue      |   2 +-
 20 files changed, 912 insertions(+), 452 deletions(-)
 create mode 100644 apps/application/migrations/0015_chat_execute_type.py

diff --git a/apps/application/migrations/0015_chat_execute_type.py b/apps/application/migrations/0015_chat_execute_type.py
new file mode 100644
index 00000000000..e3b61cd9969
--- /dev/null
+++ b/apps/application/migrations/0015_chat_execute_type.py
@@ -0,0 +1,18 @@
+# Generated by Django 5.2.14 on 2026-07-21 08:57
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('application', '0014_chatrecord_workflow_context'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='chat',
+            name='execute_type',
+            field=models.CharField(choices=[('ANONYMOUS_USER', '匿名用户'), ('CHAT_USER', '对话用户'), ('SYSTEM_API_KEY', '系统API_KEY'), ('APPLICATION_API_KEY', '应用API_KEY'), ('PLATFORM_USER', '平台用户')], default='CHAT', max_length=64, verbose_name='执行类型'),
+        ),
+    ]
diff --git a/apps/application/models/application_chat.py b/apps/application/models/application_chat.py
index 6f0a5bbcdb7..4b4f7979994 100644
--- a/apps/application/models/application_chat.py
+++ b/apps/application/models/application_chat.py
@@ -26,6 +26,11 @@ class ChatUserType(models.TextChoices):
     PLATFORM_USER = "PLATFORM_USER", "平台用户"
 
 
+class ExecuteType(models.TextChoices):
+    DEBUG = "DEBUG"
+    CHAT = "CHAT"
+
+
 def default_asker():
     return {'username': '游客'}
 
@@ -37,6 +42,8 @@ class Chat(AppModelMixin):
     chat_user_id = models.CharField(verbose_name="对话用户id", default=None, null=True)
     chat_user_type = models.CharField(max_length=64, verbose_name="客户端类型", choices=ChatUserType.choices,
                                       default=ChatUserType.ANONYMOUS_USER)
+    execute_type = models.CharField(max_length=64, verbose_name="执行类型", choices=ChatUserType.choices,
+                                    default=ExecuteType.CHAT)
     is_deleted = models.BooleanField(verbose_name="逻辑删除", default=False)
     asker = models.JSONField(verbose_name="访问者", default=default_asker, encoder=SystemEncoder)
     meta = models.JSONField(verbose_name="元数据", default=dict)
@@ -65,10 +72,12 @@ class VoteReasonChoices(models.TextChoices):
     INCOMPLETE = 'incomplete', '内容不完善'
     OTHER = 'other', '其他'
 
+
 class ShareLinkType(models.TextChoices):
     PUBLIC = "PUBLIC", 'public'
     PRIVATE = "PRIVATE", 'private'
 
+
 class ChatSourceChoices(models.TextChoices):
     ONLINE = "ONLINE", "线上使用"
     API_CALL = "API_CALL", "API调用"
@@ -144,10 +153,11 @@ class Meta:
             models.Index(fields=['application_id', 'chat_user_id']),
         ]
 
+
 class ChatShareLink(AppModelMixin):
     id = models.UUIDField(primary_key=True, max_length=128, default=uuid.uuid7, editable=False, verbose_name="主键id")
     chat = models.ForeignKey(Chat, on_delete=models.CASCADE)
-    application = models.ForeignKey(Application,on_delete=models.CASCADE)
+    application = models.ForeignKey(Application, on_delete=models.CASCADE)
     share_type = models.CharField(max_length=20, choices=ShareLinkType.choices, default=ShareLinkType.PUBLIC)
     user = models.ForeignKey(User, on_delete=models.SET_NULL, db_constraint=False, blank=True, null=True)
     chat_record_ids = ArrayField(base_field=models.UUIDField(max_length=128))
@@ -156,11 +166,10 @@ class Meta:
         db_table = "application_chat_share_link"
 
 
-
 class ApplicationLongTermMemory(AppModelMixin):
     id = models.UUIDField(primary_key=True, max_length=128, default=uuid.uuid7, editable=False, verbose_name="主键id")
     application = models.ForeignKey(Application, on_delete=models.CASCADE, db_constraint=False, verbose_name="所属应用")
-    chat_user_id = models.CharField( max_length=128, verbose_name="对话用户id", db_index=True)
+    chat_user_id = models.CharField(max_length=128, verbose_name="对话用户id", db_index=True)
     memory = models.TextField(verbose_name="长期记忆内容", default="")
 
     class Meta:
diff --git a/apps/application/serializers/common.py b/apps/application/serializers/common.py
index b1d08a460c1..96357ea187f 100644
--- a/apps/application/serializers/common.py
+++ b/apps/application/serializers/common.py
@@ -13,7 +13,8 @@
 from django.utils import timezone
 from django.utils.translation import gettext_lazy as _
 
-from application.models import Application, ChatRecord, Chat, ApplicationVersion, ChatUserType, ApplicationTypeChoices
+from application.models import Application, ChatRecord, Chat, ApplicationVersion, ChatUserType, ApplicationTypeChoices, \
+    ExecuteType
 from application.serializers.application_chat import ChatCountSerializer
 from common.constants.cache_version import Cache_Version
 from common.database_model_manage.database_model_manage import DatabaseModelManage
@@ -280,6 +281,13 @@ def set_chat(self, question):
                      ip_address=self.ip_address, source=self.source,
                      asker=self.get_chat_user()).save()
 
+    def save_chat(self):
+        Chat(id=self.chat_id, application_id=self.application_id, abstract="新建对话",
+             execute_type=ExecuteType.DEBUG if self.debug else ExecuteType.CHAT,
+             chat_user_id=self.chat_user_id, chat_user_type=self.chat_user_type,
+             ip_address=self.ip_address, source=self.source,
+             asker=self.get_chat_user()).save()
+
     def set_chat_variable(self, chat_context):
         if not self.debug:
             chat = QuerySet(Chat).filter(id=self.chat_id).first()
@@ -314,55 +322,48 @@ def append_chat_record(self, chat_record: ChatRecord):
                 break
         if is_save:
             self.chat_record_list.append(chat_record)
-        
-        # 调试模式：把 workflow_context 存到 Redis
-        if self.debug and chat_record.workflow_context:
-            from django.core.cache import cache
-            from common.constants.cache_version import Cache_Version
-            cache_key = Cache_Version.DEBUG_WORKFLOW_CONTEXT.get_key(chat_record_id=str(chat_record.id))
-            cache.set(cache_key, chat_record.workflow_context, timeout=3600)
-        
-        if not self.debug:
-            if not QuerySet(Chat).filter(id=self.chat_id).exists():
-                Chat(id=self.chat_id, application_id=self.application_id, abstract=chat_record.problem_text[0:1024],
-                     chat_user_id=self.chat_user_id, chat_user_type=self.chat_user_type,
-                     ip_address=self.ip_address, source=self.source,
-                     asker=self.get_chat_user()).save()
-            else:
-                QuerySet(Chat).filter(id=self.chat_id).update(update_time=timezone.now())
-            # 插入会话记录
-            QuerySet(ChatRecord).update_or_create(id=chat_record.id,
-                                                  create_defaults={'id': chat_record.id,
-                                                                   'chat_id': chat_record.chat_id,
-                                                                   "vote_status": chat_record.vote_status,
-                                                                   'problem_text': chat_record.problem_text,
-                                                                   'answer_text': chat_record.answer_text,
-                                                                   'answer_text_list': chat_record.answer_text_list,
-                                                                   'message_tokens': chat_record.message_tokens,
-                                                                   'answer_tokens': chat_record.answer_tokens,
-                                                                   'const': chat_record.const,
-                                                                   'details': chat_record.details,
-                                                                   'improve_paragraph_id_list': chat_record.improve_paragraph_id_list,
-                                                                   'run_time': chat_record.run_time,
-                                                                   'source': chat_record.source,
-                                                                   'ip_address': chat_record.ip_address or '',
-                                                                   'index': chat_record.index},
-                                                  defaults={
-                                                      "vote_status": chat_record.vote_status,
-                                                      'problem_text': chat_record.problem_text,
-                                                      'answer_text': chat_record.answer_text,
-                                                      'answer_text_list': chat_record.answer_text_list,
-                                                      'message_tokens': chat_record.message_tokens,
-                                                      'answer_tokens': chat_record.answer_tokens,
-                                                      'const': chat_record.const,
-                                                      'details': chat_record.details,
-                                                      'improve_paragraph_id_list': chat_record.improve_paragraph_id_list,
-                                                      'run_time': chat_record.run_time,
-                                                      'index': chat_record.index,
-                                                      'source': chat_record.source,
-                                                      'ip_address': chat_record.ip_address or '',
-                                                  })
-            ChatCountSerializer(data={'chat_id': self.chat_id}).update_chat()
+
+        if not QuerySet(Chat).filter(id=self.chat_id).exists():
+            Chat(id=self.chat_id, application_id=self.application_id, abstract=chat_record.problem_text[0:1024],
+                 execute_type=ExecuteType.DEBUG if self.debug else ExecuteType.CHAT,
+                 chat_user_id=self.chat_user_id, chat_user_type=self.chat_user_type,
+                 ip_address=self.ip_address, source=self.source,
+                 asker=self.get_chat_user()).save()
+        else:
+            QuerySet(Chat).filter(id=self.chat_id).update(update_time=timezone.now())
+        # 插入会话记录
+        QuerySet(ChatRecord).update_or_create(id=chat_record.id,
+                                              create_defaults={'id': chat_record.id,
+                                                               'chat_id': chat_record.chat_id,
+                                                               "vote_status": chat_record.vote_status,
+                                                               'problem_text': chat_record.problem_text,
+                                                               'answer_text': chat_record.answer_text,
+                                                               'answer_text_list': chat_record.answer_text_list,
+                                                               'message_tokens': chat_record.message_tokens,
+                                                               'answer_tokens': chat_record.answer_tokens,
+                                                               'const': chat_record.const,
+                                                               'details': chat_record.details,
+                                                               'improve_paragraph_id_list': chat_record.improve_paragraph_id_list,
+                                                               'run_time': chat_record.run_time,
+                                                               'source': chat_record.source,
+                                                               'ip_address': chat_record.ip_address or '',
+                                                               'index': chat_record.index},
+                                              defaults={
+                                                  "vote_status": chat_record.vote_status,
+                                                  'problem_text': chat_record.problem_text,
+                                                  'answer_text': chat_record.answer_text,
+                                                  'answer_text_list': chat_record.answer_text_list,
+                                                  'message_tokens': chat_record.message_tokens,
+                                                  'answer_tokens': chat_record.answer_tokens,
+                                                  'const': chat_record.const,
+                                                  'details': chat_record.details,
+                                                  'improve_paragraph_id_list': chat_record.improve_paragraph_id_list,
+                                                  'run_time': chat_record.run_time,
+                                                  'index': chat_record.index,
+                                                  'source': chat_record.source,
+                                                  'ip_address': chat_record.ip_address or '',
+                                              })
+        ChatCountSerializer(data={'chat_id': self.chat_id}).update_chat()
 
     def to_dict(self):
 
diff --git a/apps/application/views/application_chat.py b/apps/application/views/application_chat.py
index 664f3c37eac..c0b0c5bb5c8 100644
--- a/apps/application/views/application_chat.py
+++ b/apps/application/views/application_chat.py
@@ -16,7 +16,7 @@
 
 from application.api.application_chat import ApplicationChatQueryAPI, ApplicationChatQueryPageAPI, \
     ApplicationChatExportAPI
-from application.models import ChatUserType, Application
+from application.models import ChatUserType, Application, ChatSourceChoices
 from application.serializers.application_chat import ApplicationChatQuerySerializers
 from chat.api.chat_api import ChatAPI, PromptGenerateAPI
 from chat.api.chat_authentication_api import ChatOpenAPI
@@ -24,10 +24,11 @@
 from common.auth import TokenAuth
 from common.auth.authentication import has_permissions
 from common.constants.permission_constants import PermissionConstants, RoleConstants, ViewPermission, CompareConstants
-from common.log.log import log
+from common.log.log import log, _get_ip_address
 from common.result import result
 from common.utils.common import query_params_to_single_dict
 
+
 def get_application_operation_object(application_id):
     application_model = QuerySet(model=Application).filter(id=application_id).first()
     if application_model is not None:
@@ -36,6 +37,7 @@ def get_application_operation_object(application_id):
         }
     return {}
 
+
 class ApplicationChat(APIView):
     authentication_classes = [TokenAuth]
 
@@ -132,9 +134,14 @@ class OpenView(APIView):
                                     CompareConstants.AND),
                      RoleConstants.WORKSPACE_MANAGE.get_workspace_role())
     def get(self, request: Request, workspace_id: str, application_id: str):
+        ip_address = _get_ip_address(request)
         return result.success(OpenChatSerializers(
             data={'workspace_id': workspace_id, 'application_id': application_id,
                   'chat_user_id': str(uuid.uuid7()), 'chat_user_type': ChatUserType.ANONYMOUS_USER,
+                  'ip_address': ip_address,
+                  'source': {
+                      'type': ChatSourceChoices.ONLINE.value}
+                ,
                   'debug': True}).open())
 
 
@@ -154,6 +161,7 @@ class ChatView(APIView):
     def post(self, request: Request, chat_id: str):
         return DebugChatSerializers(data={'chat_id': chat_id}).chat(request.data)
 
+
 class PromptGenerateView(APIView):
     authentication_classes = [TokenAuth]
 
@@ -175,8 +183,9 @@ class PromptGenerateView(APIView):
                      RoleConstants.WORKSPACE_MANAGE.get_workspace_role())
     @log(menu='Application', operate='Generate prompt',
          get_operation_object=lambda r, k: get_application_operation_object(k.get('application_id')))
-    def post(self, request: Request, workspace_id: str, model_id:str, application_id: str):
-        return PromptGenerateSerializer(data={'workspace_id': workspace_id, 'model_id': model_id, 'application_id': application_id}).generate_prompt(instance=request.data)
+    def post(self, request: Request, workspace_id: str, model_id: str, application_id: str):
+        return PromptGenerateSerializer(data={'workspace_id': workspace_id, 'model_id': model_id,
+                                              'application_id': application_id}).generate_prompt(instance=request.data)
 
 
 class DebugHistoricalConversation(APIView):
@@ -202,7 +211,8 @@ def get(self, request: Request, workspace_id: str, application_id: str, current_
     class RecordPageView(APIView):
         authentication_classes = [TokenAuth]
 
-        def get(self, request: Request, workspace_id: str, application_id: str, chat_id: str, current_page: int, page_size: int):
+        def get(self, request: Request, workspace_id: str, application_id: str, chat_id: str, current_page: int,
+                page_size: int):
             from chat.serializers.chat_record import HistoricalConversationRecordSerializer
 
             serializer = HistoricalConversationRecordSerializer(
@@ -242,4 +252,4 @@ def put(self, request: Request, workspace_id: str, application_id: str, chat_id:
             from application.models import Chat
             abstract = request.data.get('abstract', '')
             QuerySet(Chat).filter(id=chat_id, application_id=application_id).update(abstract=abstract)
-            return result.success(True)
\ No newline at end of file
+            return result.success(True)
diff --git a/apps/chat/serializers/chat.py b/apps/chat/serializers/chat.py
index 94479bff669..898190cf214 100644
--- a/apps/chat/serializers/chat.py
+++ b/apps/chat/serializers/chat.py
@@ -745,9 +745,11 @@ def open_work_flow(self, application):
         source = self.data.get("source")
         debug = self.data.get("debug")
         chat_id = str(uuid.uuid7())
-        ChatInfo(chat_id, chat_user_id, chat_user_type, ip_address, source, [],
-                 [],
-                 application_id, debug).set_cache()
+        chat_info = ChatInfo(chat_id, chat_user_id, chat_user_type, ip_address, source, [],
+                             [],
+                             application_id, debug)
+        chat_info.save_chat()
+        chat_info.set_cache()
         return chat_id
 
     def open_simple(self, application):
@@ -763,13 +765,15 @@ def open_simple(self, application):
                                                               target_type='KNOWLEDGE')]
 
         chat_id = str(uuid.uuid7())
-        ChatInfo(chat_id, chat_user_id, chat_user_type, ip_address, source, knowledge_id_list,
-                 [str(document.id) for document in
-                  QuerySet(Document).filter(
-                      knowledge_id__in=knowledge_id_list,
-                      is_active=False)],
-                 application_id,
-                 debug=debug).set_cache()
+        chat_info = ChatInfo(chat_id, chat_user_id, chat_user_type, ip_address, source, knowledge_id_list,
+                             [str(document.id) for document in
+                              QuerySet(Document).filter(
+                                  knowledge_id__in=knowledge_id_list,
+                                  is_active=False)],
+                             application_id,
+                             debug=debug)
+        chat_info.save_chat()
+        chat_info.set_cache()
         return chat_id
 
 
diff --git a/ui/src/api/application/chat-log.ts b/ui/src/api/application/chat-log.ts
index 2c14a48da4a..ba6042cf514 100644
--- a/ui/src/api/application/chat-log.ts
+++ b/ui/src/api/application/chat-log.ts
@@ -43,7 +43,7 @@ const postChatLogAddKnowledge: (
  }
  */
 const getChatLog: (
-  application_id: String,
+  application_id: string,
   page: pageRequest,
   param: any,
   loading?: Ref<boolean>,
@@ -61,8 +61,8 @@ const getChatLog: (
  * application_id, chart_id,order_asc
  */
 const getChatRecordLog: (
-  application_id: String,
-  chart_id: String,
+  application_id: string,
+  chart_id: string,
   page: pageRequest,
   loading?: Ref<boolean>,
   order_asc?: boolean,
@@ -108,11 +108,11 @@ const getMarkChatRecord: (
  }
  */
 const putChatRecordLog: (
-  application_id: String,
-  chart_id: String,
-  chart_record_id: String,
-  knowledge_id: String,
-  document_id: String,
+  application_id: string,
+  chart_id: string,
+  chart_record_id: string,
+  knowledge_id: string,
+  document_id: string,
   data: any,
   loading?: Ref<boolean>,
 ) => Promise<Result<any>> = (
@@ -138,12 +138,12 @@ const putChatRecordLog: (
  * application_id, chart_id,  chart_record_id, knowledge_id, document_id,paragraph_id
  */
 const delMarkChatRecord: (
-  application_id: String,
-  chart_id: String,
-  chart_record_id: String,
-  knowledge_id: String,
-  document_id: String,
-  paragraph_id: String,
+  application_id: string,
+  chart_id: string,
+  chart_record_id: string,
+  knowledge_id: string,
+  document_id: string,
+  paragraph_id: string,
   loading?: Ref<boolean>,
 ) => Promise<Result<any>> = (
   application_id,
diff --git a/ui/src/api/system-resource-management/chat-log.ts b/ui/src/api/system-resource-management/chat-log.ts
index 1200ab2fe19..adbf0133953 100644
--- a/ui/src/api/system-resource-management/chat-log.ts
+++ b/ui/src/api/system-resource-management/chat-log.ts
@@ -30,7 +30,7 @@ const postChatLogAddKnowledge: (
  }
  */
 const getChatLog: (
-  application_id: String,
+  application_id: string,
   page: pageRequest,
   param: any,
   loading?: Ref<boolean>,
@@ -48,8 +48,8 @@ const getChatLog: (
  * application_id, chart_id,order_asc
  */
 const getChatRecordLog: (
-  application_id: String,
-  chart_id: String,
+  application_id: string,
+  chart_id: string,
   page: pageRequest,
   loading?: Ref<boolean>,
   order_asc?: boolean,
@@ -90,11 +90,11 @@ const getMarkChatRecord: (
  }
  */
 const putChatRecordLog: (
-  application_id: String,
-  chart_id: String,
-  chart_record_id: String,
-  knowledge_id: String,
-  document_id: String,
+  application_id: string,
+  chart_id: string,
+  chart_record_id: string,
+  knowledge_id: string,
+  document_id: string,
   data: any,
   loading?: Ref<boolean>,
 ) => Promise<Result<any>> = (
@@ -120,12 +120,12 @@ const putChatRecordLog: (
  * application_id, chart_id,  chart_record_id, knowledge_id, document_id,paragraph_id
  */
 const delMarkChatRecord: (
-  application_id: String,
-  chart_id: String,
-  chart_record_id: String,
-  knowledge_id: String,
-  document_id: String,
-  paragraph_id: String,
+  application_id: string,
+  chart_id: string,
+  chart_record_id: string,
+  knowledge_id: string,
+  document_id: string,
+  paragraph_id: string,
   loading?: Ref<boolean>,
 ) => Promise<Result<any>> = (
   application_id,
diff --git a/ui/src/api/system-shared/tool.ts b/ui/src/api/system-shared/tool.ts
index c8a12eada9e..dcc1d1f7cc0 100644
--- a/ui/src/api/system-shared/tool.ts
+++ b/ui/src/api/system-shared/tool.ts
@@ -96,7 +96,7 @@ const getToolById: (tool_id: string, loading?: Ref<boolean>) => Promise<Result<a
  * 删除工具
  * @param 参数 tool_id
  */
-const delTool: (tool_id: String, loading?: Ref<boolean>) => Promise<Result<boolean>> = (
+const delTool: (tool_id: string, loading?: Ref<boolean>) => Promise<Result<boolean>> = (
   tool_id,
   loading,
 ) => {
diff --git a/ui/src/components/conversation/api/index.ts b/ui/src/components/conversation/api/index.ts
index b8f4f5771ff..a2adae0ffbd 100644
--- a/ui/src/components/conversation/api/index.ts
+++ b/ui/src/components/conversation/api/index.ts
@@ -20,7 +20,7 @@ export const debugApi = {
     if (applicationId) {
       return adminGet(`/workspace/${wsId}/application/${applicationId}/historical_conversation/${page}/${size}`)
     }
-    return adminGet(`/historical_conversation/${page}/${size}`)
+    return adminGet(`/workspace/${wsId}/historical_conversation/${page}/${size}`)
   },
 
   records: (chatId: string, page: number, size: number, applicationId?: string) => {
@@ -29,7 +29,7 @@ export const debugApi = {
     if (applicationId) {
       return adminGet(`/workspace/${wsId}/application/${applicationId}/historical_conversation_record/${chatId}/${page}/${size}`)
     }
-    return adminGet(`/historical_conversation_record/${chatId}/${page}/${size}`)
+    return adminGet(`/workspace/${wsId}/historical_conversation_record/${chatId}/${page}/${size}`)
   },
 
   deleteChat: (chatId: string, applicationId?: string) => {
@@ -38,7 +38,7 @@ export const debugApi = {
     if (applicationId) {
       return adminDel(`/workspace/${wsId}/application/${applicationId}/historical_conversation/${chatId}`)
     }
-    return adminDel(`/historical_conversation/${chatId}`)
+    return adminDel(`/workspace/${wsId}/historical_conversation/${chatId}`)
   },
 
   modifyChat: (chatId: string, data: any, applicationId?: string) => {
@@ -47,7 +47,7 @@ export const debugApi = {
     if (applicationId) {
       return adminPut(`/workspace/${wsId}/application/${applicationId}/historical_conversation/${chatId}`, data)
     }
-    return adminPut(`/historical_conversation/${chatId}`, data)
+    return adminPut(`/workspace/${wsId}/historical_conversation/${chatId}`, data)
   },
 
   uploadFile: (file: File, chatId: string) => {
diff --git a/ui/src/components/conversation/chat-panel/index.vue b/ui/src/components/conversation/chat-panel/index.vue
index ff50e1595dc..cb92ca3d128 100644
--- a/ui/src/components/conversation/chat-panel/index.vue
+++ b/ui/src/components/conversation/chat-panel/index.vue
@@ -10,7 +10,7 @@
         <img v-if="appInfo?.icon" :src="appInfo.icon" class="header-icon" />
         <div class="header-text">
           <span v-if="appInfo?.name" class="header-app-name">{{ appInfo.name }}</span>
-          <span class="header-title">{{ currentConversation?.name || '新对话' }}</span>
+          <span class="header-title">{{ currentConversation?.abstract || '新对话' }}</span>
         </div>
       </div>
       <slot name="header" />
@@ -38,60 +38,214 @@
     </div>
 
     <footer class="panel-input">
-      <div v-if="fileList.length" class="file-thumbs">
-        <div v-for="(f, i) in fileList" :key="f.uid" class="file-thumb">
-          <img v-if="f.previewUrl" :src="f.previewUrl" class="thumb-img" />
-          <span v-else class="thumb-icon">📎</span>
-          <span class="thumb-name">{{ f.name }}</span>
-          <button class="thumb-rm" @click="removeFile(i)">✕</button>
+      <div class="operate-textarea">
+        <!-- 文件预览区域 -->
+        <div v-if="fileList.length" class="file-preview-list">
+          <!-- 图片预览 -->
+          <el-space wrap>
+            <template v-for="(f, i) in imageFiles" :key="f.uid">
+              <div
+                class="file-item file-image"
+                @mouseenter="showDelete = f.url || ''"
+                @mouseleave="showDelete = ''"
+              >
+                <div
+                  v-if="showDelete === f.url"
+                  class="delete-icon"
+                  @click="removeFile(i)"
+                >
+                  <el-icon style="font-size: 16px; top: 2px">
+                    <CircleCloseFilled />
+                  </el-icon>
+                </div>
+                <el-image
+                  v-if="f.url"
+                  :src="f.url"
+                  fit="cover"
+                  style="width: 40px; height: 40px; display: block"
+                  class="border-r-6"
+                />
+                <el-image
+                  v-else-if="f.previewUrl"
+                  :src="f.previewUrl"
+                  fit="cover"
+                  style="width: 40px; height: 40px; display: block"
+                  class="border-r-6"
+                />
+              </div>
+            </template>
+          </el-space>
+
+          <!-- 文档预览 -->
+          <el-row :gutter="10">
+            <el-col
+              v-for="(f, i) in documentFiles"
+              :key="f.uid"
+              :xs="24"
+              :sm="12"
+              :md="12"
+              :lg="12"
+              :xl="12"
+              class="mb-8"
+            >
+              <el-card
+                shadow="never"
+                style="--el-card-padding: 8px; max-width: 100%"
+                class="file-card"
+              >
+                <div
+                  class="flex-between align-center"
+                  @mouseenter="showDelete = f.url || ''"
+                  @mouseleave="showDelete = ''"
+                >
+                  <div class="flex align-center">
+                    <img :src="getFileIcon(f.name)" alt="" width="24" />
+                    <div class="ml-4 ellipsis-1" :title="f.name">
+                      {{ f.name }}
+                    </div>
+                  </div>
+                  <div
+                    v-if="showDelete === f.url"
+                    class="delete-icon"
+                    @click="removeFile(i)"
+                  >
+                    <el-icon style="font-size: 16px; top: 2px">
+                      <CircleCloseFilled />
+                    </el-icon>
+                  </div>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+
+          <!-- 音频预览 -->
+          <el-row :gutter="10">
+            <el-col
+              v-for="(f, i) in audioFiles"
+              :key="f.uid"
+              :xs="24"
+              :sm="12"
+              :md="12"
+              :lg="12"
+              :xl="12"
+              class="mb-8"
+            >
+              <el-card shadow="never" style="--el-card-padding: 8px" class="file-card">
+                <div
+                  class="flex-between align-center"
+                  @mouseenter="showDelete = f.url || ''"
+                  @mouseleave="showDelete = ''"
+                >
+                  <div class="flex align-center">
+                    <img :src="getFileIcon(f.name)" alt="" width="24" />
+                    <div class="ml-4 ellipsis-1" :title="f.name">
+                      {{ f.name }}
+                    </div>
+                  </div>
+                  <div
+                    v-if="showDelete === f.url"
+                    class="delete-icon"
+                    @click="removeFile(i)"
+                  >
+                    <el-icon style="font-size: 16px; top: 2px">
+                      <CircleCloseFilled />
+                    </el-icon>
+                  </div>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+
+          <!-- 视频预览 -->
+          <el-space wrap>
+            <template v-for="(f, i) in videoFiles" :key="f.uid">
+              <div
+                class="file-item file-image"
+                @mouseenter="showDelete = f.url || ''"
+                @mouseleave="showDelete = ''"
+              >
+                <div
+                  v-if="showDelete === f.url"
+                  class="delete-icon"
+                  @click="removeFile(i)"
+                >
+                  <el-icon style="font-size: 16px; top: 2px">
+                    <CircleCloseFilled />
+                  </el-icon>
+                </div>
+                <video
+                  v-if="f.url"
+                  :src="f.url"
+                  controls
+                  style="width: 100px; display: block"
+                  class="border-r-6"
+                  autoplay
+                />
+              </div>
+            </template>
+          </el-space>
         </div>
-      </div>
 
-      <div class="input-wrapper" :class="{ focused }">
-        <input
-          ref="fileInputRef"
-          type="file"
-          multiple
-          :accept="acceptList"
-          style="display: none"
-          @change="handleFileSelect"
-        />
-        <textarea
+        <!-- 输入框 -->
+        <el-input
           ref="inputRef"
           v-model="question.content"
-          :disabled="streamLoading"
+          :autosize="{ minRows: 1, maxRows: 10 }"
+          type="textarea"
           :placeholder="placeholder"
-          @keydown="onKeydown"
+          :maxlength="100000"
+          @keydown.enter="handleKeydown"
           @paste="handlePaste"
-          @focus="focused = true"
-          @blur="focused = false"
-          rows="1"
+          class="chat-operate-textarea"
+          clearable
         />
-        <button
-          class="upload-btn"
-          :disabled="streamLoading"
-          @click="fileInputRef?.click()"
-        >
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-            <path d="M14 10v2.5a1.5 1.5 0 01-1.5 1.5h-9A1.5 1.5 0 012 12.5V10M8 2v8.5M5 5l3-3 3 3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </button>
-        <button
-          v-if="!streamLoading"
-          class="send-btn"
-          :class="{ active: canSend }"
-          :disabled="!canSend"
-          @click="send"
-        >
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-            <path d="M8 14V2M3 7l5-5 5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </button>
-        <button v-else class="send-btn stop" @click="$emit('stop')">
-          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-            <rect x="2" y="2" width="10" height="10" rx="2" fill="currentColor"/>
-          </svg>
-        </button>
+
+        <!-- 操作栏 -->
+        <div class="operate flex-between">
+          <div></div>
+          <div class="flex align-center">
+            <input
+              ref="fileInputRef"
+              type="file"
+              multiple
+              :accept="acceptList"
+              style="display: none"
+              @change="handleFileSelect"
+            />
+            <el-tooltip
+              effect="dark"
+              placement="top"
+              popper-class="upload-tooltip-width"
+            >
+              <template #content>
+                <div class="break-all pre-wrap">
+                  支持上传图片、文档、音频、视频文件，最多{{ maxFiles }}个，单个文件最大{{ maxSizeMB }}MB
+                </div>
+              </template>
+              <el-button
+                text
+                :disabled="streamLoading || fileList.length >= maxFiles"
+                @click="fileInputRef?.click()"
+              >
+                <el-icon :size="20"><Paperclip /></el-icon>
+              </el-button>
+            </el-tooltip>
+            <el-divider direction="vertical" />
+            <el-button
+              text
+              class="sent-button"
+              :disabled="!canSend"
+              @click="send"
+            >
+              <el-icon v-if="!streamLoading" :size="20">
+                <Promotion />
+              </el-icon>
+              <el-icon v-else :size="20" @click.stop="$emit('stop')">
+                <VideoPause />
+              </el-icon>
+            </el-button>
+          </div>
+        </div>
       </div>
     </footer>
   </main>
@@ -99,33 +253,33 @@
 
 <script setup lang="ts">
 import { ref, computed, nextTick, watch, onMounted, reactive } from 'vue'
+import { CircleCloseFilled, Paperclip, Promotion, VideoPause } from '@element-plus/icons-vue'
 import ContentList from '../content-list/index.vue'
 import Loading from '../loading/index.vue'
 import { Scroll } from '../index'
-import type { ChatMessage } from '../common/types'
+import { useChatStoreByType } from '../common/use-chat-store'
+import type { ChatType } from '../common/types'
 
 const props = withDefaults(
   defineProps<{
-    store: any
-    currentChatId?: string
+    type?: ChatType
     appInfo?: { name: string; icon: string } | null
     showHeader?: boolean
   }>(),
-  { showHeader: true },
+  { type: 'CHAT', showHeader: true },
 )
 
 const emit = defineEmits<{
   toggle: []
   send: [text: string, files?: any[]]
   stop: []
-  chatOpened: [chatId: string]
 }>()
 
-const { messages, msgLoading, streamLoading, currentConversation } = props.store
+const store = useChatStoreByType(props.type)
+const { messages, msgLoading, streamLoading, currentConversation, currentChatId } = store
 
-const focused = ref(false)
 const question = ref<any>({ content: '' })
-const inputRef = ref<HTMLTextAreaElement | null>(null)
+const inputRef = ref<any>(null)
 const fileInputRef = ref<HTMLInputElement | null>(null)
 const msgBoxRef = ref<HTMLElement | null>(null)
 let scroll: InstanceType<typeof Scroll> | null = null
@@ -138,6 +292,9 @@ const audioExts = ['mp3', 'wav', 'ogg', 'aac', 'm4a']
 const acceptList = [...imageExts, ...documentExts, ...videoExts, ...audioExts].map(e => `.${e}`).join(',')
 const getExt = (name: string) => name.split('.').pop()?.toLowerCase() || ''
 const isImage = (name: string) => imageExts.includes(getExt(name))
+const isDocument = (name: string) => documentExts.includes(getExt(name))
+const isAudio = (name: string) => audioExts.includes(getExt(name))
+const isVideo = (name: string) => videoExts.includes(getExt(name))
 
 interface FileItem {
   uid: number; name: string; size: number; raw: File
@@ -148,13 +305,41 @@ const fileList = ref<FileItem[]>([])
 const uploadPromises = ref<Promise<any>[]>([])
 const maxFiles = 10
 const maxSizeMB = 50
+const showDelete = ref('')
 
 const placeholder = computed(() => {
   if (streamLoading.value) return '正在回复中...'
   return '输入消息...'
 })
 
-const canSend = computed(() => question.value.content.trim() && !streamLoading.value)
+const canSend = computed(() => (question.value.content.trim() || fileList.value.length > 0) && !streamLoading.value)
+
+// 分类文件列表
+const imageFiles = computed(() => fileList.value.filter(f => isImage(f.name)))
+const documentFiles = computed(() => fileList.value.filter(f => isDocument(f.name)))
+const audioFiles = computed(() => fileList.value.filter(f => isAudio(f.name)))
+const videoFiles = computed(() => fileList.value.filter(f => isVideo(f.name)))
+
+const getFileIcon = (name: string) => {
+  const ext = getExt(name)
+  const iconMap: Record<string, string> = {
+    pdf: 'https://cdn.jsdelivr.net/npm/@element-plus/icons-vue@2.3.1/dist/svg/document.svg',
+    doc: 'https://cdn.jsdelivr.net/npm/@element-plus/icons-vue@2.3.1/dist/svg/document.svg',
+    docx: 'https://cdn.jsdelivr.net/npm/@element-plus/icons-vue@2.3.1/dist/svg/document.svg',
+    xls: 'https://cdn.jsdelivr.net/npm/@element-plus/icons-vue@2.3.1/dist/svg/document.svg',
+    xlsx: 'https://cdn.jsdelivr.net/npm/@element-plus/icons-vue@2.3.1/dist/svg/document.svg',
+    txt: 'https://cdn.jsdelivr.net/npm/@element-plus/icons-vue@2.3.1/dist/svg/document.svg',
+    md: 'https://cdn.jsdelivr.net/npm/@element-plus/icons-vue@2.3.1/dist/svg/document.svg',
+    html: 'https://cdn.jsdelivr.net/npm/@element-plus/icons-vue@2.3.1/dist/svg/document.svg',
+    csv: 'https://cdn.jsdelivr.net/npm/@element-plus/icons-vue@2.3.1/dist/svg/document.svg',
+    mp3: 'https://cdn.jsdelivr.net/npm/@element-plus/icons-vue@2.3.1/dist/svg/headset.svg',
+    wav: 'https://cdn.jsdelivr.net/npm/@element-plus/icons-vue@2.3.1/dist/svg/headset.svg',
+    ogg: 'https://cdn.jsdelivr.net/npm/@element-plus/icons-vue@2.3.1/dist/svg/headset.svg',
+    aac: 'https://cdn.jsdelivr.net/npm/@element-plus/icons-vue@2.3.1/dist/svg/headset.svg',
+    m4a: 'https://cdn.jsdelivr.net/npm/@element-plus/icons-vue@2.3.1/dist/svg/headset.svg',
+  }
+  return iconMap[ext] || 'https://cdn.jsdelivr.net/npm/@element-plus/icons-vue@2.3.1/dist/svg/document.svg'
+}
 
 const validateFile = (file: File): boolean => {
   if (fileList.value.length >= maxFiles) return false
@@ -177,12 +362,12 @@ const addFile = (file: File) => {
 
   const uploadPromise = (async () => {
     try {
-      let cid = props.currentChatId
+      let cid = currentChatId.value
       if (!cid) {
-        cid = await props.store.openChat()
-        emit('chatOpened', cid)
+        cid = await store.openChat(store.applicationId.value)
+        currentChatId.value = cid
       }
-      const result = await props.store.uploadFile(file, cid)
+      const result = await store.uploadFile(file, cid)
       item.url = result.url
       const parts = result.url.split('/')
       item.file_id = parts[parts.length - 1]
@@ -234,7 +419,7 @@ const categorize = () => {
   const images: any[] = []; const documents: any[] = []
   const audio: any[] = []; const video: any[] = []; const files: any[] = []
   fileList.value.forEach(f => {
-    const entry = { url: f.url || '', name: f.name }
+    const entry = { url: f.url || '', file_id: f.file_id || '', name: f.name }
     if (isImage(f.name)) images.push(entry)
     else if (documentExts.includes(getExt(f.name))) documents.push(entry)
     else if (audioExts.includes(getExt(f.name))) audio.push(entry)
@@ -267,8 +452,32 @@ const send = async () => {
 }
 
 // ── 键盘 ────────────────────────────────────────────────
-const onKeydown = (e: KeyboardEvent) => {
-  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send() }
+const handleKeydown = (e: KeyboardEvent) => {
+  const isMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent,
+  )
+  // 如果是移动端，且按下回车键，不直接发送
+  if (isMobile && e.key === 'Enter') {
+    return
+  }
+  if (!e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey) {
+    e.preventDefault()
+    if (canSend.value && !e.isComposing) {
+      send()
+    }
+  } else {
+    // 如果同时按下ctrl/shift/cmd/opt +enter，则会换行
+    const textarea = inputRef.value?.$el?.querySelector('.el-textarea__inner') as HTMLTextAreaElement
+    if (textarea) {
+      const startPos = textarea.selectionStart
+      const endPos = textarea.selectionEnd
+      e.preventDefault()
+      question.value.content = question.value.content.slice(0, startPos) + '\n' + question.value.content.slice(endPos)
+      nextTick(() => {
+        textarea.setSelectionRange(startPos + 1, startPos + 1)
+      })
+    }
+  }
 }
 
 // ── 滚动 ────────────────────────────────────────────────
@@ -348,65 +557,129 @@ defineExpose({ scrollToBottom })
 .msg-row.assistant { align-items: flex-start; }
 
 .panel-input {
-  flex-shrink: 0; padding: 12px 16px 16px; background: var(--bg, #fff);
-  display: flex; flex-direction: column; align-items: center;
-}
-
-.file-thumbs {
-  display: flex; gap: 8px; padding: 0 0 8px; flex-wrap: wrap; width: 100%; max-width: 680px;
-}
-.file-thumb {
-  position: relative; display: flex; align-items: center; gap: 6px;
-  padding: 4px 8px; border-radius: 6px; border: 1px solid var(--bd, #dcdfe6);
-  font-size: 12px;
-}
-.thumb-img { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; }
-.thumb-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t2, #606266); }
-.thumb-rm {
-  position: absolute; top: -4px; right: -4px; width: 16px; height: 16px;
-  border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.5); color: #fff;
-  font-size: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center;
-  opacity: 0; transition: opacity 0.15s;
-}
-.file-thumb:hover .thumb-rm { opacity: 1; }
-
-.input-wrapper {
-  width: 100%; max-width: 680px; display: flex; align-items: flex-end; gap: 8px;
-  background: #fff; border: 1px solid var(--bd, #dcdfe6); border-radius: 16px;
-  padding: 8px 8px 8px 16px; transition: border-color 0.2s, box-shadow 0.2s;
-}
-.input-wrapper.focused {
-  border-color: var(--el-color-primary, #3370ff);
-  box-shadow: 0 0 0 2px rgba(51, 112, 255, 0.1);
-}
-
-.input-wrapper textarea {
-  flex: 1; border: none; outline: none; resize: none; font-family: inherit;
-  font-size: 14px; line-height: 1.5; background: transparent;
-  color: var(--t1, #303133); min-height: 24px; max-height: 160px;
-  padding: 4px 0; word-break: break-word;
-}
-.input-wrapper textarea::placeholder { color: var(--t3, #909399); }
-
-.upload-btn {
-  width: 32px; height: 32px; border-radius: 8px; border: none;
-  background: transparent; color: var(--t3, #909399); cursor: pointer;
-  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
-  transition: background 0.15s, color 0.15s;
-}
-.upload-btn:hover { background: rgba(0, 0, 0, 0.05); color: var(--t2, #606266); }
-.upload-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-
-.send-btn {
-  width: 36px; height: 36px; border-radius: 10px; border: none;
-  background: var(--bd, #dcdfe6); color: var(--t3, #909399); cursor: not-allowed;
-  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
-  transition: background 0.2s, color 0.2s, transform 0.1s;
-}
-.send-btn.active { background: var(--t1, #303133); color: #fff; cursor: pointer; }
-.send-btn.active:hover { opacity: 0.85; }
-.send-btn.active:active { transform: scale(0.92); }
-.send-btn.stop { background: #ef4444; color: #fff; cursor: pointer; }
-.send-btn.stop:hover { background: #dc2626; }
-.send-btn.stop:active { transform: scale(0.92); }
+  flex-shrink: 0;
+  padding: 12px 16px 16px;
+  background: var(--bg, #fff);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.operate-textarea {
+  width: 100%;
+  max-width: 680px;
+  box-shadow: 0px 6px 24px 0px rgba(var(--el-text-color-primary-rgb), 0.08);
+  background-color: #ffffff;
+  border-radius: 8px;
+  border: 1px solid #ffffff;
+  box-sizing: border-box;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.operate-textarea:focus-within {
+  border: 1px solid var(--el-color-primary);
+}
+
+.operate-textarea :deep(.el-textarea__inner) {
+  border-radius: 8px !important;
+  box-shadow: none;
+  resize: none;
+  padding: 13px 16px;
+  box-sizing: border-box;
+  min-height: 47px !important;
+}
+
+.file-preview-list {
+  padding: 8px 12px;
+}
+
+.file-item {
+  position: relative;
+  overflow: inherit;
+}
+
+.file-image .delete-icon {
+  position: absolute;
+  right: -5px;
+  top: -5px;
+  z-index: 1;
+}
+
+.delete-icon {
+  cursor: pointer;
+  color: var(--el-color-info);
+}
+
+.delete-icon:hover {
+  color: var(--el-color-danger);
+}
+
+.file-card {
+  cursor: pointer;
+}
+
+.operate {
+  padding: 6px 10px;
+}
+
+.sent-button {
+  max-height: none;
+}
+
+.sent-button .el-icon {
+  font-size: 24px;
+}
+
+.mb-8 {
+  margin-bottom: 8px;
+}
+
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.flex {
+  display: flex;
+}
+
+.ellipsis-1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.border-r-6 {
+  border-radius: 6px;
+}
+
+.break-all {
+  word-break: break-all;
+}
+
+.pre-wrap {
+  white-space: pre-wrap;
+}
+
+.ml-4 {
+  margin-left: 4px;
+}
+
+@media only screen and (max-width: 768px) {
+  .panel-input {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+  }
+}
+
+.upload-tooltip-width {
+  width: 300px;
+}
 </style>
diff --git a/ui/src/components/conversation/common/types.ts b/ui/src/components/conversation/common/types.ts
index 415c745134e..91103ac9578 100644
--- a/ui/src/components/conversation/common/types.ts
+++ b/ui/src/components/conversation/common/types.ts
@@ -1,8 +1,9 @@
 export interface Conversation {
   id: string
-  name: string
-  createTime?: string
-  updateTime?: string
+  abstract: string
+  application_id?: string
+  create_time?: string
+  update_time?: string
 }
 
 export interface ChatMessage {
diff --git a/ui/src/components/conversation/common/use-chat-store/chat/index.ts b/ui/src/components/conversation/common/use-chat-store/chat/index.ts
index 76ee3d7308d..c5b425d2a81 100644
--- a/ui/src/components/conversation/common/use-chat-store/chat/index.ts
+++ b/ui/src/components/conversation/common/use-chat-store/chat/index.ts
@@ -1,4 +1,5 @@
 import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
 import { chatApi } from '../../../api'
 import { useStreamManager } from '../shared/use-stream-manager'
 import { useMessagePagination } from '../shared/use-message-pagination'
@@ -6,9 +7,38 @@ import { useConversationCrud } from '../shared/use-conversation-crud'
 import { aggregators } from '../../../index'
 import type { ChatMessage } from '../../types'
 
+// ── 共享状态（单例） ─────────────────────────────────────
+const appInfo = ref<{ name: string; icon: string } | null>(null)
+const currentChatId = ref('')
+
+// ── 会话 CRUD ─────────────────────────────────────────
+const { conversations, loadConversations, loadMore } = useConversationCrud({
+  pageConversationAPI: (query: any) => chatApi.history(query.currentPage, query.pageSize),
+})
+
+// ── 消息分页 ─────────────────────────────────────────
+const {
+  messages,
+  msgLoading,
+  hasMore,
+  loadMessages,
+  loadMoreMessages,
+  pushMessage,
+  resetMsgState,
+} = useMessagePagination({
+  pageConversationMessage: (cid: string, query: any) =>
+    chatApi.records(cid, query.currentPage, query.pageSize),
+})
+
+// ── 流式管理 ─────────────────────────────────────────
+const streamManager = useStreamManager()
+
+// ── 计算属性 ─────────────────────────────────────────
+const currentConversation = computed(() => conversations.value.find(c => c.id === currentChatId.value) || null)
+
 export function useChatStore() {
-  const appInfo = ref<{ name: string; icon: string } | null>(null)
-  const currentChatId = computed(() => '')
+  const route = useRoute()
+  const applicationId = computed(() => route.params.id as string || route.params.applicationId as string || '')
 
   const fetchAppInfo = async (applicationId?: string) => {
     try {
@@ -19,28 +49,6 @@ export function useChatStore() {
     }
   }
 
-  // ── 会话 CRUD ─────────────────────────────────────────
-  const { conversations, loadConversations, loadMore } = useConversationCrud({
-    pageConversationAPI: (query: any) => chatApi.history(query.currentPage, query.pageSize),
-  })
-
-  // ── 消息分页 ─────────────────────────────────────────
-  const {
-    messages,
-    msgLoading,
-    hasMore,
-    loadMessages,
-    loadMoreMessages,
-    pushMessage,
-    resetMsgState,
-  } = useMessagePagination({
-    pageConversationMessage: (cid: string, query: any) =>
-      chatApi.records(cid, query.currentPage, query.pageSize),
-  })
-
-  // ── 流式管理 ─────────────────────────────────────────
-  const streamManager = useStreamManager()
-
   // ── 流式聚合（内部） ─────────────────────────────────
   const appendChunk = (message: ChatMessage, chunk: any) => {
     if (!chunk) return
@@ -72,7 +80,7 @@ export function useChatStore() {
   })
 
   // ── 会话操作 ─────────────────────────────────────────
-  const openChat = async () => {
+  const openChat = async (appId?: string) => {
     const res = await chatApi.open()
     return res.data
   }
@@ -84,9 +92,9 @@ export function useChatStore() {
   }
 
   const renameChat = async (id: string, name: string) => {
-    await chatApi.modifyChat(id, { name })
+    await chatApi.modifyChat(id, { abstract: name })
     const c = conversations.value.find((x) => x.id === id)
-    if (c) c.name = name
+    if (c) c.abstract = name
   }
 
   const chat = (chatId: string, data: any) => chatApi.chat(chatId, data)
@@ -100,11 +108,15 @@ export function useChatStore() {
   return {
     // 状态
     appInfo,
+    currentChatId,
+    currentConversation,
     conversations,
     messages,
     msgLoading,
     hasMore,
-    streamLoading: computed(() => false),
+    streamLoading: computed(() => streamManager.getStreamLoading(currentChatId.value)),
+    // 路由
+    applicationId,
     // 会话
     loadConversations,
     loadMore,
diff --git a/ui/src/components/conversation/common/use-chat-store/debug/index.ts b/ui/src/components/conversation/common/use-chat-store/debug/index.ts
index 95e3b0236de..48d606c507b 100644
--- a/ui/src/components/conversation/common/use-chat-store/debug/index.ts
+++ b/ui/src/components/conversation/common/use-chat-store/debug/index.ts
@@ -1,4 +1,5 @@
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import { debugApi } from '../../../api'
 import { useStreamManager } from '../shared/use-stream-manager'
 import { useMessagePagination } from '../shared/use-message-pagination'
@@ -6,41 +7,56 @@ import { useConversationCrud } from '../shared/use-conversation-crud'
 import { aggregators } from '../../../index'
 import type { ChatMessage } from '../../types'
 
-export function useDebugStore(applicationId?: string) {
-  const appInfo = ref<{ name: string; icon: string } | null>(null)
+// ── 共享状态（单例） ─────────────────────────────────────
+const appInfo = ref<{ name: string; icon: string } | null>(null)
+const currentChatId = ref('')
+let currentApplicationId = ''
+
+// ── 会话 CRUD ─────────────────────────────────────────
+const { conversations, loadConversations, loadMore } = useConversationCrud({
+  pageConversationAPI: (query: any) => debugApi.history(query.currentPage, query.pageSize, currentApplicationId),
+})
+
+// ── 消息分页 ─────────────────────────────────────────
+const {
+  messages,
+  msgLoading,
+  hasMore,
+  loadMessages,
+  loadMoreMessages,
+  pushMessage,
+  resetMsgState,
+} = useMessagePagination({
+  pageConversationMessage: (cid: string, query: any) =>
+    debugApi.records(cid, query.currentPage, query.pageSize, currentApplicationId),
+})
+
+// ── 流式管理 ─────────────────────────────────────────
+const streamManager = useStreamManager()
+
+// ── 计算属性 ─────────────────────────────────────────
+const currentConversation = computed(() => conversations.value.find(c => c.id === currentChatId.value) || null)
+
+export function useDebugStore() {
+  const route = useRoute()
+  const applicationId = computed(() => route.params.id as string || route.params.applicationId as string || '')
+  
+  // 更新当前 applicationId
+  watch(applicationId, (newId) => {
+    currentApplicationId = newId
+  }, { immediate: true })
 
   const fetchAppInfo = async (appId?: string) => {
     try {
       const { getApi } = await import('../../../api')
       const api = getApi('DEBUG')
       // 如果有获取应用详情的接口，在这里调用
-      // const res = await api.getApplicationDetail(appId || applicationId)
+      // const res = await api.getApplicationDetail(appId || applicationId.value)
       // appInfo.value = { name: res.data.name, icon: res.data.icon }
     } catch (e) {
       // 静默处理
     }
   }
-  // ── 会话 CRUD ─────────────────────────────────────────
-  const { conversations, loadConversations, loadMore } = useConversationCrud({
-    pageConversationAPI: (query: any) => debugApi.history(query.currentPage, query.pageSize, applicationId),
-  })
-
-  // ── 消息分页 ─────────────────────────────────────────
-  const {
-    messages,
-    msgLoading,
-    hasMore,
-    loadMessages,
-    loadMoreMessages,
-    pushMessage,
-    resetMsgState,
-  } = useMessagePagination({
-    pageConversationMessage: (cid: string, query: any) =>
-      debugApi.records(cid, query.currentPage, query.pageSize, applicationId),
-  })
-
-  // ── 流式管理 ─────────────────────────────────────────
-  const streamManager = useStreamManager()
 
   // ── 流式聚合（内部） ─────────────────────────────────
   const appendChunk = (message: ChatMessage, chunk: any) => {
@@ -73,21 +89,21 @@ export function useDebugStore(applicationId?: string) {
   })
 
   // ── 会话操作 ─────────────────────────────────────────
-  const openChat = async (applicationId: string) => {
-    const res = await debugApi.open(applicationId)
+  const openChat = async (appId?: string) => {
+    const res = await debugApi.open(appId || applicationId.value)
     return res.data
   }
 
   const deleteChat = async (id: string) => {
-    await debugApi.deleteChat(id, applicationId)
+    await debugApi.deleteChat(id, applicationId.value)
     const idx = conversations.value.findIndex((c) => c.id === id)
     if (idx >= 0) conversations.value.splice(idx, 1)
   }
 
   const renameChat = async (id: string, name: string) => {
-    await debugApi.modifyChat(id, { name }, applicationId)
+    await debugApi.modifyChat(id, { abstract: name }, applicationId.value)
     const c = conversations.value.find((x) => x.id === id)
-    if (c) c.name = name
+    if (c) c.abstract = name
   }
 
   const chat = (chatId: string, data: any) => debugApi.chat(chatId, data)
@@ -96,7 +112,7 @@ export function useDebugStore(applicationId?: string) {
   const uploadFile = async (file: File, chatId: string): Promise<{ url: string; name: string }> => {
     let cid = chatId
     if (!cid) {
-      cid = await openChat(applicationId)
+      cid = await openChat(applicationId.value)
     }
     const res = await debugApi.uploadFile(file, cid)
     return { url: res.data, name: file.name }
@@ -105,11 +121,15 @@ export function useDebugStore(applicationId?: string) {
   return {
     // 状态
     appInfo,
+    currentChatId,
+    currentConversation,
     conversations,
     messages,
     msgLoading,
     hasMore,
-    streamLoading: computed(() => false),
+    streamLoading: computed(() => streamManager.getStreamLoading(currentChatId.value)),
+    // 路由
+    applicationId,
     // 会话
     loadConversations,
     loadMore,
diff --git a/ui/src/components/conversation/common/use-chat-store/index.ts b/ui/src/components/conversation/common/use-chat-store/index.ts
index b0e6e0c9fd2..cc8a2bc66a5 100644
--- a/ui/src/components/conversation/common/use-chat-store/index.ts
+++ b/ui/src/components/conversation/common/use-chat-store/index.ts
@@ -1,6 +1,7 @@
 import { useChatStore } from './chat'
 import { useDebugStore } from './debug'
+import type { ChatType } from '../types'
 
-export function useChatStoreByType(type: 'CHAT' | 'DEBUG', applicationId?: string) {
-  return type === 'DEBUG' ? useDebugStore(applicationId) : useChatStore()
+export function useChatStoreByType(type: ChatType) {
+  return type === 'DEBUG' ? useDebugStore() : useChatStore()
 }
diff --git a/ui/src/components/conversation/content/items/question.vue b/ui/src/components/conversation/content/items/question.vue
index 0b258d70b87..0738401a719 100644
--- a/ui/src/components/conversation/content/items/question.vue
+++ b/ui/src/components/conversation/content/items/question.vue
@@ -10,19 +10,19 @@
       <div v-if="content.images?.length" class="q-section">
         <div class="q-images">
           <template v-for="(img, i) in content.images" :key="'img-'+i">
-            <img v-if="img.url" :src="img.url" class="q-img" />
+            <img v-if="img.url" :src="resetUrl(img.url)" class="q-img" />
           </template>
         </div>
       </div>
       <div v-if="content.audio?.length" class="q-section">
         <div v-for="(a, i) in content.audio" :key="'aud-'+i" class="q-audio-wrap">
-          <audio :src="a.url" controls />
+          <audio :src="resetUrl(a.url)" controls />
         </div>
       </div>
       <div v-if="content.video?.length" class="q-section">
         <div class="q-videos">
           <div v-for="(v, i) in content.video" :key="'vid-'+i" class="q-video-wrap">
-            <video :src="v.url" controls />
+            <video :src="resetUrl(v.url)" controls />
           </div>
         </div>
       </div>
@@ -39,6 +39,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { resetUrl } from '@/utils/common'
 
 const props = defineProps<{ content: any }>()
 
@@ -50,7 +51,7 @@ const bubbleClass = computed(() => {
 })
 
 const download = (file: any) => {
-  if (file.url) window.open(file.url, '_blank')
+  if (file.url) window.open(resetUrl(file.url), '_blank')
 }
 </script>
 
diff --git a/ui/src/components/conversation/index.vue b/ui/src/components/conversation/index.vue
index 8f50d034935..cdd59b32c9d 100644
--- a/ui/src/components/conversation/index.vue
+++ b/ui/src/components/conversation/index.vue
@@ -2,14 +2,11 @@
   <div class="conversation-plus" :class="{ 'sidebar-open': sidebarOpen }">
     <div class="conv-sidebar" :class="{ open: sidebarOpen }">
       <Sidebar
-        :conversations="store.conversations.value"
-        :current-id="currentChatId"
+        :type="type"
         :mode="sidebarMode"
         :open="sidebarOpen"
-        @open="handleOpen"
-        @create="handleNewChat"
-        @delete="handleDelete"
-        @rename="handleRename"
+        @update:open="sidebarOpen = $event"
+        @update:mode="sidebarMode = $event"
       />
     </div>
 
@@ -18,13 +15,11 @@
     <div class="conv-main">
       <ChatPanel
         ref="panelRef"
-        :store="store"
-        :current-chat-id="currentChatId"
+        :type="type"
         :app-info="store.appInfo.value"
         @toggle="sidebarOpen = !sidebarOpen"
         @send="handleSend"
-        @stop="store.cancelStream(currentChatId)"
-        @chat-opened="(id: string) => { currentChatId = id }"
+        @stop="store.cancelStream(store.currentChatId.value)"
       />
     </div>
   </div>
@@ -32,7 +27,6 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onBeforeUnmount, provide } from 'vue'
-import { useRoute } from 'vue-router'
 import { useChatStoreByType } from './common/use-chat-store'
 import type { ChatType } from './common/types'
 import ChatPanel from './chat-panel/index.vue'
@@ -59,10 +53,7 @@ const emit = defineEmits<{
   refresh: [chatId: string]
 }>()
 
-const route = useRoute()
-const applicationId = computed(() => route.params.id as string || route.params.applicationId as string || '')
-
-const store = useChatStoreByType(props.type, applicationId.value)
+const store = useChatStoreByType(props.type)
 provide('chat', store)
 
 const BREAKPOINT = 768
@@ -82,7 +73,6 @@ const sidebarOpen = ref(
 )
 
 const panelRef = ref()
-const currentChatId = ref('')
 
 if (props.defaultOpen === 'auto') {
   watch(isMobile, (mobile) => {
@@ -96,53 +86,61 @@ if (props.defaultMode === 'auto') {
   })
 }
 
-const handleNewChat = async () => {
-  const id = await store.openChat(applicationId.value)
-  currentChatId.value = id
-  sidebarOpen.value = false
-  emit('openChat', id)
-}
-
-const handleOpen = async (id: string) => {
-  currentChatId.value = id
-  await store.loadMessages(id)
-  sidebarOpen.value = false
-}
-
-const handleDelete = async (id: string) => {
-  await store.deleteChat(id)
-  if (currentChatId.value === id) {
-    currentChatId.value = store.conversations.value[0]?.id || ''
+const handleSend = async (text: string, files?: any[]) => {
+  if (!store.currentChatId.value) {
+    const id = await store.openChat(store.applicationId.value)
+    store.currentChatId.value = id
+    await store.loadConversations()
   }
-}
 
-const handleRename = (id: string, name: string) => {
-  store.renameChat(id, name)
-}
+  const cid = store.currentChatId.value
 
-const handleSend = async (text: string, files?: any[]) => {
-  if (!currentChatId.value) {
-    await handleNewChat()
+  // 判断是否是第一条消息，如果是则更新对话的 abstract
+  const isFirstMessage = store.messages.value.length === 0
+  if (isFirstMessage && text.trim()) {
+    const abstract = text.trim().substring(0, 256)
+    await store.renameChat(cid, abstract)
   }
 
-  const cid = currentChatId.value
+  // 分类文件
+  const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
+  const docExts = ['pdf', 'docx', 'txt', 'xls', 'xlsx', 'md', 'html', 'csv']
+  const audioExts = ['mp3', 'wav', 'ogg', 'aac', 'm4a']
+  const videoExts = ['mp4', 'avi', 'mkv', 'mov', 'flv', 'wmv']
+  const getExt = (name: string) => name.split('.').pop()?.toLowerCase() || ''
+  const byExt = (exts: string[]) => (f: any) => exts.includes(getExt(f.name))
+
+  const images = files?.filter(byExt(imageExts)).map((f: any) => ({ url: f.url, file_id: f.file_id, name: f.name })) || []
+  const documents = files?.filter(byExt(docExts)).map((f: any) => ({ url: f.url, file_id: f.file_id, name: f.name })) || []
+  const audio = files?.filter(byExt(audioExts)).map((f: any) => ({ url: f.url, file_id: f.file_id, name: f.name })) || []
+  const video = files?.filter(byExt(videoExts)).map((f: any) => ({ url: f.url, file_id: f.file_id, name: f.name })) || []
+  const other = files?.filter((f: any) => ![...imageExts, ...docExts, ...audioExts, ...videoExts].includes(getExt(f.name)))
+    .map((f: any) => ({ url: f.url, file_id: f.file_id, name: f.name })) || []
+
+  // 构建 question content
+  const questionContent: any = { type: 'QUESTION', content: text }
+  if (images.length) questionContent.images = images
+  if (documents.length) questionContent.documents = documents
+  if (audio.length) questionContent.audio = audio
+  if (video.length) questionContent.video = video
+  if (other.length) questionContent.files = other
 
   store.pushMessage({
     role: 'USER',
-    content: [{ type: 'QUESTION', content: text }],
+    content: [questionContent],
     id: '',
   })
 
   store.pushMessage(store.createAnswerMessage())
   const aiMsg = store.messages.value[store.messages.value.length - 1]
 
+  // 构建 API payload
   const payload: any = { message: text, stream: true, re_chat: false }
-  if (files?.length) {
-    payload.image_list = files.filter((f: any) => /\.(jpg|jpeg|png|gif|bmp)$/i.test(f.name))
-    payload.document_list = files.filter((f: any) => /\.(pdf|docx|txt|xls|xlsx|md|html|csv)$/i.test(f.name))
-    payload.audio_list = files.filter((f: any) => /\.(mp3|wav|ogg|aac|m4a)$/i.test(f.name))
-    payload.video_list = files.filter((f: any) => /\.(mp4|avi|mkv|mov|flv|wmv)$/i.test(f.name))
-  }
+  if (images.length) payload.image_list = images
+  if (documents.length) payload.document_list = documents
+  if (audio.length) payload.audio_list = audio
+  if (video.length) payload.video_list = video
+  if (other.length) payload.other_list = other
 
   store.startStream({
     cid,
@@ -163,12 +161,12 @@ const onResize = () => { isMobile.value = window.innerWidth < 768 }
 onMounted(() => {
   window.addEventListener('resize', onResize)
   store.loadConversations()
-  store.fetchAppInfo(applicationId.value)
+  store.fetchAppInfo(store.applicationId.value)
 })
 
 onBeforeUnmount(() => {
   window.removeEventListener('resize', onResize)
-  store.cancelStream(currentChatId.value)
+  store.cancelStream(store.currentChatId.value)
 })
 </script>
 
diff --git a/ui/src/components/conversation/sidebar/index.vue b/ui/src/components/conversation/sidebar/index.vue
index 02626bc9dc8..0b35e29542c 100644
--- a/ui/src/components/conversation/sidebar/index.vue
+++ b/ui/src/components/conversation/sidebar/index.vue
@@ -1,67 +1,137 @@
 <template>
   <aside class="sidebar" :class="[mode, { open }]">
-    <div class="sidebar-header">
-      <span class="sidebar-title">对话历史</span>
-    </div>
+    <div class="sidebar-content">
+      <!-- 应用信息 -->
+      <div class="sidebar-header">
+        <div class="app-info">
+          <el-avatar
+            v-if="store.appInfo.value?.icon"
+            shape="square"
+            :size="32"
+            style="background: none"
+          >
+            <img :src="store.appInfo.value.icon" alt="" />
+          </el-avatar>
+          <div v-else class="app-icon-placeholder">
+            <el-icon :size="20"><ChatDotRound /></el-icon>
+          </div>
+          <h4 class="app-name" :title="store.appInfo.value?.name || 'AI 助手'">
+            {{ store.appInfo.value?.name || 'AI 助手' }}
+          </h4>
+        </div>
+      </div>
 
-    <div class="sidebar-nav">
-      <div v-if="conversations.length === 0" class="nav-empty">暂无对话</div>
-      <div
-        v-for="item in conversations"
-        :key="item.id"
-        class="nav-item"
-        :class="{ active: currentId === item.id }"
-        @click="handleSwitch(item.id)"
-      >
-        <span class="nav-item-text">{{ item.name || '新对话' }}</span>
-        <span class="nav-item-actions">
-          <button @click.stop="startRename(item)">重命名</button>
-          <button class="delete" @click.stop="handleDelete(item.id)">删除</button>
-        </span>
+      <!-- 新建对话按钮 -->
+      <div class="sidebar-action">
+        <el-button type="primary" plain class="add-button" @click="handleNew">
+          <el-icon><Plus /></el-icon>
+          <span>新建对话</span>
+        </el-button>
+      </div>
+
+      <!-- 历史记录标题 -->
+      <div class="sidebar-title">
+        <span>对话历史</span>
       </div>
-    </div>
 
-    <div class="sidebar-footer">
-      <button @click="handleNew">
-        <span>+</span> 新对话
-      </button>
+      <!-- 对话列表 -->
+      <div class="sidebar-nav">
+        <div v-if="store.conversations.value.length === 0" class="nav-empty">
+          <el-text type="info">暂无对话</el-text>
+        </div>
+        <div
+          v-for="item in store.conversations.value"
+          :key="item.id"
+          class="nav-item"
+          :class="{ active: store.currentChatId.value === item.id }"
+          @click="handleSwitch(item.id)"
+        >
+          <template v-if="renamingId === item.id">
+            <el-input
+              v-model="renameValue"
+              size="small"
+              class="rename-input"
+              @blur="confirmRename"
+              @keyup.enter="confirmRename"
+              @click.stop
+            />
+          </template>
+          <template v-else>
+            <span class="nav-item-text" :title="item.abstract || '新对话'">
+              {{ item.abstract || '新对话' }}
+            </span>
+            <div class="nav-item-actions" @click.stop>
+              <el-dropdown trigger="click">
+                <el-button text class="action-btn">
+                  <el-icon><MoreFilled /></el-icon>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click.stop="startRename(item)">
+                      <el-icon><Edit /></el-icon>
+                      重命名
+                    </el-dropdown-item>
+                    <el-dropdown-item @click.stop="handleDelete(item.id)">
+                      <el-icon><Delete /></el-icon>
+                      删除
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </template>
+        </div>
+      </div>
     </div>
   </aside>
 </template>
 
 <script setup lang="ts">
 import { ref, nextTick } from 'vue'
-
-const props = defineProps<{
-  open: boolean
-  mode: 'push' | 'drawer'
-  conversations: any[]
-  currentId: string
-}>()
+import { Plus, MoreFilled, Edit, Delete, ChatDotRound } from '@element-plus/icons-vue'
+import { useChatStoreByType } from '../common/use-chat-store'
+import type { ChatType } from '../common/types'
+
+const props = withDefaults(
+  defineProps<{
+    type?: ChatType
+    open: boolean
+    mode: 'push' | 'drawer'
+  }>(),
+  { type: 'CHAT' },
+)
 
 const emit = defineEmits<{
   'update:open': [val: boolean]
   'update:mode': [val: 'push' | 'drawer']
-  switch: [id: string]
-  delete: [id: string]
-  rename: [id: string, name: string]
-  new: []
 }>()
 
+const store = useChatStoreByType(props.type)
+
 const renamingId = ref<string | null>(null)
 const renameValue = ref('')
 
-const handleSwitch = (id: string) => {
-  emit('switch', id)
+const handleSwitch = async (id: string) => {
+  store.currentChatId.value = id
+  await store.loadMessages(id)
   if (props.mode === 'drawer') emit('update:open', false)
 }
 
-const handleDelete = (id: string) => {
-  emit('delete', id)
+const handleDelete = async (id: string) => {
+  await store.deleteChat(id)
+  if (store.currentChatId.value === id) {
+    store.currentChatId.value = store.conversations.value[0]?.id || ''
+    if (store.currentChatId.value) {
+      await store.loadMessages(store.currentChatId.value)
+    }
+  }
 }
 
-const handleNew = () => {
-  emit('new')
+const handleNew = async () => {
+  const id = await store.openChat(store.applicationId.value)
+  store.currentChatId.value = id
+  await store.loadConversations()
+  await store.loadMessages(id)
 }
 
 const toggleMode = () => {
@@ -70,7 +140,7 @@ const toggleMode = () => {
 
 const startRename = (item: any) => {
   renamingId.value = item.id
-  renameValue.value = item.name || ''
+  renameValue.value = item.abstract || ''
   nextTick(() => {
     const input = document.querySelector('.rename-input') as HTMLInputElement
     input?.focus()
@@ -80,7 +150,7 @@ const startRename = (item: any) => {
 
 const confirmRename = () => {
   if (renamingId.value) {
-    emit('rename', renamingId.value, renameValue.value)
+    store.renameChat(renamingId.value, renameValue.value)
   }
   renamingId.value = null
 }
@@ -111,8 +181,9 @@ const confirmRename = () => {
 }
 
 .sidebar.push.open {
-  width: 260px;
-  min-width: 260px;
+  width: auto;
+  min-width: 200px;
+  max-width: 280px;
   border-right-width: 1px;
   pointer-events: auto;
 }
@@ -122,7 +193,7 @@ const confirmRename = () => {
   top: 0;
   left: 0;
   bottom: 0;
-  width: 260px;
+  width: 280px;
   z-index: 40;
   transform: translateX(-100%);
   transition:
@@ -135,28 +206,95 @@ const confirmRename = () => {
   box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
 }
 
+.sidebar-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 16px;
+  overflow: hidden;
+  box-sizing: border-box;
+  max-width: 100%;
+}
+
 .sidebar-header {
+  margin-bottom: 16px;
+}
+
+.app-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.app-icon-placeholder {
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  background: var(--el-color-primary-light-9);
   display: flex;
   align-items: center;
-  padding: 12px;
-  border-bottom: 1px solid var(--bd, #dcdfe6);
+  justify-content: center;
+  color: var(--el-color-primary);
+}
+
+.app-name {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--el-text-color-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 185px;
+}
+
+.sidebar-action {
+  margin-bottom: 16px;
+}
+
+.add-button {
+  width: 100%;
+  border: 1px solid var(--el-color-primary-light-5);
+  background-color: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+}
+
+.add-button:hover {
+  background-color: var(--el-color-primary-light-8);
+  border-color: var(--el-color-primary-light-4);
+  color: var(--el-color-primary);
+}
+
+:deep(.el-button--primary.is-plain) {
+  border-color: var(--el-color-primary-light-5);
+  background-color: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+}
+
+:deep(.el-button--primary.is-plain:hover) {
+  background-color: var(--el-color-primary-light-8);
+  border-color: var(--el-color-primary-light-4);
+  color: var(--el-color-primary);
 }
 
 .sidebar-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 0;
+  margin-bottom: 8px;
   font-size: 14px;
-  font-weight: 600;
-  color: var(--t1, #303133);
+  font-weight: 500;
+  color: var(--el-text-color-secondary);
 }
 
 .sidebar-nav {
   flex: 1;
   overflow-y: auto;
-  padding: 8px;
+  overflow-x: hidden;
 }
 
 .nav-empty {
-  font-size: 12px;
-  color: var(--t3, #909399);
   text-align: center;
   padding: 20px;
 }
@@ -169,6 +307,10 @@ const confirmRename = () => {
   border-radius: 6px;
   cursor: pointer;
   transition: background 0.15s;
+  margin-bottom: 2px;
+  overflow: hidden;
+  box-sizing: border-box;
+  max-width: 100%;
 }
 
 .nav-item:hover {
@@ -177,86 +319,56 @@ const confirmRename = () => {
 
 .nav-item.active {
   background: rgba(0, 0, 0, 0.06);
+  font-weight: 500;
+  color: var(--el-text-color-primary);
+}
+
+.nav-item.active:hover {
+  background: rgba(0, 0, 0, 0.06);
 }
 
 .nav-item-text {
   flex: 1;
   min-width: 0;
-  font-size: 13px;
-  color: var(--t2, #606266);
+  font-size: 14px;
+  color: var(--el-text-color-regular);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .nav-item.active .nav-item-text {
-  color: var(--t1, #303133);
+  color: var(--el-text-color-primary);
   font-weight: 500;
 }
 
 .nav-item-actions {
-  display: none;
-  gap: 2px;
   flex-shrink: 0;
+  visibility: hidden;
 }
 
 .nav-item:hover .nav-item-actions,
-.nav-item.active .nav-item-actions {
-  display: flex;
+.nav-item:focus-within .nav-item-actions {
+  visibility: visible;
 }
 
-.nav-item-actions button {
-  width: 24px;
+.action-btn {
+  padding: 1px !important;
   height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--t3, #909399);
-  cursor: pointer;
-  font-size: 11px;
-  transition: background 0.12s, color 0.12s;
+  width: 24px;
 }
 
-.nav-item-actions button:hover {
-  background: rgba(0, 0, 0, 0.06);
-  color: var(--t2, #606266);
+.action-btn .el-icon {
+  font-size: 16px;
+  color: var(--el-text-color-secondary);
 }
 
-.nav-item-actions button.delete:hover {
-  background: rgba(239, 68, 68, 0.1);
-  color: #ef4444;
+.action-btn:hover .el-icon {
+  color: var(--el-text-color-primary);
 }
 
 .sidebar-footer {
-  padding: 8px;
-  border-top: 1px solid var(--bd, #dcdfe6);
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.sidebar-footer button {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 8px 12px;
-  border-radius: 6px;
-  border: none;
-  background: transparent;
-  color: var(--t3, #909399);
-  font-size: 13px;
-  font-family: inherit;
-  cursor: pointer;
-  text-align: left;
-  transition: background 0.12s, color 0.12s;
-}
-
-.sidebar-footer button:hover {
-  background: rgba(0, 0, 0, 0.04);
-  color: var(--t2, #606266);
+  padding-top: 8px;
+  border-top: 1px solid var(--el-border-color-lighter);
 }
 </style>
diff --git a/ui/src/components/dynamics-form/FormItem.vue b/ui/src/components/dynamics-form/FormItem.vue
index 39fc98de831..120762480c6 100644
--- a/ui/src/components/dynamics-form/FormItem.vue
+++ b/ui/src/components/dynamics-form/FormItem.vue
@@ -133,7 +133,7 @@ const errMsg = computed(() => {
  */
 const to_rule = (rule: any) => {
   if (rule.validator) {
-    // eslint-disable-next-line prefer-const, @typescript-eslint/no-unused-vars
+    // eslint-disable-next-line prefer-const
     let validator = (rule: any, value: string, callback: any) => {}
     eval(rule.validator)
     return { ...rule, validator }
diff --git a/ui/src/components/markdown/EchartsRander.vue b/ui/src/components/markdown/EchartsRander.vue
index c98a3832759..c65cc8d6c0a 100644
--- a/ui/src/components/markdown/EchartsRander.vue
+++ b/ui/src/components/markdown/EchartsRander.vue
@@ -54,7 +54,7 @@ const onIframeLoad = () => {
   }
 }
 
-let evalSeq = 0
+const evalSeq = 0
 const EVAL_TIMEOUT_MS = 5000
 
 const evalInSandbox = (option_json: any): Promise<{ option: any; style: any }> => {
diff --git a/ui/src/workflow/nodes/knowledge-write-node/index.vue b/ui/src/workflow/nodes/knowledge-write-node/index.vue
index 3e2a749c6f4..0573564c9df 100644
--- a/ui/src/workflow/nodes/knowledge-write-node/index.vue
+++ b/ui/src/workflow/nodes/knowledge-write-node/index.vue
@@ -55,7 +55,7 @@ const form = {
 }
 
 const validate = async () => {
-  let ps = [
+  const ps = [
     KnowledgeWriteRef.value?.validate(),
     nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
   ]