@liveblocks/react-tiptap 2.16.1-ai5 → 2.16.2

package/dist/ai/AiToolbar.js

@@ -1,663 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactDom = require('@floating-ui/react-dom');
-var _private$1 = require('@liveblocks/react/_private');
-var _private = require('@liveblocks/react-ui/_private');
-var react$1 = require('@tiptap/react');
-var cmdk = require('cmdk');
-var react = require('react');
-var reactDom$1 = require('react-dom');
-var classnames = require('../classnames.js');
-var context = require('../context.js');
-var utils = require('../utils.js');
-var AiExtension = require('./AiExtension.js');
-
-const AI_TOOLBAR_COLLISION_PADDING = 10;
-const AiToolbarContext = react.createContext(null);
-function useAiToolbarContext() {
-  const context = react.useContext(AiToolbarContext);
-  if (!context) {
-    throw new Error("useAiToolbarContext must be used within an AiToolbar");
-  }
-  return context;
-}
-function tiptapFloating(editor) {
-  return {
-    name: "tiptap",
-    options: editor,
-    fn({ elements }) {
-      if (!editor) {
-        return {};
-      }
-      const editorRect = editor.view.dom.getBoundingClientRect();
-      elements.floating.style.setProperty(
-        "--lb-tiptap-editor-width",
-        `${editorRect.width}px`
-      );
-      elements.floating.style.setProperty(
-        "--lb-tiptap-editor-height",
-        `${editorRect.height}px`
-      );
-      return {
-        x: editorRect.x
-      };
-    }
-  };
-}
-function flipToolbar() {
-  return {
-    name: "flipToolbar",
-    fn({ elements, middlewareData, rects }) {
-      const shiftOffsetY = middlewareData.shift?.y ?? 0;
-      if (Math.abs(shiftOffsetY) >= rects.floating.height) {
-        elements.floating.setAttribute("data-liveblocks-ai-toolbar-flip", "");
-      } else {
-        elements.floating.removeAttribute("data-liveblocks-ai-toolbar-flip");
-      }
-      return {};
-    }
-  };
-}
-const AiToolbarDropdownSeparator = react.forwardRef(({ className, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Separator, {
-    className: classnames.classNames("lb-dropdown-separator", className),
-    ...props,
-    ref: forwardedRef
-  });
-});
-const AiToolbarSuggestionsSeparator = react.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownSeparator, {
-    ref: forwardedRef,
-    ...props
-  });
-});
-const AiToolbarDropdownItem = react.forwardRef(({ children, onSelect, icon, className, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Item, {
-    className: classnames.classNames("lb-dropdown-item", className),
-    onSelect,
-    ...props,
-    ref: forwardedRef,
-    children: [
-      icon ? /* @__PURE__ */ jsxRuntime.jsx("span", {
-        className: "lb-icon-container",
-        children: icon
-      }) : null,
-      children ? /* @__PURE__ */ jsxRuntime.jsx("span", {
-        className: "lb-dropdown-item-label",
-        children
-      }) : null
-    ]
-  });
-});
-const AiToolbarSuggestionsLabel = react.forwardRef(({ children, className, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", {
-    ref: forwardedRef,
-    className: classnames.classNames("lb-dropdown-label", className),
-    ...props,
-    children
-  });
-});
-const AiToolbarSuggestion = react.forwardRef(({ prompt: manualPrompt, ...props }, forwardedRef) => {
-  const editor = context.useCurrentEditor("Suggestion", "AiToolbar");
-  const handleSelect = react.useCallback(
-    (prompt) => {
-      editor.commands.$startAiToolbarThinking(
-        manualPrompt ?? prompt
-      );
-    },
-    [editor, manualPrompt]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
-    ...props,
-    onSelect: handleSelect,
-    ref: forwardedRef
-  });
-});
-function AiToolbarReviewingSuggestions() {
-  const editor = context.useCurrentEditor("ReviewingSuggestions", "AiToolbar");
-  const { state } = useAiToolbarContext();
-  const { response } = state;
-  if (AiExtension.isContextualPromptDiffResponse(response)) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.CheckIcon, {}),
-          onSelect: editor.commands.$acceptAiToolbarResponse,
-          children: "Accept"
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.UndoIcon, {}),
-          onSelect: editor.commands.$startAiToolbarThinking,
-          children: "Try again"
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.CrossIcon, {}),
-          onSelect: editor.commands.$closeAiToolbar,
-          children: "Discard"
-        })
-      ]
-    });
-  } else {
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.ArrowCornerDownRightIcon, {}),
-          onSelect: editor.commands.$acceptAiToolbarResponse,
-          children: "Insert below"
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.UndoIcon, {}),
-          onSelect: editor.commands.$startAiToolbarThinking,
-          children: "Try again"
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.CrossIcon, {}),
-          onSelect: editor.commands.$closeAiToolbar,
-          children: "Discard"
-        })
-      ]
-    });
-  }
-}
-function AiToolbarCustomPromptContent() {
-  const editor = context.useCurrentEditor("CustomPromptContent", "AiToolbar");
-  const aiName = editor.storage.liveblocksAi.name;
-  const textAreaRef = react.useRef(null);
-  const { state, dropdownRef, isDropdownHidden } = useAiToolbarContext();
-  const { customPrompt } = state;
-  const isCustomPromptEmpty = react.useMemo(
-    () => customPrompt.trim() === "",
-    [customPrompt]
-  );
-  _private$1.useLayoutEffect(
-    () => {
-      setTimeout(() => {
-        const textArea = textAreaRef.current;
-        if (!textArea) {
-          return;
-        }
-        textArea.focus();
-        textArea.setSelectionRange(
-          textArea.value.length,
-          textArea.value.length
-        );
-      }, 0);
-    },
-    []
-  );
-  const handlePromptKeyDown = (event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      event.stopPropagation();
-      if (event.shiftKey) {
-        editor.commands._updateAiToolbarCustomPrompt(
-          (customPrompt2) => customPrompt2 + "\n"
-        );
-      } else {
-        const selectedDropdownItem = dropdownRef.current?.querySelector(
-          "[role='option'][data-selected='true']"
-        );
-        if (!isDropdownHidden && selectedDropdownItem) {
-          selectedDropdownItem.click();
-        } else if (!isCustomPromptEmpty) {
-          editor.commands.$startAiToolbarThinking(
-            customPrompt,
-            state.phase === "reviewing"
-          );
-        }
-      }
-    }
-  };
-  const handleCustomPromptChange = react.useCallback(
-    (customPrompt2) => {
-      editor.commands._updateAiToolbarCustomPrompt(
-        customPrompt2
-      );
-    },
-    [editor]
-  );
-  const handleSendClick = react.useCallback(() => {
-    if (isCustomPromptEmpty) {
-      return;
-    }
-    editor.commands.$startAiToolbarThinking(
-      customPrompt,
-      state.phase === "reviewing"
-    );
-  }, [editor, customPrompt, isCustomPromptEmpty, state.phase]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    className: "lb-tiptap-ai-toolbar-content",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", {
-        className: "lb-icon-container lb-tiptap-ai-toolbar-icon-container",
-        children: /* @__PURE__ */ jsxRuntime.jsx(_private.SparklesIcon, {})
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: "lb-tiptap-ai-toolbar-custom-prompt-container",
-        "data-value": customPrompt,
-        children: /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Input, {
-          value: customPrompt,
-          onValueChange: handleCustomPromptChange,
-          asChild: true,
-          children: /* @__PURE__ */ jsxRuntime.jsx("textarea", {
-            ref: textAreaRef,
-            className: "lb-tiptap-ai-toolbar-custom-prompt",
-            placeholder: `Ask ${aiName} anything\u2026`,
-            onKeyDown: handlePromptKeyDown,
-            rows: 1,
-            autoFocus: true
-          })
-        })
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: "lb-tiptap-ai-toolbar-actions",
-        children: /* @__PURE__ */ jsxRuntime.jsx(_private.ShortcutTooltip, {
-          content: `Ask ${aiName}`,
-          shortcut: "Enter",
-          children: /* @__PURE__ */ jsxRuntime.jsx(_private.Button, {
-            className: "lb-tiptap-ai-toolbar-action",
-            variant: "primary",
-            "aria-label": `Ask ${aiName}`,
-            icon: /* @__PURE__ */ jsxRuntime.jsx(_private.SendIcon, {}),
-            disabled: isCustomPromptEmpty,
-            onClick: handleSendClick
-          })
-        })
-      })
-    ]
-  });
-}
-function AiToolbarAsking() {
-  const { state } = useAiToolbarContext();
-  const { error } = state;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AiToolbarCustomPromptContent, {}),
-      error ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: "lb-tiptap-ai-toolbar-error",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", {
-            className: "lb-icon-container",
-            children: /* @__PURE__ */ jsxRuntime.jsx(_private.WarningIcon, {})
-          }),
-          "There was a problem with your request."
-        ]
-      }) : null
-    ]
-  });
-}
-function AiToolbarThinking() {
-  const editor = context.useCurrentEditor("AiToolbarThinking", "AiToolbar");
-  const contentRef = react.useRef(null);
-  const aiName = editor.storage.liveblocksAi.name;
-  const handleCancel = react.useCallback(() => {
-    editor.commands.$cancelAiToolbarThinking();
-  }, [editor]);
-  _private$1.useLayoutEffect(() => {
-    contentRef.current?.focus();
-    window.getSelection()?.removeAllRanges();
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: "lb-tiptap-ai-toolbar-content",
-      tabIndex: 0,
-      ref: contentRef,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", {
-          className: "lb-icon-container lb-tiptap-ai-toolbar-icon-container",
-          children: /* @__PURE__ */ jsxRuntime.jsx(_private.SparklesIcon, {})
-        }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", {
-          className: "lb-tiptap-ai-toolbar-thinking",
-          children: [
-            aiName,
-            " is thinking\u2026"
-          ]
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", {
-          className: "lb-tiptap-ai-toolbar-actions",
-          children: /* @__PURE__ */ jsxRuntime.jsx(_private.ShortcutTooltip, {
-            content: "Cancel",
-            shortcut: "Escape",
-            children: /* @__PURE__ */ jsxRuntime.jsx(_private.Button, {
-              className: "lb-tiptap-ai-toolbar-action",
-              variant: "secondary",
-              "aria-label": "Cancel",
-              icon: /* @__PURE__ */ jsxRuntime.jsx(_private.UndoIcon, {}),
-              onClick: handleCancel
-            })
-          })
-        })
-      ]
-    })
-  });
-}
-function AiToolbarReviewing() {
-  const { state } = useAiToolbarContext();
-  const { response } = state;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [
-      response.type === "other" ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: "lb-tiptap-ai-toolbar-response-container",
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-          className: "lb-tiptap-ai-toolbar-response",
-          children: response.text
-        })
-      }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx(AiToolbarCustomPromptContent, {})
-    ]
-  });
-}
-function AiToolbarContainer({
-  state,
-  toolbarRef,
-  dropdownRef,
-  children
-}) {
-  const editor = context.useCurrentEditor("AiToolbarContainer", "AiToolbar");
-  const customPrompt = state.customPrompt;
-  const isCustomPromptMultiline = react.useMemo(
-    () => customPrompt?.includes("\n"),
-    [customPrompt]
-  );
-  const hasDropdownItems = cmdk.useCommandState(
-    (state2) => state2.filtered.count > 0
-  );
-  const isDropdownHidden = isCustomPromptMultiline || !hasDropdownItems;
-  react.useEffect(() => {
-    if (!editor) {
-      return;
-    }
-    const handleKeyDown = (event) => {
-      if (!event.defaultPrevented && event.key === "Escape") {
-        event.preventDefault();
-        event.stopPropagation();
-        if (state.phase === "thinking") {
-          editor.commands.$cancelAiToolbarThinking();
-        } else {
-          editor.chain().$closeAiToolbar().focus().run();
-        }
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [editor, state.phase]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(AiToolbarContext.Provider, {
-    value: {
-      state,
-      toolbarRef,
-      dropdownRef,
-      isDropdownHidden
-    },
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: "lb-tiptap-ai-toolbar-container",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", {
-            className: "lb-elevation lb-tiptap-ai-toolbar",
-            children: state.phase === "asking" ? /* @__PURE__ */ jsxRuntime.jsx(AiToolbarAsking, {}) : state.phase === "thinking" ? /* @__PURE__ */ jsxRuntime.jsx(AiToolbarThinking, {}) : state.phase === "reviewing" ? /* @__PURE__ */ jsxRuntime.jsx(AiToolbarReviewing, {}) : null
-          }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", {
-            className: "lb-tiptap-ai-toolbar-halo",
-            "data-active": state.phase === "thinking" ? "" : void 0,
-            "aria-hidden": true,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", {
-                className: "lb-tiptap-ai-toolbar-halo-horizontal"
-              }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", {
-                className: "lb-tiptap-ai-toolbar-halo-vertical"
-              })
-            ]
-          })
-        ]
-      }),
-      state.phase === "asking" || state.phase === "reviewing" ? /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.List, {
-        className: "lb-elevation lb-dropdown lb-tiptap-ai-toolbar-dropdown",
-        "data-hidden": isDropdownHidden ? "" : void 0,
-        ref: dropdownRef,
-        children: state.phase === "reviewing" ? /* @__PURE__ */ jsxRuntime.jsx(AiToolbarReviewingSuggestions, {}) : children
-      }) : null
-    ]
-  });
-}
-const defaultSuggestions = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-  children: [
-    /* @__PURE__ */ jsxRuntime.jsx(AiToolbarSuggestion, {
-      icon: /* @__PURE__ */ jsxRuntime.jsx(_private.EditIcon, {}),
-      prompt: "Improve the quality of the text",
-      children: "Improve writing"
-    }),
-    /* @__PURE__ */ jsxRuntime.jsx(AiToolbarSuggestion, {
-      icon: /* @__PURE__ */ jsxRuntime.jsx(_private.CheckIcon, {}),
-      prompt: "Fix spelling & grammar errors in the text",
-      children: "Fix mistakes"
-    }),
-    /* @__PURE__ */ jsxRuntime.jsx(AiToolbarSuggestion, {
-      icon: /* @__PURE__ */ jsxRuntime.jsx(_private.ShortenIcon, {}),
-      prompt: "Shorten the text, simplifying it",
-      children: "Simplify"
-    }),
-    /* @__PURE__ */ jsxRuntime.jsx(AiToolbarSuggestion, {
-      icon: /* @__PURE__ */ jsxRuntime.jsx(_private.LengthenIcon, {}),
-      prompt: "Lengthen the text, going into more detail",
-      children: "Add more detail"
-    }),
-    /* @__PURE__ */ jsxRuntime.jsx(AiToolbarSuggestionsSeparator, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(AiToolbarSuggestion, {
-      icon: /* @__PURE__ */ jsxRuntime.jsx(_private.SparklesTextIcon, {}),
-      prompt: "Continue writing from the text's end",
-      children: "Continue writing"
-    }),
-    /* @__PURE__ */ jsxRuntime.jsx(AiToolbarSuggestion, {
-      icon: /* @__PURE__ */ jsxRuntime.jsx(_private.QuestionMarkIcon, {}),
-      prompt: "Explain what the text is about",
-      children: "Explain"
-    })
-  ]
-});
-const AiToolbar = Object.assign(
-  react.forwardRef(
-    ({
-      offset: sideOffset = 6,
-      editor,
-      className,
-      suggestions: Suggestions = defaultSuggestions,
-      ...props
-    }, forwardedRef) => {
-      const state = react$1.useEditorState({
-        editor,
-        selector: (ctx) => {
-          return ctx.editor?.storage.liveblocksAi?.state;
-        }
-      }) ?? AiExtension.DEFAULT_STATE;
-      const selection = editor?.state.selection;
-      const floatingOptions = react.useMemo(() => {
-        const detectOverflowOptions = {
-          padding: AI_TOOLBAR_COLLISION_PADDING
-        };
-        return {
-          strategy: "fixed",
-          placement: "bottom",
-          middleware: [
-            tiptapFloating(editor),
-            reactDom.hide(detectOverflowOptions),
-            reactDom.offset(sideOffset),
-            reactDom.shift({
-              ...detectOverflowOptions,
-              mainAxis: false,
-              crossAxis: true,
-              limiter: reactDom.limitShift()
-            }),
-            flipToolbar()
-          ],
-          whileElementsMounted: (...args) => {
-            return reactDom.autoUpdate(...args, {
-              animationFrame: true
-            });
-          }
-        };
-      }, [editor, sideOffset]);
-      const isOpen = selection !== void 0 && state.phase !== "closed";
-      const {
-        refs: { setReference, setFloating },
-        strategy,
-        x,
-        y,
-        isPositioned
-      } = reactDom.useFloating({
-        ...floatingOptions,
-        open: isOpen
-      });
-      const toolbarRef = react.useRef(null);
-      const mergedRefs = _private.useRefs(forwardedRef, toolbarRef, setFloating);
-      const dropdownRef = react.useRef(null);
-      const [selectedDropdownValue, setSelectedDropdownValue] = react.useState("");
-      react.useEffect(() => {
-        if (state.phase === "closed") {
-          setSelectedDropdownValue("");
-        }
-      }, [state.phase]);
-      react.useEffect(() => {
-        if (state.phase === "closed") {
-          setSelectedDropdownValue("");
-          return;
-        }
-        const selectedDropdownItem = dropdownRef.current?.querySelector(
-          "[role='option'][data-selected='true']"
-        );
-        if (selectedDropdownItem) {
-          return;
-        }
-        const firstDropdownItem = dropdownRef.current?.querySelector("[role='option']");
-        setSelectedDropdownValue(
-          firstDropdownItem?.dataset.value ?? ""
-        );
-      }, [state.phase, dropdownRef, setSelectedDropdownValue]);
-      react.useEffect(() => {
-        if (!editor) {
-          return;
-        }
-        if (!selection && state.phase !== "closed") {
-          editor.commands.$closeAiToolbar();
-        }
-      }, [state.phase, editor, selection]);
-      _private$1.useLayoutEffect(() => {
-        if (!editor || !isOpen) {
-          return;
-        }
-        setReference(null);
-        setTimeout(() => {
-          if (state.phase === "reviewing" && AiExtension.isContextualPromptDiffResponse(state.response)) {
-            const changes = editor.view.dom.querySelectorAll(
-              "ychange[data-liveblocks]"
-            );
-            setReference({
-              getBoundingClientRect: () => {
-                const rects = [];
-                changes.forEach((change) => {
-                  rects.push(change.getBoundingClientRect());
-                });
-                const minX = Math.min(...rects.map((rect) => rect.left));
-                const minY = Math.min(...rects.map((rect) => rect.top));
-                const maxX = Math.max(...rects.map((rect) => rect.right));
-                const maxY = Math.max(...rects.map((rect) => rect.bottom));
-                return {
-                  x: minX,
-                  y: minY,
-                  width: maxX - minX,
-                  height: maxY - minY,
-                  top: minY,
-                  left: minX,
-                  bottom: maxY,
-                  right: maxX
-                };
-              }
-            });
-          } else if (selection) {
-            const domRange = utils.getDomRangeFromSelection(editor, selection);
-            setReference(domRange);
-          } else {
-            setReference(null);
-          }
-        }, 0);
-      }, [
-        selection,
-        editor,
-        isOpen,
-        setReference,
-        state.phase,
-        state.response
-      ]);
-      react.useEffect(() => {
-        if (!editor || !isOpen) {
-          return;
-        }
-        const handleOutsideEvent = (event) => {
-          if (!toolbarRef.current) {
-            return;
-          }
-          if (event.target && !toolbarRef.current.contains(event.target) && (dropdownRef.current ? !dropdownRef.current.contains(event.target) : true)) {
-            editor.commands.$closeAiToolbar();
-          }
-        };
-        setTimeout(() => {
-          document.addEventListener("pointerdown", handleOutsideEvent);
-        }, 0);
-        return () => {
-          document.removeEventListener("pointerdown", handleOutsideEvent);
-        };
-      }, [editor, isOpen]);
-      if (!editor || !isOpen) {
-        return null;
-      }
-      return reactDom$1.createPortal(
-        /* @__PURE__ */ jsxRuntime.jsx(_private.TooltipProvider, {
-          children: /* @__PURE__ */ jsxRuntime.jsx(context.EditorProvider, {
-            editor,
-            children: /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command, {
-              role: "toolbar",
-              label: "AI toolbar",
-              "aria-orientation": "horizontal",
-              className: classnames.classNames(
-                "lb-root lb-portal lb-tiptap-ai-toolbar-portal",
-                className
-              ),
-              ref: mergedRefs,
-              style: {
-                position: strategy,
-                top: 0,
-                left: 0,
-                transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)"
-              },
-              value: selectedDropdownValue,
-              onValueChange: setSelectedDropdownValue,
-              ...props,
-              children: /* @__PURE__ */ jsxRuntime.jsx(AiToolbarContainer, {
-                state,
-                dropdownRef,
-                toolbarRef,
-                children: typeof Suggestions === "function" ? /* @__PURE__ */ jsxRuntime.jsx(Suggestions, {
-                  children: defaultSuggestions
-                }) : Suggestions
-              })
-            })
-          })
-        }),
-        document.body
-      );
-    }
-  ),
-  {
-    Suggestion: AiToolbarSuggestion,
-    SuggestionsLabel: AiToolbarSuggestionsLabel,
-    SuggestionsSeparator: AiToolbarSuggestionsSeparator
-  }
-);
-
-exports.AI_TOOLBAR_COLLISION_PADDING = AI_TOOLBAR_COLLISION_PADDING;
-exports.AiToolbar = AiToolbar;
-//# sourceMappingURL=AiToolbar.js.map