Function InputBar

packages/cli/src/components/input-bar.tsx:272–611

({ onSubmit, disabled = false }: Props)

];

export function InputBar({ onSubmit, disabled = false }: Props) {
  const { mode, toggleMode, setMode, setModel } = usePromptConfig();
  const textareaRef = useRef<TextareaRenderable>(null);
  const onSubmitRef = useRef<() => void>(() => {});
  const activeMentionRef = useRef<MentionMatch | null>(null);
  const mentionScrollRef = useRef<ScrollBoxRenderable>(null);

  const renderer = useRenderer();
  const navigate = useNavigate();
  const toast = useToast();
  const dialog = useDialog();
  const { colors } = useTheme();
  const { isTopLayer, push, pop, setResponder } = useKeyboardLayer();

  const [activeMention, setActiveMention] = useState<MentionMatch | null>(null);
  const [mentionCandidates, setMentionCandidates] = useState<MentionCandidate[]>([]);
  const [mentionSelectedIndex, setMentionSelectedIndex] = useState(0);

  const {
    showCommandMenu,
    commandQuery,
    selectedIndex,
    scrollRef,
    handleContentChange,
    resolveCommand,
    setSelectedIndex,
  } = useCommandMenu();

  const showMentionMenu = activeMention !== null;

  const closeMentionMenu = useCallback(() => {
    activeMentionRef.current = null;
    setActiveMention(null);
    setMentionCandidates([]);
    pop("mention");
  }, [pop]);

  const syncMentionMenu = useCallback((text: string, cursorOffset: number) => {
    const nextMention = findActiveMention(text, cursorOffset);
    const previousMention = activeMentionRef.current;
    const mentionChanged =
      previousMention?.start !== nextMention?.start ||
      previousMention?.end !== nextMention?.end ||
      previousMention?.query !== nextMention?.query;

    if (!nextMention) {
      if (previousMention) {
        closeMentionMenu();
      }
      return;
    }

    activeMentionRef.current = nextMention;
    setActiveMention(nextMention);
    push("mention", () => {
      closeMentionMenu();
      return true;
    });