@copilotkit/react-textarea 1.3.0 → 1.3.1

package/dist/components/index.js

@@ -785,8 +785,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: [
@@ -920,9 +922,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: () => {
@@ -930,13 +974,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,
@@ -1031,10 +1074,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,
@@ -1059,29 +1102,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,
@@ -1093,7 +1136,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",
@@ -1102,15 +1145,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,
@@ -1129,14 +1173,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: {
@@ -1155,7 +1199,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, {
@@ -1167,7 +1211,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,
@@ -1182,10 +1226,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",
@@ -1212,7 +1275,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,
@@ -1232,7 +1295,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)();
@@ -1295,12 +1358,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),
@@ -1334,22 +1397,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),
@@ -1363,11 +1426,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),
@@ -1479,7 +1542,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,
@@ -1494,7 +1557,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);
@@ -1502,8 +1565,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) {
@@ -1515,10 +1580,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(
@@ -1646,7 +1711,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,
@@ -1666,13 +1731,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,
@@ -1680,7 +1745,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,
@@ -2195,7 +2260,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"]);
@@ -2214,7 +2279,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