@databiosphere/findable-ui 50.6.1 → 50.7.0

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.stories.js

@@ -0,0 +1,82 @@
+import React from "react";
+import { FilterMenuStory } from "../FilterMenu/filterMenu.stories";
+import { SearchAllFilters } from "./searchAllFilters";
+export default {
+    argTypes: {
+        onFilter: { control: { disable: true } },
+    },
+    component: SearchAllFilters,
+    decorators: [
+        (Story) => (React.createElement("div", { style: { width: 264 } },
+            React.createElement(Story, null))),
+    ],
+    title: "Components/Filter/SearchAllFilters",
+};
+const onFilter = () => {
+    // onFilter function
+};
+const defaultValues = [
+    {
+        count: 1,
+        key: "item1",
+        label: "Item 1",
+        selected: false,
+    },
+    {
+        count: 10,
+        key: "item2",
+        label: "Item 2",
+        selected: false,
+    },
+];
+export const SearchAllFiltersStory = {
+    args: {
+        categoryViews: [
+            {
+                isDisabled: false,
+                key: "genusSpecies",
+                label: "Genus Species",
+                values: [
+                    {
+                        count: 12,
+                        key: "homoSapiens",
+                        label: "Homo sapiens",
+                        selected: false,
+                    },
+                    {
+                        count: 6,
+                        key: "musMusculus",
+                        label: "Mus musculus",
+                        selected: false,
+                    },
+                ],
+            },
+            {
+                isDisabled: false,
+                key: "donorDisease",
+                label: "Donor Disease",
+                values: FilterMenuStory.args?.values || defaultValues,
+            },
+            {
+                isDisabled: true,
+                key: "anatomicalEntity",
+                label: "Anatomical Entity",
+                values: [
+                    {
+                        count: 12,
+                        key: "oralCavity",
+                        label: "oral cavity",
+                        selected: true,
+                    },
+                    {
+                        count: 6,
+                        key: "pancreas",
+                        label: "pancreas",
+                        selected: false,
+                    },
+                ],
+            },
+        ],
+        onFilter: onFilter,
+    },
+};

package/lib/components/Filter/components/SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton.d.ts

@@ -0,0 +1 @@
+export declare const SearchCloseButton: () => JSX.Element;

package/lib/components/Filter/components/SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton.js

@@ -0,0 +1,14 @@
+import { CloseRounded } from "@mui/icons-material";
+import { IconButton } from "@mui/material";
+import React, { Fragment, useContext } from "react";
+import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../../hooks/useBreakpointHelper";
+import { DESKTOP_SM } from "../../../../../../theme/common/breakpoints";
+import { ListboxContext } from "../../../SearchAllFilters/searchAllFilters";
+export const SearchCloseButton = () => {
+    const desktopSmDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
+    const { onClearSearch, onCloseSearch, open, searchTerm } = useContext(ListboxContext);
+    const showButton = open && (desktopSmDown || searchTerm);
+    const onClickFn = desktopSmDown ? onCloseSearch : onClearSearch;
+    return (React.createElement(Fragment, null, showButton && (React.createElement(IconButton, { onClick: onClickFn, size: "large" },
+        React.createElement(CloseRounded, { fontSize: "small" })))));
+};

package/lib/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.d.ts

@@ -0,0 +1,2 @@
+import { TextFieldProps } from "@mui/material";
+export declare const SearchAllFiltersSearch: ({ inputProps, InputProps, ...props }: TextFieldProps) => JSX.Element;

package/lib/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.js

