Add conversation history tracking and HTML export

- Created conversation_tracker.py module for tracking chat history
- Saves last 100 conversations to JSON file
- Beautiful mobile-responsive HTML export with search functionality
- Added export button to Gradio interface
- Similar to WhatsApp version but integrated with Gradio

Features:
- Real-time conversation saving
- HTML export with statistics (total messages, today's count)
- Search functionality in exported HTML
- Product highlighting (MADONE, MARLIN, etc)
- Mobile responsive design
- Date grouping and timestamps

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

app.py

@@ -29,6 +29,9 @@ from enhanced_features import (
 )
 from image_renderer import extract_product_info_for_gallery, format_message_with_images
 
+# Import conversation tracker
+from conversation_tracker import add_conversation, export_html_file
+
 # Import smart warehouse with GPT intelligence and price
 try:
     from smart_warehouse_with_price import get_warehouse_stock_smart_with_price
@@ -1075,7 +1078,11 @@ with gr.Blocks(css=custom_css, theme="soft", title="Trek Asistanı", head=storag
         elem_id="msg-input"
     )
     
-    # Restore button tamamen kaldırıldı
+    # Export button for conversation history
+    with gr.Row():
+        export_btn = gr.Button("📥 Konuşma Geçmişini İndir", variant="secondary")
+        download_file = gr.File(label="İndir", visible=False)
+        export_status = gr.Markdown("")
     
     # Session ve profil sistemi tamamen kaldırıldı
     
@@ -1111,7 +1118,11 @@ with gr.Blocks(css=custom_css, theme="soft", title="Trek Asistanı", head=storag
                 chat_history[-1] = (message, response)
                 yield "", chat_history
             
-            # Chat kaydetme sistemi kaldırıldı
+            # Konuşmayı kaydet
+            try:
+                add_conversation(message, response)
+            except Exception as e:
+                print(f"Error saving conversation: {e}")
             
         except Exception as e:
             error_msg = f"Üzgünüm, bir hata oluştu: {str(e)}"
@@ -1121,6 +1132,16 @@ with gr.Blocks(css=custom_css, theme="soft", title="Trek Asistanı", head=storag
             yield "", chat_history
     
     msg.submit(respond, [msg, chatbot], [msg, chatbot], show_progress=True)
+    
+    def export_conversations():
+        """Export conversation history to HTML"""
+        try:
+            filename = export_html_file()
+            return gr.update(visible=True, value=filename), f"✅ Konuşma geçmişi hazır!"
+        except Exception as e:
+            return gr.update(visible=False), f"❌ Export hatası: {str(e)}"
+    
+    export_btn.click(export_conversations, outputs=[download_file, export_status])
 
 if __name__ == "__main__":
     demo.launch(debug=True)

conversation_tracker.py

@@ -0,0 +1,452 @@
+"""Conversation tracking and HTML export for BF chatbot"""
+
+import json
+import os
+from datetime import datetime
+from typing import List, Dict, Any
+import html
+
+# Konuşma geçmişini saklamak için
+CONVERSATIONS_FILE = "conversations.json"
+MAX_CONVERSATIONS = 100  # Son 100 konuşmayı sakla
+
+def load_conversations():
+    """Load conversation history from file"""
+    if os.path.exists(CONVERSATIONS_FILE):
+        try:
+            with open(CONVERSATIONS_FILE, 'r', encoding='utf-8') as f:
+                return json.load(f)
+        except:
+            return []
+    return []
+
+def save_conversations(conversations):
+    """Save conversations to file"""
+    try:
+        # Keep only last MAX_CONVERSATIONS
+        if len(conversations) > MAX_CONVERSATIONS:
+            conversations = conversations[-MAX_CONVERSATIONS:]
+        
+        with open(CONVERSATIONS_FILE, 'w', encoding='utf-8') as f:
+            json.dump(conversations, f, ensure_ascii=False, indent=2)
+    except Exception as e:
+        print(f"Error saving conversations: {e}")
+
+def add_conversation(user_message, bot_response):
+    """Add a new conversation to history"""
+    conversations = load_conversations()
+    
+    conversation = {
+        "timestamp": datetime.now().isoformat(),
+        "user": user_message,
+        "bot": bot_response
+    }
+    
+    conversations.append(conversation)
+    save_conversations(conversations)
+    
+    return conversation
+
+def generate_html_report():
+    """Generate HTML report of all conversations"""
+    conversations = load_conversations()
+    
+    html_template = """<!DOCTYPE html>
+<html lang="tr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Trek BF - Konuşma Geçmişi</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 10px;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+            overflow: hidden;
+        }
+        
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 20px;
+            text-align: center;
+        }
+        
+        .header h1 {
+            font-size: 24px;
+            margin-bottom: 5px;
+        }
+        
+        .header .subtitle {
+            font-size: 14px;
+            opacity: 0.9;
+        }
+        
+        .stats {
+            display: flex;
+            justify-content: space-around;
+            margin-top: 15px;
+            padding-top: 15px;
+            border-top: 1px solid rgba(255,255,255,0.3);
+        }
+        
+        .stat-item {
+            text-align: center;
+        }
+        
+        .stat-value {
+            font-size: 24px;
+            font-weight: bold;
+        }
+        
+        .stat-label {
+            font-size: 12px;
+            opacity: 0.8;
+        }
+        
+        .chat-container {
+            padding: 20px;
+            max-height: 70vh;
+            overflow-y: auto;
+        }
+        
+        .chat-message {
+            margin-bottom: 20px;
+            animation: fadeIn 0.5s ease-in;
+        }
+        
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        .message-wrapper {
+            display: flex;
+            align-items: flex-start;
+            margin-bottom: 10px;
+        }
+        
+        .message-wrapper.user {
+            justify-content: flex-end;
+        }
+        
+        .message-bubble {
+            max-width: 70%;
+            padding: 12px 16px;
+            border-radius: 18px;
+            word-wrap: break-word;
+            position: relative;
+        }
+        
+        .user .message-bubble {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border-bottom-right-radius: 4px;
+        }
+        
+        .bot .message-bubble {
+            background: #f1f3f5;
+            color: #333;
+            border-bottom-left-radius: 4px;
+        }
+        
+        .timestamp {
+            font-size: 11px;
+            color: #999;
+            margin-top: 5px;
+            text-align: center;
+        }
+        
+        .divider {
+            text-align: center;
+            margin: 20px 0;
+            position: relative;
+        }
+        
+        .divider::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 50%;
+            width: 100%;
+            height: 1px;
+            background: #e0e0e0;
+        }
+        
+        .divider-text {
+            background: white;
+            padding: 0 10px;
+            position: relative;
+            color: #999;
+            font-size: 12px;
+        }
+        
+        .filter-container {
+            padding: 15px 20px;
+            background: #f8f9fa;
+            border-bottom: 1px solid #e0e0e0;
+        }
+        
+        .search-box {
+            width: 100%;
+            padding: 10px 15px;
+            border: 1px solid #ddd;
+            border-radius: 25px;
+            font-size: 14px;
+            outline: none;
+        }
+        
+        .search-box:focus {
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+        
+        .no-results {
+            text-align: center;
+            padding: 40px;
+            color: #999;
+        }
+        
+        /* Product highlights */
+        .product-mention {
+            background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            font-weight: bold;
+        }
+        
+        /* Mobile responsive */
+        @media (max-width: 600px) {
+            .container {
+                border-radius: 0;
+                height: 100vh;
+                max-width: 100%;
+            }
+            
+            .message-bubble {
+                max-width: 85%;
+            }
+            
+            .chat-container {
+                max-height: calc(100vh - 200px);
+            }
+        }
+        
+        /* Scrollbar styling */
+        .chat-container::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .chat-container::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+        
+        .chat-container::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 3px;
+        }
+        
+        .chat-container::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🚴 Trek BF Chatbot</h1>
+            <div class="subtitle">Konuşma Geçmişi</div>
+            <div class="stats">
+                <div class="stat-item">
+                    <div class="stat-value" id="totalMessages">0</div>
+                    <div class="stat-label">Toplam Mesaj</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value" id="totalConversations">0</div>
+                    <div class="stat-label">Konuşma</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value" id="todayMessages">0</div>
+                    <div class="stat-label">Bugün</div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="filter-container">
+            <input type="text" class="search-box" placeholder="Mesajlarda ara..." id="searchInput">
+        </div>
+        
+        <div class="chat-container" id="chatContainer">
+            <!-- Messages will be inserted here -->
+        </div>
+    </div>
+    
+    <script>
+        const conversations = {CONVERSATIONS_JSON};
+        
+        function formatTime(isoString) {
+            const date = new Date(isoString);
+            const now = new Date();
+            const isToday = date.toDateString() === now.toDateString();
+            
+            if (isToday) {
+                return date.toLocaleTimeString('tr-TR', {hour: '2-digit', minute: '2-digit'});
+            } else {
+                return date.toLocaleDateString('tr-TR') + ' ' + date.toLocaleTimeString('tr-TR', {hour: '2-digit', minute: '2-digit'});
+            }
+        }
+        
+        function formatDate(isoString) {
+            const date = new Date(isoString);
+            const now = new Date();
+            const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
+            
+            if (diffDays === 0) return 'Bugün';
+            if (diffDays === 1) return 'Dün';
+            if (diffDays < 7) return diffDays + ' gün önce';
+            return date.toLocaleDateString('tr-TR');
+        }
+        
+        function highlightProducts(text) {
+            const products = ['MADONE', 'MARLIN', 'DOMANE', 'CHECKPOINT', 'EMONDA', 'FX', 'RAIL', 'POWERFLY'];
+            let result = text;
+            products.forEach(product => {
+                const regex = new RegExp(product, 'gi');
+                result = result.replace(regex, '<span class="product-mention">$&</span>');
+            });
+            return result;
+        }
+        
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+        
+        function renderMessages(filteredConversations) {
+            const container = document.getElementById('chatContainer');
+            container.innerHTML = '';
+            
+            if (filteredConversations.length === 0) {
+                container.innerHTML = '<div class="no-results">Mesaj bulunamadı</div>';
+                return;
+            }
+            
+            let lastDate = null;
+            
+            filteredConversations.forEach(conv => {
+                const messageDate = new Date(conv.timestamp).toDateString();
+                
+                // Add date divider if new day
+                if (lastDate !== messageDate) {
+                    const divider = document.createElement('div');
+                    divider.className = 'divider';
+                    divider.innerHTML = `<span class="divider-text">${formatDate(conv.timestamp)}</span>`;
+                    container.appendChild(divider);
+                    lastDate = messageDate;
+                }
+                
+                const messageDiv = document.createElement('div');
+                messageDiv.className = 'chat-message';
+                
+                // User message
+                const userMsg = document.createElement('div');
+                userMsg.className = 'message-wrapper user';
+                userMsg.innerHTML = `
+                    <div class="message-bubble">
+                        ${escapeHtml(conv.user)}
+                    </div>
+                `;
+                messageDiv.appendChild(userMsg);
+                
+                // Bot message
+                const botMsg = document.createElement('div');
+                botMsg.className = 'message-wrapper bot';
+                botMsg.innerHTML = `
+                    <div class="message-bubble">
+                        ${highlightProducts(escapeHtml(conv.bot))}
+                    </div>
+                `;
+                messageDiv.appendChild(botMsg);
+                
+                // Timestamp
+                const timestamp = document.createElement('div');
+                timestamp.className = 'timestamp';
+                timestamp.textContent = formatTime(conv.timestamp);
+                messageDiv.appendChild(timestamp);
+                
+                container.appendChild(messageDiv);
+            });
+            
+            // Scroll to bottom
+            container.scrollTop = container.scrollHeight;
+        }
+        
+        function updateStats() {
+            const today = new Date().toDateString();
+            const todayCount = conversations.filter(c => 
+                new Date(c.timestamp).toDateString() === today
+            ).length;
+            
+            document.getElementById('totalMessages').textContent = conversations.length * 2;
+            document.getElementById('totalConversations').textContent = conversations.length;
+            document.getElementById('todayMessages').textContent = todayCount;
+        }
+        
+        // Search functionality
+        document.getElementById('searchInput').addEventListener('input', (e) => {
+            const searchTerm = e.target.value.toLowerCase();
+            
+            if (!searchTerm) {
+                renderMessages(conversations);
+                return;
+            }
+            
+            const filtered = conversations.filter(conv => 
+                conv.user.toLowerCase().includes(searchTerm) || 
+                conv.bot.toLowerCase().includes(searchTerm)
+            );
+            
+            renderMessages(filtered);
+        });
+        
+        // Initial render
+        updateStats();
+        renderMessages(conversations);
+    </script>
+</body>
+</html>"""
+    
+    # Replace conversations JSON
+    html_content = html_template.replace(
+        '{CONVERSATIONS_JSON}', 
+        json.dumps(conversations, ensure_ascii=False)
+    )
+    
+    return html_content
+
+def export_html_file():
+    """Export conversations to HTML file"""
+    html_content = generate_html_report()
+    
+    filename = f"trek_bf_conversations_{datetime.now().strftime('%Y%m%d_%H%M%S')}.html"
+    
+    with open(filename, 'w', encoding='utf-8') as f:
+        f.write(html_content)
+    
+    return filename