shopify-chatbot-widget 0.0.4 → 0.0.7

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

@@ -1,284 +0,0 @@
-import React 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';
-interface Message {
-  role?: string;
-  content?: any;
-  text?: string;
-  typing?: boolean;
-  image_url?:string;
-  status?:string;
-  audio_url?:string;
-  isConnect?: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;
-}
-
-
-
-
-const spinIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
-
-const ChatMessages: React.FC<ChatMessagesProps> = ({
-  messages,
-  colorCode,
-  handleAddToCart,
-  handleRemoveFromCart,
-  isLoading,
-  agentStatus,
-  sessionId,
-  userType
-
-}) => {
-
-
-  const handleAddToCartZid = () => {
-    // Your logic goes here
-  };
- 
-
-  if (isLoading || !messages) {
-    return (
-      <div
-        className="loader-wrapper"
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: '100%',
-        }}
-      >
-        <Spin indicator={spinIcon} />
-      </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 />
-          </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>
-          );
-        }
-      
-        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}
-          handleAddToCart={handleAddToCart}
-          handleRemoveFromCart={handleRemoveFromCart}
-          />
-        )
-          :(
-
-            <ZidAssistantChatMessage
-            message={msg.content || msg.text || ''}
-            colorCode={colorCode}
-            handleAddToCart={handleAddToCartZid}
-          />
-            )
-
-            }
-  
-
-          </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>
-  );
-};
-
-export default ChatMessages;

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

