From e0dd5961d3e1cb3038c9869746d7b4101ec51a9a Mon Sep 17 00:00:00 2001
From: Maxwell Calkin <MaxwellCalkin@gmail.com>
Date: Mon, 9 Mar 2026 02:22:14 -0400
Subject: [PATCH 1/2] fix: safely render structured output objects to prevent
 React error #31

When LLM providers (especially Anthropic) return structured content blocks
like { text, type } objects, the UI crashes with React error #31 because
these objects are passed directly as React children instead of being
converted to strings first.

This adds a safeRenderValue() utility that:
- Extracts the .text property from { text, type } content blocks
- Joins text from arrays of content blocks (Anthropic format)
- Falls back to JSON.stringify for other objects
- Returns primitives unchanged

Applied to all chat message rendering paths:
- Public deployed chat (ClientChatMessage)
- Floating workspace chat (ChatMessage)
- Chat streaming hook (stopStreaming content concatenation)
- Chat store (appendMessageContent)

Fixes #2725

AI Disclosure: This commit was authored by Claude Opus 4.6 (Anthropic), an AI agent operated by Maxwell Calkin (@MaxwellCalkin).
---
 .../app/chat/components/message/message.tsx   | 30 +++----
 apps/sim/app/chat/hooks/use-chat-streaming.ts | 11 +--
 .../components/chat-message/chat-message.tsx  |  6 +-
 apps/sim/lib/core/utils/safe-render.test.ts   | 82 +++++++++++++++++++
 apps/sim/lib/core/utils/safe-render.ts        | 67 +++++++++++++++
 apps/sim/stores/chat/store.ts                 | 11 ++-
 6 files changed, 177 insertions(+), 30 deletions(-)
 create mode 100644 apps/sim/lib/core/utils/safe-render.test.ts
 create mode 100644 apps/sim/lib/core/utils/safe-render.ts

diff --git a/apps/sim/app/chat/components/message/message.tsx b/apps/sim/app/chat/components/message/message.tsx
index 7a8f4546d4e..8aa3203b98b 100644
--- a/apps/sim/app/chat/components/message/message.tsx
+++ b/apps/sim/app/chat/components/message/message.tsx
@@ -3,6 +3,7 @@
 import { memo, useMemo, useState } from 'react'
 import { Check, Copy, File as FileIcon, FileText, Image as ImageIcon } from 'lucide-react'
 import { Tooltip } from '@/components/emcn'
+import { safeRenderValue } from '@/lib/core/utils/safe-render'
 import {
   ChatFileDownload,
   ChatFileDownloadAll,
@@ -50,9 +51,14 @@ export const ClientChatMessage = memo(
       return typeof message.content === 'object' && message.content !== null
     }, [message.content])
 
-    // Since tool calls are now handled via SSE events and stored in message.toolCalls,
-    // we can use the content directly without parsing
-    const cleanTextContent = message.content
+    // Safely convert content to a renderable string to prevent React error #31
+    // when workflow nodes return structured objects (e.g. { text, type })
+    const cleanTextContent = useMemo(() => {
+      if (isJsonObject) {
+        return JSON.stringify(message.content, null, 2)
+      }
+      return safeRenderValue(message.content)
+    }, [message.content, isJsonObject])
 
     const content =
       message.type === 'user' ? (
@@ -161,14 +167,14 @@ export const ClientChatMessage = memo(
             )}
 
             {/* Only render message bubble if there's actual text content (not just file count message) */}
