shopify-chatbot-widget 0.0.4 → 0.0.7

package/src/Chatbot/components/Messenger/Messenger.tsx

@@ -1,521 +0,0 @@
-import React, { useState,useCallback } from 'react';
-import { Button, Avatar } from 'antd';
-import { CloseOutlined,ArrowLeftOutlined } from '@ant-design/icons';
-import '../../Chatbot.css';
-import { useChatbotMessage } from '../../../hooks/useSessionMessages';
-import axios from 'axios';
-import ChatInput from '../../components/ChatInput';
-import Suggestions from '../../components/Suggestions';
-import Powered from '../../components/Powered';
-import ChatMessages from '../../components/Messages/ChatMessages';
-import config from '../../../hooks/config';
-import { useChatbotAPI } from '../../../hooks/useChatbotAPI';
-import type { ChatMessage } from '../../../types/chatbot';
-import { getCookie } from '../../../utils/cookies';
-import useChatSocket from '../../../hooks/useWebsocke';
-import Notification from '../Notification';
-import CartWidget from '../Messages/CartWidget';
-import { useCart } from '../../../hooks/useCart';
-
-type MessengerProps = {
-  chatbotLogo: string;
-  userType:string;
-  agentName:string;
-  colorCode: string;
-  newSession: boolean;
-  messagesSuggestions: string[];
-  disableForm: boolean;
-  sessionId:string;
-  setOpen: (v: boolean) => void;
-  setView: (v: string) => void;
-  setNewSession: (v: boolean) => void;
-
-
- Opened: boolean;
-};
-
-interface UploadImageResponse {
-    image_url: string;
-  }
-
-
-  interface UploadAudioResponse {
-    audio_url: string;
-    transcription_text:string;
-  }
-
-const Messenger: React.FC<MessengerProps> = ({
-  chatbotLogo,
-  agentName,
-  colorCode,
-  newSession,
-  userType,
-  setNewSession,
-  messagesSuggestions,
-  disableForm,
-  sessionId,
-  setOpen,
-  Opened,
-  setView
-}) => {
-  const [input, setInput] = useState('');
-  const [selectedImage, setSelectedImage] = useState<File | null>(null);
-  const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
-  const [isSending, setIsSending] = useState(false);
-
-
-
-
-  const [, setNewUser] = useState(() => {
-    const cookieValue = getCookie('new_user');
-    return cookieValue === 'true';
-  });
-  
-
-  const [isChatlogCreated, setIsChatlogCreated] = useState(false);
-  const [, setChatLogWaiting] = useState(false);
-  const [createNew, setCreateNew] = useState(false);
-  const [, setSessionCreated] = useState(false);
-
-  
-  const { messages, setMessages } = useChatbotMessage(sessionId);
-;
-const [agentStatus, setAgentStatus] = useState<{ status?: string; typing?: boolean; user?: string }>({});
-const [notification, setNotification] = useState<string | null>(null);
-
-
-
-
-
-const handleSocketData = useCallback(
-  (data: any) => {
-    if (data.status) {
-      setAgentStatus({
-        status: data.status,
-        user: data.user || 'Support',
-      });
-      return;
-    }
-    const { additionalData = {}, message, image_url } = data;
-    if (!additionalData.isBusiness && additionalData.sender !== 'AI') {
-      setMessages((prev) => [
-        ...prev,
-        {
-          role: 'assistant',
-          content: message,
-          isBusiness: false,
-          sender: additionalData.sender,
-          image_url,
-        } as ChatMessage,
-      ]);
-    }
-  },
-  [setMessages]
-);
-
-const socket = useChatSocket(sessionId, handleSocketData);
-
-
-  
-  const { apiCall } = useChatbotAPI({
-    disableChatbot: false,
-    disableChatbotGlobally: false,
-    isChatlogCreated,
-    createNew,
-    disableForm: disableForm,
-    calendlyLink: null,
-    socket:socket,
-    newSession:newSession,
-    setMessages,
-    setIsChatlogCreated,
-    setChatLogWaiting,
-    setNewUser,
-    setCreateNew,
-    setSessionCreated,
-    setNewSession:setNewSession
-  });
-
-
-
-  const sendMessage = async () => {
-    if (!input.trim()) return;
-
-    let message=input
-    setInput('');
-    setIsSending(true); // 🔒 Disable input
-    const userMsg: ChatMessage = { role: 'user', content: message };
-    setMessages(prev => [...prev, userMsg]);
-  
-    if (socket && socket.readyState === WebSocket.OPEN) {
-      const additionalData = { isBusiness: true, SessionId: sessionId };
-      const messagePayload = JSON.stringify({
-        message: message,
-        additionalData: additionalData,
-      });
-      socket.send(messagePayload);
-    }
-  
-    try {
-      await apiCall(input, newSession, sessionId);
-    } catch (err) {
-      console.error(err);
-    } finally {
-      setInput('');
-      setIsSending(false); // 🔓 Re-enable input
-    }
-  };
-
-  const sendMessageSuggestion = async (message: string): Promise<void> => {
-    if (!message.trim()) return;
-  
-    setIsSending(true); // 🔒 Disable input
-  
-    const userMsg: ChatMessage = { role: 'user', content: message };
-    setMessages(prev => [...prev, userMsg]);
-  
-    if (socket && socket.readyState === WebSocket.OPEN) {
-      const additionalData = { isBusiness: true, SessionId: sessionId };
-      const messagePayload = JSON.stringify({
-        message,
-        additionalData,
-      });
-      socket.send(messagePayload);
-    }
-  
-    try {
-      await apiCall(message, newSession, sessionId);
-    } catch (error) {
-      console.error("Error sending suggestion:", error);
-    } finally {
-      setInput('');
-      setIsSending(false); // 🔓 Re-enable input
-    }
-  };
-  
- 
-
- async function handleSendImage  (image: File, userMessage:string)  {
-    const tempMessageId = Date.now();
-    const tempImageUrl = URL.createObjectURL(image);
-
-
-
-    if (!image) return;
-
-  
-
-  
-    
-    const tempJson: ChatMessage = {
-      id: tempMessageId,
-      role: 'user', // ✅ satisfies union
-      content: userMessage || '',
-      image_url: tempImageUrl,
-      isBusiness: true,
-      status: 'uploading',
-
-
-    };
-
-    
-    setMessages((prevMessages) => {
-      const updatedMessages = [...prevMessages, tempJson];
-      return updatedMessages;
-    });
-
-
-    let finalImageUrl: string | null = null;
-  
-    if (image) {
-
-      try {
-        const formData = new FormData();
-        formData.append("image", image);
-  
-        const uploadResponse = await axios.post<UploadImageResponse>(
-            `${config.apiUrl}upload-image/`,
-            formData
-          );
-
-
-        if (uploadResponse.status === 201 && uploadResponse.data?.image_url) {
-            finalImageUrl = uploadResponse.data.image_url;   
-            setMessages((prevMessages) => {
-              const updatedMessages = prevMessages.map((msg) =>
-                msg.id === tempMessageId && finalImageUrl
-                  ? { ...msg, image_url: finalImageUrl } // ✅ only if finalImageUrl is not null
-                  : msg
-              );
-              return updatedMessages;
-            });
-        }
-      } catch (error) {
-        console.error("Error uploading image:", error);
-        setMessages((messageList) =>
-        messageList.map((msg) =>
-          msg.id === tempMessageId ? { ...msg, status: 'failed' } : msg
-        )
-      );
-        return;
-      }
-    }
-
-    try {
-
-
-      if (socket && socket.readyState === WebSocket.OPEN) {
-        const additionalData = { isBusiness: true, SessionId: sessionId };
-        const messagePayload = JSON.stringify({
-          image_url: finalImageUrl || null, 
-          message: input.trim()||"",
-          additionalData: additionalData,
-        });
-
-        socket.send(messagePayload);
-
-      }
-  
-
-      if (finalImageUrl) {
-        setMessages((messageList) =>
-        messageList.map((msg) =>
-          msg.id === tempMessageId ? { ...msg, status: 'delivered' } : msg
-        )
-      );
-
-        apiCall(userMessage.trim() || '',newSession,sessionId,finalImageUrl,true)
-      }
-
-  
-
-
-    } catch (error) {
-      console.error('Error sending Image message:', error);
-  
-      setMessages((messageList) =>
-        messageList.map((msg) =>
-          msg.id === tempMessageId ? { ...msg, status: 'failed' } : msg
-        )
-      );
-    } finally {
-      setSelectedImage(null);
-    }
-  };
-
-
-
-
-  const handleSendVoice = async (audio: Blob) => {
-    if (!audio) return;
-  
-    const tempAudioUrl = URL.createObjectURL(audio);
-    const tempMessageId = Date.now();
-  
-    // Step 1: Add temporary audio message
-    const tempMessage: ChatMessage = {
-      id: tempMessageId,
-      role: 'user',
-      content: '',
-      audio_url: tempAudioUrl,
-      isBusiness: true,
-      status: 'uploading',
-    };
-  
-    setMessages(prev => [...prev, tempMessage]);
-  
-    let finalAudioUrl: string | undefined = undefined;
-    let transcriptionText: string = '';
-  
-    try {
-      // Step 2: Upload audio to backend
-      const formData = new FormData();
-      formData.append('audio', audio);
-  
-      const uploadResponse = await axios.post<UploadAudioResponse>(
-        `${config.apiUrl}upload-audio/`,
-        formData
-      );
-
-   
-
-     
-
-  
-      if (uploadResponse.status === 201) {
-        finalAudioUrl = uploadResponse.data.audio_url;
-        transcriptionText = uploadResponse.data.transcription_text || '[Audio]';
-  
-        // Step 3: Replace temp audio URL with final URL
-        setMessages(prev =>
-          prev.map(msg =>
-            msg.id === tempMessageId
-              ? {
-                  ...msg,
-                  audio_url: finalAudioUrl,
-                  content: transcriptionText,
-                  status: 'delivered',
-                }
-              : msg
-          )
-        );
-      }
-    } catch (error) {
-      console.error('Audio upload failed:', error);
-      setMessages(prev =>
-        prev.map(msg =>
-          msg.id === tempMessageId ? { ...msg, status: 'failed' } : msg
-        )
-      );
-      return;
-    }
-  
-    try {
-      // Step 4: Send to WebSocket
-      if (socket && socket.readyState === WebSocket.OPEN) {
-        const payload = JSON.stringify({
-          audio_url: finalAudioUrl,
-          message: transcriptionText,
-          additionalData: {
-            isBusiness: true,
-            SessionId: sessionId,
-          },
-        });
-        socket.send(payload);
-      }
-  
-      // Step 5: Send to API
-      if (finalAudioUrl) {
-        apiCall(transcriptionText,newSession ,sessionId, finalAudioUrl, false);
-      }
-    } catch (error) {
-      console.error('Sending audio to API/WebSocket failed:', error);
-      setMessages(prev =>
-        prev.map(msg =>
-          msg.id === tempMessageId ? { ...msg, status: 'failed' } : msg
-        )
-      );
-    } finally {
-      setAudioBlob(null); // Step 6: cleanup
-    }
-  };
-
-  const  { items, loading, addToCart, removeFromCart, refresh } = useCart(sessionId);
-
-
-  // replace your old handleToCart:
-  function shorten(str: string, maxLen = 20) {
-    return str.length > maxLen ? `${str.slice(0, maxLen)}…` : str;
-  }
-  
-  const handleToCart = useCallback(
-    async (variantId: string, name: string, qty = 1) => {
-      await addToCart(variantId, name, qty);
-  
-      // truncate the name for display
-      const shortName = shorten(name, 20);
-  
-      setNotification(`✅ ${qty}× ${shortName} added to cart`);
-    },
-    [addToCart]
-  );
-
-  const handleRemoveFromCart = useCallback(
-    async (variantId: string, qty = 1) => {
-      await removeFromCart(variantId, qty);
-      setNotification(`❌ Removed ${qty} item(s) from cart`);
-    },
-    [removeFromCart]
-  );
-  
- 
-  
-
-  return (
-    <div className="chatbot-box">
-        <div className="chatbot-header">
-        {/* Back Button */}
-        <Button
-            type="text"
-            style={{ marginRight: 8 }}
-            onClick={() => setView('sessions')} // or use a callback like `goBack()` if needed
-            icon={<ArrowLeftOutlined />}
-        />
- 
-        {/* Avatar + Title */}
-        <Avatar
-            src={
-            chatbotLogo ||
-            'https://t4.ftcdn.net/jpg/08/90/53/75/360_F_890537572_m7EIYLzXgeTYGDNoIr7KEDOElFUTzFy0.jpg'
-            }
-        />
-        <span className="chatbot-title">{agentName || 'Ai Assistant'}</span>
-
-        {items.length > 0 && (
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-        <CartWidget
-          items={items}
-          loading={loading}
-          onRefresh={refresh}
-          onRemove={removeFromCart}
-          colorCode={colorCode}
-          sendMessage={sendMessageSuggestion}
-        />
-      </div>
-    )}
-          
-              
-        {/* Close Button */}
-        <CloseOutlined
-            onClick={() => setOpen(!Opened)}
-            className="chatbot-close"
-            style={{ marginLeft: 'auto' }}
-        />
-        </div>
-          
-
-          {notification && (
-            <Notification
-            message={notification}
-            onClose={() => setNotification(null)}
-          />
-        )}
-
-      
-        
-
-
-      <ChatMessages
-        messages={messages}
-        colorCode={colorCode}
-        isLoading={false}
-        handleAddToCart={handleToCart}
-        agentStatus={agentStatus}
-        sessionId={sessionId}
-        handleRemoveFromCart={handleRemoveFromCart}
-        userType={userType}
-      />
-
-      <div className="chatbot-input-area">
-        <Suggestions sendMessageSuggestion={sendMessageSuggestion} colorCode={colorCode} suggestions={messagesSuggestions} />
-
-        <ChatInput
-          userMessage={input}
-          setUserMessage={setInput}
-          handleSendMessage={sendMessage}
-          handleSendImage={handleSendImage}
-          handleSendVoice={handleSendVoice}
-          selectedImage={selectedImage}
-          setSelectedImage={setSelectedImage}
-          audioBlob={audioBlob}
-          setAudioBlob={setAudioBlob}
-          isSending={isSending} 
-
-        />
-
-        <Powered />
-      </div>
-    </div>
-  );
-};
-
-export default Messenger;

