AI
ChatThreadList
Sidebar com a lista de conversas salvas — botão "Nova conversa" e estado ativo.
ChatThreadList é a coluna esquerda padrão do Chat. Recebe um array de threads, destaca o ativo e expõe onCreate para iniciar uma nova conversa. Persistir e ordenar threads é responsabilidade do consumidor.
Este exemplo precisa de mais altura para rolar e interagir como em um app real. Abra em tela cheia.
'use client';
import { ChatThreadList } from '@uranus-workspace/ai';
import { useState } from 'react';
const threads = [
{ id: '1', title: 'Roadmap Q3 — pacote AI', updatedAt: 'há 12 min', unread: true },
{ id: '2', title: 'Refatorar Composer', updatedAt: 'há 2 h' },
{ id: '3', title: 'Revisão dos tokens semânticos', updatedAt: 'ontem' },
{ id: '4', title: 'Pesquisa: melhores chats AI', updatedAt: 'segunda' },
];
export default function ChatThreadListDefault() {
const [active, setActive] = useState('1');
return (
<div className="mx-auto flex h-full min-h-[340px] w-full max-w-xs flex-col rounded-lg border bg-background">
<ChatThreadList
threads={threads}
activeId={active}
onSelect={(thread) => setActive(thread.id)}
onCreate={() => {}}
/>
</div>
);
}
Uso
import { Chat, ChatThreadList } from '@uranus-workspace/ai';
<Chat
messages={chat.messages}
status={chat.status}
onSend={chat.sendMessage}
sidebar={
<ChatThreadList
threads={threads}
activeId={threadId}
onSelect={(thread) => router.push(`/chat/${thread.id}`)}
onCreate={() => router.push('/chat/new')}
/>
}
/>API
threads—{ id, title, description?, updatedAt?, unread? }[].activeId— id da thread destacada.onSelect— clique no thread.onCreate— clique em "Nova conversa". Sem ele, o botão fica desabilitado.header— slot opcional acima da lista (ex.:<Input placeholder="Buscar…" />).emptyState— texto/JSX quando não há threads.