@@ -0,0 +1,12 @@
+import React, { useContext } from "react";
+import { SearchIcon } from "../../../common/CustomIcon/components/SearchIcon/searchIcon";
+import { ListboxContext } from "../SearchAllFilters/searchAllFilters";
+import { InputField } from "./searchAllFiltersSearch.styles";
+export const SearchAllFiltersSearch = ({ inputProps, InputProps, ...props }) => {
+    const { searchTerm } = useContext(ListboxContext);
+    delete inputProps?.value; // Control input value from the search term.
+    return (React.createElement(InputField, { ...props, fullWidth: true, InputProps: {
+            ...(InputProps || {}),
+            startAdornment: React.createElement(SearchIcon, { fontSize: "small" }),
+        }, inputProps: { ...(inputProps || {}), spellCheck: false }, placeholder: "Search all filters...", size: "small", value: searchTerm, variant: "outlined" }));
+};

package/lib/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const InputField: import("@emotion/styled").StyledComponent<{
+    variant?: import("@mui/material").TextFieldVariants | undefined;
+} & Omit<import("@mui/material").OutlinedTextFieldProps | import("@mui/material").FilledTextFieldProps | import("@mui/material").StandardTextFieldProps, "variant"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Filter/components/SearchAllFiltersSearch/searchAllFiltersSearch.styles.js

@@ -0,0 +1,34 @@
+import styled from "@emotion/styled";
+import { TextField } from "@mui/material";
+import { inkLight, inkMain } from "../../../../styles/common/mixins/colors";
+export const InputField = styled(TextField) `
+  && {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .MuiInputBase-root {
+      & ::placeholder {
+        color: ${inkLight};
+        opacity: 0.8;
+      }
+
+      &.Mui-focused {
+        & ::placeholder {
+          opacity: 0;
+        }
+      }
+    }
+
+    .MuiOutlinedInput-root {
+      &.MuiInputBase-sizeSmall {
+        padding: 0 0 0 12px;
+
+        .MuiAutocomplete-input {
+          color: ${inkMain};
+          padding: 10px 14px 10px 0;
+        }
+      }
+    }
+  }
+`;

package/lib/components/Filter/components/ai/components/FacetAssistant/components/EndAdornment/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const ADORNMENT_TYPE: {
+    readonly DEFAULT: "default";
+    readonly SUBMITTABLE: "submittable";
+    readonly SUBMITTING: "submitting";
+};

package/lib/components/Filter/components/ai/components/FacetAssistant/components/EndAdornment/constants.js

@@ -0,0 +1,5 @@
+export const ADORNMENT_TYPE = {
+    DEFAULT: "default",
+    SUBMITTABLE: "submittable",
+    SUBMITTING: "submitting",
+};

package/lib/components/Filter/components/ai/components/FacetAssistant/components/EndAdornment/endAdornment.d.ts

@@ -0,0 +1,2 @@
+import { EndAdornmentProps } from "./types";
+export declare const EndAdornment: ({ adornmentType, }: EndAdornmentProps) => JSX.Element;

package/lib/components/Filter/components/ai/components/FacetAssistant/components/EndAdornment/endAdornment.js

@@ -0,0 +1,19 @@
+import { IconButton } from "@mui/material";
+import React from "react";
+import { ICON_BUTTON_PROPS } from "../../../../../../../../styles/common/mui/iconButton";
+import { SVG_ICON_PROPS } from "../../../../../../../../styles/common/mui/svgIcon";
+import { AiIcon } from "../../../../../../../common/CustomIcon/components/AiIcon/aiIcon";
+import { ADORNMENT_TYPE } from "./constants";
+import { StyledArrowUpwardRounded, StyledLoadingIcon, } from "./endAdornment.styles";
+export const EndAdornment = ({ adornmentType, }) => {
+    switch (adornmentType) {
+        case ADORNMENT_TYPE.SUBMITTING:
+            return (React.createElement(StyledLoadingIcon, { color: SVG_ICON_PROPS.COLOR.PRIMARY, fontSize: SVG_ICON_PROPS.FONT_SIZE.SMALL }));
+        case ADORNMENT_TYPE.SUBMITTABLE:
+            return (React.createElement(IconButton, { color: ICON_BUTTON_PROPS.COLOR.SECONDARY, edge: ICON_BUTTON_PROPS.EDGE.END, size: ICON_BUTTON_PROPS.SIZE.XSMALL, type: "submit" },
+                React.createElement(StyledArrowUpwardRounded, { fontSize: SVG_ICON_PROPS.FONT_SIZE.SMALL })));
+        case ADORNMENT_TYPE.DEFAULT:
+        default:
+            return React.createElement(AiIcon, null);
+    }
+};

