@alpaca-editor/core 1.0.4064 → 1.0.4066

package/src/editor/ai/AgentTerminal.tsx

@@ -11,6 +11,8 @@ import {
   Type,
   Plus,
   MessageSquare,
+  Wand2,
+  Square,
 } from "lucide-react";
 import { DancingDots } from "./DancingDots";
 import {
@@ -33,6 +35,12 @@ import { AgentCostDisplay } from "./AgentCostDisplay";
 import { Message } from "./AiTerminal";
 import { getComponentById } from "../componentTreeHelper";
 import { Comment } from "../../types";
+import { AiProfile, loadAiProfiles } from "../services/aiService";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
 
 // Simple user message component
 const UserMessage = ({ message }: { message: AgentChatMessage }) => {
@@ -168,7 +176,13 @@ const convertAgentMessagesToAiFormat = (
 //   agentStub: Agent;
 // }
 
-export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
+export function AgentTerminal({
+  agentStub,
+  initialMetadata,
+}: {
+  agentStub: Agent;
+  initialMetadata?: AgentMetadata;
+}) {
   const editContext = useEditContext();
   const [agent, setAgent] = useState<AgentDetails | undefined>(undefined);
   const [messages, setMessages] = useState<AgentChatMessage[]>([]);
@@ -180,6 +194,37 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
     null,
   );
   const [isWaitingForResponse, setIsWaitingForResponse] = useState(false);
+  const isWaitingRef = useRef<boolean>(false);
+  useEffect(() => {
+    isWaitingRef.current = isWaitingForResponse;
+  }, [isWaitingForResponse]);
+
+  // Dots visibility controlled by 1s idle timer since last incremental update
+  const [showDots, setShowDots] = useState(false);
+  const dotsTimeoutRef = useRef<any>(null);
+  const hasActiveStreaming = useCallback(() => {
+    const current = messagesRef.current || [];
+    return current.some((m) => !m.isCompleted && m.messageType === "streaming");
+  }, []);
+  const resetDotsTimer = useCallback(() => {
+    if (dotsTimeoutRef.current) {
+      clearTimeout(dotsTimeoutRef.current);
+      dotsTimeoutRef.current = null;
+    }
+    const waiting = isWaitingRef.current;
+    const streaming = hasActiveStreaming();
+    if (!waiting && !streaming) {
+      setShowDots(false);
+      return;
+    }
+    setShowDots(false);
+    dotsTimeoutRef.current = setTimeout(() => {
+      // Re-check conditions after 1s of inactivity
+      const stillWaiting = isWaitingRef.current;
+      const stillStreaming = hasActiveStreaming();
+      setShowDots(stillWaiting || stillStreaming);
+    }, 1000);
+  }, [hasActiveStreaming]);
   const [resolvedPageName, setResolvedPageName] = useState<string | undefined>(
     undefined,
   );
@@ -198,6 +243,14 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
     return [];
   });
   const [currentHistoryIndex, setCurrentHistoryIndex] = useState<number>(-1);
+  const [showPredefined, setShowPredefined] = useState(false);
+  const [profiles, setProfiles] = useState<AiProfile[]>([]);
+  const [activeProfile, setActiveProfile] = useState<AiProfile | undefined>(
+    undefined,
+  );
+  const [selectedModelId, setSelectedModelId] = useState<string | undefined>(
+    undefined,
+  );
 
   useEffect(() => {
     localStorage.setItem(
@@ -206,6 +259,21 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
     );
   }, [promptHistory]);
 
+  // Clear idle timer on unmount
+  useEffect(() => {
+    return () => {
+      if (dotsTimeoutRef.current) {
+        clearTimeout(dotsTimeoutRef.current);
+        dotsTimeoutRef.current = null;
+      }
+    };
+  }, []);
+
+  // Whenever waiting state changes, restart idle timer logic
+  useEffect(() => {
+    resetDotsTimer();
+  }, [isWaitingForResponse, resetDotsTimer]);
+
   useEffect(() => {
     // Keep messagesRef synchronized with messages state
     messagesRef.current = messages;
@@ -303,6 +371,8 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
 
       // Clear waiting state when first content chunk arrives
       setIsWaitingForResponse(false);
+      // Any content chunk is an incremental update -> reset idle timer
+      resetDotsTimer();
 
       // Always call setMessages and handle all logic in the callback with latest messages
       setMessages((prev) => {
@@ -471,6 +541,8 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
           messagesRef.current = updated;
           return updated;
         });
+        // Tool call activity counts as activity; keep dots hidden for 1s
+        resetDotsTimer();
       }
     },
     [createNewStreamMessage],
@@ -572,8 +644,10 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
         messagesRef.current = updated;
         return updated;
       });
