initial commit

app.py

@@ -0,0 +1,229 @@
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect, HTTPException
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import HTMLResponse
+from fastapi.templating import Jinja2Templates
+import json
+import asyncio
+from datetime import datetime
+from typing import Dict, List, Set
+import base64
+import mimetypes
+import os
+
+app = FastAPI(title="Tri-Chat API", description="Real-time chat with WebSocket support")
+
+# Setup templates
+templates = Jinja2Templates(directory="templates")
+
+# Connection Manager to handle WebSocket connections
+class ConnectionManager:
+    def __init__(self):
+        # Store active connections by room
+        self.active_connections: Dict[str, List[Dict]] = {}
+        # Store message history by room (in-memory for demo)
+        self.message_history: Dict[str, List[Dict]] = {}
+        
+    async def connect(self, websocket: WebSocket, room: str, username: str):
+        await websocket.accept()
+        
+        # Initialize room if it doesn't exist
+        if room not in self.active_connections:
+            self.active_connections[room] = []
+            self.message_history[room] = []
+            
+        # Add connection to room
+        connection_info = {
+            "websocket": websocket,
+            "username": username,
+            "joined_at": datetime.now().isoformat()
+        }
+        self.active_connections[room].append(connection_info)
+        
+        # Send join notification
+        join_message = {
+            "type": "system",
+            "message": f"{username} joined the room",
+            "timestamp": datetime.now().isoformat(),
+            "room": room
+        }
+        await self.broadcast_to_room(room, join_message)
+        
+        # Send message history to new user
+        for message in self.message_history[room]:
+            await websocket.send_text(json.dumps(message))
+    
+    def disconnect(self, websocket: WebSocket, room: str):
+        if room in self.active_connections:
+            # Find and remove the connection
+            for conn in self.active_connections[room]:
+                if conn["websocket"] == websocket:
+                    self.active_connections[room].remove(conn)
+                    return conn["username"]
+        return None
+    
+    async def broadcast_to_room(self, room: str, message: dict):
+        if room not in self.active_connections:
+            return
+            
+        # Store message in history
+        self.message_history[room].append(message)
+        
+        # Keep only last 100 messages per room
+        if len(self.message_history[room]) > 100:
+            self.message_history[room] = self.message_history[room][-100:]
+        
+        # Send to all connections in room
+        disconnected = []
+        for connection_info in self.active_connections[room]:
+            try:
+                await connection_info["websocket"].send_text(json.dumps(message))
+            except:
+                disconnected.append(connection_info)
+        
+        # Remove disconnected clients
+        for conn in disconnected:
+            self.active_connections[room].remove(conn)
+    
+    def get_room_users(self, room: str) -> List[str]:
+        if room not in self.active_connections:
+            return []
+        return [conn["username"] for conn in self.active_connections[room]]
+
+# Global connection manager instance
+manager = ConnectionManager()
+
+@app.get("/", response_class=HTMLResponse)
+async def get_chat_page():
+    """Serve the chat HTML page"""
+    try:
+        with open("templates/index.html", "r", encoding="utf-8") as f:
+            html_content = f.read()
+        return HTMLResponse(content=html_content)
+    except FileNotFoundError:
+        return HTMLResponse(
+            content="<h1>Error: templates/index.html not found</h1><p>Please make sure the templates directory exists with index.html</p>",
+            status_code=404
+        )
+
+@app.websocket("/ws/{room}")
+async def websocket_endpoint(websocket: WebSocket, room: str, username: str):
+    """WebSocket endpoint for real-time chat"""
+    
+    # Validate inputs
+    if not username or len(username.strip()) == 0:
+        await websocket.close(code=1008, reason="Username is required")
+        return
+        
+    if not room or len(room.strip()) == 0:
+        room = "global"
+    
+    # Sanitize inputs
+    username = username.strip()[:20]  # Limit username length
+    room = room.strip()[:30]  # Limit room name length
+    
+    await manager.connect(websocket, room, username)
+    
+    try:
+        while True:
+            # Receive message from client
+            data = await websocket.receive_text()
+            message_data = json.loads(data)
+            
+            # Validate message type
+            if message_data.get("type") not in ["text", "file"]:
+                continue
+                
+            # Process text message
+            if message_data["type"] == "text":
+                text_content = message_data.get("text", "").strip()
+                if len(text_content) == 0:
+                    continue
+                    
+                # Sanitize and limit text length
+                text_content = text_content[:500]
+                
+                message = {
+                    "type": "text",
+                    "username": username,
+                    "text": text_content,
+                    "timestamp": datetime.now().isoformat(),
+                    "room": room
+                }
+                
+                await manager.broadcast_to_room(room, message)
+            
+            # Process file message
+            elif message_data["type"] == "file":
+                file_name = message_data.get("fileName", "unknown")[:100]
+                file_type = message_data.get("fileType", "application/octet-stream")
+                file_size = message_data.get("fileSize", 0)
+                file_data = message_data.get("fileData", "")
+                
+                # Validate file size (5MB limit)
+                if file_size > 5 * 1024 * 1024:
+                    await websocket.send_text(json.dumps({
+                        "type": "error",
+                        "message": "File size exceeds 5MB limit"
+                    }))
+                    continue
+                
+                # Validate base64 data
+                try:
+                    base64.b64decode(file_data)
+                except Exception:
+                    await websocket.send_text(json.dumps({
+                        "type": "error", 
+                        "message": "Invalid file data"
+                    }))
+                    continue
+                
+                message = {
+                    "type": "file",
+                    "username": username,
+                    "fileName": file_name,
+                    "fileType": file_type,
+                    "fileSize": file_size,
+                    "fileData": file_data,
+                    "timestamp": datetime.now().isoformat(),
+                    "room": room
+                }
+                
+                await manager.broadcast_to_room(room, message)
+                
+    except WebSocketDisconnect:
+        disconnected_username = manager.disconnect(websocket, room)
+        if disconnected_username:
+            leave_message = {
+                "type": "system",
+                "message": f"{disconnected_username} left the room",
+                "timestamp": datetime.now().isoformat(),
+                "room": room
+            }
+            await manager.broadcast_to_room(room, leave_message)
+
+@app.get("/api/rooms")
+async def get_active_rooms():
+    """Get list of active chat rooms"""
+    rooms = []
+    for room_name, connections in manager.active_connections.items():
+        if connections:  # Only include rooms with active connections
+            rooms.append({
+                "name": room_name,
+                "user_count": len(connections),
+                "users": [conn["username"] for conn in connections]
+            })
+    return {"rooms": rooms}
+
+@app.get("/api/rooms/{room}/users")
+async def get_room_users(room: str):
+    """Get list of users in a specific room"""
+    users = manager.get_room_users(room)
+    return {
+        "room": room,
+        "users": users,
+        "user_count": len(users)
+    }
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)

