@copilotkit/react-ui 1.1.2 → 1.1.3-feat-runtime-remote-actions.0

package/dist/components/chat/Modal.mjs

@@ -1,18 +1,18 @@
 import {
   CopilotModal
-} from "../../chunk-WOPUCUQK.mjs";
-import "../../chunk-LLOSOTAT.mjs";
-import "../../chunk-SE6DAYSX.mjs";
-import "../../chunk-UC3Y7MWX.mjs";
-import "../../chunk-SWWFXRFF.mjs";
+} from "../../chunk-C534T3DM.mjs";
+import "../../chunk-FO7Z5LAL.mjs";
+import "../../chunk-FLV3J3VX.mjs";
+import "../../chunk-YOH25I6N.mjs";
+import "../../chunk-HR36Y2FQ.mjs";
 import "../../chunk-V7W6IM2V.mjs";
-import "../../chunk-KSCXPA74.mjs";
-import "../../chunk-D6QNFZXK.mjs";
-import "../../chunk-PF5HUDUP.mjs";
+import "../../chunk-WCPLXRZX.mjs";
+import "../../chunk-I4QG2ZZU.mjs";
+import "../../chunk-H7TM5JE6.mjs";
 import "../../chunk-OTPAZXVR.mjs";
 import "../../chunk-U6J5DGOE.mjs";
 import "../../chunk-YQFVRDNC.mjs";
-import "../../chunk-4Z2WDXSK.mjs";
+import "../../chunk-FOZVHL73.mjs";
 import "../../chunk-YQ3D5IQV.mjs";
 import "../../chunk-XSUSSWDS.mjs";
 import "../../chunk-BJPGMY3I.mjs";

package/dist/components/chat/Popup.d.ts

@@ -1,3 +1,4 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { CopilotModalProps } from './Modal.js';
 import 'react';
 import './props.js';
@@ -7,53 +8,6 @@ import './ChatContext.js';
 import '@copilotkit/react-core';
 import '../../types/suggestions.js';
 
-/**
- * <br/>
- * <img src="/images/CopilotPopup.gif" width="500" />
- *
- * A chatbot popup component for the CopilotKit framework. The component allows for a high degree
- * of customization through various props and custom CSS.
- *
- * See [CopilotSidebar](/reference/components/CopilotSidebar) for a sidebar version of this component.
- *
- * ## Install Dependencies
- *
- * This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.
- *
- * ```shell npm2yarn \"@copilotkit/react-ui"\
- * npm install @copilotkit/react-core @copilotkit/react-ui
- * ```
- * ## Usage
- *
- * ```tsx
- * import { CopilotPopup } from "@copilotkit/react-ui";
- *
- * <CopilotPopup
- *   labels={{
- *     title: "Your Assistant",
- *     initial: "Hi! 👋 How can I assist you today?",
- *   }}
- * />
- * ```
- *
- * ### Look & Feel
- *
- * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
- * ```tsx fileName="YourRootComponent.tsx" {2}
- * ...
- * import "@copilotkit/react-ui/styles.css";
- *
- * export function YourRootComponent() {
- *   return (
- *     <CopilotKit>
- *       ...
- *     </CopilotKit>
- *   );
- * }
- * ```
- * For more information about how to customize the styles, check out the [Customize Look & Feel](/concepts/customize-look-and-feel) guide.
- */
-
-declare function CopilotPopup(props: CopilotModalProps): JSX.Element;
+declare function CopilotPopup(props: CopilotModalProps): react_jsx_runtime.JSX.Element;
 
 export { CopilotPopup };

package/dist/components/chat/Popup.js

