shopify-chatbot-widget 0.9.7 → 0.9.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shopify-chatbot-widget",
   "private": false,
-  "version": "0.9.7",
+  "version": "0.9.8",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/Chatbot/Chatbot.css

@@ -16,40 +16,89 @@
 }
 
   
-  .chatbot-box {
-      position: fixed;
-      bottom: 5%;
-      right: 10px;
-      width: 28%;
-      top: 2%;
-      z-index: 9999;
-      height: 86%;
-      background: #ffffff;
-      color: #000000;
-      border-radius: 12px;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-      font-family: 'Inter', sans-serif;
-    }
+
     
+.chatbot-box {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 420px;
+  max-width: 28%;
+  height: 85vh; /* 85% of viewport height */
+  max-height: 800px; /* Even taller max height */
+  z-index: 9999;
+  background: #ffffff;
+  color: #000000;
+  border-radius: 12px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  font-family: 'Inter', sans-serif;
+}
 
+.chatbot-header {
+  background: #f7f7f7;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 16px;
+  font-weight: bold;
+  border-bottom: 1px solid #e0e0e0;
+  flex-shrink: 0; /* Prevent header from shrinking */
+}
+
+.chatbot-messages {
+  flex: 1; /* Take remaining space */
+  padding: 16px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background-color: #fafafa;
+  min-height: 0; /* Important for flex overflow */
   
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.chatbot-messages::-webkit-scrollbar {
+  display: none;
+}
+
+.chatbot-input-area {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #ffffff;
+  border-top: 1px solid #e0e0e0;
+  padding: 12px;
+  flex-shrink: 0; /* Prevent input area from shrinking */
+}
+
+@media (max-width: 768px) {
+  .chatbot-box {
+    position: fixed;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    left: 0;
+    border-radius: 0;
+  }
   
-  /* Mobile responsiveness */
-  
-  .chatbot-header {
-    background: #f7f7f7;
-    padding: 16px;
-    display: flex;
-    align-items: center;
-    height: 8%;
-    gap: 12px;
-    font-size: 16px;
-    font-weight: bold;
-    border-bottom: 1px solid #e0e0e0;
+  .chat-launcher.chatbot-open {
+    display: none;
   }
+}
+
+  
+  
   
   .chatbot-title {
     flex-grow: 1;
@@ -60,28 +109,7 @@
     font-size: 16px;
     color: #888;
   }
-  
-  .chatbot-messages {
-    flex: 1;
-    padding: 16px;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    height: 70%;
-    gap: 12px;
-    background-color: #fafafa;
-    min-height: 70%;
-  
-    /* Hide scrollbar for all browsers */
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none;  /* Internet Explorer 10+ */
-  }
-  
-  /* Hide scrollbar for WebKit-based browsers (Chrome, Safari) */
-  .chatbot-messages::-webkit-scrollbar {
-    display: none;
-  }
-  
+
   
   .chat-msg {
     max-width: 85%;
@@ -104,16 +132,7 @@
     color: white;
   }
   
-  .chatbot-input-area {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    height:22%;
-    align-items: center;
-    background: #ffffff;
-    border-top: 1px solid #e0e0e0;
-  
-  }
+ 
   
   .typing-animation span {
     display: inline-block;
@@ -138,121 +157,13 @@
   /* brand color hook (optional) */
 .jaweb-chatbot-container { --jaweb-color: #7f28f8; }
 
-/* ===== NUDGE BUBBLE ===== */
-.jaweb-nudge-bubble{
-  position:absolute;
-  right:6px;               /* nudge in from the edge */
-  bottom:84px;  
-  width: 100px;           /* sits above the 60px launcher */
-  max-width:210px;
-  background:#ffffff;
-  color:#111;
-  border-radius:18px;
-  padding:12px 14px;
-  box-shadow:
-    0 18px 50px rgba(0,0,0,.18),
-    0 6px 18px rgba(0,0,0,.08);
-  border:1px solid rgba(17,17,17,.06);
-  cursor:pointer;
-  /* entrance */
-  opacity:0;
-  transform:translateY(8px) scale(.98);
-  animation:jb-in .32s cubic-bezier(.22,1,.36,1) forwards,
-           jb-float 6s ease-in-out 1.2s infinite;
-  z-index:10001;
-}
-
-/* “tail” pointing to the launcher */
-.jaweb-nudge-caret{
-  position:absolute;
-  left:50%;
-  transform:translateX(-50%) rotate(45deg);
-  bottom:-8px;
-  width:14px;height:14px;
-  background:#ffffff;
-  border-right:1px solid rgba(17,17,17,.06);
-  border-bottom:1px solid rgba(17,17,17,.06);
-  filter: drop-shadow(0 2px 3px rgba(0,0,0,.08));
-}
-
-/* content: three dots on top + stacked text */
-.jaweb-nudge-text{
-  display:block;
-  word-wrap:normal;
-  word-break:normal;
-  font-size:15.5px;
-  line-height:1.25;
-  font-weight:600;
-  letter-spacing:.2px;
-}
 
-/* typing dots row */
-.jaweb-nudge-text .jaweb-typing-dot{
-  display:inline-block;
-  width:6px;height:6px;
-  margin-right:6px;
-  border-radius:9999px;
-  background:linear-gradient(180deg,#c8c8c8,#bdbdbd);
-  animation:jb-typing 1.2s infinite ease-in-out;
-  vertical-align:middle;
-}
-.jaweb-nudge-text .jaweb-typing-dot:nth-child(1){ animation-delay:0s; }
-.jaweb-nudge-text .jaweb-typing-dot:nth-child(2){ animation-delay:.15s; }
-.jaweb-nudge-text .jaweb-typing-dot:nth-child(3){ animation-delay:.3s; }
 
-/* subtle gradient ring on bubble edges (premium vibe) */
-.jaweb-nudge-bubble::before{
-  content:"";
-  position:absolute; inset:0;
-  border-radius:inherit;
-  pointer-events:none;
-  background:
-    radial-gradient(120% 120% at 50% -10%,
-      color-mix(in oklab, var(--jaweb-color, #7f28f8) 14%, transparent) 0%,
-      transparent 60%);
-}
 
-/* dark mode */
-@media (prefers-color-scheme: dark){
-  .jaweb-nudge-bubble{
-    background: #1f1f21;
-    color:#f5f5f7;
-    border:1px solid rgba(255,255,255,.06);
-    box-shadow:
-      0 22px 60px rgba(0,0,0,.55),
-      0 0 0 1px rgba(255,255,255,.04) inset;
-  }
-  .jaweb-nudge-caret{
-    background:#1f1f21;
-    border-right:1px solid rgba(255,255,255,.06);
-    border-bottom:1px solid rgba(255,255,255,.06);
-  }
-  .jaweb-nudge-text .jaweb-typing-dot{
-    background:linear-gradient(180deg,#bfbfbf,#a8a8a8);
-  }
-}
 
-/* reduced motion */
-@media (prefers-reduced-motion: reduce){
-  .jaweb-nudge-bubble{ animation:none; }
-  .jaweb-nudge-text .jaweb-typing-dot{ animation:none; }
-}
-
-/* keyframes */
-@keyframes jb-in{
-  to{ opacity:1; transform:translateY(0) scale(1); }
-}
-@keyframes jb-typing{
-  0%, 60%, 100%{ transform:translateY(0); opacity:.55; }
-  30%{ transform:translateY(-3px); opacity:1; }
-}
-@keyframes jb-float{
-  0%,100%{ transform:translateY(0); }
-  50%{ transform:translateY(-2px); }
-}
 
   
-  
+/*   
   @media (max-width: 600px) {
       .chatbot-box {
         position: fixed;
@@ -267,4 +178,4 @@
       .chat-launcher.chatbot-open {
           display: none;
         }
-    }
+    } */