fix(ui): 修复回答代码围栏嵌套与 CRLF 解析

packages/ui/src/components/chat/blocks/parseAnswerSegments.fences.test.ts

@@ -0,0 +1,101 @@
+import { describe, expect, it } from 'bun:test';
+import { parseAnswerSegments } from './parseAnswerSegments.ts';
+
+const block = (body: string, closed = true) => ({ kind: 'block' as const, body, closed });
+const text = (value: string) => ({ kind: 'text' as const, text: value });
+
+describe('parseAnswerSegments fence boundaries', () => {
+  it('does not activate a typed example inside a backtick code fence', () => {
+    const content = ['```json', '```folio-block', '{"metrics":[]}', '```', '```', 'After'].join('\n');
+
+    expect(parseAnswerSegments(content)).toEqual([text(content)]);
+  });
+
+  it('does not activate a typed example inside a tilde code fence', () => {
+    const content = ['~~~markdown', '~~~folio-block', '{"metrics":[]}', '~~~', '~~~', 'After'].join('\n');
+
+    expect(parseAnswerSegments(content)).toEqual([text(content)]);
+  });
+
+  it('requires a closing fence with the same marker and at least the opening length', () => {
+    const content = [
+      '````folio-block',
+      '{"ok":true}',
+      '```',
+      '~~~',
+      '````',
+      'After',
+    ].join('\n');
+
+    expect(parseAnswerSegments(content)).toEqual([block(['{"ok":true}', '```', '~~~'].join('\n')), text('After')]);
+  });
+
+  it('accepts a longer matching closing fence', () => {
+    const content = ['```folio-block', '{"ok":true}', '````', 'After'].join('\n');
+
+    expect(parseAnswerSegments(content)).toEqual([block('{"ok":true}'), text('After')]);
+  });
+
+  it('supports CRLF delimiters without losing body or following text', () => {
+    const content = 'Before\r\n```folio-block\r\n{"ok":true}\r\n```\r\nAfter';
+
+    expect(parseAnswerSegments(content)).toEqual([text('Before\r'), block('{"ok":true}\r'), text('After')]);
+  });
+
+  it('accepts up to three spaces but not four before a fence', () => {
+    const content = ['   ```folio-block', '{"three":true}', '   ```', '    ```folio-block', '{"four":true}', '    ```'].join('\n');
+
+    expect(parseAnswerSegments(content)).toEqual([
+      block('{"three":true}'),
+      text('    ```folio-block\n{"four":true}\n    ```'),
+    ]);
+  });
+
+  it('keeps an unclosed ordinary fence opaque while preserving a later typed fence', () => {
+    const content = ['```ts', 'const example = true;', '```folio-block', '{"not":"live"}'].join('\n');
+
+    expect(parseAnswerSegments(content)).toEqual([text(content)]);
+  });
+
+  it('resumes typed-block parsing after a closed ordinary fence', () => {
+    const content = [
+      'Before',
+      '```json',
+      '```folio-block',
+      '{"not":"live"}',
+      '```',
+      '```folio-block',
+      '{"live":true}',
+      '```',
+      'After',
+    ].join('\n');
+
+    expect(parseAnswerSegments(content)).toEqual([
+      text('Before\n```json\n```folio-block\n{"not":"live"}\n```'),
+      block('{"live":true}'),
+      text('After'),
+    ]);
+  });
+
+  it('does not treat inline or invalid-info backticks as delimiters', () => {
+    const content = [
+      'Text ```folio-block',
+      '{"inline":true}',
+      '```folio-block`',
+      '```folio-block',
+      '{"live":true}',
+      '```',
+    ].join('\n');
+
+    expect(parseAnswerSegments(content)).toEqual([
+      text('Text ```folio-block\n{"inline":true}\n```folio-block`'),
+      block('{"live":true}'),
+    ]);
+  });
+
+  it('keeps a typed block open until its matching marker is complete', () => {
+    const content = ['~~~folio-block', '{"partial":', '```', '~~', '~~~'].join('\n');
+
+    expect(parseAnswerSegments(content)).toEqual([block(['{"partial":', '```', '~~'].join('\n'))]);
+  });
+});

