shopify-chatbot-widget 0.8.3 → 0.8.5

package/package.json

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

package/src/Chatbot/Chatbot.tsx

@@ -11,7 +11,7 @@ import { Spin } from 'antd';
 import { motion, AnimatePresence } from 'framer-motion';
 
 const Chatbot: React.FC = () => {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(true);
   const [viewMode, setViewMode] = useState<'sessions' | 'create' | 'messenger'>('sessions');
   const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
   const [HasInfo, setHasInfo] = useState(false);

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

@@ -129,11 +129,7 @@ const ProductCarousel: FC<Props> = ({
           };
 
           const isTryOnOpen = openTryOn === currentVariant.variant_id;
-          const canTryOn =
-            currentVariant.tag
-              ? currentVariant.tag.toLowerCase() === "clothing"
-              : true; // show by default unless you want to gate strictly by tag
-
+         
           return (
             <article
               key={tag}
@@ -233,7 +229,7 @@ const ProductCarousel: FC<Props> = ({
                   )}
 
                   {/* Try On toggle button (kept) */}
-                  {canTryOn && (
+ 
                     <Button
                       style={{ backgroundColor: colorCode, color: "white" }}
                       className="px-6 py-2 rounded-lg shadow-md transition"
@@ -243,11 +239,11 @@ const ProductCarousel: FC<Props> = ({
                     >
                       {isTryOnOpen ? "Close Try On" : "Try On"}
                     </Button>
-                  )}
+
                 </div>
 
                 {/* Try On panel */}
-                {canTryOn && isTryOnOpen && (
+                { isTryOnOpen && (
                   <div className="mt-4">
                     <TryOnBox productID={currentVariant.variant_id} productImage={currentVariant.image} />
                   </div>

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

@@ -1,8 +1,10 @@
-import React from 'react';
+import React,{useState} 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;
@@ -35,10 +37,10 @@ const SallaProductCarousel: FC<Props> = ({
   groupedProducts,
   selectedVariants,
   setSelectedVariants,
-  counts,
-  setCounts,
-  handleAddToCart,
-  handleRemoveFromCart,
+  // counts,
+  // setCounts,
+  // handleAddToCart,
+  // handleRemoveFromCart,
   colorCode = '#7F28F8',
   shortenName,
   sliderRef,
@@ -47,6 +49,7 @@ const SallaProductCarousel: FC<Props> = ({
   totalSlides,
 }) => {
   if (!totalSlides || totalSlides === 0) return null;
+  const [openTryOn, setOpenTryOn] = useState<string | null>(null);
 
   return (
     <section
@@ -69,7 +72,7 @@ const SallaProductCarousel: FC<Props> = ({
 
           if (!currentVariant) return null;
 
-          const count = counts[currentVariant.variant_id] || 0;
+          // const count = counts[currentVariant.variant_id] || 0;
 
           // Build unique, cleaned list of options (exclude empty/'none')
           const options = Array.from(
@@ -91,27 +94,30 @@ const SallaProductCarousel: FC<Props> = ({
             }
           };
 
-          const increment = async () => {
-            setCounts(prev => ({
-              ...prev,
-              [currentVariant.variant_id]: (prev[currentVariant.variant_id] || 0) + 1,
-            }));
-            await handleAddToCart(currentVariant.variant_id, currentVariant.name, 1);
-          };
-
-          const decrement = async () => {
-            if (count === 0) return;
-            setCounts(prev => ({
-              ...prev,
-              [currentVariant.variant_id]: Math.max(
-                0,
-                (prev[currentVariant.variant_id] || 0) - 1
-              ),
-            }));
-            await handleRemoveFromCart(currentVariant.variant_id, 1);
-          };
+          // const increment = async () => {
+          //   setCounts(prev => ({
+          //     ...prev,
+          //     [currentVariant.variant_id]: (prev[currentVariant.variant_id] || 0) + 1,
+          //   }));
+          //   await handleAddToCart(currentVariant.variant_id, currentVariant.name, 1);
+          // };
+
+          // const decrement = async () => {
+          //   if (count === 0) return;
+          //   setCounts(prev => ({
+          //     ...prev,
+          //     [currentVariant.variant_id]: Math.max(
+          //       0,
+          //       (prev[currentVariant.variant_id] || 0) - 1
+          //     ),
+          //   }));
+          //   await handleRemoveFromCart(currentVariant.variant_id, 1);
+          // };
 
           // Ensure the select has a stable value (fallback to first option)
+
+          const isTryOnOpen = openTryOn === currentVariant.variant_id;
+
           const selectValue = (currentVariant.option ?? options[0] ?? '');
 
           return (
@@ -174,8 +180,17 @@ const SallaProductCarousel: FC<Props> = ({
                   </div>
                 )}
 
-                <div className="sallaX-cta" aria-label="Quantity controls">
-                  <button
+
+                  <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>
+                  {/* <button
                     type="button"
                     className="sallaX-qty sallaX-qty--minus"
                     onClick={decrement}
@@ -194,8 +209,14 @@ const SallaProductCarousel: FC<Props> = ({
                     aria-label="Increase quantity"
                   >
                     +
-                  </button>
-                </div>
+                  </button> */}
+
+                { isTryOnOpen && (
+                  <div className="mt-4">
+                    <TryOnBox productID={currentVariant.variant_id} productImage={currentVariant.image} />
+                  </div>
+                )}
+
               </div>
             </article>
           );

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

@@ -1,8 +1,10 @@
-import React from 'react';
+import React,{useState} from 'react';
 import type { FC } from 'react';
 import 'keen-slider/keen-slider.min.css';
 import type { KeenSliderInstance } from 'keen-slider/react';
+import { Button } from 'antd';
 import './SallaSwiper.css';
+import TryOnBox from "./TryOn";
 
 interface ProductVariant {
   variant_id: string;
@@ -31,14 +33,16 @@ interface Props {
   totalSlides: number;
 }
 
+
+
 const ZidProductCarousel: FC<Props> = ({
   groupedProducts,
   selectedVariants,
   setSelectedVariants,
-  counts,
-  setCounts,
-  handleAddToCart,
-  handleRemoveFromCart,
+  // counts,
+  // setCounts,
+  // handleAddToCart,
+  // handleRemoveFromCart,
   colorCode = '#7F28F8',
   shortenName,
   sliderRef,
@@ -46,6 +50,9 @@ const ZidProductCarousel: FC<Props> = ({
   // currentSlide,   // currently unused
   totalSlides,
 }) => {
+
+  const [openTryOn, setOpenTryOn] = useState<string | null>(null);
+
   if (!totalSlides || totalSlides === 0) return null;
 
   return (
@@ -69,7 +76,7 @@ const ZidProductCarousel: FC<Props> = ({
 
           if (!currentVariant) return null;
 
-          const count = counts[currentVariant.variant_id] || 0;
+          // const count = counts[currentVariant.variant_id] || 0;
 
           // Build unique, cleaned list of options (exclude empty/'none')
           const options = Array.from(
@@ -91,25 +98,27 @@ const ZidProductCarousel: FC<Props> = ({
             }
           };
 
-          const increment = async () => {
-            setCounts(prev => ({
-              ...prev,
-              [currentVariant.variant_id]: (prev[currentVariant.variant_id] || 0) + 1,
-            }));
-            await handleAddToCart(currentVariant.variant_id, currentVariant.name, 1);
-          };
-
-          const decrement = async () => {
-            if (count === 0) return;
-            setCounts(prev => ({
-              ...prev,
-              [currentVariant.variant_id]: Math.max(
-                0,
-                (prev[currentVariant.variant_id] || 0) - 1
-              ),
-            }));
-            await handleRemoveFromCart(currentVariant.variant_id, 1);
-          };
+          // const increment = async () => {
+          //   setCounts(prev => ({
+          //     ...prev,
+          //     [currentVariant.variant_id]: (prev[currentVariant.variant_id] || 0) + 1,
+          //   }));
+          //   await handleAddToCart(currentVariant.variant_id, currentVariant.name, 1);
+          // };
+
+          // const decrement = async () => {
+          //   if (count === 0) return;
+          //   setCounts(prev => ({
+          //     ...prev,
+          //     [currentVariant.variant_id]: Math.max(
+          //       0,
+          //       (prev[currentVariant.variant_id] || 0) - 1
+          //     ),
+          //   }));
+          //   await handleRemoveFromCart(currentVariant.variant_id, 1);
+          // };
+
+          const isTryOnOpen = openTryOn === currentVariant.variant_id;
 
           // Ensure the select has a stable value (fallback to first option)
           const selectValue = (currentVariant.option ?? options[0] ?? '');
@@ -174,7 +183,20 @@ const ZidProductCarousel: FC<Props> = ({
                   </div>
                 )}
 
-                <div className="sallaX-cta" aria-label="Quantity controls">
+
+
+                  <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>
+
+ 
+                {/* <div className="sallaX-cta" aria-label="Quantity controls">
                   <button
                     type="button"
                     className="sallaX-qty sallaX-qty--minus"
@@ -195,7 +217,13 @@ const ZidProductCarousel: FC<Props> = ({
                   >
                     +
                   </button>
-                </div>
+                </div> */}
+              { isTryOnOpen && (
+                  <div className="mt-4">
+                    <TryOnBox productID={currentVariant.variant_id} productImage={currentVariant.image} />
+                  </div>
+                )}
+
               </div>
             </article>
           );

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

@@ -1,22 +1,50 @@
-import React, { useState } from 'react';
-import { Button, Spin } from 'antd';
-import { LoadingOutlined, CloudUploadOutlined } from '@ant-design/icons';
+import React, { useState,useEffect } from 'react';
+import { Button, Spin, Alert } from 'antd';
+import { LoadingOutlined, CloudUploadOutlined, ReloadOutlined } from '@ant-design/icons';
 import config from '../../../../hooks/config';
 
 interface TryOnProps {
   productImage: string; // product variant image URL
-  productID:string;
+  productID: string;
 }
 
-const TryOnBox: React.FC<TryOnProps> = ({ productImage,productID }) => {
+const sweetMessages = [
+  "You look amazing in this! ✨",
+  "Wow, this really suits your style 💜",
+  "Looking sharp — that’s a vibe 😎",
+  "Perfect fit! This could be your new favorite 👌",
+  "You’re rocking this look 💯",
+  "That outfit has your name written all over it 💃",
+  "🔥 Stunning choice! You wear it so well.",
+];
+
+const loadingMessages = [
+  "✨ Analyzing your style...",
+  "🧵 Matching the product perfectly...",
+  "🎨 Adjusting colors and lighting...",
+  "👗 Styling you up...",
+  "💎 Almost ready, polishing the details..."
+];
+
+
+// cycle messages while loading
+
+
+
+const TryOnBox: React.FC<TryOnProps> = ({ productImage, productID }) => {
   const [userImage, setUserImage] = useState<string | null>(null);
   const [resultImage, setResultImage] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const [sweetMessage, setSweetMessage] = useState<string | null>(null);
+  const [loadingIndex, setLoadingIndex] = useState(0);
 
-  // Call your Django Ark API
+  // Call Django Ark API
   const sendToArk = async (file: File) => {
     setLoading(true);
     setResultImage(null);
+    setMessage(null);
+    setSweetMessage(null);
 
     const reader = new FileReader();
     reader.onload = async () => {
@@ -27,22 +55,30 @@ const TryOnBox: React.FC<TryOnProps> = ({ productImage,productID }) => {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
-            userImageUrl: base64UserImage, // can also be a hosted URL
-            productImageUrl: productImage, // product image URL
-            productId:productID,
-            username:localStorage.getItem('company_username')
+            userImageUrl: base64UserImage,
+            productImageUrl: productImage,
+            productId: productID,
+            username: localStorage.getItem('company_username'),
           }),
         });
 
         const data = await response.json();
 
-        if (data.resultImage) {
-          setResultImage(data.resultImage); // base64 string or URL from backend
+        if (response.ok && data.resultImage) {
+          setResultImage(data.resultImage);
+
+          // Pick a random sweet message
+          const randomMsg = sweetMessages[Math.floor(Math.random() * sweetMessages.length)];
+          setSweetMessage(randomMsg);
         } else {
-          console.error('Ark API error:', data);
+          setMessage({
+            type: 'error',
+            text: data.error || 'Something went wrong while generating the try-on.',
+          });
         }
       } catch (err) {
         console.error('Error calling Ark API:', err);
+        setMessage({ type: 'error', text: 'Failed to reach Try-On service. Please try again.' });
       } finally {
         setLoading(false);
       }
@@ -57,13 +93,39 @@ const TryOnBox: React.FC<TryOnProps> = ({ productImage,productID }) => {
     }
   };
 
+  useEffect(() => {
+    if (loading) {
+      setLoadingIndex(0);
+      const interval = setInterval(() => {
+        setLoadingIndex((prev) => {
+          if (prev < loadingMessages.length - 1) {
+            return prev + 1; // move forward
+          }
+          return prev; // stay at the last message
+        });
+      }, 1800); // change every 1.8s
+      return () => clearInterval(interval);
+    }
+  }, [loading]);
+  
   return (
-    <div className="mt-4 border rounded-lg p-4 bg-gray-50">
-      {/* Upload prompt */}
+    <div className="mt-4 border rounded-xl p-6 bg-white shadow-sm">
+      {/* Messages */}
+      {message && (
+        <Alert
+          type={message.type}
+          message={message.text}
+          showIcon
+          closable
+          className="mb-4"
+        />
+      )}
+
+      {/* Upload Box */}
       {!userImage && !resultImage && !loading && (
-        <label className="flex flex-col items-center justify-center border-2 border-dashed border-gray-400 rounded-lg w-full h-40 cursor-pointer hover:bg-gray-100 transition">
-          <CloudUploadOutlined style={{ fontSize: 28, marginBottom: 8 }} />
-          <span className="text-gray-500">Click or Drop your photo here</span>
+        <label className="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-xl w-full h-44 cursor-pointer hover:border-purple-500 hover:bg-purple-50 transition">
+          <CloudUploadOutlined style={{ fontSize: 34, marginBottom: 8, color: '#7F28F8' }} />
+          <span className="text-gray-500 font-medium">Click to upload a picture</span>
           <input
             type="file"
             accept="image/*"
@@ -75,29 +137,37 @@ const TryOnBox: React.FC<TryOnProps> = ({ productImage,productID }) => {
 
       {/* Loader */}
       {loading && (
-        <div className="flex flex-col items-center justify-center h-40">
-          <Spin indicator={<LoadingOutlined style={{ fontSize: 32 }} spin />} />
-          <p className="mt-2 text-gray-600">Generating your try-on...</p>
+        <div className="flex flex-col items-center justify-center h-44 text-center">
+          <Spin indicator={<LoadingOutlined style={{ fontSize: 36, color: '#7F28F8' }} spin />} />
+          <p className="mt-2 text-gray-700 font-medium">{loadingMessages[loadingIndex]}</p>
         </div>
       )}
 
+
+
       {/* Result Preview */}
       {!loading && resultImage && (
-        <div className="flex flex-col items-center">
-          <p className="mb-2 text-sm font-medium">✨ Try-On Result</p>
+        <div className="flex flex-col items-center text-center">
+          {/* <p className="mb-2 text-sm font-semibold text-gray-700">✨ Try-On Result</p> */}
           <img
             src={resultImage}
             alt="Result"
-            className="max-h-64 object-contain rounded-md border"
+            className="max-h-72 object-contain rounded-lg border shadow-sm"
           />
 
+          {/* Sweet Message */}
+          {sweetMessage && (
+            <p className="mt-3 text-purple-600 font-medium italic">{sweetMessage}</p>
+          )}
+
           <Button
-          style={{margin:'4px'}}
-            type="default"
-            className="mt-3"
+            icon={<ReloadOutlined />}
+            style={{ marginTop: '12px' }}
             onClick={() => {
               setUserImage(null);
               setResultImage(null);
+              setMessage(null);
+              setSweetMessage(null);
             }}
           >
             Try Another

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

@@ -26,6 +26,7 @@ interface Message {
   audio_url?:string;
   isConnect?:boolean;
   calendly?:boolean;
+  isBookings?:boolean;
 }
 
 interface ChatMessagesProps {
@@ -123,6 +124,20 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
         )
       }
 
+      if (msg.isBookings){
+          return (
+            <div
+              key={i}
+              style={{
+                borderRadius: 5,
+                color: "white",
+                width: "100%",
+              }}
+            >
+              <CalendlyEmbeds calendlyLink={calendly} />
+            </div>
+          );
+      }
 
 
 
@@ -147,20 +162,7 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
           );
         }
 
-        if (msg.calendly) {
-          return (
-            <div
-              key={i}
-              style={{
-                borderRadius: 5,
-                color: "white",
-                width: "100%",
-              }}
-            >
-              <CalendlyEmbeds calendlyLink={calendly} />
-            </div>
-          );
-        }
+      
       
 
      

package/src/hooks/useChatbotAPI.tsx

@@ -83,23 +83,33 @@ export const useChatbotAPI = (params: Params) => {
           const data = await res.json();
 
           if (data.message_history) {
-            const assistantMessage = data.isConnect
-              ? {
-                  role: 'assistant',
-                  content: 'Your support request is on its way—please stand by!',
-                  isConnect: true,
-                  sender: 'Ai Agent',
-                  isBusiness: false,
-                  isHtml: data.isHtml,
-                }
-              : {
-                  role: 'assistant',
-                  content: data.message,
-                  sender: 'Ai Agent',
-                  isBusiness: false,
-                  isHtml: data.isHtml,
-                };
 
+            const assistantMessage = data.isConnect
+            ? {
+                role: 'assistant',
+                content: data.message,
+                isConnect: true,
+                sender: 'Ai Agent',
+                isBusiness: false,
+                isHtml: data.isHtml,
+              }
+            : data.isBookings
+            ? {
+                role: 'assistant',
+                content: data.message,
+                isBookings: true,
+                sender: 'Ai Agent',
+                isBusiness: false,
+                isHtml: data.isHtml,
+              }
+            : {
+                role: 'assistant',
+                content: data.message,
+                sender: 'Ai Agent',
+                isBusiness: false,
+                isHtml: data.isHtml,
+              };
+          
             // Send message through WebSocket if available
             if (socket?.readyState === WebSocket.OPEN) {
               socket.send(
@@ -121,7 +131,6 @@ export const useChatbotAPI = (params: Params) => {
               const filtered = prev.filter((msg) => !msg.typing);
               const updated = [...filtered, assistantMessage];
 
-              console.log(calendlyLink)
               // Add Calendly message if applicable
               if (
                 data.message &&

package/src/types/chatbot.ts

@@ -35,6 +35,7 @@ export interface ChatMessage {
   audio_url?: string;
   isConnect?:boolean;
   calendly?:boolean;
+  isBookings?:boolean;
 
 
 }