Test

Build error

App Files Files Community

Kgshop commited on Jan 5

Commit

ab10c27

verified ·

1 Parent(s): 1147ec2

Update app.py

Browse files

Files changed (1) hide show

app.py +406 -178

app.py CHANGED Viewed

@@ -369,6 +369,397 @@ def generate_chat_response(message, chat_history_from_client):
         else:
              return f"Извините, произошла ошибка: {e}"
 CATALOG_TEMPLATE = '''
 <!DOCTYPE html>
 <html lang="ru">
@@ -552,6 +943,7 @@ CATALOG_TEMPLATE = '''
             justify-content: center;
             box-shadow: 0 4px 15px rgba(72, 209, 204, 0.4);
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
         .floating-button:hover {
             background-color: var(--accent-hover);
@@ -600,27 +992,6 @@ CATALOG_TEMPLATE = '''
         .formulate-order-button:hover { background-color: var(--accent-hover); }
         .notification { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background-color: var(--accent); color: var(--bg-dark); padding: 10px 20px; border-radius: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 1002; opacity: 0; transition: opacity 0.5s ease; font-size: 0.9rem;}
         .notification.show { opacity: 1;}
-        #chatModal .modal-content { max-width: 450px; }
-        #chat-messages { height: 350px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; margin-bottom: 15px; display: flex; flex-direction: column; gap: 10px; background-color: #fcfcfc; }
-        .chat-message { padding: 10px 15px; border-radius: 15px; max-width: 80%; word-wrap: break-word; line-height: 1.4;}
-        .chat-message.user { align-self: flex-end; background-color: var(--bg-medium); color: white; border-bottom-right-radius: 2px; }
-        .chat-message.ai { align-self: flex-start; background-color: #e6e6e6; color: var(--text-dark); border-bottom-left-radius: 2px; }
-        .chat-input-container { display: flex; gap: 10px; }
-        #chat-input { flex-grow: 1; padding: 10px 15px; border: 1px solid #e0e0e0; border-radius: 20px; font-size: 0.95rem; outline: none; }
-        #chat-input:focus { border-color: var(--bg-medium); box-shadow: 0 0 0 2px rgba(19, 93, 102, 0.15); }
-        #chat-send-button { background-color: var(--bg-medium); color: white; border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background-color 0.3s; flex-shrink: 0; }
-        #chat-send-button:hover { background-color: var(--bg-dark); }
-        #chat-send-button:disabled { background-color: #cccccc; cursor: not-allowed; }
-        .chat-product-card { background-color: #f0f2f5; border-radius: 12px; padding: 10px; margin-top: 8px; display: flex; align-items: center; gap: 12px; border: 1px solid #e0e0e0; }
-        .chat-product-card img { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
-        .chat-product-card-info { flex-grow: 1; }
-        .chat-product-card-info strong { display: block; font-size: 0.9rem; color: var(--text-dark); margin-bottom: 2px; }
-        .chat-product-card-info span { font-size: 0.85rem; color: var(--bg-medium); font-weight: 500; }
-        .chat-product-card-actions { display: flex; flex-direction: column; gap: 5px; }
-        .chat-product-link, .chat-add-to-cart { display: inline-block; background-color: #E0F2F1; color: var(--bg-medium); padding: 5px 10px; border-radius: 15px; cursor: pointer; font-size: 0.85rem; text-decoration: none; transition: background-color 0.2s; font-weight: 500; text-align: center; width: 100%; }
-        .chat-product-link:hover, .chat-add-to-cart:hover { background-color: #B2DFDB; }
-        .chat-product-card-actions .fa-cart-plus { font-size: 0.9em; }
     </style>
 </head>
@@ -720,23 +1091,10 @@ CATALOG_TEMPLATE = '''
         </div>
     </div>
-    <div id="chatModal" class="modal">
-        <div class="modal-content">
-            <span class="close" onclick="closeModal('chatModal')" aria-label="Закрыть">×</span>
-            <h2><i class="fas fa-comment-dots"></i> Чат с EVA</h2>
-            <div id="chat-messages"></div>
-            <div class="chat-input-container">
-                <input type="text" id="chat-input" placeholder="Напишите сообщение...">
-                <button id="chat-send-button"><i class="fas fa-paper-plane"></i></button>
-            </div>
-            <button id="clear-chat-button" class="product-button" style="background-color: var(--danger); margin-top: 15px;"><i class="fas fa-trash"></i> Очистить чат</button>
-        </div>
-    </div>
     <div class="floating-buttons-container">
-        <button id="chat-open-button" class="floating-button" onclick="openChatModal()" aria-label="Открыть чат">
            <i class="fas fa-comment-dots"></i>
-        </button>
         <button id="cart-button" class="floating-button" onclick="openCartModal()" aria-label="Открыть корзину">
            <i class="fas fa-shopping-cart"></i>
            <span id="cart-count">0</span>
@@ -752,7 +1110,6 @@ CATALOG_TEMPLATE = '''
         const currencyCode = '{{ currency_code }}';
         let selectedProductId = null;
         let cart = JSON.parse(localStorage.getItem('mekaCart') || '[]');
-        let chatHistory = JSON.parse(localStorage.getItem('evaChatHistory') || '[]');
         function getProductById(productId) {
             return allProducts.find(p => p.product_id === productId);
@@ -1076,150 +1433,9 @@ CATALOG_TEMPLATE = '''
             }, duration);
         }
