fix(chat): align streamed markdown table columns

Author: blove

examples/chat/angular/e2e/markdown-surfaces.spec.ts

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-import { test, expect } from '@playwright/test';
+import { test, expect, type Locator } from '@playwright/test';
 import { sendPromptAndWait } from './test-helpers';
 
 test('heading: assistant bubble renders an <h1>', async ({ page }) => {
@@ -43,6 +43,7 @@ test('markdown checklist matrix: rich markdown renders with escaped html', async
   await expect(bubble.locator('table')).toBeVisible();
   await expect(bubble.locator('thead th')).toHaveText(['Name', 'Mental model', 'When to use']);
   await expect(bubble.locator('tbody tr')).toHaveCount(2);
+  await expect.poll(async () => tableColumnsAlign(bubble)).toBe(true);
   await expect(bubble.locator('blockquote')).toBeVisible();
   await expect(bubble).toContainText('This is a blockquote.');
   await expect(bubble.locator('a', { hasText: 'Angular' })).toHaveAttribute(
@@ -53,3 +54,21 @@ test('markdown checklist matrix: rich markdown renders with escaped html', async
   await expect(bubble.locator('script')).toHaveCount(0);
   await expect(bubble).toContainText("<script>alert('xss')</script>");
 });
+
+async function tableColumnsAlign(bubble: Locator): Promise<boolean> {
+  const table = bubble.locator('table').first();
+  return table.evaluate((el) => {
+    const headerCells = Array.from(el.querySelectorAll('thead th'));
+    const rows = Array.from(el.querySelectorAll('tbody tr'));
+    if (headerCells.length === 0 || rows.length === 0) return false;
+
+    const headerLefts = headerCells.map((cell) => cell.getBoundingClientRect().left);
+    return rows.every((row) => {
+      const cells = Array.from(row.querySelectorAll('td'));
+      if (cells.length !== headerLefts.length) return false;
+      return cells.every((cell, index) => (
+        Math.abs(cell.getBoundingClientRect().left - headerLefts[index]) <= 1
+      ));
+    });
+  });
+}

libs/chat/src/lib/markdown/views/markdown-table-row.component.spec.ts

@@ -4,7 +4,7 @@ import { describe, it, expect, beforeEach } from 'vitest';
 import { TestBed } from '@angular/core/testing';
 import { Component, signal } from '@angular/core';
 import { views } from '@threadplane/render';
-import type { MarkdownTableRowNode } from '@cacheplane/partial-markdown';
+import type { MarkdownTableCellNode, MarkdownTableRowNode } from '@cacheplane/partial-markdown';
 import { MarkdownTableRowComponent } from './markdown-table-row.component';
 import { MarkdownTableCellComponent } from './markdown-table-cell.component';
 import { MARKDOWN_VIEW_REGISTRY } from '../markdown-view-registry';
@@ -18,6 +18,15 @@ function makeRowNode(isHeader: boolean, children: MarkdownTableRowNode['children
   } as MarkdownTableRowNode;
 }
 
+function makeCellNode(id: number): MarkdownTableCellNode {
+  return {
+    id, type: 'table-cell', status: 'complete',
+    parent: null, index: null,
+    alignment: null,
+    children: [],
+  } as MarkdownTableCellNode;
+}
+
 @Component({
   standalone: true,
   imports: [MarkdownTableRowComponent],
@@ -64,4 +73,17 @@ describe('MarkdownTableRowComponent', () => {
     const tr = fixture.nativeElement.querySelector('tr');
     expect(tr.classList.contains('chat-md-table-row--header')).toBe(true);
   });
+
+  it('renders table-cell components directly under the table row', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.componentInstance.node.set(makeRowNode(false, [
+      makeCellNode(3),
+      makeCellNode(4),
+    ] as MarkdownTableRowNode['children']));
+    fixture.detectChanges();
+
+    const tr = fixture.nativeElement.querySelector('tr');
+    expect(tr.querySelector(':scope > chat-md-children')).toBeNull();
+    expect(tr.querySelectorAll(':scope > chat-md-table-cell').length).toBe(2);
+  });
 });

libs/chat/src/lib/markdown/views/markdown-table-row.component.ts

@@ -1,18 +1,25 @@
 // libs/chat/src/lib/markdown/views/markdown-table-row.component.ts
 // SPDX-License-Identifier: MIT
-import { Component, ChangeDetectionStrategy, input, computed, inject } from '@angular/core';
-import type { MarkdownTableRowNode } from '@cacheplane/partial-markdown';
-import { MarkdownChildrenComponent } from '../markdown-children.component';
+import { NgComponentOutlet } from '@angular/common';
+import { Component, ChangeDetectionStrategy, input, computed, inject, type Type } from '@angular/core';
+import type { ViewRegistry } from '@threadplane/render';
+import type { MarkdownNode, MarkdownTableRowNode } from '@cacheplane/partial-markdown';
+import { MARKDOWN_VIEW_REGISTRY } from '../markdown-view-registry';
 import { IS_HEADER_ROW } from '../markdown-table-row.token';
 
 @Component({
   selector: 'chat-md-table-row',
   standalone: true,
-  imports: [MarkdownChildrenComponent],
+  imports: [NgComponentOutlet],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <tr class="chat-md-table-row" [class.chat-md-table-row--header]="node().isHeader">
-      <chat-md-children [parent]="node()" />
+      @for (child of node().children; track $index) {
+        @let comp = resolve(child);
+        @if (comp) {
+          <ng-container *ngComponentOutlet="comp; inputs: { node: child }" />
+        }
+      }
     </tr>
   `,
   providers: [
@@ -27,4 +34,11 @@ import { IS_HEADER_ROW } from '../markdown-table-row.token';
 })
 export class MarkdownTableRowComponent {
   readonly node = input.required<MarkdownTableRowNode>();
+  private readonly registry = inject<ViewRegistry>(MARKDOWN_VIEW_REGISTRY);
+
+  protected resolve(child: MarkdownNode): Type<unknown> | null {
+    const entry = this.registry[child.type];
+    if (!entry) return null;
+    return typeof entry === 'function' ? entry : entry.component;
+  }
 }