Skip to content

markdown-transcript.md

Latest commit

 

History

History
123 lines (93 loc) · 3.74 KB

markdown-transcript.md

File metadata and controls

123 lines (93 loc) · 3.74 KB
Raw
title Markdown Transcript UI for Vue
description Render streaming markdown transcripts in terminal-style Vue UIs with TVirtualMarkdown, markdown block sources, links, code blocks, and agent output.

Markdown Transcript UI for Vue

Vue TUI's markdown entrypoint renders markdown inside terminal-style Vue interfaces. It supports static markdown, streaming content, virtualized markdown rows, terminal cell layout, styled inline spans, code blocks, and link metadata.

Use it for AI agent transcripts, chat logs, tool output summaries, documentation previews, and terminal dashboards that need markdown without leaving the terminal UI surface.

Install And Import

pnpm add @simon_he/vue-tui vue
import { TVirtualMarkdown, createMarkdownBlockSource } from "@simon_he/vue-tui/markdown";

TVirtualMarkdown is public API. Agent-specific transcript chrome remains available through @simon_he/vue-tui/agent.

Static Markdown

<script setup lang="ts">
import { TVirtualMarkdown } from "@simon_he/vue-tui/markdown";

const content = [
  "# Build report",
  "",
  "- Tests passed",
  "- Bundle generated",
  "",
  "```ts",
  "console.log('ready')",
  "```",
].join("\n");
</script>

<template>
  <TVirtualMarkdown :x="0" :y="0" :w="100" :h="28" :content="content" />
</template>

The component renders in terminal cells and emits scroll/focus/keyboard events like other terminal components.

For a full-width markdown viewport that exclusively owns its render-plane rows, opt into row-shift scrolling to repaint only newly exposed rows:

<TVirtualMarkdown
  :x="0"
  :y="0"
  :w="terminalWidth"
  :h="28"
  :content="content"
  row-scroll-mode="unsafe-full-row"
/>

Keep the default rowScrollMode="off" when another component shares those rows on the same plane. The component also falls back to viewport repaint while terminal images are visible so raw graphics placements cannot drift away from text.

Streaming Markdown

For simple streams, pass content with streaming=true. Rapid updates are coalesced into scheduled markdown rebuilds.

<TVirtualMarkdown
  :x="0"
  :y="0"
  :w="100"
  :h="28"
  :content="assistantText"
  :streaming="true"
  :final="isComplete"
/>

For long transcripts, keep complete markdown in your own state and feed finalized blocks through createMarkdownBlockSource(). That lets the streaming tail update without reparsing every completed message on each token.

import { ref } from "vue";
import { createMarkdownBlockSource } from "@simon_he/vue-tui/markdown";

const source = createMarkdownBlockSource();
const blocks = ref(source.blocks);

export function appendAssistantDelta(text: string): void {
  source.appendDelta(text);
  blocks.value = source.blocks;
}

export function finishAssistantBlock(): void {
  source.finalizeBlock();
  blocks.value = source.blocks;
}
<TVirtualMarkdown :x="0" :y="0" :w="100" :h="28" :blocks="blocks" :streaming="true" />

Agent Console Pattern

Agent UIs usually combine markdown with render planes:

Plane Typical content
Transcript TVirtualMarkdown, user bubbles, thinking rows, tool calls
Logs TLogView or tool output surface
Chrome Status, search, token bars, bottom input
Overlay Command palette, detail dialogs, link pickers

This keeps token streaming from repainting the input or overlay regions.

Related Pages