@copilotkit/react-ui 1.7.2-next.1 → 1.8.0-next.3

package/dist/components/help-modal/index.js

@@ -16,26 +16,6 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 
 // src/components/help-modal/index.tsx
 var help_modal_exports = {};
@@ -62,101 +42,49 @@ var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
   }
 );
-var LoadingSpinnerIcon = ({ color = "rgb(107 114 128)" }) => /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)(
-        "circle",
-        {
-          style: { opacity: 0.25 },
-          cx: "12",
-          cy: "12",
-          r: "10",
-          stroke: "currentColor",
-          strokeWidth: "4"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.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_runtime2 = require("react/jsx-runtime");
 function CopilotKitHelpModal() {
   const [showHelpModal, setShowHelpModal] = (0, import_react.useState)(false);
-  const [issueDescription, setIssueDescription] = (0, import_react.useState)("");
-  const [email, setEmail] = (0, import_react.useState)("");
-  const [emailError, setEmailError] = (0, import_react.useState)("");
-  const [submitting, setSubmitting] = (0, import_react.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;
+  const buttonRef = (0, import_react.useRef)(null);
+  const popoverRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (popoverRef.current && !popoverRef.current.contains(event.target) && buttonRef.current && !buttonRef.current.contains(event.target)) {
+        setShowHelpModal(false);
+      }
+    };
+    if (showHelpModal) {
+      document.addEventListener("mousedown", handleClickOutside);
     }
-    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);
-  });
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showHelpModal]);
   const HelpButton = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
-      onClick: () => setShowHelpModal(true),
-      style: { width: "50px", height: "30px", marginRight: "0.25rem" },
-      className: "text-sm p-0 bg-transparent rounded border border-blue-500",
+      ref: buttonRef,
+      onClick: () => setShowHelpModal(!showHelpModal),
+      className: "copilotKitDebugMenuTriggerButton relative",
       "aria-label": "Open Help",
       children: "Help"
     }
   );
-  const submitButtonDisabled = (0, import_react.useMemo)(
-    () => submitting || !!emailError || issueDescription == null || (issueDescription == null ? void 0 : issueDescription.length) == 0,
-    [submitting, emailError, issueDescription]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HelpButton, {}),
     showHelpModal && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "div",
       {
-        className: "fixed inset-0 flex items-center justify-center p-4",
-        style: { backgroundColor: "rgba(11, 15, 26, 0.5)", zIndex: 99 },
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-white rounded-lg shadow-xl max-w-md w-full p-4 flex-col relative", children: [
+        ref: popoverRef,
+        className: "absolute mt-2 z-50",
+        style: {
+          top: "100%",
+          right: "-120px",
+          width: "380px"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-white rounded-lg shadow-xl w-full p-4 flex-col relative", children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "button",
             {
@@ -169,7 +97,7 @@ function CopilotKitHelpModal() {
           ),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-full flex mb-6 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "text-2xl font-bold", children: "Help Options" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-4 mb-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "copilotKitHelpItemButton", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "a",
               {
                 href: "https://docs.copilotkit.ai/coagents/troubleshooting/common-issues",
@@ -178,7 +106,7 @@ function CopilotKitHelpModal() {
                 children: "Visit the Troubleshooting and FAQ section in the docs"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "copilotKitHelpItemButton", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "a",
               {
                 href: "https://go.copilotkit.ai/dev-console-support-discord",
@@ -187,7 +115,7 @@ function CopilotKitHelpModal() {
                 children: "Go to Discord Support Channel (Community Support)"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "copilotKitHelpItemButton", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "a",
               {
                 href: "https://go.copilotkit.ai/dev-console-support-slack",
@@ -196,52 +124,6 @@ function CopilotKitHelpModal() {
                 children: "Apply for Priority Direct Slack Support"
               }
             ) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleSubmit, className: "flex flex-col space-y-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.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_runtime2.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700 mb-1", children: "Email (optional):" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)("p", { className: "text-red-500 text-sm mt-1", children: emailError })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.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_runtime2.jsx)(LoadingSpinnerIcon, { color: "white" }) : "Submit"
-              }
-            ) })
           ] })
         ] })
       }

