shopify-chatbot-widget 0.0.4 → 0.2.2

package/src/Chatbot/components/ChatInput.tsx

@@ -1,262 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,37 +0,0 @@
-// 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

@@ -1,316 +0,0 @@
-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;