@copilotkit/react-textarea 1.3.0 → 1.3.1

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

@@ -1,116 +1,14 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
-// src/components/hovering-toolbar/hovering-toolbar-components.tsx
-import { css, cx } from "@emotion/css";
-import React from "react";
-import ReactDOM from "react-dom";
-import { jsx } from "react/jsx-runtime";
-var Button = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      className,
-      active,
-      reversed
-    } = _b, props = __objRest(_b, [
-      "className",
-      "active",
-      "reversed"
-    ]);
-    return /* @__PURE__ */ jsx(
-      "span",
-      __spreadProps(__spreadValues({}, props), {
-        ref,
-        className: cx(
-          className,
-          css`
-          cursor: pointer;
-          color: ${reversed ? active ? "white" : "#aaa" : active ? "black" : "#ccc"};
-        `
-        )
-      })
-    );
-  }
-);
-var Menu = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ jsx(
-      "div",
-      __spreadProps(__spreadValues({}, props), {
-        "data-test-id": "menu",
-        ref,
-        className: cx(
-          className,
-          css`
-            & > * {
-              display: inline-block;
-            }
-
-            & > * + * {
-              margin-left: 15px;
-            }
-          `
-        )
-      })
-    );
-  }
-);
-var Portal = ({ children }) => {
-  return typeof document === "object" ? ReactDOM.createPortal(children, document.body) : null;
-};
-var Toolbar = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ jsx(
-      Menu,
-      __spreadProps(__spreadValues({}, props), {
-        ref,
-        className: cx(
-          className,
-          css`
-          position: relative;
-          padding: 1px 18px 17px;
-          margin: 0 -20px;
-          border-bottom: 2px solid #eee;
-          margin-bottom: 20px;
-        `
-        )
-      })
-    );
-  }
-);
+import {
+  Button,
+  Icon,
+  Menu,
+  Portal,
+  Toolbar
+} from "../../chunk-CF5GISTC.mjs";
+import "../../chunk-MRXNTQOX.mjs";
 export {
   Button,
+  Icon,
   Menu,
   Portal,
   Toolbar

package/dist/components/hovering-toolbar/hovering-toolbar-components.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/hovering-toolbar/hovering-toolbar-components.tsx"],"sourcesContent":["import { css, cx } from \"@emotion/css\";\nimport React, { PropsWithChildren, Ref } from \"react\";\nimport ReactDOM from \"react-dom\";\n\ninterface BaseProps {\n  className: string;\n  [key: string]: unknown;\n}\n\nexport const Button = React.forwardRef(\n  (\n    {\n      className,\n      active,\n      reversed,\n      ...props\n    }: PropsWithChildren<\n      {\n        active: boolean;\n        reversed: boolean;\n      } & BaseProps\n    >,\n    ref: Ref<HTMLSpanElement | null>,\n  ) => (\n    <span\n      {...props}\n      ref={ref as Ref<HTMLSpanElement>}\n      className={cx(\n        className,\n        css`\n          cursor: pointer;\n          color: ${reversed ? (active ? \"white\" : \"#aaa\") : active ? \"black\" : \"#ccc\"};\n        `,\n      )}\n    />\n  ),\n);\n\nexport const Menu = React.forwardRef(\n  ({ className, ...props }: PropsWithChildren<BaseProps>, ref: Ref<HTMLDivElement | null>) => {\n    return (\n      <div\n        {...props}\n        data-test-id=\"menu\"\n        ref={ref as Ref<HTMLDivElement>}\n        className={cx(\n          className,\n          css`\n            & > * {\n              display: inline-block;\n            }\n\n            & > * + * {\n              margin-left: 15px;\n            }\n          `,\n        )}\n      />\n    );\n  },\n);\nexport const Portal = ({ children }: { children: React.ReactNode }) => {\n  return typeof document === \"object\" ? ReactDOM.createPortal(children, document.body) : null;\n};\n\nexport const Toolbar = React.forwardRef(\n  ({ className, ...props }: PropsWithChildren<BaseProps>, ref?: Ref<HTMLDivElement>) => (\n    <Menu\n      {...props}\n      ref={ref}\n      className={cx(\n        className,\n        css`\n          position: relative;\n          padding: 1px 18px 17px;\n          margin: 0 -20px;\n          border-bottom: 2px solid #eee;\n          margin-bottom: 20px;\n        `,\n      )}\n    />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,KAAK,UAAU;AACxB,OAAO,WAAuC;AAC9C,OAAO,cAAc;AAsBjB;AAfG,IAAM,SAAS,MAAM;AAAA,EAC1B,CACE,IAWA,QACA;AAZA,iBACE;AAAA;AAAA,MACA;AAAA,MACA;AAAA,IAdN,IAWI,IAIK,kBAJL,IAIK;AAAA,MAHH;AAAA,MACA;AAAA,MACA;AAAA;AAUF;AAAA,MAAC;AAAA,uCACK,QADL;AAAA,QAEC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA,mBAEW,WAAY,SAAS,UAAU,SAAU,SAAS,UAAU,MAAM;AAAA;AAAA,QAE/E;AAAA;AAAA,IACF;AAAA;AAEJ;AAEO,IAAM,OAAO,MAAM;AAAA,EACxB,CAAC,IAAuD,QAAoC;AAA3F,iBAAE,YAvCL,IAuCG,IAAgB,kBAAhB,IAAgB,CAAd;AACD,WACE;AAAA,MAAC;AAAA,uCACK,QADL;AAAA,QAEC,gBAAa;AAAA,QACb;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACO,IAAM,SAAS,CAAC,EAAE,SAAS,MAAqC;AACrE,SAAO,OAAO,aAAa,WAAW,SAAS,aAAa,UAAU,SAAS,IAAI,IAAI;AACzF;AAEO,IAAM,UAAU,MAAM;AAAA,EAC3B,CAAC,IAAuD,QAA2B;AAAlF,iBAAE,YAlEL,IAkEG,IAAgB,kBAAhB,IAAgB,CAAd;AACD;AAAA,MAAC;AAAA,uCACK,QADL;AAAA,QAEC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOF;AAAA;AAAA,IACF;AAAA;AAEJ;","names":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/hovering-toolbar/hovering-toolbar.d.ts

@@ -9,4 +9,4 @@ interface HoveringToolbarProps {
 }
 declare const HoveringToolbar: (props: HoveringToolbarProps) => react_jsx_runtime.JSX.Element | null;
 
-export { HoveringToolbar, type HoveringToolbarProps };
+export { HoveringToolbar, HoveringToolbarProps };

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

@@ -219,8 +219,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: [
@@ -354,9 +356,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_react3 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var HoveringEditorContext = (0, import_react3.createContext)({
   isDisplayed: false,
   setIsDisplayed: () => {
@@ -365,8 +409,7 @@ var HoveringEditorContext = (0, import_react3.createContext)({
 var useHoveringEditorContext = () => (0, import_react3.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,
@@ -461,10 +504,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,
@@ -489,29 +532,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,
@@ -523,7 +566,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",
@@ -532,15 +575,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,
@@ -559,14 +603,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: {
@@ -585,7 +629,7 @@ var HoveringInsertionPromptBox = (props) => {
 var import_css = require("@emotion/css");
 var import_react5 = __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_react5.default.forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -597,7 +641,7 @@ var Button2 = import_react5.default.forwardRef(
       "active",
       "reversed"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "span",
       __spreadProps(__spreadValues({}, props), {
         ref,
@@ -612,10 +656,29 @@ var Button2 = import_react5.default.forwardRef(
     );
   }
 );
+var Icon = import_react5.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "span",
+      __spreadProps(__spreadValues({}, props), {
+        ref,
+        className: (0, import_css.cx)(
+          "material-icons",
+          className,
+          import_css.css`
+          font-size: 18px;
+          vertical-align: text-bottom;
+        `
+        )
+      })
+    );
+  }
+);
 var Menu = import_react5.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "div",
       __spreadProps(__spreadValues({}, props), {
         "data-test-id": "menu",
@@ -642,7 +705,7 @@ var Portal = ({ children }) => {
 var Toolbar = import_react5.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,
@@ -737,7 +800,7 @@ function wellOrderedRange(range) {
 }
 
 // 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_react6.useRef)(null);
   const editor = (0, import_slate_react.useSlate)();
@@ -800,12 +863,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),