ajaxter-chat 3.0.17 → 3.2.0

package/src/hooks/useWebRTC.ts

@@ -1,130 +1,165 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { CallSession, CallState, ChatUser } from '../types';
 
+export interface UseWebRTCOptions {
+  onOfferReady?: (offer: RTCSessionDescriptionInit, toUid: string, callId: string) => void;
+  onAnswerReady?: (answer: RTCSessionDescriptionInit, toUid: string, callId: string) => void;
+  onIceCandidateReady?: (candidate: RTCIceCandidateInit, toUid: string) => void;
+  onCallEnded?: (callId: string, toUid?: string) => void;
+}
+
 const ICE_SERVERS: RTCIceServer[] = [
   { urls: 'stun:stun.l.google.com:19302' },
   { urls: 'stun:stun1.l.google.com:19302' },
 ];
 
-export function useWebRTC() {
+export function useWebRTC(opts: UseWebRTCOptions = {}) {
+  const { onOfferReady, onAnswerReady, onIceCandidateReady, onCallEnded } = opts;
+
   const [session, setSession] = useState<CallSession>({
-    state:     'idle',
-    peer:      null,
-    startedAt: null,
-    isMuted:   false,
+    state:      'idle',
+    peer:       null,
+    startedAt:  null,
+    isMuted:    false,
     isCameraOn: false,
   });
 
-  const pcRef         = useRef<RTCPeerConnection | null>(null);
-  const localStream   = useRef<MediaStream | null>(null);
-  const localVideoRef = useRef<HTMLVideoElement | null>(null);
+  const pcRef          = useRef<RTCPeerConnection | null>(null);
+  const localStream    = useRef<MediaStream | null>(null);
+  const localVideoRef  = useRef<HTMLVideoElement | null>(null);
   const remoteVideoRef = useRef<HTMLVideoElement | null>(null);
+  const currentCallId  = useRef<string | null>(null);
+  const peerUidRef     = useRef<string | null>(null);
 
-  const updateSession = (patch: Partial<CallSession>) =>
-    setSession(prev => ({ ...prev, ...patch }));
-
-  /** Start an outgoing call */
-  const startCall = useCallback(async (peer: ChatUser, withVideo = false) => {
-    updateSession({ state: 'calling', peer });
-
-    const stream = await navigator.mediaDevices.getUserMedia({
-      audio: true,
-      video: withVideo,
-    });
-    localStream.current = stream;
-    if (localVideoRef.current) localVideoRef.current.srcObject = stream;
+  const updateSession = useCallback((patch: Partial<CallSession>) =>
+    setSession(prev => ({ ...prev, ...patch })), []);
 
+  const buildPc = useCallback((peer: ChatUser) => {
     const pc = new RTCPeerConnection({ iceServers: ICE_SERVERS });
     pcRef.current = pc;
-
-    stream.getTracks().forEach(t => pc.addTrack(t, stream));
+    peerUidRef.current = peer.uid;
 
     pc.ontrack = e => {
       if (remoteVideoRef.current) remoteVideoRef.current.srcObject = e.streams[0];
-      updateSession({ state: 'connected', startedAt: new Date(), isCameraOn: withVideo });
+      updateSession({ state: 'connected', startedAt: new Date() });
     };
 
     pc.onicecandidate = e => {
-      if (e.candidate) {
-        // TODO: socket.emit('ice-candidate', { candidate: e.candidate, to: peer.uid });
-        console.log('[WebRTC] ICE candidate ready — send via signalling:', e.candidate);
+      if (e.candidate && peerUidRef.current) {
+        onIceCandidateReady?.(e.candidate.toJSON(), peerUidRef.current);
       }
     };
 
-    const offer = await pc.createOffer();
-    await pc.setLocalDescription(offer);
-    // TODO: socket.emit('call-offer', { offer, to: peer.uid, from: 'me' });
-    console.log('[WebRTC] Offer created — send via signalling server:', offer);
-  }, []);
+    pc.onconnectionstatechange = () => {
+      if (pc.connectionState === 'failed' || pc.connectionState === 'disconnected') {
+        updateSession({ state: 'ended' });
+        setTimeout(() => updateSession({ state: 'idle' }), 1800);
+      }
+    };
+
+    return pc;
+  }, [onIceCandidateReady, updateSession]);
+
+  const startCall = useCallback(async (peer: ChatUser, withVideo = false) => {
+    const callId = `call_${Date.now()}`;
+    currentCallId.current = callId;
+    updateSession({ state: 'calling', peer });
+
+    let stream: MediaStream;
+    try {
+      stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: withVideo });
+    } catch (err) {
+      console.error('[WebRTC] getUserMedia failed:', err);
+      updateSession({ state: 'idle' });
+      return;
+    }
+    localStream.current = stream;
+    if (localVideoRef.current) localVideoRef.current.srcObject = stream;
+
+    const pc = buildPc(peer);
+    stream.getTracks().forEach(t => pc.addTrack(t, stream));
+
+    try {
+      const offer = await pc.createOffer();
+      await pc.setLocalDescription(offer);
+      onOfferReady?.(offer, peer.uid, callId);
+      updateSession({ isCameraOn: withVideo });
+    } catch (err) {
+      console.error('[WebRTC] createOffer failed:', err);
+    }
+  }, [buildPc, onOfferReady, updateSession]);
 
-  /** Accept an incoming call offer */
   const acceptCall = useCallback(async (
     offer: RTCSessionDescriptionInit,
     peer: ChatUser,
+    callId: string,
     withVideo = false
   ) => {
+    currentCallId.current = callId;
     updateSession({ state: 'connected', peer, startedAt: new Date(), isCameraOn: withVideo });
 
-    const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: withVideo });
+    let stream: MediaStream;
+    try {
+      stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: withVideo });
+    } catch (err) {
+      console.error('[WebRTC] getUserMedia failed:', err);
+      return;
+    }
     localStream.current = stream;
     if (localVideoRef.current) localVideoRef.current.srcObject = stream;
 