package/lib/components/Filter/components/ai/components/FacetAssistant/components/EndAdornment/endAdornment.styles.d.ts

@@ -0,0 +1,12 @@
+export declare const StyledLoadingIcon: import("@emotion/styled").StyledComponent<import("@mui/material").SvgIconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, "style" | "className" | "classes" | "children" | "sx" | "color" | "fontSize" | "shapeRendering" | "viewBox" | "htmlColor" | "inheritViewBox" | "titleAccess"> & {
+    component?: React.ElementType;
+} & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledArrowUpwardRounded: import("@emotion/styled").StyledComponent<import("@mui/material").SvgIconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, "style" | "className" | "classes" | "children" | "sx" | "color" | "fontSize" | "shapeRendering" | "viewBox" | "htmlColor" | "inheritViewBox" | "titleAccess"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Filter/components/ai/components/FacetAssistant/components/EndAdornment/endAdornment.styles.js

@@ -0,0 +1,22 @@
+import styled from "@emotion/styled";
+import { ArrowUpwardRounded } from "@mui/icons-material";
+import { PALETTE } from "../../../../../../../../styles/common/constants/palette";
+import { LoadingIcon } from "../../../../../../../common/CustomIcon/components/LoadingIcon/loadingIcon";
+export const StyledLoadingIcon = styled(LoadingIcon) `
+  && {
+    color: ${PALETTE.PRIMARY_MAIN};
+
+    .Mui-focused & {
+      color: ${PALETTE.PRIMARY_MAIN};
+    }
+  }
+`;
+export const StyledArrowUpwardRounded = styled(ArrowUpwardRounded) `
+  && {
+    color: ${PALETTE.INK_LIGHT};
+
+    .Mui-focused & {
+      color: ${PALETTE.INK_LIGHT};
+    }
+  }
+`;

package/lib/components/Filter/components/ai/components/FacetAssistant/components/EndAdornment/types.d.ts

@@ -0,0 +1,4 @@
+import { ADORNMENT_TYPE } from "./constants";
+export interface EndAdornmentProps {
+    adornmentType: (typeof ADORNMENT_TYPE)[keyof typeof ADORNMENT_TYPE];
+}

package/lib/components/Filter/components/ai/components/FacetAssistant/components/EndAdornment/types.js

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

package/lib/components/Filter/components/ai/components/FacetAssistant/components/EndAdornment/utils.d.ts

@@ -0,0 +1,8 @@
+import { ADORNMENT_TYPE } from "./constants";
+/**
+ * Returns the end adornment type of the input i.e. "default", "submittable", "submitting".
+ * @param isDirty - Form is dirty.
+ * @param isSubmiting - Form is submitting.
+ * @returns End adornment type.
+ */
+export declare function getEndAdornmentType(isDirty: boolean, isSubmiting: boolean): (typeof ADORNMENT_TYPE)[keyof typeof ADORNMENT_TYPE];

package/lib/components/Filter/components/ai/components/FacetAssistant/components/EndAdornment/utils.js

@@ -0,0 +1,14 @@
+import { ADORNMENT_TYPE } from "./constants";
+/**
+ * Returns the end adornment type of the input i.e. "default", "submittable", "submitting".
+ * @param isDirty - Form is dirty.
+ * @param isSubmiting - Form is submitting.
+ * @returns End adornment type.
+ */
+export function getEndAdornmentType(isDirty, isSubmiting) {
+    if (isSubmiting)
+        return ADORNMENT_TYPE.SUBMITTING;
+    if (isDirty)
+        return ADORNMENT_TYPE.SUBMITTABLE;
+    return ADORNMENT_TYPE.DEFAULT;
+}

