Components
Quote
引用块、文本选中工具栏和输入框引用预览
Quote 不是一个单独的组件，而是三个相关的组件集合：
- QuoteBlock — 用户消息中的引用块渲染
- SelectionToolbar — 消息文本选中后的浮动工具栏
- ComposerQuotePreview — 输入框中的引用预览
引入
import {
QuoteBlock,
QuoteBlockRoot,
QuoteBlockIcon,
QuoteBlockText,
SelectionToolbar,
SelectionToolbarRoot,
SelectionToolbarQuote,
ComposerQuotePreview,
ComposerQuotePreviewRoot,
ComposerQuotePreviewIcon,
ComposerQuotePreviewText,
ComposerQuotePreviewDismiss,
} from "aui-components";Props
该组件没有公开的 Props。
QuoteBlock
用户消息中引用 AI 回复的内容块。
使用位置
Thread 的 UserMessage 中已预配置：
<MessagePrimitive.Quote>
{(quote) => <QuoteBlock {...quote} />}
</MessagePrimitive.Quote>子组件
| 子组件 | 说明 |
|---|---|
QuoteBlockRoot | 容器，mb-2 flex items-start gap-1.5 |
QuoteBlockIcon | QuoteIcon，text-muted-foreground/60 size-3 |
QuoteBlockText | 引用文本，line-clamp-2 italic |
手动使用
<QuoteBlockRoot>
<QuoteBlockIcon />
<QuoteBlockText>
The assistant said something important here...
</QuoteBlockText>
</QuoteBlockRoot>SelectionToolbar
选中消息文本时浮动的工具栏，提供 Quote 操作。
使用位置
在 Thread 的 ThreadRoot 中：
<ThreadPrimitive.Root>
<ThreadPrimitive.Viewport>...</ThreadPrimitive.Viewport>
<SelectionToolbar />
</ThreadPrimitive.Root>也可以是任何 AssistantRuntimeProvider 作用域内。
子组件
| 子组件 | 说明 |
|---|---|
SelectionToolbarRoot | 浮动工具栏容器，圆角边框 + 阴影 |
SelectionToolbarQuote | Quote 按钮，点击将选中文本添加到输入框引用 |
自定义
<SelectionToolbarRoot>
<SelectionToolbarQuote>
<QuoteIcon className="size-3.5" />
Quote {/* 自定义标签 */}
</SelectionToolbarQuote>
</SelectionToolbarRoot>ComposerQuotePreview
显示在输入框中的引用预览，带有关闭按钮。
使用位置
在 Composer 中：
<ComposerPrimitive.Root>
<ComposerQuotePreview />
<ComposerPrimitive.Input />
<ComposerPrimitive.Send />
</ComposerPrimitive.Root>子组件
| 子组件 | 说明 |
|---|---|
ComposerQuotePreviewRoot | 容器 |
ComposerQuotePreviewIcon | QuoteIcon |
ComposerQuotePreviewText | 引用文本（使用 ComposerPrimitive.QuoteText） |
ComposerQuotePreviewDismiss | 关闭按钮（使用 ComposerPrimitive.QuoteDismiss） |
自定义
<ComposerQuotePreviewRoot>
<ComposerQuotePreviewText />
<ComposerQuotePreviewDismiss>
<span className="text-xs text-muted-foreground">Remove</span>
</ComposerQuotePreviewDismiss>
</ComposerQuotePreviewRoot>完整示例
import {
SelectionToolbar,
ComposerQuotePreview,
QuoteBlock,
} from "aui-components";
import {
ThreadPrimitive,
MessagePrimitive,
ComposerPrimitive,
} from "@assistant-ui/react";
// Thread 布局
<ThreadPrimitive.Root>
<ThreadPrimitive.Viewport>
{/* 消息列表 */}
<MessagePrimitive.Root>
{/* 用户消息中使用 QuoteBlock */}
<MessagePrimitive.Quote>
{(quote) => <QuoteBlock {...quote} />}
</MessagePrimitive.Quote>
</MessagePrimitive.Root>
{/* Composer 中使用 QuotePreview */}
<ComposerPrimitive.Root>
<ComposerQuotePreview />
<ComposerPrimitive.Input />
</ComposerPrimitive.Root>
</ThreadPrimitive.Viewport>
{/* SelectionToolbar */}
<SelectionToolbar />
</ThreadPrimitive.Root>;相关链接
- Thread — 包含 Quote 的完整使用示例