-    const pc = new RTCPeerConnection({ iceServers: ICE_SERVERS });
-    pcRef.current = pc;
+    const pc = buildPc(peer);
     stream.getTracks().forEach(t => pc.addTrack(t, stream));
-    pc.ontrack = e => {
-      if (remoteVideoRef.current) remoteVideoRef.current.srcObject = e.streams[0];
-    };
-    pc.onicecandidate = e => {
-      if (e.candidate) {
-        // TODO: socket.emit('ice-candidate', { candidate: e.candidate, to: peer.uid });
-      }
-    };
 
     await pc.setRemoteDescription(offer);
     const answer = await pc.createAnswer();
     await pc.setLocalDescription(answer);
-    // TODO: socket.emit('call-answer', { answer, to: peer.uid });
+    onAnswerReady?.(answer, peer.uid, callId);
+  }, [buildPc, onAnswerReady, updateSession]);
+
+  const addIceCandidate = useCallback(async (candidate: RTCIceCandidateInit) => {
+    try {
+      await pcRef.current?.addIceCandidate(new RTCIceCandidate(candidate));
+    } catch (err) {
+      console.warn('[WebRTC] addIceCandidate failed:', err);
+    }
   }, []);
 
-  /** Hang up */
   const endCall = useCallback(() => {
+    const callId = currentCallId.current;
+    const peerUid = peerUidRef.current ?? undefined;
     localStream.current?.getTracks().forEach(t => t.stop());
     pcRef.current?.close();
     pcRef.current = null;
     localStream.current = null;
+    currentCallId.current = null;
+    if (callId) onCallEnded?.(callId, peerUid);
     updateSession({ state: 'ended', peer: null, startedAt: null });
     setTimeout(() => updateSession({ state: 'idle' }), 1800);
-  }, []);
+  }, [onCallEnded, updateSession]);
 
   const toggleMute = useCallback(() => {
     if (!localStream.current) return;
-    const enabled = !session.isMuted;
-    localStream.current.getAudioTracks().forEach(t => { t.enabled = enabled; });
-    updateSession({ isMuted: !session.isMuted });
-  }, [session.isMuted]);
+    const muted = !session.isMuted;
+    localStream.current.getAudioTracks().forEach(t => { t.enabled = !muted; });
+    updateSession({ isMuted: muted });
+  }, [session.isMuted, updateSession]);
 
   const toggleCamera = useCallback(() => {
     if (!localStream.current) return;
-    const enabled = !session.isCameraOn;
-    localStream.current.getVideoTracks().forEach(t => { t.enabled = enabled; });
-    updateSession({ isCameraOn: enabled });
-  }, [session.isCameraOn]);
+    const on = !session.isCameraOn;
+    localStream.current.getVideoTracks().forEach(t => { t.enabled = on; });
+    updateSession({ isCameraOn: on });
+  }, [session.isCameraOn, updateSession]);
 
