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
64 lines
1.9 KiB
TypeScript
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>
|
|
);
|
|
}
|