@databiosphere/findable-ui 49.1.0 → 49.2.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "49.1.0"
+  ".": "49.2.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [49.2.0](https://github.com/DataBiosphere/findable-ui/compare/v49.1.0...v49.2.0) (2026-03-02)
+
+
+### Features
+
+* add href to selected toggle buttons for navigation ([#805](https://github.com/DataBiosphere/findable-ui/issues/805)) ([7bacb28](https://github.com/DataBiosphere/findable-ui/commit/7bacb280d4075bb2f403d076e14ee58d26905045))
+* lift query submission into queryprovider ([#803](https://github.com/DataBiosphere/findable-ui/issues/803)) ([466780e](https://github.com/DataBiosphere/findable-ui/commit/466780e12c3218bea29b82cd9759d24334573d91))
+
+
+### Bug Fixes
+
+* use instant scroll on mount and smooth scroll on subsequent updates ([#806](https://github.com/DataBiosphere/findable-ui/issues/806)) ([30777a7](https://github.com/DataBiosphere/findable-ui/commit/30777a7338f28726959b757ffad8577890c56db0))
+* use instant scroll on mount for messages panel ([#807](https://github.com/DataBiosphere/findable-ui/issues/807)) ([30777a7](https://github.com/DataBiosphere/findable-ui/commit/30777a7338f28726959b757ffad8577890c56db0))
+
 ## [49.1.0](https://github.com/DataBiosphere/findable-ui/compare/v49.0.0...v49.1.0) (2026-02-28)
 
 

package/lib/views/ExploreView/entityList/filters/components/ToggleButtonGroup/toggleButtonGroup.d.ts

@@ -1,7 +1,6 @@
 import { JSX } from "react";
 /**
- * ToggleButtonGroup component for navigating to ResearchView.
- * Only navigates to ResearchView when the "Research" button is clicked, otherwise remains on ExploreView.
- * @returns ToggleButtonGroup JSX element.
+ * ToggleButtonGroup component for navigating between ExploreView and ResearchView.
+ * @returns ToggleButtonGroup JSX element, or null if routes are not configured.
  */
 export declare const ToggleButtonGroup: () => JSX.Element | null;

package/lib/views/ExploreView/entityList/filters/components/ToggleButtonGroup/toggleButtonGroup.js

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

package/lib/views/ResearchView/assistant/assistant.js

@@ -1,18 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAdapter } from "../adapter/useAdapter";
+import { useChatState } from "../state/hooks/UseChatState/hook";
 import { Form } from "./components/Form/form";
 import { Input } from "./components/Input/input";
-import { Messages } from "./components/Messages/messages";
 import { getPlaceholder } from "./components/Input/utils";
+import { Messages } from "./components/Messages/messages";
 import { Drawer } from "./components/Drawer/drawer";
-import { useChatState } from "../state/hooks/UseChatState/hook";
 import { ToggleButtonGroup } from "./components/ToggleButtonGroup/toggleButtonGroup";
 /**
  * Renders the research assistant drawer.
  * @returns The assistant drawer.
  */
 export const Assistant = () => {
-    const { actions } = useAdapter();
     const { state } = useChatState();
-    return (_jsxs(Drawer, { children: [_jsx(ToggleButtonGroup, {}), _jsxs(Form, { actions: actions, status: state.status, children: [_jsx(Messages, { state: state }), _jsx(Input, { disabled: state.status.loading, placeholder: getPlaceholder(state) })] })] }));
+    return (_jsxs(Drawer, { children: [_jsx(ToggleButtonGroup, {}), _jsxs(Form, { status: state.status, children: [_jsx(Messages, { state: state }), _jsx(Input, { disabled: state.status.loading, placeholder: getPlaceholder(state) })] })] }));
 };

package/lib/views/ResearchView/assistant/components/Form/form.d.ts

@@ -3,10 +3,9 @@ import { FormProps } from "./types";
 /**
  * Renders the research form.
  * @param props - Component props.
- * @param props.actions - Form actions.
  * @param props.children - Form children.
  * @param props.className - Class name for styling.
  * @param props.status - Form status.
  * @returns The research form container element.
  */
-export declare const Form: ({ actions, children, className, status, }: FormProps) => JSX.Element;
+export declare const Form: ({ children, className, status, }: FormProps) => JSX.Element;

package/lib/views/ResearchView/assistant/components/Form/form.js

@@ -1,39 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TEST_IDS } from "../../../../../tests/testIds";
-import { useChatDispatch } from "../../../state/hooks/UseChatDispatch/hook";
+import { useQuery } from "../../../state/query/hooks/UseQuery/hook";
 import { FIELD_NAME } from "./constants";
-import { getPayload } from "./utils";
 import { StyledForm } from "./form.styles";
+import { getPayload } from "./utils";
 /**
  * Renders the research form.
  * @param props - Component props.
- * @param props.actions - Form actions.
  * @param props.children - Form children.
  * @param props.className - Class name for styling.
  * @param props.status - Form status.
  * @returns The research form container element.
  */
-export const Form = ({ actions, children, className, status, }) => {
-    const dispatch = useChatDispatch();
+export const Form = ({ children, className, status, }) => {
+    const { onSubmit } = useQuery();
     return (_jsx(StyledForm, { className: className, "data-testid": TEST_IDS.RESEARCH_FORM, onSubmit: async (e) => {
-            await actions.onSubmit(e, getPayload(e), {
-                onError: (error) => {
-                    dispatch.onSetError(error.message);
-                },
-                onMutate: (form, query) => {
-                    dispatch.onSetQuery(query);
-                    dispatch.onSetStatus(true);
-                    form.reset();
-                },
+            await onSubmit(e, getPayload(e), {
                 onSettled: (form) => {
-                    dispatch.onSetStatus(false);
                     const input = form.elements.namedItem(FIELD_NAME.AI_PROMPT);
                     if (input instanceof HTMLElement)
                         input.focus();
                 },
-                onSuccess: (data) => {
-                    dispatch.onSetMessage(data);
-                },
                 status,
             });
         }, children: children }));

package/lib/views/ResearchView/assistant/components/Form/types.d.ts

@@ -1,4 +1,3 @@
-import { UseQuery } from "../../../query/types";
 import { BaseComponentProps, ChildrenProps } from "../../../../../components/types";
 import { ChatState } from "../../../state/types";
-export type FormProps = BaseComponentProps & ChildrenProps & Pick<UseQuery, "actions"> & Pick<ChatState, "status">;
+export type FormProps = BaseComponentProps & ChildrenProps & Pick<ChatState, "status">;

package/lib/views/ResearchView/assistant/components/Form/utils.d.ts

@@ -1,5 +1,5 @@
 import { FormEvent } from "react";
-import { OnSubmitPayload } from "../../../query/types";
+import { OnSubmitPayload } from "../../../state/query/types";
 /**
  * Extracts and trims form values from a form element.
  * @param form - Form element.

package/lib/views/ResearchView/assistant/components/Messages/hooks/UseScroll/hook.d.ts

@@ -1,6 +1,7 @@
 import { DependencyList, RefObject } from "react";
 /**
- * Provides a ref that auto-scrolls to the bottom when dependencies change.
+ * Provides a ref that scrolls to the bottom when dependencies change.
+ * Uses instant scroll on mount and smooth scroll on subsequent updates.
  * @param deps - Dependency list that triggers scroll on change.
  * @returns A ref to attach to the scrollable container.
  */

package/lib/views/ResearchView/assistant/components/Messages/hooks/UseScroll/hook.js

@@ -1,16 +1,19 @@
 import { useEffect, useRef } from "react";
 /**
- * Provides a ref that auto-scrolls to the bottom when dependencies change.
+ * Provides a ref that scrolls to the bottom when dependencies change.
+ * Uses instant scroll on mount and smooth scroll on subsequent updates.
  * @param deps - Dependency list that triggers scroll on change.
  * @returns A ref to attach to the scrollable container.
  */
 export function useScroll(deps) {
+    const behaviorRef = useRef("instant");
     const ref = useRef(null);
     useEffect(() => {
         ref.current?.scrollTo({
-            behavior: "smooth",
+            behavior: behaviorRef.current,
             top: ref.current.scrollHeight,
         });
+        behaviorRef.current = "smooth";
         // eslint-disable-next-line react-hooks/exhaustive-deps -- deps are passed in as an argument
     }, deps);
     return ref;

package/lib/views/ResearchView/assistant/components/ToggleButtonGroup/toggleButtonGroup.d.ts

@@ -1,7 +1,6 @@
 import { JSX } from "react";
 /**
- * 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 declare const ToggleButtonGroup: () => JSX.Element | null;

package/lib/views/ResearchView/assistant/components/ToggleButtonGroup/toggleButtonGroup.js

@@ -5,13 +5,12 @@ import Link from "next/link";
 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 = () => {
     const { routes } = useAiRoutes() || {};
     if (!routes)
         return null;
-    return (_jsx(StyledBox, { children: _jsxs(StyledToggleButtonGroup, { exclusive: true, children: [_jsxs(ToggleButton, { selected: true, value: "research", children: ["Research ", _jsx(Beta, {})] }), _jsx(ToggleButton, { component: Link, href: routes.search, value: "search", children: "Search" })] }) }));
+    return (_jsx(StyledBox, { children: _jsxs(StyledToggleButtonGroup, { exclusive: true, children: [_jsxs(ToggleButton, { component: Link, href: routes.research, selected: true, value: "research", children: ["Research ", _jsx(Beta, {})] }), _jsx(ToggleButton, { component: Link, href: routes.search, value: "search", children: "Search" })] }) }));
 };

package/lib/views/ResearchView/assistant/stories/assistant.stories.js

@@ -8,7 +8,7 @@ import { ConfigProvider } from "../../../../providers/config";
 const meta = {
     component: Assistant,
     decorators: [
-        (Story) => (_jsx(ConfigProvider, { config: INITIAL_CONFIG, children: _jsx(ChatProvider, { initialArgs: INITIAL_ARGS, children: _jsx(Box, { sx: {
+        (Story) => (_jsx(ConfigProvider, { config: INITIAL_CONFIG, children: _jsx(ChatProvider, { initialArgs: INITIAL_ARGS, url: "https://api.example.com", children: _jsx(Box, { sx: {
                         backgroundColor: PALETTE.COMMON_WHITE,
                         display: "flex",
                         flexDirection: "column",

package/lib/views/ResearchView/state/provider.d.ts

@@ -3,14 +3,17 @@ import { InitialArgs } from "./initializer/types";
 /**
  * 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 declare function ChatProvider({ children, initialArgs, }: {
+export declare function ChatProvider({ children, initialArgs, url, }: {
     children: ReactNode;
     initialArgs?: InitialArgs;
+    url: string;
 }): JSX.Element;

package/lib/views/ResearchView/state/provider.js

@@ -1,17 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ChatContext } from "./context";
 import { useChatReducer } from "./hooks/UseChatReducer/hook";
+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, }) {
+export function ChatProvider({ children, initialArgs, url, }) {
     const reducer = useChatReducer(initialArgs);
-    return (_jsx(ChatContext.Provider, { value: reducer, children: children }));
+    return (_jsx(ChatContext.Provider, { value: reducer, children: _jsx(QueryProvider, { url: url, children: children }) }));
 }

package/lib/views/ResearchView/state/query/context.d.ts

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

package/lib/views/ResearchView/state/query/context.js

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

package/lib/views/ResearchView/state/query/hooks/UseQuery/hook.d.ts

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

package/lib/views/ResearchView/state/query/hooks/UseQuery/hook.js

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

package/lib/views/ResearchView/state/query/hooks/UseSubmit/hook.d.ts

@@ -0,0 +1,7 @@
+import { 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 declare const useSubmit: (url: string) => Pick<QueryContextValue, "onSubmit">;

package/lib/views/ResearchView/state/query/hooks/UseSubmit/hook.js

@@ -0,0 +1,46 @@
+import { useCallback, useRef } from "react";
+import { fetchResponse } from "../../../../query/fetch";
+import { useChatDispatch } from "../../../hooks/UseChatDispatch/hook";
+/**
+ * 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) => {
+    const abortRef = useRef(null);
+    const dispatch = useChatDispatch();
+    const onSubmit = useCallback(async (e, payload, options) => {
+        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);
+                options.onSuccess?.(data);
+            },
+        });
+    }, [dispatch, url]);
+    return { onSubmit };
+};

package/lib/views/ResearchView/state/query/provider.d.ts

@@ -0,0 +1,13 @@
+import { JSX, ReactNode } from "react";
+/**
+ * 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 declare function QueryProvider({ children, url, }: {
+    children: ReactNode;
+    url: string;
+}): JSX.Element;

package/lib/views/ResearchView/state/query/provider.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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, }) {
+    const { onSubmit } = useSubmit(url);
+    return (_jsx(QueryContext.Provider, { value: { onSubmit }, children: children }));
+}

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

@@ -1,10 +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.
  */
@@ -13,9 +8,7 @@ export interface OnSubmitOptions {
     onMutate?: (form: HTMLFormElement, query: string) => void;
     onSettled?: (form: HTMLFormElement) => void;
     onSuccess?: (data: unknown) => void;
-    status?: {
-        loading: boolean;
-    };
+    status: Status;
 }
 /**
  * Payload for the onSubmit action.
@@ -24,8 +17,8 @@ export interface OnSubmitPayload {
     query: string;
 }
 /**
- * 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "49.1.0",
+  "version": "49.2.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/views/ExploreView/entityList/filters/components/ToggleButtonGroup/toggleButtonGroup.tsx

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

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

@@ -1,11 +1,10 @@
 import { JSX } from "react";
-import { useAdapter } from "../adapter/useAdapter";
+import { useChatState } from "../state/hooks/UseChatState/hook";
 import { Form } from "./components/Form/form";
 import { Input } from "./components/Input/input";
-import { Messages } from "./components/Messages/messages";
 import { getPlaceholder } from "./components/Input/utils";
+import { Messages } from "./components/Messages/messages";
 import { Drawer } from "./components/Drawer/drawer";
-import { useChatState } from "../state/hooks/UseChatState/hook";
 import { ToggleButtonGroup } from "./components/ToggleButtonGroup/toggleButtonGroup";
 
 /**
@@ -13,12 +12,11 @@ import { ToggleButtonGroup } from "./components/ToggleButtonGroup/toggleButtonGr
  * @returns The assistant drawer.
  */
 export const Assistant = (): JSX.Element => {
-  const { actions } = useAdapter();
   const { state } = useChatState();
   return (
     <Drawer>
       <ToggleButtonGroup />
-      <Form actions={actions} status={state.status}>
+      <Form status={state.status}>
         <Messages state={state} />
         <Input
           disabled={state.status.loading}

package/src/views/ResearchView/assistant/components/Form/form.tsx

@@ -1,50 +1,35 @@
 import { JSX } from "react";
 import { TEST_IDS } from "../../../../../tests/testIds";
-import { useChatDispatch } from "../../../state/hooks/UseChatDispatch/hook";
-import { MessageResponse } from "../../../state/types";
+import { useQuery } from "../../../state/query/hooks/UseQuery/hook";
 import { FIELD_NAME } from "./constants";
+import { StyledForm } from "./form.styles";
 import { FormProps } from "./types";
 import { getPayload } from "./utils";
-import { StyledForm } from "./form.styles";
 
 /**
  * Renders the research form.
  * @param props - Component props.
- * @param props.actions - Form actions.
  * @param props.children - Form children.
  * @param props.className - Class name for styling.
  * @param props.status - Form status.
  * @returns The research form container element.
  */
 export const Form = ({
-  actions,
   children,
   className,
   status,
 }: FormProps): JSX.Element => {
-  const dispatch = useChatDispatch();
+  const { onSubmit } = useQuery();
   return (
     <StyledForm
       className={className}
       data-testid={TEST_IDS.RESEARCH_FORM}
       onSubmit={async (e) => {
-        await actions.onSubmit(e, getPayload(e), {
-          onError: (error) => {
-            dispatch.onSetError(error.message);
-          },
-          onMutate: (form, query) => {
-            dispatch.onSetQuery(query);
-            dispatch.onSetStatus(true);
-            form.reset();
-          },
+        await onSubmit(e, getPayload(e), {
           onSettled: (form) => {
-            dispatch.onSetStatus(false);
             const input = form.elements.namedItem(FIELD_NAME.AI_PROMPT);
             if (input instanceof HTMLElement) input.focus();
           },
-          onSuccess: (data) => {
-            dispatch.onSetMessage(data as MessageResponse);
-          },
           status,
         });
       }}

package/src/views/ResearchView/assistant/components/Form/types.ts

@@ -1,4 +1,3 @@
-import { UseQuery } from "../../../query/types";
 import {
   BaseComponentProps,
   ChildrenProps,
@@ -7,5 +6,4 @@ import { ChatState } from "../../../state/types";
 
 export type FormProps = BaseComponentProps &
   ChildrenProps &
-  Pick<UseQuery, "actions"> &
   Pick<ChatState, "status">;

package/src/views/ResearchView/assistant/components/Form/utils.ts

@@ -1,6 +1,6 @@
 import { FormEvent } from "react";
 import { FIELD_NAME } from "./constants";
-import { OnSubmitPayload } from "../../../query/types";
+import { OnSubmitPayload } from "../../../state/query/types";
 
 /**
  * Extracts and trims form values from a form element.

package/src/views/ResearchView/assistant/components/Messages/hooks/UseScroll/hook.ts

@@ -1,20 +1,23 @@
 import { DependencyList, RefObject, useEffect, useRef } from "react";
 
 /**
- * Provides a ref that auto-scrolls to the bottom when dependencies change.
+ * Provides a ref that scrolls to the bottom when dependencies change.
+ * Uses instant scroll on mount and smooth scroll on subsequent updates.
  * @param deps - Dependency list that triggers scroll on change.
  * @returns A ref to attach to the scrollable container.
  */
 export function useScroll(
   deps: DependencyList,
 ): RefObject<HTMLDivElement | null> {
+  const behaviorRef = useRef<ScrollBehavior>("instant");
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     ref.current?.scrollTo({
-      behavior: "smooth",
+      behavior: behaviorRef.current,
       top: ref.current.scrollHeight,
     });
+    behaviorRef.current = "smooth";
     // eslint-disable-next-line react-hooks/exhaustive-deps -- deps are passed in as an argument
   }, deps);
 

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,7 +17,12 @@ export const ToggleButtonGroup = (): JSX.Element | null => {
   return (
     <StyledBox>
       <StyledToggleButtonGroup exclusive>
-        <ToggleButton selected value="research">
+        <ToggleButton
+          component={Link}
+          href={routes.research}
+          selected
+          value="research"
+        >
           Research <Beta />
         </ToggleButton>
         <ToggleButton component={Link} href={routes.search} value="search">

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,