-  // Cleanup on unmount
   useEffect(() => () => {
     localStream.current?.getTracks().forEach(t => t.stop());
     pcRef.current?.close();
   }, []);
 
   return {
-    session,
-    localVideoRef,
-    remoteVideoRef,
-    startCall,
-    acceptCall,
-    endCall,
-    toggleMute,
-    toggleCamera,
+    session, localVideoRef, remoteVideoRef,
+    startCall, acceptCall, addIceCandidate, endCall,
+    toggleMute, toggleCamera,
   };
 }

package/src/index.ts

@@ -10,10 +10,12 @@ export { MaintenanceView }    from './components/MaintenanceView';
 export { BottomTabs }         from './components/Tabs/BottomTabs';
 export { EmojiPicker }        from './components/EmojiPicker';
 export { SlideNavMenu }       from './components/SlideNavMenu';
+export { ErrorBoundary }      from './components/ErrorBoundary';
 
 export { useChat }            from './hooks/useChat';
 export { useWebRTC }          from './hooks/useWebRTC';
 export { useRemoteConfig }    from './hooks/useRemoteConfig';
+export { useSocket }          from './hooks/useSocket';
 
 export { shouldShowPrivacyNotice, dismissPrivacyNotice, getPrivacyDismissedAt } from './utils/privacyConsent';
 export { submitReenableRequest } from './utils/reenableRequest';
@@ -25,12 +27,21 @@ export type { PresenceSyncPayload } from './utils/presenceStatus';
 export { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText, truncateWords } from './utils/chat';
 
 export type {
+  // Core widget
   ChatWidgetProps, ChatWidgetTheme, ChatWidgetViewer,
+  // Config shapes
   WidgetConfig, RemoteChatData,
+  AjaxterConfigResponse, AjaxterInternalConfig, AjaxterWidgetSettings,
+  AjaxterWidgetTheme, AjaxterWidgetFeatures, AjaxterMinimized,
+  // Data models
   ChatUser, ChatMessage, Ticket, RecentChat,
   CallSession, CallState,
-  ChatStatus, ChatType, UserType, OnlineStatus,
-  Screen, BottomTab, UserListContext, MessageType,
+  // Enums / literals
+  ChatStatus, ChatType, DisplayMode, UserType, OnlineStatus,
+  Screen, BottomTab, UserListContext, MessageType, PresenceStatus,
   LocalEnvConfig,
-  PresenceStatus,
 } from './types';
+
+export type { UseSocketOptions, SocketStatus, SocketMessageAck } from './hooks/useSocket';
+export type { UseChatOptions } from './hooks/useChat';
+export type { UseWebRTCOptions } from './hooks/useWebRTC';

package/src/types/index.ts

