Spaces:

asd1asd1
/

deepchat-explorer

Running

App Files Files Community

asd1asd1 commited on Oct 23, 2025

Commit

6777b26

verified ·

1 Parent(s): 0bbae40

es muy basica debe ser mas potente trata de igual y mejorar a grok

Browse files

Files changed (5) hide show

components/navbar.js +6 -2
index.html +70 -282
script.js +180 -10
style.css +65 -5
templates.html +129 -0

components/navbar.js CHANGED Viewed

@@ -60,9 +60,13 @@ class CustomNavbar extends HTMLElement {
         <ul>
           <li><a href="/">Home</a></li>
           <li><a href="/research.html">Research</a></li>
-          <li><a href="/settings.html">Settings</a></li>
         </ul>
-      </nav>
     `;
   }
 }

         <ul>
           <li><a href="/">Home</a></li>
           <li><a href="/research.html">Research</a></li>
+          <li><a href="/templates.html">Templates</a></li>
+          <li><a href="/settings.html">
+            <i data-feather="settings" class="w-4 h-4 mr-1 inline"></i>
+            Settings
+          </a></li>
         </ul>
+</nav>
     `;
   }
 }

index.html CHANGED Viewed

@@ -1,131 +1,79 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DeepChat Explorer - Advanced AI Research Assistant</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-gradient-to-br from-gray-900 via-purple-900 to-gray-900 min-h-screen">
     <custom-navbar></custom-navbar>
     <div class="container mx-auto px-4 py-8">
-        <!-- Advanced Chat Interface -->
-        <div class="max-w-6xl mx-auto bg-gray-800/50 backdrop-blur-lg rounded-2xl shadow-2xl overflow-hidden border border-gray-700">
-            <!-- Enhanced Chat Header -->
-            <div class="bg-gradient-to-r from-purple-600 via-blue-600 to-indigo-600 px-6 py-4 flex items-center justify-between">
                 <div class="flex items-center">
-                    <i data-feather="zap" class="text-white mr-3 w-6 h-6"></i>
-                    <h1 class="text-2xl font-bold text-white">DeepChat Explorer Pro</h1>
                 </div>
-                <div class="flex items-center space-x-4">
-                    <div class="flex items-center text-sm text-white/80">
-                        <div class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></div>
-                        <span>Online</span>
-                    </div>
-                    <div class="flex space-x-2">
-                        <button class="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-all">
-                            <i data-feather="settings" class="w-4 h-4 text-white"></i>
-                        </button>
-                        <button class="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-all">
-                            <i data-feather="maximize" class="w-4 h-4 text-white"></i>
-                        </button>
-                    </div>
                 </div>
             </div>
-            <!-- Advanced Chat Container -->
-            <div class="h-[500px] overflow-y-auto p-6 bg-gradient-to-b from-gray-900/80 to-gray-800/80" id="chat-container">
-                <!-- Welcome Message -->
-                <div class="text-center py-8">
-                    <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full mb-4">
-                        <i data-feather="brain" class="w-8 h-8 text-white"></i>
-                    </div>
-                    <h2 class="text-2xl font-bold text-white mb-2">Welcome to DeepChat Explorer Pro</h2>
-                    <p class="text-gray-300">I'm your advanced AI research assistant. I can help you with:</p>
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6 max-w-2xl mx-auto">
-                        <div class="bg-gray-700/50 p-4 rounded-lg border border-gray-600">
-                            <i data-feather="search" class="w-6 h-6 text-blue-400 mb-2"></i>
-                            <h3 class="font-semibold text-white">Deep Research</h3>
-                            <p class="text-sm text-gray-300">Multi-source analysis with citations</p>
-                        </div>
-                        <div class="bg-gray-700/50 p-4 rounded-lg border border-gray-600">
-                            <i data-feather="trending-up" class="w-6 h-6 text-green-400 mb-2"></i>
-                            <h3 class="font-semibold text-white">Real-time Data</h3>
-                            <p class="text-sm text-gray-300">Latest information and trends</p>
-                        </div>
-                        <div class="bg-gray-700/50 p-4 rounded-lg border border-gray-600">
-                            <i data-feather="code" class="w-6 h-6 text-purple-400 mb-2"></i>
-                            <h3 class="font-semibold text-white">Code Generation</h3>
-                            <p class="text-sm text-gray-300">Programming assistance</p>
-                        </div>
-                    </div>
                 </div>
             </div>
