Update app.py

app.py

@@ -1,13 +1,125 @@
 import os
 import json
 import uuid
+import mimetypes
 from datetime import datetime
-from flask import Flask, Response, request, jsonify
+import threading
+import time
+import logging
+
+from flask import Flask, Response, request, jsonify, send_from_directory
 from werkzeug.security import generate_password_hash, check_password_hash
+from werkzeug.utils import secure_filename
+from dotenv import load_dotenv
+from huggingface_hub import HfApi, hf_hub_download
+from huggingface_hub.utils import RepositoryNotFoundError, HfHubHTTPError
+
+load_dotenv()
 
 app = Flask(__name__)
 
 DB_FILE = 'db.json'
+UPLOAD_FOLDER = 'uploads'
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+
+REPO_ID = "Kgshop/virton"
+HF_TOKEN = os.getenv("HF_TOKEN")
+
+SYNC_FILES_AND_DIRS = [DB_FILE, 'files']
+
+logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
+
+def download_from_hf(retries=3, delay=5):
+    if not HF_TOKEN:
+        logging.warning("HF_TOKEN not set. Download might fail for private repos.")
+        return False
+
+    api = HfApi()
+    try:
+        all_files = [f.path for f in api.list_repo_files(repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)]
+    except (RepositoryNotFoundError, HfHubHTTPError) as e:
+        logging.error(f"Could not list files in repo {REPO_ID}. Error: {e}")
+        return False
+    
+    # Download db.json first
+    if DB_FILE in all_files:
+        logging.info(f"Attempting to download {DB_FILE} from {REPO_ID}...")
+        try:
+            hf_hub_download(
+                repo_id=REPO_ID,
+                filename=DB_FILE,
+                repo_type="dataset",
+                token=HF_TOKEN,
+                local_dir=".",
+                local_dir_use_symlinks=False,
+                force_download=True
+            )
+            logging.info(f"Successfully downloaded {DB_FILE}.")
+        except Exception as e:
+            logging.error(f"Failed to download {DB_FILE}: {e}")
+            return False
+    else:
+        logging.warning(f"{DB_FILE} not found on repo, will use/create local version.")
+
+    # Download files from the 'files' directory
+    files_dir_path = os.path.join(app.config['UPLOAD_FOLDER'])
+    os.makedirs(files_dir_path, exist_ok=True)
+    repo_files_dir = "files/"
+    
+    for file_path in all_files:
+        if file_path.startswith(repo_files_dir):
+            local_file_path = os.path.join(files_dir_path, os.path.basename(file_path))
+            if not os.path.exists(local_file_path):
+                logging.info(f"Downloading missing file {file_path}...")
+                try:
+                    hf_hub_download(
+                        repo_id=REPO_ID,
+                        filename=file_path,
+                        repo_type="dataset",
+                        token=HF_TOKEN,
+                        local_dir=files_dir_path,
+                        local_dir_use_symlinks=False
+                    )
+                    # hf_hub_download saves with full path, we need to rename it
+                    downloaded_full_path = os.path.join(files_dir_path, file_path)
+                    if os.path.exists(downloaded_full_path):
+                       os.rename(downloaded_full_path, local_file_path)
+                       # Clean up empty directories if any
+                       if os.path.exists(os.path.join(files_dir_path, 'files')):
+                           os.rmdir(os.path.join(files_dir_path, 'files'))
+                except Exception as e:
+                    logging.error(f"Error downloading repo file {file_path}: {e}")
+
+    logging.info("Hugging Face download sync finished.")
+    return True
+
+def upload_to_hf(path_or_fileobj, path_in_repo):
+    if not HF_TOKEN:
+        logging.warning("HF_TOKEN not set. Skipping upload to Hugging Face.")
+        return
+    try:
+        api = HfApi()
+        api.upload_file(
+            path_or_fileobj=path_or_fileobj,
+            path_in_repo=path_in_repo,
+            repo_id=REPO_ID,
+            repo_type="dataset",
+            token=HF_TOKEN,
+            commit_message=f"Sync {os.path.basename(path_in_repo)} {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
+        )
+        logging.info(f"File {path_in_repo} successfully uploaded to Hugging Face.")
+    except Exception as e:
+        logging.error(f"Error uploading file {path_in_repo} to Hugging Face: {e}")
+
+def periodic_backup():
+    backup_interval = 1800 
+    logging.info(f"Setting up periodic backup every {backup_interval} seconds.")
+    while True:
+        time.sleep(backup_interval)
+        logging.info("Starting periodic backup of DB_FILE...")
+        upload_to_hf(path_or_fileobj=DB_FILE, path_in_repo=DB_FILE)
+        logging.info("Periodic backup finished.")
 
 def init_db():
     if not os.path.exists(DB_FILE):
