[V0_FILE]typescriptreact:file="types/chat.ts" isMerged="true" export interface User { id: string name: string avatar?: string status: "online" | "offline" | "away" lastSeen?: Date } export interface Message { id: string content: string senderId: string timestamp: Date type: "text" | "image" | "file" fileUrl?: string fileName?: string fileSize?: number reactions?: Reaction[] isEdited?: boolean replyTo?: string status: "sending" | "sent" | "delivered" | "read" | "failed" } export interface Reaction { emoji: string userId: string userName: string } export interface Chat { id: string title: string participants: User[] lastMessage?: Message unreadCount: number timestamp: Date type: "direct" | "group" } export interface UserSettings { theme: "light" | "dark" | "system" notifications: { desktop: boolean sound: boolean mentions: boolean } privacy: { readReceipts: boolean lastSeen: boolean } } [V0_FILE]typescriptreact:file="hooks/useChat.ts" isMerged="true" "use client" import { useState, useCallback, useRef, useEffect } from "react" import type { Message, Chat, User } from "../types/chat" export function useChat() { const [messages, setMessages] = useState([]) const [chats, setChats] = useState([]) const [activeChat, setActiveChat] = useState(null) const [currentUser] = useState({ id: "user-1", name: "John Doe", status: "online", }) const [isTyping, setIsTyping] = useState(false) const [error, setError] = useState(null) const messagesEndRef = useRef(null) const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } useEffect(() => { scrollToBottom() }, [messages]) const sendMessage = useCallback( async (content: string, type: "text" | "image" | "file" = "text", file?: File) => { if (!activeChat) return const newMessage: Message = { id: `msg-${Date.now()}`, content, senderId: currentUser.id, timestamp: new Date(), type, status: "sending", reactions: [], } if (file) { newMessage.fileName = file.name newMessage.fileSize = file.size newMessage.fileUrl = URL.createObjectURL(file) } setMessages((prev) => [...prev, newMessage]) setError(null) try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) setMessages((prev) => prev.map((msg) => (msg.id === newMessage.id ? { ...msg, status: "sent" } : msg))) // Simulate AI response for demo if (type === "text") { setTimeout(() => { const aiResponse: Message = { id: `msg-${Date.now()}-ai`, content: `I received your message: "${content}". How can I help you further?`, senderId: "ai-assistant", timestamp: new Date(), type: "text", status: "sent", reactions: [], } setMessages((prev) => [...prev, aiResponse]) }, 1500) } } catch (error) { setMessages((prev) => prev.map((msg) => (msg.id === newMessage.id ? { ...msg, status: "failed" } : msg))) setError("Failed to send message. Please try again.") } }, [activeChat, currentUser.id], ) const editMessage = useCallback((messageId: string, newContent: string) => { setMessages((prev) => prev.map((msg) => (msg.id === messageId ? { ...msg, content: newContent, isEdited: true } : msg)), ) }, []) const deleteMessage = useCallback((messageId: string) => { setMessages((prev) => prev.filter((msg) => msg.id !== messageId)) }, []) const addReaction = useCallback( (messageId: string, emoji: string) => { setMessages((prev) => prev.map((msg) => { if (msg.id === messageId) { const existingReaction = msg.reactions?.find((r) => r.emoji === emoji && r.userId === currentUser.id) if (existingReaction) { return { ...msg, reactions: msg.reactions?.filter((r) => !(r.emoji === emoji && r.userId === currentUser.id)), } } else { return { ...msg, reactions: [...(msg.reactions || []), { emoji, userId: currentUser.id, userName: currentUser.name }], } } } return msg }), ) }, [currentUser], ) return { messages, chats, activeChat, setActiveChat, currentUser, isTyping, error, setError, sendMessage, editMessage, deleteMessage, addReaction, messagesEndRef, } } [V0_FILE]typescriptreact:file="components/file-upload.tsx" isMerged="true" "use client" import type React from "react" import { useRef, useState } from "react" import { Paperclip, Upload, ImageIcon, File } from "lucide-react" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" interface FileUploadProps { onFileSelect: (file: File, type: "image" | "file") => void disabled?: boolean } export function FileUpload({ onFileSelect, disabled }: FileUploadProps) { const fileInputRef = useRef(null) const imageInputRef = useRef(null) const [dragOver, setDragOver] = useState(false) const [uploadProgress, setUploadProgress] = useState(null) const handleFileSelect = (file: File) => { const isImage = file.type.startsWith("image/") onFileSelect(file, isImage ? "image" : "file") // Simulate upload progress setUploadProgress(0) const interval = setInterval(() => { setUploadProgress((prev) => { if (prev === null || prev >= 100) { clearInterval(interval) setTimeout(() => setUploadProgress(null), 500) return 100 } return prev + 10 }) }, 100) } const handleDrop = (e: React.DragEvent) => { e.preventDefault() setDragOver(false) const files = Array.from(e.dataTransfer.files) if (files.length > 0) { handleFileSelect(files[0]) } } const handleDragOver = (e: React.DragEvent) => { e.preventDefault() setDragOver(true) } const handleDragLeave = (e: React.DragEvent) => { e.preventDefault() setDragOver(false) } return ( <>

{/* Hidden file inputs */} { const file = e.target.files?.[0] if (file) handleFileSelect(file) }} /> { const file = e.target.files?.[0] if (file) handleFileSelect(file) }} /> {/* Upload progress */} {uploadProgress !== null && (

Uploading...

)} {/* Drag and drop overlay */} {dragOver && (

Drop files here to upload

)} ) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="lib/constants.ts" isMerged="true" export const APP_CONFIG = { MAX_MESSAGE_LENGTH: 4000, MAX_FILE_SIZE: 10 * 1024 * 1024, // 10MB SUPPORTED_IMAGE_TYPES: ["image/jpeg", "image/png", "image/gif", "image/webp"], SUPPORTED_FILE_TYPES: ["application/pdf", "text/plain", "application/msword"], MESSAGE_BATCH_SIZE: 50, TYPING_TIMEOUT: 3000, RECONNECT_ATTEMPTS: 3, RECONNECT_DELAY: 1000, } as const export const ROUTES = { CHAT: "/chat", SETTINGS: "/settings", PROFILE: "/profile", } as const export const STORAGE_KEYS = { USER_SETTINGS: "chat_user_settings", DRAFT_MESSAGES: "chat_draft_messages", THEME: "chat_theme", } as const [V0_FILE]typescriptreact:file="lib/utils/validation.ts" isMerged="true" import { APP_CONFIG } from "../constants" export class ValidationError extends Error { constructor( message: string, public field?: string, ) { super(message) this.name = "ValidationError" } } export const validateMessage = (content: string): void => { if (!content.trim()) { throw new ValidationError("Message cannot be empty") } if (content.length > APP_CONFIG.MAX_MESSAGE_LENGTH) { throw new ValidationError(`Message too long. Maximum ${APP_CONFIG.MAX_MESSAGE_LENGTH} characters allowed`) } } export const validateFile = (file: File): void => { if (file.size > APP_CONFIG.MAX_FILE_SIZE) { throw new ValidationError("File too large. Maximum 10MB allowed") } const isImage = APP_CONFIG.SUPPORTED_IMAGE_TYPES.includes(file.type as any) const isFile = APP_CONFIG.SUPPORTED_FILE_TYPES.includes(file.type as any) if (!isImage && !isFile) { throw new ValidationError("Unsupported file type") } } export const sanitizeInput = (input: string): string => { return input .replace(/)<[^<]*)*<\/script>/gi, "") .replace(/javascript:/gi, "") .trim() } [V0_FILE]typescriptreact:file="lib/utils/performance.ts" isMerged="true" "use client" import { useCallback, useRef } from "react" export const debounce = any>( func: T, wait: number, ): ((...args: Parameters) => void) => { let timeout: NodeJS.Timeout return (...args: Parameters) => { clearTimeout(timeout) timeout = setTimeout(() => func(...args), wait) } } export const throttle = any>( func: T, limit: number, ): ((...args: Parameters) => void) => { let inThrottle: boolean return (...args: Parameters) => { if (!inThrottle) { func(...args) inThrottle = true setTimeout(() => (inThrottle = false), limit) } } } export const useDebounce = any>(callback: T, delay: number) => { const timeoutRef = useRef() return useCallback( (...args: Parameters) => { if (timeoutRef.current) { clearTimeout(timeoutRef.current) } timeoutRef.current = setTimeout(() => callback(...args), delay) }, [callback, delay], ) } [V0_FILE]typescriptreact:file="lib/services/storage.service.ts" isMerged="true" export class StorageService { private static instance: StorageService static getInstance(): StorageService { if (!StorageService.instance) { StorageService.instance = new StorageService() } return StorageService.instance } set(key: string, value: T): void { try { localStorage.setItem(key, JSON.stringify(value)) } catch (error) { console.error("Failed to save to localStorage:", error) } } get(key: string, defaultValue?: T): T | null { try { const item = localStorage.getItem(key) return item ? JSON.parse(item) : (defaultValue ?? null) } catch (error) { console.error("Failed to read from localStorage:", error) return defaultValue ?? null } } remove(key: string): void { try { localStorage.removeItem(key) } catch (error) { console.error("Failed to remove from localStorage:", error) } } clear(): void { try { localStorage.clear() } catch (error) { console.error("Failed to clear localStorage:", error) } } } export const storageService = StorageService.getInstance() [V0_FILE]typescriptreact:file="lib/services/api.service.ts" isMerged="true" import type { Message, Chat } from "../../types/chat" export class ApiError extends Error { constructor( message: string, public status?: number, public code?: string, ) { super(message) this.name = "ApiError" } } export class ApiService { private static instance: ApiService private baseUrl = "/api" static getInstance(): ApiService { if (!ApiService.instance) { ApiService.instance = new ApiService() } return ApiService.instance } private async request(endpoint: string, options: RequestInit = {}): Promise { try { const response = await fetch(`${this.baseUrl}${endpoint}`, { headers: { "Content-Type": "application/json", ...options.headers, }, ...options, }) if (!response.ok) { throw new ApiError(`API Error: ${response.statusText}`, response.status) } return await response.json() } catch (error) { if (error instanceof ApiError) throw error throw new ApiError("Network error occurred") } } async sendMessage(chatId: string, content: string, type = "text"): Promise { return this.request("/messages", { method: "POST", body: JSON.stringify({ chatId, content, type }), }) } async getMessages(chatId: string, page = 0, limit = 50): Promise { return this.request(`/messages/${chatId}?page=${page}&limit=${limit}`) } async getChats(): Promise { return this.request("/chats") } async uploadFile(file: File): Promise<{ url: string; fileName: string }> { const formData = new FormData() formData.append("file", file) const response = await fetch(`${this.baseUrl}/upload`, { method: "POST", body: formData, }) if (!response.ok) { throw new ApiError("File upload failed", response.status) } return await response.json() } async updateMessage(messageId: string, content: string): Promise { return this.request(`/messages/${messageId}`, { method: "PATCH", body: JSON.stringify({ content }), }) } async deleteMessage(messageId: string): Promise { await this.request(`/messages/${messageId}`, { method: "DELETE", }) } } export const apiService = ApiService.getInstance() [V0_FILE]typescriptreact:file="components/ui/error-boundary.tsx" isMerged="true" "use client" import React from "react" import { AlertTriangle, RefreshCw } from "lucide-react" import { Button } from "@/components/ui/button" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" interface ErrorBoundaryState { hasError: boolean error?: Error } interface ErrorBoundaryProps { children: React.ReactNode fallback?: React.ComponentType<{ error: Error; resetError: () => void }> } export class ErrorBoundary extends React.Component { constructor(props: ErrorBoundaryProps) { super(props) this.state = { hasError: false } } static getDerivedStateFromError(error: Error): ErrorBoundaryState { return { hasError: true, error } } componentDidCatch(error: Error, errorInfo: React.ErrorInfo) { console.error("Error caught by boundary:", error, errorInfo) } resetError = () => { this.setState({ hasError: false, error: undefined }) } render() { if (this.state.hasError) { if (this.props.fallback) { const FallbackComponent = this.props.fallback return } return (

Something went wrong

{this.state.error?.message || "An unexpected error occurred"}

) } return this.props.children } } [V0_FILE]typescriptreact:file="components/ui/virtual-list.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useMemo } from "react" interface VirtualListProps { items: T[] itemHeight: number containerHeight: number renderItem: (item: T, index: number) => React.ReactNode overscan?: number } export function VirtualList({ items, itemHeight, containerHeight, renderItem, overscan = 5 }: VirtualListProps) { const [scrollTop, setScrollTop] = useState(0) const scrollElementRef = useRef(null) const { visibleItems, totalHeight, offsetY } = useMemo(() => { const startIndex = Math.floor(scrollTop / itemHeight) const endIndex = Math.min(startIndex + Math.ceil(containerHeight / itemHeight) + overscan, items.length - 1) const visibleItems = items.slice(Math.max(0, startIndex - overscan), endIndex + 1).map((item, index) => ({ item, index: Math.max(0, startIndex - overscan) + index, })) return { visibleItems, totalHeight: items.length * itemHeight, offsetY: Math.max(0, startIndex - overscan) * itemHeight, } }, [items, itemHeight, scrollTop, containerHeight, overscan]) const handleScroll = (e: React.UIEvent) => { setScrollTop(e.currentTarget.scrollTop) } return (

