@copilotkit/react-ui 1.4.7 → 1.4.8-no-pino-redact.1

package/dist/components/index.js

@@ -882,7 +882,10 @@ var Input = ({ inProgress, onSend, isVisible = false }) => {
   });
   const sendIcon = inProgress || pushToTalkState === "transcribing" ? context.icons.activityIcon : context.icons.sendIcon;
   const showPushToTalk = pushToTalkConfigured && (pushToTalkState === "idle" || pushToTalkState === "recording") && !inProgress;
-  const sendDisabled = inProgress || text.length === 0 || pushToTalkState !== "idle";
+  const canSend = () => {
+    return !inProgress && text.trim().length > 0 && pushToTalkState === "idle";
+  };
+  const sendDisabled = !canSend();
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "copilotKitInput", onClick: handleDivClick, children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Textarea_default,
@@ -896,7 +899,9 @@ var Input = ({ inProgress, onSend, isVisible = false }) => {
         onKeyDown: (event) => {
           if (event.key === "Enter" && !event.shiftKey) {
             event.preventDefault();
-            send();
+            if (canSend()) {
+              send();
+            }
           }
         }
       }
@@ -1939,15 +1944,79 @@ var CloseIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
   }
 );
+var LoadingSpinnerIcon = ({ color = "rgb(107 114 128)" }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  "svg",
+  {
+    style: {
+      animation: "copilotKitSpinAnimation 1s linear infinite",
+      color
+    },
+    width: "24",
+    height: "24",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "circle",
+        {
+          style: { opacity: 0.25 },
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "4"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "path",
+        {
+          style: { opacity: 0.75 },
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        }
+      )
+    ]
+  }
+);
 
 // src/components/help-modal/modal.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function CopilotKitHelpModal() {
   const [showHelpModal, setShowHelpModal] = (0, import_react9.useState)(false);
   const [issueDescription, setIssueDescription] = (0, import_react9.useState)("");
-  const handleSubmit = () => {
-    setShowHelpModal(false);
+  const [email, setEmail] = (0, import_react9.useState)("");
+  const [emailError, setEmailError] = (0, import_react9.useState)("");
+  const [submitting, setSubmitting] = (0, import_react9.useState)(false);
+  const validateEmail = (email2) => {
+    const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    return re.test(email2);
   };
+  const handleSubmit = (e) => __async(this, null, function* () {
+    e.preventDefault();
+    if ((email == null ? void 0 : email.length) > 0 && !validateEmail(email)) {
+      setEmailError("Please enter a valid email address");
+      return;
+    }
+    setSubmitting(true);
+    yield fetch("https://api.segment.io/v1/track", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        event: "oss.dev-console.help",
+        anonymousId: window.crypto.randomUUID(),
+        properties: { email, text: issueDescription },
+        writeKey: "q0gQqvGYyw9pNyhIocNzefSYKGO1aiwW"
+      })
+    });
+    setEmailError("");
+    setEmail("");
+    setIssueDescription("");
+    setSubmitting(false);
+    setShowHelpModal(false);
+  });
   const HelpButton = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "button",
     {
@@ -1957,6 +2026,10 @@ function CopilotKitHelpModal() {
       children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LifeBuoyIcon, {})
     }
   );
+  const submitButtonDisabled = (0, import_react9.useMemo)(
+    () => submitting || !!emailError || issueDescription == null || (issueDescription == null ? void 0 : issueDescription.length) == 0,
+    [submitting, emailError, issueDescription]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(HelpButton, {}),
     showHelpModal && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -1995,6 +2068,52 @@ function CopilotKitHelpModal() {
                 children: "Apply for Priority Direct Slack Support"
               }
             ) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("form", { onSubmit: handleSubmit, className: "flex flex-col space-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { htmlFor: "feedback", className: "block text-sm font-medium text-gray-700 mb-1", children: "Let us know what your issue is:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                "textarea",
+                {
+                  id: "feedback",
+                  rows: 4,
+                  className: "w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:border-blue-500",
+                  placeholder: "A Loom link / screen recording is always great!",
+                  onChange: (e) => setIssueDescription(e.target.value),
+                  value: issueDescription,
+                  required: true
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700 mb-1", children: "Email (optional):" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                "input",
+                {
+                  type: "email",
+                  id: "email",
+                  className: `w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:border-blue-500 ${emailError ? "border-red-500" : ""}`,
+                  placeholder: "Enter your email for follow-up",
+                  onChange: (e) => {
+                    setEmail(e.target.value);
+                    setEmailError("");
+                  },
+                  value: email
+                }
+              ),
+              emailError && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-red-500 text-sm mt-1", children: emailError })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "bg-gray-50 px-4 py-4 sm:px-6 sm:flex sm:flex-row-reverse rounded-b-lg", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              "button",
+              {
+                type: "submit",
+                onClick: handleSubmit,
+                disabled: submitButtonDisabled,
+                style: submitButtonDisabled ? { backgroundColor: "rgb(216, 216, 216)", color: "rgb(129, 129, 129)" } : void 0,
+                className: "w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-500 text-base font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm disabled:shadow-none",
+                children: submitting ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LoadingSpinnerIcon, { color: "white" }) : "Submit"
+              }
+            ) })
           ] })
         ] })
       }