@databiosphere/findable-ui 49.0.0 → 49.2.0

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;
+}, {}, {}>;

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

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+import { RoundedPaper } from "../../../../../../../components/common/Paper/components/RoundedPaper/roundedPaper";
+import { PALETTE } from "../../../../../../../styles/common/constants/palette";
+export const StyledRoundedPaper = styled(RoundedPaper) `
+  align-self: flex-end;
+  background-color: ${PALETTE.SMOKE_MAIN};
+  max-width: 332px;
+  min-height: fit-content;
+  padding: 8px 12px;
+`;

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

@@ -0,0 +1,9 @@
+import { JSX } from "react";
+import { UserMessageProps } from "./types";
+/**
+ * Renders a user message.
+ * @param props - Component props.
+ * @param props.message - User message.
+ * @returns The user message element.
+ */
+export declare const UserMessage: ({ message }: UserMessageProps) => JSX.Element;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from "@mui/material";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
+import { StyledRoundedPaper } from "./useMessage.styles";
+/**
+ * Renders a user message.
+ * @param props - Component props.
+ * @param props.message - User message.
+ * @returns The user message element.
+ */
+export const UserMessage = ({ message }) => {
+    return (_jsx(StyledRoundedPaper, { elevation: 0, children: _jsx(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400, children: message.text }) }));
+};

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

@@ -0,0 +1,8 @@
+import { DependencyList, RefObject } from "react";
+/**
+ * Provides a ref that scrolls to the bottom when dependencies change.
+ * Uses instant scroll on mount and smooth scroll on subsequent updates.
+ * @param deps - Dependency list that triggers scroll on change.
+ * @returns A ref to attach to the scrollable container.
+ */
+export declare function useScroll(deps: DependencyList): RefObject<HTMLDivElement | null>;

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

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

package/lib/views/ResearchView/assistant/components/Messages/messages.d.ts

@@ -0,0 +1,9 @@
+import { JSX } from "react";
+import { MessagesProps } from "./types";
+/**
+ * Renders chat messages, delegating each to the message selector.
+ * @param props - Component props.
+ * @param props.state - Chat state.
+ * @returns The messages list element.
+ */
+export declare const Messages: ({ state }: MessagesProps) => JSX.Element | null;

package/lib/views/ResearchView/assistant/components/Messages/messages.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyledStack } from "./messages.styles";
+import { MessageSelector } from "./selector/messageSelector";
+import { useScroll } from "./hooks/UseScroll/hook";
+/**
+ * Renders chat messages, delegating each to the message selector.
+ * @param props - Component props.
+ * @param props.state - Chat state.
+ * @returns The messages list element.
+ */
+export const Messages = ({ state }) => {
+    const ref = useScroll([state.messages]);
+    if (state.messages.length === 0)
+        return null;
+    return (_jsx(StyledStack, { ref: ref, useFlexGap: true, children: state.messages.map((message, index) => (_jsx(MessageSelector, { isLast: index === state.messages.length - 1, message: message }, message.createdAt))) }));
+};

package/lib/views/ResearchView/assistant/components/Messages/messages.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/messages.styles.js

@@ -0,0 +1,9 @@
+import { Stack } from "@mui/material";
+import styled from "@emotion/styled";
+export const StyledStack = styled(Stack) `
+  flex: 1;
+  gap: 24px;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  padding: 16px;
+`;

package/lib/views/ResearchView/assistant/components/Messages/selector/messageSelector.d.ts

@@ -0,0 +1,17 @@
+import { JSX } from "react";
+import { MessageSelectorProps } from "./types";
+/**
+ * Selects and renders the appropriate message component based on message type.
+ *
+ * Available types:
+ * - `ASSISTANT`: Displays assistant messages.
+ * - `ERROR`: Displays error messages.
+ * - `PROMPT`: Displays prompt messages.
+ * - `USER`: Displays user messages.
+ *
+ * @param props - Component props.
+ * @param props.isLast - Indicates if the message is the last one in the chat.
+ * @param props.message - Chat message.
+ * @returns The selected message component.
+ */
+export declare const MessageSelector: ({ isLast, message, }: MessageSelectorProps) => JSX.Element;