@@ -381,14 +381,13 @@ var ChatContextProvider = ({
 var import_react2 = __toESM(require("react"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Window = ({
-  open,
-  setOpen,
   children,
   clickOutsideToClose,
   shortcut,
   hitEscapeToClose
 }) => {
   const windowRef = import_react2.default.useRef(null);
+  const { open, setOpen } = useChatContext();
   const handleClickOutside = (0, import_react2.useCallback)(
     (event) => {
       var _a;
@@ -490,16 +489,16 @@ function isMacOS() {
 
 // src/components/chat/Button.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Button = ({ open, setOpen }) => {
-  const context = useChatContext();
+var Button = ({}) => {
+  const { open, setOpen, icons } = useChatContext();
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { onClick: () => setOpen(!open), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "button",
     {
       className: `copilotKitButton ${open ? "open" : ""}`,
       "aria-label": open ? "Close Chat" : "Open Chat",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "copilotKitButtonIcon copilotKitButtonIconOpen", children: context.icons.openIcon }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "copilotKitButtonIcon copilotKitButtonIconClose", children: context.icons.closeIcon })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "copilotKitButtonIcon copilotKitButtonIconOpen", children: icons.openIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "copilotKitButtonIcon copilotKitButtonIconClose", children: icons.closeIcon })
       ]
     }
   ) });
@@ -507,11 +506,11 @@ var Button = ({ open, setOpen }) => {
 
 // src/components/chat/Header.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Header = ({ setOpen }) => {
-  const context = useChatContext();
+var Header = ({}) => {
+  const { setOpen, icons, labels } = useChatContext();
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "copilotKitHeader", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: context.labels.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: () => setOpen(false), "aria-label": "Close", children: context.icons.headerCloseIcon })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: labels.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: () => setOpen(false), "aria-label": "Close", children: icons.headerCloseIcon })
   ] });
 };
 
@@ -1029,8 +1028,8 @@ var Messages = ({ messages, inProgress, children }) => {
       } else if (message instanceof import_runtime_client_gql.TextMessage && message.role == "assistant") {
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: isCurrentMessage && inProgress && !message.content ? context.icons.spinnerIcon : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Markdown, { content: message.content }) }, index);
       } else if (message instanceof import_runtime_client_gql.ActionExecutionMessage) {
-        if (chatComponentsCache.current !== null && chatComponentsCache.current[message.name]) {
-          const render = chatComponentsCache.current[message.name];
+        if (chatComponentsCache.current !== null && chatComponentsCache.current.actions[message.name]) {
+          const render = chatComponentsCache.current.actions[message.name];
           if (typeof render === "string") {
             if (isCurrentMessage && inProgress) {
               return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
@@ -1072,6 +1071,50 @@ var Messages = ({ messages, inProgress, children }) => {
         } else {
           return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: context.icons.spinnerIcon }, index);
         }
+      } else if (message instanceof import_runtime_client_gql.AgentStateMessage) {
+        let render;
+        if (chatComponentsCache.current !== null) {
+          render = chatComponentsCache.current.coagentActions[`${message.agentName}-${message.nodeName}`] || chatComponentsCache.current.coagentActions[`${message.agentName}-global`];
+        }
+        if (render) {
+          if (typeof render === "string") {
+            if (isCurrentMessage && inProgress) {
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
+                context.icons.spinnerIcon,
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "inProgressLabel", children: render })
+              ] }, index);
+            } else {
+              return null;
+            }
+          } else {
+            const state = message.state;
+            let status = message.active ? "inProgress" : "complete";
+            const toRender = render({
+              status,
+              state,
+              nodeName: message.nodeName
+            });
+            if (!toRender && status === "complete") {
+              return null;
+            }
+            if (typeof toRender === "string") {
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
+                isCurrentMessage && inProgress && context.icons.spinnerIcon,
+                " ",
+                toRender
+              ] }, index);
+            } else {
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "copilotKitCustomAssistantMessage", children: toRender }, index);
+            }
+          }
+        } else if (!inProgress || !isCurrentMessage) {
+          return null;
+        } else {
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: context.icons.spinnerIcon }, index);
+        }
+      } else if (message instanceof import_runtime_client_gql.ResultMessage && inProgress && isCurrentMessage) {
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: context.icons.spinnerIcon }, index);
       }
     }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("footer", { ref: messagesEndRef, children })
