wineater-bot 1.1.5 → 1.1.7

package/dist/wineater-chatbot.mjs

@@ -1,7 +1,7 @@
-var l = Object.defineProperty;
-var p = (n, t, e) => t in n ? l(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
-var r = (n, t, e) => (p(n, typeof t != "symbol" ? t + "" : t, e), e);
-const g = `
+var p = Object.defineProperty;
+var g = (i, e, t) => e in i ? p(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var r = (i, e, t) => (g(i, typeof e != "symbol" ? e + "" : e, t), t);
+const h = `
 @font-face {
     font-family: 'Poppins';
     src: url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
@@ -30,6 +30,24 @@ const g = `
     box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Optional: add shadow for depth */
 }
 
+/* Position class for bottom-right */
+.chat-icon-bottom-right {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    /* Other styles for the bottom-right button */
+    /* ... */
+}
+
+.chat-icon-right-center {
+    position: fixed;
+    top: 50%;
+    right: -100px;
+    transform: translateY(-50%) rotate(90deg);
+    /* Additional styling for the button */
+    /* ... */
+}
+
 #chat-icon img {
     width: 40px; /* Adjust icon size as needed */
     height: auto;
@@ -44,13 +62,13 @@ const g = `
 
 /* Chat window styles */
 #chat-window {
+    position: fixed;
+    bottom: 20px; /* Set to the desired distance from the bottom */
+    right: 20px; /* Set to the desired distance from the right */
     width: 350px; /* Width of the chat window */
     background-color: white;
     border-radius: 8px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-    position: absolute;
-    bottom: 80px; /* Positioning from the bottom */
-    right: 0;
     display: none; /* Initially hidden */
 }
 
@@ -258,13 +276,14 @@ const g = `
 .typing-indicator.visible {
     visibility: visible;
     height: 50px;
-}`, d = document.createElement("style");
-d.textContent = g;
-document.head.appendChild(d);
-function c() {
-  document.getElementById("chat-window").classList.toggle("visible");
-}
-function h() {
+}`, c = document.createElement("style");
+c.textContent = h;
+document.head.appendChild(c);
+function l() {
+  const i = document.getElementById("chat-window"), e = document.getElementById("chat-icon");
+  i.classList.contains("visible") ? (i.classList.remove("visible"), e.style.display = "flex") : (i.classList.add("visible"), e.style.display = "none");
+}
+function m() {
   document.getElementById("chat-window").classList.remove("visible");
 }
 function u() {
@@ -273,49 +292,49 @@ function u() {
 document.addEventListener("DOMContentLoaded", () => {
   setupCloseButton(), setupOutsideClick();
 });
-const m = ["climats", "telckel", "biobio"];
-class f {
-  constructor(t) {
-    this.apiEndpoint = t || "https://api.wineater.com/dish/recommendations", this.store = m.find((e) => window.location.href.includes(e)), console.log(this.store);
+const f = ["climats", "telckel", "biobio"];
+class b {
+  constructor(e) {
+    this.apiEndpoint = e || "https://api.wineater.com/dish/recommendations", this.store = f.find((t) => window.location.href.includes(t)), console.log(this.store);
   }
-  async getWineRecommendations(t) {
+  async getWineRecommendations(e) {
     console.log(window.location.href);
     try {
-      const e = await fetch(this.apiEndpoint, {
+      const t = await fetch(this.apiEndpoint, {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
         },
-        body: JSON.stringify({ text: t, store: this.store ? this.store.toString().charAt(0).toUpperCase() + this.store.slice(1) : void 0 })
-      }), o = await e.json();
-      if (!e.ok)
-        throw new Error(`API call failed with status ${e.status}: ${o.message || "No additional error information"}`);
+        body: JSON.stringify({ text: e, store: this.store ? this.store.toString().charAt(0).toUpperCase() + this.store.slice(1) : void 0 })
+      }), o = await t.json();
+      if (!t.ok)
+        throw new Error(`API call failed with status ${t.status}: ${o.message || "No additional error information"}`);
       return o;
-    } catch (e) {
-      throw console.error("Fetching wine recommendations failed:", e.message), new Error(`Error in getWineRecommendations: ${e.message}`);
+    } catch (t) {
+      throw console.error("Fetching wine recommendations failed:", t.message), new Error(`Error in getWineRecommendations: ${t.message}`);
     }
   }
 }
-class b {
+class y {
   constructor() {
     r(this, "welcomeMessage", "Sublimez votre expérience gastronomique. Il vous suffit de donner les détails de votre plat, et obtenez la recommandation de compagnon de vin idéale. Que voulez-vous manger?");
-    this.api = new f(), this.displayFirstMessage(this.welcomeMessage);
+    this.api = new b(), this.displayFirstMessage(this.welcomeMessage);
   }
   initialize() {
     document.getElementById("send-button").addEventListener("click", () => this.handleUserInput()), document.getElementById("user-input").addEventListener("keypress", (o) => {
       o.key === "Enter" && this.handleUserInput();
     });
   }
-  displayFirstMessage(t, e = "api") {
-    const o = document.getElementById("message-container"), i = document.createElement("div");
-    i.className = `message ${e}`, i.textContent = t, o.appendChild(i), o.scrollTop = o.scrollHeight;
+  displayFirstMessage(e, t = "api") {
+    const o = document.getElementById("message-container"), n = document.createElement("div");
+    n.className = `message ${t}`, n.textContent = e, o.appendChild(n), o.scrollTop = o.scrollHeight;
   }
   async handleUserInput() {
-    const t = document.getElementById("user-input"), e = t.value.trim();
-    if (e) {
-      this.displayMessage(e, "user"), t.value = "", this.showTypingIndicator();
+    const e = document.getElementById("user-input"), t = e.value.trim();
+    if (t) {
+      this.displayMessage(t, "user"), e.value = "", this.showTypingIndicator();
       try {
-        const o = await this.api.getWineRecommendations(e);
+        const o = await this.api.getWineRecommendations(t);
         this.hideTypingIndicator(), o && o.length ? this.displayResults(o) : this.displayMessage("No results found.", "api");
       } catch (o) {
         this.hideTypingIndicator(), console.error("Error fetching wine recommendations:", o), this.displayMessage("Sorry, something went wrong.", "api");
@@ -328,17 +347,17 @@ class b {
   hideTypingIndicator() {
     document.getElementById("typing-indicator").classList.remove("visible");
   }
-  displayMessage(t, e) {
-    const o = document.getElementById("message-container"), i = document.createElement("div");
-    i.textContent = t, i.className = "message " + e, o.appendChild(i), o.scrollTop = o.scrollHeight;
+  displayMessage(e, t) {
+    const o = document.getElementById("message-container"), n = document.createElement("div");
+    n.textContent = e, n.className = "message " + t, o.appendChild(n), o.scrollTop = o.scrollHeight;
   }
-  displayResults(t) {
-    const e = document.getElementById("message-container");
-    t.forEach((o) => {
-      const i = document.createElement("div");
-      i.className = "wine-item";
+  displayResults(e) {
+    const t = document.getElementById("message-container");
+    e.forEach((o) => {
+      const n = document.createElement("div");
+      n.className = "wine-item";
       const s = document.createElement("img");
-      s.src = o.Image, i.appendChild(s);
+      s.src = o.Image, n.appendChild(s);
       const a = document.createElement("div");
       a.innerHTML = `
                 <strong>${o.Title}</strong><br>
@@ -346,14 +365,14 @@ class b {
                 Région: ${o.Region}<br>
                 Type: ${o.Type}<br>
                 <a href="${o.Url}" target="_blank">Plus d'infos</a>
-            `, i.appendChild(a), e.appendChild(i);
-    }), e.scrollTop = e.scrollHeight;
+            `, n.appendChild(a), t.appendChild(n);
+    }), t.scrollTop = t.scrollHeight;
   }
 }
 document.addEventListener("DOMContentLoaded", () => {
-  window.toggleChatWindow = c, window.closeChatWindow = h, window.openChatWindow = u;
+  window.toggleChatWindow = l, window.closeChatWindow = m, window.openChatWindow = u;
 });