{visibleItems.map(({ item, index }) => (

{renderItem(item, index)}

))}

) } [V0_FILE]typescriptreact:file="components/chat/chat-sidebar.tsx" isMerged="true" "use client" import { useState } from "react" import { formatDistanceToNow } from "date-fns" import { MessageCircle, Plus, Search, Settings, User, MoreHorizontal } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { ScrollArea } from "@/components/ui/scroll-area" import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from "@/components/ui/sidebar" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { useChatContext } from "../../contexts/chat.context" import { useDebounce } from "../../lib/utils/performance" export function ChatSidebar() { const { chats, activeChat, setActiveChat, currentUser, onlineUsers } = useChatContext() const [searchQuery, setSearchQuery] = useState("") const debouncedSearch = useDebounce((query: string) => { setSearchQuery(query) }, 300) const filteredChats = chats.filter((chat) => chat.title.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" } } const handleNewChat = () => { // TODO: Implement new chat creation console.log("Creating new chat...") } return (

ChatApp Pro Advanced messaging

debouncedSearch(e.target.value)} className="pl-8" />

Recent Chats {filteredChats.map((chat) => ( ))}

{currentUser.name.charAt(0)}

{currentUser.name}

{currentUser.status}

Profile Settings Sign out ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { Phone, Video, Info, AlertCircle, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Separator } from "@/components/ui/separator" import { Alert, AlertDescription } from "@/components/ui/alert" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar" import { ErrorBoundary } from "../components/ui/error-boundary" import { ChatProvider, useChatContext } from "../contexts/chat.context" import { ChatSidebar } from "../components/chat/chat-sidebar" import { MessageList } from "../components/chat/message-list" import { MessageInput } from "../components/chat/message-input" import { SettingsPanel } from "../components/settings-panel" function ChatHeader() { const { activeChat, onlineUsers } = useChatContext() if (!activeChat) { return (

Select a chat to start messaging

) } 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" } } const handleCall = () => { console.log("Starting voice call...") } const handleVideoCall = () => { console.log("Starting video call...") } const handleInfo = () => { console.log("Opening chat info...") } return (

