@copilotkit/react-textarea 0.29.0-alpha.0 → 0.29.0

package/dist/components/hovering-toolbar/text-insertion-prompt-box/index.mjs

@@ -1,12 +1,13 @@
 import "../../../chunk-L7VVZH4Q.mjs";
 import {
   HoveringInsertionPromptBox
-} from "../../../chunk-BBZ7AWOB.mjs";
-import "../../../chunk-VB4VNCIQ.mjs";
+} from "../../../chunk-4H2O7MYQ.mjs";
+import "../../../chunk-K7GVTNZU.mjs";
 import "../../../chunk-SX6NY5FW.mjs";
 import "../../../chunk-3PQ7GSFE.mjs";
 import "../../../chunk-WFTAAA7R.mjs";
 import "../../../chunk-KFQZHRPJ.mjs";
+import "../../../chunk-LYB4B6MK.mjs";
 import "../../../chunk-FJNUPSQK.mjs";
 import "../../../chunk-WTASPE2W.mjs";
 import "../../../chunk-PTZVE6NC.mjs";

package/dist/components/index.js

@@ -639,8 +639,8 @@ function clearAutocompletionsFromEditor(editor) {
 
 // src/types/base/base-autosuggestions-config.tsx
 var import_react_core = require("@copilotkit/react-core");
-var defaultShouldToggleHoveringEditorOnKeyPress = (event) => {
-  if (event.key === "k" && event.metaKey) {
+var defaultShouldToggleHoveringEditorOnKeyPress = (event, shortcut) => {
+  if (event.key === shortcut && event.metaKey) {
     return true;
   }
   return false;
@@ -898,7 +898,7 @@ var Label = React4.forwardRef((_a, ref) => {
 Label.displayName = LabelPrimitive.Root.displayName;
 
 // src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box-core.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/lib/stream-promise-flatten.ts
 function streamPromiseFlatten(promise) {
@@ -969,37 +969,51 @@ var FileChipPreview = ({ filePointer, onDelete }) => {
   );
 };
 
-// src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box-core.tsx
+// src/components/hovering-toolbar/hovering-editor-provider.tsx
+var import_react6 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var HoveringEditorContext = (0, import_react6.createContext)({
+  isDisplayed: false,
+  setIsDisplayed: () => {
+  }
+});
+var HoveringEditorProvider = ({ children }) => {
+  const [isDisplayed, setIsDisplayed] = (0, import_react6.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HoveringEditorContext.Provider, { value: { isDisplayed, setIsDisplayed }, children });
+};
+var useHoveringEditorContext = () => (0, import_react6.useContext)(HoveringEditorContext);
+
+// src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box-core.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var HoveringInsertionPromptBoxCore = ({
   performInsertion,
   state,
   insertionOrEditingFunction,
   contextCategories
 }) => {
-  const { getDocumentsContext } = (0, import_react6.useContext)(import_react_core2.CopilotContext);
-  const [editSuggestion, setEditSuggestion] = (0, import_react6.useState)("");
-  const [suggestionIsLoading, setSuggestionIsLoading] = (0, import_react6.useState)(false);
-  const [adjustmentPrompt, setAdjustmentPrompt] = (0, import_react6.useState)("");
-  const [generatingSuggestion, setGeneratingSuggestion] = (0, import_react6.useState)(
+  const { getDocumentsContext } = (0, import_react7.useContext)(import_react_core2.CopilotContext);
+  const [editSuggestion, setEditSuggestion] = (0, import_react7.useState)("");
+  const [suggestionIsLoading, setSuggestionIsLoading] = (0, import_react7.useState)(false);
+  const [adjustmentPrompt, setAdjustmentPrompt] = (0, import_react7.useState)("");
+  const [generatingSuggestion, setGeneratingSuggestion] = (0, import_react7.useState)(
     null
   );
-  const adjustmentTextAreaRef = (0, import_react6.useRef)(null);
-  const suggestionTextAreaRef = (0, import_react6.useRef)(null);
-  const [filePointers, setFilePointers] = (0, import_react6.useState)([]);
-  const [suggestedFiles, setSuggestedFiles] = (0, import_react6.useState)([]);
-  (0, import_react6.useEffect)(() => {
+  const adjustmentTextAreaRef = (0, import_react7.useRef)(null);
+  const suggestionTextAreaRef = (0, import_react7.useRef)(null);
+  const [filePointers, setFilePointers] = (0, import_react7.useState)([]);
+  const [suggestedFiles, setSuggestedFiles] = (0, import_react7.useState)([]);
+  (0, import_react7.useEffect)(() => {
     setSuggestedFiles(getDocumentsContext(contextCategories));
   }, [contextCategories, getDocumentsContext]);
   use_autosize_textarea_default(suggestionTextAreaRef, editSuggestion || "");
   use_autosize_textarea_default(adjustmentTextAreaRef, adjustmentPrompt || "");
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     setTimeout(() => {
       var _a;
       (_a = adjustmentTextAreaRef.current) == null ? void 0 : _a.focus();
     }, 0);
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!generatingSuggestion) {
       return;
     }
@@ -1037,7 +1051,7 @@ var HoveringInsertionPromptBoxCore = ({
       releaseLockIfNotClosed();
     };
   }, [generatingSuggestion]);
-  const beginGeneratingAdjustment = (0, import_react6.useCallback)(() => __async(void 0, null, function* () {
+  const beginGeneratingAdjustment = (0, import_react7.useCallback)(() => __async(void 0, null, function* () {
     if (!adjustmentPrompt.trim()) {
       return;
     }
@@ -1066,10 +1080,11 @@ var HoveringInsertionPromptBoxCore = ({
   const textToEdit = editSuggestion || state.editorState.selectedText;
   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 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 { setIsDisplayed } = useHoveringEditorContext();
+  const AdjustmentPromptComponent = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Label, { className: "", children: adjustmentLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative w-full flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "textarea",
         {
           disabled: suggestionIsLoading,
@@ -1083,6 +1098,9 @@ var HoveringInsertionPromptBoxCore = ({
             } else if (e.key === "Enter") {
               e.preventDefault();
               beginGeneratingAdjustment();
+            } else if (e.key == "Escape") {
+              e.preventDefault();
+              setIsDisplayed(false);
             }
           },
           placeholder,
@@ -1091,29 +1109,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)("i", { className: "material-icons", children: "arrow_forward" })
+          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,
@@ -1125,7 +1143,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",
@@ -1134,16 +1152,16 @@ var HoveringInsertionPromptBoxCore = ({
       },
       children: [
         "Insert ",
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("i", { className: "material-icons", children: "check" })
+        /* @__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,
-    filePointers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IncludedFilesPreview, { includedFiles: filePointers, setIncludedFiles: setFilePointers }),
-    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,
@@ -1162,14 +1180,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: {
@@ -1186,10 +1204,10 @@ var HoveringInsertionPromptBox = (props) => {
 
 // src/components/hovering-toolbar/hovering-toolbar-components.tsx
 var import_css = require("@emotion/css");
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_react_dom = __toESM(require("react-dom"));
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Button2 = import_react7.default.forwardRef(
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Button2 = import_react8.default.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1200,7 +1218,7 @@ var Button2 = import_react7.default.forwardRef(
       "active",
       "reversed"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "span",
       __spreadProps(__spreadValues({}, props), {
         ref,
@@ -1215,10 +1233,10 @@ var Button2 = import_react7.default.forwardRef(
     );
   }
 );
-var Icon = import_react7.default.forwardRef(
+var Icon = 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)(
       "span",
       __spreadProps(__spreadValues({}, props), {
         ref,
@@ -1234,10 +1252,10 @@ var Icon = import_react7.default.forwardRef(
     );
   }
 );
-var Menu = import_react7.default.forwardRef(
+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",
@@ -1261,10 +1279,10 @@ var Menu = import_react7.default.forwardRef(
 var Portal = ({ children }) => {
   return typeof document === "object" ? import_react_dom.default.createPortal(children, document.body) : null;
 };
-var Toolbar = import_react7.default.forwardRef(
+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,
@@ -1283,20 +1301,6 @@ var Toolbar = import_react7.default.forwardRef(
   }
 );
 
-// src/components/hovering-toolbar/hovering-editor-provider.tsx
-var import_react8 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var HoveringEditorContext = (0, import_react8.createContext)({
-  isDisplayed: false,
-  setIsDisplayed: () => {
-  }
-});
-var HoveringEditorProvider = ({ children }) => {
-  const [isDisplayed, setIsDisplayed] = (0, import_react8.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HoveringEditorContext.Provider, { value: { isDisplayed, setIsDisplayed }, children });
-};
-var useHoveringEditorContext = () => (0, import_react8.useContext)(HoveringEditorContext);
-
 // src/components/hovering-toolbar/hovering-toolbar.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var HoveringToolbar = (props) => {
@@ -1636,7 +1640,8 @@ var BaseCopilotTextareaWithHoveringContext = import_react12.default.forwardRef(
     );
     const onKeyDownHandlerForHoveringEditor = (0, import_react12.useCallback)(
       (event) => {
-        if (autosuggestionsConfig.shouldToggleHoveringEditorOnKeyPress(event)) {
+        var _a2;
+        if (autosuggestionsConfig.shouldToggleHoveringEditorOnKeyPress(event, (_a2 = props.shortcut) != null ? _a2 : "k")) {
           event.preventDefault();
           setHoveringEditorIsDisplayed(!hoveringEditorIsDisplayed);
         }