@copilotkit/react-ui 0.0.0-0.0.0-max-changeset-10101010101010-20260109191632

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

@@ -0,0 +1,46 @@
+import { UserMessageProps } from "../props";
+
+type UserMessageContent = NonNullable<UserMessageProps["message"]>["content"];
+
+const getTextContent = (content: UserMessageContent | undefined): string | undefined => {
+  if (typeof content === "undefined") {
+    return undefined;
+  }
+
+  if (typeof content === "string") {
+    return content;
+  }
+
+  return (
+    content
+      .map((part) => {
+        if (part.type === "text") {
+          return part.text;
+        }
+        return undefined;
+      })
+      .filter((value): value is string => typeof value === "string" && value.length > 0)
+      .join(" ")
+      .trim() || undefined
+  );
+};
+
+export const UserMessage = (props: UserMessageProps) => {
+  const { message, ImageRenderer } = props;
+  const isImageMessage = message && "image" in message && Boolean(message.image);
+
+  if (isImageMessage) {
+    const imageMessage = message!;
+    const content = getTextContent(imageMessage?.content);
+
+    return (
+      <div className="copilotKitMessage copilotKitUserMessage">
+        <ImageRenderer image={imageMessage.image!} content={content} />
+      </div>
+    );
+  }
+
+  const content = getTextContent(message?.content);
+
+  return <div className="copilotKitMessage copilotKitUserMessage">{content}</div>;
+};

package/src/components/chat/props.ts

