shopify-chatbot-widget 0.7.9 → 0.8.2

package/src/hooks/useChatbotAPI.tsx

@@ -0,0 +1,167 @@
+import { useCallback } from 'react';
+import config from './config';
+
+interface Params {
+  disableChatbot: boolean;
+  disableChatbotGlobally: boolean;
+  isChatlogCreated: boolean;
+  createNew: boolean;
+  disableForm: boolean;
+  calendlyLink: string | null;
+  socket: WebSocket | null;
+  newSession:Boolean;
+  setNewSession: (v: boolean) => void;
+  setMessages: React.Dispatch<React.SetStateAction<any[]>>;
+  setIsChatlogCreated: (v: boolean) => void;
+  setChatLogWaiting: (v: boolean) => void;
+  setNewUser: (v: boolean) => void;
+  setCreateNew: (v: boolean) => void;
+  setSessionCreated: (v: boolean) => void;
+}
+
+export const useChatbotAPI = (params: Params) => {
+  const {
+    disableChatbot,
+    disableChatbotGlobally,
+    isChatlogCreated,
+    createNew,
+    disableForm,
+    calendlyLink,
+    socket,
+    newSession,
+    setNewSession,
+    setMessages,
+  } = params;
+
+  const apiCall = useCallback(
+    async (
+      userMessage: string,
+      newSession:boolean,
+      sessionId: string,
+      finalImageUrl?: string,
+      isImage?: boolean
+    ) => {
+      if (newSession) {
+        setMessages((prev) => [
+          ...prev,
+          { role: 'assistant', content: 'typing', typing: true },
+        ]);
+
+        await fetch(`${config.apiUrl}chatlog-create/`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ visitor_id: localStorage.getItem('visitor_id') ,  company_username: localStorage.getItem('company_username'),session_id:sessionId}),
+        });
+
+        setNewSession(false)
+
+      }
+
+      if (!disableChatbot && !disableChatbotGlobally) {
+        setMessages((prev) => {
+          const withoutTyping = prev.filter((msg) => !msg.typing);
+          return [...withoutTyping, { role: 'assistant', content: 'typing', typing: true }];
+        });
+
+      }
+
+      try {
+        const res = await fetch(`${config.apiUrl}message-create/`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            message: userMessage,
+            isBusiness: true,
+            session_id: sessionId,
+            organization: localStorage.getItem('company_username'),
+            isImage,
+            image_url: finalImageUrl,
+          }),
+        });
+
+        if (res.ok) {
+          const data = await res.json();
+
+          if (data.message_history) {
+            const assistantMessage = data.isConnect
+              ? {
+                  role: 'assistant',
+                  content: 'Your support request is on its way—please stand by!',
+                  isConnect: true,
+                  sender: 'Ai Agent',
+                  isBusiness: false,
+                  isHtml: data.isHtml,
+                }
+              : {
+                  role: 'assistant',
+                  content: data.message,
+                  sender: 'Ai Agent',
+                  isBusiness: false,
+                  isHtml: data.isHtml,
+                };
+
+            // Send message through WebSocket if available
+            if (socket?.readyState === WebSocket.OPEN) {
+              socket.send(
+                JSON.stringify({
+                  message: data.message,
+                  additionalData: {
+                    isBusiness: false,
+                    SessionId: sessionId,
+                    sender: 'AI',
+                    response: 'from_ai_web',
+                  },
+                })
+              );
+            }
+
+            
+            // Update messages safely
+            setMessages((prev) => {
+              const filtered = prev.filter((msg) => !msg.typing);
+              const updated = [...filtered, assistantMessage];
+
+              console.log(calendlyLink)
+              // Add Calendly message if applicable
+              if (
+                data.message &&
+                calendlyLink &&
+                /book\s?(a\s?)?meeting|schedule\s?(a\s?)?(call|meeting)|let\s?('s)?\s?meet|set\s?up\s?(a\s?)?meeting|book\s?(an\s?)?appointment/i.test(
+                  data.message
+                )
+              ) {
+                console.log("meeting please")
+                updated.push({
+                  role: 'assistant',
+                  content: 'Scheduling a meeting...',
+                  isBusiness: false,
+                  calendly: true,
+                });
+              }
+
+              return updated;
+            });
+          } else if (data.status === 'success') {
+            setMessages((prev) => prev.filter((msg) => !msg.typing));
+          }
+        } else {
+          console.error('message-create failed');
+        }
+      } catch (error) {
+        console.error('Message error:', error);
+      }
+    },
+    [
+      disableChatbot,
+      disableChatbotGlobally,
+      isChatlogCreated,
+      createNew,
+      disableForm,
+      calendlyLink,
+      socket,
+      newSession,
+    ]
+  );
+
+  return { apiCall };
+};

