shopify-chatbot-widget 0.7.8 → 0.8.0

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

@@ -0,0 +1,334 @@
+import React,{useEffect, useRef} from 'react';
+import { Spin } from 'antd';
+import { LoadingOutlined ,CheckCircleOutlined,CloseCircleOutlined} from '@ant-design/icons';
+import Typing from './Typing';
+import AssistantMessage from './AssistantMesage';
+import ChatImage from './ChatImage';
+import './ChatMessages.css'
+import ChatImageText from './ChatImageText';
+import AudioVisualizer from './AudioMessage';
+import AgentStatusBanner from './AgentStatus';
+import AddToCartConfirmation from './Addcart';
+import SupportConnect from './Support';
+import ChatImageTextAssist from './ChatImageTextAssis';
+import ZidAssistantChatMessage from './ZidAssistantMesage';
+import SallaAsssiatnt from './SallaAssistantMessage';
+import CalendlyEmbeds from './CalendlyEmbeds';
+
+
+interface Message {
+  role?: string;
+  content?: any;
+  text?: string;
+  typing?: boolean;
+  image_url?:string;
+  status?:string;
+  audio_url?:string;
+  isConnect?:boolean;
+  calendly?:boolean;
+}
+
+interface ChatMessagesProps {
+  messages: Message[];
+  colorCode: string;
+  isLoading: boolean;
+  handleAddToCart: (
+    variantId: string,
+    name: string,
+    qty?: number
+  ) => Promise<void>;
+  handleRemoveFromCart: (variantId: string, qty?: number) => Promise<void>;
+  sessionId:string;
+  isBusiness?: boolean;
+  agentStatus?: {
+    status?: string;
+    user?: string;
+  };
+  userType:string;
+  calendly:string;
+  disableCheckout: boolean;
+  isfetchingMessage:boolean;
+}
+
+
+
+
+
+const ChatMessages: React.FC<ChatMessagesProps> = ({
+  messages,
+  colorCode,
+  handleAddToCart,
+  handleRemoveFromCart,
+  isLoading,
+  agentStatus,
+  sessionId,
+  userType,
+  calendly,
+  disableCheckout,
+  isfetchingMessage,
+
+}) => {
+
+
+
+ 
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!bottomRef.current) return;
+    
+    const timeout = setTimeout(() => {
+      bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, 150); // Slight delay ensures DOM settles in Shopify
+  
+    return () => clearTimeout(timeout);
+  }, [messages]);
+  
+
+
+  if (isfetchingMessage || isLoading || !messages) {
+    return (
+      <div
+        className="loader-wrapper"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          gap: "8px",
+        }}
+      >
+        <div style={{backgroundColor:colorCode}} className="box-loader"></div>
+        <div  style={{backgroundColor:colorCode}} className="box-loader"></div>
+        <div  style={{backgroundColor:colorCode}} className="box-loader"></div>
+      </div>
+    );
+  }
+  
+
+  return (
+    <div className="chatbot-messages space-y-4">
+    {messages.map((msg, i) => {
+      if (msg.typing) {
+        return (
+          <div key={i} className="chat-msg typing">
+            <Typing color={colorCode} />
+          </div>
+        );
+      }
+
+      if (msg.isConnect){
+        return(
+          <SupportConnect sessionId={sessionId}/>
+        )
+      }
+
+
+
+
+      if (msg.role === 'assistant') {
+        // Handle array content separately
+        if (Array.isArray(msg.content)) {
+          return (
+            <div key={i} className="chat-msg assistant" style={{ backgroundColor: 'transparent', padding: 0 }}>
+              {msg.image_url && (
+                <img
+                  src={msg.image_url}
+                  alt="Chat image"
+                  style={{ width: 200 }}
+                  className="rounded-md mt-2 max-w-xs border border-green-400 shadow-sm"
+                />
+              )}
+              <ChatImage message={msg.content} />
+              <div className="flex justify-start">
+                <ChatImageTextAssist message={msg.content}   />
+              </div>
+            </div>
+          );
+        }
+
+        if (msg.calendly) {
+          return (
+            <div
+              key={i}
+              style={{
+                borderRadius: 5,
+                color: "white",
+                width: "100%",
+              }}
+            >
+              <CalendlyEmbeds calendlyLink={calendly} />
+            </div>
+          );
+        }
+      
+
+     
+        return (
+          <div key={i} className="chat-msg assistant">
+            {msg.image_url && (
+              <img
+                src={msg.image_url}
+                alt="Chat image"
+                style={{ width: 200 }}
+                className="rounded-md mt-2 max-w-xs border border-green-400 shadow-sm"
+              />
+            )}
+            
+            {userType === "shopify" ? (
+              <AssistantMessage
+                message={msg.content || msg.text || ""}
+                colorCode={colorCode}
+                disableCheckout={disableCheckout}
+                handleAddToCart={handleAddToCart}
+                handleRemoveFromCart={handleRemoveFromCart}
+              />
+            ) : userType === "salla" ? (
+              <SallaAsssiatnt
+                message={msg.content || msg.text || ""}
+                colorCode={colorCode}
+                handleAddToCart={handleAddToCart}
+                handleRemoveFromCart={handleRemoveFromCart}
+              />
+            ) : (
+              <ZidAssistantChatMessage
+              message={msg.content || msg.text || ""}
+              colorCode={colorCode}
+              handleAddToCart={handleAddToCart}
+              handleRemoveFromCart={handleRemoveFromCart}
+              />
+            )}
+
+  
+
+          </div>
+        );
+      }
+      
+
+  
+  if(msg?.audio_url){
+
+    return(
+      <div
+      className={`chat-msg user`}
+      style={{
+        backgroundColor:'transparent',
+        padding:0
+      }}
+    >
+     
+     <div style={{
+       borderRadius:12
+     }}>
+
+      <AudioVisualizer link={msg.audio_url} transcription={msg.content} colorCode={colorCode} />
+ 
+      {/* Upload/Delivery Status */}
+ 
+      </div>
+
+      <div className="mt-1 mr-2 flex items-end justify-end">
+        {msg.status === 'uploading' ? (
+          <Spin indicator={<LoadingOutlined spin />} size="small" />
+        ) : msg.status === 'delivered' ? (
+          <CheckCircleOutlined style={{ color: 'green' }} />
+        ) : msg.status === 'failed' ? (
+          <CloseCircleOutlined style={{ color: 'red' }} />
+        ) : null}
+      </div>
+    </div>
+    )
+        }
+  
+
+  // ✅ IMAGE MESSAGE (non-assistant)
+  if (msg.image_url) {
+    return (
+      <div key={i} className="chat-msg user" style={{ backgroundColor: 'transparent' }}>
+        <img
+          src={msg.image_url}
+          alt="Chat image"
+          style={{ width: 200 }}
+          className={`rounded-md mt-2 max-w-xs ${
+            msg.content === 'user'
+              ? 'border border-gray-300 shadow-sm'
+              : 'border border-green-400 shadow-sm'
+          }`}
+        />
+  
+        <div className="mt-1 mr-2 flex items-end justify-end">
+          {msg.status === 'uploading' ? (
+            <Spin indicator={<LoadingOutlined spin />} size="small" />
+          ) : msg.status === 'delivered' ? (
+            <CheckCircleOutlined style={{ color: 'green' }} />
+          ) : msg.status === 'failed' ? (
+            <CloseCircleOutlined style={{ color: 'red' }} />
+          ) : null}
+        </div>
+  
+        {msg.content && (
+          <div className="flex justify-end mt-2">
+            <div
+              style={{
+                color: 'white',
+                border: 1,
+                backgroundColor: colorCode,
+                paddingTop: 10,
+                paddingBottom: 10,
+                paddingInline: 14,
+                maxWidth: '85%',
+                lineHeight: 1.4,
+                borderRadius: '16px',
+                wordBreak: 'break-word',
+              }}
+            >
+              <span>{msg.content}</span>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+  
+
+  // ✅ MULTIPLE IMAGES (array)
+  if (Array.isArray(msg.content)) {
+    return (
+      <div key={i}  className='chat-msg user'  style={{backgroundColor:'transparent',padding:0}}>
+          <div style={{backgroundColor:'transparent',padding:0}}>
+            <ChatImage message={msg.content} />
+          </div>
+          <div key={i} className='flex justify-end'>
+            <ChatImageText message={msg.content} colorCode={colorCode} />
+          </div>
+
+      </div>
+    );
+  }
+
+
+  return (
+    <div
+      key={i}
+      className={`chat-msg ${msg.role}`}
+      style={
+        msg.role === 'user'
+          ? { backgroundColor: colorCode, color: '#fff' }
+          : {}
+      }
+    >
+
+      <AddToCartConfirmation message={msg.content} colorCode={colorCode}/>
+
+    </div>
+  );
+})}
+  <AgentStatusBanner status={agentStatus?.status} user={agentStatus?.user} />
+  <div ref={bottomRef} />
+
+    </div>
+  );
+};
+
+export default ChatMessages;

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

@@ -0,0 +1,149 @@
+.product-card {
+    background-color: white;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+    border-radius: 16px;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  @media (min-width: 640px) {
+    .product-card {
+      flex-direction: row;
+      align-items: flex-start;
+    }
+  }
+  
+  .product-image-container {
+    width: 128px;
+    height: 128px;
+  }
+  
+  @media (min-width: 640px) {
+    .product-image-container {
+      width: 160px;
+      height: 160px;
+    }
+  }
+  
+  .product-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 12px;
+    cursor: pointer;
+  }
+  
+  .product-details {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  
+  .product-name {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: #111827;
+    text-decoration: none;
+  }
+  
+  .product-price {
+    font-size: 1rem;
+    font-weight: 500;
+    color: #374151;
+  }
+  
+  .label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #6b7280;
+  }
+  
+  .color-options,
+  .size-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 4px;
+  }
+  
+  .color-button,
+  .size-button {
+    padding: 4px 12px;
+    font-size: 0.875rem;
+    border-radius: 9999px;
+    border: 1px solid #d1d5db;
+    background-color: #f3f4f6;
+    color: #1f2937;
+    cursor: pointer;
+  }
+  
+  .color-button.disabled,
+  .size-button.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+  
+  .color-button.active,
+  .size-button.active {
+    color: white;
+  }
+  
+  .cart-controls {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: 12px;
+  }
+  
+  .cart-button {
+    padding: 4px 12px;
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    background: none;
+    cursor: pointer;
+  }
+  
+  .cart-count {
+    min-width: 20px;
+    text-align: center;
+    font-weight: 500;
+  }
+  
+  .increment {
+    background-color: #7f28f8;
+    color: white;
+  }
+  
+
+  /* ProductCard.css */
+.carousel-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.carousel-track {
+  display: flex;
+  transition: transform 0.3s ease-in-out;
+}
+
+.carousel-slide {
+  flex: 0 0 100%;
+  padding: 0 1rem;
+}
+
+.carousel-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255,255,255,0.8);
+  border: none;
+  font-size: 2rem;
+  cursor: pointer;
+  z-index: 10;
+}
+
+.carousel-nav.prev { left: 0.5rem; }
+.carousel-nav.next { right: 0.5rem; }

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

@@ -0,0 +1,196 @@
+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, 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">
+        <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}
+
+        />
+        </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default SallaAsssiatnt;