@databiosphere/findable-ui 49.0.0 → 49.2.0

package/lib/views/ExploreView/exploreView.js

@@ -11,7 +11,6 @@ import { SearchAllFilters } from "../../components/Filter/components/SearchAllFi
 import { SURFACE_TYPE } from "../../components/Filter/components/surfaces/types";
 import { Index as IndexView } from "../../components/Index/index";
 import { SidebarLabel } from "../../components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel";
-import { SidebarTools } from "../../components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles";
 import { Sidebar } from "../../components/Layout/components/Sidebar/sidebar";
 import { useStateSyncManager } from "../../hooks/stateSyncManager/hook";
 import { useBreakpoint } from "../../hooks/useBreakpoint";
@@ -26,6 +25,8 @@ import { SELECT_CATEGORY_KEY } from "../../providers/exploreState/constants";
 import { TEST_IDS } from "../../tests/testIds";
 import { useUpdateFilterSort } from "./hooks/UseUpdateFilterSort/hook";
 import { buildStateSyncManagerContext } from "./utils";
+import { StyledGrid, StyledStack } from "./entityList/filters/filters.styles";
+import { ToggleButtonGroup } from "./entityList/filters/components/ToggleButtonGroup/toggleButtonGroup";
 export const ExploreView = (props) => {
     const { mdDown } = useBreakpoint();
     const { config, entityConfig } = useConfig(); // Get app level config.
@@ -99,7 +100,7 @@ export const ExploreView = (props) => {
             });
         }
     }, [entityListType, exploreDispatch]);
-    return (_jsxs(DrawerProvider, { children: [categoryViews && !!categoryViews.length && (_jsxs(Sidebar, { children: [_jsxs(SidebarTools, { "data-testid": TEST_IDS.FILTER_CONTROLS, children: [_jsx(SidebarLabel, { label: "Filters" }), _jsxs(Stack, { direction: "row", gap: 4, children: [_jsx(ClearAllFilters, {}), _jsx(FilterSort, { enabled: filterSortEnabled, filterSort: filterSort, onFilterSortChange: onFilterSortChange })] }), _jsx(SearchAllFilters, { categoryViews: categoryViews, onFilter: onFilterChange.bind(null, true), surfaceType: mdDown ? SURFACE_TYPE.POPPER_DRAWER : SURFACE_TYPE.POPPER_MENU })] }), _jsx(Filters, { categoryFilters: categoryFilters, onFilter: onFilterChange.bind(null, false), surfaceType: mdDown ? SURFACE_TYPE.DRAWER : SURFACE_TYPE.MENU, trackFilterOpened: trackingConfig?.trackFilterOpened })] })), _jsx(IndexView, { className: props.className, categoryFilters: categoryFilters, entityListType: entityListType, entityName: label, loading: loading })] }));
+    return (_jsxs(DrawerProvider, { children: [categoryViews && !!categoryViews.length && (_jsxs(Sidebar, { children: [_jsx(ToggleButtonGroup, {}), _jsxs(StyledStack, { children: [_jsxs(StyledGrid, { "data-testid": TEST_IDS.FILTER_CONTROLS, children: [_jsx(SidebarLabel, { label: "Filters" }), _jsxs(Stack, { direction: "row", gap: 4, children: [_jsx(ClearAllFilters, {}), _jsx(FilterSort, { enabled: filterSortEnabled, filterSort: filterSort, onFilterSortChange: onFilterSortChange })] })] }), _jsx(SearchAllFilters, { categoryViews: categoryViews, onFilter: onFilterChange.bind(null, true), surfaceType: mdDown ? SURFACE_TYPE.POPPER_DRAWER : SURFACE_TYPE.POPPER_MENU })] }), _jsx(Filters, { categoryFilters: categoryFilters, onFilter: onFilterChange.bind(null, false), surfaceType: mdDown ? SURFACE_TYPE.DRAWER : SURFACE_TYPE.MENU, trackFilterOpened: trackingConfig?.trackFilterOpened })] })), _jsx(IndexView, { className: props.className, categoryFilters: categoryFilters, entityListType: entityListType, entityName: label, loading: loading })] }));
 };
 /**
  * Builds the category views into category views grouped by the given category group configuration.

package/lib/views/ResearchView/assistant/assistant.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from "react";
+/**
+ * Renders the research assistant drawer.
+ * @returns The assistant drawer.
+ */
+export declare const Assistant: () => JSX.Element;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useChatState } from "../state/hooks/UseChatState/hook";
+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.
+ * @returns The assistant drawer.
+ */
+export const Assistant = () => {
+    const { state } = useChatState();
+    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/Drawer/drawer.d.ts

@@ -0,0 +1,9 @@
+import { JSX } from "react";
+import { DrawerProps } from "./types";
+/**
+ * Renders the drawer component for the research assistant.
+ * @param props - Component props.
+ * @param props.children - Children.
+ * @returns The drawer component.
+ */
+export declare const Drawer: ({ children }: DrawerProps) => JSX.Element;

package/lib/views/ResearchView/assistant/components/Drawer/drawer.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TEST_IDS } from "../../../../../tests/testIds";
+import { StyledDrawer } from "./drawer.styles";
+import { useLayoutSpacing } from "../../../../../hooks/UseLayoutSpacing/hook";
+import { DRAWER_PROPS } from "../../../../../styles/common/mui/drawer";
+/**
+ * Renders the drawer component for the research assistant.
+ * @param props - Component props.
+ * @param props.children - Children.
+ * @returns The drawer component.
+ */
+export const Drawer = ({ children }) => {
+    const { spacing } = useLayoutSpacing();
+    return (_jsx(StyledDrawer, { "data-testid": TEST_IDS.RESEARCH_PANEL, open: true, variant: DRAWER_PROPS.VARIANT.PERSISTENT, ...spacing, children: children }));
+};

