@liveblocks/react-tiptap 2.18.3 → 2.18.4-uns1

package/dist/ai/AiToolbar.js

@@ -1,22 +1,20 @@
-'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');
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { hide, offset, shift, limitShift, autoUpdate, useFloating } from '@floating-ui/react-dom';
+import { useLayoutEffect } from '@liveblocks/react/_private';
+import { CheckIcon, UndoIcon, CrossIcon, ArrowCornerDownRightIcon, SparklesIcon, ShortcutTooltip, Button, SendIcon, WarningIcon, EditIcon, ShortenIcon, LengthenIcon, SparklesTextIcon, QuestionMarkIcon, useRefs, TooltipProvider } from '@liveblocks/react-ui/_private';
+import { useEditorState } from '@tiptap/react';
+import { Command, useCommandState } from 'cmdk';
+import { createContext, useContext, forwardRef, useCallback, useRef, useMemo, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { classNames } from '../classnames.js';
+import { useCurrentEditor, EditorProvider } from '../context.js';
+import { getDomRangeFromSelection } from '../utils.js';
+import { isContextualPromptDiffResponse, DEFAULT_STATE } from './AiExtension.js';
 
 const AI_TOOLBAR_COLLISION_PADDING = 10;
-const AiToolbarContext = react.createContext(null);
+const AiToolbarContext = createContext(null);
 function useAiToolbarContext() {
-  const context = react.useContext(AiToolbarContext);
+  const context = useContext(AiToolbarContext);
   if (!context) {
     throw new Error("useAiToolbarContext must be used within an AiToolbar");
   }
@@ -59,48 +57,48 @@ function flipToolbar() {
     }
   };
 }
