Fix: Handle object rendering in UI

[Patel230]

Summary

• Fixes "React error #31 when rendering workflow/node output objects ({text, type})” #2725 - React crashes when rendering workflow output objects
• Adds robust utility to safely format various output types
• Prevents UI crashes when nodes return structured objects like {text, type}

Changes

• Created format-output.ts utility with deep object traversal
• Updated chat components to use the new formatting utility
• Added comprehensive unit tests
• Handles edge cases: circular refs, nested objects, arrays, XSS protection

Test Plan

• Tested with LLM outputs returning {text: "content", type: "response"}
• Tested with nested objects and arrays
• Verified no React rendering errors
• Unit tests cover all scenarios

[vercel]

@Patel230 is attempting to deploy a commit to the Sim Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Greptile Overview

Greptile Summary

Fixes React crashes when workflow outputs return structured objects by introducing a robust formatting utility that safely converts various output types to displayable strings. Replaces inline JSON.stringify calls in chat components with deep object traversal that intelligently extracts text content from nested structures. Includes comprehensive unit tests covering edge cases like circular references, binary data, and common LLM response formats.

Confidence Score: 3/5

• Generally safe with minor implementation issues that should be addressed
• The PR successfully solves the object rendering crash issue with comprehensive error handling and extensive test coverage. However, several implementation concerns warrant attention: (1) unused seenObjects variable indicates incomplete cleanup, (2) array joining with newlines may cause unexpected vertical layout in chat UI, (3) aggressive whitespace normalization could break formatted content like code snippets, and (4) for...in usage is less efficient than modern alternatives. These are style and UX concerns rather than critical bugs, but they could impact display quality and code maintainability.
• apps/sim/lib/core/utils/format-output.ts needs attention for unused variables, whitespace handling, and array formatting behavior

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/lib/core/utils/format-output.ts	2/5	Adds comprehensive output formatting utility; seenObjects variable declared but never used, array joining uses newline which may cause layout issues in chat
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx	4/5	Replaces inline formatting logic with shared utility formatOutputForWorkflow; removes duplicate code
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx	4/5	Replaces manual JSON.stringify with formatOutputForChat utility for consistent object handling

Sequence Diagram

sequenceDiagram
    participant User
    participant ChatMessage
    participant FormatUtil as format-output.ts
    participant DeepExtract as deepExtractText()
    participant SafeStringify as safeStringify()

    User->>ChatMessage: Render message with object content
    ChatMessage->>FormatUtil: formatOutputForChat(content)
    FormatUtil->>FormatUtil: extractContent(item)
    
    alt Object with text field
        FormatUtil->>DeepExtract: deepExtractText(obj)
        DeepExtract->>DeepExtract: Search TEXT_FIELD_NAMES
        DeepExtract->>DeepExtract: Recursive traversal (max depth 10)
        DeepExtract-->>FormatUtil: Return extracted text
        FormatUtil->>FormatUtil: Clean whitespace & truncate
        FormatUtil-->>ChatMessage: Formatted string
    else Array
        FormatUtil->>FormatUtil: Map extractContent over items
        FormatUtil->>FormatUtil: Join with newline
        FormatUtil-->>ChatMessage: Joined string
    else Fallback to JSON
        FormatUtil->>SafeStringify: safeStringify(obj)
        SafeStringify->>SafeStringify: Handle circular refs
        SafeStringify-->>FormatUtil: JSON string
        FormatUtil->>FormatUtil: Wrap in code block (workflow mode)
        FormatUtil-->>ChatMessage: Formatted JSON
    end
    
    ChatMessage->>User: Display formatted text

Loading