Function AIContextProvider

frontend/src/plugins/ai/react/context.tsx:94–326

({ children }: { children: ReactNode })

const EMPTY_AI_SETTING: AISetting = createProto(AISettingSchema, {});

export function AIContextProvider({ children }: { children: ReactNode }) {
  // ---- AI setting --------------------------------------------------------

  // The original Vue ProvideAIContext fetched the AI setting on mount.
  // Mirror that here. `getOrFetchSettingByName` is idempotent; firing it
  // again on remount is cheap.
  useEffect(() => {
    void useAppStore
      .getState()
      .getOrFetchSettingByName(Setting_SettingName.AI, /* silent */ true);
  }, []);

  // Subscribe to the setting cache so this re-resolves once the AI setting
  // loads (selector returns the AI value or the stable empty fallback).
  const settingsByName = useAppStore((s) => s.settingsByName);
  const aiSetting = useMemo<AISetting>(() => {
    const setting = useAppStore
      .getState()
      .getSettingByName(Setting_SettingName.AI);
    if (setting?.value?.value?.case === "ai") {
      return setting.value.value.value;
    }
    return EMPTY_AI_SETTING;
  }, [settingsByName]);

  const currentTab = useCurrentSQLEditorTab();

  const { instance, database } = useConnectionOfCurrentSQLEditorTab();
  const engine: Engine | undefined = instance.engine;

  // `useAppDatabaseMetadata` self-fetches and subscribes; the app-store
  // dbSchema slice dedupes concurrent fetches, so this stays cheap even
  // if another mount triggers the same fetch in parallel.
  const databaseName = database.name;
  const fetchedMetadata = useAppDatabaseMetadata(databaseName ?? "");
  const databaseMetadata = databaseName ? fetchedMetadata : undefined;

  const schema: string | undefined = currentTab?.connection.schema;

  // ---- Per-tab chat info -------------------------------------------------
  //
  // Conversations live in the Zustand `useConversationStore`. We subscribe to
  // the conversation map + per-connection ready flags and derive the current
  // tab's chat (list / ready / selected) with plain React state — no Vue refs.
  const tabInstance = currentTab?.connection.instance;
  const tabDatabase = currentTab?.connection.database;
  const connKey =
    tabInstance && tabDatabase ? `${tabInstance}/${tabDatabase}` : "";

  const conversationsById = useConversationStore((s) => s.conversationsById);
  const readyByConnection = useConversationStore((s) => s.readyByConnection);

  // Fetch the tab's conversations on connection change; the store sets the
  // ready flag and merges results.
  useEffect(() => {
    if (!tabInstance || !tabDatabase) return;
    void useConversationStore.getState().fetchConversationListByConnection({
      instance: tabInstance,