81:I[903690,["/chat-static/_next/static/immutable/chunks/2b75ildtv3myf.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/0zhl8lkpuievb.js","/chat-static/_next/static/immutable/chunks/0k8xwdx3dazwi.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/0znv-saj_9omo.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2z8pc3a6_tk5s.js","/chat-static/_next/static/immutable/chunks/33gy6rv7z29e-.js","/chat-static/_next/static/immutable/chunks/43zma2pkpdkjx.js","/chat-static/_next/static/immutable/chunks/1fhqvawdycviw.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/3afbgo6rex_vb.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/03ug0e28spr-r.js","/chat-static/_next/static/immutable/chunks/25c165o1owp5w.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/2yftv5m77a_ya.js","/chat-static/_next/static/immutable/chunks/37vyim_j6k8zg.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2qnxvxvoeqa54.js","/chat-static/_next/static/immutable/chunks/3a69lcep90z-5.js","/chat-static/_next/static/immutable/chunks/0cf7c5y80zn5y.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/1zbczmbdcfpso.js","/chat-static/_next/static/immutable/chunks/2t6e3v_r3gzl3.js","/chat-static/_next/static/immutable/chunks/01pxlv-t_dewh.js"],"ExplicitChatIdProvider"] 82:I[838238,["/chat-static/_next/static/immutable/chunks/2b75ildtv3myf.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/0zhl8lkpuievb.js","/chat-static/_next/static/immutable/chunks/0k8xwdx3dazwi.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/0znv-saj_9omo.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2z8pc3a6_tk5s.js","/chat-static/_next/static/immutable/chunks/33gy6rv7z29e-.js","/chat-static/_next/static/immutable/chunks/43zma2pkpdkjx.js","/chat-static/_next/static/immutable/chunks/1fhqvawdycviw.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/3afbgo6rex_vb.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/03ug0e28spr-r.js","/chat-static/_next/static/immutable/chunks/25c165o1owp5w.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/2yftv5m77a_ya.js","/chat-static/_next/static/immutable/chunks/37vyim_j6k8zg.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2qnxvxvoeqa54.js","/chat-static/_next/static/immutable/chunks/3a69lcep90z-5.js","/chat-static/_next/static/immutable/chunks/0cf7c5y80zn5y.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/1zbczmbdcfpso.js","/chat-static/_next/static/immutable/chunks/2t6e3v_r3gzl3.js","/chat-static/_next/static/immutable/chunks/01pxlv-t_dewh.js"],"SWRDataProvider"] 83:T15215,[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import ChatInterface from "@/components/chat-interface" import UserSidebar from "@/components/user-sidebar" import { SidebarProvider } from "@/components/ui/sidebar" export default function Home() { const [selectedUser, setSelectedUser] = useState(null) return (

) } [V0_FILE]typescriptreact:file="components/chat-interface.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Avatar } from "@/components/ui/avatar" import { ScrollArea } from "@/components/ui/scroll-area" import { Send, Paperclip, Mic, Image } from "lucide-react" // Sample user data - this should be imported from a shared location in a real app const users = [ { id: "1", name: "Emma Thompson", avatar: "/placeholder.svg?height=40&width=40", status: "online", unread: 3, lastMessage: "Hey, how's it going?", }, { id: "2", name: "James Wilson", avatar: "/placeholder.svg?height=40&width=40", status: "online", unread: 0, lastMessage: "Can we discuss the project?", }, { id: "3", name: "Sophia Martinez", avatar: "/placeholder.svg?height=40&width=40", status: "offline", unread: 0, lastMessage: "Thanks for your help!", }, { id: "4", name: "Liam Johnson", avatar: "/placeholder.svg?height=40&width=40", status: "away", unread: 1, lastMessage: "I'll send you the files later", }, { id: "5", name: "Olivia Davis", avatar: "/placeholder.svg?height=40&width=40", status: "online", unread: 0, lastMessage: "Let's meet tomorrow", }, ] type Message = { id: string content: string sender: "user" | "assistant" timestamp: Date } type ChatInterfaceProps = { selectedUser?: string | null } export default function ChatInterface({ selectedUser }: ChatInterfaceProps) { const [messages, setMessages] = useState([ { id: "1", content: "Hello! How can I help you today?", sender: "assistant", timestamp: new Date(), }, ]) const [inputValue, setInputValue] = useState("") const [isTyping, setIsTyping] = useState(false) const messagesEndRef = useRef(null) // Find the selected user from our data const selectedUserData = selectedUser ? users.find((user) => user.id === selectedUser) : null const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } useEffect(() => { scrollToBottom() }, [messages, scrollToBottom]) const handleSendMessage = () => { if (inputValue.trim() === "") return // Add user message const userMessage: Message = { id: Date.now().toString(), content: inputValue, sender: "user", timestamp: new Date(), } setMessages((prev) => [...prev, userMessage]) setInputValue("") // Simulate assistant typing setIsTyping(true) // Simulate assistant response after a delay setTimeout(() => { const assistantMessage: Message = { id: (Date.now() + 1).toString(), content: `I received your message: "${inputValue}"`, sender: "assistant", timestamp: new Date(), } setMessages((prev) => [...prev, assistantMessage]) setIsTyping(false) }, 1500) } const formatTime = (date: Date) => { return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) } return (

{/* Header */}

{selectedUserData ? ( <>

{selectedUserData.name}

{selectedUserData.status}

) : ( <>

AI Assistant

Always online

)}

{/* Messages */}

{messages.map((message) => (

{message.content}

{formatTime(message.timestamp)}

))} {isTyping && (

)}

{/* Input */}

setInputValue(e.target.value)} placeholder="Type a message..." className="pr-10 rounded-full" onKeyDown={(e) => { if (e.key === "Enter") { handleSendMessage() } }} />

) } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true" "use client" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx" isMerged="true" "use client" import * as React from "react" import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" import { cn } from "@/lib/utils" const ScrollArea = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName const ScrollBar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, orientation = "vertical", ...props }, ref) => ( )) ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName export { ScrollArea, ScrollBar } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; /* Sidebar variables */ --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; /* Sidebar variables */ --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 0 0% 98%; --sidebar-primary-foreground: 240 5.9% 10%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/user-sidebar.tsx" isMerged="true" "use client" import { useState } from "react" import { Search, Users, Plus, Settings, LogOut } from "lucide-react" import { Avatar } from "@/components/ui/avatar" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarRail, } from "@/components/ui/sidebar" // Sample user data const users = [ { id: "1", name: "Emma Thompson", avatar: "/placeholder.svg?height=40&width=40", status: "online", unread: 3, lastMessage: "Hey, how's it going?", }, { id: "2", name: "James Wilson", avatar: "/placeholder.svg?height=40&width=40", status: "online", unread: 0, lastMessage: "Can we discuss the project?", }, { id: "3", name: "Sophia Martinez", avatar: "/placeholder.svg?height=40&width=40", status: "offline", unread: 0, lastMessage: "Thanks for your help!", }, { id: "4", name: "Liam Johnson", avatar: "/placeholder.svg?height=40&width=40", status: "away", unread: 1, lastMessage: "I'll send you the files later", }, { id: "5", name: "Olivia Davis", avatar: "/placeholder.svg?height=40&width=40", status: "online", unread: 0, lastMessage: "Let's meet tomorrow", }, ] type UserSidebarProps = { onSelectUser: (userId: string) => void selectedUser: string | null } export default function UserSidebar({ onSelectUser, selectedUser }: UserSidebarProps) { const [searchQuery, setSearchQuery] = useState("") const filteredUsers = users.filter((user) => user.name.toLowerCase().includes(searchQuery.toLowerCase())) const getStatusColor = (status: string) => { switch (status) { case "online": return "bg-green-500" case "away": return "bg-yellow-500" case "offline": return "bg-gray-400" default: return "bg-gray-400" } } return (