{activeChat.type === "group" ? "👥" : "🤖"} {activeChat.type === "direct" && (

)}

{activeChat.title}

{activeChat.type === "direct" ? "Online" : `${activeChat.participants.length} members`}

) } function ErrorAlert() { const { error, clearError } = useChatContext() if (!error) return null return ( {error} ) } function ChatContent() { return ( ) } export default function ComprehensiveChatApp() { return (

) } [V0_FILE]typescriptreact:file="components/chat/message-list.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useRef } from "react" import { ScrollArea } from "@/components/ui/scroll-area" import { Skeleton } from "@/components/ui/skeleton" import { MessageItem } from "../message-item" import { VirtualList } from "../ui/virtual-list" import { useChatContext } from "../../contexts/chat.context" export function MessageList() { const { messages, isLoading, isTyping, currentUser, editMessage, deleteMessage, addReaction } = useChatContext() const scrollAreaRef = useRef(null) const messagesEndRef = useRef(null) const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } useEffect(() => { scrollToBottom() }, [messages, isTyping]) if (isLoading && messages.length === 0) { return (

{Array.from({ length: 5 }).map((_, i) => (

))}

) } const renderMessage = (message: any, index: number) => ( ) return (

{messages.length > 100 ? ( ) : ( messages.map((message, index) => renderMessage(message, index)) )} {isTyping && (

🤖

)}

) } [V0_FILE]typescriptreact:file="components/message-item.tsx" isEdit="true" "use client" import { useState } from "react" import { formatDistanceToNow } from "date-fns" import { MoreHorizontal, Edit, Trash2, Download, File, Check, CheckCheck, Clock, AlertCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import type { Message, User } from "../types/chat" interface MessageItemProps { message: Message currentUser: User onEdit: (messageId: string, newContent: string) => void onDelete: (messageId: string) => void onReact: (messageId: string, emoji: string) => void } const reactions = ["👍", "❤️", "😂", "😮", "😢", "😡"] const getStatusIcon = (status: Message["status"]) => { switch (status) { case "sending": return case "sent": return case "delivered": return case "read": return case "failed": return default: return null } } export function MessageItem({ message, currentUser, onEdit, onDelete, onReact }: MessageItemProps) { const [isEditing, setIsEditing] = useState(false) const [editContent, setEditContent] = useState(message.content) const isOwnMessage = message.senderId === currentUser.id const handleEdit = () => { onEdit(message.id, editContent) setIsEditing(false) } const formatFileSize = (bytes: number) => { if (bytes === 0) return "0 Bytes" const k = 1024 const sizes = ["Bytes", "KB", "MB", "GB"] const i = Math.floor(Math.log(bytes) / Math.log(k)) return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i] } return (

{!isOwnMessage && ( AI )}

{isEditing ? (

setEditContent(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") handleEdit() if (e.key === "Escape") setIsEditing(false) }} />

) : ( <> {message.type === "text" &&

{message.content}

} {message.type === "image" && (

{message.content &&

{message.content}

}

)} {message.type === "file" && (

{message.fileName}

{message.fileSize && formatFileSize(message.fileSize)}

)} )}

{/* Reactions */} {message.reactions && message.reactions.length > 0 && (

{Object.entries( message.reactions.reduce( (acc, reaction) => { acc[reaction.emoji] = (acc[reaction.emoji] || 0) + 1 return acc }, {} as Record, ), ).map(([emoji, count]) => ( onReact(message.id, emoji)} > {emoji} {count} ))}

)} {/* Message info */}

{formatDistanceToNow(message.timestamp, { addSuffix: true })} {message.isEdited && (edited)} {isOwnMessage && getStatusIcon(message.status)}

{/* Message actions */}

{/* Reactions */}

{reactions.map((emoji) => ( ))}

{/* More actions */} {isOwnMessage && ( setIsEditing(true)}> Edit onDelete(message.id)}> Delete )}

