not working

public/widget/widget.js

@@ -0,0 +1,169 @@
+
+(function () {
+
+  <button id="cw-chatToggle" aria-label="Toggle chat widget" type="button">
+    <img src="logo.svg" alt="Logo"><span class="text-xs">Agent</span>
+  </button>
+
+  <div id="cw-chatWidget" role="region" aria-live="polite" aria-label="Customer support chat widget">
+    <div class="logo-container">
+      <img src="logo.svg" alt="Logo" />
+    </div>
+    <div class="header">Kundenservice</div>
+    <div id="cw-status"></div>
+    <div id="cw-chatMessages"></div>
+    <form id="cw-chatForm" autocomplete="off">
+      <input type="text" id="cw-chatInput" placeholder="Type your message..." required autocomplete="off" />
+      <button type="submit">Senden</button>
+    </form>
+  </div>
+
+
+
+
+  const preamble = `
+We use what we preach — this chatbot is powered by our own n8n automation 🤖 to help you quickly find what you need.
+
+Want to talk to a real automation expert? Just buy a service pack 💼 — it includes a 1-hour get-to-know session with our team 👥.
+
+If it’s not the right fit, no worries — we’ll refund you 💸.
+`;
+
+  const logo="logo.svg"
+  const api='https://ai.odoo4projects.com/webhook/81742473-b50b-4845-a5f9-916d9fe60876/chat'
+
+  // Elements
+  const chatToggle = document.getElementById('cw-chatToggle');
+  const chatWidget = document.getElementById('cw-chatWidget');
+  const chatForm = document.getElementById('cw-chatForm');
+  const chatInput = document.getElementById('cw-chatInput');
+  const chatMessages = document.getElementById('cw-chatMessages');
+  const sessionId = crypto.randomUUID();
+
+  let chatOpened = false;
+
+  function appendMessage(text, sender) {
+    const msg = document.createElement('div');
+    msg.classList.add('cw-message', sender === 'user' ? 'user' : 'bot');
+    msg.innerHTML = text;
+
+    chatMessages.appendChild(msg);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+  }
+
+  chatToggle.addEventListener('click', () => {
+    const isVisible = chatWidget.classList.toggle('active');
+    if (isVisible && !chatOpened) {
+      appendMessage(
+        preamble,
+        'bot'
+      );
+      chatOpened = true;
+    }
+  });
+
+  chatForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const input = chatInput.value.trim();
+    if (!input) return;
+    appendMessage(input, 'user');
+    chatInput.value = '';
+    chatInput.focus();
+
+    try {
+      const response = await fetch(api, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'sendMessage', sessionId, chatInput: input })
+      });
+
+      const data = await response.json();
+      console.log("12344")
+      const statusDiv = document.getElementById('cw-status');
+console.log("ASS")
+    console.log(data)
+if (data.status) {
+  statusDiv.innerHTML = data.status;
+
+  // Wait one frame to ensure DOM is updated
+  requestAnimationFrame(() => {
+
+    statusDiv.style.padding = '10px';
+    statusDiv.style.maxHeight = statusDiv.scrollHeight + 'px';
+  });
+} else {
+  statusDiv.style.maxHeight = '0';
+  statusDiv.style.padding = '0 10px';
+}
+
+
+
+      appendMessage(data.output, 'bot');
+    } catch (error) {
+      appendMessage('Fehler beim Verbinden mit dem Server. Bitte versuchen Sie es später erneut.', 'bot');
+      console.error(error);
+    }
+  });
+
+  function handleBuyClick(buttonId, message) {
+    const btn = document.getElementById(buttonId);
+    if (!btn) return;
+
+    btn.addEventListener('click', (e) => {
+      e.preventDefault();
+
+      if (!chatWidget.classList.contains('active')) {
+        chatWidget.classList.add('active');
+        if (!chatOpened) {
+          appendMessage(preamble, 'bot');
+          chatOpened = true;
+        }
+      }
+
+      appendMessage(message, 'user');
+
+      fetch(api, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'sendMessage', sessionId, chatInput: message })
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          appendMessage(data.output, 'bot');
+        })
+        .catch((error) => {
+          appendMessage('Fehler beim Verbinden mit dem Server. Bitte versuchen Sie es später erneut.', 'bot');
+          console.error(error);
+        });
+    });
+  }
+
+  handleBuyClick('buy-3h', 'I want to buy the 3 Hours pack for $450.');
+  handleBuyClick('buy-5h', 'I want to buy the 5 Hours pack for $675.');
+  handleBuyClick('buy-10h', 'I want to buy the 10 Hours pack for $1200.');
+  handleBuyClick('buy-bundle', 'I want to buy the ODOO and N8N bundle for $395 per year.');
+})();
+
+document.addEventListener('DOMContentLoaded', () => {
+  const widgetHTML = `
+      <button id="cw-chatToggle" aria-label="Toggle chat widget" type="button">
+    <img src="logo.svg" alt="Logo"><span class="text-xs">Agent</span>
+  </button>
+
+  <div id="cw-chatWidget" role="region" aria-live="polite" aria-label="Customer support chat widget">
+    <div class="logo-container">
+      <img src="logo.svg" alt="Logo" />
+    </div>
+    <div class="header">Kundenservice</div>
+    <div id="cw-status"></div>
+    <div id="cw-chatMessages"></div>
+    <form id="cw-chatForm" autocomplete="off">
+      <input type="text" id="cw-chatInput" placeholder="Type your message..." required autocomplete="off" />
+      <button type="submit">Senden</button>
+    </form>
+  </div>
+  `;
+
+  document.body.insertAdjacentHTML('beforeend', widgetHTML);
+
+});