From 8edee91d26b9f4029fdbdc2ebedebb496cf15dcf Mon Sep 17 00:00:00 2001
From: Nexus Dev <nexus@local>
Date: Wed, 1 Apr 2026 18:35:07 +0000
Subject: [PATCH] feat(22-05): wire ChatPanel and ChatInput with all Phase 22
 features

- ChatPanel integrates useStreamingChat, ChatAgentSelector, ChatStopButton
- Agent routing via resolveAgentFromContent for slash commands and @mentions
- handleEdit: editMessage + truncateMessagesAfter + re-stream with edited content
- handleRetry: finds actual prior user message, truncates from user message onward, re-streams
- Build agentMap from agents for message identity bars
- ChatInput: slash command popover (triggered by / at start of input)
- ChatInput: @mention popover (triggered by @word pattern)
- Input disabled during streaming with 'Waiting for response...' placeholder
- Stop button shown conditionally when isStreaming
- Agent selector in header for per-conversation agent switching
- Remove ScrollArea wrapper (replaced by virtualizer's own scroll in ChatMessageList)
---
 ui/src/components/ChatInput.tsx | 140 ++++++++++++++++++++++-----
 ui/src/components/ChatPanel.tsx | 162 +++++++++++++++++++++++++++-----
 2 files changed, 255 insertions(+), 47 deletions(-)

diff --git a/ui/src/components/ChatInput.tsx b/ui/src/components/ChatInput.tsx
index e0a13314..be2532e5 100644
--- a/ui/src/components/ChatInput.tsx
+++ b/ui/src/components/ChatInput.tsx
@@ -1,18 +1,40 @@
 import { useEffect, useRef, useState } from "react";
 import { Send, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { ChatSlashCommandPopover } from "./ChatSlashCommandPopover";
+import { ChatMentionPopover } from "./ChatMentionPopover";
 import { cn } from "../lib/utils";
+import type { Agent } from "@paperclipai/shared";
 
 interface ChatInputProps {
   onSend: (content: string) => void;
   isSubmitting?: boolean;
   disabled?: boolean;
+  placeholder?: string;
+  // Popover support
+  agents?: Agent[];
+  agentsLoading?: boolean;
 }
 
-export function ChatInput({ onSend, isSubmitting = false, disabled = false }: ChatInputProps) {
+export function ChatInput({
+  onSend,
+  isSubmitting = false,
+  disabled = false,
+  placeholder = "Message your agent...",
+  agents = [],
+  agentsLoading = false,
+}: ChatInputProps) {
   const [value, setValue] = useState("");
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
+  // Slash command popover state
+  const [slashOpen, setSlashOpen] = useState(false);
+  const [slashQuery, setSlashQuery] = useState("");
+
+  // @mention popover state
+  const [mentionOpen, setMentionOpen] = useState(false);
+  const [mentionQuery, setMentionQuery] = useState("");
+
   // Auto-resize fallback for browsers without field-sizing: content support
   useEffect(() => {
     const el = textareaRef.current;
@@ -26,27 +48,96 @@ export function ChatInput({ onSend, isSubmitting = false, disabled = false }: Ch
     if (!trimmed || isSubmitting || disabled) return;
     onSend(trimmed);
     setValue("");
+    setSlashOpen(false);
+    setMentionOpen(false);
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
     }
   }
 
+  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+    const val = e.target.value;
+    setValue(val);
+
+    // Slash command: opens when / is the first character
+    if (val.startsWith("/")) {
+      setSlashOpen(true);
+      setSlashQuery(val);
+    } else {
+      setSlashOpen(false);
+    }
+
+    // @mention: opens when @ appears with a word boundary before it
+    const mentionMatch = val.match(/@(\w*)$/);
+    if (mentionMatch) {
+      setMentionOpen(true);
+      setMentionQuery(mentionMatch[1] ?? "");
+    } else {
+      setMentionOpen(false);
+    }
+  }
+
+  function handleSlashSelect(command: string) {
+    setValue(command + " ");
+    setSlashOpen(false);
+    textareaRef.current?.focus();
+  }
+
+  function handleMentionSelect(agentName: string) {
+    // Replace the @query with @agentName
+    const val = value.replace(/@\w*$/, `@${agentName} `);
+    setValue(val);
+    setMentionOpen(false);
+    textareaRef.current?.focus();
+  }
+
   function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
-    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
-      e.preventDefault();
-      submit();
-    } else if (e.key === "Escape") {
+    if (e.key === "Escape") {
+      if (slashOpen) {
+        setSlashOpen(false);
+        return;
+      }
+      if (mentionOpen) {
+        setMentionOpen(false);
+        return;
+      }
       e.preventDefault();
       setValue("");
       if (textareaRef.current) {
         textareaRef.current.style.height = "auto";
       }
+      return;
+    }
+    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      submit();
     }
     // Shift+Enter falls through to default behavior (inserts newline)
   }
 
   const isEmpty = value.trim().length === 0;
 
+  const textarea = (
+    <textarea
+      ref={textareaRef}
+      value={value}
+      onChange={handleChange}
+      onKeyDown={handleKeyDown}
+      placeholder={placeholder}
+      rows={1}
+      disabled={disabled}
+      className={cn(
+        "flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm",
+        "placeholder:text-muted-foreground",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "resize-none min-h-[40px] max-h-[160px] overflow-y-auto",
+        // field-sizing: content for modern browsers (Chrome 123+, Firefox 129+)
+        "[field-sizing:content]",
+      )}
+    />
+  );
+
   return (
     <form
       onSubmit={(e) => {
@@ -55,24 +146,27 @@ export function ChatInput({ onSend, isSubmitting = false, disabled = false }: Ch
       }}
       className="flex items-end gap-2"
     >
-      <textarea
-        ref={textareaRef}
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder="Message your agent..."
-        rows={1}
-        disabled={disabled}
-        className={cn(
-          "flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm",
-          "placeholder:text-muted-foreground",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          "resize-none min-h-[40px] max-h-[160px] overflow-y-auto",
-          // field-sizing: content for modern browsers (Chrome 123+, Firefox 129+)
-          "[field-sizing:content]",
-        )}
-      />
+      {/* Slash command takes priority over mention popover */}
+      <div className="flex-1 relative">
+        <ChatSlashCommandPopover
+          open={slashOpen && !mentionOpen}
+          onOpenChange={setSlashOpen}
+          onSelect={handleSlashSelect}
+          query={slashQuery}
+        >
+          <ChatMentionPopover
+            open={mentionOpen && !slashOpen}
+            onOpenChange={setMentionOpen}
+            onSelect={handleMentionSelect}
+            query={mentionQuery}
+            agents={agents}
+            isLoading={agentsLoading}
+          >
+            {textarea}
+          </ChatMentionPopover>
+        </ChatSlashCommandPopover>
+      </div>
+
       <Button
         type="submit"
         variant="ghost"
diff --git a/ui/src/components/ChatPanel.tsx b/ui/src/components/ChatPanel.tsx
index aa7027d8..60a3fd0a 100644
--- a/ui/src/components/ChatPanel.tsx
+++ b/ui/src/components/ChatPanel.tsx
@@ -1,65 +1,158 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { X } from "lucide-react";
-import { useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useChatPanel } from "../context/ChatPanelContext";
 import { useCompany } from "../context/CompanyContext";
 import { ChatInput } from "./ChatInput";
 import { ChatConversationList } from "./ChatConversationList";
 import { ChatMessageList } from "./ChatMessageList";
+import { ChatAgentSelector } from "./ChatAgentSelector";
+import { ChatStopButton } from "./ChatStopButton";
 import { Button } from "@/components/ui/button";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import { chatApi } from "../api/chat";
+import { agentsApi } from "../api/agents";
 import { useChatMessages } from "../hooks/useChatMessages";
+import { useStreamingChat } from "../hooks/useStreamingChat";
+import { resolveAgentFromContent } from "../lib/slash-commands";
+import type { AgentRole } from "@paperclipai/shared";
 
 export function ChatPanel() {
   const { chatOpen, setChatOpen, activeConversationId, setActiveConversationId } = useChatPanel();
   const { selectedCompanyId } = useCompany();
   const queryClient = useQueryClient();
   const [isSending, setIsSending] = useState(false);
+  const [activeAgentId, setActiveAgentId] = useState<string | null>(null);
 
-  const { sendMutation } = useChatMessages(activeConversationId);
+  const { messages } = useChatMessages(activeConversationId);
+  const { streamingContent, isStreaming, startStream, stop } = useStreamingChat(activeConversationId);
+
+  // Load agents for routing and identity
+  const { data: agents = [], isLoading: agentsLoading } = useQuery({
+    queryKey: ["agents", selectedCompanyId],
+    queryFn: () => agentsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  // Build agent map for message identity bars
+  const agentMap = useMemo(() => {
+    const map = new Map<string, { name: string; icon: string | null; role: AgentRole | null }>();
+    for (const a of agents) {
+      map.set(a.id, { name: a.name, icon: a.icon, role: (a.role as AgentRole) ?? null });
+    }
+    return map;
+  }, [agents]);
+
+  // Resolve streaming agent identity
+  const streamingAgent = activeAgentId ? agentMap.get(activeAgentId) : undefined;
 
   const handleSend = async (content: string) => {
     if (!selectedCompanyId) return;
 
+    // Resolve agent from slash command or @mention
+    const resolvedAgentId = resolveAgentFromContent(content, agents, activeAgentId);
+
     setIsSending(true);
     try {
       if (!activeConversationId) {
-        // Path 1: No active conversation -- create one first via direct API call
-        const newConvo = await chatApi.createConversation(selectedCompanyId, {});
+        // Path 1: No active conversation -- create one, post user message, then stream
+        const newConvo = await chatApi.createConversation(selectedCompanyId, {
+          agentId: resolvedAgentId ?? undefined,
+        });
         setActiveConversationId(newConvo.id);
         await chatApi.postMessage(newConvo.id, { role: "user", content });
         queryClient.invalidateQueries({ queryKey: ["chat"] });
+        // Note: streaming starts on next render when activeConversationId is set
+        // For now, the echo stream will be triggered by the new conversation
       } else {
-        // Path 2: Active conversation -- use hook mutation for automatic invalidation
-        await sendMutation.mutateAsync({ content });
+        // Path 2: Active conversation -- post user message then stream
+        await chatApi.postMessage(activeConversationId, { role: "user", content });
+        queryClient.invalidateQueries({ queryKey: ["chat", "messages", activeConversationId] });
+        startStream(content, resolvedAgentId ?? undefined);
       }
     } finally {
       setIsSending(false);
     }
   };
 
+  // Edit handler: update message, truncate after it, re-stream
+  const handleEdit = async (messageId: string, newContent: string) => {
+    if (!activeConversationId) return;
+    await chatApi.editMessage(activeConversationId, messageId, newContent);
+    await chatApi.truncateMessagesAfter(activeConversationId, messageId);
+    queryClient.invalidateQueries({ queryKey: ["chat", "messages", activeConversationId] });
+    startStream(newContent, activeAgentId ?? undefined);
+  };
+
+  // Retry handler: find the last user message before the assistant message,
+  // delete the assistant message and everything after it, then re-stream
+  // with the actual prior user message content (not hardcoded text).
+  const handleRetry = async (assistantMessageId: string) => {
+    if (!activeConversationId || !messages) return;
+
+    // Find the assistant message index in the messages array
+    const assistantIdx = messages.findIndex((m) => m.id === assistantMessageId);
+    if (assistantIdx < 0) return;
+
+    // Find the last user message before this assistant message
+    let lastUserContent = "";
+    for (let i = assistantIdx - 1; i >= 0; i--) {
+      if (messages[i]!.role === "user") {
+        lastUserContent = messages[i]!.content;
+        break;
+      }
+    }
+    if (!lastUserContent) return; // No prior user message found; nothing to retry
+
+    // Truncate messages after the user message (this deletes the assistant msg + everything after)
+    // First, find the user message to truncate after
+    let userMessageId = "";
+    for (let i = assistantIdx - 1; i >= 0; i--) {
+      if (messages[i]!.role === "user") {
+        userMessageId = messages[i]!.id;
+        break;
+      }
+    }
+    if (!userMessageId) return;
+
+    // Delete everything after the user message (includes the assistant message itself)
+    await chatApi.truncateMessagesAfter(activeConversationId, userMessageId);
+    queryClient.invalidateQueries({ queryKey: ["chat", "messages", activeConversationId] });
+
+    // Re-stream using the actual user message content
+    startStream(lastUserContent, activeAgentId ?? undefined);
+  };
+
   return (
     <aside
       aria-label="Chat"
       className="hidden md:flex overflow-hidden transition-[width] duration-100 ease-out flex-shrink-0 border-l border-border flex-col bg-background"
       style={{ width: chatOpen ? 380 : 0 }}
     >
-      {/* Header */}
+      {/* Header with agent selector */}
       <div className="flex items-center justify-between border-b border-border px-4 py-2 min-w-[380px]">
         <span className="text-sm font-medium">Chat</span>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-6 w-6"
-          onClick={() => setChatOpen(false)}
-          aria-label="Close chat"
-        >
-          <X className="h-4 w-4" />
-        </Button>
+        <div className="flex items-center gap-2">
+          {selectedCompanyId && (
+            <ChatAgentSelector
+              companyId={selectedCompanyId}
+              conversationId={activeConversationId}
+              agentId={activeAgentId}
+              onAgentChange={setActiveAgentId}
+            />
+          )}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            onClick={() => setChatOpen(false)}
+            aria-label="Close chat"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
       </div>
 
-      {/* Two-column layout: conversation list (left) + thread (right) */}
+      {/* Two-column layout */}
       <div className="flex flex-1 min-h-0 min-w-[380px]">
         {/* Left column: conversation list */}
         <div className="w-[160px] flex-shrink-0 border-r border-border bg-card overflow-hidden">
@@ -72,11 +165,22 @@ export function ChatPanel() {
           )}
         </div>
 
-        {/* Right column: message thread + input */}
+        {/* Right column: message thread + stop button + input */}
         <div className="flex flex-1 flex-col min-w-0">
-          <ScrollArea className="flex-1 p-0">
+          {/* Message area */}
+          <div className="flex-1 overflow-hidden">
             {activeConversationId ? (
-              <ChatMessageList conversationId={activeConversationId} />
+              <ChatMessageList
+                conversationId={activeConversationId}
+                streamingContent={streamingContent}
+                isStreaming={isStreaming}
+                streamingAgentName={streamingAgent?.name ?? null}
+                streamingAgentIcon={streamingAgent?.icon ?? null}
+                streamingAgentRole={streamingAgent?.role ?? null}
+                onEdit={handleEdit}
+                onRetry={handleRetry}
+                agentMap={agentMap}
+              />
             ) : (
               <div className="flex items-center justify-center h-full p-3">
                 <p className="text-sm text-muted-foreground text-center">
@@ -84,11 +188,21 @@ export function ChatPanel() {
                 </p>
               </div>
             )}
-          </ScrollArea>
+          </div>
+
+          {/* Stop button (shown during streaming) */}
+          {isStreaming && <ChatStopButton onStop={stop} />}
 
           {/* Input area */}
           <div className="border-t border-border px-3 py-2">
-            <ChatInput onSend={handleSend} isSubmitting={isSending} />
+            <ChatInput
+              onSend={handleSend}
+              isSubmitting={isSending}
+              disabled={isStreaming}
+              placeholder={isStreaming ? "Waiting for response..." : "Message your agent..."}
+              agents={agents}
+              agentsLoading={agentsLoading}
+            />
           </div>
         </div>
       </div>