Spaces:

authorizedcabal
/

chatterbox-frenzy

Running

App Files Files Community

authorizedcabal commited on Jan 10

Commit

a7fc468

verified ·

1 Parent(s): 6b3c6cb

generate a simple chat application with the left pane having images of people and the last message and the right larger pane having a chat window

Browse files

Files changed (5) hide show

README.md +8 -5
components/navbar.js +37 -0
index.html +74 -19
script.js +210 -0
style.css +56 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Chatterbox Frenzy
-emoji: 🚀
-colorFrom: gray
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ChatterBox Frenzy 🗣️
+colorFrom: blue
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/navbar.js ADDED Viewed

	@@ -0,0 +1,37 @@

+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    background: linear-gradient(to right, #3b82f6, #2563eb);
+                }
+                .nav-container {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                }
+                .logo {
+                    font-family: 'Arial', sans-serif;
+                }
+            </style>
+            <nav class="text-white shadow-md py-4">
+                <div class="nav-container px-4 flex justify-between items-center">
+                    <div class="logo flex items-center gap-2">
+                        <i data-feather="message-square" class="w-6 h-6"></i>
+                        <span class="text-xl font-bold">ChatterBox</span>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <button class="p-2 rounded-full hover:bg-blue-600">
+                            <i data-feather="settings"></i>
+                        </button>
+                        <button class="p-2 rounded-full hover:bg-blue-600">
+                            <i data-feather="user"></i>
+                        </button>
+                    </div>
+                </div>
+            </nav>
+        `;
+    }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,74 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChatterBox Frenzy</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
+        <div class="flex flex-col md:flex-row gap-6 rounded-xl overflow-hidden shadow-lg bg-white dark:bg-gray-800 h-[calc(100vh-180px)]">
+            <!-- Left Pane - Contacts List -->
+            <div class="w-full md:w-1/3 border-r border-gray-200 dark:border-gray-700 overflow-y-auto">
+                <div class="p-4 border-b border-gray-200 dark:border-gray-700">
+                    <h2 class="text-xl font-bold text-gray-800 dark:text-white">Conversations</h2>
+                    <div class="relative mt-3">
+                        <input type="text" placeholder="Search chats..." class="w-full px-4 py-2 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <i data-feather="search" class="absolute right-3 top-2.5 text-gray-500"></i>
+                    </div>
+                </div>
+                <div id="contacts-list" class="divide-y divide-gray-200 dark:divide-gray-700">
+                    <!-- Contacts will be dynamically added here -->
+                </div>
+            </div>
+            <!-- Right Pane - Chat Window -->
+            <div class="flex-1 flex flex-col">
+                <!-- Chat Header -->
+                <div id="chat-header" class="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center gap-3 bg-gray-50 dark:bg-gray-700">
+                    <div id="active-contact-details" class="flex-1">
+                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Select a chat</h3>
+                    </div>
+                    <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600">
+                        <i data-feather="moon" class="text-gray-700 dark:text-white"></i>
+                    </button>
+                </div>
+                <!-- Messages Container -->
+                <div id="messages-container" class="flex-1 p-4 overflow-y-auto">
+                    <div class="flex flex-col h-full items-center justify-center text-gray-500 dark:text-gray-400">
+                        <i data-feather="message-square" class="w-16 h-16 mb-4"></i>
+                        <p class="text-lg">Select a conversation to start chatting</p>
+                    </div>
+                </div>
+                <!-- Message Input -->
+                <div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700">
+                    <div id="message-input-container" class="hidden">
+                        <form id="message-form" class="flex gap-2">
+                            <input type="text" id="message-input" placeholder="Type your message..." class="flex-1 px-4 py-2 rounded-full bg-white dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            <button type="submit" class="p-2 rounded-full bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                <i data-feather="send"></i>
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <script src="components/navbar.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,210 @@

+document.addEventListener('DOMContentLoaded', function() {
+    // Mock data for contacts and messages
+    const contacts = [
+        {
+            id: 1,
+            name: 'Alex Johnson',
+            avatar: 'http://static.photos/people/200x200/1',
+            lastMessage: 'Hey, how are you doing?',
+            time: '10:30 AM',
+            messages: [
+                { text: 'Hey there!', sent: false, time: '10:20 AM' },
+                { text: 'Hey, how are you doing?', sent: false, time: '10:30 AM' }
+            ]
+        },
+        {
+            id: 2,
+            name: 'Sarah Miller',
+            avatar: 'http://static.photos/people/200x200/2',
+            lastMessage: 'Can we meet tomorrow?',
+            time: 'Yesterday',
+            messages: [
+                { text: 'Hi Sarah!', sent: true, time: 'Yesterday, 4:20 PM' },
+                { text: 'Can we meet tomorrow?', sent: false, time: 'Yesterday, 4:25 PM' },
+                { text: 'Sure, what time?', sent: true, time: 'Yesterday, 4:30 PM' }
+            ]
+        },
+        {
+            id: 3,
+            name: 'Mark Williams',
+            avatar: 'http://static.photos/people/200x200/3',
+            lastMessage: 'I sent you the files',
+            time: 'Tuesday',
+            messages: [
+                { text: 'Did you get the documents?', sent: false, time: 'Tuesday, 11:15 AM' },
+                { text: 'Not yet, can you send them again?', sent: true, time: 'Tuesday, 11:30 AM' },
+                { text: 'I sent you the files', sent: false, time: 'Tuesday, 11:45 AM' }
+            ]
+        },
+        {
+            id: 4,
+            name: 'Emily Chen',
+            avatar: 'http://static.photos/people/200x200/4',
+            lastMessage: 'Thanks for your help!',
+            time: 'Monday',
+            messages: [
+                { text: 'I need some advice', sent: false, time: 'Monday, 9:00 AM' },
+                { text: 'Of course, what do you need?', sent: true, time: 'Monday, 9:30 AM' },
+                { text: 'Thanks for your help!', sent: false, time: 'Monday, 10:15 AM' }
+            ]
+        },
+        {
+            id: 5,
+            name: 'David Rodriguez',
+            avatar: 'http://static.photos/people/200x200/5',
+            lastMessage: 'See you at the meeting',
+            time: 'Last week',
+            messages: [
+                { text: 'Are we still meeting tomorrow?', sent: true, time: 'Friday, 3:00 PM' },
+                { text: 'Yes, at 2 PM', sent: false, time: 'Friday, 3:30 PM' },
+                { text: 'See you at the meeting', sent: false, time: 'Friday, 4:00 PM' }
+            ]
+        }
+    ];
+    // DOM elements
+    const contactsList = document.getElementById('contacts-list');
+    const messagesContainer = document.getElementById('messages-container');
+    const messageInputContainer = document.getElementById('message-input-container');
+    const messageForm = document.getElementById('message-form');
+    const messageInput = document.getElementById('message-input');
+    const chatHeader = document.getElementById('chat-header');
+    const activeContactDetails = document.getElementById('active-contact-details');
+    const themeToggle = document.getElementById('theme-toggle');
+    // Current selected contact
+    let currentContact = null;
+    // Theme toggle functionality
+    themeToggle.addEventListener('click', function() {
+        const html = document.querySelector('html');
+        if (html.classList.contains('light')) {
+            html.classList.remove('light');
+            html.classList.add('dark');
+            feather.replace();
+            themeToggle.innerHTML = feather.icons['sun'].toSvg();
+        } else {
+            html.classList.remove('dark');
+            html.classList.add('light');
+            feather.replace();
+            themeToggle.innerHTML = feather.icons['moon'].toSvg();
+        }
+    });
+    // Render contacts list
+    function renderContacts() {
+        contactsList.innerHTML = '';
+        contacts.forEach(contact => {
+            const contactItem = document.createElement('div');
+            contactItem.className = 'contact-item p-4 flex items-center gap-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700';
+            contactItem.dataset.contactId = contact.id;
+            contactItem.innerHTML = `
+                <img src="${contact.avatar}" alt="${contact.name}" class="w-12 h-12 rounded-full object-cover">
+                <div class="flex-1 min-w-0">
+                    <h4 class="font-semibold text-gray-800 dark:text-white truncate">${contact.name}</h4>
+                    <p class="text-sm text-gray-600 dark:text-gray-400 truncate">${contact.lastMessage}</p>
+                </div>
+                <span class="text-xs text-gray-500 dark:text-gray-400">${contact.time}</span>
+            `;
+            contactItem.addEventListener('click', () => selectContact(contact.id));
+            contactsList.appendChild(contactItem);
+        });
+    }
+    // Select a contact to chat with
+    function selectContact(contactId) {
+        currentContact = contacts.find(c => c.id === contactId);
+        if (!currentContact) return;
+        // Update active contact details
+        activeContactDetails.innerHTML = `
+            <div class="flex items-center gap-3">
+                <img src="${currentContact.avatar}" alt="${currentContact.name}" class="w-10 h-10 rounded-full object-cover">
+                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">${currentContact.name}</h3>
+            </div>
+        `;
+        // Show message input
+        messageInputContainer.classList.remove('hidden');
+        // Render messages
+        renderMessages(currentContact.messages);
+    }
+    // Render messages for selected contact
+    function renderMessages(messages) {
+        messagesContainer.innerHTML = '';
+        messages.forEach(message => {
+            const messageElement = document.createElement('div');
+            messageElement.className = `message-bubble mb-3 p-3 rounded-xl ${
+                message.sent ? 'sent self-end' : 'received self-start'
+            }`;
+            messageElement.innerHTML = `
+                <p class="whitespace-pre-wrap">${message.text}</p>
+                <span class="text-xs opacity-70 block mt-1 ${
+                    message.sent ? 'text-blue-100' : 'text-gray-500 dark:text-gray-400'
+                }">${message.time}</span>
+            `;
+            messagesContainer.appendChild(messageElement);
+        });
+        // Scroll to bottom
+        messagesContainer.scrollTop = messagesContainer.scrollHeight;
+    }
+    // Send new message
+    messageForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+        const messageText = messageInput.value.trim();
+        if (!messageText || !currentContact) return;
+        // Add message to current contact
+        const newMessage = {
+            text: messageText,
+            sent: true,
+            time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+        };
+        currentContact.messages.push(newMessage);
+        currentContact.lastMessage = messageText;
+        currentContact.time = 'Just now';
+        // Update UI
+        renderMessages(currentContact.messages);
+        renderContacts();
+        messageInput.value = '';
+        // Simulate reply after 1-3 seconds
+        setTimeout(() => {
+            const replies = [
+                "Sounds good!",
+                "I'll get back to you soon.",
+                "Thanks for letting me know.",
+                "Interesting, tell me more.",
+                "Can we talk about this later?"
+            ];
+            const replyMessage = {
+                text: replies[Math.floor(Math.random() * replies.length)],
+                sent: false,
+                time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+            };
+            currentContact.messages.push(replyMessage);
+            currentContact.lastMessage = replyMessage.text;
+            currentContact.time = 'Just now';
+            renderMessages(currentContact.messages);
+            renderContacts();
+        }, 1000 + Math.random() * 2000);
+    });
+    // Initialize
+    renderContacts();
+    feather.replace();
+});

style.css CHANGED Viewed

@@ -1,28 +1,65 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
 }
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
 }
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
 }
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
 }
+.dark ::-webkit-scrollbar-track {
+    background: #374151;
 }
+.dark ::-webkit-scrollbar-thumb {
+    background: #6b7280;
+}
+.dark ::-webkit-scrollbar-thumb:hover {
+    background: #9ca3af;
+}
+/* Message bubbles */
+.message-bubble {
+    max-width: 75%;
+    word-wrap: break-word;
+}
+.message-bubble.received {
+    background-color: #e5e7eb;
+    color: #111827;
+}
+.message-bubble.sent {
+    background-color: #3b82f6;
+    color: white;
+}
+.dark .message-bubble.received {
+    background-color: #374151;
+    color: #f3f4f6;
+}
+.dark .message-bubble.sent {
+    background-color: #2563eb;
+    color: white;
+}
+/* Contact item hover */
+.contact-item:hover {
+    background-color: #f3f4f6;
+}
+.dark .contact-item:hover {
+    background-color: #4b5563;
+}