Spaces:

cnmksjs
/

chatweb

Build error

App Files Files Community

cnmksjs commited on Jul 6

Commit

e3eb984

verified ·

1 Parent(s): a9120e8

Upload 60 files

Browse files

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

.dockerignore +21 -0
Dockerfile +40 -0
client/.env.example +4 -0
client/index.html +13 -0
client/package.json +57 -0
client/postcss.config.js +6 -0
client/src/App.tsx +89 -0
client/src/components/LoadingSpinner.tsx +24 -0
client/src/components/ProtectedRoute.tsx +31 -0
client/src/components/chat/ChatSidebar.tsx +176 -0
client/src/components/chat/ChatWindow.tsx +255 -0
client/src/components/ui/alert.tsx +59 -0
client/src/components/ui/avatar.tsx +48 -0
client/src/components/ui/badge.tsx +36 -0
client/src/components/ui/button.tsx +56 -0
client/src/components/ui/card.tsx +71 -0
client/src/components/ui/input.tsx +25 -0
client/src/components/ui/label.tsx +24 -0
client/src/components/ui/scroll-area.tsx +46 -0
client/src/components/ui/separator.tsx +29 -0
client/src/components/ui/tabs.tsx +53 -0
client/src/components/ui/textarea.tsx +24 -0
client/src/components/ui/toaster.tsx +135 -0
client/src/index.css +123 -0
client/src/lib/utils.ts +190 -0
client/src/main.tsx +13 -0
client/src/pages/AdminPage.tsx +304 -0
client/src/pages/ChatPage.tsx +59 -0
client/src/pages/LoginPage.tsx +109 -0
client/src/pages/ProfilePage.tsx +173 -0
client/src/pages/RegisterPage.tsx +204 -0
client/src/services/api.ts +182 -0
client/src/services/authService.ts +62 -0
client/src/services/chatService.ts +136 -0
client/src/services/socketService.ts +198 -0
client/src/store/authStore.ts +130 -0
client/src/store/chatStore.ts +285 -0
client/src/vite-env.d.ts +10 -0
client/tailwind.config.js +76 -0
client/tsconfig.json +31 -0
client/tsconfig.node.json +10 -0
client/vite.config.ts +27 -0
package.json +41 -0
server/.env.example +50 -0
server/package.json +70 -0
server/prisma/schema.prisma +209 -0
server/src/config/database.ts +69 -0
server/src/index.ts +157 -0
server/src/middleware/auth.ts +158 -0
server/src/middleware/errorHandler.ts +104 -0

.dockerignore ADDED Viewed

	@@ -0,0 +1,21 @@

+# Ignore node modules and build output
+node_modules
+**/node_modules
+# Logs
+npm-debug.log
+*.log
+# Git
+.git
+.gitignore
+# dotenv files
+.env
+*.env
+# IDEs
+.vscode
+# local uploads
+server/uploads

Dockerfile ADDED Viewed

	@@ -0,0 +1,40 @@

+# Multi-stage build for ChatApp
+# ----- Build Stage -----
+FROM node:18 AS builder
+WORKDIR /app
+# Install root dependencies and workspaces
+COPY package.json package-lock.json* ./
+COPY client/package.json ./client/package.json
+COPY server/package.json ./server/package.json
+RUN npm install
+# Copy source code
+COPY . .
+# Build client and server
+RUN npm run build
+# Remove development dependencies to reduce size
+RUN npm prune --omit=dev --workspaces
+# ----- Production Stage -----
+FROM node:18-alpine AS runner
+WORKDIR /app
+# Copy built application from builder
+COPY --from=builder /app/package.json ./
+COPY --from=builder /app/client/package.json ./client/package.json
+COPY --from=builder /app/server/package.json ./server/package.json
+COPY --from=builder /app/client/dist ./client/dist
+COPY --from=builder /app/server/dist ./server/dist
+COPY --from=builder /app/client/node_modules ./client/node_modules
+COPY --from=builder /app/server/node_modules ./server/node_modules
+ENV NODE_ENV=production
+ENV PORT=3001
+EXPOSE 3001
+CMD ["node", "server/dist/index.js"]

client/.env.example ADDED Viewed

	@@ -0,0 +1,4 @@

+VITE_API_URL=http://localhost:3001
+VITE_SUPABASE_URL=your_supabase_url
+VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
+VITE_SOCKET_URL=http://localhost:3001

client/index.html ADDED Viewed

	@@ -0,0 +1,13 @@

+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ChatApp - 现代化聊天应用</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

client/package.json ADDED Viewed

	@@ -0,0 +1,57 @@

+{
+  "name": "chat-app-client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.1",
+    "socket.io-client": "^4.7.4",
+    "zustand": "^4.4.7",
+    "@supabase/supabase-js": "^2.38.4",
+    "axios": "^1.6.2",
+    "lucide-react": "^0.294.0",
+    "clsx": "^2.0.0",
+    "tailwind-merge": "^2.0.0",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toast": "^1.2.4",
+    "class-variance-authority": "^0.7.0",
+    "react-hook-form": "^7.48.2",
+    "@hookform/resolvers": "^3.3.2",
+    "zod": "^3.22.4",
+    "date-fns": "^2.30.0",
+    "emoji-picker-react": "^4.5.16"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "@vitejs/plugin-react": "^4.1.1",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0",
+    "vitest": "^0.34.6"
+  }
+}

client/postcss.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

client/src/App.tsx ADDED Viewed

	@@ -0,0 +1,89 @@

+import { Routes, Route, Navigate } from 'react-router-dom'
+import { useEffect } from 'react'
+import { useAuthStore } from './store/authStore'
+import { Toaster } from './components/ui/toaster'
+// Pages
+import LoginPage from './pages/LoginPage'
+import RegisterPage from './pages/RegisterPage'
+import ChatPage from './pages/ChatPage'
+import AdminPage from './pages/AdminPage'
+import ProfilePage from './pages/ProfilePage'
+// Components
+import ProtectedRoute from './components/ProtectedRoute'
+import LoadingSpinner from './components/LoadingSpinner'
+function App() {
+  const { user, loading, checkAuth } = useAuthStore()
+  useEffect(() => {
+    checkAuth()
+  }, [checkAuth])
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    )
+  }
+  return (
+    <div className="min-h-screen bg-background">
+      <Routes>
+        {/* Public routes */}
+        <Route
+          path="/login"
+          element={user ? <Navigate to="/chat" replace /> : <LoginPage />}
+        />
+        <Route
+          path="/register"
+          element={user ? <Navigate to="/chat" replace /> : <RegisterPage />}
+        />
+        {/* Protected routes */}
+        <Route
+          path="/chat/*"
+          element={
+            <ProtectedRoute>
+              <ChatPage />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/profile"
+          element={
+            <ProtectedRoute>
+              <ProfilePage />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/admin/*"
+          element={
+            <ProtectedRoute requireAdmin>
+              <AdminPage />
+            </ProtectedRoute>
+          }
+        />
+        {/* Default redirect */}
+        <Route
+          path="/"
+          element={<Navigate to={user ? "/chat" : "/login"} replace />}
+        />
+        {/* 404 fallback */}
+        <Route
+          path="*"
+          element={<Navigate to={user ? "/chat" : "/login"} replace />}
+        />
+      </Routes>
+      <Toaster />
+    </div>
+  )
+}
+export default App

client/src/components/LoadingSpinner.tsx ADDED Viewed

	@@ -0,0 +1,24 @@

+import { cn } from '@/lib/utils'
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+}
+export default function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-6 h-6',
+    lg: 'w-8 h-8'
+  }
+  return (
+    <div
+      className={cn(
+        'animate-spin rounded-full border-2 border-gray-300 border-t-blue-600',
+        sizeClasses[size],
+        className
+      )}
+    />
+  )
+}

client/src/components/ProtectedRoute.tsx ADDED Viewed

	@@ -0,0 +1,31 @@

+import { ReactNode } from 'react'
+import { Navigate } from 'react-router-dom'
+import { useAuthStore } from '@/store/authStore'
+import LoadingSpinner from './LoadingSpinner'
+interface ProtectedRouteProps {
+  children: ReactNode
+  requireAdmin?: boolean
+}
+export default function ProtectedRoute({ children, requireAdmin = false }: ProtectedRouteProps) {
+  const { user, loading } = useAuthStore()
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    )
+  }
+  if (!user) {
+    return <Navigate to="/login" replace />
+  }
+  if (requireAdmin && !user.isAdmin) {
+    return <Navigate to="/chat" replace />
+  }
+  return <>{children}</>
+}

client/src/components/chat/ChatSidebar.tsx ADDED Viewed

	@@ -0,0 +1,176 @@

