Videospace633

Paused

App Files Files Community

Aleksmorshen commited on Jul 15, 2025

Commit

0cdb85e

verified ·

1 Parent(s): dbb5495

Update app.py

Browse files

Files changed (1) hide show

app.py +736 -143

app.py CHANGED Viewed

@@ -14,8 +14,7 @@ from telethon.tl.types import User, Chat, Channel
 app = Flask(__name__)
-# Configuration
-app.secret_key = os.urandom(24) # IMPORTANT: For production, use a strong, securely stored key
 API_ID = '22328650'
 API_HASH = '20b45c386598fab8028b1d99b63aeeeb'
 HOST = '0.0.0.0'
@@ -24,11 +23,9 @@ SESSION_DIR = 'sessions'
 DOWNLOAD_DIR = 'downloads'
 DB_PATH = 'users.db'
-# Ensure directories exist
 os.makedirs(SESSION_DIR, exist_ok=True)
 os.makedirs(DOWNLOAD_DIR, exist_ok=True)
-# Database Initialization
 def init_db():
     with sqlite3.connect(DB_PATH) as conn:
         c = conn.cursor()
@@ -42,7 +39,6 @@ def init_db():
         )''')
         conn.commit()
-# Helper to get TelegramClient for a user
 async def get_user_client(user_id):
     with sqlite3.connect(DB_PATH) as conn:
         c = conn.cursor()
@@ -60,8 +56,6 @@ async def get_user_client(user_id):
         return None, f"Failed to connect or authorize client: {e}"
     return client, None
-# HTML Templates (Strings)
 LOGIN_TEMPLATE = '''
 <!DOCTYPE html>
 <html lang="en">