@@ -17,6 +129,7 @@ def init_db():
                 "chatrooms": {},
                 "messages": {}
             }, f, indent=4)
+        upload_to_hf(DB_FILE, DB_FILE)
 
 def read_db():
     with open(DB_FILE, 'r') as f:
@@ -25,6 +138,7 @@ def read_db():
 def write_db(data):
     with open(DB_FILE, 'w') as f:
         json.dump(data, f, indent=4)
+    upload_to_hf(DB_FILE, DB_FILE)
 
 @app.route('/')
 def index():
@@ -57,406 +171,90 @@ def index():
                 --font-family: 'Inter', sans-serif;
             }
 
-            * {
-                box-sizing: border-box;
-                margin: 0;
-                padding: 0;
-                -webkit-tap-highlight-color: transparent;
-            }
-
-            html {
-                font-size: 16px;
-            }
-
-            body {
-                font-family: var(--font-family);
-                background-color: var(--bg-primary);
-                color: var(--text-primary);
-                overflow: hidden;
-                height: 100vh;
-                width: 100vw;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
-
-            .main-container {
-                width: 100%;
-                height: 100%;
-                display: flex;
-                flex-direction: column;
-                transition: opacity 0.3s ease;
-            }
-
-            #login-view {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                text-align: center;
-                width: 100%;
-                height: 100%;
-                background: radial-gradient(circle, #1a2a3a 0%, var(--bg-primary) 70%);
-            }
-            #login-view img {
-                width: 100px;
-                height: 100px;
-                margin-bottom: 24px;
-                filter: drop-shadow(0 0 15px rgba(0, 136, 204, 0.5));
-            }
-            #login-view h1 {
-                font-size: 2.8rem;
-                font-weight: 700;
-                background: linear-gradient(45deg, var(--accent-blue-light), var(--accent-blue));
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-                margin-bottom: 12px;
-            }
-            #login-view p {
-                font-size: 1.1rem;
-                color: var(--text-secondary);
-                margin-bottom: 40px;
-            }
-
-            #app-view {
-                display: none;
-                width: 100%;
-                height: 100%;
-            }
-            
-            #chatroom-list-view {
-                display: flex;
-                flex-direction: column;
-                height: 100%;
-                width: 100%;
-                background-color: var(--bg-secondary);
-            }
-            
-            .list-header {
-                padding: 16px;
-                border-bottom: 1px solid var(--border-color);
-                flex-shrink: 0;
-            }
-            .list-header-top {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                margin-bottom: 16px;
-            }
-            .list-header-top h2 {
-                font-size: 1.5rem;
-                font-weight: 600;
-            }
-            
-            .user-profile {
-                padding: 12px;
-                background-color: var(--bg-tertiary);
-                border-radius: 8px;
-                margin-bottom: 16px;
-            }
-            #user-wallet, #user-nickname {
-                font-size: 0.9rem;
-                color: var(--text-secondary);
-                margin-bottom: 8px;
-                word-break: break-all;
-            }
-            
+            * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
+            html { font-size: 16px; }
+            body { font-family: var(--font-family); background-color: var(--bg-primary); color: var(--text-primary); overflow: hidden; height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; }
+            .main-container { width: 100%; height: 100%; display: flex; flex-direction: column; transition: opacity 0.3s ease; }
+            #login-view { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%; background: radial-gradient(circle, #1a2a3a 0%, var(--bg-primary) 70%); }
+            #login-view img { width: 100px; height: 100px; margin-bottom: 24px; filter: drop-shadow(0 0 15px rgba(0, 136, 204, 0.5)); }
+            #login-view h1 { font-size: 2.8rem; font-weight: 700; background: linear-gradient(45deg, var(--accent-blue-light), var(--accent-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 12px; }
+            #login-view p { font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 40px; }
+            #app-view { display: none; width: 100%; height: 100%; }
+            #chatroom-list-view { display: flex; flex-direction: column; height: 100%; width: 100%; background-color: var(--bg-secondary); }
+            .list-header { padding: 16px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
+            .list-header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
+            .list-header-top h2 { font-size: 1.5rem; font-weight: 600; }
+            .user-profile { padding: 12px; background-color: var(--bg-tertiary); border-radius: 8px; margin-bottom: 16px; }
+            #user-wallet, #user-nickname { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 8px; word-break: break-all; }
             .username-form { display: flex; gap: 8px; }
-            .username-input {
-                flex-grow: 1;
-                background-color: var(--bg-primary);
-                border: 1px solid var(--border-color);
-                color: var(--text-primary);
-                border-radius: 6px;
-                padding: 8px 12px;
-                font-size: 0.9rem;
-            }
+            .username-input { flex-grow: 1; background-color: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 6px; padding: 8px 12px; font-size: 0.9rem; }
             .username-input:focus { outline: none; border-color: var(--accent-blue); }
-
-            .action-btn {
-                background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-light));
-                color: white;
-                border: none;
-                padding: 10px 16px;
-                border-radius: 6px;
-                cursor: pointer;
-                font-weight: 500;
-                transition: transform 0.2s ease, box-shadow 0.2s ease;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                gap: 8px;
-            }
-            .action-btn:hover {
-                transform: translateY(-2px);
-                box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
-            }
-            .action-btn.small {
-                padding: 8px 12px;
-                font-size: 0.9rem;
-            }
-            
-            #chatroom-list {
-                flex-grow: 1;
-                overflow-y: auto;
-            }
-            .chatroom-item {
-                display: flex;
-                align-items: center;
-                gap: 12px;
-                padding: 12px 16px;
-                cursor: pointer;
-                border-bottom: 1px solid var(--border-color);
-                transition: background-color 0.2s ease;
-            }
+            .action-btn { background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-light)); color: white; border: none; padding: 10px 16px; border-radius: 6px; cursor: pointer; font-weight: 500; transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 8px; }
+            .action-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3); }
+            .action-btn.small { padding: 8px 12px; font-size: 0.9rem; }
+            #chatroom-list { flex-grow: 1; overflow-y: auto; }
+            .chatroom-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--border-color); transition: background-color 0.2s ease; }
             .chatroom-item:hover { background-color: var(--bg-hover); }
