fix rendering issues

Author: charleslien

cli/src/hooks/use-send-message.ts

@@ -46,44 +46,6 @@ const updateBlocksRecursively = (
   })
 }
 
-const mergeTextSegments = (
-  previous: string,
-  incoming: string,
-): { next: string; delta: string } => {
-  if (!incoming) {
-    return { next: previous, delta: '' }
-  }
-  if (!previous) {
-    return { next: incoming, delta: incoming }
-  }
-
-  if (incoming.startsWith(previous)) {
-    return { next: incoming, delta: incoming.slice(previous.length) }
-  }
-
-  if (previous.includes(incoming)) {
-    return { next: previous, delta: '' }
-  }
-
-  const maxOverlap = Math.min(previous.length, incoming.length)
-  for (let overlap = maxOverlap; overlap > 0; overlap--) {
-    if (
-      previous.slice(previous.length - overlap) === incoming.slice(0, overlap)
-    ) {
-      const delta = incoming.slice(overlap)
-      return {
-        next: previous + delta,
-        delta,
-      }
-    }
-  }
-
-  return {
-    next: previous + incoming,
-    delta: incoming,
-  }
-}
-
 export type SendMessageTimerEvent =
   | {
       type: 'start'
@@ -694,16 +656,14 @@ export const useSendMessage = ({
 
               const previous =
                 agentStreamAccumulatorsRef.current.get(agentId) ?? ''
-              const { next, delta } = mergeTextSegments(previous, chunk)
-              if (!delta && next === previous) {
+              if (!chunk) {
                 return
               }
-              agentStreamAccumulatorsRef.current.set(agentId, next)
+              agentStreamAccumulatorsRef.current.set(agentId, previous + chunk)
 
               updateAgentContent(agentId, {
                 type: 'text',
-                content: delta || next,
-                ...(delta ? {} : { replace: true }),
+                content: chunk,
               })
               return
             }
@@ -714,24 +674,13 @@ export const useSendMessage = ({
             }
 
             const previous = rootStreamBufferRef.current ?? ''
-            const { next, delta } = mergeTextSegments(previous, event)
-            if (!delta && next === previous) {
+            if (!event) {
               return
             }
-            logger.info(
-              {
-                chunkLength: event.length,
-                previousLength: previous.length,
-                nextLength: next.length,
-                preview: event.slice(0, 100),
-              },
-              'handleStreamChunk root delta',
-            )
-            rootStreamBufferRef.current = next
+
+            rootStreamBufferRef.current = previous + event
             rootStreamSeenRef.current = true
-            if (delta) {
-              appendRootTextChunk(delta)
-            }
+            appendRootTextChunk(event)
           },
 
           handleEvent: (event: any) => {
@@ -764,24 +713,18 @@ export const useSendMessage = ({
                 )
                 const previous =
                   agentStreamAccumulatorsRef.current.get(event.agentId) ?? ''
-                const { next, delta } = mergeTextSegments(previous, text)
-                if (!delta && next === previous) {
+                if (!text) {
                   return
                 }
-                agentStreamAccumulatorsRef.current.set(event.agentId, next)
+                agentStreamAccumulatorsRef.current.set(
+                  event.agentId,
+                  previous + text,
+                )
 
-                if (delta) {
-                  updateAgentContent(event.agentId, {
-                    type: 'text',
-                    content: delta,
-                  })
-                } else {
-                  updateAgentContent(event.agentId, {
-                    type: 'text',
-                    content: next,
-                    replace: true,
-                  })
-                }
+                updateAgentContent(event.agentId, {
+                  type: 'text',
+                  content: text,
+                })
               } else {
                 if (rootStreamSeenRef.current) {
                   logger.info(
@@ -794,24 +737,20 @@ export const useSendMessage = ({
                   return
                 }
                 const previous = rootStreamBufferRef.current ?? ''
-                const { next, delta } = mergeTextSegments(previous, text)
-                if (!delta && next === previous) {
+                if (!text) {
                   return
                 }
                 logger.info(
                   {
                     textPreview: text.slice(0, 100),
                     previousLength: previous.length,
-                    textLength: text.length,
-                    appendedLength: delta.length,
+                    appendedLength: text.length,
                   },
                   'setMessages: text event without agentId',
                 )
-                rootStreamBufferRef.current = next
+                rootStreamBufferRef.current = previous + text
 
-                if (delta) {
-                  appendRootTextChunk(delta)
-                }
+                appendRootTextChunk(text)
               }
               return
             }

cli/src/utils/__tests__/markdown-renderer.test.tsx

@@ -209,4 +209,121 @@ describe('markdown renderer', () => {
     expect(textContent).toContain('|')
     expect(textContent).toContain('---')
   })
+
+  test('renders code fence followed by text with quotes correctly', () => {
+    const markdown = `\`\`\`bash
+# Start using it
+codebuff "add a new feature to handle user authentication"
+\`\`\``
+    const output = renderMarkdown(markdown)
+    const nodes = flattenNodes(output)
+
+    // Get the text content from all nodes
+    const textContent = nodes
+      .map((node) => {
+        if (typeof node === 'string') return node
+        if (React.isValidElement(node)) {
+          return flattenChildren(node.props.children).join('')
+        }
+        return ''
+      })
+      .join('')
+
+    // Should contain the complete command text
+    expect(textContent).toContain('# Start using it')
+    expect(textContent).toContain('codebuff "add a new feature to handle user authentication"')
+    
+    // Should NOT have quotes concatenated with backticks
+    expect(textContent).not.toContain('it"')
+    expect(textContent).not.toContain('```"')
+  })
+
+  test('renders inline code followed by quotes correctly', () => {
+    const markdown = 'Use `codebuff "fix bug"` to fix bugs.'
+    const output = renderMarkdown(markdown)
+    const nodes = flattenNodes(output)
+
+    expect(nodes[0]).toBe('Use ')
+
+    const inlineCode = nodes[1] as React.ReactElement
+    expect(inlineCode.props.fg).toBe('brightYellow')
+    const inlineContent = flattenChildren(inlineCode.props.children).join('')
+    expect(inlineContent).toContain('codebuff "fix bug"')
+
+    expect(nodes[2]).toBe(' to fix bugs.')
+    
+    // Verify quotes are inside the inline code, not concatenated after
+    expect(inlineContent).toMatch(/codebuff\s+"fix bug"/)
+  })
+
+  test('renders multiple code blocks with text between them', () => {
+    const markdown = `First block:
+
+\`\`\`js
+console.log("hello")
+\`\`\`
+
+Middle text with "quotes"
+
+\`\`\`js
+console.log("world")
+\`\`\``
+    const output = renderMarkdown(markdown)
+    const nodes = flattenNodes(output)
+
+    const textContent = nodes
+      .map((node) => {
+        if (typeof node === 'string') return node
+        if (React.isValidElement(node)) {
+          return flattenChildren(node.props.children).join('')
+        }
+        return ''
+      })
+      .join('')
+
+    // All content should be present
+    expect(textContent).toContain('First block:')
+    expect(textContent).toContain('console.log("hello")')
+    expect(textContent).toContain('Middle text with "quotes"')
+    expect(textContent).toContain('console.log("world")')
+    
+    // Verify no quote concatenation issues
+    expect(textContent).not.toContain('```"')
+    expect(textContent).not.toContain('"```')
+  })
+
+  test('renders code fence with command and quotes on same line', () => {
+    const markdown = `\`\`\`bash
+codebuff "implement feature" --verbose
+\`\`\``
+    const output = renderMarkdown(markdown)
+    const nodes = flattenNodes(output)
+
+    const textContent = nodes
+      .map((node) => {
+        if (typeof node === 'string') return node
+        if (React.isValidElement(node)) {
+          return flattenChildren(node.props.children).join('')
+        }
+        return ''
+      })
+      .join('')
+
+    // Should preserve the complete command with quotes
+    expect(textContent).toContain('codebuff "implement feature" --verbose')
+    expect(textContent).not.toContain('```"')
+  })
+
+  test('renders inline code with special characters correctly', () => {
+    const markdown = 'Run `git commit -m "fix: bug"` to commit.'
+    const output = renderMarkdown(markdown)
+    const nodes = flattenNodes(output)
+
+    const inlineCode = nodes[1] as React.ReactElement
+    const inlineContent = flattenChildren(inlineCode.props.children).join('')
+    
+    // Should preserve quotes and special characters within inline code
+    expect(inlineContent).toContain('git commit -m "fix: bug"')
+    expect(nodes[2]).toBe(' to commit.')
+  })
 })