shopify-chatbot-widget 0.9.7 → 1.0.0

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

@@ -1,6 +1,6 @@
-import React,{useEffect, useRef} from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Spin } from 'antd';
-import { LoadingOutlined ,CheckCircleOutlined,CloseCircleOutlined} from '@ant-design/icons';
+import { LoadingOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
 import Typing from './Typing';
 import AssistantMessage from './AssistantMesage';
 import ChatImage from './ChatImage';
@@ -21,12 +21,12 @@ interface Message {
   content?: any;
   text?: string;
   typing?: boolean;
-  image_url?:string;
-  status?:string;
-  audio_url?:string;
-  isConnect?:boolean;
-  calendly?:boolean;
-  isBookings?:boolean;
+  image_url?: string;
+  status?: string;
+  audio_url?: string;
+  isConnect?: boolean;
+  calendly?: boolean;
+  isBookings?: boolean;
 }
 
 interface ChatMessagesProps {
@@ -37,28 +37,74 @@ interface ChatMessagesProps {
   handleAddToCart: (
     variantId: string,
     name: string,
-    variantImage:string,
-    price:string,
+    variantImage: string,
+    price: string,
     qty?: number,
-    
   ) => Promise<void>;
 
   handleRemoveFromCart: (variantId: string, qty?: number) => Promise<void>;
-  sessionId:string;
+  sessionId: string;
   isBusiness?: boolean;
   agentStatus?: {
     status?: string;
     user?: string;
   };
-  userType:string;
-  calendly:string;
+  userType: string;
+  calendly: string;
   disableCheckout: boolean;
-  isfetchingMessage:boolean;
-}
-
+  isfetchingMessage: boolean;
 
+  messagesSuggestions: string[];
+  sendMessageSuggestion: (message: string) => Promise<void>;
+}
 
+const InlineSuggestions: React.FC<{
+  suggestions: string[];
+  colorCode: string;
+  onSuggestionClick: (text: string) => void;
+}> = ({ suggestions, colorCode, onSuggestionClick }) => {
+  if (suggestions.length === 0) return null;
 
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "0.5rem",
+        marginTop: "0.75rem",
+        marginBottom: "0.5rem",
+        paddingLeft: "0.5rem",
+      }}
+    >
+      {suggestions.map((text, index) => (
+        <button
+          key={index}
+          onClick={() => onSuggestionClick(text)}
+          style={{
+            padding: "0.5rem 1rem",
+            border: `1px solid ${colorCode}`,
+            borderRadius: "9999px",
+            backgroundColor: "white",
+            cursor: "pointer",
+            fontSize: "13px",
+            color: colorCode,
+            transition: "all 0.2s",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.backgroundColor = colorCode;
+            e.currentTarget.style.color = "white";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = "white";
+            e.currentTarget.style.color = colorCode;
+          }}
+        >
+          {text}
+        </button>
+      ))}
+    </div>
+  );
+};
 
 const ChatMessages: React.FC<ChatMessagesProps> = ({
   messages,
@@ -72,24 +118,27 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
   calendly,
   disableCheckout,
   isfetchingMessage,
-
+  messagesSuggestions,
+  sendMessageSuggestion,
 }) => {
-
-
-
- 
   const bottomRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!bottomRef.current) return;
-    
+
     const timeout = setTimeout(() => {
       bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
-    }, 150); // Slight delay ensures DOM settles in Shopify
-  
+    }, 150);
+
     return () => clearTimeout(timeout);
   }, [messages]);
-  
+
+  const getRandomSuggestions = (count: number = 2) => {
+    if (messagesSuggestions.length <= count) return messagesSuggestions;
+
+    const shuffled = [...messagesSuggestions].sort(() => 0.5 - Math.random());
+    return shuffled.slice(0, count);
+  };
 
 
   if (isfetchingMessage || isLoading || !messages) {
@@ -104,32 +153,35 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
           gap: "8px",
         }}
       >
-        <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 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;
+        // CHECK if this is the last assistant message
+        const isLastAssistantMessage =
+          msg.role === 'assistant' &&
+          i === 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,200 +194,196 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
               <CalendlyEmbeds calendlyLink={calendly} />
             </div>
           );
-      }
-
+        }
 
+        if (msg.role === 'assistant') {
+          if (Array.isArray(msg.content)) {
+            return (
+              <div key={i}> {/* WRAP in div to add suggestions after */}
+                <div
+                  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>
+
+                {/* ADD suggestions here */}
+                {isLastAssistantMessage && messagesSuggestions.length > 0 && (
+                  <InlineSuggestions
+                    suggestions={getRandomSuggestions(2)}
+                    colorCode={colorCode}
+                    onSuggestionClick={sendMessageSuggestion}
+                  />
+                )}
+              </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 }}>
-              {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"
+            <div key={i}> {/* WRAP in div to add suggestions after */}
+              <div
+                className={`chat-msg assistant ${isFirstMessage ? 'first-message' : ''}`}
+              >
+                {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"
+                  />
+                )}
+
+                {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>
+
+              {/* ADD suggestions here - MOVED OUTSIDE the chat-msg div */}
+              {isLastAssistantMessage && messagesSuggestions.length > 0 && (
+                <InlineSuggestions
+                  suggestions={getRandomSuggestions(2)}
+                  colorCode={colorCode}
+                  onSuggestionClick={sendMessageSuggestion}
                 />
               )}
-              <ChatImage message={msg.content} />
-              <div className="flex justify-start">
-                <ChatImageTextAssist message={msg.content}   />
-              </div>
             </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}
-              />
-            ) : (
-              <ZidAssistantChatMessage
-              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'
+                  }`}
               />
-            )}
-
-  
-
-          </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;