Upload folder using huggingface_hub

index.html

@@ -9,7 +9,8 @@
   <!-- Persian Font: Vazirmatn -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap"
+    rel="stylesheet">
 
   <!-- Icons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@@ -108,9 +109,19 @@
     }
 
     @keyframes float {
-      0%, 100% { transform: translate(0, 0) scale(1); }
-      33% { transform: translate(30px, -50px) scale(1.1); }
-      66% { transform: translate(-20px, 20px) scale(0.9); }
+
+      0%,
+      100% {
+        transform: translate(0, 0) scale(1);
+      }
+
+      33% {
+        transform: translate(30px, -50px) scale(1.1);
+      }
+
+      66% {
+        transform: translate(-20px, 20px) scale(0.9);
+      }
     }
 
     /* Header */
@@ -161,7 +172,8 @@
       color: white;
     }
 
-    .theme-toggle, .sound-toggle {
+    .theme-toggle,
+    .sound-toggle {
       background: var(--glass);
       border: 1px solid var(--border);
       color: var(--text);
@@ -175,7 +187,8 @@
       transition: all 0.3s ease;
     }
 
-    .theme-toggle:hover, .sound-toggle:hover {
+    .theme-toggle:hover,
+    .sound-toggle:hover {
       background: var(--primary);
       transform: scale(1.1);
     }
@@ -202,8 +215,15 @@
     }
 
     @keyframes slideUp {
-      from { opacity: 0; transform: translateY(30px); }
-      to { opacity: 1; transform: translateY(0); }
+      from {
+        opacity: 0;
+        transform: translateY(30px);
+      }
+
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
     }
 
     .auth-header {
@@ -586,8 +606,15 @@
     }
 
     @keyframes messagePop {
-      from { opacity: 0; transform: scale(0.8) translateY(20px); }
-      to { opacity: 1; transform: scale(1) translateY(0); }
+      from {
+        opacity: 0;
+        transform: scale(0.8) translateY(20px);
+      }
+
+      to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+      }
     }
 
     .message.sent {
@@ -707,12 +734,25 @@
       animation: typing 1.4s infinite;
     }
 
-    .typing-dot:nth-child(2) { animation-delay: 0.2s; }
-    .typing-dot:nth-child(3) { animation-delay: 0.4s; }
+    .typing-dot:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+
+    .typing-dot:nth-child(3) {
+      animation-delay: 0.4s;
+    }
 
     @keyframes typing {
-      0%, 60%, 100% { transform: translateY(0); }
-      30% { transform: translateY(-10px); }
+
+      0%,
+      60%,
+      100% {
+        transform: translateY(0);
+      }
+
+      30% {
+        transform: translateY(-10px);
+      }
     }
 
     /* Chat Input */
@@ -1028,8 +1068,85 @@
     }
 
     @keyframes zoomIn {
-      from { transform: scale(0.5); opacity: 0; }
-      to { transform: scale(1); opacity: 1; }
+      from {
+        transform: scale(0.5);
+        opacity: 0;
+      }
+
+      to {
+        transform: scale(1);
+        opacity: 1;
+      }
+    }
+
+    /* Edit Modal */
+    .edit-modal {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 4000;
+      justify-content: center;
+      align-items: center;
+      backdrop-filter: blur(5px);
+    }
+
+    .edit-modal.active {
+      display: flex;
+    }
+
+    .edit-box {
+      background: var(--surface);
+      padding: 2rem;
+      border-radius: 1rem;
+      border: 1px solid var(--border);
+      width: 90%;
+      max-width: 500px;
+    }
+
+    .edit-box h3 {
+      margin-bottom: 1rem;
+    }
+
+    .edit-box textarea {
+      width: 100%;
+      padding: 1rem;
+      border: 1px solid var(--border);
+      border-radius: 0.5rem;
+      background: var(--glass);
+      color: var(--text);
+      font-family: inherit;
+      resize: vertical;
+      min-height: 100px;
+      margin-bottom: 1rem;
+    }
+
+    .edit-actions {
+      display: flex;
+      gap: 1rem;
+    }
+
+    .edit-actions button {
+      flex: 1;
+      padding: 0.75rem;
+      border: none;
+      border-radius: 0.5rem;
+      cursor: pointer;
+      font-family: inherit;
+      font-weight: 700;
+    }
+
+    .btn-save {
+      background: var(--primary);
+      color: white;
+    }
+
+    .btn-cancel {
+      background: var(--glass);
+      color: var(--text);
     }
   </style>
 </head>
@@ -1147,7 +1264,8 @@
             <button class="mobile-menu-btn" onclick="toggleSidebar()">
               <i class="fas fa-bars"></i>
             </button>
-            <div class="room-icon" id="header-icon" style="width: 45px; height: 45px; border-radius: 1rem; background: var(--glass); display: flex; align-items: center; justify-content: center; font-size: 1.25rem;">
+            <div class="room-icon" id="header-icon"
+              style="width: 45px; height: 45px; border-radius: 1rem; background: var(--glass); display: flex; align-items: center; justify-content: center; font-size: 1.25rem;">
               💬
             </div>
             <div>