@@ -1,208 +1,242 @@
-// ─── Remote Config (from chatData.json) ────────────────────────────────────
+// ─── Ajaxter Server Config Shape ─────────────────────────────────────────────
+
+export interface AjaxterWidgetTheme {
+  header:  { background: string; text: string };
+  agent:   { messageBackground: string; messageText: string };
+  visitor: { messageBackground: string; messageText: string };
+}
+
+export interface AjaxterWidgetFeatures {
+  emoji:      boolean;
+  rating:     boolean;
+  transcript: boolean;
+  voice:      boolean;
+  attachment: boolean;
+  webCall:    boolean;
+}
+
+export interface AjaxterMinimized {
+  desktop: { type: 'slide' | 'round' | 'square'; height?: number; width?: number; borderRadiusTop?: number; borderRadiusBottom?: number };
+  mobile:  { type: 'round' | 'slide' | 'square' };
+}
+
+export interface AjaxterWidgetSettings {
+  type:        'inline' | 'popup' | 'embed';
+  language:    string;
+  minimized:   AjaxterMinimized;
+  maximized:   { desktop: { height: number; width: number } };
+  theme:       AjaxterWidgetTheme;
+  notification?: {
+    all?:     { sound?: boolean; agentTyping?: boolean; visitorTyping?: boolean };
+    desktop?: { preview?: boolean };
+    mobile?:  { preview?: boolean };
+  };
+  behavior?:   { defaultView?: string };
+  visibility?: {
+    all?:     { showWhenOffline?: boolean };
+    desktop?: { position?: string; show?: boolean };
+    mobile?:  { position?: string; show?: boolean };
+  };
+  features:    AjaxterWidgetFeatures;
+  scheduler?:  { enabled: boolean; config?: unknown };
+  states?:     Record<string, unknown>;
+}
+
+/** Internal fields that drive the npm widget behaviour */
+export interface AjaxterInternalConfig {
+  id:                  string;
+  apiKey:              string;
+  status:              ChatStatus;
+  chatType:            ChatType;
+  /** 'slider' = side drawer, 'popup' = centered modal, 'inline' = embedded in page */
+  displayMode:         DisplayMode;
+  primaryColor:        string;
+  buttonLabel:         string;
+  brandName:           string | null;
+  supportPhone:        string | null;
+  privacyPolicyUrl:    string | null;
+  showPrivacyNotice:   boolean;
+  allowVoiceMessage:   boolean;
+  allowAttachment:     boolean;
+  allowEmoji:          boolean;
+  allowWebCall:        boolean;
+  maxEmojiCount:       number;
+  allowTranscript:     boolean;
+  allowReport:         boolean;
+  allowBlock:          boolean;
+}
+
+/** Full response shape from GET /api/chat-config */
+export interface AjaxterConfigResponse {
+  ok:             boolean;
+  data: {
+    settingsVersion: string;
+    propertyName:    string;
+    branding:        { name: string };
+    widget:          AjaxterWidgetSettings;
+    _internal:       AjaxterInternalConfig;
+    developers:      ChatUser[];
+    users:           ChatUser[];
+    sampleChats:     Record<string, ChatMessage[]>;
+    sampleTickets:   Ticket[];
+    blockedUsers:    string[];
+  };
+}
+
+/** The merged WidgetConfig shape used throughout the widget components */
 export interface WidgetConfig {
-  id: string;
-  apiKey: string;
-  status: ChatStatus;
-  chatType: ChatType;
-  primaryColor: string;
-  buttonLabel: string;
-  buttonPosition: 'bottom-right' | 'bottom-left';
-  welcomeTitle: string;
-  welcomeSubtitle: string;
-  /** Shown in footer (e.g. branch / location name) */
-  branch?: string;
-  /** Optional label above branch (e.g. "Answers by") */
-  footerPoweredBy?: string;
-  /** Shown on home “Call Us” (tel: link) */
-  supportPhone?: string;
-  /**
-   * Who is using the widget. `developer` = support staff: “Need Support” becomes “Provide Support”
-   * and lists customers; “New Conversation” lists other developers (excl. viewerUid).
-   */
-  viewerType?: 'user' | 'developer';
-  /** Current user id when viewerType is developer — excluded from developer pick lists */
-  viewerUid?: string;
-  /** Display name for transfer notes (optional) */
-  viewerName?: string;
-  /**
-   * Host app project scope (set when embedding passes `viewer.projectId`).
-   * Use for API calls; lists can be filtered to users in the same project.
-   */
-  viewerProjectId?: string;
-  /** Privacy Policy URL (linked from chat consent banner) */
+  id:                string;
+  apiKey:            string;
+  status:            ChatStatus;
+  chatType:          ChatType;
+  displayMode:       DisplayMode;
+  primaryColor:      string;
+  buttonLabel:       string;
+  buttonPosition:    'bottom-right' | 'bottom-left';
+  welcomeTitle:      string;
+  welcomeSubtitle:   string;
+  branch?:           string;
+  footerPoweredBy?:  string;
+  supportPhone?:     string;
+  viewerType?:       'user' | 'developer';
+  viewerUid?:        string;
+  viewerName?:       string;
+  viewerProjectId?:  string;
   privacyPolicyUrl?: string;
-  /** Set false to hide the consent note above the composer */
   showPrivacyNotice?: boolean;
-  /** Product brand (e.g. Ajaxter) */
-  brandName?: string;
-  /** Home promotion: “Take a Website Tour” link */
-  websiteTourUrl?: string;
-  /** Optional override for the lead line in the promotion card */
-  promotionLead?: string;
+  brandName?:        string;
+  websiteTourUrl?:   string;
+  promotionLead?:    string;
   allowVoiceMessage: boolean;
-  allowAttachment: boolean;
-  allowEmoji: boolean;
-  allowWebCall: boolean;
-  maxEmojiCount: number;
+  allowAttachment:   boolean;
+  allowEmoji:        boolean;
+  allowWebCall:      boolean;
+  maxEmojiCount:     number;
   allowTranscriptDownload: boolean;
-  allowReport: boolean;
-  allowBlock: boolean;
-  /**
-   * When `true` (set by the server if this viewer is spam-blocked or not in allowed user/ticket/chat lists),
-   * the widget hides all normal navigation and shows only the blocked-user screen with a re-enable request form.
-   */
-  viewerBlocked?: boolean;
-  /** Optional override for the blocked message (default is a fixed spam notice). */
+  allowReport:       boolean;
+  allowBlock:        boolean;
+  viewerBlocked?:    boolean;
   blockedViewerMessage?: string;
-  /**
-   * Absolute URL for `POST` JSON re-enable requests. If omitted, the submit button explains that no endpoint is configured.
-   * @example https://api.example.com/widgets/reenable-request
-   */
   reenableRequestUrl?: string;
-  /**
-   * Current presence from your API/DB (include in chatData or a session payload).
-   * When set, it initializes the status control and overrides session-only cache.
-   */
-  presenceStatus?: PresenceStatus;
-  /**
-   * Production: `POST` JSON `{ widgetId, apiKey, viewerUid?, status }` to save presence in your database.
-   * The client still mirrors to sessionStorage as a local fallback.
-   */
+  presenceStatus?:   PresenceStatus;
   presenceUpdateUrl?: string;
+  /** Full Ajaxter settings from server (for display-mode, theming, etc.) */
+  ajaxterSettings?:  AjaxterWidgetSettings;
 }
 
 export interface RemoteChatData {
-  widget: WidgetConfig;
-  developers: ChatUser[];
-  users: ChatUser[];
-  sampleChats: Record<string, ChatMessage[]>;
+  widget:       WidgetConfig;
+  developers:   ChatUser[];
+  users:        ChatUser[];
+  sampleChats:  Record<string, ChatMessage[]>;
   sampleTickets: Ticket[];
   blockedUsers: string[];
 }
 