package/src/Chatbot/components/Notification.tsx

@@ -1,27 +0,0 @@
-// src/components/Notification.tsx
-import React, { useEffect } from 'react';
-
-interface NotificationProps {
-  message: string;
-  onClose: () => void;
-  duration?: number; // milliseconds before auto-close
-}
-
-const Notification: React.FC<NotificationProps> = ({
-  message,
-  onClose,
-  duration = 1000,
-}) => {
-  useEffect(() => {
-    const timer = setTimeout(onClose, duration);
-    return () => clearTimeout(timer);
-  }, [onClose, duration]);
-
-  return (
-    <div className="fixed top-5 right-4 bg-gray-400 text-white px-4 py-2 rounded-lg shadow-lg z-50">
-      {message}
-    </div>
-  );
-};
-
-export default Notification;

package/src/Chatbot/components/Powered.css

@@ -1,16 +0,0 @@
-a{
-    color: gray;
-    text-decoration: none;
-
-}
-
-a:hover{
-    color:rgb(63, 153, 238);
-    cursor: pointer;
-}
-
-.powered-container{
-    margin-top: 6px;
-
-}
-

package/src/Chatbot/components/Powered.tsx

@@ -1,13 +0,0 @@
-import './Powered.css'
-export default function Powered() {
-  return (
-    <div>
-        <div className='powered-container'>
-        <a href='https://jaweb.me/' target="_blank">
-        Powered by Jaweb
-        </a>
-        </div>
-
-    </div>
-  )
-}

