Update index.html

index.html

@@ -45,14 +45,7 @@
 
       <!-- Chat Area -->
       <div class="chat-container p-4 overflow-y-auto" id="chat-area">
-        <div class="bot-message bg-gray-100 rounded-lg p-4 max-w-xs mb-3">
-          <p>Hello! 👋 I'm your Tile Calculator Assistant. Let's estimate how many tiles you need.</p>
-          <p class="mt-2">Are you looking for <span class="font-semibold">floor</span> or <span class="font-semibold">wall</span> tiles?</p>
-          <div class="flex gap-2 mt-3">
-            <button onclick="selectTileType('floor')" class="quick-reply bg-white text-indigo-600 border border-indigo-600 px-4 py-2 rounded-full font-medium hover:bg-indigo-50">Floor</button>
-            <button onclick="selectTileType('wall')" class="quick-reply bg-white text-indigo-600 border border-indigo-600 px-4 py-2 rounded-full font-medium hover:bg-indigo-50">Wall</button>
-          </div>
-        </div>
+        <!-- Initial bot message -->
       </div>
 
       <!-- Input Area -->
@@ -67,7 +60,7 @@
         </div>
       </div>
 
-      <!-- Recommendations Section -->
+      <!-- Recommendations -->
       <div class="bg-gray-50 p-4 border-t">
         <h3 class="font-semibold text-gray-800 mb-3">Recommended Products</h3>
         <div class="grid grid-cols-2 md:grid-cols-4 gap-4" id="recommendations"></div>
@@ -75,203 +68,7 @@
     </div>
   </div>
 
