@copilotkit/react-textarea 1.3.0 → 1.3.1

package/dist/chunk-WGWQRALG.mjs

@@ -0,0 +1,83 @@
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator
+} from "./chunk-VSVQZUPW.mjs";
+
+// src/components/source-search-box/source-search-box.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SourceSearchBox(props) {
+  const [selectedValue, setSelectedValue] = useState("");
+  return /* @__PURE__ */ jsxs(
+    Command,
+    {
+      className: "rounded-lg border shadow-md",
+      value: selectedValue,
+      onValueChange: (value) => {
+        setSelectedValue(value);
+      },
+      filter: (value, search) => {
+        if (props.searchTerm === "")
+          return 1;
+        if (value.startsWith(props.searchTerm))
+          return 1;
+        return 0;
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          CommandInput,
+          {
+            value: props.searchTerm,
+            className: "rounded-t-lg hidden",
+            placeholder: "Search for a command..."
+          }
+        ),
+        /* @__PURE__ */ jsxs(CommandList, { children: [
+          /* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }),
+          /* @__PURE__ */ jsx(CommandGroup, { heading: "Available resources", children: props.suggestedFiles.map((filePointer) => {
+            return /* @__PURE__ */ jsx(
+              CommandItem,
+              {
+                value: filePointer.name,
+                onSelect: (value) => {
+                  props.onSelectedFile(filePointer);
+                },
+                children: /* @__PURE__ */ jsxs("div", { className: " px-3  flex flex-row gap-1 items-center", children: [
+                  /* @__PURE__ */ jsx(Logo, { width: "20px", height: "20px", children: /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: filePointer.iconImageUri,
+                      alt: filePointer.sourceApplication,
+                      className: "w-full h-full"
+                    }
+                  ) }),
+                  filePointer.name
+                ] })
+              },
+              `word-${filePointer.sourceApplication}.${filePointer.name}`
+            );
+          }) }),
+          /* @__PURE__ */ jsx(CommandSeparator, {})
+        ] })
+      ]
+    }
+  );
+}
+function Logo({
+  children,
+  width,
+  height
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", style: { width, height }, children });
+}
+
+export {
+  SourceSearchBox,
+  Logo
+};
+//# sourceMappingURL=chunk-WGWQRALG.mjs.map

package/dist/chunk-WGWQRALG.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/source-search-box/source-search-box.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"../ui/command\";\n\nimport { Calculator, Calendar, CreditCard, Settings, Smile, User } from \"lucide-react\";\n\nimport { DocumentPointer } from \"@copilotkit/react-core\";\n\nexport interface SourceSearchBoxProps {\n  searchTerm: string;\n  suggestedFiles: DocumentPointer[];\n  onSelectedFile: (filePointer: DocumentPointer) => void;\n}\n\nexport function SourceSearchBox(props: SourceSearchBoxProps) {\n  const [selectedValue, setSelectedValue] = useState<string>(\"\");\n\n  return (\n    <Command\n      className=\"rounded-lg border shadow-md\"\n      value={selectedValue}\n      onValueChange={(value) => {\n        setSelectedValue(value);\n      }}\n      filter={(value, search) => {\n        // if the search term is empty, show all commands\n        if (props.searchTerm === \"\") return 1;\n\n        // if the search term is a prefix of the command, show it\n        if (value.startsWith(props.searchTerm)) return 1;\n\n        // otherwise, don't show it\n        return 0;\n      }}\n    >\n      <CommandInput\n        value={props.searchTerm}\n        className=\"rounded-t-lg hidden\"\n        placeholder=\"Search for a command...\"\n      />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n\n        <CommandGroup heading=\"Available resources\">\n          {props.suggestedFiles.map((filePointer) => {\n            return (\n              <CommandItem\n                key={`word-${filePointer.sourceApplication}.${filePointer.name}`}\n                value={filePointer.name}\n                onSelect={(value) => {\n                  props.onSelectedFile(filePointer);\n                }}\n              >\n                <div className=\" px-3  flex flex-row gap-1 items-center\">\n                  <Logo width=\"20px\" height=\"20px\">\n                    <img\n                      src={filePointer.iconImageUri}\n                      alt={filePointer.sourceApplication}\n                      className=\"w-full h-full\"\n                    />\n                  </Logo>\n                  {filePointer.name}\n                </div>\n              </CommandItem>\n            );\n          })}\n        </CommandGroup>\n\n        {/* <CommandGroup heading=\"Suggestions\">\n          <CommandItem\n            onSelect={(value) => {\n              console.log(value);\n              console.log(value);\n            }}\n          >\n            <Calendar className=\"mr-2 h-4 w-4\" />\n            <span>Calendar</span>\n          </CommandItem>\n          <CommandItem>\n            <Smile className=\"mr-2 h-4 w-4\" />\n            <span>Search Emoji</span>\n          </CommandItem>\n          <CommandItem>\n            <Calculator className=\"mr-2 h-4 w-4\" />\n            <span>Calculator</span>\n          </CommandItem>\n        </CommandGroup> */}\n        <CommandSeparator />\n      </CommandList>\n    </Command>\n  );\n}\n\nexport function Logo({\n  children,\n  width,\n  height,\n}: {\n  children: React.ReactNode;\n  width: string;\n  height: string;\n}) {\n  return (\n    <div className=\"flex items-center justify-center\" style={{ width: width, height: height }}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,gBAAgB;AA4CnB,cAkBU,YAlBV;AArBC,SAAS,gBAAgB,OAA6B;AAC3D,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAiB,EAAE;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO;AAAA,MACP,eAAe,CAAC,UAAU;AACxB,yBAAiB,KAAK;AAAA,MACxB;AAAA,MACA,QAAQ,CAAC,OAAO,WAAW;AAEzB,YAAI,MAAM,eAAe;AAAI,iBAAO;AAGpC,YAAI,MAAM,WAAW,MAAM,UAAU;AAAG,iBAAO;AAG/C,eAAO;AAAA,MACT;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,MAAM;AAAA,YACb,WAAU;AAAA,YACV,aAAY;AAAA;AAAA,QACd;AAAA,QACA,qBAAC,eACC;AAAA,8BAAC,gBAAa,+BAAiB;AAAA,UAE/B,oBAAC,gBAAa,SAAQ,uBACnB,gBAAM,eAAe,IAAI,CAAC,gBAAgB;AACzC,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,OAAO,YAAY;AAAA,gBACnB,UAAU,CAAC,UAAU;AACnB,wBAAM,eAAe,WAAW;AAAA,gBAClC;AAAA,gBAEA,+BAAC,SAAI,WAAU,2CACb;AAAA,sCAAC,QAAK,OAAM,QAAO,QAAO,QACxB;AAAA,oBAAC;AAAA;AAAA,sBACC,KAAK,YAAY;AAAA,sBACjB,KAAK,YAAY;AAAA,sBACjB,WAAU;AAAA;AAAA,kBACZ,GACF;AAAA,kBACC,YAAY;AAAA,mBACf;AAAA;AAAA,cAfK,QAAQ,YAAY,qBAAqB,YAAY;AAAA,YAgB5D;AAAA,UAEJ,CAAC,GACH;AAAA,UAqBA,oBAAC,oBAAiB;AAAA,WACpB;AAAA;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,oBAAC,SAAI,WAAU,oCAAmC,OAAO,EAAE,OAAc,OAAe,GACrF,UACH;AAEJ;","names":[]}

