wineater-bot 1.0.0

package/dist/style.css

@@ -0,0 +1 @@
+@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}

package/dist/wineater-chatbot.mjs

@@ -0,0 +1,120 @@
+function a() {
+  document.getElementById("chat-window").classList.toggle("visible");
+}
+function c() {
+  document.getElementById("chat-window").classList.remove("visible");
+}
+function r() {
+  document.getElementById("chat-window").classList.add("visible");
+}
+document.addEventListener("DOMContentLoaded", () => {
+  setupCloseButton(), setupOutsideClick();
+});
+class l {
+  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 h {
+  constructor() {
+    this.api = new l();
+  }
+  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"), o = document.createElement("div");
+    o.textContent = n, o.className = "message " + e, t.appendChild(o), t.scrollTop = t.scrollHeight;
+  }
+  displayResults(n) {
+    const e = document.getElementById("message-container");
+    n.forEach((t) => {
+      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;
+  }
+}
+document.addEventListener("DOMContentLoaded", () => {
+  window.toggleChatWindow = a, window.closeChatWindow = c, window.openChatWindow = r;
+});
+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">
+          </div>
+
+          <div id="chat-window" class="hidden">
+              <div id="chat-header">
+                  <span>Wineater</span>
+                  <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>
+              </div>
+          </div>
+      </div>
+  `);
+}
+function p() {
+  document.getElementById("close-btn").addEventListener("click", a);
+}
+function u() {
+  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", () => {
+  m(), p(), u(), new h().initialize();
+});
+export {
+  c as closeChatWindow,
+  r as openChatWindow,
+  a as toggleChatWindow
+};

package/dist/wineater-chatbot.umd.js

@@ -0,0 +1,22 @@
+(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",`
+      <div id="chatbot-container">
+          <div id="chat-icon" onclick="toggleChatWindow()">
+              <img src="/src/assets/images/chat-icon.svg" alt="Chat Icon">
+          </div>
+
+          <div id="chat-window" class="hidden">
+              <div id="chat-header">
+                  <span>Wineater</span>
+                  <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>
+              </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"})});

package/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <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="./src/index.js"></script>
+</head>
+<body>
+</body>
+</html>

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "wineater-bot",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.js",
+  "module": "src/index.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "vite": "^5.2.9"
+  }
+}

package/src/assets/images/chat-icon.svg

@@ -0,0 +1,4 @@
+<svg width="601" height="601" viewBox="0 0 601 601" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="601" height="601" rx="300.5" fill="#7E27ED"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M289.032 111.531C289.032 106.755 293.914 102.883 299.935 102.883C305.956 102.883 310.837 106.755 310.837 111.531V154.771C310.837 159.547 305.956 163.419 299.935 163.419C293.914 163.419 289.032 159.547 289.032 154.771V111.531ZM180.584 266.419C202.451 266.419 220.177 248.693 220.177 226.827C220.177 204.961 202.451 187.235 180.584 187.235C158.718 187.235 140.992 204.961 140.992 226.827C140.992 248.693 158.718 266.419 180.584 266.419ZM340.06 217.379C344.44 238.146 330.097 258.756 308.024 263.41C294.694 266.221 279.849 271.496 274.411 284.117L273.306 286.682C267.709 299.673 273.583 314.737 279.089 327.826C280.109 330.249 280.914 332.805 281.477 335.475C286.194 357.84 272.124 379.745 250.051 384.399C227.978 389.054 206.261 374.697 201.544 352.332C196.828 329.967 210.898 308.062 232.971 303.408C245.5 300.765 259.4 295.834 264.511 283.971L266.253 279.929C271.376 268.038 266.719 254.397 262.431 241.837L262.431 241.836C262.025 240.647 261.622 239.468 261.231 238.3C260.79 236.982 260.42 235.626 260.127 234.235C255.747 213.468 270.091 192.859 292.164 188.204C314.237 183.549 335.681 196.611 340.06 217.379ZM399.816 334.969C404.196 355.736 389.853 376.345 367.78 381C354.45 383.811 339.605 389.086 334.167 401.706L333.062 404.272C327.465 417.263 333.339 432.326 338.845 445.416C339.865 447.839 340.67 450.395 341.233 453.065C345.95 475.43 331.88 497.335 309.807 501.989C287.734 506.644 266.017 492.287 261.3 469.922C256.584 447.557 270.654 425.652 292.727 420.998C305.256 418.355 319.156 413.424 324.267 401.561L326.009 397.519C331.132 385.628 326.475 371.987 322.187 359.427C321.781 358.238 321.378 357.058 320.987 355.89C320.546 354.572 320.176 353.216 319.883 351.825C315.503 331.058 329.847 310.448 351.92 305.794C373.993 301.139 395.437 314.201 399.816 334.969ZM459.164 226.827C459.164 248.693 441.438 266.419 419.572 266.419C397.706 266.419 379.98 248.693 379.98 226.827C379.98 204.961 397.706 187.235 419.572 187.235C441.438 187.235 459.164 204.961 459.164 226.827Z" fill="white"/>
+</svg>

package/src/css/styles.css

@@ -0,0 +1,232 @@
+@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;
+}

package/src/index.js

