shopify-chatbot-widget 0.8.2 → 0.8.4

package/package.json

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

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/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/config.tsx

@@ -1,8 +1,8 @@
 
 
 const config = {
-    apiUrl:'https://crmtest-3lct.onrender.com/api/',
-    websocketUrl:'wss://crmtest-3lct.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',

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;
 
 
 }