Update chat.js

chat.js

@@ -116,8 +116,8 @@ function calculateTiles() {
     addMessage('bot', `📐 This tile has a very high aspect ratio (${aspectRatio.toFixed(1)}:1). Please double-check if that's correct.`);
   }
 
-  const numTiles = Math.ceil((area / tileArea) * 1.1); // 10% buffer
-  const numBoxes = Math.ceil(numTiles / 10); // assume 10 tiles per box
+  const numTiles = Math.ceil((area / tileArea) * 1.1);
+  const numBoxes = Math.ceil(numTiles / 10);
 
   chatArea.insertAdjacentHTML('beforeend', `
     <div class="bot-message bg-gray-100 rounded-lg p-4 mb-3">
@@ -159,18 +159,31 @@ function calculateTiles() {
 function loadProductRecommendations(products) {
   recommendations.innerHTML = '';
   products.slice(0, 4).forEach(p => {
+    let ftSize = '';
+    const mmMatch = p.size?.match(/(\d+)\s*[x×X*]\s*(\d+)/);
+    if (mmMatch) {
+      const mmWidth = parseFloat(mmMatch[1]);
+      const mmHeight = parseFloat(mmMatch[2]);
+      const ftWidth = (mmWidth * 0.00328084).toFixed(2);
+      const ftHeight = (mmHeight * 0.00328084).toFixed(2);
+      ftSize = ` (${ftWidth} ft × ${ftHeight} ft)`;
+    }
+
     recommendations.insertAdjacentHTML('beforeend', `
       <div class="bg-white rounded-lg overflow-hidden shadow-sm border border-gray-100">
-        <div class="h-32 bg-gray-200 flex items-center justify-center">
-          ${p.image_url ? `<img src="${p.image_url}" class="h-full object-cover" alt="${p.name}">` : `
+        <div class="h-32 bg-gray-100 flex items-center justify-center">
+          ${p.image_url ? `<img src="${p.image_url}" class="h-full object-cover w-full" alt="${p.name}">` : `
             <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
             </svg>`}
         </div>
         <div class="p-3">
           <h4 class="font-medium text-gray-800">${p.name || 'Tile Product'}</h4>
-          <p class="text-sm text-gray-600 mt-1">${p.price ? `₹${p.price}/box` : 'Price N/A'}</p>
-          <button class="mt-2 w-full bg-indigo-600 text-white py-1 rounded text-sm hover:bg-indigo-700 transition">View Details</button>
+          <p class="text-sm text-gray-600 mt-1">₹${p.price || 'N/A'}/box</p>
+          <p class="text-xs text-gray-500 mt-1">Size: ${p.size}${ftSize}</p>
+          <a href="${p.url || '#'}" target="_blank" rel="noopener noreferrer">
+            <button class="mt-2 w-full bg-indigo-600 text-white py-1 rounded text-sm hover:bg-indigo-700 transition">View Product</button>
+          </a>
         </div>
       </div>
     `);