@liveblocks/react-tiptap 2.17.0-usrnotsettings3 → 2.18.0

package/dist/ai/AiToolbar.mjs

@@ -0,0 +1,660 @@
+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.mjs';
+import { useCurrentEditor, EditorProvider } from '../context.mjs';
+import { getDomRangeFromSelection } from '../utils.mjs';
+import { isContextualPromptDiffResponse, DEFAULT_STATE } from './AiExtension.mjs';
+
+const AI_TOOLBAR_COLLISION_PADDING = 10;
+const AiToolbarContext = createContext(null);
+function useAiToolbarContext() {
+  const context = useContext(AiToolbarContext);
+  if (!context) {
+    throw new Error("useAiToolbarContext must be used within an AiToolbar");
+  }
+  return context;
+}
+function tiptapFloating(editor) {
+  return {
+    name: "tiptap",
+    options: editor,
+    fn({ elements }) {
+      if (!editor) {
+        return {};
+      }
+      const editorRect = editor.view.dom.getBoundingClientRect();
+      elements.floating.style.setProperty(
+        "--lb-tiptap-editor-width",
+        `${editorRect.width}px`
+      );
+      elements.floating.style.setProperty(
+        "--lb-tiptap-editor-height",
+        `${editorRect.height}px`
+      );
+      return {
+        x: editorRect.x
+      };
+    }
+  };
+}
+function flipToolbar() {
+  return {
+    name: "flipToolbar",
+    fn({ elements, middlewareData, rects }) {
+      const shiftOffsetY = middlewareData.shift?.y ?? 0;
+      if (Math.abs(shiftOffsetY) >= rects.floating.height) {
+        elements.floating.setAttribute("data-liveblocks-ai-toolbar-flip", "");
+      } else {
+        elements.floating.removeAttribute("data-liveblocks-ai-toolbar-flip");
+      }
+      return {};
+    }
+  };
+}
+const AiToolbarDropdownSeparator = forwardRef(({ className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Command.Separator, {
+    className: classNames("lb-dropdown-separator", className),
+    ...props,
+    ref: forwardedRef
+  });
+});
+const AiToolbarSuggestionsSeparator = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(AiToolbarDropdownSeparator, {
+    ref: forwardedRef,
+    ...props
+  });
+});
+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__ */ jsx("span", {
+        className: "lb-icon-container",
+        children: icon
+      }) : null,
+      children ? /* @__PURE__ */ jsx("span", {
+        className: "lb-dropdown-item-label",
+        children
+      }) : null
+    ]
+  });
+});
+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(
+    (prompt) => {
+      editor.commands.$startAiToolbarThinking(
+        manualPrompt ?? prompt
+      );
+    },
+    [editor, manualPrompt]
+  );
+  return /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
+    ...props,
+    onSelect: handleSelect,
+    ref: forwardedRef
+  });
+});
+function AiToolbarReviewingSuggestions() {
+  const editor = useCurrentEditor("ReviewingSuggestions", "AiToolbar");
+  const { state } = useAiToolbarContext();
+  const { response } = state;
+  if (isContextualPromptDiffResponse(response)) {
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
+          icon: /* @__PURE__ */ jsx(CheckIcon, {}),
+          onSelect: editor.commands.$acceptAiToolbarResponse,
+          children: "Accept"
+        }),
+        /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
+          icon: /* @__PURE__ */ jsx(UndoIcon, {}),
+          onSelect: editor.commands.$startAiToolbarThinking,
+          children: "Try again"
+        }),
+        /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
+          icon: /* @__PURE__ */ jsx(CrossIcon, {}),
+          onSelect: editor.commands.$closeAiToolbar,
+          children: "Discard"
+        })
+      ]
+    });
+  } else {
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
+          icon: /* @__PURE__ */ jsx(ArrowCornerDownRightIcon, {}),
+          onSelect: editor.commands.$acceptAiToolbarResponse,
+          children: "Insert below"
+        }),
+        /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
+          icon: /* @__PURE__ */ jsx(UndoIcon, {}),
+          onSelect: editor.commands.$startAiToolbarThinking,
+          children: "Try again"
+        }),
+        /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
+          icon: /* @__PURE__ */ jsx(CrossIcon, {}),
+          onSelect: editor.commands.$closeAiToolbar,
+          children: "Discard"
+        })
+      ]
+    });
+  }
+}
+function AiToolbarCustomPromptContent() {
+  const editor = useCurrentEditor("CustomPromptContent", "AiToolbar");
+  const aiName = editor.storage.liveblocksAi.name;
+  const textAreaRef = useRef(null);
+  const { state, dropdownRef, isDropdownHidden } = useAiToolbarContext();
+  const { customPrompt } = state;
+  const isCustomPromptEmpty = useMemo(
+    () => customPrompt.trim() === "",
+    [customPrompt]
+  );
+  useLayoutEffect(
+    () => {
+      setTimeout(() => {
+        const textArea = textAreaRef.current;
+        if (!textArea) {
+          return;
+        }
+        textArea.focus();
+        textArea.setSelectionRange(
+          textArea.value.length,
+          textArea.value.length
+        );
+      }, 0);
+    },
+    []
+  );
+  const handlePromptKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.shiftKey) {
+        editor.commands._updateAiToolbarCustomPrompt(
+          (customPrompt2) => customPrompt2 + "\n"
+        );
+      } else {
+        const selectedDropdownItem = dropdownRef.current?.querySelector(
+          "[role='option'][data-selected='true']"
+        );
+        if (!isDropdownHidden && selectedDropdownItem) {
+          selectedDropdownItem.click();
+        } else if (!isCustomPromptEmpty) {
+          editor.commands.$startAiToolbarThinking(
+            customPrompt,
+            state.phase === "reviewing"
+          );
+        }
+      }
+    }
+  };
+  const handleCustomPromptChange = useCallback(
+    (customPrompt2) => {
+      editor.commands._updateAiToolbarCustomPrompt(
+        customPrompt2
+      );
+    },
+    [editor]
+  );
+  const handleSendClick = useCallback(() => {
+    if (isCustomPromptEmpty) {
+      return;
+    }
+    editor.commands.$startAiToolbarThinking(
+      customPrompt,
+      state.phase === "reviewing"
+    );
+  }, [editor, customPrompt, isCustomPromptEmpty, state.phase]);
+  return /* @__PURE__ */ jsxs("div", {
+    className: "lb-tiptap-ai-toolbar-content",
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        className: "lb-icon-container lb-tiptap-ai-toolbar-icon-container",
+        children: /* @__PURE__ */ jsx(SparklesIcon, {})
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "lb-tiptap-ai-toolbar-custom-prompt-container",
+        "data-value": customPrompt,
+        children: /* @__PURE__ */ jsx(Command.Input, {
+          value: customPrompt,
+          onValueChange: handleCustomPromptChange,
+          asChild: true,
+          children: /* @__PURE__ */ jsx("textarea", {
+            ref: textAreaRef,
+            className: "lb-tiptap-ai-toolbar-custom-prompt",
+            placeholder: `Ask ${aiName} anything\u2026`,
+            onKeyDown: handlePromptKeyDown,
+            rows: 1,
+            autoFocus: true
+          })
+        })
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "lb-tiptap-ai-toolbar-actions",
+        children: /* @__PURE__ */ jsx(ShortcutTooltip, {
+          content: `Ask ${aiName}`,
+          shortcut: "Enter",
+          children: /* @__PURE__ */ jsx(Button, {
+            className: "lb-tiptap-ai-toolbar-action",
+            variant: "primary",
+            "aria-label": `Ask ${aiName}`,
+            icon: /* @__PURE__ */ jsx(SendIcon, {}),
+            disabled: isCustomPromptEmpty,
+            onClick: handleSendClick
+          })
+        })
+      })
+    ]
+  });
+}
+function AiToolbarAsking() {
+  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");
+  const contentRef = useRef(null);
+  const aiName = editor.storage.liveblocksAi.name;
+  const handleCancel = useCallback(() => {
+    editor.commands.$cancelAiToolbarThinking();
+  }, [editor]);
+  useLayoutEffect(() => {
+    contentRef.current?.focus();
+    window.getSelection()?.removeAllRanges();
+  }, []);
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsxs("div", {
+      className: "lb-tiptap-ai-toolbar-content",
+      tabIndex: 0,
+      ref: contentRef,
+      children: [
+        /* @__PURE__ */ jsx("span", {
+          className: "lb-icon-container lb-tiptap-ai-toolbar-icon-container",
+          children: /* @__PURE__ */ jsx(SparklesIcon, {})
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          className: "lb-tiptap-ai-toolbar-thinking",
+          children: [
+            aiName,
+            " is thinking\u2026"
+          ]
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: "lb-tiptap-ai-toolbar-actions",
+          children: /* @__PURE__ */ jsx(ShortcutTooltip, {
+            content: "Cancel",
+            shortcut: "Escape",
+            children: /* @__PURE__ */ jsx(Button, {
+              className: "lb-tiptap-ai-toolbar-action",
+              variant: "secondary",
+              "aria-label": "Cancel",
+              icon: /* @__PURE__ */ jsx(UndoIcon, {}),
+              onClick: handleCancel
+            })
+          })
+        })
+      ]
+    })
+  });
+}
+function AiToolbarReviewing() {
+  const { state } = useAiToolbarContext();
+  const { response } = state;
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      response.type === "other" ? /* @__PURE__ */ jsx("div", {
+        className: "lb-tiptap-ai-toolbar-response-container",
+        children: /* @__PURE__ */ jsx("div", {
+          className: "lb-tiptap-ai-toolbar-response",
+          children: response.text
+        })
+      }) : null,
+      /* @__PURE__ */ jsx(AiToolbarCustomPromptContent, {})
+    ]
+  });
+}
+function AiToolbarContainer({
+  state,
+  toolbarRef,
+  dropdownRef,
+  children
+}) {
+  const editor = useCurrentEditor("AiToolbarContainer", "AiToolbar");
+  const customPrompt = state.customPrompt;
+  const isCustomPromptMultiline = useMemo(
+    () => customPrompt?.includes("\n"),
+    [customPrompt]
+  );
+  const hasDropdownItems = useCommandState(
+    (state2) => state2.filtered.count > 0
+  );
+  const isDropdownHidden = isCustomPromptMultiline || !hasDropdownItems;
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (!event.defaultPrevented && event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        if (state.phase === "thinking") {
+          editor.commands.$cancelAiToolbarThinking();
+        } else {
+          editor.chain().$closeAiToolbar().focus().run();
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [editor, state.phase]);
+  return /* @__PURE__ */ jsxs(AiToolbarContext.Provider, {
+    value: {
+      state,
+      toolbarRef,
+      dropdownRef,
+      isDropdownHidden
+    },
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "lb-tiptap-ai-toolbar-container",
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            className: "lb-elevation lb-tiptap-ai-toolbar",
+            children: state.phase === "asking" ? /* @__PURE__ */ jsx(AiToolbarAsking, {}) : state.phase === "thinking" ? /* @__PURE__ */ jsx(AiToolbarThinking, {}) : state.phase === "reviewing" ? /* @__PURE__ */ jsx(AiToolbarReviewing, {}) : null
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "lb-tiptap-ai-toolbar-halo",
+            "data-active": state.phase === "thinking" ? "" : void 0,
+            "aria-hidden": true,
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                className: "lb-tiptap-ai-toolbar-halo-horizontal"
+              }),
+              /* @__PURE__ */ jsx("div", {
+                className: "lb-tiptap-ai-toolbar-halo-vertical"
+              })
+            ]
+          })
+        ]
+      }),
+      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__ */ jsx(AiToolbarReviewingSuggestions, {}) : children
+      }) : null
+    ]
+  });
+}
+const defaultSuggestions = /* @__PURE__ */ jsxs(Fragment, {
+  children: [
+    /* @__PURE__ */ jsx(AiToolbarSuggestion, {
+      icon: /* @__PURE__ */ jsx(EditIcon, {}),
+      prompt: "Improve the quality of the text",
+      children: "Improve writing"
+    }),
+    /* @__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(
+    ({
+      offset: sideOffset = 6,
+      editor,
+      className,
+      suggestions: Suggestions = defaultSuggestions,
+      ...props
+    }, forwardedRef) => {
+      const state = useEditorState({
+        editor,
+        selector: (ctx) => {
+          return ctx.editor?.storage.liveblocksAi?.state;
+        }
+      }) ?? DEFAULT_STATE;
+      const selection = editor?.state.selection;
+      const floatingOptions = useMemo(() => {
+        const detectOverflowOptions = {
+          padding: AI_TOOLBAR_COLLISION_PADDING
+        };
+        return {
+          strategy: "fixed",
+          placement: "bottom",
+          middleware: [
+            tiptapFloating(editor),
+            hide(detectOverflowOptions),
+            offset(sideOffset),
+            shift({
+              ...detectOverflowOptions,
+              mainAxis: false,
+              crossAxis: true,
+              limiter: limitShift()
+            }),
+            flipToolbar()
+          ],
+          whileElementsMounted: (...args) => {
+            return autoUpdate(...args, {
+              animationFrame: true
+            });
+          }
+        };
+      }, [editor, sideOffset]);
+      const isOpen = selection !== void 0 && state.phase !== "closed";
+      const {
+        refs: { setReference, setFloating },
+        strategy,
+        x,
+        y,
+        isPositioned
+      } = useFloating({
+        ...floatingOptions,
+        open: isOpen
+      });
+      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;
+        }
+        if (!selection && state.phase !== "closed") {
+          editor.commands.$closeAiToolbar();
+        }
+      }, [state.phase, editor, selection]);
+      useLayoutEffect(() => {
+        if (!editor || !isOpen) {
+          return;
+        }
+        setReference(null);
+        setTimeout(() => {
+          if (state.phase === "reviewing" && 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 = getDomRangeFromSelection(editor, selection);
+            setReference(domRange);
+          } else {
+            setReference(null);
+          }
+        }, 0);
+      }, [
+        selection,
+        editor,
+        isOpen,
+        setReference,
+        state.phase,
+        state.response
+      ]);
+      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 createPortal(
+        /* @__PURE__ */ jsx(TooltipProvider, {
+          children: /* @__PURE__ */ jsx(EditorProvider, {
+            editor,
+            children: /* @__PURE__ */ jsx(Command, {
+              role: "toolbar",
+              label: "AI toolbar",
+              "aria-orientation": "horizontal",
+              className: classNames(
+                "lb-root lb-portal lb-tiptap-ai-toolbar-portal",
+                className
+              ),
+              ref: mergedRefs,
+              style: {
+                position: strategy,
+                top: 0,
+                left: 0,
+                transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)"
+              },
+              value: selectedDropdownValue,
+              onValueChange: setSelectedDropdownValue,
+              ...props,
+              children: /* @__PURE__ */ jsx(AiToolbarContainer, {
+                state,
+                dropdownRef,
+                toolbarRef,
+                children: typeof Suggestions === "function" ? /* @__PURE__ */ jsx(Suggestions, {
+                  children: defaultSuggestions
+                }) : Suggestions
+              })
+            })
+          })
+        }),
+        document.body
+      );
+    }
+  ),
+  {
+    Suggestion: AiToolbarSuggestion,
+    SuggestionsLabel: AiToolbarSuggestionsLabel,
+    SuggestionsSeparator: AiToolbarSuggestionsSeparator
+  }
+);
+
+export { AI_TOOLBAR_COLLISION_PADDING, AiToolbar };
+//# sourceMappingURL=AiToolbar.mjs.map