[fix]: artifact actionlist rendering in chat

[PuneetP16]

Fix Artifact Rendering in Chat Messages

Problem

When chat messages contain Artifact components (like ActionLists) wrapped in code fences (```), they are rendered as plain code blocks instead of rendering via Artifact.tsx component.

// ignore escapes
/`/`/`xml
<div class="__boltArtifact__" data-message-id="RVO8njc"></div>
/`/`/`

Root Cause

ReactMarkdown processes code-fenced content before component rendering, causing the boltArtifact elements to be treated as plain text within code blocks rather than being passed to the Artifact component.

Solution

Added preprocessing step to remove code fence markers specifically around artifact elements:

• Introduced stripCodeFenceFromArtifact function in app/components/chat/Markdown.tsx
• Added unit tests in app/components/chat/Markdown.spec.ts

Alternative Approach Considered

Explored handling at the component level through ReactMarkdown's AST:

pre: (props) => {
  const textContent = node?.children?.[0]?.children?.[0];
  // Check text content for artifact markup
  if (textContent.value.includes('__boltArtifact__')) {
    const messageId = extractMessageId(textContent.value);
     // validate if messageId exists
    return <Artifact messageId={messageId} />;
  }
  // ... regular code block handling
}

Why Current Solution Was Chosen

• Simpler Mental Model : Preprocessing the string is more straightforward than dealing with AST.
• Less Fragile : Doesn't depend on specific AST structure which could change with ReactMarkdown updates
• Better Separation of Concerns : Handles artifact cleanup before markdown processing rather than mixing concerns in component rendering
• Easier Testing : String manipulation is simpler to test than component rendering logic
• More Maintainable : Future developers can more easily understand and modify string preprocessing than AST traversal

Changes

Before

After

Impact

• ✅ Artifacts now render as interactive components in chat
• ✅ Preserves code block rendering for actual code snippets
• ✅ Improves chat message readability and functionality
• ✅ Added test coverage for preprocessing

Testing

• ✅ Verified Artifact and ActionList rendering in chat messages
• ✅ Added unit tests for stripCodeFenceFromArtifact
• ✅ Confirmed regular code blocks still render correctly
• ✅ Tested edge cases (nested code blocks, multiple artifacts)