Skip to content

useConversation 会话数据管理

重大版本升级 v0.4

useConversation 在 v0.4 进行了重大升级,client 改为 useMessageOptions,存储与引擎懒加载有变。

从 v0.3.x 升级? 请查看 useConversation 迁移

新项目: 直接使用下方 v0.4 的 API 和示例即可。

useConversation 是一个对话管理工具,它可以帮助你管理对话的状态和历史记录。下方示例覆盖对话管理及存储策略的常见场景,可直接在项目或文档中运行。

示例

基础示例

使用 useConversation 管理多会话,配合 tr-bubble-list 展示消息、tr-sender 输入发送。每个会话拥有独立的 useMessage 引擎,切换会话时,当前会话的请求可在后台继续执行,支持多会话并行处理。本示例使用内存模拟存储和模拟流式响应,预置若干会话和消息,无需真实 API 即可体验切换会话、创建新对话、发送消息等完整流程。

loading

存储

默认情况下,useConversation 会使用 LocalStorage 策略来持久化会话和消息数据。如需更大容量或更好性能,可切换到 IndexedDB 策略,或实现自定义存储策略。

LocalStorage 策略

使用浏览器 LocalStorage 存储会话数据,适合小量数据存储。会话和消息会持久化到本地,刷新页面后仍可恢复。

loading

IndexedDB 策略

使用浏览器 IndexedDB 存储会话数据,支持更大容量和更好性能。适用于大量会话或长对话历史场景。

loading

自定义存储策略

实现自定义存储策略,例如将数据保存到远程服务器。本示例使用内存存储作为演示,刷新页面后数据会丢失。

loading

API

选项

typescript
interface UseConversationOptions {
  /**
   * 所有会话的基础 useMessage 选项。
   * 传递给 createConversation 的每个会话选项会在此基础上合并。
   */
  useMessageOptions: UseMessageOptions
  /**
   * 是否在消息变更时自动保存。
   * @default false
   */
  autoSaveMessages?: boolean
  /**
   * 自动保存操作的节流时间(毫秒)。
   * 确保在流式更新期间,每个时间间隔内最多保存一次消息。
   * 仅在 autoSaveMessages 为 true 时生效。
   * @default 1000
   */
  autoSaveThrottle?: number
  /**
   * 可选的存储策略,用于会话和消息的持久化。
   * 如果不提供,默认使用 LocalStorage 策略。
   * 当提供时,会话列表和消息可以被加载和持久化。
   */
  storage?: ConversationStorageStrategy
}

返回值

typescript
interface UseConversationReturn {
  /** 会话列表 */
  conversations: Ref<ConversationInfo[]>
  /** 当前会话ID */
  activeConversationId: Ref<string | null>
  /** 当前活跃会话 */
  activeConversation: ComputedRef<Conversation | null>
  /** 创建新会话 */
  createConversation: (params?: {
    /** 会话ID,不提供则自动生成 */
    id?: string
    /** 会话标题 */
    title?: string
    /** 自定义元数据 */
    metadata?: Record<string, unknown>
    /** 覆盖默认的消息选项 */
    useMessageOptions?: Partial<UseMessageOptions>
  }) => Conversation
  /** 切换会话 */
  switchConversation: (id: string) => Promise<Conversation | null>
  /** 删除会话 */
  deleteConversation: (id: string) => Promise<void>
  /** 清空所有会话 */
  clear: () => void
  /** 更新会话标题 */
  updateConversationTitle: (id: string, title?: string) => void
  /** 保存指定会话的消息 */
  saveMessages: (id?: string) => void
  /** 发送消息到当前活跃会话 */
  sendMessage: (content: string) => void
  /** 中止当前活跃会话的请求 */
  abortActiveRequest: () => Promise<void>
}

会话接口

typescript
interface ConversationInfo {
  /** 会话ID */
  id: string
  /** 会话标题 */
  title?: string
  /** 创建时间 */
  createdAt: number
  /** 更新时间 */
  updatedAt: number
  /** 自定义元数据 */
  metadata?: Record<string, unknown>
}

interface Conversation extends ConversationInfo {
  /**
   * 由 useMessage 创建的消息引擎实例。
   */
  engine: UseMessageReturn
}

存储策略接口

所有存储策略都需要实现 ConversationStorageStrategy 接口:

typescript
interface ConversationStorageStrategy {
  /**
   * 加载所有会话(仅包含元数据)
   */
  loadConversations: () => MaybePromise<ConversationInfo[]>

  /**
   * 加载指定会话的所有消息
   */
  loadMessages: (conversationId: string) => MaybePromise<ChatMessage[]>

  /**
   * 保存或更新会话元数据
   */
  saveConversation: (conversation: ConversationInfo) => MaybePromise<void>

  /**
   * 保存指定会话的消息
   */
  saveMessages: (conversationId: string, messages: ChatMessage[]) => MaybePromise<void>

  /**
   * 删除会话及其所有消息(可选)
   */
  deleteConversation?: (conversationId: string) => MaybePromise<void>
}

存储策略工厂函数

localStorageStrategyFactory

创建 LocalStorage 存储策略实例。

typescript
function localStorageStrategyFactory(config?: LocalStorageConfig): ConversationStorageStrategy
参数
typescript
interface LocalStorageConfig {
  /** 存储键名,默认为 'tiny-robot-ai-conversations' */
  key?: string
}

indexedDBStorageStrategyFactory

创建 IndexedDB 存储策略实例。

typescript
function indexedDBStorageStrategyFactory(config?: IndexedDBConfig): ConversationStorageStrategy
参数
typescript
interface IndexedDBConfig {
  /** 数据库名称,默认为 'tiny-robot-ai-db' */
  dbName?: string
  /** 数据库版本,默认为 1 */
  dbVersion?: number
}

类型定义

MaybePromise

typescript
type MaybePromise<T> = T | Promise<T>

存储策略的方法可以返回同步值或 Promise,框架会自动处理。