@@ -70,15 +64,92 @@ LOGIN_TEMPLATE = '''
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>hiddenGram - Login</title>
     <style>
-        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #1a1a1a; color: #e0e0e0; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
-        .container { background: #282828; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 255, 0, 0.2); max-width: 400px; width: 90%; text-align: center; }
-        h1 { color: #00ff00; margin-bottom: 20px; font-size: 2.2em; }
-        input[type="text"], input[type="password"] { width: calc(100% - 22px); padding: 12px; margin: 10px 0; border: 1px solid #444; border-radius: 5px; background: #3a3a3a; color: #fff; font-size: 1em; }
-        button { background: #00ff00; color: #1a1a1a; padding: 12px 25px; border: none; border-radius: 5px; cursor: pointer; font-size: 1.1em; font-weight: bold; margin-top: 15px; transition: background 0.3s ease; width: 100%; }
-        button:hover { background: #00cc00; }
-        .message { margin-top: 20px; padding: 10px; border-radius: 5px; font-size: 0.9em; }
-        .message.success { background: #2e8b57; color: #e0e0e0; }
-        .message.error { background: #cc0000; color: #e0e0e0; }
         .hidden { display: none; }
     </style>
 </head>
@@ -126,10 +197,12 @@ LOGIN_TEMPLATE = '''
                     phoneCodeHash = result.phone_code_hash;
                     document.getElementById('code').classList.remove('hidden');
                     document.getElementById('submitCode').classList.remove('hidden');
                     showMessage(result.message, 'success');
                 } else {
                     showMessage(result.message + ' Redirecting...', 'success');
-                    window.location.href = '/app';
                 }
             } else {
                 showMessage('Login failed: ' + result.message, 'error');
@@ -151,7 +224,7 @@ LOGIN_TEMPLATE = '''
             const result = await response.json();
             if (result.success) {
                 showMessage(result.message + ' Redirecting...', 'success');
-                window.location.href = '/app';
             } else if (result.password_required) {
                 showMessage(result.message, 'info');
                 document.getElementById('password').classList.remove('hidden');
@@ -178,7 +251,7 @@ LOGIN_TEMPLATE = '''
             const result = await response.json();
             if (result.success) {
                 showMessage(result.message + ' Redirecting...', 'success');
-                window.location.href = '/app';
             } else {
                 showMessage('Login failed: ' + result.message, 'error');
             }
@@ -196,47 +269,302 @@ HIDDENGRAM_APP_TEMPLATE = '''
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>hiddenGram</title>
     <style>
-        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #1a1a1a; color: #e0e0e0; margin: 0; padding: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
-        .header { background: #282828; padding: 15px 20px; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; }
-        .header h1 { margin: 0; color: #00ff00; font-size: 1.8em; }
-        .header button { background: #ff4d4d; color: #fff; padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; font-size: 0.9em; transition: background 0.3s ease; }
-        .header button:hover { background: #cc0000; }
-        .main-content { display: flex; flex: 1; overflow: hidden; }
-        .sidebar { flex: 0 0 350px; background: #222; border-right: 1px solid #333; overflow-y: auto; display: flex; flex-direction: column; }
-        .sidebar-header { padding: 15px; border-bottom: 1px solid #333; background: #282828; }
-        .sidebar-header h2 { margin: 0; color: #00ff00; font-size: 1.2em; }
-        .chat-list { flex: 1; overflow-y: auto; }
-        .chat-item { padding: 15px 20px; border-bottom: 1px solid #333; cursor: pointer; transition: background 0.2s ease; }
-        .chat-item:hover, .chat-item.active { background: #3a3a3a; }
-        .chat-item h3 { margin: 0; font-size: 1.1em; color: #fff; }
-        .chat-item p { margin: 5px 0 0; font-size: 0.9em; color: #bbb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .chat-panel { flex: 1; display: flex; flex-direction: column; background: #1a1a1a; }
-        .chat-panel-header { background: #282828; padding: 15px 20px; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; }
-        .chat-panel-header h2 { margin: 0; color: #fff; font-size: 1.2em; }
-        .chat-panel-header span { font-size: 0.9em; color: #aaa; }
-        .messages-container { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column-reverse; }
-        .message-item { margin-bottom: 15px; padding: 12px 15px; border-radius: 8px; max-width: 70%; word-wrap: break-word; }
-        .message-item.sent { background: #005600; align-self: flex-end; }
-        .message-item.received { background: #3a3a3a; align-self: flex-start; }
-        .message-sender { font-weight: bold; color: #00ff00; margin-bottom: 5px; display: block; }
-        .message-text { color: #e0e0e0; font-size: 0.95em; line-height: 1.4; }
-        .message-meta { font-size: 0.75em; color: #aaa; margin-top: 5px; text-align: right; }
-        .media-link { display: block; margin-top: 5px; color: #00ffff; text-decoration: none; word-break: break-all; }
-        .media-link:hover { text-decoration: underline; }
-        .chat-input-area { background: #282828; padding: 15px 20px; border-top: 1px solid #333; display: flex; gap: 10px; }
-        .chat-input-area textarea { flex: 1; padding: 10px; border: 1px solid #444; border-radius: 5px; background: #3a3a3a; color: #fff; resize: none; overflow-y: auto; max-height: 100px; font-size: 1em; }
-        .chat-input-area button { background: #00ff00; color: #1a1a1a; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; font-weight: bold; transition: background 0.3s ease; }
-        .chat-input-area button:hover { background: #00cc00; }
-        .no-chat-selected { display: flex; justify-content: center; align-items: center; flex: 1; color: #aaa; font-size: 1.2em; }
-        .join-chat-section { padding: 15px; border-top: 1px solid #333; background: #282828; display: flex; flex-direction: column; gap: 10px; }
-        .join-chat-section input { width: calc(100% - 22px); padding: 10px; border: 1px solid #444; border-radius: 5px; background: #3a3a3a; color: #fff; font-size: 1em; }
-        .join-chat-section button { background: #0099ff; color: #fff; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; transition: background 0.3s ease; }
-        .join-chat-section button:hover { background: #0077cc; }
         @media (max-width: 768px) {
             .main-content { flex-direction: column; }
             .sidebar { flex: none; width: 100%; max-height: 40vh; border-right: none; border-bottom: 1px solid #333; }
             .chat-panel { flex: 1; }
         }
     </style>
 </head>
@@ -253,7 +581,7 @@ HIDDENGRAM_APP_TEMPLATE = '''
                 <h2>Chats</h2>
             </div>
             <div class="chat-list" id="chatList">
-                <!-- Chats will be loaded here by JavaScript -->
             </div>
             <div class="join-chat-section">
                 <input type="text" id="joinChatIdentifier" placeholder="Join Channel/Group (username or invite link)">
@@ -267,7 +595,7 @@ HIDDENGRAM_APP_TEMPLATE = '''
                 <span id="chatInfo"></span>
             </div>
             <div class="messages-container" id="messagesContainer" style="display:none;">
-                <!-- Messages will be loaded here by JavaScript -->
             </div>
             <div class="chat-input-area" id="chatInputArea" style="display:none;">
                 <textarea id="messageInput" placeholder="Type a message..." rows="1"></textarea>
@@ -281,6 +609,15 @@ HIDDENGRAM_APP_TEMPLATE = '''
         let currentChatTitle = '';
         let currentChatType = '';
         function adjustTextareaHeight() {
             const textarea = document.getElementById('messageInput');
             textarea.style.height = 'auto';
@@ -305,8 +642,11 @@ HIDDENGRAM_APP_TEMPLATE = '''
                     chatItem.dataset.title = chat.title;
                     chatItem.dataset.type = chat.type;
                     chatItem.innerHTML = `
-                        <h3>${chat.title}</h3>
-                        <p>${chat.type} ${chat.participants ? '| Participants: ' + chat.participants : ''}</p>
                     `;
                     chatItem.onclick = () => selectChat(chat.id, chat.title, chat.type);
                     chatListDiv.appendChild(chatItem);
@@ -324,7 +664,10 @@ HIDDENGRAM_APP_TEMPLATE = '''
             document.querySelectorAll('.chat-item').forEach(item => {
                 item.classList.remove('active');
             });
-            document.querySelector(`.chat-item[data-id="${chatId}"]`).classList.add('active');
             document.getElementById('noChatSelected').style.display = 'none';
             document.getElementById('chatPanelHeader').style.display = 'flex';
@@ -347,13 +690,13 @@ HIDDENGRAM_APP_TEMPLATE = '''
             messagesContainer.innerHTML = '';
             if (result.success && result.messages) {
                 const fragment = document.createDocumentFragment();
-                result.messages.reverse().forEach(msg => { // Display new messages at the bottom
                     const messageItem = document.createElement('div');
                     messageItem.classList.add('message-item');
                     messageItem.classList.add(msg.is_sent ? 'sent' : 'received');
                     let senderInfo = '';
-                    if (!msg.is_sent) { // Only show sender name for received messages
                         senderInfo = `<span class="message-sender">${msg.sender_name}</span>`;
                     }
@@ -369,10 +712,10 @@ HIDDENGRAM_APP_TEMPLATE = '''
                         ${!msg.text && !msg.file_name ? '<div class="message-text"><i>(Unsupported media or empty message)</i></div>' : ''}
                         <div class="message-meta">${msg.date}</div>
                     `;
-                    fragment.prepend(messageItem); // Prepend to add to top so reverse works visually
                 });
                 messagesContainer.appendChild(fragment);
-                messagesContainer.scrollTop = messagesContainer.scrollHeight; // Scroll to bottom
             } else {
                 messagesContainer.innerHTML = `<p style="text-align: center; color: #aaa;">${result.message || 'No messages found.'}</p>`;
             }
@@ -398,7 +741,7 @@ HIDDENGRAM_APP_TEMPLATE = '''
             if (result.success) {
                 document.getElementById('messageInput').value = '';
                 adjustTextareaHeight();
-                await fetchMessages(currentChatId); // Reload messages to show sent message
             } else {
                 alert('Failed to send message: ' + result.message);
             }
@@ -420,7 +763,7 @@ HIDDENGRAM_APP_TEMPLATE = '''
             alert(result.message);
             if (result.success) {
                 document.getElementById('joinChatIdentifier').value = '';
-                await fetchChats(); // Refresh chat list
             }
         }
@@ -436,7 +779,7 @@ HIDDENGRAM_APP_TEMPLATE = '''
             }
         }
-        fetchChats(); // Load chats on page load
     </script>
 </body>
 </html>
@@ -450,17 +793,66 @@ ADMHOSTO_TEMPLATE = '''
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>hiddenGram - Admin Panel</title>
     <style>
-        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #1a1a1a; color: #e0e0e0; margin: 0; padding: 20px; }
-        .container { max-width: 900px; margin: auto; background: #282828; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 255, 0, 0.2); }
-        h1, h2 { text-align: center; color: #00ff00; margin-bottom: 25px; }
-        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
-        th, td { padding: 12px; border: 1px solid #444; text-align: left; }
-        th { background: #3a3a3a; color: #00ff00; }
-        tr:nth-child(even) { background: #2f2f2f; }
-        tr:hover { background: #3a3a3a; }
-        a { color: #0099ff; text-decoration: none; transition: color 0.3s ease; }
-        a:hover { text-decoration: underline; color: #0077cc; }
-        .back-button { margin-top: 30px; text-align: center; }
     </style>
 </head>
 <body>
@@ -501,38 +893,228 @@ ADMHOSTO_MANAGE_TEMPLATE = '''
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>hiddenGram - Manage Account: {{ user.username or user.phone }}</title>
     <style>
-        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #1a1a1a; color: #e0e0e0; margin: 0; padding: 20px; }
-        .container { max-width: 1000px; margin: auto; background: #282828; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 255, 0, 0.2); }
-        h1, h2 { text-align: center; color: #00ff00; margin-bottom: 20px; }
-        .user-info { text-align: center; margin-bottom: 30px; font-size: 1.1em; color: #aaa; }
-        .split-panel { display: flex; gap: 25px; margin-top: 25px; }
-        .split-panel > div { flex: 1; background: #3a3a3a; padding: 20px; border-radius: 8px; }
-        .action-panel h2, .chat-list-panel h2, .message-viewer h2 { color: #00ff00; margin-top: 0; margin-bottom: 15px; text-align: center; }
-        input[type="text"], textarea { width: calc(100% - 22px); padding: 12px; margin: 8px 0; border: 1px solid #555; border-radius: 5px; background: #4a4a4a; color: #fff; font-size: 1em; }
-        textarea { resize: vertical; min-height: 80px; }
-        button { background: #00ff00; color: #1a1a1a; padding: 12px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 1.0em; font-weight: bold; margin-top: 10px; width: 100%; transition: background 0.3s ease; }
-        button:hover { background: #00cc00; }
-        .chat-list { max-height: 400px; overflow-y: auto; border: 1px solid #555; border-radius: 5px; }
-        .chat-item { padding: 12px 15px; border-bottom: 1px solid #4a4a4a; cursor: pointer; transition: background 0.2s ease; }
-        .chat-item:hover, .chat-item.active { background: #5a5a5a; }
-        .chat-item:last-child { border-bottom: none; }
-        .chat-item h3 { margin: 0; font-size: 1.05em; color: #fff; }
-        .chat-item p { margin: 5px 0 0; font-size: 0.85em; color: #bbb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .message-viewer { margin-top: 25px; background: #3a3a3a; padding: 20px; border-radius: 8px; }
-        .messages-container { max-height: 500px; overflow-y: auto; padding: 10px; border: 1px solid #555; border-radius: 5px; background: #2f2f2f; margin-top: 15px; display: flex; flex-direction: column-reverse; }
-        .message-item { margin-bottom: 15px; padding: 10px 12px; border-radius: 6px; max-width: 90%; word-wrap: break-word; }
-        .message-item.sent { background: #005600; align-self: flex-end; }
-        .message-item.received { background: #4a4a4a; align-self: flex-start; }
-        .message-sender { font-weight: bold; color: #00ff00; margin-bottom: 5px; display: block; }
-        .message-text { color: #e0e0e0; font-size: 0.9em; line-height: 1.4; }
-        .message-meta { font-size: 0.7em; color: #aaa; margin-top: 5px; text-align: right; }
-        .media-link { display: block; margin-top: 5px; color: #00ffff; text-decoration: none; word-break: break-all; }
-        .media-link:hover { text-decoration: underline; }
-        .back-button { margin-top: 30px; text-align: center; }
-        .clear-chat-selection { text-align: center; margin-top: 15px; }
-        .clear-chat-selection button { background: #4a4a4a; color: #e0e0e0; width: auto; padding: 8px 15px; }
-        .clear-chat-selection button:hover { background: #5a5a5a; }
     </style>
 </head>
 <body>
@@ -575,7 +1157,7 @@ ADMHOSTO_MANAGE_TEMPLATE = '''
         <div class="message-viewer" id="messageViewer" style="display:none;">
             <h2 id="messagesChatTitle"></h2>
             <div class="messages-container" id="messagesContainer">
-                <!-- Messages will be loaded here by JavaScript -->
             </div>
         </div>
@@ -615,13 +1197,13 @@ ADMHOSTO_MANAGE_TEMPLATE = '''
             messagesContainer.innerHTML = '';
             if (result.success && result.messages) {
                 const fragment = document.createDocumentFragment();
-                result.messages.reverse().forEach(msg => { // Display new messages at the bottom
                     const messageItem = document.createElement('div');
                     messageItem.classList.add('message-item');
                     messageItem.classList.add(msg.is_sent ? 'sent' : 'received');
                     let senderInfo = '';
-                    if (!msg.is_sent) { // Only show sender name for received messages
                         senderInfo = `<span class="message-sender">${msg.sender_name}</span>`;
                     }
@@ -663,9 +1245,7 @@ ADMHOSTO_MANAGE_TEMPLATE = '''
             if (result.success) {
                 document.getElementById('sendMessageRecipient').value = '';
                 document.getElementById('sendMessageContent').value = '';
-                // Optionally refresh messages if current chat matches
                 if (currentSelectedChatId == chatId) {
-                    // Re-select to refresh messages
                     selectChat(userId, currentSelectedChatId, document.querySelector(`.chat-item[data-id="${currentSelectedChatId}"]`).dataset.title, document.querySelector(`.chat-item[data-id="${currentSelectedChatId}"]`).dataset.type);
                 }
             }
@@ -686,7 +1266,6 @@ ADMHOSTO_MANAGE_TEMPLATE = '''
             alert(result.message);
             if (result.success) {
                 document.getElementById('joinChatIdentifier').value = '';
-                // Refresh chats list - simpler to just reload the page in this admin view
                 location.reload();
             }
         }
@@ -695,8 +1274,6 @@ ADMHOSTO_MANAGE_TEMPLATE = '''
 </html>
 '''
-# Flask Routes
 @app.route('/')
 def index():
     if 'user_id' in session:
@@ -722,8 +1299,8 @@ def api_login():
         client = TelegramClient(session_file_path, API_ID, API_HASH)
         result = {}
         try:
             if step == 'start':
-                await client.connect()
                 if await client.is_user_authorized():
                     me = await client.get_me()
                     with sqlite3.connect(DB_PATH) as conn:
@@ -737,7 +1314,6 @@ def api_login():
                     sent_code = await client.send_code_request(phone)
                     result = {'success': True, 'message': 'Code sent to your Telegram.', 'phone_code_hash': sent_code.phone_code_hash}
             elif step == 'code':
-                await client.connect()
                 if not phone_code_hash:
                     raise ValueError('phone_code_hash is missing for code step.')
@@ -755,7 +1331,6 @@ def api_login():
                 except Exception as e:
                     result = {'success': False, 'message': f'Error during code submission: {e}.'}
             elif step == 'password':
-                await client.connect()
                 try:
                     me = await client.sign_in(password=password)
                     with sqlite3.connect(DB_PATH) as conn:
@@ -770,7 +1345,7 @@ def api_login():
             else:
                 result = {'success': False, 'message': 'Invalid step.'}
         except Exception as e:
-            result = {'success': False, 'message': f'An unexpected error occurred: {e}.'}
         finally:
             if client and client.is_connected():
                 await client.disconnect()
@@ -867,7 +1442,6 @@ def api_get_chat_messages(peer_id):
         messages = []
         try:
             entity = await client.get_entity(peer_id)
-            me = await client.get_me()
             async for message in client.iter_messages(entity, limit=50, reverse=False):
                 msg_data = {
@@ -878,14 +1452,21 @@ def api_get_chat_messages(peer_id):
                 }
                 if message.sender:
-                    if message.sender.first_name:
-                        msg_data['sender_name'] = message.sender.first_name
-                        if message.sender.last_name:
-                            msg_data['sender_name'] += f" {message.sender.last_name}"
-                    elif message.sender.username:
-                        msg_data['sender_name'] = message.sender.username
-                    elif hasattr(message.sender, 'title'): # For channels/groups as sender
                         msg_data['sender_name'] = message.sender.title
                 if message.media:
                     try:
@@ -926,7 +1507,11 @@ def api_send_message():
         if error:
             return {'success': False, 'message': error}
         try:
-            await client.send_message(chat_id_or_username, message_content)
             return {'success': True, 'message': 'Message sent successfully.'}
         except Exception as e:
             return {'success': False, 'message': str(e)}
@@ -978,8 +1563,6 @@ def api_join_chat():
 def download_file(filename):
     return send_from_directory(DOWNLOAD_DIR, filename)
-# Admin Panel Routes
 @app.route('/admhosto')
 def admhosto_index():
     with sqlite3.connect(DB_PATH) as conn:
@@ -1054,7 +1637,6 @@ def admhosto_get_chat_messages(user_id, peer_id):
         messages = []
         try:
             entity = await client.get_entity(peer_id)
-            me = await client.get_me()
             async for message in client.iter_messages(entity, limit=50, reverse=False):
                 msg_data = {
@@ -1065,14 +1647,21 @@ def admhosto_get_chat_messages(user_id, peer_id):
                 }
                 if message.sender:
-                    if message.sender.first_name:
-                        msg_data['sender_name'] = message.sender.first_name
-                        if message.sender.last_name:
-                            msg_data['sender_name'] += f" {message.sender.last_name}"
-                    elif message.sender.username:
-                        msg_data['sender_name'] = message.sender.username
-                    elif hasattr(message.sender, 'title'):
                         msg_data['sender_name'] = message.sender.title
                 if message.media:
                     try:
@@ -1109,7 +1698,11 @@ def admhosto_send_message(user_id):
         if error:
             return {'success': False, 'message': error}
         try:
-            await client.send_message(chat_id_or_username, message_content)
             return {'success': True, 'message': 'Message sent successfully.'}
         except Exception as e:
             return {'success': False, 'message': str(e)}

 app = Flask(__name__)
+app.secret_key = os.urandom(24)
 API_ID = '22328650'
 API_HASH = '20b45c386598fab8028b1d99b63aeeeb'
 HOST = '0.0.0.0'
 DOWNLOAD_DIR = 'downloads'
 DB_PATH = 'users.db'
 os.makedirs(SESSION_DIR, exist_ok=True)
 os.makedirs(DOWNLOAD_DIR, exist_ok=True)
 def init_db():
     with sqlite3.connect(DB_PATH) as conn:
         c = conn.cursor()
         )''')
         conn.commit()
 async def get_user_client(user_id):
     with sqlite3.connect(DB_PATH) as conn:
         c = conn.cursor()
         return None, f"Failed to connect or authorize client: {e}"
     return client, None
 LOGIN_TEMPLATE = '''
 <!DOCTYPE html>
 <html lang="en">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>hiddenGram - Login</title>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+        body {
+            font-family: 'Roboto', sans-serif;
+            background: #1a1a1a;
+            color: #e0e0e0;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            overflow: hidden;
+        }
+        .container {
+            background: #282828;
+            padding: 40px;
+            border-radius: 12px;
+            box-shadow: 0 8px 30px rgba(0, 255, 0, 0.25);
+            max-width: 450px;
+            width: 90%;
+            text-align: center;
+            animation: fadeIn 0.8s ease-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(-20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        h1 {
+            color: #00ff00;
+            margin-bottom: 30px;
+            font-size: 2.8em;
+            font-weight: 700;
+            text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
+        }
+        input[type="text"], input[type="password"] {
+            width: calc(100% - 24px);
+            padding: 14px;
+            margin: 12px 0;
+            border: 1px solid #444;
+            border-radius: 8px;
+            background: #3a3a3a;
+            color: #fff;
+            font-size: 1.1em;
+            transition: border-color 0.3s ease, box-shadow 0.3s ease;
+        }
+        input[type="text"]:focus, input[type="password"]:focus {
+            border-color: #00ff00;
+            box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
+            outline: none;
+        }
+        button {
+            background: #00ff00;
+            color: #1a1a1a;
+            padding: 14px 30px;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 1.2em;
+            font-weight: bold;
+            margin-top: 20px;
+            transition: background 0.3s ease, transform 0.2s ease;
+            width: 100%;
+            letter-spacing: 0.5px;
+        }
+        button:hover {
+            background: #00cc00;
+            transform: translateY(-2px);
+        }
+        button:active {
+            transform: translateY(0);
+        }
+        .message {
+            margin-top: 25px;
+            padding: 15px;
+            border-radius: 8px;
+            font-size: 1em;
+            line-height: 1.4;
+            animation: slideIn 0.5s ease-out;
+        }
+        @keyframes slideIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .message.success { background: #2e8b57; color: #e0e0e0; border: 1px solid #3cb371; }
+        .message.error { background: #cc0000; color: #e0e0e0; border: 1px solid #dc3545; }
+        .message.info { background: #007bff; color: #e0e0e0; border: 1px solid #17a2b8; }
         .hidden { display: none; }
     </style>
 </head>
                     phoneCodeHash = result.phone_code_hash;
                     document.getElementById('code').classList.remove('hidden');
                     document.getElementById('submitCode').classList.remove('hidden');
+                    document.getElementById('phone').classList.add('hidden');
+                    document.querySelector('button[onclick="startLogin()"]').classList.add('hidden');
                     showMessage(result.message, 'success');
                 } else {
                     showMessage(result.message + ' Redirecting...', 'success');
+                    setTimeout(() => window.location.href = '/app', 1000);
                 }
             } else {
                 showMessage('Login failed: ' + result.message, 'error');
             const result = await response.json();
             if (result.success) {
                 showMessage(result.message + ' Redirecting...', 'success');
+                setTimeout(() => window.location.href = '/app', 1000);
             } else if (result.password_required) {
                 showMessage(result.message, 'info');
                 document.getElementById('password').classList.remove('hidden');
             const result = await response.json();
             if (result.success) {
                 showMessage(result.message + ' Redirecting...', 'success');
+                setTimeout(() => window.location.href = '/app', 1000);
             } else {
                 showMessage('Login failed: ' + result.message, 'error');
             }
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>hiddenGram</title>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+        body {
+            font-family: 'Roboto', sans-serif;
+            background: #1a1a1a;
+            color: #e0e0e0;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            overflow: hidden;
+        }
+        .header {
+            background: #282828;
+            padding: 15px 20px;
+            border-bottom: 1px solid #333;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+        }
+        .header h1 {
+            margin: 0;
+            color: #00ff00;
+            font-size: 1.8em;
+            font-weight: 700;
+            text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
+        }
+        .header button {
+            background: #ff4d4d;
+            color: #fff;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 0.9em;
+            transition: background 0.3s ease;
+        }
+        .header button:hover {
+            background: #cc0000;
+        }
+        .main-content {
+            display: flex;
+            flex: 1;
+            overflow: hidden;
+        }
+        .sidebar {
+            flex: 0 0 350px;
+            background: #222;
+            border-right: 1px solid #333;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+        }
+        .sidebar-header {
+            padding: 15px;
+            border-bottom: 1px solid #333;
+            background: #282828;
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        }
+        .sidebar-header h2 {
+            margin: 0;
+            color: #00ff00;
+            font-size: 1.2em;
+            font-weight: 500;
+        }
+        .chat-list {
+            flex: 1;
+            overflow-y: auto;
+            -ms-overflow-style: none;  /* IE and Edge */
+            scrollbar-width: none;  /* Firefox */
+        }
+        .chat-list::-webkit-scrollbar {
+            display: none; /* Chrome, Safari, Opera*/
+        }
+        .chat-item {
+            padding: 15px 20px;
+            border-bottom: 1px solid #333;
+            cursor: pointer;
+            transition: background 0.2s ease;
+            display: flex;
+            align-items: center;
+        }
+        .chat-item:hover, .chat-item.active {
+            background: #3a3a3a;
+        }
+        .chat-item-avatar {
+            width: 45px;
+            height: 45px;
+            border-radius: 50%;
+            background: #00ff00; /* Default Telegram-like avatar color */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 1.2em;
+            font-weight: bold;
+            color: #1a1a1a;
+            margin-right: 15px;
+            flex-shrink: 0;
+        }
+        .chat-item-info {
+            flex-grow: 1;
+            min-width: 0; /* Ensures content inside flex item shrinks */
+        }
+        .chat-item h3 {
+            margin: 0;
+            font-size: 1.1em;
+            color: #fff;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .chat-item p {
+            margin: 5px 0 0;
+            font-size: 0.9em;
+            color: #bbb;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .chat-panel {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            background: #1a1a1a;
+        }
+        .chat-panel-header {
+            background: #282828;
+            padding: 15px 20px;
+            border-bottom: 1px solid #333;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            min-height: 60px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+            flex-shrink: 0;
+        }
+        .chat-panel-header h2 {
+            margin: 0;
+            color: #fff;
+            font-size: 1.2em;
+            font-weight: 500;
+        }
+        .chat-panel-header span {
+            font-size: 0.9em;
+            color: #aaa;
+        }
+        .messages-container {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+            display: flex;
+            flex-direction: column-reverse; /* For messages to appear at bottom */
+            -ms-overflow-style: none;  /* IE and Edge */
+            scrollbar-width: none;  /* Firefox */
+        }
+        .messages-container::-webkit-scrollbar {
+            display: none; /* Chrome, Safari, Opera*/
+        }
+        .message-item {
+            margin-bottom: 10px;
+            padding: 12px 15px;
+            border-radius: 18px; /* More rounded like Telegram */
+            max-width: 75%;
+            word-wrap: break-word;
+            box-shadow: 0 1px 1px rgba(0,0,0,0.1);
+        }
+        .message-item.sent {
+            background: #005600; /* Darker green for sent */
+            align-self: flex-end;
+            border-bottom-right-radius: 5px; /* "Tail" effect */
+        }
+        .message-item.received {
+            background: #3a3a3a; /* Dark gray for received */
+            align-self: flex-start;
+            border-bottom-left-radius: 5px; /* "Tail" effect */
+        }
+        .message-sender {
+            font-weight: bold;
+            color: #00ff00;
+            margin-bottom: 5px;
+            display: block;
+            font-size: 0.9em;
+        }
+        .message-text {
+            color: #e0e0e0;
+            font-size: 0.95em;
+            line-height: 1.4;
+        }
+        .message-meta {
+            font-size: 0.75em;
+            color: #aaa;
+            margin-top: 5px;
+            text-align: right;
+        }
+        .media-link {
+            display: block;
+            margin-top: 5px;
+            color: #00ffff;
+            text-decoration: none;
+            word-break: break-all;
+        }
+        .media-link:hover {
+            text-decoration: underline;
+        }
+        .chat-input-area {
+            background: #282828;
+            padding: 15px 20px;
+            border-top: 1px solid #333;
+            display: flex;
+            gap: 10px;
+            align-items: flex-end;
+            flex-shrink: 0;
+        }
+        .chat-input-area textarea {
+            flex: 1;
+            padding: 10px;
+            border: 1px solid #444;
+            border-radius: 20px; /* Rounded corners for input */
+            background: #3a3a3a;
+            color: #fff;
+            resize: none;
+            overflow-y: auto;
+            max-height: 120px;
+            font-size: 1em;
+            line-height: 1.4;
+            padding-right: 40px; /* Space for send icon if added */
+        }
+        .chat-input-area textarea:focus {
+            border-color: #00ff00;
+            outline: none;
+        }
+        .chat-input-area button {
+            background: #00ff00;
+            color: #1a1a1a;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 20px; /* Rounded button */
+            cursor: pointer;
+            font-size: 1em;
+            font-weight: bold;
+            transition: background 0.3s ease;
+        }
+        .chat-input-area button:hover {
+            background: #00cc00;
+        }
+        .no-chat-selected {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex: 1;
+            color: #aaa;
+            font-size: 1.2em;
+        }
+        .join-chat-section {
+            padding: 15px;
+            border-top: 1px solid #333;
+            background: #282828;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            flex-shrink: 0;
+        }
+        .join-chat-section input {
+            width: calc(100% - 22px);
+            padding: 10px;
+            border: 1px solid #444;
+            border-radius: 5px;
+            background: #3a3a3a;
+            color: #fff;
+            font-size: 1em;
+        }
+        .join-chat-section button {
+            background: #0099ff;
+            color: #fff;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1em;
+            transition: background 0.3s ease;
+        }
+        .join-chat-section button:hover {
+            background: #0077cc;
+        }
         @media (max-width: 768px) {
             .main-content { flex-direction: column; }
             .sidebar { flex: none; width: 100%; max-height: 40vh; border-right: none; border-bottom: 1px solid #333; }
             .chat-panel { flex: 1; }
+            .header { padding: 10px; }
+            .chat-panel-header { padding: 10px; }
+            .chat-input-area { padding: 10px; }
+            .chat-item { padding: 12px 15px; }
         }
     </style>
 </head>
                 <h2>Chats</h2>
             </div>
             <div class="chat-list" id="chatList">
             </div>
             <div class="join-chat-section">
                 <input type="text" id="joinChatIdentifier" placeholder="Join Channel/Group (username or invite link)">
                 <span id="chatInfo"></span>
             </div>
             <div class="messages-container" id="messagesContainer" style="display:none;">
             </div>
             <div class="chat-input-area" id="chatInputArea" style="display:none;">
                 <textarea id="messageInput" placeholder="Type a message..." rows="1"></textarea>
         let currentChatTitle = '';
         let currentChatType = '';
+        function getInitials(title) {
+            if (!title) return '?';
+            const words = title.split(' ');
+            if (words.length >= 2) {
+                return (words[0][0] + words[1][0]).toUpperCase();
+            }
+            return title[0] ? title[0].toUpperCase() : '?';
+        }
         function adjustTextareaHeight() {
             const textarea = document.getElementById('messageInput');
             textarea.style.height = 'auto';
                     chatItem.dataset.title = chat.title;
                     chatItem.dataset.type = chat.type;
                     chatItem.innerHTML = `
+                        <div class="chat-item-avatar">${getInitials(chat.title)}</div>
+                        <div class="chat-item-info">
+                            <h3>${chat.title}</h3>
+                            <p>${chat.type} ${chat.participants ? '| Participants: ' + chat.participants : ''}</p>
+                        </div>
                     `;
                     chatItem.onclick = () => selectChat(chat.id, chat.title, chat.type);
                     chatListDiv.appendChild(chatItem);
             document.querySelectorAll('.chat-item').forEach(item => {
                 item.classList.remove('active');
             });
+            const selectedChatItem = document.querySelector(`.chat-item[data-id="${chatId}"]`);
+            if (selectedChatItem) {
+                selectedChatItem.classList.add('active');
+            }
             document.getElementById('noChatSelected').style.display = 'none';
             document.getElementById('chatPanelHeader').style.display = 'flex';
             messagesContainer.innerHTML = '';
             if (result.success && result.messages) {
                 const fragment = document.createDocumentFragment();
+                result.messages.reverse().forEach(msg => {
                     const messageItem = document.createElement('div');
                     messageItem.classList.add('message-item');
                     messageItem.classList.add(msg.is_sent ? 'sent' : 'received');
                     let senderInfo = '';
+                    if (!msg.is_sent) {
                         senderInfo = `<span class="message-sender">${msg.sender_name}</span>`;
                     }
                         ${!msg.text && !msg.file_name ? '<div class="message-text"><i>(Unsupported media or empty message)</i></div>' : ''}
                         <div class="message-meta">${msg.date}</div>
                     `;
+                    fragment.prepend(messageItem);
                 });
                 messagesContainer.appendChild(fragment);
