wineater-bot 1.1.3 → 1.1.5

package/dist/wineater-chatbot.mjs

@@ -1,4 +1,7 @@
-const c = `
+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 = `
 @font-face {
     font-family: 'Poppins';
     src: url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
@@ -15,20 +18,28 @@ const c = `
 
 /* Styling the chat icon */
 #chat-icon {
-    width: 60px;
-    height: 60px;
-    background-color: #7E27ED; /* Purple background color */
-    border-radius: 50%;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    height: 40px;
+    display: flex; /* Use flexbox for alignment */
+    align-items: center; /* Center items vertically */
+    justify-content: center; /* Center items horizontally */
+    padding: 8px 16px; /* Add some padding around the text and image */
+    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 */
 }
 
 #chat-icon img {
-    width: 80%; /* Adjust icon size as needed */
+    width: 40px; /* Adjust icon size as needed */
     height: auto;
+    margin-right: 8px;
+}
+
+#chat-icon span {
+    color: black; /* Text color */
+    font-family: 'Poppins', sans-serif; /* Font family from your style guide */
+    /* Add more text styles if needed */
 }
 
 /* Chat window styles */
@@ -45,7 +56,7 @@ const c = `
 
 /* Header of the chat window */
 #chat-header {
-    background-color: #7E27ED;
+    background-color: #fff;
     color: white;
     padding: 16px;
     border-top-left-radius: 8px;
@@ -56,10 +67,31 @@ const c = `
     position: relative; /* Needed for absolute positioning of the close button */
 }
 
+/* Powered by and logo styles */
+#powered-by {
+    display: flex;
+    align-items: center;
+    background-color: #fff; /* White background */
+    width: 100%;
+    border-radius: 16px; /* Rounded corners for the container */
+}
+
+#powered-by span {
+    font-family: 'Poppins', sans-serif;
+    color: #7E27ED; /* Text color - using the primary color from your style guide */
+    margin-right: 8px; /* Space between the text and the logo */
+}
+
+#chatbot-logo {
+    height: 20px; /* Adjust the logo size as needed */
+    width: auto; /* Keep the logo's aspect ratio */
+}
+
 
 /* Style for the close button */
 #close-btn {
     font-size: 24px; /* Size of the close button */
+    color: #7E27ED; /* Text color - using the primary color from your style guide */
     cursor: pointer;
     padding: 0 10px;
     line-height: 24px;
@@ -67,7 +99,8 @@ const c = `
 
 /* Container for messages */
 #message-container {
-    max-height: 300px;
+    max-height: 500px;
+    height: 400px;
     overflow-y: auto;
     padding: 15px;
     background: #f7f7f7; /* Light grey background for the message area */
@@ -93,7 +126,7 @@ const c = `
 
 #input-container button {
     padding: 10px 20px; /* Larger padding for a larger button */
-    background-color: #5F82FF; /* Button background color from style guide */
+    background-color: #7E27ED; /* Button background color from style guide */
     border: none;
     color: white;
     border-radius: 4px;
@@ -186,6 +219,7 @@ const c = `
     align-items: center;
     height: 0; /* Adjust as needed */
     visibility: hidden; /* Start off invisible */
+    background-color: #f7f7f7;
 }
 
 .typing-indicator span {
@@ -224,33 +258,27 @@ const c = `
 .typing-indicator.visible {
     visibility: visible;
     height: 50px;
-}
-
-  #message-container {
-    overflow-y: auto;
-    height: 300px; /* adjust based on your UI needs */
-    padding: 10px;
-}`, r = document.createElement("style");
-r.textContent = c;
-document.head.appendChild(r);
-function d() {
+}`, d = document.createElement("style");
+d.textContent = g;
+document.head.appendChild(d);
+function c() {
   document.getElementById("chat-window").classList.toggle("visible");
 }
-function l() {
+function h() {
   document.getElementById("chat-window").classList.remove("visible");
 }
-function p() {
+function u() {
   document.getElementById("chat-window").classList.add("visible");
 }
 document.addEventListener("DOMContentLoaded", () => {
   setupCloseButton(), setupOutsideClick();
 });
-const g = ["climats", "telckel", "biobio"];
-class h {
-  constructor(n) {
-    this.apiEndpoint = n || "https://api.wineater.com/dish/recommendations", this.store = g.find((e) => window.location.href.includes(e)), console.log(this.store);
+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(n) {
+  async getWineRecommendations(t) {
     console.log(window.location.href);
     try {
       const e = await fetch(this.apiEndpoint, {
@@ -258,34 +286,39 @@ class h {
         headers: {
           "Content-Type": "application/json"
         },
-        body: JSON.stringify({ text: n, store: this.store ? this.store.toString().charAt(0).toUpperCase() + this.store.slice(1) : void 0 })
-      }), t = await e.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}: ${t.message || "No additional error information"}`);
-      return t;
+        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 u {
+class b {
   constructor() {
-    this.api = new h();
+    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);
   }
   initialize() {
-    document.getElementById("send-button").addEventListener("click", () => this.handleUserInput()), document.getElementById("user-input").addEventListener("keypress", (t) => {
-      t.key === "Enter" && this.handleUserInput();
+    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;
+  }
   async handleUserInput() {
-    const n = document.getElementById("user-input"), e = n.value.trim();
+    const t = document.getElementById("user-input"), e = t.value.trim();
     if (e) {
-      this.displayMessage(e, "user"), n.value = "", this.showTypingIndicator();
+      this.displayMessage(e, "user"), t.value = "", this.showTypingIndicator();
       try {
-        const t = await this.api.getWineRecommendations(e);
-        this.hideTypingIndicator(), t && t.length ? this.displayResults(t) : this.displayMessage("No results found.", "api");
-      } catch (t) {
-        this.hideTypingIndicator(), console.error("Error fetching wine recommendations:", t), this.displayMessage("Sorry, something went wrong.", "api");
+        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");
       }
     }
   }
@@ -295,63 +328,74 @@ class u {
   hideTypingIndicator() {
     document.getElementById("typing-indicator").classList.remove("visible");
   }
-  displayMessage(n, e) {
-    const t = document.getElementById("message-container"), o = document.createElement("div");
-    o.textContent = n, o.className = "message " + e, t.appendChild(o), t.scrollTop = t.scrollHeight;
+  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;
   }
-  displayResults(n) {
+  displayResults(t) {
     const e = document.getElementById("message-container");
-    n.forEach((t) => {
-      const o = document.createElement("div");
-      o.className = "wine-item";
+    t.forEach((o) => {
+      const i = document.createElement("div");
+      i.className = "wine-item";
       const s = document.createElement("img");
-      s.src = t.Image, o.appendChild(s);
+      s.src = o.Image, i.appendChild(s);
       const a = document.createElement("div");
-      a.innerHTML = `<strong>${t.Title}</strong><br>Price: ${t.Price}<br>Region: ${t.Region}<br>Type: ${t.Type}<br><a href="${t.Url}" target="_blank">More Info</a>`, o.appendChild(a), e.appendChild(o);
+      a.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>
+            `, i.appendChild(a), e.appendChild(i);
     }), e.scrollTop = e.scrollHeight;
   }
 }
 document.addEventListener("DOMContentLoaded", () => {
-  window.toggleChatWindow = d, window.closeChatWindow = l, window.openChatWindow = p;
+  window.toggleChatWindow = c, window.closeChatWindow = h, window.openChatWindow = u;
 });
-function m() {
+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">
+              <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 -->
+              <span>Accorder le vin au dîner</span>
           </div>
 
           <div id="chat-window" class="hidden">
               <div id="chat-header">
-                  <span>Wineater</span>
-                  <div id="close-btn">&times;</div>
+              <div id="powered-by">
+                <span>Powered by</span>
+                <img src="https://landing-static.s3.eu-central-1.amazonaws.com/images/logo.svg" alt="Wineater Logo" id="chatbot-logo">
+              </div>
+              <div id="close-btn">&times;</div>
               </div>
+              
               <div id="message-container"></div>
               <div id="typing-indicator" class="typing-indicator hidden">
                   <span></span><span></span><span></span>
               </div>
               <div id="input-container">
-                  <input type="text" id="user-input" placeholder="What's on your plate?">
-                  <button id="send-button">Ask</button>
+                  <input type="text" id="user-input" placeholder="ex., Salade de thon">
+                  <button id="send-button">Accorder</button>
               </div>
           </div>
       </div>
   `);
 }
-function b() {
-  document.getElementById("close-btn").addEventListener("click", d);
+function w() {
+  document.getElementById("close-btn").addEventListener("click", c);
 }
-function f() {
-  window.addEventListener("click", function(i) {
-    const n = document.getElementById("chat-window"), e = document.getElementById("chat-icon");
-    !n.contains(i.target) && !e.contains(i.target) && n.classList.remove("visible");
+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");
   });
 }
 typeof window < "u" && window.addEventListener("DOMContentLoaded", () => {
-  m(), b(), f(), new u().initialize();
+  y(), w(), x(), new b().initialize();
 });
 export {
-  l as closeChatWindow,
-  p as openChatWindow,
-  d as toggleChatWindow
+  h as closeChatWindow,
+  u as openChatWindow,
+  c as toggleChatWindow
 };

package/dist/wineater-chatbot.umd.js

@@ -1,4 +1,4 @@
-(function(o,a){typeof exports=="object"&&typeof module<"u"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(o=typeof globalThis<"u"?globalThis:o||self,a(o.WineaterChatbot={}))})(this,function(o){"use strict";const a=`
+(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=`
 @font-face {
     font-family: 'Poppins';
     src: url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
@@ -15,20 +15,28 @@
 
 /* Styling the chat icon */
 #chat-icon {
-    width: 60px;
-    height: 60px;
-    background-color: #7E27ED; /* Purple background color */
-    border-radius: 50%;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    height: 40px;
+    display: flex; /* Use flexbox for alignment */
+    align-items: center; /* Center items vertically */
+    justify-content: center; /* Center items horizontally */
+    padding: 8px 16px; /* Add some padding around the text and image */
+    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 */
 }
 
 #chat-icon img {
-    width: 80%; /* Adjust icon size as needed */
+    width: 40px; /* Adjust icon size as needed */
     height: auto;
+    margin-right: 8px;
+}
+
+#chat-icon span {
+    color: black; /* Text color */
+    font-family: 'Poppins', sans-serif; /* Font family from your style guide */
+    /* Add more text styles if needed */
 }
 
 /* Chat window styles */
@@ -45,7 +53,7 @@
 
 /* Header of the chat window */
 #chat-header {
-    background-color: #7E27ED;
+    background-color: #fff;
     color: white;
     padding: 16px;
     border-top-left-radius: 8px;
@@ -56,10 +64,31 @@
     position: relative; /* Needed for absolute positioning of the close button */
 }
 
+/* Powered by and logo styles */
+#powered-by {
+    display: flex;
+    align-items: center;
+    background-color: #fff; /* White background */
+    width: 100%;
+    border-radius: 16px; /* Rounded corners for the container */
+}
+
+#powered-by span {
+    font-family: 'Poppins', sans-serif;
+    color: #7E27ED; /* Text color - using the primary color from your style guide */
+    margin-right: 8px; /* Space between the text and the logo */
+}
+
+#chatbot-logo {
+    height: 20px; /* Adjust the logo size as needed */
+    width: auto; /* Keep the logo's aspect ratio */
+}
+
 
 /* Style for the close button */
 #close-btn {
     font-size: 24px; /* Size of the close button */
+    color: #7E27ED; /* Text color - using the primary color from your style guide */
     cursor: pointer;
     padding: 0 10px;
     line-height: 24px;
@@ -67,7 +96,8 @@
 
 /* Container for messages */
 #message-container {
-    max-height: 300px;
+    max-height: 500px;
+    height: 400px;
     overflow-y: auto;
     padding: 15px;
     background: #f7f7f7; /* Light grey background for the message area */
@@ -93,7 +123,7 @@
 
 #input-container button {
     padding: 10px 20px; /* Larger padding for a larger button */
-    background-color: #5F82FF; /* Button background color from style guide */
+    background-color: #7E27ED; /* Button background color from style guide */
     border: none;
     color: white;
     border-radius: 4px;
@@ -186,6 +216,7 @@
     align-items: center;
     height: 0; /* Adjust as needed */
     visibility: hidden; /* Start off invisible */
+    background-color: #f7f7f7;
 }
 
 .typing-indicator span {
@@ -224,31 +255,36 @@
 .typing-indicator.visible {
     visibility: visible;
     height: 50px;
-}
-
-  #message-container {
-    overflow-y: auto;
-    height: 300px; /* adjust based on your UI needs */
-    padding: 10px;
-}`,d=document.createElement("style");d.textContent=a,document.head.appendChild(d);function r(){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 g=["climats","telckel","biobio"];class u{constructor(n){this.apiEndpoint=n||"https://api.wineater.com/dish/recommendations",this.store=g.find(e=>window.location.href.includes(e)),console.log(this.store)}async getWineRecommendations(n){console.log(window.location.href);try{const e=await fetch(this.apiEndpoint,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({text:n,store:this.store?this.store.toString().charAt(0).toUpperCase()+this.store.slice(1):void 0})}),t=await e.json();if(!e.ok)throw new Error(`API call failed with status ${e.status}: ${t.message||"No additional error information"}`);return t}catch(e){throw console.error("Fetching wine recommendations failed:",e.message),new Error(`Error in getWineRecommendations: ${e.message}`)}}}class m{constructor(){this.api=new u}initialize(){document.getElementById("send-button").addEventListener("click",()=>this.handleUserInput()),document.getElementById("user-input").addEventListener("keypress",t=>{t.key==="Enter"&&this.handleUserInput()})}async handleUserInput(){const n=document.getElementById("user-input"),e=n.value.trim();if(e){this.displayMessage(e,"user"),n.value="",this.showTypingIndicator();try{const t=await this.api.getWineRecommendations(e);this.hideTypingIndicator(),t&&t.length?this.displayResults(t):this.displayMessage("No results found.","api")}catch(t){this.hideTypingIndicator(),console.error("Error fetching wine recommendations:",t),this.displayMessage("Sorry, something went wrong.","api")}}}showTypingIndicator(){document.getElementById("typing-indicator").classList.add("visible")}hideTypingIndicator(){document.getElementById("typing-indicator").classList.remove("visible")}displayMessage(n,e){const t=document.getElementById("message-container"),s=document.createElement("div");s.textContent=n,s.className="message "+e,t.appendChild(s),t.scrollTop=t.scrollHeight}displayResults(n){const e=document.getElementById("message-container");n.forEach(t=>{const s=document.createElement("div");s.className="wine-item";const p=document.createElement("img");p.src=t.Image,s.appendChild(p);const h=document.createElement("div");h.innerHTML=`<strong>${t.Title}</strong><br>Price: ${t.Price}<br>Region: ${t.Region}<br>Type: ${t.Type}<br><a href="${t.Url}" target="_blank">More Info</a>`,s.appendChild(h),e.appendChild(s)}),e.scrollTop=e.scrollHeight}}document.addEventListener("DOMContentLoaded",()=>{window.toggleChatWindow=r,window.closeChatWindow=c,window.openChatWindow=l});function b(){document.body.insertAdjacentHTML("beforeend",`
+}`,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",`
       <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">
+              <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 -->
+              <span>Accorder le vin au dîner</span>
           </div>
 
           <div id="chat-window" class="hidden">
               <div id="chat-header">
-                  <span>Wineater</span>
-                  <div id="close-btn">&times;</div>
+              <div id="powered-by">
+                <span>Powered by</span>
+                <img src="https://landing-static.s3.eu-central-1.amazonaws.com/images/logo.svg" alt="Wineater Logo" id="chatbot-logo">
+              </div>
+              <div id="close-btn">&times;</div>
               </div>
+              
               <div id="message-container"></div>
               <div id="typing-indicator" class="typing-indicator hidden">
                   <span></span><span></span><span></span>
               </div>
               <div id="input-container">
-                  <input type="text" id="user-input" placeholder="What's on your plate?">
-                  <button id="send-button">Ask</button>
+                  <input type="text" id="user-input" placeholder="ex., Salade de thon">
+                  <button id="send-button">Accorder</button>
               </div>
           </div>
       </div>
-  `)}function f(){document.getElementById("close-btn").addEventListener("click",r)}function y(){window.addEventListener("click",function(i){const n=document.getElementById("chat-window"),e=document.getElementById("chat-icon");!n.contains(i.target)&&!e.contains(i.target)&&n.classList.remove("visible")})}typeof window<"u"&&window.addEventListener("DOMContentLoaded",()=>{b(),f(),y(),new m().initialize()}),o.closeChatWindow=c,o.openChatWindow=l,o.toggleChatWindow=r,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
+  `)}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"})});

package/package.json

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

package/src/css/styles.css

@@ -14,20 +14,27 @@
 
 /* Styling the chat icon */
 #chat-icon {
-    width: 60px;
-    height: 60px;
-    background-color: #7E27ED; /* Purple background color */
-    border-radius: 50%;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    display: flex; /* Use flexbox for alignment */
+    align-items: center; /* Center items vertically */
+    justify-content: center; /* Center items horizontally */
+    padding: 8px; /* Add some padding around the text and image */
+    border-radius: 20px; /* Rounded corners for the button */
+    background-color: #7E27ED; /* Background color from your style guide */
     cursor: pointer;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Optional: add shadow for depth */
+
 }
 
 #chat-icon img {
     width: 80%; /* Adjust icon size as needed */
     height: auto;
