wineater-bot 1.0.0 → 1.1.0

package/dist/wineater-chatbot.mjs

@@ -1,54 +1,289 @@
-function a() {
+const c = `
+@font-face {
+    font-family: 'Poppins';
+    src: url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
+}
+
+/* Overall chatbot styles */
+#chatbot-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    font-family: 'Poppins', sans-serif; /* Use Poppins as the main font */
+    z-index: 1000; /* Ensure chat is above other content */
+}
+
+/* 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;
+    cursor: pointer;
+}
+
+#chat-icon img {
+    width: 80%; /* Adjust icon size as needed */
+    height: auto;
+}
+
+/* Chat window styles */
+#chat-window {
+    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 */
+}
+
+/* Header of the chat window */
+#chat-header {
+    background-color: #7E27ED;
+    color: white;
+    padding: 16px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative; /* Needed for absolute positioning of the close button */
+}
+
+
+/* Style for the close button */
+#close-btn {
+    font-size: 24px; /* Size of the close button */
+    cursor: pointer;
+    padding: 0 10px;
+    line-height: 24px;
+}
+
+/* Container for messages */
+#message-container {
+    max-height: 300px;
+    overflow-y: auto;
+    padding: 15px;
+    background: #f7f7f7; /* Light grey background for the message area */
+}
+
+/* Input area */
+#input-container {
+    border-top: 2px solid #ececec; /* Light border for input area */
+    background-color: white; /* White background for input area */
+    padding: 12px;
+    display: flex;
+    align-items: center; /* Align button and input vertically */
+    gap: 10px; /* Adds space between input and button */
+}
+
+#input-container input {
+    flex-grow: 1;
+    border: 2px solid #B928EB; /* Input border color based on style guide */
+    padding: 10px;
+    border-radius: 4px;
+    font-family: 'Poppins', sans-serif; /* Use Poppins font */
+}
+
+#input-container button {
+    padding: 10px 20px; /* Larger padding for a larger button */
+    background-color: #5F82FF; /* Button background color from style guide */
+    border: none;
+    color: white;
+    border-radius: 4px;
+    font-family: 'Poppins', sans-serif; /* Use Poppins font */
+    font-size: 1rem; /* Adjust font size as needed */
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add subtle shadow for depth */
+    transition: background-color 0.3s ease; /* Smooth transition for background color */
+}
+
+#input-container button:hover {
+    background-color: #2FC0BF; /* Hover color based on style guide */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Darker shadow for hover state */
+}
+
+/* Message bubble styling */
+.message {
+    margin-bottom: 8px;
+    padding: 12px;
+    background-color: #e0e0e0; /* Light grey for message bubbles */
+    border-radius: 16px;
+    font-size: 14px;
+    line-height: 1.4;
+}
+
+.message.user {
+    background-color: #B928EB; /* User message bubble color */
+    color: white;
+    align-self: flex-end;
+}
+
+.message.api {
+    background-color: #e0e0e0; /* API message bubble color */
+    color: black;
+    align-self: flex-start;
+}
+
+/* Wine item styling */
+.wine-item {
+    display: flex;
+    align-items: center;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 10px;
+    margin-top: 10px;
+    background: white; /* White background for wine items */
+}
+
+.wine-item img {
+    width: 80px; /* Smaller wine image size */
+    height: auto;
+    border-radius: 4px; /* Rounded corners for images */
+    margin-right: 12px;
+}
+
+.wine-item div {
+    font-size: 0.9rem; /* Smaller font size for wine info */
+}
+
+/* Ensure the chat window is visible when the 'visible' class is added */
+#chat-window.visible {
+    display: block;
+}
+
+/* Loader Styles */
+.loader {
+    display: none; /* Loader is hidden by default */
+    border: 4px solid #f3f3f3; /* Light grey */
+    border-top: 4px solid #3498db; /* Blue, could be your primary color */
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 2s linear infinite;
+    margin: 20px auto; /* Centered horizontally */
+}
+
+.loader.visible {
+    display: block;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Typing indicator styles */
+.typing-indicator {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 0; /* Adjust as needed */
+    visibility: hidden; /* Start off invisible */
+}
+
+.typing-indicator span {
+    display: block;
+    width: 8px;
+    height: 8px;
+    margin: 0 4px;
+    background-color: #3498db; /* Or use a color from your style guide */
+    border-radius: 50%;
+    opacity: 0.4;
+    animation: typing 1.5s infinite;
+}
+
+/* Animation keyframes */
+@keyframes typing {
+    0% { transform: translateY(0); }
+    20% { transform: translateY(-10px); }
+    40% { transform: translateY(0); }
+    60% { transform: translateY(-10px); }
+    80% { transform: translateY(0); }
+    100% { transform: translateY(0); }
+}
+
+/* To stagger the animation for each dot */
+.typing-indicator span:nth-child(1) {
+    animation-delay: 0s;
+}
+.typing-indicator span:nth-child(2) {
+    animation-delay: 0.2s;
+}
+.typing-indicator span:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+/* Show the typing indicator */
+.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() {
   document.getElementById("chat-window").classList.toggle("visible");
 }
-function c() {
+function l() {
   document.getElementById("chat-window").classList.remove("visible");
 }
-function r() {
+function p() {
   document.getElementById("chat-window").classList.add("visible");
 }
 document.addEventListener("DOMContentLoaded", () => {
   setupCloseButton(), setupOutsideClick();
 });
-class l {
+class g {
   constructor(n) {
     this.apiEndpoint = n || "https://api.wineater.com/dish/recommendations";
   }
   async getWineRecommendations(n) {
     try {
-      const e = await fetch(this.apiEndpoint, {
+      const t = await fetch(this.apiEndpoint, {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
         },
         body: JSON.stringify({ text: n })
-      }), 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}`);
+      }), 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 h {
   constructor() {
-    this.api = new l();
+    this.api = new g();
   }
   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", (e) => {
+      e.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();
+    const n = document.getElementById("user-input"), t = n.value.trim();
+    if (t) {
+      this.displayMessage(t, "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");
+        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");
       }
     }
   }
