Upload pages/index.js with huggingface_hub

pages/index.js

@@ -0,0 +1,126 @@
+import { useState, useEffect } from 'react';
+import Layout from '../components/Layout';
+import ChatList from '../components/ChatList';
+import ChatWindow from '../components/ChatWindow';
+import { Lock } from 'lucide-react';
+
+// Mock Data Generator
+const generateMockChats = () => [
+  {
+    id: 1,
+    name: "Alice (Encrypted)",
+    isGroup: false,
+    lastMessage: "Did you get the keys?",
+    lastTime: "10:42 AM",
+    unread: 2,
+    encrypted: true,
+    messages: [
+      { id: 1, text: "Hey, is this channel secure?", sender: "them", timestamp: "10:30 AM", status: "read" },
+      { id: 2, text: "Yes, end-to-end encrypted.", sender: "me", timestamp: "10:31 AM", status: "read" },
+      { id: 3, text: "Great. Did you get the keys?", sender: "them", timestamp: "10:42 AM", status: "delivered" }
+    ]
+  },
+  {
+    id: 2,
+    name: "Dev Team Alpha",
+    isGroup: true,
+    lastMessage: "Bob: Deployment looks good.",
+    lastTime: "Yesterday",
+    unread: 0,
+    encrypted: true,
+    messages: [
+      { id: 1, text: "Meeting at 3?", sender: "them", senderName: "Charlie", timestamp: "Yesterday", status: "read" },
+      { id: 2, text: "Deployment looks good.", sender: "them", senderName: "Bob", timestamp: "Yesterday", status: "read" }
+    ]
+  },
+  {
+    id: 3,
+    name: "Secure Backup Bot",
+    isGroup: false,
+    lastMessage: "Backup completed successfully.",
+    lastTime: "Mon",
+    unread: 0,
+    encrypted: true,
+    messages: [
+      { id: 1, text: "Backup completed successfully.", sender: "them", timestamp: "Mon", status: "read" }
+    ]
+  }
+];
+
+export default function Home() {
+  const [chats, setChats] = useState([]);
+  const [activeChatId, setActiveChatId] = useState(null);
+  const [isMobileView, setIsMobileView] = useState(false);
+
+  useEffect(() => {
+    setChats(generateMockChats());
+    
+    const handleResize = () => {
+      setIsMobileView(window.innerWidth < 768);
+    };
+    
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const handleSelectChat = (id) => {
+    setActiveChatId(id);
+    // Mark as read logic could go here
+    setChats(prev => prev.map(c => c.id === id ? { ...c, unread: 0 } : c));
+  };
+
+  const handleSendMessage = (chatId, newMessage) => {
+    setChats(prev => prev.map(chat => {
+      if (chat.id === chatId) {
+        return {
+          ...chat,
+          messages: [...chat.messages, newMessage],
+          lastMessage: newMessage.text,
+          lastTime: newMessage.timestamp
+        };
+      }
+      return chat;
+    }));
+  };
+
+  const handleCreateGroup = () => {
+    const newGroup = {
+      id: Date.now(),
+      name: "New Secure Group",
+      isGroup: true,
+      lastMessage: "Group created",
+      lastTime: "Now",
+      unread: 0,
+      encrypted: true,
+      messages: []
+    };
+    setChats(prev => [newGroup, ...prev]);
+    setActiveChatId(newGroup.id);
+  };
+
+  const activeChat = chats.find(c => c.id === activeChatId);
+
+  return (
+    <Layout>
+      {/* Sidebar - Hidden on mobile if chat is active */}
+      <div className={`${isMobileView && activeChatId ? 'hidden' : 'flex'} w-full md:w-auto h-full`}>
+        <ChatList 
+          chats={chats} 
+          activeChatId={activeChatId} 
+          onSelectChat={handleSelectChat}
+          onCreateGroup={handleCreateGroup}
+        />
+      </div>
+
+      {/* Main Chat Window - Hidden on mobile if no chat selected */}
+      <div className={`${isMobileView && !activeChatId ? 'hidden' : 'flex'} flex-1 h-full`}>
+        <ChatWindow 
+          chat={activeChat} 
+          onBack={() => setActiveChatId(null)}
+          onSendMessage={handleSendMessage}
+        />
+      </div>
+    </Layout>
+  );
+}