@copilotkit/react-textarea 1.8.14-next.0 → 1.8.14-next.1

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

@@ -86,10 +86,194 @@ var import_react6 = require("react");
 var import_slate2 = require("slate");
 var import_slate_react = require("slate-react");
 
-// src/hooks/misc/use-autosize-textarea.tsx
+// 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-editor-provider.tsx
 var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var HoveringEditorContext = (0, import_react.createContext)({
+  isDisplayed: false,
+  setIsDisplayed: () => {
+  }
+});
+var useHoveringEditorContext = () => (0, import_react.useContext)(HoveringEditorContext);
+
+// src/components/hovering-toolbar/hovering-toolbar-components.tsx
+var import_css = require("@emotion/css");
+var import_react2 = __toESM(require("react"));
+var import_react_dom = __toESM(require("react-dom"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Button = import_react2.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      active,
+      reversed
+    } = _b, props = __objRest(_b, [
+      "className",
+      "active",
+      "reversed"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.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_react2.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.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_react2.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      __spreadProps(__spreadValues({}, props), {
+        "data-testid": "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_react2.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.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/hooks/misc/use-autosize-textarea.tsx
+var import_react3 = require("react");
 var useAutosizeTextArea = (textAreaRef, value) => {
-  (0, import_react.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (textAreaRef.current !== null) {
       textAreaRef.current.style.height = "0px";
       const scrollHeight = textAreaRef.current.scrollHeight;
@@ -100,10 +284,10 @@ var useAutosizeTextArea = (textAreaRef, value) => {
 var use_autosize_textarea_default = useAutosizeTextArea;
 
 // src/components/source-search-box/source-search-box.tsx
-var import_react2 = require("react");
+var import_react4 = require("react");
 
 // src/components/ui/command.tsx
-var React = __toESM(require("react"));
+var React2 = __toESM(require("react"));
 var import_cmdk = require("cmdk");
 
 // src/lib/utils.ts
@@ -114,10 +298,10 @@ function cn(...inputs) {
 }
 
 // src/components/ui/command.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var Command = React.forwardRef((_a, ref) => {
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Command = React2.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_cmdk.Command,
     __spreadValues({
       ref,
@@ -129,9 +313,9 @@ var Command = React.forwardRef((_a, ref) => {
   );
 });
 Command.displayName = import_cmdk.Command.displayName;
-var CommandInput = React.forwardRef((_a, ref) => {
+var CommandInput = React2.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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_cmdk.Command.Input,
     __spreadValues({
       ref,
@@ -143,9 +327,9 @@ var CommandInput = React.forwardRef((_a, ref) => {
   ) });
 });
 CommandInput.displayName = import_cmdk.Command.Input.displayName;
-var CommandList = React.forwardRef((_a, ref) => {
+var CommandList = React2.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_cmdk.Command.List,
     __spreadValues({
       ref,
@@ -154,11 +338,11 @@ var CommandList = React.forwardRef((_a, ref) => {
   );
 });
 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)));
+var CommandEmpty = React2.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.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 CommandGroup = React2.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_cmdk.Command.Group,
     __spreadValues({
       ref,
@@ -170,9 +354,9 @@ var CommandGroup = React.forwardRef((_a, ref) => {
   );
 });
 CommandGroup.displayName = import_cmdk.Command.Group.displayName;
-var CommandSeparator = React.forwardRef((_a, ref) => {
+var CommandSeparator = React2.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_cmdk.Command.Separator,
     __spreadValues({
       ref,
@@ -181,9 +365,9 @@ var CommandSeparator = React.forwardRef((_a, ref) => {
   );
 });
 CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
-var CommandItem = React.forwardRef((_a, ref) => {
+var CommandItem = React2.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_cmdk.Command.Item,
     __spreadValues({
       ref,
@@ -197,7 +381,7 @@ var CommandItem = React.forwardRef((_a, ref) => {
 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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "span",
     __spreadValues({
       className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className)
@@ -207,10 +391,10 @@ var CommandShortcut = (_a) => {
 CommandShortcut.displayName = "CommandShortcut";
 
 // src/components/source-search-box/source-search-box.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function SourceSearchBox(props) {
-  const [selectedValue, setSelectedValue] = (0, import_react2.useState)("");
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  const [selectedValue, setSelectedValue] = (0, import_react4.useState)("");
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     Command,
     {
       className: "rounded-lg border shadow-md",
@@ -226,7 +410,7 @@ function SourceSearchBox(props) {
         return 0;
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           CommandInput,
           {
             value: props.searchTerm,
@@ -234,18 +418,18 @@ function SourceSearchBox(props) {
             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)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(CommandList, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CommandEmpty, { children: "No results found." }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CommandGroup, { heading: "Available resources", children: props.suggestedFiles.map((filePointer) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime4.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)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: " px-3  flex flex-row gap-1 items-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Logo, { width: "20px", height: "20px", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     "img",
                     {
                       src: filePointer.iconImageUri,
@@ -259,7 +443,7 @@ function SourceSearchBox(props) {
               `word-${filePointer.sourceApplication}.${filePointer.name}`
             );
           }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CommandSeparator, {})
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CommandSeparator, {})
         ] })
       ]
     }
@@ -270,17 +454,17 @@ function Logo({
   width,
   height
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center justify-center", style: { width, height }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex items-center justify-center", style: { width, height }, children });
 }
 
 // src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box-core.tsx
 var import_react_core = require("@copilotkit/react-core");
 
 // src/components/ui/button.tsx
-var React2 = __toESM(require("react"));
+var React3 = __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 import_jsx_runtime5 = 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",
   {
@@ -306,31 +490,31 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
     }
   }
 );
-var Button = React2.forwardRef(
+var Button2 = React3.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));
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Comp, __spreadValues({ className: cn(buttonVariants({ variant, size, className })), ref }, props));
   }
 );
-Button.displayName = "Button";
+Button2.displayName = "Button";
 
 // src/components/ui/label.tsx
-var React3 = __toESM(require("react"));
+var React4 = __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");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 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 Label = React4.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));
+  return /* @__PURE__ */ (0, import_jsx_runtime6.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_react4 = require("react");
+var import_react5 = require("react");
 
 // src/lib/stream-promise-flatten.ts
 function streamPromiseFlatten(promise) {
@@ -359,15 +543,15 @@ function streamPromiseFlatten(promise) {
 // src/components/hovering-toolbar/text-insertion-prompt-box/included-files-preview.tsx
 var import_Chip = __toESM(require("@mui/material/Chip/Chip.js"));
 var import_Avatar = __toESM(require("@mui/material/Avatar/Avatar.js"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime7 = 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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2 mt-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Label, { className: "", children: "Included context:" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-wrap gap-2", children: includedFiles.map((filePointer, index) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         FileChipPreview,
         {
           filePointer,
@@ -381,12 +565,12 @@ var IncludedFilesPreview = ({
   ] });
 };
 var FileChipPreview = ({ filePointer, onDelete }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_Chip.default,
     {
       label: filePointer.name,
       onDelete,
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      avatar: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         import_Avatar.default,
         {
           src: filePointer.iconImageUri,
@@ -398,18 +582,8 @@ var FileChipPreview = ({ filePointer, onDelete }) => {
   );
 };
 
-// src/components/hovering-toolbar/hovering-editor-provider.tsx
-var import_react3 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var HoveringEditorContext = (0, import_react3.createContext)({
-  isDisplayed: false,
-  setIsDisplayed: () => {
-  }
-});
-var useHoveringEditorContext = () => (0, import_react3.useContext)(HoveringEditorContext);
-
 // src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box-core.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var HoveringInsertionPromptBoxCore = ({
   performInsertion,
   state,
@@ -417,26 +591,26 @@ var HoveringInsertionPromptBoxCore = ({
   contextCategories
 }) => {
   const { getDocumentsContext } = (0, import_react_core.useCopilotContext)();
-  const [editSuggestion, setEditSuggestion] = (0, import_react4.useState)("");
-  const [suggestionIsLoading, setSuggestionIsLoading] = (0, import_react4.useState)(false);
-  const [adjustmentPrompt, setAdjustmentPrompt] = (0, import_react4.useState)("");
-  const [generatingSuggestion, setGeneratingSuggestion] = (0, import_react4.useState)(
+  const [editSuggestion, setEditSuggestion] = (0, import_react5.useState)("");
+  const [suggestionIsLoading, setSuggestionIsLoading] = (0, import_react5.useState)(false);
+  const [adjustmentPrompt, setAdjustmentPrompt] = (0, import_react5.useState)("");
+  const [generatingSuggestion, setGeneratingSuggestion] = (0, import_react5.useState)(
     null
   );
-  const adjustmentTextAreaRef = (0, import_react4.useRef)(null);
-  const suggestionTextAreaRef = (0, import_react4.useRef)(null);
-  const [filePointers, setFilePointers] = (0, import_react4.useState)([]);
-  const [suggestedFiles, setSuggestedFiles] = (0, import_react4.useState)([]);
-  (0, import_react4.useEffect)(() => {
+  const adjustmentTextAreaRef = (0, import_react5.useRef)(null);
+  const suggestionTextAreaRef = (0, import_react5.useRef)(null);
+  const [filePointers, setFilePointers] = (0, import_react5.useState)([]);
+  const [suggestedFiles, setSuggestedFiles] = (0, import_react5.useState)([]);
+  (0, import_react5.useEffect)(() => {
     setSuggestedFiles(getDocumentsContext(contextCategories));
   }, [contextCategories, getDocumentsContext]);
   use_autosize_textarea_default(suggestionTextAreaRef, editSuggestion || "");
   use_autosize_textarea_default(adjustmentTextAreaRef, adjustmentPrompt || "");
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     var _a;
     (_a = adjustmentTextAreaRef.current) == null ? void 0 : _a.focus();
   }, []);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!generatingSuggestion) {
       return;
     }
@@ -474,7 +648,7 @@ var HoveringInsertionPromptBoxCore = ({
       releaseLockIfNotClosed();
     };
   }, [generatingSuggestion]);
-  const beginGeneratingAdjustment = (0, import_react4.useCallback)(() => __async(void 0, null, function* () {
+  const beginGeneratingAdjustment = (0, import_react5.useCallback)(() => __async(void 0, null, function* () {
     if (!adjustmentPrompt.trim()) {
       return;
     }
@@ -504,10 +678,10 @@ var HoveringInsertionPromptBoxCore = ({
   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 { setIsDisplayed } = useHoveringEditorContext();
-  const AdjustmentPromptComponent = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Label, { className: "", children: adjustmentLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative w-full flex items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  const AdjustmentPromptComponent = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Label, { className: "", children: adjustmentLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative w-full flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "textarea",
         {
           "data-testid": "adjustment-prompt",
@@ -522,9 +696,6 @@ var HoveringInsertionPromptBoxCore = ({
             } else if (e.key === "Enter") {
               e.preventDefault();
               beginGeneratingAdjustment();
-            } else if (e.key == "Escape") {
-              e.preventDefault();
-              setIsDisplayed(false);
             }
           },
           placeholder,
@@ -533,30 +704,30 @@ var HoveringInsertionPromptBoxCore = ({
           rows: 1
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "button",
         {
           onClick: beginGeneratingAdjustment,
           className: "absolute right-2 bg-blue-500 text-white w-8 h-8 rounded-full flex items-center justify-center",
           "data-testid": "generate-button",
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("i", { className: "material-icons", children: "arrow_forward" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("i", { className: "material-icons", children: "arrow_forward" })
         }
       )
     ] })
   ] });
-  const SuggestionComponent = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex justify-between items-end w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Label, { className: "mt-4", children: "Suggested:" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ml-auto", children: isLoading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  const SuggestionComponent = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex justify-between items-end w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Label, { className: "mt-4", children: "Suggested:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "ml-auto", children: isLoading && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime7.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..." })
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "textarea",
       {
         "data-testid": "suggestion-result",
@@ -569,8 +740,8 @@ var HoveringInsertionPromptBoxCore = ({
       }
     )
   ] });
-  const SubmitComponent = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex w-full gap-4 justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    Button,
+  const SubmitComponent = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex w-full gap-4 justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    Button2,
     {
       "data-testid": "insert-button",
       className: " bg-green-700 text-white",
@@ -579,16 +750,16 @@ var HoveringInsertionPromptBoxCore = ({
       },
       children: [
         "Insert ",
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("i", { className: "material-icons", children: "check" })
+        /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime7.jsxs)("div", { className: "w-full flex flex-col items-start relative gap-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "w-full flex flex-col items-start relative gap-2", children: [
     AdjustmentPromptComponent,
-    filePointers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IncludedFilesPreview, { includedFiles: filePointers, setIncludedFiles: setFilePointers }),
-    sourceSearchWord !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    filePointers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IncludedFilesPreview, { includedFiles: filePointers, setIncludedFiles: setFilePointers }),
+    sourceSearchWord !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       SourceSearchBox,
       {
         searchTerm: sourceSearchWord,
@@ -607,14 +778,14 @@ var HoveringInsertionPromptBoxCore = ({
 };
 
 // src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var HoveringInsertionPromptBox = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime8.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         HoveringInsertionPromptBoxCore,
         {
           state: {
@@ -629,180 +800,6 @@ var HoveringInsertionPromptBox = (props) => {
   );
 };
 
-// src/components/hovering-toolbar/hovering-toolbar-components.tsx
-var import_css = require("@emotion/css");
-var import_react5 = __toESM(require("react"));
-var import_react_dom = __toESM(require("react-dom"));
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Button2 = import_react5.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      className,
-      active,
-      reversed
-    } = _b, props = __objRest(_b, [
-      "className",
-      "active",
-      "reversed"
-    ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime9.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_react5.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime9.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_react5.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      "div",
-      __spreadProps(__spreadValues({}, props), {
-        "data-testid": "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_react5.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime9.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/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) => {
@@ -814,10 +811,11 @@ var HoveringToolbar = (props) => {
   (0, import_react6.useEffect)(() => {
     setIsClient(true);
   }, []);
-  (0, import_react6.useEffect)(() => {
+  const isShown = isClient && isDisplayed && selection;
+  (0, import_react6.useLayoutEffect)(() => {
     const el = ref.current;
     const { selection: selection2 } = editor;
-    if (!el) {
+    if (!el || !isShown) {
       return;
     }
     if (!selection2) {
@@ -833,26 +831,23 @@ var HoveringToolbar = (props) => {
     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;
+    const verticalOffsetFromCorner = 0;
+    const horizontalOffsetFromCorner = 0;
+    let top = rect.bottom + window.scrollY + verticalOffsetFromCorner;
+    if (rect.bottom + el.offsetHeight > window.innerHeight - verticalOffsetFromCorner) {
+      top = rect.top + window.scrollY - el.offsetHeight - verticalOffsetFromCorner;
     }
     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;
+    if (left < horizontalOffsetFromCorner) {
+      left = horizontalOffsetFromCorner;
+    } else if (left + el.offsetWidth > window.innerWidth - horizontalOffsetFromCorner) {
+      left = window.innerWidth - el.offsetWidth - horizontalOffsetFromCorner;
     }
     el.style.opacity = "1";
     el.style.position = "absolute";
     el.style.top = `${top}px`;
     el.style.left = `${left}px`;
-  });
+  }, [isShown]);
   (0, import_react6.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
@@ -864,7 +859,7 @@ var HoveringToolbar = (props) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [ref, setIsDisplayed]);
-  if (!isClient) {
+  if (!isShown) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -873,14 +868,11 @@ var HoveringToolbar = (props) => {
       ref,
       className: "copilot-kit-textarea-css-scope " + (props.hoverMenuClassname || "p-2 absolute z-10 top-[-10000px] left-[-10000px] mt-[-6px] opacity-0 transition-opacity duration-700"),
       "data-testid": "hovering-toolbar",
-      children: isDisplayed && selection && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         HoveringInsertionPromptBox,
         {
           editorState: editorState(editor, selection),
           apiConfig: props.apiConfig,
-          closeWindow: () => {
-            setIsDisplayed(false);
-          },
           performInsertion: (insertedText) => {
             import_slate2.Transforms.delete(editor, { at: selection });
             import_slate2.Transforms.insertText(editor, insertedText, {