Upload components/ChatList.js with huggingface_hub

components/ChatList.js

@@ -0,0 +1,103 @@
+import { User, Users, Plus, Search, Lock } from 'lucide-react';
+import { useState } from 'react';
+
+export default function ChatList({ chats, activeChatId, onSelectChat, onCreateGroup }) {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [showCreateModal, setShowCreateModal] = useState(false);
+
+  const filteredChats = chats.filter(chat => 
+    chat.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  return (
+    <div className="w-full md:w-80 lg:w-96 bg-telegram-sidebar flex flex-col border-r border-gray-800 h-full">
+      {/* Search & Actions */}
+      <div className="p-3 space-y-3">
+        <div className="relative">
+          <Search className="absolute left-3 top-2.5 text-telegram-secondary" size={18} />
+          <input 
+            type="text" 
+            placeholder="Search" 
+            className="w-full bg-telegram-bg text-telegram-text pl-10 pr-4 py-2 rounded-full text-sm focus:outline-none focus:ring-1 focus:ring-telegram-accent placeholder-gray-500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </div>
+        <button 
+          onClick={() => setShowCreateModal(true)}
+          className="w-full bg-telegram-accent hover:bg-blue-600 text-white py-2 rounded-full text-sm font-medium transition-colors flex items-center justify-center gap-2"
+        >
+          <Plus size={16} /> New Chat or Group
+        </button>
+      </div>
+
+      {/* Chat List */}
+      <div className="flex-1 overflow-y-auto">
+        {filteredChats.map((chat) => (
+          <div 
+            key={chat.id}
+            onClick={() => onSelectChat(chat.id)}
+            className={`flex items-center gap-3 p-3 cursor-pointer transition-colors hover:bg-white/5 ${activeChatId === chat.id ? 'bg-white/10' : ''}`}
+          >
+            <div className={`w-12 h-12 rounded-full flex items-center justify-center text-lg font-bold ${chat.isGroup ? 'bg-purple-600' : 'bg-gradient-to-br from-blue-500 to-cyan-400'}`}>
+              {chat.isGroup ? <Users size={24} /> : chat.name.charAt(0)}
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="flex justify-between items-center mb-1">
+                <h3 className="font-medium truncate">{chat.name}</h3>
+                <span className="text-xs text-telegram-secondary">{chat.lastTime}</span>
+              </div>
+              <div className="flex justify-between items-center">
+                <p className="text-sm text-telegram-secondary truncate flex items-center gap-1">
+                  {chat.encrypted && <Lock size={10} className="text-green-500" />}
+                  {chat.lastMessage}
+                </p>
+                {chat.unread > 0 && (
+                  <span className="bg-telegram-accent text-white text-xs font-bold px-2 py-0.5 rounded-full min-w-[20px] text-center">
+                    {chat.unread}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Create Group Modal (Simple Implementation) */}
+      {showCreateModal && (
+        <div className="absolute inset-0 bg-black/80 z-50 flex items-center justify-center p-4">
+          <div className="bg-telegram-sidebar w-full max-w-sm rounded-xl p-6 border border-gray-700">
+            <h2 className="text-xl font-bold mb-4">New Group</h2>
+            <p className="text-telegram-secondary text-sm mb-4">
+              Create a secure group for up to 20 people. All messages are end-to-end encrypted.
+            </p>
+            <div className="flex gap-2 mb-4">
+              <input 
+                type="text" 
+                placeholder="Group Name" 
+                className="flex-1 bg-telegram-bg border border-gray-700 rounded-lg px-3 py-2 focus:outline-none focus:border-telegram-accent"
+              />
+            </div>
+            <div className="flex justify-end gap-2">
+              <button 
+                onClick={() => setShowCreateModal(false)}
+                className="px-4 py-2 text-sm text-telegram-secondary hover:text-white"
+              >
+                Cancel
+              </button>
+              <button 
+                onClick={() => {
+                  onCreateGroup();
+                  setShowCreateModal(false);
+
+                className="px-4 py-2 bg-telegram-accent text-white rounded-lg text-sm font-medium"
+              >
+                Create
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}