shopify-chatbot-widget 1.0.4 → 1.0.5

package/package.json

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

package/src/Chatbot/Chatbot.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect,useCallback } from 'react';
 import { useChatbotData } from '../hooks/useChatbotData';
 import ChatSessions from './components/Sessions/RenderList';
 import CreateSession from './components/Sessions/CreateSession';
@@ -10,15 +10,18 @@ import { LoadingOutlined } from '@ant-design/icons';
 import { Spin } from 'antd';
 import { motion, AnimatePresence } from 'framer-motion';
 import CartLayout from './components/Cart/Index';
-
+import TryOnLayout from './components/TryOn/View';
+import { useCart } from '../hooks/useCart';
 const Chatbot: React.FC = () => {
-  const [open, setOpen] = useState(false);
-  const [viewMode, setViewMode] = useState<'sessions' | 'create' | 'messenger' | 'cartView' >('sessions');
+  const [open, setOpen] = useState(true);
+const [viewMode, setViewMode] = useState<'sessions' | 'create' | 'messenger' | 'cartView' | 'tryOn'>('sessions');
   const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
   const [HasInfo, setHasInfo] = useState(false);
   const [activeAgentName, setActiveAgentName] = useState('');
   const [activeAgentImage, setActiveAgentImage] = useState('');
   const [newSession, setNewSession] = useState(false);
+  const [tryOnProduct, setTryOnProduct] = useState<any>(null);
+  const [counts, setCounts] = useState<Record<string, number>>({});
 
 
   const {
@@ -32,7 +35,8 @@ const Chatbot: React.FC = () => {
     calendly,
     disbleCheckout,
     chatbotName,
-    setMessagesSuggestions
+    setMessagesSuggestions,
+    enableTryOn
   } = useChatbotData();
 
   const [visitorData, setVisitorData] = useState<{ visitorId: string; country: string } | null>(null);
@@ -141,6 +145,30 @@ const Chatbot: React.FC = () => {
     }
   }, [isFetchingDetails]);
 
