@copilotkit/react-ui 0.0.0-feat-dynamic-copilotcloud-qa-20250117190454

package/src/components/chat/messages/RenderActionExecutionMessage.tsx

@@ -0,0 +1,122 @@
+import { MessageStatusCode } from "@copilotkit/runtime-client-gql";
+import { RenderMessageProps } from "../props";
+import { RenderFunctionStatus, useCopilotContext } from "@copilotkit/react-core";
+
+export function RenderActionExecutionMessage(props: RenderMessageProps) {
+  const { chatComponentsCache } = useCopilotContext();
+  const { message, inProgress, index, isCurrentMessage, actionResult, AssistantMessage } = props;
+
+  if (message.isActionExecutionMessage()) {
+    if (
+      chatComponentsCache.current !== null &&
+      (chatComponentsCache.current.actions[message.name] ||
+        chatComponentsCache.current.actions["*"])
+    ) {
+      const render =
+        chatComponentsCache.current.actions[message.name] ||
+        chatComponentsCache.current.actions["*"];
+      // render a static string
+      if (typeof render === "string") {
+        // when render is static, we show it only when in progress
+        if (isCurrentMessage && inProgress) {
+          return (
+            <AssistantMessage
+              rawData={message}
+              key={index}
+              data-message-role="assistant"
+              isLoading={false}
+              isGenerating={true}
+              message={render}
+            />
+          );
+        }
+        // Done - silent by default to avoid a series of "done" messages
+        else {
+          return null;
+        }
+      }
+      // render is a function
+      else {
+        const args = message.arguments;
+
+        let status: RenderFunctionStatus = "inProgress";
+
+        if (actionResult !== undefined) {
+          status = "complete";
+        } else if (message.status.code !== MessageStatusCode.Pending) {
+          status = "executing";
+        }
+
+        try {
+          const toRender = render({
+            status: status as any,
+            args,
+            result: actionResult,
+            name: message.name,
+          });
+          // No result and complete: stay silent
+          if (!toRender && status === "complete") {
+            return null;
+          }
+          if (typeof toRender === "string") {
+            return (
+              <AssistantMessage
+                rawData={message}
+                data-message-role="assistant"
+                key={index}
+                isLoading={false}
+                isGenerating={false}
+                message={toRender}
+              />
+            );
+          } else {
+            return (
+              <AssistantMessage
+                rawData={message}
+                data-message-role="action-render"
+                key={index}
+                isLoading={false}
+                isGenerating={false}
+                subComponent={toRender}
+              />
+            );
+          }
+        } catch (e) {
+          console.error(`Error executing render function for action ${message.name}: ${e}`);
+          return (
+            <AssistantMessage
+              rawData={message}
+              data-message-role="assistant"
+              key={index}
+              isLoading={false}
+              isGenerating={false}
+              subComponent={
+                <div>
+                  <b>❌ Error executing render: {message.name}</b>
+                  <br />
+                  {e instanceof Error ? e.message : String(e)}
+                </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 (
+        <AssistantMessage
+          rawData={message}
+          key={index}
+          data-message-role="assistant"
+          isLoading={true}
+          isGenerating={true}
+        />
+      );
+    }
+  }
+}

package/src/components/chat/messages/RenderAgentStateMessage.tsx

@@ -0,0 +1,112 @@
+import { RenderMessageProps } from "../props";
+import { CoagentInChatRenderFunction, useCopilotContext } from "@copilotkit/react-core";
+
+export function RenderAgentStateMessage(props: RenderMessageProps) {
+  const { chatComponentsCache } = useCopilotContext();
+  const { message, inProgress, index, isCurrentMessage, AssistantMessage } = props;
+
+  if (message.isAgentStateMessage()) {
+    let render: string | CoagentInChatRenderFunction | undefined;
+
+    if (chatComponentsCache.current !== null) {
+      render =
+        chatComponentsCache.current.coAgentStateRenders[
+          `${message.agentName}-${message.nodeName}`
+        ] || chatComponentsCache.current.coAgentStateRenders[`${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 (
+            <AssistantMessage
+              rawData={message}
+              message={render}
+              data-message-role="assistant"
+              key={index}
+              isLoading={true}
+              isGenerating={true}
+            />
+          );
+        }
+        // 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 (!toRender && isCurrentMessage && inProgress) {
+          return (
+            <AssistantMessage
+              data-message-role="assistant"
+              key={index}
+              rawData={message}
+              isLoading={true}
+              isGenerating={true}
+            />
+          );
+        } else if (!toRender) {
+          return null;
+        }
+
+        if (typeof toRender === "string") {
+          return (
+            <AssistantMessage
+              rawData={message}
+              message={toRender}
+              isLoading={true}
+              isGenerating={true}
+              data-message-role="assistant"
+              key={index}
+            />
+          );
+        } else {
+          return (
+            <AssistantMessage
+              rawData={message}
+              data-message-role="agent-state-render"
+              key={index}
+              isLoading={false}
+              isGenerating={false}
+              subComponent={toRender}
+            />
+          );
+        }
+      }
+    }
+    // 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 (
+        <AssistantMessage
+          rawData={message}
+          isLoading={true}
+          isGenerating={true}
+          data-message-role="assistant"
+          key={index}
+        />
+      );
+    }
+  }
+}

package/src/components/chat/messages/RenderResultMessage.tsx

@@ -0,0 +1,17 @@
+import { RenderMessageProps } from "../props";
+
+export function RenderResultMessage(props: RenderMessageProps) {
+  const { message, inProgress, index, isCurrentMessage, AssistantMessage } = props;
+
+  if (message.isResultMessage() && inProgress && isCurrentMessage) {
+    return (
+      <AssistantMessage
+        key={index}
+        data-message-role="assistant"
+        rawData={message}
+        isLoading={true}
+        isGenerating={true}
+      />
+    );
+  }
+}

package/src/components/chat/messages/RenderTextMessage.tsx

@@ -0,0 +1,29 @@
+import { RenderMessageProps } from "../props";
+
+export function RenderTextMessage(props: RenderMessageProps) {
+  const { message, inProgress, index, isCurrentMessage, UserMessage, AssistantMessage } = props;
+
+  if (message.isTextMessage()) {
+    if (message.role === "user") {
+      return (
+        <UserMessage
+          key={index}
+          data-message-role="user"
+          message={message.content}
+          rawData={message}
+        />
+      );
+    } else if (message.role == "assistant") {
+      return (
+        <AssistantMessage
+          key={index}
+          data-message-role="assistant"
+          message={message.content}
+          rawData={message}
+          isLoading={inProgress && isCurrentMessage && !message.content}
+          isGenerating={inProgress && isCurrentMessage && !!message.content}
+        />
+      );
+    }
+  }
+}

package/src/components/chat/messages/UserMessage.tsx

@@ -0,0 +1,5 @@
+import { UserMessageProps } from "../props";
+
+export const UserMessage = (props: UserMessageProps) => {
+  return <div className="copilotKitMessage copilotKitUserMessage">{props.message}</div>;
+};

package/src/components/chat/props.ts

@@ -0,0 +1,92 @@
+import { Message } from "@copilotkit/runtime-client-gql";
+
+export interface ButtonProps {}
+
+export interface WindowProps {
+  clickOutsideToClose: boolean;
+  hitEscapeToClose: boolean;
+  shortcut: string;
+  children?: React.ReactNode;
+}
+
+export interface HeaderProps {}
+
+export interface SuggestionsProps {
+  title: string;
+  message: string;
+  partial?: boolean;
+  className?: string;
+  onClick: (message: string) => void;
+}
+
+export interface MessagesProps {
+  messages: Message[];
+  inProgress: boolean;
+  children?: React.ReactNode;
+  AssistantMessage: React.ComponentType<AssistantMessageProps>;
+  UserMessage: React.ComponentType<UserMessageProps>;
+  RenderTextMessage: React.ComponentType<RenderMessageProps>;
+  RenderActionExecutionMessage: React.ComponentType<RenderMessageProps>;
+  RenderAgentStateMessage: React.ComponentType<RenderMessageProps>;
+  RenderResultMessage: React.ComponentType<RenderMessageProps>;
+}
+
+export interface Renderer {
+  content: string;
+}
+
+export interface UserMessageProps {
+  message?: string;
+  rawData: any;
+}
+
+export interface AssistantMessageProps {
+  /**
+   * The message content from the assistant
+   */
+
+  message?: string;
+
+  /**
+   * The raw data from the assistant's response
+   */
+  rawData: any;
+
+  /**
+   * A component that was decided to render by the LLM.
+   * When working with useCopilotActions and useCoAgentStateRender, this will be
+   * the render component that was specified.
+   */
+  subComponent?: React.JSX.Element;
+
+  /**
+   * Whether a response is loading, this is when the LLM is thinking of a response but hasn't finished yet.
+   */
+  isLoading: boolean;
+
+  /**
+   * Whether a response is generating, this is when the LLM is actively generating and streaming content.
+   */
+  isGenerating: boolean;
+}
+
+export interface RenderMessageProps {
+  message: Message;
+  inProgress: boolean;
+  index: number;
+  isCurrentMessage: boolean;
+  actionResult?: string;
+  AssistantMessage: React.ComponentType<AssistantMessageProps>;
+  UserMessage: React.ComponentType<UserMessageProps>;
+}
+
+export interface InputProps {
+  inProgress: boolean;
+  onSend: (text: string) => Promise<Message>;
+  isVisible?: boolean;
+}
+
+export interface ResponseButtonProps {
+  onClick: () => void;
+  inProgress: boolean;
+}

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

@@ -0,0 +1,281 @@
+"use client";
+
+import { useCopilotContext, useCopilotMessagesContext } from "@copilotkit/react-core";
+import {
+  getPublishedCopilotKitVersion,
+  logActions,
+  logMessages,
+  logReadables,
+  shouldShowDevConsole,
+} from "./utils";
+import React, { useEffect, useRef, useState } from "react";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  CopilotKitIcon,
+  ExclamationMarkIcon,
+  ExclamationMarkTriangleIcon,
+} from "./icons";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
+import { COPILOTKIT_VERSION } from "@copilotkit/shared";
+import { SmallSpinnerIcon } from "../chat/Icons";
+import { CopilotKitHelpModal } from "../help-modal";
+
+type VersionStatus = "unknown" | "checking" | "latest" | "update-available" | "outdated";
+
+export function CopilotDevConsole() {
+  const currentVersion = COPILOTKIT_VERSION;
+  const context = useCopilotContext();
+
+  // to prevent hydration errors, ensure that the component renders the same content
+  // server-side as it does during the initial client-side render to prevent a hydration
+  // mismatch
+  // see: https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only
+
+  const [showDevConsole, setShowDevConsole] = useState(false);
+
+  useEffect(() => {
+    setShowDevConsole(shouldShowDevConsole(context.showDevConsole));
+  }, [context.showDevConsole]);
+
+  const dontRunTwiceInDevMode = useRef(false);
+  const [versionStatus, setVersionStatus] = useState<VersionStatus>("unknown");
+  const [latestVersion, setLatestVersion] = useState<string>("");
+  const consoleRef = useRef<HTMLDivElement>(null);
+  const [debugButtonMode, setDebugButtonMode] = useState<"full" | "compact">("full");
+
+  const checkForUpdates = (force: boolean = false) => {
+    setVersionStatus("checking");
+
+    getPublishedCopilotKitVersion(currentVersion, force)
+      .then((v) => {
+        setLatestVersion(v.latest);
+        let versionOk = false;
+
+        // match exact version or a version with a letter (e.g. 1.0.0-alpha.1)
+        if (v.current === v.latest) {
+          versionOk = true;
+        } else if (/[a-zA-Z]/.test(v.current)) {
+          versionOk = true;
+        }
+
+        if (versionOk) {
+          setVersionStatus("latest");
+        } else if (v.severity !== "low") {
+          setVersionStatus("outdated");
+        } else {
+          setVersionStatus("update-available");
+        }
+      })
+      .catch((e) => {
+        console.error(e);
+        setVersionStatus("unknown");
+      });
+  };
+
+  useEffect(() => {
+    if (dontRunTwiceInDevMode.current === true) {
+      return;
+    }
+    dontRunTwiceInDevMode.current = true;
+
+    checkForUpdates();
+  }, []);
+
+  useEffect(() => {
+    const handleResize = (entries: ResizeObserverEntry[]) => {
+      for (let entry of entries) {
+        if (entry.target === consoleRef.current) {
+          const width = entry.contentRect.width;
+          if (width < 400) {
+            setDebugButtonMode("compact");
+          } else {
+            setDebugButtonMode("full");
+          }
+        }
+      }
+    };
+
+    const observer = new ResizeObserver(handleResize);
+    if (consoleRef.current) {
+      observer.observe(consoleRef.current);
+
+      const initialWidth = consoleRef.current.getBoundingClientRect().width;
+      if (initialWidth < 400) {
+        setDebugButtonMode("compact");
+      } else {
+        setDebugButtonMode("full");
+      }
+    }
+
+    return () => {
+      if (consoleRef.current) {
+        observer.unobserve(consoleRef.current);
+      }
+    };
+  }, [consoleRef.current]);
+
+  if (!showDevConsole) {
+    return null;
+  }
+  return (
+    <div
+      ref={consoleRef}
+      className={
+        "copilotKitDevConsole " +
+        (versionStatus === "update-available" ? "copilotKitDevConsoleUpgrade" : "") +
+        (versionStatus === "outdated" ? "copilotKitDevConsoleWarnOutdated" : "")
+      }
+    >
+      <div className="copilotKitDevConsoleLogo">
+        <a href="https://copilotkit.ai" target="_blank">
+          {CopilotKitIcon}
+        </a>
+      </div>
+      <VersionInfo
+        showDevConsole={context.showDevConsole}
+        versionStatus={versionStatus}
+        currentVersion={currentVersion}
+        latestVersion={latestVersion}
+      />
+
+      <CopilotKitHelpModal />
+
+      <DebugMenuButton
+        setShowDevConsole={setShowDevConsole}
+        checkForUpdates={checkForUpdates}
+        mode={debugButtonMode}
+      />
+    </div>
+  );
+}
+
+function VersionInfo({
+  showDevConsole,
+  versionStatus,
+  currentVersion,
+  latestVersion,
+}: {
+  showDevConsole: boolean | "auto";
+  versionStatus: VersionStatus;
+  currentVersion: string;
+  latestVersion: string;
+}) {
+  const [copyStatus, setCopyStatus] = useState<string>("");
+
+  let versionLabel = "";
+  let versionIcon: any = "";
+  let currentVersionLabel = currentVersion;
+
+  if (versionStatus === "latest") {
+    versionLabel = "latest";
+    versionIcon = CheckIcon;
+  } else if (versionStatus === "checking") {
+    versionLabel = "checking";
+    versionIcon = SmallSpinnerIcon;
+  } else if (versionStatus === "update-available") {
+    versionLabel = "update available";
+    versionIcon = ExclamationMarkIcon;
+    currentVersionLabel = `${currentVersion} → ${latestVersion}`;
+  } else if (versionStatus === "outdated") {
+    versionLabel = "outdated";
+    versionIcon = ExclamationMarkTriangleIcon;
+    currentVersionLabel = `${currentVersion} → ${latestVersion}`;
+  }
+
+  let asideLabel = "";
+  if (showDevConsole === "auto") {
+    asideLabel = "(localhost only)";
+  } else if (showDevConsole === true) {
+    asideLabel = "(always on)";
+  }
+
+  const installCommand = [
+    `npm install`,
+    `@copilotkit/react-core@${latestVersion}`,
+    `@copilotkit/react-ui@${latestVersion}`,
+    `@copilotkit/react-textarea@${latestVersion}`,
+  ].join(" ");
+
+  const handleCopyClick = () => {
+    navigator.clipboard.writeText(installCommand.trim()).then(() => {
+      setCopyStatus("Command copied to clipboard!");
+      setTimeout(() => setCopyStatus(""), 1000);
+    });
+  };
+
+  return (
+    <div className="copilotKitVersionInfo">
+      <header>
+        COPILOTKIT DEV CONSOLE{showDevConsole === "auto" && <aside>{asideLabel}</aside>}
+      </header>
+      <section>
+        Version: {versionLabel} ({currentVersionLabel}) {versionIcon}
+      </section>
+      {(versionStatus === "update-available" || versionStatus === "outdated") && (
+        <footer>
+          <button onClick={handleCopyClick}>{copyStatus || installCommand}</button>
+        </footer>
+      )}
+    </div>
+  );
+}
+export default function DebugMenuButton({
+  setShowDevConsole,
+  checkForUpdates,
+  mode,
+}: {
+  setShowDevConsole: (show: boolean) => void;
+  checkForUpdates: (force: boolean) => void;
+  mode: "full" | "compact";
+}) {
+  const context = useCopilotContext();
+  const messagesContext = useCopilotMessagesContext();
+
+  return (
+    <div className="bg-black top-24 w-52 text-right">
+      <Menu>
+        <MenuButton className={`copilotKitDebugMenuButton ${mode === "compact" ? "compact" : ""}`}>
+          {mode == "compact" ? "Debug" : <>Debug {ChevronDownIcon}</>}
+        </MenuButton>
+
+        <MenuItems
+          transition
+          anchor="bottom end"
+          className="copilotKitDebugMenu"
+          style={{ zIndex: 40 }}
+        >
+          <MenuItem>
+            <button className="copilotKitDebugMenuItem" onClick={() => logReadables(context)}>
+              Log Readables
+            </button>
+          </MenuItem>
+          <MenuItem>
+            <button className="copilotKitDebugMenuItem" onClick={() => logActions(context)}>
+              Log Actions
+            </button>
+          </MenuItem>
+          <MenuItem>
+            <button
+              className="copilotKitDebugMenuItem"
+              onClick={() => logMessages(messagesContext)}
+            >
+              Log Messages
+            </button>
+          </MenuItem>
+          <MenuItem>
+            <button className="copilotKitDebugMenuItem" onClick={() => checkForUpdates(true)}>
+              Check for Updates
+            </button>
+          </MenuItem>
+          <hr />
+          <MenuItem>
+            <button className="copilotKitDebugMenuItem" onClick={() => setShowDevConsole(false)}>
+              Hide Dev Console
+            </button>
+          </MenuItem>
+        </MenuItems>
+      </Menu>
+    </div>
+  );
+}