@@ -0,0 +1,76 @@
+// src/index.js
+
+// Import your CSS here
+import './css/styles.css';
+
+// Import your JavaScript modules here
+import { toggleChatWindow, closeChatWindow, openChatWindow } from './js/ui.js';
+import { Chatbot } from  './js/chatbot.js';
+import './js/api.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+    // Attach any necessary initialization code here
+    // For example, expose functions to global scope if absolutely necessary
+    window.toggleChatWindow = toggleChatWindow;
+    window.closeChatWindow = closeChatWindow;
+    window.openChatWindow = openChatWindow;
+});
+
+export {
+    toggleChatWindow,
+    closeChatWindow,
+    openChatWindow
+};
+
+function createChatbotUI() {
+  const chatbotHTML = `
+      <div id="chatbot-container">
+          <div id="chat-icon" onclick="toggleChatWindow()">
+              <img src="/src/assets/images/chat-icon.svg" alt="Chat Icon">
+          </div>
+
+          <div id="chat-window" class="hidden">
+              <div id="chat-header">
+                  <span>Wineater</span>
+                  <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>
+              </div>
+          </div>
+      </div>
+  `;
+
+  document.body.insertAdjacentHTML('beforeend', chatbotHTML);
+}
+
+function setupCloseButton() {
+  const closeButton = document.getElementById('close-btn');
+  closeButton.addEventListener('click', toggleChatWindow);
+}
+
+function setupOutsideClick() {
+  window.addEventListener('click', function(event) {
+      const chatWindow = document.getElementById('chat-window');
+      const chatIcon = document.getElementById('chat-icon');
+      if (!chatWindow.contains(event.target) && !chatIcon.contains(event.target)) {
+          chatWindow.classList.remove('visible');
+      }
+  });
+}
+
+// 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();
+    const myChatbot = new Chatbot();
+    myChatbot.initialize();
+  });
+}

package/src/js/api.js

@@ -0,0 +1,33 @@
+// api.js
+
+export class Api {
+    constructor(apiEndpoint) {
+        // Allow users of the library to specify their own endpoint if needed
+        this.apiEndpoint = apiEndpoint || 'https://api.wineater.com/dish/recommendations';
+    }
+
+    async getWineRecommendations(text) {
+        try {
+            const response = await fetch(this.apiEndpoint, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ text: text })
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                // Providing more detailed error information
+                throw new Error(`API call failed with status ${response.status}: ${data.message || 'No additional error information'}`);
+            }
+
+            return data;
+        } catch (error) {
+            // Log and rethrow to allow consumer of the API to handle or display the error appropriately
+            console.error('Fetching wine recommendations failed:', error.message);
+            throw new Error(`Error in getWineRecommendations: ${error.message}`);
+        }
+    }
+}

package/src/js/chatbot.js

@@ -0,0 +1,90 @@
+// chatbot.js
+import { Api } from './api.js';
+
+export class Chatbot {
+    constructor() {
+        this.api = new Api(); // Instantiate the Api class
+    }
+
+    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) => {
+            if (event.key === 'Enter') {
+                this.handleUserInput();
+            }
+        });
+    }
+
+    async handleUserInput() {
+        const inputField = document.getElementById('user-input');
+        const userInput = inputField.value.trim();
+        if (!userInput) return;
+
+        this.displayMessage(userInput, 'user');
+        inputField.value = '';
+
+        // Show the loader
+        this.showTypingIndicator();
+
+        try {
+            const results = await this.api.getWineRecommendations(userInput);
+
+            // Hide the loader
+            this.hideTypingIndicator();
+
+            if (results && results.length) {
+                this.displayResults(results);
+            } else {
+                this.displayMessage('No results found.', 'api');
+            }
+        } catch (error) {
+            // Hide the loader
+            this.hideTypingIndicator();
+            
+            console.error('Error fetching wine recommendations:', error);
+            this.displayMessage('Sorry, something went wrong.', 'api');
+        }
+    }
+
+    showTypingIndicator() {
+        const typingIndicator = document.getElementById('typing-indicator');
+        typingIndicator.classList.add('visible');
+    }
+
+    hideTypingIndicator() {
+        const typingIndicator = document.getElementById('typing-indicator');
+        typingIndicator.classList.remove('visible');
+    }
+
+    displayMessage(message, type) {
+        const messageContainer = document.getElementById('message-container');
+        const messageDiv = document.createElement('div');
+        messageDiv.textContent = message;
+        messageDiv.className = 'message ' + type;
+        messageContainer.appendChild(messageDiv);
+        messageContainer.scrollTop = messageContainer.scrollHeight;
+    }
+
+    displayResults(wines) {
+        const messageContainer = document.getElementById('message-container');
+        wines.forEach(wine => {
+            const wineDiv = document.createElement('div');
+            wineDiv.className = 'wine-item';
+
+            const image = document.createElement('img');
+            image.src = wine.Image;
+            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>`;
+            wineDiv.appendChild(contentDiv);
+
+            messageContainer.appendChild(wineDiv);
+        });
+        messageContainer.scrollTop = messageContainer.scrollHeight;
+    }
+}

package/src/js/ui.js

@@ -0,0 +1,20 @@
+export function toggleChatWindow() {
+  const chatWindow = document.getElementById('chat-window');
+  chatWindow.classList.toggle('visible');
+}
+
+export function closeChatWindow() {
+  const chatWindow = document.getElementById('chat-window');
+  chatWindow.classList.remove('visible');
+}
+
+export function openChatWindow() {
+  const chatWindow = document.getElementById('chat-window');
+  chatWindow.classList.add('visible');
+}
+
+// Setup event listeners upon loading the module
+document.addEventListener('DOMContentLoaded', () => {
+  setupCloseButton();
+  setupOutsideClick();
+});

package/vite.config.js

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+    server: {
+        port: 3000 // Customize the port if necessary
+    },
+    build: {
+        lib: {
+          entry: 'src/index.js',
+          name: 'WineaterChatbot',
+          fileName: 'wineater-chatbot'
+        },
+        // Make sure to externalize dependencies that shouldn't be bundled into your library
+        rollupOptions: {
+          external: [],
+          output: {
+            // Provide globals here if needed
+          }
+        }
+      }
+});