package/lib/components/Filter/components/ai/components/FacetAssistant/components/ResultSummary/components/Tooltip/components/Title/title.d.ts

@@ -0,0 +1,2 @@
+import { ResultSummarySectionProps } from "./types";
+export declare const ResultSummarySection: ({ icon, mentionTermPair, title, }: ResultSummarySectionProps) => JSX.Element | null;

package/lib/components/Filter/components/ai/components/FacetAssistant/components/ResultSummary/components/Tooltip/components/Title/title.js

@@ -0,0 +1,15 @@
+import { Stack, Typography } from "@mui/material";
+import React from "react";
+import { STACK_PROPS } from "../../../../../../../../../../../../styles/common/mui/stack";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../../../../../../styles/common/mui/typography";
+export const ResultSummarySection = ({ icon, mentionTermPair, title, }) => {
+    if (mentionTermPair.length === 0)
+        return null;
+    return (React.createElement(Stack, { gap: 2, useFlexGap: true },
+        React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_500 }, title),
+        mentionTermPair.map(([mention, term], index) => (React.createElement(Stack, { key: `${mention}-${term}-${index}`, direction: STACK_PROPS.DIRECTION.ROW, spacing: 1, useFlexGap: true },
+            icon,
+            React.createElement("span", null, mention),
+            React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT }, "="),
+            React.createElement("span", null, term))))));
+};

package/lib/components/Filter/components/ai/components/FacetAssistant/components/ResultSummary/components/Tooltip/components/Title/types.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+import { MentionTermPair } from "../../../../types";
+export interface ResultSummarySectionProps {
+    icon: ReactNode;
+    mentionTermPair: MentionTermPair[];
+    title: string;
+}

package/lib/components/Filter/components/ai/components/FacetAssistant/components/ResultSummary/components/Tooltip/components/Title/types.js

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

package/lib/components/Filter/components/ai/components/FacetAssistant/components/ResultSummary/components/Tooltip/constants.d.ts

@@ -0,0 +1,2 @@
+import { TooltipProps } from "@mui/material";
+export declare const TOOLTIP_PROPS: Omit<TooltipProps, "children" | "title">;

package/lib/components/Filter/components/ai/components/FacetAssistant/components/ResultSummary/components/Tooltip/constants.js

@@ -0,0 +1,27 @@
+import { FONT } from "../../../../../../../../../../styles/common/constants/font";
+import { PALETTE } from "../../../../../../../../../../styles/common/constants/palette";
+export const TOOLTIP_PROPS = {
+    disableInteractive: true,
+    enterNextDelay: 250,
+    placement: "top-start",
+    slotProps: {
+        popper: {
+            modifiers: [
+                { name: "flip", options: { padding: 8 } },
+                { name: "offset", options: { offset: [0, 2] } },
+                { name: "preventOverflow", options: { padding: 8 } },
+            ],
+        },
+        tooltip: {
+            sx: {
+                backgroundColor: PALETTE.COMMON_WHITE,
+                border: `1px solid ${PALETTE.SMOKE_DARK}`,
+                color: PALETTE.INK_MAIN,
+                font: FONT.BODY_400,
+                margin: 0,
+                maxWidth: "unset",
+                padding: 4,
+            },
+        },
+    },
+};

package/lib/components/Filter/components/ai/components/FacetAssistant/components/ResultSummary/components/Tooltip/hook.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hook to measure the width of an element and provide a ref to attach to it.
+ * Returns the measured width and a ref function to attach to the element.
+ * @returns A tuple containing the measured width and a ref function to attach to the element.
+ */
+export declare function useMeasuredWidth<T extends HTMLElement>(): [
+    number | undefined,
+    (node: T | null) => void
+];

package/lib/components/Filter/components/ai/components/FacetAssistant/components/ResultSummary/components/Tooltip/hook.js

