ajaxter-chat 3.0.17 → 3.2.0

package/src/components/ErrorBoundary/index.tsx

@@ -0,0 +1,62 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  primaryColor?: string;
+  onError?: (error: Error, info: ErrorInfo) => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('[ChatWidget] Uncaught error:', error, info.componentStack);
+    this.props.onError?.(error, info);
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+      const color = this.props.primaryColor ?? '#2563EB';
+      return (
+        <div style={{
+          display: 'flex', flexDirection: 'column', alignItems: 'center',
+          justifyContent: 'center', height: '100%', padding: 32, textAlign: 'center', gap: 12,
+        }}>
+          <div style={{ fontSize: 40 }}>⚠️</div>
+          <p style={{ fontWeight: 700, color: '#1a2332', margin: 0 }}>Something went wrong</p>
+          <p style={{ fontSize: 13, color: '#7b8fa1', lineHeight: 1.6, margin: 0 }}>
+            {this.state.error?.message ?? 'An unexpected error occurred'}
+          </p>
+          <button
+            onClick={this.handleReset}
+            style={{
+              padding: '9px 20px', borderRadius: 10, border: 'none',
+              background: color, color: '#fff', cursor: 'pointer', fontWeight: 700, fontSize: 14,
+            }}
+          >
+            Try Again
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}

package/src/config/index.ts

@@ -1,56 +1,117 @@
-import { LocalEnvConfig, RemoteChatData } from '../types';
+import { LocalEnvConfig, RemoteChatData, AjaxterConfigResponse, WidgetConfig } from '../types';
 
-/**
- * Default JSON endpoint. Override with `REACT_APP_CHAT_CONFIG_URL` / `NEXT_PUBLIC_CHAT_CONFIG_URL`.
- * If the remote host does not send CORS headers, set this to a same-origin path (e.g. `/api/chat-config`)
- * and proxy the JSON from your server — see `examples/next-app-router-chat-proxy.ts`.
- */
-const DEFAULT_CHAT_DATA_BASE = 'https://window.mscorpres.com/TEST/chatData.json';
-const DEMO_API_KEY   = 'demo1234';
-const DEMO_WIDGET_ID = 'demo';
+const DEFAULT_SOCKET_URL = 'http://localhost:3005';
+const DEFAULT_CONFIG_URL = 'http://localhost:5000/api/chat-config';
+const DEMO_API_KEY       = 'demo1234';
+const DEMO_WIDGET_ID     = 'demo';
 
 function getEnv(key: string): string | undefined {
   if (typeof process !== 'undefined' && process.env) {
     return (
       process.env[`NEXT_PUBLIC_${key}`] ??
-      process.env[`REACT_APP_${key}`] ??
-      process.env[key] ??
+      process.env[`REACT_APP_${key}`]   ??
+      process.env[key]                   ??
       undefined
     );
   }
   return undefined;
 }
 