Contacts

setSearchQuery(e.target.value)} />

Recent Chats {filteredUsers.map((user) => ( onSelectUser(user.id)}>

{user.name} {user.unread > 0 && ( {user.unread} )}

{user.lastMessage}

))}

Settings

Logout

) } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/sidebar.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { type VariantProps, cva } from "class-variance-authority" import { PanelLeft } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { Sheet, SheetContent } from "@/components/ui/sheet" import { Skeleton } from "@/components/ui/skeleton" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" const SIDEBAR_COOKIE_NAME = "sidebar:state" const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 const SIDEBAR_WIDTH = "16rem" const SIDEBAR_WIDTH_MOBILE = "18rem" const SIDEBAR_WIDTH_ICON = "3rem" const SIDEBAR_KEYBOARD_SHORTCUT = "b" type SidebarContext = { state: "expanded" | "collapsed" open: boolean setOpen: (open: boolean) => void openMobile: boolean setOpenMobile: (open: boolean) => void isMobile: boolean toggleSidebar: () => void } const SidebarContext = React.createContext(null) function useSidebar() { const context = React.useContext(SidebarContext) if (!context) { throw new Error("useSidebar must be used within a SidebarProvider.") } return context } // Custom hook to detect mobile function useIsMobile() { const [isMobile, setIsMobile] = React.useState(false) React.useEffect(() => { const checkIsMobile = () => { setIsMobile(window.innerWidth < 768) } // Initial check checkIsMobile() // Add event listener window.addEventListener("resize", checkIsMobile) // Cleanup return () => window.removeEventListener("resize", checkIsMobile) }, []) return isMobile } const SidebarProvider = React.forwardRef< HTMLDivElement, React.ComponentProps<"div"> & { defaultOpen?: boolean open?: boolean onOpenChange?: (open: boolean) => void } >(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref) => { const isMobile = useIsMobile() const [openMobile, setOpenMobile] = React.useState(false) // This is the internal state of the sidebar. // We use openProp and setOpenProp for control from outside the component. const [_open, _setOpen] = React.useState(defaultOpen) const open = openProp ?? _open const setOpen = React.useCallback( (value: boolean | ((value: boolean) => boolean)) => { const openState = typeof value === "function" ? value(open) : value if (setOpenProp) { setOpenProp(openState) } else { _setOpen(openState) } // This sets the cookie to keep the sidebar state. document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}` }, [setOpenProp, open], ) // Helper to toggle the sidebar. const toggleSidebar = React.useCallback(() => { return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open) }, [isMobile, setOpen]) // Adds a keyboard shortcut to toggle the sidebar. React.useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) { event.preventDefault() toggleSidebar() } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [toggleSidebar]) // We add a state so that we can do data-state="expanded" or "collapsed". // This makes it easier to style the sidebar with Tailwind classes. const state = open ? "expanded" : "collapsed" const contextValue = React.useMemo( () => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar], ) return (