@@ -0,0 +1,16 @@
+import { useCallback, useState } from "react";
+/**
+ * Hook to measure the width of an element and provide a ref to attach to it.
+ * Returns the measured width and a ref function to attach to the element.
+ * @returns A tuple containing the measured width and a ref function to attach to the element.
+ */
+export function useMeasuredWidth() {
+    const [width, setWidth] = useState();
+    const ref = useCallback((node) => {
+        if (!node)
+            return;
+        const { width: measuredWidth } = node.getBoundingClientRect();
+        setWidth(measuredWidth);
+    }, []);
+    return [width, ref];
+}

package/lib/components/Filter/components/ai/components/FacetAssistant/components/ResultSummary/components/Tooltip/tooltip.d.ts

@@ -0,0 +1,2 @@
+import { TooltipProps } from "./types";
+export declare const Tooltip: ({ children, ...props }: TooltipProps) => JSX.Element;

package/lib/components/Filter/components/ai/components/FacetAssistant/components/ResultSummary/components/Tooltip/tooltip.js

@@ -0,0 +1,11 @@
+import { Tooltip as MTooltip } from "@mui/material";
+import React from "react";
+import { TOOLTIP_PROPS } from "./constants";
+import { useMeasuredWidth } from "./hook";
+export const Tooltip = ({ children, ...props }) => {
+    const [minWidth = "unset", ref] = useMeasuredWidth();
+    return (React.createElement(MTooltip, { ...TOOLTIP_PROPS, slotProps: {
+            ...TOOLTIP_PROPS.slotProps,
+            popper: { sx: { minWidth } },
+        }, ...props }, children(ref)));
+};

package/lib/components/Filter/components/ai/components/FacetAssistant/components/ResultSummary/components/Tooltip/types.d.ts

@@ -0,0 +1,5 @@
+import { TooltipProps as MTooltipProps } from "@mui/material";
+import { ReactElement } from "react";
+export interface TooltipProps extends Omit<MTooltipProps, "children"> {
+    children: (ref: (node: HTMLSpanElement | null) => void) => ReactElement;
+}

package/lib/components/Filter/components/ai/components/FacetAssistant/components/ResultSummary/components/Tooltip/types.js

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

package/lib/components/Filter/components/ai/components/FacetAssistant/components/ResultSummary/resultSummary.d.ts

@@ -0,0 +1,2 @@
+import { ResultSummaryProps } from "./types";
+export declare const ResultSummary: ({ summary, }: ResultSummaryProps) => JSX.Element | null;

package/lib/components/Filter/components/ai/components/FacetAssistant/components/ResultSummary/resultSummary.js

@@ -0,0 +1,17 @@
+import { Stack } from "@mui/material";
+import React from "react";
+import { SVG_ICON_PROPS } from "../../../../../../../../styles/common/mui/svgIcon";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../../styles/common/mui/typography";
+import { ErrorIcon } from "../../../../../../../common/CustomIcon/components/ErrorIcon/errorIcon";
+import { SuccessIcon } from "../../../../../../../common/CustomIcon/components/SuccessIcon/successIcon";
+import { ResultSummarySection } from "./components/Tooltip/components/Title/title";
+import { Tooltip } from "./components/Tooltip/tooltip";
+import { StyledResultSummary } from "./resultSummary.styles";
+import { renderSummary } from "./utils";
+export const ResultSummary = ({ summary, }) => {
+    if (!summary)
+        return null;
+    return (React.createElement(Tooltip, { title: React.createElement(Stack, { gap: 4, useFlexGap: true },
+            React.createElement(ResultSummarySection, { icon: React.createElement(SuccessIcon, { color: SVG_ICON_PROPS.COLOR.SUCCESS }), mentionTermPair: summary.matched, title: "Matched" }),
+            React.createElement(ResultSummarySection, { icon: React.createElement(ErrorIcon, { color: SVG_ICON_PROPS.COLOR.ALERT }), mentionTermPair: summary.unmatched, title: "Unmatched" })) }, (ref) => (React.createElement(StyledResultSummary, { ref: ref, variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 }, renderSummary(summary)))));
+};