package/dist/components/help-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/help-modal/index.tsx","../../../src/components/help-modal/modal.tsx","../../../src/components/help-modal/icons.tsx"],"sourcesContent":["export { CopilotKitHelpModal } from \"./modal\";\n","import React, { useMemo, useState } from \"react\";\nimport { CloseIcon, LifeBuoyIcon, LoadingSpinnerIcon } from \"./icons\";\n\nexport function CopilotKitHelpModal() {\n  const [showHelpModal, setShowHelpModal] = useState(false);\n  const [issueDescription, setIssueDescription] = useState(\"\");\n  const [email, setEmail] = useState(\"\");\n  const [emailError, setEmailError] = useState(\"\");\n  const [submitting, setSubmitting] = useState(false);\n\n  const validateEmail = (email: string) => {\n    const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/;\n    return re.test(email);\n  };\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    if (email?.length > 0 && !validateEmail(email)) {\n      setEmailError(\"Please enter a valid email address\");\n      return;\n    }\n    setSubmitting(true);\n\n    await fetch(\"https://api.segment.io/v1/track\", {\n      method: \"POST\",\n      headers: {\n        \"Content-Type\": \"application/json\",\n      },\n      body: JSON.stringify({\n        event: \"oss.dev-console.help\",\n        anonymousId: window.crypto.randomUUID(),\n        properties: { email, text: issueDescription },\n        writeKey: \"q0gQqvGYyw9pNyhIocNzefSYKGO1aiwW\",\n      }),\n    });\n\n    // Reset\n    setEmailError(\"\");\n    setEmail(\"\");\n    setIssueDescription(\"\");\n    setSubmitting(false);\n    setShowHelpModal(false);\n  };\n\n  const HelpButton = () => (\n    <button\n      onClick={() => setShowHelpModal(true)}\n      style={{ width: \"50px\", height: \"30px\", marginRight: \"0.25rem\" }}\n      className=\"text-sm p-0 bg-transparent rounded border border-blue-500\"\n      aria-label=\"Open Help\"\n    >\n      Help\n    </button>\n  );\n\n  const submitButtonDisabled = useMemo(\n    () => submitting || !!emailError || issueDescription == null || issueDescription?.length == 0,\n    [submitting, emailError, issueDescription],\n  );\n\n  return (\n    <>\n      <HelpButton />\n      {showHelpModal && (\n        <div\n          className=\"fixed inset-0 flex items-center justify-center p-4\"\n          style={{ backgroundColor: \"rgba(11, 15, 26, 0.5)\", zIndex: 99 }}\n        >\n          <div className=\"bg-white rounded-lg shadow-xl max-w-md w-full p-4 flex-col relative\">\n            <button\n              className=\"absolute text-gray-400 hover:text-gray-600 focus:outline-none\"\n              style={{ top: \"10px\", right: \"10px\" }}\n              onClick={() => setShowHelpModal(false)}\n              aria-label=\"Close\"\n            >\n              <CloseIcon />\n            </button>\n            <div className=\"w-full flex mb-6 justify-center\">\n              <h2 className=\"text-2xl font-bold\">Help Options</h2>\n            </div>\n            <div className=\"space-y-4 mb-4\">\n              <div className=\"block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm\">\n                <a\n                  href=\"https://docs.copilotkit.ai/coagents/troubleshooting/common-issues\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  Visit the Troubleshooting and FAQ section in the docs\n                </a>\n              </div>\n              <div className=\"block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm\">\n                <a\n                  href=\"https://go.copilotkit.ai/dev-console-support-discord\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  Go to Discord Support Channel (Community Support)\n                </a>\n              </div>\n              <div className=\"block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm\">\n                <a\n                  href=\"https://go.copilotkit.ai/dev-console-support-slack\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  Apply for Priority Direct Slack Support\n                </a>\n              </div>\n            </div>\n            <form onSubmit={handleSubmit} className=\"flex flex-col space-y-2\">\n              <div>\n                <label htmlFor=\"feedback\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Let us know what your issue is:\n                </label>\n                <textarea\n                  id=\"feedback\"\n                  rows={4}\n                  className=\"w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:border-blue-500\"\n                  placeholder=\"A Loom link / screen recording is always great!\"\n                  onChange={(e) => setIssueDescription(e.target.value)}\n                  value={issueDescription}\n                  required\n                ></textarea>\n              </div>\n              <div>\n                <label htmlFor=\"email\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Email (optional):\n                </label>\n                <input\n                  type=\"email\"\n                  id=\"email\"\n                  className={`w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:border-blue-500 ${emailError ? \"border-red-500\" : \"\"}`}\n                  placeholder=\"Enter your email for follow-up\"\n                  onChange={(e) => {\n                    setEmail(e.target.value);\n                    setEmailError(\"\");\n                  }}\n                  value={email}\n                />\n                {emailError && <p className=\"text-red-500 text-sm mt-1\">{emailError}</p>}\n              </div>\n              <div className=\"bg-gray-50 px-4 py-4 sm:px-6 sm:flex sm:flex-row-reverse rounded-b-lg\">\n                <button\n                  type=\"submit\"\n                  onClick={handleSubmit}\n                  disabled={submitButtonDisabled}\n                  style={\n                    submitButtonDisabled\n                      ? { backgroundColor: \"rgb(216, 216, 216)\", color: \"rgb(129, 129, 129)\" }\n                      : undefined\n                  }\n                  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\"\n                >\n                  {submitting ? <LoadingSpinnerIcon color=\"white\" /> : \"Submit\"}\n                </button>\n              </div>\n            </form>\n          </div>\n        </div>\n      )}\n    </>\n  );\n}\n","import React from \"react\";\n\nexport const LifeBuoyIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className=\"icon icon-tabler icons-tabler-outline icon-tabler-lifebuoy\"\n  >\n    <g transform=\"translate(0, -1)\">\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0\" />\n      <path d=\"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\" />\n      <path d=\"M15 15l3.35 3.35\" />\n      <path d=\"M9 15l-3.35 3.35\" />\n      <path d=\"M5.65 5.65l3.35 3.35\" />\n      <path d=\"M18.35 5.65l-3.35 3.35\" />\n    </g>\n  </svg>\n);\n\nexport const CloseIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    strokeWidth=\"1.5\"\n    stroke=\"currentColor\"\n    width=\"20\"\n    height=\"20\"\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n);\n\nexport const LoadingSpinnerIcon = ({ color = \"rgb(107 114 128)\" }: { color?: string }) => (\n  <svg\n    style={{\n      animation: \"copilotKitSpinAnimation 1s linear infinite\",\n      color,\n    }}\n    width=\"24\"\n    height=\"24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n  >\n    <circle\n      style={{ opacity: 0.25 }}\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      strokeWidth=\"4\"\n    ></circle>\n    <path\n      style={{ opacity: 0.75 }}\n      fill=\"currentColor\"\n      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\"\n    ></path>\n  </svg>\n);\n"],"mappings":"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","names":["import_jsx_runtime","email"]}
+{"version":3,"sources":["../../../src/components/help-modal/index.tsx","../../../src/components/help-modal/modal.tsx","../../../src/components/help-modal/icons.tsx"],"sourcesContent":["export { CopilotKitHelpModal } from \"./modal\";\n","import React, { useMemo, useState, useRef, useEffect } from \"react\";\nimport { CloseIcon } from \"./icons\";\n\nexport function CopilotKitHelpModal() {\n  const [showHelpModal, setShowHelpModal] = useState(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n\n  // Close popover when clicking outside\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        popoverRef.current &&\n        !popoverRef.current.contains(event.target as Node) &&\n        buttonRef.current &&\n        !buttonRef.current.contains(event.target as Node)\n      ) {\n        setShowHelpModal(false);\n      }\n    };\n\n    if (showHelpModal) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n    }\n\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [showHelpModal]);\n\n  const HelpButton = () => (\n    <button\n      ref={buttonRef}\n      onClick={() => setShowHelpModal(!showHelpModal)}\n      className=\"copilotKitDebugMenuTriggerButton relative\"\n      aria-label=\"Open Help\"\n    >\n      Help\n    </button>\n  );\n\n  return (\n    <div className=\"relative\">\n      <HelpButton />\n      {showHelpModal && (\n        <div\n          ref={popoverRef}\n          className=\"absolute mt-2 z-50\"\n          style={{\n            top: \"100%\",\n            right: \"-120px\",\n            width: \"380px\",\n          }}\n        >\n          <div className=\"bg-white rounded-lg shadow-xl w-full p-4 flex-col relative\">\n            <button\n              className=\"absolute text-gray-400 hover:text-gray-600 focus:outline-none\"\n              style={{ top: \"10px\", right: \"10px\" }}\n              onClick={() => setShowHelpModal(false)}\n              aria-label=\"Close\"\n            >\n              <CloseIcon />\n            </button>\n            <div className=\"w-full flex mb-6 justify-center\">\n              <h2 className=\"text-2xl font-bold\">Help Options</h2>\n            </div>\n            <div className=\"space-y-4 mb-4\">\n              <div className=\"copilotKitHelpItemButton\">\n                <a\n                  href=\"https://docs.copilotkit.ai/coagents/troubleshooting/common-issues\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  Visit the Troubleshooting and FAQ section in the docs\n                </a>\n              </div>\n              <div className=\"copilotKitHelpItemButton\">\n                <a\n                  href=\"https://go.copilotkit.ai/dev-console-support-discord\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  Go to Discord Support Channel (Community Support)\n                </a>\n              </div>\n              <div className=\"copilotKitHelpItemButton\">\n                <a\n                  href=\"https://go.copilotkit.ai/dev-console-support-slack\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  Apply for Priority Direct Slack Support\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n","import React from \"react\";\n\nexport const LifeBuoyIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className=\"icon icon-tabler icons-tabler-outline icon-tabler-lifebuoy\"\n  >\n    <g transform=\"translate(0, -1)\">\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0\" />\n      <path d=\"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\" />\n      <path d=\"M15 15l3.35 3.35\" />\n      <path d=\"M9 15l-3.35 3.35\" />\n      <path d=\"M5.65 5.65l3.35 3.35\" />\n      <path d=\"M18.35 5.65l-3.35 3.35\" />\n    </g>\n  </svg>\n);\n\nexport const CloseIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    strokeWidth=\"1.5\"\n    stroke=\"currentColor\"\n    width=\"20\"\n    height=\"20\"\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n);\n\nexport const LoadingSpinnerIcon = ({ color = \"rgb(107 114 128)\" }: { color?: string }) => (\n  <svg\n    style={{\n      animation: \"copilotKitSpinAnimation 1s linear infinite\",\n      color,\n    }}\n    width=\"24\"\n    height=\"24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n  >\n    <circle\n      style={{ opacity: 0.25 }}\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      strokeWidth=\"4\"\n    ></circle>\n    <path\n      style={{ opacity: 0.75 }}\n      fill=\"currentColor\"\n      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\"\n    ></path>\n  </svg>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA4D;;;ACexD;AAYG,IAAM,YAAY,MACvB;AAAA,EAAC;AAAA;AAAA,IACC,OAAM;AAAA,IACN,MAAK;AAAA,IACL,SAAQ;AAAA,IACR,aAAY;AAAA,IACZ,QAAO;AAAA,IACP,OAAM;AAAA,IACN,QAAO;AAAA,IAEP,sDAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,wBAAuB;AAAA;AAC9E;;;ADPE,IAAAA,sBAAA;AA5BG,SAAS,sBAAsB;AACpC,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AACxD,QAAM,gBAAY,qBAA0B,IAAI;AAChD,QAAM,iBAAa,qBAAuB,IAAI;AAG9C,8BAAU,MAAM;AACd,UAAM,qBAAqB,CAAC,UAAsB;AAChD,UACE,WAAW,WACX,CAAC,WAAW,QAAQ,SAAS,MAAM,MAAc,KACjD,UAAU,WACV,CAAC,UAAU,QAAQ,SAAS,MAAM,MAAc,GAChD;AACA,yBAAiB,KAAK;AAAA,MACxB;AAAA,IACF;AAEA,QAAI,eAAe;AACjB,eAAS,iBAAiB,aAAa,kBAAkB;AAAA,IAC3D;AAEA,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,kBAAkB;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,aAAa,MACjB;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,SAAS,MAAM,iBAAiB,CAAC,aAAa;AAAA,MAC9C,WAAU;AAAA,MACV,cAAW;AAAA,MACZ;AAAA;AAAA,EAED;AAGF,SACE,8CAAC,SAAI,WAAU,YACb;AAAA,iDAAC,cAAW;AAAA,IACX,iBACC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO;AAAA,UACL,KAAK;AAAA,UACL,OAAO;AAAA,UACP,OAAO;AAAA,QACT;AAAA,QAEA,wDAAC,SAAI,WAAU,8DACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,KAAK,QAAQ,OAAO,OAAO;AAAA,cACpC,SAAS,MAAM,iBAAiB,KAAK;AAAA,cACrC,cAAW;AAAA,cAEX,uDAAC,aAAU;AAAA;AAAA,UACb;AAAA,UACA,6CAAC,SAAI,WAAU,mCACb,uDAAC,QAAG,WAAU,sBAAqB,0BAAY,GACjD;AAAA,UACA,8CAAC,SAAI,WAAU,kBACb;AAAA,yDAAC,SAAI,WAAU,4BACb;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,QAAO;AAAA,gBACP,KAAI;AAAA,gBACL;AAAA;AAAA,YAED,GACF;AAAA,YACA,6CAAC,SAAI,WAAU,4BACb;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,QAAO;AAAA,gBACP,KAAI;AAAA,gBACL;AAAA;AAAA,YAED,GACF;AAAA,YACA,6CAAC,SAAI,WAAU,4BACb;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,QAAO;AAAA,gBACP,KAAI;AAAA,gBACL;AAAA;AAAA,YAED,GACF;AAAA,aACF;AAAA,WACF;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;","names":["import_jsx_runtime"]}

package/dist/components/help-modal/index.mjs

@@ -1,7 +1,7 @@
 import "../../chunk-KXE2JCUH.mjs";
 import {
   CopilotKitHelpModal
-} from "../../chunk-TI7SY2RI.mjs";
+} from "../../chunk-YC4NBUGE.mjs";
 import "../../chunk-BH6PCAAL.mjs";
 import "../../chunk-MRXNTQOX.mjs";
 export {

package/dist/components/help-modal/modal.js

@@ -16,26 +16,6 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 
 // src/components/help-modal/modal.tsx
 var modal_exports = {};
@@ -60,101 +40,49 @@ var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
   }
 );
