Initial commit

Signed-off-by: Ilan Bigio <ilan@openai.com>

codex-cli/src/components/vendor/ink-select/index.js

@@ -0,0 +1 @@
+export * from "./select.js";

codex-cli/src/components/vendor/ink-select/option-map.js

@@ -0,0 +1,26 @@
+export default class OptionMap extends Map {
+  first;
+  constructor(options) {
+    const items = [];
+    let firstItem;
+    let previous;
+    let index = 0;
+    for (const option of options) {
+      const item = {
+        ...option,
+        previous,
+        next: undefined,
+        index,
+      };
+      if (previous) {
+        previous.next = item;
+      }
+      firstItem ||= item;
+      items.push([option.value, item]);
+      index++;
+      previous = item;
+    }
+    super(items);
+    this.first = firstItem;
+  }
+}

codex-cli/src/components/vendor/ink-select/select-option.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { Box, Text } from "ink";
+import figures from "figures";
+import { styles } from "./theme";
+export function SelectOption({ isFocused, isSelected, children }) {
+  return React.createElement(
+    Box,
+    { ...styles.option({ isFocused }) },
+    isFocused &&
+      React.createElement(
+        Text,
+        { ...styles.focusIndicator() },
+        figures.pointer,
+      ),
+    React.createElement(
+      Text,
+      { ...styles.label({ isFocused, isSelected }) },
+      children,
+    ),
+    isSelected &&
+      React.createElement(
+        Text,
+        { ...styles.selectedIndicator() },
+        figures.tick,
+      ),
+  );
+}

codex-cli/src/components/vendor/ink-select/select.js

@@ -0,0 +1,53 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { styles } from "./theme";
+import { SelectOption } from "./select-option";
+import { useSelectState } from "./use-select-state";
+import { useSelect } from "./use-select";
+export function Select({
+  isDisabled = false,
+  visibleOptionCount = 5,
+  highlightText,
+  options,
+  defaultValue,
+  onChange,
+}) {
+  const state = useSelectState({
+    visibleOptionCount,
+    options,
+    defaultValue,
+    onChange,
+  });
+  useSelect({ isDisabled, state });
+  return React.createElement(
+    Box,
+    { ...styles.container() },
+    state.visibleOptions.map((option) => {
+      // eslint-disable-next-line prefer-destructuring
+      let label = option.label;
+      if (highlightText && option.label.includes(highlightText)) {
+        const index = option.label.indexOf(highlightText);
+        label = React.createElement(
+          React.Fragment,
+          null,
+          option.label.slice(0, index),
+          React.createElement(
+            Text,
+            { ...styles.highlightedText() },
+            highlightText,
+          ),
+          option.label.slice(index + highlightText.length),
+        );
+      }
+      return React.createElement(
+        SelectOption,
+        {
+          key: option.value,
+          isFocused: !isDisabled && state.focusedValue === option.value,
+          isSelected: state.value === option.value,
+        },
+        label,
+      );
+    }),
+  );
+}

codex-cli/src/components/vendor/ink-select/theme.js

@@ -0,0 +1,32 @@
+const theme = {
+  styles: {
+    container: () => ({
+      flexDirection: "column",
+    }),
+    option: ({ isFocused }) => ({
+      gap: 1,
+      paddingLeft: isFocused ? 0 : 2,
+    }),
+    selectedIndicator: () => ({
+      color: "green",
+    }),
+    focusIndicator: () => ({
+      color: "blue",
+    }),
+    label({ isFocused, isSelected }) {
+      let color;
+      if (isSelected) {
+        color = "green";
+      }
+      if (isFocused) {
+        color = "blue";
+      }
+      return { color };
+    },
+    highlightedText: () => ({
+      bold: true,
+    }),
+  },
+};
+export const styles = theme.styles;
+export default theme;

codex-cli/src/components/vendor/ink-select/use-select-state.js