{isOwnMessage && ( {currentUser.name.charAt(0)} )}

) } [V0_FILE]typescriptreact:file="components/settings-panel.tsx" isEdit="true" "use client" import { Settings, Moon, Sun, Monitor } from "lucide-react" import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { Separator } from "@/components/ui/separator" import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import type { UserSettings } from "../types/chat" import { useChatContext } from "../contexts/chat.context" export function SettingsPanel() { const { settings, updateSettings } = useChatContext() const updateNotifications = (updates: Partial) => { updateSettings({ notifications: { ...settings.notifications, ...updates }, }) } const updatePrivacy = (updates: Partial) => { updateSettings({ privacy: { ...settings.privacy, ...updates }, }) } return ( Settings Customize your chat experience

{/* Theme Settings */}

Appearance

Theme

{/* Notification Settings */}

Notifications

Desktop Notifications

Show notifications on your desktop

updateNotifications({ desktop: checked })} />

Sound

Play sound for new messages

updateNotifications({ sound: checked })} />

Mentions Only

Only notify when mentioned

updateNotifications({ mentions: checked })} />

{/* Privacy Settings */}

Privacy

Read Receipts

Let others know when you've read their messages

updatePrivacy({ readReceipts: checked })} />

Last Seen

Show when you were last online

updatePrivacy({ lastSeen: checked })} />

) } [V0_FILE]typescriptreact:file="components/chat/file-upload.tsx" "use client" import type React from "react" import { useRef, useState } from "react" import { Paperclip, Upload, ImageIcon, File } from "lucide-react" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { validateFile, ValidationError } from "../../lib/utils/validation" interface FileUploadProps { onFileSelect: (file: File, type: "image" | "file") => void disabled?: boolean } export function FileUpload({ onFileSelect, disabled }: FileUploadProps) { const fileInputRef = useRef(null) const imageInputRef = useRef(null) const [dragOver, setDragOver] = useState(false) const [uploadProgress, setUploadProgress] = useState(null) const [error, setError] = useState(null) const handleFileSelect = (file: File) => { try { validateFile(file) setError(null) const isImage = file.type.startsWith("image/") onFileSelect(file, isImage ? "image" : "file") // Simulate upload progress setUploadProgress(0) const interval = setInterval(() => { setUploadProgress((prev) => { if (prev === null || prev >= 100) { clearInterval(interval) setTimeout(() => setUploadProgress(null), 500) return 100 } return prev + 10 }) }, 100) } catch (error) { if (error instanceof ValidationError) { setError(error.message) setTimeout(() => setError(null), 3000) } } } const handleDrop = (e: React.DragEvent) => { e.preventDefault() setDragOver(false) const files = Array.from(e.dataTransfer.files) if (files.length > 0) { handleFileSelect(files[0]) } } const handleDragOver = (e: React.DragEvent) => { e.preventDefault() setDragOver(true) } const handleDragLeave = (e: React.DragEvent) => { e.preventDefault() setDragOver(false) } return ( <>

{error &&

{error}

} {/* Hidden file inputs */} { const file = e.target.files?.[0] if (file) handleFileSelect(file) }} /> { const file = e.target.files?.[0] if (file) handleFileSelect(file) }} /> {/* Upload progress */} {uploadProgress !== null && (

Uploading...

)} {/* Drag and drop overlay */} {dragOver && (

Drop files here to upload

)} ) } [V0_FILE]typescriptreact:file="components/chat/message-input.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useRef } from "react" import { Send, Smile } from "lucide-react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { useChatContext } from "../../contexts/chat.context" import { FileUpload } from "./file-upload" import { validateMessage, sanitizeInput, ValidationError } from "../../lib/utils/validation" import { useDebounce } from "../../lib/utils/performance" const emojis = ["😀", "😂", "😍", "🤔", "👍", "👎", "❤️", "🎉", "🔥", "💯"] export function MessageInput() { const { sendMessage, isLoading, error, clearError } = useChatContext() const [message, setMessage] = useState("") const [isExpanded, setIsExpanded] = useState(false) const textareaRef = useRef(null) const [localError, setLocalError] = useState(null) const debouncedValidation = useDebounce((value: string) => { try { if (value.trim()) { validateMessage(value) setLocalError(null) } } catch (error) { if (error instanceof ValidationError) { setLocalError(error.message) } } }, 500) const handleMessageChange = (value: string) => { setMessage(value) debouncedValidation(value) // Auto-expand textarea if (textareaRef.current) { textareaRef.current.style.height = "auto" textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px` setIsExpanded(textareaRef.current.scrollHeight > 40) } } const handleSendMessage = async () => { if (!message.trim() || isLoading) return try { validateMessage(message) const sanitizedMessage = sanitizeInput(message) await sendMessage(sanitizedMessage) setMessage("") setIsExpanded(false) if (textareaRef.current) { textareaRef.current.style.height = "auto" } } catch (error) { if (error instanceof ValidationError) { setLocalError(error.message) } } } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSendMessage() } } const handleEmojiSelect = (emoji: string) => { const newMessage = message + emoji setMessage(newMessage) textareaRef.current?.focus() } const handleFileUpload = async (file: File, type: "image" | "file") => { try { await sendMessage(file.name, type, file) } catch (error) { console.error("File upload failed:", error) } } return (

handleMessageChange(e.target.value)}
            onKeyDown={handleKeyDown}
            disabled={isLoading}
            className={`min-h-[40px] max-h-[120px] resize-none pr-20 ${isExpanded ? "rounded-lg" : "rounded-full"}`}
            rows={1}
          />

<div className="absolute right-2 bottom-2 flex items-center gap-1">
            <Popover>
              <PopoverTrigger asChild>
                <Button variant="ghost" size="sm" className="h-6 w-6 p-0">
                  <Smile className="h-4 w-4" />
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-auto p-2">
                <div className="grid grid-cols-5 gap-1">
                  {emojis.map((emoji) => (
                    <Button
                      key={emoji}
                      variant="ghost"
                      size="sm"
                      className="h-8 w-8 p-0"
                      onClick={() => handleEmojiSelect(emoji)}
                    >
                      {emoji}
                    </Button>
                  ))}
                </div>
              </PopoverContent>
            </Popover>

{localError && <p className="text-sm text-destructive mt-2 px-2">{localError}</p>}
    </div>
  )
}
[V0_FILE]typescriptreact:file="contexts/chat.context.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"
import { createContext, useContext, useReducer, useCallback, useEffect } from "react"
import type { Message, Chat, User, UserSettings } from "../types/chat"
import { apiService, ApiError } from "../lib/services/api.service"
import { storageService } from "../lib/services/storage.service"
import { STORAGE_KEYS } from "../lib/constants"

