dexto 1.3.0 → 1.5.0

package/dist/cli/ink-cli/containers/InputContainer.js

@@ -2,143 +2,571 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * InputContainer Component
  * Smart container for input area - handles submission and state
+ *
+ * Buffer is passed as prop from parent (useCLIState).
+ * No more ref chain - buffer can be accessed directly.
  */
-import { useCallback, useRef } from 'react';
+import { useCallback, useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
 import { InputArea } from '../components/input/InputArea.js';
+import { processStream } from '../services/index.js';
 import { createUserMessage } from '../utils/messageFormatting.js';
 import { generateMessageId } from '../utils/idGenerator.js';
+import { capture } from '../../../analytics/index.js';
 /**
  * Smart container for input area
- * Manages input state and handles submission
+ * Manages submission, history, and overlay triggers
  */
-export function InputContainer({ state, dispatch, agent, inputService }) {
-    const { input, ui, approval, session } = state;
+export const InputContainer = forwardRef(function InputContainer({ buffer, input, ui, session, approval, queuedMessages, setInput, setUi, setSession, setMessages, setPendingMessages, setDequeuedBuffer, setQueuedMessages, setApproval, setApprovalQueue, agent, inputService, onKeyboardScroll, useStreaming = true, }, ref) {
     // Track pending session creation to prevent race conditions
-    // when multiple messages are sent before first session is created
     const sessionCreationPromiseRef = useRef(null);
-    // Handle input change
-    const handleChange = useCallback((value) => {
-        dispatch({ type: 'INPUT_CHANGE', value });
-    }, [dispatch]);
-    // Handle history navigation
+    // Ref to track autoApproveEdits so processStream can read latest value mid-stream
+    const autoApproveEditsRef = useRef(ui.autoApproveEdits);
+    useEffect(() => {
+        autoApproveEditsRef.current = ui.autoApproveEdits;
+    }, [ui.autoApproveEdits]);
+    // Clear the session creation ref when session is cleared
+    useEffect(() => {
+        if (session.id === null) {
+            sessionCreationPromiseRef.current = null;
+        }
+    }, [session.id]);
+    // Extract text content from ContentPart[]
+    const extractTextFromContent = useCallback((content) => {
+        return content
+            .filter((part) => part.type === 'text')
+            .map((part) => part.text)
+            .join('\n');
+    }, []);
+    // Handle history navigation - set text directly on buffer
+    // Up arrow first edits queued messages (removes from queue), then navigates history
     const handleHistoryNavigate = useCallback((direction) => {
-        dispatch({ type: 'INPUT_HISTORY_NAVIGATE', direction });
-    }, [dispatch]);
+        const { history, historyIndex, draftBeforeHistory } = input;
+        if (direction === 'up') {
+            // First check if there are queued messages to edit
+            if (queuedMessages.length > 0 && session.id) {
+                // Get the last queued message
+                const lastQueued = queuedMessages[queuedMessages.length - 1];
+                if (lastQueued) {
+                    // Extract text content and put it in the input
+                    const text = extractTextFromContent(lastQueued.content);
+                    buffer.setText(text);
+                    setInput((prev) => ({ ...prev, value: text }));
+                    // Remove from queue (this will trigger the event and update queuedMessages state)
+                    agent.removeQueuedMessage(session.id, lastQueued.id).catch(() => {
+                        // Silently ignore errors - queue might have been cleared
+                    });
+                    return;
+                }
+            }
+            // Don't navigate history when processing (only queue editing is allowed)
+            if (ui.isProcessing)
+                return;
+            // No queued messages, navigate history
+            if (history.length === 0)
+                return;
+            let newIndex = historyIndex;
+            if (newIndex < 0) {
+                // First time pressing up - save current input as draft
+                const currentText = buffer.text;
+                setInput((prev) => ({
+                    ...prev,
+                    draftBeforeHistory: currentText,
+                    historyIndex: history.length - 1,
+                    value: history[history.length - 1] || '',
+                }));
+                buffer.setText(history[history.length - 1] || '');
+                return;
+            }
+            else if (newIndex > 0) {
+                newIndex = newIndex - 1;
+            }
+            else {
+                return; // Already at oldest
+            }
+            const historyItem = history[newIndex] || '';
+            buffer.setText(historyItem);
+            setInput((prev) => ({ ...prev, value: historyItem, historyIndex: newIndex }));
+        }
+        else {
+            // Down - navigate history (queued messages don't affect down navigation)
+            // Don't navigate history when processing
+            if (ui.isProcessing)
+                return;
+            if (historyIndex < 0)
+                return; // Not navigating history
+            if (historyIndex < history.length - 1) {
+                const newIndex = historyIndex + 1;
+                const historyItem = history[newIndex] || '';
+                buffer.setText(historyItem);
+                setInput((prev) => ({
+                    ...prev,
+                    value: historyItem,
+                    historyIndex: newIndex,
+                }));
+            }
+            else {
+                // At newest history item, restore draft
+                buffer.setText(draftBeforeHistory);
+                setInput((prev) => ({
+                    ...prev,
+                    value: draftBeforeHistory,
+                    historyIndex: -1,
+                    draftBeforeHistory: '',
+                }));
+            }
+        }
+    }, [
+        buffer,
+        input,
+        setInput,
+        queuedMessages,
+        session.id,
+        agent,
+        extractTextFromContent,
+        ui.isProcessing,
+    ]);
+    // Handle overlay triggers
+    const handleTriggerOverlay = useCallback((trigger) => {
+        if (ui.isProcessing || approval)
+            return;
+        if (trigger === 'close') {
+            if (ui.activeOverlay === 'slash-autocomplete' ||
+                ui.activeOverlay === 'resource-autocomplete') {
+                setUi((prev) => ({
+                    ...prev,
+                    activeOverlay: 'none',
+                    mcpWizardServerType: null,
+                }));
+            }
+        }
+        else if (trigger === 'slash-autocomplete') {
+            setUi((prev) => ({ ...prev, activeOverlay: 'slash-autocomplete' }));
+        }
+        else if (trigger === 'resource-autocomplete') {
+            setUi((prev) => ({ ...prev, activeOverlay: 'resource-autocomplete' }));
+        }
+    }, [setUi, ui.isProcessing, ui.activeOverlay, approval]);
+    // Handle image paste from clipboard
+    const handleImagePaste = useCallback((image) => {
+        // Track image attachment analytics (only if session exists)
+        if (session.id) {
+            capture('dexto_image_attached', {
+                source: 'cli',
+                sessionId: session.id,
+                imageType: image.mimeType,
+                imageSizeBytes: Math.floor(image.data.length * 0.75), // Approx base64 decode
+            });
+        }
+        setInput((prev) => ({
+            ...prev,
+            images: [...prev.images, image],
+        }));
+    }, [setInput, session.id]);
+    // Handle image removal (when placeholder is deleted from text)
+    const handleImageRemove = useCallback((imageId) => {
+        setInput((prev) => ({
+            ...prev,
+            images: prev.images.filter((img) => img.id !== imageId),
+        }));
+    }, [setInput]);
+    // Handle new paste block creation (when large text is pasted)
+    const handlePasteBlock = useCallback((block) => {
+        setInput((prev) => ({
+            ...prev,
+            pastedBlocks: [...prev.pastedBlocks, block],
+            pasteCounter: Math.max(prev.pasteCounter, block.number),
+        }));
+    }, [setInput]);
+    // Handle paste block update (e.g., toggle collapse)
+    const handlePasteBlockUpdate = useCallback((blockId, updates) => {
+        setInput((prev) => ({
+            ...prev,
+            pastedBlocks: prev.pastedBlocks.map((block) => block.id === blockId ? { ...block, ...updates } : block),
+        }));
+    }, [setInput]);
+    // Handle paste block removal (when placeholder is deleted from text)
+    const handlePasteBlockRemove = useCallback((blockId) => {
+        setInput((prev) => ({
+            ...prev,
+            pastedBlocks: prev.pastedBlocks.filter((block) => block.id !== blockId),
+        }));
+    }, [setInput]);
+    // Expand all collapsed paste blocks in a text string
+    const expandPasteBlocks = useCallback((text, blocks) => {
+        let result = text;
+        // Sort blocks by placeholder position descending to avoid offset issues
+        const sortedBlocks = [...blocks].sort((a, b) => {
+            const posA = result.indexOf(a.placeholder);
+            const posB = result.indexOf(b.placeholder);
+            return posB - posA;
+        });
+        for (const block of sortedBlocks) {
+            if (block.isCollapsed) {
+                // Replace placeholder with full text
+                result = result.replace(block.placeholder, block.fullText);
+            }
+        }
+        return result;
+    }, []);
     // Handle submission
-    const handleSubmit = useCallback(async (value) => {
-        const trimmed = value.trim();
-        if (!trimmed || ui.isProcessing)
+    // bypassOverlayCheck: skip the overlay check when called programmatically (e.g., from OverlayContainer)
+    const handleSubmit = useCallback(async (value, bypassOverlayCheck = false) => {
+        // Expand all collapsed paste blocks before processing
+        const expandedValue = expandPasteBlocks(value, input.pastedBlocks);
+        const trimmed = expandedValue.trim();
+        if (!trimmed)
             return;
+        // Auto-queue when agent is processing
+        if (ui.isProcessing && session.id) {
+            // Build content parts for queueing
+            const content = [{ type: 'text', text: trimmed }];
+            // Add images if any
+            for (const img of input.images) {
+                content.push({
+                    type: 'image',
+                    image: img.data,
+                    mimeType: img.mimeType,
+                });
+            }
+            try {
+                await agent.queueMessage(session.id, { content });
+                // Queued messages are displayed via QueuedMessagesDisplay component
+                // (state updated by message:queued event handler in useAgentEvents)
+                // Clear input, update history, and clear images
+                buffer.setText('');
+                setInput((prev) => {
+                    const newHistory = prev.history.length > 0 &&
+                        prev.history[prev.history.length - 1] === trimmed
+                        ? prev.history
+                        : [...prev.history, trimmed].slice(-100);
+                    return {
+                        ...prev,
+                        value: '',
+                        history: newHistory,
+                        historyIndex: -1,
+                        draftBeforeHistory: '',
+                        images: [],
+                        pastedBlocks: [],
+                    };
+                });
+            }
+            catch (error) {
+                setMessages((prev) => [
+                    ...prev,
+                    {
+                        id: generateMessageId('error'),
+                        role: 'system',
+                        content: `Failed to queue message: ${error instanceof Error ? error.message : String(error)}`,
+                        timestamp: new Date(),
+                    },
+                ]);
+            }
+            return;
+        }
         // Prevent double submission when autocomplete/selector is active
-        // The autocomplete/selector will handle the submission
-        if (ui.activeOverlay !== 'none' && ui.activeOverlay !== 'approval') {
+        // Skip this check when called programmatically (e.g., from OverlayContainer prompt selection)
+        if (!bypassOverlayCheck &&
+            ui.activeOverlay !== 'none' &&
+            ui.activeOverlay !== 'approval') {
             return;
         }
-        // Create user message
+        // Capture images before clearing - we need them for the API call
+        const pendingImages = [...input.images];
+        // Create user message and add it to messages
         const userMessage = createUserMessage(trimmed);
-        // Dispatch submit start (clears input, adds to history, adds user message)
-        dispatch({
-            type: 'SUBMIT_START',
-            userMessage,
-            inputValue: trimmed,
+        setMessages((prev) => [...prev, userMessage]);
+        // Clear input directly on buffer and update history
+        buffer.setText('');
+        setInput((prev) => {
+            const newHistory = prev.history.length > 0 && prev.history[prev.history.length - 1] === trimmed
+                ? prev.history
+                : [...prev.history, trimmed].slice(-100);
+            return {
+                value: '',
+                history: newHistory,
+                historyIndex: -1,
+                draftBeforeHistory: '',
+                images: [], // Clear images on submit
+                pastedBlocks: [], // Clear paste blocks on submit
+                pasteCounter: prev.pasteCounter, // Keep counter for next session
+            };
         });
+        // Start processing
+        setUi((prev) => ({
+            ...prev,
+            isProcessing: true,
+            isCancelling: false,
+            activeOverlay: 'none',
+            exitWarningShown: false,
+            exitWarningTimestamp: null,
+        }));
         // Parse and handle command or prompt
         const parsed = inputService.parseInput(trimmed);
+        // Check if this command should show an interactive overlay
+        if (parsed.type === 'command' && parsed.command) {
+            const { getCommandOverlay } = await import('../utils/commandOverlays.js');
+            const overlay = getCommandOverlay(parsed.command, parsed.args || []);
+            if (overlay) {
+                setUi((prev) => ({
+                    ...prev,
+                    isProcessing: false,
+                    activeOverlay: overlay,
+                }));
+                return;
+            }
+        }
         if (parsed.type === 'command' && parsed.command) {
-            // Import command service dynamically to avoid circular deps
             const { CommandService } = await import('../services/CommandService.js');
             const commandService = new CommandService();
             try {
-                // Pass sessionId from state to command execution
-                const currentSessionId = session.id;
-                const result = await commandService.executeCommand(parsed.command, parsed.args || [], agent, currentSessionId || undefined);
-                if (result.type === 'prompt') {
-                    // Command executed a prompt via agent.run()
-                    // Processing will continue via event bus
-                    // Don't set SUBMIT_COMPLETE here - wait for agent response
-                    return;
-                }
+                const result = await commandService.executeCommand(parsed.command, parsed.args || [], agent, session.id || undefined);
                 if (result.type === 'output' && result.output) {
-                    // Command returned output for display
-                    dispatch({
-                        type: 'MESSAGE_ADD',
-                        message: {
+                    const output = result.output;
+                    setMessages((prev) => [
+                        ...prev,
+                        {
                             id: generateMessageId('command'),
                             role: 'system',
-                            content: result.output,
+                            content: output,
                             timestamp: new Date(),
                         },
+                    ]);
+                }
+                if (result.type === 'styled' && result.styled) {
+                    const { fallbackText, styledType, styledData } = result.styled;
+                    setMessages((prev) => [
+                        ...prev,
+                        {
+                            id: generateMessageId('command'),
+                            role: 'system',
+                            content: fallbackText,
+                            timestamp: new Date(),
+                            styledType,
+                            styledData,
+                        },
+                    ]);
+                }
+                // Handle sendMessage - send through normal streaming flow
+                if (result.type === 'sendMessage' && result.messageToSend) {
+                    let currentSessionId = session.id;
+                    if (!currentSessionId) {
+                        if (sessionCreationPromiseRef.current) {
+                            try {
+                                const existingSession = await sessionCreationPromiseRef.current;
+                                currentSessionId = existingSession.id;
+                            }
+                            catch {
+                                sessionCreationPromiseRef.current = null;
+                            }
+                        }
+                        if (!currentSessionId) {
+                            const sessionPromise = agent.createSession();
+                            sessionCreationPromiseRef.current = sessionPromise;
+                            const newSession = await sessionPromise;
+                            currentSessionId = newSession.id;
+                            setSession((prev) => ({
+                                ...prev,
+                                id: currentSessionId,
+                                hasActiveSession: true,
+                            }));
+                        }
+                    }
+                    if (!currentSessionId) {
+                        throw new Error('Failed to create or retrieve session');
+                    }
+                    // Send through normal streaming flow (matches WebUI pattern)
+                    const iterator = await agent.stream(result.messageToSend, currentSessionId);
+                    await processStream(iterator, {
+                        setMessages,
+                        setPendingMessages,
+                        setDequeuedBuffer,
+                        setUi,
+                        setQueuedMessages,
+                        setApproval,
+                        setApprovalQueue,
+                    }, {
+                        useStreaming,
+                        autoApproveEditsRef,
+                        eventBus: agent.agentEventBus,
                     });
+                    return; // processStream handles UI state
                 }
-                // Always complete for non-prompt commands
-                dispatch({ type: 'SUBMIT_COMPLETE' });
+                setUi((prev) => ({
+                    ...prev,
+                    isProcessing: false,
+                    isCancelling: false,
+                    isThinking: false,
+                }));
             }
             catch (error) {
-                dispatch({
-                    type: 'SUBMIT_ERROR',
-                    errorMessage: error instanceof Error ? error.message : String(error),
-                });
+                setMessages((prev) => [
+                    ...prev,
+                    {
+                        id: generateMessageId('error'),
+                        role: 'system',
+                        content: `❌ Error: ${error instanceof Error ? error.message : String(error)}`,
+                        timestamp: new Date(),
+                    },
+                ]);
+                setUi((prev) => ({
+                    ...prev,
+                    isProcessing: false,
+                    isCancelling: false,
+                    isThinking: false,
+                }));
             }
         }
         else {
-            // Regular prompt - pass to AI with explicit sessionId
             try {
-                const streamingId = generateMessageId('assistant');
-                dispatch({ type: 'STREAMING_START', id: streamingId });
-                // Pass sessionId explicitly to agent.run() like WebUI does
-                // Use sessionId from state (never from getCurrentSessionId)
                 let currentSessionId = session.id;
-                // Create session on first message if not already created (deferred creation)
-                // Use ref to prevent race condition when multiple messages sent rapidly
                 if (!currentSessionId) {
-                    // Check if session creation is already in progress
                     if (sessionCreationPromiseRef.current) {
-                        // Wait for existing session creation to complete
-                        const existingSession = await sessionCreationPromiseRef.current;
-                        currentSessionId = existingSession.id;
-                    }
-                    else {
-                        // Start new session creation and store promise in ref
-                        const sessionPromise = agent.createSession();
-                        sessionCreationPromiseRef.current = sessionPromise;
                         try {
-                            const newSession = await sessionPromise;
-                            currentSessionId = newSession.id;
-                            dispatch({
-                                type: 'SESSION_SET',
-                                sessionId: currentSessionId,
-                                hasActiveSession: true,
-                            });
+                            const existingSession = await sessionCreationPromiseRef.current;
+                            currentSessionId = existingSession.id;
                         }
-                        finally {
-                            // Clear the ref after creation completes (success or failure)
+                        catch {
                             sessionCreationPromiseRef.current = null;
                         }
                     }
+                    if (!currentSessionId) {
+                        const sessionPromise = agent.createSession();
+                        sessionCreationPromiseRef.current = sessionPromise;
+                        const newSession = await sessionPromise;
+                        currentSessionId = newSession.id;
+                        setSession((prev) => ({
+                            ...prev,
+                            id: currentSessionId,
+                            hasActiveSession: true,
+                        }));
+                    }
                 }
-                // At this point currentSessionId must be defined (either from state or created above)
                 if (!currentSessionId) {
                     throw new Error('Failed to create or retrieve session');
                 }
-                await agent.run(trimmed, undefined, undefined, currentSessionId);
-                // Response will come via event bus
-                // SUBMIT_COMPLETE will be dispatched by event handler
+                const metadata = await agent.getSessionMetadata(currentSessionId);
+                const isFirstMessage = !metadata || metadata.messageCount <= 0;
+                // Build content with images if any
+                let content;
+                if (pendingImages.length > 0) {
+                    // Build multimodal content parts
+                    const parts = [];
+                    // Add text part first
+                    parts.push({ type: 'text', text: trimmed });
+                    // Add image parts
+                    for (const img of pendingImages) {
+                        parts.push({
+                            type: 'image',
+                            image: img.data,
+                            mimeType: img.mimeType,
+                        });
+                    }
+                    content = parts;
+                }
+                else {
+                    content = trimmed;
+                }
+                // Get current LLM config for analytics
+                const llmConfig = agent.getCurrentLLMConfig();
+                // Track message sent analytics
+                capture('dexto_message_sent', {
+                    source: 'cli',
+                    sessionId: currentSessionId,
+                    provider: llmConfig.provider,
+                    model: llmConfig.model,
+                    hasImage: pendingImages.length > 0,
+                    hasFile: false,
+                    messageLength: trimmed.length,
+                });
+                // Use streaming API and process events directly
+                const iterator = await agent.stream(content, currentSessionId);
+                await processStream(iterator, {
+                    setMessages,
+                    setPendingMessages,
+                    setDequeuedBuffer,
+                    setUi,
+                    setQueuedMessages,
+                    setApproval,
+                    setApprovalQueue,
+                }, {
+                    useStreaming,
+                    autoApproveEditsRef,
+                    eventBus: agent.agentEventBus,
+                });
+                if (isFirstMessage) {
+                    agent.generateSessionTitle(currentSessionId).catch(() => {
+                        // Title generation is non-critical - silently ignore failures
+                    });
+                }
             }
             catch (error) {
-                dispatch({
-                    type: 'SUBMIT_ERROR',
-                    errorMessage: error instanceof Error ? error.message : String(error),
-                });
+                setMessages((prev) => [
+                    ...prev,
+                    {
+                        id: generateMessageId('error'),
+                        role: 'system',
+                        content: `❌ Error: ${error instanceof Error ? error.message : String(error)}`,
+                        timestamp: new Date(),
+                    },
+                ]);
+                setUi((prev) => ({
+                    ...prev,
+                    isProcessing: false,
+                    isCancelling: false,
+                    isThinking: false,
+                }));
             }
         }
-    }, [dispatch, agent, inputService, ui.isProcessing, ui.activeOverlay, session]);
-    // Determine placeholder (processing state shown in StatusBar above)
+    }, [
+        buffer,
+        input.images,
+        input.pastedBlocks,
+        expandPasteBlocks,
+        setInput,
+        setUi,
+        setMessages,
+        setPendingMessages,
+        setDequeuedBuffer,
+        setQueuedMessages,
+        setSession,
+        agent,
+        inputService,
+        ui.isProcessing,
+        ui.activeOverlay,
+        session.id,
+        useStreaming,
+    ]);
+    // Determine if input should be active (not blocked by approval/overlay/history search)
+    // Input stays active for filter-type overlays (so user can keep typing to filter)
+    // Disable for approval prompts, overlays with their own text input, and history search mode
+    const overlaysWithOwnInput = [
+        'mcp-custom-wizard',
+        'custom-model-wizard',
+        'api-key-input',
+        'search',
+        'tool-browser',
+        'prompt-add-wizard',
+        'model-selector',
+    ];
+    const hasOverlayWithOwnInput = overlaysWithOwnInput.includes(ui.activeOverlay);
+    const isHistorySearchActive = ui.historySearch.isActive;
+    const isInputActive = !approval && !hasOverlayWithOwnInput && !isHistorySearchActive;
+    const isInputDisabled = !!approval || hasOverlayWithOwnInput || isHistorySearchActive;
+    // Allow submit when:
+    // - no overlay active
+    // - approval active
+    // Note: slash-autocomplete handles its own Enter key (either executes command or submits raw text)
+    const shouldHandleSubmit = ui.activeOverlay === 'none' || ui.activeOverlay === 'approval';
+    // Allow history navigation when not blocked by approval/overlay
+    // When processing: handler allows queue editing but blocks history navigation
+    const canNavigateHistory = !approval && ui.activeOverlay === 'none';
     const placeholder = approval
         ? 'Approval required above...'
         : 'Type your message or /help for commands';
-    // Don't wire up onSubmit when autocomplete/selector is active (they handle Enter)
-    const shouldHandleSubmit = ui.activeOverlay === 'none' || ui.activeOverlay === 'approval';
-    // Only enable history navigation when not processing and no overlay
-    const canNavigateHistory = !ui.isProcessing && !approval && ui.activeOverlay === 'none';
-    return (_jsx(InputArea, { value: input.value, onChange: handleChange, onSubmit: shouldHandleSubmit ? handleSubmit : () => { }, isProcessing: ui.isProcessing, isDisabled: ui.isProcessing || !!approval, placeholder: placeholder, history: input.history, historyIndex: input.historyIndex, onHistoryNavigate: canNavigateHistory ? handleHistoryNavigate : undefined }));
-}
+    // Expose submit method for external use (e.g., from OverlayContainer)
+    // Pass bypassOverlayCheck=true since programmatic calls should skip the overlay check
+    useImperativeHandle(ref, () => ({
+        submit: (text) => handleSubmit(text, true),
+    }));
+    return (_jsx(InputArea, { buffer: buffer, onSubmit: shouldHandleSubmit ? handleSubmit : () => { }, isDisabled: isInputDisabled, isActive: isInputActive, placeholder: placeholder, onHistoryNavigate: canNavigateHistory ? handleHistoryNavigate : undefined, onTriggerOverlay: handleTriggerOverlay, onKeyboardScroll: onKeyboardScroll, imageCount: input.images.length, onImagePaste: handleImagePaste, images: input.images, onImageRemove: handleImageRemove, pastedBlocks: input.pastedBlocks, onPasteBlock: handlePasteBlock, onPasteBlockUpdate: handlePasteBlockUpdate, onPasteBlockRemove: handlePasteBlockRemove, highlightQuery: ui.historySearch.isActive ? ui.historySearch.query : undefined }));
+});