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

package/dist/index.js

@@ -635,11 +635,10 @@ function clearAutocompletionsFromEditor(editor) {
 
 // src/types/base/base-autosuggestions-config.tsx
 var import_react_core = require("@copilotkit/react-core");
+var import_shared = require("@copilotkit/shared");
 var defaultShouldToggleHoveringEditorOnKeyPress = (event, shortcut) => {
-  if (event.key === shortcut && event.metaKey) {
-    return true;
-  }
-  return false;
+  const isMetaKey = (0, import_shared.isMacOS)() ? event.metaKey : event.ctrlKey;
+  return event.key === shortcut && isMetaKey;
 };
 var defaultShouldAcceptAutosuggestionOnKeyPress = (event) => {
   if (event.key === "Tab") {
@@ -654,6 +653,7 @@ var defaultBaseAutosuggestionsConfig = {
   disableWhenEmpty: true,
   disabled: false,
   temporarilyDisableWhenMovingCursorWithoutChangingText: true,
+  temporarilyDisableNotTrustedEvents: true,
   shouldToggleHoveringEditorOnKeyPress: defaultShouldToggleHoveringEditorOnKeyPress,
   shouldAcceptAutosuggestionOnKeyPress: defaultShouldAcceptAutosuggestionOnKeyPress,
   shouldAcceptAutosuggestionOnTouch: defaultShouldAcceptAutosuggestionOnTouch
@@ -664,10 +664,123 @@ var import_react9 = require("react");
 var import_slate7 = require("slate");
 var import_slate_react3 = require("slate-react");
 
-// src/hooks/misc/use-autosize-textarea.tsx
+// src/components/hovering-toolbar/hovering-editor-provider.tsx
 var import_react4 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var HoveringEditorContext = (0, import_react4.createContext)({
+  isDisplayed: false,
+  setIsDisplayed: () => {
+  }
+});
+var HoveringEditorProvider = ({ children }) => {
+  const [isDisplayed, setIsDisplayed] = (0, import_react4.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HoveringEditorContext.Provider, { value: { isDisplayed, setIsDisplayed }, children });
+};
+var useHoveringEditorContext = () => (0, import_react4.useContext)(HoveringEditorContext);
+
+// 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_runtime2 = require("react/jsx-runtime");
+var Button = import_react5.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_react5.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_react5.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_react5.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_react6 = require("react");
 var useAutosizeTextArea = (textAreaRef, value) => {
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (textAreaRef.current !== null) {
       textAreaRef.current.style.height = "0px";
       const scrollHeight = textAreaRef.current.scrollHeight;
@@ -678,15 +791,15 @@ var useAutosizeTextArea = (textAreaRef, value) => {
 var use_autosize_textarea_default = useAutosizeTextArea;
 
 // src/components/source-search-box/source-search-box.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 
 // src/components/ui/command.tsx
-var React2 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 var import_cmdk = require("cmdk");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Command = React2.forwardRef((_a, ref) => {
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Command = React3.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,
@@ -698,9 +811,9 @@ var Command = React2.forwardRef((_a, ref) => {
   );
 });
 Command.displayName = import_cmdk.Command.displayName;
-var CommandInput = React2.forwardRef((_a, ref) => {
+var CommandInput = React3.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,
@@ -712,9 +825,9 @@ var CommandInput = React2.forwardRef((_a, ref) => {
   ) });
 });
 CommandInput.displayName = import_cmdk.Command.Input.displayName;
-var CommandList = React2.forwardRef((_a, ref) => {
+var CommandList = React3.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,
@@ -723,11 +836,11 @@ var CommandList = React2.forwardRef((_a, ref) => {
   );
 });
 CommandList.displayName = import_cmdk.Command.List.displayName;
-var CommandEmpty = React2.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 = React3.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 = React2.forwardRef((_a, ref) => {
+var CommandGroup = React3.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,
@@ -739,9 +852,9 @@ var CommandGroup = React2.forwardRef((_a, ref) => {
   );
 });
 CommandGroup.displayName = import_cmdk.Command.Group.displayName;
-var CommandSeparator = React2.forwardRef((_a, ref) => {
+var CommandSeparator = React3.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,
@@ -750,9 +863,9 @@ var CommandSeparator = React2.forwardRef((_a, ref) => {
   );
 });
 CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
-var CommandItem = React2.forwardRef((_a, ref) => {
+var CommandItem = React3.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,
@@ -766,7 +879,7 @@ var CommandItem = React2.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)
@@ -776,10 +889,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_react5.useState)("");
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  const [selectedValue, setSelectedValue] = (0, import_react7.useState)("");
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     Command,
     {
       className: "rounded-lg border shadow-md",
@@ -795,7 +908,7 @@ function SourceSearchBox(props) {
         return 0;
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           CommandInput,
           {
             value: props.searchTerm,
@@ -803,18 +916,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,
@@ -828,7 +941,7 @@ function SourceSearchBox(props) {
               `word-${filePointer.sourceApplication}.${filePointer.name}`
             );
           }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CommandSeparator, {})
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CommandSeparator, {})
         ] })
       ]
     }
@@ -839,17 +952,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_core2 = require("@copilotkit/react-core");
 
 // src/components/ui/button.tsx
-var React3 = __toESM(require("react"));
+var React4 = __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",
   {
@@ -875,31 +988,31 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
     }
   }
 );
-var Button = React3.forwardRef(
+var Button2 = React4.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 React4 = __toESM(require("react"));
+var React5 = __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 = React4.forwardRef((_a, ref) => {
+var Label = React5.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_react7 = require("react");
+var import_react8 = require("react");
 
 // src/lib/stream-promise-flatten.ts
 function streamPromiseFlatten(promise) {
@@ -928,15 +1041,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,
@@ -950,12 +1063,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,
@@ -967,22 +1080,8 @@ var FileChipPreview = ({ filePointer, onDelete }) => {
   );
 };
 
-// src/components/hovering-toolbar/hovering-editor-provider.tsx
-var import_react6 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var HoveringEditorContext = (0, import_react6.createContext)({
-  isDisplayed: false,
-  setIsDisplayed: () => {
-  }
-});
-var HoveringEditorProvider = ({ children }) => {
-  const [isDisplayed, setIsDisplayed] = (0, import_react6.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HoveringEditorContext.Provider, { value: { isDisplayed, setIsDisplayed }, children });
-};
-var useHoveringEditorContext = () => (0, import_react6.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,
@@ -990,26 +1089,26 @@ var HoveringInsertionPromptBoxCore = ({
   contextCategories
 }) => {
   const { getDocumentsContext } = (0, import_react_core2.useCopilotContext)();
-  const [editSuggestion, setEditSuggestion] = (0, import_react7.useState)("");
-  const [suggestionIsLoading, setSuggestionIsLoading] = (0, import_react7.useState)(false);
-  const [adjustmentPrompt, setAdjustmentPrompt] = (0, import_react7.useState)("");
-  const [generatingSuggestion, setGeneratingSuggestion] = (0, import_react7.useState)(
+  const [editSuggestion, setEditSuggestion] = (0, import_react8.useState)("");
+  const [suggestionIsLoading, setSuggestionIsLoading] = (0, import_react8.useState)(false);
+  const [adjustmentPrompt, setAdjustmentPrompt] = (0, import_react8.useState)("");
+  const [generatingSuggestion, setGeneratingSuggestion] = (0, import_react8.useState)(
     null
   );
-  const adjustmentTextAreaRef = (0, import_react7.useRef)(null);
-  const suggestionTextAreaRef = (0, import_react7.useRef)(null);
-  const [filePointers, setFilePointers] = (0, import_react7.useState)([]);
-  const [suggestedFiles, setSuggestedFiles] = (0, import_react7.useState)([]);
-  (0, import_react7.useEffect)(() => {
+  const adjustmentTextAreaRef = (0, import_react8.useRef)(null);
+  const suggestionTextAreaRef = (0, import_react8.useRef)(null);
+  const [filePointers, setFilePointers] = (0, import_react8.useState)([]);
+  const [suggestedFiles, setSuggestedFiles] = (0, import_react8.useState)([]);
+  (0, import_react8.useEffect)(() => {
     setSuggestedFiles(getDocumentsContext(contextCategories));
   }, [contextCategories, getDocumentsContext]);
   use_autosize_textarea_default(suggestionTextAreaRef, editSuggestion || "");
   use_autosize_textarea_default(adjustmentTextAreaRef, adjustmentPrompt || "");
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     var _a;
     (_a = adjustmentTextAreaRef.current) == null ? void 0 : _a.focus();
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!generatingSuggestion) {
       return;
     }
@@ -1047,7 +1146,7 @@ var HoveringInsertionPromptBoxCore = ({
       releaseLockIfNotClosed();
     };
   }, [generatingSuggestion]);
-  const beginGeneratingAdjustment = (0, import_react7.useCallback)(() => __async(void 0, null, function* () {
+  const beginGeneratingAdjustment = (0, import_react8.useCallback)(() => __async(void 0, null, function* () {
     if (!adjustmentPrompt.trim()) {
       return;
     }
@@ -1077,10 +1176,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",
@@ -1095,9 +1194,6 @@ var HoveringInsertionPromptBoxCore = ({
             } else if (e.key === "Enter") {
               e.preventDefault();
               beginGeneratingAdjustment();
-            } else if (e.key == "Escape") {
-              e.preventDefault();
-              setIsDisplayed(false);
             }
           },
           placeholder,
@@ -1106,30 +1202,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",
@@ -1142,8 +1238,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",
@@ -1152,16 +1248,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,
@@ -1180,14 +1276,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: {
@@ -1202,105 +1298,6 @@ var HoveringInsertionPromptBox = (props) => {
   );
 };
 
-// src/components/hovering-toolbar/hovering-toolbar-components.tsx
-var import_css = require("@emotion/css");
-var import_react8 = __toESM(require("react"));
-var import_react_dom = __toESM(require("react-dom"));
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Button2 = import_react8.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_react8.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_react8.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_react8.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/components/hovering-toolbar/hovering-toolbar.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var HoveringToolbar = (props) => {
@@ -1312,10 +1309,11 @@ var HoveringToolbar = (props) => {
   (0, import_react9.useEffect)(() => {
     setIsClient(true);
   }, []);
-  (0, import_react9.useEffect)(() => {
+  const isShown = isClient && isDisplayed && selection;
+  (0, import_react9.useLayoutEffect)(() => {
     const el = ref.current;
     const { selection: selection2 } = editor;
-    if (!el) {
+    if (!el || !isShown) {
       return;
     }
     if (!selection2) {
@@ -1331,26 +1329,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_react9.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
@@ -1362,7 +1357,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)(
@@ -1371,14 +1366,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_slate7.Transforms.delete(editor, { at: selection });
             import_slate7.Transforms.insertText(editor, insertedText, {
@@ -1604,6 +1596,7 @@ var BaseCopilotTextareaWithHoveringContext = import_react12.default.forwardRef(
     }, []);
     const [lastKnownFullEditorText, setLastKnownFullEditorText] = (0, import_react12.useState)(valueOnInitialRender);
     const [cursorMovedSinceLastTextChange, setCursorMovedSinceLastTextChange] = (0, import_react12.useState)(false);
+    const [isUserInputActive, setIsUserInputActive] = (0, import_react12.useState)(false);
     const initialValue = (0, import_react12.useMemo)(() => {
       return [
         {
@@ -1626,7 +1619,8 @@ var BaseCopilotTextareaWithHoveringContext = import_react12.default.forwardRef(
       // textarea is manually disabled:
       autosuggestionsConfig.disabled || // hovering editor is displayed:
       hoveringEditorIsDisplayed || // the cursor has moved since the last text change AND we are configured to disable autosuggestions in this case:
-      cursorMovedSinceLastTextChange && autosuggestionsConfig.temporarilyDisableWhenMovingCursorWithoutChangingText
+      cursorMovedSinceLastTextChange && autosuggestionsConfig.temporarilyDisableWhenMovingCursorWithoutChangingText || // not user input and we want to disable non-trusted events (like text insertion from autocomplete plugins):
+      !isUserInputActive && autosuggestionsConfig.temporarilyDisableNotTrustedEvents
     );
     const {
       currentAutocompleteSuggestion,
@@ -1761,6 +1755,7 @@ var BaseCopilotTextareaWithHoveringContext = import_react12.default.forwardRef(
               renderPlaceholder: renderPlaceholderMemoized,
               onKeyDown: (event) => {
                 var _a2;
+                setIsUserInputActive(true);
                 onKeyDownHandlerForHoveringEditor(event);
                 onKeyDownHandlerForAutocomplete(event);
                 (_a2 = props.onKeyDown) == null ? void 0 : _a2.call(props, event);
@@ -1774,6 +1769,7 @@ var BaseCopilotTextareaWithHoveringContext = import_react12.default.forwardRef(
                 var _a2;
                 (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, ev);
                 clearAutocompletionsFromEditor(editor);
+                setIsUserInputActive(false);
               }
             }, propsToForward)
           )
@@ -1799,7 +1795,7 @@ function makeSemiFakeReactTextAreaEvent(currentText) {
 var import_react15 = __toESM(require("react"));
 
 // src/hooks/make-autosuggestions-function/use-make-standard-autosuggestions-function.tsx
-var import_shared = require("@copilotkit/shared");
+var import_shared2 = require("@copilotkit/shared");
 var import_react_core3 = require("@copilotkit/react-core");
 var import_react13 = require("react");
 
@@ -1823,7 +1819,7 @@ var import_runtime_client_gql = require("@copilotkit/runtime-client-gql");
 function useMakeStandardAutosuggestionFunction(textareaPurpose, contextCategories, apiConfig) {
   const { getContextString, copilotApiConfig, runtimeClient } = (0, import_react_core3.useCopilotContext)();
   const { chatApiEndpoint: url, publicApiKey, credentials, properties } = copilotApiConfig;
-  const headers = __spreadValues(__spreadValues({}, copilotApiConfig.headers), publicApiKey ? { [import_shared.COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: publicApiKey } : {});
+  const headers = __spreadValues(__spreadValues({}, copilotApiConfig.headers), publicApiKey ? { [import_shared2.COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: publicApiKey } : {});
   const { maxTokens, stop, temperature = 0 } = apiConfig;
   return (0, import_react13.useCallback)(
     (editorState2, abortSignal) => __async(this, null, function* () {
@@ -2104,13 +2100,13 @@ var defaultAutosuggestionsConfig = __spreadProps(__spreadValues({}, defaultBaseA
 });
 
 // src/hooks/make-autosuggestions-function/use-make-standard-insertion-function.tsx
-var import_shared2 = require("@copilotkit/shared");
+var import_shared3 = require("@copilotkit/shared");
 var import_react_core5 = require("@copilotkit/react-core");
 var import_react14 = require("react");
 var import_runtime_client_gql5 = require("@copilotkit/runtime-client-gql");
 function useMakeStandardInsertionOrEditingFunction(textareaPurpose, contextCategories, insertionApiConfig, editingApiConfig) {
   const { getContextString, copilotApiConfig, runtimeClient } = (0, import_react_core5.useCopilotContext)();
-  const headers = __spreadValues({}, copilotApiConfig.publicApiKey ? { [import_shared2.COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: copilotApiConfig.publicApiKey } : {});
+  const headers = __spreadValues({}, copilotApiConfig.publicApiKey ? { [import_shared3.COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: copilotApiConfig.publicApiKey } : {});
   function runtimeClientResponseToStringStream(responsePromise) {
     return __async(this, null, function* () {
       const messagesStream = runtimeClient.asStream(responsePromise);