@copilotkit/react-textarea 1.3.0 → 1.3.1

package/dist/index.js

@@ -87,13 +87,6 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/styles.css
-if (globalThis.hasOwnProperty("document")) {
-  const style = document == null ? void 0 : document.createElement("style");
-  style.innerHTML = '.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.left-[-10000px]{left:-10000px}.left-[50%]{left:50%}.right-2{right:.5rem}.right-4{right:1rem}.top-4{top:1rem}.top-[-10000px]{top:-10000px}.top-[50%]{top:50%}.z-10{z-index:10}.z-50{z-index:50}.-m-px{margin:-1px}.-mx-1{margin-left:-.25rem;margin-right:-.25rem}.ml-2{margin-left:.5rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mt-4{margin-top:1rem}.mt-[-6px]{margin-top:-6px}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-4{height:1rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.max-h-[300px]{max-height:300px}.w-10{width:2.5rem}.w-4{width:1rem}.w-8{width:2rem}.w-full{width:100%}.w-px{width:1px}.max-w-lg{max-width:32rem}.shrink-0{flex-shrink:0}.translate-x-[-50%]{--tw-translate-x:-50%}.translate-x-[-50%],.translate-y-[-50%]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-[-50%]{--tw-translate-y:-50%}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-default{cursor:default}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize-none{resize:none}.resize-y{resize:vertical}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-1.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.375rem*var(--tw-space-y-reverse));margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.border{border-width:1px}.border-0{border-width:0}.border-4{border-width:4px}.border-b{border-bottom-width:1px}.border-solid{border-style:solid}.border-current{border-color:currentColor}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-r-transparent{border-right-color:transparent}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity))}.bg-green-700{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.pb-2{padding-bottom:.5rem}.pr-[3rem]{padding-right:3rem}.text-center{text-align:center}.align-[-0.125em]{vertical-align:-.125em}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.italic{font-style:italic}.leading-none{line-height:1}.tracking-tight{letter-spacing:-.025em}.tracking-widest{letter-spacing:.1em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline-offset-4{text-underline-offset:4px}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.duration-700{transition-duration:.7s}.[clip:rect(0c 0c 0c 0)]{clip:rect(0,0,0,0)}.copilot-kit-textarea-css-scope .copilot-textarea.with-branding:after{content:"";position:absolute}.copilot-kit-textarea-css-scope .copilot-textarea.no-branding:after{content:""}.hover:text-gray-200:hover{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity))}.hover:underline:hover{text-decoration-line:underline}.hover:opacity-100:hover{opacity:1}.focus:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus:ring-0:focus,.focus:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus-visible:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled:pointer-events-none:disabled{pointer-events:none}.disabled:cursor-not-allowed:disabled{cursor:not-allowed}.disabled:opacity-50:disabled{opacity:.5}.peer:disabled~.peer-disabled:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled:opacity-70{opacity:.7}.data-[disabled]:pointer-events-none[data-disabled]{pointer-events:none}.data-[disabled]:opacity-50[data-disabled]{opacity:.5}@media (prefers-reduced-motion:reduce){@keyframes spin{to{transform:rotate(1turn)}}.motion-reduce:animate-[spin_1.5s_linear_infinite]{animation:spin 1.5s linear infinite}}@media (min-width:640px){.sm:flex-row{flex-direction:row}.sm:justify-end{justify-content:flex-end}.sm:space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.sm:rounded-lg{border-radius:.5rem}.sm:text-left{text-align:left}}@media (min-width:768px){.md:w-full{width:100%}}.[&_[cmdk-group-heading]]:px-2 [cmdk-group-heading]{padding-left:.5rem;padding-right:.5rem}.[&_[cmdk-group-heading]]:py-1.5 [cmdk-group-heading]{padding-bottom:.375rem;padding-top:.375rem}.[&_[cmdk-group-heading]]:text-xs [cmdk-group-heading]{font-size:.75rem;line-height:1rem}.[&_[cmdk-group-heading]]:font-medium [cmdk-group-heading]{font-weight:500}.[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [cmdk-group]:not([hidden])~[cmdk-group]{padding-top:0}.[&_[cmdk-group]]:px-2 [cmdk-group]{padding-left:.5rem;padding-right:.5rem}.[&_[cmdk-input-wrapper]_svg]:h-5 [cmdk-input-wrapper] svg{height:1.25rem}.[&_[cmdk-input-wrapper]_svg]:w-5 [cmdk-input-wrapper] svg{width:1.25rem}.[&_[cmdk-input]]:h-12 [cmdk-input]{height:3rem}.[&_[cmdk-item]]:px-2 [cmdk-item]{padding-left:.5rem;padding-right:.5rem}.[&_[cmdk-item]]:py-3 [cmdk-item]{padding-bottom:.75rem;padding-top:.75rem}.[&_[cmdk-item]_svg]:h-5 [cmdk-item] svg{height:1.25rem}.[&_[cmdk-item]_svg]:w-5 [cmdk-item] svg{width:1.25rem}';
-  document == null ? void 0 : document.head.appendChild(style);
-}
-
 // src/components/base-copilot-textarea/base-copilot-textarea.tsx
 var import_react12 = __toESM(require("react"));
 var import_slate10 = require("slate");
