@databiosphere/findable-ui 50.2.0 → 50.3.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "50.2.0"
+  ".": "50.3.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [50.3.0](https://github.com/DataBiosphere/findable-ui/compare/v50.2.1...v50.3.0) (2026-03-27)
+
+
+### Features
+
+* convert input to controlled component with inputprovider ([#815](https://github.com/DataBiosphere/findable-ui/issues/815)) ([#843](https://github.com/DataBiosphere/findable-ui/issues/843)) ([699f186](https://github.com/DataBiosphere/findable-ui/commit/699f186f8bff76a0806e2afe93bfd5815fea698b))
+
+## [50.2.1](https://github.com/DataBiosphere/findable-ui/compare/v50.2.0...v50.2.1) (2026-03-25)
+
+
+### Bug Fixes
+
+* set poweredbyclevercanary image height to 32px ([#845](https://github.com/DataBiosphere/findable-ui/issues/845)) ([fd1cbcc](https://github.com/DataBiosphere/findable-ui/commit/fd1cbcc985f4b56d7cca53d5eddf0c710d889c92))
+
 ## [50.2.0](https://github.com/DataBiosphere/findable-ui/compare/v50.1.1...v50.2.0) (2026-03-25)
 
 

package/lib/components/Layout/components/Footer/components/PoweredByCleverCanary/poweredByCleverCanary.js

@@ -13,5 +13,5 @@ import { Logo } from "../../../Header/components/Content/components/Logo/logo";
 export const PoweredByCleverCanary = ({ alt = "Powered by CleverCanary", className, ...props /* StaticImageProps */ }) => {
     if (!props.src)
         return null;
-    return (_jsx(Logo, { alt: alt, className: className, link: "https://www.clevercanary.com", src: props.src, target: ANCHOR_TARGET.BLANK }));
+    return (_jsx(Logo, { alt: alt, className: className, height: 32, link: "https://www.clevercanary.com", src: props.src, target: ANCHOR_TARGET.BLANK }));
 };

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useChatState } from "../state/hooks/UseChatState/hook";
+import { Drawer } from "./components/Drawer/drawer";
 import { Form } from "./components/Form/form";
 import { Input } from "./components/Input/input";
 import { getPlaceholder } from "./components/Input/utils";
 import { Messages } from "./components/Messages/messages";
-import { Drawer } from "./components/Drawer/drawer";
 import { ToggleButtonGroup } from "./components/ToggleButtonGroup/toggleButtonGroup";
 /**
  * Renders the research assistant drawer.

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TEST_IDS } from "../../../../../tests/testIds";
 import { useQuery } from "../../../state/query/hooks/UseQuery/hook";
-import { FIELD_NAME } from "./constants";
 import { StyledForm } from "./form.styles";
 import { getPayload } from "./utils";
 /**
@@ -15,13 +14,6 @@ import { getPayload } from "./utils";
 export const Form = ({ children, className, status, }) => {
     const { onSubmit } = useQuery();
     return (_jsx(StyledForm, { className: className, "data-testid": TEST_IDS.RESEARCH_FORM, onSubmit: async (e) => {
-            await onSubmit(e, getPayload(e), {
-                onSettled: (form) => {
-                    const input = form.elements.namedItem(FIELD_NAME.AI_PROMPT);
-                    if (input instanceof HTMLElement)
-                        input.focus();
-                },
-                status,
-            });
+            await onSubmit(e, getPayload(e), { status });
         }, children: children }));
 };

package/lib/views/ResearchView/assistant/components/Input/hooks/UseControlledInput/hook.d.ts

@@ -0,0 +1,6 @@
+import { UseControlledInputProps } from "./types";
+/**
+ * Manages controlled input state with automatic clearing on form reset.
+ * @returns The controlled input state including value, onChange, setValue, and inputRef.
+ */
+export declare const useControlledInput: () => UseControlledInputProps;

package/lib/views/ResearchView/assistant/components/Input/hooks/UseControlledInput/hook.js

@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+/**
+ * Manages controlled input state with automatic clearing on form reset.
+ * @returns The controlled input state including value, onChange, setValue, and inputRef.
+ */
+export const useControlledInput = () => {
+    const inputRef = useRef(null);
+    const [value, setValue] = useState("");
+    const onChange = useCallback((e) => {
+        setValue(e.target.value);
+    }, []);
+    useEffect(() => {
+        const form = inputRef.current?.form;
+        if (!form)
+            return;
+        const onReset = () => {
+            setValue("");
+            inputRef.current?.focus();
+        };
+        form.addEventListener("reset", onReset);
+        return () => {
+            form.removeEventListener("reset", onReset);
+        };
+    }, []);
+    return { inputRef, onChange, setValue, value };
+};

package/lib/views/ResearchView/assistant/components/Input/hooks/UseControlledInput/types.d.ts

@@ -0,0 +1,9 @@
+import { ChangeEvent, Dispatch, RefObject, SetStateAction } from "react";
+export type InputElement = HTMLInputElement | HTMLTextAreaElement;
+export type SetValue = Dispatch<SetStateAction<string>>;
+export interface UseControlledInputProps {
+    inputRef: RefObject<InputElement | null>;
+    onChange: (e: ChangeEvent<InputElement>) => void;
+    setValue: SetValue;
+    value: string;
+}

package/lib/views/ResearchView/assistant/components/Input/hooks/UseControlledInput/types.js

@@ -0,0 +1 @@
+export {};

package/lib/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/hook.d.ts

@@ -1,6 +1,8 @@
+import { SetValue } from "../UseControlledInput/types";
 import { UseKeyShortCutsProps } from "./types";
 /**
  * Provides a keydown handler that implements keyboard shortcuts for the assistant input.
+ * @param setValue - Setter for the controlled input value.
  * @returns An object containing the onKeyDown handler.
  */
-export declare const useKeyShortCuts: () => UseKeyShortCutsProps;
+export declare const useKeyShortCuts: (setValue: SetValue) => UseKeyShortCutsProps;

package/lib/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/hook.js

@@ -4,9 +4,10 @@ import { KEY } from "./constants";
 import { getHistory, handleArrowKey, handleEnterKey, handleEscapeKey, handleTabKey, } from "./utils";
 /**
  * Provides a keydown handler that implements keyboard shortcuts for the assistant input.
+ * @param setValue - Setter for the controlled input value.
  * @returns An object containing the onKeyDown handler.
  */
-export const useKeyShortCuts = () => {
+export const useKeyShortCuts = (setValue) => {
     const { state } = useChatState();
     const { messages } = state;
     const history = getHistory(messages);
@@ -22,11 +23,11 @@ export const useKeyShortCuts = () => {
         if (e.key === KEY.ENTER)
             return handleEnterKey(e);
         if (e.key === KEY.ESCAPE)
-            return handleEscapeKey(e, refs);
+            return handleEscapeKey(refs, setValue);
         if (e.key === KEY.ARROW_UP || e.key === KEY.ARROW_DOWN)
-            return handleArrowKey(e, history, refs);
+            return handleArrowKey(e, history, refs, setValue);
         if (e.key === KEY.TAB)
-            return handleTabKey(e);
-    }, [history]);
+            return handleTabKey(e, setValue);
+    }, [history, setValue]);
     return { onKeyDown };
 };

package/lib/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/types.d.ts

@@ -1,8 +1,10 @@
 import { KeyboardEvent, RefObject } from "react";
+import { InputElement } from "../UseControlledInput/types";
+export type KeyboardInputEvent = KeyboardEvent<InputElement>;
 export interface Refs {
     draftRef: RefObject<string>;
     historyIndexRef: RefObject<number>;
 }
 export interface UseKeyShortCutsProps {
-    onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown: (e: KeyboardInputEvent) => void;
 }

package/lib/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/utils.d.ts

@@ -1,6 +1,6 @@
-import { KeyboardEvent } from "react";
 import { Message } from "../../../../../state/types";
-import { Refs } from "./types";
+import { SetValue } from "../UseControlledInput/types";
+import { KeyboardInputEvent, Refs } from "./types";
 /**
  * Extracts the text of user messages from a list of messages and returns them in reverse order.
  * @param messages - An array of Message objects to extract user messages from.
@@ -12,21 +12,27 @@ export declare function getHistory(messages: Message[]): string[];
  * @param e - The keyboard event.
  * @param history - The history entries to navigate.
  * @param refs - Refs for draft text and history index.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export declare function handleArrowKey(e: KeyboardEvent<HTMLInputElement>, history: string[], refs: Refs): void;
+export declare function handleArrowKey(e: KeyboardInputEvent, history: string[], refs: Refs, setValue: SetValue): void;
 /**
  * Handles the Enter key press to submit the form, or allows newline on Shift+Enter.
  * @param e - The keyboard event.
+ * @returns Void.
  */
-export declare function handleEnterKey(e: KeyboardEvent<HTMLInputElement>): void;
+export declare function handleEnterKey(e: KeyboardInputEvent): void;
 /**
  * Handles the Escape key press to clear the input and reset history navigation.
- * @param e - The keyboard event.
  * @param refs - Refs for draft text and history index.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export declare function handleEscapeKey(e: KeyboardEvent<HTMLInputElement>, refs: Refs): void;
+export declare function handleEscapeKey(refs: Refs, setValue: SetValue): void;
 /**
  * Handles the Tab key press to auto-fill the input with the placeholder.
  * @param e - The keyboard event.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export declare function handleTabKey(e: KeyboardEvent<HTMLInputElement>): void;
+export declare function handleTabKey(e: KeyboardInputEvent, setValue: SetValue): void;

package/lib/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/utils.js

@@ -16,31 +16,33 @@ export function getHistory(messages) {
  * @param e - The keyboard event.
  * @param history - The history entries to navigate.
  * @param refs - Refs for draft text and history index.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export function handleArrowKey(e, history, refs) {
+export function handleArrowKey(e, history, refs, setValue) {
     const { draftRef, historyIndexRef } = refs;
-    const inputEl = e.currentTarget;
     if (e.key === KEY.ARROW_DOWN && historyIndexRef.current === -1) {
         return;
     }
     if (historyIndexRef.current === -1) {
-        draftRef.current = inputEl.value;
+        draftRef.current = e.currentTarget.value;
     }
     const currentIndex = historyIndexRef.current;
     const newIndex = e.key === KEY.ARROW_UP
         ? Math.min(currentIndex + 1, history.length - 1)
         : Math.max(currentIndex - 1, -1);
     if (newIndex === -1) {
-        inputEl.value = draftRef.current;
+        setValue(draftRef.current);
         historyIndexRef.current = -1;
         return;
     }
-    inputEl.value = history[newIndex] || "";
+    setValue(history[newIndex] || "");
     historyIndexRef.current = newIndex;
 }
 /**
  * Handles the Enter key press to submit the form, or allows newline on Shift+Enter.
  * @param e - The keyboard event.
+ * @returns Void.
  */
 export function handleEnterKey(e) {
     if (e.shiftKey)
@@ -51,24 +53,26 @@ export function handleEnterKey(e) {
 }
 /**
  * Handles the Escape key press to clear the input and reset history navigation.
- * @param e - The keyboard event.
  * @param refs - Refs for draft text and history index.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export function handleEscapeKey(e, refs) {
+export function handleEscapeKey(refs, setValue) {
     const { draftRef, historyIndexRef } = refs;
-    const inputEl = e.currentTarget;
-    inputEl.value = "";
+    setValue("");
     draftRef.current = "";
     historyIndexRef.current = -1;
 }
 /**
  * Handles the Tab key press to auto-fill the input with the placeholder.
  * @param e - The keyboard event.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export function handleTabKey(e) {
+export function handleTabKey(e, setValue) {
     const inputEl = e.currentTarget;
     if (inputEl.value)
         return;
     e.preventDefault();
-    inputEl.value = inputEl.placeholder;
+    setValue(inputEl.placeholder);
 }

package/lib/views/ResearchView/assistant/components/Input/input.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconButton, InputBase, Stack } from "@mui/material";
-import { INPUT_BASE_PROPS } from "./constants";
-import { StyledBox, StyledPaper } from "./input.styles";
 import { UpArrowIcon } from "../../../../../components/common/CustomIcon/components/UpArrowIcon/upArrowIcon";
 import { ICON_BUTTON_PROPS } from "../../../../../styles/common/mui/iconButton";
-import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
 import { STACK_PROPS } from "../../../../../styles/common/mui/stack";
+import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
+import { INPUT_BASE_PROPS } from "./constants";
+import { useControlledInput } from "./hooks/UseControlledInput/hook";
 import { useKeyShortCuts } from "./hooks/UseKeyShortCuts/hook";
+import { StyledBox, StyledPaper } from "./input.styles";
 /**
  * Renders an input component for the research panel.
  * @param props - Component props.
@@ -14,6 +15,7 @@ import { useKeyShortCuts } from "./hooks/UseKeyShortCuts/hook";
  * @returns Research panel input component.
  */
 export const Input = ({ disabled, ...props }) => {
-    const { onKeyDown } = useKeyShortCuts();
-    return (_jsx(StyledBox, { children: _jsxs(StyledPaper, { elevation: 0, children: [_jsx(InputBase, { ...INPUT_BASE_PROPS, onKeyDown: onKeyDown, ...props }), _jsx(Stack, { direction: STACK_PROPS.DIRECTION.ROW, gap: 2, children: _jsx(IconButton, { color: ICON_BUTTON_PROPS.COLOR.SECONDARY, disabled: disabled, size: ICON_BUTTON_PROPS.SIZE.XSMALL, type: "submit", children: _jsx(UpArrowIcon, { fontSize: SVG_ICON_PROPS.FONT_SIZE.SMALL }) }) })] }) }));
+    const { inputRef, onChange, setValue, value } = useControlledInput();
+    const { onKeyDown } = useKeyShortCuts(setValue);
+    return (_jsx(StyledBox, { children: _jsxs(StyledPaper, { elevation: 0, children: [_jsx(InputBase, { ...INPUT_BASE_PROPS, inputRef: inputRef, onChange: onChange, onKeyDown: onKeyDown, value: value, ...props }), _jsx(Stack, { direction: STACK_PROPS.DIRECTION.ROW, gap: 2, children: _jsx(IconButton, { color: ICON_BUTTON_PROPS.COLOR.SECONDARY, disabled: disabled, size: ICON_BUTTON_PROPS.SIZE.XSMALL, type: "submit", children: _jsx(UpArrowIcon, { fontSize: SVG_ICON_PROPS.FONT_SIZE.SMALL }) }) })] }) }));
 };

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

@@ -1,2 +1,2 @@
 import { IconButtonProps, InputBaseProps } from "@mui/material";
-export type InputProps = InputBaseProps & Pick<IconButtonProps, "disabled">;
+export type InputProps = Omit<InputBaseProps, "onChange" | "value"> & Pick<IconButtonProps, "disabled">;

package/package.json

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

package/src/components/Layout/components/Footer/components/PoweredByCleverCanary/poweredByCleverCanary.tsx

@@ -22,6 +22,7 @@ export const PoweredByCleverCanary = ({
     <Logo
       alt={alt}
       className={className}
+      height={32}
       link="https://www.clevercanary.com"
       src={props.src}
       target={ANCHOR_TARGET.BLANK}

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

@@ -1,10 +1,10 @@
 import { JSX } from "react";
 import { useChatState } from "../state/hooks/UseChatState/hook";
+import { Drawer } from "./components/Drawer/drawer";
 import { Form } from "./components/Form/form";
 import { Input } from "./components/Input/input";
 import { getPlaceholder } from "./components/Input/utils";
 import { Messages } from "./components/Messages/messages";
-import { Drawer } from "./components/Drawer/drawer";
 import { ToggleButtonGroup } from "./components/ToggleButtonGroup/toggleButtonGroup";
 
 /**

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

@@ -1,7 +1,6 @@
 import { JSX } from "react";
 import { TEST_IDS } from "../../../../../tests/testIds";
 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";
@@ -25,13 +24,7 @@ export const Form = ({
       className={className}
       data-testid={TEST_IDS.RESEARCH_FORM}
       onSubmit={async (e) => {
-        await onSubmit(e, getPayload(e), {
-          onSettled: (form) => {
-            const input = form.elements.namedItem(FIELD_NAME.AI_PROMPT);
-            if (input instanceof HTMLElement) input.focus();
-          },
-          status,
-        });
+        await onSubmit(e, getPayload(e), { status });
       }}
     >
       {children}

package/src/views/ResearchView/assistant/components/Input/hooks/UseControlledInput/hook.ts

@@ -0,0 +1,33 @@
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from "react";
+import { InputElement, UseControlledInputProps } from "./types";
+
+/**
+ * Manages controlled input state with automatic clearing on form reset.
+ * @returns The controlled input state including value, onChange, setValue, and inputRef.
+ */
+export const useControlledInput = (): UseControlledInputProps => {
+  const inputRef = useRef<InputElement>(null);
+  const [value, setValue] = useState<string>("");
+
+  const onChange = useCallback((e: ChangeEvent<InputElement>): void => {
+    setValue(e.target.value);
+  }, []);
+
+  useEffect(() => {
+    const form = inputRef.current?.form;
+    if (!form) return;
+
+    const onReset = (): void => {
+      setValue("");
+      inputRef.current?.focus();
+    };
+
+    form.addEventListener("reset", onReset);
+
+    return (): void => {
+      form.removeEventListener("reset", onReset);
+    };
+  }, []);
+
+  return { inputRef, onChange, setValue, value };
+};

package/src/views/ResearchView/assistant/components/Input/hooks/UseControlledInput/types.ts

@@ -0,0 +1,12 @@
+import { ChangeEvent, Dispatch, RefObject, SetStateAction } from "react";
+
+export type InputElement = HTMLInputElement | HTMLTextAreaElement;
+
+export type SetValue = Dispatch<SetStateAction<string>>;
+
+export interface UseControlledInputProps {
+  inputRef: RefObject<InputElement | null>;
+  onChange: (e: ChangeEvent<InputElement>) => void;
+  setValue: SetValue;
+  value: string;
+}

package/src/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/hook.ts

@@ -1,7 +1,8 @@
-import { KeyboardEvent, useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
+import { SetValue } from "../UseControlledInput/types";
 import { useChatState } from "../../../../../state/hooks/UseChatState/hook";
 import { KEY } from "./constants";
-import { UseKeyShortCutsProps } from "./types";
+import { KeyboardInputEvent, UseKeyShortCutsProps } from "./types";
 import {
   getHistory,
   handleArrowKey,
@@ -12,9 +13,10 @@ import {
 
 /**
  * Provides a keydown handler that implements keyboard shortcuts for the assistant input.
+ * @param setValue - Setter for the controlled input value.
  * @returns An object containing the onKeyDown handler.
  */
-export const useKeyShortCuts = (): UseKeyShortCutsProps => {
+export const useKeyShortCuts = (setValue: SetValue): UseKeyShortCutsProps => {
   const { state } = useChatState();
   const { messages } = state;
 
@@ -30,15 +32,15 @@ export const useKeyShortCuts = (): UseKeyShortCutsProps => {
   }, [messages]);
 
   const onKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLInputElement>) => {
+    (e: KeyboardInputEvent) => {
       const refs = { draftRef, historyIndexRef };
       if (e.key === KEY.ENTER) return handleEnterKey(e);
-      if (e.key === KEY.ESCAPE) return handleEscapeKey(e, refs);
+      if (e.key === KEY.ESCAPE) return handleEscapeKey(refs, setValue);
       if (e.key === KEY.ARROW_UP || e.key === KEY.ARROW_DOWN)
-        return handleArrowKey(e, history, refs);
-      if (e.key === KEY.TAB) return handleTabKey(e);
+        return handleArrowKey(e, history, refs, setValue);
+      if (e.key === KEY.TAB) return handleTabKey(e, setValue);
     },
-    [history],
+    [history, setValue],
   );
 
   return { onKeyDown };

package/src/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/types.ts

@@ -1,4 +1,7 @@
 import { KeyboardEvent, RefObject } from "react";
+import { InputElement } from "../UseControlledInput/types";
+
+export type KeyboardInputEvent = KeyboardEvent<InputElement>;
 
 export interface Refs {
   draftRef: RefObject<string>;
@@ -6,5 +9,5 @@ export interface Refs {
 }
 
 export interface UseKeyShortCutsProps {
-  onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+  onKeyDown: (e: KeyboardInputEvent) => void;
 }

package/src/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/utils.ts

@@ -1,8 +1,8 @@
-import { KeyboardEvent } from "react";
 import { isUserMessage } from "../../../../../state/guards/guards";
 import { Message } from "../../../../../state/types";
-import { Refs } from "./types";
+import { SetValue } from "../UseControlledInput/types";
 import { KEY } from "./constants";
+import { KeyboardInputEvent, Refs } from "./types";
 
 /**
  * Extracts the text of user messages from a list of messages and returns them in reverse order.
@@ -21,21 +21,23 @@ export function getHistory(messages: Message[]): string[] {
  * @param e - The keyboard event.
  * @param history - The history entries to navigate.
  * @param refs - Refs for draft text and history index.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
 export function handleArrowKey(
-  e: KeyboardEvent<HTMLInputElement>,
+  e: KeyboardInputEvent,
   history: string[],
   refs: Refs,
+  setValue: SetValue,
 ): void {
   const { draftRef, historyIndexRef } = refs;
-  const inputEl = e.currentTarget;
 
   if (e.key === KEY.ARROW_DOWN && historyIndexRef.current === -1) {
     return;
   }
 
   if (historyIndexRef.current === -1) {
-    draftRef.current = inputEl.value;
+    draftRef.current = e.currentTarget.value;
   }
 
   const currentIndex = historyIndexRef.current;
@@ -45,20 +47,21 @@ export function handleArrowKey(
       : Math.max(currentIndex - 1, -1);
 
   if (newIndex === -1) {
-    inputEl.value = draftRef.current;
+    setValue(draftRef.current);
     historyIndexRef.current = -1;
     return;
   }
 
-  inputEl.value = history[newIndex] || "";
+  setValue(history[newIndex] || "");
   historyIndexRef.current = newIndex;
 }
 
 /**
  * Handles the Enter key press to submit the form, or allows newline on Shift+Enter.
  * @param e - The keyboard event.
+ * @returns Void.
  */
-export function handleEnterKey(e: KeyboardEvent<HTMLInputElement>): void {
+export function handleEnterKey(e: KeyboardInputEvent): void {
   if (e.shiftKey) return;
   e.preventDefault();
   const formEl = e.currentTarget.form;
@@ -67,16 +70,13 @@ export function handleEnterKey(e: KeyboardEvent<HTMLInputElement>): void {
 
 /**
  * Handles the Escape key press to clear the input and reset history navigation.
- * @param e - The keyboard event.
  * @param refs - Refs for draft text and history index.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export function handleEscapeKey(
-  e: KeyboardEvent<HTMLInputElement>,
-  refs: Refs,
-): void {
+export function handleEscapeKey(refs: Refs, setValue: SetValue): void {
   const { draftRef, historyIndexRef } = refs;
-  const inputEl = e.currentTarget;
-  inputEl.value = "";
+  setValue("");
   draftRef.current = "";
   historyIndexRef.current = -1;
 }
@@ -84,10 +84,12 @@ export function handleEscapeKey(
 /**
  * Handles the Tab key press to auto-fill the input with the placeholder.
  * @param e - The keyboard event.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export function handleTabKey(e: KeyboardEvent<HTMLInputElement>): void {
+export function handleTabKey(e: KeyboardInputEvent, setValue: SetValue): void {
   const inputEl = e.currentTarget;
   if (inputEl.value) return;
   e.preventDefault();
-  inputEl.value = inputEl.placeholder;
+  setValue(inputEl.placeholder);
 }

package/src/views/ResearchView/assistant/components/Input/input.tsx

@@ -1,13 +1,14 @@
 import { IconButton, InputBase, Stack } from "@mui/material";
 import { JSX } from "react";
-import { INPUT_BASE_PROPS } from "./constants";
-import { StyledBox, StyledPaper } from "./input.styles";
 import { UpArrowIcon } from "../../../../../components/common/CustomIcon/components/UpArrowIcon/upArrowIcon";
 import { ICON_BUTTON_PROPS } from "../../../../../styles/common/mui/iconButton";
-import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
 import { STACK_PROPS } from "../../../../../styles/common/mui/stack";
-import { InputProps } from "./types";
+import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
+import { INPUT_BASE_PROPS } from "./constants";
+import { useControlledInput } from "./hooks/UseControlledInput/hook";
 import { useKeyShortCuts } from "./hooks/UseKeyShortCuts/hook";
+import { StyledBox, StyledPaper } from "./input.styles";
+import { InputProps } from "./types";
 
 /**
  * Renders an input component for the research panel.
@@ -16,11 +17,19 @@ import { useKeyShortCuts } from "./hooks/UseKeyShortCuts/hook";
  * @returns Research panel input component.
  */
 export const Input = ({ disabled, ...props }: InputProps): JSX.Element => {
-  const { onKeyDown } = useKeyShortCuts();
+  const { inputRef, onChange, setValue, value } = useControlledInput();
+  const { onKeyDown } = useKeyShortCuts(setValue);
   return (
     <StyledBox>
       <StyledPaper elevation={0}>
-        <InputBase {...INPUT_BASE_PROPS} onKeyDown={onKeyDown} {...props} />
+        <InputBase
+          {...INPUT_BASE_PROPS}
+          inputRef={inputRef}
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+          value={value}
+          {...props}
+        />
         <Stack direction={STACK_PROPS.DIRECTION.ROW} gap={2}>
           <IconButton
             color={ICON_BUTTON_PROPS.COLOR.SECONDARY}

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

@@ -1,3 +1,4 @@
 import { IconButtonProps, InputBaseProps } from "@mui/material";
 
-export type InputProps = InputBaseProps & Pick<IconButtonProps, "disabled">;
+export type InputProps = Omit<InputBaseProps, "onChange" | "value"> &
+  Pick<IconButtonProps, "disabled">;

package/tests/research.useKeyShortCuts.test.ts

@@ -14,6 +14,7 @@ interface MockInputElement {
 
 // Mock useChatState
 const mockUseChatState = jest.fn();
+const mockSetValue = jest.fn();
 
 jest.unstable_mockModule(
   "../src/views/ResearchView/state/hooks/UseChatState/hook",
@@ -96,12 +97,13 @@ function setupMockState(messages: Message[]): void {
 describe("useKeyShortCuts", () => {
   beforeEach(() => {
     mockUseChatState.mockReset();
+    mockSetValue.mockReset();
     setupMockState([]);
   });
 
   describe("enter key", () => {
     it("should prevent default and submit form on Enter", () => {
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl("some query");
       const event = createMockKeyEvent("Enter", inputEl);
 
@@ -112,7 +114,7 @@ describe("useKeyShortCuts", () => {
     });
 
     it("should not prevent default on Shift+Enter", () => {
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl("some query");
       const event = createMockKeyEvent("Enter", inputEl, true);
 
@@ -125,13 +127,13 @@ describe("useKeyShortCuts", () => {
 
   describe("escape key", () => {
     it("should clear input value on Escape", () => {
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl("some text");
       const event = createMockKeyEvent("Escape", inputEl);
 
       result.current.onKeyDown(event);
 
-      expect(inputEl.value).toBe("");
+      expect(mockSetValue).toHaveBeenCalledWith("");
     });
   });
 
@@ -142,13 +144,13 @@ describe("useKeyShortCuts", () => {
         createPromptMessage("response"),
         createUserMessage("second query"),
       ]);
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl();
       const event = createMockKeyEvent("ArrowUp", inputEl);
 
       result.current.onKeyDown(event);
 
-      expect(inputEl.value).toBe("second query");
+      expect(mockSetValue).toHaveBeenCalledWith("second query");
     });
 
     it("should navigate through multiple history entries on ArrowUp", () => {
@@ -156,25 +158,25 @@ describe("useKeyShortCuts", () => {
         createUserMessage("first query"),
         createUserMessage("second query"),
       ]);
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl();
 
       result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
-      expect(inputEl.value).toBe("second query");
+      expect(mockSetValue).toHaveBeenLastCalledWith("second query");
 
       result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
-      expect(inputEl.value).toBe("first query");
+      expect(mockSetValue).toHaveBeenLastCalledWith("first query");
     });
 
     it("should clamp at oldest history entry on ArrowUp", () => {
       setupMockState([createUserMessage("only query")]);
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl();
 
       result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
       result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
 
-      expect(inputEl.value).toBe("only query");
+      expect(mockSetValue).toHaveBeenLastCalledWith("only query");
     });
 
     it("should navigate forward on ArrowDown and restore draft at index -1", () => {
@@ -182,63 +184,63 @@ describe("useKeyShortCuts", () => {
         createUserMessage("first query"),
         createUserMessage("second query"),
       ]);
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl("my draft");
 
       // Navigate up twice.
       result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
       result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
-      expect(inputEl.value).toBe("first query");
+      expect(mockSetValue).toHaveBeenLastCalledWith("first query");
 
       // Navigate down once.
       result.current.onKeyDown(createMockKeyEvent("ArrowDown", inputEl));
-      expect(inputEl.value).toBe("second query");
+      expect(mockSetValue).toHaveBeenLastCalledWith("second query");
 
       // Navigate down to restore draft.
       result.current.onKeyDown(createMockKeyEvent("ArrowDown", inputEl));
-      expect(inputEl.value).toBe("my draft");
+      expect(mockSetValue).toHaveBeenLastCalledWith("my draft");
     });
 
     it("should not navigate on ArrowDown when not browsing history", () => {
       setupMockState([createUserMessage("some query")]);
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl("current text");
       const event = createMockKeyEvent("ArrowDown", inputEl);
 
       result.current.onKeyDown(event);
 
-      expect(inputEl.value).toBe("current text");
+      expect(mockSetValue).not.toHaveBeenCalled();
     });
 
     it("should save draft before entering history", () => {
       setupMockState([createUserMessage("history entry")]);
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl("my draft text");
 
       // Navigate up to save draft and enter history.
       result.current.onKeyDown(createMockKeyEvent("ArrowUp", inputEl));
-      expect(inputEl.value).toBe("history entry");
+      expect(mockSetValue).toHaveBeenLastCalledWith("history entry");
 
       // Navigate down to restore draft.
       result.current.onKeyDown(createMockKeyEvent("ArrowDown", inputEl));
-      expect(inputEl.value).toBe("my draft text");
+      expect(mockSetValue).toHaveBeenLastCalledWith("my draft text");
     });
   });
 
   describe("tab key", () => {
     it("should fill input with placeholder when input is empty", () => {
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl("", "Search for studies...");
       const event = createMockKeyEvent("Tab", inputEl);
 
       result.current.onKeyDown(event);
 
       expect(event.preventDefault).toHaveBeenCalled();
-      expect(inputEl.value).toBe("Search for studies...");
+      expect(mockSetValue).toHaveBeenCalledWith("Search for studies...");
     });
 
     it("should not prevent default when input has value", () => {
-      const { result } = renderHook(() => useKeyShortCuts());
+      const { result } = renderHook(() => useKeyShortCuts(mockSetValue));
       const inputEl = createMockInputEl(
         "existing text",
         "Search for studies...",
@@ -248,7 +250,7 @@ describe("useKeyShortCuts", () => {
       result.current.onKeyDown(event);
 
       expect(event.preventDefault).not.toHaveBeenCalled();
-      expect(inputEl.value).toBe("existing text");
+      expect(mockSetValue).not.toHaveBeenCalled();
     });
   });
 });