@@ -1,177 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { Mail } from 'lucide-react';
-import config from '../../../hooks/config';
-
-interface SupportConnectProps {
-  sessionId?: string;
-  colorCode?: string;
-}
-
-type Stage = 'email_sent' | 'connecting' | 'auto';
-
-interface SupportData {
-  userImage?: string;
-  agentName?: string;
-  companyImage?: string;
-  agentAvatar?: string;
-}
-
-const SupportConnect: React.FC<SupportConnectProps> = ({
-  sessionId,
-  colorCode = '#000',
-}) => {
-  const [stage, setStage] = useState<Stage | null>(null);
-  const [data, setData] = useState<SupportData>({});
-  const [progress, setProgress] = useState<number>(0);
-  const dots = [0, 1, 2];
-
-  useEffect(() => {
-    if (!sessionId) return;
-    const ws = new WebSocket(
-      `${config.websocketUrl}/support/${sessionId}/`
-    );
-
-    ws.onmessage = ({ data: text }) => {
-      const msg = JSON.parse(text);
-      setStage(msg.stage as Stage);
-      setData(msg.data || {});
-    };
-    ws.onclose = () => console.log('Support socket closed');
-    return () => ws.close();
-  }, [sessionId]);
-
-  useEffect(() => {
-    let timerId: number;
-    let start: number;
-
-    if (stage === 'connecting') {
-      start = Date.now();
-      setProgress(100);
-
-      timerId = window.setInterval(() => {
-        const elapsed = (Date.now() - start) / 1000; // seconds
-        const pct = Math.max(100 - (elapsed / 7) * 100, 0);
-        setProgress(pct);
-        if (pct <= 0) window.clearInterval(timerId);
-      }, 100);
-    }
-
-    return () => {
-      if (timerId) window.clearInterval(timerId);
-    };
-  }, [stage]);
-
-  if (!stage) return null;
-
-  return (
-    <div className="bg-opacity-50 flex items-center justify-center z-50">
-      <AnimatePresence>
-        {stage === 'email_sent' && (
-          <motion.div
-            key="email"
-            className="bg-white rounded-2xl shadow-xl p-6 flex flex-col items-center"
-            initial={{ scale: 0.9, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            exit={{ scale: 0.8, opacity: 0 }}
-          >
-            <Mail size={32} className="mb-2" style={{ color: colorCode }} />
-            <p className="text-lg font-semibold">
-              Sending your request to support…
-            </p>
-            <div className="flex space-x-2 mt-2">
-              {dots.map((_, i) => (
-                <motion.span
-                  key={i}
-                  className="text-2xl"
-                  style={{ color: colorCode }}
-                  animate={{ scale: [0.7, 1.3, 0.7] }}
-                  transition={{ delay: i * 0.2, repeat: Infinity, duration: 0.8 }}
-                >
-                  •
-                </motion.span>
-              ))}
-            </div>
-          </motion.div>
-        )}
-
-        {stage === 'connecting' && (
-          <motion.div
-            key="connecting"
-            className="bg-white rounded-2xl shadow-xl p-6 flex flex-col items-center"
-            initial={{ scale: 0.9, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            exit={{ scale: 0.8, opacity: 0 }}
-          >
-            <div className="flex items-center space-x-4">
-              <img
-                src={data.userImage}
-                alt="User"
-                className="w-12 h-12 rounded-full border-2"
-                style={{ borderColor: colorCode }}
-              />
-              <p className="text-lg">
-                Connecting you to{' '}
-                <span className="text-indigo-600">
-                  {data.agentName || 'Support Agent'}
-                </span>
-              </p>
-              <img
-                src={data.companyImage}
-                alt="Company"
-                className="w-12 h-12 rounded-full border"
-              />
-            </div>
-            <div className="flex space-x-2 mt-3">
-              {dots.map((_, i) => (
-                <motion.span
-                  key={i}
-                  className="text-2xl"
-                  style={{ color: colorCode }}
-                  animate={{ scale: [0.7, 1.3, 0.7] }}
-                  transition={{ delay: i * 0.2, repeat: Infinity, duration: 0.8 }}
-                >
-                  •
-                </motion.span>
-              ))}
-            </div>
-            <div className="w-full bg-gray-200 h-1 rounded-full mt-4 overflow-hidden">
-              <motion.div
-                className="h-full"
-                style={{ width: `${progress}%`, backgroundColor: colorCode }}
-                transition={{ ease: 'linear', duration: 1 }}
-              />
-            </div>
-          </motion.div>
-        )}
-
-        {stage === 'auto' && (
-          <motion.div
-            key="auto"
-            className="bg-white rounded-2xl shadow-xl p-6 flex items-center space-x-4"
-            initial={{ y: 50, opacity: 0 }}
-            animate={{ y: 0, opacity: 1 }}
-            exit={{ y: -50, opacity: 0 }}
-          >
-            <img
-              src={
-                data.agentAvatar ||
-                'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaC0jamaBcOGTbS86459UezKUs2Wo0lPU_mw&s'
-              }
-              alt="Auto Support"
-              className="w-12 h-12 rounded-2xl"
-            />
-            <p className="text-lg">
-              You’re now connected to{' '}
-              <span style={{ color: colorCode }}>
-                {data.agentName || 'Auto-Support'}
-              </span>
-            </p>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-};
-
-export default SupportConnect;

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

@@ -1,27 +0,0 @@
-.typing-animation span {
-    display: inline-block;
-    animation: blink 1.4s infinite;
-    font-size: 20px;
-    margin: 0 2px;
-    color: #555;
-  }
-  
-  .typing-animation span:nth-child(2) {
-    animation-delay: 0.2s;
-  }
-  .typing-animation span:nth-child(3) {
-    animation-delay: 0.4s;
-  }
-  
-  @keyframes blink {
-    0% {
-      opacity: 0.2;
-    }
-    20% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0.2;
-    }
-  }
-  

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

@@ -1,14 +0,0 @@
-import React from 'react';
-import './Typing.css'; // make sure this file contains the animation
-
-const Typing: React.FC = () => {
-  return (
-    <div className="typing-animation">
-      <span>.</span>
-      <span>.</span>
-      <span>.</span>
-    </div>
-  );
-};
-
-export default Typing;

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

@@ -1,142 +0,0 @@
-import React from 'react';
-import { ShoppingCartOutlined } from '@ant-design/icons';
-
-interface ChatMessageProps {
-  message: string;
-  colorCode: string;
-  isBusiness?: boolean;
-  handleAddToCart: (info: string) => void;
-}
-
-interface ProductDetails {
-  name: string;
-  price: string;
-  link: string;
-  image: string;
-  variant_id: string;
-}
-
-const ZidAssistantChatMessage: React.FC<ChatMessageProps> = ({
-  message,
-  colorCode,
-  handleAddToCart,
-}) => {
-  if (!message) return null;
-
-  // 1. Rejoin the message and split into logical product blocks
-  const combinedMessage = message.split('|||').join('\n');
-  const segments = combinedMessage
-    .split(/(?=Name\s*[:\-])/g)
-    .map((seg) => seg.trim())
-    .filter(Boolean);
-
-  // 2. Extract product details
-  const extractProductDetails = (text: string): ProductDetails | null => {
-    const normalized = text.trim();
-
-    if (!normalized.startsWith('Name:')) return null;
-
-    if (
-      !normalized.includes('Price:') ||
-      !normalized.includes('Link:') ||
-      (!normalized.includes('img -') && !normalized.includes('img:'))
-    ) {
-      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 imgMatch = normalized.match(/img\s*[:\-]\s*(https?:\/\/[^\s]+)/i);
-    const variantMatch = normalized.match(/VariantId\s*[:\-]\s*(.+)/i);
-
-    if (!nameMatch || !priceMatch || !linkMatch || !imgMatch) return null;
-
-    return {
-      name: nameMatch[1].trim(),
-      price: priceMatch[1].trim(),
-      link: linkMatch[1].trim(),
-      image: imgMatch[1].trim(),
-      variant_id: variantMatch?.[1]?.trim() || '',
-    };
-  };
-
-  // 3. Linkify plain text
-  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>
-      )
-    );
-  };
-
-  // 4. Render UI
-  return (
-    <div className="space-y-4">
-      {segments.map((part, idx) => {
-        const product = extractProductDetails(part);
-
-        if (product) {
-          return (
-            <div
-              key={idx}
-              className="flex items-center bg-white shadow-lg rounded-2xl p-4 space-x-4"
-            >
-              <div className="w-32 h-32 sm:w-40 sm:h-40 relative">
-                <img
-                  src={product.image}
-                  alt={product.name}
-                  className="w-full h-full object-cover rounded-xl cursor-pointer"
-                  onClick={() => window.open(product.link, '_blank')}
-                />
-              </div>
-              <div className="flex-1">
-                <a
-                  href={product.link}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-lg font-semibold text-gray-900"
-                >
-                  {product.name}
-                </a>
-                <p className="text-md font-medium text-gray-700">{product.price}</p>
-                <button
-                  className="mt-3 flex items-center gap-2 px-4 py-2 rounded-lg font-semibold transition hover:opacity-90"
-                  style={{ backgroundColor: colorCode, color: '#fff' }}
-                  onClick={() =>
-                    handleAddToCart(
-                      `name:${product.name},variantId:${product.variant_id},Link:${product.link}`
-                    )
-                  }
-                >
-                  <ShoppingCartOutlined />
-                  <span>+</span>
-                </button>
-              </div>
-            </div>
-          );
-        }
-
-        return (
-          <p key={idx} className="whitespace-pre-wrap break-words">
-            {formatTextWithLinks(part)}
-          </p>
-        );
-      })}
-    </div>
-  );
-};
-
-export default ZidAssistantChatMessage;