@copilotkit/react-textarea 0.28.0-alpha.1 → 0.28.0-alpha.2

package/dist/components/hovering-toolbar/hovering-toolbar.js

@@ -0,0 +1,842 @@
+'use strict';
+
+var React = require('react');
+var slate = require('slate');
+var slateReact = require('slate-react');
+var cmdk = require('cmdk');
+var clsx = require('clsx');
+var nanoid = require('nanoid');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var LabelPrimitive = require('@radix-ui/react-label');
+var reactCore = require('@copilotkit/react-core');
+var Chip = require('@mui/material/Chip/Chip.js');
+var Avatar = require('@mui/material/Avatar/Avatar.js');
+var css = require('@emotion/css');
+var ReactDOM = require('react-dom');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
+var Chip__default = /*#__PURE__*/_interopDefault(Chip);
+var Avatar__default = /*#__PURE__*/_interopDefault(Avatar);
+var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+var useAutosizeTextArea = (textAreaRef, value) => {
+  React.useEffect(() => {
+    if (textAreaRef.current !== null) {
+      textAreaRef.current.style.height = "0px";
+      const scrollHeight = textAreaRef.current.scrollHeight;
+      textAreaRef.current.style.height = scrollHeight + "px";
+    }
+  }, [textAreaRef, value]);
+};
+var use_autosize_textarea_default = useAutosizeTextArea;
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+nanoid.customAlphabet(
+  "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
+  7
+);
+var Command = React__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command,
+    __spreadValues({
+      ref,
+      className: cn(
+        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+        className
+      )
+    }, props)
+  );
+});
+Command.displayName = cmdk.Command.displayName;
+var CommandInput = React__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Input,
+    __spreadValues({
+      ref,
+      className: cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )
+    }, props)
+  ) });
+});
+CommandInput.displayName = cmdk.Command.Input.displayName;
+var CommandList = React__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.List,
+    __spreadValues({
+      ref,
+      className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden pb-2", className)
+    }, props)
+  );
+});
+CommandList.displayName = cmdk.Command.List.displayName;
+var CommandEmpty = React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Empty, __spreadValues({ ref, className: "py-6 text-center text-sm" }, props)));
+CommandEmpty.displayName = cmdk.Command.Empty.displayName;
+var CommandGroup = React__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Group,
+    __spreadValues({
+      ref,
+      className: cn(
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        className
+      )
+    }, props)
+  );
+});
+CommandGroup.displayName = cmdk.Command.Group.displayName;
+var CommandSeparator = React__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Separator,
+    __spreadValues({
+      ref,
+      className: cn("-mx-1 h-px bg-border", className)
+    }, props)
+  );
+});
+CommandSeparator.displayName = cmdk.Command.Separator.displayName;
+var CommandItem = React__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Item,
+    __spreadValues({
+      ref,
+      className: cn(
+        "relative flex cursor-default select-none items-center rounded-sm text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      )
+    }, props)
+  );
+});
+CommandItem.displayName = cmdk.Command.Item.displayName;
+function SourceSearchBox(props) {
+  const [selectedValue, setSelectedValue] = React.useState("");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Command,
+    {
+      className: "rounded-lg border shadow-md",
+      value: selectedValue,
+      onValueChange: (value) => {
+        setSelectedValue(value);
+      },
+      filter: (value, search) => {
+        if (props.searchTerm === "")
+          return 1;
+        if (value.startsWith(props.searchTerm))
+          return 1;
+        return 0;
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CommandInput,
+          {
+            value: props.searchTerm,
+            className: "rounded-t-lg hidden",
+            placeholder: "Search for a command..."
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: "No results found." }),
+          /* @__PURE__ */ jsxRuntime.jsx(CommandGroup, { heading: "Available resources", children: props.suggestedFiles.map((filePointer) => {
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              CommandItem,
+              {
+                value: filePointer.name,
+                onSelect: (value) => {
+                  props.onSelectedFile(filePointer);
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: " px-3  flex flex-row gap-1 items-center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Logo, { width: "20px", height: "20px", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: filePointer.iconImageUri,
+                      alt: filePointer.sourceApplication,
+                      className: "w-full h-full"
+                    }
+                  ) }),
+                  filePointer.name
+                ] })
+              },
+              `word-${filePointer.sourceApplication}.${filePointer.name}`
+            );
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(CommandSeparator, {})
+        ] })
+      ]
+    }
+  );
+}
+function Logo({
+  children,
+  width,
+  height
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", style: { width, height }, children });
+}
+var buttonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant, size, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "size", "asChild"]);
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsx(Comp, __spreadValues({ className: cn(buttonVariants({ variant, size, className })), ref }, props));
+  }
+);
+Button.displayName = "Button";
+var labelVariants = classVarianceAuthority.cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(LabelPrimitive__namespace.Root, __spreadValues({ ref, className: cn(labelVariants(), className) }, props));
+});
+Label.displayName = LabelPrimitive__namespace.Root.displayName;
+
+// src/lib/stream-promise-flatten.ts
+function streamPromiseFlatten(promise) {
+  return new ReadableStream({
+    start(controller) {
+      return __async(this, null, function* () {
+        try {
+          const stream = yield promise;
+          const reader = stream.getReader();
+          while (true) {
+            const { done, value } = yield reader.read();
+            if (done) {
+              controller.close();
+              return;
+            }
+            controller.enqueue(value);
+          }
+        } catch (error) {
+          controller.error(error);
+        }
+      });
+    }
+  });
+}
+var IncludedFilesPreview = ({
+  includedFiles,
+  setIncludedFiles
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 mt-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "", children: "Included context:" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: includedFiles.map((filePointer, index) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        FileChipPreview,
+        {
+          filePointer,
+          onDelete: () => {
+            setIncludedFiles((prev) => prev.filter((fp) => fp !== filePointer));
+          }
+        },
+        `file-${filePointer.sourceApplication}.${filePointer.name}`
+      );
+    }) })
+  ] });
+};
+var FileChipPreview = ({ filePointer, onDelete }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Chip__default.default,
+    {
+      label: filePointer.name,
+      onDelete,
+      avatar: /* @__PURE__ */ jsxRuntime.jsx(
+        Avatar__default.default,
+        {
+          src: filePointer.iconImageUri,
+          alt: filePointer.sourceApplication,
+          sx: { backgroundColor: "transparent" }
+        }
+      )
+    }
+  );
+};
+var HoveringInsertionPromptBoxCore = ({
+  performInsertion,
+  state,
+  insertionOrEditingFunction,
+  contextCategories
+}) => {
+  const { getDocumentsContext } = React.useContext(reactCore.CopilotContext);
+  const [editSuggestion, setEditSuggestion] = React.useState("");
+  const [suggestionIsLoading, setSuggestionIsLoading] = React.useState(false);
+  const [adjustmentPrompt, setAdjustmentPrompt] = React.useState("");
+  const [generatingSuggestion, setGeneratingSuggestion] = React.useState(
+    null
+  );
+  const adjustmentTextAreaRef = React.useRef(null);
+  const suggestionTextAreaRef = React.useRef(null);
+  const [filePointers, setFilePointers] = React.useState([]);
+  const [suggestedFiles, setSuggestedFiles] = React.useState([]);
+  React.useEffect(() => {
+    setSuggestedFiles(getDocumentsContext(contextCategories));
+  }, [contextCategories, getDocumentsContext]);
+  use_autosize_textarea_default(suggestionTextAreaRef, editSuggestion || "");
+  use_autosize_textarea_default(adjustmentTextAreaRef, adjustmentPrompt || "");
+  React.useEffect(() => {
+    setTimeout(() => {
+      var _a;
+      (_a = adjustmentTextAreaRef.current) == null ? void 0 : _a.focus();
+    }, 0);
+  }, []);
+  React.useEffect(() => {
+    if (!generatingSuggestion) {
+      return;
+    }
+    if (generatingSuggestion.locked) {
+      return;
+    }
+    setEditSuggestion("");
+    const reader = generatingSuggestion.getReader();
+    const read = () => __async(void 0, null, function* () {
+      setSuggestionIsLoading(true);
+      while (true) {
+        const { done, value } = yield reader.read();
+        if (done) {
+          break;
+        }
+        setEditSuggestion((prev) => {
+          const newSuggestion = prev + value;
+          if (suggestionTextAreaRef.current) {
+            suggestionTextAreaRef.current.scrollTop = suggestionTextAreaRef.current.scrollHeight;
+          }
+          return newSuggestion;
+        });
+      }
+      setSuggestionIsLoading(false);
+    });
+    read();
+    return () => {
+      const releaseLockIfNotClosed = () => __async(void 0, null, function* () {
+        try {
+          yield reader.closed;
+        } catch (e) {
+          reader.releaseLock();
+        }
+      });
+      releaseLockIfNotClosed();
+    };
+  }, [generatingSuggestion]);
+  const beginGeneratingAdjustment = React.useCallback(() => __async(void 0, null, function* () {
+    if (!adjustmentPrompt.trim()) {
+      return;
+    }
+    let modificationState = state.editorState;
+    if (editSuggestion !== "") {
+      modificationState.selectedText = editSuggestion;
+    }
+    const adjustmentSuggestionTextStreamPromise = insertionOrEditingFunction(
+      modificationState,
+      adjustmentPrompt,
+      filePointers,
+      new AbortController().signal
+    );
+    const adjustmentSuggestionTextStream = streamPromiseFlatten(
+      adjustmentSuggestionTextStreamPromise
+    );
+    setGeneratingSuggestion(adjustmentSuggestionTextStream);
+  }), [
+    adjustmentPrompt,
+    editSuggestion,
+    state.editorState,
+    insertionOrEditingFunction,
+    filePointers
+  ]);
+  const isLoading = suggestionIsLoading;
+  const textToEdit = editSuggestion || state.editorState.selectedText;
+  const adjustmentLabel = textToEdit === "" ? "Describe the text you want to insert" : "Describe adjustments to the suggested text";
+  const placeholder = textToEdit === "" ? "e.g. 'summarize the client's top 3 pain-points from @CallTranscript'" : "e.g. 'make it more formal', 'be more specific', ...";
+  const AdjustmentPromptComponent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "", children: adjustmentLabel }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full flex items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          disabled: suggestionIsLoading,
+          ref: adjustmentTextAreaRef,
+          value: adjustmentPrompt,
+          onChange: (e) => setAdjustmentPrompt(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && e.shiftKey) {
+              e.preventDefault();
+              setAdjustmentPrompt(adjustmentPrompt + "\n");
+            } else if (e.key === "Enter") {
+              e.preventDefault();
+              beginGeneratingAdjustment();
+            }
+          },
+          placeholder,
+          style: { minHeight: "3rem" },
+          className: "w-full bg-slate-100 h-auto h-min-14 text-sm p-2 rounded-md resize-none overflow-visible focus:outline-none focus:ring-0 focus:border-non pr-[3rem]",
+          rows: 1
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: beginGeneratingAdjustment,
+          className: "absolute right-2 bg-blue-500 text-white w-8 h-8 rounded-full flex items-center justify-center",
+          children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "material-icons", children: "arrow_forward" })
+        }
+      )
+    ] })
+  ] });
+  const SuggestionComponent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-end w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mt-4", children: "Suggested:" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto", children: isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "inline-block h-4 w-4 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]",
+          role: "status",
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]", children: "Loading..." })
+        }
+      ) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        ref: suggestionTextAreaRef,
+        value: editSuggestion,
+        disabled: suggestionIsLoading,
+        onChange: (e) => setEditSuggestion(e.target.value),
+        className: "w-full text-base p-2 border border-gray-300 rounded-md resize-none bg-green-50",
+        style: { overflow: "auto", maxHeight: "10em" }
+      }
+    )
+  ] });
+  const SubmitComponent = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full gap-4 justify-start", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    Button,
+    {
+      className: " bg-green-700 text-white",
+      onClick: () => {
+        performInsertion(editSuggestion);
+      },
+      children: [
+        "Insert ",
+        /* @__PURE__ */ jsxRuntime.jsx("i", { className: "material-icons", children: "check" })
+      ]
+    }
+  ) });
+  const sourceSearchCandidate = adjustmentPrompt.split(" ").pop();
+  const sourceSearchWord = (sourceSearchCandidate == null ? void 0 : sourceSearchCandidate.startsWith("@")) ? sourceSearchCandidate.slice(1) : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col items-start relative gap-2", children: [
+    AdjustmentPromptComponent,
+    filePointers.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(IncludedFilesPreview, { includedFiles: filePointers, setIncludedFiles: setFilePointers }),
+    sourceSearchWord !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      SourceSearchBox,
+      {
+        searchTerm: sourceSearchWord,
+        suggestedFiles,
+        onSelectedFile: (filePointer) => {
+          var _a;
+          setAdjustmentPrompt(adjustmentPrompt.replace(new RegExp(`@${sourceSearchWord}$`), ""));
+          setFilePointers((prev) => [...prev, filePointer]);
+          (_a = adjustmentTextAreaRef.current) == null ? void 0 : _a.focus();
+        }
+      }
+    ),
+    generatingSuggestion ? SuggestionComponent : null,
+    generatingSuggestion ? SubmitComponent : null
+  ] });
+};
+var HoveringInsertionPromptBox = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "flex flex-col justify-center items-center space-y-4 rounded-md border shadow-lg p-4 border-gray- bg-white",
+      style: { width: "35rem" },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        HoveringInsertionPromptBoxCore,
+        {
+          state: {
+            editorState: props.editorState
+          },
+          insertionOrEditingFunction: props.apiConfig.insertionOrEditingFunction,
+          performInsertion: props.performInsertion,
+          contextCategories: props.contextCategories
+        }
+      )
+    }
+  );
+};
+React__namespace.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      active,
+      reversed
+    } = _b, props = __objRest(_b, [
+      "className",
+      "active",
+      "reversed"
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      __spreadProps(__spreadValues({}, props), {
+        ref,
+        className: css.cx(
+          className,
+          css.css`
+          cursor: pointer;
+          color: ${reversed ? active ? "white" : "#aaa" : active ? "black" : "#ccc"};
+        `
+        )
+      })
+    );
+  }
+);
+React__namespace.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      __spreadProps(__spreadValues({}, props), {
+        ref,
+        className: css.cx(
+          "material-icons",
+          className,
+          css.css`
+          font-size: 18px;
+          vertical-align: text-bottom;
+        `
+        )
+      })
+    );
+  }
+);
+var Menu = React__namespace.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      __spreadProps(__spreadValues({}, props), {
+        "data-test-id": "menu",
+        ref,
+        className: css.cx(
+          className,
+          css.css`
+          & > * {
+            display: inline-block;
+          }
+
+          & > * + * {
+            margin-left: 15px;
+          }
+        `
+        )
+      })
+    );
+  }
+);
+var Portal = ({ children }) => {
+  return typeof document === "object" ? ReactDOM__default.default.createPortal(children, document.body) : null;
+};
+React__namespace.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Menu,
+      __spreadProps(__spreadValues({}, props), {
+        ref,
+        className: css.cx(
+          className,
+          css.css`
+          position: relative;
+          padding: 1px 18px 17px;
+          margin: 0 -20px;
+          border-bottom: 2px solid #eee;
+          margin-bottom: 20px;
+        `
+        )
+      })
+    );
+  }
+);
+var HoveringEditorContext = React.createContext({
+  isDisplayed: false,
+  setIsDisplayed: () => {
+  }
+});
+var useHoveringEditorContext = () => React.useContext(HoveringEditorContext);
+function getTextAroundSelection(editor) {
+  const { selection } = editor;
+  if (!selection) {
+    return null;
+  }
+  const wellOrderedSelection = wellOrderedRange(selection);
+  const beforeRange = {
+    anchor: slate.Editor.start(editor, []),
+    focus: wellOrderedSelection.anchor
+  };
+  const afterRange = {
+    anchor: wellOrderedSelection.focus,
+    focus: slate.Editor.end(editor, [])
+  };
+  const before = extractTextWithNewlines(editor, beforeRange);
+  const after = extractTextWithNewlines(editor, afterRange);
+  const selectedText = extractTextWithNewlines(editor, wellOrderedSelection);
+  return {
+    selection: wellOrderedSelection,
+    textBeforeCursor: before,
+    selectedText,
+    textAfterCursor: after
+  };
+}
+function getFullEditorTextWithNewlines(editor) {
+  const fullDocumentRange = {
+    anchor: slate.Editor.start(editor, []),
+    focus: slate.Editor.end(editor, [])
+  };
+  return extractTextWithNewlines(editor, fullDocumentRange);
+}
+function extractTextWithNewlines(editor, range) {
+  const voids = false;
+  const [start, end] = slate.Range.edges(range);
+  let text = "";
+  let lastBlock = null;
+  for (const [node, path] of slate.Editor.nodes(editor, {
+    at: range,
+    match: slate.Text.isText,
+    voids
+  })) {
+    let t = node.text;
+    const [block] = slate.Editor.above(editor, {
+      at: path,
+      match: (n) => slate.Element.isElement(n) && n.type === "paragraph"
+    }) || [null];
+    if (lastBlock !== block && block) {
+      if (lastBlock) {
+        text += "\n";
+      }
+      lastBlock = block;
+    }
+    if (slate.Path.equals(path, end.path)) {
+      t = t.slice(0, end.offset);
+    }
+    if (slate.Path.equals(path, start.path)) {
+      t = t.slice(start.offset);
+    }
+    text += t;
+  }
+  return text;
+}
+function wellOrderedRange(range) {
+  const { anchor, focus } = range;
+  if (slate.Point.isBefore(anchor, focus)) {
+    return range;
+  }
+  return {
+    anchor: focus,
+    focus: anchor
+  };
+}
+var HoveringToolbar = (props) => {
+  const ref = React.useRef(null);
+  const editor = slateReact.useSlate();
+  const selection = slateReact.useSlateSelection();
+  const { isDisplayed, setIsDisplayed } = useHoveringEditorContext();
+  const [isClient, setIsClient] = React.useState(false);
+  React.useEffect(() => {
+    setIsClient(true);
+  }, []);
+  React.useEffect(() => {
+    const el = ref.current;
+    const { selection: selection2 } = editor;
+    if (!el) {
+      return;
+    }
+    if (!selection2) {
+      el.removeAttribute("style");
+      return;
+    }
+    const domSelection = window.getSelection();
+    if (!domSelection) {
+      return;
+    }
+    const domRange = domSelection.getRangeAt(0);
+    const rect = domRange.getBoundingClientRect();
+    if (rect.top === 0 && rect.left === 0 && rect.width === 0 && rect.height === 0) {
+      return;
+    }
+    const minGapFromEdge = 60;
+    const verticalOffsetFromCorner = 35;
+    const horizontalOffsetFromCorner = 15;
+    let top = rect.top + window.scrollY - el.offsetHeight + verticalOffsetFromCorner;
+    if (top < minGapFromEdge) {
+      top = rect.bottom + window.scrollY + minGapFromEdge;
+    } else if (top + el.offsetHeight > window.innerHeight - minGapFromEdge) {
+      top = rect.top + window.scrollY - el.offsetHeight - minGapFromEdge;
+    }
+    let left = rect.left + window.scrollX - el.offsetWidth / 2 + rect.width / 2 + horizontalOffsetFromCorner;
+    if (left < minGapFromEdge) {
+      left = minGapFromEdge;
+    } else if (left + el.offsetWidth > window.innerWidth - minGapFromEdge) {
+      left = window.innerWidth - el.offsetWidth - minGapFromEdge;
+    }
+    el.style.opacity = "1";
+    el.style.top = `${top}px`;
+    el.style.left = `${left}px`;
+  });
+  React.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setIsDisplayed(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref, setIsDisplayed]);
+  if (!isClient) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    Menu,
+    {
+      ref,
+      className: props.hoverMenuClassname || "p-2 absolute z-10 top-[-10000px] left-[-10000px] mt-[-6px] opacity-0 transition-opacity duration-700",
+      children: isDisplayed && selection && /* @__PURE__ */ jsxRuntime.jsx(
+        HoveringInsertionPromptBox,
+        {
+          editorState: editorState(editor),
+          apiConfig: props.apiConfig,
+          closeWindow: () => {
+            setIsDisplayed(false);
+          },
+          performInsertion: (insertedText) => {
+            console.log("inserted text", insertedText);
+            slate.Transforms.delete(editor, { at: selection });
+            slate.Transforms.insertText(editor, insertedText, {
+              at: selection
+            });
+            setIsDisplayed(false);
+          },
+          contextCategories: props.contextCategories
+        }
+      )
+    }
+  ) });
+};
+function editorState(editor, selection) {
+  const textAroundCursor = getTextAroundSelection(editor);
+  if (textAroundCursor) {
+    return textAroundCursor;
+  }
+  return {
+    textBeforeCursor: getFullEditorTextWithNewlines(editor),
+    textAfterCursor: "",
+    selectedText: ""
+  };
+}
+
+exports.HoveringToolbar = HoveringToolbar;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=hovering-toolbar.js.map