-function getChatDataBaseUrl(): string {
-  return getEnv('CHAT_CONFIG_URL')?.trim() || DEFAULT_CHAT_DATA_BASE;
+export function loadLocalConfig(): LocalEnvConfig {
+  return {
+    apiKey:    getEnv('CHAT_API_KEY')    ?? DEMO_API_KEY,
+    widgetId:  getEnv('CHAT_WIDGET_ID') ?? DEMO_WIDGET_ID,
+    socketUrl: getEnv('SOCKET_URL')     ?? DEFAULT_SOCKET_URL,
+  };
+}
+
+function getConfigUrl(): string {
+  return getEnv('CHAT_CONFIG_URL')?.trim() ?? DEFAULT_CONFIG_URL;
 }
 
 /**
- * Loads remote widget config once via GET. Uses query params `key` and `widget` so the
- * server can validate the request without custom headers (avoids CORS preflight failures).
+ * Fetches widget config ONCE from the server.
+ * URL: GET /api/chat-config?key=<apiKey>&widget=<widgetId>
+ *
+ * Returns RemoteChatData (the shape the widget components expect),
+ * translated from the Ajaxter server response format.
  */
 export async function fetchRemoteChatData(
   apiKey: string,
   widgetId: string
 ): Promise<RemoteChatData> {
-  const base = getChatDataBaseUrl();
-  const url = new URL(base, typeof window !== 'undefined' ? window.location.origin : 'https://localhost');
-  url.searchParams.set('key', apiKey);
+  const base = getConfigUrl();
+  const url  = new URL(
+    base,
+    typeof window !== 'undefined' ? window.location.origin : 'http://localhost'
+  );
+  url.searchParams.set('key',    apiKey);
   url.searchParams.set('widget', widgetId);
 
   const res = await fetch(url.toString(), {
-    method: 'GET',
+    method:  'GET',
+    headers: { Accept: 'application/json' },
     credentials: 'omit',
     mode: 'cors',
-    headers: { Accept: 'application/json' },
   });
-  if (!res.ok) throw new Error(`Failed to load chat config: ${res.status}`);
-  return res.json() as Promise<RemoteChatData>;
-}
 
-export function loadLocalConfig(): LocalEnvConfig {
+  if (!res.ok) throw new Error(`Chat config fetch failed: ${res.status}`);
+
+  const json = await res.json() as AjaxterConfigResponse;
+
+  if (!json.ok || !json.data) {
+    throw new Error('Invalid config response from server');
+  }
+
+  const { data } = json;
+  const internal = data._internal;
+  const ws       = data.widget;
+
+  // Map Ajaxter server response → WidgetConfig used by components
+  const widgetConfig: WidgetConfig = {
+    id:          internal.id,
+    apiKey:      internal.apiKey,
+    status:      internal.status,
+    chatType:    internal.chatType,
+    displayMode: internal.displayMode,
+    primaryColor: internal.primaryColor,
+    buttonLabel:  internal.buttonLabel,
+
+    // Button position from visibility config
+    buttonPosition: (ws.visibility?.mobile?.position === 'bottom-left'
+      ? 'bottom-left'
+      : 'bottom-right') as 'bottom-right' | 'bottom-left',
+
+    // Welcome text from states.online header
+    welcomeTitle:    data.branding?.name ?? internal.brandName ?? 'Hello there 👋',
+    welcomeSubtitle: (ws.states as Record<string, { header?: Array<{content?: {value?: string}}> }> | undefined)
+      ?.online?.header?.[0]?.content?.value
+      ?? 'How can we help you today?',
+
+    brandName:           internal.brandName ?? undefined,
+    supportPhone:        internal.supportPhone ?? undefined,
+    privacyPolicyUrl:    internal.privacyPolicyUrl ?? undefined,
+    showPrivacyNotice:   internal.showPrivacyNotice,
+
+    allowVoiceMessage:   internal.allowVoiceMessage,
+    allowAttachment:     internal.allowAttachment,
+    allowEmoji:          internal.allowEmoji,
+    allowWebCall:        internal.allowWebCall,
+    maxEmojiCount:       internal.maxEmojiCount,
+    allowTranscriptDownload: internal.allowTranscript,
+    allowReport:         internal.allowReport,
+    allowBlock:          internal.allowBlock,
+
+    // Full Ajaxter settings stored for display-mode rendering
+    ajaxterSettings: ws,
+  };
+
   return {
-    apiKey:   getEnv('CHAT_API_KEY')    ?? DEMO_API_KEY,
-    widgetId: getEnv('CHAT_WIDGET_ID')  ?? DEMO_WIDGET_ID,
+    widget:       widgetConfig,
+    developers:   data.developers   ?? [],
+    users:        data.users        ?? [],
+    sampleChats:  data.sampleChats  ?? {},
+    sampleTickets: data.sampleTickets ?? [],
+    blockedUsers: data.blockedUsers ?? [],
   };
 }

package/src/hooks/useChat.ts

@@ -1,19 +1,29 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef } from 'react';
 import { ChatMessage, ChatUser } from '../types';
 