-        function openChatModal() {
-            const modal = document.getElementById('chatModal');
-            if(modal) {
-                modal.style.display = "block";
-                document.body.style.overflow = 'hidden';
-                displayChatHistory();
-                document.getElementById('chat-input').focus();
-            }
-        }
-        function displayChatHistory() {
-            const chatMessagesDiv = document.getElementById('chat-messages');
-            chatMessagesDiv.innerHTML = '';
-            chatHistory.forEach(msg => {
-                addMessageToChat(msg.text, msg.role, false);
-            });
-            chatMessagesDiv.scrollTop = chatMessagesDiv.scrollHeight;
-        }
-        function addMessageToChat(text, role, save = true) {
-            const chatMessagesDiv = document.getElementById('chat-messages');
-            const messageElement = document.createElement('div');
-            messageElement.className = `chat-message ${role}`;
-            const productMatchRegex = /\[ID_ТОВАРА:\s*([a-fA-F0-9]+)\s*Название:\s*([^\]]+)\]/g;
-            let lastIndex = 0;
-            const contentFragment = document.createDocumentFragment();
-            let match;
-            while ((match = productMatchRegex.exec(text)) !== null) {
-                if (match.index > lastIndex) {
-                    const textPart = document.createElement('span');
-                    textPart.innerHTML = text.substring(lastIndex, match.index).replace(/\\n/g, '<br>');
-                    contentFragment.appendChild(textPart);
-                }
-                const productId = match[1];
-                const product = getProductById(productId);
-                if (product) {
-                    const photoUrl = product.photos && product.photos.length > 0
-                        ? `https://huggingface.co/datasets/${repoId}/resolve/main/photos/${product.photos[0]}`
-                        : 'https://via.placeholder.com/50x50.png?text=Gippo312';
-                    const card = document.createElement('div');
-                    card.className = 'chat-product-card';
-                    card.innerHTML = `
-                        <img src="${photoUrl}" alt="${product.name}">
-                        <div class="chat-product-card-info">
-                            <strong>${product.name}</strong>
-                            <span>${product.price.toFixed(2)} ${currencyCode}</span>
-                        </div>
-                        <div class="chat-product-card-actions">
-                            <a href="#" class="chat-product-link" data-product-id="${productId}">Обзор</a>
-                            <a href="#" class="chat-add-to-cart" data-product-id="${productId}"><i class="fas fa-cart-plus"></i></a>
-                        </div>
-                    `;
-                    contentFragment.appendChild(card);
-                } else {
-                    const productName = match[2];
-                    const notFoundText = document.createElement('span');
-                    notFoundText.innerHTML = `[ID_ТОВАРА: ${productId} Название: ${productName}] (товар не найден) `;
-                    contentFragment.appendChild(notFoundText);
-                }
-                lastIndex = match.index + match[0].length;
-            }
-            if (lastIndex < text.length) {
-                const textPart = document.createElement('span');
-                textPart.innerHTML = text.substring(lastIndex).replace(/\\n/g, '<br>');
-                contentFragment.appendChild(textPart);
-            }
-            messageElement.appendChild(contentFragment);
-            chatMessagesDiv.appendChild(messageElement);
-            chatMessagesDiv.scrollTop = chatMessagesDiv.scrollHeight;
-            if (save) {
-                chatHistory.push({ text: text, role: role });
-                localStorage.setItem('evaChatHistory', JSON.stringify(chatHistory));
-            }
-            messageElement.querySelectorAll('.chat-product-link').forEach(link => {
-                link.addEventListener('click', (e) => {
-                    e.preventDefault();
-                    const id = e.currentTarget.dataset.productId;
-                    closeModal('chatModal');
-                    openModalById(id);
-                });
-            });
-            messageElement.querySelectorAll('.chat-add-to-cart').forEach(link => {
-                link.addEventListener('click', (e) => {
-                    e.preventDefault();
-                    const id = e.currentTarget.dataset.productId;
-                    closeModal('chatModal');
-                    openQuantityModalById(id);
-                });
-            });
-        }
-        async function sendMessage() {
-            const chatInput = document.getElementById('chat-input');
-            const chatSendButton = document.getElementById('chat-send-button');
-            const message = chatInput.value.trim();
-            if (!message) return;
-            addMessageToChat(message, 'user');
-            chatInput.value = '';
-            chatSendButton.disabled = true;
-            try {
-                const response = await fetch('/chat_with_ai', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ message: message, history: chatHistory })
-                });
-                const result = await response.json();
-                if (!response.ok) {
-                    throw new Error(result.error || 'Ошибка при получении ответа от ИИ.');
-                }
-                addMessageToChat(result.text, 'ai');
-            } catch (error) {
-                console.error("Chat AI Error:", error);
-                addMessageToChat(`Извините, произошла ошибка: ${error.message}`, 'ai', false);
-            } finally {
-                chatSendButton.disabled = false;
-            }
-        }
-        function clearChatHistory() {
-            if (confirm("Вы уверены, что хотите очистить историю чата?")) {
-                chatHistory = [];
-                localStorage.removeItem('evaChatHistory');
-                displayChatHistory();
-                showNotification("История чата очищена.");
-            }
-        }
         document.addEventListener('DOMContentLoaded', () => {
             updateCartButton();
             document.getElementById('search-input').addEventListener('input', filterProducts);
-            document.getElementById('chat-send-button').addEventListener('click', sendMessage);
-            document.getElementById('chat-input').addEventListener('keypress', function(e) {
-                if (e.key === 'Enter') { sendMessage(); }
-            });
-            document.getElementById('clear-chat-button').addEventListener('click', clearChatHistory);
             window.addEventListener('click', function(event) {
                 if (event.target.classList.contains('modal')) { closeModal(event.target.id); }
             });
@@ -2038,6 +2254,18 @@ def view_order(order_id):
                                   currency_code=CURRENCY_CODE,
                                   whatsapp_number=WHATSAPP_NUMBER)
 @app.route('/admin', methods=['GET', 'POST'])
 def admin():

         else:
              return f"Извините, произошла ошибка: {e}"
+CHAT_TEMPLATE = '''
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>EVA AI - Gippo312</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <style>
+        :root {
+            --bg-dark: #002b30;
+            --bg-gradient: linear-gradient(135deg, #003C43, #002b30);
+            --bg-message-user: linear-gradient(135deg, #48D1CC, #135D66);
+            --bg-message-ai: rgba(255, 255, 255, 0.95);
+            --text-user: #002b30;
+            --text-ai: #1a1a1a;
+            --accent: #48D1CC;
+            --glass: rgba(255, 255, 255, 0.1);
+            --border-glass: rgba(255, 255, 255, 0.15);
+        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: 'Montserrat', sans-serif;
+            background: var(--bg-gradient);
+            color: #fff;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        .chat-header {
+            padding: 15px 20px;
+            background: rgba(0, 60, 67, 0.9);
+            backdrop-filter: blur(15px);
+            border-bottom: 1px solid var(--border-glass);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            z-index: 100;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+        }
+        .header-info { display: flex; align-items: center; gap: 12px; }
+        .bot-avatar {
+            width: 45px; height: 45px;
+            border-radius: 50%;
+            border: 2px solid var(--accent);
+            padding: 2px;
+            background: #fff;
+            object-fit: cover;
+        }
+        .header-text h1 { font-size: 1.1rem; font-weight: 700; color: #fff; }
+        .header-text p { font-size: 0.8rem; color: var(--accent); opacity: 0.9; }
+        .header-actions { display: flex; gap: 15px; }
+        .icon-btn {
+            background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer;
+            transition: transform 0.2s, color 0.2s;
+        }
+        .icon-btn:hover { color: var(--accent); transform: scale(1.1); }
+        .chat-container {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+            padding-bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            scroll-behavior: smooth;
+        }
+        .chat-container::-webkit-scrollbar { width: 6px; }
+        .chat-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
+        .message-row {
+            display: flex;
+            width: 100%;
+            opacity: 0;
+            transform: translateY(20px);
+            animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+        }
+        .message-row.user { justify-content: flex-end; }
+        .message-row.ai { justify-content: flex-start; }
+        @keyframes popIn {
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .message-bubble {
+            max-width: 80%;
+            padding: 14px 18px;
+            border-radius: 20px;
+            font-size: 0.95rem;
+            line-height: 1.5;
+            position: relative;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+        }
+        .user .message-bubble {
+            background: var(--bg-message-user);
+            color: var(--text-user);
+            border-bottom-right-radius: 4px;
+        }
+        .ai .message-bubble {
+            background: var(--bg-message-ai);
+            color: var(--text-ai);
+            border-bottom-left-radius: 4px;
+        }
+        /* Product Card inside Chat */
+        .chat-product-card {
+            background: #f8f9fa;
+            border-radius: 12px;
+            padding: 10px;
+            margin-top: 10px;
+            display: flex;
+            gap: 12px;
+            border: 1px solid #eee;
+            align-items: center;
+        }
+        .chat-product-card img {
+            width: 55px; height: 55px;
+            border-radius: 8px;
+            object-fit: cover;
+            border: 1px solid #ddd;
+        }
+        .product-info { flex: 1; min-width: 0; }
+        .product-info h4 { font-size: 0.9rem; margin-bottom: 2px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .product-info .price { font-weight: 700; color: #135D66; font-size: 0.9rem; }
+        .product-actions { display: flex; gap: 8px; flex-direction: column; }
+        .p-btn {
+            background: #135D66; color: white; border: none;
+            padding: 6px 12px; border-radius: 20px; font-size: 0.75rem;
+            cursor: pointer; text-decoration: none; text-align: center;
+            transition: opacity 0.2s;
+        }
+        .p-btn:hover { opacity: 0.9; }
+        .typing-indicator {
+            display: none;
+            align-items: center;
+            gap: 4px;
+            padding: 12px 16px;
+            background: var(--bg-message-ai);
+            border-radius: 20px;
+            border-bottom-left-radius: 4px;
+            width: fit-content;
+            margin-bottom: 20px;
+        }
+        .dot {
+            width: 8px; height: 8px;
+            background: #888;
+            border-radius: 50%;
+            animation: bounce 1.4s infinite ease-in-out both;
+        }
+        .dot:nth-child(1) { animation-delay: -0.32s; }
+        .dot:nth-child(2) { animation-delay: -0.16s; }
+        @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
+        .input-area {
+            position: fixed;
+            bottom: 0; left: 0; right: 0;
+            padding: 15px 20px;
+            background: rgba(0, 43, 48, 0.85);
+            backdrop-filter: blur(20px);
+            border-top: 1px solid var(--border-glass);
+            display: flex;
+            gap: 12px;
+            align-items: center;
+            z-index: 101;
+        }
+        #message-input {
+            flex: 1;
+            background: rgba(255,255,255,0.1);
+            border: 1px solid var(--border-glass);
+            padding: 14px 20px;
+            border-radius: 30px;
+            color: #fff;
+            font-size: 1rem;
+            outline: none;
+            transition: all 0.3s;
+        }
+        #message-input:focus {
+            background: rgba(255,255,255,0.15);
+            border-color: var(--accent);
+            box-shadow: 0 0 15px rgba(72, 209, 204, 0.2);
+        }
+        .send-btn {
+            width: 50px; height: 50px;
+            border-radius: 50%;
+            border: none;
+            background: var(--accent);
+            color: var(--bg-dark);
+            font-size: 1.2rem;
+            cursor: pointer;
+            display: flex; justify-content: center; align-items: center;
+            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+        .send-btn:hover { transform: scale(1.1) rotate(-10deg); box-shadow: 0 0 20px var(--accent); }
+        .send-btn:disabled { background: #555; cursor: not-allowed; transform: none; box-shadow: none; }
+        @media (min-width: 768px) {
+            .chat-container { max-width: 900px; margin: 0 auto; width: 100%; border-left: 1px solid var(--border-glass); border-right: 1px solid var(--border-glass); }
+            .input-area { max-width: 900px; margin: 0 auto; border-radius: 20px 20px 0 0; }
+        }
+    </style>
+</head>
+<body>
+    <div class="chat-header">
+        <div class="header-info">
+            <img src="https://huggingface.co/spaces/gippo312/admin/resolve/main/Picsart_25-11-04_12-02-21-390.png" class="bot-avatar" alt="EVA">
+            <div class="header-text">
+                <h1>EVA AI</h1>
+                <p>Онлайн • Gippo312</p>
+            </div>
+        </div>
+        <div class="header-actions">
+            <button class="icon-btn" onclick="clearHistory()" title="Очистить чат"><i class="fas fa-trash-alt"></i></button>
+            <a href="/" class="icon-btn" title="Вернуться в магазин"><i class="fas fa-store"></i></a>
+        </div>
+    </div>
+    <div class="chat-container" id="chat-container">
+        <!-- Messages will appear here -->
+        <div class="message-row ai">
+            <div class="message-bubble">
+                Привет! Я EVA, ваш персональный помощник в Gippo312. Чем я могу помочь вам сегодня? 🛍️
+            </div>
+        </div>
+    </div>
+    <div class="typing-indicator" id="typing-indicator">
+        <div class="dot"></div><div class="dot"></div><div class="dot"></div>
+    </div>
+    <div class="input-area">
+        <input type="text" id="message-input" placeholder="Напишите сообщение..." autocomplete="off">
+        <button class="send-btn" id="send-btn"><i class="fas fa-paper-plane"></i></button>
+    </div>
+    <script>
+        const allProducts = {{ products_json|safe }};
+        const repoId = '{{ repo_id }}';
+        const currencyCode = '{{ currency_code }}';
+        const chatContainer = document.getElementById('chat-container');
+        const inputField = document.getElementById('message-input');
+        const sendBtn = document.getElementById('send-btn');
+        const typingIndicator = document.getElementById('typing-indicator');
+        let chatHistory = JSON.parse(localStorage.getItem('evaChatHistory') || '[]');
+        function getProductById(productId) {
+            return allProducts.find(p => p.product_id === productId);
+        }
+        function initChat() {
+            if (chatHistory.length > 0) {
+                chatContainer.innerHTML = '';
+                chatHistory.forEach(msg => appendMessage(msg.text, msg.role, false));
+            } else {
+                // Keep default welcome message if empty
+            }
+            scrollToBottom();
+        }
+        function scrollToBottom() {
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+        function appendMessage(text, role, save = true) {
+            const row = document.createElement('div');
+            row.className = `message-row ${role}`;
+            const bubble = document.createElement('div');
+            bubble.className = 'message-bubble';
+            // Format text and products
+            const productMatchRegex = /\[ID_ТОВАРА:\s*([a-fA-F0-9]+)\s*Название:\s*([^\]]+)\]/g;
+            let lastIndex = 0;
+            let match;
+            const fragment = document.createDocumentFragment();
+            while ((match = productMatchRegex.exec(text)) !== null) {
+                if (match.index > lastIndex) {
+                    const span = document.createElement('span');
+                    span.innerHTML = text.substring(lastIndex, match.index).replace(/\\n/g, '<br>');
+                    fragment.appendChild(span);
+                }
+                const productId = match[1];
+                const product = getProductById(productId);
+                if (product) {
+                    const photoUrl = product.photos && product.photos.length > 0
+                        ? `https://huggingface.co/datasets/${repoId}/resolve/main/photos/${product.photos[0]}`
+                        : 'https://via.placeholder.com/60x60.png?text=N/A';
+                    const card = document.createElement('div');
+                    card.className = 'chat-product-card';
+                    card.innerHTML = `
+                        <img src="${photoUrl}" alt="${product.name}">
+                        <div class="product-info">
+                            <h4>${product.name}</h4>
+                            <div class="price">${product.price.toFixed(2)} ${currencyCode}</div>
+                        </div>
+                        <div class="product-actions">
+                            <a href="/product/${allProducts.indexOf(product)}" class="p-btn" target="_blank">Обзор</a>
+                        </div>
+                    `;
+                    fragment.appendChild(card);
+                }
+                lastIndex = match.index + match[0].length;
+            }
+            if (lastIndex < text.length) {
+                const span = document.createElement('span');
+                span.innerHTML = text.substring(lastIndex).replace(/\\n/g, '<br>');
+                fragment.appendChild(span);
+            }
+            bubble.appendChild(fragment);
+            row.appendChild(bubble);
+            // Insert before typing indicator if it exists and is visible (logic handled by container append)
+            chatContainer.appendChild(row);
+            scrollToBottom();
+            if (save) {
+                chatHistory.push({ text: text, role: role });
+                localStorage.setItem('evaChatHistory', JSON.stringify(chatHistory));
+            }
+        }
+        async function sendMessage() {
+            const text = inputField.value.trim();
+            if (!text) return;
+            inputField.value = '';
+            appendMessage(text, 'user');
+            // Show typing indicator
+            typingIndicator.style.display = 'flex';
+            chatContainer.appendChild(typingIndicator); // Move to bottom
+            scrollToBottom();
+            sendBtn.disabled = true;
+            try {
+                const response = await fetch('/chat_with_ai', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ message: text, history: chatHistory })
+                });
+                const result = await response.json();
+                typingIndicator.style.display = 'none';
+                if (!response.ok) throw new Error(result.error);
+                appendMessage(result.text, 'ai');
+            } catch (error) {
+                typingIndicator.style.display = 'none';
+                appendMessage(`Ошибка: ${error.message}`, 'ai', false);
+            } finally {
+                sendBtn.disabled = false;
+                inputField.focus();
+            }
+        }
+        function clearHistory() {
+            if(confirm('Очистить историю чата?')) {
+                localStorage.removeItem('evaChatHistory');
+                chatHistory = [];
+                chatContainer.innerHTML = `
+                    <div class="message-row ai">
+                        <div class="message-bubble">
+                            История очищена. Я готова к новым вопросам! ✨
+                        </div>
+                    </div>`;
+            }
+        }
+        sendBtn.addEventListener('click', sendMessage);
+        inputField.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') sendMessage();
+        });
+        // Initialize
+        initChat();
+    </script>
+</body>
+</html>
+'''
 CATALOG_TEMPLATE = '''
 <!DOCTYPE html>
 <html lang="ru">
             justify-content: center;
             box-shadow: 0 4px 15px rgba(72, 209, 204, 0.4);
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            text-decoration: none;
         }
         .floating-button:hover {
             background-color: var(--accent-hover);
         .formulate-order-button:hover { background-color: var(--accent-hover); }
         .notification { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background-color: var(--accent); color: var(--bg-dark); padding: 10px 20px; border-radius: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 1002; opacity: 0; transition: opacity 0.5s ease; font-size: 0.9rem;}
         .notification.show { opacity: 1;}
     </style>
 </head>
         </div>
     </div>
     <div class="floating-buttons-container">
+        <a href="/chat" class="floating-button" aria-label="Открыть чат">
            <i class="fas fa-comment-dots"></i>
+        </a>
         <button id="cart-button" class="floating-button" onclick="openCartModal()" aria-label="Открыть корзину">
            <i class="fas fa-shopping-cart"></i>
            <span id="cart-count">0</span>
         const currencyCode = '{{ currency_code }}';
         let selectedProductId = null;
         let cart = JSON.parse(localStorage.getItem('mekaCart') || '[]');
         function getProductById(productId) {
             return allProducts.find(p => p.product_id === productId);
             }, duration);
         }
         document.addEventListener('DOMContentLoaded', () => {
             updateCartButton();
             document.getElementById('search-input').addEventListener('input', filterProducts);
             window.addEventListener('click', function(event) {
                 if (event.target.classList.contains('modal')) { closeModal(event.target.id); }
             });
                                   currency_code=CURRENCY_CODE,
                                   whatsapp_number=WHATSAPP_NUMBER)
+@app.route('/chat')
+def chat_page():
+    data = load_data()
+    all_products_raw = data.get('products', [])
+    products_in_stock = [p for p in all_products_raw if p.get('in_stock', True)]
+    return render_template_string(
+        CHAT_TEMPLATE,
+        products_json=json.dumps(products_in_stock),
+        repo_id=REPO_ID,
+        currency_code=CURRENCY_CODE
+    )
 @app.route('/admin', methods=['GET', 'POST'])
 def admin():