shopify-chatbot-widget 0.7.9 → 0.8.2

package/src/Chatbot/components/ChatInput.tsx

@@ -0,0 +1,354 @@
+import { useState, useRef, useEffect } from "react";
+import type { ChangeEvent } from "react";
+import { useTranslation } from "react-i18next";
+import { Input, Tooltip } from "antd";
+import {
+  PictureOutlined,
+  SendOutlined,
+  CloseCircleOutlined,
+  AudioOutlined,
+  StopOutlined,
+  PlayCircleOutlined,
+  PauseCircleOutlined,
+} from "@ant-design/icons";
+import WaveSurfer from "wavesurfer.js";
+
+interface ChatInputProps {
+  userMessage: string;
+  setUserMessage: React.Dispatch<React.SetStateAction<string>>;
+  handleSendMessage: () => void;
+  handleSendImage: (file: File, message: string) => void;
+  handleSendVoice: (audio: Blob) => void;
+  selectedImage: File | null;
+  setSelectedImage: (file: File | null) => void;
+  audioBlob: Blob | null;
+  setAudioBlob: (blob: Blob | null) => void;
+  isSending: boolean;
+}
+
+const ChatInput: React.FC<ChatInputProps> = ({
+  userMessage,
+  setUserMessage,
+  handleSendMessage,
+  handleSendImage,
+  handleSendVoice,
+  selectedImage,
+  setSelectedImage,
+  audioBlob,
+  setAudioBlob,
+  isSending,
+}) => {
+  const { t } = useTranslation();
+  const [isRecording, setIsRecording] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const audioChunks = useRef<Blob[]>([]);
+  const waveformRef = useRef<HTMLDivElement | null>(null);
+  const wavesurfer = useRef<WaveSurfer | null>(null);
+
+  const handleImageUpload = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) setSelectedImage(file);
+  };
+
+  const removeSelectedImage = () => {
+    setSelectedImage(null);
+  };
+
+  const handleVoiceRecord = async () => {
+    if (!navigator.mediaDevices?.getUserMedia) {
+      alert(t("chatInput.voice.notSupported"));
+      return;
+    }
+
+    if (!isRecording) {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        const mimeType = MediaRecorder.isTypeSupported("audio/webm")
+          ? "audio/webm"
+          : "audio/mp4";
+
+        const recorder = new MediaRecorder(stream, { mimeType });
+        mediaRecorderRef.current = recorder;
+        audioChunks.current = [];
+
+        recorder.ondataavailable = (event) => {
+          if (event.data.size > 0) audioChunks.current.push(event.data);
+        };
+
+        recorder.onstop = () => {
+          const blob = new Blob(audioChunks.current, { type: mimeType });
+          setAudioBlob(blob);
+          setIsRecording(false);
+          stream.getTracks().forEach((track) => track.stop());
+        };
+
+        recorder.start();
+        setIsRecording(true);
+      } catch (err) {
+        console.error(err);
+        alert(t("chatInput.voice.permissionError"));
+      }
+    } else {
+      mediaRecorderRef.current?.stop();
+    }
+  };
+
+  useEffect(() => {
+    if (audioBlob && waveformRef.current) {
+      wavesurfer.current?.destroy();
+      const url = URL.createObjectURL(audioBlob);
+
+      wavesurfer.current = WaveSurfer.create({
+        container: waveformRef.current,
+        waveColor: "#ccc",
+        progressColor: "#7F28F8",
+        cursorWidth: 0,
+        barWidth: 3,
+        barHeight: 1.5,
+        barGap: 2,
+        height: 40,
+        interact: true,
+      });
+
+      wavesurfer.current.load(url);
+      wavesurfer.current.on("finish", () => setIsPlaying(false));
+    }
+  }, [audioBlob]);
+
+  const togglePlay = () => {
+    if (wavesurfer.current) {
+      wavesurfer.current.playPause();
+      setIsPlaying((prev) => !prev);
+    }
+  };
+
+  const handleCancelRecording = () => {
+    setIsRecording(false);
+    setAudioBlob(null);
+    wavesurfer.current?.destroy();
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        backgroundColor: "white",
+        border: "1px solid #d1d5db",
+        borderRadius: "9999px",
+        padding: "0.5rem 0.75rem",
+        boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+        width: "95%",
+        height: "56px",
+      }}
+    >
+      <button
+        style={{
+          color: "#6b7280",
+          background: "none",
+          border: "none",
+          margin: "0 0.5rem",
+          cursor: "pointer",
+          padding: "0"
+        }}
+        onClick={() => fileInputRef.current?.click()}
+      >
+        {selectedImage ? (
+          <div style={{ position: "relative" }}>
+            <img
+              src={URL.createObjectURL(selectedImage)}
+              alt={t("chatInput.image.selectedAlt")}
+              style={{
+                width: "2rem",
+                height: "2rem",
+                borderRadius: "9999px",
+                objectFit: "cover",
+                padding: "0"
+              }}
+            />
+            <CloseCircleOutlined
+              style={{
+                position: "absolute",
+                top: "-0.5rem",
+                right: "-0.5rem",
+                fontSize: "14px",
+                color: "#ef4444",
+                background: "white",
+                borderRadius: "9999px",
+                cursor: "pointer",
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+                removeSelectedImage();
+              }}
+            />
+          </div>
+        ) : (
+          <PictureOutlined style={{ fontSize: "20px" }} />
+        )}
+      </button>
+
+      <input
+        disabled={isSending}
+        type="file"
+        accept="image/*"
+        ref={fileInputRef}
+        onChange={handleImageUpload}
+        style={{ display: "none",padding: "0" }}
+      />
+
+      <Tooltip title={isRecording ? "Stop Recording" : "Send Audio"}>
+        <button
+          onClick={handleVoiceRecord}
+          style={{
+            color: isRecording ? "#ef4444" : "#6b7280",
+            background: "none",
+            border: "none",
+            margin: "0 0.5rem",
+            cursor: "pointer",
+            padding: "0"
+          }}
+        >
+          {isRecording ? (
+            <StopOutlined style={{ fontSize: "20px" }} />
+          ) : (
+            <AudioOutlined style={{ fontSize: "20px" }} />
+          )}
+        </button>
+      </Tooltip>
+
+      <div
+        style={{
+          flex: 1,
+          margin: "0 0.5rem",
+          minWidth: 0,
+          maxWidth: "100%",
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        {audioBlob ? (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              width: "100%",
+              backgroundColor: "#f3f4f6",
+              padding: "0.5rem 1rem",
+              borderRadius: "0.5rem",
+            }}
+          >
+            <button
+              style={{
+                background: "none",
+                border: "none",
+                marginRight: "0.75rem",
+                color: "#7f28f8",
+                cursor: "pointer",
+                padding: "0"
+              }}
+              onClick={togglePlay}
+            >
+              {isPlaying ? (
+                <PauseCircleOutlined style={{ fontSize: "24px" }} />
+              ) : (
+                <PlayCircleOutlined style={{ fontSize: "24px" }} />
+              )}
+            </button>
+            <div ref={waveformRef} style={{ width: "100%", height: "2rem" }} />
+            <CloseCircleOutlined
+              style={{
+                fontSize: "18px",
+                color: "#ef4444",
+                marginLeft: "0.75rem",
+                cursor: "pointer",
+              }}
+              onClick={handleCancelRecording}
+            />
+          </div>
+        ) : isRecording ? (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "#f3f4f6",
+              padding: "0.5rem 1rem",
+              borderRadius: "0.5rem",
+              animation: "pulse 2s infinite",
+            
+            }}
+          >
+            <span>Recording</span>
+          </div>
+        ) : (
+          <Input
+            type="text"
+            value={userMessage}
+            onChange={(e) => setUserMessage(e.target.value)}
+            placeholder={"Message..."}
+            style={{
+              width: "100%",
+              border: "none",
+              fontSize: "16px",
+              margin:0,
+              lineHeight: 1.5,
+              color: "#374151",
+              padding: "0"
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                if (selectedImage) {
+                  handleSendImage(selectedImage, userMessage);
+                  removeSelectedImage();
+                  setUserMessage("");
+                } else if (userMessage.trim()) {
+                  handleSendMessage();
+                  setUserMessage("");
+                }
+              }
+            }}
+          />
+        )}
+      </div>
+
+      <button
+        disabled={isSending}
+        onClick={() => {
+          const hasImage = !!selectedImage;
+          const hasText = !!userMessage.trim();
+          const hasAudio = !!audioBlob;
+
+          if (hasImage) {
+            handleSendImage(selectedImage, userMessage);
+            removeSelectedImage();
+            setUserMessage("");
+          } else if (hasAudio) {
+            handleSendVoice(audioBlob);
+            handleCancelRecording();
+          } else if (hasText) {
+            handleSendMessage();
+            setUserMessage("");
+          }
+        }}
+        aria-label={t("chatInput.send")}
+        style={{
+          color: "#6b7280",
+          background: "none",
+          border: "none",
+          margin: "0 0.5rem",
+          cursor: "pointer",
+          padding: "0"
+        }}
+      >
+        <SendOutlined style={{ fontSize: "20px" }} />
+      </button>
+    </div>
+  );
+};
+
+export default ChatInput;

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

@@ -0,0 +1,70 @@
+import React from 'react';
+
+interface AddToCartConfirmationProps {
+  message: string;
+  colorCode:string;
+}
+
+const AddToCartConfirmation: React.FC<AddToCartConfirmationProps> = ({ message }) => {
+
+    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 triggerPhrase = 'Add this to cart for me';
+  
+    // If it matches the add-to-cart pattern, show confirmation
+    if (
+      message?.startsWith(triggerPhrase) &&
+      message?.includes('name:')
+    ) {
+      const nameMatch = message?.match(/name:([^,]+)/i);
+      const productName = nameMatch?.[1]?.trim() || 'Product';
+  
+      return (
+        <div
+          style={{
+            backgroundColor: '#E8F5E9',
+            border: '1px solid #C8E6C9',
+            borderRadius: '12px',
+            padding: '12px 16px',
+            color: '#2E7D32',
+            fontWeight: 500,
+            fontSize: '15px',
+            maxWidth: '360px',
+            margin: '0 auto',
+            textAlign: 'center',
+          }}
+        >
+          ✅ <strong>{productName}</strong> has been added to your cart.
+        </div>
+      );
+    }
+  
+    // Otherwise, render the default message with link formatting
+    return (
+      <p style={{color:'white'}}>
+        {formatTextWithLinks(message)}
+      </p>
+    );
+  };
+  
+  export default AddToCartConfirmation;
+  

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

