@renxqoo/renx-code 0.0.3 → 0.0.4

package/src/hooks/use-file-mention-menu.ts

@@ -0,0 +1,196 @@
+import type { KeyEvent, TextareaRenderable } from '@opentui/core';
+import { useCallback, useEffect, useMemo, useRef, useState, type RefObject } from 'react';
+
+import { findTrailingFileMention } from '../files/file-mention-query';
+import type { PromptFileSelection } from '../files/types';
+import { isMediaSelection } from '../files/attachment-capabilities';
+import { listWorkspaceFiles } from '../files/workspace-files';
+
+type UseFileMentionMenuParams = {
+  value: string;
+  textareaRef: RefObject<TextareaRenderable | null>;
+  selectedFiles: PromptFileSelection[];
+  onFilesSelected: (files: PromptFileSelection[]) => void;
+  onValueChange: (value: string) => void;
+  disabled?: boolean;
+};
+
+type UseFileMentionMenuResult = {
+  visible: boolean;
+  loading: boolean;
+  error: string | null;
+  options: PromptFileSelection[];
+  selectedIndex: number;
+  handleKeyDown: (event: KeyEvent) => boolean;
+};
+
+const normalize = (value: string) => value.trim().toLowerCase();
+
+export const useFileMentionMenu = ({
+  value,
+  textareaRef,
+  selectedFiles,
+  onFilesSelected,
+  onValueChange,
+  disabled = false,
+}: UseFileMentionMenuParams): UseFileMentionMenuResult => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [dismissedToken, setDismissedToken] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [allOptions, setAllOptions] = useState<PromptFileSelection[]>([]);
+  const hasLoadedRef = useRef(false);
+  const requestIdRef = useRef(0);
+
+  const mention = useMemo(() => findTrailingFileMention(value), [value]);
+
+  useEffect(() => {
+    if (!mention || mention.token !== dismissedToken) {
+      return;
+    }
+    setDismissedToken(null);
+  }, [dismissedToken, mention]);
+
+  useEffect(() => {
+    if (disabled || !mention || hasLoadedRef.current) {
+      return;
+    }
+
+    hasLoadedRef.current = true;
+    setLoading(true);
+    setError(null);
+    requestIdRef.current += 1;
+    const requestId = requestIdRef.current;
+
+    void listWorkspaceFiles()
+      .then(files => {
+        if (requestId !== requestIdRef.current) {
+          return;
+        }
+        setAllOptions(files);
+      })
+      .catch(loadError => {
+        if (requestId !== requestIdRef.current) {
+          return;
+        }
+        setError(loadError instanceof Error ? loadError.message : String(loadError));
+      })
+      .finally(() => {
+        if (requestId !== requestIdRef.current) {
+          return;
+        }
+        setLoading(false);
+      });
+  }, [disabled, mention]);
+
+  const options = useMemo(() => {
+    if (!mention) {
+      return [];
+    }
+    const selectedPaths = new Set(selectedFiles.map(file => file.absolutePath));
+    const query = normalize(mention.query);
+    return allOptions.filter(item => {
+      if (selectedPaths.has(item.absolutePath)) {
+        return false;
+      }
+      return query.length === 0 || item.relativePath.toLowerCase().includes(query);
+    });
+  }, [allOptions, mention, selectedFiles]);
+
+  const visible = !disabled && !!mention && mention.token !== dismissedToken;
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [mention?.token]);
+
+  useEffect(() => {
+    if (selectedIndex < options.length) {
+      return;
+    }
+    setSelectedIndex(0);
+  }, [options.length, selectedIndex]);
+
+  const applySelection = useCallback(
+    (index: number) => {
+      const selected = options[index];
+      if (!selected || !mention) {
+        return false;
+      }
+
+      onFilesSelected([selected]);
+      const nextValue = isMediaSelection(selected)
+        ? value.slice(0, mention.start)
+        : `${value.slice(0, mention.start)}@/${selected.relativePath} `;
+      onValueChange(nextValue);
+
+      const textarea = textareaRef.current;
+      if (textarea) {
+        textarea.setText(nextValue);
+        textarea.cursorOffset = nextValue.length;
+      }
+      return true;
+    },
+    [mention, onFilesSelected, onValueChange, options, textareaRef, value]
+  );
+
+  const moveSelection = useCallback(
+    (step: number) => {
+      if (!visible || options.length === 0) {
+        return;
+      }
+      setSelectedIndex(current => (current + step + options.length) % options.length);
+    },
+    [options.length, visible]
+  );
+
+  const handleKeyDown = useCallback(
+    (event: KeyEvent): boolean => {
+      if (!visible) {
+        return false;
+      }
+
+      const name = (event.name ?? '').toLowerCase();
+      const ctrlOnly = !!event.ctrl && !event.shift && !event.meta;
+      const isUp = name === 'up' || (ctrlOnly && name === 'p');
+      const isDown = name === 'down' || (ctrlOnly && name === 'n');
+
+      if (isUp) {
+        moveSelection(-1);
+        event.preventDefault();
+        return true;
+      }
+
+      if (isDown) {
+        moveSelection(1);
+        event.preventDefault();
+        return true;
+      }
+
+      if (name === 'escape') {
+        setDismissedToken(mention?.token ?? null);
+        event.preventDefault();
+        return true;
+      }
+
+      if (name === 'return' || name === 'enter' || name === 'tab') {
+        const applied = applySelection(selectedIndex);
+        if (applied || options.length === 0) {
+          event.preventDefault();
+          return true;
+        }
+      }
+
+      return false;
+    },
+    [applySelection, mention?.token, moveSelection, options.length, selectedIndex, visible]
+  );
+
+  return {
+    visible,
+    loading,
+    error,
+    options,
+    selectedIndex,
+    handleKeyDown,
+  };
+};

