Components
AI Response
Markdown set on the paper. Rendering goes through `@tanstack/markdown`, whose defaults leave raw HTML and executable links inert — streaming-safe by construction. An optional highlighter re-inks fenced code; the component stays agnostic about which engine provides it.
#Basic usage
The paper-and-ink system
Interfaces are warm paper; content is ink. A hairline divides, light elevates, and nothing pops.
- Ground in ambient shade
- Ink carries hierarchy
- Pigment only where it means
<script setup lang="ts">
import { AiResponse } from "@bysages/vue";
</script>
<template>
<div class="w-full">
<AiResponse
content="## The paper-and-ink system
Interfaces are warm paper; content is ink. A `hairline` divides, light elevates, and nothing pops.
1. Ground in ambient shade
2. Ink carries hierarchy
3. Pigment only where it means"
/>
</div>
</template>
#Props
#AiResponse
Markdown set on the paper. Rendering goes through
@tanstack/markdown, whose defaults leave raw HTML and executable
links inert — streaming-safe by construction. An optional
highlighter re-inks fenced code; the component stays agnostic about
which engine provides it.
| Prop | Type | Default | Description |
|---|---|---|---|
content | String | The markdown text to set on the paper — streamed in freely; raw HTML and executable links stay inert. | |
highlighter | Function as PropType<(code: string, lang?: string) => string> | undefined | Optional code-highlighting function re-inking fenced blocks; the component stays agnostic about which engine provides it. |
copyLabel | String | "Copy code" | The copy stamp's accessible name before the copy lands. |
copiedLabel | String | "Copied" | The copy stamp's accessible name once the text has landed. |