interface ChatState {
  messages: Message[]
  chats: Chat[]
  activeChat: Chat | null
  currentUser: User
  isLoading: boolean
  error: string | null
  isTyping: boolean
  settings: UserSettings
  onlineUsers: Set<string>
}

type ChatAction =
  | { type: "SET_LOADING"; payload: boolean }
  | { type: "SET_ERROR"; payload: string | null }
  | { type: "SET_MESSAGES"; payload: Message[] }
  | { type: "ADD_MESSAGE"; payload: Message }
  | { type: "UPDATE_MESSAGE"; payload: { id: string; updates: Partial<Message> } }
  | { type: "DELETE_MESSAGE"; payload: string }
  | { type: "SET_CHATS"; payload: Chat[] }
  | { type: "SET_ACTIVE_CHAT"; payload: Chat | null }
  | { type: "SET_TYPING"; payload: boolean }
  | { type: "UPDATE_SETTINGS"; payload: Partial<UserSettings> }
  | { type: "SET_ONLINE_USERS"; payload: string[] }

const initialState: ChatState = {
  messages: [],
  chats: [],
  activeChat: null,
  currentUser: {
    id: "user-1",
    name: "John Doe",
    status: "online",
  },
  isLoading: false,
  error: null,
  isTyping: false,
  settings: {
    theme: "system",
    notifications: {
      desktop: true,
      sound: true,
      mentions: false,
    },
    privacy: {
      readReceipts: true,
      lastSeen: true,
    },
  },
  onlineUsers: new Set(),
}