-
-            .avatar {
-                width: 40px;
-                height: 40px;
-                border-radius: 50%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-weight: 600;
-                color: white;
-                flex-shrink: 0;
-            }
-            .chatroom-info {
-                flex-grow: 1;
-                overflow: hidden;
-            }
-            .chatroom-name {
-                font-weight: 500;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-            .lock-icon {
-                width: 16px;
-                height: 16px;
-                fill: var(--text-secondary);
-                flex-shrink: 0;
-            }
-
-            #chat-window-view {
-                display: none;
-                flex-direction: column;
-                height: 100%;
-                width: 100%;
-                background-color: var(--bg-primary);
-            }
-            
-            .chat-header {
-                display: flex;
-                align-items: center;
-                gap: 12px;
-                padding: 12px 16px;
-                background-color: var(--bg-secondary);
-                border-bottom: 1px solid var(--border-color);
-                flex-shrink: 0;
-            }
-            .back-btn {
-                background: none;
-                border: none;
-                cursor: pointer;
-                display: none;
-            }
-            .back-btn svg {
-                width: 24px;
-                height: 24px;
-                fill: var(--text-primary);
-            }
-            #chat-header-title {
-                font-size: 1.2rem;
-                font-weight: 600;
-            }
-
-            #messages-container {
-                flex-grow: 1;
-                padding: 16px;
-                overflow-y: auto;
-                display: flex;
-                flex-direction: column;
-                gap: 12px;
-            }
-
-            .message {
-                display: flex;
-                gap: 10px;
-                max-width: 80%;
-            }
-            .message .avatar {
-                width: 36px;
-                height: 36px;
-                align-self: flex-end;
-            }
-            .message-content {
-                display: flex;
-                flex-direction: column;
-                gap: 4px;
-            }
-            .message-sender {
-                font-size: 0.8rem;
-                font-weight: 500;
-                color: var(--text-secondary);
-                word-break: break-all;
-                cursor: pointer;
-            }
-            .message-bubble {
-                padding: 10px 14px;
-                border-radius: 18px;
-                line-height: 1.4;
-                word-wrap: break-word;
-            }
-
+            .avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: white; flex-shrink: 0; }
+            .chatroom-info { flex-grow: 1; overflow: hidden; }
+            .chatroom-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+            .lock-icon { width: 16px; height: 16px; fill: var(--text-secondary); flex-shrink: 0; }
+            #chat-window-view { display: none; flex-direction: column; height: 100%; width: 100%; background-color: var(--bg-primary); }
+            .chat-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background-color: var(--bg-secondary); border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
+            .back-btn { background: none; border: none; cursor: pointer; display: none; }
+            .back-btn svg { width: 24px; height: 24px; fill: var(--text-primary); }
+            #chat-header-title { font-size: 1.2rem; font-weight: 600; }
+            #messages-container { flex-grow: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
+            .message { display: flex; gap: 10px; max-width: 80%; }
+            .message .avatar { width: 36px; height: 36px; align-self: flex-end; }
+            .message-content { display: flex; flex-direction: column; gap: 4px; }
+            .message-sender { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); word-break: break-all; cursor: pointer; }
+            .message-bubble { padding: 10px 14px; border-radius: 18px; line-height: 1.4; word-wrap: break-word; }
+            .message-bubble.has-text { margin-bottom: 8px; }
+            .message-attachment { padding: 10px; background-color: rgba(0,0,0,0.2); border-radius: 12px; margin-top: 8px; }
+            .message-attachment-image { max-width: 100%; border-radius: 8px; display: block; cursor: pointer; }
+            .message-attachment-file { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-primary); }
+            .message-attachment-file svg { width: 24px; height: 24px; fill: var(--text-primary); flex-shrink: 0; }
+            .message-attachment-file-info { overflow: hidden; }
+            .message-attachment-file-name { font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
             .message.sent { align-self: flex-end; flex-direction: row-reverse; }
             .message.sent .message-sender { text-align: right; color: var(--accent-blue-light); }
-            .message.sent .message-bubble {
-                background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-light));
-                color: white;
-                border-bottom-right-radius: 4px;
-            }
-
+            .message.sent .message-bubble { background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-light)); color: white; border-bottom-right-radius: 4px; }
             .message.received { align-self: flex-start; }
