Crate ai chat interface

README.md

@@ -1,10 +1,13 @@
 ---
-title: Neuralnest Chat Ai Conversations In The Cloud
-emoji: 🔥
-colorFrom: indigo
-colorTo: gray
+title: NeuralNest Chat - AI Conversations in the Cloud 🪺
+colorFrom: gray
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/chat-sidebar.js

@@ -0,0 +1,51 @@
+class CustomChatSidebar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .sidebar {
+          width: 260px;
+          height: 100%;
+          overflow-y: auto;
+        }
+        .conversation-item:hover {
+          background-color: rgba(79, 70, 229, 0.1);
+        }
+        .dark .conversation-item:hover {
+          background-color: rgba(99, 102, 241, 0.2);
+        }
+      </style>
+      <aside class="sidebar border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
+        <div class="p-4">
+          <button class="w-full flex items-center justify-center space-x-2 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition-colors">
+            <i data-feather="plus" class="w-4 h-4"></i>
+            <span>New Chat</span>
+          </button>
+        </div>
+        
+        <div class="px-2">
+          <h3 class="px-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Recent Conversations</h3>
+          <div class="space-y-1">
+            <div class="conversation-item px-3 py-2 rounded-lg cursor-pointer flex items-center space-x-2">
+              <i data-feather="message-square" class="text-gray-500 dark:text-gray-400 w-4 h-4"></i>
+              <span class="text-sm text-gray-800 dark:text-gray-200 truncate">Website design ideas</span>
+            </div>
+            <div class="conversation-item px-3 py-2 rounded-lg cursor-pointer flex items-center space-x-2">
+              <i data-feather="message-square" class="text-gray-500 dark:text-gray-400 w-4 h-4"></i>
+              <span class="text-sm text-gray-800 dark:text-gray-200 truncate">Marketing strategy</span>
+            </div>
+            <div class="conversation-item px-3 py-2 rounded-lg cursor-pointer flex items-center space-x-2">
+              <i data-feather="message-square" class="text-gray-500 dark:text-gray-400 w-4 h-4"></i>
+              <span class="text-sm text-gray-800 dark:text-gray-200 truncate">Content calendar</span>
+            </div>
+            <div class="conversation-item px-3 py-2 rounded-lg cursor-pointer flex items-center space-x-2">
+              <i data-feather="message-square" class="text-gray-500 dark:text-gray-400 w-4 h-4"></i>
+              <span class="text-sm text-gray-800 dark:text-gray-200 truncate">Social media tips</span>
+            </div>
+          </div>
+        </div>
+      </aside>
+    `;
+  }
+}
+customElements.define('custom-chat-sidebar', CustomChatSidebar);

components/navbar.js

@@ -0,0 +1,32 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .navbar {
+          height: 60px;
+          backdrop-filter: blur(10px);
+        }
+      </style>
+      <nav class="navbar border-b border-gray-200 dark:border-gray-700 bg-white/80 dark:bg-gray-800/80">
+        <div class="max-w-7xl mx-auto px-4 h-full flex items-center justify-between">
+          <div class="flex items-center space-x-2">
+            <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
+              <i data-feather="cpu" class="text-white w-4 h-4"></i>
+            </div>
+            <span class="font-bold text-gray-800 dark:text-white">NeuralNest</span>
+          </div>
+          <div class="flex items-center space-x-4">
+            <button class="w-8 h-8 rounded-full flex items-center justify-center text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+              <i data-feather="moon"></i>
+            </button>
+            <button class="w-8 h-8 rounded-full flex items-center justify-center text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+              <i data-feather="settings"></i>
+            </button>
+          </div>
+        </div>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,69 @@
-<!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="h-full">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NeuralNest Chat</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>
+    <script src="components/navbar.js"></script>
+    <script src="components/chat-sidebar.js"></script>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 h-full flex flex-col">
+    <custom-navbar></custom-navbar>
+    
+    <div class="flex flex-1 overflow-hidden">
+        <custom-chat-sidebar></custom-chat-sidebar>
+        
+        <main class="flex-1 flex flex-col bg-white dark:bg-gray-800 overflow-hidden">
+            <!-- Chat header -->
+            <div class="border-b border-gray-200 dark:border-gray-700 p-4 flex items-center">
+                <div class="flex items-center space-x-3">
+                    <div class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center">
+                        <i data-feather="cpu" class="text-indigo-600 dark:text-indigo-300"></i>
+                    </div>
+                    <div>
+                        <h2 class="font-semibold text-gray-800 dark:text-gray-100">AI Assistant</h2>
+                        <p class="text-xs text-gray-500 dark:text-gray-400">Online</p>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Chat messages -->
+            <div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-4">
+                <!-- Messages will be inserted here by JavaScript -->
+            </div>
+            
+            <!-- Message input -->
+            <div class="border-t border-gray-200 dark:border-gray-700 p-4">
+                <form id="message-form" class="flex space-x-2">
+                    <input 
+                        type="text" 
+                        id="message-input" 
+                        placeholder="Type your message..." 
+                        class="flex-1 px-4 py-2 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-800 dark:text-gray-100"
+                        autocomplete="off"
+                    >
+                    <button 
+                        type="submit" 
+                        class="w-10 h-10 rounded-full bg-indigo-600 hover:bg-indigo-700 text-white flex items-center justify-center transition-colors"
+                    >
+                        <i data-feather="send"></i>
+                    </button>
+                </form>
+                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2 text-center">
+                    NeuralNest may produce inaccurate information about people, places, or facts.
+                </p>
+            </div>
+        </main>
+    </div>
+
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,60 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const messageForm = document.getElementById('message-form');
+    const messageInput = document.getElementById('message-input');
+    const chatMessages = document.getElementById('chat-messages');
+    
+    // Sample AI responses
+    const aiResponses = [
+        "I'm analyzing your request...",
+        "That's an interesting question!",
+        "Let me think about that for a moment.",
+        "Based on my knowledge, here's what I found...",
+        "I'd be happy to help with that!"
+    ];
+    
+    // Add a sample welcome message
+    addMessage('ai', "Hello! I'm your AI assistant. How can I help you today?");
+    
+    messageForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const message = messageInput.value.trim();
+        
+        if (message) {
+            // Add user message
+            addMessage('user', message);
+            messageInput.value = '';
+            
+            // Simulate AI thinking
+            setTimeout(() => {
+                const randomResponse = aiResponses[Math.floor(Math.random() * aiResponses.length)];
+                addMessage('ai', randomResponse);
+            }, 1000 + Math.random() * 2000);
+        }
+    });
+    
+    function addMessage(sender, text) {
+        const messageElement = document.createElement('div');
+        messageElement.classList.add('message');
+        
+        if (sender === 'user') {
+            messageElement.innerHTML = `
+                <div class="flex justify-end">
+                    <div class="max-w-xs md:max-w-md lg:max-w-lg bg-indigo-600 text-white rounded-2xl px-4 py-2">
+                        ${text}
+                    </div>
+                </div>
+            `;
+        } else {
+            messageElement.innerHTML = `
+                <div class="flex justify-start">
+                    <div class="max-w-xs md:max-w-md lg:max-w-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-2xl px-4 py-2">
+                        ${text}
+                    </div>
+                </div>
+            `;
+        }
+        
+        chatMessages.appendChild(messageElement);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+    }
+});

style.css

@@ -1,28 +1,37 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 6px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.dark ::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.05);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.dark ::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
 }
+
+/* Animation for message appearance */
+@keyframes messageAppear {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.message {
+    animation: messageAppear 0.3s ease-out forwards;
+}