@stackone/malachite 2.37.0 → 2.38.0

package/dist/components/Chat/ChatModelPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatModelPicker.js","sources":["../../../src/components/Chat/ChatModelPicker.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useInsertionEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport Avatar from '../Avatar';\nimport CaretDownIcon from '../CustomIcons/CaretDownIcon';\nimport CaretRightIcon from '../CustomIcons/CaretRightIcon';\nimport CaretUpIcon from '../CustomIcons/CaretUpIcon';\nimport CheckIcon from '../CustomIcons/CheckIcon';\nimport PillButton from '../PillButton';\nimport { pushEscapeLayer } from '../escapeLayers';\nimport { ensureOverlayStyles, overlayIdentity } from '../portalOverlay';\nimport { useTopLayer } from '../topLayer';\n\nexport interface ChatModelSubOption {\n    value: string;\n    label: string;\n    description?: string;\n}\n\nexport interface ChatModelOption {\n    value: string;\n    label: string;\n    /** The provider's mark. A URL, since providers ship logos rather than icon fonts. */\n    iconSrc?: string;\n    /** A second choice the model offers, e.g. how long it may think. */\n    options?: ChatModelSubOption[];\n}\n\nexport interface ChatModelPickerProps {\n    models: ChatModelOption[];\n    value: string;\n    /** The chosen sub-option, when the current model offers them. */\n    optionValue?: string;\n    /** Called with the model, and its sub-option when it has them. */\n    onChange: (model: string, option?: string) => void;\n    disabled?: boolean;\n    /**\n     * Opens upward. On by default: this sits under a composer at the bottom of a column, so\n     * downward is almost always off-screen.\n     */\n    openUp?: boolean;\n    'aria-label'?: string;\n}\n\nconst VIEWPORT_PADDING = 8;\nconst PANEL_MIN_WIDTH = 220;\nconst SUBMENU_MIN_WIDTH = 240;\n\n/**\n * Inline rather than Tailwind: the panel is portalled to `document.body`, which the scoped\n * shadow stylesheet does not reach. Same reason `ActionMenu` styles its popover inline.\n */\nconst panelStyle = (\n    position: { top: number; left: number } | null,\n    minWidth: number,\n): React.CSSProperties => ({\n    position: 'fixed',\n    top: position?.top ?? 0,\n    left: position?.left ?? 0,\n    minWidth,\n    background: 'var(--malachite-card-background, rgb(255, 255, 255))',\n    border: '1px solid var(--malachite-card-border, rgb(232, 232, 232))',\n    borderRadius: 12,\n    boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.08)',\n    padding: 4,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    visibility: position ? 'visible' : 'hidden',\n    opacity: position ? 1 : 0,\n});\n\nconst ROW_STYLE: React.CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 8,\n    padding: '6px 10px',\n    borderRadius: 8,\n    border: 'none',\n    background: 'transparent',\n    textAlign: 'left',\n    width: '100%',\n    cursor: 'pointer',\n    fontSize: 'var(--malachite-font-size-small, 13px)',\n    color: 'var(--malachite-text-primary, rgb(10, 10, 10))',\n};\n\nconst DESCRIPTION_STYLE: React.CSSProperties = {\n    fontSize: 'var(--malachite-font-size-xsmall, 11px)',\n    color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n};\n\nconst CHECK_STYLE: React.CSSProperties = {\n    marginLeft: 'auto',\n    display: 'inline-flex',\n    color: 'var(--malachite-text-success, rgb(2, 122, 66))',\n};\n\n/**\n * Which model answers, and how hard it may think.\n *\n * Its own component rather than a `Dropdown`: that one is a form select bound to\n * react-hook-form, and this is a menu whose rows open a second menu. Portalled for the same\n * reason `ActionMenu` is — a panel inside the composer would be clipped by it.\n */\nconst ChatModelPicker: React.FC<ChatModelPickerProps> = ({\n    models,\n    value,\n    optionValue,\n    onChange,\n    disabled = false,\n    openUp = true,\n    'aria-label': ariaLabel = 'Model',\n}) => {\n    const [open, setOpen] = useState(false);\n    const [position, setPosition] = useState<{ top: number; left: number } | null>(null);\n    const [submenuFor, setSubmenuFor] = useState<string | null>(null);\n    const [submenuPosition, setSubmenuPosition] = useState<{ top: number; left: number } | null>(\n        null,\n    );\n    const triggerRef = useRef<HTMLDivElement>(null);\n    const panelRef = useRef<HTMLDivElement>(null);\n    const submenuRef = useRef<HTMLDivElement>(null);\n\n    useTopLayer(panelRef, open);\n\n    const selected = models.find((model) => model.value === value);\n\n    const place = useCallback(() => {\n        const trigger = triggerRef.current;\n        const panel = panelRef.current;\n\n        if (!trigger) {\n            return;\n        }\n\n        const rect = trigger.getBoundingClientRect();\n        const width = panel?.offsetWidth || PANEL_MIN_WIDTH;\n        const height = panel?.offsetHeight || 0;\n        const maxLeft = window.innerWidth - width - VIEWPORT_PADDING;\n        const left = Math.max(VIEWPORT_PADDING, Math.min(rect.right - width, maxLeft));\n        // Flips when the chosen side has no room, so the panel is never off-screen.\n        const above = rect.top - height - 4;\n        const below = rect.bottom + 4;\n        const fitsAbove = above >= VIEWPORT_PADDING;\n        const fitsBelow = height === 0 || below + height <= window.innerHeight - VIEWPORT_PADDING;\n        const top = openUp ? (fitsAbove ? above : below) : fitsBelow ? below : above;\n\n        setPosition({ top, left });\n    }, [openUp]);\n\n    useEffect(() => {\n        if (!open) {\n            setSubmenuFor(null);\n            setSubmenuPosition(null);\n            return;\n        }\n\n        place();\n\n        const reposition = () => place();\n        const closeOnOutside = (event: MouseEvent) => {\n            // `composedPath`, not `event.target`: this listener is on `document`, and the\n            // trigger lives in a shadow root, so the target is retargeted to the shadow HOST.\n            // `contains` then says the trigger was not clicked, the menu closes on mousedown,\n            // and the click that follows toggles it straight back open.\n            const path = event.composedPath();\n            const insideOwnUi = [triggerRef.current, panelRef.current, submenuRef.current].some(\n                (node) => node !== null && path.includes(node),\n            );\n\n            if (!insideOwnUi) {\n                setOpen(false);\n            }\n        };\n        const popEscapeLayer = pushEscapeLayer(() => setOpen(false));\n\n        window.addEventListener('scroll', reposition, true);\n        window.addEventListener('resize', reposition);\n        document.addEventListener('mousedown', closeOnOutside, true);\n\n        return () => {\n            window.removeEventListener('scroll', reposition, true);\n            window.removeEventListener('resize', reposition);\n            document.removeEventListener('mousedown', closeOnOutside, true);\n            popEscapeLayer();\n        };\n    }, [open, place]);\n\n    useInsertionEffect(() => {\n        if (open) {\n            ensureOverlayStyles();\n        }\n    }, [open]);\n\n    const openSubmenu = (model: ChatModelOption, row: HTMLElement) => {\n        if (!model.options?.length) {\n            setSubmenuFor(null);\n            return;\n        }\n\n        const rect = row.getBoundingClientRect();\n        const panelLeft = panelRef.current?.getBoundingClientRect().left ?? rect.left;\n        // To the left of the parent panel by default, flipping right when that would clip.\n        const toLeft = panelLeft - SUBMENU_MIN_WIDTH - 4;\n        const left =\n            toLeft >= VIEWPORT_PADDING\n                ? toLeft\n                : Math.min(\n                      (panelRef.current?.getBoundingClientRect().right ?? rect.right) + 4,\n                      window.innerWidth - SUBMENU_MIN_WIDTH - VIEWPORT_PADDING,\n                  );\n\n        setSubmenuFor(model.value);\n        setSubmenuPosition({ top: rect.top, left });\n    };\n\n    const choose = (model: ChatModelOption, option?: ChatModelSubOption) => {\n        onChange(model.value, option?.value);\n        setOpen(false);\n    };\n\n    const submenuModel = models.find((model) => model.value === submenuFor);\n\n    return (\n        <>\n            <div ref={triggerRef} className=\"inline-flex\">\n                <PillButton\n                    label={selected?.label ?? value}\n                    icon={\n                        selected?.iconSrc ? (\n                            <Avatar src={selected.iconSrc} name={selected.label} size={14} />\n                        ) : undefined\n                    }\n                    trailingIcon={\n                        openUp ? (\n                            <CaretUpIcon size={10} />\n                        ) : (\n                            <CaretDownIcon size={10} />\n                        )\n                    }\n                    shape=\"tab\"\n                    size=\"small\"\n                    disabled={disabled}\n                    onClick={() => setOpen((wasOpen) => !wasOpen)}\n                />\n            </div>\n            {open &&\n                createPortal(\n                    <>\n                        <div\n                            ref={panelRef}\n                            role=\"menu\"\n                            aria-label={ariaLabel}\n                            // `actionmenu` rather than a new kind: the identity is a\n                            // host-facing allow-list, so a new class would need every host to\n                            // update its CSS, and this panel is an action menu in shape.\n                            {...overlayIdentity('actionmenu')}\n                            style={panelStyle(position, PANEL_MIN_WIDTH)}\n                        >\n                            {models.map((model) => (\n                                <button\n                                    key={model.value}\n                                    type=\"button\"\n                                    role=\"menuitem\"\n                                    aria-haspopup={model.options?.length ? 'menu' : undefined}\n                                    style={ROW_STYLE}\n                                    onMouseEnter={(event) =>\n                                        openSubmenu(model, event.currentTarget)\n                                    }\n                                    onFocus={(event) => openSubmenu(model, event.currentTarget)}\n                                    onClick={() =>\n                                        model.options?.length\n                                            ? choose(model, model.options[0])\n                                            : choose(model)\n                                    }\n                                >\n                                    {model.iconSrc ? (\n                                        <Avatar src={model.iconSrc} name={model.label} size={14} />\n                                    ) : null}\n                                    {model.label}\n                                    {model.value === value ? (\n                                        <span style={CHECK_STYLE}>\n                                            <CheckIcon size={11} />\n                                        </span>\n                                    ) : null}\n                                    {model.options?.length ? (\n                                        <span\n                                            style={{\n                                                marginLeft: model.value === value ? 4 : 'auto',\n                                                display: 'inline-flex',\n                                                color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n                                            }}\n                                        >\n                                            <CaretRightIcon size={10} />\n                                        </span>\n                                    ) : null}\n                                </button>\n                            ))}\n                        </div>\n                        {submenuModel?.options?.length ? (\n                            <div\n                                ref={submenuRef}\n                                role=\"menu\"\n                                aria-label={`${submenuModel.label} options`}\n                                {...overlayIdentity('actionmenu')}\n                                style={panelStyle(submenuPosition, SUBMENU_MIN_WIDTH)}\n                            >\n                                {submenuModel.options.map((option) => (\n                                    <button\n                                        key={option.value}\n                                        type=\"button\"\n                                        role=\"menuitem\"\n                                        style={{ ...ROW_STYLE, alignItems: 'flex-start' }}\n                                        onClick={() => choose(submenuModel, option)}\n                                    >\n                                        <span\n                                            style={{\n                                                display: 'flex',\n                                                flexDirection: 'column',\n                                                gap: 2,\n                                            }}\n                                        >\n                                            {option.label}\n                                            {option.description ? (\n                                                <span style={DESCRIPTION_STYLE}>\n                                                    {option.description}\n                                                </span>\n                                            ) : null}\n                                        </span>\n                                        {submenuModel.value === value &&\n                                        option.value === optionValue ? (\n                                            <span style={CHECK_STYLE}>\n                                                <CheckIcon size={11} />\n                                            </span>\n                                        ) : null}\n                                    </button>\n                                ))}\n                            </div>\n                        ) : null}\n                    </>,\n                    document.body,\n                )}\n        </>\n    );\n};\n\nexport default ChatModelPicker;\nexport { ChatModelPicker };\n"],"names":["VIEWPORT_PADDING","PANEL_MIN_WIDTH","SUBMENU_MIN_WIDTH","panelStyle","position","minWidth","ROW_STYLE","DESCRIPTION_STYLE","CHECK_STYLE","ChatModelPicker","models","value","optionValue","onChange","disabled","openUp","ariaLabel","open","setOpen","useState","setPosition","submenuFor","setSubmenuFor","submenuPosition","setSubmenuPosition","triggerRef","useRef","panelRef","submenuRef","useTopLayer","selected","model","place","useCallback","trigger","panel","rect","width","height","maxLeft","left","above","below","fitsAbove","fitsBelow","useEffect","reposition","closeOnOutside","event","path","node","popEscapeLayer","pushEscapeLayer","useInsertionEffect","ensureOverlayStyles","openSubmenu","row","_a","toLeft","_b","_c","choose","option","submenuModel","jsxs","Fragment","jsx","PillButton","Avatar","CaretUpIcon","CaretDownIcon","wasOpen","createPortal","overlayIdentity","CheckIcon","CaretRightIcon"],"mappings":"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"}
+{"version":3,"file":"ChatModelPicker.js","sources":["../../../src/components/Chat/ChatModelPicker.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useInsertionEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport Avatar from '../Avatar';\nimport CaretDownIcon from '../CustomIcons/CaretDownIcon';\nimport CaretRightIcon from '../CustomIcons/CaretRightIcon';\nimport CaretUpIcon from '../CustomIcons/CaretUpIcon';\nimport CheckIcon from '../CustomIcons/CheckIcon';\nimport PillButton from '../PillButton';\nimport { pushEscapeLayer } from '../escapeLayers';\nimport { useOwnedByPopover } from '../popoverTree';\nimport { ensureOverlayStyles, overlayIdentity } from '../portalOverlay';\nimport { useTopLayer } from '../topLayer';\n\nexport interface ChatModelSubOption {\n    value: string;\n    label: string;\n    description?: string;\n}\n\nexport interface ChatModelOption {\n    value: string;\n    label: string;\n    /** The provider's mark. A URL, since providers ship logos rather than icon fonts. */\n    iconSrc?: string;\n    /** A second choice the model offers, e.g. how long it may think. */\n    options?: ChatModelSubOption[];\n}\n\nexport interface ChatModelPickerProps {\n    models: ChatModelOption[];\n    value: string;\n    /** The chosen sub-option, when the current model offers them. */\n    optionValue?: string;\n    /** Called with the model, and its sub-option when it has them. */\n    onChange: (model: string, option?: string) => void;\n    disabled?: boolean;\n    /**\n     * Opens upward. On by default: this sits under a composer at the bottom of a column, so\n     * downward is almost always off-screen.\n     */\n    openUp?: boolean;\n    'aria-label'?: string;\n}\n\nconst VIEWPORT_PADDING = 8;\nconst PANEL_MIN_WIDTH = 220;\nconst SUBMENU_MIN_WIDTH = 240;\n\n/**\n * Inline rather than Tailwind: the panel is portalled to `document.body`, which the scoped\n * shadow stylesheet does not reach. Same reason `ActionMenu` styles its popover inline.\n */\nconst panelStyle = (\n    position: { top: number; left: number } | null,\n    minWidth: number,\n): React.CSSProperties => ({\n    position: 'fixed',\n    top: position?.top ?? 0,\n    left: position?.left ?? 0,\n    minWidth,\n    background: 'var(--malachite-card-background, rgb(255, 255, 255))',\n    border: '1px solid var(--malachite-card-border, rgb(232, 232, 232))',\n    borderRadius: 12,\n    boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.08)',\n    padding: 4,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    visibility: position ? 'visible' : 'hidden',\n    opacity: position ? 1 : 0,\n});\n\nconst ROW_STYLE: React.CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 8,\n    padding: '6px 10px',\n    borderRadius: 8,\n    border: 'none',\n    background: 'transparent',\n    textAlign: 'left',\n    width: '100%',\n    cursor: 'pointer',\n    fontSize: 'var(--malachite-font-size-small, 13px)',\n    color: 'var(--malachite-text-primary, rgb(10, 10, 10))',\n};\n\nconst DESCRIPTION_STYLE: React.CSSProperties = {\n    fontSize: 'var(--malachite-font-size-xsmall, 11px)',\n    color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n};\n\nconst CHECK_STYLE: React.CSSProperties = {\n    marginLeft: 'auto',\n    display: 'inline-flex',\n    color: 'var(--malachite-text-success, rgb(2, 122, 66))',\n};\n\n/**\n * Which model answers, and how hard it may think.\n *\n * Its own component rather than a `Dropdown`: that one is a form select bound to\n * react-hook-form, and this is a menu whose rows open a second menu. Portalled for the same\n * reason `ActionMenu` is — a panel inside the composer would be clipped by it.\n */\nconst ChatModelPicker: React.FC<ChatModelPickerProps> = ({\n    models,\n    value,\n    optionValue,\n    onChange,\n    disabled = false,\n    openUp = true,\n    'aria-label': ariaLabel = 'Model',\n}) => {\n    const [open, setOpen] = useState(false);\n    const [position, setPosition] = useState<{ top: number; left: number } | null>(null);\n    const [submenuFor, setSubmenuFor] = useState<string | null>(null);\n    const [submenuPosition, setSubmenuPosition] = useState<{ top: number; left: number } | null>(\n        null,\n    );\n    const triggerRef = useRef<HTMLDivElement>(null);\n    const panelRef = useRef<HTMLDivElement>(null);\n    const submenuRef = useRef<HTMLDivElement>(null);\n\n    useTopLayer(panelRef, open);\n    useOwnedByPopover(\n        useCallback(() => submenuRef.current, []),\n        open,\n    );\n\n    const selected = models.find((model) => model.value === value);\n\n    const place = useCallback(() => {\n        const trigger = triggerRef.current;\n        const panel = panelRef.current;\n\n        if (!trigger) {\n            return;\n        }\n\n        const rect = trigger.getBoundingClientRect();\n        const width = panel?.offsetWidth || PANEL_MIN_WIDTH;\n        const height = panel?.offsetHeight || 0;\n        const maxLeft = window.innerWidth - width - VIEWPORT_PADDING;\n        const left = Math.max(VIEWPORT_PADDING, Math.min(rect.right - width, maxLeft));\n        // Flips when the chosen side has no room, so the panel is never off-screen.\n        const above = rect.top - height - 4;\n        const below = rect.bottom + 4;\n        const fitsAbove = above >= VIEWPORT_PADDING;\n        const fitsBelow = height === 0 || below + height <= window.innerHeight - VIEWPORT_PADDING;\n        const top = openUp ? (fitsAbove ? above : below) : fitsBelow ? below : above;\n\n        setPosition({ top, left });\n    }, [openUp]);\n\n    useEffect(() => {\n        if (!open) {\n            setSubmenuFor(null);\n            setSubmenuPosition(null);\n            return;\n        }\n\n        place();\n\n        const reposition = () => place();\n        const closeOnOutside = (event: MouseEvent) => {\n            // `composedPath`, not `event.target`: this listener is on `document`, and the\n            // trigger lives in a shadow root, so the target is retargeted to the shadow HOST.\n            // `contains` then says the trigger was not clicked, the menu closes on mousedown,\n            // and the click that follows toggles it straight back open.\n            const path = event.composedPath();\n            const insideOwnUi = [triggerRef.current, panelRef.current, submenuRef.current].some(\n                (node) => node !== null && path.includes(node),\n            );\n\n            if (!insideOwnUi) {\n                setOpen(false);\n            }\n        };\n        const popEscapeLayer = pushEscapeLayer(() => setOpen(false));\n\n        window.addEventListener('scroll', reposition, true);\n        window.addEventListener('resize', reposition);\n        document.addEventListener('mousedown', closeOnOutside, true);\n\n        return () => {\n            window.removeEventListener('scroll', reposition, true);\n            window.removeEventListener('resize', reposition);\n            document.removeEventListener('mousedown', closeOnOutside, true);\n            popEscapeLayer();\n        };\n    }, [open, place]);\n\n    useInsertionEffect(() => {\n        if (open) {\n            ensureOverlayStyles();\n        }\n    }, [open]);\n\n    const openSubmenu = (model: ChatModelOption, row: HTMLElement) => {\n        if (!model.options?.length) {\n            setSubmenuFor(null);\n            return;\n        }\n\n        const rect = row.getBoundingClientRect();\n        const panelLeft = panelRef.current?.getBoundingClientRect().left ?? rect.left;\n        // To the left of the parent panel by default, flipping right when that would clip.\n        const toLeft = panelLeft - SUBMENU_MIN_WIDTH - 4;\n        const left =\n            toLeft >= VIEWPORT_PADDING\n                ? toLeft\n                : Math.min(\n                      (panelRef.current?.getBoundingClientRect().right ?? rect.right) + 4,\n                      window.innerWidth - SUBMENU_MIN_WIDTH - VIEWPORT_PADDING,\n                  );\n\n        setSubmenuFor(model.value);\n        setSubmenuPosition({ top: rect.top, left });\n    };\n\n    const choose = (model: ChatModelOption, option?: ChatModelSubOption) => {\n        onChange(model.value, option?.value);\n        setOpen(false);\n    };\n\n    const submenuModel = models.find((model) => model.value === submenuFor);\n\n    return (\n        <>\n            <div ref={triggerRef} className=\"inline-flex\">\n                <PillButton\n                    label={selected?.label ?? value}\n                    icon={\n                        selected?.iconSrc ? (\n                            <Avatar src={selected.iconSrc} name={selected.label} size={14} />\n                        ) : undefined\n                    }\n                    trailingIcon={\n                        openUp ? (\n                            <CaretUpIcon size={10} />\n                        ) : (\n                            <CaretDownIcon size={10} />\n                        )\n                    }\n                    shape=\"tab\"\n                    size=\"small\"\n                    disabled={disabled}\n                    onClick={() => setOpen((wasOpen) => !wasOpen)}\n                />\n            </div>\n            {open &&\n                createPortal(\n                    <>\n                        <div\n                            ref={panelRef}\n                            role=\"menu\"\n                            aria-label={ariaLabel}\n                            // `actionmenu` rather than a new kind: the identity is a\n                            // host-facing allow-list, so a new class would need every host to\n                            // update its CSS, and this panel is an action menu in shape.\n                            {...overlayIdentity('actionmenu')}\n                            style={panelStyle(position, PANEL_MIN_WIDTH)}\n                        >\n                            {models.map((model) => (\n                                <button\n                                    key={model.value}\n                                    type=\"button\"\n                                    role=\"menuitem\"\n                                    aria-haspopup={model.options?.length ? 'menu' : undefined}\n                                    style={ROW_STYLE}\n                                    onMouseEnter={(event) =>\n                                        openSubmenu(model, event.currentTarget)\n                                    }\n                                    onFocus={(event) => openSubmenu(model, event.currentTarget)}\n                                    onClick={() =>\n                                        model.options?.length\n                                            ? choose(model, model.options[0])\n                                            : choose(model)\n                                    }\n                                >\n                                    {model.iconSrc ? (\n                                        <Avatar src={model.iconSrc} name={model.label} size={14} />\n                                    ) : null}\n                                    {model.label}\n                                    {model.value === value ? (\n                                        <span style={CHECK_STYLE}>\n                                            <CheckIcon size={11} />\n                                        </span>\n                                    ) : null}\n                                    {model.options?.length ? (\n                                        <span\n                                            style={{\n                                                marginLeft: model.value === value ? 4 : 'auto',\n                                                display: 'inline-flex',\n                                                color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n                                            }}\n                                        >\n                                            <CaretRightIcon size={10} />\n                                        </span>\n                                    ) : null}\n                                </button>\n                            ))}\n                        </div>\n                        {submenuModel?.options?.length ? (\n                            <div\n                                ref={submenuRef}\n                                role=\"menu\"\n                                aria-label={`${submenuModel.label} options`}\n                                {...overlayIdentity('actionmenu')}\n                                style={panelStyle(submenuPosition, SUBMENU_MIN_WIDTH)}\n                            >\n                                {submenuModel.options.map((option) => (\n                                    <button\n                                        key={option.value}\n                                        type=\"button\"\n                                        role=\"menuitem\"\n                                        style={{ ...ROW_STYLE, alignItems: 'flex-start' }}\n                                        onClick={() => choose(submenuModel, option)}\n                                    >\n                                        <span\n                                            style={{\n                                                display: 'flex',\n                                                flexDirection: 'column',\n                                                gap: 2,\n                                            }}\n                                        >\n                                            {option.label}\n                                            {option.description ? (\n                                                <span style={DESCRIPTION_STYLE}>\n                                                    {option.description}\n                                                </span>\n                                            ) : null}\n                                        </span>\n                                        {submenuModel.value === value &&\n                                        option.value === optionValue ? (\n                                            <span style={CHECK_STYLE}>\n                                                <CheckIcon size={11} />\n                                            </span>\n                                        ) : null}\n                                    </button>\n                                ))}\n                            </div>\n                        ) : null}\n                    </>,\n                    document.body,\n                )}\n        </>\n    );\n};\n\nexport default ChatModelPicker;\nexport { ChatModelPicker };\n"],"names":["VIEWPORT_PADDING","PANEL_MIN_WIDTH","SUBMENU_MIN_WIDTH","panelStyle","position","minWidth","ROW_STYLE","DESCRIPTION_STYLE","CHECK_STYLE","ChatModelPicker","models","value","optionValue","onChange","disabled","openUp","ariaLabel","open","setOpen","useState","setPosition","submenuFor","setSubmenuFor","submenuPosition","setSubmenuPosition","triggerRef","useRef","panelRef","submenuRef","useTopLayer","useOwnedByPopover","useCallback","selected","model","place","trigger","panel","rect","width","height","maxLeft","left","above","below","fitsAbove","fitsBelow","useEffect","reposition","closeOnOutside","event","path","node","popEscapeLayer","pushEscapeLayer","useInsertionEffect","ensureOverlayStyles","openSubmenu","row","_a","toLeft","_b","_c","choose","option","submenuModel","jsxs","Fragment","jsx","PillButton","Avatar","CaretUpIcon","CaretDownIcon","wasOpen","createPortal","overlayIdentity","CheckIcon","CaretRightIcon"],"mappings":"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"}

package/dist/components/CustomIcons/BuildingIcon.js

@@ -0,0 +1,16 @@
+import { jsx as i } from "react/jsx-runtime";
+import p from "../../assets/icons/building.svg.js";
+const c = ({ size: o = 16, className: t = "", style: n = {}, onClick: r }) => {
+  const l = {
+    width: typeof o == "number" ? `${o}px` : o,
+    height: typeof o == "number" ? `${o}px` : o,
+    display: "inline-block",
+    fill: "currentColor",
+    ...n
+  };
+  return /* @__PURE__ */ i(p, { className: t, style: l, onClick: r });
+};
+export {
+  c as default
+};
+//# sourceMappingURL=BuildingIcon.js.map

package/dist/components/CustomIcons/BuildingIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuildingIcon.js","sources":["../../../src/components/CustomIcons/BuildingIcon.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport BuildingIconSvg from '../../assets/icons/building.svg?react';\n\nexport interface IconProps {\n    size?: number | string;\n    className?: string;\n    style?: CSSProperties;\n    onClick?: () => void;\n}\n\nconst BuildingIcon: React.FC<IconProps> = ({ size = 16, className = '', style = {}, onClick }) => {\n    const iconStyle: CSSProperties = {\n        width: typeof size === 'number' ? `${size}px` : size,\n        height: typeof size === 'number' ? `${size}px` : size,\n        display: 'inline-block',\n        fill: 'currentColor',\n        ...style,\n    };\n\n    return <BuildingIconSvg className={className} style={iconStyle} onClick={onClick} />;\n};\n\nexport default BuildingIcon;\n"],"names":["BuildingIcon","size","className","style","onClick","iconStyle","jsx","BuildingIconSvg"],"mappings":";;AAUA,MAAMA,IAAoC,CAAC,EAAE,MAAAC,IAAO,IAAI,WAAAC,IAAY,IAAI,OAAAC,IAAQ,IAAI,SAAAC,QAAc;AAC9F,QAAMC,IAA2B;AAAA,IAC7B,OAAO,OAAOJ,KAAS,WAAW,GAAGA,CAAI,OAAOA;AAAA,IAChD,QAAQ,OAAOA,KAAS,WAAW,GAAGA,CAAI,OAAOA;AAAA,IACjD,SAAS;AAAA,IACT,MAAM;AAAA,IACN,GAAGE;AAAA,EAAA;AAGP,SAAO,gBAAAG,EAACC,GAAA,EAAgB,WAAAL,GAAsB,OAAOG,GAAW,SAAAD,GAAkB;AACtF;"}

package/dist/components/CustomIcons/ChevronsUpDownIcon.js

@@ -0,0 +1,16 @@
+import { jsx as e } from "react/jsx-runtime";
+import l from "../../assets/icons/chevrons_up_down.svg.js";
+const m = ({ size: o = 16, className: n = "", style: r = {}, onClick: t }) => {
+  const p = {
+    width: typeof o == "number" ? `${o}px` : o,
+    height: typeof o == "number" ? `${o}px` : o,
+    display: "inline-block",
+    fill: "currentColor",
+    ...r
+  };
+  return /* @__PURE__ */ e(l, { className: n, style: p, onClick: t });
+};
+export {
+  m as default
+};
+//# sourceMappingURL=ChevronsUpDownIcon.js.map

package/dist/components/CustomIcons/ChevronsUpDownIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChevronsUpDownIcon.js","sources":["../../../src/components/CustomIcons/ChevronsUpDownIcon.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport ChevronsUpDownIconSvg from '../../assets/icons/chevrons_up_down.svg?react';\n\nexport interface IconProps {\n    size?: number | string;\n    className?: string;\n    style?: CSSProperties;\n    onClick?: () => void;\n}\n\nconst ChevronsUpDownIcon: React.FC<IconProps> = ({ size = 16, className = '', style = {}, onClick }) => {\n    const iconStyle: CSSProperties = {\n        width: typeof size === 'number' ? `${size}px` : size,\n        height: typeof size === 'number' ? `${size}px` : size,\n        display: 'inline-block',\n        fill: 'currentColor',\n        ...style,\n    };\n\n    return <ChevronsUpDownIconSvg className={className} style={iconStyle} onClick={onClick} />;\n};\n\nexport default ChevronsUpDownIcon;\n"],"names":["ChevronsUpDownIcon","size","className","style","onClick","iconStyle","jsx","ChevronsUpDownIconSvg"],"mappings":";;AAUA,MAAMA,IAA0C,CAAC,EAAE,MAAAC,IAAO,IAAI,WAAAC,IAAY,IAAI,OAAAC,IAAQ,IAAI,SAAAC,QAAc;AACpG,QAAMC,IAA2B;AAAA,IAC7B,OAAO,OAAOJ,KAAS,WAAW,GAAGA,CAAI,OAAOA;AAAA,IAChD,QAAQ,OAAOA,KAAS,WAAW,GAAGA,CAAI,OAAOA;AAAA,IACjD,SAAS;AAAA,IACT,MAAM;AAAA,IACN,GAAGE;AAAA,EAAA;AAGP,SAAO,gBAAAG,EAACC,GAAA,EAAsB,WAAAL,GAAsB,OAAOG,GAAW,SAAAD,GAAkB;AAC5F;"}

package/dist/components/CustomIcons/ConnectorIcon.js

@@ -0,0 +1,16 @@
+import { jsx as l } from "react/jsx-runtime";
+import c from "../../assets/icons/connector.svg.js";
+const m = ({ size: o = 16, className: t = "", style: n = {}, onClick: r }) => {
+  const e = {
+    width: typeof o == "number" ? `${o}px` : o,
+    height: typeof o == "number" ? `${o}px` : o,
+    display: "inline-block",
+    fill: "currentColor",
+    ...n
+  };
+  return /* @__PURE__ */ l(c, { className: t, style: e, onClick: r });
+};
+export {
+  m as default
+};
+//# sourceMappingURL=ConnectorIcon.js.map

package/dist/components/CustomIcons/ConnectorIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectorIcon.js","sources":["../../../src/components/CustomIcons/ConnectorIcon.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport ConnectorIconSvg from '../../assets/icons/connector.svg?react';\n\nexport interface IconProps {\n    size?: number | string;\n    className?: string;\n    style?: CSSProperties;\n    onClick?: () => void;\n}\n\nconst ConnectorIcon: React.FC<IconProps> = ({ size = 16, className = '', style = {}, onClick }) => {\n    const iconStyle: CSSProperties = {\n        width: typeof size === 'number' ? `${size}px` : size,\n        height: typeof size === 'number' ? `${size}px` : size,\n        display: 'inline-block',\n        fill: 'currentColor',\n        ...style,\n    };\n\n    return <ConnectorIconSvg className={className} style={iconStyle} onClick={onClick} />;\n};\n\nexport default ConnectorIcon;\n"],"names":["ConnectorIcon","size","className","style","onClick","iconStyle","jsx","ConnectorIconSvg"],"mappings":";;AAUA,MAAMA,IAAqC,CAAC,EAAE,MAAAC,IAAO,IAAI,WAAAC,IAAY,IAAI,OAAAC,IAAQ,IAAI,SAAAC,QAAc;AAC/F,QAAMC,IAA2B;AAAA,IAC7B,OAAO,OAAOJ,KAAS,WAAW,GAAGA,CAAI,OAAOA;AAAA,IAChD,QAAQ,OAAOA,KAAS,WAAW,GAAGA,CAAI,OAAOA;AAAA,IACjD,SAAS;AAAA,IACT,MAAM;AAAA,IACN,GAAGE;AAAA,EAAA;AAGP,SAAO,gBAAAG,EAACC,GAAA,EAAiB,WAAAL,GAAsB,OAAOG,GAAW,SAAAD,GAAkB;AACvF;"}

package/dist/components/CustomIcons/ExternalLinkIcon.js

@@ -0,0 +1,16 @@
+import { jsx as e } from "react/jsx-runtime";
+import p from "../../assets/icons/external_link.svg.js";
+const i = ({ size: t = 16, className: n = "", style: o = {}, onClick: r }) => {
+  const l = {
+    width: typeof t == "number" ? `${t}px` : t,
+    height: typeof t == "number" ? `${t}px` : t,
+    display: "inline-block",
+    fill: "currentColor",
+    ...o
+  };
+  return /* @__PURE__ */ e(p, { className: n, style: l, onClick: r });
+};
+export {
+  i as default
+};
+//# sourceMappingURL=ExternalLinkIcon.js.map

package/dist/components/CustomIcons/ExternalLinkIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalLinkIcon.js","sources":["../../../src/components/CustomIcons/ExternalLinkIcon.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport ExternalLinkIconSvg from '../../assets/icons/external_link.svg?react';\n\nexport interface IconProps {\n    size?: number | string;\n    className?: string;\n    style?: CSSProperties;\n    onClick?: () => void;\n}\n\nconst ExternalLinkIcon: React.FC<IconProps> = ({ size = 16, className = '', style = {}, onClick }) => {\n    const iconStyle: CSSProperties = {\n        width: typeof size === 'number' ? `${size}px` : size,\n        height: typeof size === 'number' ? `${size}px` : size,\n        display: 'inline-block',\n        fill: 'currentColor',\n        ...style,\n    };\n\n    return <ExternalLinkIconSvg className={className} style={iconStyle} onClick={onClick} />;\n};\n\nexport default ExternalLinkIcon;\n"],"names":["ExternalLinkIcon","size","className","style","onClick","iconStyle","jsx","ExternalLinkIconSvg"],"mappings":";;AAUA,MAAMA,IAAwC,CAAC,EAAE,MAAAC,IAAO,IAAI,WAAAC,IAAY,IAAI,OAAAC,IAAQ,IAAI,SAAAC,QAAc;AAClG,QAAMC,IAA2B;AAAA,IAC7B,OAAO,OAAOJ,KAAS,WAAW,GAAGA,CAAI,OAAOA;AAAA,IAChD,QAAQ,OAAOA,KAAS,WAAW,GAAGA,CAAI,OAAOA;AAAA,IACjD,SAAS;AAAA,IACT,MAAM;AAAA,IACN,GAAGE;AAAA,EAAA;AAGP,SAAO,gBAAAG,EAACC,GAAA,EAAoB,WAAAL,GAAsB,OAAOG,GAAW,SAAAD,GAAkB;AAC1F;"}

package/dist/components/CustomIcons/FieldCoverageIcon.js

@@ -0,0 +1,16 @@
+import { jsx as n } from "react/jsx-runtime";
+import p from "../../assets/icons/field_coverage.svg.js";
+const i = ({ size: o = 16, className: r = "", style: t = {}, onClick: e }) => {
+  const l = {
+    width: typeof o == "number" ? `${o}px` : o,
+    height: typeof o == "number" ? `${o}px` : o,
+    display: "inline-block",
+    fill: "currentColor",
+    ...t
+  };
+  return /* @__PURE__ */ n(p, { className: r, style: l, onClick: e });
+};
+export {
+  i as default
+};
+//# sourceMappingURL=FieldCoverageIcon.js.map

package/dist/components/CustomIcons/FieldCoverageIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldCoverageIcon.js","sources":["../../../src/components/CustomIcons/FieldCoverageIcon.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport FieldCoverageIconSvg from '../../assets/icons/field_coverage.svg?react';\n\nexport interface IconProps {\n    size?: number | string;\n    className?: string;\n    style?: CSSProperties;\n    onClick?: () => void;\n}\n\nconst FieldCoverageIcon: React.FC<IconProps> = ({ size = 16, className = '', style = {}, onClick }) => {\n    const iconStyle: CSSProperties = {\n        width: typeof size === 'number' ? `${size}px` : size,\n        height: typeof size === 'number' ? `${size}px` : size,\n        display: 'inline-block',\n        fill: 'currentColor',\n        ...style,\n    };\n\n    return <FieldCoverageIconSvg className={className} style={iconStyle} onClick={onClick} />;\n};\n\nexport default FieldCoverageIcon;\n"],"names":["FieldCoverageIcon","size","className","style","onClick","iconStyle","jsx","FieldCoverageIconSvg"],"mappings":";;AAUA,MAAMA,IAAyC,CAAC,EAAE,MAAAC,IAAO,IAAI,WAAAC,IAAY,IAAI,OAAAC,IAAQ,IAAI,SAAAC,QAAc;AACnG,QAAMC,IAA2B;AAAA,IAC7B,OAAO,OAAOJ,KAAS,WAAW,GAAGA,CAAI,OAAOA;AAAA,IAChD,QAAQ,OAAOA,KAAS,WAAW,GAAGA,CAAI,OAAOA;AAAA,IACjD,SAAS;AAAA,IACT,MAAM;AAAA,IACN,GAAGE;AAAA,EAAA;AAGP,SAAO,gBAAAG,EAACC,GAAA,EAAqB,WAAAL,GAAsB,OAAOG,GAAW,SAAAD,GAAkB;AAC3F;"}

package/dist/components/CustomIcons/LayoutIcon.js

@@ -0,0 +1,16 @@
+import { jsx as p } from "react/jsx-runtime";
+import e from "../../assets/icons/layout.svg.js";
+const c = ({ size: o = 16, className: t = "", style: r = {}, onClick: n }) => {
+  const l = {
+    width: typeof o == "number" ? `${o}px` : o,
+    height: typeof o == "number" ? `${o}px` : o,
+    display: "inline-block",
+    fill: "currentColor",
+    ...r
+  };
+  return /* @__PURE__ */ p(e, { className: t, style: l, onClick: n });
+};
+export {
+  c as default
+};
+//# sourceMappingURL=LayoutIcon.js.map

package/dist/components/CustomIcons/LayoutIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutIcon.js","sources":["../../../src/components/CustomIcons/LayoutIcon.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport LayoutIconSvg from '../../assets/icons/layout.svg?react';\n\nexport interface IconProps {\n    size?: number | string;\n    className?: string;\n    style?: CSSProperties;\n    onClick?: () => void;\n}\n\nconst LayoutIcon: React.FC<IconProps> = ({ size = 16, className = '', style = {}, onClick }) => {\n    const iconStyle: CSSProperties = {\n        width: typeof size === 'number' ? `${size}px` : size,\n        height: typeof size === 'number' ? `${size}px` : size,\n        display: 'inline-block',\n        fill: 'currentColor',\n        ...style,\n    };\n\n    return <LayoutIconSvg className={className} style={iconStyle} onClick={onClick} />;\n};\n\nexport default LayoutIcon;\n"],"names":["LayoutIcon","size","className","style","onClick","iconStyle","jsx","LayoutIconSvg"],"mappings":";;AAUA,MAAMA,IAAkC,CAAC,EAAE,MAAAC,IAAO,IAAI,WAAAC,IAAY,IAAI,OAAAC,IAAQ,IAAI,SAAAC,QAAc;AAC5F,QAAMC,IAA2B;AAAA,IAC7B,OAAO,OAAOJ,KAAS,WAAW,GAAGA,CAAI,OAAOA;AAAA,IAChD,QAAQ,OAAOA,KAAS,WAAW,GAAGA,CAAI,OAAOA;AAAA,IACjD,SAAS;AAAA,IACT,MAAM;AAAA,IACN,GAAGE;AAAA,EAAA;AAGP,SAAO,gBAAAG,EAACC,GAAA,EAAc,WAAAL,GAAsB,OAAOG,GAAW,SAAAD,GAAkB;AACpF;"}

package/dist/components/CustomIcons/LinkIcon.js

@@ -0,0 +1,16 @@
+import { jsx as p } from "react/jsx-runtime";
+import e from "../../assets/icons/link.svg.js";
+const i = ({ size: o = 16, className: t = "", style: n = {}, onClick: r }) => {
+  const l = {
+    width: typeof o == "number" ? `${o}px` : o,
+    height: typeof o == "number" ? `${o}px` : o,
+    display: "inline-block",
+    fill: "currentColor",
+    ...n
+  };
+  return /* @__PURE__ */ p(e, { className: t, style: l, onClick: r });
+};
+export {
+  i as default
+};
+//# sourceMappingURL=LinkIcon.js.map

package/dist/components/CustomIcons/LinkIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkIcon.js","sources":["../../../src/components/CustomIcons/LinkIcon.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport LinkIconSvg from '../../assets/icons/link.svg?react';\n\nexport interface IconProps {\n    size?: number | string;\n    className?: string;\n    style?: CSSProperties;\n    onClick?: () => void;\n}\n\nconst LinkIcon: React.FC<IconProps> = ({ size = 16, className = '', style = {}, onClick }) => {\n    const iconStyle: CSSProperties = {\n        width: typeof size === 'number' ? `${size}px` : size,\n        height: typeof size === 'number' ? `${size}px` : size,\n        display: 'inline-block',\n        fill: 'currentColor',\n        ...style,\n    };\n\n    return <LinkIconSvg className={className} style={iconStyle} onClick={onClick} />;\n};\n\nexport default LinkIcon;\n"],"names":["LinkIcon","size","className","style","onClick","iconStyle","jsx","LinkIconSvg"],"mappings":";;AAUA,MAAMA,IAAgC,CAAC,EAAE,MAAAC,IAAO,IAAI,WAAAC,IAAY,IAAI,OAAAC,IAAQ,IAAI,SAAAC,QAAc;AAC1F,QAAMC,IAA2B;AAAA,IAC7B,OAAO,OAAOJ,KAAS,WAAW,GAAGA,CAAI,OAAOA;AAAA,IAChD,QAAQ,OAAOA,KAAS,WAAW,GAAGA,CAAI,OAAOA;AAAA,IACjD,SAAS;AAAA,IACT,MAAM;AAAA,IACN,GAAGE;AAAA,EAAA;AAGP,SAAO,gBAAAG,EAACC,GAAA,EAAY,WAAAL,GAAsB,OAAOG,GAAW,SAAAD,GAAkB;AAClF;"}

package/dist/components/CustomIcons/PlaygroundIcon.js

@@ -0,0 +1,16 @@
+import { jsx as p } from "react/jsx-runtime";
+import e from "../../assets/icons/playground.svg.js";
+const c = ({ size: o = 16, className: r = "", style: t = {}, onClick: n }) => {
+  const l = {
+    width: typeof o == "number" ? `${o}px` : o,
+    height: typeof o == "number" ? `${o}px` : o,
+    display: "inline-block",
+    fill: "currentColor",
+    ...t
+  };
+  return /* @__PURE__ */ p(e, { className: r, style: l, onClick: n });
+};
+export {
+  c as default
+};
+//# sourceMappingURL=PlaygroundIcon.js.map

package/dist/components/CustomIcons/PlaygroundIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaygroundIcon.js","sources":["../../../src/components/CustomIcons/PlaygroundIcon.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport PlaygroundIconSvg from '../../assets/icons/playground.svg?react';\n\nexport interface IconProps {\n    size?: number | string;\n    className?: string;\n    style?: CSSProperties;\n    onClick?: () => void;\n}\n\nconst PlaygroundIcon: React.FC<IconProps> = ({ size = 16, className = '', style = {}, onClick }) => {\n    const iconStyle: CSSProperties = {\n        width: typeof size === 'number' ? `${size}px` : size,\n        height: typeof size === 'number' ? `${size}px` : size,\n        display: 'inline-block',\n        fill: 'currentColor',\n        ...style,\n    };\n\n    return <PlaygroundIconSvg className={className} style={iconStyle} onClick={onClick} />;\n};\n\nexport default PlaygroundIcon;\n"],"names":["PlaygroundIcon","size","className","style","onClick","iconStyle","jsx","PlaygroundIconSvg"],"mappings":";;AAUA,MAAMA,IAAsC,CAAC,EAAE,MAAAC,IAAO,IAAI,WAAAC,IAAY,IAAI,OAAAC,IAAQ,IAAI,SAAAC,QAAc;AAChG,QAAMC,IAA2B;AAAA,IAC7B,OAAO,OAAOJ,KAAS,WAAW,GAAGA,CAAI,OAAOA;AAAA,IAChD,QAAQ,OAAOA,KAAS,WAAW,GAAGA,CAAI,OAAOA;AAAA,IACjD,SAAS;AAAA,IACT,MAAM;AAAA,IACN,GAAGE;AAAA,EAAA;AAGP,SAAO,gBAAAG,EAACC,GAAA,EAAkB,WAAAL,GAAsB,OAAOG,GAAW,SAAAD,GAAkB;AACxF;"}