package/lib/views/ResearchView/assistant/components/Drawer/drawer.styles.d.ts

@@ -0,0 +1,4 @@
+import { LayoutSpacing } from "../../../../../hooks/UseLayoutSpacing/types";
+export declare const StyledDrawer: import("@emotion/styled").StyledComponent<import("@mui/material").DrawerProps & {
+    theme?: import("@emotion/react").Theme;
+} & LayoutSpacing, {}, {}>;

package/lib/views/ResearchView/assistant/components/Drawer/drawer.styles.js

@@ -0,0 +1,21 @@
+import styled from "@emotion/styled";
+import { Drawer } from "@mui/material";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
+export const StyledDrawer = styled(Drawer, {
+    shouldForwardProp(prop) {
+        return prop !== "bottom" && prop !== "top";
+    },
+}) `
+  height: 100%;
+  max-height: 100dvh;
+  width: 412px;
+  z-index: 0;
+
+  > .MuiPaper-root {
+    background-color: ${PALETTE.COMMON_WHITE};
+    border-right: 1px solid ${PALETTE.SMOKE_MAIN};
+    padding-top: ${({ top }) => top}px;
+    position: relative;
+    width: inherit;
+  }
+`;

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

@@ -0,0 +1,4 @@
+import { ReactNode } from "react";
+export interface DrawerProps {
+    children: ReactNode;
+}

package/lib/views/ResearchView/assistant/components/Drawer/types.js

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

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

@@ -0,0 +1,3 @@
+export declare const FIELD_NAME: {
+    AI_PROMPT: string;
+};

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

@@ -0,0 +1,3 @@
+export const FIELD_NAME = {
+    AI_PROMPT: "ai-prompt",
+};

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

@@ -0,0 +1,11 @@
+import { JSX } from "react";
+import { FormProps } from "./types";
+/**
+ * Renders the research form.
+ * @param props - Component props.
+ * @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: ({ children, className, status, }: FormProps) => JSX.Element;

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

@@ -0,0 +1,27 @@
+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";
+/**
+ * Renders the research form.
+ * @param props - Component props.
+ * @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 = ({ 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,
+            });
+        }, children: children }));
+};

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

@@ -0,0 +1,4 @@
+export declare const StyledForm: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;

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

@@ -0,0 +1,7 @@
+import styled from "@emotion/styled";
+export const StyledForm = styled.form `
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+`;

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { FormEvent } from "react";
+import { OnSubmitPayload } from "../../../state/query/types";
+/**
+ * Extracts and trims form values from a form element.
+ * @param form - Form element.
+ * @returns An object mapping form field names to their trimmed string values.
+ */
+export declare const getFormValues: (form: HTMLFormElement) => Record<string, string>;
+/**
+ * Returns the payload for the query form submission.
+ * If the submitter has a data-query attribute (e.g. a suggestion chip), uses that as the query.
+ * Otherwise, falls back to the form input value.
+ * @param e - Form event.
+ * @returns The payload object containing the query value.
+ */
+export declare const getPayload: (e: FormEvent<HTMLFormElement>) => OnSubmitPayload;

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

