ThreadList
thread-list会话历史列表 · ChatGPT 式智能体侧栏：标题+meta 双行条目 + active 高亮 + 删除按钮(stopPropagation 不触发选中) + 头部动作槽(新对话) + 空态占位 + bare 内嵌
用法
基础用法
传入 items（id/title/meta），active 标记当前会话。
历史
tsx
<ThreadList
items={[
{ id: "a", title: "云栖科技 · 总裁私人秘书", meta: "3 分钟前", active: true },
{ id: "b", title: "晨星集团 · 行政主管", meta: "昨天" },
{ id: "c", title: "新的简历对话", meta: "上周" },
]}
onSelect={(id) => console.log(id)}
/>可删除
提供 onDelete 后每项右侧渲染删除按钮（点击不触发 onSelect）。
历史
tsx
<ThreadList
items={[
{ id: "a", title: "云栖科技 · 总裁私人秘书", meta: "3 分钟前", active: true },
{ id: "b", title: "晨星集团 · 行政主管", meta: "昨天" },
]}
onSelect={(id) => open(id)}
onDelete={(id) => remove(id)}
/>头部动作槽
title 自定义 + action 槽放「新对话」按钮。
最近会话
tsx
<ThreadList
title="最近会话"
items={items}
action={
<Button size="sm" variant="ghost">
<Plus className="size-3.5" aria-hidden />
新对话
</Button>
}
/>空态
items 为空时显示占位，可用 empty 自定义文案。
历史
还没有历史会话
tsx
<ThreadList items={[]} empty="还没有历史会话" />内嵌（无边框）
bare 去掉容器边框背景，嵌进侧栏等已有容器。
历史
tsx
<ThreadList bare items={items} />何时用
智能体侧栏的会话历史列表（标题+相对时间双行、active 高亮、删除）时用。本组件管的是「切换/删除历史会话」，不是消息流本身；单条消息的操作条用 MessageActions。需要去边框内嵌进自有侧栏布局时传 bare。
导入
ts
import { ThreadList } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| items* | ThreadListItem[] | — | 会话条目数组 |
| bare | boolean | false | 去掉容器边框背景，内嵌用 |
| className | string | — | 容器附加类 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onSelect | (id: string) => void | 点击条目回调 |
| onDelete | (id: string) => void | 提供则每项渲染删除按钮（点击 stopPropagation，不触发 onSelect） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| title | ReactNode | 头部标题（默认 "历史"） |
| action | ReactNode | 头部右侧动作槽（如「新对话」按钮） |
| empty | ReactNode | items 为空时的占位（默认 "暂无历史"） |
ThreadListItem：{ id: string; title: ReactNode; meta?: ReactNode; active?: boolean }（meta 为次行元信息，active 标当前打开会话）
禁忌 / 坑
active高亮由 item 上的active字段驱动，不是组件内部维护——需父级在 map 时按 activeId 计算写入。- 删除钮仅在传了
onDelete时渲染；其点击已内置 stopPropagation，不会顺带触发 onSelect。 - 暂无其它已知坑。
相关
ThinkingBlock · ToolCall · AgentPlan · Dossier · Artifact · ConfirmCard