feat: message persistence + inline title edit + redesigned input + fix delete

src/pages/TaskAssistant.tsx

@@ -1,15 +1,17 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
-import { Typography, Input, Button, Space, Avatar, Spin, theme, Modal, Tooltip } from 'antd'
+import { Input, Button, Avatar, Spin, theme, Modal, Tooltip, Typography } from 'antd'
 import {
   SendOutlined, RobotOutlined, UserOutlined, PlusOutlined,
   DeleteOutlined, StopOutlined, MessageOutlined,
 } from '@ant-design/icons'
 import { sendMessage } from '@/services/ai-chat'
-import { listConversations, createConversation, deleteConversation } from '@/services/conversation-api'
+import {
+  listConversations, createConversation, deleteConversation,
+  getMessages, updateConversation, type Conversation,
+} from '@/services/conversation-api'
 import Markdown from '@/components/Markdown'
 
 const { Text } = Typography
-const { TextArea } = Input
 
 interface Message {
   id: string
@@ -18,88 +20,93 @@ interface Message {
   timestamp: number
 }
 
-interface Conversation {
-  id: string
-  title: string
-  updatedAt: string
-}
-
 export default function TaskAssistant() {
   const [conversations, setConversations] = useState<Conversation[]>([])
   const [activeId, setActiveId] = useState<string | null>(null)
   const [messages, setMessages] = useState<Message[]>([])
   const [input, setInput] = useState('')
   const [loading, setLoading] = useState(false)
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [editTitle, setEditTitle] = useState('')
   const abortRef = useRef<AbortController | null>(null)
   const messagesEndRef = useRef<HTMLDivElement>(null)
+  const editInputRef = useRef<any>(null)
   const { token } = theme.useToken()
 
   // Load conversations
-  useEffect(() => {
-    listConversations().then(setConversations).catch(() => {})
+  const loadConversations = useCallback(async () => {
+    try { setConversations(await listConversations()) } catch { /* */ }
   }, [])
+  useEffect(() => { loadConversations() }, [loadConversations])
 
   // Scroll to bottom
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
   }, [messages])
 
-  // Switch conversation
-  const switchConversation = useCallback((id: string) => {
-    if (loading) {
-      abortRef.current?.abort()
-      setLoading(false)
-    }
+  // Load messages when switching conversation
+  const switchConversation = useCallback(async (id: string) => {
+    if (loading) { abortRef.current?.abort(); setLoading(false) }
     setActiveId(id)
     setMessages([])
-    setInput('')
+    try {
+      const records = await getMessages(id)
+      setMessages(records.map(m => ({
+        id: m.id, role: m.role, content: m.content,
+        timestamp: new Date(m.createdAt).getTime(),
+      })))
+    } catch { /* */ }
   }, [loading])
 
   // New conversation
   const handleNew = async () => {
-    if (loading) {
-      abortRef.current?.abort()
-      setLoading(false)
-    }
+    if (loading) { abortRef.current?.abort(); setLoading(false) }
     try {
       const conv = await createConversation()
       setConversations(prev => [conv, ...prev])
       setActiveId(conv.id)
       setMessages([])
       setInput('')
-    } catch { /* ignore */ }
+    } catch { /* */ }
   }
 
   // Delete conversation
-  const handleDelete = async (id: string, e: React.MouseEvent) => {
-    e.stopPropagation()
+  const handleDelete = async (id: string) => {
     Modal.confirm({
-      title: '删除对话',
-      content: '确定要删除这个对话吗？',
-      okText: '删除',
-      okType: 'danger',
-      cancelText: '取消',
+      title: '删除对话', content: '确定要删除这个对话吗？',
+      okText: '删除', okType: 'danger', cancelText: '取消',
       onOk: async () => {
         await deleteConversation(id).catch(() => {})
         setConversations(prev => prev.filter(c => c.id !== id))
-        if (activeId === id) {
-          setActiveId(null)
-          setMessages([])
-        }
+        if (activeId === id) { setActiveId(null); setMessages([]) }
       },
     })
   }
 
+  // Start editing title
+  const startEdit = (conv: Conversation) => {
+    setEditingId(conv.id)
+    setEditTitle(conv.title)
+    setTimeout(() => editInputRef.current?.focus(), 50)
+  }
+
+  // Save title
+  const saveTitle = async (id: string) => {
+    const title = editTitle.trim()
+    if (title && title !== conversations.find(c => c.id === id)?.title) {
+      await updateConversation(id, title).catch(() => {})
+      setConversations(prev => prev.map(c => c.id === id ? { ...c, title } : c))
+    }
+    setEditingId(null)
+  }
+
   // Send message
   const handleSend = async () => {
     const text = input.trim()
     if (!text || loading) return
 
     const userMsg: Message = {
-      id: Date.now().toString(),
-      role: 'user',
-      content: text,
-      timestamp: Date.now(),
+      id: Date.now().toString(), role: 'user', content: text, timestamp: Date.now(),
     }
     const newMessages = [...messages, userMsg]
     setMessages(newMessages)
@@ -112,95 +119,81 @@ export default function TaskAssistant() {
     try {
       const result = await sendMessage(
         newMessages.map(m => ({ role: m.role, content: m.content })),
-        activeId ?? undefined,
-        controller.signal,
+        activeId ?? undefined, controller.signal,
       )
 
-      // Use returned conversationId if this was auto-created
-      if (result.conversationId && !activeId) {
-        setActiveId(result.conversationId)
-        const conv = await createConversation(
-          newMessages[newMessages.length - 1]?.content?.slice(0, 30)
-        ).catch(() => null)
-        if (conv) setConversations(prev => [conv, ...prev])
+      const convId = result.conversationId || activeId
+      if (convId && convId !== activeId) {
+        setActiveId(convId)
+        loadConversations()
       }
 
       const assistantMsg: Message = {
-        id: (Date.now() + 1).toString(),
-        role: 'assistant',
-        content: result.content,
-        timestamp: Date.now(),
+        id: (Date.now() + 1).toString(), role: 'assistant',
+        content: result.content, timestamp: Date.now(),
       }
       setMessages(prev => [...prev, assistantMsg])
-
-      // Refresh conversation list for updated timestamps
-      listConversations().then(setConversations).catch(() => {})
+      loadConversations()
     } catch (err: any) {
       if (err.name === 'AbortError') return
-      const errorMsg: Message = {
-        id: (Date.now() + 1).toString(),
-        role: 'assistant',
+      setMessages(prev => [...prev, {
+        id: (Date.now() + 1).toString(), role: 'assistant',
         content: '请求失败：' + (err instanceof Error ? err.message : '未知错误'),
         timestamp: Date.now(),
-      }
-      setMessages(prev => [...prev, errorMsg])
+      }])
     } finally {
       setLoading(false)
       abortRef.current = null
     }
   }
 
-  // Stop generation
-  const handleStop = () => {
-    abortRef.current?.abort()
-    setLoading(false)
-  }
+  const handleStop = () => { abortRef.current?.abort(); setLoading(false) }
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault()
-      handleSend()
-    }
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend() }
   }
 
   return (
-    <div style={{ display: 'flex', height: 'calc(100vh - 112px)', gap: 16 }}>
+    <div style={{ display: 'flex', height: 'calc(100vh - 112px)', gap: 12 }}>
       {/* Sidebar */}
       <div style={{
         width: 260, flexShrink: 0, display: 'flex', flexDirection: 'column',
         background: token.colorBgContainer, borderRadius: token.borderRadiusLG,
         border: `1px solid ${token.colorBorderSecondary}`, overflow: 'hidden',
       }}>
-        <div style={{ padding: '12px 16px', borderBottom: `1px solid ${token.colorBorderSecondary}` }}>
-          <Button type="primary" icon={<PlusOutlined />} block onClick={handleNew}>
-            新对话
-          </Button>
+        <div style={{ padding: 12, borderBottom: `1px solid ${token.colorBorderSecondary}` }}>
+          <Button type="primary" icon={<PlusOutlined />} block onClick={handleNew}>新对话</Button>
         </div>
-        <div style={{ flex: 1, overflowY: 'auto', padding: 4 }}>
+        <div style={{ flex: 1, overflowY: 'auto', padding: '4px 8px' }}>
           {conversations.map(conv => (
-            <div
-              key={conv.id}
-              onClick={() => switchConversation(conv.id)}
+            <div key={conv.id}
+              onClick={() => activeId !== conv.id && switchConversation(conv.id)}
               style={{
                 display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                padding: '8px 12px', margin: '2px 0', borderRadius: 8, cursor: 'pointer',
+                padding: '8px 10px', marginBottom: 2, borderRadius: 8, cursor: 'pointer',
                 background: activeId === conv.id ? token.colorFillSecondary : 'transparent',
-                transition: 'background 0.2s',
-              }}
-              onMouseEnter={e => (e.currentTarget.style.background = token.colorFillSecondary)}
-              onMouseLeave={e => {
-                if (activeId !== conv.id) e.currentTarget.style.background = 'transparent'
-              }}
-            >
-              <Space style={{ overflow: 'hidden', flex: 1 }}>
-                <MessageOutlined style={{ color: token.colorTextQuaternary, fontSize: 14 }} />
-                <Text ellipsis style={{ fontSize: 13, maxWidth: 160 }}>{conv.title}</Text>
-              </Space>
+              }}>
+              <MessageOutlined style={{ color: token.colorTextQuaternary, fontSize: 14, marginRight: 8, flexShrink: 0 }} />
+              {editingId === conv.id ? (
+                <Input
+                  ref={editInputRef} size="small" value={editTitle}
+                  onChange={e => setEditTitle(e.target.value)}
+                  onBlur={() => saveTitle(conv.id)}
+                  onPressEnter={() => saveTitle(conv.id)}
+                  onClick={e => e.stopPropagation()}
+                  style={{ flex: 1, fontSize: 13 }}
+                />
+              ) : (
+                <Text
+                  ellipsis
+                  style={{ flex: 1, fontSize: 13, lineHeight: '28px' }}
+                  onDoubleClick={e => { e.stopPropagation(); startEdit(conv) }}
+                >{conv.title}</Text>
+              )}
               <Tooltip title="删除">
                 <DeleteOutlined
-                  onClick={e => handleDelete(conv.id, e)}
-                  style={{ fontSize: 12, color: token.colorTextQuaternary, opacity: 0, transition: 'opacity 0.2s' }}
-                  className="conv-delete-icon"
+                  onClick={e => { e.stopPropagation(); handleDelete(conv.id) }}
+                  style={{ fontSize: 12, color: token.colorTextQuaternary, marginLeft: 4, cursor: 'pointer' }}
                 />
               </Tooltip>
             </div>
@@ -208,6 +201,8 @@ export default function TaskAssistant() {
           {conversations.length === 0 && (
             <div style={{ textAlign: 'center', padding: 24, color: token.colorTextQuaternary }}>
               <Text type="secondary" style={{ fontSize: 13 }}>暂无对话</Text>
+              <br />
+              <Text type="secondary" style={{ fontSize: 12, marginTop: 4 }}>双击标题可重命名</Text>
             </div>
           )}
         </div>
@@ -215,10 +210,12 @@ export default function TaskAssistant() {
 
       {/* Chat area */}
       <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+        {/* Messages */}
         <div style={{
           flex: 1, overflowY: 'auto', background: token.colorBgContainer,
-          borderRadius: token.borderRadiusLG, padding: '20px 24px', marginBottom: 12,
-          border: `1px solid ${token.colorBorderSecondary}`,
+          borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
+          padding: '20px 24px',
+          border: `1px solid ${token.colorBorderSecondary}`, borderBottom: 'none',
         }}>
           {messages.length === 0 && (
             <div style={{
@@ -236,33 +233,24 @@ export default function TaskAssistant() {
           )}
 
           {messages.map(msg => (
-            <div
-              key={msg.id}
-              style={{
-                display: 'flex', gap: 12, marginBottom: 20,
-                flexDirection: msg.role === 'user' ? 'row-reverse' : 'row',
-              }}
-            >
-              <Avatar
-                size={32}
+            <div key={msg.id} style={{
+              display: 'flex', gap: 12, marginBottom: 20,
+              flexDirection: msg.role === 'user' ? 'row-reverse' : 'row',
+            }}>
+              <Avatar size={32}
                 icon={msg.role === 'user' ? <UserOutlined /> : <RobotOutlined />}
                 style={{
                   backgroundColor: msg.role === 'user' ? token.colorPrimary : token.colorSuccess,
                   flexShrink: 0,
                 }}
               />
-              <div
-                style={{
-                  maxWidth: '75%', padding: '12px 16px', borderRadius: 12,
-                  background: msg.role === 'user' ? token.colorPrimary : token.colorFillAlter,
-                  color: msg.role === 'user' ? '#fff' : token.colorText,
-                  lineHeight: 1.8, wordBreak: 'break-word',
-                }}
-              >
-                {msg.role === 'assistant'
-                  ? <Markdown content={msg.content} />
-                  : msg.content
-                }
+              <div style={{
+                maxWidth: '75%', padding: '12px 16px', borderRadius: 12,
+                background: msg.role === 'user' ? token.colorPrimary : token.colorFillAlter,
+                color: msg.role === 'user' ? '#fff' : token.colorText,
+                lineHeight: 1.8, wordBreak: 'break-word',
+              }}>
+                {msg.role === 'assistant' ? <Markdown content={msg.content} /> : msg.content}
               </div>
             </div>
           ))}
@@ -279,44 +267,48 @@ export default function TaskAssistant() {
               </div>
             </div>
           )}
-
           <div ref={messagesEndRef} />
         </div>
 
-        {/* Input area */}
+        {/* Input area — redesigned */}
         <div style={{
-          padding: '12px 16px', background: token.colorBgContainer,
-          borderRadius: token.borderRadiusLG, border: `1px solid ${token.colorBorderSecondary}`,
+          background: token.colorBgContainer, borderTop: 'none',
+          border: `1px solid ${token.colorBorderSecondary}`,
+          borderRadius: `0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px`,
+          padding: '16px 20px',
         }}>
-          <Space.Compact style={{ width: '100%' }}>
-            <TextArea
+          <div style={{
+            display: 'flex', alignItems: 'flex-end', gap: 10,
+            background: token.colorFillTertiary, borderRadius: 12,
+            padding: '8px 8px 8px 14px', border: `1px solid ${token.colorBorderSecondary}`,
+          }}>
+            <Input.TextArea
               value={input}
               onChange={e => setInput(e.target.value)}
               onKeyDown={handleKeyDown}
               placeholder={activeId ? '输入消息，Enter 发送，Shift+Enter 换行' : '请先新建或选择对话'}
-              autoSize={{ minRows: 1, maxRows: 4 }}
+              autoSize={{ minRows: 1, maxRows: 5 }}
               disabled={loading || !activeId}
-              style={{ resize: 'none' }}
+              variant="borderless"
+              style={{ flex: 1, resize: 'none', padding: '4px 0', fontSize: 14 }}
             />
             {loading ? (
-              <Button danger icon={<StopOutlined />} onClick={handleStop} style={{ height: 'auto' }}>
+              <Button
+                danger type="primary" icon={<StopOutlined />} onClick={handleStop}
+                style={{ borderRadius: 8, height: 34, minWidth: 72 }}>
                 停止
               </Button>
             ) : (
-              <Button type="primary" icon={<SendOutlined />} onClick={handleSend}
-                disabled={!input.trim() || !activeId} style={{ height: 'auto' }}>
+              <Button
+                type="primary" icon={<SendOutlined />} onClick={handleSend}
+                disabled={!input.trim() || !activeId}
+                style={{ borderRadius: 8, height: 34, minWidth: 72 }}>
                 发送
               </Button>
             )}
-          </Space.Compact>
+          </div>
         </div>
       </div>
-
-      {/* CSS for delete icon hover */}
-      <style>{`
-        .conv-delete-icon { opacity: 0; }
-        div:hover > .conv-delete-icon { opacity: 1 !important; }
-      `}</style>
     </div>
   )
 }

src/services/conversation-api.ts

@@ -1,16 +1,27 @@
 import { api } from './http-client'
 
-interface Conversation {
+export interface Conversation {
   id: string
   title: string
   createdAt: string
   updatedAt: string
 }
 
+export interface MessageRecord {
+  id: string
+  role: 'user' | 'assistant'
+  content: string
+  createdAt: string
+}
+
 export function listConversations(): Promise<Conversation[]> {
   return api.get('/admin-api/conversations')
 }
 
+export function getMessages(conversationId: string): Promise<MessageRecord[]> {
+  return api.get(`/admin-api/conversations/${conversationId}/messages`)
+}
+
 export function createConversation(title?: string): Promise<Conversation> {
   return api.post('/admin-api/conversations', { title })
 }