@@ -0,0 +1,41 @@
+import { FIELD_NAME } from "./constants";
+/**
+ * Extracts and trims form values from a form element.
+ * @param form - Form element.
+ * @returns An object mapping form field names to their trimmed string values.
+ */
+export const getFormValues = (form) => {
+    const formData = new FormData(form);
+    const values = {};
+    formData.forEach((value, key) => {
+        values[key] = value.toString().trim();
+    });
+    return values;
+};
+/**
+ * Returns the payload for the query form submission.
+ * If the submitter has a data-query attribute (e.g. a suggestion chip), uses that as the query.
+ * Otherwise, falls back to the form input value.
+ * @param e - Form event.
+ * @returns The payload object containing the query value.
+ */
+export const getPayload = (e) => {
+    // Check for a query from the submitter's data-query attribute first
+    const query = getSubmitterQuery(e);
+    // The onSubmit handler will ignore empty queries which acts as a safeguard against empty data-query values.
+    if (query !== undefined)
+        return { query };
+    // If no submitter query, fall back to form values
+    const formValues = getFormValues(e.currentTarget);
+    return { query: formValues[FIELD_NAME.AI_PROMPT] || "" };
+};
+/**
+ * Returns the query from the form submitter's data-query attribute, if present.
+ * @param e - Form event.
+ * @returns The query string, or undefined if the submitter has no data-query.
+ */
+function getSubmitterQuery(e) {
+    const submitter = e.nativeEvent.submitter;
+    // We should expect a defined value here if the submitter is a data-query element, but we trim it just in case.
+    return submitter?.dataset.query?.trim();
+}

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

@@ -0,0 +1,2 @@
+import { InputBaseProps } from "@mui/material";
+export declare const INPUT_BASE_PROPS: InputBaseProps;

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

@@ -0,0 +1,14 @@
+import { INPUT_BASE_PROPS as MUI_INPUT_BASE_PROPS } from "../../../../../styles/common/mui/inputBase";
+import { FIELD_NAME } from "../Form/constants";
+export const INPUT_BASE_PROPS = {
+    autoFocus: true,
+    color: MUI_INPUT_BASE_PROPS.COLOR.PRIMARY,
+    fullWidth: true,
+    inputProps: { autoComplete: "off", spellCheck: false },
+    margin: MUI_INPUT_BASE_PROPS.MARGIN.DENSE,
+    maxRows: 4,
+    minRows: 1,
+    multiline: true,
+    name: FIELD_NAME.AI_PROMPT,
+    placeholder: "Ask anything",
+};

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

@@ -0,0 +1,7 @@
+export declare const KEY: {
+    readonly ARROW_DOWN: "ArrowDown";
+    readonly ARROW_UP: "ArrowUp";
+    readonly ENTER: "Enter";
+    readonly ESCAPE: "Escape";
+    readonly TAB: "Tab";
+};

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

@@ -0,0 +1,7 @@
+export const KEY = {
+    ARROW_DOWN: "ArrowDown",
+    ARROW_UP: "ArrowUp",
+    ENTER: "Enter",
+    ESCAPE: "Escape",
+    TAB: "Tab",
+};

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

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

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

@@ -0,0 +1,32 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useChatState } from "../../../../../state/hooks/UseChatState/hook";
+import { KEY } from "./constants";
+import { getHistory, handleArrowKey, handleEnterKey, handleEscapeKey, handleTabKey, } from "./utils";
+/**
+ * Provides a keydown handler that implements keyboard shortcuts for the assistant input.
+ * @returns An object containing the onKeyDown handler.
+ */
+export const useKeyShortCuts = () => {
+    const { state } = useChatState();
+    const { messages } = state;
+    const history = getHistory(messages);
+    const draftRef = useRef("");
+    const historyIndexRef = useRef(-1);
+    useEffect(() => {
+        // Resets history navigation when messages change.
+        draftRef.current = "";
+        historyIndexRef.current = -1;
+    }, [messages]);
+    const onKeyDown = useCallback((e) => {
+        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.ARROW_UP || e.key === KEY.ARROW_DOWN)
+            return handleArrowKey(e, history, refs);
+        if (e.key === KEY.TAB)
+            return handleTabKey(e);
+    }, [history]);
+    return { onKeyDown };
+};

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

@@ -0,0 +1,8 @@
+import { KeyboardEvent, RefObject } from "react";
+export interface Refs {
+    draftRef: RefObject<string>;
+    historyIndexRef: RefObject<number>;
+}
+export interface UseKeyShortCutsProps {
+    onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+}

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

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

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

