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

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.2.0",
+  "version": "1.2.2-feat-runtime-remote-actions.0",
   "sideEffects": [
     "**/*.css"
   ],
@@ -48,9 +48,9 @@
     "ts-jest": "^29.1.1",
     "tsup-async-inject-style": "0.0.2",
     "typescript": "^5.5.4",
-    "eslint-config-custom": "1.2.0",
-    "tailwind-config": "1.2.0",
-    "tsconfig": "1.2.0"
+    "eslint-config-custom": "1.2.2-feat-runtime-remote-actions.0",
+    "tsconfig": "1.2.2-feat-runtime-remote-actions.0",
+    "tailwind-config": "1.2.2-feat-runtime-remote-actions.0"
   },
   "dependencies": {
     "@headlessui/react": "^2.1.3",
@@ -58,9 +58,9 @@
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
-    "@copilotkit/react-core": "1.2.0",
-    "@copilotkit/runtime-client-gql": "1.2.0",
-    "@copilotkit/shared": "1.2.0"
+    "@copilotkit/react-core": "1.2.2-feat-runtime-remote-actions.0",
+    "@copilotkit/runtime-client-gql": "1.2.2-feat-runtime-remote-actions.0",
+    "@copilotkit/shared": "1.2.2-feat-runtime-remote-actions.0"
   },
   "keywords": [
     "copilotkit",

package/src/components/chat/Chat.tsx

@@ -227,7 +227,7 @@ const SUGGESTIONS_DEBOUNCE_TIMEOUT = 1000;
 export const useCopilotChatLogic = (
   makeSystemMessage?: SystemMessageFunction,
   onInProgress?: (isLoading: boolean) => void,
-  onSubmitMessage?: (messageContent: string) => void,
+  onSubmitMessage?: (messageContent: string) => Promise<void> | void,
 ) => {
   const { visibleMessages, appendMessage, reloadMessages, stopGeneration, isLoading } =
     useCopilotChat({

package/src/components/chat/Messages.tsx

@@ -10,7 +10,9 @@ import {
   ResultMessage,
   TextMessage,
   Role,
+  AgentStateMessage,
 } from "@copilotkit/runtime-client-gql";
+import { CoagentInChatRenderFunction } from "@copilotkit/react-core/dist/context/copilot-context";
 
 export const Messages = ({ messages, inProgress, children }: MessagesProps) => {
   const { chatComponentsCache } = useCopilotContext();
@@ -73,8 +75,11 @@ export const Messages = ({ messages, inProgress, children }: MessagesProps) => {
             </div>
           );
         } else if (message instanceof 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];
             // render a static string
             if (typeof render === "string") {
               // when render is static, we show it only when in progress
@@ -140,6 +145,82 @@ export const Messages = ({ messages, inProgress, children }: MessagesProps) => {
               </div>
             );
           }
+        } else if (message instanceof AgentStateMessage) {
+          let render: string | CoagentInChatRenderFunction | undefined;
+
+          if (chatComponentsCache.current !== null) {
+            render =
+              chatComponentsCache.current.coagentActions[
+                `${message.agentName}-${message.nodeName}`
+              ] || chatComponentsCache.current.coagentActions[`${message.agentName}-global`];
+          }
+
+          if (render) {
+            // render a static string
+            if (typeof render === "string") {
+              // when render is static, we show it only when in progress
+              if (isCurrentMessage && inProgress) {
+                return (
+                  <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+                    {context.icons.spinnerIcon} <span className="inProgressLabel">{render}</span>
+                  </div>
+                );
+              }
+              // Done - silent by default to avoid a series of "done" messages
+              else {
+                return null;
+              }
+            }
+            // render is a function
+            else {
+              const state = message.state;
+
+              let status = message.active ? "inProgress" : "complete";
+
+              const toRender = render({
+                status: status as any,
+                state,
+                nodeName: message.nodeName,
+              });
+
+              // No result and complete: stay silent
+              if (!toRender && status === "complete") {
+                return null;
+              }
+
+              if (typeof toRender === "string") {
+                return (
+                  <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+                    {isCurrentMessage && inProgress && context.icons.spinnerIcon} {toRender}
+                  </div>
+                );
+              } else {
+                return (
+                  <div key={index} className="copilotKitCustomAssistantMessage">
+                    {toRender}
+                  </div>
+                );
+              }
+            }
+          }
+          // No render function found- show the default message
+          else if (!inProgress || !isCurrentMessage) {
+            // Done - silent by default to avoid a series of "done" messages
+            return null;
+          } else {
+            // In progress
+            return (
+              <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+                {context.icons.spinnerIcon}
+              </div>
+            );
+          }
+        } else if (message instanceof ResultMessage && inProgress && isCurrentMessage) {
+          return (
+            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+              {context.icons.spinnerIcon}
+            </div>
+          );
         }
       })}
       <footer ref={messagesEndRef}>{children}</footer>

