feat(web): modernize chat UI, fix account navigation

- Chat: avatars, cleaner bubbles, improved spacing, typing dots
- Input: rounded design, auto-expand textarea, arrow button, slash commands
- Account list: fix navigation with useParams reactivity
- Bot/User role labels in messages

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

web/client/src/components/accounts/AccountList.tsx

@@ -1,12 +1,11 @@
 import { Plus } from 'lucide-react';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useAccounts } from '@/hooks/useAccounts';
 import { AccountForm } from './AccountForm';
 import { PromptEditor } from '@/components/prompts/PromptEditor';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import type { Account } from '@/types';
 
 export function AccountList() {
   const { accountId } = useParams<{ accountId?: string }>();
@@ -14,21 +13,29 @@ export function AccountList() {
   const { accounts, create, update, remove } = useAccounts();
   const [creating, setCreating] = useState(false);
   const [subTab, setSubTab] = useState<'info' | 'prompts'>('info');
-  const editing = accounts.find((a) => a.id === accountId) || null;
+
+  const editing = accountId ? accounts.find((a) => a.id === accountId) || null : null;
+
+  // Reset creating when navigating to an account
+  useEffect(() => { setCreating(false); }, [accountId]);
+
+  const handleSelectAccount = (id: string) => {
+    navigate(`/accounts/${id}`);
+  };
 
   return (
     <div className="flex h-full">
       <ScrollArea className="w-56 border-r border-zinc-200 bg-zinc-50 p-3">
         <div className="flex items-center justify-between mb-3">
           <h2 className="text-sm font-semibold text-zinc-700">账户列表</h2>
-          <Button size="icon" variant="ghost" className="h-7 w-7 text-zinc-500 hover:text-zinc-700" onClick={() => setCreating(true)}>
+          <Button size="icon" variant="ghost" className="h-7 w-7 text-zinc-500 hover:text-zinc-700" onClick={() => { setCreating(true); navigate('/accounts'); }}>
             <Plus size={14} />
           </Button>
         </div>
         {accounts.map((a) => (
           <button
             key={a.id}
-            onClick={() => navigate(`/accounts/${a.id}`)}
+            onClick={() => handleSelectAccount(a.id)}
             className={`block w-full text-left px-3 py-2 rounded-md text-sm transition-colors mb-0.5
               ${a.id === accountId
                 ? 'bg-indigo-50 text-indigo-700 font-medium'
@@ -65,9 +72,9 @@ export function AccountList() {
                   account={creating ? undefined : editing!}
                   onSave={(data) => {
                     if (creating) {
-                      create(data).then(() => setCreating(false));
+                      create(data).then(() => { setCreating(false); if (data.id) navigate(`/accounts/${data.id}`); });
                     } else {
-                      update(editing!.id, data).then(() => {});
+                      update(editing!.id, data);
                     }
                   }}
                   onDelete={editing ? () => {

web/client/src/components/chat/ChatInput.tsx

@@ -1,6 +1,5 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef } from 'react';
-import { Send, Terminal, Image, Play, FileText } from 'lucide-react';
+import { Send, Terminal, Image, Play, FileText, ArrowUp } from 'lucide-react';
-import { Button } from '@/components/ui/button';
 
 const SLASH_COMMANDS = [
   { cmd: '/run', desc: '执行 pipeline 阶段', icon: Play },
@@ -16,35 +15,21 @@ export function ChatInput({ onSend, disabled }: { onSend: (content: string) => v
   const [cmdIdx, setCmdIdx] = useState(0);
   const ref = useRef<HTMLTextAreaElement>(null);
 
-  useEffect(() => {
-    if (input.startsWith('/')) {
-      setShowCmds(true);
-      setCmdIdx(0);
-    } else {
-      setShowCmds(false);
-    }
-  }, [input]);
-
   const matchingCmds = input.startsWith('/')
     ? SLASH_COMMANDS.filter((c) => c.cmd.startsWith(input.split(' ')[0]))
     : [];
 
   const handleSend = () => {
-    if (!input.trim()) return;
+    if (!input.trim() || disabled) return;
     onSend(input.trim());
     setInput('');
+    setShowCmds(false);
     ref.current?.focus();
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (showCmds && matchingCmds.length > 0) {
-      if (e.key === 'Tab' || e.key === 'Enter') {
+      if (e.key === 'Tab') { e.preventDefault(); setInput(matchingCmds[cmdIdx % matchingCmds.length].cmd + ' '); setShowCmds(false); return; }
-        e.preventDefault();
-        const cmd = matchingCmds[cmdIdx % matchingCmds.length].cmd;
-        setInput(cmd + ' ');
-        setShowCmds(false);
-        return;
-      }
       if (e.key === 'ArrowDown') { e.preventDefault(); setCmdIdx((i) => (i + 1) % matchingCmds.length); return; }
       if (e.key === 'ArrowUp') { e.preventDefault(); setCmdIdx((i) => (i - 1 + matchingCmds.length) % matchingCmds.length); return; }
     }
@@ -55,44 +40,70 @@ export function ChatInput({ onSend, disabled }: { onSend: (content: string) => v
     }
   };
 
+  const canSend = input.trim().length > 0 && !disabled;
+
   return (
     <div className="relative">
+      {/* Slash command menu */}
       {showCmds && matchingCmds.length > 0 && (
-        <div className="mx-4 mb-0.5 bg-white border border-zinc-200 rounded-lg shadow-lg overflow-hidden">
+        <div className="mx-6 mb-0.5 bg-white border border-zinc-200 rounded-xl shadow-lg overflow-hidden animate-in slide-in-from-bottom-2">
           {matchingCmds.map((c, i) => {
             const Icon = c.icon;
             return (
               <button
                 key={c.cmd}
                 onClick={() => { setInput(c.cmd + ' '); setShowCmds(false); ref.current?.focus(); }}
-                className={`w-full flex items-center gap-2 px-3 py-1.5 text-sm transition-colors ${
+                className={`w-full flex items-center gap-2.5 px-3.5 py-2 text-sm transition-colors ${
                   i === (cmdIdx % matchingCmds.length) ? 'bg-indigo-50 text-indigo-700' : 'text-zinc-600 hover:bg-zinc-50'
                 }`}
               >
-                <Icon size={14} />
+                <Icon size={15} className="text-zinc-400" />
-                <span className="font-mono font-medium">{c.cmd}</span>
+                <span className="font-mono font-semibold text-xs">{c.cmd}</span>
-                <span className="text-zinc-400">{c.desc}</span>
+                <span className="text-zinc-400 text-xs">{c.desc}</span>
               </button>
             );
           })}
         </div>
       )}
-      <div className="p-4 border-t border-zinc-200 bg-white">
+
-        <div className="flex items-end gap-2 bg-zinc-50 rounded-xl border border-zinc-200 px-4 py-2.5 focus-within:border-indigo-300 transition-colors">
+      {/* Input bar */}
+      <div className="px-4 pb-4 pt-2 bg-gradient-to-t from-white via-white to-transparent">
+        <div className={`
+          flex items-end gap-2 bg-zinc-50 rounded-2xl border transition-all duration-200 px-4 py-3
+          ${disabled ? 'border-zinc-200 opacity-60' : 'border-zinc-200 focus-within:border-indigo-300 focus-within:shadow-md focus-within:shadow-indigo-50 focus-within:bg-white'}
+        `}>
           <textarea
             ref={ref}
             value={input}
             onChange={(e) => setInput(e.target.value)}
             onKeyDown={handleKeyDown}
             rows={1}
-            placeholder={disabled ? '等待回复中...' : '输入指令或 / 查看命令...'}
+            placeholder={disabled ? '等待回复中...' : '输入消息，或按 / 查看快捷命令...'}
-            className="flex-1 bg-transparent text-sm resize-none outline-none placeholder:text-zinc-400 text-zinc-700"
+            className="flex-1 bg-transparent text-sm resize-none outline-none placeholder:text-zinc-400 text-zinc-700 min-h-[24px] max-h-[120px]"
             disabled={disabled}
+            style={{ height: 'auto' }}
+            onInput={(e) => {
+              const el = e.currentTarget;
+              el.style.height = 'auto';
+              el.style.height = Math.min(el.scrollHeight, 120) + 'px';
+            }}
           />
-          <Button size="icon" variant="ghost" className="h-8 w-8 text-zinc-400 hover:text-indigo-600" onClick={handleSend} disabled={disabled}>
+          <button
-            <Send size={16} />
+            onClick={handleSend}
-          </Button>
+            disabled={!canSend}
+            className={`
+              w-8 h-8 rounded-xl flex items-center justify-center transition-all flex-shrink-0
+              ${canSend
+                ? 'bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm'
+                : 'bg-zinc-200 text-zinc-400 cursor-not-allowed'}
+            `}
+          >
+            <ArrowUp size={16} strokeWidth={2.5} />
+          </button>
         </div>
+        <p className="text-[10px] text-zinc-400 text-center mt-1.5">
+          美图 Agent 可能会产生错误内容，请核实重要信息
+        </p>
       </div>
     </div>
   );

web/client/src/components/chat/ChatMessage.tsx

@@ -1,6 +1,6 @@
 import { cn } from '@/lib/utils';
 import { renderMarkdown } from '@/lib/markdown';
-import { RefreshCw, ArrowRight, Quote } from 'lucide-react';
+import { RefreshCw, ArrowRight, Quote, Bot, User } from 'lucide-react';
 import type { Message } from '@/types';
 
 interface Props {
@@ -15,61 +15,57 @@ export function ChatMessage({ message, onRegenerate, onContinue, onQuote }: Prop
   const isEmpty = !message.content;
 
   return (
-    <div className={cn('mb-4 flex group', isUser ? 'justify-end' : 'justify-start')}>
+    <div className={cn('flex gap-3 mb-6', isUser ? 'flex-row-reverse' : 'flex-row')}>
-      <div className="max-w-[80%]">
+      {/* Avatar */}
-        <div
+      <div className={cn(
-          className={cn(
+        'w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0',
-            'rounded-xl px-4 py-2.5',
+        isUser ? 'bg-indigo-600 text-white' : 'bg-zinc-100 text-zinc-500'
+      )}>
+        {isUser ? <User size={15} /> : <Bot size={15} />}
+      </div>
+
+      {/* Content */}
+      <div className={cn('flex-1 max-w-[75%]', isUser && 'flex flex-col items-end')}>
+        {/* Role label */}
+        <div className={cn('text-[10px] font-medium mb-1 px-1', isUser ? 'text-right text-indigo-500' : 'text-zinc-400')}>
+          {isUser ? '你' : '美图 Agent'}
+        </div>
+
+        {/* Bubble */}
+        <div className={cn(
+          'rounded-2xl px-4 py-3 text-sm leading-relaxed',
           isUser
-              ? 'bg-indigo-600 text-white'
+            ? 'bg-indigo-600 text-white rounded-tr-md'
-              : 'bg-white text-zinc-700 border border-zinc-200 shadow-sm'
+            : 'bg-white text-zinc-700 border border-zinc-200/60 shadow-sm rounded-tl-md'
-          )}
+        )}>
-        >
           {isEmpty ? (
-            <span className="text-zinc-400 italic text-xs">...</span>
+            <div className="flex items-center gap-1 text-zinc-400">
+              <span className="inline-block w-1.5 h-1.5 bg-zinc-300 rounded-full animate-pulse" />
+              <span className="inline-block w-1.5 h-1.5 bg-zinc-300 rounded-full animate-pulse delay-100" />
+              <span className="inline-block w-1.5 h-1.5 bg-zinc-300 rounded-full animate-pulse delay-200" />
+            </div>
           ) : isUser ? (
-            <p className="text-sm leading-relaxed whitespace-pre-wrap">{message.content}</p>
+            <p className="whitespace-pre-wrap">{message.content}</p>
           ) : (
-            <div
+            <div className="markdown-body" dangerouslySetInnerHTML={{ __html: renderMarkdown(message.content) }} />
-              className="markdown-body text-sm leading-relaxed"
-              dangerouslySetInnerHTML={{ __html: renderMarkdown(message.content) }}
-            />
           )}
         </div>
 
-        {/* Action buttons - only for assistant messages */}
+        {/* Actions - only for assistant messages */}
         {!isUser && !isEmpty && (
-          <div className="flex gap-1 mt-1 opacity-0 group-hover:opacity-100 transition-opacity">
+          <div className="flex gap-0.5 mt-1 opacity-0 hover:opacity-100 transition-opacity px-1">
-            {onQuote && (
+            <button onClick={() => onQuote?.(message.content)}
-              <button
+              className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] text-zinc-400 hover:text-zinc-600 hover:bg-zinc-100 transition-colors">
-                onClick={() => onQuote(message.content)}
+              <Quote size={10} />引用
-                className="flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] text-zinc-400 hover:text-zinc-600 hover:bg-zinc-100 transition-colors"
-                title="引用"
-              >
-                <Quote size={10} />
-                引用
             </button>
-            )}
+            <button onClick={() => onRegenerate?.(message.id)}
-            {onRegenerate && (
+              className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] text-zinc-400 hover:text-zinc-600 hover:bg-zinc-100 transition-colors">
-              <button
+              <RefreshCw size={10} />重新生成
-                onClick={() => onRegenerate(message.id)}
-                className="flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] text-zinc-400 hover:text-zinc-600 hover:bg-zinc-100 transition-colors"
-                title="重新生成"
-              >
-                <RefreshCw size={10} />
-                重新生成
             </button>
-            )}
+            <button onClick={() => onContinue?.(message.id)}
-            {onContinue && (
+              className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] text-zinc-400 hover:text-zinc-600 hover:bg-zinc-100 transition-colors">
-              <button
+              <ArrowRight size={10} />继续
-                onClick={() => onContinue(message.id)}
-                className="flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] text-zinc-400 hover:text-zinc-600 hover:bg-zinc-100 transition-colors"
-                title="继续"
-              >
-                <ArrowRight size={10} />
-                继续
             </button>
-            )}
           </div>
         )}
       </div>