@copilotkit/react-ui 1.4.1-pre.6 → 1.4.1

package/dist/components/chat/index.mjs

@@ -1,26 +1,29 @@
 import "../../chunk-MRFF7GSQ.mjs";
 import {
   CopilotSidebar
-} from "../../chunk-ECPBML4L.mjs";
+} from "../../chunk-TKFQ7VQR.mjs";
 import "../../chunk-WB3YULQ4.mjs";
 import {
   CopilotPopup
-} from "../../chunk-TSIFZ5N5.mjs";
-import "../../chunk-H5CXJBR5.mjs";
+} from "../../chunk-VYKDFXGS.mjs";
+import "../../chunk-63ZKP62F.mjs";
 import "../../chunk-YAGE7RCE.mjs";
 import "../../chunk-VEC45H6Q.mjs";
 import "../../chunk-RQNJNK2W.mjs";
 import {
   CopilotChat
-} from "../../chunk-ORHE7FYT.mjs";
+} from "../../chunk-DHGDU64D.mjs";
+import "../../chunk-6INMITFA.mjs";
+import "../../chunk-RU73BEZM.mjs";
 import "../../chunk-V7W6IM2V.mjs";
 import "../../chunk-OMTPWC7T.mjs";
 import "../../chunk-ZABXREBH.mjs";
-import "../../chunk-6INMITFA.mjs";
-import "../../chunk-RU73BEZM.mjs";
 import "../../chunk-RJCZRKTV.mjs";
-import "../../chunk-RS6UPR5N.mjs";
+import "../../chunk-2B57NCBA.mjs";
 import "../../chunk-4FIGRRFS.mjs";
+import "../../chunk-KXE2JCUH.mjs";
+import "../../chunk-WOUWNTAV.mjs";
+import "../../chunk-4T3TMQNJ.mjs";
 import "../../chunk-OTPAZXVR.mjs";
 import "../../chunk-4LUMV4YO.mjs";
 import "../../chunk-YQFVRDNC.mjs";

package/dist/components/dev-console/console.js

@@ -180,7 +180,7 @@ function logMessages(context) {
 }
 
 // src/components/dev-console/console.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/components/dev-console/icons.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -267,7 +267,7 @@ var CopilotKitIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
 );
 
 // src/components/dev-console/console.tsx
-var import_react2 = require("@headlessui/react");
+var import_react3 = require("@headlessui/react");
 var import_shared = require("@copilotkit/shared");
 
 // src/components/chat/Icons.tsx
@@ -307,20 +307,125 @@ var SmallSpinnerIcon = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
   }
 );
 
