Update chat.js

chat.js

@@ -98,21 +98,21 @@ function calculateTiles() {
     return addMessage('bot', `❗ Invalid tile dimensions. Length × width must be greater than 0.`);
   }
 
-  if (tileArea >= area) {
+  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.`);
   }
 
   if (tileArea > 50) {
-    addMessage('bot', `🔎 That’s quite a large tile (${tileArea} sq.ft). Double-check your input or continue if it's correct.`);
+    addMessage('bot', `🔍 That's a large tile (${tileArea} sq.ft). Please confirm the size is correct.`);
   }
 
   const aspectRatio = Math.max(tileLength / tileWidth, tileWidth / tileLength);
   if (aspectRatio > 10) {
-    addMessage('bot', `📐 This tile has a very high aspect ratio (${aspectRatio.toFixed(1)}:1). Make sure that's intentional.`);
+    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); // add 10% buffer
-  const numBoxes = Math.ceil(numTiles / 10); // assume 10 tiles/box
+  const numTiles = Math.ceil((area / tileArea) * 1.1); // 10% buffer
+  const numBoxes = Math.ceil(numTiles / 10); // assume 10 tiles per box
 
   chatArea.insertAdjacentHTML('beforeend', `
     <div class="bot-message bg-gray-100 rounded-lg p-4 mb-3">
@@ -156,9 +156,10 @@ function loadProductRecommendations(products) {
     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">
-          <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>
+          ${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>