shopify-chatbot-widget 1.0.4 → 1.0.5

package/src/Chatbot/components/TryOn/View.tsx

@@ -0,0 +1,408 @@
+import React, { useState, useRef } from 'react';
+import { 
+  ArrowLeftOutlined, 
+  CloseOutlined, 
+  ThunderboltFilled,
+  LoadingOutlined,
+  CameraOutlined,
+  ReloadOutlined,
+} from '@ant-design/icons';
+import { Button, message, Spin } from 'antd';
+import axios from 'axios';
+import config from '../../../hooks/config';
+
+// --- Interfaces ---
+
+interface ProductData {
+  variant_id: string;
+  name: string;
+  image: string;
+  price: string;
+  description?: string;
+}
+
+interface TryOnProps {
+  product: ProductData | null;
+  colorCode: string;
+  onBack: () => void;
+  setOpen: (open: boolean) => void;
+  handleAddToCart: (variantId: string, name: string, variantImage: string, price: string, qty?: number) => Promise<void>;
+  handleRemoveFromCart: (variantId: string, qty?: number) => Promise<void>;
+  counts: Record<string, number>;
+  setCounts: React.Dispatch<React.SetStateAction<Record<string, number>>>;
+  visitorId?: string;
+}
+
+interface UploadResponse {
+  message: string;
+  image_url: string; 
+}
+
+interface TryOnResponse {
+  resultImage: string;
+  detected_category?: string;
+  detail?: string;
+}
+
+// --- Component ---
+
+const TryOnLayout: React.FC<TryOnProps> = ({ 
+  product, 
+  colorCode, 
+  onBack, 
+  setOpen, 
+  handleAddToCart,
+  handleRemoveFromCart,
+  counts,
+  setCounts,
+}) => {
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [generatedImage, setGeneratedImage] = useState<string | null>(null);
+  const [userImageBlob, setUserImageBlob] = useState<string | null>(null); 
+  const [selectedFile, setSelectedFile] = useState<File | null>(null); 
+  const [imageLoaded, setImageLoaded] = useState(false);
+  
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  
+  const themeColor = colorCode || '#7F28F8';
+
+  const activeProduct = product || {
+    variant_id: '0',
+    name: 'Unknown Product',
+    price: '0.00',
+    image: '', 
+  };
+
+  const count = counts[activeProduct.variant_id] || 0;
+
+  const currentState = !userImageBlob ? 'empty' : !generatedImage ? 'ready' : 'generated';
+
+  // --- Handlers (same pattern as ProductCarousel) ---
+
+  const increment = async () => {
+    setCounts(prev => ({
+      ...prev,
+      [activeProduct.variant_id]: (prev[activeProduct.variant_id] || 0) + 1,
+    }));
+    try {
+      await handleAddToCart(
+        activeProduct.variant_id,
+        activeProduct.name,
+        activeProduct.image,
+        activeProduct.price,
+        1
+      );
+    } catch (err: any) {
+      console.warn("Add to cart failed:", err.message);
+      setCounts(prev => ({
+        ...prev,
+        [activeProduct.variant_id]: (prev[activeProduct.variant_id] || 0) - 1,
+      }));
+    }
+  };
+
+  const decrement = async () => {
+    if (count === 0) return;
+    setCounts(prev => ({
+      ...prev,
+      [activeProduct.variant_id]: Math.max(0, (prev[activeProduct.variant_id] || 0) - 1),
+    }));
+    await handleRemoveFromCart(activeProduct.variant_id, 1);
+  };
+
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      const blobUrl = URL.createObjectURL(file);
+      setUserImageBlob(blobUrl);
+      setSelectedFile(file);
+      setGeneratedImage(null);
+      setImageLoaded(false);
+    }
+  };
+
+  const triggerFileUpload = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleGenerateTryOn = async () => {
+    if (!selectedFile || !activeProduct.image) return;
+
+    setIsGenerating(true);
+    setImageLoaded(false);
+
+    try {
+      const formData = new FormData();
+      formData.append('image', selectedFile);
+
+      const uploadRes = await axios.post<UploadResponse>(
+        `${config.apiUrl}upload-image/`, 
+        formData, 
+        { headers: { 'Content-Type': 'multipart/form-data' } }
+      );
+
+      const payload = {
+        userImageUrl: uploadRes.data.image_url,
+        productImageUrl: activeProduct.image,
+        username: localStorage.getItem('company_username'),
+        productId: activeProduct.variant_id,
+        aspect_ratio: "3:4"
+      };
+
+      const response = await axios.post<TryOnResponse>(`${config.apiUrl}ark-tryon/`, payload);
+
+      if (response.data?.resultImage) {
+        setGeneratedImage(response.data.resultImage);
+      } else {
+        throw new Error("No image returned");
+      }
+    } catch (error: any) {
+      message.error(error.response?.data?.detail || "Generation failed");
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handleReset = () => {
+    setUserImageBlob(null);
+    setSelectedFile(null);
+    setGeneratedImage(null);
+    setImageLoaded(false);
+  };
+
+  // --- Render States ---
+
+  const renderEmptyState = () => (
+    <div 
+      onClick={triggerFileUpload}
+      style={{
+        position: 'absolute', inset: 0,
+        display: 'flex', flexDirection: 'column',
+        alignItems: 'center', justifyContent: 'center',
+        background: '#f5f5f7', cursor: 'pointer',
+      }}
+    >
+      {activeProduct.image && (
+        <img src={activeProduct.image} alt=""
+          style={{
+            position: 'absolute', inset: 0, width: '100%', height: '100%',
+            objectFit: 'cover', opacity: 0.08, filter: 'blur(20px)',
+          }}
+        />
+      )}
+      <div style={{
+        width: 80, height: 80, borderRadius: '50%', background: themeColor,
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        marginBottom: 16, position: 'relative',
+      }}>
+        <CameraOutlined style={{ fontSize: 32, color: '#fff' }} />
+      </div>
+      <span style={{ fontSize: 17, fontWeight: 700, color: '#1a1a1a', marginBottom: 4 }}>
+        Upload Your Photo
+      </span>
+      <span style={{ fontSize: 13, color: '#999' }}>See yourself in this outfit</span>
+    </div>
+  );
+
+  const renderReadyState = () => (
+    <>
+      <div style={{ position: 'absolute', inset: 0, display: 'flex', overflow: 'hidden' }}>
+        <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
+          <img src={userImageBlob!} alt="Your photo" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+          <div style={{ position: 'absolute', top: 0, right: 0, bottom: 0, width: 1, background: 'rgba(255,255,255,0.6)' }} />
+          <div style={{
+            position: 'absolute', bottom: 10, left: 10,
+            background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(8px)',
+            color: '#fff', padding: '4px 10px', borderRadius: 14, fontSize: 11, fontWeight: 600,
+          }}>You</div>
+          <button
+            onClick={(e) => { e.stopPropagation(); triggerFileUpload(); }}
+            style={{
+              position: 'absolute', top: 10, left: 10,
+              background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(8px)',
+              border: 'none', borderRadius: 14, padding: '4px 10px',
+              fontSize: 11, fontWeight: 600, cursor: 'pointer',
+              display: 'flex', alignItems: 'center', gap: 4, color: '#333',
+            }}
+          >
+            <CameraOutlined style={{ fontSize: 11 }} /> Change
+          </button>
+        </div>
+        <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
+          <img src={activeProduct.image} alt="Product" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+          <div style={{
+            position: 'absolute', bottom: 10, right: 10,
+            background: themeColor, color: '#fff', padding: '4px 10px',
+            borderRadius: 14, fontSize: 11, fontWeight: 600,
+          }}>Outfit</div>
+        </div>
+      </div>
+      <button
+        onClick={handleGenerateTryOn}
+        style={{
+          position: 'absolute', left: '50%', bottom: 16, transform: 'translateX(-50%)',
+          background: themeColor, color: '#fff', border: 'none', borderRadius: 28,
+          padding: '14px 28px', fontSize: 15, fontWeight: 700, cursor: 'pointer',
+          display: 'flex', alignItems: 'center', gap: 8,
+          boxShadow: `0 8px 24px -4px ${themeColor}99`, zIndex: 10,
+        }}
+      >
+        <ThunderboltFilled style={{ fontSize: 18 }} /> Try It On
+      </button>
+    </>
+  );
+
+  const renderGeneratingState = () => (
+    <div style={{
+      position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
+      alignItems: 'center', justifyContent: 'center', background: '#f5f5f7',
+    }}>
+      <Spin indicator={<LoadingOutlined style={{ fontSize: 48, color: themeColor }} spin />} />
+      <span style={{ marginTop: 20, fontSize: 16, fontWeight: 700, color: '#1a1a1a' }}>Creating your look...</span>
+      <span style={{ marginTop: 4, fontSize: 12, color: '#999' }}>About 10 seconds</span>
+    </div>
+  );
+
+  const renderGeneratedState = () => (
+    <>
+      <img 
+        src={generatedImage!} alt="Try-on result"
+        style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: imageLoaded ? 1 : 0, transition: 'opacity 0.4s ease' }}
+        onLoad={() => setImageLoaded(true)}
+      />
+      {!imageLoaded && (
+        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#f5f5f7' }}>
+          <Spin indicator={<LoadingOutlined style={{ fontSize: 32, color: themeColor }} spin />} />
+        </div>
+      )}
+      <div style={{
+        position: 'absolute', bottom: 14, left: '50%', transform: 'translateX(-50%)',
+        display: 'flex', gap: 8, zIndex: 10,
+      }}>
+        <button onClick={handleReset} style={{
+          background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(12px)',
+          border: 'none', borderRadius: 22, padding: '10px 16px', fontSize: 13,
+          fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 5, color: '#333',
+        }}>
+          <ReloadOutlined style={{ fontSize: 13 }} /> New Photo
+        </button>
+        <button onClick={handleGenerateTryOn} style={{
+          background: themeColor, color: '#fff', border: 'none', borderRadius: 22,
+          padding: '10px 16px', fontSize: 13, fontWeight: 600, cursor: 'pointer',
+          display: 'flex', alignItems: 'center', gap: 5,
+        }}>
+          <ThunderboltFilled style={{ fontSize: 13 }} /> Redo
+        </button>
+      </div>
+    </>
+  );
+
+  const showCartControls = currentState === 'generated' && !isGenerating;
+
+  return (
+    <div style={{
+      display: 'flex', flexDirection: 'column', height: '100%', background: '#fff',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      position: 'relative', overflow: 'hidden',
+    }}>
+      
+      {/* Header */}
+      <div style={{
+        padding: '14px 16px', display: 'flex', alignItems: 'center',
+        justifyContent: 'space-between', background: '#fff', position: 'relative',
+        zIndex: 20, flexShrink: 0, borderBottom: '1px solid #f0f0f0',
+      }}>
+        <Button type="text" icon={<ArrowLeftOutlined style={{ fontSize: 16 }} />} onClick={onBack} style={{ width: 36, height: 36 }} />
+        <span style={{ fontWeight: 700, fontSize: 16, color: '#1a1a1a' }}>Virtual Try-On</span>
+        <Button type="text" icon={<CloseOutlined style={{ fontSize: 14 }} />} onClick={() => setOpen(false)} style={{ color: '#bbb', width: 36, height: 36 }} />
+      </div>
+
+      {/* Image Area */}
+      <div style={{ flex: 1, position: 'relative', background: '#e8e8e8', overflow: 'hidden', minHeight: 0 }}>
+        {isGenerating 
+          ? renderGeneratingState()
+          : currentState === 'empty' 
+            ? renderEmptyState()
+            : currentState === 'ready'
+              ? renderReadyState()
+              : renderGeneratedState()
+        }
+      </div>
+
+      <input type="file" ref={fileInputRef} style={{ display: 'none' }} accept="image/*" onChange={handleFileUpload} />
+
+      {/* Bottom Bar */}
+      <div style={{
+        flexShrink: 0, background: '#fff', borderTop: '1px solid #f0f0f0',
+        padding: '12px 16px', paddingBottom: 'max(12px, env(safe-area-inset-bottom))', zIndex: 30,
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+          {/* Thumbnail */}
+          <div style={{ width: 44, height: 44, borderRadius: 10, overflow: 'hidden', flexShrink: 0, background: '#f0f0f0' }}>
+            {activeProduct.image && <img src={activeProduct.image} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />}
+          </div>
+          
+          {/* Name + Price */}
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ fontSize: 14, fontWeight: 700, color: '#1a1a1a', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+              {activeProduct.name}
+            </div>
+            <div style={{ fontSize: 15, fontWeight: 700, color: themeColor, marginTop: 1 }}>
+              {activeProduct.price}
+            </div>
+          </div>
+
+          {/* +/- stepper (only after try-on generated) */}
+          {showCartControls ? (
+            <div style={{
+              display: 'flex', alignItems: 'center', background: '#f5f5f7',
+              borderRadius: 12, padding: 4, flexShrink: 0, animation: 'slideUp 0.3s ease',
+            }}>
+              <button
+                onClick={decrement} disabled={count === 0}
+                style={{
+                  width: 36, height: 36, borderRadius: 10, border: 'none',
+                  background: count > 0 ? '#fff' : 'transparent',
+                  cursor: count > 0 ? 'pointer' : 'default',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  color: count > 0 ? '#333' : '#ccc', fontSize: 16,
+                  boxShadow: count > 0 ? '0 1px 3px rgba(0,0,0,0.08)' : 'none',
+                  transition: 'all 0.15s ease',
+                }}
+                aria-label="Decrease quantity"
+              >–</button>
+              <span style={{ width: 34, textAlign: 'center', fontWeight: 700, fontSize: 15, color: '#1a1a1a' }}>
+                {count}
+              </span>
+              <button
+                onClick={increment}
+                style={{
+                  width: 36, height: 36, borderRadius: 10, border: 'none',
+                  background: '#fff', cursor: 'pointer',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  color: themeColor, fontSize: 16,
+                  boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
+                  transition: 'all 0.15s ease',
+                }}
+                aria-label="Increase quantity"
+              >+</button>
+            </div>
+          ) : (
+            <div style={{ fontSize: 11, color: '#bbb', textAlign: 'right', lineHeight: 1.3, flexShrink: 0 }}>
+              Try it on first,<br/>then add to cart
+            </div>
+          )}
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes slideUp {
+          from { opacity: 0; transform: translateY(10px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default TryOnLayout;

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/hooks/useChatbotAPI.tsx

@@ -81,7 +81,7 @@ export const useChatbotAPI = (params: Params) => {
 
         if (res.ok) {
           const data = await res.json();
-          console.log(data)
+  
 
           if (data.message_history) {
 

package/src/hooks/useChatbotData.tsx

@@ -25,6 +25,7 @@ export const useChatbotData = () => {
   const [restSuggestions, setRestSuggestions] = useState<string[]>([]);
   const [userType,setUserType]=useState('')
   const [disbleCheckout, setDisbleCheckout] = useState(false);
+  const [enableTryOn, setEnableTryon] = useState(true);
   const [chatbotName,setchatbotName]=useState('')
 
 
@@ -70,6 +71,7 @@ export const useChatbotData = () => {
       setCalendly(data.calendly_link ?? null);
       setDisbleCheckout(data.disable_checkout)
       setchatbotName(data.chatbot_name)
+      setEnableTryon(data.enable_try_on)
 
 
 
@@ -132,6 +134,7 @@ export const useChatbotData = () => {
     restSuggestions,
     userType,
     disbleCheckout,
-    chatbotName
+    chatbotName,
+    enableTryOn
   };
 };

package/src/types/chatbot.ts

@@ -15,6 +15,7 @@ export interface ChatbotDetailsResponse {
     mode:string;
     disable_checkout:boolean;
     chatbot_name:string;
+    enable_try_on:boolean;
   };
 }