-            .message.received .message-bubble {
-                background-color: var(--bg-tertiary);
-                border-bottom-left-radius: 4px;
-            }
-            
-            .chat-placeholder {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                height: 100%;
-                text-align: center;
-                color: var(--text-secondary);
-                padding: 20px;
-            }
+            .message.received .message-bubble { background-color: var(--bg-tertiary); border-bottom-left-radius: 4px; }
+            .chat-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; color: var(--text-secondary); padding: 20px; }
             .chat-placeholder img { width: 80px; margin-bottom: 20px; opacity: 0.5; }
-
-            .message-form {
-                display: flex;
-                padding: 16px;
-                gap: 12px;
-                background-color: var(--bg-secondary);
-                border-top: 1px solid var(--border-color);
-                flex-shrink: 0;
-            }
-            #message-input {
-                flex-grow: 1;
-                padding: 12px 16px;
-                border: 1px solid var(--border-color);
-                background-color: var(--bg-tertiary);
-                color: var(--text-primary);
-                border-radius: 22px;
-                outline: none;
-                font-size: 1rem;
-                transition: border-color 0.2s;
-            }
+            .message-form { display: flex; padding: 16px; gap: 12px; background-color: var(--bg-secondary); border-top: 1px solid var(--border-color); flex-shrink: 0; flex-direction: column; }
+            .message-input-area { display: flex; gap: 12px; align-items: center; }
+            #message-input { flex-grow: 1; padding: 12px 16px; border: 1px solid var(--border-color); background-color: var(--bg-tertiary); color: var(--text-primary); border-radius: 22px; outline: none; font-size: 1rem; transition: border-color 0.2s; }
             #message-input:focus { border-color: var(--accent-blue); }
