From 3c2cbf58a76da053ace37ab07198e8a7db9e7d3d Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sun, 24 May 2026 21:00:36 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84ai=20chat=E8=81=8A=E5=A4=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/core/pagetype/default.vue        |  38 ++-
 .../src/core/pagetype/default_toolbar.vue     |  17 +
 frontend/src/shared/composables/useChat.ts    |  99 ++++++
 .../src/views/pagetype/ai_chat/ChatPanel.vue  | 273 ++++++++++++++++
 .../src/views/pagetype/ai_chat/ai_chat.vue    | 308 +++++-------------
 .../views/pagetype/ai_chat/ai_chat_list.vue   | 266 +++------------
 6 files changed, 556 insertions(+), 445 deletions(-)
 create mode 100644 frontend/src/shared/composables/useChat.ts
 create mode 100644 frontend/src/views/pagetype/ai_chat/ChatPanel.vue

diff --git a/frontend/src/core/pagetype/default.vue b/frontend/src/core/pagetype/default.vue
index bcdafafa4..9a9094bcf 100644
--- a/frontend/src/core/pagetype/default.vue
+++ b/frontend/src/core/pagetype/default.vue
@@ -74,6 +74,7 @@
           @cancel-pg="handleCancelPg"
           @rename="handleRename"
           @duplicate="handleDuplicate"
+          @toggle-chat="handleToggleChat"
         />
       </n-space>
     </div>
@@ -335,13 +336,20 @@
         </FormPanel>
       </n-layout-sider>
     </n-layout>
+
+    <!-- AI Chat Drawer -->
+    <n-drawer v-model:show="showChatDrawer" :width="420" placement="right">
+      <n-drawer-content :title="t('AI Chat')" closable>
+        <ChatPanel v-if="chatDrawerName" :chat-name="chatDrawerName" entity="File" />
+      </n-drawer-content>
+    </n-drawer>
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, shallowRef, markRaw, computed, watch, reactive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { NButton, NSpace, NIcon, NAlert, useMessage, useDialog, NLayout, NLayoutSider, NLayoutContent, NCollapse, NCollapseItem } from 'naive-ui'
+import { NButton, NSpace, NIcon, NAlert, useMessage, useDialog, NLayout, NLayoutSider, NLayoutContent, NCollapse, NCollapseItem, NDrawer, NDrawerContent } from 'naive-ui'
 import FieldRenderer from '@/core/pagetype/form/FieldRenderer.vue'
 import ActivitySection from '@/core/pagetype/form/panel/ActivitySection.vue'
 import { Icon } from '@iconify/vue'
@@ -375,6 +383,8 @@ import { useAuthStore } from '@/shared/stores/auth'
 import { createFieldChangeTrigger, triggerRecordInit } from '@/core/plugins/fieldPlugin'
 import { loadAllPlugins } from '@/core/plugins/pluginLoader'
 import { useRealtime, type PgUpdateData } from '@/shared/composables/useRealtime'
+import ChatPanel from '@/views/pagetype/ai_chat/ChatPanel.vue'
+import { createChat } from '@/shared/api/chat'
 
 const route = useRoute()
 const router = useRouter()
@@ -385,6 +395,10 @@ const authStore = useAuthStore()
 const attachmentSectionRef = ref()
 const activitySectionRef = ref()
 
+// AI Chat Drawer
+const showChatDrawer = ref(false)
+const chatDrawerName = ref('')
+
 // 使用组合式函数处理URL slug
 const { pagetypeSlug, entity } = usePageTypeSlug(route)
 
@@ -1431,6 +1445,22 @@ function handleDuplicate(_newName: string) {
   })
 }
 
+// AI Chat Drawer
+async function handleToggleChat() {
+  if (showChatDrawer.value) {
+    showChatDrawer.value = false
+    return
+  }
+  if (isNew.value) return
+  if (!chatDrawerName.value && id.value) {
+    const result = await createChat(`${entity.value}: ${id.value}`)
+    if (result.success && result.name) {
+      chatDrawerName.value = result.name
+    }
+  }
+  showChatDrawer.value = true
+}
+
 const isSaving = ref(false) // 标记当前用户是否正在保存，防止自触发的 pg_update 导致重复刷新
 
 // Realtime: 监听文档更新事件
@@ -1520,6 +1550,12 @@ watch(
     }
   }
 )
+
+// 切换记录时关闭 AI Chat Drawer
+watch(() => id.value, () => {
+  showChatDrawer.value = false
+  chatDrawerName.value = ''
+})
 </script>
 
 <style scoped>
