wineater-bot 2.0.2 → 2.1.1

package/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Chatbot</title>
     <!-- <script type="module" src="https://unpkg.com/wineater-bot@1.0.0/dist/wineater-chatbot.umd.js"></script> -->
-    <script>window.wineaterData = {CLIENT_TOKEN: 'K0ZzlrfT0z00J6dSAt8ZEIKWiUfypG1Tyb1ZGtgwuJaF8WZuRKlHfvEMCF9DyytZ'};</script><script type="module" src="./src/index.js"></script>
+    <script>window.wineaterData = {CLIENT_TOKEN: 'K0ZzlrfT0z00J6dSAt8ZEIKWiUfypG1Tyb1ZGtgwuJaF8WZuRKlHfvEMCF9DyytZ', position: 'right-center'};</script><script type="module" src="./src/index.js"></script>
 </head>
 <body style="margin: 0;">
     <img src="./src/assets/biobio.png" style="width: 100vw; height: 100vh; margin: 0;">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wineater-bot",
-  "version": "2.0.2",
+  "version": "2.1.1",
   "description": "",
   "main": "dist/index.js",
   "module": "src/index.js",
@@ -16,6 +16,7 @@
   "license": "ISC",
   "dependencies": {
     "@openreplay/tracker": "^14.0.4",
+    "flagsmith": "^7.0.2",
     "vite": "^5.2.9"
   },
   "devDependencies": {

package/src/index.js

@@ -3,13 +3,23 @@
 // Import your CSS here
 import './js/styles.js';
 import { setCookie, setUniqueUserCookie, getCookie } from './js/analytics.js';
+import flagsmith from 'flagsmith'; //Add this line if you're using flagsmith via npm
+
 
 import Tracker from '@openreplay/tracker';
 
 const tracker = new Tracker({
-  projectKey: "PA8j9fAi49i6g2QnvpNs",  
+  projectKey: "PA8j9fAi49i6g2QnvpNs",
+  '__DISABLE_SECURE_MODE': true
 });
 
+flagsmith.init({
+  environmentID: '5RfiDoiqb4dHrNdQvzbkfM',
+  // api:"http://localhost:8000/api/v1/" set this if you are self hosting, and point it to your API
+  cacheFlags: true, // stores flags in localStorage cache
+  enableAnalytics: true, // See https://docs.flagsmith.com/flag-analytics/ for more info.
+ });
+
 // Import your JavaScript modules here
 import { toggleChatWindow, closeChatWindow, openChatWindow } from './js/ui.js';
 import { Chatbot } from  './js/chatbot.js';
@@ -17,7 +27,7 @@ import './js/api.js';
 import translator from './js/i18n.js';
 import {shouldOpenChatAutomatically} from './js/auto-open.js'
 
-const DEMO_TOKEN='OuhXJRleF6sROjsQZPWx1yqjrL6APeJxmHswqyOBWbgIqtXcht3MDadvI9DtOOoL';
+const DEMO_TOKEN='tbMTFzLbWcXFgXK8SzyFHA6kIjelFcz5VQABVPbXdXh5XZJCDQH9BcVlrv3DF3kA';
 
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -36,7 +46,8 @@ export {
 
 function createChatbotUI() {
   tracker.start();
-  const buttonText = window?.wineaterData?.BUTTON_TEXT || translator.translate('chatButton');
+  const btnTextOption = flagsmith.getValue('chat-btn-txt');
+  const buttonText = window?.wineaterData?.BUTTON_TEXT || translator.translate(`chatButton${btnTextOption}`);
   const chatbotHTML = `
       <div id="chatbot-container">
           <div id="chat-icon" onclick="toggleChatWindow()">
@@ -45,25 +56,27 @@ function createChatbotUI() {
           </div>
 
           <div id="chat-window" class="hidden">
-              <div id="chat-header">
-              <div id="powered-by">
-                <a href="https://wineater.com" target="_blank" style="text-decoration: none; color: inherit;">
-                  <span>Powered by</span>
-                  <img src="https://landing-static.s3.eu-central-1.amazonaws.com/images/logo.svg" alt="Wineater Logo" id="chatbot-logo">
-                </a>
+            <div id="chat-header">
+              <div id="chat-title">
+                <h1>${translator.translate('chatTitle')}</h1>
               </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="${translator.translate('inputPlaceholder')}">
-                  <button id="send-button">${translator.translate('sendButton')}</button>
-              </div>
-          </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="${translator.translate('inputPlaceholder')}">
+              <button id="send-button">${translator.translate('sendButton')}</button>
+            </div>
+            <div id="powered-by">
+              <a href="https://wineater.com" target="_blank">
+                <span>${translator.translate('poweredBy')}</span>
+                <img src="https://landing-static.s3.eu-central-1.amazonaws.com/images/logo.svg" alt="Wineater Logo" id="chatbot-logo">
+              </a>
+                    </div>
+                  </div>
       </div>
   `;
 
@@ -121,18 +134,18 @@ document.addEventListener('DOMContentLoaded', () => {
 
 // If you want to initialize your chatbot automatically when the script is loaded
 if (typeof window !== 'undefined') {
-  let position = window?.wineaterData?.POSITION || 'bottom-right';
+  let position = window?.wineaterData?.POSITION || 'right-center';
   window.addEventListener('DOMContentLoaded', async () => {
     const stores = ['climats', 'telckel', 'biobio', 'weinpoint', 'vinigrandi'];
     const store = stores.find(value => window.location.href.includes(value)) || null;
     let capitalizeStore;
     if (store) {
       capitalizeStore = store.charAt(0).toUpperCase() + store.slice(1);
-      if (capitalizeStore === 'Biobio') {
+      if (capitalizeStore === 'Climats') {
         position = 'right-center';
       }
     }
-    await translator.fetchConfig(capitalizeStore || 'Demo'); 
+    await translator.fetchConfig(capitalizeStore || 'Climats'); 
     createChatbotUI(); // Create the UI
     setupCloseButton();
     setupOutsideClick();

package/src/js/api.js

@@ -1,12 +1,12 @@
 // api.js
 
 const stores = ['climats', 'telckel', 'biobio', 'weinpoint', 'vinigrandi'];
-const DEMO_TOKEN='OuhXJRleF6sROjsQZPWx1yqjrL6APeJxmHswqyOBWbgIqtXcht3MDadvI9DtOOoL';
+const DEMO_TOKEN='bMTFzLbWcXFgXK8SzyFHA6kIjelFcz5VQABVPbXdXh5XZJCDQH9BcVlrv3DF3kA';
 
 export class Api {
     constructor(apiEndpoint) {
         // Allow users of the library to specify their own endpoint if needed
-        // this.baseURL = 'https://api.wineater.com/';
+        // this.baseURL = 'http://localhost:3000/';
         this.baseURL = 'https://wineater-backend.vercel.app/';
         this.store = stores.find(value => window.location.href.includes(value));
         this.token = window?.wineaterData?.CLIENT_TOKEN || DEMO_TOKEN;
@@ -23,6 +23,7 @@ export class Api {
                 },
                 body: JSON.stringify({ store: storeName })
             });
+            console.log(response);
             if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
             return await response.json();
         } catch (error) {

package/src/js/chatbot.js

@@ -89,16 +89,24 @@ export class Chatbot {
     }
 
     displayResults(wines) {
+        console.log(wines);
         const messageContainer = document.getElementById('message-container');
         trackRecommendationsGet(wines.map(value => value.Title));
         wines.forEach(wine => {
+
+            const recDiv = document.createElement('div');
+            recDiv.className = 'wine-recommendation';
+
             const wineDiv = document.createElement('div');
             wineDiv.className = 'wine-item';
+            recDiv.appendChild(wineDiv);
 
             const image = document.createElement('img');
             image.src = wine.Image;
             wineDiv.appendChild(image);
 
+            console.log(wineDiv, 'wine div');
+
             const contentDiv = document.createElement('div');
             contentDiv.innerHTML = `
             <strong>${wine.Title}</strong><br>
@@ -116,11 +124,16 @@ export class Chatbot {
                 window.open(wine.Url, '_blank'); // Open the link in a new tab
             });
             wineDiv.appendChild(contentDiv);
+
+            const reasonDiv = document.createElement('div');
+            reasonDiv.className = 'wine-description';
+            reasonDiv.innerHTML = wine.Reason;
+            recDiv.appendChild(reasonDiv);
             // const suggestionDiv = document.createElement('div');
             // suggestionDiv.innerHTML = `${translator.translate('reason')}: ${wine.Reason}<br>`;
             // wineDiv.appendChild(suggestionDiv);
-            messageContainer.appendChild(wineDiv);
-            this.displayFirstMessage(wine.Reason);
+            console.log(recDiv);
+            messageContainer.appendChild(recDiv);
         });
         messageContainer.scrollTop = messageContainer.scrollHeight;
     }

package/src/js/i18n.js

@@ -6,12 +6,17 @@ class Translator {
         this.language = 'en'; // Default to English
         this.translations = {
             fr: {
-                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?",
+                welcomeMessage: "Quel plat allez-vous déguster ? Décrivez-le-moi et je vous proposerai le vin qui l'accompagnera parfaitement.",
                 noResultsFound: "Aucun résultat trouvé.",
                 somethingWentWrong: "Désolé, quelque chose a mal tourné.",
-                chatButton: "Accorder le vin au dîner",
+                chatButton1: "Trouvez l'accord parfait",
+                chatButton2: "Associez le vin",
+                chatButton3: "Obtenez des conseils",
+                chatTitle: "Accord Mets & Vins 🍷",
+                chatSubtitle: "Décrivez votre plat et obtenez une recommandation en 30 secondes",
                 inputPlaceholder: "ex., Salade de thon",
                 sendButton: "Accorder",
+                poweredBy: "Propulsé par",
                 price: "Prix",
                 region: "Région",
                 type: "Type",
@@ -22,12 +27,17 @@ class Translator {
                 clearChatButton: "Effacer le chat"
             },
             es: {
-                welcomeMessage: "Mejore su experiencia gastronómica. Solo proporcione los detalles de su plato y obtenga la recomendación de vino ideal. ¿Qué le gustaría comer?",
+                welcomeMessage: "¿Qué vas a comer? Cuéntame tu plato y te recomendaré el maridaje perfecto.",
                 noResultsFound: "No se encontraron resultados.",
                 somethingWentWrong: "Lo sentimos, algo salió mal.",
-                chatButton: "Maridaje ideal",
+                chatButton1: "Encuentra tu maridaje",
+                chatButton2: "Combina vino ya",
+                chatButton3: "Recibe asesoría ahora",
+                chatTitle: "Maridaje de Vinos 🍷",
+                chatSubtitle: "Describe tu comida y obtén una recomendación en 30 segundos",
                 inputPlaceholder: "ej., Ensalada de atún",
-                sendButton: "Maridar",
+                sendButton: "Combinar",
+                poweredBy: "Desarrollado por",
                 price: "Precio",
                 region: "Región",
                 type: "Tipo",
@@ -38,12 +48,17 @@ class Translator {
                 clearChatButton: "Limpiar el chat"
             },
             en: {
-                welcomeMessage: "Enhance your dining experience. Just provide your dish details and get the ideal wine pairing. What would you like to eat?",
+                welcomeMessage: "What are you planning to eat? Share your dish and I'll recommend the perfect wine pairing for your meal.",
                 noResultsFound: "No results found.",
                 somethingWentWrong: "Sorry, something went wrong.",
-                chatButton: "Pair wine with dinner",
-                inputPlaceholder: "e.g., Tuna Salad",
-                sendButton: "Pair",
+                chatButton1: "Find Your Pairing",
+                chatButton2: "Pair Wine Now",
+                chatButton3: "Get Wine Advice",
+                chatTitle: "Wine Pairing Assistant 🍷",
+                chatSubtitle: "Describe your meal and get a recommendation in 30 seconds",
+                inputPlaceholder: "e.g., Tuna salad",
+                sendButton: "Match",
+                poweredBy: "Powered by",
                 price: "Price",
                 region: "Region",
                 type: "Type",
@@ -54,12 +69,17 @@ class Translator {
                 clearChatButton: "Clear Chat"
             },
             de: {
-                welcomeMessage: "Verbessern Sie Ihr kulinarisches Erlebnis. Geben Sie einfach die Details Ihres Gerichts an und erhalten Sie die ideale Weinempfehlung. Was möchten Sie essen?",
+                welcomeMessage: "Was möchten Sie essen? Beschreiben Sie Ihr Gericht und ich empfehle Ihnen den perfekten Wein dazu.",
                 noResultsFound: "Keine Ergebnisse gefunden.",
                 somethingWentWrong: "Entschuldigung, etwas ist schief gelaufen.",
-                chatButton: "Wein zum Abendessen",
+                chatButton1: "Finde Dein Pairing",
+                chatButton2: "Wein jetzt wählen",
+                chatButton3: "Erhalte Weinberatung",
+                chatTitle: "Wein & Speisen 🍷",
+                chatSubtitle: "Beschreiben Sie Ihr Gericht und erhalten Sie in 30 Sekunden eine Empfehlung",
                 inputPlaceholder: "z.B., Thunfischsalat",
                 sendButton: "Kombinieren",
+                poweredBy: "Unterstützt von",
                 price: "Preis",
                 region: "Region",
                 type: "Typ",
@@ -72,13 +92,16 @@ class Translator {
         };
     }
 
-    async fetchConfig(storeName = 'Demo') {
+    async fetchConfig(storeName) {
+        console.log(storeName);
         try {
             const config = await this.api.getStoreConfig(storeName);
+            console.log(config);
             this.language = config.lang;
         } catch (e) {
             this.language = 'en'; // Fallback to English
         }
+        console.log(this.language);
     }
 
     translate(key) {

package/src/js/styles.js

@@ -15,17 +15,46 @@ const css = `
 
 /* Styling the chat icon */
 #chat-icon {
-    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 */
-}
+      height: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 10px 20px;
+      border-radius: 25px;
+      background: linear-gradient(90deg, #7B2BEB, #0044FF); /* Фиолетовый к синему */
+      cursor: pointer;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Тень */
+      color: white; /* Белый текст */
+      font-family: 'Poppins', sans-serif;
+      font-size: 16px; /* Увеличенный размер текста */
+      font-weight: bold;
+      transition: transform 0.2s ease, box-shadow 0.2s ease; /* Анимация при наведении */
+    }
+
+    #chat-icon:hover {
+      transform: scale(1.1) translateY(-50%) rotate(90deg); /* Увеличение при наведении */
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); /* Более глубокая тень */
+      
+    }
+
+    @keyframes pulse {
+      0%, 100% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.1);
+      }
+    }
+
+    /* Подёргивание раз в 10 секунд */
+    .wiggle {
+      animation: wiggle 0.3s ease-in-out 10s infinite;
+    }
+
+    /* Плавное пульсирование каждые 10 секунд */
+    .pulse {
+      animation: pulse 1.5s ease-in-out 10s infinite;
+    }
 
 /* Position class for bottom-right */
 .chat-icon-bottom-right {
@@ -48,127 +77,224 @@ const css = `
 }
 
 #chat-icon span {
-    color: black; /* Text color */
+    color: white; /* Text color */
     font-family: 'Poppins', sans-serif;
 }
 
 /* Chat window styles */
 #chat-window {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    width: 350px;
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-    display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 380px;
+  background-color: white;
+  border-radius: 24px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  display: none;
+  overflow: hidden;
 }
 
 #chat-header {
-    background-color: #fff;
-    color: white;
-    padding: 16px;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  background-color: #FAFAFA;
+  padding: 24px 24px 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
 }
 
-#powered-by {
-    display: flex;
-    align-items: center;
-    background-color: #fff;
-    width: 100%;
-    border-radius: 16px;
+#chat-title h1 {
+  font-family: 'Poppins', sans-serif;
+  font-size: 20px;
+  font-weight: 600;
+  color: #1F1F1F;
+  margin: 0;
+  line-height: 1.3;
 }
 
-#powered-by a span {
-    font-family: 'Poppins', sans-serif;
-    color: #7E27ED;
-    margin-right: 8px;
+#chat-title p {
+  font-family: 'Poppins', sans-serif;
+  font-size: 14px;
+  color: #666;
+  margin: 0;
+  line-height: 1.4;
 }
 
-#chatbot-logo {
-    height: 20px;
-    width: auto;
+#close-btn {
+  font-size: 20px;
+  color: #666;
+  cursor: pointer;
+  padding: 4px 8px;
+  margin: -4px -4px 0 16px;
+  line-height: 1;
+  border-radius: 50%;
+  transition: all 0.2s ease;
 }
 
-#close-btn {
-    font-size: 24px;
-    color: #7E27ED;
-    cursor: pointer;
-    padding: 0 10px;
-    line-height: 24px;
+#close-btn:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: #333;
 }
 
-/* Container for messages */
 #message-container {
-    max-height: 500px;
-    height: 400px;
-    overflow-y: auto;
-    padding: 15px;
-    background: #f7f7f7;
+  padding: 20px 24px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.message {
+  margin-bottom: 16px;
+  max-width: 85%;
+}
+
+.bot-message {
+  background-color: #F6F6F6;
+  padding: 12px 16px;
+  border-radius: 16px;
+  border-top-left-radius: 4px;
+  margin-right: auto;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #1F1F1F;
+}
+
+.user-message {
+  background-color: #7E27ED;
+  color: white;
+  padding: 12px 16px;
+  border-radius: 16px;
+  border-top-right-radius: 4px;
+  margin-left: auto;
+  font-size: 14px;
+  line-height: 1.5;
 }
 
-/* Input area */
 #input-container {
-    border-top: 2px solid #ececec;
-    background-color: white;
-    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;
+  padding: 16px 16px; /* Уменьшенный паддинг по бокам */
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  display: flex;
+  gap: 0; /* Убрали отступ между элементами */
+  background-color: white;
 }
 
-#input-container button {
-    padding: 10px 20px;
-    background-color: #7E27ED;
-    border: none;
-    color: white;
-    border-radius: 4px;
-    font-family: 'Poppins', sans-serif;
-    font-size: 1rem;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    transition: background-color 0.3s ease;
+/* Стили для поля ввода */
+#user-input {
+  flex: 1;
+  padding: 12px 16px;
+  border: 2px solid transparent; /* Прозрачная граница для эффекта градиента */
+  border-radius: 12px 0 0 12px; /* Скругление только слева */
+  font-size: 14px;
+  line-height: 1.5;
+  color: #2C2C2C;
+  transition: all 0.2s ease;
+  background: 
+    linear-gradient(white, white) padding-box,
+    linear-gradient(90deg, #0044FF, #7B2BEB) border-box;
+}
+
+#user-input:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(123, 43, 235, 0.1);
+}
+
+/* Кнопка отправки */
+#send-button {
+  background: linear-gradient(90deg, #7B2BEB, #0044FF);
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 0 12px 12px 0; /* Скругление только справа */
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  box-shadow: 0 2px 8px rgba(123, 43, 235, 0.15);
+}
+
+#send-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(123, 43, 235, 0.2);
+}
+
+#send-button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 8px rgba(123, 43, 235, 0.15);
+}
+
+#powered-by {
+  padding: 12px 24px;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #FAFAFA;
+}
+
+#powered-by a {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
 }
 
-#input-container button:hover {
-    background-color: #2FC0BF;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+#powered-by a:hover {
+  opacity: 1;
+}
+
+#powered-by span {
+  font-family: 'Poppins', sans-serif;
+  color: #666;
+  margin-right: 8px;
+  font-size: 12px;
+}
+
+#chatbot-logo {
+  height: 16px;
+  width: auto;
+}
+
+/* Container for messages */
+#message-container {
+  padding: 24px;
+  display: flex;
+  max-height: 500px;
+  height: 400px;
+  flex-direction: column;
+  gap: 16px;
 }
 
 /* Message bubble styling */
 .message {
-    margin: 8px 0;
-    padding: 12px;
-    background-color: #e0e0e0;
-    border-radius: 16px;
-    font-size: 14px;
-    line-height: 1.4;
+  padding: 16px 20px;
+  border-radius: 20px;
+  margin-bottom: 8px;
+  font-size: 15px;
+  line-height: 1.5;
+  font-family: 'Poppins', sans-serif;
+  width: fit-content;
+  max-width: 85%;
 }
 
-.message.user {
-    background-color: #B928EB;
-    color: white;
-    align-self: flex-end;
+/* Стили для сообщений API (бота) */
+.message.api {
+  background: linear-gradient(90deg, #7B2BEB, #0044FF);
+  color: white;
+  border-top-left-radius: 4px;
+  margin-right: auto;
+  box-shadow: 0 2px 8px rgba(123, 43, 235, 0.15);
 }
 
-.message.api {
-    background-color: #e0e0e0;
-    color: black;
-    align-self: flex-start;
+/* Стили для пользовательских сообщений */
+.message.user {
+  background-color: #F0F0F0;
+  color: #2C2C2C;
+  border-top-right-radius: 4px;
+  margin-left: auto;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
+
 /* Dish item styling */
 .dish-message {
     border: 2px solid #7E27ED; /* Bold yellow border */
@@ -183,29 +309,75 @@ const css = `
 }
 
 /* Wine item styling */
-.wine-item {
-    display: flex;
-    align-items: center;
-    border: 1px solid #7E27ED;
-    border-radius: 8px;
-    padding: 10px;
-    margin-top: 10px;
-    background: white;
+
+.wine-recommendation {
+  display: flex;
+  flex-direction: column;
+  background: white;
+    border: 2px solid transparent; /* Прозрачная граница для эффекта градиента */
+  border-radius: 20px;
+border-top-left-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  background: 
+    linear-gradient(white, white) padding-box,
+    linear-gradient(90deg, #7B2BEB, #0044FF) border-box;
 }
 
-.wine-item a {
-    color: #7E27ED !important;
+.wine-item {
+  display: flex;
+  padding: 16px;
+  gap: 16px;
 }
 
 .wine-item img {
-    width: 80px;
-    height: auto;
-    border-radius: 4px;
-    margin-right: 12px;
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+.wine-item-details {
+  flex: 1;
+}
+
+.wine-item-details strong {
+  font-size: 16px;
+  color: #2C2C2C;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.wine-item-price {
+  color: #7B2BEB;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.wine-item-region {
+  color: #666;
+  font-size: 14px;
+  margin-bottom: 4px;
 }
 
-.wine-item div {
-    font-size: 0.9rem;
+.wine-item a {
+  color: #0044FF;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.wine-description {
+  padding: 12px 16px;
+  color: white;
+
+    border-radius: 0px;
+border-bottom-left-radius: 15px;
+border-bottom-right-radius: 15px;
+
+  font-size: 14px;
+  line-height: 1.5;
+  background: linear-gradient(90deg, #7B2BEB, #0044FF);
+  box-shadow: 0 2px 8px rgba(123, 43, 235, 0.15);
 }
 
 /* Ensure the chat window is visible when the 'visible' class is added */
@@ -215,71 +387,244 @@ const css = `
 
 /* Loader Styles */
 .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;
+  display: none;
+  width: 40px;
+  height: 40px;
+  margin: 20px auto;
+  background: conic-gradient(from 0deg, #7B2BEB, #0044FF, #7B2BEB);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  position: relative;
+}
+
+.loader::after {
+  content: '';
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  right: 4px;
+  bottom: 4px;
+  background: white;
+  border-radius: 50%;
 }
 
 .loader.visible {
-    display: block;
+  display: block;
 }
 
 @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
 /* Typing indicator styles */
 .typing-indicator {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 0;
-    visibility: hidden;
-    background-color: #f7f7f7;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 0;
+  visibility: hidden;
+  background-color: white;
 }
 
 .typing-indicator span {
-    display: block;
-    width: 8px;
-    height: 8px;
-    margin: 0 4px;
-    background-color: #3498db;
-    border-radius: 50%;
-    opacity: 0.4;
-    animation: typing 1.5s infinite;
+  display: block;
+  width: 8px;
+  height: 8px;
+  margin: 0 3px;
+  border-radius: 50%;
+  background: linear-gradient(90deg, #7B2BEB, #0044FF);
+  opacity: 0.7;
+  animation: typing 1s infinite;
 }
 
 @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); }
+  0%, 100% { 
+    transform: translateY(0); 
+    opacity: 0.7;
+  }
+  50% { 
+    transform: translateY(-8px);
+    opacity: 1;
+  }
 }
 
 /* Staggered animation for typing dots */
 .typing-indicator span:nth-child(1) {
-    animation-delay: 0s;
+  animation-delay: 0s;
 }
 .typing-indicator span:nth-child(2) {
-    animation-delay: 0.2s;
+  animation-delay: 0.15s;
 }
 .typing-indicator span:nth-child(3) {
-    animation-delay: 0.4s;
+  animation-delay: 0.3s;
 }
 
 /* Show the typing indicator */
 .typing-indicator.visible {
-    visibility: visible;
-    height: 50px;
-}`;
+  visibility: visible;
+  height: 40px;
+}
+
+@media screen and (max-width: 768px) {
+    #chat-window {
+        width: 100%;
+        height: 100%;
+        bottom: 0;
+        right: 0;
+        border-radius: 0;
+        position: fixed;
+    }
+
+    #message-container {
+        height: calc(100vh - 180px); /* Учитываем высоту header и input container */
+        max-height: none;
+    }
+
+    #chat-icon {
+        height: 45px;
+        padding: 8px 16px;
+        font-size: 14px;
+    }
+
+   #chat-icon {
+        height: 36px; /* Ещё меньше для мобильных */
+        padding: 6px 12px;
+        font-size: 13px;
+    }
+    
+    #chat-icon img {
+        width: 20px;
+    }
+
+    #input-container {
+        padding: 12px;
+        position: fixed;
+        bottom: 30px;
+        width: 100%;
+        box-sizing: border-box;
+        
+    }
+
+    #user-input {
+        font-size: 16px; /* Оптимальный размер для мобильных устройств */
+        padding: 10px 14px;
+    }
+
+    #send-button {
+        padding: 10px 20px;
+    }
+
+    .wine-item {
+        flex-direction: column;
+        padding: 12px;
+    }
+
+    .wine-item img {
+        width: 100%;
+        height: 200px;
+        margin-bottom: 12px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    #chat-header {
+        padding: 16px;
+    }
+
+    #chat-icon {
+        padding: 3px 10px;
+        font-size: 12px;
+        border-radius: 10px;
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+        right: -77px;
+    }
+    
+    #chat-icon img {
+        width: 18px;
+    }
+
+    #chat-title h1 {
+        font-size: 18px;
+    }
+
+    #chat-title p {
+        font-size: 12px;
+    }
+
+    .message {
+        padding: 12px 16px;
+        font-size: 14px;
+        max-width: 95%;
+    }
+
+    .wine-recommendation {
+        margin: 10px 0;
+    }
+
+    .wine-description {
+        padding: 10px 14px;
+        font-size: 13px;
+    }
+
+    #powered-by {
+        padding: 8px 16px;
+        display: block;
+        position: fixed;
+        width: 100%;
+        bottom: 0;
+        text-align: center;
+        box-sizing: border-box;
+    }
+
+    #powered-by a {
+        width: 100%;
+        justify-content: center;
+    }
+
+    #powered-by span {
+        font-size: 11px;
+    }
+
+    #chatbot-logo {
+        height: 14px;
+    }
+}
+
+/* Стили для планшетов */
+@media screen and (min-width: 769px) and (max-width: 1024px) {
+    #chat-window {
+        width: 400px;
+        right: 30px;
+        bottom: 30px;
+    }
+
+    #message-container {
+        max-height: 450px;
+    }
+}
+
+/* Стили для ландшафтной ориентации на мобильных */
+@media screen and (max-height: 600px) and (orientation: landscape) {
+    #chat-window {
+        height: 100vh;
+    }
+
+    #message-container {
+        height: calc(100vh - 140px);
+    }
+
+    .wine-item {
+        flex-direction: row;
+    }
+
+    .wine-item img {
+        width: 80px;
+        height: 80px;
+    }
+}
+    `;
 
 const style = document.createElement('style');
 style.textContent = css;