@@ -0,0 +1,32 @@
+import { KeyboardEvent } from "react";
+import { Message } from "../../../../../state/types";
+import { 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.
+ * @returns An array of strings containing the text of user messages, ordered from most recent to oldest.
+ */
+export declare function getHistory(messages: Message[]): string[];
+/**
+ * Handles arrow up/down key presses to navigate through input history.
+ * @param e - The keyboard event.
+ * @param history - The history entries to navigate.
+ * @param refs - Refs for draft text and history index.
+ */
+export declare function handleArrowKey(e: KeyboardEvent<HTMLInputElement>, history: string[], refs: Refs): void;
+/**
+ * Handles the Enter key press to submit the form, or allows newline on Shift+Enter.
+ * @param e - The keyboard event.
+ */
+export declare 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.
+ */
+export declare function handleEscapeKey(e: KeyboardEvent<HTMLInputElement>, refs: Refs): void;
+/**
+ * Handles the Tab key press to auto-fill the input with the placeholder.
+ * @param e - The keyboard event.
+ */
+export declare function handleTabKey(e: KeyboardEvent<HTMLInputElement>): void;

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

@@ -0,0 +1,74 @@
+import { isUserMessage } from "../../../../../state/guards/guards";
+import { KEY } from "./constants";
+/**
+ * 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.
+ * @returns An array of strings containing the text of user messages, ordered from most recent to oldest.
+ */
+export function getHistory(messages) {
+    return messages
+        .filter(isUserMessage)
+        .map((message) => message.text)
+        .reverse();
+}
+/**
+ * Handles arrow up/down key presses to navigate through input history.
+ * @param e - The keyboard event.
+ * @param history - The history entries to navigate.
+ * @param refs - Refs for draft text and history index.
+ */
+export function handleArrowKey(e, history, refs) {
+    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;
+    }
+    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;
+        historyIndexRef.current = -1;
+        return;
+    }
+    inputEl.value = 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.
+ */
+export function handleEnterKey(e) {
+    if (e.shiftKey)
+        return;
+    e.preventDefault();
+    const formEl = e.currentTarget.form;
+    formEl?.requestSubmit();
+}
+/**
+ * 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.
+ */
+export function handleEscapeKey(e, refs) {
+    const { draftRef, historyIndexRef } = refs;
+    const inputEl = e.currentTarget;
+    inputEl.value = "";
+    draftRef.current = "";
+    historyIndexRef.current = -1;
+}
+/**
+ * Handles the Tab key press to auto-fill the input with the placeholder.
+ * @param e - The keyboard event.
+ */
+export function handleTabKey(e) {
+    const inputEl = e.currentTarget;
+    if (inputEl.value)
+        return;
+    e.preventDefault();
+    inputEl.value = inputEl.placeholder;
+}

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

@@ -0,0 +1,9 @@
+import { JSX } from "react";
+import { InputProps } from "./types";
+/**
+ * Renders an input component for the research panel.
+ * @param props - Component props.
+ * @param props.disabled - Disabled state of the input, which is derived from the loading state of the query.
+ * @returns Research panel input component.
+ */
+export declare const Input: ({ disabled, ...props }: InputProps) => JSX.Element;

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

@@ -0,0 +1,19 @@
+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 { useKeyShortCuts } from "./hooks/UseKeyShortCuts/hook";
+/**
+ * Renders an input component for the research panel.
+ * @param props - Component props.
+ * @param props.disabled - Disabled state of the input, which is derived from the loading state of the query.
+ * @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 }) }) })] }) }));
+};

package/lib/views/ResearchView/assistant/components/Input/input.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const StyledBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledPaper: import("@emotion/styled").StyledComponent<import("../../../../../components/types").BaseComponentProps & import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "className" | "classes" | "children" | "sx" | "square" | "elevation" | "variant"> & {
+    component?: React.ElementType;
+} & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

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

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import { RoundedPaper } from "../../../../../components/common/Paper/components/RoundedPaper/roundedPaper";
+import { Box } from "@mui/material";
+export const StyledBox = styled(Box) `
+  padding: 16px;
+`;
+export const StyledPaper = styled(RoundedPaper) `
+  display: flex;
+  flex-direction: column;
+
+  .MuiInputBase-root {
+    padding: 16px;
+  }
+
+  .MuiStack-root {
+    justify-content: flex-end;
+    padding: 8px;
+  }
+`;

package/lib/views/ResearchView/assistant/components/Input/stories/input.stories.d.ts

@@ -0,0 +1,6 @@
+import { type Meta, type StoryObj } from "@storybook/nextjs-vite";
+import { Input } from "../input";
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from "../input";
+import { Box } from "@mui/material";
+const meta = {
+    component: Input,
+    decorators: [
+        (Story) => (_jsx(Box, { sx: { width: "412px" }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {};

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { ChatState } from "../../../state/types";
+/**
+ * Gets the placeholder text for the input field based on the chat state.
+ * If there are no messages, it returns a default prompt. If there are messages,
+ * it looks for the last prompt message and uses its input prefill as the placeholder.
+ * @param state - The current state of the chat.
+ * @returns The placeholder text for the input field.
+ */
+export declare function getPlaceholder(state: ChatState): string;

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