-            <!-- Enhanced Input Area -->
-            <div class="border-t border-gray-700 p-6 bg-gray-800/80">
-                <div class="flex flex-col space-y-4">
-                    <!-- Quick Actions -->
-                    <div class="flex flex-wrap gap-2 justify-center">
-                        <button class="quick-action-btn" data-action="research">
-                            <i data-feather="search" class="w-4 h-4"></i>
-                            Research Topic
-                        </button>
-                        <button class="quick-action-btn" data-action="summarize">
-                            <i data-feather="file-text" class="w-4 h-4"></i>
-                            Summarize
-                        </button>
-                        <button class="quick-action-btn" data-action="code">
-                            <i data-feather="code" class="w-4 h-4"></i>
-                            Write Code
-                        </button>
-                        <button class="quick-action-btn" data-action="analyze">
-                            <i data-feather="bar-chart" class="w-4 h-4"></i>
-                            Analyze Data
-                        </button>
-                    </div>
-                    <!-- Advanced Input Form -->
-                    <form id="chat-form" class="flex gap-3">
-                        <div class="flex-1 relative">
-                            <input
-                                type="text"
-                                id="message-input"
-                                placeholder="Ask me anything... I can research, code, analyze, and more!"
-                                class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-white placeholder-gray-400 pr-12"
-                                autocomplete="off"
-                            >
-                            <button type="button" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white">
-                                <i data-feather="mic" class="w-5 h-5"></i>
-                            </button>
-                        </div>
-                        <button
-                            type="submit"
-                            class="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:from-blue-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-800 transition-all duration-200 flex items-center space-x-2"
                         >
-                            <i data-feather="send" class="w-4 h-4"></i>
-                            <span>Send</span>
                         </button>
-                    </form>
-                    <!-- Model Status -->
-                    <div class="text-center text-sm text-gray-400">
-                        <div class="inline-flex items-center space-x-2 bg-gray-900/50 px-3 py-1 rounded-full">
-                            <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
-                            <span>DeepChat Pro v2.0 • Real-time Processing • Multi-modal Support</span>
-                        </div>
                     </div>
-                </div>
             </div>
         </div>
     </div>
-    <custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
@@ -133,199 +81,39 @@
     <script>
         feather.replace();
-        // Enhanced Chat Functionality
-        const chatForm = document.getElementById('chat-form');
-        const messageInput = document.getElementById('message-input');
-        const chatContainer = document.getElementById('chat-container');
-        // Quick action buttons
-        document.querySelectorAll('.quick-action-btn').forEach(btn => {
-            btn.addEventListener('click', function() {
-                const action = this.getAttribute('data-action');
-                const prompts = {
-                    research: "Research the latest developments in artificial intelligence and provide a comprehensive analysis with sources.",
-                    summarize: "Please summarize the key points from this research paper or article.",
-                    code: "Write a Python function to analyze and visualize data trends.",
-                    analyze: "Analyze the current market trends and provide insights with data visualization."
-                };
-                messageInput.value = prompts[action];
-                messageInput.focus();
-            });
-        });
-        chatForm.addEventListener('submit', function(e) {
             e.preventDefault();
-            const message = messageInput.value.trim();
             if (message) {
                 addMessage(message, 'user');
-                messageInput.value = '';
-                // Show typing indicator
-                showTypingIndicator();
-                // Simulate advanced AI response with multiple message types
                 setTimeout(() => {
-                    removeTypingIndicator();
-                    // Advanced response with multiple message types
-                    const responses = generateAdvancedResponse(message);
-                    responses.forEach((response, index) => {
-                        setTimeout(() => {
-                            addMessage(response.text, 'ai', response.type);
-                        }, index * 800);
-                    });
-                }, 2000);
             }
         });