+    margin-right: 8px;
+}
+
+#chat-icon span {
+    color: white; /* Text color */
+    font-family: 'Poppins', sans-serif; /* Font family from your style guide */
+    /* Add more text styles if needed */
 }
 
 /* Chat window styles */

package/src/index.js

@@ -26,21 +26,26 @@ function createChatbotUI() {
   const chatbotHTML = `
       <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">
+              <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 -->
+              <span>Accorder le vin au dîner</span>
           </div>
 
           <div id="chat-window" class="hidden">
               <div id="chat-header">
-                  <span>Wineater</span>
-                  <div id="close-btn">&times;</div>
+              <div id="powered-by">
+                <span>Powered by</span>
+                <img src="https://landing-static.s3.eu-central-1.amazonaws.com/images/logo.svg" alt="Wineater Logo" id="chatbot-logo">
               </div>
+              <div id="close-btn">&times;</div>
+              </div>
+              
               <div id="message-container"></div>
               <div id="typing-indicator" class="typing-indicator hidden">
                   <span></span><span></span><span></span>
               </div>
               <div id="input-container">
-                  <input type="text" id="user-input" placeholder="What's on your plate?">
-                  <button id="send-button">Ask</button>
+                  <input type="text" id="user-input" placeholder="ex., Salade de thon">
+                  <button id="send-button">Accorder</button>
               </div>
           </div>
       </div>

package/src/js/chatbot.js

@@ -4,12 +4,16 @@ import { Api } from './api.js';
 export class Chatbot {
     constructor() {
         this.api = new Api(); // Instantiate the Api class
+        this.displayFirstMessage(this.welcomeMessage);
     }
 
+    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?";
+
     initialize() {
         // Attach event listeners
         const sendButton = document.getElementById('send-button');
         sendButton.addEventListener('click', () => this.handleUserInput());
+    
 
         const userInputField = document.getElementById('user-input');
         userInputField.addEventListener('keypress', (event) => {
@@ -19,6 +23,15 @@ export class Chatbot {
         });
     }
 
+    displayFirstMessage(message, sender = 'api') {
+        const messageContainer = document.getElementById('message-container');
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${sender}`;
+        messageDiv.textContent = message;
+        messageContainer.appendChild(messageDiv);
+        messageContainer.scrollTop = messageContainer.scrollHeight; // Scroll to the latest message
+    }
+
     async handleUserInput() {
         const inputField = document.getElementById('user-input');
         const userInput = inputField.value.trim();
@@ -80,7 +93,13 @@ export class Chatbot {
             wineDiv.appendChild(image);
 
             const contentDiv = document.createElement('div');
-            contentDiv.innerHTML = `<strong>${wine.Title}</strong><br>Price: ${wine.Price}<br>Region: ${wine.Region}<br>Type: ${wine.Type}<br><a href="${wine.Url}" target="_blank">More Info</a>`;
+            contentDiv.innerHTML = `
+                <strong>${wine.Title}</strong><br>
+                Prix: ${wine.Price}<br>
+                Région: ${wine.Region}<br>
+                Type: ${wine.Type}<br>
+                <a href="${wine.Url}" target="_blank">Plus d'infos</a>
+            `;
             wineDiv.appendChild(contentDiv);
 
             messageContainer.appendChild(wineDiv);

package/src/js/styles.js

@@ -16,20 +16,28 @@ const css = `
 
 /* Styling the chat icon */
 #chat-icon {
-    width: 60px;
-    height: 60px;
-    background-color: #7E27ED; /* Purple background color */
-    border-radius: 50%;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    height: 40px;
+    display: flex; /* Use flexbox for alignment */
+    align-items: center; /* Center items vertically */
+    justify-content: center; /* Center items horizontally */
+    padding: 8px 16px; /* Add some padding around the text and image */
+    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 */
 }
 
 #chat-icon img {
-    width: 80%; /* Adjust icon size as needed */
+    width: 40px; /* Adjust icon size as needed */
     height: auto;
+    margin-right: 8px;
+}
+
+#chat-icon span {
+    color: black; /* Text color */
+    font-family: 'Poppins', sans-serif; /* Font family from your style guide */
+    /* Add more text styles if needed */
 }
 
 /* Chat window styles */
@@ -46,7 +54,7 @@ const css = `
 
 /* Header of the chat window */
 #chat-header {
-    background-color: #7E27ED;
+    background-color: #fff;
     color: white;
     padding: 16px;
     border-top-left-radius: 8px;
@@ -57,10 +65,31 @@ const css = `
     position: relative; /* Needed for absolute positioning of the close button */
 }
 
+/* Powered by and logo styles */
+#powered-by {
+    display: flex;
+    align-items: center;
+    background-color: #fff; /* White background */
+    width: 100%;
+    border-radius: 16px; /* Rounded corners for the container */
+}
+
+#powered-by span {
+    font-family: 'Poppins', sans-serif;
+    color: #7E27ED; /* Text color - using the primary color from your style guide */
+    margin-right: 8px; /* Space between the text and the logo */
+}
+
+#chatbot-logo {
+    height: 20px; /* Adjust the logo size as needed */
+    width: auto; /* Keep the logo's aspect ratio */
+}
+
 
 /* Style for the close button */
 #close-btn {
     font-size: 24px; /* Size of the close button */
+    color: #7E27ED; /* Text color - using the primary color from your style guide */
     cursor: pointer;
     padding: 0 10px;
     line-height: 24px;
@@ -68,7 +97,8 @@ const css = `
 
 /* Container for messages */
 #message-container {
-    max-height: 300px;
+    max-height: 500px;
+    height: 400px;
     overflow-y: auto;
     padding: 15px;
     background: #f7f7f7; /* Light grey background for the message area */
@@ -94,7 +124,7 @@ const css = `
 
 #input-container button {
     padding: 10px 20px; /* Larger padding for a larger button */
-    background-color: #5F82FF; /* Button background color from style guide */
+    background-color: #7E27ED; /* Button background color from style guide */
     border: none;
     color: white;
     border-radius: 4px;
@@ -187,6 +217,7 @@ const css = `
     align-items: center;
     height: 0; /* Adjust as needed */
     visibility: hidden; /* Start off invisible */
+    background-color: #f7f7f7;
 }
 
 .typing-indicator span {
@@ -225,12 +256,6 @@ const css = `
 .typing-indicator.visible {
     visibility: visible;
     height: 50px;
-}
-
-  #message-container {
-    overflow-y: auto;
-    height: 300px; /* adjust based on your UI needs */
-    padding: 10px;
 }`;
 
 const style = document.createElement('style');