@liveblocks/react-tiptap 2.16.1-ai2 → 2.16.1-ai3

package/dist/ai/AiToolbar.mjs

@@ -1,15 +1,15 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { hide, offset, autoUpdate, useFloating } from '@floating-ui/react-dom';
+import { hide, offset, shift, limitShift, autoUpdate, useFloating } from '@floating-ui/react-dom';
 import { useLayoutEffect } from '@liveblocks/react/_private';
-import { CheckIcon, UndoIcon, CrossIcon, SparklesIcon, ShortcutTooltip, Button, SendIcon, EditIcon, ShortenIcon, LengthenIcon, QuestionMarkIcon, useRefs, TooltipProvider } from '@liveblocks/react-ui/_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 } from 'react';
+import { createContext, useContext, forwardRef, useCallback, useRef, useMemo, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { classNames } from '../classnames.mjs';
 import { useCurrentEditor, EditorProvider } from '../context.mjs';
-import { getDomRangeFromSelection } from '../utils.mjs';
-import { DEFAULT_STATE } from './AiExtension.mjs';
+import { getDomRange } from '../utils.mjs';
+import { isAiToolbarDiffOutput, DEFAULT_STATE } from './AiExtension.mjs';
 
 const AI_TOOLBAR_COLLISION_PADDING = 10;
 const AiToolbarContext = createContext(null);
@@ -43,26 +43,36 @@ function tiptapFloating(editor) {
     }
   };
 }
-const AiToolbarDropdownGroup = forwardRef(({ children, label, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ jsx(Command.Group, {
-    heading: /* @__PURE__ */ jsx("span", {
-      className: "lb-dropdown-label",
-      children: label
-    }),
+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 = forwardRef(({ className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Command.Separator, {
+    className: classNames("lb-dropdown-separator", className),
     ...props,
-    ref: forwardedRef,
-    children
+    ref: forwardedRef
   });
 });
-const AiToolbarSuggestionsGroup = forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(AiToolbarDropdownGroup, {
+const AiToolbarSuggestionsSeparator = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(AiToolbarDropdownSeparator, {
     ref: forwardedRef,
     ...props
   });
 });
-const AiToolbarDropdownItem = forwardRef(({ children, onSelect, icon, ...props }, forwardedRef) => {
+const AiToolbarDropdownItem = forwardRef(({ children, onSelect, icon, className, ...props }, forwardedRef) => {
   return /* @__PURE__ */ jsxs(Command.Item, {
-    className: "lb-dropdown-item",
+    className: classNames("lb-dropdown-item", className),
     onSelect,
     ...props,
     ref: forwardedRef,
@@ -78,6 +88,14 @@ const AiToolbarDropdownItem = forwardRef(({ children, onSelect, icon, ...props }
     ]
   });
 });
+const AiToolbarSuggestionsLabel = forwardRef(({ children, className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsx("span", {
+    ref: forwardedRef,
+    className: classNames("lb-dropdown-label", className),
+    ...props,
+    children
+  });
+});
 const AiToolbarSuggestion = forwardRef(({ prompt: manualPrompt, ...props }, forwardedRef) => {
   const editor = useCurrentEditor("Suggestion", "AiToolbar");
   const handleSelect = useCallback(
@@ -97,62 +115,56 @@ const AiToolbarSuggestion = forwardRef(({ prompt: manualPrompt, ...props }, forw
 function AiToolbarReviewingSuggestions() {
   const editor = useCurrentEditor("ReviewingSuggestions", "AiToolbar");
   const { state } = useAiToolbarContext();
-  const { output } = state;
-  const handleDiscard = useCallback(() => {
-    editor.commands.$closeAiToolbar();
-  }, [editor]);
-  const handleAccept = useCallback(() => {
-    editor.commands.$acceptAiToolbarOutput();
-  }, [editor]);
-  if (output.type === "insert" || output.type === "modification") {
+  const { prompt, output } = state;
+  const retry = useCallback(() => {
+    editor.commands.$startAiToolbarThinking(
+      prompt,
+      false
+    );
+  }, [editor, prompt]);
+  if (isAiToolbarDiffOutput(output)) {
     return /* @__PURE__ */ jsxs(Fragment, {
       children: [
         /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
           icon: /* @__PURE__ */ jsx(CheckIcon, {}),
-          onSelect: handleAccept,
+          onSelect: editor.commands.$acceptAiToolbarOutput,
           children: "Accept"
         }),
         /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
           icon: /* @__PURE__ */ jsx(UndoIcon, {}),
-          disabled: true,
+          onSelect: retry,
           children: "Try again"
         }),
         /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
           icon: /* @__PURE__ */ jsx(CrossIcon, {}),
-          onSelect: handleDiscard,
+          onSelect: editor.commands.$closeAiToolbar,
           children: "Discard"
         })
       ]
     });
-  } else if (output.type === "other") {
+  } else {
     return /* @__PURE__ */ jsxs(Fragment, {
       children: [
         /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
-          icon: /* @__PURE__ */ jsx(CheckIcon, {}),
-          disabled: true,
-          children: "Replace selection"
-        }),
-        /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
-          icon: /* @__PURE__ */ jsx(CheckIcon, {}),
-          disabled: true,
+          icon: /* @__PURE__ */ jsx(ArrowCornerDownRightIcon, {}),
+          onSelect: editor.commands.$acceptAiToolbarOutput,
           children: "Insert below"
         }),
         /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
           icon: /* @__PURE__ */ jsx(UndoIcon, {}),
-          disabled: true,
+          onSelect: retry,
           children: "Try again"
         }),
         /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
           icon: /* @__PURE__ */ jsx(CrossIcon, {}),
-          onSelect: handleDiscard,
+          onSelect: editor.commands.$closeAiToolbar,
           children: "Discard"
         })
       ]
     });
   }
-  return null;
 }
-function AiToolbarCustomPromptContent({ disabled }) {
+function AiToolbarCustomPromptContent() {
   const editor = useCurrentEditor("CustomPromptContent", "AiToolbar");
   const aiName = editor.storage.liveblocksAi.name;
   const textAreaRef = useRef(null);
@@ -194,7 +206,8 @@ function AiToolbarCustomPromptContent({ disabled }) {
           selectedDropdownItem.click();
         } else if (!isCustomPromptEmpty) {
           editor.commands.$startAiToolbarThinking(
-            customPrompt
+            customPrompt,
+            state.phase === "reviewing"
           );
         }
       }
@@ -213,9 +226,10 @@ function AiToolbarCustomPromptContent({ disabled }) {
       return;
     }
     editor.commands.$startAiToolbarThinking(
-      customPrompt
+      customPrompt,
+      state.phase === "reviewing"
     );
-  }, [editor, customPrompt, isCustomPromptEmpty]);
+  }, [editor, customPrompt, isCustomPromptEmpty, state.phase]);
   return /* @__PURE__ */ jsxs("div", {
     className: "lb-tiptap-ai-toolbar-content",
     children: [
@@ -236,8 +250,7 @@ function AiToolbarCustomPromptContent({ disabled }) {
             placeholder: `Ask ${aiName} anything\u2026`,
             onKeyDown: handlePromptKeyDown,
             rows: 1,
-            autoFocus: true,
-            disabled
+            autoFocus: true
           })
         })
       }),