-        function showTypingIndicator() {
-            const typingDiv = document.createElement('div');
-            typingDiv.className = 'mb-4 flex justify-start';
-            typingDiv.id = 'typing-indicator';
-            typingDiv.innerHTML = `
-                <div class="bg-gray-700 rounded-lg py-3 px-4 max-w-xs">
-                    <div class="flex space-x-1">
-                        <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
-                        <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
-                        <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
-                    </div>
-                </div>
-            `;
-            chatContainer.appendChild(typingDiv);
-            chatContainer.scrollTop = chatContainer.scrollHeight;
-        }
-        function removeTypingIndicator() {
-            const indicator = document.getElementById('typing-indicator');
-            if (indicator) indicator.remove();
-        }
-        function addMessage(text, sender, type = 'text') {
             const messageDiv = document.createElement('div');
-            messageDiv.className = `mb-4 flex ${sender === 'user' ? 'justify-end' : 'justify-start'} animate-fade-in`;
-            let messageContent = '';
-            if (sender === 'user') {
-                messageContent = `
-                    <div class="bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-2xl py-3 px-4 max-w-lg shadow-lg">
-                        <p class="text-sm">${text}</p>
-                    </div>
-                `;
-            } else {
-                switch(type) {
-                    case 'code':
-                        messageContent = `
-                            <div class="bg-gray-900 border border-gray-700 rounded-2xl p-4 max-w-2xl shadow-lg">
-                                <div class="flex items-center justify-between mb-2">
-                                    <div class="flex items-center space-x-2">
-                                        <i data-feather="code" class="w-4 h-4 text-green-400"></i>
-                                        <span class="text-sm font-medium text-green-400">CODE GENERATED</span>
-                                    </div>
-                                    <button class="text-gray-400 hover:text-white">
-                                        <i data-feather="copy" class="w-4 h-4"></i>
-                                    </button>
-                                </div>
-                                <pre class="text-sm text-gray-200 overflow-x-auto"><code>${text}</code></pre>
-                            </div>
-                        `;
-                        break;
-                    case 'analysis':
-                        messageContent = `
-                            <div class="bg-gray-900 border border-gray-700 rounded-2xl p-4 max-w-2xl shadow-lg">
-                                <div class="flex items-center space-x-2 mb-2">
-                                    <i data-feather="bar-chart" class="w-4 h-4 text-blue-400"></i>
-                                    <span class="text-sm font-medium text-blue-400">DATA ANALYSIS</span>
-                                </div>
-                                <div class="text-sm text-gray-200">${text}</div>
-                                <div class="mt-3 p-3 bg-gray-800 rounded-lg">
-                                    <div class="flex justify-between text-xs text-gray-400">
-                                        <span>Confidence: 92%</span>
-                                        <span>Sources: 5 verified</span>
-                                    </div>
-                                </div>
-                            </div>
-                        `;
-                        break;
-                    default:
-                        messageContent = `
-                            <div class="bg-gray-700 rounded-2xl py-3 px-4 max-w-2xl shadow-lg">
-                                <p class="text-sm text-gray-100">${text}</p>
-                                <div class="mt-2 flex items-center space-x-4 text-xs text-gray-400">
-                                    <span>✓ Verified Sources</span>
-                                    <span>•</span>
-                                    <span>Real-time Data</span>
-                                </div>
-                            </div>
-                        `;
-                }
-            }
-            messageDiv.innerHTML = messageContent;
-            chatContainer.appendChild(messageDiv);
-            chatContainer.scrollTop = chatContainer.scrollHeight;
-            // Re-initialize feather icons for new content
-            feather.replace();
-        }
-        function generateAdvancedResponse(userMessage) {
-            const lowerMessage = userMessage.toLowerCase();
-            const responses = [];
-            // Research-related responses
-            if (lowerMessage.includes('research') || lowerMessage.includes('analyze') || lowerMessage.includes('study')) {
-                responses.push({
-                    text: "🔍 I'm conducting a comprehensive research analysis on your topic...",
-                    type: 'text'
-                });
-                responses.push({
-                    text: "📊 I've gathered data from 12+ sources including academic papers, news articles, and real-time databases.",
-                    type: 'text'
-                });
-                responses.push({
-                    text: "**Key Findings:**\n• Recent studies show significant advancements\n• Market trends indicate 35% growth potential\n• Emerging technologies are disrupting traditional approaches\n\n**Sources Verified:**\n✓ IEEE Research Papers\n✓ Google Scholar\n✓ Industry Reports",
-                    type: 'analysis'
-                });
-            }
-            // Code-related responses
-            else if (lowerMessage.includes('code') || lowerMessage.includes('program') || lowerMessage.includes('function')) {
-                responses.push({
-                    text: "```python\nimport pandas as pd\nimport matplotlib.pyplot as plt\nimport numpy as np\n\ndef analyze_trends(data):\n    \"\"\"Advanced data analysis function\"\"\"\n    df = pd.DataFrame(data)\n    trends = df.rolling(window=7).mean()\n    \n    plt.figure(figsize=(12, 6))\n    plt.plot(df.index, df.values, alpha=0.5, label='Original')\n    plt.plot(trends.index, trends.values, label='7-day Trend', linewidth=2)\n    plt.legend()\n    plt.title('Advanced Trend Analysis')\n    plt.show()\n    \n    return trends\n```",
-                    type: 'code'
-                });
-                responses.push({
-                    text: "This Python function provides real-time trend analysis with visualization. Would you like me to explain any specific part or modify it for your use case?",
-                    type: 'text'
-                });
-            }
-            // Default advanced response
-            else {
-                responses.push({
-                    text: "🤖 I understand you're asking about: " + userMessage,
-                    type: 'text'
-                });
-                responses.push({
-                    text: "I'm processing this through multiple AI models to provide you with the most accurate and up-to-date information.",
-                    type: 'text'
-                });
-                responses.push({
-                    text: "**Comprehensive Analysis Complete:**\n• Cross-referenced with current databases\n• Verified against multiple sources\n• Real-time data integration applied\n• Confidence level: 94%",
-                    type: 'analysis'
-                });
-                responses.push({
-                    text: "Would you like me to dive deeper into any specific aspect or provide additional resources?",
-                    type: 'text'
-                });
-            }
-            return responses;
         }
