shopify-chatbot-widget 0.7.8 → 0.8.0

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

@@ -0,0 +1,177 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Mail } from 'lucide-react';
+import config from '../../../hooks/config';
+
+interface SupportConnectProps {
+  sessionId?: string;
+  colorCode?: string;
+}
+
+type Stage = 'email_sent' | 'connecting' | 'auto';
+
+interface SupportData {
+  userImage?: string;
+  agentName?: string;
+  companyImage?: string;
+  agentAvatar?: string;
+}
+
+const SupportConnect: React.FC<SupportConnectProps> = ({
+  sessionId,
+  colorCode = '#000',
+}) => {
+  const [stage, setStage] = useState<Stage | null>(null);
+  const [data, setData] = useState<SupportData>({});
+  const [progress, setProgress] = useState<number>(0);
+  const dots = [0, 1, 2];
+
+  useEffect(() => {
+    if (!sessionId) return;
+    const ws = new WebSocket(
+      `${config.websocketUrl}/support/${sessionId}/`
+    );
+
+    ws.onmessage = ({ data: text }) => {
+      const msg = JSON.parse(text);
+      setStage(msg.stage as Stage);
+      setData(msg.data || {});
+    };
+    ws.onclose = () => console.log('Support socket closed');
+    return () => ws.close();
+  }, [sessionId]);
+
+  useEffect(() => {
+    let timerId: number;
+    let start: number;
+
+    if (stage === 'connecting') {
+      start = Date.now();
+      setProgress(100);
+
+      timerId = window.setInterval(() => {
+        const elapsed = (Date.now() - start) / 1000; // seconds
+        const pct = Math.max(100 - (elapsed / 7) * 100, 0);
+        setProgress(pct);
+        if (pct <= 0) window.clearInterval(timerId);
+      }, 100);
+    }
+
+    return () => {
+      if (timerId) window.clearInterval(timerId);
+    };
+  }, [stage]);
+
+  if (!stage) return null;
+
+  return (
+    <div className="bg-opacity-50 flex items-center justify-center z-50">
+      <AnimatePresence>
+        {stage === 'email_sent' && (
+          <motion.div
+            key="email"
+            className="bg-white rounded-2xl shadow-xl p-6 flex flex-col items-center"
+            initial={{ scale: 0.9, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.8, opacity: 0 }}
+          >
+            <Mail size={32} className="mb-2" style={{ color: colorCode }} />
+            <p className="text-lg font-semibold">
+              Sending your request to support…
+            </p>
+            <div className="flex space-x-2 mt-2">
+              {dots.map((_, i) => (
+                <motion.span
+                  key={i}
+                  className="text-2xl"
+                  style={{ color: colorCode }}
+                  animate={{ scale: [0.7, 1.3, 0.7] }}
+                  transition={{ delay: i * 0.2, repeat: Infinity, duration: 0.8 }}
+                >
+                  •
+                </motion.span>
+              ))}
+            </div>
+          </motion.div>
+        )}
+
+        {stage === 'connecting' && (
+          <motion.div
+            key="connecting"
+            className="bg-white rounded-2xl shadow-xl p-6 flex flex-col items-center"
+            initial={{ scale: 0.9, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.8, opacity: 0 }}
+          >
+            <div className="flex items-center space-x-4">
+              <img
+                src={data.userImage}
+                alt="User"
+                className="w-12 h-12 rounded-full border-2"
+                style={{ borderColor: colorCode }}
+              />
+              <p className="text-lg">
+                Connecting you to{' '}
+                <span className="text-indigo-600">
+                  {data.agentName || 'Support Agent'}
+                </span>
+              </p>
+              <img
+                src={data.companyImage}
+                alt="Company"
+                className="w-12 h-12 rounded-full border"
+              />
+            </div>
+            <div className="flex space-x-2 mt-3">
+              {dots.map((_, i) => (
+                <motion.span
+                  key={i}
+                  className="text-2xl"
+                  style={{ color: colorCode }}
+                  animate={{ scale: [0.7, 1.3, 0.7] }}
+                  transition={{ delay: i * 0.2, repeat: Infinity, duration: 0.8 }}
+                >
+                  •
+                </motion.span>
+              ))}
+            </div>
+            <div className="w-full bg-gray-200 h-1 rounded-full mt-4 overflow-hidden">
+              <motion.div
+                className="h-full"
+                style={{ width: `${progress}%`, backgroundColor: colorCode }}
+                transition={{ ease: 'linear', duration: 1 }}
+              />
+            </div>
+          </motion.div>
+        )}
+
+        {stage === 'auto' && (
+          <motion.div
+            key="auto"
+            className="bg-white rounded-2xl shadow-xl p-6 flex items-center space-x-4"
+            initial={{ y: 50, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: -50, opacity: 0 }}
+          >
+            <img
+              src={
+                data.agentAvatar ||
+                'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaC0jamaBcOGTbS86459UezKUs2Wo0lPU_mw&s'
+              }
+              alt="Auto Support"
+              className="w-12 h-12 rounded-2xl"
+            />
+            <p className="text-lg">
+              You’re now connected to{' '}
+              <span style={{ color: colorCode }}>
+                {data.agentName || 'Auto-Support'}
+              </span>
+            </p>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export default SupportConnect;

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

@@ -0,0 +1,31 @@
+.typing-boxes {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.typing-boxes span {
+  border-radius: 3px; /* keep boxy feel */
+  display: inline-block;
+  animation: pulseBox 0.8s infinite alternate;
+}
+
+.typing-boxes span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.typing-boxes span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes pulseBox {
+  from {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  to {
+    transform: scale(1.3);
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import './Typing.css';
+
+interface TypingProps {
+  color?: string; // optional, defaults to black
+  size?: number;  // optional, lets you control box size
+}
+
+const Typing: React.FC<TypingProps> = ({ color, size = 5 }) => {
+  return (
+    <div className="typing-boxes">
+      <span style={{ backgroundColor: color, width: size, height: size }}></span>
+      <span style={{ backgroundColor: color, width: size, height: size }}></span>
+      <span style={{ backgroundColor: color, width: size, height: size }}></span>
+    </div>
+  );
+};
+
+export default Typing;

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

@@ -0,0 +1,196 @@
+import React, { useState, useMemo, type FC } from 'react';
+import './ProductCard.css';
+import ZidProductCarousel from './Carousel/CardSwiperZid';
+import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import { useKeenSlider } from 'keen-slider/react';
+import 'keen-slider/keen-slider.min.css';
+
+interface ProductVariant {
+  name: string;
+  price: string;
+  link: string;
+  image: string;
+  variant_id: string;
+  variant_tag_name: string;
+  option?: string;
+}
+
+interface AssistantMessageProps {
+  message: string;
+  colorCode: string;
+  isBusiness?: boolean;
+  handleAddToCart: (variantId: string, name: string, qty?: number) => Promise<void>;
+  handleRemoveFromCart: (variantId: string, qty?: number) => Promise<void>;
+}
+
+const SallaAsssiatnt: FC<AssistantMessageProps> = ({
+  message,
+  colorCode,
+  handleAddToCart,
+  handleRemoveFromCart,
+}) => {
+  const [counts, setCounts] = useState<Record<string, number>>({});
+  const [selectedVariants, setSelectedVariants] = useState<Record<string, string>>({});
+
+  const formatTextWithLinks = (text: string): React.ReactNode[] => {
+    const urlRegex = /(https?:\/\/[^\s]+)/g;
+    return text.split(urlRegex).map((part, i) =>
+      urlRegex.test(part) ? (
+        <a
+          key={i}
+          href={part.trim()}
+          style={{ color: '#00b3bc' }}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline break-words"
+        >
+          {part}
+        </a>
+      ) : (
+        <span key={i}>{part}</span>
+      )
+    );
+  };
+
+  const extractProductDetails = (text: string): ProductVariant | null => {
+    const normalized = text.trim();
+    if (!normalized.includes('Name:') || !normalized.includes('VariantId')) return null;
+    const nameMatch = normalized.match(/Name\s*[:\-]\s*(.+)/i);
+    const priceMatch = normalized.match(/Price\s*[:\-]\s*(.+)/i);
+    const linkMatch = normalized.match(/Link\s*[:\-]\s*(https?:\/\/[^\s]+)/i);
+    const variantMatch = normalized.match(/VariantId\s*[:\-]\s*(.+)/i);
+    const tagNameMatch = normalized.match(/variant_tag_name\s*[:\-]\s*(.+)/i);
+    const OptionMatch = normalized.match(/options\s*[:\-]\s*([^|\r\n]+)/i);
+    if (!nameMatch || !priceMatch || !linkMatch || !variantMatch || !tagNameMatch) return null;
+    return {
+      name: nameMatch[1].trim(),
+      price: priceMatch[1].trim(),
+      link: linkMatch[1].trim(),
+      image: '',
+      variant_id: variantMatch[1].trim(),
+      variant_tag_name: tagNameMatch[1].trim(),
+      option: OptionMatch?.[1]?.trim(),
+    };
+  };
+
+  const parsedSegments = useMemo(() => {
+    const parts = message.split('|||').map(p => p.trim()).filter(Boolean);
+    const segments: { type: 'text' | 'product'; data: any }[] = [];
+    let lastProduct: ProductVariant | null = null;
+
+    parts.forEach(part => {
+      if (part.startsWith('img - ')) {
+        const url = part.replace(/^img\s*[-:]\s*/, '').trim();
+        if (lastProduct) lastProduct.image = url;
+        else {
+          const lastSeg = [...segments].reverse().find(s => s.type === 'product');
+          if (lastSeg) (lastSeg.data as ProductVariant).image = url;
+        }
+      } else if (part.includes('Name:') && part.includes('VariantId')) {
+        const product = extractProductDetails(part);
+        if (product) {
+          segments.push({ type: 'product', data: product });
+          lastProduct = product;
+        }
+      } else {
+        segments.push({ type: 'text', data: part });
+        lastProduct = null;
+      }
+    });
+
+    return segments;
+  }, [message]);
+
+  const groupedProducts = useMemo(() => {
+    const groups: Record<string, ProductVariant[]> = {};
+    parsedSegments.forEach(seg => {
+      if (seg.type === 'product') {
+        const p = seg.data as ProductVariant;
+        groups[p.variant_tag_name] = groups[p.variant_tag_name] || [];
+        groups[p.variant_tag_name].push(p);
+      }
+    });
+    return groups;
+  }, [parsedSegments]);
+
+  const shortenName = (name: string, maxLength = 22) =>
+    name.length > maxLength ? name.slice(0, maxLength) + '...' : name;
+
+
+
+    const [currentSlide, setCurrentSlide] = useState(0);
+    const totalSlides =Object.keys(groupedProducts).length ;
+    const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
+      loop: false,
+      mode: 'free',
+      slides: { perView: 1, spacing: 16 },
+      slideChanged(s) {
+        setCurrentSlide(s.track.details.rel);
+      },
+    });
+  
+
+  return (
+    <div className="space-y-6 mt-4 h-fit">
+      {parsedSegments
+        .filter(seg => seg.type === 'text')
+        .map((seg, i) => (
+          <p key={i} className="whitespace-pre-wrap break-words">
+            {formatTextWithLinks(seg.data)}
+          </p>
+      ))}
+
+   
+
+      {Object.keys(groupedProducts).length > 0 && (
+        <>
+              {Object.keys(groupedProducts).length > 1 && (
+          <div
+            style={{
+              display: 'flex',
+              margin: 0,
+              marginBottom: '6px',
+              justifyContent: 'space-between',
+              paddingInline: '4px',
+            }}
+          >
+       <Button
+                shape="circle"
+                icon={<ArrowLeftOutlined />}
+                onClick={() => slider.current?.prev()}
+                disabled={currentSlide === 0}
+              />
+              <Button
+                shape="circle"
+                icon={<ArrowRightOutlined />}
+                onClick={() => slider.current?.next()}
+                disabled={currentSlide === totalSlides - 1}
+              />
+          </div>
+        )}
+          <div ref={sliderRef} className="keen-slider">
+        <ZidProductCarousel
+          groupedProducts={groupedProducts}
+          selectedVariants={selectedVariants}
+          setSelectedVariants={setSelectedVariants}
+          counts={counts}
+          setCounts={setCounts}
+          handleAddToCart={handleAddToCart}
+          handleRemoveFromCart={handleRemoveFromCart}
+          colorCode={colorCode}
+          shortenName={shortenName}
+          sliderInstance={slider}          // pass it down if needed
+          currentSlide={currentSlide}
+          totalSlides={totalSlides}
+          sliderRef={sliderRef}
+
+        />
+        </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default SallaAsssiatnt;

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

@@ -0,0 +1,123 @@
+.jawebchatbotcss-cart-widget {
+    position: relative;
+    display: inline-block;
+  }
+  
+  .jawebchatbotcss-cart-button {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    border-radius: 6px;
+    transition: background 0.2s ease-in-out;
+  }
+  
+  .jawebchatbotcss-cart-button:hover {
+    background-color: #f1f1f1;
+  }
+  
+  .jawebchatbotcss-cart-icon {
+    font-size: 18px;
+  }
+  
+  .jawebchatbotcss-cart-label {
+    font-weight: 600;
+  }
+  
+  .jawebchatbotcss-cart-dropdown {
+    position: absolute;
+    right: 0;
+    margin-top: 16px;
+    width: 320px;
+    background-color: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+    z-index: 999;
+  }
+  
+  .jawebchatbotcss-cart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid #f3f4f6;
+  }
+  
+  .jawebchatbotcss-cart-title {
+    font-size: 16px;
+    font-weight: 500;
+  }
+  
+  .jawebchatbotcss-refresh-button {
+    font-size: 14px;
+    color: #2563eb;
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+  
+  .jawebchatbotcss-refresh-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  .jawebchatbotcss-cart-empty {
+    padding: 16px;
+    text-align: center;
+    color: #6b7280;
+  }
+  
+  .jawebchatbotcss-cart-list {
+    max-height: 240px;
+    overflow-y: auto;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  
+  .jawebchatbotcss-cart-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid #f9fafb;
+  }
+  
+  .jawebchatbotcss-item-name {
+    width: 160px;
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  .jawebchatbotcss-item-controls {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .jawebchatbotcss-item-qty {
+    font-size: 14px;
+    color: #374151;
+  }
+  
+  .jawebchatbotcss-remove-icon {
+    color: #ef4444;
+    cursor: pointer;
+  }
+  
+  .jawebchatbotcss-remove-icon:hover {
+    color: #b91c1c;
+  }
+  
+  .jawebchatbotcss-cart-footer {
+    padding: 16px;
+    border-top: 1px solid #f3f4f6;
+  }
+