@stackone/malachite 2.42.2 → 2.44.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 { 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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"}
+{"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 { usePopupLayer } from '../overlayLayers';\nimport { useOwnedByPopover } from '../popoverTree';\nimport { ensureOverlayStyles } 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    const panelIdentity = usePopupLayer('actionmenu', open, panelRef);\n    const submenuIdentity = usePopupLayer('actionmenu', open, submenuRef);\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                            {...panelIdentity}\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                                {...submenuIdentity}\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","panelIdentity","usePopupLayer","submenuIdentity","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","CheckIcon","CaretRightIcon"],"mappings":";;;;;;;;;;;;;;AA6CA,MAAMA,IAAmB,GACnBC,IAAkB,KAClBC,IAAoB,KAMpBC,IAAa,CACfC,GACAC,OACuB;AAAA,EACvB,UAAU;AAAA,EACV,MAAKD,KAAA,gBAAAA,EAAU,QAAO;AAAA,EACtB,OAAMA,KAAA,gBAAAA,EAAU,SAAQ;AAAA,EACxB,UAAAC;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,WAAW;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AAAA,EACT,eAAe;AAAA,EACf,KAAK;AAAA,EACL,YAAYD,IAAW,YAAY;AAAA,EACnC,SAASA,IAAW,IAAI;AAC5B,IAEME,IAAiC;AAAA,EACnC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,SAAS;AAAA,EACT,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AACX,GAEMC,KAAyC;AAAA,EAC3C,UAAU;AAAA,EACV,OAAO;AACX,GAEMC,IAAmC;AAAA,EACrC,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,OAAO;AACX,GASMC,KAAkD,CAAC;AAAA,EACrD,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,QAAAC,IAAS;AAAA,EACT,cAAcC,IAAY;AAC9B,MAAM;;AACF,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAChC,CAACf,GAAUgB,CAAW,IAAID,EAA+C,IAAI,GAC7E,CAACE,GAAYC,CAAa,IAAIH,EAAwB,IAAI,GAC1D,CAACI,GAAiBC,CAAkB,IAAIL;AAAA,IAC1C;AAAA,EAAA,GAEEM,IAAaC,EAAuB,IAAI,GACxCC,IAAWD,EAAuB,IAAI,GACtCE,IAAaF,EAAuB,IAAI,GACxCG,IAAgBC,EAAc,cAAcb,GAAMU,CAAQ,GAC1DI,IAAkBD,EAAc,cAAcb,GAAMW,CAAU;AAEpE,EAAAI,GAAYL,GAAUV,CAAI,GAC1BgB;AAAA,IACIC,EAAY,MAAMN,EAAW,SAAS,EAAE;AAAA,IACxCX;AAAA,EAAA;AAGJ,QAAMkB,IAAWzB,EAAO,KAAK,CAAC0B,MAAUA,EAAM,UAAUzB,CAAK,GAEvD0B,IAAQH,EAAY,MAAM;AAC5B,UAAMI,IAAUb,EAAW,SACrBc,IAAQZ,EAAS;AAEvB,QAAI,CAACW;AACD;AAGJ,UAAME,IAAOF,EAAQ,sBAAA,GACfG,KAAQF,KAAA,gBAAAA,EAAO,gBAAetC,GAC9ByC,KAASH,KAAA,gBAAAA,EAAO,iBAAgB,GAChCI,IAAU,OAAO,aAAaF,IAAQzC,GACtC4C,IAAO,KAAK,IAAI5C,GAAkB,KAAK,IAAIwC,EAAK,QAAQC,GAAOE,CAAO,CAAC,GAEvEE,IAAQL,EAAK,MAAME,IAAS,GAC5BI,IAAQN,EAAK,SAAS,GACtBO,IAAYF,KAAS7C,GACrBgD,IAAYN,MAAW,KAAKI,IAAQJ,KAAU,OAAO,cAAc1C;AAGzE,IAAAoB,EAAY,EAAE,KAFFL,IAAUgC,IAAYF,IAAQC,IAASE,IAAYF,IAAQD,GAEpD,MAAAD,GAAM;AAAA,EAC7B,GAAG,CAAC7B,CAAM,CAAC;AAEX,EAAAkC,EAAU,MAAM;AACZ,QAAI,CAAChC,GAAM;AACP,MAAAK,EAAc,IAAI,GAClBE,EAAmB,IAAI;AACvB;AAAA,IACJ;AAEA,IAAAa,EAAA;AAEA,UAAMa,IAAa,MAAMb,EAAA,GACnBc,IAAiB,CAACC,MAAsB;AAK1C,YAAMC,IAAOD,EAAM,aAAA;AAKnB,MAJoB,CAAC3B,EAAW,SAASE,EAAS,SAASC,EAAW,OAAO,EAAE;AAAA,QAC3E,CAAC0B,MAASA,MAAS,QAAQD,EAAK,SAASC,CAAI;AAAA,MAAA,KAI7CpC,EAAQ,EAAK;AAAA,IAErB,GACMqC,IAAiBC,GAAgB,MAAMtC,EAAQ,EAAK,CAAC;AAE3D,kBAAO,iBAAiB,UAAUgC,GAAY,EAAI,GAClD,OAAO,iBAAiB,UAAUA,CAAU,GAC5C,SAAS,iBAAiB,aAAaC,GAAgB,EAAI,GAEpD,MAAM;AACT,aAAO,oBAAoB,UAAUD,GAAY,EAAI,GACrD,OAAO,oBAAoB,UAAUA,CAAU,GAC/C,SAAS,oBAAoB,aAAaC,GAAgB,EAAI,GAC9DI,EAAA;AAAA,IACJ;AAAA,EACJ,GAAG,CAACtC,GAAMoB,CAAK,CAAC,GAEhBoB,EAAmB,MAAM;AACrB,IAAIxC,KACAyC,GAAA;AAAA,EAER,GAAG,CAACzC,CAAI,CAAC;AAET,QAAM0C,IAAc,CAACvB,GAAwBwB,MAAqB;;AAC9D,QAAI,GAACC,IAAAzB,EAAM,YAAN,QAAAyB,EAAe,SAAQ;AACxB,MAAAvC,EAAc,IAAI;AAClB;AAAA,IACJ;AAEA,UAAMkB,IAAOoB,EAAI,sBAAA,GAGXE,OAFYC,IAAApC,EAAS,YAAT,gBAAAoC,EAAkB,wBAAwB,SAAQvB,EAAK,QAE9CtC,IAAoB,GACzC0C,IACFkB,KAAU9D,IACJ8D,IACA,KAAK;AAAA,SACAE,IAAArC,EAAS,YAAT,gBAAAqC,EAAkB,wBAAwB,UAASxB,EAAK,SAAS;AAAA,MAClE,OAAO,aAAatC,IAAoBF;AAAA,IAAA;AAGtD,IAAAsB,EAAcc,EAAM,KAAK,GACzBZ,EAAmB,EAAE,KAAKgB,EAAK,KAAK,MAAAI,GAAM;AAAA,EAC9C,GAEMqB,IAAS,CAAC7B,GAAwB8B,MAAgC;AACpE,IAAArD,EAASuB,EAAM,OAAO8B,KAAA,gBAAAA,EAAQ,KAAK,GACnChD,EAAQ,EAAK;AAAA,EACjB,GAEMiD,IAAezD,EAAO,KAAK,CAAC0B,MAAUA,EAAM,UAAUf,CAAU;AAEtE,SACI,gBAAA+C,EAAAC,GAAA,EACI,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,KAAK7C,GAAY,WAAU,eAC5B,UAAA,gBAAA6C;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,QAAOpC,KAAA,gBAAAA,EAAU,UAASxB;AAAA,QAC1B,MACIwB,KAAA,QAAAA,EAAU,UACN,gBAAAmC,EAACE,GAAA,EAAO,KAAKrC,EAAS,SAAS,MAAMA,EAAS,OAAO,MAAM,IAAI,IAC/D;AAAA,QAER,cACIpB,IACI,gBAAAuD,EAACG,IAAA,EAAY,MAAM,IAAI,IAEvB,gBAAAH,EAACI,IAAA,EAAc,MAAM,GAAA,CAAI;AAAA,QAGjC,OAAM;AAAA,QACN,MAAK;AAAA,QACL,UAAA5D;AAAA,QACA,SAAS,MAAMI,EAAQ,CAACyD,MAAY,CAACA,CAAO;AAAA,MAAA;AAAA,IAAA,GAEpD;AAAA,IACC1D,KACG2D;AAAA,MACI,gBAAAR,EAAAC,GAAA,EACI,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,KAAK3C;AAAA,YACL,MAAK;AAAA,YACL,cAAYX;AAAA,YAIX,GAAGa;AAAA,YACJ,OAAO1B,EAAWC,GAAUH,CAAe;AAAA,YAE1C,UAAAS,EAAO,IAAI,CAAC0B,MAAA;;AACT,qCAAAgC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEG,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,kBAAeP,IAAAzB,EAAM,YAAN,QAAAyB,EAAe,SAAS,SAAS;AAAA,kBAChD,OAAOvD;AAAA,kBACP,cAAc,CAAC8C,MACXO,EAAYvB,GAAOgB,EAAM,aAAa;AAAA,kBAE1C,SAAS,CAACA,MAAUO,EAAYvB,GAAOgB,EAAM,aAAa;AAAA,kBAC1D,SAAS,MAAA;;AACL,4BAAAS,IAAAzB,EAAM,YAAN,QAAAyB,EAAe,SACTI,EAAO7B,GAAOA,EAAM,QAAQ,CAAC,CAAC,IAC9B6B,EAAO7B,CAAK;AAAA;AAAA,kBAGrB,UAAA;AAAA,oBAAAA,EAAM,UACH,gBAAAkC,EAACE,GAAA,EAAO,KAAKpC,EAAM,SAAS,MAAMA,EAAM,OAAO,MAAM,GAAA,CAAI,IACzD;AAAA,oBACHA,EAAM;AAAA,oBACNA,EAAM,UAAUzB,IACb,gBAAA2D,EAAC,QAAA,EAAK,OAAO9D,GACT,UAAA,gBAAA8D,EAACO,GAAA,EAAU,MAAM,GAAA,CAAI,EAAA,CACzB,IACA;AAAA,qBACHd,IAAA3B,EAAM,YAAN,QAAA2B,EAAe,SACZ,gBAAAO;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACG,OAAO;AAAA,0BACH,YAAYlC,EAAM,UAAUzB,IAAQ,IAAI;AAAA,0BACxC,SAAS;AAAA,0BACT,OAAO;AAAA,wBAAA;AAAA,wBAGX,UAAA,gBAAA2D,EAACQ,IAAA,EAAe,MAAM,GAAA,CAAI;AAAA,sBAAA;AAAA,oBAAA,IAE9B;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAlCC1C,EAAM;AAAA,cAAA;AAAA,aAoClB;AAAA,UAAA;AAAA,QAAA;AAAA,SAEJyB,IAAAM,KAAA,gBAAAA,EAAc,YAAd,QAAAN,EAAuB,SACpB,gBAAAS;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,KAAK1C;AAAA,YACL,MAAK;AAAA,YACL,cAAY,GAAGuC,EAAa,KAAK;AAAA,YAChC,GAAGpC;AAAA,YACJ,OAAO5B,EAAWoB,GAAiBrB,CAAiB;AAAA,YAEnD,UAAAiE,EAAa,QAAQ,IAAI,CAACD,MACvB,gBAAAE;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEG,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,OAAO,EAAE,GAAG9D,GAAW,YAAY,aAAA;AAAA,gBACnC,SAAS,MAAM2D,EAAOE,GAAcD,CAAM;AAAA,gBAE1C,UAAA;AAAA,kBAAA,gBAAAE;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACG,OAAO;AAAA,wBACH,SAAS;AAAA,wBACT,eAAe;AAAA,wBACf,KAAK;AAAA,sBAAA;AAAA,sBAGR,UAAA;AAAA,wBAAAF,EAAO;AAAA,wBACPA,EAAO,cACJ,gBAAAI,EAAC,QAAA,EAAK,OAAO/D,IACR,UAAA2D,EAAO,aACZ,IACA;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAEPC,EAAa,UAAUxD,KACxBuD,EAAO,UAAUtD,IACb,gBAAA0D,EAAC,QAAA,EAAK,OAAO9D,GACT,UAAA,gBAAA8D,EAACO,GAAA,EAAU,MAAM,GAAA,CAAI,GACzB,IACA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAzBCX,EAAO;AAAA,YAAA,CA2BnB;AAAA,UAAA;AAAA,QAAA,IAEL;AAAA,MAAA,GACR;AAAA,MACA,SAAS;AAAA,IAAA;AAAA,EACb,GACR;AAER;"}