@@ -0,0 +1,25 @@
+import { MESSAGE_TYPE, } from "../../../state/types";
+/**
+ * Gets the placeholder text for the input field based on the chat state.
+ * If there are no messages, it returns a default prompt. If there are messages,
+ * it looks for the last prompt message and uses its input prefill as the placeholder.
+ * @param state - The current state of the chat.
+ * @returns The placeholder text for the input field.
+ */
+export function getPlaceholder(state) {
+    if (state.messages.length === 0)
+        return "Ask anything";
+    // Reverse messages, last is the latest.
+    const messages = [...state.messages].reverse();
+    // Find the last prompt message to use its input prefill as placeholder.
+    const lastPrompt = messages.find(isPromptMessage);
+    return lastPrompt?.inputPlaceholder || "Ask anything";
+}
+/**
+ * Type guard to check if a message is a PromptMessage.
+ * @param message - The message to check.
+ * @returns True if the message is a PromptMessage, false otherwise.
+ */
+function isPromptMessage(message) {
+    return message.type === MESSAGE_TYPE.PROMPT;
+}

package/lib/views/ResearchView/assistant/components/Messages/components/AssistantMessage/assistantMessage.d.ts

@@ -0,0 +1,9 @@
+import { JSX } from "react";
+import { AssistantMessageProps } from "./types";
+/**
+ * Renders an assistant message.
+ * @param props - Component props.
+ * @param props.message - Assistant message.
+ * @returns The assistant message element.
+ */
+export declare const AssistantMessage: ({ message, }: AssistantMessageProps) => JSX.Element;

package/lib/views/ResearchView/assistant/components/Messages/components/AssistantMessage/assistantMessage.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, Typography } from "@mui/material";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
+import { getMappings, getMentions } from "./utils";
+/**
+ * Renders an assistant message.
+ * @param props - Component props.
+ * @param props.message - Assistant message.
+ * @returns The assistant message element.
+ */
+export const AssistantMessage = ({ message, }) => {
+    const mentions = getMentions(message);
+    const mappings = getMappings(message);
+    return (_jsxs(Stack, { gap: 2, useFlexGap: true, children: [message.response.message && (_jsx(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400, children: message.response.message })), mentions && (_jsxs(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400, children: [_jsx(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500, children: "Extracted mentions:" }), " ", mentions] })), mappings && (_jsxs(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400, children: [_jsx(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500, children: "Extracted mappings:" }), " ", mappings] }))] }));
+};

package/lib/views/ResearchView/assistant/components/Messages/components/AssistantMessage/types.d.ts

@@ -0,0 +1,4 @@
+import { AssistantMessage } from "../../../../../state/types";
+export interface AssistantMessageProps {
+    message: AssistantMessage;
+}

package/lib/views/ResearchView/assistant/components/Messages/components/AssistantMessage/types.js

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

package/lib/views/ResearchView/assistant/components/Messages/components/AssistantMessage/utils.d.ts

@@ -0,0 +1,13 @@
+import { AssistantMessage } from "../../../../../state/types";
+/**
+ * Formats mention mappings from an assistant message as a readable string.
+ * @param message - Assistant message containing response mentions.
+ * @returns Formatted facet-value mappings separated by slashes, or empty string if no mentions.
+ */
+export declare function getMappings(message: AssistantMessage): string;
+/**
+ * Extracts original mention text from an assistant message.
+ * @param message - Assistant message containing response mentions.
+ * @returns Comma-separated original mention text, or empty string if no mentions.
+ */
+export declare function getMentions(message: AssistantMessage): string;