package/src/hooks/use-file-picker.ts

@@ -0,0 +1,185 @@
+import type { KeyEvent } from '@opentui/core';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import type { PromptFileSelection } from '../files/types';
+import { listWorkspaceFiles } from '../files/workspace-files';
+
+type UseFilePickerResult = {
+  visible: boolean;
+  loading: boolean;
+  error: string | null;
+  search: string;
+  options: PromptFileSelection[];
+  selectedIndex: number;
+  selectedPaths: Set<string>;
+  open: (initialSelection?: PromptFileSelection[]) => void;
+  close: () => void;
+  setSearch: (value: string) => void;
+  toggleSelectedIndex: () => void;
+  setSelectedIndex: (value: number) => void;
+  handleListKeyDown: (event: KeyEvent) => boolean;
+  confirmSelected: () => PromptFileSelection[];
+};
+
+const normalize = (value: string) => value.trim().toLowerCase();
+
+export const useFilePicker = (): UseFilePickerResult => {
+  const [visible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [search, setSearch] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [allOptions, setAllOptions] = useState<PromptFileSelection[]>([]);
+  const [selectedPaths, setSelectedPaths] = useState<Set<string>>(new Set());
+  const requestIdRef = useRef(0);
+
+  const options = useMemo(() => {
+    const query = normalize(search);
+    if (!query) {
+      return allOptions;
+    }
+    return allOptions.filter(item => item.relativePath.toLowerCase().includes(query));
+  }, [allOptions, search]);
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [search]);
+
+  useEffect(() => {
+    if (selectedIndex < options.length) {
+      return;
+    }
+    setSelectedIndex(0);
+  }, [options.length, selectedIndex]);
+
+  const close = useCallback(() => {
+    requestIdRef.current += 1;
+    setVisible(false);
+    setLoading(false);
+    setError(null);
+    setSearch('');
+    setSelectedIndex(0);
+    setAllOptions([]);
+    setSelectedPaths(new Set());
+  }, []);
+
+  const open = useCallback((initialSelection: PromptFileSelection[] = []) => {
+    setVisible(true);
+    setLoading(true);
+    setError(null);
+    setSearch('');
+    setSelectedIndex(0);
+    setAllOptions([]);
+    setSelectedPaths(new Set(initialSelection.map(item => item.absolutePath)));
+    requestIdRef.current += 1;
+    const requestId = requestIdRef.current;
+
+    void listWorkspaceFiles()
+      .then(files => {
+        if (requestId !== requestIdRef.current) {
+          return;
+        }
+        setAllOptions(files);
+      })
+      .catch(loadError => {
+        if (requestId !== requestIdRef.current) {
+          return;
+        }
+        setError(loadError instanceof Error ? loadError.message : String(loadError));
+      })
+      .finally(() => {
+        if (requestId !== requestIdRef.current) {
+          return;
+        }
+        setLoading(false);
+      });
+  }, []);
+
+  const toggleSelectedIndex = useCallback(() => {
+    const selected = options[selectedIndex];
+    if (!selected) {
+      return;
+    }
+    setSelectedPaths(current => {
+      const next = new Set(current);
+      if (next.has(selected.absolutePath)) {
+        next.delete(selected.absolutePath);
+      } else {
+        next.add(selected.absolutePath);
+      }
+      return next;
+    });
+  }, [options, selectedIndex]);
+
+  const confirmSelected = useCallback(() => {
+    const result = allOptions.filter(item => selectedPaths.has(item.absolutePath));
+    close();
+    return result;
+  }, [allOptions, close, selectedPaths]);
+
+  const handleListKeyDown = useCallback(
+    (event: KeyEvent): boolean => {
+      if (!visible) {
+        return false;
+      }
+
+      const name = (event.name ?? '').toLowerCase();
+      const ctrlOnly = !!event.ctrl && !event.shift && !event.meta;
+      const isUp = name === 'up' || (ctrlOnly && name === 'p');
+      const isDown = name === 'down' || (ctrlOnly && name === 'n');
+
+      if (isUp) {
+        if (options.length > 0) {
+          setSelectedIndex(current => (current - 1 + options.length) % options.length);
+        }
+        event.preventDefault();
+        return true;
+      }
+
+      if (isDown) {
+        if (options.length > 0) {
+          setSelectedIndex(current => (current + 1) % options.length);
+        }
+        event.preventDefault();
+        return true;
+      }
+
+      if (name === 'space') {
+        toggleSelectedIndex();
+        event.preventDefault();
+        return true;
+      }
+
+      if (name === 'escape') {
+        close();
+        event.preventDefault();
+        return true;
+      }
+
+      if (name === 'return' || name === 'enter') {
+        event.preventDefault();
+        return true;
+      }
+
+      return false;
+    },
+    [close, options.length, toggleSelectedIndex, visible]
+  );
+
+  return {
+    visible,
+    loading,
+    error,
+    search,
+    options,
+    selectedIndex,
+    selectedPaths,
+    open,
+    close,
+    setSearch,
+    toggleSelectedIndex,
+    setSelectedIndex,
+    handleListKeyDown,
+    confirmSelected,
+  };
+};

