Thread List

import { ThreadList } from "@/components/ui/thread-list";

export default function Example() {
  return <ThreadList />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const ThreadList = forwardRef(({ className, threads = [], activeId, onSelect, ...props }, ref) => (
  <div ref={ref} className={cn("space-y-1", className)} {...props}>
    {threads.map((t) => (
      <button key={t.id} onClick={() => onSelect?.(t)}
        className={cn("w-full rounded-lg px-3 py-2 text-left transition-colors hover:bg-accent",
          t.id === activeId && "bg-accent"
        )}
      >
        <div className="truncate text-sm font-medium">{t.title || "New chat"}</div>
        {t.preview && <div className="mt-0.5 truncate text-xs text-muted-foreground">{t.preview}</div>}
        {t.date && <div className="mt-0.5 text-[10px] text-muted-foreground">{t.date}</div>}
      </button>
    ))}
  </div>
));
ThreadList.displayName = "ThreadList";

export { ThreadList };