diff --git a/frontend/src/core/pagetype/default_toolbar.vue b/frontend/src/core/pagetype/default_toolbar.vue
index c2fe75584..1e3cbbd82 100644
--- a/frontend/src/core/pagetype/default_toolbar.vue
+++ b/frontend/src/core/pagetype/default_toolbar.vue
@@ -97,6 +97,22 @@
       </template>
     </n-button>
     
+    <!-- AI Chat 按钮 -->
+    <n-button 
+      type="default" 
+      size="medium" 
+      @click="$emit('toggle-chat')"
+      :disabled="loading || isNew"
+      :title="t('AI Chat')"
+      class="header-action-btn"
+    >
+      <template #icon>
+        <n-icon>
+          <Icon icon="tabler:messages" />
+        </n-icon>
+      </template>
+    </n-button>
+    
     <!-- 返回按钮 -->
     <n-button type="default" size="medium" @click="$emit('go-back')" :disabled="loading">
       <template #icon>
@@ -242,6 +258,7 @@ interface Emits {
   (e: 'cancel-pg'): void
   (e: 'rename', newName: string): void
   (e: 'duplicate', newName: string): void
+  (e: 'toggle-chat'): void
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/frontend/src/shared/composables/useChat.ts b/frontend/src/shared/composables/useChat.ts
new file mode 100644
index 000000000..e114d9eac
--- /dev/null
+++ b/frontend/src/shared/composables/useChat.ts
@@ -0,0 +1,99 @@
+import { ref, nextTick } from 'vue'
+import { getChatMessages, sendMessage, type AiChatMessage, type ChatResponse } from '@/shared/api/chat'
+
+export function useChat() {
+  const messages = ref<AiChatMessage[]>([])
+  const loading = ref(false)
+  const sending = ref(false)
+  const chatTitle = ref('')
+  const chatModel = ref('Jingrow')
+  const messagesContainer = ref<HTMLElement>()
+
+  function scrollToBottom() {
+    nextTick(() => {
+      if (messagesContainer.value) {
+        messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
+      }
+    })
+  }
+
+  async function loadMessages(chatName: string, limit = 100) {
+    loading.value = true
+    try {
+      messages.value = await getChatMessages(chatName, limit)
+      scrollToBottom()
+    } catch (e) {
+      console.error('Failed to load messages:', e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function addLocalMessage(chatName: string, content: string): AiChatMessage {
+    const msg: AiChatMessage = {
+      name: 'temp-' + Date.now(),
+      chat: chatName,
+      role: 'user',
+      content,
+      sort_order: (messages.value.length + 1) * 10,
+      token_count: 0,
+      creation: new Date().toISOString(),
+    }
+    messages.value.push(msg)
+    scrollToBottom()
+    return msg
+  }
+
+  function addAssistantMessage(chatName: string, chatResponse: ChatResponse): AiChatMessage | null {
+    if (!chatResponse.assistant_content) return null
+    const msg: AiChatMessage = {
+      name: chatResponse.assistant_message || 'ai-' + Date.now(),
+      chat: chatName,
+      role: 'assistant',
+      content: chatResponse.assistant_content,
+      model: chatModel.value,
+      sort_order: (chatResponse.sort_order || messages.value.length) * 10,
+      token_count: 0,
+      creation: new Date().toISOString(),
+    }
+    messages.value.push(msg)
+    scrollToBottom()
+    return msg
+  }
+
+  async function send(chatName: string, content: string): Promise<ChatResponse> {
+    sending.value = true
+    try {
+      addLocalMessage(chatName, content)
+      const result = await sendMessage(chatName, content)
+      if (result.success) {
+        if (result.title) chatTitle.value = result.title
+        addAssistantMessage(chatName, result)
+      }
+      return result
+    } finally {
+      sending.value = false
+      scrollToBottom()
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent, callback: () => void) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      callback()
+    }
+  }
+
+  return {
+    messages,
+    loading,
+    sending,
+    chatTitle,
+    chatModel,
+    messagesContainer,
+    loadMessages,
+    send,
+    scrollToBottom,
+    handleKeydown,
+  }
+}
diff --git a/frontend/src/views/pagetype/ai_chat/ChatPanel.vue b/frontend/src/views/pagetype/ai_chat/ChatPanel.vue
new file mode 100644
index 000000000..904a095f0
--- /dev/null
+++ b/frontend/src/views/pagetype/ai_chat/ChatPanel.vue
@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import { watch, ref } from 'vue'
+import { NSpin } from 'naive-ui'
+import { t } from '@/shared/i18n'
+import { useChat } from '@/shared/composables/useChat'
+import ChatMessageBubble from './ChatMessageBubble.vue'
+import FileUploadDialog from '@/views/pagetype/file/FileUploadDialog.vue'
+
+const props = defineProps<{
+  chatName: string
+  entity?: string
+}>()
+
+const emit = defineEmits<{
+  'title-changed': [title: string]
+  'send': [chatName: string, content: string]
+}>()
+
+const {
+  messages, loading, sending, messagesContainer,
+  loadMessages, send, scrollToBottom, handleKeydown,
+} = useChat()
+
+const inputText = ref('')
+
+// 监听 chatName 变化加载消息
+watch(() => props.chatName, (name) => {
+  if (name) {
+    inputText.value = ''
+    loadMessages(name)
+  }
+}, { immediate: true })
+
+// 上传对话框
+const showUploadDialog = ref(false)
+
+function handleUpload() {
+  showUploadDialog.value = true
+}
+
+function onUploaded() {
+  showUploadDialog.value = false
+}
+
+async function handleSend() {
+  const content = inputText.value.trim()
+  if (!content || sending.value || !props.chatName) return
+  inputText.value = ''
+  emit('send', props.chatName, content)
+  const result = await send(props.chatName, content)
+  if (result.success && result.title) {
+    emit('title-changed', result.title)
+  }
+}
+
+function onKeydown(e: KeyboardEvent) {
+  handleKeydown(e, handleSend)
+}
+</script>
+
+<template>
+  <div class="chat-panel">
+    <!-- 消息列表 -->
+    <div class="chat-messages" ref="messagesContainer">
+      <div v-if="loading" class="messages-loading">
+        <NSpin size="small" />
+      </div>
+      <div v-else-if="messages.length === 0" class="messages-empty">
+        {{ t('Start a conversation') }}
+      </div>
+      <div v-else class="messages-list">
+        <ChatMessageBubble
+          v-for="msg in messages"
+          :key="msg.name"
+          :message="msg"
+        />
+        <div v-if="sending" class="message-bubble assistant typing">
+          <div class="typing-dots">
+            <span></span><span></span><span></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 药丸输入框 -->
+    <div class="chat-input-area">
+      <div class="pill-input">
+        <button class="pill-upload" :title="t('Upload file')" @click="handleUpload">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
+          </svg>
+        </button>
+        <textarea
+          v-model="inputText"
+          :placeholder="t('Type a message...')"
+          class="pill-textarea"
+          rows="1"
+          @keydown="onKeydown"
+          :disabled="sending"
+        ></textarea>
+        <button
+          class="pill-send"
+          :disabled="!inputText.trim() || sending || !chatName"
+          @click="handleSend"
+        >
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 19V5M5 12l7-7 7 7"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- 上传对话框 -->
+    <FileUploadDialog
+      v-model:show="showUploadDialog"
+      :pagetype="entity || 'File'"
+      folder="Home"
+      @uploaded="onUploaded"
+    />
+  </div>
+</template>
+
+<style scoped>
+.chat-panel {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--n-color, #fff);
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 0;
+}
+
+.messages-loading,
+.messages-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--n-text-color-3, #999);
+  font-size: 14px;
+}
+
+.messages-list {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.message-bubble.typing {
+  display: inline-block;
+  padding: 12px 18px;
+  margin: 8px 0 8px 44px;
+  background: var(--n-color-embedded, #f5f5f5);
+  border-radius: 12px;
+}
+
+.typing-dots {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.typing-dots span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--n-text-color-3, #999);
+  animation: typing-bounce 1.2s infinite;
+}
+
+.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
+.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes typing-bounce {
+  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+  30% { transform: translateY(-4px); opacity: 1; }
+}
+
+/* 输入区域 */
+.chat-input-area {
+  border-top: 1px solid var(--n-border-color, rgba(0,0,0,0.06));
+  padding: 16px 24px;
+  flex-shrink: 0;
+}
+
+.chat-input-area .pill-input {
+  max-width: 720px;
+  margin: 0 auto;
+}
+
+.pill-input {
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
+  width: 100%;
+  background: var(--n-color-embedded, #f5f5f5);
+  border: 1px solid var(--n-border-color, rgba(0,0,0,0.08));
+  border-radius: 24px;
+  padding: 8px 12px 8px 8px;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.pill-input:focus-within {
+  border-color: var(--n-primary-color, #6366f1);
+  box-shadow: 0 0 0 2px rgba(99,102,241,0.12);
+}
+
+.pill-upload {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  color: var(--n-text-color-2, #666);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.15s;
+}
+
+.pill-upload:hover {
+  background: rgba(0,0,0,0.06);
+}
+
+.pill-textarea {
+  flex: 1;
+  border: none;
+  outline: none;
+  resize: none;
+  font-size: 15px;
+  line-height: 1.5;
+  background: transparent;
+  color: var(--n-text-color, #333);
+  max-height: 120px;
+  min-height: 24px;
+  font-family: inherit;
+}
+
+.pill-textarea::placeholder {
+  color: var(--n-text-color-3, #999);
+}
+
+.pill-send {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  border: none;
+  background: var(--n-text-color, #1a1a1a);
+  color: #fff;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: opacity 0.15s;
+}
+
+.pill-send:disabled {
+  opacity: 0.25;
+  cursor: not-allowed;
+}
+
+.pill-send:not(:disabled):hover {
+  opacity: 0.85;
+}
+</style>
diff --git a/frontend/src/views/pagetype/ai_chat/ai_chat.vue b/frontend/src/views/pagetype/ai_chat/ai_chat.vue
index b108a841e..79217cd19 100644
--- a/frontend/src/views/pagetype/ai_chat/ai_chat.vue
+++ b/frontend/src/views/pagetype/ai_chat/ai_chat.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import { ref, onMounted, nextTick, watch, computed } from 'vue'
+import { ref, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { NLayout, NLayoutContent, NButton, NIcon, NSpin, NEmpty, NInput, NSpace, NTooltip } from 'naive-ui'
-import { api } from '@/shared/api/common'
-import { createChat, getChatMessages, sendMessage, type AiChatMessage } from '@/shared/api/chat'
-import { getRecord } from '@/shared/api/common'
+import { createChat, sendMessage } from '@/shared/api/chat'
 import { pageTypeToSlug } from '@/shared/utils/slug'
 import { t } from '@/shared/i18n'
-import ChatMessageBubble from './ChatMessageBubble.vue'
+import ChatPanel from './ChatPanel.vue'
 
 const PAGE_TYPE = 'Ai Chat'
 const slug = pageTypeToSlug(PAGE_TYPE)
@@ -18,193 +15,78 @@ const router = useRouter()
 const chatName = computed(() => route.params.id as string)
 const isNew = computed(() => !chatName.value || chatName.value === 'new')
 
-const messages = ref<AiChatMessage[]>([])
+// ===== 欢迎页输入（新对话）=====
 const inputText = ref('')
-const loading = ref(false)
 const sending = ref(false)
-const chatTitle = ref('')
-const chatModel = ref('Jingrow')
-const messagesContainer = ref<HTMLElement>()
 
-// 加载消息
-async function loadMessages() {
-  if (isNew.value) return
-  loading.value = true
-  try {
-    messages.value = await getChatMessages(chatName.value, 100)
-    scrollToBottom()
-  } catch (e) {
-    console.error('Failed to load messages:', e)
-  } finally {
-    loading.value = false
-  }
-}
-
-// 加载对话信息
-async function loadChatInfo() {
-  if (isNew.value) return
-  try {
-    const result = await getRecord('Ai Chat', chatName.value)
-    if (result.success && result.data) {
-      chatTitle.value = result.data.title || ''
-      chatModel.value = result.data.model || 'Jingrow'
-    }
-  } catch (e) {
-    console.error('Failed to load chat info:', e)
-  }
-}
-
-// 发送消息
 async function handleSend() {
   const content = inputText.value.trim()
-  if (!content || sending.value) return
-
-  if (isNew.value) {
-    // 新对话：先创建对话再发送
-    try {
-      sending.value = true
-      const createResult = await createChat(content.slice(0, 50), chatModel.value)
-      if (createResult.success && createResult.name) {
-        router.replace({ name: 'PageTypeDetail', params: { entity: slug, id: createResult.name } })
-        await nextTick()
-        // 发送第一条消息
-        const result = await sendMessage(createResult.name, content)
-        if (result.success) {
-          inputText.value = ''
-          await loadMessages()
-        }
-      }
-    } catch (e) {
-      console.error('Failed to create chat:', e)
-    } finally {
-      sending.value = false
-    }
-    return
-  }
-
-  // 现有对话：先在本地显示用户消息
-  const tempUserMsg: AiChatMessage = {
-    name: 'temp-' + Date.now(),
-    chat: chatName.value,
-    role: 'user',
-    content,
-    sort_order: (messages.value.length + 1) * 10,
-    token_count: 0,
-    creation: new Date().toISOString(),
-  }
-  messages.value.push(tempUserMsg)
-  inputText.value = ''
-  scrollToBottom()
-
+  if (!content || sending.value || !isNew.value) return
   try {
     sending.value = true
-    const result = await sendMessage(chatName.value, content)
-    if (result.success) {
-      // autotitle: 后端可能已更新对话标题
-      if (result.title) {
-        chatTitle.value = result.title
-      }
-      if (result.assistant_content) {
-        const aiMsg: AiChatMessage = {
-          name: result.assistant_message || 'ai-' + Date.now(),
-          chat: chatName.value,
-          role: 'assistant',
-          content: result.assistant_content,
-          model: chatModel.value,
-          sort_order: (result.sort_order || messages.value.length) * 10,
-          token_count: 0,
-          creation: new Date().toISOString(),
-        }
-        messages.value.push(aiMsg)
-      }
+    const createResult = await createChat(content.slice(0, 50))
+    if (createResult.success && createResult.name) {
+      inputText.value = ''
+      // 先发送第一条消息，再跳转
+      await sendMessage(createResult.name, content)
+      router.replace({ name: 'PageTypeDetail', params: { entity: slug, id: createResult.name } })
     }
   } catch (e) {
-    console.error('Failed to send message:', e)
+    console.error('Failed to create chat:', e)
   } finally {
     sending.value = false
-    scrollToBottom()
   }
 }
 
-function scrollToBottom() {
-  nextTick(() => {
-    if (messagesContainer.value) {
-      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
-    }
-  })
-}
-
 function handleKeydown(e: KeyboardEvent) {
   if (e.key === 'Enter' && !e.shiftKey) {
     e.preventDefault()
     handleSend()
   }
 }
-
-watch(() => route.params.id, () => {
-  if (!isNew.value) {
-    loadChatInfo()
-    loadMessages()
-  }
-}, { immediate: true })
 </script>
 
 <template>
   <div class="ai-chat-container">
-    <!-- 消息区域 -->
-    <div class="chat-messages" ref="messagesContainer">
-      <div v-if="loading" class="chat-loading">
-        <NSpin size="medium" />
-      </div>
-      <div v-else-if="messages.length === 0" class="chat-empty">
-        <div class="empty-icon">
+    <!-- 新对话：欢迎页 -->
+    <template v-if="isNew">
+      <div class="welcome-page">
+        <div class="welcome-icon">
           <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
             <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
           </svg>
         </div>
-        <p class="empty-text">{{ t('Start a conversation') }}</p>
+        <p class="welcome-text">{{ t('Start a conversation') }}</p>
       </div>
-      <div v-else class="messages-list">
-        <ChatMessageBubble
-          v-for="msg in messages"
-          :key="msg.name"
-          :message="msg"
-        />
-        <div v-if="sending" class="message-bubble assistant typing">
-          <div class="typing-dots">
-            <span></span><span></span><span></span>
-          </div>
+      <div class="welcome-input-area">
+        <div class="pill-input">
+          <textarea
+            v-model="inputText"
+            :placeholder="t('Ask anything')"
+            class="pill-textarea"
+            rows="1"
+            @keydown="handleKeydown"
+            :disabled="sending"
+          ></textarea>
+          <button
+            class="pill-send"
+            :disabled="!inputText.trim() || sending"
+            @click="handleSend"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12 19V5M5 12l7-7 7 7"/>
+            </svg>
+          </button>
         </div>
       </div>
-    </div>
+    </template>
 
-    <!-- 输入区域 -->
-    <div class="chat-input-area">
-      <div class="input-wrapper">
-        <textarea
-          v-model="inputText"
-          :placeholder="t('Type a message...')"
-          class="chat-input"
-          rows="1"
-          @keydown="handleKeydown"
-          :disabled="sending"
-        ></textarea>
-        <NButton
-          quaternary
-          circle
-          :disabled="!inputText.trim() || sending"
-          @click="handleSend"
-          class="send-btn"
-        >
-          <template #icon>
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <line x1="22" y1="2" x2="11" y2="13"/>
-              <polygon points="22 2 15 22 11 13 2 9 22 2"/>
-            </svg>
-          </template>
-        </NButton>
-      </div>
-    </div>
+    <!-- 现有对话：ChatPanel -->
+    <ChatPanel
+      v-else
+      :chat-name="chatName"
+      entity="File"
+    />
   </div>
 </template>
 
@@ -216,97 +98,57 @@ watch(() => route.params.id, () => {
   background: var(--n-color, #fff);
 }
 
-.chat-messages {
+.welcome-page {
   flex: 1;
-  overflow-y: auto;
-  padding: 24px 0;
-}
-
-.chat-loading,
-.chat-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100%;
   color: var(--n-text-color-3, #999);
 }
 
-.empty-icon {
+.welcome-icon {
   margin-bottom: 12px;
   opacity: 0.4;
 }
 
-.empty-text {
+.welcome-text {
   font-size: 14px;
+  margin: 0;
 }
 
-.messages-list {
-  max-width: 780px;
+.welcome-input-area {
+  flex-shrink: 0;
+  padding: 0 24px 24px;
+  max-width: 680px;
   margin: 0 auto;
-  padding: 0 24px;
+  width: 100%;
 }
 
-.message-bubble.typing {
-  display: inline-block;
-  padding: 12px 18px;
-  margin: 8px 0 8px 44px;
-  background: var(--n-color-embedded, #f5f5f5);
-  border-radius: 12px;
-}
-
-.typing-dots {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-}
-
-.typing-dots span {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--n-text-color-3, #999);
-  animation: typing-bounce 1.2s infinite;
-}
-
-.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
-.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
-
-@keyframes typing-bounce {
-  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
-  30% { transform: translateY(-4px); opacity: 1; }
-}
-
-.chat-input-area {
-  border-top: 1px solid var(--n-border-color, #e0e0e0);
-  padding: 16px 24px;
-  background: var(--n-color, #fff);
-}
-
-.input-wrapper {
+.pill-input {
   display: flex;
   align-items: flex-end;
-  gap: 8px;
-  max-width: 780px;
-  margin: 0 auto;
+  gap: 6px;
+  width: 100%;
   background: var(--n-color-embedded, #f5f5f5);
-  border-radius: 12px;
+  border: 1px solid var(--n-border-color, rgba(0,0,0,0.08));
+  border-radius: 24px;
   padding: 8px 12px;
-  border: 1px solid var(--n-border-color, #e0e0e0);
-  transition: border-color 0.2s;
+  transition: border-color 0.2s, box-shadow 0.2s;
 }
 
-.input-wrapper:focus-within {
+.pill-input:focus-within {
   border-color: var(--n-primary-color, #6366f1);
+  box-shadow: 0 0 0 2px rgba(99,102,241,0.12);
 }
 
-.chat-input {
+.pill-textarea {
   flex: 1;
   border: none;
   outline: none;
   resize: none;
-  font-size: 14px;
-  line-height: 1.6;
+  font-size: 15px;
+  line-height: 1.5;
   background: transparent;
   color: var(--n-text-color, #333);
   max-height: 120px;
@@ -314,11 +156,31 @@ watch(() => route.params.id, () => {
   font-family: inherit;
 }
 
-.chat-input::placeholder {
+.pill-textarea::placeholder {
   color: var(--n-text-color-3, #999);
 }
 
-.send-btn {
+.pill-send {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  border: none;
+  background: var(--n-text-color, #1a1a1a);
+  color: #fff;
+  cursor: pointer;
   flex-shrink: 0;
+  transition: opacity 0.15s;
+}
+
+.pill-send:disabled {
+  opacity: 0.25;
+  cursor: not-allowed;
+}
+
+.pill-send:not(:disabled):hover {
+  opacity: 0.85;
 }
 </style>
diff --git a/frontend/src/views/pagetype/ai_chat/ai_chat_list.vue b/frontend/src/views/pagetype/ai_chat/ai_chat_list.vue
index 80c70e8fe..3625e3a8b 100644
--- a/frontend/src/views/pagetype/ai_chat/ai_chat_list.vue
+++ b/frontend/src/views/pagetype/ai_chat/ai_chat_list.vue
@@ -1,21 +1,28 @@
 <script setup lang="ts">
-import { ref, onMounted, nextTick, watch, computed } from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
 import { NButton, NSpin } from 'naive-ui'
-import { getChatList, createChat, getChatMessages, sendMessage, type AiChat, type AiChatMessage } from '@/shared/api/chat'
+import { getChatList, createChat, type AiChat } from '@/shared/api/chat'
 import { deleteRecord } from '@/shared/api/common'
 import { useAuthStore } from '@/shared/stores/auth'
 import { t } from '@/shared/i18n'
-import ChatMessageBubble from './ChatMessageBubble.vue'
+import ChatPanel from './ChatPanel.vue'
+import FileUploadDialog from '@/views/pagetype/file/FileUploadDialog.vue'
+
+const props = defineProps<{
+  context?: {
+    route: any
+    pagetypeSlug: string
+    entity: string
+  }
+}>()
 
 const chats = ref<AiChat[]>([])
 const loading = ref(false)
 const activeChatName = ref('')
 const activeChatTitle = ref('')
-const activeChatModel = ref('Jingrow')
-const messages = ref<AiChatMessage[]>([])
-const sending = ref(false)
-const inputText = ref('')
-const messagesContainer = ref<HTMLElement>()
+
+// ===== 上传文件 =====
+const showUploadDialog = ref(false)
 
 // ===== 用户问候 =====
 const authStore = useAuthStore()
@@ -62,7 +69,6 @@ async function deleteChat(name: string) {
   if (result.success) {
     if (activeChatName.value === name) {
       activeChatName.value = ''
-      messages.value = []
     }
     await loadChats()
   }
@@ -71,7 +77,6 @@ async function deleteChat(name: string) {
 function selectChat(name: string, title?: string) {
   activeChatName.value = name
   activeChatTitle.value = title || ''
-  loadMessages(name)
 }
 
 function formatTime(dateStr: string | null) {
@@ -91,14 +96,9 @@ function formatTime(dateStr: string | null) {
 
 // ===== 右侧：聊天面板 =====
 
-async function loadMessages(chatName: string) {
-  try {
-    messages.value = await getChatMessages(chatName, 100)
-    scrollToBottom()
-  } catch (e) {
-    console.error('Failed to load messages:', e)
-  }
-}
+// ===== 欢迎页输入 =====
+const inputText = ref('')
+const sending = ref(false)
 
 async function handleSend() {
   const content = inputText.value.trim()
@@ -112,121 +112,41 @@ async function handleSend() {
       if (createResult.success && createResult.name) {
         activeChatName.value = createResult.name
         activeChatTitle.value = createResult.title || ''
-        activeChatModel.value = 'Jingrow'
-        // 本地显示用户消息
-        const tempUserMsg: AiChatMessage = {
-          name: 'temp-' + Date.now(),
-          chat: createResult.name,
-          role: 'user',
-          content,
-          sort_order: 10,
-          token_count: 0,
-          creation: new Date().toISOString(),
-        }
-        messages.value = [tempUserMsg]
         inputText.value = ''
-        scrollToBottom()
-        // 发送消息
-        const result = await sendMessage(createResult.name, content)
-        if (result.success) {
-          if (result.title) activeChatTitle.value = result.title
-          if (result.assistant_content) {
-            messages.value.push({
-              name: result.assistant_message || 'ai-' + Date.now(),
-              chat: createResult.name,
-              role: 'assistant',
-              content: result.assistant_content,
-              model: activeChatModel.value,
-              sort_order: (result.sort_order || 2) * 10,
-              token_count: 0,
-              creation: new Date().toISOString(),
-            })
-          }
-        }
         await loadChats()
       }
     } catch (e) {
-      console.error('Failed to create chat and send:', e)
+      console.error('Failed to create chat:', e)
     } finally {
       sending.value = false
-      scrollToBottom()
     }
     return
   }
-
-  // 现有对话：本地先显示用户消息
-  const tempUserMsg: AiChatMessage = {
-    name: 'temp-' + Date.now(),
-    chat: activeChatName.value,
-    role: 'user',
-    content,
-    sort_order: (messages.value.length + 1) * 10,
-    token_count: 0,
-    creation: new Date().toISOString(),
-  }
-  messages.value.push(tempUserMsg)
-  inputText.value = ''
-  scrollToBottom()
-
-  try {
-    sending.value = true
-    const result = await sendMessage(activeChatName.value, content)
-    if (result.success) {
-      // autotitle
-      if (result.title) {
-        activeChatTitle.value = result.title
-        // 同步更新左侧列表
-        const chat = chats.value.find(c => c.name === activeChatName.value)
-        if (chat) chat.title = result.title
-      }
-      if (result.assistant_content) {
-        const aiMsg: AiChatMessage = {
-          name: result.assistant_message || 'ai-' + Date.now(),
-          chat: activeChatName.value,
-          role: 'assistant',
-          content: result.assistant_content,
-          model: activeChatModel.value,
-          sort_order: (result.sort_order || messages.value.length) * 10,
-          token_count: 0,
-          creation: new Date().toISOString(),
-        }
-        messages.value.push(aiMsg)
-      }
-    }
-  } catch (e) {
-    console.error('Failed to send message:', e)
-  } finally {
-    sending.value = false
-    scrollToBottom()
-  }
 }
 
-function scrollToBottom() {
-  nextTick(() => {
-    if (messagesContainer.value) {
-      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
-    }
-  })
-}
-
-function handleKeydown(e: KeyboardEvent) {
+function handleWelcomeKeydown(e: KeyboardEvent) {
   if (e.key === 'Enter' && !e.shiftKey) {
     e.preventDefault()
     handleSend()
   }
 }
 
-// 监听对话切换，更新标题
 watch(() => activeChatName.value, (name) => {
   if (name) {
     const chat = chats.value.find(c => c.name === name)
     if (chat) {
       activeChatTitle.value = chat.title || ''
-      activeChatModel.value = chat.model || 'Jingrow'
     }
   }
 })
 
+function onChatTitleChanged(title: string) {
+  activeChatTitle.value = title
+  // 同步更新左侧列表标题
+  const chat = chats.value.find(c => c.name === activeChatName.value)
+  if (chat) chat.title = title
+}
+
 onMounted(() => {
   loadChats()
   initGreeting()
@@ -294,7 +214,7 @@ onMounted(() => {
         <div class="welcome-input-area">
           <!-- 药丸输入框 -->
           <div class="pill-input">
-            <button class="pill-upload" :title="t('Upload file')">
+            <button class="pill-upload" :title="t('Upload file')" @click="showUploadDialog = true">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
               </svg>
@@ -304,7 +224,7 @@ onMounted(() => {
               :placeholder="t('Ask anything')"
               class="pill-textarea"
               rows="1"
-              @keydown="handleKeydown"
+              @keydown="handleWelcomeKeydown"
               :disabled="sending"
             ></textarea>
             <button
@@ -318,8 +238,8 @@ onMounted(() => {
             </button>
           </div>
 
-          <!-- 快捷提示药丸 -->
-          <div class="quick-prompts">
+          <!-- 快捷提示药丸（暂未实现） -->
+          <div v-if="false" class="quick-prompts">
             <button
               v-for="(prompt, i) in quickPrompts"
               :key="i"
@@ -339,55 +259,23 @@ onMounted(() => {
           <div class="chat-header-title">{{ activeChatTitle || t('Untitled') }}</div>
         </div>
 
-        <!-- 消息区域 -->
-        <div class="chat-messages" ref="messagesContainer">
-          <div v-if="messages.length === 0" class="messages-empty">
-            <div class="messages-empty-text">{{ t('Start a conversation') }}</div>
-          </div>
-          <div v-else class="messages-list">
-            <ChatMessageBubble
-              v-for="msg in messages"
-              :key="msg.name"
-              :message="msg"
-            />
-            <div v-if="sending" class="message-bubble assistant typing">
-              <div class="typing-dots">
-                <span></span><span></span><span></span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 输入区域（与欢迎页一致） -->
-        <div class="chat-input-area">
-          <div class="pill-input">
-            <button class="pill-upload" :title="t('Upload file')">
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
-              </svg>
-            </button>
-            <textarea
-              v-model="inputText"
-              :placeholder="t('Type a message...')"
-              class="pill-textarea"
-              rows="1"
-              @keydown="handleKeydown"
-              :disabled="sending"
-            ></textarea>
-            <button
-              class="pill-send"
-              :disabled="!inputText.trim() || sending"
-              @click="handleSend"
-            >
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M12 19V5M5 12l7-7 7 7"/>
-              </svg>
-            </button>
-          </div>
-        </div>
+        <!-- ChatPanel 聊天面板 -->
+        <ChatPanel
+          :chat-name="activeChatName"
+          entity="File"
+          @title-changed="onChatTitleChanged"
+        />
       </template>
     </div>
   </div>
+
+  <!-- 上传对话框 -->
+  <FileUploadDialog
+    v-model:show="showUploadDialog"
+    :pagetype="'File'"
+    folder="Home"
+    @uploaded="showUploadDialog = false"
+  />
 </template>
 
 <style scoped>
@@ -684,68 +572,4 @@ onMounted(() => {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-/* 消息区域 */
-.chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px 0;
-}
-
-.messages-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--n-text-color-3, #999);
-  font-size: 14px;
-}
-
-.messages-list {
-  max-width: 720px;
-  margin: 0 auto;
-  padding: 0 24px;
-}
-
-.message-bubble.typing {
-  display: inline-block;
-  padding: 12px 18px;
-  margin: 8px 0 8px 44px;
-  background: var(--n-color-embedded, #f5f5f5);
-  border-radius: 12px;
-}
-
-.typing-dots {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-}
-
-.typing-dots span {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--n-text-color-3, #999);
-  animation: typing-bounce 1.2s infinite;
-}
-
-.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
-.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
-
-@keyframes typing-bounce {
-  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
-  30% { transform: translateY(-4px); opacity: 1; }
-}
-
-/* 输入区域 */
-.chat-input-area {
-  border-top: 1px solid var(--n-border-color, rgba(0,0,0,0.06));
-  padding: 16px 24px;
-  flex-shrink: 0;
-}
-
-.chat-input-area .pill-input {
-  max-width: 720px;
-  margin: 0 auto;
-}
 </style>