package/lib/components/Filter/components/ai/components/FacetAssistant/components/ResultSummary/resultSummary.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledResultSummary: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "p" | "style" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "className" | "classes" | "children" | "sx" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Filter/components/ai/components/FacetAssistant/components/ResultSummary/resultSummary.styles.js

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+import { Typography } from "@mui/material";
+import { PALETTE } from "../../../../../../../../styles/common/constants/palette";
+export const StyledResultSummary = styled(Typography) `
+  cursor: pointer;
+  text-decoration: underline dashed ${PALETTE.SMOKE_DARK};
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: 1px;
+  text-underline-position: under;
+`;

package/lib/components/Filter/components/ai/components/FacetAssistant/components/ResultSummary/types.d.ts

@@ -0,0 +1,8 @@
+export type MentionTermPair = [mention: string, term: string];
+export type ResultSummaryData = {
+    matched: MentionTermPair[];
+    unmatched: MentionTermPair[];
+};
+export interface ResultSummaryProps {
+    summary?: ResultSummaryData;
+}

package/lib/components/Filter/components/ai/components/FacetAssistant/components/ResultSummary/types.js

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

package/lib/components/Filter/components/ai/components/FacetAssistant/components/ResultSummary/utils.d.ts

@@ -0,0 +1,7 @@
+import type { ResultSummaryData } from "./types";
+/**
+ * Renders a human-readable summary from the result summary data.
+ * @param summary - The result summary data.
+ * @returns A formatted string summarizing the matched and unmatched items.
+ */
+export declare function renderSummary(summary: ResultSummaryData): string;

package/lib/components/Filter/components/ai/components/FacetAssistant/components/ResultSummary/utils.js

@@ -0,0 +1,19 @@
+/**
+ * Renders a human-readable summary from the result summary data.
+ * @param summary - The result summary data.
+ * @returns A formatted string summarizing the matched and unmatched items.
+ */
+export function renderSummary(summary) {
+    const matched = summary.matched.length;
+    const unmatched = summary.unmatched.length;
+    if (!unmatched) {
+        // If there are no unmatched items, just report the matched count.
+        return `${matched} matched`;
+    }
+    if (!matched) {
+        // If there are no matched items, report only unmatched count.
+        return `${unmatched} unmatched`;
+    }
+    // Otherwise, report both matched and unmatched counts.
+    return `${matched} matched, ${unmatched} unmatched`;
+}

package/lib/components/Filter/components/ai/components/FacetAssistant/constants.d.ts

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

package/lib/components/Filter/components/ai/components/FacetAssistant/constants.js

@@ -0,0 +1,10 @@
+import { TEXT_FIELD_PROPS as MUI_TEXT_FIELD_PROPS } from "../../../../../../styles/common/mui/textField";
+export const OUTLINED_INPUT_PROPS = {
+    autoComplete: "off",
+    color: MUI_TEXT_FIELD_PROPS.COLOR.SECONDARY,
+    fullWidth: true,
+    id: "query-to-facets",
+    name: "query-to-facets",
+    placeholder: "Type what you want to find...",
+    size: MUI_TEXT_FIELD_PROPS.SIZE.SMALL,
+};

package/lib/components/Filter/components/ai/components/FacetAssistant/facetAssistant.d.ts

@@ -0,0 +1,6 @@
+/**
+ * AI-powered facet assistant component.
+ * Converts a user query into facet filters (PoC implementation).
+ * TODO - clear search.
+ */
+export declare const FacetAssistant: () => JSX.Element;

package/lib/components/Filter/components/ai/components/FacetAssistant/facetAssistant.js

