| <!DOCTYPE html> |
| <html lang="tr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>BF Chatbot Yöneticisi - Trek Bisiklet</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| height: 100vh; |
| display: flex; |
| overflow: hidden; |
| } |
| |
| .sidebar { |
| width: 350px; |
| background: white; |
| border-right: 1px solid #e4e6ea; |
| display: flex; |
| flex-direction: column; |
| box-shadow: 2px 0 10px rgba(0,0,0,0.1); |
| } |
| |
| .header { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| padding: 20px; |
| text-align: center; |
| position: relative; |
| } |
| |
| .header h1 { |
| font-size: 20px; |
| margin-bottom: 5px; |
| } |
| |
| .header .subtitle { |
| font-size: 12px; |
| opacity: 0.9; |
| } |
| |
| .refresh-indicator { |
| position: absolute; |
| top: 10px; |
| right: 15px; |
| width: 12px; |
| height: 12px; |
| border-radius: 50%; |
| background: #4CAF50; |
| animation: pulse 2s infinite; |
| } |
| |
| .refresh-indicator.loading { |
| background: #ff9800; |
| animation: spin 1s linear infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| 100% { opacity: 1; } |
| } |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| |
| .stats-bar { |
| background: #f8f9fa; |
| padding: 15px; |
| border-bottom: 1px solid #e4e6ea; |
| } |
| |
| .stats { |
| display: flex; |
| justify-content: space-around; |
| } |
| |
| .stat-item { |
| text-align: center; |
| } |
| |
| .stat-value { |
| font-size: 24px; |
| font-weight: bold; |
| color: #667eea; |
| } |
| |
| .stat-label { |
| font-size: 11px; |
| color: #666; |
| margin-top: 2px; |
| } |
| |
| .search-bar { |
| padding: 15px; |
| border-bottom: 1px solid #e4e6ea; |
| background: white; |
| } |
| |
| .search-input { |
| width: 100%; |
| padding: 10px 15px; |
| border: 1px solid #ddd; |
| border-radius: 20px; |
| outline: none; |
| font-size: 14px; |
| } |
| |
| .search-input:focus { |
| border-color: #667eea; |
| box-shadow: 0 0 5px rgba(102, 126, 234, 0.3); |
| } |
| |
| .api-config { |
| padding: 15px; |
| border-bottom: 1px solid #e4e6ea; |
| background: #f0f2f5; |
| } |
| |
| .api-config input { |
| width: 100%; |
| padding: 8px; |
| margin: 5px 0; |
| border: 1px solid #ddd; |
| border-radius: 4px; |
| font-size: 12px; |
| } |
| |
| .customer-list { |
| flex: 1; |
| overflow-y: auto; |
| background: white; |
| } |
| |
| .customer-item { |
| padding: 15px 20px; |
| border-bottom: 1px solid #f0f2f5; |
| cursor: pointer; |
| transition: background 0.2s; |
| position: relative; |
| } |
| |
| .customer-item:hover { |
| background: #f8f9fa; |
| } |
| |
| .customer-item.active { |
| background: #e3f2fd; |
| } |
| |
| .customer-name { |
| font-size: 15px; |
| font-weight: 600; |
| margin-bottom: 4px; |
| color: #333; |
| } |
| |
| .customer-message { |
| font-size: 13px; |
| color: #666; |
| overflow: hidden; |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| } |
| |
| .customer-time { |
| position: absolute; |
| top: 15px; |
| right: 20px; |
| font-size: 11px; |
| color: #999; |
| } |
| |
| .unread-badge { |
| position: absolute; |
| bottom: 15px; |
| right: 20px; |
| background: #667eea; |
| color: white; |
| font-size: 11px; |
| padding: 2px 6px; |
| border-radius: 10px; |
| font-weight: bold; |
| } |
| |
| .chat-area { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| background: #e5ddd5; |
| } |
| |
| .chat-header { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| padding: 15px 20px; |
| display: flex; |
| align-items: center; |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
| } |
| |
| .back-button { |
| display: none; |
| background: none; |
| border: none; |
| color: white; |
| font-size: 24px; |
| cursor: pointer; |
| margin-right: 15px; |
| padding: 5px; |
| border-radius: 50%; |
| transition: background 0.2s; |
| } |
| |
| .back-button:hover { |
| background: rgba(255,255,255,0.1); |
| } |
| |
| .chat-header-info { |
| flex: 1; |
| } |
| |
| .chat-header .customer-name { |
| font-size: 16px; |
| font-weight: 600; |
| margin-bottom: 2px; |
| } |
| |
| .chat-header .customer-phone { |
| font-size: 13px; |
| opacity: 0.8; |
| } |
| |
| .chat-messages { |
| flex: 1; |
| padding: 20px; |
| overflow-y: auto; |
| background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23e5ddd5"/><circle cx="50" cy="50" r="1" fill="%23d4cfc7" opacity="0.5"/></svg>'); |
| } |
| |
| .message { |
| margin-bottom: 10px; |
| display: flex; |
| align-items: flex-end; |
| animation: fadeIn 0.3s ease-in; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .message.sent { |
| justify-content: flex-end; |
| } |
| |
| .message.received { |
| justify-content: flex-start; |
| } |
| |
| .message-bubble { |
| max-width: 65%; |
| padding: 8px 12px; |
| border-radius: 18px; |
| box-shadow: 0 1px 0.5px rgba(0,0,0,0.13); |
| } |
| |
| .message.sent .message-bubble { |
| background: white; |
| margin-left: auto; |
| border-bottom-right-radius: 4px; |
| } |
| |
| .message.received .message-bubble { |
| background: #d9fdd3; |
| margin-right: auto; |
| border-bottom-left-radius: 4px; |
| } |
| |
| .message-text { |
| margin-bottom: 4px; |
| line-height: 1.4; |
| white-space: pre-wrap; |
| } |
| |
| .message-time { |
| font-size: 11px; |
| color: #667781; |
| text-align: right; |
| } |
| |
| .empty-state { |
| flex: 1; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| flex-direction: column; |
| color: #999; |
| } |
| |
| .empty-state svg { |
| width: 100px; |
| height: 100px; |
| margin-bottom: 20px; |
| opacity: 0.5; |
| } |
| |
| |
| .product-mention { |
| color: #667eea; |
| font-weight: bold; |
| } |
| |
| |
| @media (max-width: 768px) { |
| .sidebar { |
| width: 100%; |
| position: absolute; |
| z-index: 10; |
| transition: transform 0.3s; |
| } |
| |
| .sidebar.hidden { |
| transform: translateX(-100%); |
| } |
| |
| .chat-area { |
| width: 100%; |
| } |
| |
| .back-button { |
| display: block !important; |
| } |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 6px; |
| height: 6px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: #888; |
| border-radius: 3px; |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background: #555; |
| } |
| |
| .connection-status { |
| position: fixed; |
| bottom: 20px; |
| right: 20px; |
| background: white; |
| padding: 10px 20px; |
| border-radius: 20px; |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| font-size: 12px; |
| z-index: 1000; |
| } |
| |
| .connection-status.connected { |
| background: #4CAF50; |
| color: white; |
| } |
| |
| .connection-status.disconnected { |
| background: #f44336; |
| color: white; |
| } |
| |
| .connection-status.connecting { |
| background: #ff9800; |
| color: white; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div class="sidebar" id="sidebar"> |
| <div class="header"> |
| <div class="refresh-indicator" id="refreshIndicator"></div> |
| <h1>🚴 Trek BF Chatbot</h1> |
| <div class="subtitle">Konuşma Yöneticisi</div> |
| </div> |
|
|
| <div class="stats-bar"> |
| <div class="stats"> |
| <div class="stat-item"> |
| <div class="stat-value" id="totalConversations">0</div> |
| <div class="stat-label">Toplam</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-value" id="todayConversations">0</div> |
| <div class="stat-label">Bugün</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-value" id="activeConversations">0</div> |
| <div class="stat-label">Aktif</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="search-bar"> |
| <input type="text" class="search-input" placeholder="Konuşmalarda ara..." id="searchInput"> |
| </div> |
|
|
| <div class="api-config"> |
| <input type="text" id="apiEndpoint" placeholder="API Endpoint (örn: https://your-space.hf.space)" value=""> |
| <small style="color: #666;">Hugging Face Space URL'nizi girin</small> |
| </div> |
|
|
| <div class="customer-list" id="customerList"> |
| |
| </div> |
| </div> |
|
|
| |
| <div class="chat-area"> |
| <div class="chat-header" id="chatHeader" style="display: none;"> |
| <button class="back-button" onclick="showSidebar()">←</button> |
| <div class="chat-header-info"> |
| <div class="customer-name" id="chatCustomerName">Müşteri</div> |
| <div class="customer-phone" id="chatCustomerPhone">Oturum</div> |
| </div> |
| </div> |
|
|
| <div class="chat-messages" id="chatMessages"> |
| <div class="empty-state"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
| <path d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| </svg> |
| <div>Bir konuşma seçin</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="connection-status" id="connectionStatus"> |
| <span id="statusText">Bağlanıyor...</span> |
| </div> |
|
|
| <script> |
| |
| let API_ENDPOINT = localStorage.getItem('bf_api_endpoint') || ''; |
| |
| let conversations = {}; |
| let selectedCustomer = null; |
| let refreshInterval; |
| let filteredConversations = {}; |
| |
| |
| document.getElementById('apiEndpoint').value = API_ENDPOINT; |
| document.getElementById('apiEndpoint').addEventListener('change', function() { |
| API_ENDPOINT = this.value.trim(); |
| if (!API_ENDPOINT.endsWith('/')) { |
| API_ENDPOINT += '/'; |
| } |
| localStorage.setItem('bf_api_endpoint', API_ENDPOINT); |
| loadConversations(); |
| }); |
| |
| function updateConnectionStatus(status) { |
| const statusEl = document.getElementById('connectionStatus'); |
| const statusText = document.getElementById('statusText'); |
| |
| statusEl.className = 'connection-status'; |
| |
| switch(status) { |
| case 'connected': |
| statusEl.classList.add('connected'); |
| statusText.textContent = '✓ Bağlandı'; |
| setTimeout(() => statusEl.style.display = 'none', 3000); |
| break; |
| case 'disconnected': |
| statusEl.classList.add('disconnected'); |
| statusText.textContent = '✗ Bağlantı koptu'; |
| statusEl.style.display = 'flex'; |
| break; |
| case 'connecting': |
| statusEl.classList.add('connecting'); |
| statusText.textContent = '⟳ Bağlanıyor...'; |
| statusEl.style.display = 'flex'; |
| break; |
| } |
| } |
| |
| async function loadConversations() { |
| if (!API_ENDPOINT) { |
| updateConnectionStatus('disconnected'); |
| return; |
| } |
| |
| const indicator = document.getElementById('refreshIndicator'); |
| indicator.classList.add('loading'); |
| updateConnectionStatus('connecting'); |
| |
| try { |
| const response = await fetch(API_ENDPOINT + 'api/conversations'); |
| if (!response.ok) throw new Error('API yanıt vermedi'); |
| |
| conversations = await response.json(); |
| filteredConversations = {...conversations}; |
| |
| |
| const statsResponse = await fetch(API_ENDPOINT + 'api/stats'); |
| if (statsResponse.ok) { |
| const stats = await statsResponse.json(); |
| document.getElementById('totalConversations').textContent = stats.total || 0; |
| document.getElementById('todayConversations').textContent = stats.today || 0; |
| document.getElementById('activeConversations').textContent = Object.keys(conversations).length; |
| } |
| |
| renderCustomerList(); |
| updateConnectionStatus('connected'); |
| } catch (error) { |
| console.error('API Hatası:', error); |
| updateConnectionStatus('disconnected'); |
| } finally { |
| indicator.classList.remove('loading'); |
| } |
| } |
| |
| function formatTime(dateString) { |
| const date = new Date(dateString); |
| const now = new Date(); |
| const diff = now - date; |
| |
| if (diff < 60000) return 'şimdi'; |
| if (diff < 3600000) return Math.floor(diff / 60000) + ' dk'; |
| if (diff < 86400000) return Math.floor(diff / 3600000) + ' sa'; |
| |
| 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}[^\\s]*)`, 'gi'); |
| result = result.replace(regex, '<span class="product-mention">$1</span>'); |
| }); |
| return result; |
| } |
| |
| function renderCustomerList() { |
| const listEl = document.getElementById('customerList'); |
| listEl.innerHTML = ''; |
| |
| Object.entries(filteredConversations).forEach(([phone, data]) => { |
| const lastMessage = data.messages[data.messages.length - 1]; |
| if (!lastMessage) return; |
| |
| const item = document.createElement('div'); |
| item.className = 'customer-item'; |
| if (phone === selectedCustomer) { |
| item.classList.add('active'); |
| } |
| |
| item.innerHTML = ` |
| <div class="customer-name">Kullanıcı ${phone.substr(-4)}</div> |
| <div class="customer-message">${lastMessage.text.substring(0, 50)}...</div> |
| <div class="customer-time">${formatTime(lastMessage.time)}</div> |
| `; |
| |
| item.onclick = () => selectCustomer(phone); |
| listEl.appendChild(item); |
| }); |
| } |
| |
| function selectCustomer(phone) { |
| selectedCustomer = phone; |
| const customerData = conversations[phone]; |
| |
| |
| document.getElementById('chatHeader').style.display = 'flex'; |
| document.getElementById('chatCustomerName').textContent = `Kullanıcı ${phone.substr(-4)}`; |
| document.getElementById('chatCustomerPhone').textContent = phone; |
| |
| |
| const messagesEl = document.getElementById('chatMessages'); |
| messagesEl.innerHTML = ''; |
| |
| customerData.messages.forEach(msg => { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `message ${msg.type}`; |
| |
| messageDiv.innerHTML = ` |
| <div class="message-bubble"> |
| <div class="message-text">${highlightProducts(msg.text)}</div> |
| <div class="message-time">${formatTime(msg.time)}</div> |
| </div> |
| `; |
| |
| messagesEl.appendChild(messageDiv); |
| }); |
| |
| |
| messagesEl.scrollTop = messagesEl.scrollHeight; |
| |
| |
| renderCustomerList(); |
| |
| |
| if (window.innerWidth <= 768) { |
| document.getElementById('sidebar').classList.add('hidden'); |
| } |
| } |
| |
| function showSidebar() { |
| document.getElementById('sidebar').classList.remove('hidden'); |
| } |
| |
| |
| document.getElementById('searchInput').addEventListener('input', function() { |
| const searchTerm = this.value.toLowerCase(); |
| |
| if (!searchTerm) { |
| filteredConversations = {...conversations}; |
| } else { |
| filteredConversations = {}; |
| Object.entries(conversations).forEach(([phone, data]) => { |
| const hasMatch = data.messages.some(msg => |
| msg.text.toLowerCase().includes(searchTerm) |
| ); |
| if (hasMatch) { |
| filteredConversations[phone] = data; |
| } |
| }); |
| } |
| |
| renderCustomerList(); |
| }); |
| |
| |
| function startAutoRefresh() { |
| refreshInterval = setInterval(loadConversations, 10000); |
| } |
| |
| function stopAutoRefresh() { |
| if (refreshInterval) { |
| clearInterval(refreshInterval); |
| } |
| } |
| |
| |
| if (API_ENDPOINT) { |
| loadConversations(); |
| startAutoRefresh(); |
| } else { |
| updateConnectionStatus('disconnected'); |
| } |
| |
| |
| document.addEventListener('visibilitychange', function() { |
| if (document.hidden) { |
| stopAutoRefresh(); |
| } else { |
| loadConversations(); |
| startAutoRefresh(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
