shopify-chatbot-widget 0.9.7 → 0.9.8

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

@@ -72,12 +72,7 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
   calendly,
   disableCheckout,
   isfetchingMessage,
-
 }) => {
-
-
-
- 
   const bottomRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -85,12 +80,10 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
     
     const timeout = setTimeout(() => {
       bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
-    }, 150); // Slight delay ensures DOM settles in Shopify
+    }, 150);
   
     return () => clearTimeout(timeout);
   }, [messages]);
-  
-
 
   if (isfetchingMessage || isLoading || !messages) {
     return (
@@ -105,31 +98,30 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
         }}
       >
         <div style={{backgroundColor:colorCode}} className="box-loader"></div>
-        <div  style={{backgroundColor:colorCode}} className="box-loader"></div>
-        <div  style={{backgroundColor:colorCode}} className="box-loader"></div>
+        <div style={{backgroundColor:colorCode}} className="box-loader"></div>
+        <div style={{backgroundColor:colorCode}} className="box-loader"></div>
       </div>
     );
   }
-  
 
   return (
     <div className="chatbot-messages space-y-4">
-    {messages.map((msg, i) => {
-      if (msg.typing) {
-        return (
-          <div key={i} className="chat-msg typing">
-            <Typing color={colorCode} />
-          </div>
-        );
-      }
+      {messages.map((msg, i) => {
+        const isFirstMessage = i === 0 && messages.length === 1;
+        
+        if (msg.typing) {
+          return (
+            <div key={i} className="chat-msg typing">
+              <Typing color={colorCode} />
+            </div>
+          );
+        }
 
-      if (msg.isConnect){
-        return(
-          <SupportConnect sessionId={sessionId}/>
-        )
-      }
+        if (msg.isConnect) {
+          return <SupportConnect key={i} sessionId={sessionId} />;
+        }
 
-      if (msg.isBookings){
+        if (msg.isBookings) {
           return (
             <div
               key={i}
@@ -142,15 +134,37 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
               <CalendlyEmbeds calendlyLink={calendly} />
             </div>
           );
-      }
-
+        }
 
+        if (msg.role === 'assistant') {
+          if (Array.isArray(msg.content)) {
+            return (
+              <div 
+                key={i} 
+                className={`chat-msg assistant ${isFirstMessage ? 'first-message' : ''}`}
+                style={{ backgroundColor: 'transparent', padding: 0 }}
+              >
+                {msg.image_url && (
+                  <img
+                    src={msg.image_url}
+                    alt="Chat image"
+                    style={{ width: 200 }}
+                    className="rounded-md mt-2 max-w-xs border border-green-400 shadow-sm"
+                  />
+                )}
+                <ChatImage message={msg.content} />
+                <div className="flex justify-start">
+                  <ChatImageTextAssist message={msg.content} />
+                </div>
+              </div>
+            );
+          }
 
-      if (msg.role === 'assistant') {
-        // Handle array content separately
-        if (Array.isArray(msg.content)) {
           return (
-            <div key={i} className="chat-msg assistant" style={{ backgroundColor: 'transparent', padding: 0 }}>
+            <div 
+              key={i} 
+              className={`chat-msg assistant ${isFirstMessage ? 'first-message' : ''}`}
+            >
               {msg.image_url && (
                 <img
                   src={msg.image_url}
@@ -159,183 +173,138 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
                   className="rounded-md mt-2 max-w-xs border border-green-400 shadow-sm"
                 />
               )}
-              <ChatImage message={msg.content} />
-              <div className="flex justify-start">
-                <ChatImageTextAssist message={msg.content}   />
-              </div>
+              
+              {userType === "shopify" ? (
+                <AssistantMessage
+                  message={msg.content || msg.text || ""}
+                  colorCode={colorCode}
+                  disableCheckout={disableCheckout}
+                  handleAddToCart={handleAddToCart}
+                  handleRemoveFromCart={handleRemoveFromCart}
+                />
+              ) : userType === "salla" ? (
+                <SallaAsssiatnt
+                  message={msg.content || msg.text || ""}
+                  colorCode={colorCode}
+                  handleAddToCart={handleAddToCart}
+                  handleRemoveFromCart={handleRemoveFromCart}
+                />
+              ) : (
+                <ZidAssistantChatMessage
+                  message={msg.content || msg.text || ""}
+                  colorCode={colorCode}
+                  handleAddToCart={handleAddToCart}
+                  handleRemoveFromCart={handleRemoveFromCart}
+                />
+              )}
             </div>
           );
         }
 
-      
-      
+        if (msg?.audio_url) {
+          return (
+            <div
+              key={i}
+              className="chat-msg user"
+              style={{
+                backgroundColor: 'transparent',
+                padding: 0
+              }}
+            >
+              <div style={{ borderRadius: 12 }}>
+                <AudioVisualizer link={msg.audio_url} transcription={msg.content} colorCode={colorCode} />
+              </div>
+              <div className="mt-1 mr-2 flex items-end justify-end">
+                {msg.status === 'uploading' ? (
+                  <Spin indicator={<LoadingOutlined spin />} size="small" />
+                ) : msg.status === 'delivered' ? (
+                  <CheckCircleOutlined style={{ color: 'green' }} />
+                ) : msg.status === 'failed' ? (
+                  <CloseCircleOutlined style={{ color: 'red' }} />
+                ) : null}
+              </div>
+            </div>
+          );
+        }
 
-     
-        return (
-          <div key={i} className="chat-msg assistant">
-            {msg.image_url && (
+        if (msg.image_url) {
+          return (
+            <div key={i} className="chat-msg user" style={{ backgroundColor: 'transparent' }}>
               <img
                 src={msg.image_url}
                 alt="Chat image"
                 style={{ width: 200 }}
-                className="rounded-md mt-2 max-w-xs border border-green-400 shadow-sm"
-              />
-            )}
-            
-            {userType === "shopify" ? (
-              <AssistantMessage
-                message={msg.content || msg.text || ""}
-                colorCode={colorCode}
-                disableCheckout={disableCheckout}
-                handleAddToCart={handleAddToCart}
-                handleRemoveFromCart={handleRemoveFromCart}
-              />
-            ) : userType === "salla" ? (
-              <SallaAsssiatnt
-                message={msg.content || msg.text || ""}
-                colorCode={colorCode}
-                handleAddToCart={handleAddToCart}
-                handleRemoveFromCart={handleRemoveFromCart}
+                className={`rounded-md mt-2 max-w-xs ${
+                  msg.content === 'user'
+                    ? 'border border-gray-300 shadow-sm'
+                    : 'border border-green-400 shadow-sm'
+                }`}
               />
-            ) : (
-              <ZidAssistantChatMessage
-              message={msg.content || msg.text || ""}
-              colorCode={colorCode}
-              handleAddToCart={handleAddToCart}
-              handleRemoveFromCart={handleRemoveFromCart}
-              />
-            )}
-
-  
-
-          </div>
-        );
-      }
-      
-
-  
-  if(msg?.audio_url){
-
-    return(
-      <div
-      className={`chat-msg user`}
-      style={{
-        backgroundColor:'transparent',
-        padding:0
-      }}
-    >
-     
-     <div style={{
-       borderRadius:12
-     }}>
-
-      <AudioVisualizer link={msg.audio_url} transcription={msg.content} colorCode={colorCode} />
- 
-      {/* Upload/Delivery Status */}
- 
-      </div>
-
-      <div className="mt-1 mr-2 flex items-end justify-end">
-        {msg.status === 'uploading' ? (
-          <Spin indicator={<LoadingOutlined spin />} size="small" />
-        ) : msg.status === 'delivered' ? (
-          <CheckCircleOutlined style={{ color: 'green' }} />
-        ) : msg.status === 'failed' ? (
-          <CloseCircleOutlined style={{ color: 'red' }} />
-        ) : null}
-      </div>
-    </div>
-    )
+              <div className="mt-1 mr-2 flex items-end justify-end">
+                {msg.status === 'uploading' ? (
+                  <Spin indicator={<LoadingOutlined spin />} size="small" />
+                ) : msg.status === 'delivered' ? (
+                  <CheckCircleOutlined style={{ color: 'green' }} />
+                ) : msg.status === 'failed' ? (
+                  <CloseCircleOutlined style={{ color: 'red' }} />
+                ) : null}
+              </div>
+              {msg.content && (
+                <div className="flex justify-end mt-2">
+                  <div
+                    style={{
+                      color: 'white',
+                      border: 1,
+                      backgroundColor: colorCode,
+                      paddingTop: 10,
+                      paddingBottom: 10,
+                      paddingInline: 14,
+                      maxWidth: '85%',
+                      lineHeight: 1.4,
+                      borderRadius: '16px',
+                      wordBreak: 'break-word',
+                    }}
+                  >
+                    <span>{msg.content}</span>
+                  </div>
+                </div>
+              )}
+            </div>
+          );
         }
-  
 
-  // ✅ IMAGE MESSAGE (non-assistant)
-  if (msg.image_url) {
-    return (
-      <div key={i} className="chat-msg user" style={{ backgroundColor: 'transparent' }}>
-        <img
-          src={msg.image_url}
-          alt="Chat image"
-          style={{ width: 200 }}
-          className={`rounded-md mt-2 max-w-xs ${
-            msg.content === 'user'
-              ? 'border border-gray-300 shadow-sm'
-              : 'border border-green-400 shadow-sm'
-          }`}
-        />
-  
-        <div className="mt-1 mr-2 flex items-end justify-end">
-          {msg.status === 'uploading' ? (
-            <Spin indicator={<LoadingOutlined spin />} size="small" />
-          ) : msg.status === 'delivered' ? (
-            <CheckCircleOutlined style={{ color: 'green' }} />
-          ) : msg.status === 'failed' ? (
-            <CloseCircleOutlined style={{ color: 'red' }} />
-          ) : null}
-        </div>
-  
-        {msg.content && (
-          <div className="flex justify-end mt-2">
-            <div
-              style={{
-                color: 'white',
-                border: 1,
-                backgroundColor: colorCode,
-                paddingTop: 10,
-                paddingBottom: 10,
-                paddingInline: 14,
-                maxWidth: '85%',
-                lineHeight: 1.4,
-                borderRadius: '16px',
-                wordBreak: 'break-word',
-              }}
-            >
-              <span>{msg.content}</span>
+        if (Array.isArray(msg.content)) {
+          return (
+            <div key={i} className='chat-msg user' style={{backgroundColor:'transparent', padding:0}}>
+              <div style={{backgroundColor:'transparent', padding:0}}>
+                <ChatImage message={msg.content} />
+              </div>
+              <div className='flex justify-end'>
+                <ChatImageText message={msg.content} colorCode={colorCode} />
+              </div>
             </div>
-          </div>
-        )}
-      </div>
-    );
-  }
-  
+          );
+        }
 
-  // ✅ MULTIPLE IMAGES (array)
-  if (Array.isArray(msg.content)) {
-    return (
-      <div key={i}  className='chat-msg user'  style={{backgroundColor:'transparent',padding:0}}>
-          <div style={{backgroundColor:'transparent',padding:0}}>
-            <ChatImage message={msg.content} />
-          </div>
-          <div key={i} className='flex justify-end'>
-            <ChatImageText message={msg.content} colorCode={colorCode} />
+        return (
+          <div
+            key={i}
+            className={`chat-msg ${msg.role}`}
+            style={
+              msg.role === 'user'
+                ? { backgroundColor: colorCode, color: '#fff' }
+                : {}
+            }
+          >
+            <AddToCartConfirmation message={msg.content} colorCode={colorCode}/>
           </div>
-
-      </div>
-    );
-  }
-
-
-  return (
-    <div
-      key={i}
-      className={`chat-msg ${msg.role}`}
-      style={
-        msg.role === 'user'
-          ? { backgroundColor: colorCode, color: '#fff' }
-          : {}
-      }
-    >
-
-      <AddToCartConfirmation message={msg.content} colorCode={colorCode}/>
-
-    </div>
-  );
-})}
-  <AgentStatusBanner status={agentStatus?.status} user={agentStatus?.user} />
-  <div ref={bottomRef} />
-
+        );
+      })}
+      
+      <AgentStatusBanner status={agentStatus?.status} user={agentStatus?.user} />
+      <div ref={bottomRef} />
     </div>
   );
 };
 
-export default ChatMessages;
+export default ChatMessages;

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;