// Add this after the initialState definition
const sampleChats = [
  {
    id: "1",
    title: "AI Assistant",
    participants: [],
    unreadCount: 0,
    timestamp: new Date(),
    type: "direct" as const,
  },
  {
    id: "2",
    title: "Project Discussion",
    participants: [],
    unreadCount: 3,
    timestamp: new Date(Date.now() - 3600000),
    type: "group" as const,
  },
  {
    id: "3",
    title: "Design Team",
    participants: [],
    unreadCount: 0,
    timestamp: new Date(Date.now() - 86400000),
    type: "group" as const,
  },
]

const chatReducer = (state: ChatState, action: ChatAction): ChatState => {
  switch (action.type) {
    case "SET_LOADING":
      return { ...state, isLoading: action.payload }

case "SET_ERROR":
      return { ...state, error: action.payload, isLoading: false }

case "SET_MESSAGES":
      return { ...state, messages: action.payload }

case "ADD_MESSAGE":
      return {
        ...state,
        messages: [...state.messages, action.payload],
        error: null,
      }

case "UPDATE_MESSAGE":
      return {
        ...state,
        messages: state.messages.map((msg) =>
          msg.id === action.payload.id ? { ...msg, ...action.payload.updates } : msg,
        ),
      }

case "DELETE_MESSAGE":
      return {
        ...state,
        messages: state.messages.filter((msg) => msg.id !== action.payload),
      }

case "SET_CHATS":
      return { ...state, chats: action.payload }

case "SET_ACTIVE_CHAT":
      return { ...state, activeChat: action.payload, messages: [] }

case "SET_TYPING":
      return { ...state, isTyping: action.payload }

case "UPDATE_SETTINGS":
      const newSettings = { ...state.settings, ...action.payload }
      storageService.set(STORAGE_KEYS.USER_SETTINGS, newSettings)
      return { ...state, settings: newSettings }

case "SET_ONLINE_USERS":
      return { ...state, onlineUsers: new Set(action.payload) }

default:
      return state
  }
}