@@ -0,0 +1,353 @@
+import { AIMessage, Message, UserMessage, CopilotErrorEvent } from "@copilotkit/shared";
+import { CopilotChatSuggestion } from "../../types/suggestions";
+import { ReactNode } from "react";
+import { ImageData } from "@copilotkit/shared";
+
+/**
+ * Event hooks for CopilotKit chat events.
+ * These hooks only work when publicApiKey is provided.
+ */
+export interface CopilotObservabilityHooks {
+  /**
+   * Called when a message is sent by the user
+   */
+  onMessageSent?: (message: string) => void;
+
+  /**
+   * Called when the chat is minimized/closed
+   */
+  onChatMinimized?: () => void;
+
+  /**
+   * Called when the chat is expanded/opened
+   */
+  onChatExpanded?: () => void;
+
+  /**
+   * Called when a message is regenerated
+   */
+  onMessageRegenerated?: (messageId: string) => void;
+
+  /**
+   * Called when a message is copied
+   */
+  onMessageCopied?: (content: string) => void;
+
+  /**
+   * Called when feedback is given (thumbs up/down)
+   */
+  onFeedbackGiven?: (messageId: string, type: "thumbsUp" | "thumbsDown") => void;
+
+  /**
+   * Called when chat generation starts
+   */
+  onChatStarted?: () => void;
+
+  /**
+   * Called when chat generation stops
+   */
+  onChatStopped?: () => void;
+
+  /**
+   * Called when an error occurs in the chat
+   * This enables chat-specific error handling UX while preserving system-wide error monitoring
+   */
+  onError?: (errorEvent: CopilotErrorEvent) => void;
+}
+
+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 type ComponentsMap<T extends Record<string, object> = Record<string, object>> = {
+  [K in keyof T]: React.FC<{ children?: ReactNode } & T[K]>;
+};
+
+export interface MessagesProps {
+  messages: Message[];
+  inProgress: boolean;
+  children?: React.ReactNode;
+  chatError?: ChatError | null;
+  AssistantMessage: React.ComponentType<AssistantMessageProps>;
+  UserMessage: React.ComponentType<UserMessageProps>;
+  ErrorMessage?: React.ComponentType<ErrorMessageProps>;
+  RenderMessage: React.ComponentType<RenderMessageProps>;
+  ImageRenderer: React.ComponentType<ImageRendererProps>;
+
+  /**
+   * Callback function to regenerate the assistant's response
+   */
+  onRegenerate?: (messageId: string) => void;
+
+  /**
+   * Callback function when the message is copied
+   */
+  onCopy?: (message: string) => void;
+
+  /**
+   * Callback function for thumbs up feedback
+   */
+  onThumbsUp?: (message: Message) => void;
+
+  /**
+   * Callback function for thumbs down feedback
+   */
+  onThumbsDown?: (message: Message) => void;
+
+  /**
+   * Map of message IDs to their feedback state
+   */
+  messageFeedback?: Record<string, "thumbsUp" | "thumbsDown">;
+
+  /**
+   * A list of markdown components to render in assistant message.
+   * Useful when you want to render custom elements in the message (e.g a reference tag element)
+   */
+  markdownTagRenderers?: ComponentsMap;
+
+  /**
+   * @deprecated Use RenderMessage instead
+   */
+  RenderTextMessage?: React.ComponentType<RenderMessageProps>;
+
+  /**
+   * @deprecated Use RenderMessage instead
+   */
+  RenderActionExecutionMessage?: React.ComponentType<RenderMessageProps>;
+
+  /**
+   * @deprecated Use RenderMessage instead
+   */
+  RenderAgentStateMessage?: React.ComponentType<RenderMessageProps>;
+
+  /**
+   * @deprecated Use RenderMessage instead
+   */
+  RenderResultMessage?: React.ComponentType<RenderMessageProps>;
+
+  /**
+   * @deprecated Use RenderMessage instead
+   */
+  RenderImageMessage?: React.ComponentType<RenderMessageProps>;
+}
+
+export interface Renderer {
+  content: string;
+}
+
+export interface UserMessageProps {
+  message?: UserMessage;
+  ImageRenderer: React.ComponentType<ImageRendererProps>;
+
+  /**
+   * @deprecated use message instead
+   *
+   * The raw data from the assistant's response
+   */
+  rawData: any;
+}
+
+export interface AssistantMessageProps {
+  /**
+   * The message content from the assistant
+   */
+
+  message?: AIMessage;
+  messages?: Message[];
+
+  /**
+   * Indicates if this is the last message
+   */
+  isCurrentMessage?: boolean;
+
+  /**
+   * 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;
+
+  /**
+   * Callback function to regenerate the assistant's response
+   */
+  onRegenerate?: () => void;
+
+  /**
+   * Callback function when the message is copied
+   */
+  onCopy?: (message: string) => void;
+
+  /**
+   * Callback function for thumbs up feedback
+   */
+  onThumbsUp?: (message: Message) => void;
+
+  /**
+   * Callback function for thumbs down feedback
+   */
+  onThumbsDown?: (message: Message) => void;
+
+  /**
+   * The feedback state for this message ("thumbsUp" or "thumbsDown")
+   */
+  feedback?: "thumbsUp" | "thumbsDown" | null;
+
+  /**
+   * A list of markdown components to render in assistant message.
+   * Useful when you want to render custom elements in the message (e.g a reference tag element)
+   */
+  markdownTagRenderers?: ComponentsMap;
+
+  /**
+   * A custom image rendering component to use instead of the default.
+   */
+  ImageRenderer?: React.ComponentType<ImageRendererProps>;
+
+  /**
+   * @deprecated use message instead
+   *
+   * The raw data from the assistant's response
+   */
+  rawData: any;
+
+  /**
+   *
+   * @deprecated
+   *
+   * use `message.generativeUI()` instead.
+   *
+   * For example:
+   *
+   * ```tsx
+   * const CustomAssistantMessage = ({ message }: AssistantMessageProps) => {
+   *   const subComponent = message?.generativeUI?.();
+   *   return <div>{subComponent}</div>;
+   * };
+   *
+   * ```
+   */
+  subComponent?: React.JSX.Element;
+}
+
+export interface ErrorMessageProps {
+  /**
+   * The message content from the assistant
+   */
+
+  error: ChatError;
+
+  /**
+   * Indicates if this is the last message
+   */
+  isCurrentMessage?: boolean;
+
+  /**
+   * Callback function to regenerate the assistant's response
+   */
+  onRegenerate?: () => void;
+
+  /**
+   * Callback function when the message is copied
+   */
+  onCopy?: (message: string) => void;
+}
+
+export interface RenderMessageProps {
+  message: Message;
+  messages: Message[];
+  inProgress: boolean;
+  index: number;
+  isCurrentMessage: boolean;
+  actionResult?: string;
+  AssistantMessage?: React.ComponentType<AssistantMessageProps>;
+  UserMessage?: React.ComponentType<UserMessageProps>;
+  ImageRenderer?: React.ComponentType<ImageRendererProps>;
+
+  /**
+   * Callback function to regenerate the assistant's response
+   */
+  onRegenerate?: (messageId: string) => void;
+
+  /**
+   * Callback function when the message is copied
+   */
+  onCopy?: (message: string) => void;
+
+  /**
+   * Callback function for thumbs up feedback
+   */
+  onThumbsUp?: (message: Message) => void;
+
+  /**
+   * Callback function for thumbs down feedback
+   */
+  onThumbsDown?: (message: Message) => void;
+
+  /**
+   * Map of message IDs to their feedback state
+   */
+  messageFeedback?: Record<string, "thumbsUp" | "thumbsDown">;
+
+  /**
+   * A list of markdown components to render in assistant message.
+   * Useful when you want to render custom elements in the message (e.g a reference tag element)
+   */
+  markdownTagRenderers?: ComponentsMap;
+}
+
+export interface InputProps {
+  inProgress: boolean;
+  onSend: (text: string) => Promise<Message>;
+  isVisible?: boolean;
+  onStop?: () => void;
+  onUpload?: () => void;
+  hideStopButton?: boolean;
+  chatReady?: boolean;
+}
+
+export interface RenderSuggestionsListProps {
+  suggestions: CopilotChatSuggestion[];
+  onSuggestionClick: (message: string) => void;
+  isLoading: boolean;
+}
+
+export interface ImageRendererProps {
+  /**
+   * The image data containing format and bytes
+   */
+  image: ImageData;
+
+  /**
+   * Optional content to display alongside the image
+   */
+  content?: string;
+
+  /**
+   * Additional CSS class name for styling
+   */
+  className?: string;
+}
+
+export interface ChatError {
+  message: string;
+  operation?: string;
+  timestamp: number;
+}

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