@@ -251,7 +264,7 @@ function AiToolbarCustomPromptContent({ disabled }) {
             variant: "primary",
             "aria-label": `Ask ${aiName}`,
             icon: /* @__PURE__ */ jsx(SendIcon, {}),
-            disabled: isCustomPromptEmpty || disabled,
+            disabled: isCustomPromptEmpty,
             onClick: handleSendClick
           })
         })
@@ -260,7 +273,23 @@ function AiToolbarCustomPromptContent({ disabled }) {
   });
 }
 function AiToolbarAsking() {
-  return /* @__PURE__ */ jsx(AiToolbarCustomPromptContent, {});
+  const { state } = useAiToolbarContext();
+  const { error } = state;
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx(AiToolbarCustomPromptContent, {}),
+      error ? /* @__PURE__ */ jsxs("div", {
+        className: "lb-tiptap-ai-toolbar-error",
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: "lb-icon-container",
+            children: /* @__PURE__ */ jsx(WarningIcon, {})
+          }),
+          "There was a problem with your request."
+        ]
+      }) : null
+    ]
+  });
 }
 function AiToolbarThinking() {
   const editor = useCurrentEditor("AiToolbarThinking", "AiToolbar");
@@ -320,9 +349,7 @@ function AiToolbarReviewing() {
           children: output.text
         })
       }) : null,
-      /* @__PURE__ */ jsx(AiToolbarCustomPromptContent, {
-        disabled: true
-      })
+      /* @__PURE__ */ jsx(AiToolbarCustomPromptContent, {})
     ]
   });
 }