interface ChatContextType extends ChatState {
  sendMessage: (content: string, type?: "text" | "image" | "file", file?: File) => Promise<void>
  editMessage: (messageId: string, content: string) => Promise<void>
  deleteMessage: (messageId: string) => Promise<void>
  addReaction: (messageId: string, emoji: string) => void
  setActiveChat: (chat: Chat | null) => void
  loadMessages: (chatId: string) => Promise<void>
  loadChats: () => Promise<void>
  updateSettings: (settings: Partial<UserSettings>) => void
  clearError: () => void
}

const ChatContext = createContext<ChatContextType | null>(null)

export const useChatContext = () => {
  const context = useContext(ChatContext)
  if (!context) {
    throw new Error("useChatContext must be used within a ChatProvider")
  }
  return context
}

export const ChatProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [state, dispatch] = useReducer(chatReducer, {
    ...initialState,
    settings: storageService.get(STORAGE_KEYS.USER_SETTINGS, initialState.settings),
  })

const sendMessage = useCallback(
    async (content: string, type: "text" | "image" | "file" = "text", file?: File) => {
      if (!state.activeChat) return

dispatch({ type: "SET_LOADING", payload: true })
      dispatch({ type: "SET_ERROR", payload: null })

const tempMessage: Message = {
        id: `temp-${Date.now()}`,
        content,
        senderId: state.currentUser.id,
        timestamp: new Date(),
        type,
        status: "sending",
        reactions: [],
      }

if (file) {
        tempMessage.fileName = file.name
        tempMessage.fileSize = file.size
        tempMessage.fileUrl = URL.createObjectURL(file)
      }

dispatch({ type: "ADD_MESSAGE", payload: tempMessage })

try {
        let finalContent = content

if (file) {
          const uploadResult = await apiService.uploadFile(file)
          finalContent = uploadResult.fileName
          dispatch({
            type: "UPDATE_MESSAGE",
            payload: {
              id: tempMessage.id,
              updates: { fileUrl: uploadResult.url },
            },
          })
        }

const sentMessage = await apiService.sendMessage(state.activeChat.id, finalContent, type)

dispatch({
          type: "UPDATE_MESSAGE",
          payload: {
            id: tempMessage.id,
            updates: { ...sentMessage, status: "sent" },
          },
        })

// Simulate AI response
        if (type === "text") {
          dispatch({ type: "SET_TYPING", payload: true })
          setTimeout(async () => {
            const aiResponse: Message = {
              id: `ai-${Date.now()}`,
              content: `I received your message: "${content}". How can I help you further?`,
              senderId: "ai-assistant",
              timestamp: new Date(),
              type: "text",
              status: "sent",
              reactions: [],
            }
            dispatch({ type: "ADD_MESSAGE", payload: aiResponse })
            dispatch({ type: "SET_TYPING", payload: false })
          }, 2000)
        }
      } catch (error) {
        dispatch({
          type: "UPDATE_MESSAGE",
          payload: {
            id: tempMessage.id,
            updates: { status: "failed" },
          },
        })

const errorMessage = error instanceof ApiError ? error.message : "Failed to send message"
        dispatch({ type: "SET_ERROR", payload: errorMessage })
      } finally {
        dispatch({ type: "SET_LOADING", payload: false })
      }
    },
    [state.activeChat, state.currentUser.id],
  )