@@ -0,0 +1,242 @@
+"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();
+  }, []);
+
+  if (!showDevConsole) {
+    return null;
+  }
+  return (
+    <div
+      ref={consoleRef}
+      className={
+        "copilotKitDevConsole " +
+        (versionStatus === "update-available" ? "copilotKitDevConsoleUpgrade" : "") +
+        (versionStatus === "outdated" ? "copilotKitDevConsoleWarnOutdated" : "")
+      }
+    >
+      <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;
+  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 === true) {
+    asideLabel = "(enabled)";
+  }
+
+  const installCommand = [
+    `npm install`,
+    `@copilotkit/react-core@${latestVersion}`,
+    `@copilotkit/react-ui@${latestVersion}`,
+    `@copilotkit/react-textarea@${latestVersion}`,
+    `&& npm install @copilotkit/runtime@${latestVersion}`,
+  ].join(" ");
+
+  const handleCopyClick = () => {
+    navigator.clipboard.writeText(installCommand.trim()).then(() => {
+      setCopyStatus("Command copied to clipboard!");
+      setTimeout(() => setCopyStatus(""), 1000);
+    });
+  };
+
+  if (versionStatus === "update-available" || versionStatus === "outdated") {
+    return (
+      <div className="copilotKitVersionInfo">
+        <p>
+          {currentVersionLabel} {versionIcon}
+        </p>
+        <button onClick={handleCopyClick}>{copyStatus || installCommand}</button>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+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 (
+    <>
+      <Menu>
+        <MenuButton
+          className={`copilotKitDebugMenuTriggerButton ${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>
+    </>
+  );
+}