Update app.py

app.py

@@ -286,7 +286,9 @@ def generate_chat_response(message, chat_history_from_client):
     for p in products:
         if p.get('in_stock', True):
             price_display = f"{p.get('price', 0):.2f}".replace('.00', '')
-            product_info_list.append(f"- Название: {p.get('name', 'Без названия')}, Категория: {p.get('category', 'Без категории')}, Цена: {price_display} {CURRENCY_CODE}, Описание: {p.get('description', '')[:100]}..., ID: {p.get('product_id', 'N/A')}")
+            # AI is instructed to output in format: [ID_ТОВАРА: <product_id> Название: <product_name>]
+            # We add a placeholder here for the AI to pick up on it.
+            product_info_list.append(f"- [ID_ТОВАРА: {p.get('product_id', 'N/A')} Название: {p.get('name', 'Без названия')}], Категория: {p.get('category', 'Без категории')}, Цена: {price_display} {CURRENCY_CODE}, Описание: {p.get('description', '')[:100]}...")
     product_list_str = "\n".join(product_info_list) if product_info_list else "В данный момент нет товаров в наличии."
 
     category_list_str = ", ".join(categories) if categories else "Категорий пока нет."
@@ -309,7 +311,7 @@ def generate_chat_response(message, chat_history_from_client):
         "Твоя задача - помогать пользователям находить товары, отвечать на вопросы о них, предлагать варианты, а также предоставлять информацию о магазине. "
         "Всегда будь вежлив, информативен и стремись решить проблему пользователя. "
         "Никогда не выдумывай товары или категории, которых нет в предоставленных списках. "
-        "Когда ты предлагаешь товар, всегда указывай его название и ID, используя точный формат: [ID_ТОВАРА: <product_id> Название: <product_name>]. Это очень важно для клиента. "
+        "Когда ты предлагаешь товар, всегда указывай его название и ID, используя *точный формат*: [ID_ТОВАРА: <product_id> Название: <product_name>]. Это *очень важно* для клиента. "
         "Если пользователь ищет товар или категорию, предлагай несколько наиболее подходящих вариантов или перечисляй доступные из этой категории.\n\n"
         f"Список доступных категорий: {category_list_str}.\n\n"
         f"Список доступных товаров в магазине:\n"
@@ -601,19 +603,64 @@ CATALOG_TEMPLATE = '''
         #chat-send-button:hover { background-color: #005CBF; }
         #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: #333; margin-bottom: 2px; }
-        .chat-product-card-info span { font-size: 0.85rem; color: #0A2A66; 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: #E3F2FD; color: #0070D1; 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; box-sizing: border-box; width: 100%;
+        /* New styles for chat product cards */
+        .chat-product-card {
+            background-color: #f0f2f5;
+            border-radius: 12px;
+            padding: 10px;
+            margin-top: 8px; /* Give some space after text, if any */
+            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: #333;
+            margin-bottom: 2px;
+        }
+        .chat-product-card-info span {
+            font-size: 0.85rem;
+            color: #0A2A66;
+            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: #E3F2FD;
+            color: #0070D1;
+            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;
+            box-sizing: border-box;
+            width: 100%; /* Make buttons take full width of their container */
+        }
+        .chat-product-link:hover, .chat-add-to-cart:hover {
+            background-color: #BBDEFB;
+        }
+        .chat-product-card-actions .fa-cart-plus {
+            font-size: 0.9em; /* Adjust icon size slightly */
         }
-        .chat-product-link:hover, .chat-add-to-cart:hover { background-color: #BBDEFB; }
-        .chat-product-card-actions .fa-cart-plus { font-size: 0.9em; }
 
     </style>
 </head>
@@ -1065,14 +1112,18 @@ CATALOG_TEMPLATE = '''
             const messageElement = document.createElement('div');
             messageElement.className = `chat-message ${role}`;
             
+            // Regex to find the product pattern: [ID_ТОВАРА: <product_id> Название: <product_name>]
+            // This regex is slightly different from the original prompt to match the AI's output exactly
             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) {
+                // Add any preceding text
                 if (match.index > lastIndex) {
                     const textPart = document.createElement('span');
+                    // Replace newlines for proper rendering
                     textPart.innerHTML = text.substring(lastIndex, match.index).replace(/\\n/g, '<br>');
                     contentFragment.appendChild(textPart);
                 }
@@ -1100,14 +1151,16 @@ CATALOG_TEMPLATE = '''
                     `;
                     contentFragment.appendChild(card);
                 } else {
+                    // If product not found in allProducts, display it as plain text with a note
                     const productName = match[2];
-                    const notFoundText = document.createElement('strong');
-                    notFoundText.textContent = ` ${productName} (товар не найден) `;
+                    const notFoundText = document.createElement('span');
+                    notFoundText.innerHTML = `[ID_ТОВАРА: ${productId} Название: ${productName}] (товар не найден) `;
                     contentFragment.appendChild(notFoundText);
                 }
                 lastIndex = match.index + match[0].length;
             }
 
+            // Add any remaining text after the last product card
             if (lastIndex < text.length) {
                 const textPart = document.createElement('span');
                 textPart.innerHTML = text.substring(lastIndex).replace(/\\n/g, '<br>');
@@ -1123,20 +1176,21 @@ CATALOG_TEMPLATE = '''
                 localStorage.setItem('evaChatHistory', JSON.stringify(chatHistory));
             }
 
+            // Attach event listeners to dynamically created links/buttons
             messageElement.querySelectorAll('.chat-product-link').forEach(link => {
                 link.addEventListener('click', (e) => {
-                    e.preventDefault();
+                    e.preventDefault(); // Prevent default link behavior
                     const id = e.currentTarget.dataset.productId;
-                    closeModal('chatModal');
-                    openModalById(id);
+                    closeModal('chatModal'); // Close chat modal
+                    openModalById(id); // Open product detail modal
                 });
             });
             messageElement.querySelectorAll('.chat-add-to-cart').forEach(link => {
                 link.addEventListener('click', (e) => {
-                    e.preventDefault();
+                    e.preventDefault(); // Prevent default link behavior
                     const id = e.currentTarget.dataset.productId;
-                    closeModal('chatModal');
-                    openQuantityModalById(id);
+                    closeModal('chatModal'); // Close chat modal
+                    openQuantityModalById(id); // Open quantity modal for adding to cart
                 });
             });
         }
@@ -1819,6 +1873,7 @@ def catalog():
 
     products_in_stock = [p for p in all_products_raw if p.get('in_stock', True)]
     
+    # Sort products for consistent display and indexing
     products_sorted_for_js = sorted(products_in_stock, key=lambda p: (not p.get('is_top', False), p.get('name', '').lower()))
 
     products_by_category = {cat: [] for cat in all_cat_names}
@@ -1834,7 +1889,7 @@ def catalog():
         CATALOG_TEMPLATE,
         products_by_category=products_by_category,
         ordered_categories=ordered_categories,
-        products_json=json.dumps(products_sorted_for_js),
+        products_json=json.dumps(products_sorted_for_js), # Pass sorted products to JS
         repo_id=REPO_ID,
         store_address=STORE_ADDRESS,
         currency_code=CURRENCY_CODE