thread-list

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

assistant-ui Thread List

assistant-ui 线程列表

Always consult assistant-ui.com/llms.txt for latest API.

Manage multiple chat threads with built-in or custom UI.

请始终参考assistant-ui.com/llms.txt获取最新API。

使用内置或自定义UI管理多个聊天线程。

References

参考资料

./references/management.md -- Thread CRUD operations
./references/custom-ui.md -- Custom thread list UI

./references/management.md -- 线程CRUD操作
./references/custom-ui.md -- 自定义线程列表UI

Quick Start

快速开始

Thread list is available with

useChatRuntime

+ cloud:

tsx

import { AssistantCloud } from "assistant-cloud";
import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";
import { AssistantRuntimeProvider, Thread, ThreadList } from "@assistant-ui/react";

const cloud = new AssistantCloud({
  baseUrl: process.env.NEXT_PUBLIC_ASSISTANT_BASE_URL,
  authToken: async () => getAuthToken(),
});

function Chat() {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({ api: "/api/chat" }),
    cloud,
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <div className="flex h-screen">
        <ThreadList className="w-64 border-r" />
        <Thread className="flex-1" />
      </div>
    </AssistantRuntimeProvider>
  );
}

结合

useChatRuntime

与云服务即可使用线程列表：

tsx

import { AssistantCloud } from "assistant-cloud";
import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";
import { AssistantRuntimeProvider, Thread, ThreadList } from "@assistant-ui/react";

const cloud = new AssistantCloud({
  baseUrl: process.env.NEXT_PUBLIC_ASSISTANT_BASE_URL,
  authToken: async () => getAuthToken(),
});

function Chat() {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({ api: "/api/chat" }),
    cloud,
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <div className="flex h-screen">
        <ThreadList className="w-64 border-r" />
        <Thread className="flex-1" />
      </div>
    </AssistantRuntimeProvider>
  );
}

Thread Operations

线程操作

tsx

import { useAssistantApi, useAssistantState } from "@assistant-ui/react";

const api = useAssistantApi();
const { threads, mainThreadId } = useAssistantState(s => s.threadList);

// Switch to thread
api.threads().switchToThread(threadId);

// Create new thread
api.threads().switchToNewThread();

// Thread item operations
const item = api.threads().item({ id: threadId });
await item.rename("New Title");
await item.archive();
await item.delete();

tsx

import { useAssistantApi, useAssistantState } from "@assistant-ui/react";

const api = useAssistantApi();
const { threads, mainThreadId } = useAssistantState(s => s.threadList);

// 切换线程
api.threads().switchToThread(threadId);

// 创建新线程
api.threads().switchToNewThread();

// 线程项操作
const item = api.threads().item({ id: threadId });
await item.rename("New Title");
await item.archive();
await item.delete();

Custom Thread List

自定义线程列表

tsx

import { ThreadListPrimitive, ThreadListItemPrimitive } from "@assistant-ui/react";

function CustomThreadList() {
  return (
    <ThreadListPrimitive.Root className="w-64">
      <ThreadListPrimitive.New className="w-full p-2 bg-blue-500 text-white">
        + New Chat
      </ThreadListPrimitive.New>

      <ThreadListPrimitive.Items>
        <ThreadListItemPrimitive.Root className="flex p-2 hover:bg-gray-100">
          <ThreadListItemPrimitive.Trigger className="flex-1">
            <ThreadListItemPrimitive.Title />
          </ThreadListItemPrimitive.Trigger>
          <ThreadListItemPrimitive.Archive>Archive</ThreadListItemPrimitive.Archive>
          <ThreadListItemPrimitive.Delete>Delete</ThreadListItemPrimitive.Delete>
        </ThreadListItemPrimitive.Root>
      </ThreadListPrimitive.Items>
    </ThreadListPrimitive.Root>
  );
}

tsx

import { ThreadListPrimitive, ThreadListItemPrimitive } from "@assistant-ui/react";

function CustomThreadList() {
  return (
    <ThreadListPrimitive.Root className="w-64">
      <ThreadListPrimitive.New className="w-full p-2 bg-blue-500 text-white">
        + New Chat
      </ThreadListPrimitive.New>

      <ThreadListPrimitive.Items>
        <ThreadListItemPrimitive.Root className="flex p-2 hover:bg-gray-100">
          <ThreadListItemPrimitive.Trigger className="flex-1">
            <ThreadListItemPrimitive.Title />
          </ThreadListItemPrimitive.Trigger>
          <ThreadListItemPrimitive.Archive>Archive</ThreadListItemPrimitive.Archive>
          <ThreadListItemPrimitive.Delete>Delete</ThreadListItemPrimitive.Delete>
        </ThreadListItemPrimitive.Root>
      </ThreadListPrimitive.Items>
    </ThreadListPrimitive.Root>
  );
}

Without Cloud (Local)

无云环境（本地）

tsx

import { useRemoteThreadListRuntime, InMemoryThreadListAdapter } from "@assistant-ui/react";

const runtime = useRemoteThreadListRuntime({
  adapter: new InMemoryThreadListAdapter(),
  runtimeHook: () => useLocalRuntime({ model: myModel }),
});

tsx

import { useRemoteThreadListRuntime, InMemoryThreadListAdapter } from "@assistant-ui/react";

const runtime = useRemoteThreadListRuntime({
  adapter: new InMemoryThreadListAdapter(),
  runtimeHook: () => useLocalRuntime({ model: myModel }),
});

Common Gotchas

常见问题

ThreadList not showing

Pass
```
cloud
```
to runtime
Check authentication

Threads not persisting

Verify cloud connection
Check network requests

线程列表不显示

向runtime传入
```
cloud
```
参数
检查认证状态

线程无法持久化

验证云连接状态
检查网络请求