shopify-chatbot-widget 1.0.9 → 1.0.10

package/src/hooks/useChatbotAPI.tsx

@@ -65,80 +65,165 @@ export const useChatbotAPI = (params: Params) => {
 
       }
 
+      const requestBody = JSON.stringify({
+        message: userMessage,
+        isBusiness: true,
+        session_id: sessionId,
+        organization: localStorage.getItem('company_username'),
+        isImage,
+        image_url: finalImageUrl,
+      });
+
+      const finalizeMessages = (data: any, streamId?: number) => {
+        if (data.message_history) {
+          const assistantMessage: any = {
+            role: 'assistant',
+            content: data.message,
+            sender: 'Ai Agent',
+            isBusiness: false,
+            isHtml: data.isHtml,
+          };
+          if (data.isConnect) assistantMessage.isConnect = true;
+          if (data.isBookings) assistantMessage.isBookings = true;
+
+          // Broadcast the reply so the merchant dashboard sees it live
+          if (socket?.readyState === WebSocket.OPEN) {
+            socket.send(
+              JSON.stringify({
+                message: data.message,
+                additionalData: {
+                  isBusiness: false,
+                  SessionId: sessionId,
+                  sender: 'AI',
+                  response: 'from_ai_web',
+                },
+              })
+            );
+          }
+
+          setMessages((prev) => {
+            const filtered = prev.filter(
+              (msg) => !msg.typing && (streamId === undefined || msg.streamId !== streamId)
+            );
+            return [...filtered, assistantMessage];
+          });
+        } else if (data.status === 'success') {
+          setMessages((prev) =>
+            prev.filter((msg) => !msg.typing && (streamId === undefined || msg.streamId !== streamId))
+          );
+        }
+      };
+
+      // ---- Streaming path: tokens render as the model writes ----
       try {
-        const res = await fetch(`${config.apiUrl}message-create/`, {
+        const streamRes = await fetch(`${config.apiUrl}message-create-stream/`, {
           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,
-          }),
+          body: requestBody,
         });
 
-        if (res.ok) {
-          const data = await res.json();
-  
-
-          if (data.message_history) {
-
-            const assistantMessage = data.isConnect
-            ? {
-                role: 'assistant',
-                content: data.message,
-                isConnect: true,
-                sender: 'Ai Agent',
-                isBusiness: false,
-                isHtml: data.isHtml,
-              }
-            : data.isBookings
-            ? {
-                role: 'assistant',
-                content: data.message,
-                isBookings: true,
-                sender: 'Ai Agent',
-                isBusiness: false,
-                isHtml: data.isHtml,
-              }
-            : {
+        if (
+          streamRes.ok &&
+          streamRes.body &&
+          (streamRes.headers.get('content-type') || '').includes('text/event-stream')
+        ) {
+          const reader = streamRes.body.getReader();
+          const decoder = new TextDecoder();
+          const streamId = Date.now();
+          let buffer = '';
+          let target = ''; // full text received so far
+          let shown = 0; // characters currently revealed
+          let streamEnded = false;
+          let finalData: any = null;
+
+          const renderLive = (content: string) => {
+            setMessages((prev) => {
+              const withoutTyping = prev.filter((msg) => !msg.typing);
+              const idx = withoutTyping.findIndex((msg) => msg.streamId === streamId);
+              const live = {
                 role: 'assistant',
-                content: data.message,
+                content,
                 sender: 'Ai Agent',
                 isBusiness: false,
-                isHtml: data.isHtml,
+                streamId,
               };
-          
-            // 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',
-                  },
-                })
-              );
+              if (idx === -1) return [...withoutTyping, live];
+              const copy = [...withoutTyping];
+              copy[idx] = live;
+              return copy;
+            });
+          };
+
+          // Pump: read SSE events, grow the target text
+          const pump = (async () => {
+            try {
+              while (true) {
+                const { done, value } = await reader.read();
+                if (done) break;
+                buffer += decoder.decode(value, { stream: true });
+                const events = buffer.split('\n\n');
+                buffer = events.pop() || '';
+                for (const evt of events) {
+                  const line = evt.split('\n').find((l) => l.startsWith('data: '));
+                  if (!line) continue;
+                  const payload = JSON.parse(line.slice(6));
+                  if (payload.delta) {
+                    target += payload.delta;
+                  } else if (payload.done) {
+                    finalData = payload.response;
+                  } else if (payload.error) {
+                    throw new Error(payload.error);
+                  }
+                }
+              }
+            } finally {
+              streamEnded = true; // always let the typewriter finish
             }
+          })();
+
+          // Typewriter: reveal the target smoothly (~120 chars/s, speeding up
+          // if the model runs far ahead so long answers never lag behind)
+          const typewriter = new Promise<void>((resolve) => {
+            const tick = () => {
+              if (shown < target.length) {
+                const backlog = target.length - shown;
+                const step = Math.max(2, Math.ceil(backlog / 30));
+                shown = Math.min(shown + step, target.length);
+                renderLive(target.slice(0, shown));
+              } else if (streamEnded) {
+                resolve();
+                return;
+              }
+              setTimeout(tick, 24);
+            };
+            tick();
+          });
 
-            
-            // Update messages safely
-            setMessages((prev) => {
-              const filtered = prev.filter((msg) => !msg.typing);
-              const updated = [...filtered, assistantMessage];
-
-             
+          await pump;
+          await typewriter;
 
-              return updated;
-            });
-          } else if (data.status === 'success') {
-            setMessages((prev) => prev.filter((msg) => !msg.typing));
+          if (finalData) {
+            finalizeMessages(finalData, streamId);
+            return;
           }
+          // Stream closed without a final event — drop the live bubble and fall back
+          setMessages((prev) => prev.filter((msg) => msg.streamId !== streamId));
+        }
+      } catch (streamError) {
+        console.warn('Streaming failed, falling back to blocking endpoint', streamError);
+      }
+
+      // ---- Fallback: original blocking endpoint ----
+      try {
+        const res = await fetch(`${config.apiUrl}message-create/`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: requestBody,
+        });
+
+        if (res.ok) {
+          const data = await res.json();
+          finalizeMessages(data);
         } else {
           console.error('message-create failed');
         }

