@copilotkit/react-ui 1.2.0 → 1.2.2-feat-runtime-remote-actions.0

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # ui
 
+## 1.2.2-feat-runtime-remote-actions.0
+
+### Patch Changes
+
+- Prerelease
+- 0d54450: Include agent state
+- 8d32e22: Show agent state in the chat window
+- 5b63f55: stream intermediate state
+- b6fd3d8: Better message grouping
+- 89420c6: Rename hooks and bugfixes
+- b6e8824: useCoAgent/useCoAgentAction
+- 91c35b9: useAgentState
+- 00be203: Remote actions preview
+- fb15f72: Reduce request size by skipping intermediate state
+- Updated dependencies
+- Updated dependencies [0d54450]
+- Updated dependencies [8d32e22]
+- Updated dependencies [5b63f55]
+- Updated dependencies [b6fd3d8]
+- Updated dependencies [89420c6]
+- Updated dependencies [b6e8824]
+- Updated dependencies [91c35b9]
+- Updated dependencies [00be203]
+- Updated dependencies [fb15f72]
+  - @copilotkit/runtime-client-gql@1.2.2-feat-runtime-remote-actions.0
+  - @copilotkit/react-core@1.2.2-feat-runtime-remote-actions.0
+  - @copilotkit/shared@1.2.2-feat-runtime-remote-actions.0
+
+## 1.2.1
+
+### Patch Changes
+
+- inject minified css in bundle
+
+  - removes the need to import `styles.css` manually
+  - empty `styles.css` included in the build for backwards compatibility
+  - uses tsup's `injectStyles` with `postcss` to bundle and minify the CSS, then inject it as a style tag
+  - currently uses my fork of `tsup` where I added support for async function in `injectStyles` (must-have for postcss), a PR from my fork to the main library will follow shortly
+  - remove material-ui, and use `react-icons` for icons (same icons as before)
+  - remove unused `IncludedFilesPreview` component
+  - updated docs
+
+- Updated dependencies
+  - @copilotkit/react-core@1.2.1
+  - @copilotkit/runtime-client-gql@1.2.1
+  - @copilotkit/shared@1.2.1
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/components/chat/Chat.d.mts

@@ -75,7 +75,7 @@ declare function WrappedCopilotChat({ children, icons, labels, className, }: {
     labels?: CopilotChatLabels;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
-declare const useCopilotChatLogic: (makeSystemMessage?: SystemMessageFunction, onInProgress?: (isLoading: boolean) => void, onSubmitMessage?: (messageContent: string) => void) => {
+declare const useCopilotChatLogic: (makeSystemMessage?: SystemMessageFunction, onInProgress?: (isLoading: boolean) => void, onSubmitMessage?: (messageContent: string) => Promise<void> | void) => {
     visibleMessages: Message[];
     isLoading: boolean;
     currentSuggestions: CopilotChatSuggestion[];

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

@@ -75,7 +75,7 @@ declare function WrappedCopilotChat({ children, icons, labels, className, }: {
     labels?: CopilotChatLabels;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
-declare const useCopilotChatLogic: (makeSystemMessage?: SystemMessageFunction, onInProgress?: (isLoading: boolean) => void, onSubmitMessage?: (messageContent: string) => void) => {
+declare const useCopilotChatLogic: (makeSystemMessage?: SystemMessageFunction, onInProgress?: (isLoading: boolean) => void, onSubmitMessage?: (messageContent: string) => Promise<void> | void) => {
     visibleMessages: Message[];
     isLoading: boolean;
     currentSuggestions: CopilotChatSuggestion[];

package/dist/components/chat/Chat.js

@@ -889,8 +889,8 @@ var Messages = ({ messages, inProgress, children }) => {
       } else if (message instanceof import_runtime_client_gql.TextMessage && message.role == "assistant") {
         return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: isCurrentMessage && inProgress && !message.content ? context.icons.spinnerIcon : /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
@@ -932,6 +932,50 @@ var Messages = ({ messages, inProgress, children }) => {
         } else {
           return /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
+                context.icons.spinnerIcon,
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
+                isCurrentMessage && inProgress && context.icons.spinnerIcon,
+                " ",
+                toRender
+              ] }, index);
+            } else {
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "copilotKitCustomAssistantMessage", children: toRender }, index);
+            }
+          }
+        } else if (!inProgress || !isCurrentMessage) {
+          return null;
+        } else {
+          return /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: context.icons.spinnerIcon }, index);
       }
     }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("footer", { ref: messagesEndRef, children })
@@ -1280,11 +1324,13 @@ var reloadSuggestions = (context, chatSuggestionConfiguration, setCurrentSuggest
 // src/components/chat/Chat.tsx
 var import_react10 = __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;
@@ -1345,6 +1391,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");
@@ -1353,6 +1400,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;
@@ -1365,6 +1413,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");
@@ -1639,6 +1734,7 @@ function DebugMenuButton({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react9.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logReadables(context), children: "Log Readables" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react9.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logActions(context), children: "Log Actions" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react9.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logMessages(context), children: "Log Messages" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react9.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => checkForUpdates(true), children: "Check for Updates" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("hr", {}),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react9.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => setShowDevConsole(false), children: "Hide Dev Console" }) })
@@ -1757,9 +1853,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) {