{children}

) }) SidebarProvider.displayName = "SidebarProvider" const Sidebar = React.forwardRef< HTMLDivElement, React.ComponentProps<"div"> & { side?: "left" | "right" variant?: "sidebar" | "floating" | "inset" collapsible?: "offcanvas" | "icon" | "none" } >(({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref) => { const { isMobile, state, openMobile, setOpenMobile } = useSidebar() if (collapsible === "none") { return (

{children}

) } if (isMobile) { return (

{children}

) } return (

{/* This is what handles the sidebar gap on desktop */}

) }) Sidebar.displayName = "Sidebar" const SidebarTrigger = React.forwardRef, React.ComponentProps>( ({ className, onClick, ...props }, ref) => { const { toggleSidebar } = useSidebar() return ( ) }, ) SidebarTrigger.displayName = "SidebarTrigger" const SidebarRail = React.forwardRef>( ({ className, ...props }, ref) => { const { toggleSidebar } = useSidebar() return (

setSearchQuery(e.target.value)} />

Recent Chats {filteredUsers.map((user) => ( onSelectUser(user.id)}>

{user.name} {user.unread > 0 && ( {user.unread} )}

{user.lastMessage}

))}

Settings

Logout

) } [V0_FILE]typescriptreact:file="src/components/ChatInterface.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, useRef, useEffect, useCallback } from "react" import { Button } from "./ui/button" import { Input } from "./ui/input" import { Avatar } from "./ui/avatar" import { ScrollArea } from "./ui/scroll-area" import { Send, Paperclip, Mic, Image } from "lucide-react" // Sample user data - this should be imported from a shared location in a real app const users = [ { id: "1", name: "Emma Thompson", avatar: "/placeholder.svg?height=40&width=40", status: "online", unread: 3, lastMessage: "Hey, how's it going?", }, { id: "2", name: "James Wilson", avatar: "/placeholder.svg?height=40&width=40", status: "online", unread: 0, lastMessage: "Can we discuss the project?", }, { id: "3", name: "Sophia Martinez", avatar: "/placeholder.svg?height=40&width=40", status: "offline", unread: 0, lastMessage: "Thanks for your help!", }, { id: "4", name: "Liam Johnson", avatar: "/placeholder.svg?height=40&width=40", status: "away", unread: 1, lastMessage: "I'll send you the files later", }, { id: "5", name: "Olivia Davis", avatar: "/placeholder.svg?height=40&width=40", status: "online", unread: 0, lastMessage: "Let's meet tomorrow", }, ] type Message = { id: string content: string sender: "user" | "assistant" timestamp: Date } type ChatInterfaceProps = { selectedUser?: string | null } export default function ChatInterface({ selectedUser }: ChatInterfaceProps) { const [messages, setMessages] = useState([ { id: "1", content: "Hello! How can I help you today?", sender: "assistant", timestamp: new Date(), }, ]) const [inputValue, setInputValue] = useState("") const [isTyping, setIsTyping] = useState(false) const messagesEndRef = useRef(null) // Find the selected user from our data const selectedUserData = selectedUser ? users.find((user) => user.id === selectedUser) : null const scrollToBottom = useCallback(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) }, []) useEffect(() => { scrollToBottom() }, [messages, scrollToBottom]) const handleSendMessage = () => { if (inputValue.trim() === "") return // Add user message const userMessage: Message = { id: Date.now().toString(), content: inputValue, sender: "user", timestamp: new Date(), } setMessages((prev) => [...prev, userMessage]) setInputValue("") // Simulate assistant typing setIsTyping(true) // Simulate assistant response after a delay setTimeout(() => { const assistantMessage: Message = { id: (Date.now() + 1).toString(), content: `I received your message: "${inputValue}"`, sender: "assistant", timestamp: new Date(), } setMessages((prev) => [...prev, assistantMessage]) setIsTyping(false) }, 1500) } const formatTime = (date: Date) => { return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) } return (