+import { useState } from 'react'
+import { useChatStore } from '@/store/chatStore'
+import { useAuthStore } from '@/store/authStore'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Badge } from '@/components/ui/badge'
+import { ScrollArea } from '@/components/ui/scroll-area'
+// import { Separator } from '@/components/ui/separator'
+import {
+  Search,
+  Plus,
+  Settings,
+  MessageSquare,
+  Users,
+  // MoreVertical
+} from 'lucide-react'
+import { formatTime, getInitials } from '@/lib/utils'
+export default function ChatSidebar() {
+  const { user } = useAuthStore()
+  const { chats, currentChat, selectChat, loading } = useChatStore()
+  const [searchQuery, setSearchQuery] = useState('')
+  const filteredChats = chats.filter(chat => {
+    if (!searchQuery) return true
+    const searchLower = searchQuery.toLowerCase()
+    // Search by chat name
+    if (chat.name?.toLowerCase().includes(searchLower)) return true
+    // Search by participant names (for direct chats)
+    if (chat.type === 'direct') {
+      const otherParticipant = chat.participants.find(p => p.userId !== user?.id)
+      if (otherParticipant?.user.displayName?.toLowerCase().includes(searchLower)) return true
+    }
+    return false
+  })
+  const getChatDisplayName = (chat: any) => {
+    if (chat.type === 'group') {
+      return chat.name || 'Unnamed Group'
+    } else {
+      const otherParticipant = chat.participants.find((p: any) => p.userId !== user?.id)
+      return otherParticipant?.user.displayName || 'Unknown User'
+    }
+  }
+  const getChatAvatar = (chat: any) => {
+    if (chat.type === 'group') {
+      return chat.avatar
+    } else {
+      const otherParticipant = chat.participants.find((p: any) => p.userId !== user?.id)
+      return otherParticipant?.user.avatar
+    }
+  }
+  return (
+    <div className="flex flex-col h-full bg-background">
+      {/* Header */}
+      <div className="p-4 border-b border-border">
+        <div className="flex items-center justify-between mb-4">
+          <h1 className="text-xl font-semibold">Chats</h1>
+          <div className="flex items-center space-x-2">
+            <Button variant="ghost" size="icon">
+              <Plus className="w-4 h-4" />
+            </Button>
+            <Button variant="ghost" size="icon">
+              <Settings className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+        {/* Search */}
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <Input
+            placeholder="Search chats..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-10"
+          />
+        </div>
+      </div>
+      {/* Chat List */}
+      <ScrollArea className="flex-1">
+        <div className="p-2">
+          {loading ? (
+            <div className="flex items-center justify-center py-8">
+              <div className="text-muted-foreground">Loading chats...</div>
+            </div>
+          ) : filteredChats.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-8 text-center">
+              <MessageSquare className="w-12 h-12 text-muted-foreground mb-4" />
+              <h3 className="font-medium mb-2">No chats found</h3>
+              <p className="text-sm text-muted-foreground mb-4">
+                {searchQuery ? 'Try a different search term' : 'Start a new conversation'}
+              </p>
+              <Button size="sm">
+                <Plus className="w-4 h-4 mr-2" />
+                New Chat
+              </Button>
+            </div>
+          ) : (
+            filteredChats.map((chat) => (
+              <div
+                key={chat.id}
+                onClick={() => selectChat(chat.id)}
+                className={`
+                  flex items-center p-3 rounded-lg cursor-pointer transition-colors
+                  hover:bg-accent hover:text-accent-foreground
+                  ${currentChat?.id === chat.id ? 'bg-accent text-accent-foreground' : ''}
+                `}
+              >
+                <div className="relative">
+                  <Avatar className="w-12 h-12">
+                    <AvatarImage src={getChatAvatar(chat)} />
+                    <AvatarFallback>
+                      {chat.type === 'group' ? (
+                        <Users className="w-6 h-6" />
+                      ) : (
+                        getInitials(getChatDisplayName(chat))
+                      )}
+                    </AvatarFallback>
+                  </Avatar>
+                  {/* Online indicator for direct chats */}
+                  {chat.type === 'direct' && (
+                    <div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-background rounded-full" />
+                  )}
+                </div>
+                <div className="flex-1 ml-3 min-w-0">
+                  <div className="flex items-center justify-between">
+                    <h3 className="font-medium truncate">
+                      {getChatDisplayName(chat)}
+                    </h3>
+                    <div className="flex items-center space-x-2">
+                      {chat.lastMessage && (
+                        <span className="text-xs text-muted-foreground">
+                          {formatTime(chat.lastMessage.createdAt)}
+                        </span>
+                      )}
+                      {chat.unreadCount > 0 && (
+                        <Badge variant="default" className="text-xs">
+                          {chat.unreadCount > 99 ? '99+' : chat.unreadCount}
+                        </Badge>
+                      )}
+                    </div>
+                  </div>
+                  {chat.lastMessage && (
+                    <p className="text-sm text-muted-foreground truncate mt-1">
+                      {chat.lastMessage.type === 'text'
+                        ? chat.lastMessage.content
+                        : `📎 ${chat.lastMessage.type}`
+                      }
+                    </p>
+                  )}
+                  {chat.type === 'group' && (
+                    <p className="text-xs text-muted-foreground mt-1">
+                      {chat.participants.length} members
+                    </p>
+                  )}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}

client/src/components/chat/ChatWindow.tsx ADDED Viewed

	@@ -0,0 +1,255 @@

+import { useState, useRef, useEffect } from 'react'
+import { useChatStore } from '@/store/chatStore'
+import { useAuthStore } from '@/store/authStore'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { ScrollArea } from '@/components/ui/scroll-area'
+// import { Separator } from '@/components/ui/separator'
+import {
+  Send,
+  Paperclip,
+  Smile,
+  Phone,
+  Video,
+  MoreVertical,
+  Users,
+  Info
+} from 'lucide-react'
+import { formatTime, getInitials } from '@/lib/utils'
+export default function ChatWindow() {
+  const { user } = useAuthStore()
+  const { currentChat, messages, sendMessage, loading } = useChatStore()
+  const [messageText, setMessageText] = useState('')
+  // const [isTyping, setIsTyping] = useState(false)
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const chatMessages = currentChat ? messages[currentChat.id] || [] : []
+  useEffect(() => {
+    scrollToBottom()
+  }, [chatMessages])
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }
+  const handleSendMessage = async () => {
+    if (!messageText.trim() || !currentChat) return
+    try {
+      await sendMessage(currentChat.id, messageText.trim())
+      setMessageText('')
+      inputRef.current?.focus()
+    } catch (error) {
+      console.error('Failed to send message:', error)
+    }
+  }
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSendMessage()
+    }
+  }
+  const getChatDisplayName = () => {
+    if (!currentChat) return ''
+    if (currentChat.type === 'group') {
+      return currentChat.name || 'Unnamed Group'
+    } else {
+      const otherParticipant = currentChat.participants.find(p => p.userId !== user?.id)
+      return otherParticipant?.user.displayName || 'Unknown User'
+    }
+  }
+  const getChatAvatar = () => {
+    if (!currentChat) return undefined
+    if (currentChat.type === 'group') {
+      return currentChat.avatar
+    } else {
+      const otherParticipant = currentChat.participants.find(p => p.userId !== user?.id)
+      return otherParticipant?.user.avatar
+    }
+  }
+  const isMessageFromCurrentUser = (message: any) => {
+    return message.senderId === user?.id
+  }
+  if (!currentChat) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <div className="text-center">
+          <div className="text-6xl mb-4">💬</div>
+          <h2 className="text-2xl font-semibold mb-2">Welcome to ChatApp</h2>
+          <p className="text-muted-foreground">
+            Select a chat to start messaging
+          </p>
+        </div>
+      </div>
+    )
+  }
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-border">
+        <div className="flex items-center space-x-3">
+          <Avatar className="w-10 h-10">
+            <AvatarImage src={getChatAvatar()} />
+            <AvatarFallback>
+              {currentChat.type === 'group' ? (
+                <Users className="w-5 h-5" />
+              ) : (
+                getInitials(getChatDisplayName())
+              )}
+            </AvatarFallback>
+          </Avatar>
+          <div>
+            <h2 className="font-semibold">{getChatDisplayName()}</h2>
+            <p className="text-sm text-muted-foreground">
+              {currentChat.type === 'group'
+                ? `${currentChat.participants.length} members`
+                : 'Online'
+              }
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button variant="ghost" size="icon">
+            <Phone className="w-4 h-4" />
+          </Button>
+          <Button variant="ghost" size="icon">
+            <Video className="w-4 h-4" />
+          </Button>
+          <Button variant="ghost" size="icon">
+            <Info className="w-4 h-4" />
+          </Button>
+          <Button variant="ghost" size="icon">
+            <MoreVertical className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+      {/* Messages */}
+      <ScrollArea className="flex-1 p-4">
+        <div className="space-y-4">
+          {loading ? (
+            <div className="flex items-center justify-center py-8">
+              <div className="text-muted-foreground">Loading messages...</div>
+            </div>
+          ) : chatMessages.length === 0 ? (
+            <div className="flex items-center justify-center py-8">
+              <div className="text-center">
+                <div className="text-4xl mb-4">👋</div>
+                <p className="text-muted-foreground">
+                  No messages yet. Start the conversation!
+                </p>
+              </div>
+            </div>
+          ) : (
+            chatMessages.map((message, index) => {
+              const isFromCurrentUser = isMessageFromCurrentUser(message)
+              const showAvatar = !isFromCurrentUser && (
+                index === 0 ||
+                chatMessages[index - 1]?.senderId !== message.senderId
+              )
+              return (
+                <div
+                  key={message.id}
+                  className={`flex ${isFromCurrentUser ? 'justify-end' : 'justify-start'}`}
+                >
+                  <div className={`flex max-w-[70%] ${isFromCurrentUser ? 'flex-row-reverse' : 'flex-row'}`}>
+                    {showAvatar && !isFromCurrentUser && (
+                      <Avatar className="w-8 h-8 mr-2">
+                        <AvatarImage src={message.sender?.avatar} />
+                        <AvatarFallback>
+                          {getInitials(message.sender?.displayName || 'U')}
+                        </AvatarFallback>
+                      </Avatar>
+                    )}
+                    <div className={`${!showAvatar && !isFromCurrentUser ? 'ml-10' : ''}`}>
+                      <div
+                        className={`
+                          px-4 py-2 rounded-lg
+                          ${isFromCurrentUser
+                            ? 'bg-primary text-primary-foreground'
+                            : 'bg-muted'
+                          }
+                        `}
+                      >
+                        {!isFromCurrentUser && showAvatar && currentChat.type === 'group' && (
+                          <p className="text-xs font-medium mb-1 opacity-70">
+                            {message.sender?.displayName}
+                          </p>
+                        )}
+                        <p className="text-sm">{message.content}</p>
+                        <div className={`flex items-center justify-end mt-1 space-x-1`}>
+                          <span className="text-xs opacity-70">
+                            {formatTime(message.createdAt)}
+                          </span>
+                          {isFromCurrentUser && (
+                            <span className="text-xs opacity-70">
+                              {/* message delivery status could be rendered here */}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )
+            })
+          )}
+          <div ref={messagesEndRef} />
+        </div>
+      </ScrollArea>
+      {/* Message Input */}
+      <div className="p-4 border-t border-border">
+        <div className="flex items-center space-x-2">
+          <Button variant="ghost" size="icon">
+            <Paperclip className="w-4 h-4" />
+          </Button>
+          <div className="flex-1 relative">
+            <Input
+              ref={inputRef}
+              placeholder="Type a message..."
+              value={messageText}
+              onChange={(e) => setMessageText(e.target.value)}
+              onKeyPress={handleKeyPress}
+              className="pr-10"
+            />
+            <Button
+              variant="ghost"
+              size="icon"
+              className="absolute right-1 top-1/2 transform -translate-y-1/2"
+            >
+              <Smile className="w-4 h-4" />
+            </Button>
+          </div>
+          <Button
+            onClick={handleSendMessage}
+            disabled={!messageText.trim()}
+            size="icon"
+          >
+            <Send className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/components/ui/alert.tsx ADDED Viewed

	@@ -0,0 +1,59 @@

+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+export { Alert, AlertTitle, AlertDescription }

client/src/components/ui/avatar.tsx ADDED Viewed

	@@ -0,0 +1,48 @@

+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import { cn } from "@/lib/utils"
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+export { Avatar, AvatarImage, AvatarFallback }

client/src/components/ui/badge.tsx ADDED Viewed

	@@ -0,0 +1,36 @@

+import * 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<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+export { Badge, badgeVariants }

client/src/components/ui/button.tsx ADDED Viewed

	@@ -0,0 +1,56 @@

+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<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+export { Button, buttonVariants }

client/src/components/ui/card.tsx ADDED Viewed

	@@ -0,0 +1,71 @@

+import * as React from "react"
+import { cn } from "@/lib/utils"
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+))
+CardHeader.displayName = "CardHeader"
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+))
+CardFooter.displayName = "CardFooter"
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

client/src/components/ui/input.tsx ADDED Viewed

	@@ -0,0 +1,25 @@

+import * as React from "react"
+import { cn } from "@/lib/utils"
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+export { Input }

client/src/components/ui/label.tsx ADDED Viewed

	@@ -0,0 +1,24 @@

+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+export { Label }

client/src/components/ui/scroll-area.tsx ADDED Viewed

	@@ -0,0 +1,46 @@

+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<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+export { ScrollArea, ScrollBar }

client/src/components/ui/separator.tsx ADDED Viewed

	@@ -0,0 +1,29 @@

+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import { cn } from "@/lib/utils"
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+export { Separator }

client/src/components/ui/tabs.tsx ADDED Viewed

	@@ -0,0 +1,53 @@

+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { cn } from "@/lib/utils"
+const Tabs = TabsPrimitive.Root
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+export { Tabs, TabsList, TabsTrigger, TabsContent }

client/src/components/ui/textarea.tsx ADDED Viewed

	@@ -0,0 +1,24 @@

+import * as React from "react"
+import { cn } from "@/lib/utils"
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+export { Textarea }

client/src/components/ui/toaster.tsx ADDED Viewed

	@@ -0,0 +1,135 @@

+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+import { cn } from "@/lib/utils"
+const ToastProvider = ToastPrimitives.Provider
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
+export function Toaster() {
+  return (
+    <ToastProvider>
+      <ToastViewport />
+    </ToastProvider>
+  )
+}

client/src/index.css ADDED Viewed

	@@ -0,0 +1,123 @@

+@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%;
+    --secondary-foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 84% 4.9%;
+    --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;
+  }
+  .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 84% 4.9%;
+    --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% 94.1%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}
+/* Chat message animations */
+.message-enter {
+  opacity: 0;
+  transform: translateY(10px);
+}
+.message-enter-active {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 200ms, transform 200ms;
+}
+/* Typing indicator animation */
+.typing-dots {
+  display: inline-block;
+}
+.typing-dots span {
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: hsl(var(--muted-foreground));
+  margin: 0 1px;
+  animation: typing 1.4s infinite ease-in-out;
+}
+.typing-dots span:nth-child(1) {
+  animation-delay: -0.32s;
+}
+.typing-dots span:nth-child(2) {
+  animation-delay: -0.16s;
+}
+@keyframes typing {
+  0%, 80%, 100% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}

