Update chat.js

chat.js

@@ -47,7 +47,7 @@ function selectTileType(type) {
   showTyping();
   setTimeout(() => {
     hideTyping();
-    addMessage('bot', `Great! What is the total area to cover (in sq.ft)?`);
+    addMessage('bot', 'Great! What is the total area to cover (in sq.ft)?');
   }, 800);
 }
 
@@ -104,7 +104,7 @@ function calculateTiles() {
   }
 
   if (tileArea > area) {
-    return addMessage('bot', `⚠️ The tile size (${tileLength}×${tileWidth} = ${tileArea} sq.ft) is larger than the total area (${area} sq.ft). Please enter smaller tile dimensions.`);
+    return addMessage('bot', `⚠ The tile size (${tileLength}×${tileWidth} = ${tileArea} sq.ft) is larger than the total area (${area} sq.ft). Please enter smaller tile dimensions.`);
   }
 
   if (tileArea > 20) {
@@ -137,9 +137,7 @@ function calculateTiles() {
     body: JSON.stringify({
       tile_type: tileType,
       coverage: tileArea,
-      area: area,
-      price_range: [3, 10],
-      preferred_sizes: [`${tileLength}x${tileWidth}`]
+      area: area
     })
   })
     .then(res => res.json())
@@ -159,31 +157,18 @@ 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-100 flex items-center justify-center">
-          ${p.image_url ? `<img src="${p.image_url}" class="h-full object-cover w-full" alt="${p.name}">` : `
+        <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}">` : `
             <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 || '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>
+          <p class="text-sm text-gray-600 mt-1">${p.price ? `₹${p.price}/box` : 'Price N/A'}</p>
+          <a href="${p.url}" target="_blank" class="mt-2 inline-block text-sm text-indigo-600 underline">View Details</a>
         </div>
       </div>
     `);