{/* Header */}

{selectedUserData ? ( <>

{selectedUserData.name}

{selectedUserData.status}

) : ( <>

AI Assistant

Always online

)}

{/* Messages */}

{messages.map((message) => (

{message.content}

{formatTime(message.timestamp)}

))} {isTyping && (

)}

{/* Input */}

setInputValue(e.target.value)} placeholder="Type a message..." className="pr-10 rounded-full" onKeyDown={(e) => { if (e.key === "Enter") { handleSendMessage() } }} />

) } [V0_FILE]typescriptreact:file="src/components/ui/avatar.tsx" import React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "../../lib/utils" const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="src/components/ui/button.tsx" import React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "../../lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="src/components/ui/input.tsx" import React from "react" import { cn } from "../../lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="src/components/ui/scroll-area.tsx" import React from "react" import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" import { cn } from "../../lib/utils" const ScrollArea = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName const ScrollBar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, orientation = "vertical", ...props }, ref) => ( )) ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName export { ScrollArea, ScrollBar } [V0_FILE]typescriptreact:file="src/components/ui/sidebar.tsx" isFixed="true" isQuickEdit="true" "use client" import React, { createContext, useContext, useState, useEffect, useCallback, useMemo } from "react" import { type VariantProps, cva } from "class-variance-authority" import { PanelLeft } from "lucide-react" import { cn } from "../../lib/utils" import { Button } from "./button" import { Input } from "./input" import { Separator } from "./separator" import { Skeleton } from "./skeleton" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip" // Define SidebarContext type interface SidebarContextProps { collapsed: boolean setCollapsed: (collapsed: boolean) => void } // Constants const SIDEBAR_WIDTH = 260 const SIDEBAR_WIDTH_COLLAPSED = 72 // Sidebar Variants const sidebarVariants = cva( "group relative flex h-screen flex-col overflow-hidden border-r bg-secondary text-secondary-foreground shadow-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-0 data-[state=open]:slide-in-from-left-0", { variants: { variant: { default: "w-[var(--sidebar-width)]", inset: "border-l", }, }, defaultVariants: { variant: "default", }, }, ) type SidebarProps = React.HTMLAttributes & VariantProps & { width?: number collapsedWidth?: number } const Sidebar = React.forwardRef( ({ className, variant, width = SIDEBAR_WIDTH, collapsedWidth = SIDEBAR_WIDTH_COLLAPSED, ...props }, ref) => { return (

) }, ) Sidebar.displayName = "Sidebar" const SidebarRail = React.forwardRef>( ({ className, ...props }, ref) => (

), ) SidebarRail.displayName = "SidebarRail" const SidebarContent = React.forwardRef>( ({ className, ...props }, ref) => (

), ) SidebarContent.displayName = "SidebarContent" const SidebarHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) SidebarHeader.displayName = "SidebarHeader" const SidebarFooter = React.forwardRef>( ({ className, ...props }, ref) => (

), ) SidebarFooter.displayName = "SidebarFooter" const SidebarTrigger = React.forwardRef, React.ComponentPropsWithoutRef>( ({ className, ...props }, ref) => { const { collapsed, setCollapsed } = useSidebar() const isMobile = useIsMobile() const handleToggle = useCallback(() => { if (isMobile) { // Handle mobile-specific logic if needed // For example, open a sheet or modal console.log("Mobile toggle") } else { setCollapsed(!collapsed) } }, [collapsed, setCollapsed, isMobile]) return ( Toggle Sidebar ) }, ) SidebarTrigger.displayName = "SidebarTrigger" const SidebarGroup = React.forwardRef>( ({ className, ...props }, ref) => (

), ) SidebarGroup.displayName = "SidebarGroup" const SidebarGroupLabel = React.forwardRef>( ({ className, ...props }, ref) => (

), ) SidebarGroupLabel.displayName = "SidebarGroupLabel" const SidebarGroupContent = React.forwardRef>( ({ className, ...props }, ref) =>

, ) SidebarGroupContent.displayName = "SidebarGroupContent" const SidebarGroupAction = React.forwardRef>( ({ className, ...props }, ref) =>

, ) SidebarGroupAction.displayName = "SidebarGroupAction" const SidebarMenu = React.forwardRef>( ({ className, ...props }, ref) =>

, ) SidebarMenu.displayName = "SidebarMenu" const SidebarMenuButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => (

About

Tags

Share

About

Tags

Share

More Templates Like This