Spaces:

Behxlder
/

chatty-mcmessageface

Running

App Files Files Community

Behxlder commited on Nov 10, 2025

Commit

3ec3239

verified ·

1 Parent(s): e5db3d8

Need to add posibility to send messages

Browse files

Files changed (5) hide show

README.md +8 -5
components/navbar.js +48 -0
index.html +91 -19
script.js +130 -0
style.css +19 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Chatty Mcmessageface
-emoji: 🦀
-colorFrom: pink
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Chatty McMessageFace  💬
+colorFrom: gray
+colorTo: purple
+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,48 @@

+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .navbar {
+                    background-color: white;
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+                }
+                .search-input {
+                    transition: all 0.3s ease;
+                }
+                .search-input:focus {
+                    width: 200px;
+                }
+                .active-tab {
+                    border-bottom: 2px solid #6366f1;
+                    color: #6366f1;
+                }
+            </style>
+            <nav class="navbar px-4 py-3 flex items-center justify-between border-b border-gray-200">
+                <div class="flex items-center">
+                    <h1 class="text-xl font-bold text-indigo-600">Chatty</h1>
+                    <span class="ml-1 text-xl font-bold text-gray-800">McMessageFace</span>
+                </div>
+                <div class="relative hidden md:block">
+                    <input type="text" placeholder="Search..." class="search-input w-32 bg-gray-100 rounded-full py-1 px-4 pl-8 focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                    <i data-feather="search" class="absolute left-2 top-2 text-gray-400"></i>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <button class="p-2 rounded-full hover:bg-gray-100">
+                        <i data-feather="message-square"></i>
+                    </button>
+                    <button class="p-2 rounded-full hover:bg-gray-100">
+                        <i data-feather="bell"></i>
+                    </button>
+                    <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white font-bold cursor-pointer">
+                        <i data-feather="user"></i>
+                    </div>
+                </div>
+            </nav>
+        `;
+    }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,91 @@
-<!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">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chatty McMessageFace</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-100 h-screen">
+    <custom-navbar></custom-navbar>
+    <div class="container mx-auto px-4 py-6 h-[calc(100%-80px)]">
+        <div class="bg-white rounded-lg shadow-lg h-full flex flex-col">
+            <!-- Chat header -->
+            <div class="border-b border-gray-200 p-4 flex items-center">
+                <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white font-bold">
+                    <i data-feather="user"></i>
+                </div>
+                <div class="ml-3">
+                    <h2 class="font-semibold text-lg">John Doe</h2>
+                    <p class="text-gray-500 text-sm">Online</p>
+                </div>
+                <div class="ml-auto flex space-x-2">
+                    <button class="p-2 rounded-full hover:bg-gray-100">
+                        <i data-feather="phone"></i>
+                    </button>
+                    <button class="p-2 rounded-full hover:bg-gray-100">
+                        <i data-feather="video"></i>
+                    </button>
+                    <button class="p-2 rounded-full hover:bg-gray-100">
+                        <i data-feather="more-vertical"></i>
+                    </button>
+                </div>
+            </div>
+            <!-- Messages area -->
+            <div class="flex-1 p-4 overflow-y-auto" id="messages">
+                <!-- Messages will be loaded here -->
+                <div class="space-y-4">
+                    <!-- Sample incoming message -->
+                    <div class="flex items-start">
+                        <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-600 text-xs mr-2">
+                            JD
+                        </div>
+                        <div class="max-w-xs lg:max-w-md bg-gray-200 rounded-lg p-3">
+                            <p>Hey there! How's it going?</p>
+                            <p class="text-xs text-gray-500 mt-1">10:30 AM</p>
+                        </div>
+                    </div>
+                    <!-- Sample outgoing message -->
+                    <div class="flex items-start justify-end">
+                        <div class="max-w-xs lg:max-w-md bg-indigo-500 text-white rounded-lg p-3">
+                            <p>I'm doing great! Just working on this new messaging app.</p>
+                            <p class="text-xs text-indigo-200 mt-1">10:32 AM</p>
+                        </div>
+                        <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white text-xs ml-2">
+                            ME
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Message input -->
+            <div class="border-t border-gray-200 p-4">
+                <div class="flex items-center">
+                    <button class="p-2 rounded-full hover:bg-gray-100 mr-2">
+                        <i data-feather="plus"></i>
+                    </button>
+                    <input type="text" placeholder="Type a message..." class="flex-1 border border-gray-300 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                    <button class="p-2 rounded-full hover:bg-gray-100 ml-2">
+                        <i data-feather="mic"></i>
+                    </button>
+                    <button class="ml-2 bg-indigo-500 text-white p-2 rounded-full hover:bg-indigo-600">
+                        <i data-feather="send"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <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,130 @@

+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize message storage
+    const messageStorage = JSON.parse(localStorage.getItem('chatMessages')) || [];
+    // Load saved messages
+    function loadMessages() {
+        const messagesContainer = document.getElementById('messages');
+        messagesContainer.querySelector('.space-y-4').innerHTML = '';
+        messageStorage.forEach(msg => {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `flex items-start ${msg.isOutgoing ? 'justify-end' : ''} message`;
+            if (msg.isOutgoing) {
+                messageDiv.innerHTML = `
+                    <div class="max-w-xs lg:max-w-md bg-indigo-500 text-white rounded-lg p-3">
+                        <p>${msg.content}</p>
+                        <p class="text-xs text-indigo-200 mt-1">${msg.timestamp}</p>
+                    </div>
+                    <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white text-xs ml-2">
+                        ME
+                    </div>
+                `;
+            } else {
+                messageDiv.innerHTML = `
+                    <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-600 text-xs mr-2">
+                        JD
+                    </div>
+                    <div class="max-w-xs lg:max-w-md bg-gray-200 rounded-lg p-3">
+                        <p>${msg.content}</p>
+                        <p class="text-xs text-gray-500 mt-1">${msg.timestamp}</p>
+                    </div>
+                `;
+            }
+            messagesContainer.querySelector('.space-y-4').appendChild(messageDiv);
+        });
+        messagesContainer.scrollTop = messagesContainer.scrollHeight;
+    }
+    // Load any existing messages
+    loadMessages();
+    // Function to add a new message
+    function addMessage(content, isOutgoing = true) {
+        const messagesContainer = document.getElementById('messages');
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `flex items-start ${isOutgoing ? 'justify-end' : ''} message`;
+        const timestamp = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
+        // Save message to storage
+        messageStorage.push({
+            content,
+            isOutgoing,
+            timestamp
+        });
+        localStorage.setItem('chatMessages', JSON.stringify(messageStorage));
+        if (isOutgoing) {
+            messageDiv.innerHTML = `
+                <div class="max-w-xs lg:max-w-md bg-indigo-500 text-white rounded-lg p-3">
+                    <p>${content}</p>
+                    <p class="text-xs text-indigo-200 mt-1">${timestamp}</p>
+                </div>
+                <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white text-xs ml-2">
+                    ME
+                </div>
+            `;
+        } else {
+            messageDiv.innerHTML = `
+                <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-600 text-xs mr-2">
+                    JD
+                </div>
+                <div class="max-w-xs lg:max-w-md bg-gray-200 rounded-lg p-3">
+                    <p>${content}</p>
+                    <p class="text-xs text-gray-500 mt-1">${timestamp}</p>
+                </div>
+            `;
+        }
+        messagesContainer.querySelector('.space-y-4').appendChild(messageDiv);
+        messagesContainer.scrollTop = messagesContainer.scrollHeight;
+    }
+    // Handle message submission
+    const input = document.querySelector('input[type="text"]');
+    function sendMessage() {
+        if (input.value.trim() !== '') {
+            addMessage(input.value);
+            input.value = '';
+            // Simulate reply after 1-3 seconds
+            setTimeout(() => {
+                const replies = [
+                    "That's interesting!",
+                    "Tell me more about that.",
+                    "I see what you mean.",
+                    "Sounds good to me!",
+                    "What else is new?",
+                    "I agree with you."
+                ];
+                const randomReply = replies[Math.floor(Math.random() * replies.length)];
+                addMessage(randomReply, false);
+            }, 1000 + Math.random() * 2000);
+        }
+    }
+    input.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+            sendMessage();
+        }
+    });
+    // Send button click handler
+    const sendButton = document.querySelector('button:has(i[data-feather="send"])');
+    sendButton.addEventListener('click', sendMessage);
+    // Clear chat button
+    const clearButton = document.createElement('button');
+    clearButton.className = 'ml-2 bg-red-500 text-white p-2 rounded-full hover:bg-red-600';
+    clearButton.innerHTML = '<i data-feather="trash-2"></i>';
+    clearButton.addEventListener('click', function() {
+        localStorage.removeItem('chatMessages');
+        messageStorage.length = 0;
+        loadMessages();
+    });
+    document.querySelector('.border-t.border-gray-200.p-4 .flex').appendChild(clearButton);
+    feather.replace();
+});

style.css CHANGED Viewed

@@ -1,28 +1,28 @@
-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 for messages */
+#messages::-webkit-scrollbar {
+    width: 6px;
 }
+#messages::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
 }
+#messages::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 10px;
 }
+#messages::-webkit-scrollbar-thumb:hover {
+    background: #a1a1a1;
 }
+/* Animation for new messages */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
 }
+.message {
+    animation: fadeIn 0.3s ease-out;
+}