@@ -0,0 +1,158 @@
+import { isDeepStrictEqual } from "node:util";
+import { useReducer, useCallback, useMemo, useState, useEffect } from "react";
+import OptionMap from "./option-map";
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "focus-next-option": {
+      if (!state.focusedValue) {
+        return state;
+      }
+      const item = state.optionMap.get(state.focusedValue);
+      if (!item) {
+        return state;
+      }
+      // eslint-disable-next-line prefer-destructuring
+      const next = item.next;
+      if (!next) {
+        return state;
+      }
+      const needsToScroll = next.index >= state.visibleToIndex;
+      if (!needsToScroll) {
+        return {
+          ...state,
+          focusedValue: next.value,
+        };
+      }
+      const nextVisibleToIndex = Math.min(
+        state.optionMap.size,
+        state.visibleToIndex + 1,
+      );
+      const nextVisibleFromIndex =
+        nextVisibleToIndex - state.visibleOptionCount;
+      return {
+        ...state,
+        focusedValue: next.value,
+        visibleFromIndex: nextVisibleFromIndex,
+        visibleToIndex: nextVisibleToIndex,
+      };
+    }
+    case "focus-previous-option": {
+      if (!state.focusedValue) {
+        return state;
+      }
+      const item = state.optionMap.get(state.focusedValue);
+      if (!item) {
+        return state;
+      }
+      // eslint-disable-next-line prefer-destructuring
+      const previous = item.previous;
+      if (!previous) {
+        return state;
+      }
+      const needsToScroll = previous.index <= state.visibleFromIndex;
+      if (!needsToScroll) {
+        return {
+          ...state,
+          focusedValue: previous.value,
+        };
+      }
+      const nextVisibleFromIndex = Math.max(0, state.visibleFromIndex - 1);
+      const nextVisibleToIndex =
+        nextVisibleFromIndex + state.visibleOptionCount;
+      return {
+        ...state,
+        focusedValue: previous.value,
+        visibleFromIndex: nextVisibleFromIndex,
+        visibleToIndex: nextVisibleToIndex,
+      };
+    }
+    case "select-focused-option": {
+      return {
+        ...state,
+        previousValue: state.value,
+        value: state.focusedValue,
+      };
+    }
+    case "reset": {
+      return action.state;
+    }
+  }
+};
+const createDefaultState = ({
+  visibleOptionCount: customVisibleOptionCount,
+  defaultValue,
+  options,
+}) => {
+  const visibleOptionCount =
+    typeof customVisibleOptionCount === "number"
+      ? Math.min(customVisibleOptionCount, options.length)
+      : options.length;
+  const optionMap = new OptionMap(options);
+  return {
+    optionMap,
+    visibleOptionCount,
+    focusedValue: optionMap.first?.value,
+    visibleFromIndex: 0,
+    visibleToIndex: visibleOptionCount,
+    previousValue: defaultValue,
+    value: defaultValue,
+  };
+};
+export const useSelectState = ({
+  visibleOptionCount = 5,
+  options,
+  defaultValue,
+  onChange,
+}) => {
+  const [state, dispatch] = useReducer(
+    reducer,
+    { visibleOptionCount, defaultValue, options },
+    createDefaultState,
+  );
+  const [lastOptions, setLastOptions] = useState(options);
+  if (options !== lastOptions && !isDeepStrictEqual(options, lastOptions)) {
+    dispatch({
+      type: "reset",
+      state: createDefaultState({ visibleOptionCount, defaultValue, options }),
+    });
+    setLastOptions(options);
+  }
+  const focusNextOption = useCallback(() => {
+    dispatch({
+      type: "focus-next-option",
+    });
+  }, []);
+  const focusPreviousOption = useCallback(() => {
+    dispatch({
+      type: "focus-previous-option",
+    });
+  }, []);
+  const selectFocusedOption = useCallback(() => {
+    dispatch({
+      type: "select-focused-option",
+    });
+  }, []);
+  const visibleOptions = useMemo(() => {
+    return options
+      .map((option, index) => ({
+        ...option,
+        index,
+      }))
+      .slice(state.visibleFromIndex, state.visibleToIndex);
+  }, [options, state.visibleFromIndex, state.visibleToIndex]);
+  useEffect(() => {
+    if (state.value && state.previousValue !== state.value) {
+      onChange?.(state.value);
+    }
+  }, [state.previousValue, state.value, options, onChange]);
+  return {
+    focusedValue: state.focusedValue,
+    visibleFromIndex: state.visibleFromIndex,
+    visibleToIndex: state.visibleToIndex,
+    value: state.value,
+    visibleOptions,
+    focusNextOption,
+    focusPreviousOption,
+    selectFocusedOption,
+  };
+};

codex-cli/src/components/vendor/ink-select/use-select.js

@@ -0,0 +1,17 @@
+import { useInput } from "ink";
+export const useSelect = ({ isDisabled = false, state }) => {
+  useInput(
+    (_input, key) => {
+      if (key.downArrow) {
+        state.focusNextOption();
+      }
+      if (key.upArrow) {
+        state.focusPreviousOption();
+      }
+      if (key.return) {
+        state.selectFocusedOption();
+      }
+    },
+    { isActive: !isDisabled },
+  );
+};