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

package/dist/ai/AiToolbar.js

@@ -45,26 +45,36 @@ function tiptapFloating(editor) {
     }
   };
 }
-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
-    }),
+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,
-    children
+    ref: forwardedRef
   });
 });
-const AiToolbarSuggestionsGroup = react.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownGroup, {
+const AiToolbarSuggestionsSeparator = react.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownSeparator, {
     ref: forwardedRef,
     ...props
   });
 });
-const AiToolbarDropdownItem = react.forwardRef(({ children, onSelect, icon, ...props }, forwardedRef) => {
+const AiToolbarDropdownItem = react.forwardRef(({ children, onSelect, icon, className, ...props }, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Item, {
-    className: "lb-dropdown-item",
+    className: classnames.classNames("lb-dropdown-item", className),
     onSelect,
     ...props,
     ref: forwardedRef,
@@ -80,6 +90,14 @@ const AiToolbarDropdownItem = react.forwardRef(({ children, onSelect, icon, ...p
     ]
   });
 });
+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(
@@ -99,62 +117,50 @@ const AiToolbarSuggestion = react.forwardRef(({ prompt: manualPrompt, ...props }
 function AiToolbarReviewingSuggestions() {
   const editor = context.useCurrentEditor("ReviewingSuggestions", "AiToolbar");
   const { state } = useAiToolbarContext();
-  const { output } = state;
-  const handleDiscard = react.useCallback(() => {
-    editor.commands.$closeAiToolbar();
-  }, [editor]);
-  const handleAccept = react.useCallback(() => {
-    editor.commands.$acceptAiToolbarOutput();
-  }, [editor]);
-  if (output.type === "insert" || output.type === "modification") {
+  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: handleAccept,
+          onSelect: editor.commands.$acceptAiToolbarResponse,
           children: "Accept"
         }),
         /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
           icon: /* @__PURE__ */ jsxRuntime.jsx(_private.UndoIcon, {}),
-          disabled: true,
+          onSelect: editor.commands.$startAiToolbarThinking,
           children: "Try again"
         }),
         /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
           icon: /* @__PURE__ */ jsxRuntime.jsx(_private.CrossIcon, {}),
-          onSelect: handleDiscard,
+          onSelect: editor.commands.$closeAiToolbar,
           children: "Discard"
         })
       ]
     });
-  } else if (output.type === "other") {
+  } else {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.CheckIcon, {}),
-          disabled: true,
-          children: "Replace selection"
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.CheckIcon, {}),
-          disabled: true,
+          icon: /* @__PURE__ */ jsxRuntime.jsx(_private.ArrowCornerDownRightIcon, {}),
+          onSelect: editor.commands.$acceptAiToolbarResponse,
           children: "Insert below"
         }),
         /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
           icon: /* @__PURE__ */ jsxRuntime.jsx(_private.UndoIcon, {}),
-          disabled: true,
+          onSelect: editor.commands.$startAiToolbarThinking,
           children: "Try again"
         }),
         /* @__PURE__ */ jsxRuntime.jsx(AiToolbarDropdownItem, {
           icon: /* @__PURE__ */ jsxRuntime.jsx(_private.CrossIcon, {}),
-          onSelect: handleDiscard,
+          onSelect: editor.commands.$closeAiToolbar,
           children: "Discard"
         })
       ]
     });
   }
-  return null;
 }
-function AiToolbarCustomPromptContent({ disabled }) {
+function AiToolbarCustomPromptContent() {
   const editor = context.useCurrentEditor("CustomPromptContent", "AiToolbar");
   const aiName = editor.storage.liveblocksAi.name;
   const textAreaRef = react.useRef(null);
@@ -196,7 +202,8 @@ function AiToolbarCustomPromptContent({ disabled }) {
           selectedDropdownItem.click();
         } else if (!isCustomPromptEmpty) {
           editor.commands.$startAiToolbarThinking(
-            customPrompt
+            customPrompt,
+            state.phase === "reviewing"
           );
         }
       }
@@ -215,9 +222,10 @@ function AiToolbarCustomPromptContent({ disabled }) {
       return;
     }
     editor.commands.$startAiToolbarThinking(
-      customPrompt
+      customPrompt,
+      state.phase === "reviewing"
     );
-  }, [editor, customPrompt, isCustomPromptEmpty]);
+  }, [editor, customPrompt, isCustomPromptEmpty, state.phase]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     className: "lb-tiptap-ai-toolbar-content",
     children: [
@@ -238,8 +246,7 @@ function AiToolbarCustomPromptContent({ disabled }) {
             placeholder: `Ask ${aiName} anything\u2026`,
             onKeyDown: handlePromptKeyDown,
             rows: 1,
-            autoFocus: true,
-            disabled
+            autoFocus: true
           })
         })
       }),
@@ -253,7 +260,7 @@ function AiToolbarCustomPromptContent({ disabled }) {
             variant: "primary",
             "aria-label": `Ask ${aiName}`,
             icon: /* @__PURE__ */ jsxRuntime.jsx(_private.SendIcon, {}),
-            disabled: isCustomPromptEmpty || disabled,
+            disabled: isCustomPromptEmpty,
             onClick: handleSendClick
           })
         })
