@liveblocks/react-tiptap 2.16.0-toolbars5 → 2.16.1-ai

package/dist/ai/AiExtension.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiExtension.mjs","sources":["../../src/ai/AiExtension.ts"],"sourcesContent":["import type { LiveblocksYjsProvider } from \"@liveblocks/yjs\";\nimport type { Editor } from \"@tiptap/core\";\nimport { Extension } from \"@tiptap/core\";\nimport { Fragment, Slice } from \"@tiptap/pm/model\";\nimport type { Transaction } from \"@tiptap/pm/state\";\nimport { Plugin } from \"@tiptap/pm/state\";\nimport { Decoration, DecorationSet } from \"@tiptap/pm/view\";\nimport {\n  ySyncPluginKey,\n  yXmlFragmentToProseMirrorFragment,\n} from \"y-prosemirror\";\nimport type { Snapshot } from \"yjs\";\nimport {\n  createDocFromSnapshot,\n  emptySnapshot,\n  equalSnapshots,\n  snapshot,\n} from \"yjs\";\n\nimport {\n  AI_TOOLBAR_SELECTION_PLUGIN,\n  type AiCommands,\n  type AiExtensionOptions,\n  type AiExtensionStorage,\n  type AiToolbarOutput,\n  type AiToolbarState,\n  type LiveblocksExtensionStorage,\n  type YSyncPluginState,\n} from \"../types\";\n\nconst DEFAULT_AI_NAME = \"AI\";\nexport const DEFAULT_STATE: AiToolbarState = { phase: \"closed\" };\n\nfunction getYjsBinding(editor: Editor) {\n  return (ySyncPluginKey.getState(editor.view.state) as YSyncPluginState)\n    .binding;\n}\n\nfunction getLiveblocksYjsProvider(editor: Editor) {\n  return (\n    editor.extensionStorage.liveblocksExtension as\n      | LiveblocksExtensionStorage\n      | undefined\n  )?.provider as LiveblocksYjsProvider | undefined;\n}\n\nexport const AiExtension = Extension.create<\n  AiExtensionOptions,\n  AiExtensionStorage\n>({\n  name: \"liveblocksAi\",\n  addOptions() {\n    return {\n      doc: undefined,\n      pud: undefined,\n\n      // The actual default resolver is set in LiveblocksExtension via AiExtension.configure()\n      resolveAiPrompt: () => Promise.reject(),\n      name: DEFAULT_AI_NAME,\n    };\n  },\n  addStorage() {\n    return {\n      state: DEFAULT_STATE,\n      name: this.options.name,\n    };\n  },\n  onCreate() {\n    // Turn off gc for snapshots to work\n    // TODO: remove this later, we only need to compare two full copies\n    // if (this.options.doc) {\n    // this.options.doc.gc = false;\n    // }\n  },\n  addCommands() {\n    return {\n      askAi: (prompt) => () => {\n        if (typeof prompt === \"string\") {\n          (\n            this.editor.commands as unknown as AiCommands\n          ).$startAiToolbarThinking(prompt);\n        } else {\n          (\n            this.editor.commands as unknown as AiCommands\n          ).$openAiToolbarAsking();\n        }\n\n        return true;\n      },\n\n      $acceptAiToolbarOutput:\n        () =>\n        // todo: figure out why I needed to manually type this\n        ({ tr }: { tr: Transaction }) => {\n          const currentState = this.storage.state;\n          if (currentState.phase !== \"reviewing\") {\n            return false;\n          }\n          const binding = getYjsBinding(this.editor);\n          if (!binding) {\n            return false;\n          }\n\n          const fragmentContent = yXmlFragmentToProseMirrorFragment(\n            binding.type,\n            this.editor.state.schema\n          );\n          tr.setMeta(\"addToHistory\", false);\n          tr.replace(\n            0,\n            this.editor.state.doc.content.size,\n            new Slice(Fragment.from(fragmentContent), 0, 0)\n          );\n          tr.setMeta(ySyncPluginKey, {\n            snapshot: null,\n            prevSnapshot: null,\n          });\n\n          // TODO: move this cleanup to somewhere that closeAIToolbar can share\n          getLiveblocksYjsProvider(this.editor)?.unpause();\n          this.editor.setEditable(true);\n          this.storage.snapshot = undefined;\n          this.storage.state = { phase: \"closed\" };\n          return true;\n        },\n\n      $closeAiToolbar:\n        () =>\n        // todo: figure out why I needed to manually type this\n        ({ tr }: { tr: Transaction }) => {\n          const currentState = this.storage.state;\n\n          // 1. If in \"thinking\" phase, cancel the current AI request\n          if (currentState.phase === \"thinking\") {\n            currentState.abortController.abort();\n          }\n\n          // 2. If in \"thinking\" or \"reviewing\" phase, revert the editor if possible and unblock it\n          if (\n            currentState.phase === \"thinking\" ||\n            currentState.phase === \"reviewing\"\n          ) {\n            if (this.storage.snapshot) {\n              const binding = getYjsBinding(this.editor);\n\n              if (binding) {\n                binding.mapping.clear();\n\n                const docFromSnapshot = createDocFromSnapshot(\n                  binding.doc,\n                  this.storage.snapshot\n                );\n                const type = docFromSnapshot.getXmlFragment(\"default\"); // TODO: field\n                const fragmentContent = yXmlFragmentToProseMirrorFragment(\n                  type,\n                  this.editor.state.schema\n                );\n\n                tr.setMeta(\"addToHistory\", false);\n                tr.replace(\n                  0,\n                  this.editor.state.doc.content.size,\n                  new Slice(Fragment.from(fragmentContent), 0, 0)\n                );\n                tr.setMeta(ySyncPluginKey, {\n                  snapshot: null,\n                  prevSnapshot: null,\n                });\n\n                getLiveblocksYjsProvider(this.editor)?.unpause();\n\n                if (this.options.doc) {\n                  this.options.doc.gc = true;\n                }\n\n                this.storage.snapshot = undefined;\n              }\n            }\n\n            this.editor.setEditable(true);\n          }\n\n          // 4. Set to \"closed\" phase\n          this.storage.state = { phase: \"closed\" };\n\n          return true;\n        },\n\n      $openAiToolbarAsking: () => () => {\n        const currentState = this.storage.state;\n\n        // 1. If NOT in \"closed\" phase, do nothing\n        if (currentState.phase !== \"closed\") {\n          return false;\n        }\n\n        // 2. Blur the editor if needed\n        if (this.editor.isFocused) {\n          this.editor.commands.blur();\n        }\n\n        // 3. Set to \"asking\" phase\n        this.storage.state = {\n          phase: \"asking\",\n\n          // Initialize the custom prompt as empty\n          customPrompt: \"\",\n        };\n\n        return true;\n      },\n\n      $startAiToolbarThinking: (prompt: string) => () => {\n        const currentState = this.storage.state;\n\n        // 1. If in \"thinking\" phase already, do nothing\n        if (currentState.phase === \"thinking\") {\n          return false;\n        }\n\n        if (currentState.phase === \"reviewing\") {\n          // TODO: this is a retry, we should actually retry and start thinking again\n          return (\n            this.editor.commands as unknown as AiCommands\n          ).$closeAiToolbar();\n        }\n\n        // 2. Blur the editor if needed\n        if (this.editor.isFocused) {\n          this.editor.commands.blur();\n        }\n\n        const abortController = new AbortController();\n        const provider = getLiveblocksYjsProvider(this.editor);\n\n        // 3. Set to \"thinking\" phase\n        this.storage.state = {\n          phase: \"thinking\",\n          customPrompt: currentState.customPrompt ?? \"\",\n          prompt,\n          abortController,\n        };\n\n        // 4. Block the editor\n        this.editor.setEditable(false);\n\n        // 5. Execute the AI request\n        const executeAiRequest = async () => {\n          await provider?.pause();\n          const { from, to } = this.editor.state.selection.empty\n            ? {\n                // TODO: this is a hack to get the context around the selection, we need to improve this\n                from: Math.max(this.editor.state.selection.to - 30, 0),\n                to: this.editor.state.selection.to,\n              }\n            : this.editor.state.selection;\n          return this.options.resolveAiPrompt({\n            prompt,\n            selectionText: this.editor.state.doc.textBetween(from, to, \" \"),\n            /*\n               TODO: This needs a maximum to avoid overloading context, for now I've arbitrailiry chosen 3000\n               characters but this will need to be improved, probably using word boundary of some sort (languages can make that tricky)\n               as well as choosing text around the selection, so before/after.\n            */\n            context: this.editor.getText().slice(0, 3_000),\n            signal: abortController.signal,\n          });\n        };\n\n        executeAiRequest()\n          .then((output) => {\n            if (abortController.signal.aborted) {\n              return;\n            }\n\n            // 5.a. If the AI request succeeds, set to \"reviewing\" phase with the output\n            (\n              this.editor.commands as unknown as AiCommands\n            )._handleAiToolbarThinkingSuccess({\n              type: output.type,\n              text: output.content,\n            });\n          })\n          .catch((error) => {\n            if (abortController.signal.aborted) {\n              return;\n            }\n\n            // 5.b. If the AI request fails, set to \"asking\" phase with error\n            (\n              this.editor.commands as unknown as AiCommands\n            )._handleAiToolbarThinkingError(error as Error);\n          });\n\n        return true;\n      },\n\n      $cancelAiToolbarThinking: () => () => {\n        const currentState = this.storage.state;\n\n        // 1. If NOT in \"thinking\" phase, do nothing\n        if (currentState.phase !== \"thinking\") {\n          return false;\n        }\n\n        // 2. Cancel the current AI request\n        currentState.abortController.abort();\n\n        // 3. Unblock the editor\n        this.editor.setEditable(true);\n\n        // 4. Set to \"asking\" phase\n        this.storage.state = {\n          phase: \"asking\",\n          // If the custom prompt is different than the prompt, reset it\n          customPrompt:\n            currentState.prompt === currentState.customPrompt\n              ? currentState.customPrompt\n              : \"\",\n        };\n\n        return true;\n      },\n\n      _handleAiToolbarThinkingSuccess: (output: AiToolbarOutput) => () => {\n        const currentState = this.storage.state;\n\n        // 1. If NOT in \"thinking\" phase, do nothing\n        if (currentState.phase !== \"thinking\" || !this.options.doc) {\n          return false;\n        }\n\n        // TODO: Diff vs other output types\n        // 2. If the output is a diff, apply it to the editor\n        if ([\"modification\", \"insert\"].includes(output.type)) {\n          this.options.doc.gc = false;\n          this.storage.snapshot = snapshot(this.options.doc);\n          // TODO: We now rely on editor.state.selection but this breaks it, should we update editor.state.selection or keep our own selection?\n          // settimeout will make this execute after the current transaction is committed, which is returned by the insert content command.\n          setTimeout(() => {\n            if (this.storage.snapshot) {\n              (\n                this.editor.commands as unknown as AiCommands\n              )._renderAiToolbarDiffInEditor(this.storage.snapshot);\n            }\n          }, 100);\n        } else {\n          // \"Other\"\n          return true;\n        }\n\n        const { from, to } = this.editor.state.selection;\n        // if the selection is empty, insert at the end of the selection\n        const contentTarget =\n          this.editor.state.selection.empty || output.type === \"insert\"\n            ? this.editor.state.selection.to\n            : {\n                from,\n                to,\n              };\n\n        // when inserting, use the \"to\" position, otherwise when modifing, use the \"from\" position\n        const targetTo = output.type === \"insert\" ? to : from;\n\n        // 3. Set to \"reviewing\" phase with the output\n        this.storage.state = {\n          phase: \"reviewing\",\n          customPrompt: \"\",\n          prompt: currentState.prompt,\n          output,\n          contentTarget: { from, to: targetTo + output.text.length }, // take into account the new length with output\n        };\n\n        // 4. insert the output.\n        return this.editor.commands.insertContentAt(contentTarget, output.text);\n      },\n\n      _handleAiToolbarThinkingError: (error: Error) => () => {\n        const currentState = this.storage.state;\n\n        // 1. If NOT in \"thinking\" phase, do nothing\n        if (currentState.phase !== \"thinking\") {\n          return false;\n        }\n\n        // 2. Unblock the editor\n        this.editor.setEditable(true);\n\n        // 3. Set to \"asking\" phase with error\n        this.storage.state = {\n          phase: \"asking\",\n          // If the custom prompt is different than the prompt, reset it\n          customPrompt:\n            currentState.prompt === currentState.customPrompt\n              ? currentState.customPrompt\n              : \"\",\n          // TODO: Improve error handling\n          error,\n        };\n\n        return true;\n      },\n\n      _updateAiToolbarCustomPrompt:\n        (customPrompt: string | ((currentCustomPrompt: string) => string)) =>\n        () => {\n          const currentState = this.storage.state;\n\n          // 1. If NOT in a phase with a custom prompt, do nothing\n          if (typeof currentState.customPrompt !== \"string\") {\n            return false;\n          }\n\n          // 2. Update the custom prompt\n          this.storage.state.customPrompt =\n            typeof customPrompt === \"function\"\n              ? customPrompt(currentState.customPrompt)\n              : customPrompt;\n\n          return true;\n        },\n\n      _renderAiToolbarDiffInEditor: (previous?: Snapshot) => () => {\n        if (!this.options.doc) {\n          return false;\n        }\n\n        const previousSnapshot: Snapshot = previous ?? emptySnapshot;\n        const currentSnapshot = snapshot(this.options.doc);\n\n        if (equalSnapshots(previousSnapshot, currentSnapshot)) {\n          return true;\n        }\n\n        const binding = getYjsBinding(this.editor);\n\n        if (binding) {\n          binding.renderSnapshot(currentSnapshot, previousSnapshot);\n          return true;\n        }\n\n        return false;\n      },\n    };\n  },\n  addProseMirrorPlugins() {\n    return [\n      new Plugin({\n        key: AI_TOOLBAR_SELECTION_PLUGIN,\n        props: {\n          decorations: ({ doc, selection }) => {\n            if (this.storage.state.phase === \"closed\") {\n              return DecorationSet.create(doc, []);\n            }\n            const { from, to } = selection;\n            const decorations: Decoration[] = [\n              Decoration.inline(from, to, {\n                class: \"lb-root lb-selection lb-tiptap-active-selection\",\n              }),\n            ];\n            return DecorationSet.create(doc, decorations);\n          },\n        },\n      }),\n    ];\n  },\n});\n"],"names":[],"mappings":"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"}