@@ -0,0 +1,37 @@
+// components/Messages/AgentStatusBanner.tsx
+import React from 'react';
+
+interface AgentStatusBannerProps {
+  status?: string;
+  user?: string;
+}
+
+const AgentStatusBanner: React.FC<AgentStatusBannerProps> = ({ status, user }) => {
+  if (!status || !user) return null;
+
+  let displayText = `${user} is ${status}`;
+
+  // Override text for specific status (optional)
+  if (status === 'typing') {
+    displayText = `${user} is typing...`;
+  }
+    else{
+        displayText= ''
+    }
+
+  return (
+    <>
+        {displayText&&(
+                <div className="flex justify-center mb-2">
+                <span className="px-3 py-1 bg-gray-100 text-gray-500 text-sm rounded-full">
+                {displayText}
+                </span>
+            </div>
+        )}
+    
+    </>
+
+  );
+};
+
+export default AgentStatusBanner;

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

@@ -0,0 +1,206 @@
+import React, { useState, useMemo, type FC } from 'react';
+import './ProductCard.css';
+import ProductCarousel from './Carousel/CardSwiper';
+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;
+  tag?:string;
+}
+
+interface AssistantMessageProps {
+  message: string;
+  colorCode: string;
+  isBusiness?: boolean;
+  disableCheckout?:boolean;
+  handleAddToCart: (variantId: string, name: string, qty?: number) => Promise<void>;
+  handleRemoveFromCart: (variantId: string, qty?: number) => Promise<void>;
+}
+
+const AssistantMessage: FC<AssistantMessageProps> = ({
+  message,
+  colorCode,
+  disableCheckout,
+  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);
+    const tagMatch = normalized.match(/tag\s*[:\-]\s*(.+)/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(),
+      tag: tagMatch?.[1]?.trim(),   // 🔹 include the tag
+
+    };
+  };
+
+  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">
+        <ProductCarousel
+          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}
+          disableCheckout={disableCheckout}  // hides the – + controls
+
+
+        />
+        </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default AssistantMessage;