@@ -58,26 +293,26 @@ class h {
   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(n, t) {
+    const e = document.getElementById("message-container"), o = document.createElement("div");
+    o.textContent = n, o.className = "message " + t, e.appendChild(o), e.scrollTop = e.scrollHeight;
   }
   displayResults(n) {
-    const e = document.getElementById("message-container");
-    n.forEach((t) => {
+    const t = document.getElementById("message-container");
+    n.forEach((e) => {
       const o = document.createElement("div");
       o.className = "wine-item";
-      const s = document.createElement("img");
-      s.src = t.Image, o.appendChild(s);
-      const d = document.createElement("div");
-      d.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(d), e.appendChild(o);
-    }), e.scrollTop = e.scrollHeight;
+      const a = document.createElement("img");
+      a.src = e.Image, o.appendChild(a);
+      const s = document.createElement("div");
+      s.innerHTML = `<strong>${e.Title}</strong><br>Price: ${e.Price}<br>Region: ${e.Region}<br>Type: ${e.Type}<br><a href="${e.Url}" target="_blank">More Info</a>`, o.appendChild(s), t.appendChild(o);
+    }), t.scrollTop = t.scrollHeight;
   }
 }
 document.addEventListener("DOMContentLoaded", () => {
-  window.toggleChatWindow = a, window.closeChatWindow = c, window.openChatWindow = r;
+  window.toggleChatWindow = d, window.closeChatWindow = l, window.openChatWindow = p;
 });
