ajaxter-chat 3.0.17 → 3.2.0

package/src/components/ChatWidget.tsx

@@ -1,142 +1,294 @@
 'use client';
 
 import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import { ChatWidgetProps, BottomTab, Screen, UserListContext, ChatUser, Ticket, RecentChat, ChatMessage } from '../types';
+import {
+  ChatWidgetProps, BottomTab, Screen, UserListContext,
+  ChatUser, Ticket, RecentChat, ChatMessage, DisplayMode,
+} from '../types';
 import { loadLocalConfig } from '../config';
 import { mergeTheme } from '../utils/theme';
 import { useRemoteConfig } from '../hooks/useRemoteConfig';
 import { useChat } from '../hooks/useChat';
 import { useWebRTC } from '../hooks/useWebRTC';
+import { useSocket } from '../hooks/useSocket';
 import { saveSession, loadSession } from '../utils/widgetSession';
 import { playMessageSound, getMessageSoundEnabled, setMessageSoundEnabled } from '../utils/messageSound';
-
-import { HomeScreen }        from './HomeScreen';
-import { UserListScreen }    from './UserListScreen';
-import { ChatScreen }        from './ChatScreen';
-import { RecentChatsScreen } from './RecentChatsScreen';
-import { TicketScreen }      from './TicketScreen';
-import { TicketDetailScreen } from './TicketDetailScreen';
-import { TicketFormScreen } from './TicketFormScreen';
-import { BlockListScreen }   from './BlockList';
-import { CallScreen }        from './CallScreen';
-import { MiniCallBar }       from './MiniCallBar';
-import { MaintenanceView }   from './MaintenanceView';
-import { BottomTabs }        from './Tabs/BottomTabs';
-import { ViewerBlockedScreen } from './ViewerBlockedScreen';
+import { ErrorBoundary } from './ErrorBoundary';
+
+import { HomeScreen }            from './HomeScreen';
+import { UserListScreen }        from './UserListScreen';
+import { ChatScreen }            from './ChatScreen';
+import { RecentChatsScreen }     from './RecentChatsScreen';
+import { TicketScreen }          from './TicketScreen';
+import { TicketDetailScreen }    from './TicketDetailScreen';
+import { TicketFormScreen }      from './TicketFormScreen';
+import { BlockListScreen }       from './BlockList';
+import { CallScreen }            from './CallScreen';
+import { MiniCallBar }           from './MiniCallBar';
+import { MaintenanceView }       from './MaintenanceView';
+import { BottomTabs }            from './Tabs/BottomTabs';
+import { ViewerBlockedScreen }   from './ViewerBlockedScreen';
 import { PermissionsGateScreen } from './PermissionsGateScreen';
 import { hasStoredPermissionsGrant } from '../utils/widgetPermissions';
 