-  <!-- Main chatbot script -->
-  <script>
-    const state = {
-      step: 'tileType',
-      tileType: null,
-      area: null,
-      tileLength: null,
-      tileWidth: null
-    };
-
-    const chatArea = document.getElementById('chat-area');
-    const userInput = document.getElementById('user-input');
-    const recommendations = document.getElementById('recommendations');
-    const resetBtn = document.getElementById('reset-btn');
-
-    resetBtn.addEventListener('click', resetConversation);
-    userInput.addEventListener('keypress', (e) => {
-      if (e.key === 'Enter') sendMessage();
-    });
-
-    function resetConversation() {
-      state.step = 'tileType';
-      state.tileType = null;
-      state.area = null;
-      state.tileLength = null;
-      state.tileWidth = null;
-
-      chatArea.innerHTML = `
-        <div class="bot-message bg-gray-100 rounded-lg p-4 max-w-xs mb-3">
-          <p>Hello! 👋 I'm your Tile Calculator Assistant. Let's estimate how many tiles you need.</p>
-          <p class="mt-2">Are you looking for <span class="font-semibold">floor</span> or <span class="font-semibold">wall</span> tiles?</p>
-          <div class="flex gap-2 mt-3">
-            <button onclick="selectTileType('floor')" class="quick-reply bg-white text-indigo-600 border border-indigo-600 px-4 py-2 rounded-full font-medium hover:bg-indigo-50">Floor</button>
-            <button onclick="selectTileType('wall')" class="quick-reply bg-white text-indigo-600 border border-indigo-600 px-4 py-2 rounded-full font-medium hover:bg-indigo-50">Wall</button>
-          </div>
-        </div>
-      `;
-      recommendations.innerHTML = '';
-    }
-
-    function selectTileType(type) {
-      state.tileType = type;
-      state.step = 'area';
-
-      addMessage('user', type === 'floor' ? 'Floor tiles' : 'Wall tiles');
-      showTyping();
-
-      setTimeout(() => {
-        hideTyping();
-        addMessage('bot', `Great choice for ${type} tiles! What's the total area you need to cover (in sq.ft)?`);
-      }, 1000);
-    }
-
-    function sendMessage() {
-      const message = userInput.value.trim();
-      if (!message) return;
-
-      addMessage('user', message);
-      userInput.value = '';
-
-      processUser Message(message);
-    }
-
-    function processUser Message(message) {
-      showTyping();
-
-      setTimeout(() => {
-        hideTyping();
-
-        if (state.step === 'area') {
-          const area = parseFloat(message);
-          if (isNaN(area)) {
-            addMessage('bot', 'Please enter a valid number for the area (e.g. 120).');
-            return;
-          }
-
-          state.area = area;
-          state.step = 'tileLength';
-          addMessage('bot', 'Now, please enter the tile length (in feet):');
-
-        } else if (state.step === 'tileLength') {
-          const length = parseFloat(message);
-          if (isNaN(length) || length <= 0) {
-            addMessage('bot', 'Please enter a valid positive number for the tile length.');
-            return;
-          }
-
-          state.tileLength = length;
-          state.step = 'tileWidth';
-          addMessage('bot', 'Now, please enter the tile width (in feet):');
-
-        } else if (state.step === 'tileWidth') {
-          const width = parseFloat(message);
-          if (isNaN(width) || width <= 0) {
-            addMessage('bot', 'Please enter a valid positive number for the tile width.');
-            return;
-          }
-
-          state.tileWidth = width;
-          calculateTiles();
-        }
-      }, 1000);
-    }
-
-    function calculateTiles() {
-      const tileArea = state.tileLength * state.tileWidth; // Calculate tile area
-      const numTiles = Math.ceil((state.area / tileArea) * 1.1); // 10% buffer
-      const numBoxes = Math.ceil(numTiles / 10); // Assuming 10 tiles per 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: ${state.tileType}</p>
-          <p>📐 Area to Cover: ${state.area} sq.ft</p>
-          <p>🧮 Tile Size: ${state.tileLength} ft x ${state.tileWidth} ft</p>
-          <p class="mt-2">🔢 <span class="font-bold">Tiles Needed:</span> ${numTiles} (${numBoxes} boxes)</p>
-        </div>
-      `);
-      state.step = 'complete';
-
-      // Fetch recommended products
-      fetchRecommendedProducts();
-    }
-
-    function fetchRecommendedProducts() {
-      fetch('/recommend', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          tile_type: state.tileType,
-          coverage: state.tileLength * state.tileWidth,
-          area: state.area,
-          price_range: [3, 10] // Example price range
-        })
-      })
-      .then(response => response.json())
-      .then(data => {
-        if (data.recommended_products && data.recommended_products.length > 0) {
-          loadProductRecommendations(data.recommended_products);
-        } else {
-          recommendations.innerHTML = `
-            <div class="col-span-4 text-center py-4 text-gray-500">
-              No strong recommendations available for these parameters.
-            </div>
-          `;
-        }
-      })
-      .catch(error => {
-        console.error('Error fetching recommendations:', error);
-      });
-    }
-
-    function loadProductRecommendations(products) {
-      recommendations.innerHTML = '';
-      
-      products.slice(0, 4).forEach(product => {
-        const productCard = document.createElement('div');
-        productCard.className = 'bg-white rounded-lg overflow-hidden shadow-sm border border-gray-100';
-        productCard.innerHTML = `
-          <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>
-          </div>
-          <div class="p-3">
-            <h4 class="font-medium text-gray-800">${product.name || 'Tile Product'}</h4>
-            <p class="text-sm text-gray-600 mt-1">${product.price || '$0.00'}/box</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>
-          </div>
-        `;
-        recommendations.appendChild(productCard);
-      });
-    }
-
-    function addMessage(sender, message) {
-      const messageDiv = document.createElement('div');
-      messageDiv.className = `${sender}-message ${sender === 'user' ? 'ml-auto bg-indigo-600 text-white' : 'bg-gray-100'} rounded-lg p-4 max-w-xs mb-3`;
-      messageDiv.textContent = message;
-      chatArea.appendChild(messageDiv);
-      chatArea.scrollTop = chatArea.scrollHeight;
-    }
-
-    function showTyping() {
-      const typingDiv = document.createElement('div');
-      typingDiv.className = 'typing-indicator bg-gray-100 rounded-lg p-4 max-w-xs mb-3 flex gap-1';
-      typingDiv.id = 'typing-indicator';
-      typingDiv.innerHTML = '<span class="w-2 h-2 bg-gray-400 rounded-full"></span><span class="w-2 h-2 bg-gray-400 rounded-full"></span><span class="w-2 h-2 bg-gray-400 rounded-full"></span>';
-      chatArea.appendChild(typingDiv);
-      chatArea.scrollTop = chatArea.scrollHeight;
-    }
-
-    function hideTyping() {
-      const typingIndicator = document.getElementById('typing-indicator');
-      if (typingIndicator) typingIndicator.remove();
-    }
-  </script>
+  <!-- Include chatbot logic -->
+  <script src="chat.js"></script>
 </body>
 </html>