@@ -0,0 +1,70 @@
+import React, { useCallback, useState } from "react";
+import { useExploreState } from "../../../../../../hooks/useExploreState";
+import { ExploreActionKind } from "../../../../../../providers/exploreState";
+import { getFormValue } from "../../../../../../utils/form";
+import { EndAdornment } from "./components/EndAdornment/endAdornment";
+import { getEndAdornmentType } from "./components/EndAdornment/utils";
+import { ResultSummary } from "./components/ResultSummary/resultSummary";
+import { OUTLINED_INPUT_PROPS } from "./constants";
+import { StyledOutlinedInput, StyledStack } from "./facetAssistant.styles";
+import { buildSummary, mapResponse } from "./utils";
+/**
+ * AI-powered facet assistant component.
+ * Converts a user query into facet filters (PoC implementation).
+ * TODO - clear search.
+ */
+export const FacetAssistant = () => {
+    const { exploreDispatch } = useExploreState();
+    const [isDirty, setIsDirty] = useState(false);
+    const [isError, setIsError] = useState(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [response, setResponse] = useState(null);
+    const onSubmit = useCallback(async (e) => {
+        e.preventDefault();
+        // Get the form value.
+        const formValue = getFormValue(e, "query-to-facets");
+        if (!formValue)
+            return;
+        setIsError(false);
+        setIsSubmitting(true);
+        setResponse(null);
+        try {
+            const res = await fetch("http://localhost:8000/api/v0/facets?mode=search_agent", {
+                body: JSON.stringify({ query: formValue }),
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                method: "POST",
+            });
+            if (!res.ok) {
+                setIsError(true);
+                return;
+            }
+            const data = await res.json();
+            // Set the response data
+            setResponse(data);
+            // Map the response data to facet filters.
+            const filters = mapResponse(data);
+            // Dispatch the update entity filters action.
+            exploreDispatch({
+                payload: { filters },
+                type: ExploreActionKind.UpdateEntityFilters,
+            });
+            // Reset the form.
+            setIsDirty(false);
+            e.target.reset();
+        }
+        catch (err) {
+            console.error(err);
+            setResponse(null);
+            setIsError(true);
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    }, [exploreDispatch]);
+    return (React.createElement(StyledStack, { useFlexGap: true },
+        React.createElement("form", { onSubmit: onSubmit },
+            React.createElement(StyledOutlinedInput, { ...OUTLINED_INPUT_PROPS, endAdornment: React.createElement(EndAdornment, { adornmentType: getEndAdornmentType(isDirty, isSubmitting) }), error: isError, onChange: (e) => setIsDirty(Boolean(e.target.value)) })),
+        React.createElement(ResultSummary, { summary: buildSummary(response) })));
+};

package/lib/components/Filter/components/ai/components/FacetAssistant/facetAssistant.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const StyledStack: import("@emotion/styled").StyledComponent<import("@mui/material").StackOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/material").StackOwnProps> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledOutlinedInput: import("@emotion/styled").StyledComponent<import("@mui/material").OutlinedInputProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Filter/components/ai/components/FacetAssistant/facetAssistant.styles.js

@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+import { OutlinedInput, Stack } from "@mui/material";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+export const StyledStack = styled(Stack) `
+  gap: 8px;
+  grid-column: 1 / -1;
+`;
+export const StyledOutlinedInput = styled(OutlinedInput) `
+  &:not(:placeholder-shown) {
+    .MuiOutlinedInput-input {
+      color: ${PALETTE.INK_MAIN};
+    }
+  }
+`;

package/lib/components/Filter/components/ai/components/FacetAssistant/stories/aiFacetAssistant.stories.d.ts

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

package/lib/components/Filter/components/ai/components/FacetAssistant/stories/aiFacetAssistant.stories.js

@@ -0,0 +1,12 @@
+import { Box } from "@mui/material";
+import React from "react";
+import { FacetAssistant } from "../facetAssistant";
+const meta = {
+    component: FacetAssistant,
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: { width: 264 } },
+            React.createElement(Story, null))),
+    ],
+};
+export default meta;
+export const DefaultStory = {};