+// ─── Display-mode geometry ────────────────────────────────────────────────────
+
+interface PanelGeometry {
+  /** Fixed-position style for the panel */
+  panel: React.CSSProperties;
+  enterClass: string;
+  exitClass:  string;
+  /** CSS for the backdrop (undefined = no backdrop) */
+  backdrop?: React.CSSProperties;
+}
+
+function getPanelGeometry(
+  displayMode: DisplayMode,
+  buttonPosition: 'bottom-right' | 'bottom-left',
+  ajaxterMaximized?: { desktop?: { height?: number; width?: number } }
+): PanelGeometry {
+  const w = ajaxterMaximized?.desktop?.width  ?? 550;
+  const h = ajaxterMaximized?.desktop?.height ?? 600;
+
+  if (displayMode === 'popup') {
+    // Centered modal / popup
+    return {
+      panel: {
+        position:  'fixed',
+        top:       '50%',
+        left:      '50%',
+        transform: 'translate(-50%, -50%)',
+        width:     `min(${w}px, 96vw)`,
+        height:    `min(${h}px, 94vh)`,
+        maxWidth:  '100vw',
+        maxHeight: '100vh',
+        borderRadius: 16,
+        boxShadow: '0 24px 64px rgba(0,0,0,0.28)',
+        zIndex:    9998,
+        backgroundColor: '#fff',
+        display:  'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+      },
+      enterClass: 'cw-popup-enter',
+      exitClass:  'cw-popup-exit',
+      backdrop: {
+        position: 'fixed', inset: 0, zIndex: 9997,
+        backgroundColor: 'rgba(0,0,0,0.45)',
+        backdropFilter: 'blur(2px)',
+      },
+    };
+  }
+
+  if (displayMode === 'inline') {
+    // Embedded — no fixed positioning, caller wraps it
+    return {
+      panel: {
+        position: 'relative',
+        width:    '100%',
+        height:   '100%',
+        display:  'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        backgroundColor: '#fff',
+      },
+      enterClass: '',
+      exitClass:  '',
+    };
+  }
+
+  // Default: slider (side drawer)
+  const isLeft = buttonPosition === 'bottom-left';
+  return {
+    panel: {
+      position:  'fixed',
+      top: 0, bottom: 0,
+      [isLeft ? 'left' : 'right']: 0,
+      width:    'min(380px, 100vw)',
+      maxWidth: '100vw',
+      borderTopLeftRadius:    isLeft ? 0 : 16,
+      borderBottomLeftRadius: isLeft ? 0 : 16,
+      borderTopRightRadius:   isLeft ? 16 : 0,
+      borderBottomRightRadius: isLeft ? 16 : 0,
+      boxShadow: isLeft ? '4px 0 40px rgba(0,0,0,0.18)' : '-4px 0 40px rgba(0,0,0,0.18)',
+      zIndex:    9998,
+      backgroundColor: '#fff',
+      display:  'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+    },
+    enterClass: isLeft ? 'cw-slideInLeft'  : 'cw-slideInRight',
+    exitClass:  isLeft ? 'cw-slideOutLeft' : 'cw-slideOutRight',
+    backdrop: {
+      position: 'fixed', inset: 0, zIndex: 9997,
+      backgroundColor: 'rgba(0,0,0,0.35)',
+    },
+  };
+}
+
+// ─── ChatWidget ───────────────────────────────────────────────────────────────
+
 export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewer }) => {
-  /* SSR guard */
   const [mounted, setMounted] = useState(false);
   useEffect(() => { setMounted(true); }, []);
 
-  /* Env config */
-  const { apiKey, widgetId } = loadLocalConfig();
-
-  /* Remote config */
+  const { apiKey, widgetId, socketUrl } = loadLocalConfig();
   const { data, loading: cfgLoading, error: cfgError } = useRemoteConfig(apiKey, widgetId);
 
-  /* Merged theme — remote config overrides defaults, local prop overrides both */
   const theme = mergeTheme(
-    data?.widget ? { primaryColor: data.widget.primaryColor, buttonLabel: data.widget.buttonLabel, buttonPosition: data.widget.buttonPosition } : undefined,
-    localTheme
+    data?.widget ? {
+      primaryColor:   data.widget.primaryColor,
+      buttonLabel:    data.widget.buttonLabel,
+      buttonPosition: data.widget.buttonPosition,
+    } : undefined,
+    localTheme,
   );
 
-  /* Drawer open state */
-  const [isOpen,      setIsOpen]      = useState(false);
-  const [closing,     setClosing]     = useState(false); // for slide-out animation
-  /** True when user hid the drawer during ringing/connected call; WebRTC session stays active. */
+  // Pull real colours from Ajaxter settings if available
+  const headerBg   = data?.widget.ajaxterSettings?.theme?.header?.background ?? theme.primaryColor;
+  const agentBg    = data?.widget.ajaxterSettings?.theme?.agent?.messageBackground ?? '#54aadd';
+  const visitorBg  = data?.widget.ajaxterSettings?.theme?.visitor?.messageBackground ?? '#e5e5e5';
+  const displayMode: DisplayMode = data?.widget.displayMode ?? 'slider';
+  const ajaxterSettings = data?.widget.ajaxterSettings;
+
+  // Minimized button style from Ajaxter settings
+  const minimizedDesktop = ajaxterSettings?.minimized?.desktop;
+  const btnType = minimizedDesktop?.type ?? 'slide';
+
+  const [isOpen,        setIsOpen]        = useState(false);
+  const [closing,       setClosing]       = useState(false);
   const [callMinimized, setCallMinimized] = useState(false);
 
-  /* Navigation */
-  const [activeTab,    setActiveTab]    = useState<BottomTab>('home');
-  const [screen,       setScreen]       = useState<Screen>('home');
-  const [userListCtx,  setUserListCtx]  = useState<UserListContext>('support');
-  const [chatReturnCtx, setChatReturnCtx] = useState<UserListContext>('conversation');
+  const [activeTab,       setActiveTab]       = useState<BottomTab>('home');
+  const [screen,          setScreen]          = useState<Screen>('home');
+  const [userListCtx,     setUserListCtx]     = useState<UserListContext>('support');
+  const [chatReturnCtx,   setChatReturnCtx]   = useState<UserListContext>('conversation');
   const [viewingTicketId, setViewingTicketId] = useState<string | null>(null);
   const [messageSoundEnabled, setMessageSoundEnabledState] = useState(true);
-  /** Stagger list animation only when opening from home burger menu */
-  const [listEntranceAnimation, setListEntranceAnimation] = useState(false);
-  /** Microphone, geolocation, and screen capture granted for this tab */
-  const [permissionsOk, setPermissionsOk] = useState(false);
+  const [listEntranceAnimation, setListEntranceAnimation]  = useState(false);
+  const [permissionsOk, setPermissionsOk]     = useState(false);
+  const [socketStatus,  setSocketStatus]      = useState<'connecting'|'connected'|'disconnected'|'error'>('disconnected');
+  const [typingUsers,   setTypingUsers]       = useState<Set<string>>(new Set());
 
-  /* App state */
-  const [tickets,      setTickets]      = useState<Ticket[]>(data?.sampleTickets ?? []);
-  const [recentChats,  setRecentChats]  = useState<RecentChat[]>([]);
-  const [blockedUids,  setBlockedUids]  = useState<string[]>(data?.blockedUsers ?? []);
+  const [tickets,     setTickets]     = useState<Ticket[]>([]);
+  const [recentChats, setRecentChats] = useState<RecentChat[]>([]);
+  const [blockedUids, setBlockedUids] = useState<string[]>([]);
 
-  /* Sync remote data into local state once loaded */
+  // Sync remote data once loaded
   useEffect(() => {
-    if (data) {
-      setTickets(data.sampleTickets);
-      setBlockedUids(data.blockedUsers);
-      const pid = viewer?.projectId?.trim();
-      const devs = data.developers ?? [];
-      const usr = pid ? (data.users ?? []).filter(u => u.project === pid) : (data.users ?? []);
-      const all = [...devs, ...usr];
-      const recents: RecentChat[] = Object.entries(data.sampleChats).map(([uid, msgs]) => {
-        const user = all.find(u => u.uid === uid);
-        if (!user || msgs.length === 0) return null;
-        const last = msgs[msgs.length - 1];
-        return {
-          id:          `rc_${uid}`,
-          user,
-          lastMessage: last.text,
-          lastTime:    last.timestamp,
-          unread:      Math.floor(Math.random() * 3),
-          isPaused:    false,
-        };
-      }).filter(Boolean) as RecentChat[];
-      setRecentChats(recents);
-    }
+    if (!data) return;
+    setTickets(data.sampleTickets);
+    setBlockedUids(data.blockedUsers);
+    const pid  = viewer?.projectId?.trim();
+    const devs = data.developers ?? [];
+    const usr  = pid ? (data.users ?? []).filter(u => u.project === pid) : (data.users ?? []);
+    const all  = [...devs, ...usr];
+    const recents: RecentChat[] = Object.entries(data.sampleChats).map(([uid, msgs]) => {
+      const user = all.find(u => u.uid === uid);
+      if (!user || msgs.length === 0) return null;
+      const last = msgs[msgs.length - 1];
+      return { id: `rc_${uid}`, user, lastMessage: last.text, lastTime: last.timestamp, unread: 0, isPaused: false };
+    }).filter(Boolean) as RecentChat[];
+    setRecentChats(recents);
   }, [data, viewer?.projectId]);
 
-  /* Chat hook */
+  // ── Socket ────────────────────────────────────────────────────────────────
+  const viewerUidForSocket = (viewer?.uid ?? data?.widget?.viewerUid ?? '').trim();
+
+  const {
+    joinRoom, leaveRoom,
+    emitMessage, emitPauseToggle, emitReport,
+    emitBlock, emitUnblock, emitTransfer,
+    emitCallOffer, emitCallAnswer, emitIceCandidate, emitCallEnd,
+    emitAddParticipant, emitPresence,
+    emitTicketCreate, emitTicketUpdate,
+    status: _socketStatus,
+  } = useSocket({
+    widgetId,
+    viewerUid: viewerUidForSocket,
+    serverUrl: socketUrl,
+    onMessage: (msg) => {
+      receiveMessage(msg);
+      if (messageSoundEnabled && msg.senderId !== 'me') playMessageSound();
+      setRecentChats(prev => prev.map(r =>
+        r.user.uid === msg.senderId || r.user.uid === msg.receiverId
+          ? { ...r, lastMessage: msg.text, lastTime: msg.timestamp, unread: r.unread + 1 }
+          : r
+      ));
+    },
+    onMessageAck: ({ messageId, status }) => { updateMessageStatus(messageId, status); },
+    onChatPaused: (_roomId, paused) => {
+      if (activeUser) setRecentChats(prev => prev.map(r =>
+        r.user.uid === activeUser.uid ? { ...r, isPaused: paused } : r
+      ));
+    },
+    onTypingStart: (roomId, userId) => {
+      setTypingUsers(prev => { const s = new Set(prev); s.add(userId); return s; });
+    },
+    onTypingStop: (_roomId, userId) => {
+      setTypingUsers(prev => { const s = new Set(prev); s.delete(userId); return s; });
+    },
+    onCallOffer: async (offer, fromUid, callId) => {
+      const allUsers = [...(data?.developers ?? []), ...(data?.users ?? [])];
+      const peer = allUsers.find(u => u.uid === fromUid);
+      if (peer) { await acceptCall(offer, peer, callId); setScreen('call'); setIsOpen(true); }
+    },
+    onCallEnd: () => { _endCall(); },
+    onUserStatus: (uid, status) => {
+      setRecentChats(prev => prev.map(r =>
+        r.user.uid === uid ? { ...r, user: { ...r.user, status } } : r
+      ));
+    },
+    onTicketCreated: (t) => { if (t) setTickets(prev => [t as Ticket, ...prev]); },
+    onTicketUpdated: (t) => {
+      if (t) setTickets(prev => prev.map(x => x.id === (t as Ticket).id ? t as Ticket : x));
+    },
+    onError: (code, msg) => console.error('[ChatWidget] socket error:', code, msg),
+  });
+
+  useEffect(() => { setSocketStatus(_socketStatus); }, [_socketStatus]);
+
+  // ── Chat hook ─────────────────────────────────────────────────────────────
   const {
     messages, activeUser, isPaused, isReported,
-    selectUser, sendMessage, togglePause, reportChat, clearChat, setMessages,
-  } = useChat();
-
-  /* WebRTC hook */
-  const { session: callSession, localVideoRef, remoteVideoRef, startCall, endCall, toggleMute, toggleCamera } = useWebRTC();
-
-  const callInProgress =
-    callSession.state === 'calling' || callSession.state === 'connected';
-
-  useEffect(() => {
-    if (!callInProgress) setCallMinimized(false);
-  }, [callInProgress]);
-
-  /* ── Drawer open/close with slide animation ───────────────────────────── */
-  const openDrawer = () => {
-    setClosing(false);
-    setIsOpen(true);
-    setCallMinimized(false);
-  };
+    selectUser, sendMessage, receiveMessage, updateMessageStatus,
+    togglePause: _togglePause, reportChat: _reportChat, clearChat, setMessages,
+  } = useChat([], {
+    onEmitMessage: (msg) => emitMessage(msg),
+    onEmitPause:   (roomId, targetUid, paused) => emitPauseToggle(roomId, targetUid, paused),
+    onEmitReport:  (roomId) => emitReport(roomId),
+  });
+
+  // ── WebRTC hook ───────────────────────────────────────────────────────────
+  const {
+    session: callSession, localVideoRef, remoteVideoRef,
+    startCall: _startCall, acceptCall, addIceCandidate, endCall: _endCall,
+    toggleMute, toggleCamera,
+  } = useWebRTC({
+    onOfferReady:       (offer, toUid, callId) => emitCallOffer(offer, toUid, callId),
+    onAnswerReady:      (answer, toUid, callId) => emitCallAnswer(answer, toUid, callId),
+    onIceCandidateReady:(candidate, toUid) => emitIceCandidate(candidate, toUid),
+    onCallEnded:        (callId, toUid) => emitCallEnd(callId, toUid),
+  });
+
+  const callInProgress = callSession.state === 'calling' || callSession.state === 'connected';
+  useEffect(() => { if (!callInProgress) setCallMinimized(false); }, [callInProgress]);
+
+  // ── Drawer open / close ───────────────────────────────────────────────────
+  const openDrawer = () => { setClosing(false); setIsOpen(true); setCallMinimized(false); };
 
   const persistWidgetState = useCallback(() => {
     const w = data?.widget;
     if (!w) return;
-    saveSession(w.id, {
-      screen,
-      activeTab,
-      userListCtx,
-      activeUserUid: activeUser?.uid ?? null,
-      messages,
-      viewingTicketId,
-      chatReturnCtx,
-    });
+    saveSession(w.id, { screen, activeTab, userListCtx, activeUserUid: activeUser?.uid ?? null, messages, viewingTicketId, chatReturnCtx });
   }, [data?.widget, screen, activeTab, userListCtx, activeUser?.uid, messages, viewingTicketId, chatReturnCtx]);
 
   const closeDrawer = useCallback(() => {
     persistWidgetState();
+    if (displayMode === 'inline') return; // inline is always open
     setClosing(true);
-    setTimeout(() => {
-      setIsOpen(false);
-      setClosing(false);
-    }, 300);
-  }, [persistWidgetState]);
+    setTimeout(() => { setIsOpen(false); setClosing(false); }, 300);
+  }, [persistWidgetState, displayMode]);
 
   useEffect(() => {
     const id = data?.widget?.id;
@@ -144,115 +296,53 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
     setPermissionsOk(hasStoredPermissionsGrant(id));
   }, [data?.widget?.id]);
 