+      // Tool result activity; reset idle timer
+      resetDotsTimer();
     },
-    [],
+    [resetDotsTimer],
   );
 
   // Connect to agent stream for real-time updates
@@ -625,8 +699,8 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
 
                 // Mark the specific message as completed by messageId
                 if (completedMessageId) {
-                  setMessages((prev) =>
-                    prev.map((msg) => {
+                  setMessages((prev) => {
+                    const updated = prev.map((msg) => {
                       if (msg.id === completedMessageId) {
                         const updatedMessage = {
                           ...msg,
@@ -669,15 +743,17 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
                         return updatedMessage;
                       }
                       return msg;
-                    }),
-                  );
+                    });
+                    messagesRef.current = updated;
+                    return updated;
+                  });
                 } else {
                   // Fallback: Mark any streaming messages as completed (old behavior)
                   console.warn(
                     "⚠️ No messageId in completed event, falling back to marking all streaming messages as completed",
                   );
-                  setMessages((prev) =>
-                    prev.map((msg) =>
+                  setMessages((prev) => {
+                    const updated = prev.map((msg) =>
                       !msg.isCompleted && msg.messageType === "streaming"
                         ? {
                             ...msg,
@@ -685,10 +761,16 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
                             messageType: "completed",
                           }
                         : msg,
-                    ),
-                  );
+                    );
+                    messagesRef.current = updated;
+                    return updated;
+                  });
                 }
+                // Ensure waiting state is cleared when stream completes
+                setIsWaitingForResponse(false);
                 shouldCreateNewMessage.current = false;
+                // Streaming finished; update indicator
+                resetDotsTimer();
                 break;
 
               case "error":
@@ -696,6 +778,8 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
                 setError(message.error || "Stream error occurred");
                 setIsWaitingForResponse(false);
                 shouldCreateNewMessage.current = false;
+                // Error ends streaming; update indicator
+                resetDotsTimer();
                 break;
 
               default:
@@ -720,6 +804,8 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
         }
       } finally {
         setIsConnecting(false);
+        // Guard: clear waiting state if connection finished without content
+        setIsWaitingForResponse(false);
       }
     },
     [agent?.id, handleContentChunk, handleToolCall, handleToolResult],
@@ -762,35 +848,49 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
         setIsLoading(false);
 
         // Initialize local context for a brand-new agent (not yet persisted)
-        const item = editContext?.currentItemDescriptor;
-        const initialLocalContext: AgentMetadata | null = item
-          ? {
-              additionalData: {
-                context: {
-                  pages: [
-                    {
-                      id: item.id,
-                      language: item.language,
-                      version: item.version,
-                      name: editContext?.contentEditorItem?.name,
-                    },
-                  ],
-                  componentIds: editContext?.selection?.length
-                    ? editContext.selection
-                    : undefined,
-                  field:
-                    editContext?.focusedField &&
-                    editContext.currentItemDescriptor
-                      ? {
-                          fieldId: editContext.focusedField.fieldId,
-                          itemId: editContext.focusedField.item.id,
-                        }
+        // Prefer explicitly provided metadata; otherwise seed with page, selected componentIds, and focused field if available
+        if (initialMetadata) {
+          setAgentMetadata(initialMetadata);
+          // If an initial prompt is provided via metadata, seed the input once
+          try {
+            const maybePrompt = (initialMetadata as any)?.additionalData
+              ?.initialPrompt;
+            if (typeof maybePrompt === "string" && maybePrompt.trim()) {
+              setPrompt(maybePrompt);
+            }
+          } catch {}
+        } else {
+          const item = editContext?.currentItemDescriptor;
+          const initialLocalContext: AgentMetadata | null = item
+            ? {
+                additionalData: {
+                  context: {
+                    pages: [
+                      {
+                        id: item.id,
+                        language: item.language,
+                        version: item.version,
+                        name: editContext?.contentEditorItem?.name,
+                      },
+                    ],
+                    componentIds: editContext?.selection?.length
+                      ? editContext.selection
                       : undefined,
+                    field:
+                      editContext?.focusedField?.fieldId &&
+                      (editContext.focusedField as any)?.item?.id
+                        ? {
+                            fieldId: editContext.focusedField.fieldId,
+                            itemId: (editContext.focusedField as any).item.id,
+                            name: (editContext.focusedField as any).fieldName,
+                          }
+                        : undefined,
+                  },
                 },
-              },
-            }
-          : null;
-        if (initialLocalContext) setAgentMetadata(initialLocalContext);
+              }
+            : null;
+          if (initialLocalContext) setAgentMetadata(initialLocalContext);
+        }
         return;
       }
 
