Chat Application

1"use client";
2 
3import { useState } from "react";
4import { ChatSidebar } from "@/components/chat/chat-sidebar";
5import { ChatMain } from "@/components/chat/chat-main";
6import { ThemeToggle } from "@/components/theme-toggle";
7import { Sheet, SheetContent } from "@/components/ui/sheet";
8import { Button } from "@/components/ui/button";
9import { GridPattern } from "@/components/ui/grid-pattern";
10import { MenuIcon, Github } from "lucide-react";
11import Link from "next/link";
12 
13export default function ChatPage() {
14  const [sidebarOpen, setSidebarOpen] = useState(false);
15 
16  return (
17    <div className="flex h-screen overflow-hidden bg-background">
18      <div className="hidden md:block w-64 border-r border-border">
19        <ChatSidebar />
20      </div>
21 
22      <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
23        <SheetContent
24          side="left"
25          className="w-64 p-0 border-none [&>button]:hidden"
26        >
27          <ChatSidebar />
28        </SheetContent>
29      </Sheet>
30 
31      <div className="flex flex-1 flex-col overflow-hidden">
32        <div className="flex md:hidden items-center justify-between border-b border-border px-4 h-14 bg-background z-20">
33          <Button
34            variant="ghost"
35            size="icon-sm"
36            onClick={() => setSidebarOpen(true)}
37          >
38            <MenuIcon className="size-5" />
39          </Button>
40 
41          <div className="flex items-center gap-2">
42            <Button variant="ghost" size="icon-sm" asChild>
43              <Link
44                href="https://github.com/ln-dev7/square-ui/tree/master/templates/chat"
45                target="_blank"
46                rel="noopener noreferrer"
47              >
48                <Github className="size-4" />
49              </Link>
50            </Button>
51            <ThemeToggle />
52          </div>
53        </div>
54 
55        <div className="hidden md:flex absolute top-4 right-4 gap-2 z-20">
56          <Button variant="ghost" size="icon-sm" asChild>
57            <Link
58              href="https://github.com/ln-dev7/square-ui/tree/master/templates/chat"
59              target="_blank"
60              rel="noopener noreferrer"
61            >
62              <Github className="size-4" />
63            </Link>
64          </Button>
65          <ThemeToggle />
66        </div>
67 
68        <div className="flex-1 overflow-hidden relative">
69          <GridPattern className="pointer-events-none" />
70 
71          <div className="relative z-10 h-full">
72            <ChatMain />
73          </div>
74// … truncated