@assistant-ui/react-ink 0.0.12 → 0.0.15

package/src/primitives/composer/ComposerInput.tsx

@@ -1,49 +1,233 @@
+import { useEffect, useRef } from "react";
 import type { ComponentProps } from "react";
 import { Box, Text, useFocus, useInput } from "ink";
 import { useAui, useAuiState } from "@assistant-ui/store";
+import {
+  getGraphemeAt,
+  textBufferReducer,
+  useTextBuffer,
+} from "./useTextBuffer";
+
+// cap dedup map so a store that drops echoes can't grow the counter without bound
+const PENDING_SYNC_CAP = 64;
 
 export type ComposerInputProps = ComponentProps<typeof Box> & {
-  /** Submit the message when Enter is pressed. @default false */
   submitOnEnter?: boolean | undefined;
-  /** Placeholder text shown when the input is empty. */
   placeholder?: string | undefined;
-  /** Whether this input should receive focus automatically. @default true */
   autoFocus?: boolean | undefined;
+  multiLine?: boolean | undefined;
+  onSubmit?: ((text: string) => void) | undefined;
 };
 
 export const ComposerInput = ({
   submitOnEnter = false,
   placeholder = "",
   autoFocus = true,
+  multiLine = false,
+  onSubmit,
   ...boxProps
 }: ComposerInputProps) => {
   const aui = useAui();
-  const text = useAuiState((s) => s.composer.text);
+  const storeText = useAuiState((s) => s.composer.text);
   const { isFocused } = useFocus({ autoFocus });
+  const { text, cursorOffset, preferredColumn, dispatchAction, setText } =
+    useTextBuffer(storeText);
+  const bufferStateRef = useRef({ text, cursorOffset, preferredColumn });
+  const pendingLocalSyncTextsRef = useRef(new Map<string, number>());
+  bufferStateRef.current = { text, cursorOffset, preferredColumn };
+
+  useEffect(() => {
+    const counter = pendingLocalSyncTextsRef.current;
+    const pending = counter.get(storeText) ?? 0;
+    if (pending > 0) {
+      if (pending === 1) counter.delete(storeText);
+      else counter.set(storeText, pending - 1);
+      return;
+    }
+    if (storeText === text) return;
+
+    counter.clear();
+    setText(storeText);
+    bufferStateRef.current = {
+      text: storeText,
+      cursorOffset: storeText.length,
+      preferredColumn: undefined,
+    };
+  }, [setText, storeText, text]);
+
+  const commitAction = (
+    action: Parameters<typeof textBufferReducer>[1],
+    options?: { syncText?: boolean },
+  ) => {
+    const currentState = bufferStateRef.current;
+    // run the reducer eagerly so submit-after-edit sees post-action state before react commits
+    const nextState = textBufferReducer(currentState, action);
+    dispatchAction(action);
+    bufferStateRef.current = nextState;
+
+    if (options?.syncText !== false && nextState.text !== currentState.text) {
+      const counter = pendingLocalSyncTextsRef.current;
+      if (counter.size >= PENDING_SYNC_CAP) counter.clear();
+      counter.set(nextState.text, (counter.get(nextState.text) ?? 0) + 1);
+      aui.composer().setText(nextState.text);
+    }
+  };
+
+  const submit = () => {
+    const submittedText = bufferStateRef.current.text;
+    if (onSubmit) {
+      onSubmit(submittedText);
+      return;
+    }
+
+    aui.composer().send();
+  };
 
   useInput(
     (input, key) => {
+      const extendedKey = key as typeof key & {
+        home?: boolean;
+        end?: boolean;
+        shift?: boolean;
+      };
+      const lowerInput = input.toLowerCase();
+
+      if (key.ctrl) {
+        // ctrl+j may also report key.return; swallow so single-line never submits
+        if (lowerInput === "j") {
+          if (multiLine) {
+            commitAction({ type: "insert", text: "\n" });
+          }
+          return;
+        }
+        if (lowerInput === "a") {
+          commitAction({ type: "move-home", multiLine }, { syncText: false });
+          return;
+        }
+        if (lowerInput === "e") {
+          commitAction({ type: "move-end", multiLine }, { syncText: false });
+          return;
+        }
+        if (lowerInput === "w") {
+          commitAction({ type: "kill-word-backward" });
+          return;
+        }
+        if (lowerInput === "u") {
+          commitAction({ type: "kill-start", multiLine });
+          return;
+        }
+        if (lowerInput === "k") {
+          commitAction({ type: "kill-end", multiLine });
+          return;
+        }
+        if (lowerInput === "d") {
+          commitAction({ type: "delete-forward" });
+          return;
+        }
+      }
+
+      if (key.meta) {
+        if (lowerInput === "b") {
+          commitAction({ type: "move-word-left" }, { syncText: false });
+          return;
+        }
+        if (lowerInput === "f") {
+          commitAction({ type: "move-word-right" }, { syncText: false });
+          return;
+        }
+        if (lowerInput === "d") {
+          commitAction({ type: "kill-word-forward" });
+          return;
+        }
+      }
+
       if (key.return) {
+        const shouldInsertNewline =
+          multiLine && (!submitOnEnter || extendedKey.shift);
+        if (shouldInsertNewline) {
+          commitAction({ type: "insert", text: "\n" });
+          return;
+        }
+
         if (submitOnEnter) {
-          aui.composer().send();
+          submit();
         }
         return;
       }
-      if (key.backspace || key.delete) {
-        aui.composer().setText(text.slice(0, -1));
+
+      if (key.leftArrow) {
+        commitAction({ type: "move-left" }, { syncText: false });
+        return;
+      }
+
+      if (key.rightArrow) {
+        commitAction({ type: "move-right" }, { syncText: false });
+        return;
+      }
+
+      if (multiLine && key.upArrow) {
+        commitAction({ type: "move-up" }, { syncText: false });
+        return;
+      }
+
+      if (multiLine && key.downArrow) {
+        commitAction({ type: "move-down" }, { syncText: false });
+        return;
+      }
+
+      if (extendedKey.home) {
+        commitAction({ type: "move-home", multiLine }, { syncText: false });
+        return;
+      }
+
+      if (extendedKey.end) {
+        commitAction({ type: "move-end", multiLine }, { syncText: false });
+        return;
+      }
+
+      if (key.backspace) {
+        commitAction({ type: "delete-backward" });
+        return;
+      }
+
+      if (key.delete) {
+        commitAction({ type: "delete-forward" });
         return;
       }
+
       if (input && !key.ctrl && !key.meta) {
-        aui.composer().setText(text + input);
+        commitAction({ type: "insert", text: input });
       }
     },
     { isActive: isFocused },
   );
 
+  const hasText = text.length > 0;
+  const isShowingPlaceholder = !hasText && placeholder.length > 0;
+  const before = hasText ? text.slice(0, cursorOffset) : "";
+  const charAtCursor = hasText ? getGraphemeAt(text, cursorOffset) : "";
+  const isOnNewline = charAtCursor === "\n";
+  // render a space when on a newline so the inverse cursor cell stays visible
+  const atCursor = charAtCursor === "" || isOnNewline ? " " : charAtCursor;
+  const after = hasText
+    ? isOnNewline
+      ? text.slice(cursorOffset)
+      : text.slice(cursorOffset + charAtCursor.length)
+    : placeholder;
+
   return (
     <Box {...boxProps}>
-      <Text dimColor={!text && !!placeholder}>{text || placeholder}</Text>
-      {isFocused && <Text>▋</Text>}
+      {!isFocused ? (
+        <Text dimColor={isShowingPlaceholder}>
+          {hasText ? text : placeholder}
+        </Text>
+      ) : (
+        <Text dimColor={isShowingPlaceholder}>
+          {before}
+          <Text inverse>{atCursor}</Text>
+          {after}
+        </Text>
+      )}
     </Box>
   );
 };

package/src/primitives/composer/useTextBuffer.ts

@@ -0,0 +1,332 @@
+import { useCallback, useReducer } from "react";
+
+export type TextBufferState = {
+  text: string;
+  cursorOffset: number;
+  preferredColumn: number | undefined;
+};
+
+export type TextBufferAction =
+  | { type: "insert"; text: string }
+  | { type: "delete-backward" }
+  | { type: "delete-forward" }
+  | { type: "move-left" }
+  | { type: "move-right" }
+  | { type: "move-up" }
+  | { type: "move-down" }
+  | { type: "move-home"; multiLine: boolean }
+  | { type: "move-end"; multiLine: boolean }
+  | { type: "move-word-left" }
+  | { type: "move-word-right" }
+  | { type: "kill-word-backward" }
+  | { type: "kill-word-forward" }
+  | { type: "kill-start"; multiLine: boolean }
+  | { type: "kill-end"; multiLine: boolean }
+  | { type: "set-text"; text: string }
+  | { type: "set-cursor"; cursorOffset: number };
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
+const graphemeSegmenter = new Intl.Segmenter(undefined, {
+  granularity: "grapheme",
+});
+const wordSegmenter = new Intl.Segmenter(undefined, { granularity: "word" });
+
+const stepGraphemeLeft = (text: string, offset: number) => {
+  if (offset <= 0) return 0;
+  let previous = 0;
+  for (const { index } of graphemeSegmenter.segment(text)) {
+    if (index >= offset) break;
+    previous = index;
+  }
+  return previous;
+};
+
+const stepGraphemeRight = (text: string, offset: number) => {
+  if (offset >= text.length) return text.length;
+  for (const { index, segment } of graphemeSegmenter.segment(text)) {
+    const end = index + segment.length;
+    if (end > offset) return end;
+  }
+  return text.length;
+};
+
+export const getGraphemeAt = (text: string, offset: number) => {
+  if (offset >= text.length) return "";
+  for (const { index, segment } of graphemeSegmenter.segment(text)) {
+    if (index === offset) return segment;
+    if (index > offset) return "";
+  }
+  return "";
+};
+
+const getLineStart = (text: string, cursorOffset: number) => {
+  if (cursorOffset === 0) return 0;
+  const lineBreakIndex = text.lastIndexOf("\n", cursorOffset - 1);
+  return lineBreakIndex === -1 ? 0 : lineBreakIndex + 1;
+};
+
+const getLineEnd = (text: string, cursorOffset: number) => {
+  const lineBreakIndex = text.indexOf("\n", cursorOffset);
+  return lineBreakIndex === -1 ? text.length : lineBreakIndex;
+};
+
+const getLineRange = (text: string, cursorOffset: number) => {
+  const start = getLineStart(text, cursorOffset);
+  const end = getLineEnd(text, cursorOffset);
+  return { start, end };
+};
+
+const getPreviousWordOffset = (text: string, cursorOffset: number) => {
+  let result = 0;
+  for (const segment of wordSegmenter.segment(text)) {
+    if (segment.index >= cursorOffset) break;
+    if (segment.isWordLike) result = segment.index;
+  }
+  return result;
+};
+
+const getNextWordOffset = (text: string, cursorOffset: number) => {
+  for (const segment of wordSegmenter.segment(text)) {
+    const end = segment.index + segment.segment.length;
+    if (end <= cursorOffset) continue;
+    if (segment.isWordLike) return end;
+  }
+  return text.length;
+};
+
+const moveVertical = (
+  text: string,
+  cursorOffset: number,
+  preferredColumn: number | undefined,
+  direction: -1 | 1,
+) => {
+  const { start, end } = getLineRange(text, cursorOffset);
+  const currentColumn = preferredColumn ?? cursorOffset - start;
+  const adjacentBreakIndex = direction === -1 ? start - 1 : end;
+
+  if (adjacentBreakIndex < 0 || adjacentBreakIndex >= text.length) {
+    return { cursorOffset, preferredColumn: currentColumn };
+  }
+
+  const adjacentCursorBase =
+    direction === -1 ? adjacentBreakIndex : adjacentBreakIndex + 1;
+  const adjacentRange = getLineRange(text, adjacentCursorBase);
+  const nextCursorOffset = clamp(
+    adjacentRange.start + currentColumn,
+    adjacentRange.start,
+    adjacentRange.end,
+  );
+
+  return {
+    cursorOffset: nextCursorOffset,
+    preferredColumn: currentColumn,
+  };
+};
+
+const clearPreferredColumn = (
+  state: TextBufferState,
+  cursorOffset: number,
+) => ({
+  ...state,
+  cursorOffset,
+  preferredColumn: undefined,
+});
+
+export const textBufferReducer = (
+  state: TextBufferState,
+  action: TextBufferAction,
+): TextBufferState => {
+  switch (action.type) {
+    case "insert": {
+      if (!action.text) return state;
+
+      const nextText =
+        state.text.slice(0, state.cursorOffset) +
+        action.text +
+        state.text.slice(state.cursorOffset);
+      const nextCursorOffset = state.cursorOffset + action.text.length;
+      return clearPreferredColumn(
+        { ...state, text: nextText },
+        nextCursorOffset,
+      );
+    }
+
+    case "delete-backward": {
+      if (state.cursorOffset === 0) return state;
+
+      const previousOffset = stepGraphemeLeft(state.text, state.cursorOffset);
+      const nextText =
+        state.text.slice(0, previousOffset) +
+        state.text.slice(state.cursorOffset);
+      return clearPreferredColumn({ ...state, text: nextText }, previousOffset);
+    }
+
+    case "delete-forward": {
+      if (state.cursorOffset >= state.text.length) return state;
+
+      const nextOffset = stepGraphemeRight(state.text, state.cursorOffset);
+      const nextText =
+        state.text.slice(0, state.cursorOffset) + state.text.slice(nextOffset);
+      return clearPreferredColumn(
+        { ...state, text: nextText },
+        state.cursorOffset,
+      );
+    }
+
+    case "move-left":
+      return clearPreferredColumn(
+        state,
+        stepGraphemeLeft(state.text, state.cursorOffset),
+      );
+
+    case "move-right":
+      return clearPreferredColumn(
+        state,
+        stepGraphemeRight(state.text, state.cursorOffset),
+      );
+
+    case "move-up": {
+      const next = moveVertical(
+        state.text,
+        state.cursorOffset,
+        state.preferredColumn,
+        -1,
+      );
+      return { ...state, ...next };
+    }
+
+    case "move-down": {
+      const next = moveVertical(
+        state.text,
+        state.cursorOffset,
+        state.preferredColumn,
+        1,
+      );
+      return { ...state, ...next };
+    }
+
+    case "move-home": {
+      const nextCursorOffset = action.multiLine
+        ? getLineStart(state.text, state.cursorOffset)
+        : 0;
+      return clearPreferredColumn(state, nextCursorOffset);
+    }
+
+    case "move-end": {
+      const nextCursorOffset = action.multiLine
+        ? getLineEnd(state.text, state.cursorOffset)
+        : state.text.length;
+      return clearPreferredColumn(state, nextCursorOffset);
+    }
+
+    case "move-word-left":
+      return clearPreferredColumn(
+        state,
+        getPreviousWordOffset(state.text, state.cursorOffset),
+      );
+
+    case "move-word-right":
+      return clearPreferredColumn(
+        state,
+        getNextWordOffset(state.text, state.cursorOffset),
+      );
+
+    case "kill-word-backward": {
+      const nextCursorOffset = getPreviousWordOffset(
+        state.text,
+        state.cursorOffset,
+      );
+      if (nextCursorOffset === state.cursorOffset) return state;
+
+      const nextText =
+        state.text.slice(0, nextCursorOffset) +
+        state.text.slice(state.cursorOffset);
+      return clearPreferredColumn(
+        { ...state, text: nextText },
+        nextCursorOffset,
+      );
+    }
+
+    case "kill-word-forward": {
+      const nextOffset = getNextWordOffset(state.text, state.cursorOffset);
+      if (nextOffset === state.cursorOffset) return state;
+
+      const nextText =
+        state.text.slice(0, state.cursorOffset) + state.text.slice(nextOffset);
+      return clearPreferredColumn(
+        { ...state, text: nextText },
+        state.cursorOffset,
+      );
+    }
+
+    case "kill-start": {
+      const rangeStart = action.multiLine
+        ? getLineStart(state.text, state.cursorOffset)
+        : 0;
+      if (rangeStart === state.cursorOffset) return state;
+
+      const nextText =
+        state.text.slice(0, rangeStart) + state.text.slice(state.cursorOffset);
+      return clearPreferredColumn({ ...state, text: nextText }, rangeStart);
+    }
+
+    case "kill-end": {
+      const lineEnd = action.multiLine
+        ? getLineEnd(state.text, state.cursorOffset)
+        : state.text.length;
+      // emacs convention: ctrl+k at EOL kills the trailing newline so the next line joins
+      const rangeEnd =
+        action.multiLine &&
+        lineEnd === state.cursorOffset &&
+        lineEnd < state.text.length
+          ? lineEnd + 1
+          : lineEnd;
+      if (rangeEnd === state.cursorOffset) return state;
+
+      const nextText =
+        state.text.slice(0, state.cursorOffset) + state.text.slice(rangeEnd);
+      return clearPreferredColumn(
+        { ...state, text: nextText },
+        state.cursorOffset,
+      );
+    }
+
+    case "set-text":
+      return {
+        text: action.text,
+        cursorOffset: action.text.length,
+        preferredColumn: undefined,
+      };
+
+    case "set-cursor":
+      return clearPreferredColumn(
+        state,
+        clamp(action.cursorOffset, 0, state.text.length),
+      );
+  }
+};
+
+export const createTextBufferState = (text = ""): TextBufferState => ({
+  text,
+  cursorOffset: text.length,
+  preferredColumn: undefined,
+});
+
+export const useTextBuffer = (text = "") => {
+  const [state, dispatch] = useReducer(
+    textBufferReducer,
+    createTextBufferState(text),
+  );
+  const setText = useCallback(
+    (nextText: string) => dispatch({ type: "set-text", text: nextText }),
+    [],
+  );
+
+  return {
+    ...state,
+    dispatchAction: dispatch,
+    setText,
+  };
+};