-
-            .send-btn {
-                width: 44px;
-                height: 44px;
-                border-radius: 50%;
-                flex-shrink: 0;
-                padding: 0;
-            }
-            .send-btn svg { width: 20px; height: 20px; fill: white; }
-
-            .modal-overlay {
-                position: fixed;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background-color: rgba(0,0,0,0.7);
-                display: none;
-                align-items: center;
-                justify-content: center;
-                z-index: 1000;
-                -webkit-backdrop-filter: blur(5px);
-                backdrop-filter: blur(5px);
-            }
-            .modal-content {
-                background-color: var(--bg-secondary);
-                padding: 24px;
-                border-radius: 12px;
-                width: 90%;
-                max-width: 400px;
-                border: 1px solid var(--border-color);
-                box-shadow: 0 10px 30px rgba(0,0,0,0.5);
-            }
+            .icon-btn { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; padding: 0; background-color: var(--bg-tertiary); border: 1px solid var(--border-color); cursor: pointer; display: flex; align-items: center; justify-content: center; }
+            .icon-btn svg { width: 20px; height: 20px; fill: var(--text-secondary); }
+            .send-btn { background: var(--accent-blue); border: none; }
+            .send-btn svg { fill: white; }
+            .file-preview { display: none; align-items: center; gap: 10px; padding: 8px; background-color: var(--bg-tertiary); border-radius: 8px; margin-bottom: 12px; }
+            .file-preview-name { flex-grow: 1; font-size: 0.9rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+            .file-preview-remove { background: none; border: none; color: var(--error-color); cursor: pointer; font-size: 1rem; }
+            #file-upload-progress { display: none; width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
+            #file-upload-progress-bar { width: 0; height: 100%; background-color: var(--accent-blue); transition: width 0.2s; }
+            .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; z-index: 1000; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
+            .modal-content { background-color: var(--bg-secondary); padding: 24px; border-radius: 12px; width: 90%; max-width: 400px; border: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
             .modal-content h3 { margin-bottom: 20px; font-weight: 600; font-size: 1.3rem; }
             .modal-content label { display: block; margin-bottom: 8px; font-size: 0.9rem; color: var(--text-secondary); }
-            .modal-content input {
-                width: 100%;
-                padding: 12px;
-                margin-bottom: 16px;
-                background-color: var(--bg-tertiary);
-                border: 1px solid var(--border-color);
-                color: white;
-                border-radius: 6px;
-                font-size: 1rem;
-            }
+            .modal-content input { width: 100%; padding: 12px; margin-bottom: 16px; background-color: var(--bg-tertiary); border: 1px solid var(--border-color); color: white; border-radius: 6px; font-size: 1rem; }
             .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
-            .modal-btn {
-                padding: 10px 20px;
-                border-radius: 6px;
-                border: none;
-                cursor: pointer;
-                font-weight: 500;
-            }
+            .modal-btn { padding: 10px 20px; border-radius: 6px; border: none; cursor: pointer; font-weight: 500; }
             .secondary-btn { background-color: var(--bg-hover); color: white; }
-            
-            #status-bar {
-                position: fixed;
-                bottom: 20px;
-                left: 50%;
-                transform: translateX(-50%);
-                background-color: var(--bg-tertiary);
-                color: white;
-                padding: 12px 20px;
-                border-radius: 8px;
-                font-size: 0.9rem;
-                opacity: 0;
-                visibility: hidden;
-                transition: opacity 0.3s, visibility 0.3s;
-                z-index: 2000;
-                box-shadow: 0 5px 15px rgba(0,0,0,0.3);
-            }
+            #status-bar { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: var(--bg-tertiary); color: white; padding: 12px 20px; border-radius: 8px; font-size: 0.9rem; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; z-index: 2000; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
             #status-bar.success { background-color: var(--success-color); }
             #status-bar.error { background-color: var(--error-color); }
             #status-bar.visible { opacity: 1; visibility: visible; }
-
             @media (min-width: 768px) {
-                .main-container {
-                    max-width: 1100px;
-                    max-height: 800px;
-                    border-radius: 12px;
-                    overflow: hidden;
-                    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
-                    border: 1px solid var(--border-color);
-                }
-                #app-view {
-                    flex-direction: row;
-                }
-                #chatroom-list-view {
-                    width: 320px;
-                    flex-shrink: 0;
-                    border-right: 1px solid var(--border-color);
-                    display: flex !important;
-                }
-                #chat-window-view {
-                    width: auto;
-                    flex-grow: 1;
-                    display: flex !important;
-                }
-                #chat-window-view.hidden-on-desktop {
-                    display: flex !important;
-                }
+                .main-container { max-width: 1100px; max-height: 800px; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.3); border: 1px solid var(--border-color); }
+                #app-view { flex-direction: row; }
+                #chatroom-list-view { width: 320px; flex-shrink: 0; border-right: 1px solid var(--border-color); display: flex !important; }
+                #chat-window-view { width: auto; flex-grow: 1; display: flex !important; }
+                #chat-window-view.hidden-on-desktop { display: flex !important; }
                 .back-btn { display: none !important; }
             }
         </style>
