示例 2: 流式状态监控

使用 useTamboStreamStatus 实时显示组件生成进度和加载状态。

学习要点

1. useTamboStreamStatus

这个 hook 返回 streamStatus 和 propStatus，可以实时监控组件生成的各个阶段。

2. 渐进式渲染

根据 propStatus 的状态，可以逐步显示组件内容，提供更好的用户体验。

3. 加载骨架屏

在组件生成过程中显示 Skeleton 加载效果，避免页面突然跳动。

4. 错误处理

可以监控 isSuccess 状态，在组件生成失败时显示友好的错误提示。

试试这些消息：

  • • "创建一个复杂的销售数据图表"
  • • "生成一个包含 10 个字段的详细问卷"
  • • "展示公司各部门的预算分布饼图"
  • • 观察组件生成过程中的加载状态

💡 提示：流式状态监控在生成复杂组件时最为明显。Tambo AI 会逐步构建组件的各个部分， 你可以看到数据从无到有的过程。这个功能对于大型表单或复杂图表特别有用。

技术说明

streamStatus 对象：

  • isIdle - 组件尚未开始生成
  • isStreaming - 组件正在生成中
  • isSuccess - 组件生成完成
  • isError - 组件生成失败

propStatus 对象：

  • 为每个组件属性提供独立的状态监控
  • 例如 propStatus["title"]?.isSuccess 可以检查标题是否已生成
  • 支持渐进式渲染，先显示已完成的部分