-            {message.content && !String(message.content).startsWith('Sent') && (
+            {cleanTextContent && !cleanTextContent.startsWith('Sent') && (
               <div className='flex justify-end'>
                 <div className='max-w-[80%] rounded-3xl bg-[#F4F4F4] px-4 py-3 dark:bg-gray-600'>
                   <div className='whitespace-pre-wrap break-words text-base text-gray-800 leading-relaxed dark:text-gray-100'>
                     {isJsonObject ? (
-                      <pre>{JSON.stringify(message.content, null, 2)}</pre>
+                      <pre>{cleanTextContent}</pre>
                     ) : (
-                      <span>{message.content as string}</span>
+                      <span>{cleanTextContent}</span>
                     )}
                   </div>
                 </div>
@@ -184,11 +190,9 @@ export const ClientChatMessage = memo(
               <div>
                 <div className='break-words text-base'>
                   {isJsonObject ? (
-                    <pre className='text-gray-800 dark:text-gray-100'>
-                      {JSON.stringify(cleanTextContent, null, 2)}
-                    </pre>
+                    <pre className='text-gray-800 dark:text-gray-100'>{cleanTextContent}</pre>
                   ) : (
-                    <EnhancedMarkdownRenderer content={cleanTextContent as string} />
+                    <EnhancedMarkdownRenderer content={cleanTextContent} />
                   )}
                 </div>
               </div>
@@ -208,11 +212,7 @@ export const ClientChatMessage = memo(
                         <button
                           className='text-muted-foreground transition-colors hover:bg-muted'
                           onClick={() => {
-                            const contentToCopy =
-                              typeof cleanTextContent === 'string'
-                                ? cleanTextContent
-                                : JSON.stringify(cleanTextContent, null, 2)
-                            navigator.clipboard.writeText(contentToCopy)
+                            navigator.clipboard.writeText(cleanTextContent)
                             setIsCopied(true)
                             setTimeout(() => setIsCopied(false), 2000)
                           }}
diff --git a/apps/sim/app/chat/hooks/use-chat-streaming.ts b/apps/sim/app/chat/hooks/use-chat-streaming.ts
index e0208709311..98cef62d078 100644
--- a/apps/sim/app/chat/hooks/use-chat-streaming.ts
+++ b/apps/sim/app/chat/hooks/use-chat-streaming.ts
@@ -2,6 +2,7 @@
 
 import { useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
+import { safeRenderValue } from '@/lib/core/utils/safe-render'
 import { isUserFileWithMetadata } from '@/lib/core/utils/user-file'
 import type { ChatFile, ChatMessage } from '@/app/chat/components/message/message'
 import { CHAT_ERROR_MESSAGES } from '@/app/chat/constants'
@@ -84,12 +85,12 @@ export function useChatStreaming() {
 
         // Only modify if the last message is from the assistant (as expected)
         if (lastMessage && lastMessage.type === 'assistant') {
-          // Append a note that the response was stopped
+          // Safely convert content to string before concatenation to prevent
+          // React error #31 when content is a structured object
+          const existingContent = safeRenderValue(lastMessage.content)
           const updatedContent =
-            lastMessage.content +
-            (lastMessage.content
-              ? '\n\n_Response stopped by user._'
-              : '_Response stopped by user._')
+            existingContent +
+            (existingContent ? '\n\n_Response stopped by user._' : '_Response stopped by user._')
 
           return [
             ...prev.slice(0, -1),
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx
index a11983b0be2..d3b1c88fb0c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx
@@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import { safeRenderValue } from '@/lib/core/utils/safe-render'
 import { StreamingIndicator } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/smooth-streaming'
 
 interface ChatAttachment {
@@ -94,10 +95,7 @@ const WordWrap = ({ text }: { text: string }) => {
  */
 export function ChatMessage({ message }: ChatMessageProps) {
   const formattedContent = useMemo(() => {
-    if (typeof message.content === 'object' && message.content !== null) {
-      return JSON.stringify(message.content, null, 2)
-    }
-    return String(message.content || '')
+    return safeRenderValue(message.content)
   }, [message.content])
 
   const handleAttachmentClick = (attachment: ChatAttachment) => {
diff --git a/apps/sim/lib/core/utils/safe-render.test.ts b/apps/sim/lib/core/utils/safe-render.test.ts
new file mode 100644
index 00000000000..ed067cf3cd6
--- /dev/null
+++ b/apps/sim/lib/core/utils/safe-render.test.ts
@@ -0,0 +1,82 @@
+/**
+ * @vitest-environment node
+ */
+import { describe, expect, it } from 'vitest'
+import { safeRenderValue } from '@/lib/core/utils/safe-render'
+
+describe('safeRenderValue', () => {
+  it('returns empty string for null', () => {
+    expect(safeRenderValue(null)).toBe('')
+  })
+
+  it('returns empty string for undefined', () => {
+    expect(safeRenderValue(undefined)).toBe('')
+  })
+
+  it('returns string values unchanged', () => {
+    expect(safeRenderValue('hello world')).toBe('hello world')
+  })
+
+  it('returns empty string for empty string input', () => {
+    expect(safeRenderValue('')).toBe('')
+  })
+
+  it('converts numbers to string', () => {
+    expect(safeRenderValue(42)).toBe('42')
+    expect(safeRenderValue(0)).toBe('0')
+    expect(safeRenderValue(-1.5)).toBe('-1.5')
+  })
+
+  it('converts booleans to string', () => {
+    expect(safeRenderValue(true)).toBe('true')
+    expect(safeRenderValue(false)).toBe('false')
+  })
+
+  it('extracts text from {text, type} content block objects', () => {
+    expect(safeRenderValue({ text: 'Hello from AI', type: 'text' })).toBe('Hello from AI')
+  })
+
+  it('extracts text from {text} objects without type', () => {
+    expect(safeRenderValue({ text: 'Some text' })).toBe('Some text')
+  })
+
+  it('joins text from arrays of content blocks', () => {
+    const contentArray = [
+      { text: 'Hello ', type: 'text' },
+      { text: 'world', type: 'text' },
+    ]
+    expect(safeRenderValue(contentArray)).toBe('Hello world')
+  })
+
+  it('handles arrays with mixed content types', () => {
+    const mixedArray = [
+      { text: 'Text part', type: 'text' },
+      { type: 'tool_use', id: '123', name: 'search' },
+    ]
+    const result = safeRenderValue(mixedArray)
+    expect(result).toContain('Text part')
+    expect(result).toContain('tool_use')
+  })
+
+  it('handles string arrays', () => {
+    expect(safeRenderValue(['hello', 'world'])).toBe('helloworld')
+  })
+
+  it('JSON-stringifies plain objects without text property', () => {
+    const obj = { key: 'value', nested: { a: 1 } }
+    expect(safeRenderValue(obj)).toBe(JSON.stringify(obj, null, 2))
+  })
+
+  it('JSON-stringifies empty objects', () => {
+    expect(safeRenderValue({})).toBe('{}')
+  })
+
+  it('handles empty arrays', () => {
+    expect(safeRenderValue([])).toBe('[]')
+  })
+
+  it('does not extract text when text property is not a string', () => {
+    const obj = { text: 42, type: 'number' }
+    expect(safeRenderValue(obj)).toBe(JSON.stringify(obj, null, 2))
+  })
+})
diff --git a/apps/sim/lib/core/utils/safe-render.ts b/apps/sim/lib/core/utils/safe-render.ts
new file mode 100644
index 00000000000..acaefca42d1
--- /dev/null
+++ b/apps/sim/lib/core/utils/safe-render.ts
@@ -0,0 +1,67 @@
+/**
+ * Safely converts a value to a string suitable for rendering in JSX.
+ *
+ * Prevents React error #31 ("Objects are not valid as a React child") by
+ * ensuring that structured objects (e.g. `{ text, type }` content blocks
+ * returned by LLM providers) are converted to a displayable string instead
+ * of being passed directly as React children.
+ *
+ * @param value - The value to convert. Can be a string, number, boolean,
+ *   null, undefined, array, or object.
+ * @returns A string representation safe for rendering in JSX.
+ */
+export function safeRenderValue(value: unknown): string {
+  if (value === null || value === undefined) {
+    return ''
+  }
+
+  if (typeof value === 'string') {
+    return value
+  }
+
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return String(value)
+  }
+
+  if (typeof value === 'object') {
+    // Handle content block objects like { text, type } from LLM providers
+    // by extracting the text property when available
+    if (
+      !Array.isArray(value) &&
+      'text' in value &&
+      typeof (value as Record<string, unknown>).text === 'string'
+    ) {
+      return (value as Record<string, unknown>).text as string
+    }
+
+    // Handle arrays of content blocks (e.g. Anthropic's content array)
+    if (Array.isArray(value)) {
+      const textParts = value
+        .map((item) => {
+          if (typeof item === 'string') return item
+          if (
+            item &&
+            typeof item === 'object' &&
+            'text' in item &&
+            typeof item.text === 'string'
+          ) {
+            return item.text
+          }
+          return JSON.stringify(item)
+        })
+        .filter(Boolean)
+
+      if (textParts.length > 0) {
+        return textParts.join('')
+      }
+    }
+
+    try {
+      return JSON.stringify(value, null, 2)
+    } catch {
+      return String(value)
+    }
+  }
+
+  return String(value)
+}
diff --git a/apps/sim/stores/chat/store.ts b/apps/sim/stores/chat/store.ts
index 3da14769db3..38b4940448b 100644
--- a/apps/sim/stores/chat/store.ts
+++ b/apps/sim/stores/chat/store.ts
@@ -2,6 +2,7 @@ import { createLogger } from '@sim/logger'
 import { v4 as uuidv4 } from 'uuid'
 import { create } from 'zustand'
 import { devtools, persist } from 'zustand/middleware'
+import { safeRenderValue } from '@/lib/core/utils/safe-render'
 import type { ChatMessage, ChatState } from './types'
 import { MAX_CHAT_HEIGHT, MAX_CHAT_WIDTH, MIN_CHAT_HEIGHT, MIN_CHAT_WIDTH } from './utils'
 
@@ -213,12 +214,10 @@ export const useChatStore = create<ChatState>()(
 
             const newMessages = state.messages.map((message) => {
               if (message.id === messageId) {
-                const newContent =
-                  typeof message.content === 'string'
-                    ? message.content + content
-                    : message.content
-                      ? String(message.content) + content
-                      : content
+                // Safely convert existing content to string before concatenation
+                // to prevent React error #31 when content is a structured object
+                const existingContent = safeRenderValue(message.content)
+                const newContent = existingContent + content
                 logger.debug('[ChatStore] Updated message content', {
                   messageId,
                   oldLength: typeof message.content === 'string' ? message.content.length : 0,

From 4443719527118a6af78924fd195c8ae64fb31b73 Mon Sep 17 00:00:00 2001
From: Maxwell Calkin <101308415+MaxwellCalkin@users.noreply.github.com>
Date: Mon, 9 Mar 2026 02:36:00 -0400
Subject: [PATCH 2/2] fix: use safeRenderValue consistently for all content
 types

The isJsonObject branch was bypassing safeRenderValue and calling
JSON.stringify directly, which displayed raw JSON for structured
objects like { text, type } instead of extracting the text field.

Now all content goes through safeRenderValue which extracts .text
from content blocks and falls back to JSON.stringify only when
no text field is found.

Addresses review feedback from Greptile and Cursor bots.

AI Disclosure: This commit was authored by Claude Opus 4.6 (Anthropic),
an AI agent operated by Maxwell Calkin (@MaxwellCalkin).
---
 apps/sim/app/chat/components/message/message.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/sim/app/chat/components/message/message.tsx b/apps/sim/app/chat/components/message/message.tsx
index 8aa3203b98b..72b0f79774f 100644
--- a/apps/sim/app/chat/components/message/message.tsx
+++ b/apps/sim/app/chat/components/message/message.tsx
@@ -53,12 +53,12 @@ export const ClientChatMessage = memo(
 
     // Safely convert content to a renderable string to prevent React error #31
     // when workflow nodes return structured objects (e.g. { text, type })
-    const cleanTextContent = useMemo(() => {
-      if (isJsonObject) {
-        return JSON.stringify(message.content, null, 2)
-      }
-      return safeRenderValue(message.content)
-    }, [message.content, isJsonObject])
+    // Use safeRenderValue for all content types — it extracts .text from
+    // structured objects like { text, type } and falls back to JSON.stringify
+    const cleanTextContent = useMemo(
+      () => safeRenderValue(message.content),
+      [message.content]
+    )
 
     const content =
       message.type === 'user' ? (