File size: 2,851 Bytes
1ae64c5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | import type { FC } from "react";
import {
ThreadListItemPrimitive,
ThreadListPrimitive,
useAssistantState,
} from "@assistant-ui/react";
import { ArchiveIcon, PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
import { Skeleton } from "@/components/ui/skeleton";
export const ThreadList: FC = () => {
return (
<ThreadListPrimitive.Root className="aui-root aui-thread-list-root flex flex-col items-stretch gap-1.5">
<ThreadListNew />
<ThreadListItems />
</ThreadListPrimitive.Root>
);
};
const ThreadListNew: FC = () => {
return (
<ThreadListPrimitive.New asChild>
<Button
className="aui-thread-list-new flex items-center justify-start gap-1 rounded-lg px-2.5 py-2 text-start hover:bg-muted data-active:bg-muted"
variant="ghost"
>
<PlusIcon />
New Thread
</Button>
</ThreadListPrimitive.New>
);
};
const ThreadListItems: FC = () => {
const isLoading = useAssistantState(({ threads }) => threads.isLoading);
if (isLoading) {
return <ThreadListSkeleton />;
}
return <ThreadListPrimitive.Items components={{ ThreadListItem }} />;
};
const ThreadListSkeleton: FC = () => {
return (
<>
{Array.from({ length: 5 }, (_, i) => (
<div
key={i}
role="status"
aria-label="Loading threads"
aria-live="polite"
className="aui-thread-list-skeleton-wrapper flex items-center gap-2 rounded-md px-3 py-2"
>
<Skeleton className="aui-thread-list-skeleton h-[22px] flex-grow" />
</div>
))}
</>
);
};
const ThreadListItem: FC = () => {
return (
<ThreadListItemPrimitive.Root className="aui-thread-list-item flex items-center gap-2 rounded-lg transition-all hover:bg-muted focus-visible:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-active:bg-muted">
<ThreadListItemPrimitive.Trigger className="aui-thread-list-item-trigger flex-grow px-3 py-2 text-start">
<ThreadListItemTitle />
</ThreadListItemPrimitive.Trigger>
<ThreadListItemArchive />
</ThreadListItemPrimitive.Root>
);
};
const ThreadListItemTitle: FC = () => {
return (
<span className="aui-thread-list-item-title text-sm">
<ThreadListItemPrimitive.Title fallback="New Chat" />
</span>
);
};
const ThreadListItemArchive: FC = () => {
return (
<ThreadListItemPrimitive.Archive asChild>
<TooltipIconButton
className="aui-thread-list-item-archive mr-3 ml-auto size-4 p-0 text-foreground hover:text-primary"
variant="ghost"
tooltip="Archive thread"
>
<ArchiveIcon />
</TooltipIconButton>
</ThreadListItemPrimitive.Archive>
);
};
|