-export function useChat(initialMessages: ChatMessage[] = []) {
+export interface UseChatOptions {
+  onEmitMessage?: (msg: ChatMessage) => void;
+  onEmitPause?: (roomId: string, targetUid: string, paused: boolean) => void;
+  onEmitReport?: (roomId: string) => void;
+}
+
+export function useChat(initialMessages: ChatMessage[] = [], opts: UseChatOptions = {}) {
   const [messages,   setMessages]   = useState<ChatMessage[]>(initialMessages);
   const [activeUser, setActiveUser] = useState<ChatUser | null>(null);
   const [isPaused,   setIsPaused]   = useState(false);
   const [isReported, setIsReported] = useState(false);
+  const activeUserRef = useRef<ChatUser | null>(null);
+  const isPausedRef   = useRef(false);
+
+  const { onEmitMessage, onEmitPause, onEmitReport } = opts;
 
   const selectUser = useCallback((user: ChatUser, history: ChatMessage[] = []) => {
     setActiveUser(user);
+    activeUserRef.current = user;
     setMessages(history);
     setIsPaused(false);
+    isPausedRef.current = false;
     setIsReported(false);
-    // TODO: socket.emit('join', { roomId: user.uid });
-    // TODO: socket.on('message', msg => setMessages(prev => [...prev, msg]));
   }, []);
 
   const sendMessage = useCallback((
@@ -21,11 +31,12 @@ export function useChat(initialMessages: ChatMessage[] = []) {
     type: ChatMessage['type'] = 'text',
     extra: Partial<ChatMessage> = {}
   ) => {
-    if (!activeUser || isPaused) return;
+    const user = activeUserRef.current;
+    if (!user || isPausedRef.current) return;
     const msg: ChatMessage = {
       id:         `msg_${Date.now()}_${Math.random().toString(36).slice(2)}`,
       senderId:   'me',
-      receiverId: activeUser.uid,
+      receiverId: user.uid,
       text,
       timestamp:  new Date().toISOString(),
       type,
@@ -33,16 +44,52 @@ export function useChat(initialMessages: ChatMessage[] = []) {
       ...extra,
     };
     setMessages(prev => [...prev, msg]);
-    // TODO: socket.emit('message', msg);
-  }, [activeUser, isPaused]);
+    onEmitMessage?.(msg);
+  }, [onEmitMessage]);
+
+  const receiveMessage = useCallback((msg: ChatMessage) => {
+    setMessages(prev => {
+      if (prev.some(m => m.id === msg.id)) return prev;
+      return [...prev, msg];
+    });
+  }, []);
+
+  const updateMessageStatus = useCallback((messageId: string, status: ChatMessage['status']) => {
+    setMessages(prev => prev.map(m => m.id === messageId ? { ...m, status } : m));
+  }, []);
+
+  const togglePause = useCallback(() => {
+    const user = activeUserRef.current;
+    if (!user) return;
+    const next = !isPausedRef.current;
+    setIsPaused(next);
+    isPausedRef.current = next;
+    const roomId = [user.uid, 'me'].sort().join('_');
+    onEmitPause?.(roomId, user.uid, next);
+  }, [onEmitPause]);
+
+  const reportChat = useCallback(() => {
+    const user = activeUserRef.current;
+    setIsReported(true);
+    if (user) {
+      const roomId = [user.uid, 'me'].sort().join('_');
+      onEmitReport?.(roomId);
+    }
+  }, [onEmitReport]);
 
-  const togglePause   = useCallback(() => setIsPaused(p => !p), []);
-  const reportChat    = useCallback(() => { setIsReported(true); /* TODO: API call */ }, []);
-  const clearChat     = useCallback(() => { setMessages([]); setActiveUser(null); }, []);
+  const clearChat = useCallback(() => {
+    setMessages([]);
+    setActiveUser(null);
+    activeUserRef.current = null;
+    setIsPaused(false);
+    isPausedRef.current = false;
+    setIsReported(false);
+  }, []);
 
   return {
     messages, activeUser, isPaused, isReported,
-    selectUser, sendMessage, togglePause, reportChat, clearChat,
+    selectUser, sendMessage, receiveMessage, updateMessageStatus,
+    togglePause, reportChat, clearChat,
     setMessages,
   };
 }

package/src/hooks/useRemoteConfig.ts

@@ -8,17 +8,22 @@ export function useRemoteConfig(apiKey: string, widgetId: string) {
   const [error,   setError]   = useState<string | null>(null);
 
   useEffect(() => {
+    if (!apiKey || !widgetId) return;
     let cancelled = false;
     setLoading(true);
+    setError(null);
+
     fetchRemoteChatData(apiKey, widgetId)
-      .then(d  => { if (!cancelled) { setData(d); setError(null); setLoading(false); } })
+      .then(d => {
+        if (!cancelled) { setData(d); setLoading(false); }
+      })
       .catch(e => {
         if (!cancelled) {
-          const msg = e instanceof Error ? e.message : String(e);
-          setError(msg || 'Network error while loading configuration');
+          setError(e instanceof Error ? e.message : 'Failed to load config');
           setLoading(false);
         }
       });
+
     return () => { cancelled = true; };
   }, [apiKey, widgetId]);
 

package/src/hooks/useSocket.ts

@@ -0,0 +1,249 @@
+'use client';
+
+/**
+ * useSocket — wraps socket.io-client for the ajaxter-chat npm package.
+ *
+ * The npm package fetches widget config ONCE via HTTP (GET /api/chat-config),
+ * then all real-time events (messages, calls, typing, presence…) flow through
+ * this Socket.IO connection.
+ *
+ * Install peer dep in consumer app:  npm install socket.io-client
+ */
+
+import { useEffect, useRef, useCallback, useState } from 'react';
+import { ChatMessage } from '../types';
+
+export type SocketStatus = 'connecting' | 'connected' | 'disconnected' | 'error';
+
+export interface SocketMessageAck {
+  messageId: string;
+  status: 'delivered' | 'read';
+}
+
+export interface UseSocketOptions {
+  widgetId:   string;
+  viewerUid:  string;
+  /** Socket.IO server URL — defaults to http://localhost:3005 */
+  serverUrl?: string;
+  onMessage?:     (msg: ChatMessage) => void;
+  onMessageAck?:  (ack: SocketMessageAck) => void;
+  onChatPaused?:  (roomId: string, paused: boolean) => void;
+  onCallOffer?:   (offer: RTCSessionDescriptionInit, fromUid: string, callId: string) => void;
+  onCallAnswer?:  (answer: RTCSessionDescriptionInit, fromUid: string, callId: string) => void;
+  onIceCandidate?:(candidate: RTCIceCandidateInit, fromUid: string) => void;
+  onCallEnd?:     (callId: string) => void;
+  onTypingStart?: (roomId: string, userId: string) => void;
+  onTypingStop?:  (roomId: string, userId: string) => void;
+  onUserStatus?:  (uid: string, status: 'online' | 'away' | 'offline') => void;
+  onTicketCreated?: (ticket: unknown) => void;
+  onTicketUpdated?: (ticket: unknown) => void;
+  onTransferAssigned?: (payload: unknown) => void;
+  onError?:       (code: string, message: string) => void;
+}
+
+// Lazy-load socket.io-client so the package stays light when not connected
+type SocketIO = {
+  on:         (event: string, cb: (...args: unknown[]) => void) => void;
+  off:        (event: string, cb?: (...args: unknown[]) => void) => void;
+  emit:       (event: string, data?: unknown) => void;
+  disconnect: () => void;
+  connected:  boolean;
+};
+
+async function createSocket(url: string, query: Record<string, string>): Promise<SocketIO> {
+  // Dynamic import so bundle is not broken when socket.io-client is absent
+  // Consumer app must have socket.io-client installed
+  let io: (url: string, opts: unknown) => SocketIO;
+  try {
+    const mod = await import('socket.io-client' as string);
+    io = (mod.default || mod) as (url: string, opts: unknown) => SocketIO;
+  } catch {
+    throw new Error(
+      '[ajaxter-chat] socket.io-client not found. ' +
+      'Run: npm install socket.io-client'
+    );
+  }
+  return io(url, {
+    query,
+    transports:       ['websocket', 'polling'],
+    reconnection:     true,
+    reconnectionDelay: 2000,
+    reconnectionAttempts: 10,
+    autoConnect:      true,
+  });
+}
+
+const DEFAULT_SOCKET_URL = 'http://localhost:3005';
+
+export function useSocket(opts: UseSocketOptions) {
+  const {
+    widgetId, viewerUid,
+    serverUrl = DEFAULT_SOCKET_URL,
+    onMessage, onMessageAck, onChatPaused,
+    onCallOffer, onCallAnswer, onIceCandidate, onCallEnd,
+    onTypingStart, onTypingStop, onUserStatus,
+    onTicketCreated, onTicketUpdated, onTransferAssigned, onError,
+  } = opts;
+
+  const [status, setStatus] = useState<SocketStatus>('disconnected');
+  const socketRef    = useRef<SocketIO | null>(null);
+  const mountedRef   = useRef(true);
+  const currentRoom  = useRef<string | null>(null);
+
+  // Stable emit helper
+  const emit = useCallback((event: string, data?: unknown) => {
+    if (socketRef.current?.connected) {
+      socketRef.current.emit(event, data);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!widgetId || !viewerUid) return;
+    mountedRef.current = true;
+    setStatus('connecting');
+
+    createSocket(serverUrl, { widgetId, uid: viewerUid }).then(socket => {
+      if (!mountedRef.current) { socket.disconnect(); return; }
+      socketRef.current = socket;
+
+      socket.on('connect', () => {
+        if (!mountedRef.current) return;
+        setStatus('connected');
+        // Rejoin current room after reconnect
+        if (currentRoom.current) {
+          socket.emit('join', { roomId: currentRoom.current, widgetId });
+        }
+      });
+
+      socket.on('disconnect', () => {
+        if (mountedRef.current) setStatus('disconnected');
+      });
+
+      socket.on('connect_error', () => {
+        if (mountedRef.current) setStatus('error');
+      });
+
+      socket.on('message',     (msg: unknown) => onMessage?.(msg as ChatMessage));
+      socket.on('message:ack', (ack: unknown) => onMessageAck?.(ack as SocketMessageAck));
+
+      socket.on('chat:paused', (p: unknown) => {
+        const { roomId, paused } = p as { roomId: string; paused: boolean };
+        onChatPaused?.(roomId, paused);
+      });
+
+      socket.on('call-offer', (p: unknown) => {
+        const { offer, from, callId } = p as { offer: RTCSessionDescriptionInit; from: string; callId: string };
+        onCallOffer?.(offer, from, callId);
+      });
+      socket.on('call-answer', (p: unknown) => {
+        const { answer, from, callId } = p as { answer: RTCSessionDescriptionInit; from: string; callId: string };
+        onCallAnswer?.(answer, from, callId);
+      });
+      socket.on('ice-candidate', (p: unknown) => {
+        const { candidate, from } = p as { candidate: RTCIceCandidateInit; from: string };
+        onIceCandidate?.(candidate, from);
+      });
+      socket.on('call-end', (p: unknown) => {
+        const { callId } = p as { callId: string };
+        onCallEnd?.(callId);
+      });
+
+      socket.on('typing_start', (p: unknown) => {
+        const { roomId, userId } = p as { roomId: string; userId: string };
+        onTypingStart?.(roomId, userId);
+      });
+      socket.on('typing_stop', (p: unknown) => {
+        const { roomId, userId } = p as { roomId: string; userId: string };
+        onTypingStop?.(roomId, userId);
+      });
+
+      socket.on('user:status', (p: unknown) => {
+        const { uid, status: s } = p as { uid: string; status: 'online'|'away'|'offline' };
+        onUserStatus?.(uid, s);
+      });
+
+      socket.on('ticket:created',    onTicketCreated   as (...args: unknown[]) => void);
+      socket.on('ticket:updated',    onTicketUpdated   as (...args: unknown[]) => void);
+      socket.on('transfer:assigned', onTransferAssigned as (...args: unknown[]) => void);
+
+      socket.on('error', (p: unknown) => {
+        const { code, message } = p as { code: string; message: string };
+        onError?.(code, message);
+      });
+    }).catch(err => {
+      console.error('[ajaxter-chat] Socket init error:', err.message);
+      if (mountedRef.current) setStatus('error');
+    });
+
+    return () => {
+      mountedRef.current = false;
+      socketRef.current?.disconnect();
+      socketRef.current = null;
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [widgetId, viewerUid, serverUrl]);
+
+  // ── Public API ────────────────────────────────────────────────────────────
+
+  const joinRoom = useCallback((roomId: string) => {
+    currentRoom.current = roomId;
+    emit('join', { roomId, widgetId });
+  }, [emit, widgetId]);
+
+  const leaveRoom = useCallback((roomId: string) => {
+    if (currentRoom.current === roomId) currentRoom.current = null;
+    emit('leave', { roomId });
+  }, [emit]);
+
+  const emitMessage        = useCallback((msg: ChatMessage) => emit('message', msg), [emit]);
+  const emitTypingStart    = useCallback((roomId: string) => emit('typing_start', { roomId }), [emit]);
+  const emitTypingStop     = useCallback((roomId: string) => emit('typing_stop',  { roomId }), [emit]);
+  const emitMessageRead    = useCallback((roomId: string, messageId: string) => emit('message:read', { roomId, messageId }), [emit]);
+
+  const emitPauseToggle    = useCallback((roomId: string, targetUserId: string, paused: boolean) =>
+    emit('chat:pause', { roomId, targetUserId, paused }), [emit]);
+
+  const emitReport         = useCallback((roomId: string, reason?: string) =>
+    emit('chat:report', { roomId, reason }), [emit]);
+
+  const emitBlock          = useCallback((blockedUid: string) => emit('user:block',   { blockedUid }), [emit]);
+  const emitUnblock        = useCallback((blockedUid: string) => emit('user:unblock', { blockedUid }), [emit]);
+
+  const emitTransfer       = useCallback((fromRoomId: string, toUserId: string, note?: string) =>
+    emit('transfer', { fromRoomId, toUserId, note }), [emit]);
+
+  const emitAddParticipant = useCallback((roomId: string, uid: string) =>
+    emit('room:add-participant', { roomId, uid }), [emit]);
+
+  const emitCallOffer      = useCallback((offer: RTCSessionDescriptionInit, toUid: string, callId: string, hasVideo?: boolean) =>
+    emit('call-offer', { offer, to: toUid, callId, hasVideo }), [emit]);
+
+  const emitCallAnswer     = useCallback((answer: RTCSessionDescriptionInit, toUid: string, callId: string) =>
+    emit('call-answer', { answer, to: toUid, callId }), [emit]);
+
+  const emitIceCandidate   = useCallback((candidate: RTCIceCandidateInit, toUid: string) =>
+    emit('ice-candidate', { candidate, to: toUid }), [emit]);
+
+  const emitCallEnd        = useCallback((callId: string, toUid?: string) =>
+    emit('call-end', { callId, to: toUid }), [emit]);
+
+  const emitPresence       = useCallback((presenceStatus: 'ACTIVE'|'AWAY'|'DND') =>
+    emit('presence:update', { status: presenceStatus }), [emit]);
+
+  const emitTicketCreate   = useCallback((payload: { title: string; description: string; priority: string; createdBy?: string }) =>
+    emit('ticket:create', payload), [emit]);
+
+  const emitTicketUpdate   = useCallback((payload: { ticketId: string; status?: string; priority?: string; assignedTo?: string }) =>
+    emit('ticket:update', payload), [emit]);
+
+  return {
+    status,
+    joinRoom, leaveRoom,
+    emitMessage, emitTypingStart, emitTypingStop, emitMessageRead,
+    emitPauseToggle, emitReport, emitBlock, emitUnblock, emitTransfer,
+    emitAddParticipant,
+    emitCallOffer, emitCallAnswer, emitIceCandidate, emitCallEnd,
+    emitPresence,
+    emitTicketCreate, emitTicketUpdate,
+  };
+}