Files
wehub-resource-sync e30e75b5d4
Changesets / Create Version PR (push) Has been cancelled
Deploy Shadcn Registry / Deploy Production (push) Has been cancelled
Template Metrics / LOC + Bundle Size (push) Has been cancelled
Code Quality / Oxlint + Oxfmt (push) Has been cancelled
Code Quality / Template Sync (push) Has been cancelled
Code Quality / Build Changed Packages (push) Has been cancelled
Code Quality / Test Changed Packages (push) Has been cancelled
Deploy Expo Example / Deploy Production (push) Has been cancelled
Deploy Ink Example / Deploy Production (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.12) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.12) (push) Has been cancelled
chore: import upstream snapshot with attribution
2026-07-13 13:40:13 +08:00

64 lines
1.9 KiB
TypeScript

"use client";
import { Thread } from "@/components/assistant-ui/thread";
import {
AuiProvider,
Suggestions,
ThreadListItemPrimitive,
ThreadListPrimitive,
useAui,
} from "@assistant-ui/react";
function ThreadList() {
return (
<ThreadListPrimitive.Root className="flex flex-col gap-1 overflow-y-auto">
<ThreadListPrimitive.New className="hover:bg-muted flex h-9 items-center gap-2 rounded-lg border px-3 text-sm">
New Thread
</ThreadListPrimitive.New>
<ThreadListPrimitive.Items>
{() => (
<ThreadListItemPrimitive.Root className="hover:bg-muted data-active:bg-muted flex h-9 items-center rounded-lg">
<ThreadListItemPrimitive.Trigger className="flex-1 truncate px-3 text-start text-sm">
<ThreadListItemPrimitive.Title fallback="New Chat" />
</ThreadListItemPrimitive.Trigger>
</ThreadListItemPrimitive.Root>
)}
</ThreadListPrimitive.Items>
<ThreadListPrimitive.LoadMore className="hover:bg-muted mt-1 h-9 rounded-lg border px-3 text-sm disabled:opacity-50">
Load more
</ThreadListPrimitive.LoadMore>
</ThreadListPrimitive.Root>
);
}
function ThreadWithSuggestions() {
const aui = useAui({
suggestions: Suggestions([
{
title: "Start a new topic",
label: "in this conversation",
prompt: "Let's discuss something interesting. Suggest a topic!",
},
{
title: "Help me brainstorm",
label: "some project ideas",
prompt: "Help me brainstorm ideas for a weekend side project.",
},
]),
});
return (
<AuiProvider value={aui}>
<Thread />
</AuiProvider>
);
}
export default function Home() {
return (
<main className="grid h-dvh grid-cols-[200px_1fr] grid-rows-[minmax(0,1fr)] gap-4 p-4">
<ThreadList />
<ThreadWithSuggestions />
</main>
);
}