-        // Auto-focus input
-        messageInput.focus();
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DeepChat Explorer</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-100">
     <custom-navbar></custom-navbar>
     <div class="container mx-auto px-4 py-8">
+        <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
+            <!-- Chat header with model selector -->
+            <div class="bg-indigo-600 px-6 py-4 flex items-center justify-between">
                 <div class="flex items-center">
+                    <i data-feather="message-square" class="text-white mr-2"></i>
+                    <h1 class="text-xl font-bold text-white">DeepChat Explorer</h1>
                 </div>
+                <div class="relative">
+                    <select id="model-selector" class="bg-indigo-700 text-white rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-white">
+                        <option value="grok-1">Grok-1 (Default)</option>
+                        <option value="llama-3">Llama-3</option>
+                        <option value="mixtral">Mixtral</option>
+                        <option value="gpt-4">GPT-4</option>
+                    </select>
                 </div>
             </div>
+            <!-- Chat container with typing indicator -->
+            <div class="h-[32rem] overflow-y-auto p-4" id="chat-container">
+                <div class="text-center text-gray-500 py-10">
+                    <i data-feather="send" class="w-12 h-12 mx-auto mb-4"></i>
+                    <p>Start chatting with your AI research assistant</p>
                 </div>
             </div>
+            <!-- Enhanced input area with features -->
+            <div class="border-t border-gray-200 p-4 bg-gray-50">
+                <div class="flex mb-2 gap-2">
+                    <button class="px-3 py-1 text-xs bg-indigo-100 text-indigo-700 rounded-full hover:bg-indigo-200">
+                        <i data-feather="search" class="w-3 h-3 mr-1 inline"></i> Web Search
+                    </button>
+                    <button class="px-3 py-1 text-xs bg-indigo-100 text-indigo-700 rounded-full hover:bg-indigo-200">
+                        <i data-feather="file-text" class="w-3 h-3 mr-1 inline"></i> Document
+                    </button>
+                    <button class="px-3 py-1 text-xs bg-indigo-100 text-indigo-700 rounded-full hover:bg-indigo-200">
+                        <i data-feather="code" class="w-3 h-3 mr-1 inline"></i> Code
+                    </button>
+                </div>
+                <form id="chat-form" class="flex gap-2">
+                    <div class="flex-1 relative">
+                        <input
+                            type="text"
+                            id="message-input"
+                            placeholder="Ask something to research..."
+                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 pr-10"
+                            autocomplete="off"
                         >
+                        <button type="button" class="absolute right-2 top-2.5 text-gray-400 hover:text-indigo-600">
+                            <i data-feather="mic" class="w-5 h-5"></i>
                         </button>
                     </div>
+                    <button
+                        type="submit"
+                        class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 flex items-center"
+                    >
+                        <i data-feather="send" class="inline mr-1"></i> Send
+                    </button>
+                </form>
             </div>
         </div>
     </div>
+<custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
     <script>
         feather.replace();