client/src/lib/utils.ts ADDED Viewed

	@@ -0,0 +1,190 @@

+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+export function formatDate(date: Date | string): string {
+  const d = new Date(date)
+  const now = new Date()
+  const diff = now.getTime() - d.getTime()
+  // Less than 1 minute
+  if (diff < 60000) {
+    return 'Just now'
+  }
+  // Less than 1 hour
+  if (diff < 3600000) {
+    const minutes = Math.floor(diff / 60000)
+    return `${minutes}m ago`
+  }
+  // Less than 24 hours
+  if (diff < 86400000) {
+    const hours = Math.floor(diff / 3600000)
+    return `${hours}h ago`
+  }
+  // Less than 7 days
+  if (diff < 604800000) {
+    const days = Math.floor(diff / 86400000)
+    return `${days}d ago`
+  }
+  // More than 7 days
+  return d.toLocaleDateString()
+}
+export function formatTime(date: Date | string): string {
+  const d = new Date(date)
+  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+export function formatFileSize(bytes: number): string {
+  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 parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+export function getFileIcon(mimeType: string): string {
+  if (mimeType.startsWith('image/')) return '🖼️'
+  if (mimeType.startsWith('video/')) return '🎥'
+  if (mimeType.startsWith('audio/')) return '🎵'
+  if (mimeType.includes('pdf')) return '📄'
+  if (mimeType.includes('word')) return '📝'
+  if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return '📊'
+  if (mimeType.includes('powerpoint') || mimeType.includes('presentation')) return '📽️'
+  if (mimeType.includes('zip') || mimeType.includes('rar') || mimeType.includes('archive')) return '📦'
+  return '📎'
+}
+export function generateAvatar(name: string): string {
+  const colors = [
+    '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7',
+    '#DDA0DD', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E9'
+  ]
+  const initials = name
+    .split(' ')
+    .map(word => word[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2)
+  const colorIndex = name.charCodeAt(0) % colors.length
+  const color = colors[colorIndex]
+  return `data:image/svg+xml,${encodeURIComponent(`
+    <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="20" cy="20" r="20" fill="${color}"/>
+      <text x="20" y="25" text-anchor="middle" fill="white" font-family="Arial" font-size="14" font-weight="bold">
+        ${initials}
+      </text>
+    </svg>
+  `)}`
+}
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout | null = null
+  return (...args: Parameters<T>) => {
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+    timeout = setTimeout(() => {
+      func(...args)
+    }, wait)
+  }
+}
+export function throttle<T extends (...args: any[]) => any>(
+  func: T,
+  limit: number
+): (...args: Parameters<T>) => void {
+  let inThrottle: boolean
+  return (...args: Parameters<T>) => {
+    if (!inThrottle) {
+      func(...args)
+      inThrottle = true
+      setTimeout(() => inThrottle = false, limit)
+    }
+  }
+}
+export function isValidEmail(email: string): boolean {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return emailRegex.test(email)
+}
+export function isValidUsername(username: string): boolean {
+  const usernameRegex = /^[a-zA-Z0-9_]{3,20}$/
+  return usernameRegex.test(username)
+}
+export function truncateText(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text
+  return text.slice(0, maxLength) + '...'
+}
+export function copyToClipboard(text: string): Promise<void> {
+  if (navigator.clipboard) {
+    return navigator.clipboard.writeText(text)
+  } else {
+    // Fallback for older browsers
+    const textArea = document.createElement('textarea')
+    textArea.value = text
+    document.body.appendChild(textArea)
+    textArea.focus()
+    textArea.select()
+    try {
+      document.execCommand('copy')
+      return Promise.resolve()
+    } catch (err) {
+      return Promise.reject(err)
+    } finally {
+      document.body.removeChild(textArea)
+    }
+  }
+}
+export function downloadFile(url: string, filename: string): void {
+  const link = document.createElement('a')
+  link.href = url
+  link.download = filename
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+export function isImageFile(file: File): boolean {
+  return file.type.startsWith('image/')
+}
+export function isVideoFile(file: File): boolean {
+  return file.type.startsWith('video/')
+}
+export function isAudioFile(file: File): boolean {
+  return file.type.startsWith('audio/')
+}
+export function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .map(word => word[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2)
+}

client/src/main.tsx ADDED Viewed

	@@ -0,0 +1,13 @@

+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App.tsx'
+import './index.css'
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+)

client/src/pages/AdminPage.tsx ADDED Viewed

	@@ -0,0 +1,304 @@

+import { useState, useEffect } from 'react'
+import { Routes, Route, Link, useLocation } from 'react-router-dom'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+// The following components are currently unused but kept for future
+// admin interface enhancements.
+// import { Button } from '@/components/ui/button'
+// import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+// import { Badge } from '@/components/ui/badge'
+import {
+  Users,
+  MessageSquare,
+  Settings,
+  BarChart3,
+  Shield,
+  Activity,
+  Database,
+  Server
+} from 'lucide-react'
+// Mock data - replace with real API calls
+const mockStats = {
+  totalUsers: 1234,
+  activeUsers: 567,
+  totalChats: 890,
+  totalMessages: 12345,
+  storageUsed: 2.5, // GB
+  serverUptime: 99.9 // %
+}
+export default function AdminPage() {
+  // Stats state will be updated once API integration is implemented
+  const [stats] = useState(mockStats)
+  const location = useLocation()
+  useEffect(() => {
+    // Load admin stats
+    // TODO: Implement API call
+  }, [])
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="border-b">
+        <div className="flex h-16 items-center px-6">
+          <Shield className="w-6 h-6 mr-2" />
+          <h1 className="text-xl font-semibold">Admin Panel</h1>
+        </div>
+      </div>
+      <div className="flex">
+        {/* Sidebar */}
+        <div className="w-64 border-r min-h-screen p-4">
+          <nav className="space-y-2">
+            <Link
+              to="/admin"
+              className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium ${
+                location.pathname === '/admin'
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+              }`}
+            >
+              <BarChart3 className="w-4 h-4" />
+              <span>Dashboard</span>
+            </Link>
+            <Link
+              to="/admin/users"
+              className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium ${
+                location.pathname === '/admin/users'
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+              }`}
+            >
+              <Users className="w-4 h-4" />
+              <span>Users</span>
+            </Link>
+            <Link
+              to="/admin/chats"
+              className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium ${
+                location.pathname === '/admin/chats'
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+              }`}
+            >
+              <MessageSquare className="w-4 h-4" />
+              <span>Chats</span>
+            </Link>
+            <Link
+              to="/admin/settings"
+              className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium ${
+                location.pathname === '/admin/settings'
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+              }`}
+            >
+              <Settings className="w-4 h-4" />
+              <span>Settings</span>
+            </Link>
+          </nav>
+        </div>
+        {/* Main content */}
+        <div className="flex-1 p-6">
+          <Routes>
+            <Route path="/" element={<AdminDashboard stats={stats} />} />
+            <Route path="/users" element={<AdminUsers />} />
+            <Route path="/chats" element={<AdminChats />} />
+            <Route path="/settings" element={<AdminSettings />} />
+          </Routes>
+        </div>
+      </div>
+    </div>
+  )
+}
+function AdminDashboard({ stats }: { stats: typeof mockStats }) {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold">Dashboard</h2>
+        <p className="text-muted-foreground">
+          Overview of your ChatApp instance
+        </p>
+      </div>
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Users</CardTitle>
+            <Users className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats.totalUsers.toLocaleString()}</div>
+            <p className="text-xs text-muted-foreground">
+              +12% from last month
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Active Users</CardTitle>
+            <Activity className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats.activeUsers.toLocaleString()}</div>
+            <p className="text-xs text-muted-foreground">
+              Currently online
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Messages</CardTitle>
+            <MessageSquare className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats.totalMessages.toLocaleString()}</div>
+            <p className="text-xs text-muted-foreground">
+              +5% from last week
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Storage Used</CardTitle>
+            <Database className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats.storageUsed} GB</div>
+            <p className="text-xs text-muted-foreground">
+              Of 10 GB available
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Server Uptime</CardTitle>
+            <Server className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats.serverUptime}%</div>
+            <p className="text-xs text-muted-foreground">
+              Last 30 days
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Chats</CardTitle>
+            <MessageSquare className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats.totalChats.toLocaleString()}</div>
+            <p className="text-xs text-muted-foreground">
+              Groups and direct messages
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+      {/* Recent Activity */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Recent Activity</CardTitle>
+          <CardDescription>
+            Latest events in your ChatApp instance
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            <div className="flex items-center space-x-4">
+              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+              <div className="flex-1">
+                <p className="text-sm">New user registered: john_doe</p>
+                <p className="text-xs text-muted-foreground">2 minutes ago</p>
+              </div>
+            </div>
+            <div className="flex items-center space-x-4">
+              <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+              <div className="flex-1">
+                <p className="text-sm">New group created: "Project Team"</p>
+                <p className="text-xs text-muted-foreground">5 minutes ago</p>
+              </div>
+            </div>
+            <div className="flex items-center space-x-4">
+              <div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
+              <div className="flex-1">
+                <p className="text-sm">Server maintenance completed</p>
+                <p className="text-xs text-muted-foreground">1 hour ago</p>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+function AdminUsers() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold">User Management</h2>
+        <p className="text-muted-foreground">
+          Manage users and their permissions
+        </p>
+      </div>
+      <Card>
+        <CardContent className="p-6">
+          <p className="text-center text-muted-foreground">
+            User management interface coming soon...
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+function AdminChats() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold">Chat Management</h2>
+        <p className="text-muted-foreground">
+          Monitor and manage chats and groups
+        </p>
+      </div>
+      <Card>
+        <CardContent className="p-6">
+          <p className="text-center text-muted-foreground">
+            Chat management interface coming soon...
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+function AdminSettings() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold">System Settings</h2>
+        <p className="text-muted-foreground">
+          Configure your ChatApp instance
+        </p>
+      </div>
+      <Card>
+        <CardContent className="p-6">
+          <p className="text-center text-muted-foreground">
+            Settings interface coming soon...
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

client/src/pages/ChatPage.tsx ADDED Viewed

	@@ -0,0 +1,59 @@

+import { useEffect } from 'react'
+import { useAuthStore } from '@/store/authStore'
+import { useChatStore } from '@/store/chatStore'
+import { socketService } from '@/services/socketService'
+import ChatSidebar from '@/components/chat/ChatSidebar'
+import ChatWindow from '@/components/chat/ChatWindow'
+import { Separator } from '@/components/ui/separator'
+export default function ChatPage() {
+  const { user, token } = useAuthStore()
+  const { loadChats, currentChat } = useChatStore()
+  useEffect(() => {
+    if (token && user) {
+      // Connect to socket
+      socketService.connect(token).then(() => {
+        console.log('Socket connected successfully')
+      }).catch((error) => {
+        console.error('Socket connection failed:', error)
+      })
+      // Load initial data
+      loadChats()
+      // Cleanup on unmount
+      return () => {
+        socketService.disconnect()
+      }
+    }
+  }, [token, user, loadChats])
+  return (
+    <div className="flex h-screen bg-background">
+      {/* Sidebar */}
+      <div className="w-80 border-r border-border">
+        <ChatSidebar />
+      </div>
+      <Separator orientation="vertical" />
+      {/* Main chat area */}
+      <div className="flex-1 flex flex-col">
+        {currentChat ? (
+          <ChatWindow />
+        ) : (
+          <div className="flex-1 flex items-center justify-center">
+            <div className="text-center">
+              <div className="text-6xl mb-4">💬</div>
+              <h2 className="text-2xl font-semibold mb-2">Welcome to ChatApp</h2>
+              <p className="text-muted-foreground">
+                Select a chat to start messaging
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

client/src/pages/LoginPage.tsx ADDED Viewed

	@@ -0,0 +1,109 @@

+import { useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { useAuthStore } from '@/store/authStore'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import LoadingSpinner from '@/components/LoadingSpinner'
+import { MessageCircle } from 'lucide-react'
+export default function LoginPage() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const { login, loading, error, clearError } = useAuthStore()
+  const navigate = useNavigate()
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    clearError()
+    try {
+      await login(email, password)
+      navigate('/chat')
+    } catch (error) {
+      // Error is handled by the store
+    }
+  }
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <div className="flex justify-center mb-4">
+            <div className="p-3 bg-blue-600 rounded-full">
+              <MessageCircle className="w-8 h-8 text-white" />
+            </div>
+          </div>
+          <CardTitle className="text-2xl font-bold">Welcome Back</CardTitle>
+          <CardDescription>
+            Sign in to your ChatApp account
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && (
+              <Alert variant="destructive">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="Enter your email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                disabled={loading}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="Enter your password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                disabled={loading}
+              />
+            </div>
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={loading}
+            >
+              {loading ? (
+                <>
+                  <LoadingSpinner size="sm" className="mr-2" />
+                  Signing in...
+                </>
+              ) : (
+                'Sign In'
+              )}
+            </Button>
+          </form>
+          <div className="mt-6 text-center">
+            <p className="text-sm text-gray-600">
+              Don't have an account?{' '}
+              <Link
+                to="/register"
+                className="text-blue-600 hover:text-blue-500 font-medium"
+              >
+                Sign up
+              </Link>
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

client/src/pages/ProfilePage.tsx ADDED Viewed

	@@ -0,0 +1,173 @@

+import { useState } from 'react'
+import { useAuthStore } from '@/store/authStore'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Textarea } from '@/components/ui/textarea'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { getInitials } from '@/lib/utils'
+import { User, Settings } from 'lucide-react'
+export default function ProfilePage() {
+  const { user, updateUser } = useAuthStore()
+  const [isEditing, setIsEditing] = useState(false)
+  const [formData, setFormData] = useState({
+    displayName: user?.displayName || '',
+    bio: user?.bio || '',
+  })
+  const handleSave = () => {
+    if (user) {
+      updateUser(formData)
+      setIsEditing(false)
+    }
+  }
+  const handleCancel = () => {
+    setFormData({
+      displayName: user?.displayName || '',
+      bio: user?.bio || '',
+    })
+    setIsEditing(false)
+  }
+  if (!user) return null
+  return (
+    <div className="min-h-screen bg-background p-6">
+      <div className="max-w-2xl mx-auto space-y-6">
+        <div className="flex items-center space-x-4">
+          <Button variant="ghost" size="icon">
+            <User className="w-5 h-5" />
+          </Button>
+          <h1 className="text-3xl font-bold">Profile</h1>
+        </div>
+        <Card>
+          <CardHeader>
+            <CardTitle>Personal Information</CardTitle>
+            <CardDescription>
+              Manage your account details and preferences
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <div className="flex items-center space-x-4">
+              <Avatar className="w-20 h-20">
+                <AvatarImage src={user.avatar} />
+                <AvatarFallback className="text-lg">
+                  {getInitials(user.displayName)}
+                </AvatarFallback>
+              </Avatar>
+              <div>
+                <Button variant="outline" size="sm">
+                  Change Avatar
+                </Button>
+                <p className="text-sm text-muted-foreground mt-1">
+                  JPG, PNG or GIF. Max size 2MB.
+                </p>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label>Email</Label>
+                <Input value={user.email} disabled />
+              </div>
+              <div className="space-y-2">
+                <Label>Username</Label>
+                <Input value={user.username} disabled />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="displayName">Display Name</Label>
+              <Input
+                id="displayName"
+                value={formData.displayName}
+                onChange={(e) => setFormData(prev => ({ ...prev, displayName: e.target.value }))}
+                disabled={!isEditing}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="bio">Bio</Label>
+              <Textarea
+                id="bio"
+                placeholder="Tell us about yourself..."
+                value={formData.bio}
+                onChange={(e) => setFormData(prev => ({ ...prev, bio: e.target.value }))}
+                disabled={!isEditing}
+                rows={3}
+              />
+            </div>
+            <div className="flex justify-end space-x-2">
+              {isEditing ? (
+                <>
+                  <Button variant="outline" onClick={handleCancel}>
+                    Cancel
+                  </Button>
+                  <Button onClick={handleSave}>
+                    Save Changes
+                  </Button>
+                </>
+              ) : (
+                <Button onClick={() => setIsEditing(true)}>
+                  Edit Profile
+                </Button>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Account Settings</CardTitle>
+            <CardDescription>
+              Security and privacy settings
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <h4 className="font-medium">Change Password</h4>
+                <p className="text-sm text-muted-foreground">
+                  Update your password to keep your account secure
+                </p>
+              </div>
+              <Button variant="outline">
+                Change Password
+              </Button>
+            </div>
+            <div className="flex items-center justify-between">
+              <div>
+                <h4 className="font-medium">Two-Factor Authentication</h4>
+                <p className="text-sm text-muted-foreground">
+                  Add an extra layer of security to your account
+                </p>
+              </div>
+              <Button variant="outline">
+                Enable 2FA
+              </Button>
+            </div>
+            <div className="flex items-center justify-between">
+              <div>
+                <h4 className="font-medium">Privacy Settings</h4>
+                <p className="text-sm text-muted-foreground">
+                  Control who can see your information
+                </p>
+              </div>
+              <Button variant="outline">
+                <Settings className="w-4 h-4 mr-2" />
+                Manage
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

client/src/pages/RegisterPage.tsx ADDED Viewed

	@@ -0,0 +1,204 @@

+import { useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { useAuthStore } from '@/store/authStore'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import LoadingSpinner from '@/components/LoadingSpinner'
+import { MessageCircle } from 'lucide-react'
+export default function RegisterPage() {
+  const [formData, setFormData] = useState({
+    email: '',
+    username: '',
+    displayName: '',
+    password: '',
+    confirmPassword: ''
+  })
+  const [validationError, setValidationError] = useState('')
+  const { register, loading, error, clearError } = useAuthStore()
+  const navigate = useNavigate()
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }))
+    setValidationError('')
+  }
+  const validateForm = () => {
+    if (formData.password !== formData.confirmPassword) {
+      setValidationError('Passwords do not match')
+      return false
+    }
+    if (formData.password.length < 6) {
+      setValidationError('Password must be at least 6 characters long')
+      return false
+    }
+    if (formData.username.length < 3) {
+      setValidationError('Username must be at least 3 characters long')
+      return false
+    }
+    if (!/^[a-zA-Z0-9_]+$/.test(formData.username)) {
+      setValidationError('Username can only contain letters, numbers, and underscores')
+      return false
+    }
+    return true
+  }
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    clearError()
+    setValidationError('')
+    if (!validateForm()) {
+      return
+    }
+    try {
+      await register({
+        email: formData.email,
+        username: formData.username,
+        displayName: formData.displayName,
+        password: formData.password
+      })
+      navigate('/chat')
+    } catch (error) {
+      // Error is handled by the store
+    }
+  }
+  const displayError = validationError || error
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <div className="flex justify-center mb-4">
+            <div className="p-3 bg-blue-600 rounded-full">
+              <MessageCircle className="w-8 h-8 text-white" />
+            </div>
+          </div>
+          <CardTitle className="text-2xl font-bold">Create Account</CardTitle>
+          <CardDescription>
+            Join ChatApp and start messaging
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {displayError && (
+              <Alert variant="destructive">
+                <AlertDescription>{displayError}</AlertDescription>
+              </Alert>
+            )}
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                placeholder="Enter your email"
+                value={formData.email}
+                onChange={handleChange}
+                required
+                disabled={loading}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="username">Username</Label>
+              <Input
+                id="username"
+                name="username"
+                type="text"
+                placeholder="Choose a username"
+                value={formData.username}
+                onChange={handleChange}
+                required
+                disabled={loading}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="displayName">Display Name</Label>
+              <Input
+                id="displayName"
+                name="displayName"
+                type="text"
+                placeholder="Your display name"
+                value={formData.displayName}
+                onChange={handleChange}
+                required
+                disabled={loading}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                placeholder="Create a password"
+                value={formData.password}
+                onChange={handleChange}
+                required
+                disabled={loading}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="confirmPassword">Confirm Password</Label>
+              <Input
+                id="confirmPassword"
+                name="confirmPassword"
+                type="password"
+                placeholder="Confirm your password"
+                value={formData.confirmPassword}
+                onChange={handleChange}
+                required
+                disabled={loading}
+              />
+            </div>
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={loading}
+            >
+              {loading ? (
+                <>
+                  <LoadingSpinner size="sm" className="mr-2" />
+                  Creating account...
+                </>
+              ) : (
+                'Create Account'
+              )}
+            </Button>
+          </form>
+          <div className="mt-6 text-center">
+            <p className="text-sm text-gray-600">
+              Already have an account?{' '}
+              <Link
+                to="/login"
+                className="text-blue-600 hover:text-blue-500 font-medium"
+              >
+                Sign in
+              </Link>
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

client/src/services/api.ts ADDED Viewed

	@@ -0,0 +1,182 @@

+import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
+import { ApiResponse } from '../../../shared/types'
+class ApiService {
+  private api: AxiosInstance
+  constructor() {
+    this.api = axios.create({
+      baseURL: import.meta.env.VITE_API_URL || 'http://localhost:3001',
+      timeout: 10000,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+    // Request interceptor to add auth token
+    this.api.interceptors.request.use(
+      (config) => {
+        const token = this.getToken()
+        if (token) {
+          config.headers.Authorization = `Bearer ${token}`
+        }
+        return config
+      },
+      (error) => {
+        return Promise.reject(error)
+      }
+    )
+    // Response interceptor to handle errors
+    this.api.interceptors.response.use(
+      (response) => {
+        return response
+      },
+      (error) => {
+        if (error.response?.status === 401) {
+          // Token expired or invalid
+          this.clearToken()
+          window.location.href = '/login'
+        }
+        return Promise.reject(this.handleError(error))
+      }
+    )
+  }
+  private getToken(): string | null {
+    try {
+      const authStorage = localStorage.getItem('auth-storage')
+      if (authStorage) {
+        const parsed = JSON.parse(authStorage)
+        return parsed.state?.token || null
+      }
+    } catch (error) {
+      console.error('Error getting token:', error)
+    }
+    return null
+  }
+  private clearToken(): void {
+    try {
+      localStorage.removeItem('auth-storage')
+    } catch (error) {
+      console.error('Error clearing token:', error)
+    }
+  }
+  private handleError(error: any): Error {
+    if (error.response) {
+      // Server responded with error status
+      const message = error.response.data?.message || error.response.data?.error || 'Server error'
+      return new Error(message)
+    } else if (error.request) {
+      // Request was made but no response received
+      return new Error('Network error - please check your connection')
+    } else {
+      // Something else happened
+      return new Error(error.message || 'An unexpected error occurred')
+    }
+  }
+  // Generic request methods
+  async get<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    const response = await this.api.get<ApiResponse<T>>(url, config)
+    if (!response.data.success) {
+      throw new Error(response.data.error || 'Request failed')
+    }
+    return response.data.data!
+  }
+  async post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+    const response = await this.api.post<ApiResponse<T>>(url, data, config)
+    if (!response.data.success) {
+      throw new Error(response.data.error || 'Request failed')
+    }
+    return response.data.data!
+  }
+  async put<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+    const response = await this.api.put<ApiResponse<T>>(url, data, config)
+    if (!response.data.success) {
+      throw new Error(response.data.error || 'Request failed')
+    }
+    return response.data.data!
+  }
+  async patch<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+    const response = await this.api.patch<ApiResponse<T>>(url, data, config)
+    if (!response.data.success) {
+      throw new Error(response.data.error || 'Request failed')
+    }
+    return response.data.data!
+  }
+  async delete<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    const response = await this.api.delete<ApiResponse<T>>(url, config)
+    if (!response.data.success) {
+      throw new Error(response.data.error || 'Request failed')
+    }
+    return response.data.data!
+  }
+  // File upload method
+  async upload<T>(url: string, file: File, onProgress?: (progress: number) => void): Promise<T> {
+    const formData = new FormData()
+    formData.append('file', file)
+    const config: AxiosRequestConfig = {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      onUploadProgress: (progressEvent) => {
+        if (onProgress && progressEvent.total) {
+          const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+          onProgress(progress)
+        }
+      },
+    }
+    const response = await this.api.post<ApiResponse<T>>(url, formData, config)
+    if (!response.data.success) {
+      throw new Error(response.data.error || 'Upload failed')
+    }
+    return response.data.data!
+  }
+  // Multiple file upload method
+  async uploadMultiple<T>(
+    url: string,
+    files: File[],
+    onProgress?: (progress: number) => void
+  ): Promise<T> {
+    const formData = new FormData()
+    files.forEach((file, index) => {
+      formData.append(`files[${index}]`, file)
+    })
+    const config: AxiosRequestConfig = {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      onUploadProgress: (progressEvent) => {
+        if (onProgress && progressEvent.total) {
+          const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+          onProgress(progress)
+        }
+      },
+    }
+    const response = await this.api.post<ApiResponse<T>>(url, formData, config)
+    if (!response.data.success) {
+      throw new Error(response.data.error || 'Upload failed')
+    }
+    return response.data.data!
+  }
+  // Get raw axios instance for custom requests
+  getAxiosInstance(): AxiosInstance {
+    return this.api
+  }
+}
+export const apiService = new ApiService()

client/src/services/authService.ts ADDED Viewed

	@@ -0,0 +1,62 @@

+import { User, LoginRequest, RegisterRequest } from '../../../shared/types'
+import { apiService } from './api'
+interface AuthResponse {
+  user: User
+  token: string
+}
+class AuthService {
+  async login(credentials: LoginRequest): Promise<AuthResponse> {
+    return await apiService.post<AuthResponse>('/api/auth/login', credentials)
+  }
+  async register(userData: RegisterRequest): Promise<AuthResponse> {
+    return await apiService.post<AuthResponse>('/api/auth/register', userData)
+  }
+  async logout(): Promise<void> {
+    try {
+      await apiService.post('/api/auth/logout')
+    } catch (error) {
+      // Ignore logout errors, clear local storage anyway
+      console.warn('Logout request failed:', error)
+    }
+  }
+  async getCurrentUser(): Promise<User> {
+    return await apiService.get<User>('/api/auth/me')
+  }
+  async refreshToken(): Promise<AuthResponse> {
+    return await apiService.post<AuthResponse>('/api/auth/refresh')
+  }
+  async changePassword(data: {
+    currentPassword: string
+    newPassword: string
+  }): Promise<void> {
+    await apiService.post('/api/auth/change-password', data)
+  }
+  async requestPasswordReset(email: string): Promise<void> {
+    await apiService.post('/api/auth/forgot-password', { email })
+  }
+  async resetPassword(data: {
+    token: string
+    newPassword: string
+  }): Promise<void> {
+    await apiService.post('/api/auth/reset-password', data)
+  }
+  async verifyEmail(token: string): Promise<void> {
+    await apiService.post('/api/auth/verify-email', { token })
+  }
+  async resendVerificationEmail(): Promise<void> {
+    await apiService.post('/api/auth/resend-verification')
+  }
+}
+export const authService = new AuthService()

client/src/services/chatService.ts ADDED Viewed

	@@ -0,0 +1,136 @@

+import { Chat, Message, CreateChatRequest, SendMessageData, PaginatedResponse } from '../../../shared/types'
+import { apiService } from './api'
+class ChatService {
+  // Chat management
+  async getChats(): Promise<Chat[]> {
+    return await apiService.get<Chat[]>('/api/chats')
+  }
+  async getChat(chatId: string): Promise<Chat> {
+    return await apiService.get<Chat>(`/api/chats/${chatId}`)
+  }
+  async createChat(data: CreateChatRequest): Promise<Chat> {
+    return await apiService.post<Chat>('/api/chats', data)
+  }
+  async updateChat(chatId: string, data: Partial<Chat>): Promise<Chat> {
+    return await apiService.put<Chat>(`/api/chats/${chatId}`, data)
+  }
+  async deleteChat(chatId: string): Promise<void> {
+    await apiService.delete(`/api/chats/${chatId}`)
+  }
+  async leaveChat(chatId: string): Promise<void> {
+    await apiService.post(`/api/chats/${chatId}/leave`)
+  }
+  // Message management
+  async getMessages(chatId: string, page = 1, limit = 50): Promise<Message[]> {
+    const response = await apiService.get<PaginatedResponse<Message>>(
+      `/api/chats/${chatId}/messages?page=${page}&limit=${limit}`
+    )
+    return response.data
+  }
+  async sendMessage(chatId: string, data: Omit<SendMessageData, 'chatId'>): Promise<Message> {
+    if (data.attachments && data.attachments.length > 0) {
+      // Upload files first
+      const uploadedFiles = await this.uploadFiles(data.attachments)
+      return await apiService.post<Message>(`/api/chats/${chatId}/messages`, {
+        content: data.content,
+        type: data.type,
+        attachments: uploadedFiles,
+        replyTo: data.replyTo,
+      })
+    } else {
+      return await apiService.post<Message>(`/api/chats/${chatId}/messages`, {
+        content: data.content,
+        type: data.type,
+        replyTo: data.replyTo,
+      })
+    }
+  }
+  async editMessage(messageId: string, content: string): Promise<Message> {
+    return await apiService.put<Message>(`/api/messages/${messageId}`, { content })
+  }
+  async deleteMessage(messageId: string): Promise<void> {
+    await apiService.delete(`/api/messages/${messageId}`)
+  }
+  async addReaction(messageId: string, emoji: string): Promise<void> {
+    await apiService.post(`/api/messages/${messageId}/reactions`, { emoji })
+  }
+  async removeReaction(messageId: string, emoji: string): Promise<void> {
+    await apiService.delete(`/api/messages/${messageId}/reactions/${emoji}`)
+  }
+  // Group management
+  async addMember(chatId: string, userId: string): Promise<void> {
+    await apiService.post(`/api/chats/${chatId}/members`, { userId })
+  }
+  async removeMember(chatId: string, userId: string): Promise<void> {
+    await apiService.delete(`/api/chats/${chatId}/members/${userId}`)
+  }
+  async updateMemberRole(chatId: string, userId: string, role: string): Promise<void> {
+    await apiService.put(`/api/chats/${chatId}/members/${userId}`, { role })
+  }
+  async getChatMembers(chatId: string): Promise<any[]> {
+    return await apiService.get(`/api/chats/${chatId}/members`)
+  }
+  // File upload
+  async uploadFiles(files: File[]): Promise<any[]> {
+    const uploadPromises = files.map(file => this.uploadFile(file))
+    return await Promise.all(uploadPromises)
+  }
+  async uploadFile(file: File): Promise<any> {
+    return await apiService.upload('/api/upload', file)
+  }
+  // Search
+  async searchMessages(query: string, chatId?: string): Promise<Message[]> {
+    const params = new URLSearchParams({ q: query })
+    if (chatId) {
+      params.append('chatId', chatId)
+    }
+    return await apiService.get<Message[]>(`/api/search/messages?${params}`)
+  }
+  async searchChats(query: string): Promise<Chat[]> {
+    return await apiService.get<Chat[]>(`/api/search/chats?q=${encodeURIComponent(query)}`)
+  }
+  // Chat settings
+  async updateChatSettings(chatId: string, settings: any): Promise<void> {
+    await apiService.put(`/api/chats/${chatId}/settings`, settings)
+  }
+  async getChatSettings(chatId: string): Promise<any> {
+    return await apiService.get(`/api/chats/${chatId}/settings`)
+  }
+  // Notifications
+  async markAsRead(chatId: string): Promise<void> {
+    await apiService.post(`/api/chats/${chatId}/read`)
+  }
+  async muteChat(chatId: string, duration?: number): Promise<void> {
+    await apiService.post(`/api/chats/${chatId}/mute`, { duration })
+  }
+  async unmuteChat(chatId: string): Promise<void> {
+    await apiService.post(`/api/chats/${chatId}/unmute`)
+  }
+}
+export const chatService = new ChatService()

client/src/services/socketService.ts ADDED Viewed

	@@ -0,0 +1,198 @@

+import { io, Socket } from 'socket.io-client'
+import { Message, User, Chat } from '../../../shared/types'
+class SocketService {
+  private socket: Socket | null = null
+  private reconnectAttempts = 0
+  private maxReconnectAttempts = 5
+  private reconnectDelay = 1000
+  connect(token: string): Promise<void> {
+    return new Promise((resolve, reject) => {
+      if (this.socket?.connected) {
+        resolve()
+        return
+      }
+      const socketUrl = import.meta.env.VITE_SOCKET_URL || 'http://localhost:3001'
+      this.socket = io(socketUrl, {
+        auth: {
+          token
+        },
+        transports: ['websocket', 'polling'],
+        timeout: 10000,
+      })
+      this.socket.on('connect', () => {
+        console.log('Socket connected')
+        this.reconnectAttempts = 0
+        resolve()
+      })
+      this.socket.on('connect_error', (error) => {
+        console.error('Socket connection error:', error)
+        reject(error)
+      })
+      this.socket.on('disconnect', (reason) => {
+        console.log('Socket disconnected:', reason)
+        if (reason === 'io server disconnect') {
+          // Server disconnected, try to reconnect
+          this.handleReconnect()
+        }
+      })
+      this.socket.on('error', (error) => {
+        console.error('Socket error:', error)
+      })
+      // Set up event listeners
+      this.setupEventListeners()
+    })
+  }
+  disconnect(): void {
+    if (this.socket) {
+      this.socket.disconnect()
+      this.socket = null
+    }
+  }
+  private handleReconnect(): void {
+    if (this.reconnectAttempts < this.maxReconnectAttempts) {
+      this.reconnectAttempts++
+      const delay = this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1)
+      setTimeout(() => {
+        console.log(`Attempting to reconnect (${this.reconnectAttempts}/${this.maxReconnectAttempts})`)
+        this.socket?.connect()
+      }, delay)
+    } else {
+      console.error('Max reconnection attempts reached')
+    }
+  }
+  private setupEventListeners(): void {
+    if (!this.socket) return
+    // Authentication events
+    this.socket.on('authenticated', (user: User) => {
+      console.log('Socket authenticated for user:', user.username)
+    })
+    this.socket.on('authentication_error', (error: string) => {
+      console.error('Socket authentication error:', error)
+    })
+  }
+  // Message events
+  onMessageReceive(callback: (message: Message) => void): void {
+    this.socket?.on('message:receive', callback)
+  }
+  onMessageEdit(callback: (message: Message) => void): void {
+    this.socket?.on('message:edit', callback)
+  }
+  onMessageDelete(callback: (messageId: string) => void): void {
+    this.socket?.on('message:delete', callback)
+  }
+  onMessageReaction(callback: (data: { messageId: string; reactions: any[] }) => void): void {
+    this.socket?.on('message:reaction', callback)
+  }
+  // Typing events
+  onTypingStart(callback: (data: { chatId: string; userId: string; user: User }) => void): void {
+    this.socket?.on('typing:start', callback)
+  }
+  onTypingStop(callback: (data: { chatId: string; userId: string }) => void): void {
+    this.socket?.on('typing:stop', callback)
+  }
+  sendTypingStart(chatId: string): void {
+    this.socket?.emit('typing:start', { chatId })
+  }
+  sendTypingStop(chatId: string): void {
+    this.socket?.emit('typing:stop', { chatId })
+  }
+  // User status events
+  onUserOnline(callback: (userId: string) => void): void {
+    this.socket?.on('user:online', callback)
+  }
+  onUserOffline(callback: (userId: string) => void): void {
+    this.socket?.on('user:offline', callback)
+  }
+  onUserStatusUpdate(callback: (data: { userId: string; isOnline: boolean; lastSeen?: Date }) => void): void {
+    this.socket?.on('user:status', callback)
+  }
+  // Chat events
+  onChatUpdate(callback: (chat: Chat) => void): void {
+    this.socket?.on('chat:update', callback)
+  }
+  onChatJoin(callback: (data: { chatId: string; user: User }) => void): void {
+    this.socket?.on('chat:join', callback)
+  }
+  onChatLeave(callback: (data: { chatId: string; userId: string }) => void): void {
+    this.socket?.on('chat:leave', callback)
+  }
+  joinChat(chatId: string): void {
+    this.socket?.emit('chat:join', chatId)
+  }
+  leaveChat(chatId: string): void {
+    this.socket?.emit('chat:leave', chatId)
+  }
+  // Group events
+  onGroupMemberAdd(callback: (data: { groupId: string; user: User; addedBy: User }) => void): void {
+    this.socket?.on('group:member:add', callback)
+  }
+  onGroupMemberRemove(callback: (data: { groupId: string; userId: string; removedBy: User }) => void): void {
+    this.socket?.on('group:member:remove', callback)
+  }
+  onGroupUpdate(callback: (group: any) => void): void {
+    this.socket?.on('group:update', callback)
+  }
+  // Notification events
+  onNotification(callback: (notification: any) => void): void {
+    this.socket?.on('notification', callback)
+  }
+  // Utility methods
+  isConnected(): boolean {
+    return this.socket?.connected || false
+  }
+  emit(event: string, data?: any): void {
+    this.socket?.emit(event, data)
+  }
+  on(event: string, callback: (...args: any[]) => void): void {
+    this.socket?.on(event, callback)
+  }
+  off(event: string, callback?: (...args: any[]) => void): void {
+    this.socket?.off(event, callback)
+  }
+  // Remove all listeners for cleanup
+  removeAllListeners(): void {
+    this.socket?.removeAllListeners()
+  }
+}
+export const socketService = new SocketService()

client/src/store/authStore.ts ADDED Viewed

	@@ -0,0 +1,130 @@

+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { User } from '../../../shared/types'
+import { authService } from '../services/authService'
+interface AuthState {
+  user: User | null
+  token: string | null
+  loading: boolean
+  error: string | null
+}
+interface AuthActions {
+  login: (email: string, password: string) => Promise<void>
+  register: (data: {
+    email: string
+    username: string
+    password: string
+    displayName: string
+  }) => Promise<void>
+  logout: () => void
+  checkAuth: () => Promise<void>
+  updateUser: (user: Partial<User>) => void
+  clearError: () => void
+}
+export const useAuthStore = create<AuthState & AuthActions>()(
+  persist(
+    (set, get) => ({
+      // State
+      user: null,
+      token: null,
+      loading: false,
+      error: null,
+      // Actions
+      login: async (email: string, password: string) => {
+        set({ loading: true, error: null })
+        try {
+          const response = await authService.login({ email, password })
+          set({
+            user: response.user,
+            token: response.token,
+            loading: false,
+            error: null,
+          })
+        } catch (error: any) {
+          set({
+            loading: false,
+            error: error.message || 'Login failed',
+          })
+          throw error
+        }
+      },
+      register: async (data) => {
+        set({ loading: true, error: null })
+        try {
+          const response = await authService.register(data)
+          set({
+            user: response.user,
+            token: response.token,
+            loading: false,
+            error: null,
+          })
+        } catch (error: any) {
+          set({
+            loading: false,
+            error: error.message || 'Registration failed',
+          })
+          throw error
+        }
+      },
+      logout: () => {
+        authService.logout()
+        set({
+          user: null,
+          token: null,
+          error: null,
+        })
+      },
+      checkAuth: async () => {
+        const { token } = get()
+        if (!token) {
+          set({ loading: false })
+          return
+        }
+        set({ loading: true })
+        try {
+          const user = await authService.getCurrentUser()
+          set({
+            user,
+            loading: false,
+            error: null,
+          })
+        } catch (error) {
+          set({
+            user: null,
+            token: null,
+            loading: false,
+            error: null,
+          })
+        }
+      },
+      updateUser: (userData) => {
+        const { user } = get()
+        if (user) {
+          set({
+            user: { ...user, ...userData },
+          })
+        }
+      },
+      clearError: () => {
+        set({ error: null })
+      },
+    }),
+    {
+      name: 'auth-storage',
+      partialize: (state) => ({
+        token: state.token,
+        user: state.user,
+      }),
+    }
+  )
+)

client/src/store/chatStore.ts ADDED Viewed

	@@ -0,0 +1,285 @@

+import { create } from 'zustand'
+import { Chat, Message } from '../../../shared/types'
+import { chatService } from '../services/chatService'
+interface ChatState {
+  chats: Chat[]
+  currentChat: Chat | null
+  messages: Record<string, Message[]>
+  typingUsers: Record<string, string[]>
+  onlineUsers: Set<string>
+  loading: boolean
+  error: string | null
+}
+interface ChatActions {
+  // Chat management
+  loadChats: () => Promise<void>
+  selectChat: (chatId: string) => void
+  createChat: (data: {
+    type: 'direct' | 'group'
+    name?: string
+    participantIds: string[]
+  }) => Promise<Chat>
+  updateChat: (chatId: string, data: Partial<Chat>) => Promise<void>
+  deleteChat: (chatId: string) => Promise<void>
+  // Message management
+  loadMessages: (chatId: string, page?: number) => Promise<void>
+  sendMessage: (chatId: string, content: string, attachments?: File[]) => Promise<void>
+  editMessage: (messageId: string, content: string) => Promise<void>
+  deleteMessage: (messageId: string) => Promise<void>
+  addReaction: (messageId: string, emoji: string) => Promise<void>
+  removeReaction: (messageId: string, emoji: string) => Promise<void>
+  // Real-time updates
+  addMessage: (message: Message) => void
+  updateMessage: (message: Message) => void
+  removeMessage: (messageId: string) => void
+  applyChatUpdate: (chat: Chat) => void
+  // Typing indicators
+  setTyping: (chatId: string, userId: string, isTyping: boolean) => void
+  // User status
+  setUserOnline: (userId: string, isOnline: boolean) => void
+  // Utility
+  clearError: () => void
+  reset: () => void
+}
+export const useChatStore = create<ChatState & ChatActions>((set, get) => ({
+  // State
+  chats: [],
+  currentChat: null,
+  messages: {},
+  typingUsers: {},
+  onlineUsers: new Set(),
+  loading: false,
+  error: null,
+  // Actions
+  loadChats: async () => {
+    set({ loading: true, error: null })
+    try {
+      const chats = await chatService.getChats()
+      set({ chats, loading: false })
+    } catch (error: any) {
+      set({ error: error.message, loading: false })
+    }
+  },
+  selectChat: (chatId: string) => {
+    const { chats } = get()
+    const chat = chats.find(c => c.id === chatId)
+    if (chat) {
+      set({ currentChat: chat })
+      // Load messages if not already loaded
+      if (!get().messages[chatId]) {
+        get().loadMessages(chatId)
+      }
+    }
+  },
+  createChat: async (data) => {
+    set({ loading: true, error: null })
+    try {
+      const chat = await chatService.createChat(data)
+      set(state => ({
+        chats: [chat, ...state.chats],
+        currentChat: chat,
+        loading: false
+      }))
+      return chat
+    } catch (error: any) {
+      set({ error: error.message, loading: false })
+      throw error
+    }
+  },
+  updateChat: async (chatId: string, data: Partial<Chat>) => {
+    try {
+      const updatedChat = await chatService.updateChat(chatId, data)
+      set(state => ({
+        chats: state.chats.map(chat =>
+          chat.id === chatId ? updatedChat : chat
+        ),
+        currentChat: state.currentChat?.id === chatId ? updatedChat : state.currentChat
+      }))
+    } catch (error: any) {
+      set({ error: error.message })
+    }
+  },
+  deleteChat: async (chatId: string) => {
+    try {
+      await chatService.deleteChat(chatId)
+      set(state => ({
+        chats: state.chats.filter(chat => chat.id !== chatId),
+        currentChat: state.currentChat?.id === chatId ? null : state.currentChat,
+        messages: Object.fromEntries(
+          Object.entries(state.messages).filter(([id]) => id !== chatId)
+        )
+      }))
+    } catch (error: any) {
+      set({ error: error.message })
+    }
+  },
+  loadMessages: async (chatId: string, page = 1) => {
+    set({ loading: true, error: null })
+    try {
+      const messages = await chatService.getMessages(chatId, page)
+      set(state => ({
+        messages: {
+          ...state.messages,
+          [chatId]: page === 1 ? messages : [...(state.messages[chatId] || []), ...messages]
+        },
+        loading: false
+      }))
+    } catch (error: any) {
+      set({ error: error.message, loading: false })
+    }
+  },
+  sendMessage: async (chatId: string, content: string, attachments?: File[]) => {
+    try {
+      await chatService.sendMessage(chatId, {
+        content,
+        type: 'text',
+        attachments
+      })
+      // Message will be added via socket event
+    } catch (error: any) {
+      set({ error: error.message })
+    }
+  },
+  editMessage: async (messageId: string, content: string) => {
+    try {
+      await chatService.editMessage(messageId, content)
+      // Message will be updated via socket event
+    } catch (error: any) {
+      set({ error: error.message })
+    }
+  },
+  deleteMessage: async (messageId: string) => {
+    try {
+      await chatService.deleteMessage(messageId)
+      // Message will be removed via socket event
+    } catch (error: any) {
+      set({ error: error.message })
+    }
+  },
+  addReaction: async (messageId: string, emoji: string) => {
+    try {
+      await chatService.addReaction(messageId, emoji)
+      // Reaction will be updated via socket event
+    } catch (error: any) {
+      set({ error: error.message })
+    }
+  },
+  removeReaction: async (messageId: string, emoji: string) => {
+    try {
+      await chatService.removeReaction(messageId, emoji)
+      // Reaction will be updated via socket event
+    } catch (error: any) {
+      set({ error: error.message })
+    }
+  },
+  // Real-time updates
+  addMessage: (message: Message) => {
+    set(state => ({
+      messages: {
+        ...state.messages,
+        [message.chatId]: [...(state.messages[message.chatId] || []), message]
+      },
+      chats: state.chats.map(chat =>
+        chat.id === message.chatId
+          ? { ...chat, lastMessage: message, updatedAt: new Date() }
+          : chat
+      )
+    }))
+  },
+  updateMessage: (message: Message) => {
+    set(state => ({
+      messages: {
+        ...state.messages,
+        [message.chatId]: (state.messages[message.chatId] || []).map(msg =>
+          msg.id === message.id ? message : msg
+        )
+      }
+    }))
+  },
+  removeMessage: (messageId: string) => {
+    set(state => {
+      const newMessages = { ...state.messages }
+      Object.keys(newMessages).forEach(chatId => {
+        newMessages[chatId] = newMessages[chatId].filter(msg => msg.id !== messageId)
+      })
+      return { messages: newMessages }
+    })
+  },
+  applyChatUpdate: (chat: Chat) => {
+    set(state => ({
+      chats: state.chats.map(c => c.id === chat.id ? chat : c),
+      currentChat: state.currentChat?.id === chat.id ? chat : state.currentChat
+    }))
+  },
+  setTyping: (chatId: string, userId: string, isTyping: boolean) => {
+    set(state => {
+      const typingUsers = { ...state.typingUsers }
+      const currentTyping = typingUsers[chatId] || []
+      if (isTyping) {
+        if (!currentTyping.includes(userId)) {
+          typingUsers[chatId] = [...currentTyping, userId]
+        }
+      } else {
+        typingUsers[chatId] = currentTyping.filter(id => id !== userId)
+        if (typingUsers[chatId].length === 0) {
+          delete typingUsers[chatId]
+        }
+      }
+      return { typingUsers }
+    })
+  },
+  setUserOnline: (userId: string, isOnline: boolean) => {
+    set(state => {
+      const onlineUsers = new Set(state.onlineUsers)
+      if (isOnline) {
+        onlineUsers.add(userId)
+      } else {
+        onlineUsers.delete(userId)
+      }
+      return { onlineUsers }
+    })
+  },
+  clearError: () => {
+    set({ error: null })
+  },
+  reset: () => {
+    set({
+      chats: [],
+      currentChat: null,
+      messages: {},
+      typingUsers: {},
+      onlineUsers: new Set(),
+      loading: false,
+      error: null
+    })
+  }
+}))

client/src/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1,10 @@

+/// <reference types="vite/client" />
+interface ImportMetaEnv {
+  readonly VITE_API_URL?: string
+  readonly VITE_SOCKET_URL?: string
+}
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

client/tailwind.config.js ADDED Viewed

	@@ -0,0 +1,76 @@

+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  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")],
+}

client/tsconfig.json ADDED Viewed

	@@ -0,0 +1,31 @@

+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    /* Path mapping */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

client/tsconfig.node.json ADDED Viewed

	@@ -0,0 +1,10 @@

+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

client/vite.config.ts ADDED Viewed

	@@ -0,0 +1,27 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3001',
+        changeOrigin: true,
+      },
+      '/socket.io': {
+        target: 'http://localhost:3001',
+        changeOrigin: true,
+        ws: true,
+      },
+    },
+  },
+})