-// src/components/dev-console/console.tsx
+// src/components/help-modal/modal.tsx
+var import_react = require("react");
+
+// src/components/help-modal/icons.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var LifeBuoyIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "icon icon-tabler icons-tabler-outline icon-tabler-lifebuoy",
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: "translate(0, -1)", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M15 15l3.35 3.35" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 15l-3.35 3.35" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5.65 5.65l3.35 3.35" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18.35 5.65l-3.35 3.35" })
+    ] })
+  }
+);
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    stroke: "currentColor",
+    width: "20",
+    height: "20",
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+  }
+);
+
+// src/components/help-modal/modal.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function CopilotKitHelpModal() {
+  const [showHelpModal, setShowHelpModal] = (0, import_react.useState)(false);
+  const [issueDescription, setIssueDescription] = (0, import_react.useState)("");
+  const handleSubmit = () => {
+    setShowHelpModal(false);
+  };
+  const HelpButton = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      onClick: () => setShowHelpModal(true),
+      className: "p-2 bg-transparent rounded-full shadow-lg hover:shadow-xl transition-shadow duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500",
+      "aria-label": "Open Help",
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LifeBuoyIcon, {})
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HelpButton, {}),
+    showHelpModal && /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsxs)("div", { className: "bg-white rounded-lg shadow-xl max-w-md w-full p-4 flex-col relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              className: "absolute text-gray-400 hover:text-gray-600 focus:outline-none",
+              style: { top: "10px", right: "10px" },
+              onClick: () => setShowHelpModal(false),
+              "aria-label": "Close",
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseIcon, {})
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-full flex mb-6 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { className: "text-2xl font-bold", children: "Help Options" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-4 mb-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(
+              "a",
+              {
+                href: "https://go.copilotkit.ai/dev-console-support-discord",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: "Go to Discord Support Channel (Community Support)"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(
+              "a",
+              {
+                href: "https://go.copilotkit.ai/dev-console-support-slack",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: "Apply for Priority Direct Slack Support"
+              }
+            ) })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/components/dev-console/console.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function CopilotDevConsole() {
   const currentVersion = import_shared.COPILOTKIT_VERSION;
   const context = (0, import_react_core2.useCopilotContext)();
-  const [showDevConsole, setShowDevConsole] = (0, import_react.useState)(false);
-  (0, import_react.useEffect)(() => {
+  const [showDevConsole, setShowDevConsole] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
     setShowDevConsole(shouldShowDevConsole(context.showDevConsole));
   }, [context.showDevConsole]);
-  const dontRunTwiceInDevMode = (0, import_react.useRef)(false);
-  const [versionStatus, setVersionStatus] = (0, import_react.useState)("unknown");
-  const [latestVersion, setLatestVersion] = (0, import_react.useState)("");
-  const consoleRef = (0, import_react.useRef)(null);
-  const [debugButtonMode, setDebugButtonMode] = (0, import_react.useState)("full");
+  const dontRunTwiceInDevMode = (0, import_react2.useRef)(false);
+  const [versionStatus, setVersionStatus] = (0, import_react2.useState)("unknown");
+  const [latestVersion, setLatestVersion] = (0, import_react2.useState)("");
+  const consoleRef = (0, import_react2.useRef)(null);
+  const [debugButtonMode, setDebugButtonMode] = (0, import_react2.useState)("full");
   const checkForUpdates = (force = false) => {
     setVersionStatus("checking");
     getPublishedCopilotKitVersion(currentVersion, force).then((v) => {
@@ -343,14 +448,14 @@ function CopilotDevConsole() {
       setVersionStatus("unknown");
     });
   };
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (dontRunTwiceInDevMode.current === true) {
       return;
     }
     dontRunTwiceInDevMode.current = true;
     checkForUpdates();
   }, []);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const handleResize = (entries) => {
       for (let entry of entries) {
         if (entry.target === consoleRef.current) {
@@ -382,14 +487,14 @@ function CopilotDevConsole() {
   if (!showDevConsole) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       ref: consoleRef,
       className: "copilotKitDevConsole " + (versionStatus === "update-available" ? "copilotKitDevConsoleUpgrade" : "") + (versionStatus === "outdated" ? "copilotKitDevConsoleWarnOutdated" : ""),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "copilotKitDevConsoleLogo", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: "https://copilotkit.ai", target: "_blank", children: CopilotKitIcon }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "copilotKitDevConsoleLogo", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: "https://copilotkit.ai", target: "_blank", children: CopilotKitIcon }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           VersionInfo,
           {
             showDevConsole: context.showDevConsole,
@@ -398,7 +503,8 @@ function CopilotDevConsole() {
             latestVersion
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CopilotKitHelpModal, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           DebugMenuButton,
           {
             setShowDevConsole,
@@ -416,7 +522,7 @@ function VersionInfo({
   currentVersion,
   latestVersion
 }) {
-  const [copyStatus, setCopyStatus] = (0, import_react.useState)("");
+  const [copyStatus, setCopyStatus] = (0, import_react2.useState)("");
   let versionLabel = "";
   let versionIcon = "";
   let currentVersionLabel = currentVersion;
@@ -453,12 +559,12 @@ function VersionInfo({
       setTimeout(() => setCopyStatus(""), 1e3);
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "copilotKitVersionInfo", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("header", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "copilotKitVersionInfo", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("header", { children: [
       "COPILOTKIT DEV CONSOLE",
-      showDevConsole === "auto" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("aside", { children: asideLabel })
+      showDevConsole === "auto" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("aside", { children: asideLabel })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { children: [
       "Version: ",
       versionLabel,
       " (",
@@ -466,7 +572,7 @@ function VersionInfo({
       ") ",
       versionIcon
     ] }),
-    (versionStatus === "update-available" || versionStatus === "outdated") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("footer", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: handleCopyClick, children: copyStatus || installCommand }) })
+    (versionStatus === "update-available" || versionStatus === "outdated") && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("footer", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: handleCopyClick, children: copyStatus || installCommand }) })
   ] });
 }
 function DebugMenuButton({
@@ -476,22 +582,22 @@ function DebugMenuButton({
 }) {
   const context = (0, import_react_core2.useCopilotContext)();
   const messagesContext = (0, import_react_core2.useCopilotMessagesContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "bg-black top-24 w-52 text-right", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react2.Menu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.MenuButton, { className: `copilotKitDebugMenuButton ${mode === "compact" ? "compact" : ""}`, children: mode == "compact" ? "Debug" : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "bg-black top-24 w-52 text-right", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react3.Menu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react3.MenuButton, { className: `copilotKitDebugMenuButton ${mode === "compact" ? "compact" : ""}`, children: mode == "compact" ? "Debug" : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
       "Debug ",
       ChevronDownIcon
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      import_react2.MenuItems,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      import_react3.MenuItems,
       {
         transition: true,
         anchor: "bottom end",
         className: "copilotKitDebugMenu",
         style: { zIndex: 40 },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logReadables(context), children: "Log Readables" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logActions(context), children: "Log Actions" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react3.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logReadables(context), children: "Log Readables" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react3.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logActions(context), children: "Log Actions" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react3.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "button",
             {
               className: "copilotKitDebugMenuItem",
@@ -499,9 +605,9 @@ function DebugMenuButton({
               children: "Log Messages"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => checkForUpdates(true), children: "Check for Updates" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("hr", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => setShowDevConsole(false), children: "Hide Dev Console" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react3.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => checkForUpdates(true), children: "Check for Updates" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("hr", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react3.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => setShowDevConsole(false), children: "Hide Dev Console" }) })
         ]
       }
     )