-var LoadingSpinnerIcon = ({ color = "rgb(107 114 128)" }) => /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)(
-        "circle",
-        {
-          style: { opacity: 0.25 },
-          cx: "12",
-          cy: "12",
-          r: "10",
-          stroke: "currentColor",
-          strokeWidth: "4"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.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_runtime2 = require("react/jsx-runtime");
 function CopilotKitHelpModal() {
   const [showHelpModal, setShowHelpModal] = (0, import_react.useState)(false);
-  const [issueDescription, setIssueDescription] = (0, import_react.useState)("");
-  const [email, setEmail] = (0, import_react.useState)("");
-  const [emailError, setEmailError] = (0, import_react.useState)("");
-  const [submitting, setSubmitting] = (0, import_react.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;
+  const buttonRef = (0, import_react.useRef)(null);
+  const popoverRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (popoverRef.current && !popoverRef.current.contains(event.target) && buttonRef.current && !buttonRef.current.contains(event.target)) {
+        setShowHelpModal(false);
+      }
+    };
+    if (showHelpModal) {
+      document.addEventListener("mousedown", handleClickOutside);
     }
-    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);
-  });
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showHelpModal]);
   const HelpButton = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
-      onClick: () => setShowHelpModal(true),
-      style: { width: "50px", height: "30px", marginRight: "0.25rem" },
-      className: "text-sm p-0 bg-transparent rounded border border-blue-500",
+      ref: buttonRef,
+      onClick: () => setShowHelpModal(!showHelpModal),
+      className: "copilotKitDebugMenuTriggerButton relative",
       "aria-label": "Open Help",
       children: "Help"
     }
   );