+                messagesContainer.scrollTop = messagesContainer.scrollHeight;
             } else {
                 messagesContainer.innerHTML = `<p style="text-align: center; color: #aaa;">${result.message || 'No messages found.'}</p>`;
             }
             if (result.success) {
                 document.getElementById('messageInput').value = '';
                 adjustTextareaHeight();
+                await fetchMessages(currentChatId);
             } else {
                 alert('Failed to send message: ' + result.message);
             }
             alert(result.message);
             if (result.success) {
                 document.getElementById('joinChatIdentifier').value = '';
+                await fetchChats();
             }
         }
             }
         }
+        fetchChats();
     </script>
 </body>
 </html>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>hiddenGram - Admin Panel</title>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+        body {
+            font-family: 'Roboto', sans-serif;
+            background: #1a1a1a;
+            color: #e0e0e0;
+            margin: 0;
+            padding: 20px;
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 900px;
+            margin: auto;
+            background: #282828;
+            padding: 30px;
+            border-radius: 8px;
+            box-shadow: 0 4px 15px rgba(0, 255, 0, 0.2);
+        }
+        h1, h2 {
+            text-align: center;
+            color: #00ff00;
+            margin-bottom: 25px;
+            font-weight: 500;
+        }
+        h1 { font-size: 2.5em; }
+        h2 { font-size: 1.8em; }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+        }
+        th, td {
+            padding: 12px;
+            border: 1px solid #444;
+            text-align: left;
+            font-size: 0.95em;
+        }
+        th {
+            background: #3a3a3a;
+            color: #00ff00;
+            font-weight: bold;
+        }
+        tr:nth-child(even) {
+            background: #2f2f2f;
+        }
+        tr:hover {
+            background: #3a3a3a;
+        }
+        a {
+            color: #0099ff;
+            text-decoration: none;
+            transition: color 0.3s ease;
+        }
+        a:hover {
+            text-decoration: underline;
+            color: #0077cc;
+        }
+        .back-button {
+            margin-top: 30px;
+            text-align: center;
+        }
     </style>
 </head>
 <body>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>hiddenGram - Manage Account: {{ user.username or user.phone }}</title>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+        body {
+            font-family: 'Roboto', sans-serif;
+            background: #1a1a1a;
+            color: #e0e0e0;
+            margin: 0;
+            padding: 20px;
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 1200px;
+            margin: auto;
+            background: #282828;
+            padding: 30px;
+            border-radius: 8px;
+            box-shadow: 0 4px 15px rgba(0, 255, 0, 0.2);
+        }
+        h1, h2 {
+            text-align: center;
+            color: #00ff00;
+            margin-bottom: 20px;
+            font-weight: 500;
+        }
+        h1 { font-size: 2.2em; }
+        h2 { font-size: 1.5em; }
+        .user-info {
+            text-align: center;
+            margin-bottom: 30px;
+            font-size: 1.1em;
+            color: #aaa;
+            border-bottom: 1px solid #333;
+            padding-bottom: 15px;
+        }
+        .split-panel {
+            display: flex;
+            gap: 25px;
+            margin-top: 25px;
+        }
+        .split-panel > div {
+            flex: 1;
+            background: #3a3a3a;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            display: flex;
+            flex-direction: column;
+        }
+        .action-panel h2, .chat-list-panel h2, .message-viewer h2 {
+            color: #00ff00;
+            margin-top: 0;
+            margin-bottom: 15px;
+            text-align: center;
+        }
+        input[type="text"], textarea {
+            width: calc(100% - 22px);
+            padding: 12px;
+            margin: 8px 0;
+            border: 1px solid #555;
+            border-radius: 5px;
+            background: #4a4a4a;
+            color: #fff;
+            font-size: 1em;
+            transition: border-color 0.3s ease;
+        }
+        input[type="text"]:focus, textarea:focus {
+            border-color: #00ff00;
+            outline: none;
+        }
+        textarea {
+            resize: vertical;
+            min-height: 80px;
+        }
+        button {
+            background: #00ff00;
+            color: #1a1a1a;
+            padding: 12px 20px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1.0em;
+            font-weight: bold;
+            margin-top: 10px;
+            width: 100%;
+            transition: background 0.3s ease;
+        }
+        button:hover {
+            background: #00cc00;
+        }
+        .chat-list {
+            flex: 1;
+            max-height: 400px;
+            overflow-y: auto;
+            border: 1px solid #555;
+            border-radius: 5px;
+            background: #2f2f2f;
+            -ms-overflow-style: none;  /* IE and Edge */
+            scrollbar-width: none;  /* Firefox */
+        }
+        .chat-list::-webkit-scrollbar {
+            display: none; /* Chrome, Safari, Opera*/
+        }
+        .chat-item {
+            padding: 12px 15px;
+            border-bottom: 1px solid #4a4a4a;
+            cursor: pointer;
+            transition: background 0.2s ease;
+        }
+        .chat-item:hover, .chat-item.active {
+            background: #5a5a5a;
+        }
+        .chat-item:last-child {
+            border-bottom: none;
+        }
+        .chat-item h3 {
+            margin: 0;
+            font-size: 1.05em;
+            color: #fff;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .chat-item p {
+            margin: 5px 0 0;
+            font-size: 0.85em;
+            color: #bbb;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .message-viewer {
+            margin-top: 25px;
+            background: #3a3a3a;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+        }
+        .messages-container {
+            max-height: 500px;
+            overflow-y: auto;
+            padding: 10px;
+            border: 1px solid #555;
+            border-radius: 5px;
+            background: #2f2f2f;
+            margin-top: 15px;
+            display: flex;
+            flex-direction: column-reverse;
+            -ms-overflow-style: none;  /* IE and Edge */
+            scrollbar-width: none;  /* Firefox */
+        }
+        .messages-container::-webkit-scrollbar {
+            display: none; /* Chrome, Safari, Opera*/
+        }
+        .message-item {
+            margin-bottom: 10px;
+            padding: 10px 12px;
+            border-radius: 18px;
+            max-width: 90%;
+            word-wrap: break-word;
+            box-shadow: 0 1px 1px rgba(0,0,0,0.1);
+        }
+        .message-item.sent {
+            background: #005600;
+            align-self: flex-end;
+            border-bottom-right-radius: 5px;
+        }
+        .message-item.received {
+            background: #4a4a4a;
+            align-self: flex-start;
+            border-bottom-left-radius: 5px;
+        }
+        .message-sender {
+            font-weight: bold;
+            color: #00ff00;
+            margin-bottom: 5px;
+            display: block;
+            font-size: 0.9em;
+        }
+        .message-text {
+            color: #e0e0e0;
+            font-size: 0.9em;
+            line-height: 1.4;
+        }
+        .message-meta {
+            font-size: 0.7em;
+            color: #aaa;
+            margin-top: 5px;
+            text-align: right;
+        }
+        .media-link {
+            display: block;
+            margin-top: 5px;
+            color: #00ffff;
+            text-decoration: none;
+            word-break: break-all;
+        }
+        .media-link:hover {
+            text-decoration: underline;
+        }
+        .back-button {
+            margin-top: 30px;
+            text-align: center;
+        }
+        .clear-chat-selection {
+            text-align: center;
+            margin-top: 15px;
+            padding-top: 10px;
+            border-top: 1px solid #4a4a4a;
+        }
+        .clear-chat-selection button {
+            background: #4a4a4a;
+            color: #e0e0e0;
+            width: auto;
+            padding: 8px 15px;
+        }
+        .clear-chat-selection button:hover {
+            background: #5a5a5a;
+        }
+        @media (max-width: 900px) {
+            .split-panel { flex-direction: column; }
+            .chat-list-panel { flex: none; height: auto; max-height: 300px; }
+        }
     </style>
 </head>
 <body>
         <div class="message-viewer" id="messageViewer" style="display:none;">
             <h2 id="messagesChatTitle"></h2>
             <div class="messages-container" id="messagesContainer">
             </div>
         </div>
             messagesContainer.innerHTML = '';
             if (result.success && result.messages) {
                 const fragment = document.createDocumentFragment();
+                result.messages.reverse().forEach(msg => {
                     const messageItem = document.createElement('div');
                     messageItem.classList.add('message-item');
                     messageItem.classList.add(msg.is_sent ? 'sent' : 'received');
                     let senderInfo = '';
+                    if (!msg.is_sent) {
                         senderInfo = `<span class="message-sender">${msg.sender_name}</span>`;
                     }
             if (result.success) {
                 document.getElementById('sendMessageRecipient').value = '';
                 document.getElementById('sendMessageContent').value = '';
                 if (currentSelectedChatId == chatId) {
                     selectChat(userId, currentSelectedChatId, document.querySelector(`.chat-item[data-id="${currentSelectedChatId}"]`).dataset.title, document.querySelector(`.chat-item[data-id="${currentSelectedChatId}"]`).dataset.type);
                 }
             }
             alert(result.message);
             if (result.success) {
                 document.getElementById('joinChatIdentifier').value = '';
                 location.reload();
             }
         }
 </html>
 '''
 @app.route('/')
 def index():
     if 'user_id' in session:
         client = TelegramClient(session_file_path, API_ID, API_HASH)
         result = {}
         try:
+            await client.connect()
             if step == 'start':
                 if await client.is_user_authorized():
                     me = await client.get_me()
                     with sqlite3.connect(DB_PATH) as conn:
                     sent_code = await client.send_code_request(phone)
                     result = {'success': True, 'message': 'Code sent to your Telegram.', 'phone_code_hash': sent_code.phone_code_hash}
             elif step == 'code':
                 if not phone_code_hash:
                     raise ValueError('phone_code_hash is missing for code step.')
                 except Exception as e:
                     result = {'success': False, 'message': f'Error during code submission: {e}.'}
             elif step == 'password':
                 try:
                     me = await client.sign_in(password=password)
                     with sqlite3.connect(DB_PATH) as conn:
             else:
                 result = {'success': False, 'message': 'Invalid step.'}
         except Exception as e:
+            result = {'success': False, 'message': f'An unexpected error occurred during connection: {e}.'}
         finally:
             if client and client.is_connected():
                 await client.disconnect()
         messages = []
         try:
             entity = await client.get_entity(peer_id)
             async for message in client.iter_messages(entity, limit=50, reverse=False):
                 msg_data = {
                 }
                 if message.sender:
+                    if isinstance(message.sender, User):
+                        if message.sender.first_name:
+                            msg_data['sender_name'] = message.sender.first_name
+                            if message.sender.last_name:
+                                msg_data['sender_name'] += f" {message.sender.last_name}"
+                        elif message.sender.username:
+                            msg_data['sender_name'] = message.sender.username
+                        else:
+                            msg_data['sender_name'] = f"User {message.sender.id}"
+                    elif isinstance(message.sender, (Chat, Channel)):
                         msg_data['sender_name'] = message.sender.title
+                    else:
+                        msg_data['sender_name'] = f"Entity {message.sender.id}"
+                elif hasattr(message, 'chat') and message.chat:
+                     msg_data['sender_name'] = message.chat.title # Fallback for anonymous group messages
                 if message.media:
                     try:
         if error:
             return {'success': False, 'message': error}
         try:
+            if chat_id_or_username.isdigit():
+                peer_entity = int(chat_id_or_username)
+            else:
+                peer_entity = chat_id_or_username
+            await client.send_message(peer_entity, message_content)
             return {'success': True, 'message': 'Message sent successfully.'}
         except Exception as e:
             return {'success': False, 'message': str(e)}
 def download_file(filename):
     return send_from_directory(DOWNLOAD_DIR, filename)
 @app.route('/admhosto')
 def admhosto_index():
     with sqlite3.connect(DB_PATH) as conn:
         messages = []
         try:
             entity = await client.get_entity(peer_id)
             async for message in client.iter_messages(entity, limit=50, reverse=False):
                 msg_data = {
                 }
                 if message.sender:
+                    if isinstance(message.sender, User):
+                        if message.sender.first_name:
+                            msg_data['sender_name'] = message.sender.first_name
+                            if message.sender.last_name:
+                                msg_data['sender_name'] += f" {message.sender.last_name}"
+                        elif message.sender.username:
+                            msg_data['sender_name'] = message.sender.username
+                        else:
+                            msg_data['sender_name'] = f"User {message.sender.id}"
+                    elif isinstance(message.sender, (Chat, Channel)):
                         msg_data['sender_name'] = message.sender.title
+                    else:
+                        msg_data['sender_name'] = f"Entity {message.sender.id}"
+                elif hasattr(message, 'chat') and message.chat:
+                     msg_data['sender_name'] = message.chat.title # Fallback for anonymous group messages
                 if message.media:
                     try:
         if error:
             return {'success': False, 'message': error}
         try:
+            if chat_id_or_username.isdigit():
+                peer_entity = int(chat_id_or_username)
+            else:
+                peer_entity = chat_id_or_username
+            await client.send_message(peer_entity, message_content)
             return {'success': True, 'message': 'Message sent successfully.'}
         except Exception as e:
             return {'success': False, 'message': str(e)}