assistant-threadlist-sidebar

1"use client";
2 
3import * as React from "react";
4import { Check, ChevronDown } from "lucide-react";
5import { cn } from "@aomi-labs/react";
6import {
7  Sidebar,
8  SidebarContent,
9  SidebarFooter,
10  SidebarHeader,
11  SidebarRail,
12} from "@/components/ui/sidebar";
13import {
14  Popover,
15  PopoverContent,
16  PopoverTrigger,
17} from "@/components/ui/popover";
18import { ThreadList } from "@/components/assistant-ui/thread-list";
19import { ConnectButton } from "@/components/control-bar/connect-button";
20import { AomiMark } from "@/components/aomi-mark";
21import type { WalletAccountMenuOptions } from "@/components/control-bar/account-menu-types";
22 
23/** One entry in the wordmark dropdown (an Aomi surface the user can switch to). */
24export type SidebarProduct = {
25  id: string;
26  /** Badge rendered next to the wordmark when this product is the current one. */
27  badge: string;
28  label: string;
29  description?: string;
30  href: string;
31};
32 
33export const DEFAULT_SIDEBAR_PRODUCTS: SidebarProduct[] = [
34  {
35    id: "chat",
36    badge: "Chat",
37    label: "Aomi Chat",
38    description: "Talk to onchain agents",
39    href: "https://chat.aomi.dev",
40  },
41  {
42    id: "build",
43    badge: "Build",
44    label: "Aomi Build",
45    description: "Build and deploy agents",
46    href: "https://build.aomi.dev",
47  },
48];
49 
50type ThreadListSidebarProps = React.ComponentProps<typeof Sidebar> & {
51  /** Position of the wallet button: "header" (top), "footer" (bottom), or null (hidden) */
52  walletPosition?: "header" | "footer" | null;
53  walletFamilies?: Array<"evm" | "solana">;
54  walletAccountMenu?: WalletAccountMenuOptions;
55  /** Products offered in the wordmark dropdown. Pass `null` for a plain wordmark. */
56  products?: SidebarProduct[] | null;
57  /** Which product this widget instance is; controls the badge and the checkmark. */
58  currentProductId?: string;
59};
60 
61function ProductSwitcher({
62  products,
63  currentProductId,
64}: {
65  products: SidebarProduct[];
66  currentProductId: string;
67}) {
68  const [open, setOpen] = React.useState(false);
69  const current =
70    products.find((product) => product.id === currentProductId) ?? products[0];
71 
72  const wordmark = (
73    <>
74      <AomiMark className="aomi-sidebar-header-icon size-6" />
75      <span className="text-[15px] font-semibold tracking-[-0.01em]">Aomi</span>
76      {current?.badge && (
77        <span className="bg-aomi-surface-2 text-aomi-muted rounded-sm px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide">
78          {current.badge}
79        </span>
80      )}
81    </>
82// … truncated