-  const submitButtonDisabled = (0, import_react.useMemo)(
-    () => submitting || !!emailError || issueDescription == null || (issueDescription == null ? void 0 : issueDescription.length) == 0,
-    [submitting, emailError, issueDescription]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HelpButton, {}),
     showHelpModal && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "div",
       {
-        className: "fixed inset-0 flex items-center justify-center p-4",
-        style: { backgroundColor: "rgba(11, 15, 26, 0.5)", zIndex: 99 },
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-white rounded-lg shadow-xl max-w-md w-full p-4 flex-col relative", children: [
+        ref: popoverRef,
+        className: "absolute mt-2 z-50",
+        style: {
+          top: "100%",
+          right: "-120px",
+          width: "380px"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-white rounded-lg shadow-xl w-full p-4 flex-col relative", children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "button",
             {
@@ -167,7 +95,7 @@ function CopilotKitHelpModal() {
           ),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-full flex mb-6 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "text-2xl font-bold", children: "Help Options" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-4 mb-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "copilotKitHelpItemButton", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "a",
               {
                 href: "https://docs.copilotkit.ai/coagents/troubleshooting/common-issues",
@@ -176,7 +104,7 @@ function CopilotKitHelpModal() {
                 children: "Visit the Troubleshooting and FAQ section in the docs"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "copilotKitHelpItemButton", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "a",
               {
                 href: "https://go.copilotkit.ai/dev-console-support-discord",
@@ -185,7 +113,7 @@ function CopilotKitHelpModal() {
                 children: "Go to Discord Support Channel (Community Support)"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "copilotKitHelpItemButton", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "a",
               {
                 href: "https://go.copilotkit.ai/dev-console-support-slack",
@@ -194,52 +122,6 @@ function CopilotKitHelpModal() {
                 children: "Apply for Priority Direct Slack Support"
               }
             ) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleSubmit, className: "flex flex-col space-y-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.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_runtime2.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700 mb-1", children: "Email (optional):" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)("p", { className: "text-red-500 text-sm mt-1", children: emailError })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.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_runtime2.jsx)(LoadingSpinnerIcon, { color: "white" }) : "Submit"
-              }
-            ) })
           ] })
         ] })
       }

