@copilotkit/react-ui 1.10.0-next.8 → 1.10.0

package/dist/index.mjs

@@ -4,12 +4,12 @@ import "./chunk-MMVDU6DF.mjs";
 import "./chunk-SC6JRFAJ.mjs";
 import {
   CopilotSidebar
-} from "./chunk-KLV4ERV6.mjs";
+} from "./chunk-GBP47ONN.mjs";
 import "./chunk-WB3YULQ4.mjs";
 import {
   CopilotPopup
-} from "./chunk-APLX7E54.mjs";
-import "./chunk-BPU3FDT4.mjs";
+} from "./chunk-J5ZZR6YB.mjs";
+import "./chunk-Y44VLEUH.mjs";
 import "./chunk-C3GSYRC3.mjs";
 import "./chunk-GDSZGYCE.mjs";
 import "./chunk-V7W6IM2V.mjs";
@@ -26,17 +26,7 @@ import "./chunk-BH6PCAAL.mjs";
 import "./chunk-UFN2VWSR.mjs";
 import {
   CopilotChat
-} from "./chunk-3DVMCBME.mjs";
-import "./chunk-JHUTTP5C.mjs";
-import {
-  AssistantMessage
-} from "./chunk-GCKKSSBU.mjs";
-import {
-  ImageRenderer
-} from "./chunk-DBKRAOH7.mjs";
-import {
-  UserMessage
-} from "./chunk-VVL6JFCJ.mjs";
+} from "./chunk-GJ4SX4JE.mjs";
 import {
   Suggestions
 } from "./chunk-226ZMOE3.mjs";
@@ -47,10 +37,21 @@ import "./chunk-PLHTVHUW.mjs";
 import "./chunk-DTRPPNSA.mjs";
 import "./chunk-CGEAG65D.mjs";
 import "./chunk-QIOJXTIQ.mjs";
+import "./chunk-BJHJBS5M.mjs";
+import "./chunk-MIVUCSGO.mjs";
+import "./chunk-T5QU6KSB.mjs";
+import {
+  AssistantMessage
+} from "./chunk-GCKKSSBU.mjs";
+import {
+  ImageRenderer
+} from "./chunk-DBKRAOH7.mjs";
+import {
+  UserMessage
+} from "./chunk-VVL6JFCJ.mjs";
 import {
   Markdown
 } from "./chunk-E6MQUIZW.mjs";
-import "./chunk-U5ATIGWH.mjs";
 import {
   useChatContext
 } from "./chunk-IEMQ2SQW.mjs";

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.10.0-next.8",
+  "version": "1.10.0",
   "sideEffects": [
     "**/*.css"
   ],
