@copilotkit/react-ui 1.9.3 → 1.10.0-next.0

package/src/components/chat/Messages.tsx

@@ -1,18 +1,13 @@
 import { useEffect, useMemo, useRef } from "react";
 import { MessagesProps } from "./props";
 import { useChatContext } from "./ChatContext";
-import { Message, ResultMessage, TextMessage, Role } from "@copilotkit/runtime-client-gql";
-import { useLangGraphInterruptRender } from "@copilotkit/react-core";
+import { Message, Role } from "@copilotkit/shared";
+import { useCopilotChat } from "@copilotkit/react-core";
 
 export const Messages = ({
-  messages,
   inProgress,
   children,
-  RenderTextMessage,
-  RenderActionExecutionMessage,
-  RenderAgentStateMessage,
-  RenderResultMessage,
-  RenderImageMessage,
+  RenderMessage,
   AssistantMessage,
   UserMessage,
   onRegenerate,
@@ -21,110 +16,33 @@ export const Messages = ({
   onThumbsDown,
   markdownTagRenderers,
 }: MessagesProps) => {
-  const context = useChatContext();
-  const initialMessages = useMemo(
-    () => makeInitialMessages(context.labels.initial),
-    [context.labels.initial],
-  );
-
-  messages = [...initialMessages, ...messages];
-
-  const actionResults: Record<string, string> = {};
-
-  for (let i = 0; i < messages.length; i++) {
-    if (messages[i].isActionExecutionMessage()) {
-      const id = messages[i].id;
-      const resultMessage: ResultMessage | undefined = messages.find(
-        (message) => message.isResultMessage() && message.actionExecutionId === id,
-      ) as ResultMessage | undefined;
-
-      if (resultMessage) {
-        actionResults[id] = ResultMessage.decodeResult(resultMessage.result || "");
-      }
-    }
-  }
-
+  const { labels } = useChatContext();
+  const { visibleMessages, interrupt } = useCopilotChat();
+  const initialMessages = useMemo(() => makeInitialMessages(labels.initial), [labels.initial]);
+  const messages = [...initialMessages, ...visibleMessages];
   const { messagesContainerRef, messagesEndRef } = useScrollToBottom(messages);
 
-  const interrupt = useLangGraphInterruptRender();
-
   return (
     <div className="copilotKitMessages" ref={messagesContainerRef}>
       <div className="copilotKitMessagesContainer">
         {messages.map((message, index) => {
           const isCurrentMessage = index === messages.length - 1;
-
-          if (message.isTextMessage()) {
-            return (
-              <RenderTextMessage
-                key={index}
-                message={message}
-                inProgress={inProgress}
-                index={index}
-                isCurrentMessage={isCurrentMessage}
-                AssistantMessage={AssistantMessage}
-                UserMessage={UserMessage}
-                onRegenerate={onRegenerate}
-                onCopy={onCopy}
-                onThumbsUp={onThumbsUp}
-                onThumbsDown={onThumbsDown}
-                markdownTagRenderers={markdownTagRenderers}
-              />
-            );
-          } else if (message.isActionExecutionMessage()) {
-            return (
-              <RenderActionExecutionMessage
-                key={index}
-                message={message}
-                inProgress={inProgress}
-                index={index}
-                isCurrentMessage={isCurrentMessage}
-                actionResult={actionResults[message.id]}
-                AssistantMessage={AssistantMessage}
-                UserMessage={UserMessage}
-              />
-            );
-          } else if (message.isAgentStateMessage()) {
-            return (
-              <RenderAgentStateMessage
-                key={index}
-                message={message}
-                inProgress={inProgress}
-                index={index}
-                isCurrentMessage={isCurrentMessage}
-                AssistantMessage={AssistantMessage}
-                UserMessage={UserMessage}
-              />
-            );
-          } else if (message.isResultMessage()) {
-            return (
-              <RenderResultMessage
-                key={index}
-                message={message}
-                inProgress={inProgress}
-                index={index}
-                isCurrentMessage={isCurrentMessage}
-                AssistantMessage={AssistantMessage}
-                UserMessage={UserMessage}
-              />
-            );
-          } else if (message.isImageMessage && message.isImageMessage()) {
-            return (
-              <RenderImageMessage
-                key={index}
-                message={message}
-                inProgress={inProgress}
-                index={index}
-                isCurrentMessage={isCurrentMessage}
-                AssistantMessage={AssistantMessage}
-                UserMessage={UserMessage}
-                onRegenerate={onRegenerate}
-                onCopy={onCopy}
-                onThumbsUp={onThumbsUp}
-                onThumbsDown={onThumbsDown}
-              />
-            );
-          }
+          return (
+            <RenderMessage
+              key={index}
+              message={message}
+              inProgress={inProgress}
+              index={index}
+              isCurrentMessage={isCurrentMessage}
+              AssistantMessage={AssistantMessage}
+              UserMessage={UserMessage}
+              onRegenerate={onRegenerate}
+              onCopy={onCopy}
+              onThumbsUp={onThumbsUp}
+              onThumbsDown={onThumbsDown}
+              markdownTagRenderers={markdownTagRenderers}
+            />
+          );
         })}
         {interrupt}
       </div>
@@ -135,26 +53,29 @@ export const Messages = ({
   );
 };
 
-function makeInitialMessages(initial?: string | string[]): Message[] {
-  let initialArray: string[] = [];
-  if (initial) {
-    if (Array.isArray(initial)) {
-      initialArray.push(...initial);
-    } else {
-      initialArray.push(initial);
-    }
-  }
+function makeInitialMessages(initial: string | string[] | undefined): Message[] {
+  if (!initial) return [];
 
-  return initialArray.map(
-    (message) =>
-      new TextMessage({
-        role: Role.Assistant,
+  if (Array.isArray(initial)) {
+    return initial.map((message) => {
+      return {
+        id: message,
+        role: "assistant",
         content: message,
-      }),
-  );
+      };
+    });
+  }
+
+  return [
+    {
+      id: initial,
+      role: "system",
+      content: initial,
+    },
+  ];
 }
 
-export function useScrollToBottom(messages: any[]) {
+export function useScrollToBottom(messages: Message[]) {
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const messagesContainerRef = useRef<HTMLDivElement | null>(null);
   const isProgrammaticScrollRef = useRef(false);
@@ -217,7 +138,7 @@ export function useScrollToBottom(messages: any[]) {
   useEffect(() => {
     isUserScrollUpRef.current = false;
     scrollToBottom();
-  }, [messages.filter((m) => m.isTextMessage() && m.role === Role.User).length]);
+  }, [messages.filter((m) => m.role === "user").length]);
 
   return { messagesEndRef, messagesContainerRef };
 }

package/src/components/chat/Suggestion.tsx

@@ -1,13 +1,5 @@
-import {
-  CopilotContextParams,
-  extract,
-  CopilotChatSuggestionConfiguration,
-  CopilotMessagesContextParams,
-} from "@copilotkit/react-core";
+import { useCopilotChat } from "@copilotkit/react-core";
 import { SmallSpinnerIcon } from "./Icons";
-import { CopilotChatSuggestion } from "../../types/suggestions";
-import { actionParametersToJsonSchema } from "@copilotkit/shared";
-import { CopilotRequestType } from "@copilotkit/runtime-client-gql";
 
 interface SuggestionsProps {
   title: string;
@@ -18,9 +10,12 @@ interface SuggestionsProps {
 }
 
 export function Suggestion({ title, onClick, partial, className }: SuggestionsProps) {
+  if (!title) return null;
+  const { isLoading } = useCopilotChat();
+
   return (
     <button
-      disabled={partial}
+      disabled={partial || isLoading}
       onClick={(e) => {
         e.preventDefault();
         onClick();
@@ -32,101 +27,3 @@ export function Suggestion({ title, onClick, partial, className }: SuggestionsPr
     </button>
   );
 }
-
-export const reloadSuggestions = async (
-  context: CopilotContextParams & CopilotMessagesContextParams,
-  chatSuggestionConfiguration: { [key: string]: CopilotChatSuggestionConfiguration },
-  setCurrentSuggestions: (suggestions: { title: string; message: string }[]) => void,
-  abortControllerRef: React.MutableRefObject<AbortController | null>,
-) => {
-  const abortController = abortControllerRef.current;
-
-  const tools = JSON.stringify(
-    Object.values(context.actions).map((action) => ({
-      name: action.name,
-      description: action.description,
-      jsonSchema: JSON.stringify(actionParametersToJsonSchema(action.parameters)),
-    })),
-  );
-
-  const allSuggestions: CopilotChatSuggestion[] = [];
-
-  for (const config of Object.values(chatSuggestionConfiguration)) {
-    try {
-      const numOfSuggestionsInstructions =
-        config.minSuggestions === 0
-          ? `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:
-          "Suggest what the user could say next. Provide clear, highly relevant suggestions. Do not literally suggest function calls. ",
-        data:
-          config.instructions +
-          "\n\n" +
-          numOfSuggestionsInstructions +
-          "\n\n" +
-          "Available tools: " +
-          tools +
-          "\n\n",
-        requestType: CopilotRequestType.Task,
-        parameters: [
-          {
-            name: "suggestions",
-            type: "object[]",
-            attributes: [
-              {
-                name: "title",
-                description:
-                  "The title of the suggestion. This is shown as a button and should be short.",
-                type: "string",
-              },
-              {
-                name: "message",
-                description:
-                  "The message to send when the suggestion is clicked. This should be a clear, complete sentence and will be sent as an instruction to the AI.",
-                type: "string",
-              },
-            ],
-          },
-        ],
-        include: {
-          messages: true,
-          readable: true,
-        },
-        abortSignal: abortController?.signal,
-        stream: ({ status, args }) => {
-          const suggestions = args.suggestions || [];
-          const newSuggestions: CopilotChatSuggestion[] = [];
-          for (let i = 0; i < suggestions.length; i++) {
-            // if GPT provides too many suggestions, limit the number of suggestions
-            if (config.maxSuggestions !== undefined && i >= config.maxSuggestions) {
-              break;
-            }
-            const { title, message } = suggestions[i];
-
-            // If this is the last suggestion and the status is not complete, mark it as partial
-            const partial = i == suggestions.length - 1 && status !== "complete";
-
-            newSuggestions.push({
-              title,
-              message,
-              partial,
-              className: config.className,
-            });
-          }
-          setCurrentSuggestions([...allSuggestions, ...newSuggestions]);
-        },
-      });
-      allSuggestions.push(...result.suggestions);
-    } catch (error) {
-      console.error("Error loading suggestions", error);
-    }
-  }
-
-  if (abortControllerRef.current === abortController) {
-    abortControllerRef.current = null;
-  }
-};

package/src/components/chat/Suggestions.tsx

@@ -1,5 +1,4 @@
 import { Suggestion } from "./Suggestion";
-import React from "react";
 import { RenderSuggestionsListProps } from "./props";
 
 export function Suggestions({ suggestions, onSuggestionClick }: RenderSuggestionsListProps) {

package/src/components/chat/index.tsx

@@ -5,7 +5,7 @@ export { CopilotChat } from "./Chat";
 export { Markdown } from "./Markdown";
 export { AssistantMessage } from "./messages/AssistantMessage";
 export { UserMessage } from "./messages/UserMessage";
+export { ImageRenderer } from "./messages/ImageRenderer";
 export { useChatContext } from "./ChatContext";
-export { RenderImageMessage } from "./messages/RenderImageMessage";
 export { Suggestions as RenderSuggestionsList } from "./Suggestions";
 export { Suggestion as RenderSuggestion } from "./Suggestion";

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

@@ -2,67 +2,58 @@ import { AssistantMessageProps } from "../props";
 import { useChatContext } from "../ChatContext";
 import { Markdown } from "../Markdown";
 import { useState } from "react";
-import { TextMessage } from "@copilotkit/runtime-client-gql";
 
 export const AssistantMessage = (props: AssistantMessageProps) => {
   const { icons, labels } = useChatContext();
   const {
     message,
     isLoading,
-    subComponent,
     onRegenerate,
     onCopy,
     onThumbsUp,
     onThumbsDown,
     isCurrentMessage,
-    rawData,
     markdownTagRenderers,
   } = props;
   const [copied, setCopied] = useState(false);
 
   const handleCopy = () => {
-    if (message && onCopy) {
-      navigator.clipboard.writeText(message);
+    const content = message?.content || "";
+    if (content && onCopy) {
+      navigator.clipboard.writeText(content);
       setCopied(true);
-      onCopy(message);
+      onCopy(content);
       setTimeout(() => setCopied(false), 2000);
-    } else if (message) {
-      navigator.clipboard.writeText(message);
+    } else if (content) {
+      navigator.clipboard.writeText(content);
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     }
   };
 
   const handleRegenerate = () => {
-    if (onRegenerate) {
-      onRegenerate();
-    }
+    if (onRegenerate) onRegenerate();
   };
 
   const handleThumbsUp = () => {
-    const fullMessage = rawData as TextMessage;
-    if (onThumbsUp && fullMessage) {
-      onThumbsUp(fullMessage);
-    }
+    if (onThumbsUp && message) onThumbsUp(message);
   };
 
   const handleThumbsDown = () => {
-    const fullMessage = rawData as TextMessage;
-    if (onThumbsDown && fullMessage) {
-      onThumbsDown(fullMessage);
-    }
+    if (onThumbsDown && message) onThumbsDown(message);
   };
 
   const LoadingIcon = () => <span>{icons.activityIcon}</span>;
+  const content = message?.content || "";
+  const subComponent = message?.generativeUI?.();
 
   return (
     <>
-      {(message || isLoading) && (
+      {content && (
         <div className="copilotKitMessage copilotKitAssistantMessage">
-          {message && <Markdown content={message || ""} components={markdownTagRenderers} />}
-          {isLoading && <LoadingIcon />}
+          {content && <Markdown content={content} components={markdownTagRenderers} />}
 
-          {message && !isLoading && (
+          {content && !isLoading && (
             <div
               className={`copilotKitMessageControls ${isCurrentMessage ? "currentMessage" : ""}`}
             >
@@ -111,6 +102,7 @@ export const AssistantMessage = (props: AssistantMessageProps) => {
         </div>
       )}
       <div style={{ marginBottom: "0.5rem" }}>{subComponent}</div>
+      {isLoading && <LoadingIcon />}
     </>
   );
 };

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

@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import { ImageRendererProps } from "../props";
+
+/**
+ * Default image rendering component that can be customized by users.
+ * Uses CSS classes for styling so users can override styles.
+ */
+export const ImageRenderer: React.FC<ImageRendererProps> = ({ image, content, className = "" }) => {
+  const [imageError, setImageError] = useState(false);
+  const imageSrc = `data:image/${image.format};base64,${image.bytes}`;
+  const altText = content || "User uploaded image";
+
+  const handleImageError = () => {
+    setImageError(true);
+  };
+
+  if (imageError) {
+    return (
+      <div className={`copilotKitImageRendering copilotKitImageRenderingError ${className}`}>
+        <div className="copilotKitImageRenderingErrorMessage">Failed to load image</div>
+        {content && <div className="copilotKitImageRenderingContent">{content}</div>}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`copilotKitImageRendering ${className}`}>
+      <img
+        src={imageSrc}
+        alt={altText}
+        className="copilotKitImageRenderingImage"
+        onError={handleImageError}
+      />
+      {content && <div className="copilotKitImageRenderingContent">{content}</div>}
+    </div>
+  );
+};

package/src/components/chat/messages/{RenderTextMessage.tsx → RenderMessage.tsx}

@@ -1,10 +1,12 @@
 import { RenderMessageProps } from "../props";
 import { UserMessage as DefaultUserMessage } from "./UserMessage";
 import { AssistantMessage as DefaultAssistantMessage } from "./AssistantMessage";
+import { ImageRenderer as DefaultImageRenderer } from "./ImageRenderer";
 
-export function RenderTextMessage({
+export function RenderMessage({
   UserMessage = DefaultUserMessage,
   AssistantMessage = DefaultAssistantMessage,
+  ImageRenderer = DefaultImageRenderer,
   ...props
 }: RenderMessageProps) {
   const {
@@ -19,23 +21,22 @@ export function RenderTextMessage({
     markdownTagRenderers,
   } = props;
 
-  if (message.isTextMessage()) {
-    if (message.role === "user") {
+  switch (message.role) {
+    case "user":
       return (
         <UserMessage
           key={index}
           data-message-role="user"
-          message={message.content}
-          rawData={message}
+          message={message}
+          ImageRenderer={ImageRenderer}
         />
       );
-    } else if (message.role == "assistant") {
+    case "assistant":
       return (
         <AssistantMessage
           key={index}
           data-message-role="assistant"
-          message={message.content}
-          rawData={message}
+          message={message}
           isLoading={inProgress && isCurrentMessage && !message.content}
           isGenerating={inProgress && isCurrentMessage && !!message.content}
           isCurrentMessage={isCurrentMessage}
@@ -44,8 +45,8 @@ export function RenderTextMessage({
           onThumbsUp={onThumbsUp}
           onThumbsDown={onThumbsDown}
           markdownTagRenderers={markdownTagRenderers}
+          ImageRenderer={ImageRenderer}
         />
       );
-    }
   }
 }

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

@@ -1,9 +1,20 @@
 import { UserMessageProps } from "../props";
 
 export const UserMessage = (props: UserMessageProps) => {
-  return (
-    <div className="copilotKitMessage copilotKitUserMessage">
-      {props.subComponent || props.message}
-    </div>
-  );
+  const { message, ImageRenderer } = props;
+  const isImageMessage = message && "image" in message && message.image;
+
+  // Image message
+  if (isImageMessage) {
+    const imageMessage = message;
+
+    return (
+      <div className="copilotKitMessage copilotKitUserMessage">
+        <ImageRenderer image={imageMessage.image!} content={imageMessage.content} />
+      </div>
+    );
+  }
+
+  // Regular text message
+  return <div className="copilotKitMessage copilotKitUserMessage">{message?.content}</div>;
 };