Update chat.js

chat.js

@@ -43,10 +43,8 @@ function resetConversation() {
 function selectTileType(type) {
   state.tileType = type;
   state.step = 'area';
-
   addMessage('user', `${type.charAt(0).toUpperCase() + type.slice(1)} tiles`);
   showTyping();
-
   setTimeout(() => {
     hideTyping();
     addMessage('bot', `Great! What is the total area to cover (in sq.ft)?`);
@@ -56,7 +54,6 @@ function selectTileType(type) {
 function sendMessage() {
   const message = userInput.value.trim();
   if (!message) return;
-
   addMessage('user', message);
   userInput.value = '';
   processUserMessage(message);
@@ -64,10 +61,8 @@ function sendMessage() {
 
 function processUserMessage(message) {
   showTyping();
-
   setTimeout(() => {
     hideTyping();
-
     if (state.step === 'area') {
       const area = parseFloat(message);
       if (isNaN(area) || area <= 0) {
@@ -76,9 +71,7 @@ function processUserMessage(message) {
       state.area = area;
       state.step = 'tileLength';
       addMessage('bot', 'Now enter the tile length (in feet):');
-    }
-
-    else if (state.step === 'tileLength') {
+    } else if (state.step === 'tileLength') {
       const length = parseFloat(message);
       if (isNaN(length) || length <= 0) {
         return addMessage('bot', 'Please enter a valid positive number for tile length.');
@@ -86,9 +79,7 @@ function processUserMessage(message) {
       state.tileLength = length;
       state.step = 'tileWidth';
       addMessage('bot', 'Now enter the tile width (in feet):');
-    }
-
-    else if (state.step === 'tileWidth') {
+    } else if (state.step === 'tileWidth') {
       const width = parseFloat(message);
       if (isNaN(width) || width <= 0) {
         return addMessage('bot', 'Please enter a valid positive number for tile width.');
@@ -102,15 +93,15 @@ function processUserMessage(message) {
 function calculateTiles() {
   const { tileLength, tileWidth, area, tileType } = state;
   const tileArea = tileLength * tileWidth;
-  const numTiles = Math.ceil((area / tileArea) * 1.1);
-  const numBoxes = Math.ceil(numTiles / 10);
+  const numTiles = Math.ceil((area / tileArea) * 1.1); // 10% extra
+  const numBoxes = Math.ceil(numTiles / 10); // 10 tiles/box
 
   chatArea.insertAdjacentHTML('beforeend', `
     <div class="bot-message bg-gray-100 rounded-lg p-4 mb-3">
       <p class="font-semibold">Calculation Results:</p>
       <p>🧱 Tile Type: ${tileType}</p>
       <p>📐 Area to Cover: ${area} sq.ft</p>
-      <p>🧮 Tile Size: ${tileLength} ft x ${tileWidth} ft</p>
+      <p>🧮 Tile Size: ${tileLength} ft × ${tileWidth} ft</p>
       <p class="mt-2">🔢 <strong>Tiles Needed:</strong> ${numTiles} (${numBoxes} boxes)</p>
     </div>
   `);
@@ -132,10 +123,13 @@ function calculateTiles() {
     if (data.recommended_products?.length) {
       loadProductRecommendations(data.recommended_products);
     } else {
-      recommendations.innerHTML = `<div class="col-span-4 text-center py-4 text-gray-500">No strong recommendations.</div>`;
+      recommendations.innerHTML = `<div class="col-span-4 text-center py-4 text-gray-500">No product recommendations found.</div>`;
     }
   })
-  .catch(console.error);
+  .catch(err => {
+    console.error('Recommendation error:', err);
+    recommendations.innerHTML = `<div class="col-span-4 text-center py-4 text-red-500">Error fetching recommendations.</div>`;
+  });
 }
 
 function loadProductRecommendations(products) {