package.json ADDED Viewed

	@@ -0,0 +1,41 @@

+{
+  "name": "chat-app",
+  "version": "1.0.0",
+  "description": "A modern chat application with Telegram-like features",
+  "main": "index.js",
+  "scripts": {
+    "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
+    "dev:server": "cd server && npm run dev",
+    "dev:client": "cd client && npm run dev",
+    "build": "npm run build:client && npm run build:server",
+    "build:client": "cd client && npm run build",
+    "build:server": "cd server && npm run build",
+    "start": "cd server && npm run start",
+    "test": "npm run test:client && npm run test:server",
+    "test:client": "cd client && npm run test",
+    "test:server": "cd server && npm run test",
+    "lint": "npm run lint:client && npm run lint:server",
+    "lint:client": "cd client && npm run lint",
+    "lint:server": "cd server && npm run lint",
+    "install:all": "npm install && cd client && npm install && cd ../server && npm install"
+  },
+  "keywords": [
+    "chat",
+    "messaging",
+    "real-time",
+    "socket.io",
+    "react",
+    "node.js",
+    "typescript"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+  "devDependencies": {
+    "concurrently": "^8.2.2"
+  },
+  "workspaces": [
+    "client",
+    "server",
+    "shared"
+  ]
+}

server/.env.example ADDED Viewed

	@@ -0,0 +1,50 @@

+# Server Configuration
+NODE_ENV=development
+PORT=3001
+HOST=localhost
+# Database Configuration (Supabase)
+DATABASE_URL=postgresql://username:password@localhost:5432/chatapp
+SUPABASE_URL=your_supabase_url
+SUPABASE_SERVICE_KEY=your_supabase_service_key
+# JWT Configuration
+JWT_SECRET=your_super_secret_jwt_key_here
+JWT_EXPIRES_IN=7d
+JWT_REFRESH_SECRET=your_refresh_token_secret
+JWT_REFRESH_EXPIRES_IN=30d
+# Redis Configuration (Optional - for caching and sessions)
+REDIS_URL=redis://localhost:6379
+REDIS_PASSWORD=
+# File Upload Configuration
+MAX_FILE_SIZE=10485760
+ALLOWED_FILE_TYPES=image/jpeg,image/png,image/gif,image/webp,video/mp4,video/webm,audio/mp3,audio/wav,application/pdf,text/plain
+UPLOAD_PATH=uploads
+# Email Configuration (for notifications)
+SMTP_HOST=smtp.gmail.com
+SMTP_PORT=587
+[email protected]
+SMTP_PASS=your_app_password
+[email protected]
+FROM_NAME=ChatApp
+# Rate Limiting
+RATE_LIMIT_WINDOW_MS=900000
+RATE_LIMIT_MAX_REQUESTS=100
+# CORS Configuration
+CORS_ORIGIN=http://localhost:5173
+# Admin Configuration
+[email protected]
+ADMIN_PASSWORD=admin123456
+# Logging
+LOG_LEVEL=info
+LOG_FILE=logs/app.log
+# WebSocket Configuration
+SOCKET_CORS_ORIGIN=http://localhost:5173

server/package.json ADDED Viewed

	@@ -0,0 +1,70 @@

+{
+  "name": "chat-app-server",
+  "version": "1.0.0",
+  "description": "Chat application backend server",
+  "main": "dist/index.js",
+  "scripts": {
+    "dev": "nodemon src/index.ts",
+    "build": "tsc",
+    "start": "node dist/index.js",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "lint": "eslint src --ext .ts",
+    "lint:fix": "eslint src --ext .ts --fix",
+    "migrate": "npx prisma migrate dev",
+    "db:generate": "npx prisma generate",
+    "db:push": "npx prisma db push",
+    "db:studio": "npx prisma studio"
+  },
+  "keywords": [
+    "chat",
+    "socket.io",
+    "express",
+    "typescript",
+    "node.js"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+  "dependencies": {
+    "express": "^4.18.2",
+    "socket.io": "^4.7.4",
+    "cors": "^2.8.5",
+    "helmet": "^7.1.0",
+    "bcryptjs": "^2.4.3",
+    "jsonwebtoken": "^9.0.2",
+    "multer": "^1.4.5-lts.1",
+    "sharp": "^0.32.6",
+    "joi": "^17.11.0",
+    "dotenv": "^16.3.1",
+    "@supabase/supabase-js": "^2.38.4",
+    "prisma": "^5.6.0",
+    "@prisma/client": "^5.6.0",
+    "redis": "^4.6.10",
+    "nodemailer": "^6.9.7",
+    "express-rate-limit": "^7.1.5",
+    "compression": "^1.7.4",
+    "morgan": "^1.10.0",
+    "uuid": "^9.0.1"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/cors": "^2.8.17",
+    "@types/bcryptjs": "^2.4.6",
+    "@types/jsonwebtoken": "^9.0.5",
+    "@types/multer": "^1.4.11",
+    "@types/node": "^20.9.0",
+    "@types/compression": "^1.7.5",
+    "@types/morgan": "^1.9.9",
+    "@types/uuid": "^9.0.7",
+    "@types/nodemailer": "^6.4.14",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "eslint": "^8.53.0",
+    "jest": "^29.7.0",
+    "@types/jest": "^29.5.8",
+    "ts-jest": "^29.1.1",
+    "nodemon": "^3.0.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2"
+  }
+}

server/prisma/schema.prisma ADDED Viewed

	@@ -0,0 +1,209 @@

+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+generator client {
+  provider = "prisma-client-js"
+}
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+model User {
+  id          String   @id @default(cuid())
+  email       String   @unique
+  username    String   @unique
+  displayName String
+  password    String
+  avatar      String?
+  bio         String?
+  isOnline    Boolean  @default(false)
+  lastSeen    DateTime @default(now())
+  isAdmin     Boolean  @default(false)
+  isVerified  Boolean  @default(false)
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+  // Relations
+  sentMessages     Message[]           @relation("MessageSender")
+  chatParticipants ChatParticipant[]
+  messageReactions MessageReaction[]
+  ownedGroups      Group[]             @relation("GroupOwner")
+  notifications    Notification[]
+  userSessions     UserSession[]
+  @@map("users")
+}
+model Chat {
+  id          String   @id @default(cuid())
+  type        ChatType @default(DIRECT)
+  name        String?
+  description String?
+  avatar      String?
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+  // Relations
+  participants ChatParticipant[]
+  messages     Message[]
+  group        Group?
+  @@map("chats")
+}
+model ChatParticipant {
+  id          String           @id @default(cuid())
+  chatId      String
+  userId      String
+  role        ParticipantRole  @default(MEMBER)
+  permissions Json?
+  joinedAt    DateTime         @default(now())
+  leftAt      DateTime?
+  // Relations
+  chat Chat @relation(fields: [chatId], references: [id], onDelete: Cascade)
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+  @@unique([chatId, userId])
+  @@map("chat_participants")
+}
+model Message {
+  id          String      @id @default(cuid())
+  chatId      String
+  senderId    String
+  content     String
+  type        MessageType @default(TEXT)
+  replyToId   String?
+  isEdited    Boolean     @default(false)
+  isDeleted   Boolean     @default(false)
+  createdAt   DateTime    @default(now())
+  updatedAt   DateTime    @updatedAt
+  // Relations
+  chat        Chat                @relation(fields: [chatId], references: [id], onDelete: Cascade)
+  sender      User                @relation("MessageSender", fields: [senderId], references: [id], onDelete: Cascade)
+  replyTo     Message?            @relation("MessageReply", fields: [replyToId], references: [id])
+  replies     Message[]           @relation("MessageReply")
+  attachments MessageAttachment[]
+  reactions   MessageReaction[]
+  @@map("messages")
+}
+model MessageAttachment {
+  id        String @id @default(cuid())
+  messageId String
+  type      String
+  name      String
+  url       String
+  size      Int
+  mimeType  String
+  thumbnail String?
+  // Relations
+  message Message @relation(fields: [messageId], references: [id], onDelete: Cascade)
+  @@map("message_attachments")
+}
+model MessageReaction {
+  id        String   @id @default(cuid())
+  messageId String
+  userId    String
+  emoji     String
+  createdAt DateTime @default(now())
+  // Relations
+  message Message @relation(fields: [messageId], references: [id], onDelete: Cascade)
+  user    User    @relation(fields: [userId], references: [id], onDelete: Cascade)
+  @@unique([messageId, userId, emoji])
+  @@map("message_reactions")
+}
+model Group {
+  id          String      @id @default(cuid())
+  chatId      String      @unique
+  name        String
+  description String?
+  avatar      String?
+  type        GroupType   @default(PRIVATE)
+  maxMembers  Int         @default(100)
+  ownerId     String
+  settings    Json?
+  createdAt   DateTime    @default(now())
+  updatedAt   DateTime    @updatedAt
+  // Relations
+  chat  Chat @relation(fields: [chatId], references: [id], onDelete: Cascade)
+  owner User @relation("GroupOwner", fields: [ownerId], references: [id])
+  @@map("groups")
+}
+model Notification {
+  id        String           @id @default(cuid())
+  userId    String
+  type      NotificationType
+  title     String
+  content   String
+  data      Json?
+  isRead    Boolean          @default(false)
+  createdAt DateTime         @default(now())
+  // Relations
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+  @@map("notifications")
+}
+model UserSession {
+  id        String   @id @default(cuid())
+  userId    String
+  token     String   @unique
+  userAgent String?
+  ipAddress String?
+  expiresAt DateTime
+  createdAt DateTime @default(now())
+  // Relations
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+  @@map("user_sessions")
+}
+// Enums
+enum ChatType {
+  DIRECT
+  GROUP
+}
+enum ParticipantRole {
+  MEMBER
+  ADMIN
+  OWNER
+}
+enum MessageType {
+  TEXT
+  IMAGE
+  FILE
+  AUDIO
+  VIDEO
+  SYSTEM
+}
+enum GroupType {
+  PUBLIC
+  PRIVATE
+}
+enum NotificationType {
+  MESSAGE
+  MENTION
+  GROUP_INVITE
+  SYSTEM
+}

server/src/config/database.ts ADDED Viewed

	@@ -0,0 +1,69 @@

+import { PrismaClient } from '@prisma/client'
+declare global {
+  var __prisma: PrismaClient | undefined
+}
+// Prevent multiple instances of Prisma Client in development
+const prisma = globalThis.__prisma || new PrismaClient({
+  log: process.env.NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error'],
+})
+if (process.env.NODE_ENV === 'development') {
+  globalThis.__prisma = prisma
+}
+export { prisma }
+export async function initializeDatabase() {
+  try {
+    // Test the connection
+    await prisma.$connect()
+    console.log('✅ Database connected successfully')
+    // Run any initialization logic here
+    await createDefaultAdmin()
+  } catch (error) {
+    console.error('❌ Database connection failed:', error)
+    throw error
+  }
+}
+async function createDefaultAdmin() {
+  try {
+    const adminEmail = process.env.ADMIN_EMAIL || '[email protected]'
+    const adminPassword = process.env.ADMIN_PASSWORD || 'admin123456'
+    // Check if admin user already exists
+    const existingAdmin = await prisma.user.findUnique({
+      where: { email: adminEmail }
+    })
+    if (!existingAdmin) {
+      const bcrypt = await import('bcryptjs')
+      const hashedPassword = await bcrypt.hash(adminPassword, 12)
+      await prisma.user.create({
+        data: {
+          email: adminEmail,
+          username: 'admin',
+          displayName: 'Administrator',
+          password: hashedPassword,
+          isAdmin: true,
+          isVerified: true,
+        }
+      })
+      console.log('✅ Default admin user created')
+      console.log(`📧 Admin email: ${adminEmail}`)
+      console.log(`🔑 Admin password: ${adminPassword}`)
+    }
+  } catch (error) {
+    console.error('❌ Failed to create default admin:', error)
+  }
+}
+export async function disconnectDatabase() {
+  await prisma.$disconnect()
+}

server/src/index.ts ADDED Viewed

	@@ -0,0 +1,157 @@

+import express from 'express'
+import { createServer } from 'http'
+import { Server } from 'socket.io'
+import cors from 'cors'
+import helmet from 'helmet'
+import compression from 'compression'
+import morgan from 'morgan'
+import dotenv from 'dotenv'
+import path from 'path'
+// Load environment variables
+dotenv.config()
+// Import routes and middleware
+import authRoutes from './routes/auth'
+import userRoutes from './routes/users'
+import chatRoutes from './routes/chats'
+import messageRoutes from './routes/messages'
+import uploadRoutes from './routes/upload'
+import adminRoutes from './routes/admin'
+// Import middleware
+import { errorHandler } from './middleware/errorHandler'
+import { rateLimiter } from './middleware/rateLimiter'
+import { authMiddleware } from './middleware/auth'
+// Import socket handlers
+import { setupSocketHandlers } from './socket'
+// Import database
+import { initializeDatabase } from './config/database'
+const app = express()
+const server = createServer(app)
+// Initialize Socket.IO
+const io = new Server(server, {
+  cors: {
+    origin: process.env.CORS_ORIGIN || "http://localhost:5173",
+    methods: ["GET", "POST"],
+    credentials: true
+  },
+  transports: ['websocket', 'polling']
+})
+// Middleware
+app.use(helmet({
+  crossOriginEmbedderPolicy: false,
+  contentSecurityPolicy: {
+    directives: {
+      defaultSrc: ["'self'"],
+      styleSrc: ["'self'", "'unsafe-inline'"],
+      scriptSrc: ["'self'"],
+      imgSrc: ["'self'", "data:", "https:"],
+    },
+  },
+}))
+app.use(cors({
+  origin: process.env.CORS_ORIGIN || "http://localhost:5173",
+  credentials: true
+}))
+app.use(compression())
+app.use(morgan('combined'))
+app.use(express.json({ limit: '10mb' }))
+app.use(express.urlencoded({ extended: true, limit: '10mb' }))
+// Rate limiting
+app.use(rateLimiter)
+// Static files
+app.use('/uploads', express.static(path.join(__dirname, '../uploads')))
+// Health check
+app.get('/health', (req, res) => {
+  res.json({
+    status: 'OK',
+    timestamp: new Date().toISOString(),
+    uptime: process.uptime()
+  })
+})
+// API Routes
+app.use('/api/auth', authRoutes)
+app.use('/api/users', authMiddleware, userRoutes)
+app.use('/api/chats', authMiddleware, chatRoutes)
+app.use('/api/messages', authMiddleware, messageRoutes)
+app.use('/api/upload', authMiddleware, uploadRoutes)
+app.use('/api/admin', authMiddleware, adminRoutes)
+// 404 handler
+app.use('*', (req, res) => {
+  res.status(404).json({
+    success: false,
+    error: 'Route not found'
+  })
+})
+// Error handling middleware
+app.use(errorHandler)
+// Setup Socket.IO handlers
+setupSocketHandlers(io)
+// Initialize database and start server
+async function startServer() {
+  try {
+    // Initialize database connection
+    await initializeDatabase()
+    console.log('Database connected successfully')
+    const PORT = process.env.PORT || 3001
+    const HOST = process.env.HOST || 'localhost'
+    server.listen(PORT, () => {
+      console.log(`🚀 Server running on http://${HOST}:${PORT}`)
+      console.log(`📡 Socket.IO server ready`)
+      console.log(`🌍 Environment: ${process.env.NODE_ENV || 'development'}`)
+    })
+  } catch (error) {
+    console.error('Failed to start server:', error)
+    process.exit(1)
+  }
+}
+// Graceful shutdown
+process.on('SIGTERM', () => {
+  console.log('SIGTERM received, shutting down gracefully')
+  server.close(() => {
+    console.log('Server closed')
+    process.exit(0)
+  })
+})
+process.on('SIGINT', () => {
+  console.log('SIGINT received, shutting down gracefully')
+  server.close(() => {
+    console.log('Server closed')
+    process.exit(0)
+  })
+})
+// Handle uncaught exceptions
+process.on('uncaughtException', (error) => {
+  console.error('Uncaught Exception:', error)
+  process.exit(1)
+})
+process.on('unhandledRejection', (reason, promise) => {
+  console.error('Unhandled Rejection at:', promise, 'reason:', reason)
+  process.exit(1)
+})
+startServer()
+export { app, server, io }

server/src/middleware/auth.ts ADDED Viewed

	@@ -0,0 +1,158 @@

+import { Request, Response, NextFunction } from 'express'
+import jwt from 'jsonwebtoken'
+import { prisma } from '../config/database'
+export interface AuthRequest extends Request {
+  // Use a loose type here to avoid dependency on generated Prisma types
+  user?: any
+}
+export const authMiddleware = async (
+  req: AuthRequest,
+  res: Response,
+  next: NextFunction
+) => {
+  try {
+    const authHeader = req.headers.authorization
+    if (!authHeader || !authHeader.startsWith('Bearer ')) {
+      return res.status(401).json({
+        success: false,
+        error: 'Access token required'
+      })
+    }
+    const token = authHeader.substring(7) // Remove 'Bearer ' prefix
+    if (!token) {
+      return res.status(401).json({
+        success: false,
+        error: 'Access token required'
+      })
+    }
+    // Verify JWT token
+    const decoded = jwt.verify(token, process.env.JWT_SECRET!) as { userId: string }
+    // Get user from database
+    const user = await prisma.user.findUnique({
+      where: { id: decoded.userId },
+      select: {
+        id: true,
+        email: true,
+        username: true,
+        displayName: true,
+        avatar: true,
+        bio: true,
+        isOnline: true,
+        lastSeen: true,
+        isAdmin: true,
+        isVerified: true,
+        createdAt: true,
+        updatedAt: true,
+      }
+    })
+    if (!user) {
+      return res.status(401).json({
+        success: false,
+        error: 'Invalid token - user not found'
+      })
+    }
+    // Attach user to request
+    req.user = user
+    next()
+  } catch (error) {
+    if (error instanceof jwt.JsonWebTokenError) {
+      return res.status(401).json({
+        success: false,
+        error: 'Invalid token'
+      })
+    }
+    if (error instanceof jwt.TokenExpiredError) {
+      return res.status(401).json({
+        success: false,
+        error: 'Token expired'
+      })
+    }
+    console.error('Auth middleware error:', error)
+    return res.status(500).json({
+      success: false,
+      error: 'Authentication failed'
+    })
+  }
+}
+export const adminMiddleware = (
+  req: AuthRequest,
+  res: Response,
+  next: NextFunction
+) => {
+  if (!req.user) {
+    return res.status(401).json({
+      success: false,
+      error: 'Authentication required'
+    })
+  }
+  if (!req.user.isAdmin) {
+    return res.status(403).json({
+      success: false,
+      error: 'Admin access required'
+    })
+  }
+  next()
+}
+export const optionalAuthMiddleware = async (
+  req: AuthRequest,
+  res: Response,
+  next: NextFunction
+) => {
+  try {
+    const authHeader = req.headers.authorization
+    if (!authHeader || !authHeader.startsWith('Bearer ')) {
+      return next()
+    }
+    const token = authHeader.substring(7)
+    if (!token) {
+      return next()
+    }
+    const decoded = jwt.verify(token, process.env.JWT_SECRET!) as { userId: string }
+    const user = await prisma.user.findUnique({
+      where: { id: decoded.userId },
+      select: {
+        id: true,
+        email: true,
+        username: true,
+        displayName: true,
+        avatar: true,
+        bio: true,
+        isOnline: true,
+        lastSeen: true,
+        isAdmin: true,
+        isVerified: true,
+        createdAt: true,
+        updatedAt: true,
+      }
+    })
+    if (user) {
+      req.user = user
+    }
+    next()
+  } catch (error) {
+    // Ignore auth errors for optional auth
+    next()
+  }
+}

server/src/middleware/errorHandler.ts ADDED Viewed

	@@ -0,0 +1,104 @@

+import { Request, Response, NextFunction } from 'express'
+import { Prisma } from '@prisma/client'
+export interface AppError extends Error {
+  statusCode?: number
+  code?: string
+}
+export const errorHandler = (
+  error: AppError,
+  req: Request,
+  res: Response,
+  next: NextFunction
+) => {
+  console.error('Error:', error)
+  // Default error
+  let statusCode = error.statusCode || 500
+  let message = error.message || 'Internal server error'
+  let code = error.code || 'INTERNAL_ERROR'
+  // Prisma errors
+  if (error instanceof Prisma.PrismaClientKnownRequestError) {
+    switch (error.code) {
+      case 'P2002':
+        statusCode = 409
+        message = 'Resource already exists'
+        code = 'DUPLICATE_ERROR'
+        break
+      case 'P2025':
+        statusCode = 404
+        message = 'Resource not found'
+        code = 'NOT_FOUND'
+        break
+      case 'P2003':
+        statusCode = 400
+        message = 'Invalid reference'
+        code = 'INVALID_REFERENCE'
+        break
+      default:
+        statusCode = 400
+        message = 'Database error'
+        code = 'DATABASE_ERROR'
+    }
+  }
+  // Validation errors
+  if (error.name === 'ValidationError') {
+    statusCode = 400
+    code = 'VALIDATION_ERROR'
+  }
+  // JWT errors
+  if (error.name === 'JsonWebTokenError') {
+    statusCode = 401
+    message = 'Invalid token'
+    code = 'INVALID_TOKEN'
+  }
+  if (error.name === 'TokenExpiredError') {
+    statusCode = 401
+    message = 'Token expired'
+    code = 'TOKEN_EXPIRED'
+  }
+  // Multer errors (file upload)
+  if (error.code === 'LIMIT_FILE_SIZE') {
+    statusCode = 413
+    message = 'File too large'
+    code = 'FILE_TOO_LARGE'
+  }
+  if (error.code === 'LIMIT_FILE_COUNT') {
+    statusCode = 413
+    message = 'Too many files'
+    code = 'TOO_MANY_FILES'
+  }
+  // Don't expose internal errors in production
+  if (process.env.NODE_ENV === 'production' && statusCode === 500) {
+    message = 'Internal server error'
+  }
+  res.status(statusCode).json({
+    success: false,
+    error: message,
+    code,
+    ...(process.env.NODE_ENV === 'development' && { stack: error.stack })
+  })
+}
+export const notFoundHandler = (req: Request, res: Response) => {
+  res.status(404).json({
+    success: false,
+    error: 'Route not found',
+    code: 'NOT_FOUND'
+  })
+}
+export const asyncHandler = (fn: Function) => {
+  return (req: Request, res: Response, next: NextFunction) => {
+    Promise.resolve(fn(req, res, next)).catch(next)
+  }
+}