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

feat(agents): support chat to agent (#403)

Browse Source
This commit is contained in:
Haze
2026-03-11 12:03:30 +08:00
committed by GitHub
parent 34dcb48e27
commit 95e090ecb5
28 changed files with 887 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/pages/Agents/index.tsx
View File

@@ -1,5 +1,5 @@
import { useEffect, useMemo, useState } from 'react';
import { AlertCircle, Bot, Plus, RefreshCw, Settings2, Trash2, X } from 'lucide-react';
import { AlertCircle, Bot, Check, Plus, RefreshCw, Settings2, Trash2, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
@@ -197,8 +197,9 @@ function AgentCard({
{agent.isDefault && (
<Badge
variant="secondary"
className="font-mono text-[10px] font-medium px-2 py-0.5 rounded-full bg-black/[0.04] dark:bg-white/[0.08] border-0 shadow-none text-foreground/70"
className="flex items-center gap-1 font-mono text-[10px] font-medium px-2 py-0.5 rounded-full bg-black/[0.04] dark:bg-white/[0.08] border-0 shadow-none text-foreground/70"
>
<Check className="h-3 w-3" />
{t('defaultBadge')}
</Badge>
)}

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

@@ -6,14 +6,18 @@
* Files are staged to disk via IPC — only lightweight path references
* are sent with the message (no base64 over WebSocket).
*/
import { useState, useRef, useEffect, useCallback } from 'react';
import { SendHorizontal, Square, X, Paperclip, FileText, Film, Music, FileArchive, File, Loader2 } from 'lucide-react';
import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
import { SendHorizontal, Square, X, Paperclip, FileText, Film, Music, FileArchive, File, Loader2, AtSign } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import { hostApiFetch } from '@/lib/host-api';
import { invokeIpc } from '@/lib/api-client';
import { cn } from '@/lib/utils';
import { useGatewayStore } from '@/stores/gateway';
import { useAgentsStore } from '@/stores/agents';
import { useChatStore } from '@/stores/chat';
import type { AgentSummary } from '@/types/agent';
import { useTranslation } from 'react-i18next';
// ── Types ────────────────────────────────────────────────────────
@@ -29,7 +33,7 @@ export interface FileAttachment {
}
interface ChatInputProps {
onSend: (text: string, attachments?: FileAttachment[]) => void;
onSend: (text: string, attachments?: FileAttachment[], targetAgentId?: string | null) => void;
onStop?: () => void;
disabled?: boolean;
sending?: boolean;
@@ -81,11 +85,30 @@ function readFileAsBase64(file: globalThis.File): Promise<string> {
// ── Component ────────────────────────────────────────────────────
export function ChatInput({ onSend, onStop, disabled = false, sending = false, isEmpty = false }: ChatInputProps) {
const { t } = useTranslation('chat');
const [input, setInput] = useState('');
const [attachments, setAttachments] = useState<FileAttachment[]>([]);
const [targetAgentId, setTargetAgentId] = useState<string | null>(null);
const [pickerOpen, setPickerOpen] = useState(false);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const pickerRef = useRef<HTMLDivElement>(null);
const isComposingRef = useRef(false);
const gatewayStatus = useGatewayStore((s) => s.status);
const agents = useAgentsStore((s) => s.agents);
const currentAgentId = useChatStore((s) => s.currentAgentId);
const currentAgentName = useMemo(
() => agents.find((agent) => agent.id === currentAgentId)?.name ?? currentAgentId,
[agents, currentAgentId],
);
const mentionableAgents = useMemo(
() => agents.filter((agent) => agent.id !== currentAgentId),
[agents, currentAgentId],
);
const selectedTarget = useMemo(
() => agents.find((agent) => agent.id === targetAgentId) ?? null,
[agents, targetAgentId],
);
const showAgentPicker = mentionableAgents.length > 0;
// Auto-resize textarea
useEffect(() => {
@@ -102,6 +125,32 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false, i
}
}, [disabled]);
useEffect(() => {
if (!targetAgentId) return;
if (targetAgentId === currentAgentId) {
setTargetAgentId(null);
setPickerOpen(false);
return;
}
if (!agents.some((agent) => agent.id === targetAgentId)) {
setTargetAgentId(null);
setPickerOpen(false);
}
}, [agents, currentAgentId, targetAgentId]);
useEffect(() => {
if (!pickerOpen) return;
const handlePointerDown = (event: MouseEvent) => {
if (!pickerRef.current?.contains(event.target as Node)) {
setPickerOpen(false);
}
};
document.addEventListener('mousedown', handlePointerDown);
return () => {
document.removeEventListener('mousedown', handlePointerDown);
};
}, [pickerOpen]);
// ── File staging via native dialog ─────────────────────────────
const pickFiles = useCallback(async () => {
@@ -258,8 +307,10 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false, i
if (textareaRef.current) {
textareaRef.current.style.height = 'auto';
}
onSend(textToSend, attachmentsToSend);
}, [input, attachments, canSend, onSend]);
onSend(textToSend, attachmentsToSend, targetAgentId);
setTargetAgentId(null);
setPickerOpen(false);
}, [input, attachments, canSend, onSend, targetAgentId]);
const handleStop = useCallback(() => {
if (!canStop) return;
@@ -268,6 +319,10 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false, i
const handleKeyDown = useCallback(
(e: React.KeyboardEvent) => {
if (e.key === 'Backspace' && !input && targetAgentId) {
setTargetAgentId(null);
return;
}
if (e.key === 'Enter' && !e.shiftKey) {
const nativeEvent = e.nativeEvent as KeyboardEvent;
if (isComposingRef.current || nativeEvent.isComposing || nativeEvent.keyCode === 229) {
@@ -277,7 +332,7 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false, i
handleSend();
}
},
[handleSend],
[handleSend, input, targetAgentId],
);
// Handle paste (Ctrl/Cmd+V with files)
@@ -353,66 +408,126 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false, i
)}
{/* Input Row */}
<div className={`flex items-end gap-1.5 bg-white dark:bg-[#1a1a19] rounded-[28px] shadow-sm border p-1.5 transition-all ${dragOver ? 'border-primary ring-1 ring-primary' : 'border-black/10 dark:border-white/10'}`}>
<div className={`relative bg-white dark:bg-[#1a1a19] rounded-[28px] shadow-sm border p-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">
<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"
title={t('composer.clearTarget')}
>
<span>{t('composer.targetChip', { agent: selectedTarget.name })}</span>
<X className="h-3.5 w-3.5 text-muted-foreground" />
</button>
</div>
)}
{/* 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"
onClick={pickFiles}
disabled={disabled || sending}
title="Attach files"
>
<Paperclip className="h-4 w-4" />
</Button>
<div className="flex items-end gap-1.5">
{/* 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"
onClick={pickFiles}
disabled={disabled || sending}
title={t('composer.attachFiles')}
>
<Paperclip className="h-4 w-4" />
</Button>
{/* 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 ? 'Gateway not connected...' : ''}
disabled={disabled}
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 */}
<Button
onClick={sending ? handleStop : handleSend}
disabled={sending ? !canStop : !canSend}
size="icon"
className={`shrink-0 h-10 w-10 rounded-full 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'
}`}
variant="ghost"
title={sending ? 'Stop' : 'Send'}
>
{sending ? (
<Square className="h-4 w-4" fill="currentColor" />
) : (
<SendHorizontal className="h-[18px] w-[18px]" strokeWidth={2} />
{showAgentPicker && (
<div ref={pickerRef} className="relative shrink-0">
<Button
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',
(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" />
</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-[#1a1a19]">
<div className="px-3 py-2 text-[11px] font-medium text-muted-foreground/80">
{t('composer.agentPickerTitle', { currentAgent: currentAgentName })}
</div>
<div className="max-h-64 overflow-y-auto">
{mentionableAgents.map((agent) => (
<AgentPickerItem
key={agent.id}
agent={agent}
selected={agent.id === targetAgentId}
onSelect={() => {
setTargetAgentId(agent.id);
setPickerOpen(false);
textareaRef.current?.focus();
}}
/>
))}
</div>
</div>
)}
</div>
)}
</Button>
{/* 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}
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 */}
<Button
onClick={sending ? handleStop : handleSend}
disabled={sending ? !canStop : !canSend}
size="icon"
className={`shrink-0 h-10 w-10 rounded-full 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'
}`}
variant="ghost"
title={sending ? t('composer.stop') : t('composer.send')}
>
{sending ? (
<Square className="h-4 w-4" fill="currentColor" />
) : (
<SendHorizontal className="h-[18px] w-[18px]" strokeWidth={2} />
)}
</Button>
</div>
</div>
<div className="mt-2.5 flex items-center justify-between gap-2 text-[11px] text-muted-foreground/60 px-4">
<div className="flex items-center gap-1.5">
<div className={cn("w-1.5 h-1.5 rounded-full", gatewayStatus.state === 'running' ? "bg-green-500/80" : "bg-red-500/80")} />
<span>
gateway {gatewayStatus.state === 'running' ? 'connected' : gatewayStatus.state} | port: {gatewayStatus.port} {gatewayStatus.pid ? `| pid: ${gatewayStatus.pid}` : ''}
{t('composer.gatewayStatus', {
state: gatewayStatus.state === 'running'
? t('composer.gatewayConnected')
: gatewayStatus.state,
port: gatewayStatus.port,
pid: gatewayStatus.pid ? `| pid: ${gatewayStatus.pid}` : '',
})}
</span>
</div>
{hasFailedAttachments && (
@@ -425,7 +540,7 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false, i
void pickFiles();
}}
>
Retry failed attachments
{t('composer.retryFailedAttachments')}
</Button>
)}
</div>
@@ -493,3 +608,29 @@ function AttachmentPreview({
</div>
);
}
function AgentPickerItem({
agent,
selected,
onSelect,
}: {
agent: AgentSummary;
selected: boolean;
onSelect: () => void;
}) {
return (
<button
type="button"
onClick={onSelect}
className={cn(
'flex w-full flex-col items-start rounded-xl px-3 py-2 text-left transition-colors',
selected ? 'bg-primary/10 text-foreground' : 'hover:bg-black/5 dark:hover:bg-white/5'
)}
>
<span className="text-[14px] font-medium text-foreground">{agent.name}</span>
<span className="text-[11px] text-muted-foreground">
{agent.modelDisplay}
</span>
</button>
);
}

14
src/pages/Chat/ChatToolbar.tsx
View File

@@ -3,10 +3,12 @@
* Session selector, new session, refresh, and thinking toggle.
* Rendered in the Header when on the Chat page.
*/
import { RefreshCw, Brain } from 'lucide-react';
import { useMemo } from 'react';
import { RefreshCw, Brain, Bot } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { useChatStore } from '@/stores/chat';
import { useAgentsStore } from '@/stores/agents';
import { cn } from '@/lib/utils';
import { useTranslation } from 'react-i18next';
@@ -15,10 +17,20 @@ export function ChatToolbar() {
const loading = useChatStore((s) => s.loading);
const showThinking = useChatStore((s) => s.showThinking);
const toggleThinking = useChatStore((s) => s.toggleThinking);
const currentAgentId = useChatStore((s) => s.currentAgentId);
const agents = useAgentsStore((s) => s.agents);
const { t } = useTranslation('chat');
const currentAgentName = useMemo(
() => agents.find((agent) => agent.id === currentAgentId)?.name ?? currentAgentId,
[agents, currentAgentId],
);
return (
<div className="flex items-center gap-2">
<div className="hidden sm:flex items-center gap-1.5 rounded-full border border-black/10 bg-white/70 px-3 py-1.5 text-[12px] font-medium text-foreground/80 dark:border-white/10 dark:bg-white/5">
<Bot className="h-3.5 w-3.5 text-primary" />
<span>{t('toolbar.currentAgent', { agent: currentAgentName })}</span>
</div>
{/* Refresh */}
<Tooltip>
<TooltipTrigger asChild>

6
src/pages/Chat/index.tsx
View File

@@ -8,6 +8,7 @@ import { useEffect, useRef, useState } from 'react';
import { AlertCircle, Loader2, Sparkles } from 'lucide-react';
import { useChatStore, type RawMessage } from '@/stores/chat';
import { useGatewayStore } from '@/stores/gateway';
import { useAgentsStore } from '@/stores/agents';
import { LoadingSpinner } from '@/components/common/LoadingSpinner';
import { ChatMessage } from './ChatMessage';
import { ChatInput } from './ChatInput';
@@ -32,6 +33,7 @@ export function Chat() {
const sendMessage = useChatStore((s) => s.sendMessage);
const abortRun = useChatStore((s) => s.abortRun);
const clearError = useChatStore((s) => s.clearError);
const fetchAgents = useAgentsStore((s) => s.fetchAgents);
const cleanupEmptySession = useChatStore((s) => s.cleanupEmptySession);
@@ -51,6 +53,10 @@ export function Chat() {
};
}, [cleanupEmptySession]);
useEffect(() => {
void fetchAgents();
}, [fetchAgents]);
// Auto-scroll on new messages, streaming, or activity changes
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });