assistant-thread-list

1"use client";
2 
3import { type FC, useEffect, useRef, useState } from "react";
4import {
5  ThreadListItemPrimitive,
6  ThreadListPrimitive,
7  useThreadList,
8} from "@assistant-ui/react";
9import { ArchiveIcon, MoreHorizontalIcon, PlusIcon } from "lucide-react";
10 
11import { cn } from "@aomi-labs/react";
12import { Button } from "@/components/ui/button";
13import { Skeleton } from "@/components/ui/skeleton";
14import {
15  Popover,
16  PopoverContent,
17  PopoverTrigger,
18} from "@/components/ui/popover";
19 
20export const ThreadList: FC = () => {
21  return (
22    <ThreadListPrimitive.Root className="aui-root aui-thread-list-root flex w-full flex-1 list-none flex-col items-stretch gap-0.5 px-2">
23      <ThreadListNew />
24      {/* Design mock: a "Recent" section label instead of a hairline */}
25      <span className="aui-thread-list-separator text-aomi-muted px-4 pb-2 pt-5 text-left text-xs font-medium">
26        Recent
27      </span>
28      <ThreadListItems />
29    </ThreadListPrimitive.Root>
30  );
31};
32 
33const ThreadListNew: FC = () => {
34  return (
35    <ThreadListPrimitive.New asChild>
36      <Button
37        className="aui-thread-list-new border-aomi-border bg-aomi-surface-2 hover:border-aomi-muted/40 hover:bg-aomi-surface-2 flex items-center justify-start gap-2 rounded-lg border px-3 py-[9px] text-start text-sm font-medium"
38        variant="ghost"
39      >
40        <PlusIcon className="size-4" />
41        New chat
42      </Button>
43    </ThreadListPrimitive.New>
44  );
45};
46 
47const ThreadListItems: FC = () => {
48  const isLoading = useThreadList((t) => t.isLoading);
49 
50  if (isLoading) {
51    return <ThreadListSkeleton />;
52  }
53 
54  return <ThreadListPrimitive.Items components={{ ThreadListItem }} />;
55};
56 
57const SKELETON_WIDTHS = [
58  "85%",
59  "72%",
60  "90%",
61  "68%",
62  "78%",
63  "95%",
64  "74%",
65  "82%",
66  "70%",
67  "88%",
68  "76%",
69  "92%",
70  "80%",
71  "69%",
72  "86%",
73  "73%",
74  "91%",
75  "77%",
76  "84%",
77  "71%",
78];
79 
80const ThreadListSkeleton: FC = () => {
81  return (
82    <div
83      role="status"
84      aria-label="Loading threads"
85      aria-live="polite"
86      className="aui-thread-list-skeleton-root flex flex-1 flex-col gap-1 overflow-hidden"
87    >
88      {SKELETON_WIDTHS.map((width, i) => (
89        <div
90          key={i}
91          className="aui-thread-list-skeleton-wrapper flex h-9 shrink-0 items-center rounded-2xl px-4"
92        >
93          <Skeleton
94            className="aui-thread-list-skeleton h-3"
95            style={{ width }}
96          />
97        </div>
98      ))}
99    </div>
100  );
101};
102 
103// … truncated