@@ -363,7 +390,12 @@ function AiToolbarContainer({
     };
   }, [editor, state.phase]);
   return /* @__PURE__ */ jsxs(AiToolbarContext.Provider, {
-    value: { state, toolbarRef, dropdownRef, isDropdownHidden },
+    value: {
+      state,
+      toolbarRef,
+      dropdownRef,
+      isDropdownHidden
+    },
     children: [
       /* @__PURE__ */ jsxs("div", {
         className: "lb-tiptap-ai-toolbar-container",
@@ -398,40 +430,42 @@ function AiToolbarContainer({
 }
 const defaultSuggestions = /* @__PURE__ */ jsxs(Fragment, {
   children: [
-    /* @__PURE__ */ jsxs(AiToolbarSuggestionsGroup, {
-      label: "Modify",
-      children: [
-        /* @__PURE__ */ jsx(AiToolbarSuggestion, {
-          icon: /* @__PURE__ */ jsx(EditIcon, {}),
-          children: "Improve writing"
-        }),
-        /* @__PURE__ */ jsx(AiToolbarSuggestion, {
-          icon: /* @__PURE__ */ jsx(CheckIcon, {}),
-          children: "Fix mistakes"
-        }),
-        /* @__PURE__ */ jsx(AiToolbarSuggestion, {
-          icon: /* @__PURE__ */ jsx(ShortenIcon, {}),
-          children: "Simplify"
-        }),
-        /* @__PURE__ */ jsx(AiToolbarSuggestion, {
-          icon: /* @__PURE__ */ jsx(LengthenIcon, {}),
-          children: "Add more detail"
-        })
-      ]
+    /* @__PURE__ */ jsx(AiToolbarSuggestion, {
+      icon: /* @__PURE__ */ jsx(EditIcon, {}),
+      prompt: "Improve the quality of the text",
+      children: "Improve writing"
     }),
-    /* @__PURE__ */ jsx(AiToolbarSuggestionsGroup, {
-      label: "Generate",
-      children: /* @__PURE__ */ jsx(AiToolbarSuggestion, {
-        icon: /* @__PURE__ */ jsx(QuestionMarkIcon, {}),
-        children: "Explain"
-      })
+    /* @__PURE__ */ jsx(AiToolbarSuggestion, {
+      icon: /* @__PURE__ */ jsx(CheckIcon, {}),
+      prompt: "Fix spelling & grammar errors in the text",
+      children: "Fix mistakes"
+    }),
+    /* @__PURE__ */ jsx(AiToolbarSuggestion, {
+      icon: /* @__PURE__ */ jsx(ShortenIcon, {}),
+      prompt: "Shorten the text, simplifying it",
+      children: "Simplify"
+    }),
+    /* @__PURE__ */ jsx(AiToolbarSuggestion, {
+      icon: /* @__PURE__ */ jsx(LengthenIcon, {}),
+      prompt: "Lengthen the text, going into more detail",
+      children: "Add more detail"
+    }),
+    /* @__PURE__ */ jsx(AiToolbarSuggestionsSeparator, {}),
+    /* @__PURE__ */ jsx(AiToolbarSuggestion, {
+      icon: /* @__PURE__ */ jsx(SparklesTextIcon, {}),
+      prompt: "Continue writing from the text's end",
+      children: "Continue writing"
+    }),
+    /* @__PURE__ */ jsx(AiToolbarSuggestion, {
+      icon: /* @__PURE__ */ jsx(QuestionMarkIcon, {}),
+      prompt: "Explain what the text is about",
+      children: "Explain"
     })
   ]
 });
 const AiToolbar = Object.assign(
   forwardRef(
     ({
-      position = "bottom",
       offset: sideOffset = 6,
       editor,
       className,
@@ -444,18 +478,25 @@ const AiToolbar = Object.assign(
           return ctx.editor?.storage.liveblocksAi?.state;
         }
       }) ?? DEFAULT_STATE;
-      const selection = state.selection ?? editor?.state.selection;
+      const selection = editor?.state.selection;
       const floatingOptions = useMemo(() => {
         const detectOverflowOptions = {
           padding: AI_TOOLBAR_COLLISION_PADDING
         };
         return {
           strategy: "fixed",
-          placement: position,
+          placement: "bottom",
           middleware: [
             tiptapFloating(editor),
             hide(detectOverflowOptions),
-            offset(sideOffset)
+            offset(sideOffset),
+            shift({
+              ...detectOverflowOptions,
+              mainAxis: false,
+              crossAxis: true,
+              limiter: limitShift()
+            }),
+            flipToolbar()
           ],
           whileElementsMounted: (...args) => {
             return autoUpdate(...args, {
@@ -463,7 +504,7 @@ const AiToolbar = Object.assign(
             });
           }
         };
-      }, [editor, position, sideOffset]);
+      }, [editor, sideOffset]);
       const isOpen = selection !== void 0 && state.phase !== "closed";
       const {
         refs: { setReference, setFloating },
@@ -478,6 +519,28 @@ const AiToolbar = Object.assign(
       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]);
+      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]);
       useEffect(() => {
         if (!editor) {
           return;
@@ -492,14 +555,40 @@ const AiToolbar = Object.assign(
         }
         setReference(null);
         setTimeout(() => {
-          if (!selection) {
-            setReference(null);
-          } else {
-            const domRange = getDomRangeFromSelection(selection, editor);
+          if (state.phase === "reviewing" && isAiToolbarDiffOutput(state.output)) {
+            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 = getDomRange(editor, selection);
             setReference(domRange);
+          } else {
+            setReference(null);
           }
         }, 0);
-      }, [selection, editor, isOpen, setReference]);
+      }, [selection, editor, isOpen, setReference, state.phase, state.output]);
       useEffect(() => {
         if (!editor || !isOpen) {
           return;
@@ -541,6 +630,8 @@ const AiToolbar = Object.assign(
                 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__ */ jsx(AiToolbarContainer, {
                 state,
@@ -558,8 +649,9 @@ const AiToolbar = Object.assign(
     }
   ),
   {
-    SuggestionsGroup: AiToolbarSuggestionsGroup,
-    Suggestion: AiToolbarSuggestion
+    Suggestion: AiToolbarSuggestion,
+    SuggestionsLabel: AiToolbarSuggestionsLabel,
+    SuggestionsSeparator: AiToolbarSuggestionsSeparator
   }
 );