package/src/hooks/useChatbotData.tsx

@@ -0,0 +1,132 @@
+// hooks/useChatbotData.ts
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import config from './config';
+import i18n from '../i18n';
+import type { ChatbotDetailsResponse, SuggestionResponse } from '../types/chatbot';
+
+
+const MAX_RETRIES = 3;
+const RETRY_DELAY = 3000;
+
+export const useChatbotData = () => {
+ 
+  const [isFetchingDetails, setIsFetchingDetails] = useState(true);
+  const [disableForm, setDisableForm] = useState(false);
+  const [colorCode, setColorCode] = useState('');
+  const [chatbotLogo, setChatbotLogo] = useState('');
+  const [disableChatbotGlobally, setDisableChatbotGlobally] = useState(false);
+  const [removePoweredByJaweb, setRemovePoweredByJaweb] = useState(false);
+  const [initialMessageText, setInitialMessageText] = useState('');
+  const [subscription, setSubscription] = useState('');
+  const [calendly, setCalendly] = useState<string | null>(null);
+  const [merchantPhone, setMerchantPhone] = useState('');
+  const [messagesSuggestions, setMessagesSuggestions] = useState<string[]>([]);
+  const [restSuggestions, setRestSuggestions] = useState<string[]>([]);
+  const [userType,setUserType]=useState('')
+  const [disbleCheckout, setDisbleCheckout] = useState(false);
+
+
+  const fetchData = async (retryCount = 0) => {
+    const company_name = localStorage.getItem('company_username');
+    setIsFetchingDetails(true);
+
+    const configObj = {
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      params: {
+        username: company_name,
+      },
+    };
+
+    try {
+      const chatbotDetailsResponse = await axios.get<ChatbotDetailsResponse>(
+        `${config.apiUrl}chatbot-details/`,
+        configObj
+      );
+
+      const data = chatbotDetailsResponse.data.data;
+
+      if (data.language === 'Arabic') {
+        i18n.changeLanguage('ar');
+      } else {
+        i18n.changeLanguage('en');
+      }
+
+
+
+      setDisableForm(data.chatbot_form);
+      setColorCode(data.chatbot_color);
+      setChatbotLogo(data.chatbot_logo);
+      setDisableChatbotGlobally(data.disable_chatbot_globally);
+      setRemovePoweredByJaweb(data.remove_powered_by_jaweb);
+      setInitialMessageText(data.chatbot_initial_msg);
+      setSubscription(data.status);
+      setUserType(data.mode)
+      setCalendly(data.calendly_link ?? null);
+      setDisbleCheckout(data.disable_checkout)
+
+
+
+      if (data.calendly_link) setCalendly(data.calendly_link);
+      if (data.phone_number_id) setMerchantPhone(`+${data.phone_number_id}`);
+
+      const suggestionsResponse = await axios.get<SuggestionResponse>(
+        `${config.apiUrl}chatbot-plugin-suggestions/`,
+        configObj
+      );
+
+
+// 💡 Safe fallback logic
+      let suggestions: string[] = [];
+
+      if (Array.isArray(suggestionsResponse.data.data)) {
+        suggestions = suggestionsResponse.data.data;
+      } else if (Array.isArray((suggestionsResponse.data as any).user_questions)) {
+        suggestions = (suggestionsResponse.data as any).user_questions;
+      }
+
+      if (suggestions.length > 0) {
+        setMessagesSuggestions(suggestions.slice(0, 3));
+        setRestSuggestions(suggestions.slice(3));
+      } else {
+        setMessagesSuggestions([]);
+        setRestSuggestions([]);
+}
+
+      setIsFetchingDetails(false);
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      if (retryCount < MAX_RETRIES) {
+        setTimeout(() => fetchData(retryCount + 1), RETRY_DELAY);
+      } else {
+        console.error('Max retries reached. Could not fetch data.');
+      }
+    }
+  };
+
+
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return {
+    isFetchingDetails,
+    disableForm,
+    colorCode,
+    chatbotLogo,
+    disableChatbotGlobally,
+    removePoweredByJaweb,
+    initialMessageText,
+    subscription,
+    calendly,
+    merchantPhone,
+    messagesSuggestions,
+    restSuggestions,
+    userType,
+    disbleCheckout
+  };
+};

