@alpaca-editor/core 1.0.4065 → 1.0.4066

package/dist/editor/ai/AgentTerminal.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, useRef, useCallback } from "react";
-import { Send, Bot, AlertCircle, Loader2, User, X, FileText, Puzzle, Type, Plus, } from "lucide-react";
+import { Send, Bot, AlertCircle, Loader2, User, X, FileText, Puzzle, Type, Plus, Wand2, Square, } from "lucide-react";
 import { DancingDots } from "./DancingDots";
 import { getAgent, startAgent, connectToAgentStream, updateAgentMetadata, } from "../services/agentService";
 import { useEditContext } from "../client/editContext";
@@ -9,6 +9,8 @@ import { Button } from "../../components/ui/button";
 import { AiResponseMessage } from "./AiResponseMessage";
 import { AgentCostDisplay } from "./AgentCostDisplay";
 import { getComponentById } from "../componentTreeHelper";
+import { loadAiProfiles } from "../services/aiService";
+import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
 // Simple user message component
 const UserMessage = ({ message }) => {
     return (_jsxs("div", { className: "flex gap-3 p-4", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx(User, { className: "h-6 w-6 text-blue-600", strokeWidth: 1 }) }), _jsxs("div", { className: "min-w-0 flex-1 select-text", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium text-gray-900", children: "You" }), message.createdDate && (_jsx("span", { className: "text-xs text-gray-400", children: new Date(message.createdDate).toLocaleTimeString() }))] }), _jsx("div", { className: "prose prose-sm max-w-none text-sm text-gray-700 select-text", children: message.content })] })] }));
@@ -100,7 +102,7 @@ const convertAgentMessagesToAiFormat = (agentMessages) => {
 // interface AgentTerminalProps {
 //   agentStub: Agent;
 // }
-export function AgentTerminal({ agentStub }) {
+export function AgentTerminal({ agentStub, initialMetadata, }) {
     const editContext = useEditContext();
     const [agent, setAgent] = useState(undefined);
     const [messages, setMessages] = useState([]);
@@ -110,6 +112,36 @@ export function AgentTerminal({ agentStub }) {
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [agentMetadata, setAgentMetadata] = useState(null);
     const [isWaitingForResponse, setIsWaitingForResponse] = useState(false);
+    const isWaitingRef = useRef(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(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(undefined);
     const [resolvedComponentName, setResolvedComponentName] = useState(undefined);
     const [resolvedFieldName, setResolvedFieldName] = useState(undefined);
@@ -120,9 +152,26 @@ export function AgentTerminal({ agentStub }) {
         return [];
     });
     const [currentHistoryIndex, setCurrentHistoryIndex] = useState(-1);
+    const [showPredefined, setShowPredefined] = useState(false);
+    const [profiles, setProfiles] = useState([]);
+    const [activeProfile, setActiveProfile] = useState(undefined);
+    const [selectedModelId, setSelectedModelId] = useState(undefined);
     useEffect(() => {
         localStorage.setItem("editor.agent.promptHistory", JSON.stringify(promptHistory));
     }, [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;
@@ -200,6 +249,8 @@ export function AgentTerminal({ agentStub }) {
         }
         // 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) => {
             // Find existing message by messageId in the latest messages
@@ -316,6 +367,8 @@ export function AgentTerminal({ agentStub }) {
                 messagesRef.current = updated;
                 return updated;
             });
+            // Tool call activity counts as activity; keep dots hidden for 1s
+            resetDotsTimer();
         }
     }, [createNewStreamMessage]);
     const handleToolResult = useCallback((message, agentData) => {
@@ -391,7 +444,9 @@ export function AgentTerminal({ agentStub }) {
             messagesRef.current = updated;
             return updated;
         });
-    }, []);
+        // Tool result activity; reset idle timer
+        resetDotsTimer();
+    }, [resetDotsTimer]);
     // Connect to agent stream for real-time updates
     const connectToStream = useCallback(async (agentData) => {
         const currentAgent = agentData || agent;
@@ -424,67 +479,81 @@ export function AgentTerminal({ agentStub }) {
                         console.log("💾 Stream completed for message:", completedMessageId, "messages count:", messages.length);
                         // Mark the specific message as completed by messageId
                         if (completedMessageId) {
-                            setMessages((prev) => prev.map((msg) => {
-                                if (msg.id === completedMessageId) {
-                                    const updatedMessage = {
-                                        ...msg,
-                                        isCompleted: true,
-                                        messageType: "completed",
-                                    };
-                                    // Update token usage data if provided in the completed event
-                                    if (message.data) {
-                                        const data = message.data;
-                                        if (data.numInputTokens !== undefined) {
-                                            updatedMessage.inputTokens = data.numInputTokens;
-                                        }
-                                        if (data.numOutputTokens !== undefined) {
-                                            updatedMessage.outputTokens = data.numOutputTokens;
-                                        }
-                                        if (data.numCachedTokens !== undefined) {
-                                            updatedMessage.cachedInputTokens =
-                                                data.numCachedTokens;
-                                        }
-                                        // Update total tokens used
-                                        updatedMessage.tokensUsed =
-                                            (updatedMessage.inputTokens || 0) +
-                                                (updatedMessage.outputTokens || 0);
-                                        // Handle content that might only be sent in the completed event
-                                        if (data.deltaContent && data.deltaContent.trim()) {
-                                            if (!data.isIncremental) {
-                                                // Non-incremental: replace the entire content
-                                                updatedMessage.content = data.deltaContent;
+                            setMessages((prev) => {
+                                const updated = prev.map((msg) => {
+                                    if (msg.id === completedMessageId) {
+                                        const updatedMessage = {
+                                            ...msg,
+                                            isCompleted: true,
+                                            messageType: "completed",
+                                        };
+                                        // Update token usage data if provided in the completed event
+                                        if (message.data) {
+                                            const data = message.data;
+                                            if (data.numInputTokens !== undefined) {
+                                                updatedMessage.inputTokens = data.numInputTokens;
+                                            }
+                                            if (data.numOutputTokens !== undefined) {
+                                                updatedMessage.outputTokens = data.numOutputTokens;
                                             }
-                                            else {
-                                                // Incremental: append to existing content
-                                                updatedMessage.content =
-                                                    (updatedMessage.content || "") +
-                                                        data.deltaContent;
+                                            if (data.numCachedTokens !== undefined) {
+                                                updatedMessage.cachedInputTokens =
+                                                    data.numCachedTokens;
+                                            }
+                                            // Update total tokens used
+                                            updatedMessage.tokensUsed =
+                                                (updatedMessage.inputTokens || 0) +
+                                                    (updatedMessage.outputTokens || 0);
+                                            // Handle content that might only be sent in the completed event
+                                            if (data.deltaContent && data.deltaContent.trim()) {
+                                                if (!data.isIncremental) {
+                                                    // Non-incremental: replace the entire content
+                                                    updatedMessage.content = data.deltaContent;
+                                                }
+                                                else {
+                                                    // Incremental: append to existing content
+                                                    updatedMessage.content =
+                                                        (updatedMessage.content || "") +
+                                                            data.deltaContent;
+                                                }
                                             }
                                         }
+                                        return updatedMessage;
                                     }
-                                    return updatedMessage;
-                                }
-                                return msg;
-                            }));
+                                    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) => !msg.isCompleted && msg.messageType === "streaming"
-                                ? {
-                                    ...msg,
-                                    isCompleted: true,
-                                    messageType: "completed",
-                                }
-                                : msg));
+                            setMessages((prev) => {
+                                const updated = prev.map((msg) => !msg.isCompleted && msg.messageType === "streaming"
+                                    ? {
+                                        ...msg,
+                                        isCompleted: true,
+                                        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":
                         console.error("❌ Stream error:", message.error);
                         setError(message.error || "Stream error occurred");
                         setIsWaitingForResponse(false);
                         shouldCreateNewMessage.current = false;
+                        // Error ends streaming; update indicator
+                        resetDotsTimer();
                         break;
                     default:
                         console.warn("❓ Unhandled message type:", {
@@ -508,6 +577,8 @@ export function AgentTerminal({ agentStub }) {
         }
         finally {
             setIsConnecting(false);
+            // Guard: clear waiting state if connection finished without content
+            setIsWaitingForResponse(false);
         }
     }, [agent?.id, handleContentChunk, handleToolCall, handleToolResult]);
     // Load agent data and messages
@@ -545,35 +616,51 @@ export function AgentTerminal({ agentStub }) {
                 setError(null);
                 setIsLoading(false);
                 // Initialize local context for a brand-new agent (not yet persisted)
-                const item = editContext?.currentItemDescriptor;
-                const initialLocalContext = 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,
-                                    }
-                                    : undefined,
-                            },
-                        },
+                // 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?.additionalData
+                            ?.initialPrompt;
+                        if (typeof maybePrompt === "string" && maybePrompt.trim()) {
+                            setPrompt(maybePrompt);
+                        }
                     }
-                    : null;
-                if (initialLocalContext)
-                    setAgentMetadata(initialLocalContext);
+                    catch { }
+                }
+                else {
+                    const item = editContext?.currentItemDescriptor;
+                    const initialLocalContext = 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?.item?.id
+                                        ? {
+                                            fieldId: editContext.focusedField.fieldId,
+                                            itemId: editContext.focusedField.item.id,
+                                            name: editContext.focusedField.fieldName,
+                                        }
+                                        : undefined,
+                                },
+                            },
+                        }
+                        : null;
+                    if (initialLocalContext)
+                        setAgentMetadata(initialLocalContext);
+                }
                 return;
             }
             setIsLoading(true);
@@ -639,6 +726,66 @@ export function AgentTerminal({ agentStub }) {
     useEffect(() => {
         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);
+        return () => window.removeEventListener("editor:focusAgentPrompt", focusHandler);
+    }, []);
+    // 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) ??
+                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 () => {
@@ -699,8 +846,9 @@ export function AgentTerminal({ agentStub }) {
                 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,
@@ -713,6 +861,8 @@ export function AgentTerminal({ agentStub }) {
             console.log("Starting agent:", request);
             // 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);
             // No need to create a temporary message - the stream will create messages as needed
@@ -784,6 +934,79 @@ export function AgentTerminal({ agentStub }) {
             }
         }
     };
+    // Send a message programmatically (used by quick-action buttons)
+    const sendQuickMessage = async (text) => {
+        if (!text.trim() || isSubmitting || !editContext)
+            return;
+        try {
+            setIsSubmitting(true);
+            setError(null);
+            const agentId = agent?.id;
+            if (!agentId)
+                return;
+            const userMessage = {
+                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?.additionalData?.context;
+            const selectionFromCtx = metaCtx?.componentIds?.length
+                ? metaCtx.componentIds
+                : undefined;
+            const effectiveSelection = selectionFromCtx?.length
+                ? selectionFromCtx
+                : editContext.selection && editContext.selection.length > 0
+                    ? editContext.selection
+                    : undefined;
+            const request = {
+                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 (key, index) => {
         if (!agent?.id)
@@ -1046,11 +1269,58 @@ export function AgentTerminal({ agentStub }) {
         editContext?.currentItemDescriptor,
         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" }
+                    : 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 (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", strokeWidth: 1 }), "Loading 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?.additionalData?.context;
         // Check if we have context chips or add buttons to show
@@ -1105,26 +1375,48 @@ export function AgentTerminal({ agentStub }) {
         }
         return (_jsx("div", { className: "border-t border-gray-100 px-4 py-2", children: _jsxs("div", { className: "flex items-center justify-between text-xs text-gray-600", children: [_jsx("div", { className: "flex flex-wrap items-center gap-2", children: chips }), _jsxs("div", { className: "ml-2 flex flex-wrap items-center gap-2", children: [canAddPage && (_jsxs(Button, { size: "sm", variant: "outline", onClick: addPagesToContext, children: [_jsx(Plus, { className: "mr-1 h-3 w-3", strokeWidth: 1 }), " Add current item"] })), canAddSelection && (_jsxs(Button, { size: "sm", variant: "outline", onClick: addSelectedComponentsToContext, children: [_jsx(Plus, { className: "mr-1 h-3 w-3", strokeWidth: 1 }), " Add selected components"] }))] })] }) }));
     };
-    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { ref: messagesContainerRef, className: "flex-1 overflow-y-auto", onScroll: handleScroll, children: [error && (_jsx("div", { className: "m-4 rounded-lg border-l-4 border-red-500 bg-red-50 p-3", children: _jsxs("div", { className: "flex items-start", children: [_jsx(AlertCircle, { className: "mt-0.5 h-5 w-5 text-red-400", strokeWidth: 1 }), _jsxs("div", { className: "ml-3", children: [_jsx("p", { className: "text-sm font-medium text-red-800", children: "Error" }), _jsx("p", { className: "mt-1 text-sm text-red-700", children: error })] })] }) })), messages.length === 0 && !error && (_jsx("div", { className: "flex h-full items-center justify-center p-8", children: _jsxs("div", { className: "text-center", children: [_jsx(Bot, { className: "mx-auto mb-4 h-12 w-12 text-gray-400", strokeWidth: 1 }), _jsx("h3", { className: "mb-2 text-lg font-medium text-gray-900", children: "Start a conversation" }), _jsx("p", { className: "mb-4 text-sm text-gray-500", children: "Send a message to begin working with your AI agent." }), _jsx("div", { className: "text-xs text-gray-400", children: "Your agent can help with content editing, research, and automation tasks." })] }) })), _jsxs("div", { className: "space-y-0 divide-y divide-gray-100 select-text", children: [groupConsecutiveMessages(messages).map((group, groupIndex) => {
-                                if (group.type === "user" && group.messages[0]) {
-                                    // Render user message
-                                    return (_jsx(UserMessage, { message: group.messages[0] }, groupIndex));
-                                }
-                                else {
-                                    // Render bundled assistant messages
-                                    // Check if this group contains any streaming message
-                                    const hasStreamingMessage = group.messages.some((msg) => !msg.isCompleted && msg.messageType === "streaming");
-                                    const convertedMessages = convertAgentMessagesToAiFormat(group.messages);
-                                    return (_jsx(AiResponseMessage, { messages: convertedMessages, finished: !isSubmitting && !isConnecting, editOperations: [], error: error || undefined }, groupIndex));
-                                }
-                            }), (isWaitingForResponse ||
-                                groupConsecutiveMessages(messages).some((group) => group.type === "assistant-group" &&
-                                    group.messages.some((msg) => !msg.isCompleted && msg.messageType === "streaming"))) && _jsx(DancingDots, {})] }), _jsx("div", { ref: messagesEndRef })] }), totalTokens.totalCost > 0 && (_jsx("div", { className: "border-t border-gray-100 px-4 py-2", children: _jsx(AgentCostDisplay, { totalTokens: totalTokens, className: "flex justify-end" }) })), renderContextInfoBar(), _jsx("div", { className: "border-t border-gray-200 p-4", children: _jsxs("div", { className: "flex items-stretch gap-2", children: [_jsx(Textarea, { ref: textareaRef, value: prompt, onChange: (e) => {
+    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { ref: messagesContainerRef, className: "flex-1 overflow-y-auto", onScroll: handleScroll, children: [error && (_jsx("div", { className: "m-4 rounded-lg border-l-4 border-red-500 bg-red-50 p-3", children: _jsxs("div", { className: "flex items-start", children: [_jsx(AlertCircle, { className: "mt-0.5 h-5 w-5 text-red-400", strokeWidth: 1 }), _jsxs("div", { className: "ml-3", children: [_jsx("p", { className: "text-sm font-medium text-red-800", children: "Error" }), _jsx("p", { className: "mt-1 text-sm text-red-700", children: error })] })] }) })), messages.length === 0 && !error && (_jsx("div", { className: "flex h-full items-center justify-center p-8", children: _jsxs("div", { className: "text-center", children: [_jsx(Bot, { className: "mx-auto mb-4 h-12 w-12 text-gray-400", strokeWidth: 1 }), _jsx("h3", { className: "mb-2 text-lg font-medium text-gray-900", children: "Start a conversation" }), _jsx("p", { className: "mb-4 text-sm text-gray-500", children: "Send a message to begin working with your AI agent." }), _jsx("div", { className: "text-xs text-gray-400", children: "Your agent can help with content editing, research, and automation tasks." })] }) })), _jsx("div", { className: "space-y-0 divide-y divide-gray-100 select-text", children: groupConsecutiveMessages(messages).map((group, groupIndex) => {
+                            if (group.type === "user" && group.messages[0]) {
+                                // Render user message
+                                return (_jsx(UserMessage, { message: group.messages[0] }, groupIndex));
+                            }
+                            else {
+                                // Render bundled assistant messages
+                                // Check if this group contains any streaming message
+                                const hasStreamingMessage = group.messages.some((msg) => !msg.isCompleted && msg.messageType === "streaming");
+                                const convertedMessages = convertAgentMessagesToAiFormat(group.messages);
+                                return (_jsx(AiResponseMessage, { messages: convertedMessages, 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);
+                                    } }, groupIndex));
+                            }
+                        }) }), showDots && _jsx(DancingDots, {}), _jsx("div", { ref: messagesEndRef })] }), renderContextInfoBar(), _jsxs("div", { className: "border-t border-gray-200 p-4", children: [_jsx("div", { className: "flex items-stretch gap-2", children: _jsx(Textarea, { ref: textareaRef, value: prompt, onChange: (e) => {
                                 setPrompt(e.target.value);
                                 // Reset history index when user starts typing
                                 if (currentHistoryIndex !== -1) {
                                     setCurrentHistoryIndex(-1);
                                 }
-                            }, onKeyDown: handleKeyPress, placeholder: "Type your message... (Enter to send, Ctrl+Enter for new line)", className: "resize-nones min-h-[80px] flex-1 text-xs", disabled: isSubmitting }), _jsx(Button, { onClick: handleSubmit, disabled: !prompt.trim() || isSubmitting, size: "sm", className: "self-end", children: isSubmitting ? (_jsx(Loader2, { className: "h-4 w-4 animate-spin", strokeWidth: 1 })) : (_jsx(Send, { className: "h-4 w-4", strokeWidth: 1 })) })] }) })] }));
+                            }, onKeyDown: handleKeyPress, placeholder: "Type your message... (Enter to send, Ctrl+Enter for new line)", className: "resize-nones min-h-[80px] flex-1 text-xs", disabled: isSubmitting }) }), _jsxs("div", { className: "flex items-stretch justify-between gap-2", children: [_jsxs("div", { className: "mt-2 flex items-center justify-start gap-2", children: [profiles?.length > 0 && (_jsx("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", children: profiles.map((p) => (_jsx("option", { value: p.id, children: p.name }, p.id))) })), activeProfile?.models?.length ? (_jsx("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", children: activeProfile.models.map((m) => (_jsx("option", { value: m.id, children: m.name }, m.id))) })) : null, activeProfile?.prompts?.length ? (_jsxs(Popover, { open: showPredefined, onOpenChange: setShowPredefined, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { className: "rounded p-1 hover:bg-gray-100", onClick: () => { }, title: "Predefined prompts", "aria-label": "Predefined prompts", children: _jsx(Wand2, { className: "h-3 w-3", strokeWidth: 1 }) }) }), _jsx(PopoverContent, { className: "w-64 p-0", align: "start", children: _jsx("div", { className: "max-h-56 overflow-y-auto p-2", children: activeProfile.prompts.map((p, index) => (_jsx("div", { 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();
+                                                        }, children: p.title }, index))) }) })] })) : null, _jsx(AgentCostDisplay, { totalTokens: totalTokens })] }), _jsx(Button, { onClick: isExecuting ? handleStop : handleSubmit, disabled: !isExecuting && !prompt.trim(), size: "sm", className: "h-5.5 w-5.5 cursor-pointer self-end rounded-full", title: isExecuting ? "Stop" : "Send", "aria-label": isExecuting ? "Stop" : "Send", children: isExecuting ? (_jsx(Square, { className: "size-3", strokeWidth: 1 })) : (_jsx(Send, { className: "size-3", strokeWidth: 1 })) })] })] })] }));
 }
 //# sourceMappingURL=AgentTerminal.js.map