@plusonelabs/cue 0.0.38 → 0.0.39

package/backup-input/useTextInput.backup.ts

@@ -0,0 +1,632 @@
+import { useInput } from 'ink';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { useDoublePress } from './useDoublePress.js';
+import { Cursor } from '../utils/Cursor.js';
+import { detectCursorCommand } from '../utils/keyMapping.js';
+
+const ESC = '\u001B';
+const PASTE_START = `[200~`;
+const PASTE_END = `[201~`;
+const PASTE_START_WITH_ESC = `${ESC}[200~`;
+const PASTE_END_WITH_ESC = `${ESC}[201~`;
+
+type Props = {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: (value: string, isSubmittingSlashCommand?: boolean) => void;
+  commands: { name: string; description: string }[];
+  onToggleShortcuts?: () => void;
+  onClearShortcuts?: () => void;
+  onCancel?: () => boolean;
+  isLoading?: boolean;
+  disabled?: boolean;
+};
+
+export function useTextInput({
+  value,
+  onChange,
+  onSubmit,
+  commands,
+  onToggleShortcuts,
+  onClearShortcuts,
+  onCancel,
+  isLoading = false,
+  disabled = false,
+}: Props) {
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [selectedSuggestion, setSelectedSuggestion] = useState(-1);
+  const [message, setMessage] = useState<{ show: boolean; text?: string }>({
+    show: false,
+  });
+  const [offset, setOffset] = useState(value.length);
+  const cursor = Cursor.fromText(value, 80, offset);
+  const [selection, setSelection] = useState<{
+    start: number;
+    end: number;
+  } | null>(null);
+  const [pasteInfo, setPasteInfo] = useState<{
+    pastes: Array<{
+      content: string;
+      lineCount: number;
+      charCount: number;
+    }>;
+    userInput: string;
+    totalLineCount: number;
+    totalCharCount: number;
+    isSummarized: boolean;
+  } | null>(null);
+
+  const [isPasteMode, setIsPasteMode] = useState(false);
+  const isPasteModeRef = useRef(false);
+  const [pasteBuffer, setPasteBuffer] = useState<string>('');
+  const pasteBufferRef = useRef<string>('');
+  const accumulatedInputRef = useRef<string>('');
+  const pasteTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const lastInputTimeRef = useRef<number>(Date.now());
+  const [isPasting, setIsPasting] = useState(false);
+  const PASTE_TIMEOUT = 500;
+  const lastDeleteTimeRef = useRef<number>(0);
+
+  useEffect(() => {
+    process.stdout.write(`${ESC}[?2004h`);
+    return () => {
+      process.stdout.write(`${ESC}[?2004l`);
+    };
+  }, []);
+
+  const finalizePaste = useCallback(
+    (buffer: string) => {
+      const LINES_THRESHOLD = 30;
+      const CHARS_THRESHOLD = 1000;
+      const normalizedBuffer = buffer
+        .replace(/\r\n/g, '\n')
+        .replace(/\r/g, '\n');
+
+      let lines = normalizedBuffer.split('\n');
+      if (lines.length > 0 && lines[lines.length - 1] === '') {
+        lines = lines.slice(0, -1);
+      }
+      const lineCount = lines.length;
+      const charCount = normalizedBuffer.length;
+      const shouldSummarize =
+        lineCount > LINES_THRESHOLD && charCount > CHARS_THRESHOLD;
+
+      if (shouldSummarize && process.stdout.isTTY) {
+        process.stdout.write('\x1b[2K\r');
+      }
+
+      if (shouldSummarize) {
+        setPasteInfo((prev) => {
+          const newPaste = {
+            content: normalizedBuffer,
+            lineCount: lineCount,
+            charCount: charCount,
+          };
+
+          if (prev) {
+            const updatedPastes = [...prev.pastes, newPaste];
+            onChange(prev.userInput);
+            setOffset(prev.userInput.length);
+            return {
+              pastes: updatedPastes,
+              userInput: prev.userInput,
+              totalLineCount: prev.totalLineCount + lineCount,
+              totalCharCount: prev.totalCharCount + charCount,
+              isSummarized: true,
+            };
+          } else {
+            onChange('');
+            setOffset(0);
+            return {
+              pastes: [newPaste],
+              userInput: '',
+              totalLineCount: lineCount,
+              totalCharCount: charCount,
+              isSummarized: true,
+            };
+          }
+        });
+      } else {
+        const newCursor = cursor.insert(normalizedBuffer);
+        onChange(newCursor.text);
+        setOffset(newCursor.offset);
+        setSelection(null);
+      }
+
+      setIsPasting(false);
+      setPasteBuffer('');
+      setMessage({ show: false });
+    },
+    [onChange, cursor, setPasteInfo]
+  );
+
+  const processAccumulatedInput = useCallback(() => {
+    const input = accumulatedInputRef.current;
+    if (!input) return;
+
+    let pasteStartIdx = input.indexOf(PASTE_START_WITH_ESC);
+    let pasteEndIdx = input.indexOf(PASTE_END_WITH_ESC);
+    let pasteStartLen = PASTE_START_WITH_ESC.length;
+    let pasteEndLen = PASTE_END_WITH_ESC.length;
+
+    if (pasteStartIdx === -1) {
+      pasteStartIdx = input.indexOf(PASTE_START);
+      pasteStartLen = PASTE_START.length;
+    }
+    if (pasteEndIdx === -1) {
+      pasteEndIdx = input.indexOf(PASTE_END);
+      pasteEndLen = PASTE_END.length;
+    }
+
+    if (
+      pasteStartIdx !== -1 &&
+      pasteEndIdx !== -1 &&
+      pasteEndIdx > pasteStartIdx
+    ) {
+      const beforePaste = input.substring(0, pasteStartIdx);
+      const pasteContent = input.substring(
+        pasteStartIdx + pasteStartLen,
+        pasteEndIdx
+      );
+      const afterPaste = input.substring(pasteEndIdx + pasteEndLen);
+
+      if (beforePaste) {
+        const newCursor = cursor.insert(beforePaste);
+        onChange(newCursor.text);
+        setOffset(newCursor.offset);
+      }
+
+      finalizePaste(pasteContent);
+      accumulatedInputRef.current = afterPaste;
+      setIsPasteMode(false);
+
+      if (afterPaste) {
+        setTimeout(() => processAccumulatedInput(), 0);
+      }
+    } else if (pasteStartIdx !== -1 && pasteEndIdx === -1) {
+      setIsPasteMode(true);
+    } else if (pasteEndIdx !== -1 && pasteStartIdx === -1) {
+      const pasteContent = input.substring(0, pasteEndIdx);
+      if (isPasteMode && pasteBuffer) {
+        finalizePaste(pasteBuffer + pasteContent);
+      }
+      accumulatedInputRef.current = input.substring(pasteEndIdx + pasteEndLen);
+      setIsPasteMode(false);
+      setPasteBuffer('');
+    } else if (!isPasteMode) {
+      if (input.length > 100 || input.includes('\n') || input.includes('\r')) {
+        const toProcess = input;
+        accumulatedInputRef.current = '';
+        return toProcess;
+      }
+      return null;
+    }
+
+    return null;
+  }, [cursor, onChange, isPasteMode, pasteBuffer, finalizePaste]);
+
+  const handleEscape = useDoublePress(
+    (show) => {
+      onClearShortcuts?.();
+      // If loading and no input, show cancel message instead
+      if (isLoading && !value && !pasteInfo) {
+        setMessage({
+          show: show,
+          text: 'Press Escape again to cancel',
+        });
+      } else {
+        const hasContent = !!(value || pasteInfo);
+        setMessage({
+          show: hasContent && show,
+          text: 'Press Escape again to clear',
+        });
+      }
+    },
+    () => {
+      // First try to cancel if loading and no input
+      if (isLoading && !value && !pasteInfo && onCancel) {
+        const cancelled = onCancel();
+        if (cancelled) {
+          setMessage({ show: false });
+          return;
+        }
+      }
+
+      // Otherwise clear input/paste as before
+      if (value || pasteInfo) {
+        onChange('');
+        updateSuggestions('');
+        setPasteInfo(null);
+        setPasteBuffer('');
+        setIsPasting(false);
+        setOffset(0);
+        if (pasteTimeoutRef.current) {
+          clearTimeout(pasteTimeoutRef.current);
+        }
+      }
+    }
+  );
+
+  function updateSuggestions(newValue: string) {
+    if (newValue.startsWith('/') && newValue.length > 0) {
+      const input = newValue.slice(1).toLowerCase();
+
+      if (input.includes(' ')) {
+        setSuggestions([]);
+        setSelectedSuggestion(-1);
+        return;
+      }
+
+      const matchingCommands = commands.filter((cmd) =>
+        cmd.name.toLowerCase().startsWith(input)
+      );
+      const filtered = matchingCommands.map((cmd) => cmd.name);
+      setSuggestions(filtered);
+
+      setSelectedSuggestion(filtered.length > 0 ? 0 : -1);
+    } else {
+      setSuggestions([]);
+      setSelectedSuggestion(-1);
+    }
+  }
+
+  const clearSuggestions = useCallback(() => {
+    setSuggestions([]);
+    setSelectedSuggestion(-1);
+  }, []);
+
+  useInput((inputChar, key) => {
+    // Don't handle input when disabled (e.g., when a modal is open)
+    if (disabled) {
+      return;
+    }
+
+    const isRestrictedMode = pasteInfo?.isSummarized || false;
+
+    if (key.escape) {
+      handleEscape();
+      return;
+    }
+
+    if (key.delete || inputChar === '\x7f' || inputChar === '\x08') {
+      if (isRestrictedMode && pasteInfo) {
+        if (cursor.offset <= 0 && pasteInfo.userInput.length === 0) {
+          return;
+        }
+        if (pasteInfo.userInput.length > 0) {
+          const newUserInput = pasteInfo.userInput.slice(0, -1);
+          setPasteInfo({
+            ...pasteInfo,
+            userInput: newUserInput,
+          });
+          onChange(newUserInput);
+          setOffset(newUserInput.length);
+        }
+        return;
+      }
+
+      const newCursor = cursor.backspace();
+      onChange(newCursor.text);
+      setOffset(newCursor.offset);
+      updateSuggestions(newCursor.text);
+      setMessage({ show: false });
+      return;
+    }
+
+    const cursorCommand = detectCursorCommand(inputChar, key);
+
+    if (
+      cursorCommand &&
+      (suggestions.length === 0 ||
+        cursorCommand === 'deleteBackward' ||
+        cursorCommand === 'deleteForward' ||
+        cursorCommand.startsWith('select'))
+    ) {
+      let newCursor: Cursor = cursor;
+
+      switch (cursorCommand) {
+        case 'moveLeft':
+          if (isRestrictedMode) {
+            if (cursor.offset <= 0) {
+              return;
+            }
+          }
+          newCursor = cursor.left();
+          setSelection(null);
+          break;
+        case 'moveRight':
+          newCursor = cursor.right();
+          setSelection(null);
+          break;
+        case 'moveToStart':
+          if (isRestrictedMode) {
+            newCursor = new Cursor(value, 0);
+          } else {
+            newCursor = cursor.startOfLine();
+          }
+          setSelection(null);
+          break;
+        case 'moveToEnd':
+          newCursor = cursor.endOfLine();
+          setSelection(null);
+          break;
+        case 'moveWordLeft':
+          newCursor = cursor.prevWord();
+          if (isRestrictedMode && pasteInfo) {
+            if (newCursor.offset < 0) {
+              return;
+            }
+          }
+          setSelection(null);
+          break;
+        case 'moveWordRight':
+          newCursor = cursor.nextWord();
+          setSelection(null);
+          break;
+        case 'selectLeft':
+          newCursor = cursor.left();
+          break;
+        case 'selectRight':
+          newCursor = cursor.right();
+          break;
+        case 'selectToStart':
+          newCursor = cursor.startOfLine();
+          break;
+        case 'selectToEnd':
+          newCursor = cursor.endOfLine();
+          break;
+        case 'selectWordLeft':
+          newCursor = cursor.prevWord();
+          break;
+        case 'selectWordRight':
+          newCursor = cursor.nextWord();
+          break;
+        case 'deleteBackward':
+          if (isRestrictedMode && pasteInfo) {
+            if (cursor.offset <= 0 && pasteInfo.userInput.length === 0) {
+              return;
+            }
+            if (pasteInfo.userInput.length > 0) {
+              const newUserInput = pasteInfo.userInput.slice(0, -1);
+              setPasteInfo({
+                ...pasteInfo,
+                userInput: newUserInput,
+              });
+              onChange(newUserInput);
+              setOffset(newUserInput.length);
+            }
+            return;
+          }
+          newCursor = cursor.backspace();
+          onChange(newCursor.text);
+          setOffset(newCursor.offset);
+          updateSuggestions(newCursor.text);
+          setMessage({ show: false });
+          return;
+        case 'deleteForward': {
+          const now = Date.now();
+          if (now - lastDeleteTimeRef.current < 50) {
+            return;
+          }
+          lastDeleteTimeRef.current = now;
+          newCursor = cursor.del();
+          onChange(newCursor.text);
+          setOffset(newCursor.offset);
+          updateSuggestions(newCursor.text);
+          setMessage({ show: false });
+          return;
+        }
+        default:
+          return;
+      }
+
+      setOffset(newCursor.offset);
+      setSelection(null);
+      setMessage({ show: false });
+      return;
+    }
+
+    if (key.upArrow) {
+      if (suggestions.length > 0) {
+        setSelectedSuggestion((prev) =>
+          prev <= 0 ? suggestions.length - 1 : prev - 1
+        );
+        return;
+      }
+      if (isRestrictedMode) {
+        return;
+      }
+      const newCursor = cursor.up();
+      setOffset(newCursor.offset);
+      onChange(newCursor.text);
+      return;
+    }
+
+    if (key.downArrow) {
+      if (suggestions.length > 0) {
+        setSelectedSuggestion((prev) =>
+          prev >= suggestions.length - 1 ? 0 : prev + 1
+        );
+        return;
+      }
+      const newCursor = cursor.down();
+      setOffset(newCursor.offset);
+      onChange(newCursor.text);
+      return;
+    }
+
+    // Handle other navigation when suggestions are present
+    if (suggestions.length > 0) {
+      if (key.tab || (key.return && selectedSuggestion >= 0)) {
+        const suggestionIndex =
+          selectedSuggestion >= 0 ? selectedSuggestion : 0;
+        const suggestion = suggestions[suggestionIndex];
+        if (suggestion) {
+          const input = '/' + suggestion + ' ';
+          onChange(input);
+          setSuggestions([]);
+          setSelectedSuggestion(-1);
+
+          if (key.return) {
+            onSubmit(input, true);
+          }
+        }
+        return;
+      }
+    }
+
+    // Handle return
+    if (key.return) {
+      // Reconstruct full content if we have summarized pastes
+      let submitValue = value;
+      if (pasteInfo?.isSummarized) {
+        const totalPasteContent = pasteInfo.pastes
+          .map((p) => p.content)
+          .join('');
+        submitValue = totalPasteContent + pasteInfo.userInput;
+      }
+      if (submitValue.trim()) {
+        onSubmit(submitValue.trim());
+        setPasteInfo(null);
+      }
+      return;
+    }
+
+    // Handle ? shortcut for shortcuts (only if first character, don't add to input)
+    if (inputChar === '?' && !key.ctrl && !key.meta && value === '') {
+      onToggleShortcuts?.();
+      return;
+    }
+
+    // Handle regular character input (including pasted text)
+    // Note: Terminal may chunk long pastes at ~50 character boundaries
+    if (
+      inputChar &&
+      !key.ctrl &&
+      !key.escape &&
+      !key.tab &&
+      !key.return &&
+      !key.upArrow &&
+      !key.downArrow &&
+      !key.leftArrow &&
+      !key.rightArrow &&
+      !key.backspace &&
+      !key.delete
+    ) {
+      const now = Date.now();
+      const timeSinceLastInput = now - lastInputTimeRef.current;
+      lastInputTimeRef.current = now;
+
+      // Check if we're in the middle of a bracketed paste FIRST (use ref for immediate check)
+      if (isPasteModeRef.current && !inputChar.includes('[201~')) {
+        const newBuffer = pasteBufferRef.current + inputChar;
+        pasteBufferRef.current = newBuffer;
+        setPasteBuffer(newBuffer);
+        return;
+      }
+
+      // Then check if input contains bracketed paste sequences
+      if (inputChar.includes('[200~') || inputChar.includes('[201~')) {
+        const startIdx = inputChar.indexOf('[200~');
+        const endIdx = inputChar.indexOf('[201~');
+
+        if (startIdx !== -1 && endIdx !== -1) {
+          // Complete paste in one chunk
+          const pasteContent = inputChar.substring(startIdx + 5, endIdx);
+          finalizePaste(pasteContent);
+          return;
+        } else if (startIdx !== -1) {
+          // Paste started, accumulate
+          const pasteContent = inputChar.substring(startIdx + 5);
+          pasteBufferRef.current = pasteContent; // Update ref immediately
+          setPasteBuffer(pasteContent);
+          setIsPasting(true);
+          isPasteModeRef.current = true; // Update ref immediately
+          setIsPasteMode(true);
+          return;
+        } else if (endIdx !== -1 && (isPasting || isPasteModeRef.current)) {
+          // Paste ending
+          const beforeEndMarker = inputChar.substring(0, endIdx);
+          const pasteContent = pasteBufferRef.current + beforeEndMarker;
+          finalizePaste(pasteContent);
+          setIsPasting(false);
+          setPasteBuffer('');
+          pasteBufferRef.current = ''; // Reset ref
+          setIsPasteMode(false);
+          isPasteModeRef.current = false; // Reset ref
+          // Clear any pending timeout
+          if (pasteTimeoutRef.current) {
+            clearTimeout(pasteTimeoutRef.current);
+            pasteTimeoutRef.current = null;
+          }
+          return;
+        }
+      }
+
+      // If we already have a summarized paste and this is not a paste, handle as user input
+      if (
+        pasteInfo?.isSummarized &&
+        timeSinceLastInput > 50 &&
+        !inputChar.includes('\n') &&
+        !inputChar.includes('\r')
+      ) {
+        const newUserInput = pasteInfo.userInput + inputChar;
+        setPasteInfo({
+          ...pasteInfo,
+          userInput: newUserInput,
+        });
+        // Only show user input when summarized
+        onChange(newUserInput);
+        setOffset(newUserInput.length);
+        setMessage({ show: false });
+        return;
+      }
+
+      // Fallback: timeout-based detection for rapid input (only if not in bracketed paste mode)
+      if (
+        !isPasteModeRef.current &&
+        (timeSinceLastInput < 50 ||
+          inputChar.includes('\n') ||
+          inputChar.includes('\r'))
+      ) {
+        // Likely part of a paste
+        const newBuffer = pasteBuffer + inputChar;
+        setPasteBuffer(newBuffer);
+        setIsPasting(true);
+
+        if (pasteTimeoutRef.current) {
+          clearTimeout(pasteTimeoutRef.current);
+        }
+
+        pasteTimeoutRef.current = setTimeout(() => {
+          finalizePaste(newBuffer);
+          setIsPasting(false);
+          setPasteBuffer('');
+          accumulatedInputRef.current = ''; // Clear accumulator after paste
+        }, PASTE_TIMEOUT);
+      } else {
+        // Normal typing - but skip if we have a summarized paste to avoid garbled text
+        if (pasteInfo?.isSummarized) {
+          return;
+        }
+
+        const newCursor = cursor.insert(inputChar);
+        onChange(newCursor.text);
+        setOffset(newCursor.offset);
+        setSelection(null);
+        updateSuggestions(newCursor.text);
+        setMessage({ show: false });
+      }
+    }
+  });
+
+  return {
+    suggestions,
+    selectedSuggestion,
+    message,
+    clearSuggestions,
+    cursor: offset,
+    selection,
+    pasteInfo,
+  };
+}