ajaxter-chat 3.0.16 → 3.1.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/components/HomeScreen/index.tsx

@@ -140,9 +140,6 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, apiKey, onNaviga
             justifyContent: 'flex-end',
           }}
         >
-          <span style={{ fontSize: 11, fontWeight: 700, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
-            Status
-          </span>
           <div
             role="group"
             aria-label="Your status"

package/src/components/MiniCallBar/index.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { CallSession, ChatUser } from '../../types';
+import { avatarColor, initials } from '../../utils/chat';
+
+export interface MiniCallBarProps {
+  session: CallSession;
+  primaryColor: string;
+  buttonPosition: 'bottom-left' | 'bottom-right';
+  onExpand: () => void;
+  onEnd: () => void;
+}
+
+/**
+ * Shown when the user minimizes the widget during an active call (ringing or connected).
+ * Sits above the main launcher button so the user can work on the page and return to the call.
+ */
+export const MiniCallBar: React.FC<MiniCallBarProps> = ({
+  session,
+  primaryColor,
+  buttonPosition,
+  onExpand,
+  onEnd,
+}) => {
+  const peer = session.peer as ChatUser | null;
+  const [duration, setDuration] = useState(0);
+
+  useEffect(() => {
+    if (session.state !== 'connected' || !session.startedAt) return;
+    const t = setInterval(() => {
+      setDuration(Math.floor((Date.now() - session.startedAt!.getTime()) / 1000));
+    }, 1000);
+    return () => clearInterval(t);
+  }, [session.state, session.startedAt]);
+
+  const mins = String(Math.floor(duration / 60)).padStart(2, '0');
+  const secs = String(duration % 60).padStart(2, '0');
+
+  const pos: React.CSSProperties =
+    buttonPosition === 'bottom-left'
+      ? { left: 24, right: 'auto' }
+      : { right: 24, left: 'auto' };
+
+  return (
+    <div
+      role="toolbar"
+      aria-label="Call in progress"
+      style={{
+        position: 'fixed',
+        bottom: 88,
+        zIndex: 10000,
+        ...pos,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 10,
+        padding: '10px 14px',
+        maxWidth: 'min(360px, calc(100vw - 48px))',
+        borderRadius: 14,
+        background: `linear-gradient(135deg, ${primaryColor}ee, #0f172a)`,
+        color: '#fff',
+        boxShadow: '0 10px 32px rgba(0,0,0,0.28)',
+        animation: 'cw-miniBarIn 0.28s cubic-bezier(0.22,1,0.36,1)',
+        cursor: 'default',
+      }}
+    >
+      <style>{`
+        @keyframes cw-miniBarIn {
+          from { opacity: 0; transform: translateY(12px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      `}</style>
+
+      <button
+        type="button"
+        onClick={onExpand}
+        title="Open call"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 10,
+          flex: 1,
+          minWidth: 0,
+          padding: 0,
+          border: 'none',
+          background: 'transparent',
+          color: 'inherit',
+          cursor: 'pointer',
+          textAlign: 'left',
+        }}
+      >
+        {peer && (
+          <div
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: '50%',
+              backgroundColor: avatarColor(peer.name),
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: 14,
+              fontWeight: 700,
+              flexShrink: 0,
+              animation: session.state === 'calling' ? 'cw-pulse 1.5s ease infinite' : 'none',
+            }}
+          >
+            {initials(peer.name)}
+          </div>
+        )}
+        <div style={{ minWidth: 0, flex: 1 }}>
+          <div style={{ fontWeight: 700, fontSize: 14, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {peer?.name ?? 'Call'}
+          </div>
+          <div style={{ fontSize: 12, opacity: 0.9, marginTop: 2 }}>
+            {session.state === 'calling' && 'Calling…'}
+            {session.state === 'connected' && `${mins}:${secs}`}
+          </div>
+        </div>
+      </button>
+
+      <button
+        type="button"
+        onClick={onEnd}
+        title="End call"
+        style={{
+          width: 40,
+          height: 40,
+          borderRadius: '50%',
+          border: 'none',
+          background: '#ef4444',
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexShrink: 0,
+          boxShadow: '0 2px 10px rgba(239,68,68,0.45)',
+        }}
+      >
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+          <path
+            d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8a19.79 19.79 0 01-3.07-8.68A2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z"
+            fill="#fff"
+            transform="rotate(135 12 12)"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+};

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/useSocket.ts

@@ -0,0 +1,228 @@
+'use 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;
+  /** WebSocket 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;
+  onError?: (code: string, message: string) => void;
+  onUserStatus?: (uid: string, status: 'online' | 'away' | 'offline') => void;
+}
+
+const SOCKET_URL = 'http://localhost:3005';
+const RECONNECT_DELAY = 3000;
+const MAX_RECONNECT = 5;
+
+export function useSocket(opts: UseSocketOptions) {
+  const {
+    widgetId, viewerUid, serverUrl = SOCKET_URL,
+    onMessage, onMessageAck, onChatPaused,
+    onCallOffer, onCallAnswer, onIceCandidate, onCallEnd,
+    onError, onUserStatus,
+  } = opts;
+
+  const [status, setStatus] = useState<SocketStatus>('disconnected');
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectCount = useRef(0);
+  const reconnectTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const currentRoomRef = useRef<string | null>(null);
+  const mountedRef = useRef(true);
+
+  const send = useCallback((event: string, payload: unknown) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ event, payload }));
+    }
+  }, []);
+
+  const connect = useCallback(() => {
+    if (!mountedRef.current) return;
+    if (wsRef.current) {
+      wsRef.current.onclose = null;
+      wsRef.current.close();
+    }
+    setStatus('connecting');
+
+    const url = `${serverUrl}?widgetId=${encodeURIComponent(widgetId)}&uid=${encodeURIComponent(viewerUid)}`;
+    let ws: WebSocket;
+    try {
+      ws = new WebSocket(url);
+    } catch (e) {
+      setStatus('error');
+      return;
+    }
+    wsRef.current = ws;
+
+    ws.onopen = () => {
+      if (!mountedRef.current) { ws.close(); return; }
+      reconnectCount.current = 0;
+      setStatus('connected');
+      // Re-join current room if we were in one
+      if (currentRoomRef.current) {
+        send('join', { roomId: currentRoomRef.current, widgetId });
+      }
+    };
+
+    ws.onmessage = (event) => {
+      let parsed: { event: string; payload: unknown };
+      try { parsed = JSON.parse(event.data as string); }
+      catch { return; }
+      const { event: ev, payload } = parsed;
+      switch (ev) {
+        case 'message':
+          onMessage?.(payload as ChatMessage);
+          break;
+        case 'message:ack':
+          onMessageAck?.(payload as SocketMessageAck);
+          break;
+        case 'chat:paused': {
+          const p = payload as { roomId: string; paused: boolean };
+          onChatPaused?.(p.roomId, p.paused);
+          break;
+        }
+        case 'call-offer': {
+          const p = payload as { offer: RTCSessionDescriptionInit; from: string; callId: string };
+          onCallOffer?.(p.offer, p.from, p.callId);
+          break;
+        }
+        case 'call-answer': {
+          const p = payload as { answer: RTCSessionDescriptionInit; from: string; callId: string };
+          onCallAnswer?.(p.answer, p.from, p.callId);
+          break;
+        }
+        case 'ice-candidate': {
+          const p = payload as { candidate: RTCIceCandidateInit; from: string };
+          onIceCandidate?.(p.candidate, p.from);
+          break;
+        }
+        case 'call-end': {
+          const p = payload as { callId: string };
+          onCallEnd?.(p.callId);
+          break;
+        }
+        case 'user:status': {
+          const p = payload as { uid: string; status: 'online' | 'away' | 'offline' };
+          onUserStatus?.(p.uid, p.status);
+          break;
+        }
+        case 'error': {
+          const p = payload as { code: string; message: string };
+          onError?.(p.code, p.message);
+          break;
+        }
+      }
+    };
+
+    ws.onerror = () => {
+      if (!mountedRef.current) return;
+      setStatus('error');
+    };
+
+    ws.onclose = () => {
+      if (!mountedRef.current) return;
+      setStatus('disconnected');
+      if (reconnectCount.current < MAX_RECONNECT) {
+        reconnectCount.current++;
+        reconnectTimer.current = setTimeout(connect, RECONNECT_DELAY * reconnectCount.current);
+      }
+    };
+  }, [widgetId, viewerUid, serverUrl, send, onMessage, onMessageAck, onChatPaused, onCallOffer, onCallAnswer, onIceCandidate, onCallEnd, onError, onUserStatus]);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    if (widgetId && viewerUid) connect();
+    return () => {
+      mountedRef.current = false;
+      if (reconnectTimer.current) clearTimeout(reconnectTimer.current);
+      wsRef.current?.close();
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [widgetId, viewerUid, serverUrl]);
+
+  const joinRoom = useCallback((roomId: string) => {
+    currentRoomRef.current = roomId;
+    send('join', { roomId, widgetId });
+  }, [send, widgetId]);
+
+  const leaveRoom = useCallback((roomId: string) => {
+    currentRoomRef.current = null;
+    send('leave', { roomId });
+  }, [send]);
+
+  const emitMessage = useCallback((msg: ChatMessage) => {
+    send('message', msg);
+  }, [send]);
+
+  const emitTypingStart = useCallback((roomId: string) => {
+    send('typing_start', { roomId, userId: viewerUid });
+  }, [send, viewerUid]);
+
+  const emitTypingStop = useCallback((roomId: string) => {
+    send('typing_stop', { roomId, userId: viewerUid });
+  }, [send, viewerUid]);
+
+  const emitPauseToggle = useCallback((roomId: string, targetUserId: string, paused: boolean) => {
+    send('chat:pause', { roomId, targetUserId, paused });
+  }, [send]);
+
+  const emitReport = useCallback((roomId: string, reason?: string) => {
+    send('chat:report', { roomId, reporterId: viewerUid, reason });
+  }, [send, viewerUid]);
+
+  const emitBlock = useCallback((blockedUid: string) => {
+    send('user:block', { blockedUid });
+  }, [send]);
+
+  const emitUnblock = useCallback((blockedUid: string) => {
+    send('user:unblock', { blockedUid });
+  }, [send]);
+
+  const emitTransfer = useCallback((fromRoomId: string, toUserId: string, note?: string) => {
+    send('transfer', { fromRoomId, toUserId, note });
+  }, [send]);
+
+  const emitCallOffer = useCallback((offer: RTCSessionDescriptionInit, toUid: string, callId: string) => {
+    send('call-offer', { offer, to: toUid, from: viewerUid, callId });
+  }, [send, viewerUid]);
+
+  const emitCallAnswer = useCallback((answer: RTCSessionDescriptionInit, toUid: string, callId: string) => {
+    send('call-answer', { answer, to: toUid, callId });
+  }, [send]);
+
+  const emitIceCandidate = useCallback((candidate: RTCIceCandidateInit, toUid: string) => {
+    send('ice-candidate', { candidate, to: toUid });
+  }, [send]);
+
+  const emitCallEnd = useCallback((callId: string, toUid?: string) => {
+    send('call-end', { callId, to: toUid });
+  }, [send]);
+
+  const emitAddParticipant = useCallback((roomId: string, uid: string) => {
+    send('room:add-participant', { roomId, uid });
+  }, [send]);
+
+  return {
+    status,
+    joinRoom, leaveRoom,
+    emitMessage, emitTypingStart, emitTypingStop,
+    emitPauseToggle, emitReport, emitBlock, emitUnblock, emitTransfer,
+    emitCallOffer, emitCallAnswer, emitIceCandidate, emitCallEnd,
+    emitAddParticipant,
+  };
+}