-function y() {
+function w() {
   document.body.insertAdjacentHTML("beforeend", `
       <div id="chatbot-container">
           <div id="chat-icon" onclick="toggleChatWindow()">
@@ -382,20 +401,26 @@ function y() {
       </div>
   `);
 }
-function w() {
-  document.getElementById("close-btn").addEventListener("click", c);
-}
 function x() {
-  window.addEventListener("click", function(n) {
-    const t = document.getElementById("chat-window"), e = document.getElementById("chat-icon");
-    !t.contains(n.target) && !e.contains(n.target) && t.classList.remove("visible");
+  document.getElementById("close-btn").addEventListener("click", l);
+}
+function v() {
+  window.addEventListener("click", function(i) {
+    const e = document.getElementById("chat-window"), t = document.getElementById("chat-icon");
+    !e.contains(i.target) && !t.contains(i.target) && (e.classList.remove("visible"), t.style.display = "flex");
   });
 }
+function d(i) {
+  console.log(i);
+  const e = document.getElementById("chat-icon"), t = document.getElementById("chat-window");
+  e.className = "", t.className = "", i === "right-center" ? (e.classList.add("chat-icon-right-center"), t.classList.add("right-center-aligned")) : e.classList.add("chat-icon-bottom-right");
+}
 typeof window < "u" && window.addEventListener("DOMContentLoaded", () => {
-  y(), w(), x(), new b().initialize();
+  const e = ["climats", "telckel", "biobio"].find((o) => window.location.href.includes(o)) || null;
+  w(), x(), v(), d(e && e === "biobio" ? "right-center" : "bottom-right"), new y().initialize();
 });
 export {
-  h as closeChatWindow,
+  m as closeChatWindow,
   u as openChatWindow,
-  c as toggleChatWindow
+  l as toggleChatWindow
 };

package/dist/wineater-chatbot.umd.js

@@ -1,4 +1,4 @@
-(function(n,i){typeof exports=="object"&&typeof module<"u"?i(exports):typeof define=="function"&&define.amd?define(["exports"],i):(n=typeof globalThis<"u"?globalThis:n||self,i(n.WineaterChatbot={}))})(this,function(n){"use strict";var x=Object.defineProperty;var v=(n,i,r)=>i in n?x(n,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):n[i]=r;var h=(n,i,r)=>(v(n,typeof i!="symbol"?i+"":i,r),r);const i=`
+(function(n,s){typeof exports=="object"&&typeof module<"u"?s(exports):typeof define=="function"&&define.amd?define(["exports"],s):(n=typeof globalThis<"u"?globalThis:n||self,s(n.WineaterChatbot={}))})(this,function(n){"use strict";var v=Object.defineProperty;var E=(n,s,r)=>s in n?v(n,s,{enumerable:!0,configurable:!0,writable:!0,value:r}):n[s]=r;var u=(n,s,r)=>(E(n,typeof s!="symbol"?s+"":s,r),r);const s=`
 @font-face {
     font-family: 'Poppins';
     src: url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
@@ -27,6 +27,24 @@
     box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Optional: add shadow for depth */
 }
 
+/* Position class for bottom-right */
+.chat-icon-bottom-right {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    /* Other styles for the bottom-right button */
+    /* ... */
+}
+
+.chat-icon-right-center {
+    position: fixed;
+    top: 50%;
+    right: -100px;
+    transform: translateY(-50%) rotate(90deg);
+    /* Additional styling for the button */
+    /* ... */
+}
+
 #chat-icon img {
     width: 40px; /* Adjust icon size as needed */
     height: auto;
@@ -41,13 +59,13 @@
 
 /* Chat window styles */
 #chat-window {
+    position: fixed;
+    bottom: 20px; /* Set to the desired distance from the bottom */
+    right: 20px; /* Set to the desired distance from the right */
     width: 350px; /* Width of the chat window */
     background-color: white;
     border-radius: 8px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-    position: absolute;
-    bottom: 80px; /* Positioning from the bottom */
-    right: 0;
     display: none; /* Initially hidden */
 }
 
@@ -255,13 +273,13 @@
 .typing-indicator.visible {
     visibility: visible;
     height: 50px;
-}`,r=document.createElement("style");r.textContent=i,document.head.appendChild(r);function d(){document.getElementById("chat-window").classList.toggle("visible")}function c(){document.getElementById("chat-window").classList.remove("visible")}function l(){document.getElementById("chat-window").classList.add("visible")}document.addEventListener("DOMContentLoaded",()=>{setupCloseButton(),setupOutsideClick()});const u=["climats","telckel","biobio"];class m{constructor(o){this.apiEndpoint=o||"https://api.wineater.com/dish/recommendations",this.store=u.find(t=>window.location.href.includes(t)),console.log(this.store)}async getWineRecommendations(o){console.log(window.location.href);try{const t=await fetch(this.apiEndpoint,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({text:o,store:this.store?this.store.toString().charAt(0).toUpperCase()+this.store.slice(1):void 0})}),e=await t.json();if(!t.ok)throw new Error(`API call failed with status ${t.status}: ${e.message||"No additional error information"}`);return e}catch(t){throw console.error("Fetching wine recommendations failed:",t.message),new Error(`Error in getWineRecommendations: ${t.message}`)}}}class f{constructor(){h(this,"welcomeMessage","Sublimez votre expérience gastronomique. Il vous suffit de donner les détails de votre plat, et obtenez la recommandation de compagnon de vin idéale. Que voulez-vous manger?");this.api=new m,this.displayFirstMessage(this.welcomeMessage)}initialize(){document.getElementById("send-button").addEventListener("click",()=>this.handleUserInput()),document.getElementById("user-input").addEventListener("keypress",e=>{e.key==="Enter"&&this.handleUserInput()})}displayFirstMessage(o,t="api"){const e=document.getElementById("message-container"),s=document.createElement("div");s.className=`message ${t}`,s.textContent=o,e.appendChild(s),e.scrollTop=e.scrollHeight}async handleUserInput(){const o=document.getElementById("user-input"),t=o.value.trim();if(t){this.displayMessage(t,"user"),o.value="",this.showTypingIndicator();try{const e=await this.api.getWineRecommendations(t);this.hideTypingIndicator(),e&&e.length?this.displayResults(e):this.displayMessage("No results found.","api")}catch(e){this.hideTypingIndicator(),console.error("Error fetching wine recommendations:",e),this.displayMessage("Sorry, something went wrong.","api")}}}showTypingIndicator(){document.getElementById("typing-indicator").classList.add("visible")}hideTypingIndicator(){document.getElementById("typing-indicator").classList.remove("visible")}displayMessage(o,t){const e=document.getElementById("message-container"),s=document.createElement("div");s.textContent=o,s.className="message "+t,e.appendChild(s),e.scrollTop=e.scrollHeight}displayResults(o){const t=document.getElementById("message-container");o.forEach(e=>{const s=document.createElement("div");s.className="wine-item";const p=document.createElement("img");p.src=e.Image,s.appendChild(p);const g=document.createElement("div");g.innerHTML=`
-                <strong>${e.Title}</strong><br>
-                Prix: ${e.Price}<br>
-                Région: ${e.Region}<br>
-                Type: ${e.Type}<br>
-                <a href="${e.Url}" target="_blank">Plus d'infos</a>
-            `,s.appendChild(g),t.appendChild(s)}),t.scrollTop=t.scrollHeight}}document.addEventListener("DOMContentLoaded",()=>{window.toggleChatWindow=d,window.closeChatWindow=c,window.openChatWindow=l});function b(){document.body.insertAdjacentHTML("beforeend",`
+}`,r=document.createElement("style");r.textContent=s,document.head.appendChild(r);function d(){const i=document.getElementById("chat-window"),t=document.getElementById("chat-icon");i.classList.contains("visible")?(i.classList.remove("visible"),t.style.display="flex"):(i.classList.add("visible"),t.style.display="none")}function c(){document.getElementById("chat-window").classList.remove("visible")}function l(){document.getElementById("chat-window").classList.add("visible")}document.addEventListener("DOMContentLoaded",()=>{setupCloseButton(),setupOutsideClick()});const m=["climats","telckel","biobio"];class f{constructor(t){this.apiEndpoint=t||"https://api.wineater.com/dish/recommendations",this.store=m.find(e=>window.location.href.includes(e)),console.log(this.store)}async getWineRecommendations(t){console.log(window.location.href);try{const e=await fetch(this.apiEndpoint,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({text:t,store:this.store?this.store.toString().charAt(0).toUpperCase()+this.store.slice(1):void 0})}),o=await e.json();if(!e.ok)throw new Error(`API call failed with status ${e.status}: ${o.message||"No additional error information"}`);return o}catch(e){throw console.error("Fetching wine recommendations failed:",e.message),new Error(`Error in getWineRecommendations: ${e.message}`)}}}class b{constructor(){u(this,"welcomeMessage","Sublimez votre expérience gastronomique. Il vous suffit de donner les détails de votre plat, et obtenez la recommandation de compagnon de vin idéale. Que voulez-vous manger?");this.api=new f,this.displayFirstMessage(this.welcomeMessage)}initialize(){document.getElementById("send-button").addEventListener("click",()=>this.handleUserInput()),document.getElementById("user-input").addEventListener("keypress",o=>{o.key==="Enter"&&this.handleUserInput()})}displayFirstMessage(t,e="api"){const o=document.getElementById("message-container"),a=document.createElement("div");a.className=`message ${e}`,a.textContent=t,o.appendChild(a),o.scrollTop=o.scrollHeight}async handleUserInput(){const t=document.getElementById("user-input"),e=t.value.trim();if(e){this.displayMessage(e,"user"),t.value="",this.showTypingIndicator();try{const o=await this.api.getWineRecommendations(e);this.hideTypingIndicator(),o&&o.length?this.displayResults(o):this.displayMessage("No results found.","api")}catch(o){this.hideTypingIndicator(),console.error("Error fetching wine recommendations:",o),this.displayMessage("Sorry, something went wrong.","api")}}}showTypingIndicator(){document.getElementById("typing-indicator").classList.add("visible")}hideTypingIndicator(){document.getElementById("typing-indicator").classList.remove("visible")}displayMessage(t,e){const o=document.getElementById("message-container"),a=document.createElement("div");a.textContent=t,a.className="message "+e,o.appendChild(a),o.scrollTop=o.scrollHeight}displayResults(t){const e=document.getElementById("message-container");t.forEach(o=>{const a=document.createElement("div");a.className="wine-item";const g=document.createElement("img");g.src=o.Image,a.appendChild(g);const h=document.createElement("div");h.innerHTML=`
+                <strong>${o.Title}</strong><br>
+                Prix: ${o.Price}<br>
+                Région: ${o.Region}<br>
+                Type: ${o.Type}<br>
+                <a href="${o.Url}" target="_blank">Plus d'infos</a>
+            `,a.appendChild(h),e.appendChild(a)}),e.scrollTop=e.scrollHeight}}document.addEventListener("DOMContentLoaded",()=>{window.toggleChatWindow=d,window.closeChatWindow=c,window.openChatWindow=l});function y(){document.body.insertAdjacentHTML("beforeend",`
       <div id="chatbot-container">
           <div id="chat-icon" onclick="toggleChatWindow()">
               <img src="https://landing-static.s3.eu-central-1.amazonaws.com/images/chat-icon.svg" alt="Chat Icon"> <!-- Update the path to your logo image -->
@@ -287,4 +305,4 @@
               </div>
           </div>
       </div>
-  `)}function y(){document.getElementById("close-btn").addEventListener("click",d)}function w(){window.addEventListener("click",function(a){const o=document.getElementById("chat-window"),t=document.getElementById("chat-icon");!o.contains(a.target)&&!t.contains(a.target)&&o.classList.remove("visible")})}typeof window<"u"&&window.addEventListener("DOMContentLoaded",()=>{b(),y(),w(),new f().initialize()}),n.closeChatWindow=c,n.openChatWindow=l,n.toggleChatWindow=d,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
+  `)}function w(){document.getElementById("close-btn").addEventListener("click",d)}function x(){window.addEventListener("click",function(i){const t=document.getElementById("chat-window"),e=document.getElementById("chat-icon");!t.contains(i.target)&&!e.contains(i.target)&&(t.classList.remove("visible"),e.style.display="flex")})}function p(i){console.log(i);const t=document.getElementById("chat-icon"),e=document.getElementById("chat-window");t.className="",e.className="",i==="right-center"?(t.classList.add("chat-icon-right-center"),e.classList.add("right-center-aligned")):t.classList.add("chat-icon-bottom-right")}typeof window<"u"&&window.addEventListener("DOMContentLoaded",()=>{const t=["climats","telckel","biobio"].find(o=>window.location.href.includes(o))||null;y(),w(),x(),p(t&&t==="biobio"?"right-center":"bottom-right"),new b().initialize()}),n.closeChatWindow=c,n.openChatWindow=l,n.toggleChatWindow=d,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wineater-bot",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "",
   "main": "dist/index.js",
   "module": "src/index.js",

package/src/index.js

@@ -14,6 +14,7 @@ document.addEventListener('DOMContentLoaded', () => {
     window.toggleChatWindow = toggleChatWindow;
     window.closeChatWindow = closeChatWindow;
     window.openChatWindow = openChatWindow;
+    
 });
 
 export {
@@ -65,16 +66,42 @@ function setupOutsideClick() {
       const chatIcon = document.getElementById('chat-icon');
       if (!chatWindow.contains(event.target) && !chatIcon.contains(event.target)) {
           chatWindow.classList.remove('visible');
+          chatIcon.style.display = 'flex'; // Show the chat icon/button
       }
   });
 }
 
