Move AI model configs to presets and add a dropdown to swap between configs (#1024)

frontend/app/block/block.less

@@ -216,6 +216,12 @@
                         }
                     }
 
+                    .menubutton {
+                        .button {
+                            font-size: 11px;
+                        }
+                    }
+
                     .block-frame-div-url,
                     .block-frame-div-search {
                         background: rgba(255, 255, 255, 0.1);

frontend/app/block/blockframe.tsx

@@ -32,6 +32,7 @@ import { WindowRpcClient } from "@/app/store/wshrpcutil";
 import { ErrorBoundary } from "@/element/errorboundary";
 import { IconButton } from "@/element/iconbutton";
 import { MagnifyIcon } from "@/element/magnify";
+import { MenuButton } from "@/element/menubutton";
 import { NodeModel } from "@/layout/index";
 import * as keyutil from "@/util/keyutil";
 import * as util from "@/util/util";
@@ -250,7 +251,7 @@ const HeaderTextElem = React.memo(({ elem, preview }: { elem: HeaderElem; previe
     } else if (elem.elemtype == "text") {
         return (
             <div className={clsx("block-frame-text", elem.className)}>
-                <span ref={preview ? null : elem.ref} onClick={() => elem?.onClick()}>
+                <span ref={preview ? null : elem.ref} onClick={(e) => elem?.onClick(e)}>
                     &lrm;{elem.text}
                 </span>
             </div>
@@ -273,6 +274,8 @@ const HeaderTextElem = React.memo(({ elem, preview }: { elem: HeaderElem; previe
                 ))}
             </div>
         );
+    } else if (elem.elemtype == "menubutton") {
+        return <MenuButton className="block-frame-menubutton" {...(elem as MenuButtonProps)} />;
     }
     return null;
 });

frontend/app/element/menu.less

@@ -1,8 +1,8 @@
 .menu {
     position: absolute;
-    z-index: 1000; // TODO: put this in theme.less
+    z-index: 1000;
     display: flex;
-    width: 125px; /* Ensure the menu has a fixed width */
+    max-width: 400px;
     padding: 2px;
     flex-direction: column;
     justify-content: flex-end;

frontend/app/element/menu.stories.tsx

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { useRef, useState } from "react";
-import { useEffect, useRef, useState } from "react";
 import { Button } from "./button";
 import { Menu } from "./menu";
 
@@ -58,31 +57,18 @@ const meta = {
     component: Menu,
     args: {
         items: [],
-        anchorRef: undefined,
+        children: null,
-        scopeRef: undefined,
-        initialPosition: undefined,
-        className: "",
-        setVisibility: fn(),
     },
     argTypes: {
         items: {
             description: "Items of menu",
         },
-        anchorRef: {
-            description: "Element to attach the menu",
-        },
-        initialPosition: {
-            description: "Initial position of the menu",
-        },
-        setVisibility: {
-            description: "Visibility event handler",
-        },
-        scopeRef: {
-            description: "Component that defines the boundaries of the menu",
-        },
         className: {
             description: "Custom className",
         },
+        children: {
+            description: "The contents of the menu anchor element",
+        },
     },
 } satisfies Meta<typeof Menu>;
 
@@ -91,21 +77,12 @@ type Story = StoryObj<typeof meta>;
 
 export const DefaultRendererLeftPositioned: Story = {
     render: (args) => {
-        const anchorRef = useRef<HTMLButtonElement>(null);
-        const scopeRef = useRef<HTMLDivElement>(null);
-        const [isMenuVisible, setIsMenuVisible] = useState(false);
-
-        const handleAnchorClick = () => {
-            setIsMenuVisible((prev) => !prev);
-        };
-
         const mapItemsWithClick = (items: any[]) => {
             return items.map((item) => ({
                 ...item,
                 onClick: () => {
                     if (item.onClick) {
                         item.onClick();
-                        setIsMenuVisible(false);
                     }
                 },
                 subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
@@ -119,29 +96,17 @@ export const DefaultRendererLeftPositioned: Story = {
 
         return (
             <div
-                ref={scopeRef}
                 className="boundary"
                 style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
             >
+                <Menu {...modifiedArgs}>
                     <div style={{ position: "absolute", top: 0, left: 0 }}>
-                    <Button
+                        <Button className="grey border-radius-3 vertical-padding-6 horizontal-padding-8">
-                        ref={anchorRef}
-                        className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
-                        style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
-                        onClick={handleAnchorClick}
-                    >
                             Anchor Element
                             <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
                         </Button>
                     </div>
-                {isMenuVisible && (
+                </Menu>
-                    <Menu
-                        {...modifiedArgs}
-                        setVisibility={(visible) => setIsMenuVisible(visible)}
-                        anchorRef={anchorRef}
-                        scopeRef={scopeRef}
-                    />
-                )}
             </div>
         );
     },
@@ -152,14 +117,8 @@ export const DefaultRendererLeftPositioned: Story = {
 
 export const DefaultRendererRightPositioned: Story = {
     render: (args) => {
-        const anchorRef = useRef<HTMLButtonElement>(null);
-        const scopeRef = useRef<HTMLDivElement>(null);
         const [isMenuVisible, setIsMenuVisible] = useState(false);
 
-        const handleAnchorClick = () => {
-            setIsMenuVisible((prev) => !prev);
-        };
-
         const mapItemsWithClick = (items: any[]) => {
             return items.map((item) => ({
                 ...item,
@@ -167,7 +126,6 @@ export const DefaultRendererRightPositioned: Story = {
                     if (item.onClick) {
                         item.onClick();
                     }
-                    setIsMenuVisible(false);
                 },
                 subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
             }));
@@ -180,29 +138,17 @@ export const DefaultRendererRightPositioned: Story = {
 
         return (
             <div
-                ref={scopeRef}
                 className="boundary"
                 style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
             >
+                <Menu {...modifiedArgs}>
                     <div style={{ position: "absolute", top: 0, right: 0 }}>
-                    <Button
+                        <Button className="grey border-radius-3 vertical-padding-6 horizontal-padding-8">
-                        ref={anchorRef}
-                        className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
-                        style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
-                        onClick={handleAnchorClick}
-                    >
                             Anchor Element
                             <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
                         </Button>
                     </div>
-                {isMenuVisible && (
+                </Menu>
-                    <Menu
-                        {...modifiedArgs}
-                        setVisibility={(visible) => setIsMenuVisible(visible)}
-                        anchorRef={anchorRef}
-                        scopeRef={scopeRef}
-                    />
-                )}
             </div>
         );
     },
@@ -213,14 +159,6 @@ export const DefaultRendererRightPositioned: Story = {
 
 export const DefaultRendererBottomRightPositioned: Story = {
     render: (args) => {
-        const anchorRef = useRef<HTMLButtonElement>(null);
-        const scopeRef = useRef<HTMLDivElement>(null);
-        const [isMenuVisible, setIsMenuVisible] = useState(false);
-
-        const handleAnchorClick = () => {
-            setIsMenuVisible((prev) => !prev);
-        };
-
         const mapItemsWithClick = (items: any[]) => {
             return items.map((item) => ({
                 ...item,
@@ -228,7 +166,6 @@ export const DefaultRendererBottomRightPositioned: Story = {
                     if (item.onClick) {
                         item.onClick();
                     }
-                    setIsMenuVisible(false);
                 },
                 subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
             }));
@@ -241,29 +178,17 @@ export const DefaultRendererBottomRightPositioned: Story = {
 
         return (
             <div
-                ref={scopeRef}
                 className="boundary"
                 style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
             >
+                <Menu {...modifiedArgs}>
                     <div style={{ position: "absolute", bottom: 0, left: 0 }}>
-                    <Button
+                        <Button className="grey border-radius-3 vertical-padding-6 horizontal-padding-8">
-                        ref={anchorRef}
-                        className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
-                        style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
-                        onClick={handleAnchorClick}
-                    >
                             Anchor Element
                             <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
                         </Button>
                     </div>
-                {isMenuVisible && (
+                </Menu>
-                    <Menu
-                        {...modifiedArgs}
-                        setVisibility={(visible) => setIsMenuVisible(visible)}
-                        anchorRef={anchorRef}
-                        scopeRef={scopeRef}
-                    />
-                )}
             </div>
         );
     },
@@ -276,11 +201,6 @@ export const DefaultRendererBottomLeftPositioned: Story = {
     render: (args) => {
         const anchorRef = useRef<HTMLButtonElement>(null);
         const scopeRef = useRef<HTMLDivElement>(null);
-        const [isMenuVisible, setIsMenuVisible] = useState(false);
-
-        const handleAnchorClick = () => {
-            setIsMenuVisible((prev) => !prev);
-        };
 
         const mapItemsWithClick = (items: any[]) => {
             return items.map((item) => ({
@@ -289,7 +209,6 @@ export const DefaultRendererBottomLeftPositioned: Story = {
                     if (item.onClick) {
                         item.onClick();
                     }
-                    setIsMenuVisible(false);
                 },
                 subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
             }));
@@ -306,25 +225,17 @@ export const DefaultRendererBottomLeftPositioned: Story = {
                 className="boundary"
                 style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
             >
+                <Menu {...modifiedArgs}>
                     <div style={{ position: "absolute", bottom: 0, right: 0 }}>
                         <Button
                             ref={anchorRef}
                             className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
-                        style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
-                        onClick={handleAnchorClick}
                         >
                             Anchor Element
                             <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
                         </Button>
                     </div>
-                {isMenuVisible && (
+                </Menu>
-                    <Menu
-                        {...modifiedArgs}
-                        setVisibility={(visible) => setIsMenuVisible(visible)}
-                        anchorRef={anchorRef}
-                        scopeRef={scopeRef}
-                    />
-                )}
             </div>
         );
     },
@@ -335,14 +246,6 @@ export const DefaultRendererBottomLeftPositioned: Story = {
 
 export const CustomRenderer: Story = {
     render: (args) => {
-        const anchorRef = useRef<HTMLButtonElement>(null);
-        const scopeRef = useRef<HTMLDivElement>(null);
-        const [isMenuVisible, setIsMenuVisible] = useState(false);
-
-        const handleAnchorClick = () => {
-            setIsMenuVisible((prev) => !prev);
-        };
-
         const mapItemsWithClick = (items: any[]) => {
             return items.map((item) => ({
                 ...item,
@@ -350,7 +253,6 @@ export const CustomRenderer: Story = {
                     if (item.onClick) {
                         item.onClick();
                     }
-                    setIsMenuVisible(false);
                 },
                 subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
             }));
@@ -371,32 +273,15 @@ export const CustomRenderer: Story = {
         };
 
         return (
-            <div
+            <div className="boundary" style={{ padding: "20px", height: "300px", border: "2px solid black" }}>
-                ref={scopeRef}
+                <Menu {...modifiedArgs} renderMenu={renderMenu} renderMenuItem={renderMenuItem}>
-                className="boundary"
-                style={{ padding: "20px", height: "300px", border: "2px solid black" }}
-            >
                     <div style={{ height: "400px" }}>
-                    <Button
+                        <Button className="grey border-radius-3 vertical-padding-6 horizontal-padding-8">
-                        ref={anchorRef}
-                        className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
-                        style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
-                        onClick={handleAnchorClick}
-                    >
                             Anchor Element
                             <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
                         </Button>
                     </div>
-                {isMenuVisible && (
+                </Menu>
-                    <Menu
-                        {...modifiedArgs}
-                        setVisibility={(visible) => setIsMenuVisible(visible)}
-                        anchorRef={anchorRef}
-                        scopeRef={scopeRef}
-                        renderMenu={renderMenu}
-                        renderMenuItem={renderMenuItem}
-                    />
-                )}
             </div>
         );
     },
@@ -405,67 +290,59 @@ export const CustomRenderer: Story = {
     },
 };
 
-export const ContextMenu: Story = {
+// export const ContextMenu: Story = {
-    render: (args) => {
+//     render: (args) => {
-        const scopeRef = useRef<HTMLDivElement>(null);
+//         const scopeRef = useRef<HTMLDivElement>(null);
-        const [isMenuVisible, setIsMenuVisible] = useState(false);
+//         const [isMenuVisible, setIsMenuVisible] = useState(false);
-        const [menuPosition, setMenuPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+//         const [menuPosition, setMenuPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
 
-        const handleBlockRightClick = (e: MouseEvent) => {
+//         const handleBlockRightClick = (e: MouseEvent) => {
-            e.preventDefault(); // Prevent the default context menu
+//             e.preventDefault(); // Prevent the default context menu
-            setMenuPosition({ top: e.clientY, left: e.clientX });
+//             setMenuPosition({ top: e.clientY, left: e.clientX });
-            setIsMenuVisible(true);
+//             setIsMenuVisible(true);
-        };
+//         };
 
-        useEffect(() => {
+//         useEffect(() => {
-            const blockElement = scopeRef.current;
+//             const blockElement = scopeRef.current;
-            if (blockElement) {
+//             if (blockElement) {
-                blockElement.addEventListener("contextmenu", handleBlockRightClick);
+//                 blockElement.addEventListener("contextmenu", handleBlockRightClick);
-            }
+//             }
 
-            return () => {
+//             return () => {
-                if (blockElement) {
+//                 if (blockElement) {
-                    blockElement.removeEventListener("contextmenu", handleBlockRightClick);
+//                     blockElement.removeEventListener("contextmenu", handleBlockRightClick);
-                }
+//                 }
-            };
+//             };
-        }, []);
+//         }, []);
 
-        const mapItemsWithClick = (items: any[]) => {
+//         const mapItemsWithClick = (items: any[]) => {
-            return items.map((item) => ({
+//             return items.map((item) => ({
-                ...item,
+//                 ...item,
-                onClick: () => {
+//                 onClick: () => {
-                    if (item.onClick) {
+//                     if (item.onClick) {
-                        item.onClick();
+//                         item.onClick();
-                        setIsMenuVisible(false);
+//                     }
-                    }
+//                 },
-                },
+//                 subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
-                subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
+//             }));
-            }));
+//         };
-        };
 
-        const modifiedArgs = {
+//         const modifiedArgs = {
-            ...args,
+//             ...args,
-            items: mapItemsWithClick(args.items),
+//             items: mapItemsWithClick(args.items),
-        };
+//         };
 
-        return (
+//         return (
-            <div
+//             <div
-                ref={scopeRef}
+//                 ref={scopeRef}
-                className="boundary"
+//                 className="boundary"
-                style={{ padding: "20px", height: "300px", border: "2px solid black" }}
+//                 style={{ padding: "20px", height: "300px", border: "2px solid black" }}
-            >
+//             >
-                {isMenuVisible && (
+//                 {isMenuVisible && <Menu {...modifiedArgs} />}
-                    <Menu
+//             </div>
-                        {...modifiedArgs}
+//         );
-                        setVisibility={(visible) => setIsMenuVisible(visible)}
+//     },
-                        initialPosition={menuPosition}
+//     args: {
-                        scopeRef={scopeRef}
+//         items: items,
-                    />
+//     },
-                )}
+// };
-            </div>
-        );
-    },
-    args: {
-        items: items,
-    },
-};

frontend/app/element/menu.tsx

@@ -1,19 +1,12 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { useDismiss, useFloating, useInteractions } from "@floating-ui/react";
 import clsx from "clsx";
-import React, { memo, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createRef, Fragment, memo, ReactNode, useRef, useState } from "react";
 import ReactDOM from "react-dom";
-
-import { useDimensionsWithExistingRef } from "@/app/hook/useDimensions";
 import "./menu.less";
 
-type MenuItem = {
-    label: string;
-    subItems?: MenuItem[];
-    onClick?: (e) => void;
-};
-
 const SubMenu = memo(
     ({
         subItems,
@@ -48,7 +41,7 @@ const SubMenu = memo(
         subItems.forEach((_, idx) => {
             const newKey = `${parentKey}-${idx}`;
             if (!subMenuRefs.current[newKey]) {
-                subMenuRefs.current[newKey] = React.createRef<HTMLDivElement>();
+                subMenuRefs.current[newKey] = createRef<HTMLDivElement>();
             }
         });
 
@@ -88,7 +81,7 @@ const SubMenu = memo(
                     );
 
                     return (
-                        <React.Fragment key={newKey}>
+                        <Fragment key={newKey}>
                             {renderedItem}
                             {visibleSubMenus[newKey]?.visible && item.subItems && (
                                 <SubMenu
@@ -104,7 +97,7 @@ const SubMenu = memo(
                                     renderMenuItem={renderMenuItem}
                                 />
                             )}
-                        </React.Fragment>
+                        </Fragment>
                     );
                 })}
             </div>
@@ -117,20 +110,16 @@ const SubMenu = memo(
 const Menu = memo(
     ({
         items,
-        anchorRef,
+        children,
-        scopeRef,
-        initialPosition,
         className,
-        setVisibility,
+        onOpenChange,
         renderMenu,
         renderMenuItem,
     }: {
         items: MenuItem[];
-        anchorRef: React.RefObject<any>;
-        scopeRef?: React.RefObject<HTMLElement>;
-        initialPosition?: { top: number; left: number };
         className?: string;
-        setVisibility: (_: boolean) => void;
+        onOpenChange?: (isOpen: boolean) => void;
+        children: ReactNode | ReactNode[];
         renderMenu?: (subMenu: JSX.Element, props: any) => JSX.Element;
         renderMenuItem?: (item: MenuItem, props: any) => JSX.Element;
     }) => {
@@ -139,128 +128,29 @@ const Menu = memo(
         const [subMenuPosition, setSubMenuPosition] = useState<{
             [key: string]: { top: number; left: number; label: string };
         }>({});
-        const [position, setPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
         const menuRef = useRef<HTMLDivElement>(null);
         const subMenuRefs = useRef<{ [key: string]: React.RefObject<HTMLDivElement> }>({});
-        const domRect = useDimensionsWithExistingRef(scopeRef, 30);
+
-        const width = domRect?.width ?? 0;
+        const [isOpen, setIsOpen] = useState(false);
-        const height = domRect?.height ?? 0;
+        const onOpenChangeMenu = (isOpen: boolean) => {
+            setIsOpen(isOpen);
+            onOpenChange?.(isOpen);
+        };
+        const { refs, floatingStyles, context } = useFloating({
+            placement: "bottom-start",
+            open: isOpen,
+            onOpenChange: onOpenChangeMenu,
+        });
+        const dismiss = useDismiss(context);
+        const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
 
         items.forEach((_, idx) => {
             const key = `${idx}`;
             if (!subMenuRefs.current[key]) {
-                subMenuRefs.current[key] = React.createRef<HTMLDivElement>();
+                subMenuRefs.current[key] = createRef<HTMLDivElement>();
             }
         });
 
-        useLayoutEffect(() => {
-            const shadowOffset = 10; // Adjust for box shadow space
-
-            if (initialPosition) {
-                // Adjust position if initialPosition is provided
-                let { top, left } = initialPosition;
-
-                const scrollTop = window.scrollY || document.documentElement.scrollTop;
-                const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
-
-                const menuWidth = menuRef.current?.offsetWidth || 0;
-                const menuHeight = menuRef.current?.offsetHeight || 0;
-
-                const boundaryTop = 0;
-                const boundaryLeft = 0;
-                const boundaryRight = window.innerWidth + scrollLeft;
-                const boundaryBottom = window.innerHeight + scrollTop;
-
-                // Adjust if the menu overflows the right boundary
-                if (left + menuWidth > boundaryRight) {
-                    left = boundaryRight - menuWidth - shadowOffset; // Shift left more for shadow
-                }
-
-                // Adjust if the menu overflows the bottom boundary: move the menu upwards so its bottom edge aligns with the initial position
-                if (top + menuHeight > boundaryBottom) {
-                    top = initialPosition.top - menuHeight - shadowOffset; // Shift up for shadow
-                }
-
-                // Adjust if the menu overflows the left boundary
-                if (left < boundaryLeft) {
-                    left = boundaryLeft + shadowOffset; // Add shadow offset from the left edge
-                }
-
-                // Adjust if the menu overflows the top boundary
-                if (top < boundaryTop) {
-                    top = boundaryTop + shadowOffset; // Add shadow offset from the top edge
-                }
-
-                setPosition({ top, left });
-            } else if (anchorRef.current && menuRef.current) {
-                // Calculate position based on anchorRef if it exists
-                const anchorRect = anchorRef.current.getBoundingClientRect();
-                const scrollTop = window.scrollY || document.documentElement.scrollTop;
-                const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
-
-                let top = anchorRect.bottom + scrollTop;
-                let left = anchorRect.left + scrollLeft;
-
-                const menuWidth = menuRef.current.offsetWidth;
-                const menuHeight = menuRef.current.offsetHeight;
-
-                const boundaryTop = 0;
-                const boundaryLeft = 0;
-                const boundaryRight = window.innerWidth + scrollLeft;
-                const boundaryBottom = window.innerHeight + scrollTop;
-
-                // Adjust if the menu overflows the right boundary
-                if (left + menuWidth > boundaryRight) {
-                    left = boundaryRight - menuWidth;
-                }
-
-                // Adjust if the menu overflows the bottom boundary: move the menu upwards so its bottom edge aligns with the anchor top
-                if (top + menuHeight > boundaryBottom) {
-                    top = anchorRect.top + scrollTop - menuHeight;
-                }
-
-                // Adjust if the menu overflows the left boundary
-                if (left < boundaryLeft) {
-                    left = boundaryLeft;
-                }
-
-                // Adjust if the menu overflows the top boundary
-                if (top < boundaryTop) {
-                    top = boundaryTop;
-                }
-
-                setPosition({ top, left });
-            } else {
-                console.warn("Neither initialPosition nor anchorRef provided. Defaulting to { top: 0, left: 0 }.");
-            }
-        }, [width, height, initialPosition]);
-
-        useEffect(() => {
-            const handleClickOutside = (event: MouseEvent) => {
-                const isClickInsideDropdown = menuRef.current && menuRef.current.contains(event.target as Node);
-
-                const isClickInsideAnchor = anchorRef?.current
-                    ? anchorRef.current.contains(event.target as Node)
-                    : false;
-
-                const isClickInsideSubMenus = Object.keys(subMenuRefs.current).some(
-                    (key) =>
-                        subMenuRefs.current[key]?.current &&
-                        subMenuRefs.current[key]?.current.contains(event.target as Node)
-                );
-
-                if (!isClickInsideDropdown && !isClickInsideAnchor && !isClickInsideSubMenus) {
-                    setVisibility(false);
-                }
-            };
-
-            scopeRef?.current?.addEventListener("mousedown", handleClickOutside);
-
-            return () => {
-                scopeRef?.current?.removeEventListener("mousedown", handleClickOutside);
-            };
-        }, []);
-
         // Position submenus based on available space and scroll position
         const handleSubMenuPosition = (
             key: string,
@@ -345,48 +235,28 @@ const Menu = memo(
 
         const handleOnClick = (e: React.MouseEvent<HTMLDivElement>, item: MenuItem) => {
             e.stopPropagation();
-            item.onClick && item.onClick(e);
+            onOpenChangeMenu(false);
+            item.onClick?.(e);
         };
 
-        // const handleKeyDown = useCallback(
+        return (
-        //     (waveEvent: WaveKeyboardEvent): boolean => {
+            <>
-        //         if (keyutil.checkKeyPressed(waveEvent, "ArrowDown")) {
+                <div
-        //             setFocusedIndex((prev) => (prev + 1) % items.length); // Move down
+                    className="menu-anchor"
-        //             return true;
+                    ref={refs.setReference}
-        //         }
+                    {...getReferenceProps()}
-        //         if (keyutil.checkKeyPressed(waveEvent, "ArrowUp")) {
+                    onClick={() => onOpenChangeMenu(!isOpen)}
-        //             setFocusedIndex((prev) => (prev - 1 + items.length) % items.length); // Move up
+                >
-        //             return true;
+                    {children}
-        //         }
+                </div>
-        //         if (keyutil.checkKeyPressed(waveEvent, "ArrowRight")) {
-        //             if (items[focusedIndex].subItems) {
-        //                 setSubmenuOpen(focusedIndex); // Open the submenu
-        //             }
-        //             return true;
-        //         }
-        //         if (keyutil.checkKeyPressed(waveEvent, "ArrowLeft")) {
-        //             if (submenuOpen !== null) {
-        //                 setSubmenuOpen(null); // Close the submenu
-        //             }
-        //             return true;
-        //         }
-        //         if (keyutil.checkKeyPressed(waveEvent, "Enter") || keyutil.checkKeyPressed(waveEvent, " ")) {
-        //             if (items[focusedIndex].onClick) {
-        //                 items[focusedIndex].onClick(); // Trigger click
-        //             }
-        //             return true;
-        //         }
-        //         if (keyutil.checkKeyPressed(waveEvent, "Escape")) {
-        //             setVisibility(false); // Close the menu
-        //             return true;
-        //         }
-        //         return false;
-        //     },
-        //     [focusedIndex, submenuOpen, items, setVisibility]
-        // );
 
-        const menuMenu = (
+                {isOpen && (
-            <div className={clsx("menu", className)} ref={menuRef} style={{ top: position.top, left: position.left }}>
+                    <div
+                        className={clsx("menu", className)}
+                        ref={refs.setFloating}
+                        style={floatingStyles}
+                        {...getFloatingProps()}
+                    >
                         {items.map((item, index) => {
                             const key = `${index}`;
                             const isActive = hoveredItems.includes(key);
@@ -408,7 +278,7 @@ const Menu = memo(
                             );
 
                             return (
-                        <React.Fragment key={key}>
+                                <Fragment key={key}>
                                     {renderedItem}
                                     {visibleSubMenus[key]?.visible && item.subItems && (
                                         <SubMenu
@@ -424,13 +294,13 @@ const Menu = memo(
                                             renderMenuItem={renderMenuItem}
                                         />
                                     )}
-                        </React.Fragment>
+                                </Fragment>
                             );
                         })}
                     </div>
+                )}
+            </>
         );
-
-        return ReactDOM.createPortal(renderMenu ? renderMenu(menuMenu, { parentKey: null }) : menuMenu, document.body);
     }
 );
 

frontend/app/element/menubutton.tsx

@@ -0,0 +1,24 @@
+import clsx from "clsx";
+import { memo, useState } from "react";
+import { Button } from "./button";
+import { Menu } from "./menu";
+
+const MenuButtonComponent = ({ items, className, text, title }: MenuButtonProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+        <div className={clsx("menubutton", className)}>
+            <Menu items={items} onOpenChange={setIsOpen}>
+                <Button
+                    className="grey border-radius-3 vertical-padding-2 horizontal-padding-2"
+                    style={{ borderColor: isOpen ? "var(--accent-color)" : "transparent" }}
+                    title={title}
+                >
+                    {text}
+                    <i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
+                </Button>
+            </Menu>
+        </div>
+    );
+};
+
+export const MenuButton = memo(MenuButtonComponent) as typeof MenuButtonComponent;

frontend/app/hook/useDimensions.tsx

@@ -12,10 +12,15 @@ export function useDimensionsWithCallbackRef<T extends HTMLElement>(
     const rszObjRef = React.useRef<ResizeObserver>(null);
     const oldHtmlElem = React.useRef<T>(null);
     const ref = React.useRef<T>(null);
-    const refCallback = useCallback((node: T) => {
+    const refCallback = useCallback(
+        (node: T) => {
+            if (ref) {
                 setHtmlElem(node);
                 ref.current = node;
-    }, []);
+            }
+        },
+        [ref]
+    );
     const setDomRectDebounced = React.useCallback(debounceMs == null ? setDomRect : debounce(debounceMs, setDomRect), [
         debounceMs,
         setDomRect,
@@ -54,7 +59,7 @@ export function useDimensionsWithCallbackRef<T extends HTMLElement>(
 // will not react to ref changes
 // pass debounceMs of null to not debounce
 export function useDimensionsWithExistingRef<T extends HTMLElement>(
-    ref: React.RefObject<T>,
+    ref?: React.RefObject<T>,
     debounceMs: number = null
 ): DOMRectReadOnly {
     const [domRect, setDomRect] = useState<DOMRectReadOnly>(null);
@@ -76,7 +81,7 @@ export function useDimensionsWithExistingRef<T extends HTMLElement>(
                 }
             });
         }
-        if (ref.current) {
+        if (ref?.current) {
             rszObjRef.current.observe(ref.current);
             oldHtmlElem.current = ref.current;
         }
@@ -86,13 +91,13 @@ export function useDimensionsWithExistingRef<T extends HTMLElement>(
                 oldHtmlElem.current = null;
             }
         };
-    }, [ref.current]);
+    }, [ref?.current]);
     React.useEffect(() => {
         return () => {
             rszObjRef.current?.disconnect();
         };
     }, []);
-    if (ref.current != null) {
+    if (ref?.current != null) {
         return ref.current.getBoundingClientRect();
     }
     return null;

frontend/app/view/waveai/waveai.tsx

@@ -7,9 +7,9 @@ import { TypingIndicator } from "@/app/element/typingindicator";
 import { RpcApi } from "@/app/store/wshclientapi";
 import { WindowRpcClient } from "@/app/store/wshrpcutil";
 import { atoms, fetchWaveFile, globalStore, WOS } from "@/store/global";
-import { BlockService } from "@/store/services";
+import { BlockService, ObjectService } from "@/store/services";
 import { adaptFromReactOrNativeKeyEvent, checkKeyPressed } from "@/util/keyutil";
-import { isBlank, makeIconClass } from "@/util/util";
+import { fireAndForget, isBlank, makeIconClass } from "@/util/util";
 import { atom, Atom, PrimitiveAtom, useAtomValue, useSetAtom, WritableAtom } from "jotai";
 import type { OverlayScrollbars } from "overlayscrollbars";
 import { OverlayScrollbarsComponent, OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
@@ -41,6 +41,9 @@ export class WaveAiModel implements ViewModel {
     viewType: string;
     blockId: string;
     blockAtom: Atom<Block>;
+    presetKey: Atom<string>;
+    presetMap: Atom<{ [k: string]: MetaType }>;
+    aiOpts: Atom<OpenAIOptsType>;
     viewIcon?: Atom<string | IconButtonDecl>;
     viewName?: Atom<string>;
     viewText?: Atom<string | HeaderElem[]>;
@@ -61,11 +64,32 @@ export class WaveAiModel implements ViewModel {
         this.viewType = "waveai";
         this.blockId = blockId;
         this.blockAtom = WOS.getWaveObjectAtom<Block>(`block:${blockId}`);
-        this.viewIcon = atom((get) => {
+        this.viewIcon = atom("sparkles");
-            return "sparkles"; // should not be hardcoded
+        this.viewName = atom("Wave AI");
-        });
-        this.viewName = atom("Wave Ai");
         this.messagesAtom = atom([]);
+        this.presetKey = atom((get) => {
+            const metaPresetKey = get(this.blockAtom).meta["ai:preset"];
+            const globalPresetKey = get(atoms.settingsAtom)["ai:preset"];
+            return metaPresetKey ?? globalPresetKey;
+        });
+        this.presetMap = atom((get) => {
+            const fullConfig = get(atoms.fullConfigAtom);
+            const presets = fullConfig.presets;
+            const settings = fullConfig.settings;
+            return Object.fromEntries(
+                Object.entries(presets)
+                    .filter(([k]) => k.startsWith("ai@"))
+                    .map(([k, v]) => {
+                        const aiPresetKeys = Object.keys(v).filter((k) => k.startsWith("ai:"));
+                        console.log(aiPresetKeys);
+                        v["display:name"] =
+                            aiPresetKeys.length == 1 && aiPresetKeys.includes("ai:*")
+                                ? `${v["display:name"] ?? "Default"} (${settings["ai:model"]})`
+                                : v["display:name"];
+                        return [k, v];
+                    })
+            );
+        });
 
         this.addMessageAtom = atom(null, (get, set, message: ChatMessageType) => {
             const messages = get(this.messagesAtom);
@@ -104,19 +128,34 @@ export class WaveAiModel implements ViewModel {
             }
             set(this.updateLastMessageAtom, "", false);
         });
+
+        this.aiOpts = atom((get) => {
+            const meta = get(this.blockAtom).meta;
+            let settings = get(atoms.settingsAtom);
+            settings = {
+                ...settings,
+                ...meta,
+            };
+            const opts: OpenAIOptsType = {
+                model: settings["ai:model"] ?? null,
+                apitype: settings["ai:apitype"] ?? null,
+                orgid: settings["ai:orgid"] ?? null,
+                apitoken: settings["ai:apitoken"] ?? null,
+                apiversion: settings["ai:apiversion"] ?? null,
+                maxtokens: settings["ai:maxtokens"] ?? null,
+                timeoutms: settings["ai:timeoutms"] ?? 60000,
+                baseurl: settings["ai:baseurl"] ?? null,
+            };
+            return opts;
+        });
+
         this.viewText = atom((get) => {
             const viewTextChildren: HeaderElem[] = [];
-            const aiOpts = this.getAiOpts();
+            const aiOpts = get(this.aiOpts);
-            const aiName = this.getAiName();
+            const presets = get(this.presetMap);
+            const presetKey = get(this.presetKey);
+            const presetName = presets[presetKey]?.["display:name"] ?? "";
             const isCloud = isBlank(aiOpts.apitoken) && isBlank(aiOpts.baseurl);
-            let modelText = "gpt-4o-mini";
-            if (!isCloud && !isBlank(aiOpts.model)) {
-                if (!isBlank(aiName)) {
-                    modelText = aiName;
-                } else {
-                    modelText = aiOpts.model;
-                }
-            }
             if (isCloud) {
                 viewTextChildren.push({
                     elemtype: "iconbutton",
@@ -143,9 +182,26 @@ export class WaveAiModel implements ViewModel {
                     });
                 }
             }
+
             viewTextChildren.push({
-                elemtype: "text",
+                elemtype: "menubutton",
-                text: modelText,
+                text: presetName,
+                title: "Select AI Configuration",
+                items: Object.entries(presets)
+                    .sort((a, b) => (a[1]["display:order"] > b[1]["display:order"] ? 1 : -1))
+                    .map(
+                        (preset) =>
+                            ({
+                                label: preset[1]["display:name"],
+                                onClick: () =>
+                                    fireAndForget(async () => {
+                                        await ObjectService.UpdateObjectMeta(WOS.makeORef("block", this.blockId), {
+                                            ...preset[1],
+                                            "ai:preset": preset[0],
+                                        });
+                                    }),
+                            }) as MenuItem
+                    ),
             });
             return viewTextChildren;
         });
@@ -173,22 +229,6 @@ export class WaveAiModel implements ViewModel {
         return false;
     }
 
-    getAiOpts(): OpenAIOptsType {
-        const blockMeta = globalStore.get(this.blockAtom)?.meta ?? {};
-        const settings = globalStore.get(atoms.settingsAtom) ?? {};
-        const opts: OpenAIOptsType = {
-            model: blockMeta["ai:model"] ?? settings["ai:model"] ?? null,
-            apitype: blockMeta["ai:apitype"] ?? settings["ai:apitype"] ?? null,
-            orgid: blockMeta["ai:orgid"] ?? settings["ai:orgid"] ?? null,
-            apitoken: blockMeta["ai:apitoken"] ?? settings["ai:apitoken"] ?? null,
-            apiversion: blockMeta["ai:apiversion"] ?? settings["ai:apiversion"] ?? null,
-            maxtokens: blockMeta["ai:maxtokens"] ?? settings["ai:maxtokens"] ?? null,
-            timeoutms: blockMeta["ai:timeoutms"] ?? settings["ai:timeoutms"] ?? 60000,
-            baseurl: blockMeta["ai:baseurl"] ?? settings["ai:baseurl"] ?? null,
-        };
-        return opts;
-    }
-
     getAiName(): string {
         const blockMeta = globalStore.get(this.blockAtom)?.meta ?? {};
         const settings = globalStore.get(atoms.settingsAtom) ?? {};
@@ -199,7 +239,6 @@ export class WaveAiModel implements ViewModel {
     useWaveAi() {
         const messages = useAtomValue(this.messagesAtom);
         const addMessage = useSetAtom(this.addMessageAtom);
-        const simulateResponse = useSetAtom(this.simulateAssistantResponseAtom);
         const clientId = useAtomValue(atoms.clientId);
         const blockId = this.blockId;
         const setLocked = useSetAtom(this.locked);
@@ -213,7 +252,7 @@ export class WaveAiModel implements ViewModel {
             };
             addMessage(newMessage);
             // send message to backend and get response
-            const opts = this.getAiOpts();
+            const opts = globalStore.get(this.aiOpts);
             const newPrompt: OpenAIPromptMessageType = {
                 role: "user",
                 content: text,

frontend/types/custom.d.ts

@@ -161,7 +161,14 @@ declare global {
 
     type SubjectWithRef<T> = rxjs.Subject<T> & { refCount: number; release: () => void };
 
-    type HeaderElem = IconButtonDecl | HeaderText | HeaderInput | HeaderDiv | HeaderTextButton | ConnectionButton;
+    type HeaderElem =
+        | IconButtonDecl
+        | HeaderText
+        | HeaderInput
+        | HeaderDiv
+        | HeaderTextButton
+        | ConnectionButton
+        | MenuButton;
 
     type IconButtonDecl = {
         elemtype: "iconbutton";
@@ -186,7 +193,7 @@ declare global {
         text: string;
         ref?: React.MutableRefObject<HTMLDivElement>;
         className?: string;
-        onClick?: () => void;
+        onClick?: (e: React.MouseEvent<any>) => void;
     };
 
     type HeaderInput = {
@@ -219,6 +226,23 @@ declare global {
         connected: boolean;
     };
 
+    type MenuItem = {
+        label: string;
+        subItems?: MenuItem[];
+        onClick?: (e: React.MouseEvent<any>) => void;
+    };
+
+    type MenuButtonProps = {
+        items: MenuItem[];
+        className?: string;
+        text: string;
+        title?: string;
+    };
+
+    type MenuButton = {
+        elemtype: "menubutton";
+    } & MenuButtonProps;
+
     interface ViewModel {
         viewType: string;
         viewIcon?: jotai.Atom<string | IconButtonDecl>;

frontend/types/gotypes.d.ts

@@ -293,6 +293,7 @@ declare global {
         "cmd:cwd"?: string;
         "cmd:nowsh"?: boolean;
         "ai:*"?: boolean;
+        "ai:preset"?: string;
         "ai:apitype"?: string;
         "ai:baseurl"?: string;
         "ai:apitoken"?: string;
@@ -426,6 +427,7 @@ declare global {
     // wconfig.SettingsType
     type SettingsType = {
         "ai:*"?: boolean;
+        "ai:preset"?: string;
         "ai:apitype"?: string;
         "ai:baseurl"?: string;
         "ai:apitoken"?: string;

package.json

@@ -81,6 +81,7 @@
         "vitest": "^2.1.2"
     },
     "dependencies": {
+        "@floating-ui/react": "^0.26.24",
         "@monaco-editor/loader": "^1.4.0",
         "@monaco-editor/react": "^4.6.0",
         "@observablehq/plot": "^0.6.16",

pkg/waveai/waveai.go

@@ -116,7 +116,7 @@ func RunAICommand(ctx context.Context, request wshrpc.OpenAiStreamRequest) chan
 		log.Print("sending ai chat message to default waveterm cloud endpoint\n")
 		return RunCloudCompletionStream(ctx, request)
 	}
-	log.Printf("sending ai chat message to user-configured endpoint %s\n", request.Opts.BaseURL)
+	log.Printf("sending ai chat message to user-configured endpoint %s using model %s\n", request.Opts.BaseURL, request.Opts.Model)
 	return RunLocalCompletionStream(ctx, request)
 }
 

pkg/waveobj/metaconsts.go

@@ -49,6 +49,7 @@ const (
 	MetaKey_CmdNoWsh                         = "cmd:nowsh"
 
 	MetaKey_AiClear                          = "ai:*"
+	MetaKey_AiPresetKey                      = "ai:preset"
 	MetaKey_AiApiType                        = "ai:apitype"
 	MetaKey_AiBaseURL                        = "ai:baseurl"
 	MetaKey_AiApiToken                       = "ai:apitoken"

pkg/waveobj/wtypemeta.go

@@ -49,6 +49,7 @@ type MetaTSType struct {
 
 	// AI options match settings
 	AiClear      bool    `json:"ai:*,omitempty"`
+	AiPresetKey  string  `json:"ai:preset,omitempty"`
 	AiApiType    string  `json:"ai:apitype,omitempty"`
 	AiBaseURL    string  `json:"ai:baseurl,omitempty"`
 	AiApiToken   string  `json:"ai:apitoken,omitempty"`

pkg/wconfig/defaultconfig/presets.json

@@ -94,5 +94,25 @@
         "bg": "linear-gradient(120deg,hsla(350, 65%, 57%, 1),hsla(30,60%,60%, .75), hsla(208,69%,50%,.15), hsl(230,60%,40%)),radial-gradient(at top right,hsla(300,60%,70%,0.3),transparent),radial-gradient(at top left,hsla(330,100%,70%,.20),transparent),radial-gradient(at top right,hsla(190,100%,40%,.20),transparent),radial-gradient(at bottom left,hsla(323,54%,50%,.5),transparent),radial-gradient(at bottom left,hsla(144,54%,50%,.25),transparent)",
         "bg:blendmode": "overlay",
         "bg:text": "rgb(200, 200, 200)"
+    },
+    "ai@global": {
+        "display:name": "Global default",
+        "display:order": -1,
+        "ai:*": true
+    },
+    "ai@wave": {
+        "display:name": "Wave Proxy - gpt-4o-mini",
+        "display:order": 0,
+        "ai:*": true,
+        "ai:model": "gpt-4o-mini",
+        "ai:maxtokens": 2048,
+        "ai:timeoutms": 60000
+    },
+    "ai@ollama-llama3.1": {
+        "display:name": "ollama - llama3.1",
+        "display:order": 0,
+        "ai:*": true,
+        "ai:baseurl": "http://localhost:11434/v1",
+        "ai:model": "llama3.1:latest"
     }
 }

pkg/wconfig/defaultconfig/settings.json

@@ -1,4 +1,5 @@
 {
+    "ai:preset": "ai@global",
     "ai:model": "gpt-4o-mini",
     "ai:maxtokens": 2048,
     "ai:timeoutms": 60000,

pkg/wconfig/metaconsts.go

@@ -7,6 +7,7 @@ package wconfig
 
 const (
 	ConfigKey_AiClear                        = "ai:*"
+	ConfigKey_AiPreset                       = "ai:preset"
 	ConfigKey_AiApiType                      = "ai:apitype"
 	ConfigKey_AiBaseURL                      = "ai:baseurl"
 	ConfigKey_AiApiToken                     = "ai:apitoken"

pkg/wconfig/settingsconfig.go

@@ -41,6 +41,7 @@ func (m MetaSettingsType) MarshalJSON() ([]byte, error) {
 
 type SettingsType struct {
 	AiClear      bool    `json:"ai:*,omitempty"`
+	AiPreset     string  `json:"ai:preset,omitempty"`
 	AiApiType    string  `json:"ai:apitype,omitempty"`
 	AiBaseURL    string  `json:"ai:baseurl,omitempty"`
 	AiApiToken   string  `json:"ai:apitoken,omitempty"`

yarn.lock

@@ -816,6 +816,58 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.6.0":
+  version: 1.6.8
+  resolution: "@floating-ui/core@npm:1.6.8"
+  dependencies:
+    "@floating-ui/utils": "npm:^0.2.8"
+  checksum: 10c0/d6985462aeccae7b55a2d3f40571551c8c42bf820ae0a477fc40ef462e33edc4f3f5b7f11b100de77c9b58ecb581670c5c3f46d0af82b5e30aa185c735257eb9
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:^1.0.0":
+  version: 1.6.11
+  resolution: "@floating-ui/dom@npm:1.6.11"
+  dependencies:
+    "@floating-ui/core": "npm:^1.6.0"
+    "@floating-ui/utils": "npm:^0.2.8"
+  checksum: 10c0/02ef34a75a515543c772880338eea7b66724997bd5ec7cd58d26b50325709d46d480a306b84e7d5509d734434411a4bcf23af5680c2e461e6e6a8bf45d751df8
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react-dom@npm:^2.1.2":
+  version: 2.1.2
+  resolution: "@floating-ui/react-dom@npm:2.1.2"
+  dependencies:
+    "@floating-ui/dom": "npm:^1.0.0"
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 10c0/e855131c74e68cab505f7f44f92cd4e2efab1c125796db3116c54c0859323adae4bf697bf292ee83ac77b9335a41ad67852193d7aeace90aa2e1c4a640cafa60
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react@npm:^0.26.24":
+  version: 0.26.24
+  resolution: "@floating-ui/react@npm:0.26.24"
+  dependencies:
+    "@floating-ui/react-dom": "npm:^2.1.2"
+    "@floating-ui/utils": "npm:^0.2.8"
+    tabbable: "npm:^6.0.0"
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 10c0/c5c3ac265802087673a69b0e08b3bea1ee02de9da4cdbc40bb1c9e06823be72628a82f1655b40d56a4383715b4ab3b6deddff4e69146f513970ee592e1dd8f92
+  languageName: node
+  linkType: hard
+
+"@floating-ui/utils@npm:^0.2.8":
+  version: 0.2.8
+  resolution: "@floating-ui/utils@npm:0.2.8"
+  checksum: 10c0/a8cee5f17406c900e1c3ef63e3ca89b35e7a2ed645418459a73627b93b7377477fc888081011c6cd177cac45ec2b92a6cab018c14ea140519465498dddd2d3f9
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -10567,6 +10619,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tabbable@npm:^6.0.0":
+  version: 6.2.0
+  resolution: "tabbable@npm:6.2.0"
+  checksum: 10c0/ced8b38f05f2de62cd46836d77c2646c42b8c9713f5bd265daf0e78ff5ac73d3ba48a7ca45f348bafeef29b23da7187c72250742d37627883ef89cbd7fa76898
+  languageName: node
+  linkType: hard
+
 "tar@npm:^6.0.5, tar@npm:^6.1.11, tar@npm:^6.1.12, tar@npm:^6.1.2, tar@npm:^6.2.1":
   version: 6.2.1
   resolution: "tar@npm:6.2.1"
@@ -11460,6 +11519,7 @@ __metadata:
   dependencies:
     "@chromatic-com/storybook": "npm:^2.0.2"
     "@eslint/js": "npm:^9.12.0"
+    "@floating-ui/react": "npm:^0.26.24"
     "@monaco-editor/loader": "npm:^1.4.0"
     "@monaco-editor/react": "npm:^4.6.0"
     "@observablehq/plot": "npm:^0.6.16"