网站
Conversation - 对话界面
对话记录、回答、引用、输入区与悬浮聊天界面。
用法
什么时候用它
来自@misoto22/folio/website
import { ConversationLayout } from '@misoto22/folio/website'说明
适合阅读的对话区域，配有独立且可吸附的证据栏。
实践建议
推荐
- 提供本地化标签、含义明确的链接和有用的图片替代文本。
避免
- 不要在展示组件中放入服务凭据、路由逻辑或后端模型。
示例
本地对话示例
应用管理问题和已渲染的回答节点，组件负责它们的阅读顺序。这个本地示例只记录问题，不会调用助手服务。
Explore the library
Try a question to preview the conversation layout.
Start with
组成部分
在调用处组合，而不是通过 props 配置——所以这个组件没有预料到的布局，依然表达得出来。
ConversationFacts
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items必填 | DescriptionListItem[] | — |
同时接受 HTMLAttributes<HTMLDListElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
ConversationSuggestions
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items必填 | ConversationSuggestion[] | — | |
| label必填 | string | — |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
ConversationThread
应用管理对话轮次和折叠状态；组件负责内容层级及操作控件。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| composer必填 | ReactNode | — | |
| hasTurns必填 | boolean | — | |
| label必填 | string | — | |
| controls | ConversationControl[] | [] | — |
| intro | { title: ReactNode; description: ReactNode; suggestionsLabel: string; suggestions: ConversationSuggestion[] } | — | |
| proposal | ReactNode | — | |
| summary | ReactNode | — |
同时接受 HTMLAttributes<HTMLElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
ConversationLog
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| compact | boolean | — |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
QuestionComposer
具名受控输入区。请求限制与发送仍由应用负责。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| id必填 | string | — | |
| label必填 | string | — | |
| onSubmit必填 | () => void | — | |
| onValueChange必填 | (value: string) => void | — | |
| submitLabel必填 | string | — | |
| value必填 | string | — | |
| actions | ReactNode | — | |
| compact | boolean | — | |
| counter | ReactNode | — | |
| disabled | boolean | — | |
| hideHint | boolean | — | |
| hideLabel | boolean | — | |
| hint | ReactNode | — | |
| inputRef | Ref<HTMLInputElement> | — | |
| maxLength | number | — | |
| pending | boolean | — | |
| placeholder | string | — | |
| submitDisabled | boolean | — |
同时接受 Omit<HTMLAttributes<HTMLFormElement>, 'onSubmit'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
ConversationTurn
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| bodyId必填 | string | — | |
| expanded必填 | boolean | — | |
| onToggle必填 | () => void | — | |
| title必填 | ReactNode | — | |
| metadata | ReactNode | — | |
| preview | ReactNode | — |
同时接受 Omit<HTMLAttributes<HTMLElement>, 'title'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
ConversationQuote
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| label必填 | string | — | |
| compact | boolean | — |
同时接受 HTMLAttributes<HTMLElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
ConversationAnswer
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| question必填 | ReactNode | — | |
| questionLabel必填 | string | — | |
| quote | ReactNode | — |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
ConversationProse
接收应用经过净化的回答解析器所生成的可信 React 节点，不接收模型原始 HTML。
这个组件没有自己的属性。
ConversationAnswerHeading
模型生成的标题作为正文标签展示，不改变页面标题层级。
这个组件没有自己的属性。
StreamingCaret
这个组件没有自己的属性。
ConversationSources
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| count必填 | ReactNode | — | |
| items必填 | ConversationSource[] | — | |
| label必填 | string | — |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
ActionProposal
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| approveLabel必填 | string | — | |
| destination必填 | ReactNode | — | |
| dismissLabel必填 | string | — | |
| label必填 | string | — | |
| onApprove必填 | () => void | — | |
| onDismiss必填 | () => void | — | |
| approvalAttributes | Record<`data-${string}`, string> | — | |
| detail | ReactNode | — |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
ConversationLauncher
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| visible必填 | boolean | — | |
| buttonRef | Ref<HTMLButtonElement> | — |
同时接受 ButtonHTMLAttributes<HTMLButtonElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
ConversationDock
应用提供位置、关闭行为和流式状态，悬浮面板负责展示。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| card必填 | boolean | — | |
| closeLabel必填 | string | — | |
| composer必填 | ReactNode | — | |
| corner必填 | ConversationDockCorner | — | |
| label必填 | string | — | |
| onClose必填 | () => void | — | |
| open必填 | boolean | — | |
| roomLink必填 | ReactElement | — | |
| dragging | boolean | — | |
| handles | ReactNode | — | |
| logRef | Ref<HTMLDivElement> | — | |
| moving | boolean | — | |
| notice | ReactNode | — | |
| onHeaderPointerDown | (event: PointerEvent<HTMLElement>) => void | — | |
| panelRef | Ref<HTMLElement> | — | |
| proposal | ReactNode | — |
同时接受 HTMLAttributes<HTMLElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
ConversationDockWelcome
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| lead必填 | ReactNode | — | |
| suggestions必填 | ConversationSuggestion[] | — | |
| suggestionsLabel必填 | string | — |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
ConversationResizeHandle
为应用的指针缩放控制器提供对应的键盘操作。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| axis必填 | 'size-vertical' | 'size-horizontal' | — | |
| dragging必填 | boolean | — | |
| label必填 | string | — | |
| onNudge必填 | (axis: 'size-vertical' | 'size-horizontal', delta: number) => void | — | |
| onStart必填 | (axis: 'size-vertical' | 'size-horizontal', event: PointerEvent<HTMLElement>) => void | — | |
| side必填 | 'top' | 'bottom' | 'left' | 'right' | — |
SelectionToolbar
文本选择操作使用真实工具栏的单一 Tab 焦点入口与方向键导航。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| actions必填 | SelectionToolbarAction[] | — | |
| floating必填 | boolean | — | |
| label必填 | string | — | |
| style | CSSProperties | — | |
| toolbarRef | Ref<HTMLDivElement> | — |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
ConversationRoomLink
路由链接在标准操作样式内保留自己的目的地和行为。
这个组件没有自己的属性。
类型
export type ConversationDockCorner = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'