package/src/hooks/use-model-picker.ts

@@ -0,0 +1,196 @@
+import type { KeyEvent } from '@opentui/core';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { listAgentModels, switchAgentModel } from '../agent/runtime/runtime';
+import type { AgentModelOption } from '../agent/runtime/model-types';
+
+type UseModelPickerParams = {
+  onModelChanged: (label: string) => void;
+};
+
+type UseModelPickerResult = {
+  visible: boolean;
+  loading: boolean;
+  switching: boolean;
+  error: string | null;
+  search: string;
+  options: AgentModelOption[];
+  selectedIndex: number;
+  open: () => void;
+  close: () => void;
+  setSearch: (value: string) => void;
+  setSelectedIndex: (value: number) => void;
+  handleListKeyDown: (event: KeyEvent) => boolean;
+  confirmSelected: () => Promise<boolean>;
+};
+
+const normalize = (value: string) => value.trim().toLowerCase();
+
+export const useModelPicker = ({ onModelChanged }: UseModelPickerParams): UseModelPickerResult => {
+  const [visible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [switching, setSwitching] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [search, setSearch] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [allOptions, setAllOptions] = useState<AgentModelOption[]>([]);
+  const requestIdRef = useRef(0);
+
+  const options = useMemo(() => {
+    const query = normalize(search);
+    if (!query) {
+      return allOptions;
+    }
+
+    return allOptions.filter(item => {
+      const provider = item.provider.toLowerCase();
+      const id = item.id.toLowerCase();
+      const name = item.name.toLowerCase();
+      return provider.includes(query) || id.includes(query) || name.includes(query);
+    });
+  }, [allOptions, search]);
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [search]);
+
+  useEffect(() => {
+    if (selectedIndex < options.length) {
+      return;
+    }
+    setSelectedIndex(0);
+  }, [options.length, selectedIndex]);
+
+  const close = useCallback(() => {
+    requestIdRef.current += 1;
+    setVisible(false);
+    setLoading(false);
+    setSwitching(false);
+    setError(null);
+    setSearch('');
+    setSelectedIndex(0);
+  }, []);
+
+  const open = useCallback(() => {
+    setVisible(true);
+    setLoading(true);
+    setError(null);
+    setSearch('');
+    setSelectedIndex(0);
+    setAllOptions([]);
+    requestIdRef.current += 1;
+    const requestId = requestIdRef.current;
+
+    void listAgentModels()
+      .then(models => {
+        if (requestId !== requestIdRef.current) {
+          return;
+        }
+        setAllOptions(models);
+      })
+      .catch(loadError => {
+        if (requestId !== requestIdRef.current) {
+          return;
+        }
+        setError(loadError instanceof Error ? loadError.message : String(loadError));
+      })
+      .finally(() => {
+        if (requestId !== requestIdRef.current) {
+          return;
+        }
+        setLoading(false);
+      });
+  }, []);
+
+  const confirmSelected = useCallback(async (): Promise<boolean> => {
+    const selected = options[selectedIndex];
+    if (!selected || !visible || loading || switching) {
+      return false;
+    }
+
+    if (!selected.configured) {
+      setError(`Missing env ${selected.apiKeyEnv} for ${selected.id}.`);
+      return true;
+    }
+
+    try {
+      setSwitching(true);
+      setError(null);
+      const changed = await switchAgentModel(selected.id);
+      setAllOptions(prev =>
+        prev.map(item => ({
+          ...item,
+          current: item.id === changed.modelId,
+        }))
+      );
+      onModelChanged(changed.modelLabel);
+      close();
+      return true;
+    } catch (switchError) {
+      setError(switchError instanceof Error ? switchError.message : String(switchError));
+      return true;
+    } finally {
+      setSwitching(false);
+    }
+  }, [close, loading, onModelChanged, options, selectedIndex, switching, visible]);
+
+  const handleListKeyDown = useCallback(
+    (event: KeyEvent): boolean => {
+      if (!visible) {
+        return false;
+      }
+
+      const name = (event.name ?? '').toLowerCase();
+      const ctrlOnly = !!event.ctrl && !event.shift && !event.meta;
+      const isUp = name === 'up' || (ctrlOnly && name === 'p');
+      const isDown = name === 'down' || (ctrlOnly && name === 'n');
+
+      if (isUp) {
+        if (options.length > 0) {
+          setSelectedIndex(current => (current - 1 + options.length) % options.length);
+        }
+        event.preventDefault();
+        return true;
+      }
+
+      if (isDown) {
+        if (options.length > 0) {
+          setSelectedIndex(current => (current + 1) % options.length);
+        }
+        event.preventDefault();
+        return true;
+      }
+
+      if (name === 'escape') {
+        close();
+        event.preventDefault();
+        return true;
+      }
+
+      if (name === 'return' || name === 'enter') {
+        void confirmSelected();
+        event.preventDefault();
+        return true;
+      }
+
+      return false;
+    },
+    [close, confirmSelected, options.length, visible]
+  );
+
+  return {
+    visible,
+    loading,
+    switching,
+    error,
+    search,
+    options,
+    selectedIndex,
+    open,
+    close,
+    setSearch,
+    setSelectedIndex,
+    handleListKeyDown,
+    confirmSelected,
+  };
+};