@runtypelabs/persona 4.0.0 → 4.1.0

package/dist/theme-editor.d.cts

@@ -2929,7 +2929,7 @@ type AgentWidgetStatusIndicatorConfig = {
 type AgentWidgetVoiceRecognitionConfig = {
     enabled?: boolean;
     pauseDuration?: number;
-    /** Text shown in the user message placeholder while voice is being processed. Default: "🎤 Processing voice..." */
+    /** Text shown in the user message placeholder while voice is being processed. Default: "Processing voice..." */
     processingText?: string;
     /** Text shown in the assistant message if voice processing fails. Default: "Voice processing failed. Please try again." */
     processingErrorText?: string;

package/dist/theme-editor.d.ts

@@ -2929,7 +2929,7 @@ type AgentWidgetStatusIndicatorConfig = {
 type AgentWidgetVoiceRecognitionConfig = {
     enabled?: boolean;
     pauseDuration?: number;
-    /** Text shown in the user message placeholder while voice is being processed. Default: "🎤 Processing voice..." */
+    /** Text shown in the user message placeholder while voice is being processed. Default: "Processing voice..." */
     processingText?: string;
     /** Text shown in the assistant message if voice processing fails. Default: "Voice processing failed. Please try again." */
     processingErrorText?: string;

package/dist/widget.css

@@ -1621,6 +1621,20 @@
   background-color: rgba(0, 0, 0, 0.02);
 }
 
+/* While a message is still streaming, lock table column widths so incoming rows
+   append without the per-chunk horizontal reflow (Telegram-style space
+   reservation). The class is removed on the final render, relaxing the finished
+   table to natural content-fit widths. overflow-wrap keeps long cell content
+   from spilling past the fixed columns mid-stream. */
+.persona-content-streaming table {
+  table-layout: fixed;
+}
+
+.persona-content-streaming th,
+.persona-content-streaming td {
+  overflow-wrap: break-word;
+}
+
 /* ============================================
    Markdown Horizontal Rule Styles
    ============================================ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Themeable, pluggable streaming agent widget for websites, in plain JS with support for voice input and reasoning / tool output.",
   "type": "module",
   "main": "dist/index.cjs",

package/src/components/message-bubble.ts

@@ -795,6 +795,13 @@ export const createStandardBubble = (
   const contentDiv = document.createElement("div");
   contentDiv.classList.add("persona-message-content");
 
+  // While streaming, lock table column widths (see widget.css) so rows append
+  // without per-chunk horizontal reflow. The class is dropped on the final,
+  // non-streaming render, relaxing tables to natural content-fit widths.
+  if (message.streaming) {
+    contentDiv.classList.add("persona-content-streaming");
+  }
+
   if (streamAnimationActive && streamPlugin) {
     if (streamPlugin.containerClass) {
       contentDiv.classList.add(streamPlugin.containerClass);

package/src/styles/widget.css

@@ -1621,6 +1621,20 @@
   background-color: rgba(0, 0, 0, 0.02);
 }
 
+/* While a message is still streaming, lock table column widths so incoming rows
+   append without the per-chunk horizontal reflow (Telegram-style space
+   reservation). The class is removed on the final render, relaxing the finished
+   table to natural content-fit widths. overflow-wrap keeps long cell content
+   from spilling past the fixed columns mid-stream. */
+.persona-content-streaming table {
+  table-layout: fixed;
+}
+
+.persona-content-streaming th,
+.persona-content-streaming td {
+  overflow-wrap: break-word;
+}
+
 /* ============================================
    Markdown Horizontal Rule Styles
    ============================================ */

package/src/types.ts

@@ -1791,7 +1791,7 @@ export type AgentWidgetStatusIndicatorConfig = {
 export type AgentWidgetVoiceRecognitionConfig = {
   enabled?: boolean;
   pauseDuration?: number;
-  /** Text shown in the user message placeholder while voice is being processed. Default: "🎤 Processing voice..." */
+  /** Text shown in the user message placeholder while voice is being processed. Default: "Processing voice..." */
   processingText?: string;
   /** Text shown in the assistant message if voice processing fails. Default: "Voice processing failed. Please try again." */
   processingErrorText?: string;

package/src/ui.ts

@@ -1,5 +1,6 @@
 import { escapeHtml, createMarkdownProcessorFromConfig } from "./postprocessors";
 import { resolveSanitizer } from "./utils/sanitize";
+import { stabilizeStreamingTables } from "./utils/streaming-table";
 import { loadMarkdownParsers, getMarkdownParsersSync } from "./markdown-parsers-loader";
 import { AgentWidgetSession, AgentWidgetSessionStatus } from "./session";
 import {
@@ -473,8 +474,12 @@ export const buildPostprocessor = (
       // sanitizer's degraded fallback. Honors `sanitize: false` (pass-through) as before.
       html = sanitize ? sanitize(out) : out;
     } else if (markdownProcessor) {
+      // While streaming, normalize tables-in-progress so they render as a real
+      // <table> from the first row with a stable column count (Telegram-style
+      // space reservation). The final, non-streaming render is left untouched.
+      const source = context.streaming ? stabilizeStreamingTables(nextText) : nextText;
       // Already escapeHtml(text) (single, safe) while parsers are not loaded.
-      const out = markdownProcessor(nextText);
+      const out = markdownProcessor(source);
       html = sanitize && parsersReady ? sanitize(out) : out;
     } else {
       // Plain text: escapeHtml output is inert — never re-sanitize (the second escape).

package/src/utils/streaming-table.test.ts

@@ -0,0 +1,100 @@
+import { describe, it, expect } from "vitest";
+import { stabilizeStreamingTables } from "./streaming-table";
+import { createMarkdownProcessor } from "../postprocessors";
+
+describe("stabilizeStreamingTables", () => {
+  it("leaves text without pipes untouched", () => {
+    const md = "# Heading\n\nA paragraph with no tables.";
+    expect(stabilizeStreamingTables(md)).toBe(md);
+  });
+
+  it("does not treat a header-only line as a table (no delimiter yet)", () => {
+    // Ambiguous: could just be inline pipe text. Leave it alone until a
+    // delimiter row starts streaming in.
+    const md = "| Name | Price |";
+    expect(stabilizeStreamingTables(md)).toBe(md);
+  });
+
+  it("completes a partial delimiter row so the table renders immediately", () => {
+    const md = "| Name | Price |\n| --";
+    expect(stabilizeStreamingTables(md)).toBe("| Name | Price |\n| --- | --- |");
+  });
+
+  it("completes a delimiter that is just a leading pipe with one dash", () => {
+    const md = "| A | B | C |\n|-";
+    expect(stabilizeStreamingTables(md)).toBe("| A | B | C |\n| --- | --- | --- |");
+  });
+
+  it("pads a partial trailing row to the header column count", () => {
+    const md = "| Name | Price |\n| --- | --- |\n| Apple";
+    expect(stabilizeStreamingTables(md)).toBe(
+      "| Name | Price |\n| --- | --- |\n| Apple |  |"
+    );
+  });
+
+  it("keeps a complete table stable (idempotent)", () => {
+    const md = "| Name | Price |\n| --- | --- |\n| Apple | $1 |";
+    expect(stabilizeStreamingTables(md)).toBe(md);
+    expect(stabilizeStreamingTables(stabilizeStreamingTables(md))).toBe(md);
+  });
+
+  it("counts columns from a header without outer pipes", () => {
+    const md = "Name | Price\n---";
+    expect(stabilizeStreamingTables(md)).toBe("Name | Price\n| --- | --- |");
+  });
+
+  it("normalizes rows with extra cells down to the header column count", () => {
+    const md = "| A | B |\n| --- | --- |\n| 1 | 2 | 3 |";
+    expect(stabilizeStreamingTables(md)).toBe("| A | B |\n| --- | --- |\n| 1 | 2 |");
+  });
+
+  it("stops the table region at a blank line and leaves following text alone", () => {
+    const md = "| A | B |\n| --- | --- |\n| 1 | 2 |\n\nSome | trailing | text";
+    expect(stabilizeStreamingTables(md)).toBe(md);
+  });
+
+  it("preserves leading prose before a streaming table", () => {
+    const md = "Here you go:\n\n| A | B |\n| -";
+    expect(stabilizeStreamingTables(md)).toBe("Here you go:\n\n| A | B |\n| --- | --- |");
+  });
+
+  it("handles two separate tables in one stream", () => {
+    const md =
+      "| A | B |\n| --- | --- |\n| 1 | 2 |\n\nmiddle\n\n| C | D | E |\n| --";
+    expect(stabilizeStreamingTables(md)).toBe(
+      "| A | B |\n| --- | --- |\n| 1 | 2 |\n\nmiddle\n\n| C | D | E |\n| --- | --- | --- |"
+    );
+  });
+
+  it("preserves alignment-colon delimiters as a valid table start", () => {
+    const md = "| A | B |\n| :-";
+    // Detection accepts colons; the synthesized delimiter normalizes to dashes
+    // (alignment reappears in the untouched final render).
+    expect(stabilizeStreamingTables(md)).toBe("| A | B |\n| --- | --- |");
+  });
+});
+
+describe("stabilizeStreamingTables → marked integration", () => {
+  const md = createMarkdownProcessor();
+
+  it("renders a <table> from a header + partial delimiter that marked alone would not", () => {
+    const partial = "| Name | Price |\n| --";
+
+    // Without stabilization marked sees no complete delimiter → no table.
+    expect(md(partial)).not.toContain("<table");
+
+    const html = md(stabilizeStreamingTables(partial));
+    expect(html).toContain("<table");
+    expect(html).toContain("<th>Name</th>");
+    expect(html).toContain("<th>Price</th>");
+  });
+
+  it("renders a body row for a partial trailing row", () => {
+    const partial = "| Name | Price |\n| --- | --- |\n| Apple";
+    const html = md(stabilizeStreamingTables(partial));
+    expect(html).toContain("<table");
+    expect(html).toContain("<td>Apple</td>");
+    // The padded empty cell keeps the column count stable.
+    expect(html.match(/<td/g)?.length).toBe(2);
+  });
+});

package/src/utils/streaming-table.ts

@@ -0,0 +1,103 @@
+/**
+ * Streaming markdown table stabilizer (Telegram-style space reservation).
+ *
+ * During SSE streaming the full accumulated markdown is re-parsed by `marked`
+ * on every chunk. For GFM tables that produces two jarring jolts:
+ *
+ *  1. The paragraph→table flip. GFM only recognizes a table once the *delimiter*
+ *     row (`| --- | --- |`) has arrived, so a freshly-streamed header line first
+ *     renders as a plain paragraph and then snaps into a `<table>`.
+ *  2. Partial-row flicker. The in-flight last row grows cell-by-cell.
+ *
+ * This module rewrites table-in-progress regions so a real `<table>` renders
+ * from the first row onward with a stable column count: it completes the
+ * delimiter row as soon as it starts streaming and pads the trailing partial
+ * row to the header's column count. Combined with `table-layout: fixed` while
+ * streaming (see `.persona-content-streaming table` in widget.css), columns lock
+ * to even widths so rows append vertically without horizontal reflow.
+ *
+ * It runs ONLY while a message is streaming; the final render uses the real,
+ * untouched `marked` output, so correctness is never affected.
+ */
+
+/**
+ * A GFM delimiter row, full or still streaming in: only delimiter characters
+ * (`-`, `:`, `|`, whitespace) and at least one dash. Matches `|`-led partials
+ * like `| -`, `|--`, `| :--`, and complete rows like `| --- | :--: |`.
+ */
+const DELIMITER_RE = /^\s*\|?[\s:|-]*-[\s:|-]*$/;
+
+/** A candidate table row contains at least one pipe. */
+const hasPipe = (line: string): boolean => line.includes("|");
+
+/** Split a markdown table row into trimmed cell strings, ignoring outer pipes. */
+const splitCells = (line: string): string[] => {
+  let s = line.trim();
+  if (s.startsWith("|")) s = s.slice(1);
+  if (s.endsWith("|")) s = s.slice(0, -1);
+  return s.split("|").map((cell) => cell.trim());
+};
+
+/** Render cells back into a normalized, pipe-delimited row. */
+const buildRow = (cells: string[]): string => `| ${cells.join(" | ")} |`;
+
+/** Build a complete delimiter row with the given column count. */
+const buildDelimiter = (cols: number): string =>
+  `| ${Array.from({ length: cols }, () => "---").join(" | ")} |`;
+
+/** Pad (or trim) a row's cells to exactly `cols` columns. */
+const fitCells = (cells: string[], cols: number): string[] => {
+  if (cells.length >= cols) return cells.slice(0, cols);
+  return cells.concat(Array.from({ length: cols - cells.length }, () => ""));
+};
+
+/**
+ * Normalize any streaming-in-progress GFM tables in `markdown` so they render as
+ * complete tables with a stable column count. Returns the input unchanged when
+ * there is nothing to stabilize (cheap fast-path for the common no-table case).
+ */
+export const stabilizeStreamingTables = (markdown: string): string => {
+  if (!markdown || !markdown.includes("|")) return markdown;
+
+  const lines = markdown.split("\n");
+  let changed = false;
+
+  for (let i = 0; i < lines.length - 1; i++) {
+    const header = lines[i];
+    const delimiter = lines[i + 1];
+
+    // A table starts at a header line (has a pipe, is not itself a delimiter)
+    // immediately followed by a delimiter row that is full or still streaming.
+    if (!hasPipe(header) || DELIMITER_RE.test(header)) continue;
+    if (!DELIMITER_RE.test(delimiter)) continue;
+
+    const cols = splitCells(header).length;
+    if (cols < 1) continue;
+
+    // Complete the delimiter to match the header's column count so `marked`
+    // recognizes the table immediately instead of waiting for it to finish.
+    const fullDelimiter = buildDelimiter(cols);
+    if (lines[i + 1] !== fullDelimiter) {
+      lines[i + 1] = fullDelimiter;
+      changed = true;
+    }
+
+    // Normalize body rows (including a partial trailing one) to `cols` columns
+    // so each row occupies its slot instead of growing cell-by-cell. The region
+    // ends at the first blank or pipe-less line.
+    let j = i + 2;
+    for (; j < lines.length; j++) {
+      const row = lines[j];
+      if (row.trim() === "" || !hasPipe(row)) break;
+      const normalized = buildRow(fitCells(splitCells(row), cols));
+      if (lines[j] !== normalized) {
+        lines[j] = normalized;
+        changed = true;
+      }
+    }
+
+    i = j - 1; // resume scanning after this table region
+  }
+
+  return changed ? lines.join("\n") : markdown;
+};