+
+
+  
+  const { addToCart, removeFromCart } = useCart(activeSessionId ?? "");
+  
+  const handleToCart = useCallback(
+    async (variantId: string, name: string, variantImage: string,price: string ,qty = 1) => {
+      try {
+        await addToCart(variantId, name, qty, variantImage,price);
+
+      } catch (err: any) {
+      }
+    },
+    [addToCart]
+  );
+  
+  
+  const handleRemoveFromCart = useCallback(
+    async (variantId: string, qty = 1) => {
+      await removeFromCart(variantId, qty);
+    },
+    [removeFromCart]
+  );
+
   return (
     <div>
       {open && (
@@ -222,6 +250,29 @@ const Chatbot: React.FC = () => {
 
                 </motion.div>
               )}
+
+            {viewMode === 'tryOn' && (
+            <motion.div
+              key="tryOn"
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.9 }}
+              transition={{ duration: 0.3 }}
+              style={{ height: '100%' }}
+            >
+              <TryOnLayout
+                product={tryOnProduct} // <--- PASS DATA HERE
+                colorCode={colorCode}
+                setOpen={(v: boolean) => (v ? requestOpen() : requestClose())}
+                onBack={() => setViewMode("messenger")}
+                handleAddToCart={handleToCart}
+                handleRemoveFromCart={handleRemoveFromCart}
+                counts={counts}
+                setCounts={setCounts}
+              />
+            </motion.div>
+          )}
+
            
 
               {viewMode === 'messenger' && activeSessionId && (
@@ -246,9 +297,15 @@ const Chatbot: React.FC = () => {
                     setNewSession={setNewSession}
                     Opened={open}
                     setView={setViewMode}
+                    onTryOnSelect={(product: any) => {
+                    setTryOnProduct(product);
+                    setViewMode('tryOn');
+                  
+                }}
                     userType={userType}
                     disbleCheckout={disbleCheckout}
                     setMessagesSuggestions={setMessagesSuggestions}
+                    enableTry={enableTryOn}
                   />
                 </motion.div>
               )}

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

@@ -24,6 +24,8 @@ interface AssistantMessageProps {
   disableCheckout?:boolean;
   handleAddToCart: (variantId: string, name: string,variantImage:string, price:string,qty?: number) => Promise<void>;
   handleRemoveFromCart: (variantId: string, qty?: number) => Promise<void>;
+   onTryOnSelect: (product: any) => void; // Add this
+enableTry:boolean;
 }
 
 const AssistantMessage: FC<AssistantMessageProps> = ({
@@ -31,7 +33,9 @@ const AssistantMessage: FC<AssistantMessageProps> = ({
   colorCode,
   disableCheckout,
   handleAddToCart,
-  handleRemoveFromCart
+  handleRemoveFromCart,
+  onTryOnSelect,
+  enableTry
 
 }) => {
   const [counts, setCounts] = useState<Record<string, number>>({});
@@ -192,7 +196,10 @@ const AssistantMessage: FC<AssistantMessageProps> = ({
           currentSlide={currentSlide}
           totalSlides={totalSlides}
           sliderRef={sliderRef}
-          disableCheckout={disableCheckout}  // hides the – + controls
+          disableCheckout={disableCheckout} 
+          onTryOnSelect={onTryOnSelect}
+          enableTry={enableTry}
+          // hides the – + controls
 
 
         />

package/src/Chatbot/components/Messages/Carousel/CardSwiper.tsx

@@ -1,10 +1,9 @@
-import React, { useState } from "react";
+import React from "react";
 import type { FC } from "react";
 import "keen-slider/keen-slider.min.css";
 import type { KeenSliderInstance } from "keen-slider/react";
 import "./SallaSwiper.css";
 import { Button } from "antd";
-import TryOnBox from "./TryOn";
 
 interface ProductVariant {
   variant_id: string;
@@ -34,6 +33,8 @@ interface Props {
   sliderInstance: React.MutableRefObject<KeenSliderInstance | null>;
   currentSlide: number;
   totalSlides: number;
+  onTryOnSelect: (product: ProductVariant) => void;
+  enableTry:boolean;
 }
 
 const ProductCarousel: FC<Props> = ({
@@ -49,11 +50,13 @@ const ProductCarousel: FC<Props> = ({
   sliderRef,
   totalSlides,
   disableCheckout = false,
+  onTryOnSelect,
+  enableTry
+  
 }) => {
   if (!totalSlides || totalSlides === 0) return null;
 
   // track which variant is open for Try On
-  const [openTryOn, setOpenTryOn] = useState<string | null>(null);
 
   return (
     <section
@@ -125,7 +128,6 @@ const ProductCarousel: FC<Props> = ({
             await handleRemoveFromCart(currentVariant.variant_id, 1);
           };
 
-          const isTryOnOpen = openTryOn === currentVariant.variant_id;
          
           return (
             <article
@@ -227,24 +229,24 @@ const ProductCarousel: FC<Props> = ({
 
                   {/* Try On toggle button (kept) */}
  
+                  {enableTry?
                     <Button
-                      style={{ backgroundColor: colorCode, color: "white" }}
-                      className="px-6 py-2 rounded-lg shadow-md transition"
-                      onClick={() =>
-                        setOpenTryOn(isTryOnOpen ? null : currentVariant.variant_id)
-                      }
-                    >
-                      {isTryOnOpen ? "Close Try On" : "Try On"}
-                    </Button>
+                    style={{ backgroundColor: colorCode, color: "white" }}
+                    className="px-6 py-2 rounded-lg shadow-md transition"
+                    onClick={() => {
+                        onTryOnSelect(currentVariant); 
+                    }}
+                  >
+                    Try On
+                  </Button>
+                  :<></>
+                }
+                
 
                 </div>
 
                 {/* Try On panel */}
-                { isTryOnOpen && (
-                  <div className="mt-4">
-                    <TryOnBox productID={currentVariant.variant_id} productImage={currentVariant.image} />
-                  </div>
-                )}
+               
               </div>
             </article>
           );

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

@@ -29,6 +29,7 @@ interface Message {
   isBookings?: boolean;
 }
 
+
 interface ChatMessagesProps {
   messages: Message[];
   colorCode: string;
@@ -53,9 +54,11 @@ interface ChatMessagesProps {
   calendly: string;
   disableCheckout: boolean;
   isfetchingMessage: boolean;
-
   messagesSuggestions: string[];
   sendMessageSuggestion: (message: string) => Promise<void>;
+  onTryOnSelect: (product: any) => void; // Add this
+  enableTry:boolean;
+
 }
 
 const InlineSuggestions: React.FC<{
@@ -120,6 +123,8 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
   isfetchingMessage,
   messagesSuggestions,
   sendMessageSuggestion,
+  onTryOnSelect,
+  enableTry
 }) => {
   const bottomRef = useRef<HTMLDivElement>(null);
 
@@ -173,7 +178,11 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
         if (msg.typing) {
           return (
             <div key={i} className="chat-msg typing">
-              <Typing color={colorCode} />
+            <Typing 
+              dotColor={colorCode} 
+              bubbleColor="#FFFF" 
+              size={10} 
+            />            
             </div>
           );
         }
@@ -252,6 +261,8 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
                     disableCheckout={disableCheckout}
                     handleAddToCart={handleAddToCart}
                     handleRemoveFromCart={handleRemoveFromCart}
+                    onTryOnSelect={onTryOnSelect}
+                    enableTry={enableTry}
                   />
                 ) : userType === "salla" ? (
                   <SallaAsssiatnt
@@ -259,13 +270,17 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
                     colorCode={colorCode}
                     handleAddToCart={handleAddToCart}
                     handleRemoveFromCart={handleRemoveFromCart}
-                  />
+                    // enableTry={enableTry}
+
+                    />
                 ) : (
                   <ZidAssistantChatMessage
                     message={msg.content || msg.text || ""}
                     colorCode={colorCode}
                     handleAddToCart={handleAddToCart}
                     handleRemoveFromCart={handleRemoveFromCart}
+                    // enableTry={enableTry}
+
                   />
                 )}
               </div>

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

@@ -22,6 +22,7 @@ interface AssistantMessageProps {
   isBusiness?: boolean;
   handleAddToCart: (variantId: string, name: string,variantImage:string,price:string,  qty?: number) => Promise<void>;
   handleRemoveFromCart: (variantId: string, qty?: number) => Promise<void>;
+
 }
 
 const SallaAsssiatnt: FC<AssistantMessageProps> = ({

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

@@ -1,134 +1,55 @@
-/* ===== BASE TYPING INDICATOR ===== */
-.typing-indicator {
+/* Typing.css */
+
+.typing-container {
+  /* Layout */
   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;
+  justify-content: center;
+  gap: var(--typing-gap);
+  
+  /* Appearance */
+  background-color: var(--typing-bg);
+  padding: var(--typing-padding);
+  border-radius: 9999px; /* Pill shape */
+  
+  /* Optional: Add a subtle shadow for depth */
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  
+  /* Prevent layout shift */
+  will-change: transform;
 }
 
 .typing-dot {
+  width: var(--typing-dot-size);
+  height: var(--typing-dot-size);
+  background-color: var(--typing-dot-color);
   border-radius: 50%;
-  display: inline-block;
-}
-
-/* ===== DOTS VARIANT (Default - Smooth bounce) ===== */
-.typing-dots .typing-dot {
-  animation: bounceDot 1.4s infinite ease-in-out both;
+  
+  /* Animation definition */
+  animation: typingBounce 1.4s infinite ease-in-out both;
 }
 
-.typing-dots .typing-dot:nth-child(1) {
+/* Stagger the animations */
+.typing-dot:nth-child(1) {
   animation-delay: -0.32s;
 }
 
-.typing-dots .typing-dot:nth-child(2) {
+.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) {
+.typing-dot:nth-child(3) {
   animation-delay: 0s;
 }
 
-.typing-boxes .typing-dot:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.typing-boxes .typing-dot:nth-child(3) {
-  animation-delay: 0.4s;
-}
-
-@keyframes pulseBox {
-  0%, 100% {
+/* The Animation Keyframes */
+@keyframes typingBounce {
+  0%, 80%, 100% { 
     transform: scale(0.8);
     opacity: 0.5;
   }
-  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);
+  40% { 
+    transform: scale(1) translateY(-4px); /* Slight lift */
     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,30 +2,41 @@ import React from 'react';
 import './Typing.css';
 
 interface TypingProps {
-  color?: string;
+  /** Color of the moving dots */
+  dotColor?: string;
+  /** Color of the bubble background */
+  bubbleColor?: string;
+  /** Size of the dots in pixels */
   size?: number;
-  variant?: 'dots' | 'boxes' | 'wave'; // Different animation styles
+  /** Optional class name for the container */
+  className?: string;
 }
 
 const Typing: React.FC<TypingProps> = ({ 
-  color = '#6b7280', 
-  size = 8, 
-  variant = 'dots' 
+  dotColor = '#6b7280', // Default dark grey
+  bubbleColor = '#e5e7eb', // Default light grey bubble
+  size = 8,
+  className = ''
 }) => {
+  // We pass dynamic values as CSS variables for better performance
+  const style = {
+    '--typing-dot-color': dotColor,
+    '--typing-bg': bubbleColor,
+    '--typing-dot-size': `${size}px`,
+    '--typing-gap': `${size * 0.5}px`, // Gap scales with size
+    '--typing-padding': `${size * 1.25}px ${size * 1.5}px` // Padding scales with size
+  } as React.CSSProperties;
+
   return (
-    <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 
+      className={`typing-container ${className}`} 
+      style={style}
+      role="status"
+      aria-label="Typing..."
+    >
+      <span className="typing-dot" />
+      <span className="typing-dot" />
+      <span className="typing-dot" />
     </div>
   );
 };

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

@@ -22,6 +22,7 @@ interface AssistantMessageProps {
   isBusiness?: boolean;
   handleAddToCart: (variantId: string, name: string,variantImage:string,price:string, qty?: number) => Promise<void>;
   handleRemoveFromCart: (variantId: string, qty?: number) => Promise<void>;
+
 }
 
 const SallaAsssiatnt: FC<AssistantMessageProps> = ({
@@ -29,6 +30,7 @@ const SallaAsssiatnt: FC<AssistantMessageProps> = ({
   colorCode,
   handleAddToCart,
   handleRemoveFromCart,
+  
 }) => {
   const [counts, setCounts] = useState<Record<string, number>>({});
   const [selectedVariants, setSelectedVariants] = useState<Record<string, string>>({});

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

@@ -27,11 +27,14 @@ type MessengerProps = {
   disableForm: boolean;
   sessionId:string;
   setOpen: (v: boolean) => void;
-  setView: React.Dispatch<React.SetStateAction<'sessions' | 'create' | 'messenger' | 'cartView'>>;
+  setView: React.Dispatch<React.SetStateAction<'sessions' | 'create' | 'messenger' | 'cartView' | 'tryOn'>>;
   setNewSession: (v: boolean) => void;
  Opened: boolean;
  calendly:string;
  disbleCheckout:boolean;
+  onTryOnSelect: (product: any) => void; 
+  enableTry: boolean;
+
 };
 
 interface UploadImageResponse {
@@ -59,7 +62,9 @@ const Messenger: React.FC<MessengerProps> = ({
   Opened,
   setView,
   calendly,
-  disbleCheckout
+  disbleCheckout,
+  onTryOnSelect,
+  enableTry
 }) => {
   const [input, setInput] = useState('');
   const [selectedImage, setSelectedImage] = useState<File | null>(null);
@@ -550,7 +555,9 @@ const socket = useChatSocket(sessionId, handleSocketData);
           isfetchingMessage={isFetchingMessages}
           messagesSuggestions={messagesSuggestions}
           sendMessageSuggestion={sendMessageSuggestion}
-        />
+          onTryOnSelect={onTryOnSelect}
+          enableTry={enableTry}
+       />
 
 
 

package/src/Chatbot/components/Sessions/RenderList.tsx

@@ -45,6 +45,7 @@ const ChatSessions: React.FC<ChatSessionsProps> = ({
         `${config.apiUrl}get-chatlogs-by-ip/?visitor_id=${visitorId}&company_username=${localStorage.getItem('company_username')}`
       );
       const data = await res.json();
+   
 
       const mapped: ChatSession[] = data.map((item: any) => {
         const createdDate = new Date(item.date);
@@ -63,6 +64,7 @@ const ChatSessions: React.FC<ChatSessionsProps> = ({
       });
 
       setSessions(mapped);
+
     } catch (err) {
       console.error('Failed to load sessions:', err);
     } finally {
@@ -70,6 +72,7 @@ const ChatSessions: React.FC<ChatSessionsProps> = ({
     }
   };
 
+
   useEffect(() => {
     if (visitorId) {
       fetchSessions();