mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-02 22:32:27 +08:00
initialize project with Next.js, Tailwind CSS, and essential configurations
This commit is contained in:
66
components/assistant-ui/thread-list.tsx
Normal file
66
components/assistant-ui/thread-list.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import type { FC } from "react";
|
||||
import {
|
||||
ThreadListItemPrimitive,
|
||||
ThreadListPrimitive,
|
||||
} 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";
|
||||
|
||||
export const ThreadList: FC = () => {
|
||||
return (
|
||||
<ThreadListPrimitive.Root className="flex flex-col items-stretch gap-1.5">
|
||||
<ThreadListNew />
|
||||
<ThreadListItems />
|
||||
</ThreadListPrimitive.Root>
|
||||
);
|
||||
};
|
||||
|
||||
const ThreadListNew: FC = () => {
|
||||
return (
|
||||
<ThreadListPrimitive.New asChild>
|
||||
<Button className="data-[active]:bg-muted hover:bg-muted flex items-center justify-start gap-1 rounded-lg px-2.5 py-2 text-start" variant="ghost">
|
||||
<PlusIcon />
|
||||
New Thread
|
||||
</Button>
|
||||
</ThreadListPrimitive.New>
|
||||
);
|
||||
};
|
||||
|
||||
const ThreadListItems: FC = () => {
|
||||
return <ThreadListPrimitive.Items components={{ ThreadListItem }} />;
|
||||
};
|
||||
|
||||
const ThreadListItem: FC = () => {
|
||||
return (
|
||||
<ThreadListItemPrimitive.Root className="data-[active]:bg-muted hover:bg-muted focus-visible:bg-muted focus-visible:ring-ring flex items-center gap-2 rounded-lg transition-all focus-visible:outline-none focus-visible:ring-2">
|
||||
<ThreadListItemPrimitive.Trigger className="flex-grow px-3 py-2 text-start">
|
||||
<ThreadListItemTitle />
|
||||
</ThreadListItemPrimitive.Trigger>
|
||||
<ThreadListItemArchive />
|
||||
</ThreadListItemPrimitive.Root>
|
||||
);
|
||||
};
|
||||
|
||||
const ThreadListItemTitle: FC = () => {
|
||||
return (
|
||||
<p className="text-sm">
|
||||
<ThreadListItemPrimitive.Title fallback="New Chat" />
|
||||
</p>
|
||||
);
|
||||
};
|
||||
|
||||
const ThreadListItemArchive: FC = () => {
|
||||
return (
|
||||
<ThreadListItemPrimitive.Archive asChild>
|
||||
<TooltipIconButton
|
||||
className="hover:text-primary text-foreground ml-auto mr-3 size-4 p-0"
|
||||
variant="ghost"
|
||||
tooltip="Archive thread"
|
||||
>
|
||||
<ArchiveIcon />
|
||||
</TooltipIconButton>
|
||||
</ThreadListItemPrimitive.Archive>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user