package/lib/views/ResearchView/assistant/components/Messages/selector/messageSelector.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MESSAGE_TYPE } from "../../../../state/types";
+import { AssistantMessage } from "../components/AssistantMessage/assistantMessage";
+import { ErrorMessage } from "../components/ErrorMessage/errorMessage";
+import { PromptMessage } from "../components/PromptMessage/promptMessage";
+import { UserMessage } from "../components/UserMessage/userMessage";
+/**
+ * Selects and renders the appropriate message component based on message type.
+ *
+ * Available types:
+ * - `ASSISTANT`: Displays assistant messages.
+ * - `ERROR`: Displays error messages.
+ * - `PROMPT`: Displays prompt messages.
+ * - `USER`: Displays user messages.
+ *
+ * @param props - Component props.
+ * @param props.isLast - Indicates if the message is the last one in the chat.
+ * @param props.message - Chat message.
+ * @returns The selected message component.
+ */
+export const MessageSelector = ({ isLast, message, }) => {
+    switch (message.type) {
+        case MESSAGE_TYPE.ASSISTANT:
+            return _jsx(AssistantMessage, { message: message });
+        case MESSAGE_TYPE.ERROR:
+            return _jsx(ErrorMessage, { message: message });
+        case MESSAGE_TYPE.PROMPT:
+            return _jsx(PromptMessage, { isLast: isLast, message: message });
+        case MESSAGE_TYPE.USER:
+            return _jsx(UserMessage, { message: message });
+    }
+};

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

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

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

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

package/lib/views/ResearchView/assistant/components/Messages/stories/args.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps } from "react";
+import { Messages } from "../messages";
+export declare const ARGS: ComponentProps<typeof Messages>;

package/lib/views/ResearchView/assistant/components/Messages/stories/args.js

@@ -0,0 +1,109 @@
+import { MESSAGE_TYPE } from "../../../../state/types";
+import { ERROR_MESSAGE } from "../../../../query/constants";
+export const ARGS = {
+    state: {
+        messages: [
+            {
+                createdAt: 1771998382830,
+                inputPlaceholder: "Ask about datasets or variables",
+                suggestions: [
+                    {
+                        label: "GLP-1 effect + smoking in T2D",
+                        query: "I'm studying whether smoking modifies the effect of GLP-1 agonists on glycemic control in T2D patients",
+                        variant: "CHIP",
+                    },
+                    {
+                        label: "WGS for cardiovascular outcomes",
+                        query: "I'm interested in whole genome sequencing data for cardiovascular outcomes",
+                        variant: "CHIP",
+                    },
+                    {
+                        label: "RNA-Seq in pancreatic cancer",
+                        query: "I'm interested in RNA-Seq data for pancreatic cancer",
+                        variant: "CHIP",
+                    },
+                ],
+                text: "Hello! I can help you find datasets across 2,944 studies from AnVIL, BDC, CRDC, and KFDRC. Describe your research question and I'll build a structured plan and find matching data.",
+                type: MESSAGE_TYPE.PROMPT,
+            },
+            {
+                createdAt: 1771998382831,
+                text: "I'm studying whether smoking modifies the effect of GLP-1 agonists on glycemic control in T2D patients.",
+                type: MESSAGE_TYPE.USER,
+            },
+            {
+                createdAt: 1771998382832,
+                response: {
+                    message: 'The exact term "glycemic control" has very low study counts (1 study each). I\'ve mapped it to the most relevant clinical measurements: "Glycated Hemoglobin" (HbA1c, 9 studies) and "Fasting Glucose" (44 studies), which are the standard markers used to assess glycemic control in diabetes management.',
+                    query: {
+                        mentions: [
+                            {
+                                exclude: false,
+                                facet: "focus",
+                                originalText: "type 2 diabetes",
+                                values: ["Diabetes Mellitus, Type 2"],
+                            },
+                            {
+                                exclude: false,
+                                facet: "measurement",
+                                originalText: "smoking",
+                                values: [
+                                    "Current Smoking Status",
+                                    "Smoking History",
+                                    "Smoking Status",
+                                ],
+                            },
+                            {
+                                exclude: false,
+                                facet: "measurement",
+                                originalText: "glycemic control",
+                                values: ["Glycated Hemoglobin", "Fasting Glucose"],
+                            },
+                        ],
+                    },
+                },
+                type: MESSAGE_TYPE.ASSISTANT,
+            },
+            {
+                createdAt: 1771998382833,
+                text: "What about datasets related to GLP-1 agonists and glycemic control in T2D patients?",
+                type: MESSAGE_TYPE.USER,
+            },
+            {
+                createdAt: 1771998382834,
+                error: ERROR_MESSAGE.RATE_LIMITED,
+                type: MESSAGE_TYPE.ERROR,
+            },
+            {
+                createdAt: 1771998382835,
+                text: "I'm studying whether smoking modifies the effect of GLP-1 agonists on glycemic control in T2D patients.",
+                type: MESSAGE_TYPE.USER,
+            },
+            {
+                createdAt: 1771998382836,
+                response: {
+                    message: "How do you want to split the smoking groups?",
+                    query: {
+                        mentions: [
+                            {
+                                exclude: false,
+                                facet: "focus",
+                                originalText: "lung cancer",
+                                values: [
+                                    "Lung Neoplasms",
+                                    "Carcinoma, Non-Small-Cell Lung",
+                                    "Adenocarcinoma of Lung",
+                                    "Small Cell Lung Carcinoma",
+                                ],
+                            },
+                        ],
+                    },
+                },
+                type: MESSAGE_TYPE.ASSISTANT,
+            },
+        ],
+        status: {
+            loading: false,
+        },
+    },
+};

