fix(chat): gate narration seam repair on channel transitions, render nested inline markdown recursively

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/inline-markdown.test.tsx

@@ -5,55 +5,75 @@ import { isValidElement } from 'react'
 import { describe, expect, it } from 'vitest'
 import { renderInlineMarkdown } from './inline-markdown'
 
-function textOfPart(part: React.ReactNode): string {
-  if (typeof part === 'string') return part
-  if (isValidElement<{ children?: React.ReactNode }>(part)) return String(part.props.children)
+function flattenText(node: React.ReactNode): string {
+  if (typeof node === 'string') return node
+  if (Array.isArray(node)) return node.map(flattenText).join('')
+  if (isValidElement<{ children?: React.ReactNode }>(node)) return flattenText(node.props.children)
   return ''
 }
 
+function findByType(parts: React.ReactNode[], type: string): React.ReactNode {
+  return parts.find((p) => isValidElement(p) && p.type === type)
+}
+
 describe('renderInlineMarkdown', () => {
   it('renders **bold** spans as strong elements', () => {
     const parts = renderInlineMarkdown('The failing block is **ModalDenied** (a Slack block).')
-    const bold = parts.find((p) => isValidElement(p) && p.type === 'strong')
+    const bold = findByType(parts, 'strong')
     expect(bold).toBeDefined()
-    expect(textOfPart(bold)).toBe('ModalDenied')
-    expect(parts.some((p) => typeof p === 'string' && p.includes('*'))).toBe(false)
+    expect(flattenText(bold)).toBe('ModalDenied')
+    expect(flattenText(parts)).toBe('The failing block is ModalDenied (a Slack block).')
   })
 
   it('renders `code` spans as mono elements', () => {
     const parts = renderInlineMarkdown('check the `webhook` payload')
-    const code = parts.find((p) => isValidElement(p) && p.type === 'span')
-    expect(textOfPart(code)).toBe('webhook')
-  })
-
-  it('leaves unterminated markers verbatim', () => {
-    expect(renderInlineMarkdown('a **dangling marker')).toEqual(['a **dangling marker'])
-    expect(renderInlineMarkdown('a `dangling tick')).toEqual(['a `dangling tick'])
-  })
-
-  it('passes plain text through untouched', () => {
-    expect(renderInlineMarkdown('no markup here.')).toEqual(['no markup here.'])
+    expect(flattenText(findByType(parts, 'span'))).toBe('webhook')
+    expect(flattenText(parts)).toBe('check the webhook payload')
   })
 
   it('renders *italic* spans as em elements', () => {
     const parts = renderInlineMarkdown('this is *important* context')
-    const em = parts.find((p) => isValidElement(p) && p.type === 'em')
-    expect(textOfPart(em)).toBe('important')
-  })
-
-  it('does not italicize bare asterisks in math-like text', () => {
-    expect(renderInlineMarkdown('2 * 3 * 4')).toEqual(['2 * 3 * 4'])
+    expect(flattenText(findByType(parts, 'em'))).toBe('important')
   })
 
   it('renders ***bold-italic*** as nested strong and em', () => {
     const parts = renderInlineMarkdown('a ***wrapped*** word')
-    const bold = parts.find((p) => isValidElement(p) && p.type === 'strong')
+    const bold = findByType(parts, 'strong')
     expect(bold).toBeDefined()
-    expect(parts.some((p) => typeof p === 'string' && p.includes('*'))).toBe(false)
+    expect(flattenText(parts)).toBe('a wrapped word')
   })
 
   it('renders links as their label text', () => {
     const parts = renderInlineMarkdown('see [the docs](https://sim.ai/docs) for more')
-    expect(parts.join('')).toBe('see the docs for more')
+    expect(flattenText(parts)).toBe('see the docs for more')
+  })
+
+  it('keeps emphasis markers inside code spans verbatim', () => {
+    const parts = renderInlineMarkdown('pass `*args` and `**kwargs` through')
+    const codeTexts = parts
+      .filter((p) => isValidElement(p) && p.type === 'span')
+      .map((p) => flattenText(p))
+    expect(codeTexts).toEqual(['*args', '**kwargs'])
+    expect(flattenText(parts)).toBe('pass *args and **kwargs through')
+  })
+
+  it('renders nested markers inside emphasis and link labels', () => {
+    expect(
+      flattenText(renderInlineMarkdown('read [**the docs**](https://sim.ai/docs) first'))
+    ).toBe('read the docs first')
+    expect(flattenText(renderInlineMarkdown('use *`glob`* patterns'))).toBe('use glob patterns')
+  })
+
+  it('leaves unterminated markers verbatim', () => {
+    expect(renderInlineMarkdown('a **dangling marker')).toEqual(['a **dangling marker'])
+    expect(renderInlineMarkdown('a `dangling tick')).toEqual(['a `dangling tick'])
+  })
+
+  it('does not italicize bare asterisks in math-like text', () => {
+    expect(renderInlineMarkdown('2 * 3 * 4')).toEqual(['2 * 3 * 4'])
+  })
+
+  it('passes plain text through untouched', () => {
+    expect(renderInlineMarkdown('no markup here.')).toEqual(['no markup here.'])
   })
 })

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/inline-markdown.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import { Fragment, type ReactNode } from 'react'
 
 const INLINE_TOKEN =
   /(\*{3}[^*\n]+\*{3}|\*\*[^*\n]+\*\*|\*[^\s*](?:[^*\n]*[^\s*])?\*|`[^`\n]+`|\[[^\]\n]+\]\([^\s)]+\))/g
@@ -7,43 +7,45 @@ const LINK_TOKEN = /^\[([^\]\n]+)\]\([^\s)]+\)$/
 
 /**
  * Minimal inline-markdown renderer for agent-group narration rows. Supports
- * `**bold**`, `*italic*`, `***bold-italic***`, `` `code` `` spans, and `[label](url)` links
- * (rendered as their label — narration is prose, not navigation). Everything
- * else, including unterminated markers, renders verbatim. Full Streamdown
- * rendering is intentionally avoided here — these rows re-render on every
- * streaming frame.
+ * `**bold**`, `*italic*`, `***bold-italic***`, `` `code` `` spans, and
+ * `[label](url)` links (rendered as their label — narration is prose, not
+ * navigation). Emphasis contents and link labels are rendered recursively so
+ * nested markers resolve; code spans stay verbatim. Everything else,
+ * including unterminated markers, renders as-is. Full Streamdown rendering is
+ * intentionally avoided here — these rows re-render on every streaming frame.
  */
 export function renderInlineMarkdown(text: string): ReactNode[] {
-  const parts = text.split(INLINE_TOKEN)
-  return parts.map((part, i) => {
-    if (part.length > 6 && part.startsWith('***') && part.endsWith('***')) {
-      return (
-        <strong key={i} className='font-semibold'>
-          <em>{part.slice(3, -3)}</em>
-        </strong>
-      )
-    }
-    if (part.length > 4 && part.startsWith('**') && part.endsWith('**')) {
-      return (
-        <strong key={i} className='font-semibold'>
-          {part.slice(2, -2)}
-        </strong>
-      )
-    }
-    if (part.length > 2 && part.startsWith('`') && part.endsWith('`')) {
-      return (
-        <span key={i} className='font-mono text-[12px]'>
-          {part.slice(1, -1)}
-        </span>
-      )
-    }
-    if (part.length > 2 && part.startsWith('*') && part.endsWith('*')) {
-      return <em key={i}>{part.slice(1, -1)}</em>
-    }
-    const link = LINK_TOKEN.exec(part)
-    if (link) {
-      return link[1]
-    }
-    return part
-  })
+  return text.split(INLINE_TOKEN).map(renderToken)
+}
+
+function renderToken(part: string, key: number): ReactNode {
+  if (part.length > 6 && part.startsWith('***') && part.endsWith('***')) {
+    return (
+      <strong key={key} className='font-semibold'>
+        <em>{renderInlineMarkdown(part.slice(3, -3))}</em>
+      </strong>
+    )
+  }
+  if (part.length > 4 && part.startsWith('**') && part.endsWith('**')) {
+    return (
+      <strong key={key} className='font-semibold'>
+        {renderInlineMarkdown(part.slice(2, -2))}
+      </strong>
+    )
+  }
+  if (part.length > 2 && part.startsWith('`') && part.endsWith('`')) {
+    return (
+      <span key={key} className='font-mono text-[12px]'>
+        {part.slice(1, -1)}
+      </span>
+    )
+  }
+  if (part.length > 2 && part.startsWith('*') && part.endsWith('*')) {
+    return <em key={key}>{renderInlineMarkdown(part.slice(1, -1))}</em>
+  }
+  const link = LINK_TOKEN.exec(part)
+  if (link) {
+    return <Fragment key={key}>{renderInlineMarkdown(link[1])}</Fragment>
+  }
+  return part
 }

apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.test.ts

@@ -356,6 +356,8 @@ describe('narration text seams', () => {
     expect(seam('日本語のテキストが分割', 'されても壊れない')).toBe(
       '日本語のテキストが分割されても壊れない'
     )
+    expect(seam('released in v2.', '1 last week')).toBe('released in v2.1 last week')
+    expect(seam('pi is 3.', '14 roughly')).toBe('pi is 3.14 roughly')
   })
 
   it('does not double-space when the seam already has whitespace', () => {

apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx

@@ -137,22 +137,34 @@ function createAgentGroupSegment(name: string, id: string): AgentGroupSegment {
   }
 }
 
+type NarrationChannel = 'thinking' | 'assistant'
+
 /**
  * Appends narration content to a group, merging into the previous text item.
- * Distinct segments (e.g. a thinking run followed by a text run) can meet
- * without any whitespace at the seam, gluing sentences together. The merge
- * repairs only unambiguous sentence boundaries — trailing punctuation meeting
- * a fresh alphanumeric start — so a segment split mid-word, mid-URL, or in
- * text that takes no spaces (CJK) is never corrupted.
+ * When a thinking run and a text run meet, their contents can glue together
+ * without any whitespace at the seam. The merge repairs only that semantic
+ * channel transition, and only at an unambiguous sentence boundary — trailing
+ * punctuation meeting a fresh alphanumeric start. Same-channel continuations
+ * (streamed chunks of one run, resume legs) are concatenated verbatim, so a
+ * token split like `v2.` + `1` is never mutated. `lastChannelByGroup` is the
+ * caller's per-parse tracker of each group's most recent narration channel.
  */
-function appendTextItem(group: AgentGroupSegment, content: string): void {
+function appendTextItem(
+  group: AgentGroupSegment,
+  content: string,
+  channel: NarrationChannel,
+  lastChannelByGroup: Map<AgentGroupSegment, NarrationChannel>
+): void {
   const lastItem = group.items[group.items.length - 1]
   if (lastItem?.type === 'text') {
-    const needsSpace = /[.!?;:]$/.test(lastItem.content) && /^[A-Za-z0-9]/.test(content)
+    const isChannelSeam = lastChannelByGroup.get(group) !== channel
+    const needsSpace =
+      isChannelSeam && /[.!?;:]$/.test(lastItem.content) && /^[A-Za-z0-9]/.test(content)
     lastItem.content += (needsSpace ? ' ' : '') + content
   } else {
     group.items.push({ type: 'text', content })
   }
+  lastChannelByGroup.set(group, channel)
 }
 
 /**
@@ -166,6 +178,7 @@ function appendTextItem(group: AgentGroupSegment, content: string): void {
 function parseBlocksWithSpanTree(blocks: ContentBlock[]): MessageSegment[] {
   const segments: MessageSegment[] = []
   const groupsBySpanId = new Map<string, AgentGroupSegment>()
+  const lastNarrationChannel = new Map<AgentGroupSegment, NarrationChannel>()
   // Stable per-run counters for React keys. The Nth top-level text run / Nth
   // mothership group keeps the same key across re-parses (text runs and groups
   // are append-only at the top level), so React never remounts the streaming
@@ -272,7 +285,12 @@ function parseBlocksWithSpanTree(blocks: ContentBlock[]): MessageSegment[] {
       }
       if (!g) continue
       g.isDelegating = false
-      appendTextItem(g, block.content)
+      appendTextItem(
+        g,
+        block.content,
+        block.type === 'subagent_thinking' ? 'thinking' : 'assistant',
+        lastNarrationChannel
+      )
       continue
     }
 
@@ -288,7 +306,7 @@ function parseBlocksWithSpanTree(blocks: ContentBlock[]): MessageSegment[] {
         if (!g) g = ensureSpanGroup(block.subagent, block.spanId, block.parentSpanId)
         if (g) {
           g.isDelegating = false
-          appendTextItem(g, block.content)
+          appendTextItem(g, block.content, 'assistant', lastNarrationChannel)
           continue
         }
       }
@@ -417,6 +435,7 @@ export function parseBlocks(blocks: ContentBlock[]): MessageSegment[] {
 function parseBlocksLegacy(blocks: ContentBlock[]): MessageSegment[] {
   const segments: MessageSegment[] = []
   const groupsByKey = new Map<string, AgentGroupSegment>()
+  const lastNarrationChannel = new Map<AgentGroupSegment, NarrationChannel>()
   let activeGroupKey: string | null = null
 
   const groupKey = (name: string, parentToolCallId: string | undefined) =>
@@ -488,12 +507,12 @@ function parseBlocksLegacy(blocks: ContentBlock[]): MessageSegment[] {
       const g = findGroupForSubagentChunk(block.parentToolCallId)
       if (!g) continue
       g.isDelegating = false
-      const lastItem = g.items[g.items.length - 1]
-      if (lastItem?.type === 'text') {
-        lastItem.content += block.content
-      } else {
-        g.items.push({ type: 'text', content: block.content })
-      }
+      appendTextItem(
+        g,
+        block.content,
+        block.type === 'subagent_thinking' ? 'thinking' : 'assistant',
+        lastNarrationChannel
+      )
       continue
     }
 
@@ -511,12 +530,7 @@ function parseBlocksLegacy(blocks: ContentBlock[]): MessageSegment[] {
         const g = groupsByKey.get(resolveGroupKey(block.subagent, block.parentToolCallId))
         if (g) {
           g.isDelegating = false
-          const lastItem = g.items[g.items.length - 1]
-          if (lastItem?.type === 'text') {
-            lastItem.content += block.content
-          } else {
-            g.items.push({ type: 'text', content: block.content })
-          }
+          appendTextItem(g, block.content, 'assistant', lastNarrationChannel)
           continue
         }
       }