shopify-chatbot-widget 0.7.9 → 0.8.2

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

@@ -0,0 +1,531 @@
+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;
+ calendly:string;
+ disbleCheckout: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,
+  calendly,
+  disbleCheckout
+}) => {
+  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,isFetchingMessages } = 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: calendly,
+    socket:socket,
+    newSession:newSession,
+    setMessages,
+    setIsChatlogCreated,
+    setChatLogWaiting,
+    setNewUser,
+    setCreateNew,
+    setSessionCreated,
+    setNewSession:setNewSession
+  });
+
+
+
+  const sendMessage = async () => {
+    if (!input.trim()) return;
+
+    let message=input
+    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 {
+      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 {
+      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) => {
+      try {
+        await addToCart(variantId, name, qty);
+  
+        const shortName = shorten(name, 20);
+        setNotification(`✅ ${qty}× ${shortName} added to cart`);
+      } catch (err: any) {
+        setNotification(`❌ ${err.message || "Failed to add item"}`);
+      }
+    },
+    [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}
+          sessionId={sessionId}
+          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}
+            calendly={calendly}
+            disableCheckout={disbleCheckout}
+            isfetchingMessage={isFetchingMessages}
+          />
+      
+
+
+
+      <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,28 @@
+// src/components/Notification.tsx
+import React, { useEffect } from 'react';
+import '../notification.css'; // Import the CSS
+
+interface NotificationProps {
+  message: string;
+  onClose: () => void;
+  duration?: number;
+}
+
+const Notification: React.FC<NotificationProps> = ({
+  message,
+  onClose,
+  duration = 1000,
+}) => {
+  useEffect(() => {
+    const timer = setTimeout(onClose, duration);
+    return () => clearTimeout(timer);
+  }, [onClose, duration]);
+
+  return (
+    <div className="jawebcss-notification">
+      {message}
+    </div>
+  );
+};
+
+export default Notification;

package/src/Chatbot/components/Powered.css

@@ -0,0 +1,29 @@
+.jawebcss-powered-container {
+    display: inline-flex;
+    margin-top: 10px;
+    align-items: center;
+    gap: 6px;
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+    color: #555;
+    padding: 4px 8px;
+    border-radius: 6px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
+  
+  .jawebcss-powered-label {
+    font-weight: 400;
+  }
+  
+  .jawebcss-powered-link {
+    color: #7f28f8;
+    font-weight: 600;
+    text-decoration: none;
+    transition: color 0.2s ease;
+  }
+  
+  .jawebcss-powered-link:hover {
+    color: #5e1dc3;
+    text-decoration: underline;
+  }
+  

package/src/Chatbot/components/Powered.tsx

@@ -0,0 +1,12 @@
+import './Powered.css';
+
+export default function Powered() {
+  return (
+    <div className="jawebcss-powered-container">
+      <span className="jawebcss-powered-label">Powered by</span>
+      <a href="https://jaweb.me/" target="_blank" className="jawebcss-powered-link" rel="noopener noreferrer">
+        Jaweb
+      </a>
+    </div>
+  );
+}