@@ -516,10 +314,21 @@ def index():
                     </div>
                     <div id="messages-container"></div>
                     <form id="message-form" class="message-form">
-                        <input type="text" id="message-input" placeholder="Сообщение..." autocomplete="off">
-                        <button type="submit" class="action-btn send-btn" id="send-btn">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
-                        </button>
+                         <div id="file-upload-progress"><div id="file-upload-progress-bar"></div></div>
+                         <div class="file-preview" id="file-preview">
+                            <span class="file-preview-name" id="file-preview-name"></span>
+                            <button type="button" class="file-preview-remove" id="file-preview-remove">×</button>
+                         </div>
+                         <div class="message-input-area">
+                            <input type="file" id="file-input" style="display: none;">
+                            <button type="button" class="icon-btn" id="attach-btn" title="Прикрепить файл">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"/></svg>
+                            </button>
+                            <input type="text" id="message-input" placeholder="Сообщение..." autocomplete="off">
+                            <button type="submit" class="action-btn send-btn" id="send-btn">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
+                            </button>
+                        </div>
                     </form>
                 </div>
             </div>
@@ -595,6 +404,7 @@ def index():
                 let chatroomsData = {};
                 let html5QrCode = null;
                 let profileQrCode = null;
+                let selectedFile = null;
                 
                 const loginView = document.getElementById('login-view');
                 const appView = document.getElementById('app-view');
@@ -604,6 +414,12 @@ def index():
                 const activeChat = document.getElementById('active-chat');
                 const profileModal = document.getElementById('profile-modal');
                 const scannerModal = document.getElementById('scanner-modal');
+                const fileInput = document.getElementById('file-input');
+                const filePreview = document.getElementById('file-preview');
+                const filePreviewName = document.getElementById('file-preview-name');
+                const uploadProgress = document.getElementById('file-upload-progress');
+                const uploadProgressBar = document.getElementById('file-upload-progress-bar');
+
 
                 const AVATAR_COLORS = ['#e57373', '#81c784', '#64b5f6', '#ffb74d', '#9575cd', '#4db6ac', '#f06292'];
 
@@ -752,12 +568,42 @@ def index():
                         senderDiv.textContent = msg.display_name;
                         senderDiv.onclick = () => showProfile(msg.sender_address);
                         
-                        const bubbleDiv = document.createElement('div');
-                        bubbleDiv.className = 'message-bubble';
-                        bubbleDiv.textContent = msg.text;
-
                         contentDiv.appendChild(senderDiv);