const editMessage = useCallback(async (messageId: string, content: string) => {
    try {
      const updatedMessage = await apiService.updateMessage(messageId, content)
      dispatch({
        type: "UPDATE_MESSAGE",
        payload: {
          id: messageId,
          updates: { content, isEdited: true },
        },
      })
    } catch (error) {
      const errorMessage = error instanceof ApiError ? error.message : "Failed to edit message"
      dispatch({ type: "SET_ERROR", payload: errorMessage })
    }
  }, [])

const deleteMessage = useCallback(async (messageId: string) => {
    try {
      await apiService.deleteMessage(messageId)
      dispatch({ type: "DELETE_MESSAGE", payload: messageId })
    } catch (error) {
      const errorMessage = error instanceof ApiError ? error.message : "Failed to delete message"
      dispatch({ type: "SET_ERROR", payload: errorMessage })
    }
  }, [])

const addReaction = useCallback(
    (messageId: string, emoji: string) => {
      const message = state.messages.find((m) => m.id === messageId)
      if (!message) return

const existingReaction = message.reactions?.find((r) => r.emoji === emoji && r.userId === state.currentUser.id)

let newReactions = message.reactions || []

if (existingReaction) {
        newReactions = newReactions.filter((r) => !(r.emoji === emoji && r.userId === state.currentUser.id))
      } else {
        newReactions = [...newReactions, { emoji, userId: state.currentUser.id, userName: state.currentUser.name }]
      }

dispatch({
        type: "UPDATE_MESSAGE",
        payload: {
          id: messageId,
          updates: { reactions: newReactions },
        },
      })
    },
    [state.messages, state.currentUser],
  )

const setActiveChat = useCallback((chat: Chat | null) => {
    dispatch({ type: "SET_ACTIVE_CHAT", payload: chat })
    if (chat) {
      loadMessages(chat.id)
    }
  }, [])

const loadMessages = useCallback(async (chatId: string) => {
    dispatch({ type: "SET_LOADING", payload: true })
    try {
      const messages = await apiService.getMessages(chatId)
      dispatch({ type: "SET_MESSAGES", payload: messages })
    } catch (error) {
      const errorMessage = error instanceof ApiError ? error.message : "Failed to load messages"
      dispatch({ type: "SET_ERROR", payload: errorMessage })
    } finally {
      dispatch({ type: "SET_LOADING", payload: false })
    }
  }, [])

const loadChats = useCallback(async () => {
    dispatch({ type: "SET_LOADING", payload: true })
    try {
      // For demo purposes, use sample data
      // const chats = await apiService.getChats()
      dispatch({ type: "SET_CHATS", payload: sampleChats })
    } catch (error) {
      const errorMessage = error instanceof ApiError ? error.message : "Failed to load chats"
      dispatch({ type: "SET_ERROR", payload: errorMessage })
    } finally {
      dispatch({ type: "SET_LOADING", payload: false })
    }
  }, [])

const updateSettings = useCallback((settings: Partial<UserSettings>) => {
    dispatch({ type: "UPDATE_SETTINGS", payload: settings })
  }, [])

const clearError = useCallback(() => {
    dispatch({ type: "SET_ERROR", payload: null })
  }, [])

// Initialize data on mount
  useEffect(() => {
    loadChats()
  }, [loadChats])

const contextValue: ChatContextType = {
    ...state,
    sendMessage,
    editMessage,
    deleteMessage,
    addReaction,
    setActiveChat,
    loadMessages,
    loadChats,
    updateSettings,
    clearError,
  }

return <ChatContext.Provider value={contextValue}>{children}</ChatContext.Provider>
}
[V0_FILE]plaintext:file="contexts/chat.context" isQuickEdit="true"
"use client"