@@ -1422,11 +1465,13 @@ var reloadSuggestions = (context, chatSuggestionConfiguration, setCurrentSuggest
 // src/components/chat/Chat.tsx
 var import_react11 = __toESM(require("react"));
 var import_react_core7 = require("@copilotkit/react-core");
-var import_runtime_client_gql4 = require("@copilotkit/runtime-client-gql");
+var import_runtime_client_gql6 = require("@copilotkit/runtime-client-gql");
 var import_shared3 = require("@copilotkit/shared");
 
 // src/components/dev-console/utils.ts
 var import_react_core5 = require("@copilotkit/react-core");
+var import_runtime_client_gql4 = require("@copilotkit/runtime-client-gql");
+var import_runtime_client_gql5 = require("@copilotkit/runtime-client-gql");
 function shouldShowDevConsole(showDevConsole) {
   if (typeof showDevConsole === "boolean") {
     return showDevConsole;
@@ -1487,6 +1532,7 @@ function getPublishedCopilotKitVersion(current, forceCheck = false) {
   });
 }
 function logReadables(context) {
+  console.log("%cCurrent Readables:", "font-size: 16px; font-weight: bold;");
   const readables = context.getContextString([], import_react_core5.defaultCopilotContextCategories).trim();
   if (readables.length === 0) {
     console.log("No readables found");
@@ -1495,6 +1541,7 @@ function logReadables(context) {
   console.log(readables);
 }
 function logActions(context) {
+  console.log("%cCurrent Actions:", "font-size: 16px; font-weight: bold;");
   if (Object.values(context.actions).length === 0) {
     console.log("No actions found");
     return;
@@ -1507,6 +1554,53 @@ function logActions(context) {
     console.groupEnd();
   }
 }
+function logMessages(context) {
+  console.log("%cCurrent Messages:", "font-size: 16px; font-weight: bold;");
+  if (context.messages.length === 0) {
+    console.log("No messages found");
+    return;
+  }
+  const tableData = context.messages.map((message) => {
+    if (message instanceof import_runtime_client_gql4.TextMessage) {
+      return {
+        id: message.id,
+        type: "TextMessage",
+        role: message.role,
+        name: void 0,
+        scope: void 0,
+        content: message.content
+      };
+    } else if (message instanceof import_runtime_client_gql4.ActionExecutionMessage) {
+      return {
+        id: message.id,
+        type: "ActionExecutionMessage",
+        role: void 0,
+        name: message.name,
+        scope: message.scope,
+        content: message.arguments
+      };
+    } else if (message instanceof import_runtime_client_gql4.ResultMessage) {
+      return {
+        id: message.id,
+        type: "ResultMessage",
+        role: void 0,
+        name: message.actionName,
+        scope: message.actionExecutionId,
+        content: message.result
+      };
+    } else if (message instanceof import_runtime_client_gql5.AgentStateMessage) {
+      return {
+        id: message.id,
+        type: `AgentStateMessage (running: ${message.running})`,
+        role: message.role,
+        name: void 0,
+        scope: message.threadId,
+        content: message.state
+      };
+    }
+  });
+  console.table(tableData);
+}
 
 // src/components/dev-console/console.tsx
 var import_react_core6 = require("@copilotkit/react-core");
@@ -1781,6 +1875,7 @@ function DebugMenuButton({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react10.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logReadables(context), children: "Log Readables" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react10.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logActions(context), children: "Log Actions" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react10.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logMessages(context), children: "Log Messages" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react10.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => checkForUpdates(true), children: "Check for Updates" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("hr", {}),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react10.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => setShowDevConsole(false), children: "Hide Dev Console" }) })
@@ -1899,9 +1994,9 @@ var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage) =>
   const sendMessage = (messageContent) => __async(void 0, null, function* () {
     abortSuggestions();
     setCurrentSuggestions([]);
-    const message = new import_runtime_client_gql4.TextMessage({
+    const message = new import_runtime_client_gql6.TextMessage({
       content: messageContent,
-      role: import_runtime_client_gql4.Role.User
+      role: import_runtime_client_gql6.Role.User
     });
     appendMessage(message);
     if (onSubmitMessage) {
@@ -1949,23 +2044,22 @@ var CopilotModal = ({
 }) => {
   const [openState, setOpenState] = import_react12.default.useState(defaultOpen);
   const setOpen = (open) => {
+    console.log("setOpen!!", open);
     onSetOpen == null ? void 0 : onSetOpen(open);
     setOpenState(open);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ChatContextProvider, { icons, labels, open: openState, setOpen: setOpenState, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ChatContextProvider, { icons, labels, open: openState, setOpen, children: [
     children,
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button2, { open: openState, setOpen }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button2, {}),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
         Window2,
         {
-          open: openState,
-          setOpen,
           clickOutsideToClose,
           shortcut,
           hitEscapeToClose,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Header2, { open: openState, setOpen }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Header2, {}),
             /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               CopilotChat,
               {