packages/ui/src/components/chat/blocks/parseAnswerSegments.ts

@@ -9,16 +9,23 @@ export type AnswerSegment =
   | { kind: 'text'; text: string }
   | { kind: 'block'; body: string; closed: boolean };
 
-const FENCE_OPEN = /^[ \t]{0,3}```(.*)$/;
-const FENCE_CLOSE = /^[ \t]{0,3}```[ \t]*$/;
+const FENCE_OPEN = /^[ \t]{0,3}(`{3,}|~{3,})(.*)$/;
+const FENCE_CLOSE = /^[ \t]{0,3}(`{3,}|~{3,})[ \t]*$/;
+
+// `split('\n')` leaves the carriage return on CRLF lines. Strip it only for
+// delimiter detection so the ordinary Markdown and typed JSON bytes remain
+// unchanged in the returned segments.
+const fenceLine = (line: string): string => (line.endsWith('\r') ? line.slice(0, -1) : line);
 
 /**
  * Split an answer string into text and typed-block segments.
  *
- * A `folio-block` fence that has not been closed yet (streaming) produces a
- * `closed: false` block segment holding the partial body — everything after an
- * unclosed fence belongs to it, mirroring how Markdown itself treats an
- * unclosed fence. All other fences remain plain text.
+ * Every fence is opaque until a bare closing fence with the same marker and
+ * at least the opening length arrives. This keeps `folio-block` examples
+ * inside ordinary Markdown code fences as literal text.
+ *
+ * An unclosed `folio-block` fence produces a `closed: false` block segment for
+ * streaming; unclosed ordinary fences remain verbatim Markdown.
  */
 export function parseAnswerSegments(content: string): AnswerSegment[] {
   const lines = content.split('\n');
@@ -35,27 +42,39 @@ export function parseAnswerSegments(content: string): AnswerSegment[] {
   let index = 0;
   while (index < lines.length) {
     const line = lines[index] ?? '';
-    const open = line.match(FENCE_OPEN);
-    if (open && open[1].trim() === ANSWER_BLOCK_FENCE_LANG) {
-      flushText();
-      const bodyLines: string[] = [];
-      let closed = false;
+    const open = fenceLine(line).match(FENCE_OPEN);
+    const marker = open?.[1];
+    const info = open?.[2] ?? '';
+
+    // Backtick info strings cannot contain another backtick. Such a line is
+    // prose rather than a fence and must not swallow later answer blocks.
+    if (!marker || (marker[0] === '`' && info.includes('`'))) {
+      textLines.push(line);
       index += 1;
-      while (index < lines.length) {
-        const bodyLine = lines[index] ?? '';
-        if (FENCE_CLOSE.test(bodyLine)) {
-          closed = true;
-          index += 1;
-          break;
-        }
-        bodyLines.push(bodyLine);
-        index += 1;
-      }
-      segments.push({ kind: 'block', body: bodyLines.join('\n'), closed });
       continue;
     }
-    textLines.push(line);
+
+    const typed = info.trim() === ANSWER_BLOCK_FENCE_LANG;
+    if (typed) flushText();
+    else textLines.push(line);
+
+    const bodyLines: string[] = [];
+    let closed = false;
     index += 1;
+    while (index < lines.length) {
+      const bodyLine = lines[index] ?? '';
+      const close = fenceLine(bodyLine).match(FENCE_CLOSE)?.[1];
+      if (close && close[0] === marker[0] && close.length >= marker.length) {
+        if (!typed) textLines.push(bodyLine);
+        closed = true;
+        index += 1;
+        break;
+      }
+      if (typed) bodyLines.push(bodyLine);
+      else textLines.push(bodyLine);
+      index += 1;
+    }
+    if (typed) segments.push({ kind: 'block', body: bodyLines.join('\n'), closed });
   }
   flushText();
   return segments;