@llamaindex/ui/src/indexes/hooks/use-index.ts

A comprehensive UI component library built with React, TypeScript, and Tailwind CSS for LlamaIndex applications

import { useCallback, useEffect, useMemo, useState } from "react";
import { useIndexStore } from "./use-index-store";
import type { Pipeline } from "../store/helper";

interface UseIndexResult {
  index: Pipeline | null;
  loading: boolean;
  error: string | null;
  refresh: () => Promise<void>;
}

export function useIndex(id: string): UseIndexResult {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const get = useIndexStore();
  const record = get.indexes;
  const refreshStore = get.refresh;

  const index = useMemo(() => record[id] ?? null, [record, id]);

  const refresh = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      await refreshStore(id);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to refresh index");
    } finally {
      setLoading(false);
    }
  }, [id, refreshStore]);

  useEffect(() => {
    if (!index) {
      // Attempt to fetch if missing
      void refresh();
    }
  }, [index, refresh]);

  return { index, loading, error, refresh };
}