-function m() {
+function u() {
   document.body.insertAdjacentHTML("beforeend", `
       <div id="chatbot-container">
           <div id="chat-icon" onclick="toggleChatWindow()">
@@ -101,20 +336,20 @@ function m() {
       </div>
   `);
 }
-function p() {
-  document.getElementById("close-btn").addEventListener("click", a);
+function m() {
+  document.getElementById("close-btn").addEventListener("click", d);
 }
-function u() {
+function b() {
   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");
+    const n = document.getElementById("chat-window"), t = document.getElementById("chat-icon");
+    !n.contains(i.target) && !t.contains(i.target) && n.classList.remove("visible");
   });
 }
 typeof window < "u" && window.addEventListener("DOMContentLoaded", () => {
-  m(), p(), u(), new h().initialize();
+  u(), m(), b(), new h().initialize();
 });
 export {
-  c as closeChatWindow,
-  r as openChatWindow,
-  a as toggleChatWindow
+  l as closeChatWindow,
+  p as openChatWindow,
+  d as toggleChatWindow
 };

package/dist/wineater-chatbot.umd.js

@@ -1,4 +1,236 @@
-(function(o,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(o=typeof globalThis<"u"?globalThis:o||self,d(o.WineaterChatbot={}))})(this,function(o){"use strict";function d(){document.getElementById("chat-window").classList.toggle("visible")}function a(){document.getElementById("chat-window").classList.remove("visible")}function c(){document.getElementById("chat-window").classList.add("visible")}document.addEventListener("DOMContentLoaded",()=>{setupCloseButton(),setupOutsideClick()});class h{constructor(n){this.apiEndpoint=n||"https://api.wineater.com/dish/recommendations"}async getWineRecommendations(n){try{const e=await fetch(this.apiEndpoint,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({text:n})}),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 u{constructor(){this.api=new h}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 r=document.createElement("img");r.src=t.Image,s.appendChild(r);const l=document.createElement("div");l.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(l),e.appendChild(s)}),e.scrollTop=e.scrollHeight}}document.addEventListener("DOMContentLoaded",()=>{window.toggleChatWindow=d,window.closeChatWindow=a,window.openChatWindow=c});function p(){document.body.insertAdjacentHTML("beforeend",`
+(function(o,s){typeof exports=="object"&&typeof module<"u"?s(exports):typeof define=="function"&&define.amd?define(["exports"],s):(o=typeof globalThis<"u"?globalThis:o||self,s(o.WineaterChatbot={}))})(this,function(o){"use strict";const s=`
+@font-face {
+    font-family: 'Poppins';
+    src: url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
+}
+
+/* Overall chatbot styles */
+#chatbot-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    font-family: 'Poppins', sans-serif; /* Use Poppins as the main font */
+    z-index: 1000; /* Ensure chat is above other content */
+}
+
+/* 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;
+    cursor: pointer;
+}
+
+#chat-icon img {
+    width: 80%; /* Adjust icon size as needed */
+    height: auto;
+}
+
+/* Chat window styles */
+#chat-window {
+    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 */
+}
+
+/* Header of the chat window */
+#chat-header {
+    background-color: #7E27ED;
+    color: white;
+    padding: 16px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative; /* Needed for absolute positioning of the close button */
+}
+
+
+/* Style for the close button */
+#close-btn {
+    font-size: 24px; /* Size of the close button */
+    cursor: pointer;
+    padding: 0 10px;
+    line-height: 24px;
+}
+
+/* Container for messages */
+#message-container {
+    max-height: 300px;
+    overflow-y: auto;
+    padding: 15px;
+    background: #f7f7f7; /* Light grey background for the message area */
+}
+
+/* Input area */
+#input-container {
+    border-top: 2px solid #ececec; /* Light border for input area */
+    background-color: white; /* White background for input area */
+    padding: 12px;
+    display: flex;
+    align-items: center; /* Align button and input vertically */
+    gap: 10px; /* Adds space between input and button */
+}
+
+#input-container input {
+    flex-grow: 1;
+    border: 2px solid #B928EB; /* Input border color based on style guide */
+    padding: 10px;
+    border-radius: 4px;
+    font-family: 'Poppins', sans-serif; /* Use Poppins font */
+}
+
+#input-container button {
+    padding: 10px 20px; /* Larger padding for a larger button */
+    background-color: #5F82FF; /* Button background color from style guide */
+    border: none;
+    color: white;
+    border-radius: 4px;
+    font-family: 'Poppins', sans-serif; /* Use Poppins font */
+    font-size: 1rem; /* Adjust font size as needed */
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add subtle shadow for depth */
+    transition: background-color 0.3s ease; /* Smooth transition for background color */
+}
+
+#input-container button:hover {
+    background-color: #2FC0BF; /* Hover color based on style guide */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Darker shadow for hover state */
+}
+
+/* Message bubble styling */
+.message {
+    margin-bottom: 8px;
+    padding: 12px;
+    background-color: #e0e0e0; /* Light grey for message bubbles */
+    border-radius: 16px;
+    font-size: 14px;
+    line-height: 1.4;
+}
+
+.message.user {
+    background-color: #B928EB; /* User message bubble color */
+    color: white;
+    align-self: flex-end;
+}
+
+.message.api {
+    background-color: #e0e0e0; /* API message bubble color */
+    color: black;
+    align-self: flex-start;
+}
+
+/* Wine item styling */
+.wine-item {
+    display: flex;
+    align-items: center;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 10px;
+    margin-top: 10px;
+    background: white; /* White background for wine items */
+}
+
+.wine-item img {
+    width: 80px; /* Smaller wine image size */
+    height: auto;
+    border-radius: 4px; /* Rounded corners for images */
+    margin-right: 12px;
+}
+
+.wine-item div {
+    font-size: 0.9rem; /* Smaller font size for wine info */
+}
+
+/* Ensure the chat window is visible when the 'visible' class is added */
+#chat-window.visible {
+    display: block;
+}
+
+/* Loader Styles */
+.loader {
+    display: none; /* Loader is hidden by default */
+    border: 4px solid #f3f3f3; /* Light grey */
+    border-top: 4px solid #3498db; /* Blue, could be your primary color */
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 2s linear infinite;
+    margin: 20px auto; /* Centered horizontally */
+}
+
+.loader.visible {
+    display: block;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Typing indicator styles */
+.typing-indicator {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 0; /* Adjust as needed */
+    visibility: hidden; /* Start off invisible */
+}
+
+.typing-indicator span {
+    display: block;
+    width: 8px;
+    height: 8px;
+    margin: 0 4px;
+    background-color: #3498db; /* Or use a color from your style guide */
+    border-radius: 50%;
+    opacity: 0.4;
+    animation: typing 1.5s infinite;
+}
+
+/* Animation keyframes */
+@keyframes typing {
+    0% { transform: translateY(0); }
+    20% { transform: translateY(-10px); }
+    40% { transform: translateY(0); }
+    60% { transform: translateY(-10px); }
+    80% { transform: translateY(0); }
+    100% { transform: translateY(0); }
+}
+
+/* To stagger the animation for each dot */
+.typing-indicator span:nth-child(1) {
+    animation-delay: 0s;
+}
+.typing-indicator span:nth-child(2) {
+    animation-delay: 0.2s;
+}
+.typing-indicator span:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+/* Show the typing indicator */
+.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=s,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()});class h{constructor(n){this.apiEndpoint=n||"https://api.wineater.com/dish/recommendations"}async getWineRecommendations(n){try{const t=await fetch(this.apiEndpoint,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({text:n})}),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 u{constructor(){this.api=new h}initialize(){document.getElementById("send-button").addEventListener("click",()=>this.handleUserInput()),document.getElementById("user-input").addEventListener("keypress",e=>{e.key==="Enter"&&this.handleUserInput()})}async handleUserInput(){const n=document.getElementById("user-input"),t=n.value.trim();if(t){this.displayMessage(t,"user"),n.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(n,t){const e=document.getElementById("message-container"),a=document.createElement("div");a.textContent=n,a.className="message "+t,e.appendChild(a),e.scrollTop=e.scrollHeight}displayResults(n){const t=document.getElementById("message-container");n.forEach(e=>{const a=document.createElement("div");a.className="wine-item";const p=document.createElement("img");p.src=e.Image,a.appendChild(p);const g=document.createElement("div");g.innerHTML=`<strong>${e.Title}</strong><br>Price: ${e.Price}<br>Region: ${e.Region}<br>Type: ${e.Type}<br><a href="${e.Url}" target="_blank">More Info</a>`,a.appendChild(g),t.appendChild(a)}),t.scrollTop=t.scrollHeight}}document.addEventListener("DOMContentLoaded",()=>{window.toggleChatWindow=d,window.closeChatWindow=c,window.openChatWindow=l});function m(){document.body.insertAdjacentHTML("beforeend",`
       <div id="chatbot-container">
           <div id="chat-icon" onclick="toggleChatWindow()">
               <img src="/src/assets/images/chat-icon.svg" alt="Chat Icon">
@@ -19,4 +251,4 @@
               </div>
           </div>
       </div>
-  `)}function m(){document.getElementById("close-btn").addEventListener("click",d)}function g(){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",()=>{p(),m(),g(),new u().initialize()}),o.closeChatWindow=a,o.openChatWindow=c,o.toggleChatWindow=d,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
+  `)}function b(){document.getElementById("close-btn").addEventListener("click",d)}function f(){window.addEventListener("click",function(i){const n=document.getElementById("chat-window"),t=document.getElementById("chat-icon");!n.contains(i.target)&&!t.contains(i.target)&&n.classList.remove("visible")})}typeof window<"u"&&window.addEventListener("DOMContentLoaded",()=>{m(),b(),f(),new u().initialize()}),o.closeChatWindow=c,o.openChatWindow=l,o.toggleChatWindow=d,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});

package/index.html

@@ -4,8 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Chatbot</title>
-    <link rel="stylesheet" href="/src/css/styles.css">
+    <!-- <script type="module" src="https://unpkg.com/wineater-bot@1.0.0/dist/wineater-chatbot.umd.js"></script> -->
     <script type="module" src="./src/index.js"></script>
+
 </head>
 <body>
 </body>

package/package.json

@@ -1,17 +1,23 @@
 {
   "name": "wineater-bot",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
   "main": "dist/index.js",
   "module": "src/index.js",
   "scripts": {
     "dev": "vite",
-    "build": "vite build"
+    "build": "vite build",
+    "release:patch": "npm version patch && npm publish",
+    "release:minor": "npm version minor && npm publish",
+    "release:major": "npm version major && npm publish"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
     "vite": "^5.2.9"
+  },
+  "devDependencies": {
+    "rollup-plugin-postcss": "^4.0.2"
   }
 }

package/src/index.js

@@ -1,7 +1,7 @@
 // src/index.js
 
 // Import your CSS here
-import './css/styles.css';
+import './js/styles.js';
 
 // Import your JavaScript modules here
 import { toggleChatWindow, closeChatWindow, openChatWindow } from './js/ui.js';

package/src/js/styles.js

@@ -0,0 +1,238 @@
+// src/styles.js
+const css = `
+@font-face {
+    font-family: 'Poppins';
+    src: url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
+}
+
+/* Overall chatbot styles */
+#chatbot-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    font-family: 'Poppins', sans-serif; /* Use Poppins as the main font */
+    z-index: 1000; /* Ensure chat is above other content */
+}
+
+/* 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;
+    cursor: pointer;
+}
+
+#chat-icon img {
+    width: 80%; /* Adjust icon size as needed */
+    height: auto;
+}
+
+/* Chat window styles */
+#chat-window {
+    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 */
+}
+
+/* Header of the chat window */
+#chat-header {
+    background-color: #7E27ED;
+    color: white;
+    padding: 16px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative; /* Needed for absolute positioning of the close button */
+}
+
+
+/* Style for the close button */
+#close-btn {
+    font-size: 24px; /* Size of the close button */
+    cursor: pointer;
+    padding: 0 10px;
+    line-height: 24px;
+}
+
+/* Container for messages */
+#message-container {
+    max-height: 300px;
+    overflow-y: auto;
+    padding: 15px;
+    background: #f7f7f7; /* Light grey background for the message area */
+}
+
+/* Input area */
+#input-container {
+    border-top: 2px solid #ececec; /* Light border for input area */
+    background-color: white; /* White background for input area */
+    padding: 12px;
+    display: flex;
+    align-items: center; /* Align button and input vertically */
+    gap: 10px; /* Adds space between input and button */
+}
+
+#input-container input {
+    flex-grow: 1;
+    border: 2px solid #B928EB; /* Input border color based on style guide */
+    padding: 10px;
+    border-radius: 4px;
+    font-family: 'Poppins', sans-serif; /* Use Poppins font */
+}
+
+#input-container button {
+    padding: 10px 20px; /* Larger padding for a larger button */
+    background-color: #5F82FF; /* Button background color from style guide */
+    border: none;
+    color: white;
+    border-radius: 4px;
+    font-family: 'Poppins', sans-serif; /* Use Poppins font */
+    font-size: 1rem; /* Adjust font size as needed */
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add subtle shadow for depth */
+    transition: background-color 0.3s ease; /* Smooth transition for background color */
+}
+
+#input-container button:hover {
+    background-color: #2FC0BF; /* Hover color based on style guide */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Darker shadow for hover state */
+}
+
+/* Message bubble styling */
+.message {
+    margin-bottom: 8px;
+    padding: 12px;
+    background-color: #e0e0e0; /* Light grey for message bubbles */
+    border-radius: 16px;
+    font-size: 14px;
+    line-height: 1.4;
+}
+
+.message.user {
+    background-color: #B928EB; /* User message bubble color */
+    color: white;
+    align-self: flex-end;
+}
+
+.message.api {
+    background-color: #e0e0e0; /* API message bubble color */
+    color: black;
+    align-self: flex-start;
+}
+
+/* Wine item styling */
+.wine-item {
+    display: flex;
+    align-items: center;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 10px;
+    margin-top: 10px;
+    background: white; /* White background for wine items */
+}
+
+.wine-item img {
+    width: 80px; /* Smaller wine image size */
+    height: auto;
+    border-radius: 4px; /* Rounded corners for images */
+    margin-right: 12px;
+}
+
+.wine-item div {
+    font-size: 0.9rem; /* Smaller font size for wine info */
+}
+
+/* Ensure the chat window is visible when the 'visible' class is added */
+#chat-window.visible {
+    display: block;
+}
+
+/* Loader Styles */
+.loader {
+    display: none; /* Loader is hidden by default */
+    border: 4px solid #f3f3f3; /* Light grey */
+    border-top: 4px solid #3498db; /* Blue, could be your primary color */
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 2s linear infinite;
+    margin: 20px auto; /* Centered horizontally */
+}
+
+.loader.visible {
+    display: block;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Typing indicator styles */
+.typing-indicator {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 0; /* Adjust as needed */
+    visibility: hidden; /* Start off invisible */
+}
+
+.typing-indicator span {
+    display: block;
+    width: 8px;
+    height: 8px;
+    margin: 0 4px;
+    background-color: #3498db; /* Or use a color from your style guide */
+    border-radius: 50%;
+    opacity: 0.4;
+    animation: typing 1.5s infinite;
+}
+
+/* Animation keyframes */
+@keyframes typing {
+    0% { transform: translateY(0); }
+    20% { transform: translateY(-10px); }
+    40% { transform: translateY(0); }
+    60% { transform: translateY(-10px); }
+    80% { transform: translateY(0); }
+    100% { transform: translateY(0); }
+}
+
+/* To stagger the animation for each dot */
+.typing-indicator span:nth-child(1) {
+    animation-delay: 0s;
+}
+.typing-indicator span:nth-child(2) {
+    animation-delay: 0.2s;
+}
+.typing-indicator span:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+/* Show the typing indicator */
+.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');
+style.textContent = css;
+document.head.appendChild(style);

package/dist/style.css

@@ -1 +0,0 @@
-@font-face{font-family:Poppins;src:url(https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap)}#chatbot-container{position:fixed;bottom:20px;right:20px;font-family:Poppins,sans-serif;z-index:1000}#chat-icon{width:60px;height:60px;background-color:#7e27ed;border-radius:50%;box-shadow:0 4px 8px #0003;display:flex;justify-content:center;align-items:center;cursor:pointer}#chat-icon img{width:80%;height:auto}#chat-window{width:350px;background-color:#fff;border-radius:8px;box-shadow:0 5px 15px #0000001a;position:absolute;bottom:80px;right:0;display:none}#chat-header{background-color:#7e27ed;color:#fff;padding:16px;border-top-left-radius:8px;border-top-right-radius:8px;display:flex;justify-content:space-between;align-items:center;position:relative}#close-btn{font-size:24px;cursor:pointer;padding:0 10px;line-height:24px}#message-container{max-height:300px;overflow-y:auto;padding:15px;background:#f7f7f7}#input-container{border-top:2px solid #ececec;background-color:#fff;padding:12px;display:flex;align-items:center;gap:10px}#input-container input{flex-grow:1;border:2px solid #B928EB;padding:10px;border-radius:4px;font-family:Poppins,sans-serif}#input-container button{padding:10px 20px;background-color:#5f82ff;border:none;color:#fff;border-radius:4px;font-family:Poppins,sans-serif;font-size:1rem;cursor:pointer;box-shadow:0 2px 5px #0003;transition:background-color .3s ease}#input-container button:hover{background-color:#2fc0bf;box-shadow:0 4px 8px #0000004d}.message{margin-bottom:8px;padding:12px;background-color:#e0e0e0;border-radius:16px;font-size:14px;line-height:1.4}.message.user{background-color:#b928eb;color:#fff;align-self:flex-end}.message.api{background-color:#e0e0e0;color:#000;align-self:flex-start}.wine-item{display:flex;align-items:center;border:1px solid #ddd;border-radius:8px;padding:10px;margin-top:10px;background:#fff}.wine-item img{width:80px;height:auto;border-radius:4px;margin-right:12px}.wine-item div{font-size:.9rem}#chat-window.visible{display:block}.loader{display:none;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;width:40px;height:40px;animation:spin 2s linear infinite;margin:20px auto}.loader.visible{display:block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.typing-indicator{display:flex;justify-content:center;align-items:center;height:0;visibility:hidden}.typing-indicator span{display:block;width:8px;height:8px;margin:0 4px;background-color:#3498db;border-radius:50%;opacity:.4;animation:typing 1.5s infinite}@keyframes typing{0%{transform:translateY(0)}20%{transform:translateY(-10px)}40%{transform:translateY(0)}60%{transform:translateY(-10px)}80%{transform:translateY(0)}to{transform:translateY(0)}}.typing-indicator span:nth-child(1){animation-delay:0s}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}.typing-indicator.visible{visibility:visible;height:50px}#message-container{overflow-y:auto;height:300px;padding:10px}