+// Function to toggle the chat icon position
+function toggleChatIconPosition(position) {
+  console.log(position);
+  const chatIcon = document.getElementById('chat-icon');
+  const chatWindow = document.getElementById('chat-window');
+  
+  chatIcon.className = ''; // Reset classes
+  chatWindow.className = ''; // Reset classes
+  
+  if (position === 'right-center') {
+      chatIcon.classList.add('chat-icon-right-center');
+      chatWindow.classList.add('right-center-aligned');
+  } else {
+      // Apply bottom-right or other default classes as needed
+      chatIcon.classList.add('chat-icon-bottom-right');
+  }
+}
+
 // If you want to initialize your chatbot automatically when the script is loaded
 if (typeof window !== 'undefined') {
   window.addEventListener('DOMContentLoaded', () => {
+    const stores = ['climats', 'telckel', 'biobio'];
+    const store = stores.find(value => window.location.href.includes(value)) || null;
     createChatbotUI(); // Create the UI
     setupCloseButton();
     setupOutsideClick();
+    if (store && store === 'biobio') {
+      toggleChatIconPosition('right-center');
+    } else {
+      toggleChatIconPosition('bottom-right');
+    }
     const myChatbot = new Chatbot();
     myChatbot.initialize();
   });

package/src/js/styles.js

@@ -28,6 +28,24 @@ const css = `
     box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Optional: add shadow for depth */
 }
 
+/* Position class for bottom-right */
+.chat-icon-bottom-right {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    /* Other styles for the bottom-right button */
+    /* ... */
+}
+
+.chat-icon-right-center {
+    position: fixed;
+    top: 50%;
+    right: -100px;
+    transform: translateY(-50%) rotate(90deg);
+    /* Additional styling for the button */
+    /* ... */
+}
+
 #chat-icon img {
     width: 40px; /* Adjust icon size as needed */
     height: auto;
@@ -42,13 +60,13 @@ const css = `
 
 /* Chat window styles */
 #chat-window {
+    position: fixed;
+    bottom: 20px; /* Set to the desired distance from the bottom */
+    right: 20px; /* Set to the desired distance from the right */
     width: 350px; /* Width of the chat window */
     background-color: white;
     border-radius: 8px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-    position: absolute;
-    bottom: 80px; /* Positioning from the bottom */
-    right: 0;
     display: none; /* Initially hidden */
 }
 

package/src/js/ui.js

@@ -1,6 +1,17 @@
 export function toggleChatWindow() {
   const chatWindow = document.getElementById('chat-window');
-  chatWindow.classList.toggle('visible');
+  const chatIcon = document.getElementById('chat-icon');
+
+  // Check if the chat window is currently visible
+  const isWindowOpen = chatWindow.classList.contains('visible');
+
+  if (isWindowOpen) {
+      chatWindow.classList.remove('visible');
+      chatIcon.style.display = 'flex'; // Show the chat icon/button
+  } else {
+      chatWindow.classList.add('visible');
+      chatIcon.style.display = 'none'; // Hide the chat icon/button
+  }
 }
 
 export function closeChatWindow() {