shopify-chatbot-widget 1.0.9 → 1.0.10

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

@@ -1,208 +0,0 @@
-import React 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';
-
-
-interface ProductVariant {
-  variant_id: string;
-  name: string;
-  image: string;
-  link: string;
-  price: string;
-  option?: string; // e.g. "Red - XL" or "500ml"
-}
-
-interface Props {
-  groupedProducts: Record<string, ProductVariant[]>;
-  selectedVariants: Record<string, string>;
-  setSelectedVariants: React.Dispatch<React.SetStateAction<Record<string, string>>>;
-  counts: Record<string, number>;
-  setCounts: React.Dispatch<React.SetStateAction<Record<string, number>>>;
-  handleAddToCart: (variantId: string, name: string, variantImage:string,price:string,qty: number) => Promise<void>;
-  handleRemoveFromCart: (variantId: string, qty: number) => Promise<void>;
-  colorCode?: string; // accent
-  shortenName: (name: string) => string;
-
-  // slider
-  sliderRef: React.Ref<HTMLDivElement>;
-  sliderInstance: React.MutableRefObject<KeenSliderInstance | null>;
-  currentSlide: number;
-  totalSlides: number;
-    onTryOnSelect: (product: ProductVariant) => void;
-  enableTry:boolean;
-}
-
-
-
-const ZidProductCarousel: FC<Props> = ({
-  groupedProducts,
-  selectedVariants,
-  setSelectedVariants,
-  colorCode = '#7F28F8',
-  shortenName,
-  sliderRef,
-  totalSlides,
-    onTryOnSelect,
-  enableTry
-}) => {
-
-
-  if (!totalSlides || totalSlides === 0) return null;
-
-  return (
-    <section
-      className="sallaX"
-      style={
-        {
-          // allow live accent theming from prop
-          // @ts-ignore
-          '--sallaX-accent': colorCode,
-        } as React.CSSProperties
-      }
-      aria-label="Recommended products"
-    >
-      <div ref={sliderRef} className="keen-slider sallaX-slider">
-        {Object.entries(groupedProducts).map(([tag, group]) => {
-          const currentVariantId =
-            selectedVariants[tag] || (group.length > 0 ? group[0].variant_id : '');
-          const currentVariant =
-            group.find(v => v.variant_id === currentVariantId) || group[0];
-
-          if (!currentVariant) return null;
-
-          // const count = counts[currentVariant.variant_id] || 0;
-
-          // Build unique, cleaned list of options (exclude empty/'none')
-          const options = Array.from(
-            new Set(
-              group
-                .map(v => (v.option?.trim() ?? ''))
-                .filter(o => o && o.toLowerCase() !== 'none')
-            )
-          );
-
-          // Helper to update active variant by option
-          const setActiveVariant = (option?: string) => {
-            const match = group.find(v => v.option === option);
-            if (match) {
-              setSelectedVariants(prev => ({
-                ...prev,
-                [tag]: match.variant_id,
-              }));
-            }
-          };
-
-          // 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 selectValue = (currentVariant.option ?? options[0] ?? '');
-
-          return (
-            <article key={tag} className="keen-slider__slide sallaX-card" role="group" aria-roledescription="slide">
-              <div className="sallaX-media" onClick={() => window.open(currentVariant.link, '_blank')}>
-                <img
-                  src={currentVariant.image}
-                  alt={currentVariant.name}
-                  className="sallaX-img"
-                  loading="lazy"
-                />
-                <a
-                  href={currentVariant.link}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="sallaX-visit"
-                  aria-label="Open product page"
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  View
-                </a>
-              </div>
-
-              <div className="sallaX-body">
-                <a
-                  href={currentVariant.link}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="sallaX-name"
-                  title={currentVariant.name}
-                >
-                  {shortenName(currentVariant.name)}
-                </a>
-
-                <div className="sallaX-row">
-                  <span className="sallaX-price" aria-label="Price">
-                    {currentVariant.price}
-                  </span>
-                </div>
-
-                {/* NEW: Select-based options */}
-                {options.length > 0 && (
-                  <div className="sallaX-selectWrap">
-                    <label htmlFor={`sallaX-select-${tag}`} className="sallaX-selectLabel">
-                      Choose an option
-                    </label>
-                    <select
-                      id={`sallaX-select-${tag}`}
-                      className="sallaX-select"
-                      aria-label="Choose an option"
-                      value={selectValue}
-                      onChange={(e) => setActiveVariant(e.target.value)}
-                    >
-                      {options.map((option) => (
-                        <option key={option} value={option}>
-                          {option}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-                )}
-
-
-
-                  {enableTry?
-                        <Button
-                        style={{ backgroundColor: colorCode, color: "white" }}
-                        className="px-6 py-2 rounded-lg shadow-md transition"
-                        onClick={() => {
-                            onTryOnSelect(currentVariant); 
-                        }}
-                      >
-                        Try On
-                      </Button>
-                      :<></>
-                    }
-                                  
-                  
-
-              </div>
-            </article>
-          );
-        })}
-      </div>
-    </section>
-  );
-};
-
-export default ZidProductCarousel;

package/src/Chatbot/components/Messages/Carousel/SallaSwiper.css

@@ -1,245 +0,0 @@
-/* Root */
-.sallaX {
-    --sallaX-accent: #7F28F8;
-    --sallaX-bg: #ffffff;
-    --sallaX-text: #0f0f14;
-    --sallaX-muted: #6b7280;
-    --sallaX-border: rgba(15, 15, 20, 0.08);
-    --sallaX-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
-  
-    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, "Apple Color Emoji", "Segoe UI Emoji";
-    color: var(--sallaX-text);
-    background: transparent;
-    padding: 4px 0;
-  }
-  
-  /* Slider spacing */
-  .sallaX-slider {
-    padding: 8px 4px 24px;
-  }
-  
-  /* Card */
-  .sallaX-card {
-    background: var(--sallaX-bg);
-    border: 1px solid var(--sallaX-border);
-    border-radius: 18px;
-    overflow: hidden;
-    box-shadow: var(--sallaX-shadow);
-    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
-    max-width: 520px;
-    margin: 0 auto;
-  }
-  
-  .sallaX-card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 12px 28px rgba(0,0,0,.12);
-    border-color: rgba(15, 15, 20, 0.12);
-  }
-  
-  /* Media */
-  .sallaX-media {
-    position: relative;
-    aspect-ratio: 1 / 1;
-    background: #f6f7f9;
-    cursor: pointer;
-  }
-  
-  .sallaX-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-    transition: transform .4s ease;
-  }
-  
-  .sallaX-media:hover .sallaX-img {
-    transform: scale(1.02);
-  }
-  
-  /* Subtle call-to-action floating button */
-  .sallaX-visit {
-    position: absolute;
-    right: 12px;
-    bottom: 12px;
-    font-size: 13px;
-    line-height: 1;
-    padding: 10px 12px;
-    border-radius: 999px;
-    background: rgba(255,255,255,.75);
-    backdrop-filter: saturate(180%) blur(8px);
-    border: 1px solid var(--sallaX-border);
-    color: var(--sallaX-text);
-    text-decoration: none;
-    transition: background .2s ease, transform .2s ease;
-  }
-  
-  .sallaX-visit:hover {
-    background: rgba(255,255,255,.95);
-    transform: translateY(-1px);
-  }
-  
-  /* Body */
-  .sallaX-body {
-    padding: 14px 14px 16px;
-  }
-  
-  /* Name */
-  .sallaX-name {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  
-    font-weight: 600;
-    font-size: 16px;
-    letter-spacing: -0.01em;
-    color: var(--sallaX-text);
-    text-decoration: none;
-  }
-  
-  .sallaX-name:hover {
-    text-decoration: underline;
-    text-underline-offset: 2px;
-  }
-  
-  /* Price row */
-  .sallaX-row {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 8px;
-    margin-top: 8px;
-    margin-bottom: 8px;
-  }
-  
-  .sallaX-price {
-    font-weight: 700;
-    font-size: 18px;
-    letter-spacing: -0.01em;
-    color: var(--sallaX-text);
-  }
-  
-  /* --- NEW: Options (select) --- */
-  .sallaX-selectWrap {
-    margin: 10px 0 12px;
-    position: relative;
-  }
-  
-  .sallaX-selectLabel {
-    font-size: 12px;
-    color: var(--sallaX-muted);
-    display: inline-block;
-    margin-bottom: 6px;
-  }
-  
-  .sallaX-select {
-    width: 100%;
-    appearance: none;
-    background: #fff;
-    border: 1px solid var(--sallaX-border);
-    border-radius: 12px;
-    padding: 10px 12px;
-    font-size: 14px;
-    line-height: 1.2;
-    color: var(--sallaX-text);
-    box-shadow: var(--sallaX-shadow);
-    transition: border-color .2s ease, box-shadow .2s ease;
-  }
-  
-  .sallaX-select:focus {
-    outline: none;
-    border-color: var(--sallaX-accent);
-    box-shadow: 0 0 0 3px rgba(127, 40, 248, .15);
-  }
-  
-  /* Optional: custom caret */
-  .sallaX-selectWrap::after {
-    content: "▾";
-    position: absolute;
-    right: 12px;
-    top: calc(50% + 8px);
-    transform: translateY(-50%);
-    pointer-events: none;
-    font-size: 12px;
-    color: var(--sallaX-muted);
-  }
-  
-  /* (Old chip styles retained but unused) */
-  .sallaX-options { display: none; }
-  .sallaX-chip { display: none; }
-  
-  /* CTA (quantity controls) */
-  .sallaX-cta {
-    display: inline-flex;
-    align-items: center;
-    gap: 2px;
-    background: #fff;
-    border: 1px solid var(--sallaX-border);
-    border-radius: 999px;
-    padding: 4px;
-    width: max-content;
-    user-select: none;
-  }
-  
-  .sallaX-qty {
-    appearance: none;
-    border: none;
-    background: transparent;
-    width: 36px;
-    height: 36px;
-    border-radius: 999px;
-    font-size: 18px;
-    font-weight: 600;
-    line-height: 36px;
-    text-align: center;
-    cursor: pointer;
-    transition: background .2s ease, transform .1s ease;
-  }
-  
-  .sallaX-qty[disabled] {
-    opacity: .5;
-    cursor: not-allowed;
-  }
-  
-  .sallaX-qty:hover:not([disabled]) {
-    background: rgba(15, 15, 20, 0.05);
-  }
-  
-  .sallaX-qty:active:not([disabled]) {
-    transform: scale(0.98);
-  }
-  
-  .sallaX-qtyCount {
-    min-width: 34px;
-    text-align: center;
-    font-weight: 600;
-  }
-  
-  /* Plus highlighted by accent */
-  .sallaX-qty--plus {
-    color: #fff;
-    background: var(--sallaX-accent);
-  }
-  
-  .sallaX-qty--plus:hover {
-    filter: brightness(0.98);
-  }
-  
-  /* Motion respect */
-  @media (prefers-reduced-motion: reduce) {
-    .sallaX-card,
-    .sallaX-img,
-    .sallaX-visit,
-    .sallaX-qty {
-      transition: none !important;
-    }
-  }
-  
-  /* Responsive polish */
-  @media (min-width: 768px) {
-    .sallaX-body { padding: 16px 16px 18px; }
-    .sallaX-name { font-size: 17px; }
-    .sallaX-price { font-size: 19px; }
-  }
-  

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

@@ -1,202 +0,0 @@
-import React, { useState, useMemo, type FC } from 'react';
-import './ProductCard.css';
-import SallaProductCarousel from './Carousel/CardSwiperSalla';
-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">
-        <SallaProductCarousel
-          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;