shopify-chatbot-widget 0.9.8 → 1.0.0

package/package.json

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

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,19 +118,29 @@ 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);
-  
+
     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) {
     return (
       <div
@@ -97,9 +153,9 @@ 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>
     );
   }
@@ -108,7 +164,11 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
     <div className="chatbot-messages space-y-4">
       {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">
@@ -139,10 +199,41 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
         if (msg.role === 'assistant') {
           if (Array.isArray(msg.content)) {
             return (
-              <div 
-                key={i} 
+              <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>
+            );
+          }
+
+          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
@@ -152,49 +243,38 @@ 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>
-            );
-          }
 
-          return (
-            <div 
-              key={i} 
-              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 || ""}
+              {/* ADD suggestions here - MOVED OUTSIDE the chat-msg div */}
+              {isLastAssistantMessage && messagesSuggestions.length > 0 && (
+                <InlineSuggestions
+                  suggestions={getRandomSuggestions(2)}
                   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}
+                  onSuggestionClick={sendMessageSuggestion}
                 />
               )}
             </div>
@@ -234,11 +314,10 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
                 src={msg.image_url}
                 alt="Chat image"
                 style={{ width: 200 }}
-                className={`rounded-md mt-2 max-w-xs ${
-                  msg.content === 'user'
+                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' ? (
@@ -275,8 +354,8 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
 
         if (Array.isArray(msg.content)) {
           return (
-            <div key={i} className='chat-msg user' style={{backgroundColor:'transparent', padding:0}}>
-              <div style={{backgroundColor:'transparent', padding:0}}>
+            <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'>
@@ -296,11 +375,11 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
                 : {}
             }
           >
-            <AddToCartConfirmation message={msg.content} colorCode={colorCode}/>
+            <AddToCartConfirmation message={msg.content} colorCode={colorCode} />
           </div>
         );
       })}
-      
+
       <AgentStatusBanner status={agentStatus?.status} user={agentStatus?.user} />
       <div ref={bottomRef} />
     </div>

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';
@@ -52,6 +51,8 @@ const Messenger: React.FC<MessengerProps> = ({
   newSession,
   userType,
   setNewSession,
+  messagesSuggestions,
+  setMessagesSuggestions,
   disableForm,
   sessionId,
   setOpen,
@@ -165,34 +166,34 @@ const socket = useChatSocket(sessionId, handleSocketData);
     }
   };
 
-  // const sendMessageSuggestion = async (message: string): Promise<void> => {
-  //   if (!message.trim()) return;
+  const sendMessageSuggestion = async (message: string): Promise<void> => {
+    if (!message.trim()) return;
   
-  //   setIsSending(true);
+    setIsSending(true);
   
-  //   // Remove only the clicked suggestion
-  //   setMessagesSuggestions(prev => prev.filter(suggestion => suggestion !== message));
+    // Remove only the clicked suggestion
+    setMessagesSuggestions(prev => prev.filter(suggestion => suggestion !== message));
   
-  //   const userMsg: ChatMessage = { role: 'user', content: message };
-  //   setMessages(prev => [...prev, userMsg]);
+    const userMsg: ChatMessage = { role: 'user', content: message };
+    setMessages(prev => [...prev, userMsg]);
   
-  //   if (socket && socket.readyState === WebSocket.OPEN) {
-  //     const additionalData = { isBusiness: true, SessionId: sessionId };
-  //     const messagePayload = JSON.stringify({
-  //       message,
-  //       additionalData,
-  //     });
-  //     socket.send(messagePayload);
-  //   }
+    if (socket && socket.readyState === WebSocket.OPEN) {
+      const additionalData = { isBusiness: true, SessionId: sessionId };
+      const messagePayload = JSON.stringify({
+        message,
+        additionalData,
+      });
+      socket.send(messagePayload);
+    }
   
-  //   try {
-  //     await apiCall(message, newSession, sessionId);
-  //   } catch (error) {
-  //     console.error("Error sending suggestion:", error);
-  //   } finally {
-  //     setIsSending(false);
-  //   }
-  // };
+    try {
+      await apiCall(message, newSession, sessionId);
+    } catch (error) {
+      console.error("Error sending suggestion:", error);
+    } finally {
+      setIsSending(false);
+    }
+  };
   
   
   
@@ -535,20 +536,21 @@ 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}
+        />
 
 
 

package/src/hooks/config.tsx

@@ -1,11 +1,11 @@
 
 
 const config = {
-    apiUrl:'https://jawebcrm.onrender.com/api/',
-    websocketUrl:'wss://jawebcrm.onrender.com/ws' ,
+    // apiUrl:'https://jawebcrm.onrender.com/api/',
+    // websocketUrl:'wss://jawebcrm.onrender.com/ws' ,
     
-    // apiUrl:'http://localhost:8000/api/', 
-    // websocketUrl:'ws://localhost:8000/ws',
+    apiUrl:'http://localhost:8000/api/', 
+    websocketUrl:'ws://localhost:8000/ws',
 
   };
   export default config;

package/src/Chatbot/components/Suggestions.css

@@ -1,35 +0,0 @@
-/* Suggestions.css */
-.suggestions-wrapper {
-    overflow-x: auto;
-    overflow-y: hidden;
-    white-space: nowrap;
-    padding-top: 4px;
-    padding-bottom: 8px;
-    width: 100%; /* ensures it respects screen boundaries */
-    box-sizing: border-box;
-    margin-left: 4%;
-    margin-top: 4px;
-    margin-bottom: 4px;
-
-  }
-  
-  .suggestions-scroll {
-    display: inline-flex; /* horizontal scroll with inline behavior */
-    gap: 0.5rem;
-  }
-  
-  .suggestion-button {
-    white-space: nowrap;
-    padding: 0.5rem 1rem;
-    border: 1px solid #ccc;
-    border-radius: 9999px;
-    background-color: white;
-    cursor: pointer;
-    font-size: 0.9rem;
-    flex-shrink: 0; /* prevents shrinking inside flex */
-  }
-  
-  .suggestion-button:hover {
-    background-color: #f3f3f3;
-  }
-  

package/src/Chatbot/components/Suggestions.tsx

@@ -1,57 +0,0 @@
-interface SuggestionsProps {
-  suggestions: string[];
-  colorCode: string;
-  sendMessageSuggestion: (message: string) => Promise<void>;
-}
-
-export default function Suggestions({ suggestions, colorCode, sendMessageSuggestion }: SuggestionsProps) {
-  return (
-    <div
-      style={{
-        overflowX: "auto",
-        overflowY: "hidden",
-        whiteSpace: "nowrap",
-        paddingTop: "4px",
-        paddingBottom: "8px",
-        width: "100%",
-        boxSizing: "border-box",
-        marginLeft: "4%",
-        marginTop: "4px",
-        marginBottom: "4px",
-      }}
-    >
-      <div
-        style={{
-          display: "inline-flex",
-          gap: "0.5rem",
-        }}
-      >
-        {suggestions?.map((text, index) => (
-          <button
-            key={index}
-            onClick={() => sendMessageSuggestion(text)}
-            style={{
-              whiteSpace: "nowrap",
-              padding: "0.5rem 1rem",
-              border: `1px solid ${colorCode}`,
-              borderRadius: "9999px",
-              backgroundColor: "white",
-              cursor: "pointer",
-              fontSize: "14px",
-              color: colorCode,
-              flexShrink: 0,
-            }}
-            onMouseEnter={(e) => {
-              (e.currentTarget.style.backgroundColor = "#f3f3f3");
-            }}
-            onMouseLeave={(e) => {
-              (e.currentTarget.style.backgroundColor = "white");
-            }}
-          >
-            {text}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}