@databiosphere/findable-ui 49.1.0 → 49.3.0

package/src/views/ResearchView/assistant/components/ToggleButtonGroup/toggleButtonGroup.tsx

@@ -6,9 +6,8 @@ import { useAiRoutes } from "../../../../../hooks/ai/useAiRoutes/hook";
 import { Beta } from "../../../../../components/common/Chip/components/Beta/beta";
 
 /**
- * ToggleButtonGroup component for navigating to ExploreView.
- * Only navigates to ExploreView when the "Search" button is clicked, otherwise remains on ResearchView.
- * @returns ToggleButtonGroup JSX element.
+ * ToggleButtonGroup component for navigating between ResearchView and ExploreView.
+ * @returns ToggleButtonGroup JSX element, or null if routes are not configured.
  */
 export const ToggleButtonGroup = (): JSX.Element | null => {
   const { routes } = useAiRoutes() || {};
@@ -18,12 +17,17 @@ export const ToggleButtonGroup = (): JSX.Element | null => {
   return (
     <StyledBox>
       <StyledToggleButtonGroup exclusive>
-        <ToggleButton selected value="research">
-          Research <Beta />
-        </ToggleButton>
         <ToggleButton component={Link} href={routes.search} value="search">
           Search
         </ToggleButton>
+        <ToggleButton
+          component={Link}
+          href={routes.research}
+          selected
+          value="research"
+        >
+          Research <Beta />
+        </ToggleButton>
       </StyledToggleButtonGroup>
     </StyledBox>
   );

package/src/views/ResearchView/assistant/stories/assistant.stories.tsx

@@ -12,7 +12,7 @@ const meta: Meta<typeof Assistant> = {
   decorators: [
     (Story): JSX.Element => (
       <ConfigProvider config={INITIAL_CONFIG}>
-        <ChatProvider initialArgs={INITIAL_ARGS}>
+        <ChatProvider initialArgs={INITIAL_ARGS} url="https://api.example.com">
           <Box
             sx={{
               backgroundColor: PALETTE.COMMON_WHITE,

package/src/views/ResearchView/state/provider.tsx

@@ -2,26 +2,33 @@ import { JSX, ReactNode } from "react";
 import { ChatContext } from "./context";
 import { useChatReducer } from "./hooks/UseChatReducer/hook";
 import { InitialArgs } from "./initializer/types";
+import { QueryProvider } from "./query/provider";
 
 /**
  * Provider for Chat state.
  * Manages chat state such as query and response data.
+ * Nests QueryProvider to own the fetch lifecycle for query submission.
  *
  * @param props - Props.
  * @param props.children - Children.
  * @param props.initialArgs - Initial arguments.
+ * @param props.url - URL for the query endpoint.
  *
  * @returns A context provider wrapping the given children.
  */
 export function ChatProvider({
   children,
   initialArgs,
+  url,
 }: {
   children: ReactNode;
   initialArgs?: InitialArgs;
+  url: string;
 }): JSX.Element {
   const reducer = useChatReducer(initialArgs);
   return (
-    <ChatContext.Provider value={reducer}>{children}</ChatContext.Provider>
+    <ChatContext.Provider value={reducer}>
+      <QueryProvider url={url}>{children}</QueryProvider>
+    </ChatContext.Provider>
   );
 }

package/src/views/ResearchView/state/query/context.ts

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+import { QueryContextValue } from "./types";
+
+/**
+ * Context for the query submission provider.
+ */
+export const QueryContext = createContext<QueryContextValue>({
+  onSubmit: () => Promise.resolve(),
+});

package/src/views/ResearchView/state/query/hooks/UseQuery/hook.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { QueryContext } from "../../context";
+import { QueryContextValue } from "../../types";
+
+/**
+ * Hook to access query submission from the QueryProvider.
+ * @returns Query context value with onSubmit.
+ */
+export const useQuery = (): QueryContextValue => {
+  return useContext(QueryContext);
+};

package/src/views/ResearchView/state/query/hooks/UseSubmit/hook.ts

@@ -0,0 +1,66 @@
+import { FormEvent, useCallback, useRef } from "react";
+import { fetchResponse } from "../../../../query/fetch";
+import { useChatDispatch } from "../../../hooks/UseChatDispatch/hook";
+import { MessageResponse } from "../../../types";
+import {
+  OnSubmitOptions,
+  OnSubmitPayload,
+  QueryContextValue,
+} from "../../types";
+
+/**
+ * Hook that manages query submission and abort lifecycle.
+ * @param url - The API URL to send queries to.
+ * @returns Object containing the onSubmit handler.
+ */
+export const useSubmit = (url: string): Pick<QueryContextValue, "onSubmit"> => {
+  const abortRef = useRef<AbortController>(null);
+  const dispatch = useChatDispatch();
+
+  const onSubmit = useCallback(
+    async (
+      e: FormEvent<HTMLFormElement>,
+      payload: OnSubmitPayload,
+      options: OnSubmitOptions,
+    ): Promise<void> => {
+      e.preventDefault();
+
+      if (options.status.loading) return;
+
+      const { query } = payload;
+      if (!query) return;
+
+      const form = e.currentTarget;
+
+      // Dispatch query and loading state.
+      dispatch.onSetQuery(query);
+      dispatch.onSetStatus(true);
+      form.reset();
+      options.onMutate?.(form, query);
+
+      // Abort any in-flight request.
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+
+      await fetchResponse(url, query, {
+        controller,
+        onError: (error) => {
+          dispatch.onSetError(error.message);
+          options.onError?.(error);
+        },
+        onSettled: () => {
+          dispatch.onSetStatus(false);
+          options.onSettled?.(form);
+        },
+        onSuccess: (data) => {
+          dispatch.onSetMessage(data as MessageResponse);
+          options.onSuccess?.(data);
+        },
+      });
+    },
+    [dispatch, url],
+  );
+
+  return { onSubmit };
+};

package/src/views/ResearchView/state/query/provider.tsx

@@ -0,0 +1,27 @@
+import { JSX, ReactNode } from "react";
+import { QueryContext } from "./context";
+import { useSubmit } from "./hooks/UseSubmit/hook";
+
+/**
+ * Provider that owns the fetch lifecycle for query submission.
+ * Persists across page navigation so in-flight requests are not aborted.
+ * @param props - Props.
+ * @param props.children - Children.
+ * @param props.url - URL for the query endpoint.
+ * @returns A context provider wrapping the given children.
+ */
+export function QueryProvider({
+  children,
+  url,
+}: {
+  children: ReactNode;
+  url: string;
+}): JSX.Element {
+  const { onSubmit } = useSubmit(url);
+
+  return (
+    <QueryContext.Provider value={{ onSubmit }}>
+      {children}
+    </QueryContext.Provider>
+  );
+}

package/src/views/ResearchView/{query → state/query}/types.ts

@@ -1,15 +1,5 @@
 import { FormEvent } from "react";
-
-/**
- * Actions returned by the useQuery hook.
- */
-export interface Actions {
-  onSubmit: (
-    e: FormEvent<HTMLFormElement>,
-    payload: OnSubmitPayload,
-    options?: OnSubmitOptions,
-  ) => Promise<void>;
-}
+import { Status } from "../types";
 
 /**
  * Options for the onSubmit action.
@@ -19,7 +9,7 @@ export interface OnSubmitOptions {
   onMutate?: (form: HTMLFormElement, query: string) => void;
   onSettled?: (form: HTMLFormElement) => void;
   onSuccess?: (data: unknown) => void;
-  status?: { loading: boolean };
+  status: Status;
 }
 
 /**
@@ -30,8 +20,12 @@ export interface OnSubmitPayload {
 }
 
 /**
- * Return type for the useQuery hook.
+ * Context value for the QueryProvider.
  */
-export interface UseQuery {
-  actions: Actions;
+export interface QueryContextValue {
+  onSubmit: (
+    e: FormEvent<HTMLFormElement>,
+    payload: OnSubmitPayload,
+    options: OnSubmitOptions,
+  ) => Promise<void>;
 }

package/tests/research.queryProvider.test.ts

@@ -0,0 +1,321 @@
+import { jest } from "@jest/globals";
+import { act, renderHook } from "@testing-library/react";
+import { FormEvent, ReactNode } from "react";
+import React from "react";
+
+/**
+ * Fetch callbacks passed to fetchResponse.
+ */
+interface FetchCallbacks {
+  controller: AbortController;
+  onError: (error: Error) => void;
+  onSettled: () => void;
+  onSuccess: (data: unknown) => void;
+}
+
+// Mock fetchResponse
+const mockFetchResponse = jest.fn();
+
+jest.unstable_mockModule("../src/views/ResearchView/query/fetch", () => ({
+  fetchResponse: mockFetchResponse,
+}));
+
+const { useQuery } =
+  await import("../src/views/ResearchView/state/query/hooks/UseQuery/hook");
+const { ChatProvider } =
+  await import("../src/views/ResearchView/state/provider");
+
+/**
+ * Creates a mock form event for testing.
+ * @returns Mock FormEvent.
+ */
+function createMockFormEvent(): FormEvent<HTMLFormElement> {
+  const mockForm = document.createElement("form");
+
+  // Mock reset
+  mockForm.reset = jest.fn();
+
+  return {
+    currentTarget: mockForm,
+    preventDefault: jest.fn(),
+  } as unknown as FormEvent<HTMLFormElement>;
+}
+
+/**
+ * Creates a wrapper component that provides ChatProvider with a URL.
+ * @param url - The query endpoint URL.
+ * @returns A wrapper component for renderHook.
+ */
+function createWrapper(
+  url = "https://api.example.com",
+): ({ children }: { children: ReactNode }) => ReactNode {
+  return function Wrapper({ children }: { children: ReactNode }): ReactNode {
+    return React.createElement(ChatProvider, { url }, children);
+  };
+}
+
+describe("QueryProvider", () => {
+  beforeEach(() => {
+    mockFetchResponse.mockReset();
+    mockFetchResponse.mockImplementation(
+      async (_url: unknown, _query: unknown, callbacks: unknown) => {
+        (callbacks as FetchCallbacks).onSettled();
+      },
+    );
+  });
+
+  describe("initial state", () => {
+    it("should return onSubmit function", () => {
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+
+      expect(typeof result.current.onSubmit).toBe("function");
+    });
+  });
+
+  describe("submit guards", () => {
+    it("should not submit if status is loading", async () => {
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+      const event = createMockFormEvent();
+
+      await act(async () => {
+        await result.current.onSubmit(
+          event,
+          { query: "valid query" },
+          { status: { loading: true } },
+        );
+      });
+
+      expect(mockFetchResponse).not.toHaveBeenCalled();
+    });
+
+    it("should not submit if query is empty", async () => {
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+      const event = createMockFormEvent();
+
+      await act(async () => {
+        await result.current.onSubmit(
+          event,
+          { query: "" },
+          { status: { loading: false } },
+        );
+      });
+
+      expect(mockFetchResponse).not.toHaveBeenCalled();
+    });
+
+    it("should submit if query is provided", async () => {
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+      const event = createMockFormEvent();
+
+      await act(async () => {
+        await result.current.onSubmit(
+          event,
+          { query: "valid query" },
+          { status: { loading: false } },
+        );
+      });
+
+      expect(mockFetchResponse).toHaveBeenCalled();
+    });
+  });
+
+  describe("submit behavior", () => {
+    it("should call preventDefault on form event", async () => {
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+      const event = createMockFormEvent();
+
+      await act(async () => {
+        await result.current.onSubmit(
+          event,
+          { query: "diabetes studies" },
+          { status: { loading: false } },
+        );
+      });
+
+      expect(event.preventDefault).toHaveBeenCalled();
+    });
+
+    it("should call fetchResponse with correct arguments", async () => {
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+      const event = createMockFormEvent();
+
+      await act(async () => {
+        await result.current.onSubmit(
+          event,
+          { query: "diabetes studies" },
+          { status: { loading: false } },
+        );
+      });
+
+      expect(mockFetchResponse).toHaveBeenCalledWith(
+        "https://api.example.com",
+        "diabetes studies",
+        expect.objectContaining({
+          controller: expect.any(AbortController),
+          onError: expect.any(Function),
+          onSettled: expect.any(Function),
+          onSuccess: expect.any(Function),
+        }),
+      );
+    });
+
+    it("should pass url to fetchResponse", async () => {
+      const testUrl = "https://custom-api.example.com/search";
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(testUrl),
+      });
+      const event = createMockFormEvent();
+
+      await act(async () => {
+        await result.current.onSubmit(
+          event,
+          { query: "cancer studies" },
+          { status: { loading: false } },
+        );
+      });
+
+      expect(mockFetchResponse).toHaveBeenCalledWith(
+        testUrl,
+        expect.any(String),
+        expect.any(Object),
+      );
+    });
+  });
+
+  describe("option callbacks", () => {
+    it("should call onMutate after dispatching query", async () => {
+      const onMutate = jest.fn();
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+      const event = createMockFormEvent();
+
+      await act(async () => {
+        await result.current.onSubmit(
+          event,
+          { query: "test query" },
+          { onMutate, status: { loading: false } },
+        );
+      });
+
+      expect(onMutate).toHaveBeenCalledWith(event.currentTarget, "test query");
+    });
+
+    it("should call onSettled after fetch completes", async () => {
+      const onSettled = jest.fn();
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+      const event = createMockFormEvent();
+
+      await act(async () => {
+        await result.current.onSubmit(
+          event,
+          { query: "test query" },
+          { onSettled, status: { loading: false } },
+        );
+      });
+
+      expect(onSettled).toHaveBeenCalledWith(event.currentTarget);
+    });
+
+    it("should call onSuccess after successful fetch", async () => {
+      const mockData = { message: "success" };
+      mockFetchResponse.mockImplementation(
+        async (_url: unknown, _query: unknown, callbacks: unknown) => {
+          (callbacks as FetchCallbacks).onSuccess(mockData);
+          (callbacks as FetchCallbacks).onSettled();
+        },
+      );
+
+      const onSuccess = jest.fn();
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+      const event = createMockFormEvent();
+
+      await act(async () => {
+        await result.current.onSubmit(
+          event,
+          { query: "test query" },
+          { onSuccess, status: { loading: false } },
+        );
+      });
+
+      expect(onSuccess).toHaveBeenCalledWith(mockData);
+    });
+
+    it("should call onError after failed fetch", async () => {
+      const mockError = new Error("Network error");
+      mockFetchResponse.mockImplementation(
+        async (_url: unknown, _query: unknown, callbacks: unknown) => {
+          (callbacks as FetchCallbacks).onError(mockError);
+          (callbacks as FetchCallbacks).onSettled();
+        },
+      );
+
+      const onError = jest.fn();
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+      const event = createMockFormEvent();
+
+      await act(async () => {
+        await result.current.onSubmit(
+          event,
+          { query: "test query" },
+          { onError, status: { loading: false } },
+        );
+      });
+
+      expect(onError).toHaveBeenCalledWith(mockError);
+    });
+  });
+
+  describe("abort handling", () => {
+    it("should create new AbortController for each submit", async () => {
+      const controllers: AbortController[] = [];
+      mockFetchResponse.mockImplementation(
+        async (_url: unknown, _query: unknown, callbacks: unknown) => {
+          controllers.push((callbacks as FetchCallbacks).controller);
+          (callbacks as FetchCallbacks).onSettled();
+        },
+      );
+
+      const { result } = renderHook(() => useQuery(), {
+        wrapper: createWrapper(),
+      });
+
+      await act(async () => {
+        await result.current.onSubmit(
+          createMockFormEvent(),
+          { query: "query 1" },
+          { status: { loading: false } },
+        );
+      });
+
+      await act(async () => {
+        await result.current.onSubmit(
+          createMockFormEvent(),
+          { query: "query 2" },
+          { status: { loading: false } },
+        );
+      });
+
+      expect(controllers).toHaveLength(2);
+      expect(controllers[0]).not.toBe(controllers[1]);
+    });
+  });
+});

package/lib/views/ResearchView/adapter/useAdapter.d.ts

@@ -1,6 +0,0 @@
-import { UseQuery } from "../query/types";
-/**
- * Adapter hook that wires AI query to app config.
- * @returns AI query interface with actions.
- */
-export declare function useAdapter(): UseQuery;

package/lib/views/ResearchView/adapter/useAdapter.js

@@ -1,15 +0,0 @@
-import { useConfig } from "../../../hooks/useConfig";
-import { useQuery } from "../query/useQuery";
-/**
- * Adapter hook that wires AI query to app config.
- * @returns AI query interface with actions.
- */
-export function useAdapter() {
-    const { config } = useConfig();
-    const { ai } = config;
-    const { url } = ai || {};
-    if (!url) {
-        throw new Error("Chat URL is not configured");
-    }
-    return useQuery(url);
-}

package/lib/views/ResearchView/query/useQuery.d.ts

@@ -1,7 +0,0 @@
-import { UseQuery } from "./types";
-/**
- * Custom hook for managing the actions of a chat query form.
- * @param url - The URL to send the query to.
- * @returns An object containing the actions of the query.
- */
-export declare const useQuery: (url: string) => UseQuery;

package/lib/views/ResearchView/query/useQuery.js

@@ -1,44 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-import { fetchResponse } from "./fetch";
-/**
- * Custom hook for managing the actions of a chat query form.
- * @param url - The URL to send the query to.
- * @returns An object containing the actions of the query.
- */
-export const useQuery = (url) => {
-    const abortRef = useRef(null);
-    const onSubmit = useCallback(async (e, payload, options) => {
-        e.preventDefault();
-        if (options?.status?.loading)
-            return;
-        const form = e.currentTarget;
-        const { query } = payload;
-        if (!query)
-            return;
-        // Call onMutate callback
-        options?.onMutate?.(form, query);
-        // Abort any in-flight request
-        abortRef.current?.abort();
-        const controller = new AbortController();
-        abortRef.current = controller;
-        await fetchResponse(url, query, {
-            controller,
-            onError: (error) => {
-                options?.onError?.(error);
-            },
-            onSettled: () => {
-                options?.onSettled?.(form);
-            },
-            onSuccess: (data) => {
-                options?.onSuccess?.(data);
-            },
-        });
-    }, [url]);
-    // Abort any in-flight request on unmount.
-    useEffect(() => {
-        return () => {
-            abortRef.current?.abort();
-        };
-    }, []);
-    return { actions: { onSubmit } };
-};

package/src/views/ResearchView/adapter/useAdapter.ts

@@ -1,19 +0,0 @@
-import { useConfig } from "../../../hooks/useConfig";
-import { UseQuery } from "../query/types";
-import { useQuery } from "../query/useQuery";
-
-/**
- * Adapter hook that wires AI query to app config.
- * @returns AI query interface with actions.
- */
-export function useAdapter(): UseQuery {
-  const { config } = useConfig();
-  const { ai } = config;
-  const { url } = ai || {};
-
-  if (!url) {
-    throw new Error("Chat URL is not configured");
-  }
-
-  return useQuery(url);
-}