@@ -1180,7 +1298,7 @@
 
         <div class="chat-input-container" style="position: relative;">
           <div class="emoji-picker" id="emoji-picker"></div>
-          
+
           <div class="reply-preview" id="reply-preview">
             <div>
               <div style="font-size: 0.8rem; color: var(--primary); margin-bottom: 0.25rem;">پاسخ به:</div>
@@ -1193,7 +1311,7 @@
 
           <div class="chat-input-wrapper">
             <input type="file" id="file-input" accept="image/*" style="display: none;" onchange="handleImageUpload(event)">
-            
+
             <div class="input-actions">
               <button class="input-btn" onclick="document.getElementById('file-input').click()" title="افزودن تصویر">
                 <i class="fas fa-image"></i>
@@ -1204,7 +1322,7 @@
             </div>
 
             <input type="text" class="chat-input" id="message-input" placeholder="پیام خود را بنویسید..." onkeypress="handleKeyPress(event)" oninput="handleTyping()">
-            
+
             <button class="send-btn" id="send-btn" onclick="sendMessage()">
               <i class="fas fa-paper-plane"></i>
             </button>
@@ -1230,6 +1348,18 @@
     <img src="" alt="تصویر بزرگ" id="modal-image">
   </div>
 
+  <!-- Edit Modal -->
+  <div class="edit-modal" id="edit-modal">
+    <div class="edit-box">
+      <h3>ویرایش پیام</h3>
+      <textarea id="edit-textarea"></textarea>
+      <div class="edit-actions">
+        <button class="btn-save" onclick="saveEdit()">ذخیره</button>
+        <button class="btn-cancel" onclick="closeEditModal()">انصراف</button>
+      </div>
+    </div>
+  </div>
+
   <script>
     // State Management
     const state = {
@@ -1241,11 +1371,26 @@
       theme: localStorage.getItem('theme') || 'dark',
       typingTimeout: null,
       replyTo: null,
+      editingMessageId: null,
       simulatedUsers: [
         { name: 'علی', avatar: '👨‍💻', color: '#6366f1' },
         { name: 'مریم', avatar: '👩‍🎨', color: '#ec4899' },
         { name: 'حسن', avatar: '👨‍🔬', color: '#10b981' },
         { name: 'سارا', avatar: '👩‍💼', color: '#f59e0b' }
+      ],
+      autoResponses: [
+        'جالب بود! 👍',
+        'متوجه شدم',
+        'حتماً',
+        'می‌تونی بیشتر توضیح بدی؟',
+        'خیلی عالیه! 🎉',
+        'باشه، فهمیدم',
+        'جالب می‌گه 😄',
+        'کاملاً موافقم',
+        'بذار فکر کنم...',
+        'واقعاً؟! 😮',
+        'خیلی خوبه',
+        'ممنون که گفتی'
       ]
     };
 
@@ -1317,70 +1462,4 @@
 
     // Auth Functions
     function switchAuthTab(tab) {
-      document.querySelectorAll('.auth-tab').forEach(t => t.classList.remove('active'));
-      event.target.classList.add('active');
-      
-      if (tab === 'login') {
-        document.getElementById('login-form').style.display = 'block';
-        document.getElementById('register-form').style.display = 'none';
-      } else {
-        document.getElementById('login-form').style.display = 'none';
-        document.getElementById('register-form').style.display = 'block';
-      }
-    }
-
-    function handleAuth(e, type) {
-      e.preventDefault();
-      
-      let username, name;
-      if (type === 'login') {
-        username = document.getElementById('login-username').value;
-        name = username;
-      } else {
-        name = document.getElementById('reg-name').value;
-        username = document.getElementById('reg-username').value;
-      }
-      
-      state.currentUser = {
-        username,
-        name,
-        avatar: name.charAt(0),
-        id: Date.now()
-      };
-      
-      saveToStorage();
-      showChat();
-      showNotification('خوش آمدید', `خوش آمدید ${name}!`);
-    }
-
-    function showChat() {
-      document.getElementById('auth-screen').style.display = 'none';
-      document.getElementById('main-header').style.display = 'flex';
-      document.getElementById('chat-app').style.display = 'block';
-      
-      document.getElementById('user-display-name').textContent = state.currentUser.name;
-      document.getElementById('user-avatar').textContent = state.currentUser.avatar;
-      
-      initializeRooms();
-      renderRooms();
-      
-      if (state.rooms.length > 0 && !state.currentRoom) {
-        switchRoom(state.rooms[0].id);
-      }
-      
-      // Start simulation
-      startSimulation();
-    }
-
-    function logout() {
-      state.currentUser = null;
-      state.currentRoom = null;
-      localStorage.removeItem('chat_user');
-      location.reload();
-    }
-
-    // Room Management
-    function initializeRooms() {
-      if (state.rooms.length === 0) {
-        state.rooms = [
-          { id: 1, name: 'عمومی', icon: '🌍', type
+      document.querySelectorAll('.auth-tab').forEach(t => t.classList.remove