+  // Session restore
   const restoredRef = useRef(false);
   useEffect(() => {
     if (!data?.widget || restoredRef.current) return;
     const w = data.widget;
     setMessageSoundEnabledState(getMessageSoundEnabled(w.id));
-    const uidForBlock = (viewer?.uid ?? w.viewerUid)?.trim();
-    let viewerIsBlocked = w.viewerBlocked === true;
-    if (!viewerIsBlocked && uidForBlock) {
-      const rec = [...data.developers, ...data.users].find(x => x.uid === uidForBlock);
-      viewerIsBlocked = rec?.viewerBlocked === true;
-    }
-    if (viewerIsBlocked) {
-      clearChat();
-      setScreen('home');
-      setActiveTab('home');
-      setViewingTicketId(null);
-      restoredRef.current = true;
-      return;
-    }
     const p = loadSession(w.id);
     if (p) {
-      setScreen(p.screen);
-      setActiveTab(p.activeTab);
-      setUserListCtx(p.userListCtx);
-      setViewingTicketId(p.viewingTicketId ?? null);
+      setScreen(p.screen); setActiveTab(p.activeTab);
+      setUserListCtx(p.userListCtx); setViewingTicketId(p.viewingTicketId ?? null);
       setChatReturnCtx(p.chatReturnCtx ?? 'conversation');
       if (p.activeUserUid) {
-        const pid = viewer?.projectId?.trim();
-        const pool = pid
-          ? [...data.developers, ...data.users].filter(u => u.project === pid)
-          : [...data.developers, ...data.users];
+        const pool = [...data.developers, ...data.users];
         const u = pool.find(x => x.uid === p.activeUserUid);
         if (u) {
-          const hist = Array.isArray(p.messages) && p.messages.length
-            ? p.messages
-            : (data.sampleChats[u.uid] ?? []);
+          const hist = Array.isArray(p.messages) && p.messages.length ? p.messages : (data.sampleChats[u.uid] ?? []);
           selectUser(u, hist);
+          const roomId = [u.uid, viewerUidForSocket].sort().join('_');
+          joinRoom(roomId);
         }
       }
     }
     restoredRef.current = true;
-  }, [data, selectUser, clearChat, viewer?.projectId, viewer?.uid]);
-
-  useEffect(() => {
-    if (!data?.widget) return;
-    const w = data.widget;
-    const uid = (viewer?.uid ?? w.viewerUid)?.trim();
-    let blocked = w.viewerBlocked === true;
-    if (!blocked && uid) {
-      const rec = [...data.developers, ...data.users].find(x => x.uid === uid);
-      blocked = rec?.viewerBlocked === true;
-    }
-    if (!blocked) return;
-    clearChat();
-    setScreen('home');
-    setActiveTab('home');
-    setViewingTicketId(null);
-  }, [data?.widget, data?.developers, data?.users, viewer?.uid, clearChat]);
+  }, [data, selectUser, viewer?.projectId, viewer?.uid, viewerUidForSocket, joinRoom]);
 
   useEffect(() => {
     if (!data?.widget) return;
     persistWidgetState();
   }, [data?.widget?.id, screen, activeTab, userListCtx, activeUser?.uid, messages, viewingTicketId, chatReturnCtx, persistWidgetState]);
 
-  const incomingSoundRef = useRef(0);
-  useEffect(() => {
-    incomingSoundRef.current = messages.length;
-  }, [activeUser?.uid]);
-
-  useEffect(() => {
-    if (!messageSoundEnabled || !activeUser || !data?.widget) return;
-    if (messages.length < incomingSoundRef.current) {
-      incomingSoundRef.current = messages.length;
-      return;
-    }
-    const added = messages.slice(incomingSoundRef.current);
-    incomingSoundRef.current = messages.length;
-    if (added.some(m => m.senderId !== 'me')) playMessageSound();
-  }, [messages, messageSoundEnabled, activeUser, data?.widget]);
-
   const toggleMessageSound = useCallback((enabled: boolean) => {
-    const w = data?.widget;
-    if (!w) return;
+    const w = data?.widget; if (!w) return;
     setMessageSoundEnabled(w.id, enabled);
     setMessageSoundEnabledState(enabled);
   }, [data?.widget]);
 
-  /* ── Navigation ──────────────────────────────────────────────────────── */
+  // ── Navigation ────────────────────────────────────────────────────────────
   const handleCardClick = useCallback((ctx: UserListContext | 'ticket', options?: { fromMenu?: boolean }) => {
     setListEntranceAnimation(!!options?.fromMenu);
-    if (ctx === 'ticket') {
-      setActiveTab('tickets');
-      setScreen('tickets');
-    } else {
-      setUserListCtx(ctx as UserListContext);
-      setScreen('user-list');
-    }
+    if (ctx === 'ticket') { setActiveTab('tickets'); setScreen('tickets'); }
+    else { setUserListCtx(ctx as UserListContext); setScreen('user-list'); }
   }, []);
 
   const handleNavFromMenu = useCallback((ctx: UserListContext | 'ticket') => {
-    setListEntranceAnimation(false);
-    clearChat();
-    if (ctx === 'ticket') {
-      setActiveTab('tickets');
-      setScreen('tickets');
-    } else {
-      setUserListCtx(ctx);
-      setScreen('user-list');
-    }
+    setListEntranceAnimation(false); clearChat();
+    if (ctx === 'ticket') { setActiveTab('tickets'); setScreen('tickets'); }
+    else { setUserListCtx(ctx); setScreen('user-list'); }
   }, [clearChat]);
 
   const listCtxForUser = useCallback((user: ChatUser, viewerIsDev: boolean): UserListContext => {
@@ -266,30 +356,27 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
     const history = data?.sampleChats[user.uid] ?? [];
     selectUser(user, history);
     setScreen('chat');
+    const roomId = [user.uid, viewerUidForSocket].sort().join('_');
+    joinRoom(roomId);
     setRecentChats(prev => {
       const exists = prev.find(r => r.user.uid === user.uid);
-      if (exists) return prev;
+      if (exists) return prev.map(r => r.user.uid === user.uid ? { ...r, unread: 0 } : r);
       return [{ id: `rc_${user.uid}`, user, lastMessage: '', lastTime: new Date().toISOString(), unread: 0, isPaused: false }, ...prev];
     });
-  }, [data, selectUser, userListCtx]);
+  }, [data, selectUser, userListCtx, viewerUidForSocket, joinRoom]);
 
   const handleBackFromChat = useCallback(() => {
     setListEntranceAnimation(false);
-    clearChat();
-    setUserListCtx(chatReturnCtx);
-    setScreen('user-list');
-  }, [clearChat, chatReturnCtx]);
+    if (activeUser) { const roomId = [activeUser.uid, viewerUidForSocket].sort().join('_'); leaveRoom(roomId); }
+    clearChat(); setUserListCtx(chatReturnCtx); setScreen('user-list');
+  }, [clearChat, chatReturnCtx, activeUser, viewerUidForSocket, leaveRoom]);
 
   const handleOpenTicket = useCallback((id: string) => {
-    setListEntranceAnimation(false);
-    setViewingTicketId(id);
-    setScreen('ticket-detail');
-    setActiveTab('tickets');
+    setListEntranceAnimation(false); setViewingTicketId(id); setScreen('ticket-detail'); setActiveTab('tickets');
   }, []);
 
   const handleTabChange = useCallback((tab: BottomTab) => {
-    setListEntranceAnimation(false);
-    setActiveTab(tab);
+    setListEntranceAnimation(false); setActiveTab(tab);
     setScreen(tab === 'home' ? 'home' : tab === 'chats' ? 'recent-chats' : 'tickets');
   }, []);
 
@@ -299,85 +386,82 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
     return () => window.clearTimeout(t);
   }, [listEntranceAnimation]);
 
