wangxuming/NianToB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(chat): execution graph optimize (#873)

Browse Source 
Co-authored-by: Haze <hazeone@users.noreply.github.com>
This commit is contained in:
Haze
2026-04-19 19:36:33 +08:00
committed by GitHub
parent 2f03aa1fad
commit 1b2dccee6e
24 changed files with 1444 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/pages/Chat/ChatInput.tsx
View File

@@ -114,7 +114,7 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false, i
useEffect(() => {
if (textareaRef.current) {
textareaRef.current.style.height = 'auto';
textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 200)}px`;
textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 240)}px`;
}
}, [input]);
@@ -407,33 +407,54 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false, i
</div>
)}
{/* Input Row */}
<div className={`relative bg-white dark:bg-card rounded-[28px] shadow-sm border p-1.5 transition-all ${dragOver ? 'border-primary ring-1 ring-primary' : 'border-black/10 dark:border-white/10'}`}>
{/* Input Container */}
<div className={`relative bg-white dark:bg-card rounded-2xl shadow-sm border px-3 pt-2.5 pb-1.5 transition-all ${dragOver ? 'border-primary ring-1 ring-primary' : 'border-black/10 dark:border-white/10'}`}>
{selectedTarget && (
<div className="px-2.5 pt-2 pb-1">
<div className="pb-1.5">
<button
type="button"
onClick={() => setTargetAgentId(null)}
className="inline-flex items-center gap-1.5 rounded-full border border-primary/20 bg-primary/5 px-3 py-1 text-[13px] font-medium text-foreground transition-colors hover:bg-primary/10"
className="inline-flex items-center gap-1.5 rounded-lg border border-primary/20 bg-primary/5 px-2.5 py-1 text-[13px] font-medium text-foreground transition-colors hover:bg-primary/10"
title={t('composer.clearTarget')}
>
<span>{t('composer.targetChip', { agent: selectedTarget.name })}</span>
<X className="h-3.5 w-3.5 text-muted-foreground" />
<X className="h-3 w-3 text-muted-foreground" />
</button>
</div>
)}
<div className="flex items-end gap-1.5">
{/* Text Row — flush-left */}
<Textarea
ref={textareaRef}
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={handleKeyDown}
onCompositionStart={() => {
isComposingRef.current = true;
}}
onCompositionEnd={() => {
isComposingRef.current = false;
}}
onPaste={handlePaste}
placeholder={disabled ? t('composer.gatewayDisconnectedPlaceholder') : ''}
disabled={disabled}
data-testid="chat-composer-input"
className="min-h-[48px] max-h-[240px] resize-none border-0 focus-visible:ring-0 focus-visible:ring-offset-0 shadow-none bg-transparent p-0 text-[15px] placeholder:text-muted-foreground/60 leading-relaxed"
rows={1}
/>
{/* Action Row — icons on their own line */}
<div className="mt-1.5 flex items-center gap-1">
{/* Attach Button */}
<Button
variant="ghost"
size="icon"
className="shrink-0 h-10 w-10 rounded-full text-muted-foreground hover:bg-black/5 dark:hover:bg-white/10 hover:text-foreground transition-colors"
className="shrink-0 h-8 w-8 rounded-lg text-muted-foreground hover:bg-black/5 dark:hover:bg-white/10 hover:text-foreground transition-colors"
onClick={pickFiles}
disabled={disabled || sending}
title={t('composer.attachFiles')}
>
<Paperclip className="h-4 w-4" />
<Paperclip className="h-3.5 w-3.5" />
</Button>
{showAgentPicker && (
@@ -442,14 +463,14 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false, i
variant="ghost"
size="icon"
className={cn(
'h-10 w-10 rounded-full text-muted-foreground hover:bg-black/5 dark:hover:bg-white/10 hover:text-foreground transition-colors',
'h-8 w-8 rounded-lg text-muted-foreground hover:bg-black/5 dark:hover:bg-white/10 hover:text-foreground transition-colors',
(pickerOpen || selectedTarget) && 'bg-primary/10 text-primary hover:bg-primary/20'
)}
onClick={() => setPickerOpen((open) => !open)}
disabled={disabled || sending}
title={t('composer.pickAgent')}
>
<AtSign className="h-4 w-4" />
<AtSign className="h-3.5 w-3.5" />
</Button>
{pickerOpen && (
<div className="absolute left-0 bottom-full z-20 mb-2 w-72 overflow-hidden rounded-2xl border border-black/10 bg-white p-1.5 shadow-xl dark:border-white/10 dark:bg-card">
@@ -475,35 +496,13 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false, i
</div>
)}
{/* Textarea */}
<div className="flex-1 relative">
<Textarea
ref={textareaRef}
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={handleKeyDown}
onCompositionStart={() => {
isComposingRef.current = true;
}}
onCompositionEnd={() => {
isComposingRef.current = false;
}}
onPaste={handlePaste}
placeholder={disabled ? t('composer.gatewayDisconnectedPlaceholder') : ''}
disabled={disabled}
data-testid="chat-composer-input"
className="min-h-[40px] max-h-[200px] resize-none border-0 focus-visible:ring-0 focus-visible:ring-offset-0 shadow-none bg-transparent py-2.5 px-2 text-[15px] placeholder:text-muted-foreground/60 leading-relaxed"
rows={1}
/>
</div>
{/* Send Button */}
{/* Send Button — pushed to the right */}
<Button
onClick={sending ? handleStop : handleSend}
disabled={sending ? !canStop : !canSend}
size="icon"
data-testid="chat-composer-send"
className={`shrink-0 h-10 w-10 rounded-full transition-colors ${
className={`ml-auto shrink-0 h-8 w-8 rounded-lg transition-colors ${
(sending || canSend)
? 'bg-black/5 dark:bg-white/10 text-foreground hover:bg-black/10 dark:hover:bg-white/20'
: 'text-muted-foreground/50 hover:bg-transparent bg-transparent'
@@ -512,9 +511,9 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false, i
title={sending ? t('composer.stop') : t('composer.send')}
>
{sending ? (
<Square className="h-4 w-4" fill="currentColor" />
<Square className="h-3.5 w-3.5" fill="currentColor" />
) : (
<SendHorizontal className="h-[18px] w-[18px]" strokeWidth={2} />
<SendHorizontal className="h-4 w-4" strokeWidth={2} />
)}
</Button>
</div>