dockerfile

@@ -0,0 +1,27 @@
+# Use Python 3.11 slim image
+FROM python:3.11-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    gcc \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first for caching
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY . .
+
+# Create non-root user for security
+RUN useradd -m appuser && chown -R appuser /app
+USER appuser
+
+# Hugging Face requires apps to run on port 7860
+CMD uvicorn app:app --host 0.0.0.0 --port 7860

requirements.txt

@@ -0,0 +1,4 @@
+fastapi==0.104.1
+uvicorn[standard]==0.24.0
+websockets==12.0
+python-multipart==0.0.6

templates/index.html

@@ -0,0 +1,1085 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tri-Chat - Premium Chat Experience</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <style>
+        :root {
+            /* Light theme */
+            --primary-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+            --secondary-bg: rgba(255, 255, 255, 0.8);
+            --card-bg: rgba(255, 255, 255, 0.9);
+            --text-primary: #1a202c;
+            --text-secondary: #4a5568;
+            --text-muted: #718096;
+            --border-color: rgba(0, 0, 0, 0.08);
+            --accent-primary: #3b82f6;
+            --accent-secondary: #60a5fa;
+            --accent-success: #10b981;
+            --accent-danger: #ef4444;
+            --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.05);
+            --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
+            --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.12);
+            --blur-light: blur(10px);
+            --blur-medium: blur(20px);
+        }
+
+        [data-theme="dark"] {
+            --primary-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+            --secondary-bg: rgba(30, 41, 59, 0.8);
+            --card-bg: rgba(30, 41, 59, 0.9);
+            --text-primary: #f1f5f9;
+            --text-secondary: #cbd5e1;
+            --text-muted: #94a3b8;
+            --border-color: rgba(255, 255, 255, 0.1);
+            --accent-primary: #3b82f6;
+            --accent-secondary: #60a5fa;
+            --accent-success: #10b981;
+            --accent-danger: #ef4444;
+            --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.3);
+            --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.4);
+            --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.5);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: var(--primary-bg);
+            color: var(--text-primary);
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            font-size: 14px;
+            line-height: 1.5;
+            transition: all 0.3s ease;
+        }
+        
+        .header {
+            background: var(--card-bg);
+            backdrop-filter: var(--blur-medium);
+            padding: 1.5rem;
+            border-bottom: 1px solid var(--border-color);
+            box-shadow: var(--shadow-light);
+            position: relative;
+        }
+
+        .header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+        }
+        
+        .header-top {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1.5rem;
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+
+        .logo i {
+            font-size: 1.5rem;
+            color: var(--accent-primary);
+        }
+        
+        .header h1 {
+            color: var(--text-primary);
+            font-size: 1.5rem;
+            font-weight: 700;
+            letter-spacing: -0.025em;
+        }
+
+        .theme-toggle {
+            background: var(--secondary-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            padding: 0.5rem;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            color: var(--text-secondary);
+        }
+
+        .theme-toggle:hover {
+            background: var(--card-bg);
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-light);
+        }
+        
+        .connection-form {
+            display: flex;
+            gap: 1rem;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        .input-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.25rem;
+            min-width: 180px;
+        }
+
+        .input-group label {
+            font-size: 0.75rem;
+            font-weight: 500;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+        
+        .connection-form input {
+            padding: 0.75rem 1rem;
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            background: var(--secondary-bg);
+            backdrop-filter: var(--blur-light);
+            color: var(--text-primary);
+            font-size: 0.875rem;
+            transition: all 0.2s ease;
+            outline: none;
+        }
+
+        .connection-form input:focus {
+            border-color: var(--accent-primary);
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+        
+        .connection-form input::placeholder {
+            color: var(--text-muted);
+        }
+        
+        .btn {
+            padding: 0.75rem 1.5rem;
+            border: none;
+            border-radius: 12px;
+            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+            color: white;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 0.875rem;
+            transition: all 0.2s ease;
+            position: relative;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            box-shadow: var(--shadow-light);
+        }
+
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+            transition: left 0.5s;
+        }
+
+        .btn:hover::before {
+            left: 100%;
+        }
+        
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-medium);
+        }
+        
+        .btn:active {
+            transform: translateY(0);
+        }
+        
+        .btn:disabled {
+            background: var(--text-muted);
+            cursor: not-allowed;
+            transform: none;
+            opacity: 0.6;
+        }
+
+        .btn-secondary {
+            background: transparent;
+            border: 1px solid var(--border-color);
+            color: var(--text-secondary);
+        }
+
+        .btn-secondary:hover {
+            background: var(--secondary-bg);
+        }
+        
+        .main-content {
+            display: flex;
+            flex: 1;
+            overflow: hidden;
+            gap: 1px;
+        }
+        
+        .sidebar {
+            width: 280px;
+            background: var(--card-bg);
+            backdrop-filter: var(--blur-light);
+            border-right: 1px solid var(--border-color);
+            display: flex;
+            flex-direction: column;
+            transition: all 0.3s ease;
+        }
+
+        .sidebar-header {
+            padding: 1.5rem;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .sidebar-header h3 {
+            color: var(--text-primary);
+            font-size: 1rem;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .sidebar-header i {
+            color: var(--accent-success);
+        }
+        
+        .sidebar-content {
+            flex: 1;
+            padding: 1rem;
+            overflow-y: auto;
+        }
+        
+        .user-list {
+            list-style: none;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+        
+        .user-list li {
+            padding: 0.75rem 1rem;
+            color: var(--text-secondary);
+            background: var(--secondary-bg);
+            border-radius: 8px;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+
+        .user-list li:hover {
+            background: var(--card-bg);
+            transform: translateX(2px);
+        }
+        
+        .user-list li::before {
+            content: '';
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: var(--accent-success);
+            flex-shrink: 0;
+        }
+        
+        .chat-container {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            background: var(--secondary-bg);
+            backdrop-filter: var(--blur-light);
+        }
+        
+        .messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 1.5rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            scroll-behavior: smooth;
+        }
+
+        .messages::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .messages::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .messages::-webkit-scrollbar-thumb {
+            background: var(--border-color);
+            border-radius: 3px;
+        }
+
+        .messages::-webkit-scrollbar-thumb:hover {
+            background: var(--text-muted);
+        }
+        
+        .message {
+            background: var(--card-bg);
+            backdrop-filter: var(--blur-light);
+            border-radius: 16px;
+            padding: 1rem 1.25rem;
+            max-width: 75%;
+            border: 1px solid var(--border-color);
+            box-shadow: var(--shadow-light);
+            position: relative;
+            animation: messageSlide 0.3s ease-out;
+        }
+
+        @keyframes messageSlide {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        .message.own {
+            align-self: flex-end;
+            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+            color: white;
+            border: none;
+        }
+
+        .message.own .username,
+        .message.own .timestamp {
+            color: rgba(255, 255, 255, 0.9);
+        }
+        
+        .message.system {
+            align-self: center;
+            background: var(--secondary-bg);
+            border: 1px solid var(--border-color);
+            font-style: italic;
+            color: var(--text-muted);
+            max-width: 60%;
+            text-align: center;
+            font-size: 0.8rem;
+        }
+        
+        .message-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 0.5rem;
+            font-size: 0.75rem;
+        }
+        
+        .username {
+            font-weight: 600;
+            color: var(--accent-primary);
+        }
+
+        .message.own .username {
+            color: rgba(255, 255, 255, 0.9);
+        }
+        
+        .timestamp {
+            color: var(--text-muted);
+            font-size: 0.7rem;
+        }
+        
+        .message-content {
+            word-wrap: break-word;
+            line-height: 1.4;
+        }
+        
+        .file-preview img {
+            max-width: 200px;
+            max-height: 150px;
+            border-radius: 8px;
+            margin-top: 0.75rem;
+            box-shadow: var(--shadow-light);
+        }
+        
+        .file-download {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-top: 0.75rem;
+            padding: 0.5rem 1rem;
+            background: var(--secondary-bg);
+            border-radius: 8px;
+            color: var(--accent-primary);
+            text-decoration: none;
+            font-size: 0.8rem;
+            transition: all 0.2s ease;
+            border: 1px solid var(--border-color);
+        }
+        
+        .file-download:hover {
+            background: var(--card-bg);
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-light);
+        }
+        
+        .input-area {
+            padding: 1.5rem;
+            background: var(--card-bg);
+            backdrop-filter: var(--blur-medium);
+            border-top: 1px solid var(--border-color);
+        }
+        
+        .input-row {
+            display: flex;
+            gap: 1rem;
+            align-items: flex-end;
+        }
+        
+        #messageInput {
+            flex: 1;
+            padding: 1rem 1.25rem;
+            border: 1px solid var(--border-color);
+            border-radius: 20px;
+            background: var(--secondary-bg);
+            backdrop-filter: var(--blur-light);
+            color: var(--text-primary);
+            resize: none;
+            outline: none;
+            transition: all 0.2s ease;
+            font-family: inherit;
+            max-height: 100px;
+            min-height: 44px;
+        }
+
+        #messageInput:focus {
+            border-color: var(--accent-primary);
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+        
+        #messageInput::placeholder {
+            color: var(--text-muted);
+        }
+        
+        .file-input-wrapper {
+            position: relative;
+        }
+        
+        .file-input-wrapper input[type=file] {
+            position: absolute;
+            opacity: 0;
+            width: 100%;
+            height: 100%;
+            cursor: pointer;
+        }
+        
+        .file-input-label {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 44px;
+            height: 44px;
+            background: var(--secondary-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 50%;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            color: var(--text-secondary);
+        }
+        
+        .file-input-label:hover {
+            background: var(--accent-primary);
+            color: white;
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-light);
+        }
+        
+        .status {
+            padding: 0.75rem 1rem;
+            text-align: center;
+            font-size: 0.8rem;
+            border-radius: 8px;
+            margin-top: 1rem;
+            font-weight: 500;
+        }
+        
+        .status.connected {
+            color: var(--accent-success);
+            background: rgba(16, 185, 129, 0.1);
+            border: 1px solid rgba(16, 185, 129, 0.2);
+        }
+        
+        .status.disconnected {
+            color: var(--accent-danger);
+            background: rgba(239, 68, 68, 0.1);
+            border: 1px solid rgba(239, 68, 68, 0.2);
+        }
+
+        .status.neutral {
+            color: var(--text-muted);
+            background: var(--secondary-bg);
+            border: 1px solid var(--border-color);
+        }
+
+        /* Mobile optimizations */
+        @media (max-width: 768px) {
+            .header {
+                padding: 1rem;
+            }
+
+            .header-top {
+                margin-bottom: 1rem;
+            }
+
+            .header h1 {
+                font-size: 1.25rem;
+            }
+
+            .connection-form {
+                flex-direction: column;
+                gap: 0.75rem;
+                width: 100%;
+            }
+
+            .input-group {
+                width: 100%;
+                min-width: auto;
+            }
+
+            .connection-form input,
+            .btn {
+                width: 100%;
+            }
+            
+            .main-content {
+                flex-direction: column;
+                height: calc(100vh - 200px);
+            }
+            
+            .sidebar {
+                width: 100%;
+                height: 120px;
+                flex-direction: row;
+                border-right: none;
+                border-bottom: 1px solid var(--border-color);
+            }
+
+            .sidebar-header {
+                min-width: 120px;
+                border-right: 1px solid var(--border-color);
+                border-bottom: none;
+            }
+
+            .sidebar-header h3 {
+                font-size: 0.9rem;
+            }
+
+            .sidebar-content {
+                overflow-x: auto;
+                overflow-y: hidden;
+            }
+
+            .user-list {
+                flex-direction: row;
+                white-space: nowrap;
+                padding-bottom: 0.5rem;
+            }
+
+            .user-list li {
+                flex-shrink: 0;
+                font-size: 0.8rem;
+                padding: 0.5rem 0.75rem;
+            }
+            
+            .message {
+                max-width: 90%;
+                padding: 0.75rem 1rem;
+            }
+
+            .messages {
+                padding: 1rem;
+            }
+
+            .input-area {
+                padding: 1rem;
+            }
+
+            .input-row {
+                gap: 0.75rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .header {
+                padding: 0.75rem;
+            }
+
+            .messages {
+                padding: 0.75rem;
+                gap: 0.75rem;
+            }
+
+            .message {
+                padding: 0.75rem;
+                border-radius: 12px;
+            }
+
+            .input-area {
+                padding: 0.75rem;
+            }
+        }
+
+        /* Smooth transitions for theme switching */
+        * {
+            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <div class="header-top">
+            <div class="logo">
+                <i class="fas fa-comments"></i>
+                <h1>Tri-Chat</h1>
+            </div>
+            <button class="theme-toggle" id="themeToggle">
+                <i class="fas fa-moon" id="themeIcon"></i>
+            </button>
+        </div>
+        
+        <div class="connection-form">
+            <div class="input-group">
+                <label for="usernameInput">Your Name</label>
+                <input type="text" id="usernameInput" placeholder="Enter your name" maxlength="20">
+            </div>
+            <div class="input-group">
+                <label for="roomInput">Room</label>
+                <input type="text" id="roomInput" placeholder="global" maxlength="30">
+            </div>
+            <button class="btn" id="connectBtn">
+                <i class="fas fa-plug"></i>
+                Connect
+            </button>
+            <button class="btn btn-secondary" id="disconnectBtn" style="display: none;">
+                <i class="fas fa-sign-out-alt"></i>
+                Disconnect
+            </button>
+        </div>
+        
+        <div class="status neutral" id="status">
+            <i class="fas fa-info-circle"></i>
+            Enter your name and click Connect to start chatting
+        </div>
+    </div>
+    
+    <div class="main-content">
+        <div class="sidebar">
+            <div class="sidebar-header">
+                <h3>
+                    <i class="fas fa-users"></i>
+                    Online
+                </h3>
+            </div>
+            <div class="sidebar-content">
+                <ul class="user-list" id="userList"></ul>
+            </div>
+        </div>
+        
+        <div class="chat-container">
+            <div class="messages" id="messages"></div>
+            
+            <div class="input-area" style="display: none;" id="inputArea">
+                <div class="input-row">
+                    <div class="file-input-wrapper">
+                        <input type="file" id="fileInput" accept="*/*">
+                        <label for="fileInput" class="file-input-label">
+                            <i class="fas fa-paperclip"></i>
+                        </label>
+                    </div>
+                    <textarea id="messageInput" placeholder="Type your message..." maxlength="500" rows="1"></textarea>
+                    <button class="btn" id="sendBtn">
+                        <i class="fas fa-paper-plane"></i>
+                        Send
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class TriChat {
+            constructor() {
+                this.ws = null;
+                this.username = '';
+                this.room = 'global';
+                this.isConnected = false;
+                this.currentTheme = 'light';
+                
+                this.initElements();
+                this.bindEvents();
+                this.initTheme();
+                this.setupMessageInputResize();
+            }
+            
+            initElements() {
+                this.elements = {
+                    usernameInput: document.getElementById('usernameInput'),
+                    roomInput: document.getElementById('roomInput'),
+                    connectBtn: document.getElementById('connectBtn'),
+                    disconnectBtn: document.getElementById('disconnectBtn'),
+                    status: document.getElementById('status'),
+                    messages: document.getElementById('messages'),
+                    messageInput: document.getElementById('messageInput'),
+                    sendBtn: document.getElementById('sendBtn'),
+                    fileInput: document.getElementById('fileInput'),
+                    inputArea: document.getElementById('inputArea'),
+                    userList: document.getElementById('userList'),
+                    themeToggle: document.getElementById('themeToggle'),
+                    themeIcon: document.getElementById('themeIcon')
+                };
+            }
+
+            initTheme() {
+                const savedTheme = localStorage.getItem('tri-chat-theme') || 'light';
+                this.setTheme(savedTheme);
+            }
+
+            setTheme(theme) {
+                this.currentTheme = theme;
+                document.documentElement.setAttribute('data-theme', theme);
+                
+                if (theme === 'dark') {
+                    this.elements.themeIcon.className = 'fas fa-sun';
+                } else {
+                    this.elements.themeIcon.className = 'fas fa-moon';
+                }
+                
+                localStorage.setItem('tri-chat-theme', theme);
+            }
+
+            toggleTheme() {
+                const newTheme = this.currentTheme === 'light' ? 'dark' : 'light';
+                this.setTheme(newTheme);
+            }
+
+            setupMessageInputResize() {
+                this.elements.messageInput.addEventListener('input', () => {
+                    this.elements.messageInput.style.height = 'auto';
+                    this.elements.messageInput.style.height = Math.min(this.elements.messageInput.scrollHeight, 100) + 'px';
+                });
+            }
+            
+            bindEvents() {
+                this.elements.connectBtn.addEventListener('click', () => this.connect());
+                this.elements.disconnectBtn.addEventListener('click', () => this.disconnect());
+                this.elements.sendBtn.addEventListener('click', () => this.sendMessage());
+                this.elements.fileInput.addEventListener('change', (e) => this.handleFileSelect(e));
+                this.elements.themeToggle.addEventListener('click', () => this.toggleTheme());
+                
+                this.elements.messageInput.addEventListener('keypress', (e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault();
+                        this.sendMessage();
+                    }
+                });
+                
+                this.elements.usernameInput.addEventListener('keypress', (e) => {
+                    if (e.key === 'Enter') {
+                        this.connect();
+                    }
+                });
+            }
+            
+            async connect() {
+                const username = this.elements.usernameInput.value.trim();
+                const room = this.elements.roomInput.value.trim() || 'global';
+                
+                if (!username) {
+                    this.showNotification('Please enter your name', 'error');
+                    this.elements.usernameInput.focus();
+                    return;
+                }
+                
+                this.username = username;
+                this.room = room;
+                
+                try {
+                    this.updateStatus('Connecting...', 'neutral');
+                    
+                    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+                    const wsUrl = `${protocol}//${window.location.host}/ws/${room}?username=${encodeURIComponent(username)}`;
+                    
+                    this.ws = new WebSocket(wsUrl);
+                    
+                    this.ws.onopen = () => {
+                        this.isConnected = true;
+                        this.updateUI();
+                        this.updateStatus(`Connected to ${room}`, 'connected');
+                        this.showNotification('Successfully connected!', 'success');
+                    };
+                    
+                    this.ws.onmessage = (event) => {
+                        const message = JSON.parse(event.data);
+                        this.displayMessage(message);
+                        if (message.type === 'user_list') {
+                            this.updateUserList(message.users);
+                        }
+                    };
+                    
+                    this.ws.onclose = () => {
+                        this.isConnected = false;
+                        this.updateUI();
+                        this.updateStatus('Disconnected', 'disconnected');
+                    };
+                    
+                    this.ws.onerror = (error) => {
+                        console.error('WebSocket error:', error);
+                        this.updateStatus('Connection error', 'disconnected');
+                        this.showNotification('Connection failed', 'error');
+                    };
+                    
+                } catch (error) {
+                    console.error('Connection failed:', error);
+                    this.updateStatus('Failed to connect', 'disconnected');
+                    this.showNotification('Failed to connect', 'error');
+                }
+            }
+            
+            disconnect() {
+                if (this.ws) {
+                    this.ws.close();
+                }
+            }
+            
+            updateUI() {
+                if (this.isConnected) {
+                    this.elements.connectBtn.style.display = 'none';
+                    this.elements.disconnectBtn.style.display = 'flex';
+                    this.elements.inputArea.style.display = 'block';
+                    this.elements.usernameInput.disabled = true;
+                    this.elements.roomInput.disabled = true;
+                    this.elements.messageInput.focus();
+                } else {
+                    this.elements.connectBtn.style.display = 'flex';
+                    this.elements.disconnectBtn.style.display = 'none';
+                    this.elements.inputArea.style.display = 'none';
+                    this.elements.usernameInput.disabled = false;
+                    this.elements.roomInput.disabled = false;
+                    this.elements.messages.innerHTML = '';
+                    this.elements.userList.innerHTML = '';
+                }
+            }
+            
+            updateStatus(text, type) {
+                this.elements.status.innerHTML = `
+                    <i class="fas ${type === 'connected' ? 'fa-check-circle' : type === 'disconnected' ? 'fa-times-circle' : 'fa-info-circle'}"></i>
+                    ${text}
+                `;
+                this.elements.status.className = 'status ' + type;
+            }
+
+            showNotification(message, type) {
+                // Simple notification - you could enhance this with a toast library
+                console.log(`${type.toUpperCase()}: ${message}`);
+            }
+
+            updateUserList(users) {
+                this.elements.userList.innerHTML = '';
+                users.forEach(user => {
+                    const li = document.createElement('li');
+                    li.textContent = user;
+                    this.elements.userList.appendChild(li);
+                });
+            }
+            
+            sendMessage() {
+                const text = this.elements.messageInput.value.trim();
+                if (!text || !this.isConnected) return;
+                
+                const message = {
+                    type: 'text',
+                    username: this.username,
+                    text: text,
+                    timestamp: new Date().toISOString(),
+                    room: this.room
+                };
+                
+                this.ws.send(JSON.stringify(message));
+                this.elements.messageInput.value = '';
+                this.elements.messageInput.style.height = 'auto';
+            }
+            
+            async handleFileSelect(event) {
+                const file = event.target.files[0];
+                if (!file) return;
+                
+                if (file.size > 5 * 1024 * 1024) {
+                    this.showNotification('File size must be less than 5MB', 'error');
+                    return;
+                }
+                
+                try {
+                    const base64Data = await this.fileToBase64(file);
+                    
+                    const message = {
+                        type: 'file',
+                        username: this.username,
+                        fileName: file.name,
+                        fileType: file.type,
+                        fileSize: file.size,
+                        fileData: base64Data,
+                        timestamp: new Date().toISOString(),
+                        room: this.room
+                    };
+                    
+                    this.ws.send(JSON.stringify(message));
+                    event.target.value = '';
+                    this.showNotification('File uploaded successfully', 'success');
+                    
+                } catch (error) {
+                    console.error('File upload error:', error);
+                    this.showNotification('Failed to upload file', 'error');
+                }
+            }
+            
+            fileToBase64(file) {
+                return new Promise((resolve, reject) => {
+                    const reader = new FileReader();
+                    reader.onload = () => resolve(reader.result.split(',')[1]);
+                    reader.onerror = reject;
+                    reader.readAsDataURL(file);
+                });
+            }
+            
+            displayMessage(message) {
+                const messageElement = document.createElement('div');
+                messageElement.className = 'message';
+                
+                if (message.type === 'system') {
+                    messageElement.className += ' system';
+                    messageElement.innerHTML = `
+                        <div class="message-content">
+                            <i class="fas fa-info-circle"></i>
+                            ${this.escapeHtml(message.message)}
+                        </div>
+                    `;
+                } else {
+                    if (message.username === this.username) {
+                        messageElement.className += ' own';
+                    }
+                    
+                    const timestamp = new Date(message.timestamp).toLocaleTimeString([], {
+                        hour: '2-digit',
+                        minute: '2-digit'
+                    });
+                    
+                    if (message.type === 'text') {
+                        messageElement.innerHTML = `
+                            <div class="message-header">
+                                <span class="username">${this.escapeHtml(message.username)}</span>
+                                <span class="timestamp">${timestamp}</span>
+                            </div>
+                            <div class="message-content">${this.escapeHtml(message.text)}</div>
+                        `;
+                    } else if (message.type === 'file') {
+                        const downloadUrl = 'data:' + message.fileType + ';base64,' + message.fileData;
+                        let preview = '';
+                        let fileIcon = 'fas fa-file';
+                        
+                        if (message.fileType.startsWith('image/')) {
+                            preview = `<div class="file-preview"><img src="${downloadUrl}" alt="${message.fileName}"></div>`;
+                            fileIcon = 'fas fa-image';
+                        } else if (message.fileType.startsWith('video/')) {
+                            fileIcon = 'fas fa-video';
+                        } else if (message.fileType.startsWith('audio/')) {
+                            fileIcon = 'fas fa-music';
+                        } else if (message.fileType.includes('pdf')) {
+                            fileIcon = 'fas fa-file-pdf';
+                        } else if (message.fileType.includes('document') || message.fileType.includes('text')) {
+                            fileIcon = 'fas fa-file-alt';
+                        }
+                        
+                        messageElement.innerHTML = `
+                            <div class="message-header">
+                                <span class="username">${this.escapeHtml(message.username)}</span>
+                                <span class="timestamp">${timestamp}</span>
+                            </div>
+                            <div class="message-content">
+                                <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
+                                    <i class="${fileIcon}"></i>
+                                    <strong>${this.escapeHtml(message.fileName)}</strong>
+                                </div>
+                                <div style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem;">
+                                    ${this.formatFileSize(message.fileSize)}
+                                </div>
+                                ${preview}
+                                <a href="${downloadUrl}" download="${message.fileName}" class="file-download">
+                                    <i class="fas fa-download"></i>
+                                    Download
+                                </a>
+                            </div>
+                        `;
+                    }
+                }
+                
+                this.elements.messages.appendChild(messageElement);
+                this.elements.messages.scrollTop = this.elements.messages.scrollHeight;
+                
+                // Add subtle animation
+                messageElement.style.opacity = '0';
+                messageElement.style.transform = 'translateY(10px)';
+                
+                requestAnimationFrame(() => {
+                    messageElement.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
+                    messageElement.style.opacity = '1';
+                    messageElement.style.transform = 'translateY(0)';
+                });
+            }
+            
+            escapeHtml(text) {
+                const div = document.createElement('div');
+                div.textContent = text;
+                return div.innerHTML;
+            }
+            
+            formatFileSize(bytes) {
+                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];
+            }
+        }
+        
+        // Initialize the chat application
+        document.addEventListener('DOMContentLoaded', () => {
+            const triChat = new TriChat();
+            
+            // Add some welcome messages for demo
+            if (!triChat.isConnected) {
+                setTimeout(() => {
+                    const welcomeMessage = document.createElement('div');
+                    welcomeMessage.className = 'message system';
+                    welcomeMessage.innerHTML = `
+                        <div class="message-content">
+                            <i class="fas fa-rocket"></i>
+                            Welcome to Tri-Chat! Connect with your name to start chatting.
+                        </div>
+                    `;
+                    triChat.elements.messages.appendChild(welcomeMessage);
+                }, 500);
+            }
+        });
+    </script>
+</body>
+</html>