Chat Sidebar

1"use client";
2 
3import { useState } from "react";
4import {
5  SearchIcon,
6  HomeIcon,
7  SparklesIcon,
8  FileStackIcon,
9  Layers3Icon,
10  FolderClosedIcon,
11  ZapIcon,
12  MessageCircleDashedIcon,
13  WandSparklesIcon,
14  BoxIcon,
15  ChevronDownIcon,
16  UsersIcon,
17  BriefcaseIcon,
18  GraduationCapIcon,
19  CheckIcon,
20  MoreVerticalIcon,
21  Share2Icon,
22  PencilIcon,
23  ArchiveIcon,
24  ArchiveRestoreIcon,
25  Trash2Icon,
26} from "lucide-react";
27import { Button } from "@/components/ui/button";
28import { Input } from "@/components/ui/input";
29import { Separator } from "@/components/ui/separator";
30import { Logo } from "@/components/ui/logo";
31import { useChatStore } from "@/store/chat-store";
32import { cn } from "@/lib/utils";
33import Image from "next/image";
34import {
35  DropdownMenu,
36  DropdownMenuContent,
37  DropdownMenuItem,
38  DropdownMenuTrigger,
39  DropdownMenuSeparator,
40} from "@/components/ui/dropdown-menu";
41import Link from "next/link";
42 
43const iconMap = {
44  zap: ZapIcon,
45  "message-circle-dashed": MessageCircleDashedIcon,
46  "wand-sparkles": WandSparklesIcon,
47  box: BoxIcon,
48};
49 
50const teams = [
51  { id: "personal", name: "Personal", icon: UsersIcon },
52  { id: "work", name: "Work Team", icon: BriefcaseIcon },
53  { id: "education", name: "Education", icon: GraduationCapIcon },
54];
55 
56export function ChatSidebar() {
57  const {
58    chats,
59    selectedChatId,
60    selectChat,
61    archiveChat,
62    unarchiveChat,
63    deleteChat,
64  } = useChatStore();
65  const [selectedTeam, setSelectedTeam] = useState("personal");
66 
67  const recentChats = chats.filter((chat) => !chat.isArchived);
68  const archivedChats = chats.filter((chat) => chat.isArchived);
69 
70  return (
71    <div className="flex h-full w-full flex-col bg-sidebar border-r border-sidebar-border">
72      <div className="flex items-center justify-between p-3 border-b border-sidebar-border">
73        <DropdownMenu>
74          <DropdownMenuTrigger asChild>
75            <Button
76              variant="ghost"
77              className="w-full justify-start gap-2.5 px-2 h-10"
78            >
79              <Logo className="size-6" />
80              <span className="font-semibold text-sm">Square AI</span>
81              <div className="ml-auto flex items-center gap-1.5">
82                <Image
83                  src="/ln.png"
84                  alt="lndev.me"
85                  className="size-5 object-cover rounded-full"
86                  width={20}
87                  height={20}
88                />
89                <ChevronDownIcon className="size-3" />
90// … truncated