sion/video-create
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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>
This commit is contained in:
sion123
2026-05-07 04:14:16 +08:00
parent e850613972
commit 5104bbc18a
3 changed files with 102 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
web/client/src/components/chat/ChatInput.tsx
View File

@@ -1,6 +1,5 @@
import { useState, useRef, useEffect } from 'react';
import { Send, Terminal, Image, Play, FileText } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useState, useRef } from 'react';
import { Send, Terminal, Image, Play, FileText, ArrowUp } from 'lucide-react';
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') {
e.preventDefault();
const cmd = matchingCmds[cmdIdx % matchingCmds.length].cmd;
setInput(cmd + ' ');
setShowCmds(false);
return;
}
if (e.key === 'Tab') { e.preventDefault(); setInput(matchingCmds[cmdIdx % matchingCmds.length].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} />
<span className="font-mono font-medium">{c.cmd}</span>
<span className="text-zinc-400">{c.desc}</span>
<Icon size={15} className="text-zinc-400" />
<span className="font-mono font-semibold text-xs">{c.cmd}</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 ? '等待回复中...' : '输入指令或 / 查看命令...'}
className="flex-1 bg-transparent text-sm resize-none outline-none placeholder:text-zinc-400 text-zinc-700"
placeholder={disabled ? '等待回复中...' : '输入消息，或按 / 查看快捷命令...'}
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}>
<Send size={16} />
</Button>
<button
onClick={handleSend}
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>
);