package/dist/components/help-modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/help-modal/modal.tsx","../../../src/components/help-modal/icons.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport { CloseIcon, LifeBuoyIcon, LoadingSpinnerIcon } from \"./icons\";\n\nexport function CopilotKitHelpModal() {\n  const [showHelpModal, setShowHelpModal] = useState(false);\n  const [issueDescription, setIssueDescription] = useState(\"\");\n  const [email, setEmail] = useState(\"\");\n  const [emailError, setEmailError] = useState(\"\");\n  const [submitting, setSubmitting] = useState(false);\n\n  const validateEmail = (email: string) => {\n    const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/;\n    return re.test(email);\n  };\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    if (email?.length > 0 && !validateEmail(email)) {\n      setEmailError(\"Please enter a valid email address\");\n      return;\n    }\n    setSubmitting(true);\n\n    await fetch(\"https://api.segment.io/v1/track\", {\n      method: \"POST\",\n      headers: {\n        \"Content-Type\": \"application/json\",\n      },\n      body: JSON.stringify({\n        event: \"oss.dev-console.help\",\n        anonymousId: window.crypto.randomUUID(),\n        properties: { email, text: issueDescription },\n        writeKey: \"q0gQqvGYyw9pNyhIocNzefSYKGO1aiwW\",\n      }),\n    });\n\n    // Reset\n    setEmailError(\"\");\n    setEmail(\"\");\n    setIssueDescription(\"\");\n    setSubmitting(false);\n    setShowHelpModal(false);\n  };\n\n  const HelpButton = () => (\n    <button\n      onClick={() => setShowHelpModal(true)}\n      style={{ width: \"50px\", height: \"30px\", marginRight: \"0.25rem\" }}\n      className=\"text-sm p-0 bg-transparent rounded border border-blue-500\"\n      aria-label=\"Open Help\"\n    >\n      Help\n    </button>\n  );\n\n  const submitButtonDisabled = useMemo(\n    () => submitting || !!emailError || issueDescription == null || issueDescription?.length == 0,\n    [submitting, emailError, issueDescription],\n  );\n\n  return (\n    <>\n      <HelpButton />\n      {showHelpModal && (\n        <div\n          className=\"fixed inset-0 flex items-center justify-center p-4\"\n          style={{ backgroundColor: \"rgba(11, 15, 26, 0.5)\", zIndex: 99 }}\n        >\n          <div className=\"bg-white rounded-lg shadow-xl max-w-md w-full p-4 flex-col relative\">\n            <button\n              className=\"absolute text-gray-400 hover:text-gray-600 focus:outline-none\"\n              style={{ top: \"10px\", right: \"10px\" }}\n              onClick={() => setShowHelpModal(false)}\n              aria-label=\"Close\"\n            >\n              <CloseIcon />\n            </button>\n            <div className=\"w-full flex mb-6 justify-center\">\n              <h2 className=\"text-2xl font-bold\">Help Options</h2>\n            </div>\n            <div className=\"space-y-4 mb-4\">\n              <div className=\"block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm\">\n                <a\n                  href=\"https://docs.copilotkit.ai/coagents/troubleshooting/common-issues\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  Visit the Troubleshooting and FAQ section in the docs\n                </a>\n              </div>\n              <div className=\"block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm\">\n                <a\n                  href=\"https://go.copilotkit.ai/dev-console-support-discord\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  Go to Discord Support Channel (Community Support)\n                </a>\n              </div>\n              <div className=\"block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm\">\n                <a\n                  href=\"https://go.copilotkit.ai/dev-console-support-slack\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  Apply for Priority Direct Slack Support\n                </a>\n              </div>\n            </div>\n            <form onSubmit={handleSubmit} className=\"flex flex-col space-y-2\">\n              <div>\n                <label htmlFor=\"feedback\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Let us know what your issue is:\n                </label>\n                <textarea\n                  id=\"feedback\"\n                  rows={4}\n                  className=\"w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:border-blue-500\"\n                  placeholder=\"A Loom link / screen recording is always great!\"\n                  onChange={(e) => setIssueDescription(e.target.value)}\n                  value={issueDescription}\n                  required\n                ></textarea>\n              </div>\n              <div>\n                <label htmlFor=\"email\" className=\"block text-sm font-medium text-gray-700 mb-1\">\n                  Email (optional):\n                </label>\n                <input\n                  type=\"email\"\n                  id=\"email\"\n                  className={`w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:border-blue-500 ${emailError ? \"border-red-500\" : \"\"}`}\n                  placeholder=\"Enter your email for follow-up\"\n                  onChange={(e) => {\n                    setEmail(e.target.value);\n                    setEmailError(\"\");\n                  }}\n                  value={email}\n                />\n                {emailError && <p className=\"text-red-500 text-sm mt-1\">{emailError}</p>}\n              </div>\n              <div className=\"bg-gray-50 px-4 py-4 sm:px-6 sm:flex sm:flex-row-reverse rounded-b-lg\">\n                <button\n                  type=\"submit\"\n                  onClick={handleSubmit}\n                  disabled={submitButtonDisabled}\n                  style={\n                    submitButtonDisabled\n                      ? { backgroundColor: \"rgb(216, 216, 216)\", color: \"rgb(129, 129, 129)\" }\n                      : undefined\n                  }\n                  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\"\n                >\n                  {submitting ? <LoadingSpinnerIcon color=\"white\" /> : \"Submit\"}\n                </button>\n              </div>\n            </form>\n          </div>\n        </div>\n      )}\n    </>\n  );\n}\n","import React from \"react\";\n\nexport const LifeBuoyIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className=\"icon icon-tabler icons-tabler-outline icon-tabler-lifebuoy\"\n  >\n    <g transform=\"translate(0, -1)\">\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0\" />\n      <path d=\"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\" />\n      <path d=\"M15 15l3.35 3.35\" />\n      <path d=\"M9 15l-3.35 3.35\" />\n      <path d=\"M5.65 5.65l3.35 3.35\" />\n      <path d=\"M18.35 5.65l-3.35 3.35\" />\n    </g>\n  </svg>\n);\n\nexport const CloseIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    strokeWidth=\"1.5\"\n    stroke=\"currentColor\"\n    width=\"20\"\n    height=\"20\"\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n);\n\nexport const LoadingSpinnerIcon = ({ color = \"rgb(107 114 128)\" }: { color?: string }) => (\n  <svg\n    style={{\n      animation: \"copilotKitSpinAnimation 1s linear infinite\",\n      color,\n    }}\n    width=\"24\"\n    height=\"24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n  >\n    <circle\n      style={{ opacity: 0.25 }}\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      strokeWidth=\"4\"\n    ></circle>\n    <path\n      style={{ opacity: 0.75 }}\n      fill=\"currentColor\"\n      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\"\n    ></path>\n  </svg>\n);\n"],"mappings":"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","names":["import_jsx_runtime","email"]}
+{"version":3,"sources":["../../../src/components/help-modal/modal.tsx","../../../src/components/help-modal/icons.tsx"],"sourcesContent":["import React, { useMemo, useState, useRef, useEffect } from \"react\";\nimport { CloseIcon } from \"./icons\";\n\nexport function CopilotKitHelpModal() {\n  const [showHelpModal, setShowHelpModal] = useState(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n\n  // Close popover when clicking outside\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        popoverRef.current &&\n        !popoverRef.current.contains(event.target as Node) &&\n        buttonRef.current &&\n        !buttonRef.current.contains(event.target as Node)\n      ) {\n        setShowHelpModal(false);\n      }\n    };\n\n    if (showHelpModal) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n    }\n\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [showHelpModal]);\n\n  const HelpButton = () => (\n    <button\n      ref={buttonRef}\n      onClick={() => setShowHelpModal(!showHelpModal)}\n      className=\"copilotKitDebugMenuTriggerButton relative\"\n      aria-label=\"Open Help\"\n    >\n      Help\n    </button>\n  );\n\n  return (\n    <div className=\"relative\">\n      <HelpButton />\n      {showHelpModal && (\n        <div\n          ref={popoverRef}\n          className=\"absolute mt-2 z-50\"\n          style={{\n            top: \"100%\",\n            right: \"-120px\",\n            width: \"380px\",\n          }}\n        >\n          <div className=\"bg-white rounded-lg shadow-xl w-full p-4 flex-col relative\">\n            <button\n              className=\"absolute text-gray-400 hover:text-gray-600 focus:outline-none\"\n              style={{ top: \"10px\", right: \"10px\" }}\n              onClick={() => setShowHelpModal(false)}\n              aria-label=\"Close\"\n            >\n              <CloseIcon />\n            </button>\n            <div className=\"w-full flex mb-6 justify-center\">\n              <h2 className=\"text-2xl font-bold\">Help Options</h2>\n            </div>\n            <div className=\"space-y-4 mb-4\">\n              <div className=\"copilotKitHelpItemButton\">\n                <a\n                  href=\"https://docs.copilotkit.ai/coagents/troubleshooting/common-issues\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  Visit the Troubleshooting and FAQ section in the docs\n                </a>\n              </div>\n              <div className=\"copilotKitHelpItemButton\">\n                <a\n                  href=\"https://go.copilotkit.ai/dev-console-support-discord\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  Go to Discord Support Channel (Community Support)\n                </a>\n              </div>\n              <div className=\"copilotKitHelpItemButton\">\n                <a\n                  href=\"https://go.copilotkit.ai/dev-console-support-slack\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  Apply for Priority Direct Slack Support\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n","import React from \"react\";\n\nexport const LifeBuoyIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className=\"icon icon-tabler icons-tabler-outline icon-tabler-lifebuoy\"\n  >\n    <g transform=\"translate(0, -1)\">\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0\" />\n      <path d=\"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\" />\n      <path d=\"M15 15l3.35 3.35\" />\n      <path d=\"M9 15l-3.35 3.35\" />\n      <path d=\"M5.65 5.65l3.35 3.35\" />\n      <path d=\"M18.35 5.65l-3.35 3.35\" />\n    </g>\n  </svg>\n);\n\nexport const CloseIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    strokeWidth=\"1.5\"\n    stroke=\"currentColor\"\n    width=\"20\"\n    height=\"20\"\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n);\n\nexport const LoadingSpinnerIcon = ({ color = \"rgb(107 114 128)\" }: { color?: string }) => (\n  <svg\n    style={{\n      animation: \"copilotKitSpinAnimation 1s linear infinite\",\n      color,\n    }}\n    width=\"24\"\n    height=\"24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n  >\n    <circle\n      style={{ opacity: 0.25 }}\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      strokeWidth=\"4\"\n    ></circle>\n    <path\n      style={{ opacity: 0.75 }}\n      fill=\"currentColor\"\n      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\"\n    ></path>\n  </svg>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4D;;;ACexD;AAYG,IAAM,YAAY,MACvB;AAAA,EAAC;AAAA;AAAA,IACC,OAAM;AAAA,IACN,MAAK;AAAA,IACL,SAAQ;AAAA,IACR,aAAY;AAAA,IACZ,QAAO;AAAA,IACP,OAAM;AAAA,IACN,QAAO;AAAA,IAEP,sDAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,wBAAuB;AAAA;AAC9E;;;ADPE,IAAAA,sBAAA;AA5BG,SAAS,sBAAsB;AACpC,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AACxD,QAAM,gBAAY,qBAA0B,IAAI;AAChD,QAAM,iBAAa,qBAAuB,IAAI;AAG9C,8BAAU,MAAM;AACd,UAAM,qBAAqB,CAAC,UAAsB;AAChD,UACE,WAAW,WACX,CAAC,WAAW,QAAQ,SAAS,MAAM,MAAc,KACjD,UAAU,WACV,CAAC,UAAU,QAAQ,SAAS,MAAM,MAAc,GAChD;AACA,yBAAiB,KAAK;AAAA,MACxB;AAAA,IACF;AAEA,QAAI,eAAe;AACjB,eAAS,iBAAiB,aAAa,kBAAkB;AAAA,IAC3D;AAEA,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,kBAAkB;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,aAAa,MACjB;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,SAAS,MAAM,iBAAiB,CAAC,aAAa;AAAA,MAC9C,WAAU;AAAA,MACV,cAAW;AAAA,MACZ;AAAA;AAAA,EAED;AAGF,SACE,8CAAC,SAAI,WAAU,YACb;AAAA,iDAAC,cAAW;AAAA,IACX,iBACC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO;AAAA,UACL,KAAK;AAAA,UACL,OAAO;AAAA,UACP,OAAO;AAAA,QACT;AAAA,QAEA,wDAAC,SAAI,WAAU,8DACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,KAAK,QAAQ,OAAO,OAAO;AAAA,cACpC,SAAS,MAAM,iBAAiB,KAAK;AAAA,cACrC,cAAW;AAAA,cAEX,uDAAC,aAAU;AAAA;AAAA,UACb;AAAA,UACA,6CAAC,SAAI,WAAU,mCACb,uDAAC,QAAG,WAAU,sBAAqB,0BAAY,GACjD;AAAA,UACA,8CAAC,SAAI,WAAU,kBACb;AAAA,yDAAC,SAAI,WAAU,4BACb;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,QAAO;AAAA,gBACP,KAAI;AAAA,gBACL;AAAA;AAAA,YAED,GACF;AAAA,YACA,6CAAC,SAAI,WAAU,4BACb;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,QAAO;AAAA,gBACP,KAAI;AAAA,gBACL;AAAA;AAAA,YAED,GACF;AAAA,YACA,6CAAC,SAAI,WAAU,4BACb;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,QAAO;AAAA,gBACP,KAAI;AAAA,gBACL;AAAA;AAAA,YAED,GACF;AAAA,aACF;AAAA,WACF;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;","names":["import_jsx_runtime"]}

package/dist/components/help-modal/modal.mjs

@@ -1,6 +1,6 @@
 import {
   CopilotKitHelpModal
-} from "../../chunk-TI7SY2RI.mjs";
+} from "../../chunk-YC4NBUGE.mjs";
 import "../../chunk-BH6PCAAL.mjs";
 import "../../chunk-MRXNTQOX.mjs";
 export {

package/dist/components/index.d.ts

@@ -8,6 +8,9 @@ export { UserMessage } from './chat/messages/UserMessage.js';
 export { useChatContext } from './chat/ChatContext.js';
 export { shouldShowDevConsole } from './dev-console/utils.js';
 export { CopilotDevConsole } from './dev-console/console.js';
+export { DefaultResponseRenderer, createResponseCache } from './crew/DefaultResponseRenderer.js';
+export { DefaultStateRenderer } from './crew/DefaultStateRenderer.js';
+export { AgentState, CompletedFeedbackProps, ContentRendererProps, FeedbackButtonProps, Response, ResponseCache, ResponseRendererIconProps, ResponseRendererIcons, ResponseRendererLabels, ResponseRendererProps, ResponseStatus, SkeletonLoaderProps, StateItem, StateItemRendererProps, StateRendererProps, TaskStateItem, ToolStateItem } from './crew/types.js';
 import '@copilotkit/runtime-client-gql';
 import 'react/jsx-runtime';
 import './chat/Modal.js';