shopify-chatbot-widget 0.0.4

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

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

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

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

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

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