+        // Chat functionality
+        document.getElementById('chat-form').addEventListener('submit', function(e) {
             e.preventDefault();
+            const input = document.getElementById('message-input');
+            const message = input.value.trim();
             if (message) {
                 addMessage(message, 'user');
+                input.value = '';
+                // Simulate AI response (in a real app, this would call your backend)
                 setTimeout(() => {
+                    addMessage("I'm researching: " + message, 'ai');
+                    addMessage("Found 3 relevant sources about this topic. Would you like me to summarize them?", 'ai');
+                }, 1000);
             }
         });
+        function addMessage(text, sender) {
+            const container = document.getElementById('chat-container');
             const messageDiv = document.createElement('div');
+            messageDiv.className = `mb-4 flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
+            messageDiv.innerHTML = `
+                <div class="${sender === 'user' ? 'bg-indigo-100' : 'bg-gray-200'} rounded-lg py-2 px-4 max-w-xs md:max-w-md">
+                    <p>${text}</p>
+                </div>
+            `;
+            container.appendChild(messageDiv);
+            container.scrollTop = container.scrollHeight;
         }
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
+</html>

script.js CHANGED Viewed

@@ -1,10 +1,180 @@
-// Shared JavaScript across all pages
-console.log('DeepChat Explorer loaded');
-// Initialize tooltips for icons
-document.addEventListener('DOMContentLoaded', function() {
-    const icons = document.querySelectorAll('[data-feather]');
-    icons.forEach(icon => {
-        icon.setAttribute('title', icon.getAttribute('data-feather'));
-    });
-});

+// Enhanced JavaScript with Grok-like features
+console.log('DeepChat Explorer Pro loaded');
+class DeepChat {
+    constructor() {
+        this.currentModel = 'grok-1';
+        this.conversationId = this.generateId();
+        this.isTyping = false;
+        this.init();
+    }
+    init() {
+        document.addEventListener('DOMContentLoaded', () => {
+            this.setupUI();
+            this.setupEventListeners();
+        });
+    }
+    setupUI() {
+        // Initialize tooltips for icons
+        const icons = document.querySelectorAll('[data-feather]');
+        icons.forEach(icon => {
+            icon.setAttribute('title', icon.getAttribute('data-feather'));
+        });
+        // Initialize model selector
+        const modelSelector = document.getElementById('model-selector');
+        if (modelSelector) {
+            modelSelector.addEventListener('change', (e) => {
+                this.currentModel = e.target.value;
+                this.addSystemMessage(`Model changed to ${e.target.options[e.target.selectedIndex].text}`);
+            });
+        }
+    }
+    setupEventListeners() {
+        const chatForm = document.getElementById('chat-form');
+        if (chatForm) {
+            chatForm.addEventListener('submit', (e) => {
+                e.preventDefault();
+                this.handleUserMessage();
+            });
+        }
+    }
+    handleUserMessage() {
+        const input = document.getElementById('message-input');
+        const message = input.value.trim();
+        if (message) {
+            this.addMessage(message, 'user');
+            input.value = '';
+            this.showTypingIndicator();
+            // Simulate API call with different model behaviors
+            setTimeout(() => {
+                this.hideTypingIndicator();
+                this.generateAIResponse(message);
+            }, 1000 + Math.random() * 2000);
+        }
+    }
+    generateAIResponse(userMessage) {
+        const responses = {
+            'grok-1': [
+                `I've analyzed your query about "${userMessage}" with Grok-1's real-time knowledge.`,
+                `Here are the key insights from 5 authoritative sources:`,
+                `1. Recent research shows...`,
+                `2. Industry trends indicate...`,
+                `Would you like me to dive deeper into any specific aspect?`
+            ],
+            'llama-3': [
+                `Based on Llama-3's comprehensive training data about "${userMessage}":`,
+                `- First important point...`,
+                `- Second key finding...`,
+                `- Additional context...`,
+                `I can provide references if needed.`
+            ],
+            'mixtral': [
+                `Mixtral's analysis of "${userMessage}" reveals:`,
+                `• Perspective 1 (Technical)...`,
+                `• Perspective 2 (Business)...`,
+                `• Perspective 3 (Ethical)...`,
+                `Which perspective would you like to explore further?`
+            ],
+            'gpt-4': [
+                `GPT-4's detailed response to "${userMessage}":`,
+                `1. Comprehensive overview...`,
+                `2. Critical analysis...`,
+                `3. Future implications...`,
+                `4. Recommended actions...`,
+                `Would you like me to format this as a report?`
+            ]
+        };
+        const modelResponses = responses[this.currentModel] || responses['grok-1'];
+        modelResponses.forEach((line, index) => {
+            setTimeout(() => {
+                this.addMessage(line, 'ai');
+            }, 300 * index);
+        });
+    }
+    showTypingIndicator() {
+        if (this.isTyping) return;
+        this.isTyping = true;
+        const container = document.getElementById('chat-container');
+        const typingDiv = document.createElement('div');
+        typingDiv.id = 'typing-indicator';
+        typingDiv.className = 'mb-4 flex justify-start';
+        typingDiv.innerHTML = `
+            <div class="bg-gray-200 rounded-lg py-2 px-4 max-w-xs">
+                <div class="flex space-x-1">
+                    <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
+                    <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
+                    <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
+                </div>
+            </div>
+        `;
+        container.appendChild(typingDiv);
+        container.scrollTop = container.scrollHeight;
+    }
+    hideTypingIndicator() {
+        this.isTyping = false;
+        const indicator = document.getElementById('typing-indicator');
+        if (indicator) indicator.remove();
+    }
+    addMessage(text, sender) {
+        const container = document.getElementById('chat-container');
+        // Remove initial empty state if present
+        if (container.children.length === 1 && container.children[0].classList.contains('text-center')) {
+            container.innerHTML = '';
+        }
+        // Remove typing indicator if present
+        if (this.isTyping) {
+            this.hideTypingIndicator();
+        }
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `mb-4 flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
+        messageDiv.innerHTML = `
+            <div class="${sender === 'user' ? 'bg-indigo-100' : 'bg-gray-200'} rounded-lg py-2 px-4 max-w-xs md:max-w-md">
+                ${sender === 'ai' ? `<div class="text-xs text-gray-500 mb-1">${this.currentModel.toUpperCase()}</div>` : ''}
+                <p class="${sender === 'ai' ? 'text-gray-800' : ''}">${text}</p>
+                <div class="text-xs text-gray-500 mt-1 text-right">${new Date().toLocaleTimeString()}</div>
+            </div>
+        `;
+        container.appendChild(messageDiv);
+        container.scrollTop = container.scrollHeight;
+    }
+    addSystemMessage(text) {
+        const container = document.getElementById('chat-container');
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'mb-4 flex justify-center';
+        messageDiv.innerHTML = `
+            <div class="bg-yellow-100 text-yellow-800 text-xs px-3 py-1 rounded-full">
+                ${text}
+            </div>
+        `;
+        container.appendChild(messageDiv);
+        container.scrollTop = container.scrollHeight;
+    }
+    generateId() {
+        return 'conv-' + Math.random().toString(36).substr(2, 9);
+    }
+}
+// Initialize the chat system
+new DeepChat();

style.css CHANGED Viewed

@@ -1,12 +1,19 @@
-/* Shared styles across all pages */
 body {
-    font-family: 'Inter', sans-serif;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
 }
-/* Chat container scrollbar */
 #chat-container::-webkit-scrollbar {
     width: 8px;
 }
@@ -25,12 +32,65 @@ body {
     background: #a5b4fc;
 }
-/* Animation for messages */
 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(10px); }
     to { opacity: 1; transform: translateY(0); }
 }
 #chat-container div {
     animation: fadeIn 0.3s ease-out;
-}

+/* Enhanced styles for Grok-like interface */
 body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
+    background-color: #f8fafc;
+}
+/* Chat container improvements */
+#chat-container {
+    scroll-behavior: smooth;
+    background-color: #f9fafb;
 }
 #chat-container::-webkit-scrollbar {
     width: 8px;
 }
     background: #a5b4fc;
 }
+/* Message animations and styles */
 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(10px); }
     to { opacity: 1; transform: translateY(0); }
 }
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
 #chat-container div {
     animation: fadeIn 0.3s ease-out;
+}
+/* Typing indicator animation */
+.animate-bounce {
+    animation: bounce 1.5s infinite;
+}
+@keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-5px); }
+}
+/* Model selector styles */
+#model-selector {
+    appearance: none;
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 0.5rem center;
+    background-size: 1rem;
+    padding-right: 1.5rem;
+}
+/* Responsive improvements */
+@media (max-width: 640px) {
+    #chat-container {
+        height: calc(100vh - 220px) !important;
+    }
+    .bg-indigo-600 {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+        padding: 1rem;
+    }
+    #model-selector {
+        margin-top: 0.5rem;
+        width: 100%;
+    }
+}
+/* Feature buttons in input area */
+.bg-indigo-100 {
+    transition: all 0.2s ease;
+}
+.bg-indigo-100:hover {
+    transform: translateY(-1px);
+}

templates.html ADDED Viewed

	@@ -0,0 +1,129 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Templates | DeepChat Explorer</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-100">
+    <custom-navbar></custom-navbar>
+    <div class="container mx-auto px-4 py-8">
+        <div class="max-w-6xl mx-auto">
+            <div class="flex items-center mb-6">
+                <i data-feather="layers" class="text-indigo-600 mr-2"></i>
+                <h1 class="text-2xl font-bold text-gray-800">Prompt Templates</h1>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Research Template -->
+                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+                    <div class="bg-indigo-600 px-4 py-3">
+                        <h2 class="text-white font-semibold flex items-center">
+                            <i data-feather="search" class="mr-2 w-4 h-4"></i>
+                            Research Assistant
+                        </h2>
+                    </div>
+                    <div class="p-4">
+                        <p class="text-gray-600 mb-4">Comprehensive research template for academic or market research</p>
+                        <button class="w-full bg-indigo-100 text-indigo-700 py-2 rounded-lg hover:bg-indigo-200 transition-colors">
+                            Use Template
+                        </button>
+                    </div>
+                </div>
+                <!-- Code Review Template -->
+                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+                    <div class="bg-indigo-600 px-4 py-3">
+                        <h2 class="text-white font-semibold flex items-center">
+                            <i data-feather="code" class="mr-2 w-4 h-4"></i>
+                            Code Review
+                        </h2>
+                    </div>
+                    <div class="p-4">
+                        <p class="text-gray-600 mb-4">Analyze and improve code quality with this template</p>
+                        <button class="w-full bg-indigo-100 text-indigo-700 py-2 rounded-lg hover:bg-indigo-200 transition-colors">
+                            Use Template
+                        </button>
+                    </div>
+                </div>
+                <!-- Business Plan Template -->
+                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+                    <div class="bg-indigo-600 px-4 py-3">
+                        <h2 class="text-white font-semibold flex items-center">
+                            <i data-feather="briefcase" class="mr-2 w-4 h-4"></i>
+                            Business Plan
+                        </h2>
+                    </div>
+                    <div class="p-4">
+                        <p class="text-gray-600 mb-4">Structured approach to creating business plans</p>
+                        <button class="w-full bg-indigo-100 text-indigo-700 py-2 rounded-lg hover:bg-indigo-200 transition-colors">
+                            Use Template
+                        </button>
+                    </div>
+                </div>
+                <!-- Content Summary Template -->
+                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+                    <div class="bg-indigo-600 px-4 py-3">
+                        <h2 class="text-white font-semibold flex items-center">
+                            <i data-feather="file-text" class="mr-2 w-4 h-4"></i>
+                            Content Summary
+                        </h2>
+                    </div>
+                    <div class="p-4">
+                        <p class="text-gray-600 mb-4">Extract key points from long documents</p>
+                        <button class="w-full bg-indigo-100 text-indigo-700 py-2 rounded-lg hover:bg-indigo-200 transition-colors">
+                            Use Template
+                        </button>
+                    </div>
+                </div>
+                <!-- Interview Questions Template -->
+                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+                    <div class="bg-indigo-600 px-4 py-3">
+                        <h2 class="text-white font-semibold flex items-center">
+                            <i data-feather="users" class="mr-2 w-4 h-4"></i>
+                            Interview Questions
+                        </h2>
+                    </div>
+                    <div class="p-4">
+                        <p class="text-gray-600 mb-4">Generate tailored interview questions</p>
+                        <button class="w-full bg-indigo-100 text-indigo-700 py-2 rounded-lg hover:bg-indigo-200 transition-colors">
+                            Use Template
+                        </button>
+                    </div>
+                </div>
+                <!-- Creative Writing Template -->
+                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+                    <div class="bg-indigo-600 px-4 py-3">
+                        <h2 class="text-white font-semibold flex items-center">
+                            <i data-feather="edit-2" class="mr-2 w-4 h-4"></i>
+                            Creative Writing
+                        </h2>
+                    </div>
+                    <div class="p-4">
+                        <p class="text-gray-600 mb-4">Spark creativity with structured prompts</p>
+                        <button class="w-full bg-indigo-100 text-indigo-700 py-2 rounded-lg hover:bg-indigo-200 transition-colors">
+                            Use Template
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+</body>
+</html>