package/src/hooks/useSessionMessages.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import config from './config';
+import type { ChatMessage } from '../types/chatbot';
+
+export const useChatbotMessage = (sessionId: string | null) => {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [isFetchingMessages, setisFetchingMessages] = useState(false);
+
+
+  const loadHistory = async () => {
+    const sid = sessionId
+    if (!sid) return;
+
+    setisFetchingMessages(true);
+
+
+    try {
+      const res = await axios.get<{ messages: ChatMessage[] }>(
+        `${config.apiUrl}chat-message-history/`,
+        {
+          withCredentials: true,
+          params: {
+            session_id: sid,
+            username: localStorage.getItem('company_username'),
+          },
+        }
+      );
+
+
+      if (res.data?.messages?.length > 0) {
+        setMessages(res.data.messages);
+        setisFetchingMessages(false)
+      
+      }
+    } catch (err) {
+      console.error("Couldn't load history", err);
+    }
+  };
+
+  useEffect(() => {
+    loadHistory();
+  }, [sessionId]); 
+
+  return {
+    messages,
+    setMessages,
+    isFetchingMessages
+  };
+};

package/src/hooks/useWebsocke.tsx

@@ -0,0 +1,45 @@
+// hooks/useChatSocket.ts
+import { useEffect, useRef } from 'react';
+import config from './config';
+
+export default function useChatSocket(
+  session_id: string,
+  onMessage: (data: any) => void
+) {
+  const socketRef = useRef<WebSocket | null>(null);
+  // keep a stable ref to the latest onMessage
+  const onMessageRef = useRef(onMessage);
+  useEffect(() => {
+    onMessageRef.current = onMessage;
+  }, [onMessage]);
+
+  useEffect(() => {
+    if (!session_id) return;
+
+    const ws = new WebSocket(`${config.websocketUrl}/chat/${session_id}/`);
+    socketRef.current = ws;
+
+    // precise add/remove so we never leak handlers
+    const handle = (event: MessageEvent) => {
+      try {
+        const data = JSON.parse(event.data);
+        onMessageRef.current(data);
+      } catch (e) {
+        console.error('Invalid JSON', e);
+      }
+    };
+    ws.addEventListener('message', handle);
+
+    // you can still do onopen/onclose, but tear them down too if you attach them
+    const handleClose = () => { /* reconnect logic… */ };
+    ws.addEventListener('close', handleClose);
+
+    return () => {
+      ws.removeEventListener('message', handle);
+      ws.removeEventListener('close', handleClose);
+      ws.close();
+    };
+  }, [session_id]);
+
+  return socketRef.current;
+}

package/src/i18n.tsx

@@ -0,0 +1,30 @@
+// src/i18n.ts
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+const resources = {
+  en: {
+    translation: {
+      welcome: "Hi there, you’re speaking with Jaweb AI Assistant.",
+      // Add more English translations here
+    },
+  },
+  ar: {
+    translation: {
+      welcome: "مرحبًا، أنت تتحدث إلى مساعد Jaweb AI.",
+      // Add more Arabic translations here
+    },
+  },
+};
+
+i18n.use(initReactI18next).init({
+  resources,
+  lng: 'en', // default language
+  fallbackLng: 'en',
+
+  interpolation: {
+    escapeValue: false, // React already escapes
+  },
+});
+
+export default i18n;

package/src/index.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/types/chatbot.ts

@@ -0,0 +1,40 @@
+// types/chatbot.ts
+
+export interface ChatbotDetailsResponse {
+  data: {
+    language: string;
+    chatbot_form: boolean;
+    chatbot_color: string;
+    chatbot_logo: string;
+    disable_chatbot_globally: boolean;
+    remove_powered_by_jaweb: boolean;
+    chatbot_initial_msg: string;
+    status: string;
+    calendly_link?: string | null;
+    phone_number_id?: string | null;
+    mode:string;
+    disable_checkout:boolean;
+  };
+}
+
+export interface SuggestionResponse {
+  data?: string[]; // when data is returned directly
+  user_questions?: string[] | null; // when API sends it here
+}
+
+
+export interface ChatMessage {
+  role?: 'user' | 'bot' | 'assistant' | 'system';
+  content?:string;
+  isBusiness?:boolean;
+  sender?:string;
+  typing?: boolean;
+  id?:Number;
+  image_url?:string;
+  status?:string;
+  audio_url?: string;
+  isConnect?:boolean;
+  calendly?:boolean;
+
+
+}

package/src/utils/cookies.tsx

@@ -0,0 +1,14 @@
+// utils/cookies.ts
+import Cookies from 'js-cookie';
+
+export const getCookie = (key: string): string | undefined => {
+  return Cookies.get(key);
+};
+
+export const setCookie = (key: string, value: string, days = 30): void => {
+  Cookies.set(key, value, { expires: days });
+};
+
+export const removeCookie = (key: string): void => {
+  Cookies.remove(key);
+};

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />