shopify-chatbot-widget 1.0.8 → 1.0.10

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

@@ -1,203 +0,0 @@
-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,variantImage:string,price:string, qty?: number) => Promise<void>;
-  handleRemoveFromCart: (variantId: string, qty?: number) => Promise<void>;
-   onTryOnSelect: (product: any) => void; // Add this
-enableTry:boolean;
-}
-
-const SallaAsssiatnt: FC<AssistantMessageProps> = ({
-  message,
-  colorCode,
-  handleAddToCart,
-  handleRemoveFromCart,
-    onTryOnSelect,
-  enableTry
-  
-}) => {
-  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}
-          onTryOnSelect={onTryOnSelect}
-          enableTry={enableTry}
-
-        />
-        </div>
-        </>
-      )}
-    </div>
-  );
-};
-
-export default SallaAsssiatnt;