-  /* ── Block/Unblock ───────────────────────────────────────────────────── */
+  // ── Block / Unblock ───────────────────────────────────────────────────────
   const handleBlock = useCallback(() => {
     if (!activeUser) return;
     setBlockedUids(prev => [...prev, activeUser.uid]);
-    clearChat();
-    setScreen('block-list');
-    setActiveTab('home');
-  }, [activeUser, clearChat]);
+    emitBlock(activeUser.uid);
+    clearChat(); setScreen('block-list'); setActiveTab('home');
+  }, [activeUser, clearChat, emitBlock]);
 
   const handleUnblock = useCallback((uid: string) => {
     setBlockedUids(prev => prev.filter(id => id !== uid));
-  }, []);
+    emitUnblock(uid);
+  }, [emitUnblock]);
 
-  /* ── Tickets ─────────────────────────────────────────────────────────── */
+  // ── Tickets ───────────────────────────────────────────────────────────────
   const handleRaiseTicket = useCallback((title: string, desc: string, priority: Ticket['priority']) => {
     const t: Ticket = {
-      id:          `TKT-${String(Date.now()).slice(-4)}`,
-      title, description: desc, status: 'open', priority,
-      createdAt:   new Date().toISOString(),
-      updatedAt:   new Date().toISOString(),
-      assignedTo:  null,
+      id: `TKT-${String(Date.now()).slice(-4)}`, title, description: desc, status: 'open', priority,
+      createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), assignedTo: null,
     };
     setTickets(prev => [...prev, t]);
-    setViewingTicketId(t.id);
-    setScreen('ticket-detail');
-    setActiveTab('tickets');
-  }, []);
+    setViewingTicketId(t.id); setScreen('ticket-detail'); setActiveTab('tickets');
+    emitTicketCreate({ title, description: desc, priority, createdBy: viewerUidForSocket });
+  }, [emitTicketCreate, viewerUidForSocket]);
 
-  /* ── Pause sync back into recent chats ──────────────────────────────── */
+  // ── Pause sync ────────────────────────────────────────────────────────────
   const handleTogglePause = useCallback(() => {
-    togglePause();
-    if (activeUser) {
-      setRecentChats(prev => prev.map(r => r.user.uid === activeUser.uid ? { ...r, isPaused: !isPaused } : r));
-    }
-  }, [togglePause, activeUser, isPaused]);
+    _togglePause();
+    if (activeUser) setRecentChats(prev => prev.map(r =>
+      r.user.uid === activeUser.uid ? { ...r, isPaused: !isPaused } : r
+    ));
+  }, [_togglePause, activeUser, isPaused]);
 
-  /* ── Call ────────────────────────────────────────────────────────────── */
+  // ── Call ──────────────────────────────────────────────────────────────────
   const handleStartCall = useCallback((withVideo: boolean) => {
-    if (!activeUser) return;
-    startCall(activeUser, withVideo);
-    setScreen('call');
-  }, [activeUser, startCall]);
-
-  const handleEndCall = useCallback(() => {
-    endCall();
-    setCallMinimized(false);
-    setScreen('chat');
-  }, [endCall]);
+    if (!activeUser) return; _startCall(activeUser, withVideo); setScreen('call');
+  }, [activeUser, _startCall]);
 
-  const minimizeCall = useCallback(() => {
-    setCallMinimized(true);
-    closeDrawer();
-  }, [closeDrawer]);
-
-  /* ── Derived ─────────────────────────────────────────────────────────── */
-  const isBlocked      = activeUser ? blockedUids.includes(activeUser.uid) : false;
+  const handleEndCall = useCallback(() => { _endCall(); setCallMinimized(false); setScreen('chat'); }, [_endCall]);
+  const minimizeCall  = useCallback(() => { setCallMinimized(true); closeDrawer(); }, [closeDrawer]);
 
+  // ── Transfer ──────────────────────────────────────────────────────────────
   const widgetConfig = useMemo(() => {
     if (!data?.widget) return undefined;
     const w = { ...data.widget };
-    if (viewer) {
-      w.viewerUid = viewer.uid;
-      w.viewerName = viewer.name;
-      w.viewerType = viewer.type;
-      if (viewer.projectId?.trim()) w.viewerProjectId = viewer.projectId.trim();
-    }
+    if (viewer) { w.viewerUid = viewer.uid; w.viewerName = viewer.name; w.viewerType = viewer.type; if (viewer.projectId?.trim()) w.viewerProjectId = viewer.projectId.trim(); }
     return w;
   }, [data?.widget, viewer]);
 
-  const primaryColor   = theme.primaryColor;
+  const handleTransferToDeveloper = useCallback((dev: ChatUser) => {
+    if (!activeUser || !widgetConfig) return;
+    const agent = widgetConfig.viewerName?.trim() || 'Agent';
+    const roomId = [activeUser.uid, viewerUidForSocket].sort().join('_');
+    const transferNote: ChatMessage = {
+      id: `tr_${Date.now()}`, senderId: 'me', receiverId: dev.uid,
+      text: `— ${agent} transferred this conversation from ${activeUser.name} to ${dev.name} —`,
+      timestamp: new Date().toISOString(), type: 'text', status: 'sent',
+    };
+    emitTransfer(roomId, dev.uid, transferNote.text);
+    selectUser(dev, [...messages, transferNote]);
+  }, [activeUser, messages, selectUser, widgetConfig, viewerUidForSocket, emitTransfer]);
+
+  const handleAddParticipant = useCallback((uid: string) => {
+    if (!activeUser) return;
+    emitAddParticipant([activeUser.uid, viewerUidForSocket].sort().join('_'), uid);
+  }, [activeUser, viewerUidForSocket, emitAddParticipant]);
+
+  // ── Derived ───────────────────────────────────────────────────────────────
+  const isBlocked = activeUser ? blockedUids.includes(activeUser.uid) : false;
+  const primaryColor = headerBg;
 
-  /** All developers are listed; only end-`user` rows are filtered by `viewer.projectId`. */
   const allUsers = useMemo(() => {
     if (!data) return [];
-    const pid = viewer?.projectId?.trim();
+    const pid  = viewer?.projectId?.trim();
     const devs = data.developers ?? [];
     if (!pid) return [...devs, ...data.users];
-    const usersInProject = data.users.filter(u => u.project === pid);
-    return [...devs, ...usersInProject];
+    return [...devs, ...data.users.filter(u => u.project === pid)];
   }, [data, viewer?.projectId]);
 
   const effectiveViewerBlocked = useMemo(() => {
@@ -389,435 +473,372 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
     return rec?.viewerBlocked === true;
   }, [widgetConfig, viewer?.uid, data]);
 
-  const viewerIsDev  = widgetConfig?.viewerType === 'developer';
-  const viewerUid    = widgetConfig?.viewerUid;
+  const viewerIsDev = widgetConfig?.viewerType === 'developer';
+  const viewerUid   = widgetConfig?.viewerUid;
 
   const filteredUsers = screen === 'user-list'
     ? allUsers.filter(u => {
-        if (userListCtx === 'support') {
-          if (viewerIsDev) return u.type === 'user';
-          return u.type === 'developer';
-        }
-        if (viewerIsDev) {
-          return u.type === 'developer' && u.uid !== viewerUid;
-        }
+        if (userListCtx === 'support') return viewerIsDev ? u.type === 'user' : u.type === 'developer';
+        if (viewerIsDev) return u.type === 'developer' && u.uid !== viewerUid;
         return u.type === 'user';
       })
     : [];
 
   const otherDevelopers = useMemo(
     () => allUsers.filter(u => u.type === 'developer' && u.uid !== viewerUid),
-    [allUsers, viewerUid],
-  );
-  const blockedUsers  = allUsers.filter(u => blockedUids.includes(u.uid));
-
-  const totalUnread = useMemo(
-    () => recentChats.reduce((sum, c) => sum + Math.max(0, c.unread ?? 0), 0),
-    [recentChats],
+    [allUsers, viewerUid]
   );