@@ -51,9 +51,9 @@
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
-    "@copilotkit/react-core": "1.10.0-next.8",
-    "@copilotkit/runtime-client-gql": "1.10.0-next.8",
-    "@copilotkit/shared": "1.10.0-next.8"
+    "@copilotkit/react-core": "1.10.0",
+    "@copilotkit/runtime-client-gql": "1.10.0",
+    "@copilotkit/shared": "1.10.0"
   },
   "keywords": [
     "copilotkit",

package/src/components/chat/Chat.tsx

@@ -85,6 +85,7 @@ import type { SuggestionItem } from "@copilotkit/react-core";
 import {
   CopilotKitError,
   CopilotKitErrorCode,
+  CopilotErrorEvent,
   Message,
   Severity,
   ErrorVisibility,
@@ -239,6 +240,31 @@ export interface CopilotChatProps {
    */
   Messages?: React.ComponentType<MessagesProps>;
 
+  /**
+   * @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>;
+
   /**
    * A custom RenderMessage component to use instead of the default.
    *
@@ -281,6 +307,18 @@ export interface CopilotChatProps {
    * These hooks only work when publicApiKey is provided.
    */
   observabilityHooks?: CopilotObservabilityHooks;
+
+  /**
+   * Custom error renderer for chat-specific errors.
+   * When provided, errors will be displayed inline within the chat interface.
+   */
+  renderError?: (error: {
+    message: string;
+    operation?: string;
+    timestamp: number;
+    onDismiss: () => void;
+    onRetry?: () => void;
+  }) => React.ReactNode;
 }
 
 interface OnStopGenerationArguments {
@@ -368,19 +406,35 @@ export function CopilotChat({
   inputFileAccept = "image/*",
   hideStopButton,
   observabilityHooks,
+  renderError,
+
+  // Legacy props - deprecated
+  RenderTextMessage,
+  RenderActionExecutionMessage,
+  RenderAgentStateMessage,
+  RenderResultMessage,
+  RenderImageMessage,
 }: CopilotChatProps) {
   const { additionalInstructions, setChatInstructions, copilotApiConfig, setBannerError } =
     useCopilotContext();
+
+  // Destructure stable values to avoid object reference changes
+  const { publicApiKey, chatApiEndpoint } = copilotApiConfig;
   const [selectedImages, setSelectedImages] = useState<Array<ImageUpload>>([]);
+  const [chatError, setChatError] = useState<{
+    message: string;
+    operation?: string;
+    timestamp: number;
+  } | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   // Helper function to trigger event hooks only if publicApiKey is provided
   const triggerObservabilityHook = useCallback(
     (hookName: keyof CopilotObservabilityHooks, ...args: any[]) => {
-      if (copilotApiConfig.publicApiKey && observabilityHooks?.[hookName]) {
+      if (publicApiKey && observabilityHooks?.[hookName]) {
         (observabilityHooks[hookName] as any)(...args);
       }
-      if (observabilityHooks?.[hookName] && !copilotApiConfig.publicApiKey) {
+      if (observabilityHooks?.[hookName] && !publicApiKey) {
         setBannerError(
           new CopilotKitError({
             message: "observabilityHooks requires a publicApiKey to function.",
@@ -392,7 +446,58 @@ export function CopilotChat({
         styledConsole.publicApiKeyRequired("observabilityHooks");
       }
     },
-    [copilotApiConfig.publicApiKey, observabilityHooks],
+    [publicApiKey, observabilityHooks, setBannerError],
+  );
+
+  // Helper function to trigger chat error and render error UI
+  const triggerChatError = useCallback(
+    (error: any, operation: string, originalError?: any) => {
+      const errorMessage = error?.message || error?.toString() || "An error occurred";
+
+      // Set chat error state for rendering
+      setChatError({
+        message: errorMessage,
+        operation,
+        timestamp: Date.now(),
+      });
+
+      // Also trigger observability hook if available
+      if (publicApiKey && observabilityHooks?.onError) {
+        const errorEvent: CopilotErrorEvent = {
+          type: "error",
+          timestamp: Date.now(),
+          context: {
+            source: "ui",
+            request: {
+              operation,
+              url: chatApiEndpoint,
+              startTime: Date.now(),
+            },
+            technical: {
+              environment: "browser",
+              userAgent: typeof navigator !== "undefined" ? navigator.userAgent : undefined,
+              stackTrace: originalError instanceof Error ? originalError.stack : undefined,
+            },
+          },
+          error,
+        };
+        observabilityHooks.onError(errorEvent);
+      }
+
+      // Show banner error if onError hook is used without publicApiKey
+      if (observabilityHooks?.onError && !publicApiKey) {
+        setBannerError(
+          new CopilotKitError({
+            message: "observabilityHooks.onError requires a publicApiKey to function.",
+            code: CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
+            severity: Severity.CRITICAL,
+            visibility: ErrorVisibility.BANNER,
+          }),
+        );
+        styledConsole.publicApiKeyRequired("observabilityHooks.onError");
+      }
+    },
+    [publicApiKey, chatApiEndpoint, observabilityHooks, setBannerError],
   );
 
   // Clipboard paste handler
@@ -436,14 +541,15 @@ export function CopilotChat({
         const loadedImages = (await Promise.all(imagePromises)).filter((img) => img !== null);
         setSelectedImages((prev) => [...prev, ...loadedImages]);
       } catch (error) {
-        // TODO: Show an error message to the user
+        // Trigger chat-level error handler
+        triggerChatError(error, "processClipboardImages", error);
         console.error("Error processing pasted images:", error);
       }
     };
 
     document.addEventListener("paste", handlePaste);
     return () => document.removeEventListener("paste", handlePaste);
-  }, [imageUploadsEnabled]);
+  }, [imageUploadsEnabled, triggerChatError]);
 
   useEffect(() => {
     if (!additionalInstructions?.length) {
@@ -469,7 +575,7 @@ export function CopilotChat({
   }, [instructions, additionalInstructions]);
 
   const {
-    visibleMessages,
+    messages,
     isLoading,
     sendMessage,
     stopGeneration,
@@ -563,7 +669,8 @@ export function CopilotChat({
       const loadedImages = await Promise.all(fileReadPromises);
       setSelectedImages((prev) => [...prev, ...loadedImages]);
     } catch (error) {
-      // TODO: Show an error message to the user
+      // Trigger chat-level error handler
+      triggerChatError(error, "processUploadedImages", error);
       console.error("Error reading files:", error);
     }
   };
@@ -592,11 +699,24 @@ export function CopilotChat({
 
   return (
     <WrappedCopilotChat icons={icons} labels={labels} className={className}>
+      {/* Render error above messages if present */}
+      {chatError &&
+        renderError &&
+        renderError({
+          ...chatError,
+          onDismiss: () => setChatError(null),
+          onRetry: () => {
+            // Clear error and potentially retry based on operation
+            setChatError(null);
+            // TODO: Implement specific retry logic based on operation type
+          },
+        })}
+
       <Messages
         AssistantMessage={AssistantMessage}
         UserMessage={UserMessage}
         RenderMessage={RenderMessage}
-        messages={visibleMessages}
+        messages={messages}
         inProgress={isLoading}
         onRegenerate={handleRegenerate}
         onCopy={handleCopy}
@@ -604,6 +724,12 @@ export function CopilotChat({
         onThumbsDown={handleThumbsDown}
         markdownTagRenderers={markdownTagRenderers}
         ImageRenderer={ImageRenderer}
+        // Legacy props - passed through to Messages component
+        RenderTextMessage={RenderTextMessage}
+        RenderActionExecutionMessage={RenderActionExecutionMessage}
+        RenderAgentStateMessage={RenderAgentStateMessage}
+        RenderResultMessage={RenderResultMessage}
+        RenderImageMessage={RenderImageMessage}
       >
         {currentSuggestions.length > 0 && (
           <RenderSuggestionsList
@@ -669,8 +795,8 @@ export const useCopilotChatLogic = (
   onReloadMessages?: OnReloadMessages,
 ) => {
   const {
-    visibleMessages,
-    appendMessage,
+    messages,
+    sendMessage,
     setMessages,
     reloadMessages: defaultReloadMessages,
     stopGeneration: defaultStopGeneration,
@@ -734,14 +860,14 @@ export const useCopilotChatLogic = (
     }
 
     // Generate initial suggestions when chat is empty
-    if (visibleMessages.length === 0 && !hasGeneratedInitialSuggestions.current) {
+    if (messages.length === 0 && !hasGeneratedInitialSuggestions.current) {
       hasGeneratedInitialSuggestions.current = true;
       generateSuggestionsWithErrorHandling("initial");
       return;
     }
 
     // Generate post-message suggestions after assistant responds
-    if (visibleMessages.length > 0 && suggestions.length === 0) {
+    if (messages.length > 0 && suggestions.length === 0) {
       generateSuggestionsWithErrorHandling("post-message");
       return;
     }
@@ -749,7 +875,7 @@ export const useCopilotChatLogic = (
     chatSuggestions,
     isLoadingSuggestions,
     suggestionsFailed,
-    visibleMessages.length,
+    messages.length,
     isLoading,
     suggestions.length,
     Object.keys(generalContext.chatSuggestionConfiguration).join(","), // Use stable string instead of object reference
@@ -789,7 +915,7 @@ export const useCopilotChatLogic = (
     onInProgress?.(isLoading);
   }, [onInProgress, isLoading]);
 
-  const sendMessage = async (
+  const safelySendMessage = async (
     messageContent: string,
     imagesToUse?: Array<{ contentType: string; bytes: string }>,
   ) => {
@@ -821,7 +947,7 @@ export const useCopilotChatLogic = (
       }
 
       // Send the message and clear suggestions for auto/manual modes
-      await appendMessage(textMessage, {
+      await sendMessage(textMessage, {
         followUp: images.length === 0,
         clearSuggestions: chatSuggestions === "auto" || chatSuggestions === "manual",
       });
@@ -842,7 +968,7 @@ export const useCopilotChatLogic = (
             bytes: images[i].bytes,
           },
         } as unknown as Message;
-        await appendMessage(imageMessage, { followUp: i === images.length - 1 });
+        await sendMessage(imageMessage, { followUp: i === images.length - 1 });
         if (!firstMessage) {
           firstMessage = imageMessage;
         }
@@ -859,7 +985,6 @@ export const useCopilotChatLogic = (
     return firstMessage;
   };
 
-  const messages = visibleMessages;
   const currentAgentName = generalContext.agentSession?.agentName;
   const restartCurrentAgent = async (hint?: HintFunction) => {
     if (generalContext.agentSession) {
@@ -887,9 +1012,8 @@ export const useCopilotChatLogic = (
         generalContext.agentSession.agentName,
         stableContext,
         messagesContext.messages,
-        appendMessage,
+        sendMessage,
         runChatCompletion,
-        hint,
       );
     }
   };
@@ -950,10 +1074,9 @@ export const useCopilotChatLogic = (
 
   return {
     messages,
-    visibleMessages,
     isLoading,
     suggestions,
-    sendMessage,
+    sendMessage: safelySendMessage,
     stopGeneration,
     reloadMessages,
     resetSuggestions,

package/src/components/chat/Messages.tsx

@@ -3,6 +3,7 @@ import { MessagesProps } from "./props";
 import { useChatContext } from "./ChatContext";
 import { Message } from "@copilotkit/shared";
 import { useCopilotChatInternal as useCopilotChat } from "@copilotkit/react-core";
+import { LegacyRenderMessage, LegacyRenderProps } from "./messages/LegacyRenderMessage";
 
 export const Messages = ({
   inProgress,
@@ -10,25 +11,76 @@ export const Messages = ({
   RenderMessage,
   AssistantMessage,
   UserMessage,
+  ImageRenderer,
   onRegenerate,
   onCopy,
   onThumbsUp,
   onThumbsDown,
   markdownTagRenderers,
+
+  // Legacy props
+  RenderTextMessage,
+  RenderActionExecutionMessage,
+  RenderAgentStateMessage,
+  RenderResultMessage,
+  RenderImageMessage,
 }: MessagesProps) => {
   const { labels } = useChatContext();
-  const { visibleMessages, interrupt } = useCopilotChat();
+  const { messages: visibleMessages, interrupt } = useCopilotChat();
   const initialMessages = useMemo(() => makeInitialMessages(labels.initial), [labels.initial]);
   const messages = [...initialMessages, ...visibleMessages];
   const { messagesContainerRef, messagesEndRef } = useScrollToBottom(messages);
 
+  // Check if any legacy props are provided
+  const hasLegacyProps = !!(
+    RenderTextMessage ||
+    RenderActionExecutionMessage ||
+    RenderAgentStateMessage ||
+    RenderResultMessage ||
+    RenderImageMessage
+  );
+
+  // Show deprecation warning if legacy props are used
+  useEffect(() => {
+    if (hasLegacyProps) {
+      console.warn(
+        "[CopilotKit] Legacy message render props (RenderTextMessage, RenderActionExecutionMessage, etc.) are deprecated. " +
+          "Please use the unified 'RenderMessage' prop instead. " +
+          "See migration guide: https://docs.copilotkit.ai/migration/render-message",
+      );
+    }
+  }, [hasLegacyProps]);
+
+  // Create legacy props object for the adapter
+  const legacyProps: LegacyRenderProps = useMemo(
+    () => ({
+      RenderTextMessage,
+      RenderActionExecutionMessage,
+      RenderAgentStateMessage,
+      RenderResultMessage,
+      RenderImageMessage,
+    }),
+    [
+      RenderTextMessage,
+      RenderActionExecutionMessage,
+      RenderAgentStateMessage,
+      RenderResultMessage,
+      RenderImageMessage,
+    ],
+  );
+
+  // Determine which render component to use
+  const MessageRenderer = hasLegacyProps
+    ? (props: any) => <LegacyRenderMessage {...props} legacyProps={legacyProps} />
+    : RenderMessage;
+
   return (
     <div className="copilotKitMessages" ref={messagesContainerRef}>
       <div className="copilotKitMessagesContainer">
         {messages.map((message, index) => {
           const isCurrentMessage = index === messages.length - 1;
           return (
-            <RenderMessage
+            <MessageRenderer
               key={index}
               message={message}
               inProgress={inProgress}
@@ -36,6 +88,7 @@ export const Messages = ({
               isCurrentMessage={isCurrentMessage}
               AssistantMessage={AssistantMessage}
               UserMessage={UserMessage}
+              ImageRenderer={ImageRenderer}
               onRegenerate={onRegenerate}
               onCopy={onCopy}
               onThumbsUp={onThumbsUp}
@@ -69,7 +122,7 @@ function makeInitialMessages(initial: string | string[] | undefined): Message[]
   return [
     {
       id: initial,
-      role: "system",
+      role: "assistant",
       content: initial,
     },
   ];

package/src/components/chat/Modal.tsx

@@ -10,6 +10,13 @@ import { CopilotChat, CopilotChatProps } from "./Chat";
 import { AssistantMessage as DefaultAssistantMessage } from "./messages/AssistantMessage";
 import { UserMessage as DefaultUserMessage } from "./messages/UserMessage";
 import { useCopilotContext } from "@copilotkit/react-core";
+import {
+  CopilotKitError,
+  CopilotKitErrorCode,
+  Severity,
+  ErrorVisibility,
+  styledConsole,
+} from "@copilotkit/shared";
 
 export interface CopilotModalProps extends CopilotChatProps {
   /**
@@ -79,16 +86,30 @@ const CopilotModalInner = ({
   hitEscapeToClose: boolean;
   shortcut: string;
 }) => {
-  const { copilotApiConfig } = useCopilotContext();
+  const { copilotApiConfig, setBannerError } = useCopilotContext();
+
+  // Destructure stable values to avoid object reference changes
+  const { publicApiKey } = copilotApiConfig;
 
   // Helper function to trigger event hooks only if publicApiKey is provided
   const triggerObservabilityHook = useCallback(
     (hookName: keyof CopilotObservabilityHooks, ...args: any[]) => {
-      if (copilotApiConfig.publicApiKey && observabilityHooks?.[hookName]) {
+      if (publicApiKey && observabilityHooks?.[hookName]) {
         (observabilityHooks[hookName] as any)(...args);
       }
+      if (observabilityHooks?.[hookName] && !publicApiKey) {
+        setBannerError(
+          new CopilotKitError({
+            message: "observabilityHooks requires a publicApiKey to function.",
+            code: CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
+            severity: Severity.CRITICAL,
+            visibility: ErrorVisibility.BANNER,
+          }),
+        );
+        styledConsole.publicApiKeyRequired("observabilityHooks");
+      }
     },
-    [copilotApiConfig.publicApiKey, observabilityHooks],
+    [publicApiKey, observabilityHooks, setBannerError],
   );
 
   const { open } = useChatContext();

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

@@ -0,0 +1,143 @@
+import React from "react";
+import { RenderMessageProps } from "../props";
+import { RenderMessage as DefaultRenderMessage } from "./RenderMessage";
+import { aguiToGQL } from "@copilotkit/runtime-client-gql";
+
+/**
+ * Legacy message render props interface for backwards compatibility
+ */
+export interface LegacyRenderProps {
+  RenderTextMessage?: React.ComponentType<RenderMessageProps>;
+  RenderActionExecutionMessage?: React.ComponentType<RenderMessageProps>;
+  RenderAgentStateMessage?: React.ComponentType<RenderMessageProps>;
+  RenderResultMessage?: React.ComponentType<RenderMessageProps>;
+  RenderImageMessage?: React.ComponentType<RenderMessageProps>;
+}
+
+/**
+ * Props for the LegacyRenderMessage component
+ */
+export interface LegacyRenderMessageProps extends RenderMessageProps {
+  legacyProps: LegacyRenderProps;
+}
+
+/**
+ * Legacy message adapter component that maps old render props to new message types.
+ * This component provides backwards compatibility for the deprecated render props.
+ */
+export const LegacyRenderMessage: React.FC<LegacyRenderMessageProps> = ({
+  message,
+  inProgress,
+  index,
+  isCurrentMessage,
+  actionResult,
+  AssistantMessage,
+  UserMessage,
+  ImageRenderer,
+  onRegenerate,
+  onCopy,
+  onThumbsUp,
+  onThumbsDown,
+  markdownTagRenderers,
+  legacyProps,
+}) => {
+  const {
+    RenderTextMessage,
+    RenderActionExecutionMessage,
+    RenderAgentStateMessage,
+    RenderResultMessage,
+    RenderImageMessage,
+  } = legacyProps;
+
+  const deprecatedMessage = aguiToGQL(message)[0] ?? undefined;
+
+  // Route to appropriate legacy renderer based on message type
+  if (deprecatedMessage.isTextMessage() && RenderTextMessage) {
+    return (
+      <RenderTextMessage
+        message={message}
+        inProgress={inProgress}
+        index={index}
+        isCurrentMessage={isCurrentMessage}
+        AssistantMessage={AssistantMessage}
+        UserMessage={UserMessage}
+        onRegenerate={onRegenerate}
+        onCopy={onCopy}
+        onThumbsUp={onThumbsUp}
+        onThumbsDown={onThumbsDown}
+        markdownTagRenderers={markdownTagRenderers}
+      />
+    );
+  }
+
+  if (deprecatedMessage.isActionExecutionMessage() && RenderActionExecutionMessage) {
+    return (
+      <RenderActionExecutionMessage
+        message={message}
+        inProgress={inProgress}
+        index={index}
+        isCurrentMessage={isCurrentMessage}
+        actionResult={actionResult}
+        AssistantMessage={AssistantMessage}
+        UserMessage={UserMessage}
+      />
+    );
+  }
+
+  if (deprecatedMessage.isAgentStateMessage() && RenderAgentStateMessage) {
+    return (
+      <RenderAgentStateMessage
+        message={message}
+        inProgress={inProgress}
+        index={index}
+        isCurrentMessage={isCurrentMessage}
+        AssistantMessage={AssistantMessage}
+        UserMessage={UserMessage}
+      />
+    );
+  }
+
+  if (deprecatedMessage.isResultMessage() && RenderResultMessage) {
+    return (
+      <RenderResultMessage
+        message={message}
+        inProgress={inProgress}
+        index={index}
+        isCurrentMessage={isCurrentMessage}
+        AssistantMessage={AssistantMessage}
+        UserMessage={UserMessage}
+      />
+    );
+  }
+
+  if (deprecatedMessage.isImageMessage() && RenderImageMessage) {
+    return (
+      <RenderImageMessage
+        message={message}
+        inProgress={inProgress}
+        index={index}
+        isCurrentMessage={isCurrentMessage}
+        AssistantMessage={AssistantMessage}
+        UserMessage={UserMessage}
+      />
+    );
+  }
+
+  // Fallback to default RenderMessage for any unhandled cases
+  return (
+    <DefaultRenderMessage
+      message={message}
+      inProgress={inProgress}
+      index={index}
+      isCurrentMessage={isCurrentMessage}
+      AssistantMessage={AssistantMessage}
+      UserMessage={UserMessage}
+      ImageRenderer={ImageRenderer}
+      onRegenerate={onRegenerate}
+      onCopy={onCopy}
+      onThumbsUp={onThumbsUp}
+      onThumbsDown={onThumbsDown}
+      markdownTagRenderers={markdownTagRenderers}
+    />
+  );
+};