تازیخچه چتها را هم نمایش بده

index.html

@@ -29,8 +29,8 @@
     <custom-navbar></custom-navbar>
     
     <main class="flex-1 container mx-auto px-4 py-8">
-        <div id="chat-container" class="bg-white rounded-lg shadow-lg h-[70vh] overflow-hidden flex flex-col">
-            <div class="bg-gradient-to-r from-primary-500 to-secondary-500 p-4 text-white">
+    <div id="chat-container" class="bg-white rounded-lg shadow-lg h-[70vh] overflow-hidden flex flex-col relative">
+<div class="bg-gradient-to-r from-primary-500 to-secondary-500 p-4 text-white">
                 <div class="flex items-center gap-3">
                     <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
                         <i data-feather="message-square"></i>
@@ -38,9 +38,20 @@
                     <h2 class="text-xl font-bold">Chatty McBotface</h2>
                 </div>
             </div>
-            
-            <div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-4">
-                <!-- Messages will be inserted here -->
+            <div class="absolute top-0 left-0 w-full z-10 bg-gradient-to-r from-primary-500 to-secondary-500 text-white px-4 py-2 flex justify-between items-center">
+                <button id="history-btn" class="flex items-center gap-2 hover:bg-white/10 px-3 py-1 rounded transition">
+                    <i data-feather="clock"></i>
+                    <span>History</span>
+                </button>
+                <div id="history-dropdown" class="hidden absolute top-full left-0 mt-1 w-64 bg-white rounded-lg shadow-lg z-20">
+                    <div class="p-3 border-b border-gray-200 font-medium text-gray-700">Conversation History</div>
+                    <div id="history-list" class="max-h-60 overflow-y-auto">
+                        <!-- History items will be added here -->
+                    </div>
+                </div>
+            </div>
+            <div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-4 mt-12">
+<!-- Messages will be inserted here -->
                 <div class="w-full flex justify-center">
                     <div class="bg-gray-100 rounded-lg p-4 max-w-[80%] text-center">
                         <p class="text-gray-600">Hi there! I'm your friendly AI assistant. How can I help you today?</p>
@@ -77,9 +88,105 @@
     <script>
         feather.replace();
         
+        // Chat history functionality
+        const historyBtn = document.getElementById('history-btn');
+        const historyDropdown = document.getElementById('history-dropdown');
+        const historyList = document.getElementById('history-list');
+        
+        // Toggle history dropdown
+        historyBtn.addEventListener('click', () => {
+            historyDropdown.classList.toggle('hidden');
+        });
+        
+        // Close dropdown when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!historyBtn.contains(e.target) && !historyDropdown.contains(e.target)) {
+                historyDropdown.classList.add('hidden');
+            }
+        });
+        
+        // Load saved conversations
+        function loadChatHistory() {
+            const history = JSON.parse(localStorage.getItem('chatHistory') || '[]');
+            historyList.innerHTML = '';
+            
+            if (history.length === 0) {
+                historyList.innerHTML = '<div class="p-3 text-gray-500 text-center">No previous conversations</div>';
+                return;
+            }
+            
+            history.forEach((conv, index) => {
+                const historyItem = document.createElement('div');
+                historyItem.className = 'p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer';
+                historyItem.innerHTML = `
+                    <div class="font-medium text-gray-800 truncate">${conv.preview || 'Conversation'}</div>
+                    <div class="text-xs text-gray-500">${new Date(conv.timestamp).toLocaleString()}</div>
+                `;
+                
+                historyItem.addEventListener('click', () => {
+                    loadConversation(index);
+                    historyDropdown.classList.add('hidden');
+                });
+                
+                historyList.appendChild(historyItem);
+            });
+        }
+        
+        // Save current conversation
+        function saveConversation() {
+            const messages = document.getElementById('chat-messages');
+            const preview = messages.lastElementChild?.textContent?.trim().substring(0, 50) || 'New conversation';
+            
+            const history = JSON.parse(localStorage.getItem('chatHistory') || '[]');
+            history.unshift({
+                messages: Array.from(messages.children).map(el => ({
+                    text: el.querySelector('p')?.textContent,
+                    sender: el.classList.contains('justify-end') ? 'user' : 'bot'
+                })),
+                preview,
+                timestamp: new Date().toISOString()
+            });
+            
+            // Keep only last 10 conversations
+            localStorage.setItem('chatHistory', JSON.stringify(history.slice(0, 10)));
+            loadChatHistory();
+        }
+        
+        // Load a specific conversation
+        function loadConversation(index) {
+            const history = JSON.parse(localStorage.getItem('chatHistory') || '[]');
+            const conv = history[index];
+            
+            if (!conv) return;
+            
+            const messagesContainer = document.getElementById('chat-messages');
+            messagesContainer.innerHTML = '';
+            
+            conv.messages.forEach(msg => {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = `w-full flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`;
+                
+                const bubbleClass = msg.sender === 'user' 
+                    ? 'bg-primary-500 text-white rounded-br-none' 
+                    : 'bg-gray-100 text-gray-800 rounded-bl-none';
+                
+                messageDiv.innerHTML = `
+                    <div class="max-w-[80%] rounded-lg p-4 ${bubbleClass}">
+                        <p>${msg.text}</p>
+                    </div>
+                `;
+                
+                messagesContainer.appendChild(messageDiv);
+            });
+            
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+        }
+        // Initialize chat history
+        loadChatHistory();
+        
         // Simple chatbot logic
         document.getElementById('chat-form').addEventListener('submit', function(e) {
-            e.preventDefault();
+e.preventDefault();
             const input = document.getElementById('user-input');
             const message = input.value.trim();
             
@@ -99,13 +206,15 @@
                     ];
                     const botResponse = responses[Math.floor(Math.random() * responses.length)] + 
                                        " This is a simulated response. In a real implementation, this would connect to an AI API like OpenAI.";
-                    
                     addMessage(botResponse, 'bot');
+                    saveConversation();
                 }, 1000);
             }
         });
         
-        function addMessage(text, sender) {
+        // Save conversation when leaving page
+        window.addEventListener('beforeunload', saveConversation);
+function addMessage(text, sender) {
             const messagesContainer = document.getElementById('chat-messages');
             const messageDiv = document.createElement('div');
             messageDiv.className = `w-full flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;

style.css

@@ -17,10 +17,35 @@ body {
 #chat-messages > div {
     animation: fadeIn 0.3s ease-out;
 }
+/* History dropdown styles */
+#history-dropdown {
+    max-height: 70vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+#history-list {
+    scrollbar-width: thin;
+    scrollbar-color: #c1c1c1 #f1f1f1;
+}
+
+#history-list::-webkit-scrollbar {
+    width: 6px;
+}
+
+#history-list::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+#history-list::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+}
 
 /* Custom scrollbar for chat */
 #chat-messages::-webkit-scrollbar {
-    width: 8px;
+width: 8px;
 }
 
 #chat-messages::-webkit-scrollbar-track {