-
-  const handleTransferToDeveloper = useCallback((dev: ChatUser) => {
-    if (!activeUser || !widgetConfig) return;
-    const agent = widgetConfig.viewerName?.trim() || 'Agent';
-    const transferNote: ChatMessage = {
-      id:         `tr_${Date.now()}_${Math.random().toString(36).slice(2)}`,
-      senderId:   'me',
-      receiverId: dev.uid,
-      text:       `— ${agent} transferred this conversation from ${activeUser.name} to ${dev.name} —`,
-      timestamp:  new Date().toISOString(),
-      type:       'text',
-      status:     'sent',
+  const blockedUsers = allUsers.filter(u => blockedUids.includes(u.uid));
+  const totalUnread  = useMemo(() => recentChats.reduce((s, c) => s + Math.max(0, c.unread ?? 0), 0), [recentChats]);
+
+  // ── Panel geometry from display mode ──────────────────────────────────────
+  const geo = useMemo(() =>
+    getPanelGeometry(displayMode, theme.buttonPosition ?? 'bottom-right', ajaxterSettings?.maximized),
+  [displayMode, theme.buttonPosition, ajaxterSettings?.maximized]);
+
+  // Button geometry from Ajaxter minimized config
+  const btnStyle = useMemo((): React.CSSProperties => {
+    const pos = theme.buttonPosition === 'bottom-left' ? { left: 24, right: 'auto' } : { right: 24, left: 'auto' };
+    if (btnType === 'round') {
+      return { position:'fixed', bottom:24, zIndex:9999, ...pos,
+        width:56, height:56, borderRadius:'50%', padding:0,
+        display:'flex', alignItems:'center', justifyContent:'center',
+        backgroundColor: theme.buttonColor, color: theme.buttonTextColor,
+        border:'none', cursor:'pointer', boxShadow:`0 8px 28px ${theme.buttonColor}55`,
+        animation:'cw-btnPop 0.4s cubic-bezier(0.34,1.56,0.64,1)',
+      };
+    }
+    // 'slide' type (pill)
+    const w = minimizedDesktop?.width  ?? 126;
+    const h = minimizedDesktop?.height ?? 40;
+    return { position:'fixed', bottom:24, zIndex:9999, ...pos,
+      width:w, height:h,
+      borderRadius: `${minimizedDesktop?.borderRadiusTop ?? 150}px ${minimizedDesktop?.borderRadiusBottom ?? 140}px ${minimizedDesktop?.borderRadiusBottom ?? 140}px ${minimizedDesktop?.borderRadiusTop ?? 150}px`,
+      display:'flex', alignItems:'center', justifyContent:'center', gap:8, padding:'0 16px',
+      backgroundColor: theme.buttonColor, color: theme.buttonTextColor,
+      border:'none', cursor:'pointer', fontSize:13, fontWeight:700,
+      boxShadow:`0 8px 28px ${theme.buttonColor}55`,
+      animation:'cw-btnPop 0.4s cubic-bezier(0.34,1.56,0.64,1)',
     };
-    selectUser(dev, [...messages, transferNote]);
-  }, [activeUser, messages, selectUser, widgetConfig]);
+  }, [btnType, theme, minimizedDesktop]);
 
-  /* Position */
   const posStyle: React.CSSProperties = theme.buttonPosition === 'bottom-left'
-    ? { left: 24, right: 'auto' }
-    : { right: 24, left: 'auto' };
-
-  /* No radius on top-left / bottom-left; left-docked panel keeps inner TR/BR curve */
-  const drawerPosStyle: React.CSSProperties =
-    theme.buttonPosition === 'bottom-left'
-      ? {
-          left: 0,
-          borderTopLeftRadius: 0,
-          borderBottomLeftRadius: 0,
-          borderTopRightRadius: 16,
-          borderBottomRightRadius: 16,
-        }
-      : {
-          right: 0,
-          borderTopLeftRadius: 0,
-          borderBottomLeftRadius: 0,
-        };
+    ? { left: 24, right: 'auto' } : { right: 24, left: 'auto' };
 
-  /* ── Don't render until mounted (SSR safe) ──────────────────────────── */
   if (!mounted) return null;
 
+  // Inline mode — always "open", no floating button
+  if (displayMode === 'inline') {
+    return (
+      <ErrorBoundary primaryColor={primaryColor}>
+        <style>{GLOBAL_STYLES(agentBg, visitorBg, headerBg)}</style>
+        {widgetConfig && !cfgLoading && !cfgError && (
+          <WidgetContent
+            {...contentProps()} widgetConfig={widgetConfig} primaryColor={primaryColor}
+            agentBg={agentBg} visitorBg={visitorBg}
+            panelStyle={geo.panel} isClosable={false}
+          />
+        )}
+      </ErrorBoundary>
+    );
+  }
+
+  // Helper to collect all props for WidgetContent
+  function contentProps() {
+    return {
+      screen, activeTab, userListCtx, viewingTicketId, listEntranceAnimation,
+      tickets, recentChats, blockedUsers, blockedUids, filteredUsers,
+      otherDevelopers, allUsers, messages, activeUser, isPaused, isReported,
+      isBlocked, callSession, localVideoRef, remoteVideoRef,
+      effectiveViewerBlocked, permissionsOk, messageSoundEnabled, typingUsers,
+      viewerIsDev, apiKey, totalUnread,
+      onClose: closeDrawer,
+      onTabChange: handleTabChange, onCardClick: handleCardClick,
+      onNavFromMenu: handleNavFromMenu, onSelectUser: handleSelectUser,
+      onBackFromChat: handleBackFromChat, onOpenTicket: handleOpenTicket,
+      onSend: sendMessage, onTogglePause: handleTogglePause, onReport: _reportChat,
+      onBlock: handleBlock, onUnblock: handleUnblock,
+      onStartCall: handleStartCall, onEndCall: handleEndCall, onMinimizeCall: minimizeCall,
+      onToggleMute: toggleMute, onToggleCamera: toggleCamera,
+      onRaiseTicket: handleRaiseTicket, onTransfer: handleTransferToDeveloper,
+      onAddParticipant: handleAddParticipant, onToggleMessageSound: toggleMessageSound,
+      setScreen, setActiveTab, setViewingTicketId, setListEntranceAnimation,
+      listCtxForUser,
+    };
+  }
+
   return (
-    <>
-      {/* ── Global styles ── */}
-      <style>{`
-        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
-
-        .cw-root * { box-sizing: border-box; font-family: 'DM Sans', 'Segoe UI', sans-serif; }
-
-        @keyframes cw-slideInRight  { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
-        @keyframes cw-slideOutRight { from { transform: translateX(0); opacity: 1; }    to { transform: translateX(100%); opacity: 0; } }
-        @keyframes cw-slideInLeft   { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
-        @keyframes cw-slideOutLeft  { from { transform: translateX(0); opacity: 1; }    to { transform: translateX(-100%); opacity: 0; } }
-        @keyframes cw-fadeUp  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-        @keyframes cw-slideIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
-        @keyframes cw-pulse   { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
-        @keyframes cw-btnPop  { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
-
-        .cw-scroll::-webkit-scrollbar        { width: 4px; }
-        .cw-scroll::-webkit-scrollbar-track  { background: transparent; }
-        .cw-scroll::-webkit-scrollbar-thumb  { background: #e0e0e0; border-radius: 4px; }
-
-        .cw-drawer-enter { animation: ${theme.buttonPosition === 'bottom-left' ? 'cw-slideInLeft' : 'cw-slideInRight'} 0.32s cubic-bezier(0.22,1,0.36,1) both; }
-        .cw-drawer-exit  { animation: ${theme.buttonPosition === 'bottom-left' ? 'cw-slideOutLeft' : 'cw-slideOutRight'} 0.28s cubic-bezier(0.55,0,1,0.45) both; }
-
-        .cw-drawer-panel {
-          width: 30%;
-          max-width: 100vw;
-          min-width: 0;
-        }
-        @media (max-width: 1024px) {
-          .cw-drawer-panel { width: 100%; }
-        }
-      `}</style>
+    <ErrorBoundary primaryColor={primaryColor}>
+      <style>{GLOBAL_STYLES(agentBg, visitorBg, headerBg)}</style>
+
+      {/* Socket status indicator */}
+      {socketStatus !== 'connected' && socketStatus !== 'disconnected' && isOpen && (
+        <div style={{
+          position:'fixed', bottom:80, ...posStyle, zIndex:9996,
+          background: socketStatus === 'connecting' ? '#f59e0b' : '#ef4444',
+          color:'#fff', fontSize:11, fontWeight:700,
+          padding:'3px 10px', borderRadius:20,
+        }}>
+          {socketStatus === 'connecting' ? '● Connecting…' : '● Offline'}
+        </div>
+      )}
 
-      {/* ── Minimized call bar (drawer closed, call still active) ── */}
+      {/* Mini call bar */}
       {!isOpen && callMinimized && callInProgress && callSession.peer && (
-        <MiniCallBar
-          session={callSession}
-          primaryColor={primaryColor}
-          buttonPosition={theme.buttonPosition}
-          onExpand={openDrawer}
-          onEnd={handleEndCall}
-        />
+        <MiniCallBar session={callSession} primaryColor={primaryColor}
+          buttonPosition={theme.buttonPosition} onExpand={openDrawer} onEnd={handleEndCall} />
       )}
 
-      {/* ── Floating Button (unread badge + tooltip when closed) ── */}
+      {/* Floating button */}
       {!isOpen && (
-        <button
-          className="cw-root"
-          type="button"
-          onClick={openDrawer}
+        <button className="cw-root" type="button" onClick={openDrawer}
           aria-label={totalUnread > 0 ? `${theme.buttonLabel}, ${totalUnread} unread` : theme.buttonLabel}
-          title={totalUnread > 0 ? `${totalUnread} unread message${totalUnread === 1 ? '' : 's'}` : theme.buttonLabel}
-          style={{
-            position: 'fixed', bottom: 24, zIndex: 9999,
-            ...posStyle,
-            display: 'flex', alignItems: 'center', gap: 10,
-            padding: '13px 22px',
-            backgroundColor: theme.buttonColor,
-            color: theme.buttonTextColor,
-            border: 'none', borderRadius: 50,
-            cursor: 'pointer', fontSize: 15, fontWeight: 700,
-            boxShadow: `0 8px 28px ${theme.buttonColor}55`,
-            animation: 'cw-btnPop 0.4s cubic-bezier(0.34,1.56,0.64,1)',
-            transition: 'transform 0.2s, box-shadow 0.2s',
-          }}
-          onMouseEnter={e => {
-            (e.currentTarget as HTMLElement).style.transform  = 'scale(1.06) translateY(-2px)';
-            (e.currentTarget as HTMLElement).style.boxShadow = `0 14px 36px ${theme.buttonColor}66`;
-          }}
-          onMouseLeave={e => {
-            (e.currentTarget as HTMLElement).style.transform  = 'scale(1)';
-            (e.currentTarget as HTMLElement).style.boxShadow = `0 8px 28px ${theme.buttonColor}55`;
-          }}
+          style={btnStyle}
+          onMouseEnter={e => { (e.currentTarget as HTMLElement).style.transform = 'scale(1.06) translateY(-2px)'; }}
+          onMouseLeave={e => { (e.currentTarget as HTMLElement).style.transform = 'scale(1)'; }}
         >
-          <span style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
-              <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"
-                stroke={theme.buttonTextColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-            {totalUnread > 0 && (
-              <span
-                style={{
-                  position: 'absolute',
-                  top: -8,
-                  right: -10,
-                  minWidth: 20,
-                  height: 20,
-                  padding: '0 5px',
-                  borderRadius: 999,
-                  background: '#ef4444',
-                  color: '#fff',
-                  fontSize: 11,
-                  fontWeight: 800,
-                  lineHeight: '20px',
-                  textAlign: 'center',
-                  border: '2px solid #fff',
-                  boxSizing: 'border-box',
-                }}
-              >
-                {totalUnread > 99 ? '99+' : totalUnread}
-              </span>
-            )}
-          </span>
-          <span>{theme.buttonLabel}</span>
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+            <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"
+              stroke={theme.buttonTextColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+          {btnType !== 'round' && <span>{theme.buttonLabel}</span>}
+          {totalUnread > 0 && (
+            <span style={{ position:'absolute', top:-6, right:-6,
+              minWidth:18, height:18, padding:'0 4px', borderRadius:999,
+              background:'#ef4444', color:'#fff', fontSize:10, fontWeight:800,
+              lineHeight:'18px', textAlign:'center', border:'2px solid #fff' }}>
+              {totalUnread > 99 ? '99+' : totalUnread}
+            </span>
+          )}
         </button>
       )}
 
-      {/* ── Backdrop (visual only — does not close widget on click) ── */}
-      {isOpen && (
-        <div
-          aria-hidden
-          style={{
-            position: 'fixed', inset: 0, zIndex: 9997,
-            backgroundColor: 'rgba(0,0,0,0.35)',
-            opacity: closing ? 0 : 1,
-            transition: 'opacity 0.3s',
-          }}
-        />
+      {/* Backdrop */}
+      {isOpen && geo.backdrop && (
+        <div aria-hidden style={{
+          ...geo.backdrop,
+          opacity: closing ? 0 : 1, transition: 'opacity 0.3s',
+        }} />
       )}
 
-      {/* ── Drawer / Slider ── */}
+      {/* Panel */}
       {isOpen && (
         <div
-          className={`cw-root cw-drawer-panel ${closing ? 'cw-drawer-exit' : 'cw-drawer-enter'}`}
-          style={{
-            position: 'fixed',
-            top: 0,
-            bottom: 0,
-            ...drawerPosStyle,
-            zIndex: 9998,
-            backgroundColor: '#fff',
-            boxShadow: theme.buttonPosition === 'bottom-left'
-              ? '4px 0 40px rgba(0,0,0,0.18)'
-              : '-4px 0 40px rgba(0,0,0,0.18)',
-            display: 'flex',
-            flexDirection: 'column',
-            overflow: 'hidden',
-          }}
+          className={`cw-root ${closing ? geo.exitClass : geo.enterClass}`}
+          style={geo.panel}
         >
-          {/* ── Loading state ── */}
           {cfgLoading && (
-            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 16 }}>
-              <div style={{
-                width: 40, height: 40, borderRadius: '50%',
-                border: `3px solid ${primaryColor}30`,
-                borderTopColor: primaryColor,
-                animation: 'spin 0.8s linear infinite',
-              }} />
-              <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
-              <p style={{ fontSize: 14, color: '#7b8fa1' }}>Loading chat…</p>
+            <div style={{ display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', height:'100%', gap:16 }}>
+              <div style={{ width:40, height:40, borderRadius:'50%', border:`3px solid ${primaryColor}30`, borderTopColor:primaryColor, animation:'spin 0.8s linear infinite' }} />
+              <p style={{ fontSize:14, color:'#7b8fa1' }}>Loading chat…</p>
             </div>
           )}
-
-          {/* ── Error state ── */}
           {cfgError && !cfgLoading && (
-            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 12, padding: 32, textAlign: 'center' }}>
-              <div style={{ fontSize: 40 }}>⚠️</div>
-              <p style={{ fontWeight: 700, color: '#1a2332' }}>Could not load chat configuration</p>
-              <p style={{ fontSize: 13, color: '#7b8fa1', lineHeight: 1.6 }}>{cfgError}</p>
-              <button onClick={closeDrawer} style={{ padding: '9px 20px', borderRadius: 10, border: 'none', background: primaryColor, color: '#fff', cursor: 'pointer', fontWeight: 700 }}>Close</button>
+            <div style={{ display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', height:'100%', gap:12, padding:32, textAlign:'center' }}>
+              <div style={{ fontSize:40 }}>⚠️</div>
+              <p style={{ fontWeight:700, color:'#1a2332' }}>Could not load chat</p>
+              <p style={{ fontSize:13, color:'#7b8fa1' }}>{cfgError}</p>
+              <button onClick={closeDrawer} style={{ padding:'9px 20px', borderRadius:10, border:'none', background:primaryColor, color:'#fff', cursor:'pointer', fontWeight:700 }}>Close</button>
             </div>
           )}
-
-          {/* ── Main content ── */}
           {!cfgLoading && !cfgError && widgetConfig && (
-            <>
-              {/* Resize + Close controls — hidden on blocked screen (Close is in-panel) */}
-              {screen !== 'chat' && screen !== 'call' && !effectiveViewerBlocked && (
-                <div style={{
-                  position: 'absolute', top: 12,
-                  right: theme.buttonPosition === 'bottom-left' ? 'auto' : 12,
-                  left:  theme.buttonPosition === 'bottom-left' ? 12    : 'auto',
-                  zIndex: 20, display: 'flex', gap: 6,
-                }}>
-                  <CornerBtn onClick={closeDrawer} title="Close">
-                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
-                      <path d="M18 6L6 18M6 6l12 12" stroke="#fff" strokeWidth="2.5" strokeLinecap="round"/>
-                    </svg>
-                  </CornerBtn>
-                </div>
-              )}
-
-              {/* ── MAINTENANCE ── */}
-              {widgetConfig.status === 'MAINTENANCE' && (
-                <MaintenanceView primaryColor={primaryColor} />
-              )}
-
-              {/* ── DISABLED ── */}
-              {widgetConfig.status === 'DISABLE' && (
-                <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' }}>Chat is disabled</p>
-                  <button onClick={closeDrawer} style={{ padding:'9px 20px',borderRadius:10,border:'none',background:primaryColor,color:'#fff',cursor:'pointer',fontWeight:700 }}>Close</button>
-                </div>
-              )}
-
-              {/* ── ACTIVE: viewer spam-blocked (no chat/tickets UI) ── */}
-              {widgetConfig.status === 'ACTIVE' && effectiveViewerBlocked && (
-                <ViewerBlockedScreen config={widgetConfig} apiKey={apiKey} onClose={closeDrawer} />
-              )}
-
-              {/* ── ACTIVE: microphone, location, screen share required ── */}
-              {widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && !permissionsOk && (
-                <PermissionsGateScreen
-                  primaryColor={primaryColor}
-                  widgetId={widgetConfig.id}
-                  onGranted={() => setPermissionsOk(true)}
-                />
-              )}
-
-              {/* ── ACTIVE ── */}
-              {widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && permissionsOk && (
-                <div className="cw-scroll" style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
-
-                  {screen === 'home' && (
-                    <HomeScreen
-                      config={widgetConfig}
-                      apiKey={apiKey}
-                      onNavigate={handleCardClick}
-                      onOpenTicket={handleOpenTicket}
-                      tickets={tickets}
-                    />
-                  )}
-
-                  {screen === 'user-list' && (
-                    <UserListScreen
-                      context={userListCtx}
-                      users={filteredUsers}
-                      primaryColor={primaryColor}
-                      viewerType={widgetConfig.viewerType ?? 'user'}
-                      onBack={() => { setListEntranceAnimation(false); setScreen('home'); }}
-                      onSelectUser={handleSelectUser}
-                      onBlockList={userListCtx === 'conversation' ? () => setScreen('block-list') : undefined}
-                      useHomeHeader={userListCtx === 'support' && widgetConfig.viewerType !== 'developer'}
-                      animateEntrance={listEntranceAnimation}
-                    />
-                  )}
-
-                  {screen === 'chat' && activeUser && (
-                    <ChatScreen
-                      activeUser={activeUser}
-                      messages={messages}
-                      config={widgetConfig}
-                      isPaused={isPaused}
-                      isReported={isReported}
-                      isBlocked={isBlocked}
-                      onSend={sendMessage}
-                      onBack={handleBackFromChat}
-                      onClose={closeDrawer}
-                      onTogglePause={handleTogglePause}
-                      onReport={reportChat}
-                      onBlock={handleBlock}
-                      onStartCall={handleStartCall}
-                      onNavAction={handleNavFromMenu}
-                      otherDevelopers={otherDevelopers}
-                      onTransferToDeveloper={handleTransferToDeveloper}
-                      messageSoundEnabled={messageSoundEnabled}
-                      onToggleMessageSound={toggleMessageSound}
-                    />
-                  )}
-
-                  {screen === 'call' && callSession.peer && (
-                    <CallScreen
-                      session={callSession}
-                      localVideoRef={localVideoRef}
-                      remoteVideoRef={remoteVideoRef}
-                      onEnd={handleEndCall}
-                      onToggleMute={toggleMute}
-                      onToggleCamera={toggleCamera}
-                      primaryColor={primaryColor}
-                      onMinimize={minimizeCall}
-                    />
-                  )}
-
-                  {screen === 'recent-chats' && (
-                    <RecentChatsScreen
-                      chats={recentChats}
-                      config={widgetConfig}
-                      onSelectChat={u => handleSelectUser(u, listCtxForUser(u, viewerIsDev))}
-                      animateEntrance={listEntranceAnimation}
-                    />
-                  )}
-
-                  {screen === 'tickets' && (
-                    <TicketScreen
-                      tickets={tickets}
-                      config={widgetConfig}
-                      onNewTicket={() => { setListEntranceAnimation(false); setScreen('ticket-new'); }}
-                      onSelectTicket={id => {
-                        setListEntranceAnimation(false);
-                        setViewingTicketId(id);
-                        setScreen('ticket-detail');
-                      }}
-                      animateEntrance={listEntranceAnimation}
-                    />
-                  )}
-
-                  {screen === 'ticket-new' && (
-                    <TicketFormScreen
-                      config={widgetConfig}
-                      onSubmit={handleRaiseTicket}
-                      onCancel={() => setScreen('tickets')}
-                    />
-                  )}
-
-                  {screen === 'ticket-detail' && viewingTicketId && (
-                    (() => {
-                      const t = tickets.find(x => x.id === viewingTicketId);
-                      return t ? (
-                        <TicketDetailScreen
-                          ticket={t}
-                          config={widgetConfig}
-                          onBack={() => { setViewingTicketId(null); setScreen('tickets'); }}
-                        />
-                      ) : null;
-                    })()
-                  )}
-
-                  {screen === 'block-list' && (
-                    <BlockListScreen
-                      blockedUsers={blockedUsers}
-                      config={widgetConfig}
-                      onUnblock={handleUnblock}
-                      onBack={() => { setScreen('home'); setActiveTab('home'); }}
-                    />
-                  )}
-                </div>
-              )}
-
-              {/* ── Bottom Tabs (hidden during chat/call/user-list/block-list) ── */}
-              {widgetConfig.status === 'ACTIVE' &&
-               !effectiveViewerBlocked &&
-               permissionsOk &&
-               screen !== 'chat' &&
-               screen !== 'call' &&
-               screen !== 'user-list' &&
-               screen !== 'block-list' &&
-               screen !== 'ticket-detail' &&
-               screen !== 'ticket-new' && (
-                <BottomTabs
-                  active={activeTab}
-                  onChange={handleTabChange}
-                  primaryColor={primaryColor}
-                />
-              )}
-            </>
+            <ErrorBoundary primaryColor={primaryColor}>
+              <WidgetContent
+                {...contentProps()} widgetConfig={widgetConfig} primaryColor={primaryColor}
+                agentBg={agentBg} visitorBg={visitorBg}
+                panelStyle={{}} isClosable={true}
+              />
+            </ErrorBoundary>
           )}
         </div>
       )}
-    </>
+    </ErrorBoundary>
   );
 };
 
 export default ChatWidget;
 
-/* ── Tiny corner button ────────────────────────────────────────────────────── */
-const CornerBtn: React.FC<{ onClick: () => void; title: string; children: React.ReactNode }> = ({ onClick, title, children }) => (
-  <button onClick={onClick} title={title} style={{
-    width: 26, height: 26, borderRadius: '50%',
-    background: 'rgba(0,0,0,0.25)', border: 'none',
-    display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
-  }}>
-    {children}
-  </button>
-);
+// ─── WidgetContent — extracted so inline mode can reuse ───────────────────────
+const WidgetContent: React.FC<Record<string, unknown>> = (props: Record<string, unknown>) => {
+  const {
+    screen, activeTab, userListCtx, viewingTicketId, listEntranceAnimation,
+    tickets, recentChats, blockedUsers, filteredUsers, otherDevelopers,
+    messages, activeUser, isPaused, isReported, isBlocked,
+    callSession, localVideoRef, remoteVideoRef,
+    effectiveViewerBlocked, permissionsOk, messageSoundEnabled,
+    viewerIsDev, apiKey, widgetConfig, primaryColor, agentBg, visitorBg,
+    isClosable,
+    onClose, onTabChange, onCardClick, onNavFromMenu, onSelectUser, onBackFromChat,
+    onOpenTicket, onSend, onTogglePause, onReport, onBlock, onUnblock,
+    onStartCall, onEndCall, onMinimizeCall, onToggleMute, onToggleCamera,
+    onRaiseTicket, onTransfer, onToggleMessageSound,
+    setScreen, setActiveTab, setViewingTicketId, setListEntranceAnimation,
+    listCtxForUser,
+  } = props as unknown as {
+    screen: Screen; activeTab: BottomTab; userListCtx: UserListContext;
+    viewingTicketId: string | null; listEntranceAnimation: boolean;
+    tickets: Ticket[]; recentChats: RecentChat[]; blockedUsers: ChatUser[];
+    filteredUsers: ChatUser[]; otherDevelopers: ChatUser[];
+    messages: ChatMessage[]; activeUser: ChatUser | null;
+    isPaused: boolean; isReported: boolean; isBlocked: boolean;
+    callSession: import('../types').CallSession;
+    localVideoRef: React.RefObject<HTMLVideoElement | null>;
+    remoteVideoRef: React.RefObject<HTMLVideoElement | null>;
+    effectiveViewerBlocked: boolean; permissionsOk: boolean; messageSoundEnabled: boolean;
+    viewerIsDev: boolean; apiKey: string; widgetConfig: import('../types').WidgetConfig;
+    primaryColor: string; agentBg: string; visitorBg: string; isClosable: boolean;
+    onClose: () => void; onTabChange: (t: BottomTab) => void;
+    onCardClick: (ctx: UserListContext | 'ticket', opts?: { fromMenu?: boolean }) => void;
+    onNavFromMenu: (ctx: UserListContext | 'ticket') => void;
+    onSelectUser: (u: ChatUser, ctx?: UserListContext) => void;
+    onBackFromChat: () => void; onOpenTicket: (id: string) => void;
+    onSend: (text: string, type?: ChatMessage['type'], extra?: Partial<ChatMessage>) => void;
+    onTogglePause: () => void; onReport: () => void; onBlock: () => void;
+    onUnblock: (uid: string) => void; onStartCall: (v: boolean) => void;
+    onEndCall: () => void; onMinimizeCall: () => void;
+    onToggleMute: () => void; onToggleCamera: () => void;
+    onRaiseTicket: (t: string, d: string, p: Ticket['priority']) => void;
+    onTransfer: (dev: ChatUser) => void; onToggleMessageSound: (e: boolean) => void;
+    setScreen: (s: Screen) => void; setActiveTab: (t: BottomTab) => void;
+    setViewingTicketId: (id: string | null) => void;
+    setListEntranceAnimation: (v: boolean) => void;
+    listCtxForUser: (u: ChatUser, isDev: boolean) => UserListContext;
+  };
+
+  const config = widgetConfig;
+  const callInProgress = callSession.state === 'calling' || callSession.state === 'connected';
+
+  return (
+    <>
+      {/* Close button */}
+      {isClosable && screen !== 'chat' && screen !== 'call' && !effectiveViewerBlocked && (
+        <div style={{ position:'absolute', top:12, right:12, zIndex:20 }}>
+          <button onClick={onClose} title="Close" style={{
+            width:26, height:26, borderRadius:'50%', background:'rgba(0,0,0,0.22)', border:'none',
+            display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer',
+          }}>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
+              <path d="M18 6L6 18M6 6l12 12" stroke="#fff" strokeWidth="2.5" strokeLinecap="round"/>
+            </svg>
+          </button>
+        </div>
+      )}
+
+      {config.status === 'MAINTENANCE' && <MaintenanceView primaryColor={primaryColor} />}
+
+      {config.status === 'DISABLE' && (
+        <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' }}>Chat is disabled</p>
+          {isClosable && <button onClick={onClose} style={{ padding:'9px 20px',borderRadius:10,border:'none',background:primaryColor,color:'#fff',cursor:'pointer',fontWeight:700 }}>Close</button>}
+        </div>
+      )}
+
+      {config.status === 'ACTIVE' && effectiveViewerBlocked && (
+        <ViewerBlockedScreen config={config} apiKey={apiKey} onClose={onClose} />
+      )}
+
+      {config.status === 'ACTIVE' && !effectiveViewerBlocked && !permissionsOk && (
+        <PermissionsGateScreen primaryColor={primaryColor} widgetId={config.id}
+          onGranted={() => { /* setPermissionsOk(true) — hoisted to parent */ }} />
+      )}
+
+      {config.status === 'ACTIVE' && !effectiveViewerBlocked && permissionsOk && (
+        <div className="cw-scroll" style={{ flex:1, display:'flex', flexDirection:'column', overflow:'hidden' }}>
+
+          {screen === 'home' && (
+            <HomeScreen config={config} apiKey={apiKey} onNavigate={onCardClick} onOpenTicket={onOpenTicket} tickets={tickets} />
+          )}
+          {screen === 'user-list' && (
+            <UserListScreen context={userListCtx} users={filteredUsers} primaryColor={primaryColor}
+              viewerType={config.viewerType ?? 'user'}
+              onBack={() => { setListEntranceAnimation(false); setScreen('home'); }}
+              onSelectUser={onSelectUser}
+              onBlockList={userListCtx === 'conversation' ? () => setScreen('block-list') : undefined}
+              useHomeHeader={userListCtx === 'support' && config.viewerType !== 'developer'}
+              animateEntrance={listEntranceAnimation} />
+          )}
+          {screen === 'chat' && activeUser && (
+            <ChatScreen activeUser={activeUser} messages={messages} config={config}
+              isPaused={isPaused} isReported={isReported} isBlocked={isBlocked}
+              onSend={onSend} onBack={onBackFromChat} onClose={onClose}
+              onTogglePause={onTogglePause} onReport={onReport} onBlock={onBlock}
+              onStartCall={onStartCall} onNavAction={onNavFromMenu}
+              otherDevelopers={otherDevelopers} onTransferToDeveloper={onTransfer}
+              messageSoundEnabled={messageSoundEnabled} onToggleMessageSound={onToggleMessageSound} />
+          )}
+          {screen === 'call' && callSession.peer && (
+            <CallScreen session={callSession} localVideoRef={localVideoRef} remoteVideoRef={remoteVideoRef}
+              onEnd={onEndCall} onToggleMute={onToggleMute} onToggleCamera={onToggleCamera}
+              primaryColor={primaryColor} onMinimize={onMinimizeCall} />
+          )}
+          {screen === 'recent-chats' && (
+            <RecentChatsScreen chats={recentChats} config={config}
+              onSelectChat={u => onSelectUser(u, listCtxForUser(u, viewerIsDev))}
+              animateEntrance={listEntranceAnimation} />
+          )}
+          {screen === 'tickets' && (
+            <TicketScreen tickets={tickets} config={config}
+              onNewTicket={() => { setListEntranceAnimation(false); setScreen('ticket-new'); }}
+              onSelectTicket={id => { setListEntranceAnimation(false); setViewingTicketId(id); setScreen('ticket-detail'); }}
+              animateEntrance={listEntranceAnimation} />
+          )}
+          {screen === 'ticket-new' && (
+            <TicketFormScreen config={config} onSubmit={onRaiseTicket} onCancel={() => setScreen('tickets')} />
+          )}
+          {screen === 'ticket-detail' && viewingTicketId && (() => {
+            const t = (tickets as Ticket[]).find(x => x.id === viewingTicketId);
+            return t ? (
+              <TicketDetailScreen ticket={t} config={config}
+                onBack={() => { setViewingTicketId(null); setScreen('tickets'); }} />
+            ) : null;
+          })()}
+          {screen === 'block-list' && (
+            <BlockListScreen blockedUsers={blockedUsers} config={config}
+              onUnblock={onUnblock} onBack={() => { setScreen('home'); setActiveTab('home'); }} />
+          )}
+        </div>
+      )}
+
+      {/* Bottom tabs */}
+      {config.status === 'ACTIVE' && !effectiveViewerBlocked && permissionsOk &&
+       !['chat','call','user-list','block-list','ticket-detail','ticket-new'].includes(screen) && (
+        <BottomTabs active={activeTab} onChange={onTabChange} primaryColor={primaryColor} />
+      )}
+    </>
+  );
+};
+
+// ─── Global CSS ───────────────────────────────────────────────────────────────
+function GLOBAL_STYLES(agentBg: string, visitorBg: string, headerBg: string): string {
+  return `
+    @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
+    .cw-root * { box-sizing:border-box; font-family:'DM Sans','Segoe UI',sans-serif; }
+    @keyframes spin          { to { transform: rotate(360deg); } }
+    @keyframes cw-btnPop     { from { transform:scale(0.8);opacity:0; } to { transform:scale(1);opacity:1; } }
+    @keyframes cw-fadeUp     { from { opacity:0;transform:translateY(10px); } to { opacity:1;transform:translateY(0); } }
+    @keyframes cw-slideIn    { from { opacity:0;transform:translateX(18px); } to { opacity:1;transform:translateX(0); } }
+    @keyframes cw-pulse      { 0%,100%{opacity:1} 50%{opacity:0.4} }
+    @keyframes cw-slideInRight  { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
+    @keyframes cw-slideOutRight { from{transform:translateX(0);opacity:1}    to{transform:translateX(100%);opacity:0} }
+    @keyframes cw-slideInLeft   { from{transform:translateX(-100%);opacity:0} to{transform:translateX(0);opacity:1} }
+    @keyframes cw-slideOutLeft  { from{transform:translateX(0);opacity:1}    to{transform:translateX(-100%);opacity:0} }
+    @keyframes cw-popupEnter { from{transform:translate(-50%,-50%) scale(0.9);opacity:0} to{transform:translate(-50%,-50%) scale(1);opacity:1} }
+    @keyframes cw-popupExit  { from{transform:translate(-50%,-50%) scale(1);opacity:1}  to{transform:translate(-50%,-50%) scale(0.9);opacity:0} }
+    .cw-slideInRight  { animation:cw-slideInRight  0.32s cubic-bezier(0.22,1,0.36,1) both; }
+    .cw-slideOutRight { animation:cw-slideOutRight 0.28s cubic-bezier(0.55,0,1,0.45) both; }
+    .cw-slideInLeft   { animation:cw-slideInLeft   0.32s cubic-bezier(0.22,1,0.36,1) both; }
+    .cw-slideOutLeft  { animation:cw-slideOutLeft  0.28s cubic-bezier(0.55,0,1,0.45) both; }
+    .cw-popup-enter   { animation:cw-popupEnter    0.28s cubic-bezier(0.22,1,0.36,1) both; }
+    .cw-popup-exit    { animation:cw-popupExit     0.22s cubic-bezier(0.55,0,1,0.45) both; }
+    .cw-scroll::-webkit-scrollbar       { width:4px; }
+    .cw-scroll::-webkit-scrollbar-track { background:transparent; }
+    .cw-scroll::-webkit-scrollbar-thumb { background:#e0e0e0; border-radius:4px; }
+    /* Ajaxter theme vars */
+    :root {
+      --cw-agent-bg:   ${agentBg};
+      --cw-visitor-bg: ${visitorBg};
+      --cw-header-bg:  ${headerBg};
+    }
+  `;
+}