-// ─── Enums ──────────────────────────────────────────────────────────────────
+// ─── Enums ───────────────────────────────────────────────────────────────────
 export type ChatStatus   = 'ACTIVE' | 'DISABLE' | 'MAINTENANCE';
 export type ChatType     = 'SUPPORT' | 'CHAT' | 'BOTH';
+export type DisplayMode  = 'slider' | 'popup' | 'inline';
 export type UserType     = 'developer' | 'user';
 export type OnlineStatus = 'online' | 'away' | 'offline';
 export type BottomTab    = 'home' | 'chats' | 'tickets';
-export type Screen       =
-  | 'home'
-  | 'user-list'
-  | 'chat'
-  | 'recent-chats'
-  | 'tickets'
-  | 'ticket-new'
-  | 'ticket-detail'
-  | 'block-list'
-  | 'call';
+export type Screen =
+  | 'home' | 'user-list' | 'chat' | 'recent-chats'
+  | 'tickets' | 'ticket-new' | 'ticket-detail'
+  | 'block-list' | 'call';
 export type UserListContext = 'support' | 'conversation';
 export type MessageType = 'text' | 'voice' | 'attachment' | 'emoji';
-
-/** Home status selector; persist via `presenceUpdateUrl` in production */
 export type PresenceStatus = 'ACTIVE' | 'AWAY' | 'DND';
 
-// ─── User ───────────────────────────────────────────────────────────────────
+// ─── User ────────────────────────────────────────────────────────────────────
 export interface ChatUser {
-  uid: string;
-  name: string;
-  email: string;
-  mobile: string;
-  project: string;
-  type: UserType;
-  avatar: string | null;
-  status: OnlineStatus;
+  uid:         string;
+  name:        string;
+  email:       string;
+  mobile:      string;
+  project:     string;
+  type:        UserType;
+  avatar:      string | null;
+  status:      OnlineStatus;
   designation: string;
-  /**
-   * When `true` for the row matching the current viewer (`viewerUid` / `viewer.uid`),
-   * the widget shows the spam/blocked screen (same as `widget.viewerBlocked`).
-   */
   viewerBlocked?: boolean;
 }
 
