@liveblocks/react-tiptap 2.17.0-usrnotsettings3 → 2.17.0

package/dist/ai/AiToolbar.js

@@ -0,0 +1,663 @@
+'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