package/src/components/chat/Modal.tsx

@@ -81,7 +81,6 @@ export const CopilotModal = ({
   const [openState, setOpenState] = React.useState(defaultOpen);
 
   const setOpen = (open: boolean) => {
-    console.log("setOpen!!", open);
     onSetOpen?.(open);
     setOpenState(open);
   };

package/src/components/chat/Sidebar.tsx

@@ -58,7 +58,6 @@ export function CopilotSidebar(props: CopilotModalProps) {
   );
 
   const onSetOpen = (open: boolean) => {
-    console.log("onSetOpen", open);
     props.onSetOpen?.(open);
     setExpandedClassName(open ? "sidebarExpanded" : "");
   };

package/src/components/chat/Suggestion.tsx

@@ -2,6 +2,7 @@ import {
   CopilotContextParams,
   extract,
   CopilotChatSuggestionConfiguration,
+  useCopilotContext,
 } from "@copilotkit/react-core";
 import { SuggestionsProps } from "./props";
 import { SmallSpinnerIcon } from "./Icons";
@@ -50,6 +51,7 @@ export const reloadSuggestions = async (
           ? `Produce up to ${config.maxSuggestions} suggestions. ` +
             `If there are no highly relevant suggestions you can think of, provide an empty array.`
           : `Produce between ${config.minSuggestions} and ${config.maxSuggestions} suggestions.`;
+
       const result = await extract({
         context,
         instructions:

package/src/components/dev-console/console.tsx

@@ -4,6 +4,7 @@ import { useCopilotContext } from "@copilotkit/react-core";
 import {
   getPublishedCopilotKitVersion,
   logActions,
+  logMessages,
   logReadables,
   shouldShowDevConsole,
 } from "./utils";
@@ -250,6 +251,11 @@ export default function DebugMenuButton({
               Log Actions
             </button>
           </MenuItem>
+          <MenuItem>
+            <button className="copilotKitDebugMenuItem" onClick={() => logMessages(context)}>
+              Log Messages
+            </button>
+          </MenuItem>
           <MenuItem>
             <button className="copilotKitDebugMenuItem" onClick={() => checkForUpdates(true)}>
               Check for Updates

package/src/components/dev-console/utils.ts

@@ -1,5 +1,7 @@
 import { CopilotContextParams, defaultCopilotContextCategories } from "@copilotkit/react-core";
 import { CopilotKitVersion } from "./types";
+import { ActionExecutionMessage, ResultMessage, TextMessage } from "@copilotkit/runtime-client-gql";
+import { AgentStateMessage } from "@copilotkit/runtime-client-gql";
 
 export function shouldShowDevConsole(showDevConsole: boolean | "auto"): boolean {
   if (typeof showDevConsole === "boolean") {
@@ -78,6 +80,8 @@ export async function getPublishedCopilotKitVersion(
 }
 
 export function logReadables(context: CopilotContextParams) {
+  console.log("%cCurrent Readables:", "font-size: 16px; font-weight: bold;");
+
   const readables = context.getContextString([], defaultCopilotContextCategories).trim();
   if (readables.length === 0) {
     console.log("No readables found");
@@ -87,6 +91,8 @@ export function logReadables(context: CopilotContextParams) {
 }
 
 export function logActions(context: CopilotContextParams) {
+  console.log("%cCurrent Actions:", "font-size: 16px; font-weight: bold;");
+
   if (Object.values(context.actions).length === 0) {
     console.log("No actions found");
     return;
@@ -100,3 +106,53 @@ export function logActions(context: CopilotContextParams) {
     console.groupEnd();
   }
 }
+
+export function logMessages(context: CopilotContextParams) {
+  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 TextMessage) {
+      return {
+        id: message.id,
+        type: "TextMessage",
+        role: message.role,
+        name: undefined,
+        scope: undefined,
+        content: message.content,
+      };
+    } else if (message instanceof ActionExecutionMessage) {
+      return {
+        id: message.id,
+        type: "ActionExecutionMessage",
+        role: undefined,
+        name: message.name,
+        scope: message.scope,
+        content: message.arguments,
+      };
+    } else if (message instanceof ResultMessage) {
+      return {
+        id: message.id,
+        type: "ResultMessage",
+        role: undefined,
+        name: message.actionName,
+        scope: message.actionExecutionId,
+        content: message.result,
+      };
+    } else if (message instanceof AgentStateMessage) {
+      return {
+        id: message.id,
+        type: `AgentStateMessage (running: ${message.running})`,
+        role: message.role,
+        name: undefined,
+        scope: message.threadId,
+        content: message.state,
+      };
+    }
+  });
+  console.table(tableData);
+}