@@ -867,6 +967,72 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
     loadAgent();
   }, [loadAgent]);
 
+  // Focus prompt when requested globally (from AI command)
+  useEffect(() => {
+    const focusHandler = () => {
+      try {
+        if (textareaRef.current) {
+          textareaRef.current.focus();
+          // Move caret to end
+          const value = textareaRef.current.value || "";
+          textareaRef.current.selectionStart = value.length;
+          textareaRef.current.selectionEnd = value.length;
+        }
+      } catch {}
+    };
+    window.addEventListener(
+      "editor:focusAgentPrompt",
+      focusHandler as EventListener,
+    );
+    return () =>
+      window.removeEventListener(
+        "editor:focusAgentPrompt",
+        focusHandler as EventListener,
+      );
+  }, []);
+
+  // Load AI profiles for predefined prompts
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        if (!editContext?.currentItemDescriptor) return;
+        const fetched = await loadAiProfiles(editContext.currentItemDescriptor);
+        if (cancelled) return;
+        setProfiles(fetched || []);
+      } catch (e) {
+        console.error("Failed to load AI profiles", e);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [editContext?.currentItemDescriptor]);
+
+  // Select active profile based on agent.profileId or default to first
+  useEffect(() => {
+    if (!profiles || profiles.length === 0) return;
+    const candidate = agent?.profileId
+      ? (profiles.find((p) => p.id === (agent?.profileId as any)) ??
+        profiles[0])
+      : profiles[0];
+    if (candidate && (!activeProfile || activeProfile.id !== candidate.id)) {
+      setActiveProfile(candidate);
+    }
+  }, [profiles, agent?.profileId]);
+
+  // Update selected model when the active profile changes
+  useEffect(() => {
+    if (!activeProfile) return;
+    const agentModelId = agent?.model;
+    const availableModelIds = (activeProfile.models || []).map((m) => m.id);
+    const nextModelId =
+      agentModelId && availableModelIds.includes(agentModelId)
+        ? agentModelId
+        : activeProfile.defaultModelId || activeProfile.models?.[0]?.id;
+    setSelectedModelId(nextModelId || undefined);
+  }, [activeProfile?.id]);
+
   // Cleanup stream connection when component unmounts or agent changes
   useEffect(() => {
     return () => {
@@ -935,8 +1101,9 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
         agentId: agent.id,
         message: prompt.trim(),
         sessionId: editContext.sessionId,
-        profileId: "default", // TODO: Get from context or settings
-        profile: "default",
+        profileId: activeProfile?.id || "default",
+        profile: activeProfile?.name || "default",
+        model: selectedModelId,
         itemid: editContext.currentItemDescriptor?.id || "",
         language: editContext.currentItemDescriptor?.language || "en",
         version: editContext.currentItemDescriptor?.version || 1,
@@ -951,6 +1118,8 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
 
       // Set waiting state to show dancing dots immediately
       setIsWaitingForResponse(true);
+      // Start idle timer; dots appear only if no chunks for >1s
+      resetDotsTimer();
 
       // Re-enable auto-scroll when user submits a new message
       setShouldAutoScroll(true);
@@ -1031,6 +1200,86 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
     }
   };
 
+  // Send a message programmatically (used by quick-action buttons)
+  const sendQuickMessage = async (text: string) => {
+    if (!text.trim() || isSubmitting || !editContext) return;
+
+    try {
+      setIsSubmitting(true);
+      setError(null);
+      const agentId = agent?.id;
+      if (!agentId) return;
+
+      const userMessage: AgentChatMessage = {
+        id: `user-${Date.now()}`,
+        agentId,
+        messageIndex: messages.length,
+        role: "user",
+        content: text.trim(),
+        name: "user",
+        messageType: "user",
+        isCompleted: true,
+        model: "",
+        tokensUsed: 0,
+        inputTokens: 0,
+        outputTokens: 0,
+        cachedInputTokens: 0,
+        inputTokenCost: 0,
+        outputTokenCost: 0,
+        cachedInputTokenCost: 0,
+        totalCost: 0,
+        currency: "USD",
+        createdDate: new Date().toISOString(),
+      };
+
+      setMessages((prev) => [...prev, userMessage]);
+
+      const metaCtx = (agentMetadata as any)?.additionalData?.context as
+        | { componentIds?: string[] }
+        | undefined;
+      const selectionFromCtx = metaCtx?.componentIds?.length
+        ? metaCtx.componentIds
+        : undefined;
+      const effectiveSelection = selectionFromCtx?.length
+        ? selectionFromCtx
+        : editContext.selection && editContext.selection.length > 0
+          ? editContext.selection
+          : undefined;
+
+      const request: StartAgentRequest = {
+        agentId: agent.id,
+        message: text.trim(),
+        sessionId: editContext.sessionId,
+        profileId: activeProfile?.id || "default",
+        profile: activeProfile?.name || "default",
+        model: selectedModelId,
+        itemid: editContext.currentItemDescriptor?.id || "",
+        language: editContext.currentItemDescriptor?.language || "en",
+        version: editContext.currentItemDescriptor?.version || 1,
+        selection: effectiveSelection,
+        selectedText: editContext.selectedRange?.text || undefined,
+        addSelectedComponents: !!effectiveSelection?.length,
+        addContextContent: false,
+        addAllContent: false,
+      };
+
+      setIsWaitingForResponse(true);
+      resetDotsTimer();
+      setShouldAutoScroll(true);
+
+      await startAgent(request);
+
+      await connectToStream();
+    } catch (err) {
+      console.error("Failed to submit quick message:", err);
+      setError("Failed to submit prompt");
+      setIsWaitingForResponse(false);
+      setMessages((prev) => prev.slice(0, -1));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
   // Context info bar helpers - must be declared before any early returns to keep hooks order stable
   const removeContextKey = useCallback(
     async (
@@ -1336,6 +1585,50 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
     editContext?.itemsRepository,
   ]);
 
+  // Stop current execution/stream safely
+  const handleStop = useCallback(() => {
+    try {
+      setIsWaitingForResponse(false);
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+        abortControllerRef.current = null;
+      }
+      setIsConnecting(false);
+      setIsSubmitting(false);
+      // Mark any in-progress streaming messages as completed in UI
+      setMessages((prev) => {
+        const updated = prev.map((msg) =>
+          !msg.isCompleted && msg.messageType === "streaming"
+            ? { ...msg, isCompleted: true, messageType: "completed" as const }
+            : msg,
+        );
+        messagesRef.current = updated;
+        return updated;
+      });
+      // Update indicator state
+      resetDotsTimer();
+    } catch (e) {
+      console.error("Failed to stop agent execution", e);
+    }
+  }, [resetDotsTimer]);
+
+  // Ensure waiting state resets when no active work remains
+  useEffect(() => {
+    if (isSubmitting || isConnecting) return;
+    const streaming = hasActiveStreaming();
+    if (!streaming && isWaitingForResponse) {
+      setIsWaitingForResponse(false);
+      resetDotsTimer();
+    }
+  }, [
+    isSubmitting,
+    isConnecting,
+    messages,
+    hasActiveStreaming,
+    isWaitingForResponse,
+    resetDotsTimer,
+  ]);
+
   if (isLoading) {
     return (
       <div className="flex h-full items-center justify-center">
@@ -1350,6 +1643,13 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
   // Calculate total token usage for cost display
   const totalTokens = calculateTotalTokens(messages);
 
+  // Determine if the agent is actively executing (submitting, connecting, waiting, or streaming)
+  const isExecuting =
+    isSubmitting ||
+    isConnecting ||
+    isWaitingForResponse ||
+    hasActiveStreaming();
+
   const renderContextInfoBar = () => {
     const ctx = (agentMetadata as any)?.additionalData?.context as
       | {
@@ -1574,35 +1874,34 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
                   finished={!isSubmitting && !isConnecting}
                   editOperations={[]}
                   error={error || undefined}
+                  onQuickAction={(action) => {
+                    const text = (
+                      action.prompt ||
+                      action.value ||
+                      action.label ||
+                      ""
+                    ).trim();
+                    if (!text) return;
+                    // Stop any current execution before sending the next message
+                    if (isExecuting) {
+                      try {
+                        handleStop();
+                      } catch {}
+                    }
+                    sendQuickMessage(text);
+                  }}
                 />
               );
             }
           })}
-
-          {/* Show dancing dots when waiting for response or streaming */}
-          {(isWaitingForResponse ||
-            groupConsecutiveMessages(messages).some(
-              (group) =>
-                group.type === "assistant-group" &&
-                group.messages.some(
-                  (msg) => !msg.isCompleted && msg.messageType === "streaming",
-                ),
-            )) && <DancingDots />}
         </div>
 
+        {/* Show dancing dots only after 1s of inactivity */}
+        {showDots && <DancingDots />}
+
         <div ref={messagesEndRef} />
       </div>
 
-      {/* Cost Display */}
-      {totalTokens.totalCost > 0 && (
-        <div className="border-t border-gray-100 px-4 py-2">
-          <AgentCostDisplay
-            totalTokens={totalTokens}
-            className="flex justify-end"
-          />
-        </div>
-      )}
-
       {/* Context Info Bar */}
       {renderContextInfoBar()}
 
@@ -1624,16 +1923,88 @@ export function AgentTerminal({ agentStub }: { agentStub: Agent }) {
             className="resize-nones min-h-[80px] flex-1 text-xs"
             disabled={isSubmitting}
           />
+        </div>
+        <div className="flex items-stretch justify-between gap-2">
+          {/* Profile/Model selectors below the input */}
+          <div className="mt-2 flex items-center justify-start gap-2">
+            {profiles?.length > 0 && (
+              <select
+                className="h-5 rounded border px-1.5 text-[10px] text-gray-500"
+                value={activeProfile?.id || ""}
+                onChange={(e) => {
+                  const p = profiles.find((x) => x.id === e.target.value);
+                  if (p) setActiveProfile(p);
+                }}
+                title="Profile"
+                aria-label="Profile"
+              >
+                {profiles.map((p) => (
+                  <option key={p.id} value={p.id}>
+                    {p.name}
+                  </option>
+                ))}
+              </select>
+            )}
+            {activeProfile?.models?.length ? (
+              <select
+                className="h-5 rounded border px-1.5 text-[10px] text-gray-500"
+                value={selectedModelId || ""}
+                onChange={(e) => setSelectedModelId(e.target.value)}
+                title="Model"
+                aria-label="Model"
+              >
+                {activeProfile.models.map((m) => (
+                  <option key={m.id} value={m.id}>
+                    {m.name}
+                  </option>
+                ))}
+              </select>
+            ) : null}
+            {activeProfile?.prompts?.length ? (
+              <Popover open={showPredefined} onOpenChange={setShowPredefined}>
+                <PopoverTrigger asChild>
+                  <button
+                    className="rounded p-1 hover:bg-gray-100"
+                    onClick={() => {}}
+                    title="Predefined prompts"
+                    aria-label="Predefined prompts"
+                  >
+                    <Wand2 className="h-3 w-3" strokeWidth={1} />
+                  </button>
+                </PopoverTrigger>
+                <PopoverContent className="w-64 p-0" align="start">
+                  <div className="max-h-56 overflow-y-auto p-2">
+                    {activeProfile.prompts.map((p, index) => (
+                      <div
+                        key={index}
+                        className="cursor-pointer rounded p-1.5 text-xs text-gray-700 hover:bg-gray-100"
+                        onClick={() => {
+                          setPrompt(p.prompt);
+                          setShowPredefined(false);
+                          if (textareaRef.current) textareaRef.current.focus();
+                        }}
+                      >
+                        {p.title}
+                      </div>
+                    ))}
+                  </div>
+                </PopoverContent>
+              </Popover>
+            ) : null}
+            <AgentCostDisplay totalTokens={totalTokens} />
+          </div>
           <Button
-            onClick={handleSubmit}
-            disabled={!prompt.trim() || isSubmitting}
+            onClick={isExecuting ? handleStop : handleSubmit}
+            disabled={!isExecuting && !prompt.trim()}
             size="sm"
-            className="self-end"
+            className="h-5.5 w-5.5 cursor-pointer self-end rounded-full"
+            title={isExecuting ? "Stop" : "Send"}
+            aria-label={isExecuting ? "Stop" : "Send"}
           >
-            {isSubmitting ? (
-              <Loader2 className="h-4 w-4 animate-spin" strokeWidth={1} />
+            {isExecuting ? (
+              <Square className="size-3" strokeWidth={1} />
             ) : (
-              <Send className="h-4 w-4" strokeWidth={1} />
+              <Send className="size-3" strokeWidth={1} />
             )}
           </Button>
         </div>