@databiosphere/findable-ui 48.1.0 → 49.1.0

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

@@ -0,0 +1,4 @@
+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">;

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 "../../../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;

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

@@ -0,0 +1,25 @@
+/**
+ * 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 function getMappings(message) {
+    const mappings = message.response.query.mentions.reduce((acc, m) => {
+        const key = m.exclude ? `${m.facet} (exclude)` : m.facet;
+        acc[key] = [...(acc[key] || []), ...m.values];
+        return acc;
+    }, {});
+    return Object.entries(mappings)
+        .map(([facet, values]) => `${facet}: ${values.join(", ")}`)
+        .join(" / ");
+}
+/**
+ * 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 function getMentions(message) {
+    return message.response.query.mentions
+        .map((mention) => mention.originalText)
+        .join(", ");
+}

package/lib/views/ResearchView/assistant/components/Messages/components/ErrorMessage/errorMessage.d.ts

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

package/lib/views/ResearchView/assistant/components/Messages/components/ErrorMessage/errorMessage.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from "@mui/material";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
+/**
+ * Renders an error message.
+ * @param props - Component props.
+ * @param props.message - Error message.
+ * @returns The error message element.
+ */
+export const ErrorMessage = ({ message }) => {
+    return (_jsx(Typography, { color: TYPOGRAPHY_PROPS.COLOR.ERROR, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400, children: message.error }));
+};

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

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

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

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

package/lib/views/ResearchView/assistant/components/Messages/components/PromptMessage/components/Chips/chips.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from "react";
+import { ChipsProps } from "./types";
+export declare const Chips: ({ className, message, }: ChipsProps) => JSX.Element | null;

package/lib/views/ResearchView/assistant/components/Messages/components/PromptMessage/components/Chips/chips.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chip } from "@mui/material";
+import { CHIP_PROPS } from "../../../../../../../../../styles/common/mui/chip";
+import { StyledStack } from "./chips.styles";
+export const Chips = ({ className, message, }) => {
+    const suggestions = message.suggestions;
+    if (!suggestions || suggestions.length === 0)
+        return null;
+    return (_jsx(StyledStack, { className: className, gap: 2, useFlexGap: true, children: suggestions.map((suggestion) => (_jsx(Chip, { clickable: true, color: CHIP_PROPS.COLOR.SECONDARY, component: "button", "data-query": suggestion.query, label: suggestion.label, type: "submit", variant: CHIP_PROPS.VARIANT.OUTLINED }, `${suggestion.label}-${suggestion.query}`))) }));
+};

package/lib/views/ResearchView/assistant/components/Messages/components/PromptMessage/components/Chips/chips.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledStack: import("@emotion/styled").StyledComponent<import("@mui/material").StackOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/material").StackOwnProps> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/views/ResearchView/assistant/components/Messages/components/PromptMessage/components/Chips/chips.styles.js

@@ -0,0 +1,26 @@
+import { Stack } from "@mui/material";
+import styled from "@emotion/styled";
+import { PALETTE } from "../../../../../../../../../styles/common/constants/palette";
+export const StyledStack = styled(Stack) `
+  align-items: flex-start;
+
+  .MuiChip-root {
+    background-color: ${PALETTE.COMMON_WHITE};
+    border-color: ${PALETTE.SMOKE_MAIN};
+    color: ${PALETTE.INK_MAIN};
+    height: unset;
+    padding: 8px 12px;
+
+    &.MuiChip-clickable:hover {
+      background-color: transparent;
+    }
+
+    &:active {
+      box-shadow: none;
+    }
+
+    .MuiChip-label {
+      padding: 0;
+    }
+  }
+`;

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

@@ -0,0 +1,5 @@
+import { BaseComponentProps } from "../../../../../../../../../components/types";
+import { PromptMessage } from "../../../../../../../state/types";
+export interface ChipsProps extends BaseComponentProps {
+    message: PromptMessage;
+}

package/lib/views/ResearchView/assistant/components/Messages/components/PromptMessage/components/Chips/types.js

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

package/lib/views/ResearchView/assistant/components/Messages/components/PromptMessage/promptMessage.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from "react";
+import { PromptMessageProps } from "./types";
+/**
+ * Renders a prompt message, and chip suggestions if present (and if it's the last message).
+ * @param props - Component props.
+ * @param props.isLast - Whether message is the last.
+ * @param props.message - Prompt message.
+ * @returns The prompt message element.
+ */
+export declare const PromptMessage: ({ isLast, message, }: PromptMessageProps) => JSX.Element;

package/lib/views/ResearchView/assistant/components/Messages/components/PromptMessage/promptMessage.js

@@ -0,0 +1,14 @@
+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 { Chips } from "./components/Chips/chips";
+/**
+ * Renders a prompt message, and chip suggestions if present (and if it's the last message).
+ * @param props - Component props.
+ * @param props.isLast - Whether message is the last.
+ * @param props.message - Prompt message.
+ * @returns The prompt message element.
+ */
+export const PromptMessage = ({ isLast, message, }) => {
+    return (_jsxs(Stack, { gap: 4, useFlexGap: true, children: [_jsx(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400, children: message.text }), isLast && _jsx(Chips, { message: message })] }));
+};

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

@@ -0,0 +1,5 @@
+import { PromptMessage } from "../../../../../state/types";
+export interface PromptMessageProps {
+    isLast: boolean;
+    message: PromptMessage;
+}

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

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

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

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

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

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

package/lib/views/ResearchView/assistant/components/Messages/components/UserMessage/useMessage.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledRoundedPaper: 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;
+}, {}, {}>;