package/src/hooks/useChatbotData.tsx

@@ -51,11 +51,14 @@ export const useChatbotData = () => {
 
       const data = chatbotDetailsResponse.data.data;
 
-      if (data.language === 'Arabic') {
-        i18n.changeLanguage('ar');
-      } else {
-        i18n.changeLanguage('en');
-      }
+      // Merchant's language is only the DEFAULT — a visitor's own
+      // choice (jaweb_widget_lang) always wins.
+      try {
+        if (!localStorage.getItem('jaweb_widget_lang')) {
+          if (data.language === 'Arabic') i18n.changeLanguage('ar');
+          else if (data.language === 'French') i18n.changeLanguage('fr');
+        }
+      } catch { /* ignore */ }
 
 
       // console.log(data)

package/src/hooks/useSessionMessages.tsx

@@ -19,7 +19,6 @@ export const useChatbotMessage = (sessionId: string | null) => {
       const res = await axios.get<{ messages: ChatMessage[] }>(
         `${config.apiUrl}chat-message-history/`,
         {
-          withCredentials: true,
           params: {
             session_id: sid,
             username: localStorage.getItem('company_username'),

package/src/hooks/useWebsocke.tsx

@@ -1,5 +1,5 @@
 // hooks/useChatSocket.ts
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import config from './config';
 
 export default function useChatSocket(
@@ -9,6 +9,9 @@ export default function useChatSocket(
   const socketRef = useRef<WebSocket | null>(null);
   // keep a stable ref to the latest onMessage
   const onMessageRef = useRef(onMessage);
+  // bumping this re-renders consumers so they pick up the fresh socket
+  const [, setConnectionEpoch] = useState(0);
+
   useEffect(() => {
     onMessageRef.current = onMessage;
   }, [onMessage]);
@@ -16,27 +19,46 @@ export default function useChatSocket(
   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);
-      }
+    let attempts = 0;
+    let closedByCleanup = false;
+    let reconnectTimer: number | undefined;
+    let ws: WebSocket;
+
+    const connect = () => {
+      // role=visitor marks presence so agent replies while away trigger
+      // the "come back" email instead of vanishing
+      ws = new WebSocket(`${config.websocketUrl}/chat/${session_id}/?role=visitor`);
+      socketRef.current = ws;
+
+      ws.addEventListener('open', () => {
+        attempts = 0;
+        setConnectionEpoch((n) => n + 1);
+      });
+
+      ws.addEventListener('message', (event: MessageEvent) => {
+        try {
+          const data = JSON.parse(event.data);
+          onMessageRef.current(data);
+        } catch (e) {
+          console.error('Invalid JSON', e);
+        }
+      });
+
+      // Reconnect with exponential backoff (1s, 2s, 4s… capped at 15s).
+      // Covers server restarts, redis hiccups, sleeping phones, flaky wifi.
+      ws.addEventListener('close', () => {
+        if (closedByCleanup) return;
+        const delay = Math.min(1000 * 2 ** attempts, 15000);
+        attempts += 1;
+        reconnectTimer = window.setTimeout(connect, delay);
+      });
     };
-    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);
+    connect();
 
     return () => {
-      ws.removeEventListener('message', handle);
-      ws.removeEventListener('close', handleClose);
+      closedByCleanup = true;
+      if (reconnectTimer) window.clearTimeout(reconnectTimer);
       ws.close();
     };
   }, [session_id]);