-// ─── Message ────────────────────────────────────────────────────────────────
+// ─── Message ─────────────────────────────────────────────────────────────────
 export interface ChatMessage {
-  id: string;
-  senderId: string;
-  receiverId: string;
-  text: string;
-  timestamp: string;
-  type: MessageType;
-  status: 'sent' | 'delivered' | 'read';
+  id:             string;
+  senderId:       string;
+  receiverId:     string;
+  text:           string;
+  timestamp:      string;
+  type:           MessageType;
+  status:         'sent' | 'delivered' | 'read';
   attachmentName?: string;
   attachmentSize?: string;
-  /** Blob URL for attachment download (local send) */
-  attachmentUrl?: string;
-  /** e.g. image/png — used for inline image preview in bubbles */
+  attachmentUrl?:  string;
   attachmentMime?: string;
-  voiceDuration?: number;  // seconds
-  /** Blob URL for in-bubble audio playback (local recording) */
-  voiceUrl?: string;
+  voiceDuration?:  number;
+  voiceUrl?:       string;
 }
 
-// ─── Ticket ─────────────────────────────────────────────────────────────────
+// ─── Ticket ──────────────────────────────────────────────────────────────────
 export interface Ticket {
-  id: string;
-  title: string;
+  id:          string;
+  title:       string;
   description: string;
-  status: 'open' | 'in-progress' | 'resolved' | 'closed';
-  priority: 'low' | 'medium' | 'high';
-  createdAt: string;
-  updatedAt: string;
-  assignedTo: string | null;
+  status:      'open' | 'in-progress' | 'resolved' | 'closed';
+  priority:    'low' | 'medium' | 'high';
+  createdAt:   string;
+  updatedAt:   string;
+  assignedTo:  string | null;
 }
 
 // ─── Recent Chat ─────────────────────────────────────────────────────────────
 export interface RecentChat {
-  id: string;
-  user: ChatUser;
+  id:          string;
+  user:        ChatUser;
   lastMessage: string;
-  lastTime: string;
-  unread: number;
-  isPaused: boolean;
+  lastTime:    string;
+  unread:      number;
+  isPaused:    boolean;
 }
 
-// ─── Call ───────────────────────────────────────────────────────────────────
+// ─── Call ────────────────────────────────────────────────────────────────────
 export type CallState = 'idle' | 'calling' | 'connected' | 'ended';
-
 export interface CallSession {
-  state: CallState;
-  peer: ChatUser | null;
-  startedAt: Date | null;
-  isMuted: boolean;
+  state:      CallState;
+  peer:       ChatUser | null;
+  startedAt:  Date | null;
+  isMuted:    boolean;
   isCameraOn: boolean;
 }
 
 // ─── Local env config ────────────────────────────────────────────────────────
 export interface LocalEnvConfig {
-  apiKey: string;
+  apiKey:   string;
   widgetId: string;
+  socketUrl: string;
 }
 
-// ─── Theme prop (still overridable) ─────────────────────────────────────────
+// ─── Theme prop ──────────────────────────────────────────────────────────────
 export interface ChatWidgetTheme {
-  primaryColor?: string;
-  fontFamily?: string;
-  buttonColor?: string;
+  primaryColor?:    string;
+  fontFamily?:      string;
+  buttonColor?:     string;
   buttonTextColor?: string;
-  buttonLabel?: string;
-  buttonPosition?: 'bottom-right' | 'bottom-left';
-  borderRadius?: string;
+  buttonLabel?:     string;
+  buttonPosition?:  'bottom-right' | 'bottom-left';
+  borderRadius?:    string;
 }
 
-/**
- * Pass the logged-in user from your React app so the widget matches identity and UI (user vs developer).
- * Overrides `viewerUid`, `viewerName`, `viewerType` from remote `chatData.json` when provided.
- */
 export interface ChatWidgetViewer {
-  uid: string;
-  name: string;
-  type: UserType;
-  /** When set, directory lists only include users whose `ChatUser.project` equals this string (exact match). */
+  uid:       string;
+  name:      string;
+  type:      UserType;
   projectId?: string;
 }
 
 export interface ChatWidgetProps {
-  theme?: ChatWidgetTheme;
+  theme?:  ChatWidgetTheme;
   viewer?: ChatWidgetViewer;
 }