feat(tui): render assistant transcript with Markdown via OpenTUI markdown component#39
feat(tui): render assistant transcript with Markdown via OpenTUI markdown component#39knqiufan wants to merge 1 commit into
Conversation
|
Thanks for the contribution! To get this ready to merge:
Full conventions: |
d301b28 to
ac379b4
Compare
|
Thanks @ZouR-Ma for the review guidance!
Ready for review when you have a moment. |
|
ac379b4 to
77350ff
Compare
…down component The TUI transcript panel previously rendered all messages as plain text, losing formatting such as code blocks, tables, bold/italic, lists, and links in assistant responses. This commit introduces role-based rendering: assistant messages now use the built-in markdown component from @opentui/react with tree-sitter syntax highlighting and theme-aware styling, while user/tool/system messages retain their existing plain-text rendering. Key changes: - Extract transcript data-building logic into transcript-items.ts (buildTranscriptItems, wrapMultiline, sliceByDisplayWidth, etc.) - Add transcript-syntax-style.ts with buildSyntaxStyleFromTheme() that maps TUI theme colors to SyntaxStyle for code highlighting - Extend TranscriptItem with content/useMarkdown fields - Update TranscriptEntry to branch on useMarkdown: true renders markdown with table/code support, false keeps plain-text path - Add 21 unit tests covering all extracted functions Closes stepfun-ai#35
77350ff to
6e3fc71
Compare
|
Thanks for the detailed follow-up. I have rebased #39 onto current main (87c3445) and resolved the app.tsx conflict. Changes made:
Validation:
Supplementary instruction: |
Summary
Closes #35
The TUI transcript panel previously rendered all messages (including assistant responses) as plain text via
<text>+<span>, losing all Markdown formatting — code blocks, tables, bold/italic, lists, and links were displayed as raw characters.@opentui/reactalready ships a<markdown>JSX component backed byMarkdownRenderable(withmarkedparsing + tree-sitter syntax highlighting), but it was never used in the transcript.Changes
<markdown>component with full Markdown support (code blocks, tables, bold/italic, lists, links). User/tool/system messages retain existing plain-text rendering unchanged.src/tui/transcript-items.ts:TranscriptIteminterface,buildTranscriptItems,buildWelcomeTranscriptItem,resolveTranscriptIdentity,resolveTranscriptBackground,wrapMultiline,sliceByDisplayWidth— all previously private toapp.tsx, now independently importable and testable.src/tui/transcript-syntax-style.ts:buildSyntaxStyleFromTheme()maps TUI theme colors toSyntaxStylefor code highlighting, so code blocks follow the active theme.TranscriptItemwithcontent: string(raw Markdown text) anduseMarkdown: booleanfields.TranscriptEntrycomponent: whenuseMarkdownis true, renders badge line +<markdown>block with table/code support; when false, keeps the original plain-text path.src/tui/transcript-items.test.tscoveringbuildTranscriptItems(per-role behavior),resolveTranscriptIdentity,resolveTranscriptBackground,buildWelcomeTranscriptItem,wrapMultiline, andsliceByDisplayWidth.Before / After
**/_<strong>/<em>Test plan
pnpm vitest run src/tui/transcript-items.test.ts— 21 new tests passstep exec), send a prompt that returns Markdown with code blocks — verify syntax highlighting renders/theme sage,/theme default) — verify code highlighting colors update