shopify-chatbot-widget 0.0.4

package/src/Chatbot/components/ChatInput.tsx

@@ -0,0 +1,262 @@
+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";
+import "./ChatInput.css"; // <-- Import your raw CSS
+
+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 || !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 className="chat-input-container">
+      <button
+        className="chat-icon-button"
+        onClick={() => fileInputRef.current?.click()}
+      >
+        {selectedImage ? (
+          <div className="image-preview-wrapper">
+            <img
+              src={URL.createObjectURL(selectedImage)}
+              alt={t("chatInput.image.selectedAlt")}
+              className="image-preview"
+            />
+            <CloseCircleOutlined
+              className="remove-image-icon"
+              onClick={(e) => {
+                e.stopPropagation();
+                removeSelectedImage();
+              }}
+            />
+          </div>
+        ) : (
+          <PictureOutlined style={{ fontSize: "20px" }} />
+        )}
+      </button>
+
+      <input
+        disabled={isSending}
+        type="file"
+        accept="image/*"
+        ref={fileInputRef}
+        onChange={handleImageUpload}
+        className="hidden-input"
+      />
+
+      <Tooltip title={isRecording ? "Stop Recording" : "Send Audio"}>
+        <button
+          className={`chat-icon-button ${isRecording ? "recording" : ""}`}
+          onClick={handleVoiceRecord}
+        >
+          {isRecording ? (
+            <StopOutlined style={{ fontSize: "20px" }} />
+          ) : (
+            <AudioOutlined style={{ fontSize: "20px" }} />
+          )}
+        </button>
+      </Tooltip>
+
+      <div className="chat-input-wrapper">
+        {audioBlob ? (
+          <div className="audio-preview">
+            <button className="audio-play-button" onClick={togglePlay}>
+              {isPlaying ? (
+                <PauseCircleOutlined style={{ fontSize: "24px" }} />
+              ) : (
+                <PlayCircleOutlined style={{ fontSize: "24px" }} />
+              )}
+            </button>
+            <div ref={waveformRef} className="waveform" />
+            <CloseCircleOutlined
+              className="remove-audio-icon"
+              onClick={handleCancelRecording}
+            />
+          </div>
+        ) : isRecording ? (
+          <div className="recording-indicator">
+            <span>{'Recording'}</span>
+          </div>
+        ) : (
+          <Input
+            type="text"
+            className="text-input"
+            disabled={isSending}
+            value={userMessage}
+            onChange={(e) => setUserMessage(e.target.value)}
+            placeholder={'Message...'}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+            
+                if (selectedImage) {
+                  handleSendImage(selectedImage, userMessage);
+                  removeSelectedImage();
+                  setUserMessage("");
+                } else if (userMessage.trim()) {
+                  handleSendMessage();
+                }
+              }
+            }}
+            
+            
+            
+          />
+        )}
+      </div>
+
+      <button
+        className="chat-icon-button"
+        disabled={isSending}
+        
+        onClick={() => {
+          const hasImage = !!selectedImage;
+          const hasText = !!userMessage.trim();
+          const hasAudio = !!audioBlob;
+        
+          if (hasImage) {
+            handleSendImage(selectedImage, userMessage); // ✅ send image + text together
+            removeSelectedImage();
+            setUserMessage(""); // ✅ clear text to avoid double-send
+          } else if (hasAudio) {
+            handleSendVoice(audioBlob);
+            handleCancelRecording();
+          } else if (hasText) {
+            handleSendMessage(); // ✅ only send if no image/audio
+          }
+        }}
+        
+        
+        aria-label={t("chatInput.send")}
+      >
+        <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,colorCode }) => {
+
+    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: colorCode }}
+              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>
+        {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,316 @@
+import React, { useState, useMemo } from 'react';
+
+interface ProductVariant {
+  name: string;
+  price: string;
+  link: string;
+  image: string;
+  variant_id: string;
+  variant_tag_name: string;
+  color?: string;
+  size?: 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 AssistantMessage: React.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: colorCode }}
+          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();
+  
+    // 🛠️ Instead of requiring it to START with 'Name:', just check if it CONTAINS it
+    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 colorMatch = normalized.match(/^color\s*[:\-]\s*([^\r\n]*)$/im);
+    const sizeMatch = normalized.match(/^size\s*[:\-]\s*([^\r\n]*)$/im);
+    
+
+
+
+  
+    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(),
+      color: colorMatch?.[1]?.trim(),
+      size: sizeMatch?.[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;
+  
+    for (const part of parts) {
+      if (part.startsWith('img - ')) {
+        const url = part.replace(/^img\s*[-:]\s*/, '').trim();
+  
+        // Attach to last known product
+        if (lastProduct) {
+          lastProduct.image = url;
+        } else {
+          // Fallback: attach to last product in segments if available
+          const lastSegment = [...segments].reverse().find(s => s.type === 'product');
+          if (lastSegment) {
+            (lastSegment.data as ProductVariant).image = url;
+          }
+        }
+      } 
+      
+      // 🛠 Loosen this check to allow any block with Name: and VariantId to be considered a product
+      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[]> = {};
+    for (const seg of parsedSegments) {
+      if (seg.type === 'product') {
+        const p = seg.data as ProductVariant;
+        if (!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;
+
+  return (
+    <div className="space-y-6 mt-4">
+      {(() => {
+        const renderedTags = new Set<string>();
+
+        return parsedSegments.map((seg, idx) => {
+          if (seg.type === 'text') {
+            return (
+              <p key={idx} className="whitespace-pre-wrap break-words">
+
+                {formatTextWithLinks(seg.data)}
+              </p>
+            );
+          }
+
+          if (seg.type === 'product') {
+            const product = seg.data as ProductVariant;
+            const tag = product.variant_tag_name;
+            if (renderedTags.has(tag)) return null;
+            renderedTags.add(tag);
+
+            const group = groupedProducts[tag];
+    
+            const currentVariantId = selectedVariants[tag] || group[0].variant_id;
+            const currentVariant = group.find(v => v.variant_id === currentVariantId) || group[0];
+            const count = counts[currentVariant.variant_id] || 0;
+
+            const colors = Array.from(
+              new Set(group.map(v => v.color?.trim()).filter(c => c && c.toLowerCase() !== 'none'))
+            );
+            
+            const sizes = Array.from(
+              new Set(group.map(v => v.size?.trim()).filter(s => s && s.toLowerCase() !== 'none'))
+            );
+
+
+            
+            
+
+            const isComboValid = (color?: string, size?: string) =>
+              group.some(v => v.color === color && v.size === size);
+
+            const setActiveVariant = (color?: string, size?: string) => {
+              const match = group.find(v => {
+                return (!color || v.color === color) && (!size || v.size === size);
+              });
+              if (match) {
+                setSelectedVariants(prev => ({
+                  ...prev,
+                  [tag]: match.variant_id
+                }));
+              }
+            };
+
+            const increment = async () => {
+              const next = count + 1;
+              setCounts(c => ({ ...c, [currentVariant.variant_id]: next }));
+              await handleAddToCart(currentVariant.variant_id, currentVariant.name, 1);
+            };
+
+            const decrement = async () => {
+              if (count === 0) return;
+              const next = count - 1;
+              setCounts(c => ({ ...c, [currentVariant.variant_id]: next }));
+              await handleRemoveFromCart(currentVariant.variant_id, 1);
+            };
+
+            return (
+              <div
+                key={idx}
+                className="bg-white shadow-md rounded-2xl p-4 flex flex-col sm:flex-row items-center sm:items-start space-y-4 sm:space-y-0 sm:space-x-6"
+              >
+                <div className="w-32 h-32 sm:w-40 sm:h-40">
+                  <img
+                    src={currentVariant.image}
+                    alt={currentVariant.name}
+                    className="w-full h-full object-cover rounded-xl cursor-pointer"
+                    onClick={() => window.open(currentVariant.link, '_blank')}
+                  />
+                </div>
+
+                <div className="flex-1 space-y-3">
+                  <a
+                    href={currentVariant.link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-lg font-semibold text-gray-900"
+                  >
+                    {shortenName(currentVariant.name)}
+                  </a>
+                  <p className="text-md font-medium text-gray-700">{currentVariant.price}</p>
+
+                  {colors.length > 0 && (
+                    <div>
+                      <p className="text-sm text-gray-500  font-medium">Color:</p>
+                      <div className="flex flex-wrap gap-2 mt-1">
+                        {colors.map(color => {
+                          const disabled = !isComboValid(color, currentVariant.size);
+                          const isActive = color === currentVariant.color;
+                          return (
+                            <button
+                              key={color}
+                              disabled={disabled}
+                              onClick={() => setActiveVariant(color, currentVariant.size)}
+                              className={`px-3 py-1 rounded-full border text-sm ${
+                                isActive ? 'text-white' : 'text-gray-800'
+                              } ${disabled ? 'opacity-40 cursor-not-allowed' : 'bg-gray-100'}`}
+                              style={isActive ? { backgroundColor: colorCode,color:'white' } : {}}
+                            >
+                              {color=="None"?"One Color" :color}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  )}
+
+                  {sizes.length > 0 && (
+                    <div>
+                      <p className="text-sm text-gray-500 font-medium">Size:</p>
+                      <div className="flex flex-wrap gap-2 mt-1">
+                        {sizes.map(size => {
+                          const disabled = !isComboValid(currentVariant.color, size);
+                          const isActive = size === currentVariant.size;
+                          return (
+                            <button
+                              key={size}
+                              disabled={disabled}
+                              onClick={() => setActiveVariant(currentVariant.color, size)}
+                              className={`px-3 py-1 rounded-full border text-sm ${
+                                isActive ? 'text-white' : 'text-gray-800'
+                              } ${disabled ? 'opacity-40 cursor-not-allowed' : 'bg-gray-100'}`}
+                              style={isActive ? { backgroundColor: colorCode,color:'white' } : {}}
+                            >
+                              {size==="None"? "One size":size}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Cart Controls */}
+                  <div className="inline-flex items-center space-x-3 mt-2">
+                    <button onClick={decrement} className="px-3 py-1 rounded-lg border">
+                      –
+                    </button>
+                    <span className="min-w-[1.25rem] text-center font-medium">{count}</span>
+                    <button
+                      onClick={increment}
+                      className="px-3 py-1 rounded-lg border"
+                      style={{ backgroundColor: colorCode, color: '#fff' }}
+                    >
+                      +
+                    </button>
+                  </div>
+                </div>
+              </div>
+            );
+          }
+
+          return null;
+        });
+      })()}
+    </div>
+  );
+};
+
+export default AssistantMessage;