wineater-bot 1.1.4 → 1.1.6

package/dist/wineater-chatbot.mjs

@@ -26,9 +26,28 @@ const g = `
     border-radius: 20px; /* Rounded corners for the button */
     background-color: #fff; /* Background color from your style guide */
     cursor: pointer;
+    box-sizing: content-box;
     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;
@@ -43,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 */
 }
 
@@ -261,21 +280,22 @@ const g = `
 d.textContent = g;
 document.head.appendChild(d);
 function c() {
-  document.getElementById("chat-window").classList.toggle("visible");
+  const n = document.getElementById("chat-window"), t = document.getElementById("chat-icon");
+  n.classList.contains("visible") ? (n.classList.remove("visible"), t.style.display = "flex") : (n.classList.add("visible"), t.style.display = "none");
 }
 function h() {
   document.getElementById("chat-window").classList.remove("visible");
 }
-function u() {
+function m() {
   document.getElementById("chat-window").classList.add("visible");
 }
 document.addEventListener("DOMContentLoaded", () => {
   setupCloseButton(), setupOutsideClick();
 });
-const m = ["climats", "telckel", "biobio"];
+const u = ["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);
+    this.apiEndpoint = t || "https://api.wineater.com/dish/recommendations", this.store = u.find((e) => window.location.href.includes(e)), console.log(this.store);
   }
   async getWineRecommendations(t) {
     console.log(window.location.href);
@@ -350,7 +370,7 @@ class b {
   }
 }
 document.addEventListener("DOMContentLoaded", () => {
-  window.toggleChatWindow = c, window.closeChatWindow = h, window.openChatWindow = u;
+  window.toggleChatWindow = c, window.closeChatWindow = h, window.openChatWindow = m;
 });
 function y() {
   document.body.insertAdjacentHTML("beforeend", `
@@ -387,14 +407,19 @@ function w() {
 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");
+    !t.contains(n.target) && !e.contains(n.target) && (t.classList.remove("visible"), e.style.display = "flex");
   });
 }
+function v(n) {
+  console.log(n);
+  const t = document.getElementById("chat-icon"), e = document.getElementById("chat-window");
+  t.className = "", e.className = "", n === "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", () => {
-  y(), w(), x(), new b().initialize();
+  y(), w(), x(), v("right-center"), new b().initialize();
 });
 export {
   h as closeChatWindow,
-  u as openChatWindow,
+  m as openChatWindow,
   c 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(i,s){typeof exports=="object"&&typeof module<"u"?s(exports):typeof define=="function"&&define.amd?define(["exports"],s):(i=typeof globalThis<"u"?globalThis:i||self,s(i.WineaterChatbot={}))})(this,function(i){"use strict";var v=Object.defineProperty;var E=(i,s,r)=>s in i?v(i,s,{enumerable:!0,configurable:!0,writable:!0,value:r}):i[s]=r;var h=(i,s,r)=>(E(i,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');
@@ -23,9 +23,28 @@
     border-radius: 20px; /* Rounded corners for the button */
     background-color: #fff; /* Background color from your style guide */
     cursor: pointer;
+    box-sizing: content-box;
     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;
@@ -40,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 */
 }
 
@@ -254,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 n=document.getElementById("chat-window"),t=document.getElementById("chat-icon");n.classList.contains("visible")?(n.classList.remove("visible"),t.style.display="flex"):(n.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 u=["climats","telckel","biobio"];class m{constructor(t){this.apiEndpoint=t||"https://api.wineater.com/dish/recommendations",this.store=u.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 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",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 p=document.createElement("img");p.src=o.Image,a.appendChild(p);const g=document.createElement("div");g.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(g),e.appendChild(a)}),e.scrollTop=e.scrollHeight}}document.addEventListener("DOMContentLoaded",()=>{window.toggleChatWindow=d,window.closeChatWindow=c,window.openChatWindow=l});function b(){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 -->
@@ -286,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 y(){document.getElementById("close-btn").addEventListener("click",d)}function w(){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"),e.style.display="flex")})}function x(n){console.log(n);const t=document.getElementById("chat-icon"),e=document.getElementById("chat-window");t.className="",e.className="",n==="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",()=>{b(),y(),w(),x("right-center"),new f().initialize()}),i.closeChatWindow=c,i.openChatWindow=l,i.toggleChatWindow=d,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wineater-bot",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "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,36 @@ 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', () => {
     createChatbotUI(); // Create the UI
     setupCloseButton();
     setupOutsideClick();
+    toggleChatIconPosition('right-center'); 
     const myChatbot = new Chatbot();
     myChatbot.initialize();
   });

package/src/js/styles.js

@@ -24,9 +24,28 @@ const css = `
     border-radius: 20px; /* Rounded corners for the button */
     background-color: #fff; /* Background color from your style guide */
     cursor: pointer;
+    box-sizing: content-box;
     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 +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() {