-                        contentDiv.appendChild(bubbleDiv);
+                        
+                        if (msg.text && msg.text.trim() !== "") {
+                            const bubbleDiv = document.createElement('div');
+                            bubbleDiv.className = 'message-bubble';
+                            bubbleDiv.textContent = msg.text;
+                            contentDiv.appendChild(bubbleDiv);
+                        }
+
+                        if (msg.file_url) {
+                            const attachmentDiv = document.createElement('div');
+                            attachmentDiv.className = 'message-attachment';
+
+                            if (msg.file_type && msg.file_type.startsWith('image/')) {
+                                const img = document.createElement('img');
+                                img.src = msg.file_url;
+                                img.className = 'message-attachment-image';
+                                img.alt = msg.original_filename;
+                                img.onclick = () => window.open(msg.file_url, '_blank');
+                                attachmentDiv.appendChild(img);
+                            } else {
+                                const fileLink = document.createElement('a');
+                                fileLink.href = msg.file_url;
+                                fileLink.target = '_blank';
+                                fileLink.download = msg.original_filename;
+                                fileLink.className = 'message-attachment-file';
+                                
+                                const fileIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/></svg>`;
+                                const fileInfo = `<div class="message-attachment-file-info"><div class="message-attachment-file-name">${msg.original_filename}</div></div>`;
+                                
+                                fileLink.innerHTML = fileIcon + fileInfo;
+                                attachmentDiv.appendChild(fileLink);
+                            }
+                            contentDiv.appendChild(attachmentDiv);
+                        }
+
 
                         msgDiv.appendChild(contentDiv);
                         msgDiv.insertBefore(avatar, contentDiv);
@@ -791,6 +637,16 @@ def index():
                         chatWindowView.style.display = 'none';
                     }
                 };
+                
+                const resetMessageForm = () => {
+                    document.getElementById('message-input').value = '';
+                    fileInput.value = '';
+                    selectedFile = null;
+                    filePreview.style.display = 'none';
+                    filePreviewName.textContent = '';
+                    uploadProgress.style.display = 'none';
+                    uploadProgressBar.style.width = '0%';
+                };
 
                 const selectChatroom = (roomId, isPrivate) => {
                     const roomData = chatroomsData[roomId];
@@ -799,6 +655,7 @@ def index():
                     const proceedToRoom = () => {
                         if (messagePollingInterval) clearInterval(messagePollingInterval);
                         activeChatroomId = roomId;
+                        resetMessageForm();
                         
                         document.getElementById('chat-header-title').textContent = roomData.name;
                         const headerAvatar = document.getElementById('chat-header-avatar');
@@ -846,32 +703,106 @@ def index():
                     }
                 };
 
+                document.getElementById('attach-btn').addEventListener('click', () => fileInput.click());
+                
+                fileInput.addEventListener('change', () => {
+                    if (fileInput.files.length > 0) {
+                        selectedFile = fileInput.files[0];
+                        filePreviewName.textContent = selectedFile.name;
+                        filePreview.style.display = 'flex';
+                    }
+                });
+
+                document.getElementById('file-preview-remove').addEventListener('click', () => {
+                    fileInput.value = '';
+                    selectedFile = null;
+                    filePreview.style.display = 'none';
+                });
+
+                const uploadFile = async (file) => {
+                    const formData = new FormData();
+                    formData.append('file', file);
+
+                    uploadProgress.style.display = 'block';
+
+                    return new Promise((resolve, reject) => {
+                        const xhr = new XMLHttpRequest();
+                        xhr.open('POST', '/api/upload_file', true);
+
+                        xhr.upload.onprogress = (event) => {
+                            if (event.lengthComputable) {
+                                const percentComplete = (event.loaded / event.total) * 100;
+                                uploadProgressBar.style.width = percentComplete + '%';
+                            }
+                        };
+                        
+                        xhr.onload = () => {
+                           uploadProgress.style.display = 'none';
+                           uploadProgressBar.style.width = '0%';
+                           if (xhr.status >= 200 && xhr.status < 300) {
+                               resolve(JSON.parse(xhr.responseText));
+                           } else {
+                               const errorResponse = JSON.parse(xhr.responseText || '{}');
+                               reject(new Error(errorResponse.error || 'File upload failed'));
+                           }
+                        };
+                        
+                        xhr.onerror = () => {
+                           uploadProgress.style.display = 'none';
+                           uploadProgressBar.style.width = '0%';
+                           reject(new Error('Network error during file upload.'));
+                        };
+
+                        xhr.send(formData);
+                    });
+                };
+                
                 document.getElementById('message-form').addEventListener('submit', async (e) => {
                     e.preventDefault();
                     const input = document.getElementById('message-input');
                     const sendBtn = document.getElementById('send-btn');
                     const text = input.value.trim();
-                    if (text && activeChatroomId) {
-                        input.value = '';
-                        input.disabled = true;
-                        sendBtn.disabled = true;
-                        try {
-                            await apiCall('/api/send_message', {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify({
-                                    chatroom_id: activeChatroomId,
-                                    sender_address: currentUser.address,
-                                    text: text
-                                })
-                            });
-                            await fetchMessages(activeChatroomId);
-                            document.getElementById('messages-container').scrollTop = document.getElementById('messages-container').scrollHeight;
-                        } finally {
-                            input.disabled = false;
-                            sendBtn.disabled = false;
-                            input.focus();
+
+                    if (!text && !selectedFile) return;
+
+                    input.disabled = true;
+                    sendBtn.disabled = true;
+                    
+                    try {
+                        let fileData = null;
+                        if (selectedFile) {
+                            fileData = await uploadFile(selectedFile);
                         }
+
+                        const messagePayload = {
+                            chatroom_id: activeChatroomId,
+                            sender_address: currentUser.address,
+                            text: text
+                        };
+                        
+                        if (fileData) {
+                            messagePayload.file_url = fileData.url;
+                            messagePayload.original_filename = fileData.filename;
+                            messagePayload.file_type = fileData.file_type;
+                        }
+
+                        await apiCall('/api/send_message', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(messagePayload)
+                        });
+                        
+                        resetMessageForm();
+                        await fetchMessages(activeChatroomId);
+                        document.getElementById('messages-container').scrollTop = document.getElementById('messages-container').scrollHeight;
+
+                    } catch(error) {
+                        showStatus(`Ошибка отправки: ${error.message}`, 'error');
+                    }
+                    finally {
+                        input.disabled = false;
+                        sendBtn.disabled = false;
+                        input.focus();
                     }
                 });
 
@@ -1043,6 +974,37 @@ def index():
     '''
     return Response(html_content, mimetype='text/html')
 
+@app.route('/files/<filename>')
+def uploaded_file(filename):
+    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
+
+@app.route('/api/upload_file', methods=['POST'])
+def upload_file():
+    if 'file' not in request.files:
+        return jsonify({'error': 'No file part'}), 400
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'error': 'No selected file'}), 400
+    if file:
+        original_filename = secure_filename(file.filename)
+        extension = os.path.splitext(original_filename)[1]
+        unique_filename = f"{uuid.uuid4().hex}{extension}"
+        
+        local_path = os.path.join(app.config['UPLOAD_FOLDER'], unique_filename)
+        file.save(local_path)
+
+        upload_to_hf(local_path, f"files/{unique_filename}")
+
+        file_url = url_for('uploaded_file', filename=unique_filename, _external=True)
+        file_type = mimetypes.guess_type(original_filename)[0] or 'application/octet-stream'
+
+        return jsonify({
+            'url': file_url,
+            'filename': original_filename,
+            'file_type': file_type
+        })
+    return jsonify({'error': 'File upload failed'}), 500
+
 
 @app.route('/api/user_data', methods=['POST'])
 def get_user_data():
@@ -1146,8 +1108,11 @@ def send_message():
     chatroom_id = data.get('chatroom_id')
     sender_address = data.get('sender_address')
     text = data.get('text')
+    file_url = data.get('file_url')
+    original_filename = data.get('original_filename')
+    file_type = data.get('file_type')
 
-    if not all([chatroom_id, sender_address, text]):
+    if not all([chatroom_id, sender_address]) or (not text and not file_url):
         return jsonify({'error': 'Missing data'}), 400
 
     db = read_db()
@@ -1158,7 +1123,10 @@ def send_message():
         'id': str(uuid.uuid4()),
         'sender_address': sender_address,
         'text': text,
-        'timestamp': datetime.utcnow().isoformat() + "Z"
+        'timestamp': datetime.utcnow().isoformat() + "Z",
+        'file_url': file_url,
+        'original_filename': original_filename,
+        'file_type': file_type
     }
     
     if len(db['messages'][chatroom_id]) >= 100:
@@ -1170,5 +1138,17 @@ def send_message():
 
 
 if __name__ == '__main__':
+    logging.info("Application starting up...")
+    logging.info("Attempting initial sync from Hugging Face...")
+    download_from_hf()
     init_db()
+    logging.info("Initial data load/sync complete.")
+
+    if HF_TOKEN:
+        backup_thread = threading.Thread(target=periodic_backup, daemon=True)
+        backup_thread.start()
+        logging.info("Periodic backup thread started.")
+    else:
+        logging.warning("Periodic backup will NOT run (HF_TOKEN not set).")
+        
     app.run(host='0.0.0.0', port=7860)