Update app.py

app.py

@@ -1,5 +1,4 @@
-
-
+```python
 from flask import Flask, render_template_string, request, redirect, url_for, session, flash, jsonify
 from flask_caching import Cache
 import json
@@ -11,6 +10,7 @@ from datetime import datetime, timedelta
 from huggingface_hub import HfApi, hf_hub_download
 from werkzeug.utils import secure_filename
 import random
+from flask_socketio import SocketIO, emit, join_room, leave_room
 
 app = Flask(__name__)
 app.secret_key = os.getenv("FLASK_SECRET_KEY", "verysecretkey")
@@ -25,13 +25,16 @@ os.makedirs(UPLOAD_FOLDER, exist_ok=True)
 cache = Cache(app, config={'CACHE_TYPE': 'simple'})
 logging.basicConfig(level=logging.INFO)
 
+socketio = SocketIO(app)
+
 def initialize_data_structure(data):
     if not isinstance(data, dict):
         logging.warning("Data is not a dict, initializing empty database")
-        return {'posts': [], 'users': {}}
+        return {'posts': [], 'users': {}, 'messages': {}}
 
     data.setdefault('posts', [])
     data.setdefault('users', {})
+    data.setdefault('messages', {})
 
     for post in data['posts']:
         post.setdefault('likes', [])
@@ -56,7 +59,7 @@ def load_data():
             with open(DATA_FILE, 'r', encoding='utf-8') as file:
                 data = json.load(file)
         else:
-             data = {'posts': [], 'users': {}}
+             data = {'posts': [], 'users': {}, 'messages': {}}
 
         data = initialize_data_structure(data)
         logging.info("Data loaded successfully")
@@ -438,6 +441,112 @@ textarea {
     border: 1px solid var(--primary);
 }
 
+.chat-popup {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 320px;
+    background: var(--card-bg);
+    border: 1px solid var(--primary);
+    border-radius: 10px;
+    box-shadow: var(--shadow);
+    display: flex;
+    flex-direction: column;
+    z-index: 1000;
+    max-height: 400px;
+    overflow: hidden;
+}
+
+.chat-header {
+    background: var(--primary);
+    color: white;
+    padding: 10px;
+    font-weight: bold;
+    text-align: center;
+    cursor: pointer;
+}
+
+.chat-body {
+    flex-grow: 1;
+    padding: 10px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.message {
+    background: var(--glass-bg);
+    padding: 8px;
+    border-radius: 8px;
+    margin-bottom: 5px;
+    word-wrap: break-word;
+}
+
+.message .sender {
+    font-weight: bold;
+    color: var(--secondary);
+    margin-bottom: 3px;
+}
+
+.chat-input-area {
+    padding: 10px;
+    border-top: 1px solid var(--glass-bg);
+}
+
+.chat-input {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid var(--glass-bg);
+    border-radius: 8px;
+    background: var(--background-dark);
+    color: var(--text-light);
+    resize: none;
+    min-height: 40px;
+}
+
+.chat-input:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px rgba(255, 31, 143, 0.3);
+}
+
+.online-users {
+    position: fixed;
+    top: 80px;
+    right: 20px;
+    background: var(--card-bg);
+    border: 1px solid var(--primary);
+    border-radius: 10px;
+    box-shadow: var(--shadow);
+    width: 200px;
+    padding: 10px;
+    z-index: 999;
+}
+
+.online-users h3 {
+    font-size: 1.2em;
+    color: var(--primary);
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+.online-user {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 5px;
+    border-bottom: 1px solid var(--glass-bg);
+}
+
+.online-user:last-child {
+    border-bottom: none;
+}
+
+.online-user-name {
+    color: var(--text-light);
+    font-size: 0.9em;
+}
+
 @keyframes zoomIn {
     from { opacity: 0; transform: scale(0.8); }
     to { opacity: 1; transform: scale(1); }
@@ -462,6 +571,15 @@ textarea {
     .theme-toggle {
         top: 70px;
     }
+    .chat-popup {
+        bottom: 10px;
+        right: 10px;
+        width: 90%;
+        max-width: 400px;
+    }
+    .online-users {
+        display: none;
+    }
 }
 @media (max-width: 480px) {
     .nav-brand { font-size: 1.4em; }
@@ -483,6 +601,7 @@ NAV_HTML = '''
             <a href="{{ url_for('profile') }}" class="nav-link {% if request.endpoint == 'profile' %}active{% endif %}"><span>😈</span> Profile ({{ username }}) <span class="status-dot {{ 'online' if is_online else 'offline' }}"></span></a>
             <a href="{{ url_for('upload') }}" class="nav-link {% if request.endpoint == 'upload' %}active{% endif %}"><span>📤</span> Upload Story</a>
             <a href="{{ url_for('users') }}" class="nav-link {% if request.endpoint == 'users' %}active{% endif %}"><span>👀</span> Users <span class="badge">{{ user_count }}</span></a>
+            <a href="{{ url_for('messages') }}" class="nav-link {% if request.endpoint == 'messages' %}active{% endif %}"><span>💬</span> Messages</a>
             <a href="{{ url_for('logout') }}" class="nav-link logout-btn"><span>🚪</span> Logout</a>
         {% else %}
             <a href="{{ url_for('login') }}" class="nav-link {% if request.endpoint == 'login' %}active{% endif %}"><span>🔑</span> Login</a>
@@ -1071,7 +1190,7 @@ def feed():
                         <h2>{{ story['title'] }}</h2>
                         <p>{{ story['description'] | truncate(100) }}</p>
                         <p>By: <a href="{{ url_for('user_profile', username=story['uploader']) }}" class="uploader-link">{{ story['uploader'] }}</a>
-                           <span class="status-dot {{ 'online' if is_user_online(story['uploader']) else 'offline' }}"></span>
+                           <span class="status-dot {{ 'online' if is_user_online(data, story['uploader']) else 'offline' }}"></span>
                            <br><small>{{ story['upload_date'] }}</small>
                         </p>
                      </div>
@@ -1580,20 +1699,6 @@ def profile():
             </div>
         </div>
 
-        <div class="edit-form">
-            <h2 class="section-title">Edit Profile</h2>
-            <form method="POST" enctype="multipart/form-data">
-                <input type="hidden" name="update_profile" value="1">
-                <label for="bio">Bio (max 500 chars):</label>
-                <textarea id="bio" name="bio" placeholder="Tell us about yourself..." maxlength="500">{{ bio }}</textarea>
-                 <label for="link">Website/Link (max 200 chars):</label>
-                <input id="link" type="text" name="link" placeholder="https://yourlink.com" value="{{ link }}" maxlength="200">
-                <label for="avatar">Change Avatar (JPG, PNG, GIF):</label>
-                <input id="avatar" type="file" name="avatar" accept="image/png, image/jpeg, image/gif">
-                <button type="submit" class="btn btn-secondary" style="margin-top: 10px;">Save Changes</button>
-            </form>
-        </div>
-
         <h2 class="section-title">Your Stories</h2>
         <div class="story-grid">
             {% for story in user_stories %}
@@ -2742,7 +2847,8 @@ def user_profile(username):
         .story-preview-link { display: block; text-decoration: none; color: inherit; }
         .story-preview { width: 100%; height: 180px; object-fit: cover; display: block; background-color: #222; loading: lazy; }
         .story-item-info { padding: 15px; }
-        .story-item h3 { font-size: 1.15em; font-weight: 600; margin-bottom: 8px; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .story-item h3 { font-size: 1.15em; }
+ font-weight: 600; margin-bottom: 8px; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
         .story-item p.description { font-size: 0.9em; color: var(--text-dark); margin-bottom: 10px; height: 3.6em; overflow: hidden; }
         .story-item p.date { font-size: 0.8em; color: var(--text-dark); margin-bottom: 12px; }
          .story-item p.stats { font-size: 0.8em; color: var(--text-dark); }
@@ -2902,7 +3008,6 @@ def user_profile(username):
                                 profile_user_online=profile_user_online,
                                 random=random)
 
-
 @app.route('/like/<story_id>', methods=['POST'])
 def like_story(story_id):
     if 'username' not in session:
@@ -2941,7 +3046,6 @@ def like_story(story_id):
              if username not in story['likes']: story['likes'].append(username)
         return jsonify({'message': 'Failed to save like'}), 500
 
-
 @app.route('/jerk_off/<story_id>', methods=['POST'])
 def jerk_off_story(story_id):
     data = load_data()
@@ -2968,7 +3072,6 @@ def jerk_off_story(story_id):
 
 @app.route('/view/<story_id>', methods=['POST'])
 def increment_view(story_id):
-
      data = load_data()
      story_index = next((index for (index, d) in enumerate(data.get('posts',[])) if d.get('id') == story_id), None)
      if story_index is None:
@@ -2990,8 +3093,369 @@ def increment_view(story_id):
          story['views'] -= 1
          return jsonify({'message': 'Failed to save view count'}), 500
 
+@app.route('/messages')
+def messages():
+    if 'username' not in session:
+        flash('Login to view messages!', 'error')
+        return redirect(url_for('login'))
+
+    username = session['username']
+    data = load_data()
+    user_count = len(data.get('users', {}))
+    is_online = is_user_online(data, username)
+
+    online_users = [user for user in data['users'] if is_user_online(data, user) and user != username]
+    online_users.sort()
+
+    html = '''
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Messages - Adusis - BBC QoS hub</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <style>
+''' + BASE_STYLE + '''
+        .container { max-width: 1200px; }
+        h1 {
+            font-size: 2em;
+            font-weight: 700;
+            margin-bottom: 25px;
+            color: var(--primary);
+            text-shadow: 0 0 8px var(--primary);
+             border-bottom: 1px solid var(--secondary);
+             padding-bottom: 10px;
+        }
+        .messages-container {
+            display: flex;
+            gap: 20px;
+        }
+         .chat-list {
+            flex: 0 0 250px;
+            background: var(--card-bg);
+            border-radius: 12px;
+            box-shadow: var(--shadow);
+            padding: 20px;
+            border: 1px solid var(--primary);
+            height: 600px;
+            overflow-y: auto;
+        }
+        body.dark .chat-list { background: var(--card-bg); }
+        .chat-list h2 {
+            font-size: 1.4em;
+            color: var(--secondary);
+            margin-bottom: 15px;
+            padding-bottom: 8px;
+            border-bottom: 1px solid var(--glass-bg);
+        }
+        .chat-user {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 10px;
+            border-radius: 8px;
+            transition: var(--transition);
+            text-decoration: none;
+            color: var(--text-light);
+        }
+        .chat-user:hover, .chat-user.active-chat {
+            background: var(--glass-bg);
+            transform: translateX(5px);
+        }
+        .chat-user-name {
+            font-weight: 500;
+            font-size: 1.05em;
+            flex-grow: 1;
+        }
+        .chat-window {
+            flex: 1;
+            background: var(--card-bg);
+            border-radius: 12px;
+            box-shadow: var(--shadow);
+            border: 1px solid var(--secondary);
+             display: flex;
+             flex-direction: column;
+             height: 600px;
+        }
+        body.dark .chat-window { background: var(--card-bg); }
+        .chat-header {
+            background: var(--secondary);
+            color: white;
+            padding: 15px;
+            font-weight: bold;
+            font-size: 1.2em;
+            border-radius: 12px 12px 0 0;
+        }
+        .chat-body {
+            flex-grow: 1;
+            padding: 20px;
+            overflow-y: auto;
+             display: flex;
+             flex-direction: column;
+             gap: 10px;
+        }
+        .message {
+            background: var(--glass-bg);
+            padding: 10px;
+            border-radius: 8px;
+            max-width: 80%;
+            word-wrap: break-word;
+        }
+        .message.sent {
+            align-self: flex-end;
+            background: var(--primary);
+            color: white;
+        }
+        .message .sender {
+            font-weight: bold;
+            margin-bottom: 5px;
+            display: block;
+            font-size: 0.9em;
+        }
+        .chat-input-area {
+            padding: 15px;
+            border-top: 1px solid var(--glass-bg);
+        }
+        .chat-input {
+            width: 100%;
+            padding: 12px 15px;
+            border: 1px solid var(--glass-bg);
+            border-radius: 8px;
+            background: var(--background-dark);
+            color: var(--text-light);
+            resize: none;
+            min-height: 50px;
+        }
+        .chat-input:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(255, 31, 143, 0.3);
+        }
+        .no-messages {
+            color: var(--text-dark);
+            text-align: center;
+            padding: 20px;
+        }
+         .user-avatar {
+            width: 35px;
+            height: 35px;
+            border-radius: 50%;
+            object-fit: cover;
+            border: 2px solid var(--primary);
+            flex-shrink: 0;
+            loading: lazy;
+        }
+         .user-avatar-placeholder {
+            width: 35px;
+            height: 35px;
+            border-radius: 50%;
+             background: linear-gradient(45deg, var(--primary), var(--secondary));
+             display: flex;
+             align-items: center;
+             justify-content: center;
+             font-size: 16px;
+             color: white;
+             font-weight: bold;
+             flex-shrink: 0;
+         }
+
+          @media (max-width: 900px) {
+             .container {
+                 margin-left: auto;
+                 margin-right: auto;
+             }
+              .messages-container {
+                 flex-direction: column;
+                 gap: 15px;
+             }
+             .chat-list, .chat-window {
+                 width: 100%;
+                 height: auto;
+             }
+        }
+    </style>
+</head>
+<body class="dark">
+    <button class="menu-btn" onclick="toggleSidebar()">☰</button>
+    ''' + NAV_HTML + '''
+    <button class="theme-toggle" onclick="toggleTheme()">🎨</button>
+    <div class="container">
+        <h1>Messages</h1>
+        <div class="messages-container">
+             <div class="chat-list">
+                 <h2>Users</h2>
+                 {% if online_users %}
+                     {% for other_user in online_users %}
+                         <a href="{{ url_for('messages', receiver=other_user) }}" class="chat-user {% if receiver == other_user %}active-chat{% endif %}">
+                             {% if data['users'][other_user].get('avatar') %}
+                                 <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ data['users'][other_user]['avatar'] }}?rand={{ random.randint(1,1000) }}" alt="{{ other_user }} Avatar" class="user-avatar" loading="lazy">
+                             {% else %}
+                                 <div class="user-avatar-placeholder">{{ other_user[0]|upper }}</div>
+                             {% endif %}
+                             <span class="chat-user-name">{{ other_user }}</span>
+                         </a>
+                     {% endfor %}
+                 {% else %}
+                     <p class="no-messages">No users online to chat with.</p>
+                 {% endif %}
+             </div>
+             <div class="chat-window">
+                {% if receiver %}
+                     <div class="chat-header">Chat with {{ receiver }}</div>
+                     <div class="chat-body" id="chat-body">
+                         {% set messages = get_messages(data, username, receiver) %}
+                         {% if messages %}
+                             {% for message in messages %}
+                                 <div class="message {% if message['sender'] == username %}sent{% endif %}">
+                                     <span class="sender">{{ message['sender'] }}</span>
+                                     {{ message['text'] }}
+                                 </div>
+                             {% endfor %}
+                         {% else %}
+                             <p class="no-messages">No messages yet. Start the conversation!</p>
+                         {% endif %}
+                     </div>
+                     <div class="chat-input-area">
+                         <textarea class="chat-input" id="message-input" placeholder="Type your message..."></textarea>
+                         <button class="btn btn-secondary" onclick="sendMessage('{{ username }}', '{{ receiver }}')">Send</button>
+                     </div>
+                 {% else %}
+                     <div class="no-messages" style="display: flex; flex-grow: 1; align-items: center; justify-content: center;">Select a user to start chatting.</div>
+                 {% endif %}
+             </div>
+        </div>
+    </div>
+
+    <script>
+         function toggleSidebar() {
+            const sidebar = document.getElementById('sidebar');
+            sidebar.classList.toggle('active');
+            sidebar.classList.toggle('hidden', !sidebar.classList.contains('active'));
+            adjustContainerMargin();
+        }
+        function toggleTheme() {
+            document.body.classList.toggle('dark');
+            localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
+        }
+         function adjustContainerMargin() {
+            const sidebar = document.getElementById('sidebar');
+            const container = document.querySelector('.container');
+             if (!container) return;
+
+            if (window.innerWidth > 900) {
+                 const isActive = sidebar.classList.contains('active');
+                 container.style.marginLeft = isActive ? '300px' : 'auto';
+            } else {
+                container.style.marginLeft = 'auto';
+            }
+         }
+
+        window.onload = () => {
+             if (window.innerWidth > 900) {
+                 document.getElementById('sidebar').classList.add('active');
+            } else {
+                 document.getElementById('sidebar').classList.add('hidden');
+            }
+            adjustContainerMargin();
+             const chatBody = document.getElementById('chat-body');
+             if (chatBody) {
+                 chatBody.scrollTop = chatBody.scrollHeight;
+             }
+         };
+         window.onresize = adjustContainerMargin;
+
+        function sendMessage(sender, receiver) {
+             const messageInput = document.getElementById('message-input');
+             const messageText = messageInput.value.trim();
+             if (messageText) {
+                 socket.emit('send_message', { sender: sender, receiver: receiver, text: messageText });
+                 messageInput.value = '';
+             }
+        }
+
+        const socket = io();
+
+        socket.on('connect', () => {
+             console.log('Connected to WebSocket');
+        });
+
+        socket.on('receive_message', (data) => {
+             if ('{{ receiver }}' === data.sender || '{{ receiver }}' === data.receiver) {
+                const chatBody = document.getElementById('chat-body');
+                 const messageElement = document.createElement('div');
+                 messageElement.classList.add('message');
+                 if (data.sender === '{{ username }}') {
+                     messageElement.classList.add('sent');
+                 }
+                 messageElement.innerHTML = `<span class="sender">${data.sender}</span>${data.text}`;
+                 chatBody.appendChild(messageElement);
+                 chatBody.scrollTop = chatBody.scrollHeight;
+             }
+         });
+
+    </script>
+</body>
+</html>
+'''
+    receiver = request.args.get('receiver')
+    return render_template_string(html,
+                                username=username,
+                                is_authenticated=True,
+                                repo_id=REPO_ID,
+                                user_count=user_count,
+                                is_online=is_online,
+                                online_users=online_users,
+                                receiver=receiver,
+                                data=data,
+                                get_messages=get_messages,
+                                random=random)
+
+def get_messages(data, sender, receiver):
+    messages = []
+    if sender in data.get('messages', {}) and receiver in data['messages']:
+        messages = data['messages'][sender].get(receiver, [])
+    elif receiver in data.get('messages', {}) and sender in data['messages']:
+        messages = data['messages'][receiver].get(sender, [])
+    return messages
+
+@socketio.on('send_message')
+def handle_send_message(data):
+    sender = data['sender']
+    receiver = data['receiver']
+    text = data['text']
+
+    data_ = load_data()
+
+    if sender not in data_.get('messages', {}):
+        data_['messages'][sender] = {}
+    if receiver not in data_['messages'][sender]:
+        data_['messages'][sender][receiver] = []
+
+    data_['messages'][sender][receiver].append({'sender': sender, 'text': text})
+    try:
+        save_data(data_)
+        emit('receive_message', data, room=sender)
+        emit('receive_message', data, room=receiver)
+    except Exception as e:
+        logging.error(f"Error saving message from {sender} to {receiver}: {e}")
+
+@socketio.on('join')
+def on_join(data):
+    username = data['username']
+    room = data['room']
+    join_room(room)
+    logging.info(f"{username} has joined room {room}")
+
+@socketio.on('leave')
+def on_leave(data):
+    username = data['username']
+    room = data['room']
+    leave_room(room)
+    logging.info(f"{username} has left room {room}")
+
 if __name__ == '__main__':
     backup_thread = threading.Thread(target=periodic_backup, daemon=True)
     backup_thread.start()
-    app.run(debug=False, host='0.0.0.0', port=7860)
-
+    socketio.run(app, debug=False, host='0.0.0.0', port=7860)