package/dist/chunk-WJHSY5T6.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-WJHSY5T6.mjs.map

package/dist/chunk-WJHSY5T6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-XW3ICO4S.mjs

@@ -0,0 +1,25 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-MRXNTQOX.mjs";
+
+// src/components/base-copilot-textarea/render-placeholder.tsx
+import { jsx } from "react/jsx-runtime";
+function makeRenderPlaceholderFunction(placeholderStyle) {
+  return (props) => {
+    const _a = props.attributes, { style } = _a, restAttributes = __objRest(_a, ["style"]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({}, restAttributes), {
+        style: __spreadValues(__spreadValues({}, style), placeholderStyle),
+        children: props.children
+      })
+    );
+  };
+}
+
+export {
+  makeRenderPlaceholderFunction
+};
+//# sourceMappingURL=chunk-XW3ICO4S.mjs.map

package/dist/chunk-XW3ICO4S.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/base-copilot-textarea/render-placeholder.tsx"],"sourcesContent":["import { RenderPlaceholderProps } from \"slate-react\";\n\nexport type RenderPlaceholderFunction = (props: RenderPlaceholderProps) => JSX.Element;\n\nexport function makeRenderPlaceholderFunction(\n  placeholderStyle?: React.CSSProperties,\n): RenderPlaceholderFunction {\n  return (props: RenderPlaceholderProps) => {\n    const { style, ...restAttributes } = props.attributes;\n\n    return (\n      <div\n        {...restAttributes}\n        style={{\n          ...style,\n          ...placeholderStyle,\n        }}\n      >\n        {props.children}\n      </div>\n    );\n  };\n}\n"],"mappings":";;;;;;;AAWM;AAPC,SAAS,8BACd,kBAC2B;AAC3B,SAAO,CAAC,UAAkC;AACxC,UAAqC,WAAM,YAAnC,QARZ,IAQyC,IAAnB,2BAAmB,IAAnB,CAAV;AAER,WACE;AAAA,MAAC;AAAA,uCACK,iBADL;AAAA,QAEC,OAAO,kCACF,QACA;AAAA,QAGJ,gBAAM;AAAA;AAAA,IACT;AAAA,EAEJ;AACF;","names":[]}

