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

2026-03-11 12:03:30 +08:00
parent 34dcb48e27
commit 95e090ecb5
28 changed files with 887 additions and 148 deletions
--- a/src/pages/Agents/index.tsx
+++ b/src/pages/Agents/index.tsx
@@ -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>
            )}
--- a/src/pages/Chat/ChatInput.tsx
+++ b/src/pages/Chat/ChatInput.tsx
@@ -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>
+  );
+}
--- a/src/pages/Chat/ChatToolbar.tsx
+++ b/src/pages/Chat/ChatToolbar.tsx
@@ -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>
--- a/src/pages/Chat/index.tsx
+++ b/src/pages/Chat/index.tsx
@@ -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' });