package/src/Chatbot/components/Sessions/CreateSession.tsx

@@ -1,139 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Input, Typography, Spin } from 'antd';
-import { ArrowLeftOutlined, LoadingOutlined } from '@ant-design/icons';
-import config from '../../../hooks/config';
-import { getCookie } from '../../../utils/cookies';
-
-const { Title, Text } = Typography;
-
-type CreateSessionProps = {
-  onBack: () => void;
-  onCreate: (data: {
-    name: string;
-    email: string;
-    phone: string;
-    session_id: string;
-    messages: any[];
-    hasInfo:boolean;
-  }) => void;
-  colorCode: string;
-  visitorId: string;
-  country: string;
-};
-
-const CreateSession: React.FC<CreateSessionProps> = ({ onBack, onCreate, colorCode, visitorId, country }) => {
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [phone, setPhone] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleSubmit = async () => {
-    const payload = {
-      visitor_id:visitorId,
-      country,
-      name,
-      email,
-      phone,
-      company_username: getCookie('company_username'),
-    };
-
-    try {
-      setIsLoading(true);
-
-      const res = await fetch(`${config.apiUrl}chatlog-create/`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(payload),
-      });
-
-      const data = await res.json();
-
-
-      if (res.ok ) {
-
-        onCreate({
-          name,
-          email,
-          phone,
-          session_id: data?.user_session_id,
-          messages: data.messages,
-          hasInfo:true
-        });
-
-      } else {
-        console.error('Failed to register:', data);
-      }
-    } catch (err) {
-      console.error('Error submitting session data:', err);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <div style={{ padding: '1.5rem' }}>
-      <Button
-        type="text"
-        icon={<ArrowLeftOutlined />}
-        onClick={onBack}
-        style={{ marginBottom: '1rem' }}
-      >
-        Back
-      </Button>
-
-      <Title level={4} style={{ marginBottom: '2rem' }}>
-        Let's create a session
-      </Title>
-
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
-        <div>
-          <Text strong>👋 Please, can I have your name?</Text>
-          <Input
-            size="large"
-            placeholder="John Doe"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            style={{ marginTop: '0.5rem' }}
-          />
-        </div>
-
-        <div>
-          <Text strong>📧 What’s your email address?</Text>
-          <Input
-            size="large"
-            type="email"
-            placeholder="you@example.com"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            style={{ marginTop: '0.5rem' }}
-          />
-        </div>
-
-        <div>
-          <Text strong>📱 May I have your phone number?</Text>
-          <Input
-            size="large"
-            placeholder="+1 234 567 8900"
-            value={phone}
-            onChange={(e) => setPhone(e.target.value)}
-            style={{ marginTop: '0.5rem' }}
-          />
-        </div>
-
-        <Button
-          type="primary"
-          size="large"
-          style={{ backgroundColor: colorCode, color: 'white' }}
-          onClick={handleSubmit}
-          disabled={!name || !email || !phone}
-        >
-          {isLoading ? <Spin indicator={<LoadingOutlined style={{ fontSize: 20, color: 'white' }} spin />} /> : 'Create Session'}
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default CreateSession;