@@ -262,7 +269,23 @@ function AiToolbarCustomPromptContent({ disabled }) {
   });
 }
 function AiToolbarAsking() {
-  return /* @__PURE__ */ jsxRuntime.jsx(AiToolbarCustomPromptContent, {});
+  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");
@@ -312,19 +335,17 @@ function AiToolbarThinking() {
 }
 function AiToolbarReviewing() {
   const { state } = useAiToolbarContext();
-  const { output } = state;
+  const { response } = state;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [
-      output.type === "other" ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: "lb-tiptap-ai-toolbar-output-container",
+      response.type === "other" ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: "lb-tiptap-ai-toolbar-response-container",
         children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-          className: "lb-tiptap-ai-toolbar-output",
-          children: output.text
+          className: "lb-tiptap-ai-toolbar-response",
+          children: response.text
         })
       }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx(AiToolbarCustomPromptContent, {
-        disabled: true
-      })
+      /* @__PURE__ */ jsxRuntime.jsx(AiToolbarCustomPromptContent, {})
     ]
   });
 }
@@ -365,7 +386,12 @@ function AiToolbarContainer({
     };
   }, [editor, state.phase]);
   return /* @__PURE__ */ jsxRuntime.jsxs(AiToolbarContext.Provider, {
-    value: { state, toolbarRef, dropdownRef, isDropdownHidden },
+    value: {
+      state,
+      toolbarRef,
+      dropdownRef,
+      isDropdownHidden
+    },
     children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", {
         className: "lb-tiptap-ai-toolbar-container",
@@ -400,40 +426,42 @@ function AiToolbarContainer({
 }
 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(AiToolbarSuggestion, {
+      icon: /* @__PURE__ */ jsxRuntime.jsx(_private.EditIcon, {}),
+      prompt: "Improve the quality of the text",
+      children: "Improve writing"
     }),
-    /* @__PURE__ */ jsxRuntime.jsx(AiToolbarSuggestionsGroup, {
-      label: "Generate",
-      children: /* @__PURE__ */ jsxRuntime.jsx(AiToolbarSuggestion, {
-        icon: /* @__PURE__ */ jsxRuntime.jsx(_private.QuestionMarkIcon, {}),
-        children: "Explain"
-      })
+    /* @__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(
     ({
-      position = "bottom",
       offset: sideOffset = 6,
       editor,
       className,
@@ -446,18 +474,25 @@ const AiToolbar = Object.assign(
           return ctx.editor?.storage.liveblocksAi?.state;
         }
       }) ?? AiExtension.DEFAULT_STATE;
-      const selection = state.selection ?? editor?.state.selection;
+      const selection = editor?.state.selection;
       const floatingOptions = react.useMemo(() => {
         const detectOverflowOptions = {
           padding: AI_TOOLBAR_COLLISION_PADDING
         };
         return {
           strategy: "fixed",
-          placement: position,
+          placement: "bottom",
           middleware: [
             tiptapFloating(editor),
             reactDom.hide(detectOverflowOptions),
-            reactDom.offset(sideOffset)
+            reactDom.offset(sideOffset),
+            reactDom.shift({
+              ...detectOverflowOptions,
+              mainAxis: false,
+              crossAxis: true,
+              limiter: reactDom.limitShift()
+            }),
+            flipToolbar()
           ],
           whileElementsMounted: (...args) => {
             return reactDom.autoUpdate(...args, {
@@ -465,7 +500,7 @@ const AiToolbar = Object.assign(
             });
           }
         };
-      }, [editor, position, sideOffset]);
+      }, [editor, sideOffset]);
       const isOpen = selection !== void 0 && state.phase !== "closed";
       const {
         refs: { setReference, setFloating },
@@ -480,6 +515,28 @@ const AiToolbar = Object.assign(
       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;
@@ -494,14 +551,47 @@ const AiToolbar = Object.assign(
         }
         setReference(null);
         setTimeout(() => {
-          if (!selection) {
-            setReference(null);
-          } else {
-            const domRange = utils.getDomRangeFromSelection(selection, editor);
+          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]);
+      }, [
+        selection,
+        editor,
+        isOpen,
+        setReference,
+        state.phase,
+        state.response
+      ]);
       react.useEffect(() => {
         if (!editor || !isOpen) {
           return;
@@ -543,6 +633,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__ */ jsxRuntime.jsx(AiToolbarContainer, {
                 state,
@@ -560,8 +652,9 @@ const AiToolbar = Object.assign(
     }
   ),
   {
-    SuggestionsGroup: AiToolbarSuggestionsGroup,
-    Suggestion: AiToolbarSuggestion
+    Suggestion: AiToolbarSuggestion,
+    SuggestionsLabel: AiToolbarSuggestionsLabel,
+    SuggestionsSeparator: AiToolbarSuggestionsSeparator
   }
 );