package/dist/chunk-YLFAIYRY.mjs

@@ -0,0 +1,50 @@
+import {
+  __async
+} from "./chunk-MRXNTQOX.mjs";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function fetcher(input, init) {
+  return __async(this, null, function* () {
+    const res = yield fetch(input, init);
+    if (!res.ok) {
+      const json = yield res.json();
+      if (json.error) {
+        const error = new Error(json.error);
+        error.status = res.status;
+        throw error;
+      } else {
+        throw new Error("An unexpected error occurred");
+      }
+    }
+    return res.json();
+  });
+}
+function formatDate(input) {
+  const date = new Date(input);
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+var arraysAreEqual = (arr1, arr2) => arr1.length === arr2.length && arr1.every((value, index) => value === arr2[index]);
+function nullableCompatibleEqualityCheck(naiveEqualityCheck, a, b) {
+  if (a === null || a === void 0 || b === null || b === void 0) {
+    return a === b;
+  }
+  return naiveEqualityCheck(a, b);
+}
+
+export {
+  cn,
+  fetcher,
+  formatDate,
+  arraysAreEqual,
+  nullableCompatibleEqualityCheck
+};
+//# sourceMappingURL=chunk-YLFAIYRY.mjs.map

package/dist/chunk-YLFAIYRY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport async function fetcher<JSON = any>(input: RequestInfo, init?: RequestInit): Promise<JSON> {\n  const res = await fetch(input, init);\n\n  if (!res.ok) {\n    const json = await res.json();\n    if (json.error) {\n      const error = new Error(json.error) as Error & {\n        status: number;\n      };\n      error.status = res.status;\n      throw error;\n    } else {\n      throw new Error(\"An unexpected error occurred\");\n    }\n  }\n\n  return res.json();\n}\n\nexport function formatDate(input: string | number | Date): string {\n  const date = new Date(input);\n  return date.toLocaleDateString(\"en-US\", {\n    month: \"long\",\n    day: \"numeric\",\n    year: \"numeric\",\n  });\n}\n\nexport const arraysAreEqual = (arr1: number[], arr2: number[]): boolean =>\n  arr1.length === arr2.length && arr1.every((value, index) => value === arr2[index]);\n\nexport function nullableCompatibleEqualityCheck<T>(\n  naiveEqualityCheck: (a: T, b: T) => boolean,\n  a: T | null | undefined,\n  b: T | null | undefined,\n): boolean {\n  if (a === null || a === undefined || b === null || b === undefined) {\n    return a === b;\n  }\n\n  return naiveEqualityCheck(a, b);\n}\n"],"mappings":";;;;;AAAA,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;AAEA,SAAsB,QAAoB,OAAoB,MAAmC;AAAA;AAC/F,UAAM,MAAM,MAAM,MAAM,OAAO,IAAI;AAEnC,QAAI,CAAC,IAAI,IAAI;AACX,YAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,UAAI,KAAK,OAAO;AACd,cAAM,QAAQ,IAAI,MAAM,KAAK,KAAK;AAGlC,cAAM,SAAS,IAAI;AACnB,cAAM;AAAA,MACR,OAAO;AACL,cAAM,IAAI,MAAM,8BAA8B;AAAA,MAChD;AAAA,IACF;AAEA,WAAO,IAAI,KAAK;AAAA,EAClB;AAAA;AAEO,SAAS,WAAW,OAAuC;AAChE,QAAM,OAAO,IAAI,KAAK,KAAK;AAC3B,SAAO,KAAK,mBAAmB,SAAS;AAAA,IACtC,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,EACR,CAAC;AACH;AAEO,IAAM,iBAAiB,CAAC,MAAgB,SAC7C,KAAK,WAAW,KAAK,UAAU,KAAK,MAAM,CAAC,OAAO,UAAU,UAAU,KAAK,KAAK,CAAC;AAE5E,SAAS,gCACd,oBACA,GACA,GACS;AACT,MAAI,MAAM,QAAQ,MAAM,UAAa,MAAM,QAAQ,MAAM,QAAW;AAClE,WAAO,MAAM;AAAA,EACf;AAEA,SAAO,mBAAmB,GAAG,CAAC;AAChC;","names":[]}

package/dist/components/base-copilot-textarea/base-copilot-textarea.css

@@ -0,0 +1,9 @@
+/* src/components/base-copilot-textarea/base-copilot-textarea.css */
+.copilot-kit-textarea-css-scope .copilot-textarea.with-branding::after {
+  content: "";
+  position: absolute;
+}
+.copilot-kit-textarea-css-scope .copilot-textarea.no-branding::after {
+  content: "";
+}
+/*# sourceMappingURL=base-copilot-textarea.css.map */

package/dist/components/base-copilot-textarea/base-copilot-textarea.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/base-copilot-textarea/base-copilot-textarea.css"],"sourcesContent":[".copilot-kit-textarea-css-scope .copilot-textarea.with-branding::after {\n    content: ''; /* Initially empty because we overrdie this CSS dynamically and we want to avoid flashing */\n    position: absolute;\n}\n    \n  \n.copilot-kit-textarea-css-scope .copilot-textarea.no-branding::after {\n    content: '';\n}"],"mappings":";AAAA;AACI;AACA;AAAA;AAIJ;AACI;AAAA;","names":[]}

package/dist/components/base-copilot-textarea/base-copilot-textarea.d.ts

@@ -40,4 +40,4 @@ interface HTMLCopilotTextAreaElement extends HTMLElement {
  */
 declare const BaseCopilotTextarea: React__default.ForwardRefExoticComponent<BaseCopilotTextareaProps & React__default.RefAttributes<HTMLCopilotTextAreaElement>>;
 
-export { BaseCopilotTextarea, type HTMLCopilotTextAreaElement };
+export { BaseCopilotTextarea, HTMLCopilotTextAreaElement };

package/dist/components/base-copilot-textarea/base-copilot-textarea.js

@@ -782,8 +782,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: [
@@ -917,9 +919,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: () => {
@@ -927,13 +971,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,
@@ -1028,10 +1071,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,
@@ -1056,29 +1099,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,
@@ -1090,7 +1133,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",
@@ -1099,15 +1142,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,
@@ -1126,14 +1170,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: {
@@ -1152,7 +1196,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, {
@@ -1164,7 +1208,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,
@@ -1179,10 +1223,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",
@@ -1209,7 +1272,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,
@@ -1229,7 +1292,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)();
@@ -1292,12 +1355,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),
@@ -1331,22 +1394,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),
@@ -1360,11 +1423,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),
@@ -1476,7 +1539,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,
@@ -1491,7 +1554,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);
@@ -1499,8 +1562,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) {
@@ -1512,10 +1577,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(
@@ -1643,7 +1708,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,
@@ -1663,13 +1728,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,
@@ -1677,7 +1742,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,