@@ -795,8 +788,10 @@ function SourceSearchBox(props) {
         setSelectedValue(value);
       },
       filter: (value, search) => {
-        if (props.searchTerm === "") return 1;
-        if (value.startsWith(props.searchTerm)) return 1;
+        if (props.searchTerm === "")
+          return 1;
+        if (value.startsWith(props.searchTerm))
+          return 1;
         return 0;
       },
       children: [
@@ -930,9 +925,51 @@ 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 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,
+        {
+          src: filePointer.iconImageUri,
+          alt: filePointer.sourceApplication,
+          sx: { backgroundColor: "transparent" }
+        }
+      )
+    }
+  );
+};
+
 // src/components/hovering-toolbar/hovering-editor-provider.tsx
 var import_react6 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var HoveringEditorContext = (0, import_react6.createContext)({
   isDisplayed: false,
   setIsDisplayed: () => {
@@ -940,13 +977,12 @@ var HoveringEditorContext = (0, import_react6.createContext)({
 });
 var HoveringEditorProvider = ({ children }) => {
   const [isDisplayed, setIsDisplayed] = (0, import_react6.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HoveringEditorContext.Provider, { value: { isDisplayed, setIsDisplayed }, children });
+  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_md = require("react-icons/md");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var HoveringInsertionPromptBoxCore = ({
   performInsertion,
   state,
@@ -1041,10 +1077,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_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)(
+  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)(
         "textarea",
         {
           disabled: suggestionIsLoading,
@@ -1069,29 +1105,29 @@ var HoveringInsertionPromptBoxCore = ({
           rows: 1
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.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)(import_md.MdArrowForward, { className: "text-2xl" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.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)(
+  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)(
         "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..." })
+          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..." })
         }
       ) }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "textarea",
       {
         ref: suggestionTextAreaRef,
@@ -1103,7 +1139,7 @@ var HoveringInsertionPromptBoxCore = ({
       }
     )
   ] });
-  const SubmitComponent = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex w-full gap-4 justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  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,
     {
       className: " bg-green-700 text-white",
@@ -1112,15 +1148,16 @@ var HoveringInsertionPromptBoxCore = ({
       },
       children: [
         "Insert ",
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_md.MdCheck, { className: "text-2xl" })
+        /* @__PURE__ */ (0, import_jsx_runtime7.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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "w-full flex flex-col items-start relative gap-2", children: [
     AdjustmentPromptComponent,
-    sourceSearchWord !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    filePointers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IncludedFilesPreview, { includedFiles: filePointers, setIncludedFiles: setFilePointers }),
+    sourceSearchWord !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       SourceSearchBox,
       {
         searchTerm: sourceSearchWord,
@@ -1139,14 +1176,14 @@ var HoveringInsertionPromptBoxCore = ({
 };
 
 // src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var HoveringInsertionPromptBox = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.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)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         HoveringInsertionPromptBoxCore,
         {
           state: {
@@ -1165,7 +1202,7 @@ var HoveringInsertionPromptBox = (props) => {
 var import_css = require("@emotion/css");
 var import_react8 = __toESM(require("react"));
 var import_react_dom = __toESM(require("react-dom"));
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var Button2 = import_react8.default.forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -1177,7 +1214,7 @@ var Button2 = import_react8.default.forwardRef(
       "active",
       "reversed"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "span",
       __spreadProps(__spreadValues({}, props), {
         ref,
@@ -1192,10 +1229,29 @@ var Button2 = import_react8.default.forwardRef(
     );
   }
 );
+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_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "div",
       __spreadProps(__spreadValues({}, props), {
         "data-test-id": "menu",
@@ -1222,7 +1278,7 @@ var Portal = ({ children }) => {
 var Toolbar = import_react8.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Menu,
       __spreadProps(__spreadValues({}, props), {
         ref,
@@ -1242,7 +1298,7 @@ var Toolbar = import_react8.default.forwardRef(
 );
 
 // src/components/hovering-toolbar/hovering-toolbar.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var HoveringToolbar = (props) => {
   const ref = (0, import_react9.useRef)(null);
   const editor = (0, import_slate_react3.useSlate)();
@@ -1305,12 +1361,12 @@ var HoveringToolbar = (props) => {
   if (!isClient) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Menu,
     {
       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"),
-      children: isDisplayed && selection && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      children: isDisplayed && selection && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         HoveringInsertionPromptBox,
         {
           editorState: editorState(editor, selection),
@@ -1344,22 +1400,22 @@ function editorState(editor, selection) {
 }
 
 // src/components/base-copilot-textarea/render-element.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function makeRenderElementFunction(suggestionsStyle) {
   return (props) => {
     switch (props.element.type) {
       case "paragraph":
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DefaultElement, __spreadValues({}, props));
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DefaultElement, __spreadValues({}, props));
       case "suggestion":
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SuggestionElement, __spreadProps(__spreadValues({}, props), { suggestionsStyle }));
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SuggestionElement, __spreadProps(__spreadValues({}, props), { suggestionsStyle }));
     }
   };
 }
 var DefaultElement = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", __spreadProps(__spreadValues({}, props.attributes), { children: props.children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", __spreadProps(__spreadValues({}, props.attributes), { children: props.children }));
 };
 var SuggestionElement = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "span",
     __spreadProps(__spreadValues({}, props.attributes), {
       style: __spreadValues({}, props.suggestionsStyle),
@@ -1373,11 +1429,11 @@ var SuggestionElement = (props) => {
 };
 
 // src/components/base-copilot-textarea/render-placeholder.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function makeRenderPlaceholderFunction(placeholderStyle) {
   return (props) => {
     const _a = props.attributes, { style } = _a, restAttributes = __objRest(_a, ["style"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "div",
       __spreadProps(__spreadValues({}, restAttributes), {
         style: __spreadValues(__spreadValues({}, style), placeholderStyle),
@@ -1489,7 +1545,7 @@ var editorToText = (editor) => {
 };
 
 // src/components/base-copilot-textarea/track-cursor-moved-since-last-text-change.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function TrackerTextEditedSinceLastCursorMovement(props) {
   const cursorState = (0, import_slate_react4.useSlateSelector)((state) => ({
     selection: state.selection,
@@ -1504,7 +1560,7 @@ function TrackerTextEditedSinceLastCursorMovement(props) {
       props.setCursorMovedSinceLastTextChange(true);
     }
   }, [props.setCursorMovedSinceLastTextChange, cursorState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {});
 }
 var cursorChangedWithoutTextChanged = (prev, next) => {
   const isSelectionChanged = !isSelectionEqual(prev.selection, next.selection);
@@ -1512,8 +1568,10 @@ var cursorChangedWithoutTextChanged = (prev, next) => {
   return isSelectionChanged && isTextSame;
 };
 var isSelectionEqual = (a, b) => {
-  if (!a && !b) return true;
-  if (!a || !b) return false;
+  if (!a && !b)
+    return true;
+  if (!a || !b)
+    return false;
   return import_slate9.Range.equals(a, b);
 };
 function usePrevious(value) {
@@ -1525,10 +1583,10 @@ function usePrevious(value) {
 }
 
 // src/components/base-copilot-textarea/base-copilot-textarea.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var BaseCopilotTextarea = import_react12.default.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HoveringEditorProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BaseCopilotTextareaWithHoveringContext, __spreadProps(__spreadValues({}, props), { ref })) });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HoveringEditorProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BaseCopilotTextareaWithHoveringContext, __spreadProps(__spreadValues({}, props), { ref })) });
   }
 );
 var BaseCopilotTextareaWithHoveringContext = import_react12.default.forwardRef(
@@ -1656,7 +1714,7 @@ var BaseCopilotTextareaWithHoveringContext = import_react12.default.forwardRef(
       const mergedClassName = (0, import_tailwind_merge2.twMerge)(defaultTailwindClassName, className != null ? className : "");
       return `${baseClassName} ${brandingClass} ${mergedClassName}`;
     })();
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       import_slate_react5.Slate,
       {
         editor,
@@ -1676,13 +1734,13 @@ var BaseCopilotTextareaWithHoveringContext = import_react12.default.forwardRef(
           (_b = props.onChange) == null ? void 0 : _b.call(props, makeSemiFakeReactTextAreaEvent(fullEditorText));
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             TrackerTextEditedSinceLastCursorMovement,
             {
               setCursorMovedSinceLastTextChange
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             HoveringToolbar,
             {
               apiConfig: autosuggestionsConfig.apiConfig,
@@ -1690,7 +1748,7 @@ var BaseCopilotTextareaWithHoveringContext = import_react12.default.forwardRef(
               hoverMenuClassname
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             import_slate_react5.Editable,
             __spreadValues({
               renderElement: renderElementMemoized,
@@ -2205,7 +2263,7 @@ function useMakeStandardInsertionOrEditingFunction(textareaPurpose, contextCateg
 
 // src/components/copilot-textarea/copilot-textarea.tsx
 var import_lodash = __toESM(require("lodash.merge"));
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var CopilotTextarea = import_react15.default.forwardRef(
   (props, ref) => {
     const _a = props, { autosuggestionsConfig: autosuggestionsConfigUserSpecified } = _a, forwardedProps = __objRest(_a, ["autosuggestionsConfig"]);
@@ -2224,7 +2282,7 @@ var CopilotTextarea = import_react15.default.forwardRef(
       autosuggestionsConfig.chatApiConfigs.insertionApiConfig,
       autosuggestionsConfig.chatApiConfigs.editingApiConfig
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       BaseCopilotTextarea,
       __spreadProps(__spreadValues({
         ref