package/lib/views/ResearchView/assistant/components/Messages/stories/messages.stories.d.ts

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

package/lib/views/ResearchView/assistant/components/Messages/stories/messages.stories.js

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

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ToggleButtonGroup } from "../toggleButtonGroup";
+import { ConfigProvider } from "../../../../../../providers/config";
+import { INITIAL_CONFIG } from "../../../stories/args";
+const meta = {
+    component: ToggleButtonGroup,
+    decorators: [
+        (Story) => (_jsx(ConfigProvider, { config: INITIAL_CONFIG, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const DEFAULT = {};

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

@@ -0,0 +1,6 @@
+import { JSX } from "react";
+/**
+ * ToggleButtonGroup component for navigating between ResearchView and ExploreView.
+ * @returns ToggleButtonGroup JSX element, or null if routes are not configured.
+ */
+export declare const ToggleButtonGroup: () => JSX.Element | null;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ToggleButton } from "@mui/material";
+import { StyledBox, StyledToggleButtonGroup } from "./toggleButtonGroup.styles";
+import Link from "next/link";
+import { useAiRoutes } from "../../../../../hooks/ai/useAiRoutes/hook";
+import { Beta } from "../../../../../components/common/Chip/components/Beta/beta";
+/**
+ * ToggleButtonGroup component for navigating between ResearchView and ExploreView.
+ * @returns ToggleButtonGroup JSX element, or null if routes are not configured.
+ */
+export const ToggleButtonGroup = () => {
+    const { routes } = useAiRoutes() || {};
+    if (!routes)
+        return null;
+    return (_jsx(StyledBox, { children: _jsxs(StyledToggleButtonGroup, { exclusive: true, children: [_jsxs(ToggleButton, { component: Link, href: routes.research, selected: true, value: "research", children: ["Research ", _jsx(Beta, {})] }), _jsx(ToggleButton, { component: Link, href: routes.search, value: "search", children: "Search" })] }) }));
+};

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

@@ -0,0 +1,6 @@
+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 StyledToggleButtonGroup: import("@emotion/styled").StyledComponent<import("@mui/material").ToggleButtonGroupProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

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

@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+import { Box, ToggleButtonGroup } from "@mui/material";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
+export const StyledBox = styled(Box) `
+  background-color: ${PALETTE.COMMON_WHITE};
+  margin-bottom: -16px;
+  padding: 16px;
+  z-index: 1;
+`;
+export const StyledToggleButtonGroup = styled(ToggleButtonGroup) `
+  .MuiToggleButton-root {
+    gap: 4px;
+    padding: 6px 16px;
+    text-transform: none;
+
+    &.Mui-disabled {
+      color: ${PALETTE.INK_LIGHT};
+    }
+  }
+`;

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

@@ -0,0 +1,4 @@
+import { SiteConfig } from "../../../../config/entities";
+import { InitialArgs } from "../../state/initializer/types";
+export declare const INITIAL_CONFIG: SiteConfig;
+export declare const INITIAL_ARGS: NonNullable<InitialArgs>;

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

@@ -0,0 +1,30 @@
+import { SUGGESTION_VARIANT } from "../../state/types";
+export const INITIAL_CONFIG = {
+    ai: {
+        enabled: true,
+        routes: { research: "/research", search: "/search" },
+        url: "https://findable-chat/api/chat",
+    },
+    redirectRootToPath: "",
+};
+export const INITIAL_ARGS = {
+    inputPlaceholder: "Ask about datasets or variables",
+    suggestions: [
+        {
+            label: "GLP-1 effect + smoking in T2D",
+            query: "I'm studying whether smoking modifies the effect of GLP-1 agonists on glycemic control in T2D patients",
+            variant: SUGGESTION_VARIANT.CHIP,
+        },
+        {
+            label: "WGS for cardiovascular outcomes",
+            query: "I'm interested in whole genome sequencing data for cardiovascular outcomes",
+            variant: SUGGESTION_VARIANT.CHIP,
+        },
+        {
+            label: "RNA-Seq in pancreatic cancer",
+            query: "I'm interested in RNA-Seq data for pancreatic cancer",
+            variant: SUGGESTION_VARIANT.CHIP,
+        },
+    ],
+    text: "Hello! I can help you find datasets across 2,944 studies from AnVIL, BDC, CRDC, and KFDRC. Describe your research question and I'll build a structured plan and find matching data.",
+};

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

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