shopify-chatbot-widget 0.9.7 → 1.0.0

package/src/Chatbot/components/Messages/Typing.css

@@ -1,31 +1,134 @@
-.typing-boxes {
-  display: flex;
+/* ===== BASE TYPING INDICATOR ===== */
+.typing-indicator {
+  display: inline-flex;
   gap: 6px;
   align-items: center;
   justify-content: flex-start;
+  padding: 8px 12px;
+  background: #eff0f1;
+  border-color: black;
+  border-radius: 18px;
+  width: fit-content;
 }
 
-.typing-boxes span {
-  border-radius: 3px; /* keep boxy feel */
+.typing-dot {
+  border-radius: 50%;
   display: inline-block;
-  animation: pulseBox 0.8s infinite alternate;
 }
 
-.typing-boxes span:nth-child(2) {
+/* ===== DOTS VARIANT (Default - Smooth bounce) ===== */
+.typing-dots .typing-dot {
+  animation: bounceDot 1.4s infinite ease-in-out both;
+}
+
+.typing-dots .typing-dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.typing-dots .typing-dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes bounceDot {
+  0%, 80%, 100% {
+    transform: translateY(0) scale(1);
+    opacity: 0.7;
+  }
+  40% {
+    transform: translateY(-10px) scale(1.1);
+    opacity: 1;
+  }
+}
+
+/* ===== BOXES VARIANT (Pulsing squares) ===== */
+.typing-boxes .typing-dot {
+  border-radius: 3px;
+  animation: pulseBox 1s infinite ease-in-out both;
+}
+
+.typing-boxes .typing-dot:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.typing-boxes .typing-dot:nth-child(2) {
   animation-delay: 0.2s;
 }
 
-.typing-boxes span:nth-child(3) {
+.typing-boxes .typing-dot:nth-child(3) {
   animation-delay: 0.4s;
 }
 
 @keyframes pulseBox {
-  from {
-    transform: scale(1);
+  0%, 100% {
+    transform: scale(0.8);
     opacity: 0.5;
   }
-  to {
-    transform: scale(1.3);
+  50% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+}
+
+/* ===== WAVE VARIANT (Wave motion) ===== */
+.typing-wave .typing-dot {
+  animation: wave 1.2s infinite ease-in-out;
+}
+
+.typing-wave .typing-dot:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.typing-wave .typing-dot:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.typing-wave .typing-dot:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+@keyframes wave {
+  0%, 60%, 100% {
+    transform: translateY(0);
+    opacity: 0.6;
+  }
+  30% {
+    transform: translateY(-12px);
     opacity: 1;
   }
 }
+
+/* ===== MINIMAL VARIANT (No background bubble) ===== */
+.typing-indicator.minimal {
+  background: transparent;
+  padding: 0;
+}
+
+/* ===== DARK MODE SUPPORT ===== */
+.typing-indicator.dark {
+  background: #374151;
+}
+
+/* ===== SIZE VARIANTS ===== */
+.typing-indicator.small {
+  padding: 6px 10px;
+  gap: 4px;
+}
+
+.typing-indicator.large {
+  padding: 10px 16px;
+  gap: 8px;
+}
+
+/* ===== RESPONSIVE ===== */
+@media (max-width: 600px) {
+  .typing-indicator {
+    padding: 6px 10px;
+    gap: 5px;
+  }
+}
+
+/* ===== SMOOTH PERFORMANCE ===== */
+.typing-dot {
+  will-change: transform, opacity;
+  backface-visibility: hidden;
+}

package/src/Chatbot/components/Messages/Typing.tsx

@@ -2,18 +2,32 @@ import React from 'react';
 import './Typing.css';
 
 interface TypingProps {
-  color?: string; // optional, defaults to black
-  size?: number;  // optional, lets you control box size
+  color?: string;
+  size?: number;
+  variant?: 'dots' | 'boxes' | 'wave'; // Different animation styles
 }
 
-const Typing: React.FC<TypingProps> = ({ color, size = 5 }) => {
+const Typing: React.FC<TypingProps> = ({ 
+  color = '#6b7280', 
+  size = 8, 
+  variant = 'dots' 
+}) => {
   return (
-    <div className="typing-boxes">
-      <span style={{ backgroundColor: color, width: size, height: size }}></span>
-      <span style={{ backgroundColor: color, width: size, height: size }}></span>
-      <span style={{ backgroundColor: color, width: size, height: size }}></span>
+    <div className={`typing-indicator typing-${variant}`}>
+      <span 
+        className="typing-dot" 
+        style={{ backgroundColor: color, width: size, height: size }}
+      />
+      <span 
+        className="typing-dot" 
+        style={{ backgroundColor: color, width: size, height: size }}
+      />
+      <span 
+        className="typing-dot" 
+        style={{ backgroundColor: color, width: size, height: size }}
+      />
     </div>
   );
 };
 
-export default Typing;
+export default Typing;

package/src/Chatbot/components/Messenger/Messenger.tsx

@@ -5,7 +5,6 @@ import '../../Chatbot.css';
 import { useChatbotMessage } from '../../../hooks/useSessionMessages';
 import axios from 'axios';
 import ChatInput from '../../components/ChatInput';
-import Suggestions from '../../components/Suggestions';
 import Powered from '../../components/Powered';
 import ChatMessages from '../../components/Messages/ChatMessages';
 import config from '../../../hooks/config';
@@ -537,25 +536,26 @@ const socket = useChatSocket(sessionId, handleSocketData);
 
 
  
-            <ChatMessages
-            messages={messages}
-            colorCode={colorCode}
-            isLoading={false}
-            handleAddToCart={handleToCart}
-            agentStatus={agentStatus}
-            sessionId={sessionId}
-            handleRemoveFromCart={handleRemoveFromCart}
-            userType={userType}
-            calendly={calendly}
-            disableCheckout={disbleCheckout}
-            isfetchingMessage={isFetchingMessages}
-          />
-      
+        <ChatMessages
+          messages={messages}
+          colorCode={colorCode}
+          isLoading={false}
+          handleAddToCart={handleToCart}
+          agentStatus={agentStatus}
+          sessionId={sessionId}
+          handleRemoveFromCart={handleRemoveFromCart}
+          userType={userType}
+          calendly={calendly}
+          disableCheckout={disbleCheckout}
+          isfetchingMessage={isFetchingMessages}
+          messagesSuggestions={messagesSuggestions}
+          sendMessageSuggestion={sendMessageSuggestion}
+        />
 
 
 
       <div className="chatbot-input-area">
-        <Suggestions sendMessageSuggestion={sendMessageSuggestion} colorCode={colorCode} suggestions={messagesSuggestions} />
+        {/* <Suggestions sendMessageSuggestion={sendMessageSuggestion} colorCode={colorCode} suggestions={messagesSuggestions} /> */}
 
         <ChatInput
           userMessage={input}
@@ -568,6 +568,7 @@ const socket = useChatSocket(sessionId, handleSocketData);
           audioBlob={audioBlob}
           setAudioBlob={setAudioBlob}
           isSending={isSending} 
+          colorCode={colorCode}
 
         />