-const AiToolbarDropdownSeparator = react.forwardRef(({ className, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Separator, {
-    className: classnames.classNames("lb-dropdown-separator", className),
+const AiToolbarDropdownSeparator = forwardRef(({ className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Command.Separator, {
+    className: classNames("lb-dropdown-separator", className),
     ...props,
     ref: forwardedRef
   });
 });
-const AiToolbarSuggestionsSeparator = react.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownSeparator, {
+const AiToolbarSuggestionsSeparator = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ 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),
+const AiToolbarDropdownItem = forwardRef(({ children, onSelect, icon, className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsxs(Command.Item, {
+    className: classNames("lb-dropdown-item", className),
     onSelect,
     ...props,
     ref: forwardedRef,
     children: [
-      icon ? /* @__PURE__ */ jsxRuntime.jsx("span", {
+      icon ? /* @__PURE__ */ jsx("span", {
         className: "lb-icon-container",
         children: icon
       }) : null,
-      children ? /* @__PURE__ */ jsxRuntime.jsx("span", {
+      children ? /* @__PURE__ */ jsx("span", {
         className: "lb-dropdown-item-label",
         children
       }) : null
     ]
   });
 });
-const AiToolbarSuggestionsLabel = react.forwardRef(({ children, className, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", {
+const AiToolbarSuggestionsLabel = forwardRef(({ children, className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsx("span", {
     ref: forwardedRef,
-    className: classnames.classNames("lb-dropdown-label", className),
+    className: 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(
+const AiToolbarSuggestion = forwardRef(({ prompt: manualPrompt, ...props }, forwardedRef) => {
+  const editor = useCurrentEditor("Suggestion", "AiToolbar");
+  const handleSelect = useCallback(
     (prompt) => {
       editor.commands.$startAiToolbarThinking(
         manualPrompt ?? prompt
@@ -108,51 +106,51 @@ const AiToolbarSuggestion = react.forwardRef(({ prompt: manualPrompt, ...props }
     },
     [editor, manualPrompt]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
+  return /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
     ...props,
     onSelect: handleSelect,
     ref: forwardedRef
   });
 });
 function AiToolbarReviewingSuggestions() {
-  const editor = context.useCurrentEditor("ReviewingSuggestions", "AiToolbar");
+  const editor = useCurrentEditor("ReviewingSuggestions", "AiToolbar");
   const { state } = useAiToolbarContext();
   const { response } = state;
-  if (AiExtension.isContextualPromptDiffResponse(response)) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  if (isContextualPromptDiffResponse(response)) {
+    return /* @__PURE__ */ jsxs(Fragment, {
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.CheckIcon, {}),
+        /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
+          icon: /* @__PURE__ */ jsx(CheckIcon, {}),
           onSelect: editor.commands.$acceptAiToolbarResponse,
           children: "Accept"
         }),
-        /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.UndoIcon, {}),
+        /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
+          icon: /* @__PURE__ */ jsx(UndoIcon, {}),
           onSelect: editor.commands.$startAiToolbarThinking,
           children: "Try again"
         }),
-        /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.CrossIcon, {}),
+        /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
+          icon: /* @__PURE__ */ jsx(CrossIcon, {}),
           onSelect: editor.commands.$closeAiToolbar,
           children: "Discard"
         })
       ]
     });
   } else {
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    return /* @__PURE__ */ jsxs(Fragment, {
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.ArrowCornerDownRightIcon, {}),
+        /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
+          icon: /* @__PURE__ */ jsx(ArrowCornerDownRightIcon, {}),
           onSelect: editor.commands.$acceptAiToolbarResponse,
           children: "Insert below"
         }),
-        /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.UndoIcon, {}),
+        /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
+          icon: /* @__PURE__ */ jsx(UndoIcon, {}),
           onSelect: editor.commands.$startAiToolbarThinking,
           children: "Try again"
         }),
-        /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.CrossIcon, {}),
+        /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
+          icon: /* @__PURE__ */ jsx(CrossIcon, {}),
           onSelect: editor.commands.$closeAiToolbar,
           children: "Discard"
         })
@@ -161,16 +159,16 @@ function AiToolbarReviewingSuggestions() {
   }
 }
 function AiToolbarCustomPromptContent() {
-  const editor = context.useCurrentEditor("CustomPromptContent", "AiToolbar");
+  const editor = useCurrentEditor("CustomPromptContent", "AiToolbar");
   const aiName = editor.storage.liveblocksAi.name;
-  const textAreaRef = react.useRef(null);
+  const textAreaRef = useRef(null);
   const { state, dropdownRef, isDropdownHidden } = useAiToolbarContext();
   const { customPrompt } = state;
-  const isCustomPromptEmpty = react.useMemo(
+  const isCustomPromptEmpty = useMemo(
     () => customPrompt.trim() === "",
     [customPrompt]
   );
-  _private$1.useLayoutEffect(
+  useLayoutEffect(
     () => {
       setTimeout(() => {
         const textArea = textAreaRef.current;
@@ -209,7 +207,7 @@ function AiToolbarCustomPromptContent() {
       }
     }
   };
-  const handleCustomPromptChange = react.useCallback(
+  const handleCustomPromptChange = useCallback(
     (customPrompt2) => {
       editor.commands._updateAiToolbarCustomPrompt(
         customPrompt2
@@ -217,7 +215,7 @@ function AiToolbarCustomPromptContent() {
     },
     [editor]
   );
-  const handleSendClick = react.useCallback(() => {
+  const handleSendClick = useCallback(() => {
     if (isCustomPromptEmpty) {
       return;
     }
@@ -226,21 +224,21 @@ function AiToolbarCustomPromptContent() {
       state.phase === "reviewing"
     );
   }, [editor, customPrompt, isCustomPromptEmpty, state.phase]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+  return /* @__PURE__ */ jsxs("div", {
     className: "lb-tiptap-ai-toolbar-content",
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", {
+      /* @__PURE__ */ jsx("span", {
         className: "lb-icon-container lb-tiptap-ai-toolbar-icon-container",
-        children: /* @__PURE__ */ jsxRuntime.jsx(_private.SparklesIcon, {})
+        children: /* @__PURE__ */ jsx(SparklesIcon, {})
       }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", {
+      /* @__PURE__ */ jsx("div", {
         className: "lb-tiptap-ai-toolbar-custom-prompt-container",
         "data-value": customPrompt,
-        children: /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Input, {
+        children: /* @__PURE__ */ jsx(Command.Input, {
           value: customPrompt,
           onValueChange: handleCustomPromptChange,
           asChild: true,
-          children: /* @__PURE__ */ jsxRuntime.jsx("textarea", {
+          children: /* @__PURE__ */ jsx("textarea", {
             ref: textAreaRef,
             className: "lb-tiptap-ai-toolbar-custom-prompt",
             placeholder: `Ask ${aiName} anything\u2026`,
@@ -250,16 +248,16 @@ function AiToolbarCustomPromptContent() {
           })
         })
       }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", {
+      /* @__PURE__ */ jsx("div", {
         className: "lb-tiptap-ai-toolbar-actions",
-        children: /* @__PURE__ */ jsxRuntime.jsx(_private.ShortcutTooltip, {
+        children: /* @__PURE__ */ jsx(ShortcutTooltip, {
           content: `Ask ${aiName}`,
           shortcut: "Enter",
-          children: /* @__PURE__ */ jsxRuntime.jsx(_private.Button, {
+          children: /* @__PURE__ */ jsx(Button, {
             className: "lb-tiptap-ai-toolbar-action",
             variant: "primary",
             "aria-label": `Ask ${aiName}`,
-            icon: /* @__PURE__ */ jsxRuntime.jsx(_private.SendIcon, {}),
+            icon: /* @__PURE__ */ jsx(SendIcon, {}),
             disabled: isCustomPromptEmpty,
             onClick: handleSendClick
           })
@@ -271,15 +269,15 @@ function AiToolbarCustomPromptContent() {
 function AiToolbarAsking() {
   const { state } = useAiToolbarContext();
   const { error } = state;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  return /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AiToolbarCustomPromptContent, {}),
-      error ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      /* @__PURE__ */ jsx(AiToolbarCustomPromptContent, {}),
+      error ? /* @__PURE__ */ jsxs("div", {
         className: "lb-tiptap-ai-toolbar-error",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", {
+          /* @__PURE__ */ jsx("span", {
             className: "lb-icon-container",
-            children: /* @__PURE__ */ jsxRuntime.jsx(_private.WarningIcon, {})
+            children: /* @__PURE__ */ jsx(WarningIcon, {})
           }),
           "There was a problem with your request."
         ]
@@ -288,43 +286,43 @@ function AiToolbarAsking() {
   });
 }
 function AiToolbarThinking() {
-  const editor = context.useCurrentEditor("AiToolbarThinking", "AiToolbar");
-  const contentRef = react.useRef(null);
+  const editor = useCurrentEditor("AiToolbarThinking", "AiToolbar");
+  const contentRef = useRef(null);
   const aiName = editor.storage.liveblocksAi.name;
-  const handleCancel = react.useCallback(() => {
+  const handleCancel = useCallback(() => {
     editor.commands.$cancelAiToolbarThinking();
   }, [editor]);
-  _private$1.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     contentRef.current?.focus();
     window.getSelection()?.removeAllRanges();
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsxs("div", {
       className: "lb-tiptap-ai-toolbar-content",
       tabIndex: 0,
       ref: contentRef,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", {
+        /* @__PURE__ */ jsx("span", {
           className: "lb-icon-container lb-tiptap-ai-toolbar-icon-container",
-          children: /* @__PURE__ */ jsxRuntime.jsx(_private.SparklesIcon, {})
+          children: /* @__PURE__ */ jsx(SparklesIcon, {})
         }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        /* @__PURE__ */ jsxs("div", {
           className: "lb-tiptap-ai-toolbar-thinking",
           children: [
             aiName,
             " is thinking\u2026"
           ]
         }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", {
+        /* @__PURE__ */ jsx("div", {
           className: "lb-tiptap-ai-toolbar-actions",
-          children: /* @__PURE__ */ jsxRuntime.jsx(_private.ShortcutTooltip, {
+          children: /* @__PURE__ */ jsx(ShortcutTooltip, {
             content: "Cancel",
             shortcut: "Escape",
-            children: /* @__PURE__ */ jsxRuntime.jsx(_private.Button, {
+            children: /* @__PURE__ */ jsx(Button, {
               className: "lb-tiptap-ai-toolbar-action",
               variant: "secondary",
               "aria-label": "Cancel",
-              icon: /* @__PURE__ */ jsxRuntime.jsx(_private.UndoIcon, {}),
+              icon: /* @__PURE__ */ jsx(UndoIcon, {}),
               onClick: handleCancel
             })
           })
@@ -336,16 +334,16 @@ function AiToolbarThinking() {
 function AiToolbarReviewing() {
   const { state } = useAiToolbarContext();
   const { response } = state;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  return /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      response.type === "other" ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+      response.type === "other" ? /* @__PURE__ */ jsx("div", {
         className: "lb-tiptap-ai-toolbar-response-container",
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+        children: /* @__PURE__ */ jsx("div", {
           className: "lb-tiptap-ai-toolbar-response",
           children: response.text
         })
       }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx(AiToolbarCustomPromptContent, {})
+      /* @__PURE__ */ jsx(AiToolbarCustomPromptContent, {})
     ]
   });
 }
@@ -355,17 +353,17 @@ function AiToolbarContainer({
   dropdownRef,
   children
 }) {
-  const editor = context.useCurrentEditor("AiToolbarContainer", "AiToolbar");
+  const editor = useCurrentEditor("AiToolbarContainer", "AiToolbar");
   const customPrompt = state.customPrompt;
-  const isCustomPromptMultiline = react.useMemo(
+  const isCustomPromptMultiline = useMemo(
     () => customPrompt?.includes("\n"),
     [customPrompt]
   );
-  const hasDropdownItems = cmdk.useCommandState(
+  const hasDropdownItems = useCommandState(
     (state2) => state2.filtered.count > 0
   );
   const isDropdownHidden = isCustomPromptMultiline || !hasDropdownItems;
-  react.useEffect(() => {
+  useEffect(() => {
     if (!editor) {
       return;
     }
@@ -385,7 +383,7 @@ function AiToolbarContainer({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [editor, state.phase]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(AiToolbarContext.Provider, {
+  return /* @__PURE__ */ jsxs(AiToolbarContext.Provider, {
     value: {
       state,
       toolbarRef,
@@ -393,74 +391,74 @@ function AiToolbarContainer({
       isDropdownHidden
     },
     children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      /* @__PURE__ */ jsxs("div", {
         className: "lb-tiptap-ai-toolbar-container",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", {
+          /* @__PURE__ */ 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
+            children: state.phase === "asking" ? /* @__PURE__ */ jsx(AiToolbarAsking, {}) : state.phase === "thinking" ? /* @__PURE__ */ jsx(AiToolbarThinking, {}) : state.phase === "reviewing" ? /* @__PURE__ */ jsx(AiToolbarReviewing, {}) : null
           }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          /* @__PURE__ */ jsxs("div", {
             className: "lb-tiptap-ai-toolbar-halo",
             "data-active": state.phase === "thinking" ? "" : void 0,
             "aria-hidden": true,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", {
+              /* @__PURE__ */ jsx("div", {
                 className: "lb-tiptap-ai-toolbar-halo-horizontal"
               }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", {
+              /* @__PURE__ */ jsx("div", {
                 className: "lb-tiptap-ai-toolbar-halo-vertical"
               })
             ]
           })
         ]
       }),
-      state.phase === "asking" || state.phase === "reviewing" ? /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.List, {
+      state.phase === "asking" || state.phase === "reviewing" ? /* @__PURE__ */ jsx(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
+        children: state.phase === "reviewing" ? /* @__PURE__ */ jsx(AiToolbarReviewingSuggestions, {}) : children
       }) : null
     ]
   });
 }
-const defaultSuggestions = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+const defaultSuggestions = /* @__PURE__ */ jsxs(Fragment, {
   children: [
-    /* @__PURE__ */ jsxRuntime.jsx(AiToolbarSuggestion, {
-      icon: /* @__PURE__ */ jsxRuntime.jsx(_private.EditIcon, {}),
+    /* @__PURE__ */ jsx(AiToolbarSuggestion, {
+      icon: /* @__PURE__ */ jsx(EditIcon, {}),
       prompt: "Improve the quality of the text",
       children: "Improve writing"
     }),
-    /* @__PURE__ */ jsxRuntime.jsx(AiToolbarSuggestion, {
-      icon: /* @__PURE__ */ jsxRuntime.jsx(_private.CheckIcon, {}),
+    /* @__PURE__ */ jsx(AiToolbarSuggestion, {
+      icon: /* @__PURE__ */ jsx(CheckIcon, {}),
       prompt: "Fix spelling & grammar errors in the text",
       children: "Fix mistakes"
     }),
-    /* @__PURE__ */ jsxRuntime.jsx(AiToolbarSuggestion, {
-      icon: /* @__PURE__ */ jsxRuntime.jsx(_private.ShortenIcon, {}),
+    /* @__PURE__ */ jsx(AiToolbarSuggestion, {
+      icon: /* @__PURE__ */ jsx(ShortenIcon, {}),
       prompt: "Shorten the text, simplifying it",
       children: "Simplify"
     }),
-    /* @__PURE__ */ jsxRuntime.jsx(AiToolbarSuggestion, {
-      icon: /* @__PURE__ */ jsxRuntime.jsx(_private.LengthenIcon, {}),
+    /* @__PURE__ */ jsx(AiToolbarSuggestion, {
+      icon: /* @__PURE__ */ jsx(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, {}),
+    /* @__PURE__ */ jsx(AiToolbarSuggestionsSeparator, {}),
+    /* @__PURE__ */ jsx(AiToolbarSuggestion, {
+      icon: /* @__PURE__ */ jsx(SparklesTextIcon, {}),
       prompt: "Continue writing from the text's end",
       children: "Continue writing"
     }),
-    /* @__PURE__ */ jsxRuntime.jsx(AiToolbarSuggestion, {
-      icon: /* @__PURE__ */ jsxRuntime.jsx(_private.QuestionMarkIcon, {}),
+    /* @__PURE__ */ jsx(AiToolbarSuggestion, {
+      icon: /* @__PURE__ */ jsx(QuestionMarkIcon, {}),
       prompt: "Explain what the text is about",
       children: "Explain"
     })
   ]
 });
 const AiToolbar = Object.assign(
-  react.forwardRef(
+  forwardRef(
     ({
       offset: sideOffset = 6,
       editor,
@@ -468,14 +466,14 @@ const AiToolbar = Object.assign(
       suggestions: Suggestions = defaultSuggestions,
       ...props
     }, forwardedRef) => {
-      const state = react$1.useEditorState({
+      const state = useEditorState({
         editor,
         selector: (ctx) => {
           return ctx.editor?.storage.liveblocksAi?.state;
         }
-      }) ?? AiExtension.DEFAULT_STATE;
+      }) ?? DEFAULT_STATE;
       const selection = editor?.state.selection;
-      const floatingOptions = react.useMemo(() => {
+      const floatingOptions = useMemo(() => {
         const detectOverflowOptions = {
           padding: AI_TOOLBAR_COLLISION_PADDING
         };
@@ -484,18 +482,18 @@ const AiToolbar = Object.assign(
           placement: "bottom",
           middleware: [
             tiptapFloating(editor),
-            reactDom.hide(detectOverflowOptions),
-            reactDom.offset(sideOffset),
-            reactDom.shift({
+            hide(detectOverflowOptions),
+            offset(sideOffset),
+            shift({
               ...detectOverflowOptions,
               mainAxis: false,
               crossAxis: true,
-              limiter: reactDom.limitShift()
+              limiter: limitShift()
             }),
             flipToolbar()
           ],
           whileElementsMounted: (...args) => {
-            return reactDom.autoUpdate(...args, {
+            return autoUpdate(...args, {
               animationFrame: true
             });
           }
@@ -508,20 +506,20 @@ const AiToolbar = Object.assign(
         x,
         y,
         isPositioned
-      } = reactDom.useFloating({
+      } = 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(() => {
+      const toolbarRef = useRef(null);
+      const mergedRefs = useRefs(forwardedRef, toolbarRef, setFloating);
+      const dropdownRef = useRef(null);
+      const [selectedDropdownValue, setSelectedDropdownValue] = useState("");
+      useEffect(() => {
         if (state.phase === "closed") {
           setSelectedDropdownValue("");
         }
       }, [state.phase]);
-      react.useEffect(() => {
+      useEffect(() => {
         if (state.phase === "closed") {
           setSelectedDropdownValue("");
           return;
@@ -537,7 +535,7 @@ const AiToolbar = Object.assign(
           firstDropdownItem?.dataset.value ?? ""
         );
       }, [state.phase, dropdownRef, setSelectedDropdownValue]);
-      react.useEffect(() => {
+      useEffect(() => {
         if (!editor) {
           return;
         }
@@ -545,13 +543,13 @@ const AiToolbar = Object.assign(
           editor.commands.$closeAiToolbar();
         }
       }, [state.phase, editor, selection]);
-      _private$1.useLayoutEffect(() => {
+      useLayoutEffect(() => {
         if (!editor || !isOpen) {
           return;
         }
         setReference(null);
         setTimeout(() => {
-          if (state.phase === "reviewing" && AiExtension.isContextualPromptDiffResponse(state.response)) {
+          if (state.phase === "reviewing" && isContextualPromptDiffResponse(state.response)) {
             const changes = editor.view.dom.querySelectorAll(
               "ychange[data-liveblocks]"
             );
@@ -578,7 +576,7 @@ const AiToolbar = Object.assign(
               }
             });
           } else if (selection) {
-            const domRange = utils.getDomRangeFromSelection(editor, selection);
+            const domRange = getDomRangeFromSelection(editor, selection);
             setReference(domRange);
           } else {
             setReference(null);
@@ -592,7 +590,7 @@ const AiToolbar = Object.assign(
         state.phase,
         state.response
       ]);
-      react.useEffect(() => {
+      useEffect(() => {
         if (!editor || !isOpen) {
           return;
         }
@@ -614,15 +612,15 @@ const AiToolbar = Object.assign(
       if (!editor || !isOpen) {
         return null;
       }
-      return reactDom$1.createPortal(
-        /* @__PURE__ */ jsxRuntime.jsx(_private.TooltipProvider, {
-          children: /* @__PURE__ */ jsxRuntime.jsx(context.EditorProvider, {
+      return createPortal(
+        /* @__PURE__ */ jsx(TooltipProvider, {
+          children: /* @__PURE__ */ jsx(EditorProvider, {
             editor,
-            children: /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command, {
+            children: /* @__PURE__ */ jsx(Command, {
               role: "toolbar",
               label: "AI toolbar",
               "aria-orientation": "horizontal",
-              className: classnames.classNames(
+              className: classNames(
                 "lb-root lb-portal lb-tiptap-ai-toolbar-portal",
                 className
               ),
@@ -636,11 +634,11 @@ const AiToolbar = Object.assign(
               value: selectedDropdownValue,
               onValueChange: setSelectedDropdownValue,
               ...props,
-              children: /* @__PURE__ */ jsxRuntime.jsx(AiToolbarContainer, {
+              children: /* @__PURE__ */ jsx(AiToolbarContainer, {
                 state,
                 dropdownRef,
                 toolbarRef,
-                children: typeof Suggestions === "function" ? /* @__PURE__ */ jsxRuntime.jsx(Suggestions, {
+                children: typeof Suggestions === "function" ? /* @__PURE__ */ jsx(Suggestions, {
                   children: defaultSuggestions
                 }) : Suggestions
               })
@@ -658,6 +656,5 @@ const AiToolbar = Object.assign(
   }
 );
 
-exports.AI_TOOLBAR_COLLISION_PADDING = AI_TOOLBAR_COLLISION_PADDING;
-exports.AiToolbar = AiToolbar;
+export { AI_TOOLBAR_COLLISION_PADDING, AiToolbar };
 //# sourceMappingURL=AiToolbar.js.map