@copilotkit/react-textarea 0.21.0-alpha.0 → 0.21.0-alpha.2

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

@@ -0,0 +1,915 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+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());
+  });
+};
+
+// src/components/hovering-toolbar/hovering-toolbar.tsx
+var hovering_toolbar_exports = {};
+__export(hovering_toolbar_exports, {
+  HoveringToolbar: () => HoveringToolbar
+});
+module.exports = __toCommonJS(hovering_toolbar_exports);
+var import_react6 = require("react");
+var import_slate2 = require("slate");
+var import_slate_react = require("slate-react");
+
+// src/hooks/misc/use-autosize-textarea.tsx
+var import_react = require("react");
+var useAutosizeTextArea = (textAreaRef, value) => {
+  (0, import_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;
+
+// src/components/source-search-box/source-search-box.tsx
+var import_react2 = require("react");
+
+// src/components/ui/command.tsx
+var React = __toESM(require("react"));
+var import_cmdk = require("cmdk");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_nanoid = require("nanoid");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+var nanoid = (0, import_nanoid.customAlphabet)(
+  "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
+  7
+);
+
+// src/components/ui/command.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+"use client";
+var Command = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_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 = import_cmdk.Command.displayName;
+var CommandInput = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+    className: "flex items-center border-b px-3",
+    "cmdk-input-wrapper": "",
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_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 = import_cmdk.Command.Input.displayName;
+var CommandList = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_cmdk.Command.List, __spreadValues({
+    ref,
+    className: cn(
+      "max-h-[300px] overflow-y-auto overflow-x-hidden pb-2",
+      className
+    )
+  }, props));
+});
+CommandList.displayName = import_cmdk.Command.List.displayName;
+var CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_cmdk.Command.Empty, __spreadValues({
+  ref,
+  className: "py-6 text-center text-sm"
+}, props)));
+CommandEmpty.displayName = import_cmdk.Command.Empty.displayName;
+var CommandGroup = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_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 = import_cmdk.Command.Group.displayName;
+var CommandSeparator = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_cmdk.Command.Separator, __spreadValues({
+    ref,
+    className: cn("-mx-1 h-px bg-border", className)
+  }, props));
+});
+CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
+var CommandItem = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_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 = import_cmdk.Command.Item.displayName;
+var CommandShortcut = (_a) => {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", __spreadValues({
+    className: cn(
+      "ml-auto text-xs tracking-widest text-muted-foreground",
+      className
+    )
+  }, props));
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+// src/components/source-search-box/source-search-box.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function SourceSearchBox(props) {
+  const [selectedValue, setSelectedValue] = (0, import_react2.useState)("");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)(CommandInput, {
+        value: props.searchTerm,
+        className: "rounded-t-lg hidden",
+        placeholder: "Search for a command..."
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(CommandList, {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CommandEmpty, {
+            children: "No results found."
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CommandGroup, {
+            heading: "Available resources",
+            children: props.suggestedFiles.map((filePointer) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CommandItem, {
+                value: filePointer.name,
+                onSelect: (value) => {
+                  props.onSelectedFile(filePointer);
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
+                  className: " px-3  flex flex-row gap-1 items-center",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Logo, {
+                      width: "20px",
+                      height: "20px",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", {
+                        src: filePointer.iconImageUri,
+                        alt: filePointer.sourceApplication,
+                        className: "w-full h-full"
+                      })
+                    }),
+                    filePointer.name
+                  ]
+                })
+              }, `word-${filePointer.sourceApplication}.${filePointer.name}`);
+            })
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CommandSeparator, {})
+        ]
+      })
+    ]
+  });
+}
+function Logo({
+  children,
+  width,
+  height
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
+    className: "flex items-center justify-center",
+    style: { width, height },
+    children
+  });
+}
+
+// src/components/ui/button.tsx
+var React2 = __toESM(require("react"));
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.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 = React2.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant, size, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "size", "asChild"]);
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Comp, __spreadValues({
+      className: cn(buttonVariants({ variant, size, className })),
+      ref
+    }, props));
+  }
+);
+Button.displayName = "Button";
+
+// src/components/ui/label.tsx
+var React3 = __toESM(require("react"));
+var LabelPrimitive = __toESM(require("@radix-ui/react-label"));
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+"use client";
+var labelVariants = (0, import_class_variance_authority2.cva)(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React3.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LabelPrimitive.Root, __spreadValues({
+    ref,
+    className: cn(labelVariants(), className)
+  }, props));
+});
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box-core.tsx
+var import_react3 = require("react");
+
+// 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);
+        }
+      });
+    }
+  });
+}
+
+// src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box-core.tsx
+var import_react_core = require("@copilotkit/react-core");
+
+// src/components/hovering-toolbar/text-insertion-prompt-box/included-files-preview.tsx
+var import_Chip = __toESM(require("@mui/material/Chip"));
+var import_Avatar = __toESM(require("@mui/material/Avatar"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var IncludedFilesPreview = ({
+  includedFiles,
+  setIncludedFiles
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", {
+    className: "flex flex-col gap-2 mt-2",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label, {
+        className: "",
+        children: "Included context:"
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", {
+        className: "flex flex-wrap gap-2",
+        children: includedFiles.map((filePointer, index) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FileChipPreview, {
+            filePointer,
+            onDelete: () => {
+              setIncludedFiles(
+                (prev) => prev.filter((fp) => fp !== filePointer)
+              );
+            }
+          }, `file-${filePointer.sourceApplication}.${filePointer.name}`);
+        })
+      })
+    ]
+  });
+};
+var FileChipPreview = ({
+  filePointer,
+  onDelete
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Chip.default, {
+    label: filePointer.name,
+    onDelete,
+    avatar: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Avatar.default, {
+      sx: { backgroundColor: "transparent" }
+    })
+  });
+};
+
+// src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box-core.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var HoveringInsertionPromptBoxCore = ({
+  performInsertion,
+  state,
+  insertionOrEditingFunction,
+  contextCategories
+}) => {
+  const { getDocumentsContext } = (0, import_react3.useContext)(import_react_core.CopilotContext);
+  const [editSuggestion, setEditSuggestion] = (0, import_react3.useState)("");
+  const [suggestionIsLoading, setSuggestionIsLoading] = (0, import_react3.useState)(false);
+  const [adjustmentPrompt, setAdjustmentPrompt] = (0, import_react3.useState)("");
+  const [generatingSuggestion, setGeneratingSuggestion] = (0, import_react3.useState)(null);
+  const adjustmentTextAreaRef = (0, import_react3.useRef)(null);
+  const suggestionTextAreaRef = (0, import_react3.useRef)(null);
+  const [filePointers, setFilePointers] = (0, import_react3.useState)([]);
+  const [suggestedFiles, setSuggestedFiles] = (0, import_react3.useState)([]);
+  (0, import_react3.useEffect)(() => {
+    setSuggestedFiles(getDocumentsContext(contextCategories));
+  }, [contextCategories, getDocumentsContext]);
+  use_autosize_textarea_default(suggestionTextAreaRef, editSuggestion || "");
+  use_autosize_textarea_default(adjustmentTextAreaRef, adjustmentPrompt || "");
+  (0, import_react3.useEffect)(() => {
+    var _a;
+    (_a = adjustmentTextAreaRef.current) == null ? void 0 : _a.focus();
+  }, []);
+  (0, import_react3.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 = (0, import_react3.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__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Label, {
+        className: "",
+        children: adjustmentLabel
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", {
+        className: "relative w-full flex items-center",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.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__ */ (0, import_jsx_runtime6.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__ */ (0, import_jsx_runtime6.jsx)("i", {
+              className: "material-icons",
+              children: "arrow_forward"
+            })
+          })
+        ]
+      })
+    ]
+  });
+  const SuggestionComponent = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", {
+        className: "flex justify-between items-end w-full",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Label, {
+            className: "mt-4",
+            children: "Suggested:"
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
+            className: "ml-auto",
+            children: isLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
+              className: "flex justify-center items-center",
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.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__ */ (0, import_jsx_runtime6.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__ */ (0, import_jsx_runtime6.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__ */ (0, import_jsx_runtime6.jsx)("div", {
+    className: "flex w-full gap-4 justify-start",
+    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Button, {
+      className: " bg-green-700 text-white",
+      onClick: () => {
+        performInsertion(editSuggestion);
+      },
+      children: [
+        "Insert ",
+        /* @__PURE__ */ (0, import_jsx_runtime6.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__ */ (0, import_jsx_runtime6.jsxs)("div", {
+    className: "w-full flex flex-col items-start relative gap-2",
+    children: [
+      AdjustmentPromptComponent,
+      filePointers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IncludedFilesPreview, {
+        includedFiles: filePointers,
+        setIncludedFiles: setFilePointers
+      }),
+      sourceSearchWord !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime6.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
+    ]
+  });
+};
+
+// src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var HoveringInsertionPromptBox = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.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__ */ (0, import_jsx_runtime7.jsx)(HoveringInsertionPromptBoxCore, {
+      state: {
+        editorState: props.editorState
+      },
+      insertionOrEditingFunction: props.apiConfig.insertionOrEditingFunction,
+      performInsertion: props.performInsertion,
+      contextCategories: props.contextCategories
+    })
+  });
+};
+
+// src/components/hovering-toolbar/hovering-toolbar-components.tsx
+var import_css = require("@emotion/css");
+var import_react4 = __toESM(require("react"));
+var import_react_dom = __toESM(require("react-dom"));
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Button2 = import_react4.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      active,
+      reversed
+    } = _b, props = __objRest(_b, [
+      "className",
+      "active",
+      "reversed"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", __spreadProps(__spreadValues({}, props), {
+      ref,
+      className: (0, import_css.cx)(
+        className,
+        import_css.css`
+          cursor: pointer;
+          color: ${reversed ? active ? "white" : "#aaa" : active ? "black" : "#ccc"};
+        `
+      )
+    }));
+  }
+);
+var Icon = import_react4.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", __spreadProps(__spreadValues({}, props), {
+      ref,
+      className: (0, import_css.cx)(
+        "material-icons",
+        className,
+        import_css.css`
+          font-size: 18px;
+          vertical-align: text-bottom;
+        `
+      )
+    }));
+  }
+);
+var Menu = import_react4.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", __spreadProps(__spreadValues({}, props), {
+      "data-test-id": "menu",
+      ref,
+      className: (0, import_css.cx)(
+        className,
+        import_css.css`
+          & > * {
+            display: inline-block;
+          }
+
+          & > * + * {
+            margin-left: 15px;
+          }
+        `
+      )
+    }));
+  }
+);
+var Portal = ({ children }) => {
+  return typeof document === "object" ? import_react_dom.default.createPortal(children, document.body) : null;
+};
+var Toolbar = import_react4.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Menu, __spreadProps(__spreadValues({}, props), {
+      ref,
+      className: (0, import_css.cx)(
+        className,
+        import_css.css`
+          position: relative;
+          padding: 1px 18px 17px;
+          margin: 0 -20px;
+          border-bottom: 2px solid #eee;
+          margin-bottom: 20px;
+        `
+      )
+    }));
+  }
+);
+
+// src/components/hovering-toolbar/hovering-editor-provider.tsx
+var import_react5 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var HoveringEditorContext = (0, import_react5.createContext)({
+  isDisplayed: false,
+  setIsDisplayed: () => {
+  }
+});
+var useHoveringEditorContext = () => (0, import_react5.useContext)(HoveringEditorContext);
+
+// src/lib/get-text-around-cursor.ts
+var import_slate = require("slate");
+function getTextAroundSelection(editor) {
+  const { selection } = editor;
+  if (!selection) {
+    return null;
+  }
+  const wellOrderedSelection = wellOrderedRange(selection);
+  const beforeRange = {
+    anchor: import_slate.Editor.start(editor, []),
+    focus: wellOrderedSelection.anchor
+  };
+  const afterRange = {
+    anchor: wellOrderedSelection.focus,
+    focus: import_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: import_slate.Editor.start(editor, []),
+    focus: import_slate.Editor.end(editor, [])
+  };
+  return extractTextWithNewlines(editor, fullDocumentRange);
+}
+function extractTextWithNewlines(editor, range) {
+  const voids = false;
+  const [start, end] = import_slate.Range.edges(range);
+  let text = "";
+  let lastBlock = null;
+  for (const [node, path] of import_slate.Editor.nodes(editor, {
+    at: range,
+    match: import_slate.Text.isText,
+    voids
+  })) {
+    let t = node.text;
+    const [block] = import_slate.Editor.above(editor, {
+      at: path,
+      match: (n) => import_slate.Element.isElement(n) && n.type === "paragraph"
+    }) || [null];
+    if (lastBlock !== block && block) {
+      if (lastBlock) {
+        text += "\n";
+      }
+      lastBlock = block;
+    }
+    if (import_slate.Path.equals(path, end.path)) {
+      t = t.slice(0, end.offset);
+    }
+    if (import_slate.Path.equals(path, start.path)) {
+      t = t.slice(start.offset);
+    }
+    text += t;
+  }
+  return text;
+}
+function wellOrderedRange(range) {
+  const { anchor, focus } = range;
+  if (import_slate.Point.isBefore(anchor, focus)) {
+    return range;
+  }
+  return {
+    anchor: focus,
+    focus: anchor
+  };
+}
+
+// src/components/hovering-toolbar/hovering-toolbar.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var HoveringToolbar = (props) => {
+  const ref = (0, import_react6.useRef)(null);
+  const editor = (0, import_slate_react.useSlate)();
+  const selection = (0, import_slate_react.useSlateSelection)();
+  const { isDisplayed, setIsDisplayed } = useHoveringEditorContext();
+  const [isClient, setIsClient] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => {
+    setIsClient(true);
+  }, []);
+  (0, import_react6.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`;
+  });
+  (0, import_react6.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__ */ (0, import_jsx_runtime10.jsx)(Portal, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Menu, {
+      ref,
+      className: "p-2 absolute z-10 top-[-10000px] left-[-10000px] mt-[-6px] opacity-0 transition-opacity duration-700",
+      children: isDisplayed && selection && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(HoveringInsertionPromptBox, {
+        editorState: editorState(editor, selection),
+        apiConfig: props.apiConfig,
+        closeWindow: () => {
+          setIsDisplayed(false);
+        },
+        performInsertion: (insertedText) => {
+          console.log("inserted text", insertedText);
+          import_slate2.Transforms.delete(editor, { at: selection });
+          import_slate2.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: ""
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HoveringToolbar
+});
+//# sourceMappingURL=hovering-toolbar.js.map