Components
AI
A conversation column: Root is the log, Message carries a role, and the speaking parts — Response, Reasoning, Tool, Sources — part the stream. The interactive folds are the shared Collapsible wearing a `data-ai` marker, so the machine work is never ours. Parts stay agnostic of any client; consumers map their message format (e.g. the `UIMessage` parts re-exported here) onto these primitives.
#Basic usage
The draft is ready — three sections, one summary.
<script setup lang="ts">
import { Ai } from "@bysages/vue";
</script>
<template>
<!-- One stable measure: the canvas shrink-wraps its children, so an
expanding fold would breathe the whole conversation wider. -->
<div class="w-full max-w-[46rem]">
<Ai.Conversation>
<Ai.Message role="assistant">
<Ai.Response content="The draft is ready — three sections, one summary." />
<Ai.Reasoning label="Thought for 2s">
The user asked for a draft outline. Keep it to three sections and close with a summary
line.
</Ai.Reasoning>
</Ai.Message>
</Ai.Conversation>
</div>
</template>
#Props
#AiConversation
The log itself: the column every stroke lands in, a landmark to screen readers. While the reply streams, the log follows its growth — but only while the reader rests at the bottom edge. Climb up to reread a thought and the stream stops yanking the view back down; return to the bottom and the follow resumes.
| Prop | Type | Default | Description |
|---|---|---|---|
autoScroll | Boolean | true | Follow the stream's growth while the reader rests at the bottom. |
#AiContent
The bubble's inner measure — content that belongs to neither side specifically.
A styled part — no props of its own; it takes the anatomy's shared styling.
#AiActions
The quiet row under a message — copy, retry, feedback.
A styled part — no props of its own; it takes the anatomy's shared styling.
#AiLoader
The while-it-works whisper for the in-flight turns.
A styled part — no props of its own; it takes the anatomy's shared styling.