package/dist/ai/AiToolbar.js

@@ -0,0 +1,540 @@
+'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
+      };
+    }
+  };
+}
+const AiToolbarDropdownGroup = react.forwardRef(({ children, label, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Group, {
+    heading: /* @__PURE__ */ jsxRuntime.jsx("span", {
+      className: "lb-dropdown-label",
+      children: label
+    }),
+    ...props,
+    ref: forwardedRef,
+    children
+  });
+});
+const AiToolbarSuggestionsGroup = react.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownGroup, {
+    ref: forwardedRef,
+    ...props
+  });
+});
+const AiToolbarDropdownItem = react.forwardRef(({ children, onSelect, icon, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Item, {
+    className: "lb-dropdown-item",
+    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 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 { prompt } = state;
+  const handleRetry = react.useCallback(() => {
+    editor.commands.$startAiToolbarThinking(prompt);
+  }, [editor, prompt]);
+  const handleDiscard = react.useCallback(() => {
+    editor.commands.$closeAiToolbar();
+  }, [editor]);
+  const handleAccept = react.useCallback(() => {
+    editor.commands.$acceptAiToolbarOutput();
+  }, [editor]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
+        icon: /* @__PURE__ */ jsxRuntime.jsx(_private.CheckIcon, {}),
+        onSelect: handleAccept,
+        children: "Replace selection"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
+        icon: /* @__PURE__ */ jsxRuntime.jsx(_private.CheckIcon, {}),
+        children: "Insert below"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
+        icon: /* @__PURE__ */ jsxRuntime.jsx(_private.UndoIcon, {}),
+        onSelect: handleRetry,
+        children: "Try again"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
+        icon: /* @__PURE__ */ jsxRuntime.jsx(_private.CrossIcon, {}),
+        onSelect: handleDiscard,
+        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
+          );
+        }
+      }
+    }
+  };
+  const handleCustomPromptChange = react.useCallback(
+    (customPrompt2) => {
+      editor.commands._updateAiToolbarCustomPrompt(
+        customPrompt2
+      );
+    },
+    [editor]
+  );
+  const handleSendClick = react.useCallback(() => {
+    if (isCustomPromptEmpty) {
+      return;
+    }
+    editor.commands.$startAiToolbarThinking(
+      customPrompt
+    );
+  }, [editor, customPrompt, isCustomPromptEmpty]);
+  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() {
+  return /* @__PURE__ */ jsxRuntime.jsx(AiToolbarCustomPromptContent, {});
+}
+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() {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /* @__PURE__ */ jsxRuntime.jsx(AiToolbarCustomPromptContent, {})
+  });
+}
+function AiToolbarContainer({
+  state,
+  toolbarRef,
+  dropdownRef,
+  children
+}) {
+  const editor = context.useCurrentEditor("AiToolbarContainer", "AiToolbar");
+  const phase = state.phase;
+  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 (phase === "thinking") {
+          editor.commands.$cancelAiToolbarThinking();
+        } else {
+          editor.chain().$closeAiToolbar().focus().run();
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [editor, 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.jsxs(AiToolbarSuggestionsGroup, {
+      label: "Modify",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AiToolbarSuggestion, {
+          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.EditIcon, {}),
+          children: "Improve writing"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(AiToolbarSuggestion, {
+          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.CheckIcon, {}),
+          children: "Fix mistakes"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(AiToolbarSuggestion, {
+          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.ShortenIcon, {}),
+          children: "Simplify"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(AiToolbarSuggestion, {
+          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.LengthenIcon, {}),
+          children: "Add more detail"
+        })
+      ]
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx(AiToolbarSuggestionsGroup, {
+      label: "Generate",
+      children: /* @__PURE__ */ jsxRuntime.jsx(AiToolbarSuggestion, {
+        icon: /* @__PURE__ */ jsxRuntime.jsx(_private.QuestionMarkIcon, {}),
+        children: "Explain"
+      })
+    })
+  ]
+});
+const AiToolbar = Object.assign(
+  react.forwardRef(
+    ({
+      position = "bottom",
+      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 phase = state.phase;
+      const floatingOptions = react.useMemo(() => {
+        const detectOverflowOptions = {
+          padding: AI_TOOLBAR_COLLISION_PADDING
+        };
+        return {
+          strategy: "fixed",
+          placement: position,
+          middleware: [
+            tiptapFloating(editor),
+            reactDom.hide(detectOverflowOptions),
+            reactDom.offset(sideOffset)
+          ],
+          whileElementsMounted: (...args) => {
+            return reactDom.autoUpdate(...args, {
+              animationFrame: true
+            });
+          }
+        };
+      }, [editor, position, 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);
+      react.useEffect(() => {
+        if (!editor) {
+          return;
+        }
+        if (!selection && phase !== "closed") {
+          editor.commands.$closeAiToolbar();
+        }
+      }, [phase, editor, selection]);
+      _private$1.useLayoutEffect(() => {
+        if (!editor || !isOpen) {
+          return;
+        }
+        setReference(null);
+        setTimeout(() => {
+          if (state.phase === "reviewing") {
+            const domRange = utils.getDomRangeFromSelection(state.contentTarget, editor);
+            setReference(domRange);
+          } else if (!selection) {
+            setReference(null);
+          } else {
+            const domRange = utils.getDomRangeFromSelection(selection, editor);
+            setReference(domRange);
+          }
+        }, 0);
+      }, [selection, editor, isOpen, state.phase, state.contentTarget, setReference]);
+      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)"
+              },
+              ...props,
+              children: /* @__PURE__ */ jsxRuntime.jsx(AiToolbarContainer, {
+                state,
+                dropdownRef,
+                toolbarRef,
+                children: typeof Suggestions === "function" ? /* @__PURE__ */ jsxRuntime.jsx(Suggestions, {
+                  children: defaultSuggestions
+                }) : Suggestions
+              })
+            })
+          })
+        }),
+        document.body
+      );
+    }
+  ),
+  {
+    SuggestionsGroup: AiToolbarSuggestionsGroup,
+    Suggestion: AiToolbarSuggestion
+  }
+);
+
+exports.AI_TOOLBAR_COLLISION_PADDING = AI_TOOLBAR_COLLISION_PADDING;
+exports.AiToolbar = AiToolbar;
+//# sourceMappingURL=AiToolbar.js.map