@dexto/tui 1.6.2

package/dist/containers/InputContainer.cjs

@@ -0,0 +1,706 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var InputContainer_exports = {};
+__export(InputContainer_exports, {
+  InputContainer: () => InputContainer
+});
+module.exports = __toCommonJS(InputContainer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_core = require("@dexto/core");
+var import_InputArea = require("../components/input/InputArea.js");
+var import_services = require("../services/index.js");
+var import_contexts = require("../contexts/index.js");
+var import_messageFormatting = require("../utils/messageFormatting.js");
+var import_idGenerator = require("../utils/idGenerator.js");
+var import_host = require("../host/index.js");
+var import_overlayPresentation = require("../utils/overlayPresentation.js");
+const InputContainer = (0, import_react.forwardRef)(
+  function InputContainer2({
+    buffer,
+    input,
+    ui,
+    session,
+    initialPrompt,
+    approval,
+    queuedMessages,
+    setInput,
+    setUi,
+    setSession,
+    setMessages,
+    setPendingMessages,
+    setDequeuedBuffer,
+    setQueuedMessages,
+    setApproval,
+    setApprovalQueue,
+    setTodos,
+    agent,
+    inputService,
+    configFilePath,
+    onKeyboardScroll,
+    useStreaming = true
+  }, ref) {
+    const sessionCreationPromiseRef = (0, import_react.useRef)(null);
+    const didAutoSubmitInitialPromptRef = (0, import_react.useRef)(false);
+    const soundService = (0, import_contexts.useSoundService)();
+    const autoApproveEditsRef = (0, import_react.useRef)(ui.autoApproveEdits);
+    (0, import_react.useEffect)(() => {
+      autoApproveEditsRef.current = ui.autoApproveEdits;
+    }, [ui.autoApproveEdits]);
+    const bypassPermissionsRef = (0, import_react.useRef)(ui.bypassPermissions);
+    (0, import_react.useEffect)(() => {
+      bypassPermissionsRef.current = ui.bypassPermissions;
+    }, [ui.bypassPermissions]);
+    (0, import_react.useEffect)(() => {
+      if (session.id === null) {
+        sessionCreationPromiseRef.current = null;
+      }
+    }, [session.id]);
+    const extractTextFromContent = (0, import_react.useCallback)((content) => {
+      return content.filter((part) => part.type === "text").map((part) => part.text).join("\n");
+    }, []);
+    const handleHistoryNavigate = (0, import_react.useCallback)(
+      (direction) => {
+        const { history, historyIndex, draftBeforeHistory } = input;
+        if (direction === "up") {
+          if (queuedMessages.length > 0 && session.id) {
+            const lastQueued = queuedMessages[queuedMessages.length - 1];
+            if (lastQueued) {
+              const text = extractTextFromContent(lastQueued.content);
+              buffer.setText(text);
+              setInput((prev) => ({ ...prev, value: text }));
+              agent.removeQueuedMessage(session.id, lastQueued.id).catch(() => {
+              });
+              return;
+            }
+          }
+          if (ui.isProcessing) return;
+          if (history.length === 0) return;
+          let newIndex = historyIndex;
+          if (newIndex < 0) {
+            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;
+          }
+          const historyItem = history[newIndex] || "";
+          buffer.setText(historyItem);
+          setInput((prev) => ({ ...prev, value: historyItem, historyIndex: newIndex }));
+        } else {
+          if (ui.isProcessing) return;
+          if (historyIndex < 0) return;
+          if (historyIndex < history.length - 1) {
+            const newIndex = historyIndex + 1;
+            const historyItem = history[newIndex] || "";
+            buffer.setText(historyItem);
+            setInput((prev) => ({
+              ...prev,
+              value: historyItem,
+              historyIndex: newIndex
+            }));
+          } else {
+            buffer.setText(draftBeforeHistory);
+            setInput((prev) => ({
+              ...prev,
+              value: draftBeforeHistory,
+              historyIndex: -1,
+              draftBeforeHistory: ""
+            }));
+          }
+        }
+      },
+      [
+        buffer,
+        input,
+        setInput,
+        queuedMessages,
+        session.id,
+        agent,
+        extractTextFromContent,
+        ui.isProcessing
+      ]
+    );
+    const handleTriggerOverlay = (0, import_react.useCallback)(
+      (trigger) => {
+        if (approval) return;
+        if (trigger === "close") {
+          setUi((prev) => {
+            if (prev.activeOverlay === "slash-autocomplete" || prev.activeOverlay === "resource-autocomplete") {
+              return {
+                ...prev,
+                activeOverlay: "none",
+                mcpWizardServerType: null
+              };
+            }
+            return prev;
+          });
+        } else if (trigger === "slash-autocomplete") {
+          setUi((prev) => ({ ...prev, activeOverlay: "slash-autocomplete" }));
+        } else if (trigger === "resource-autocomplete") {
+          setUi((prev) => ({ ...prev, activeOverlay: "resource-autocomplete" }));
+        }
+      },
+      [setUi, approval]
+    );
+    const handleCycleReasoningVariant = (0, import_react.useCallback)(() => {
+      if (ui.isProcessing) return;
+      const sessionId = session.id || void 0;
+      const current = agent.getCurrentLLMConfig(sessionId);
+      const support = (0, import_core.getReasoningProfile)(current.provider, current.model);
+      if (!support.capable || support.supportedVariants.length === 0) {
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: (0, import_idGenerator.generateMessageId)("system"),
+            role: "system",
+            content: "\u2139\uFE0F Reasoning variants are not supported for the current model.",
+            timestamp: /* @__PURE__ */ new Date()
+          }
+        ]);
+        return;
+      }
+      const variants = support.supportedVariants;
+      const defaultVariant = support.defaultVariant;
+      const currentVariant = current.reasoning?.variant ?? defaultVariant ?? variants[0] ?? void 0;
+      const idx = currentVariant ? variants.indexOf(currentVariant) : -1;
+      const nextVariant = variants[(idx >= 0 ? idx + 1 : 0) % variants.length];
+      if (nextVariant === void 0) {
+        return;
+      }
+      const budgetTokens = current.reasoning?.budgetTokens;
+      void (async () => {
+        try {
+          const reasoningUpdate = defaultVariant !== void 0 && nextVariant === defaultVariant && budgetTokens === void 0 ? { reasoning: null } : {
+            reasoning: {
+              variant: nextVariant,
+              ...typeof budgetTokens === "number" ? { budgetTokens } : {}
+            }
+          };
+          await agent.switchLLM(
+            {
+              provider: current.provider,
+              model: current.model,
+              ...reasoningUpdate
+            },
+            sessionId
+          );
+        } catch (error) {
+          setMessages((prev) => [
+            ...prev,
+            {
+              id: (0, import_idGenerator.generateMessageId)("error"),
+              role: "system",
+              content: `\u274C Failed to change reasoning variant: ${error instanceof Error ? error.message : String(error)}`,
+              timestamp: /* @__PURE__ */ new Date()
+            }
+          ]);
+        }
+      })();
+    }, [agent, session.id, setMessages, ui.isProcessing]);
+    const handleImagePaste = (0, import_react.useCallback)(
+      (image) => {
+        if (session.id) {
+          (0, import_host.captureAnalytics)("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]
+    );
+    const handleImageRemove = (0, import_react.useCallback)(
+      (imageId) => {
+        setInput((prev) => ({
+          ...prev,
+          images: prev.images.filter((img) => img.id !== imageId)
+        }));
+      },
+      [setInput]
+    );
+    const handlePasteBlock = (0, import_react.useCallback)(
+      (block) => {
+        setInput((prev) => ({
+          ...prev,
+          pastedBlocks: [...prev.pastedBlocks, block],
+          pasteCounter: Math.max(prev.pasteCounter, block.number)
+        }));
+      },
+      [setInput]
+    );
+    const handlePasteBlockUpdate = (0, import_react.useCallback)(
+      (blockId, updates) => {
+        setInput((prev) => ({
+          ...prev,
+          pastedBlocks: prev.pastedBlocks.map(
+            (block) => block.id === blockId ? { ...block, ...updates } : block
+          )
+        }));
+      },
+      [setInput]
+    );
+    const handlePasteBlockRemove = (0, import_react.useCallback)(
+      (blockId) => {
+        setInput((prev) => ({
+          ...prev,
+          pastedBlocks: prev.pastedBlocks.filter((block) => block.id !== blockId)
+        }));
+      },
+      [setInput]
+    );
+    const expandPasteBlocks = (0, import_react.useCallback)((text, blocks) => {
+      let result = text;
+      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) {
+          result = result.replace(block.placeholder, block.fullText);
+        }
+      }
+      return result;
+    }, []);
+    const handleSubmit = (0, import_react.useCallback)(
+      async (value, bypassOverlayCheck = false) => {
+        const expandedValue = expandPasteBlocks(value, input.pastedBlocks);
+        const trimmed = expandedValue.trim();
+        if (!trimmed) return;
+        if (ui.isProcessing && session.id) {
+          const content = [{ type: "text", text: trimmed }];
+          for (const img of input.images) {
+            content.push({
+              type: "image",
+              image: img.data,
+              mimeType: img.mimeType
+            });
+          }
+          try {
+            await agent.queueMessage(session.id, { content });
+            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: (0, import_idGenerator.generateMessageId)("error"),
+                role: "system",
+                content: `Failed to queue message: ${error instanceof Error ? error.message : String(error)}`,
+                timestamp: /* @__PURE__ */ new Date()
+              }
+            ]);
+          }
+          return;
+        }
+        if (!bypassOverlayCheck && ui.activeOverlay !== "none" && ui.activeOverlay !== "approval") {
+          return;
+        }
+        const pendingImages = [...input.images];
+        const userMessage = (0, import_messageFormatting.createUserMessage)(trimmed);
+        setMessages((prev) => [...prev, userMessage]);
+        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
+          };
+        });
+        setUi((prev) => ({
+          ...prev,
+          isProcessing: true,
+          isCancelling: false,
+          activeOverlay: "none",
+          commandOutput: null,
+          exitWarningShown: false,
+          exitWarningTimestamp: null
+        }));
+        const parsed = inputService.parseInput(trimmed);
+        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) {
+          const { CommandService } = await import("../services/CommandService.js");
+          const commandService = new CommandService();
+          try {
+            const result = await commandService.executeCommand(
+              parsed.command,
+              parsed.args || [],
+              agent,
+              session.id || void 0,
+              configFilePath
+            );
+            if (result.type === "output" && result.output) {
+              const output = result.output;
+              setUi((prev) => ({
+                ...prev,
+                activeOverlay: "command-output",
+                commandOutput: {
+                  title: `/${parsed.command}`,
+                  content: output
+                }
+              }));
+            }
+            if (result.type === "styled" && result.styled) {
+              const { fallbackText } = result.styled;
+              setUi((prev) => ({
+                ...prev,
+                activeOverlay: "command-output",
+                commandOutput: {
+                  title: `/${parsed.command}`,
+                  content: fallbackText
+                }
+              }));
+            }
+            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");
+              }
+              const iterator = await agent.stream(
+                result.messageToSend,
+                currentSessionId
+              );
+              await (0, import_services.processStream)(
+                iterator,
+                {
+                  setMessages,
+                  setPendingMessages,
+                  setDequeuedBuffer,
+                  setUi,
+                  setSession,
+                  setQueuedMessages,
+                  setApproval,
+                  setApprovalQueue
+                },
+                {
+                  useStreaming,
+                  autoApproveEditsRef,
+                  bypassPermissionsRef,
+                  eventBus: agent,
+                  setTodos,
+                  ...soundService && { soundService }
+                }
+              );
+              return;
+            }
+            setUi((prev) => ({
+              ...prev,
+              isProcessing: false,
+              isCancelling: false,
+              isThinking: false
+            }));
+          } catch (error) {
+            setMessages((prev) => [
+              ...prev,
+              {
+                id: (0, import_idGenerator.generateMessageId)("error"),
+                role: "system",
+                content: `Error: ${error instanceof Error ? error.message : String(error)}`,
+                timestamp: /* @__PURE__ */ new Date()
+              }
+            ]);
+            setUi((prev) => ({
+              ...prev,
+              isProcessing: false,
+              isCancelling: false,
+              isThinking: false
+            }));
+          }
+        } else {
+          try {
+            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");
+            }
+            const metadata = await agent.getSessionMetadata(currentSessionId);
+            const isFirstMessage = !metadata || metadata.messageCount <= 0;
+            let content;
+            let messageText = trimmed;
+            if (ui.planModeActive && !ui.planModeInitialized) {
+              try {
+                const planSkill = await agent.resolvePrompt(
+                  "config:dexto-plan-mode",
+                  {}
+                );
+                if (planSkill.text) {
+                  messageText = `<plan-mode>
+${planSkill.text}
+</plan-mode>
+
+${trimmed}`;
+                  setUi((prev) => ({ ...prev, planModeInitialized: true }));
+                }
+              } catch {
+              }
+            }
+            if (pendingImages.length > 0) {
+              const parts = [];
+              parts.push({ type: "text", text: messageText });
+              for (const img of pendingImages) {
+                parts.push({
+                  type: "image",
+                  image: img.data,
+                  mimeType: img.mimeType
+                });
+              }
+              content = parts;
+            } else {
+              content = messageText;
+            }
+            const llmConfig = agent.getCurrentLLMConfig();
+            (0, import_host.captureAnalytics)("dexto_message_sent", {
+              source: "cli",
+              sessionId: currentSessionId,
+              provider: llmConfig.provider,
+              model: llmConfig.model,
+              hasImage: pendingImages.length > 0,
+              hasFile: false,
+              messageLength: trimmed.length
+            });
+            const iterator = await agent.stream(content, currentSessionId);
+            await (0, import_services.processStream)(
+              iterator,
+              {
+                setMessages,
+                setPendingMessages,
+                setDequeuedBuffer,
+                setUi,
+                setSession,
+                setQueuedMessages,
+                setApproval,
+                setApprovalQueue
+              },
+              {
+                useStreaming,
+                autoApproveEditsRef,
+                bypassPermissionsRef,
+                eventBus: agent,
+                setTodos,
+                ...soundService && { soundService }
+              }
+            );
+            if (isFirstMessage) {
+              agent.generateSessionTitle(currentSessionId).catch(() => {
+              });
+            }
+          } catch (error) {
+            setMessages((prev) => [
+              ...prev,
+              {
+                id: (0, import_idGenerator.generateMessageId)("error"),
+                role: "system",
+                content: `Error: ${error instanceof Error ? error.message : String(error)}`,
+                timestamp: /* @__PURE__ */ new Date()
+              }
+            ]);
+            setUi((prev) => ({
+              ...prev,
+              isProcessing: false,
+              isCancelling: false,
+              isThinking: false
+            }));
+          }
+        }
+      },
+      [
+        buffer,
+        input.images,
+        input.pastedBlocks,
+        expandPasteBlocks,
+        setInput,
+        setUi,
+        setMessages,
+        setPendingMessages,
+        setDequeuedBuffer,
+        setQueuedMessages,
+        setSession,
+        agent,
+        inputService,
+        ui.isProcessing,
+        ui.activeOverlay,
+        ui.planModeActive,
+        ui.planModeInitialized,
+        session.id,
+        useStreaming,
+        soundService
+      ]
+    );
+    (0, import_react.useEffect)(() => {
+      if (!initialPrompt || didAutoSubmitInitialPromptRef.current) {
+        return;
+      }
+      didAutoSubmitInitialPromptRef.current = true;
+      handleSubmit(initialPrompt, true).catch((error) => {
+        agent.logger.error("InputContainer initial prompt submission failed", {
+          error,
+          initialPrompt
+        });
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: (0, import_idGenerator.generateMessageId)("error"),
+            role: "system",
+            content: `Failed to submit initial prompt: ${error instanceof Error ? error.message : String(error)}`,
+            timestamp: /* @__PURE__ */ new Date()
+          }
+        ]);
+      });
+    }, [agent.logger, handleSubmit, initialPrompt, setMessages]);
+    const mainInputAllowedOverlays = ["none", "slash-autocomplete", "resource-autocomplete"];
+    const mainInputAllowed = mainInputAllowedOverlays.includes(ui.activeOverlay);
+    const isHistorySearchActive = ui.historySearch.isActive;
+    const isInputActive = !approval && mainInputAllowed && !isHistorySearchActive;
+    const isInputDisabled = approval !== null || !mainInputAllowed || isHistorySearchActive;
+    const shouldHandleSubmit = ui.activeOverlay === "none" || ui.activeOverlay === "approval";
+    const canNavigateHistory = !approval && ui.activeOverlay === "none";
+    const shouldHideInputArea = (0, import_overlayPresentation.getOverlayPresentation)(ui.activeOverlay, approval) === "focus";
+    const placeholder = approval ? "Approval required above..." : "Type your message or /help for commands";
+    (0, import_react.useImperativeHandle)(ref, () => ({
+      submit: (text) => handleSubmit(text, true)
+    }));
+    if (shouldHideInputArea) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_InputArea.InputArea,
+      {
+        buffer,
+        onSubmit: shouldHandleSubmit ? handleSubmit : () => {
+        },
+        isDisabled: isInputDisabled,
+        isActive: isInputActive,
+        placeholder,
+        onHistoryNavigate: canNavigateHistory ? handleHistoryNavigate : void 0,
+        onTriggerOverlay: handleTriggerOverlay,
+        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 : void 0,
+        onCycleReasoningVariant: ui.activeOverlay === "none" ? handleCycleReasoningVariant : void 0
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputContainer
+});