ajaxter-chat 3.1.0 → 3.2.0

package/src/components/ChatWidget.tsx

@@ -3,7 +3,7 @@
 import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import {
   ChatWidgetProps, BottomTab, Screen, UserListContext,
-  ChatUser, Ticket, RecentChat, ChatMessage,
+  ChatUser, Ticket, RecentChat, ChatMessage, DisplayMode,
 } from '../types';
 import { loadLocalConfig } from '../config';
 import { mergeTheme } from '../utils/theme';
@@ -31,38 +31,134 @@ import { ViewerBlockedScreen }   from './ViewerBlockedScreen';
 import { PermissionsGateScreen } from './PermissionsGateScreen';
 import { hasStoredPermissionsGrant } from '../utils/widgetPermissions';
 
-/** WebSocket server URL — override via env NEXT_PUBLIC_SOCKET_URL / REACT_APP_SOCKET_URL */
-function getSocketUrl(): string {
-  if (typeof process !== 'undefined' && process.env) {
-    return (
-      process.env['NEXT_PUBLIC_SOCKET_URL'] ??
-      process.env['REACT_APP_SOCKET_URL'] ??
-      'http://localhost:3005'
-    );
+// ─── 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:  '',
+    };
   }
-  return 'http://localhost:3005';
+
+  // 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); }, []);
 
-  const { apiKey, widgetId } = loadLocalConfig();
+  const { apiKey, widgetId, socketUrl } = loadLocalConfig();
   const { data, loading: cfgLoading, error: cfgError } = useRemoteConfig(apiKey, widgetId);
 
   const theme = mergeTheme(
     data?.widget ? {
-      primaryColor: data.widget.primaryColor,
-      buttonLabel:  data.widget.buttonLabel,
+      primaryColor:   data.widget.primaryColor,
+      buttonLabel:    data.widget.buttonLabel,
       buttonPosition: data.widget.buttonPosition,
     } : undefined,
     localTheme,
   );
 
-  const [isOpen,          setIsOpen]          = useState(false);
-  const [closing,         setClosing]         = useState(false);
-  const [callMinimized,   setCallMinimized]   = useState(false);
+  // 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);
+
   const [activeTab,       setActiveTab]       = useState<BottomTab>('home');
   const [screen,          setScreen]          = useState<Screen>('home');
   const [userListCtx,     setUserListCtx]     = useState<UserListContext>('support');
@@ -70,40 +166,33 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
   const [viewingTicketId, setViewingTicketId] = useState<string | null>(null);
   const [messageSoundEnabled, setMessageSoundEnabledState] = useState(true);
   const [listEntranceAnimation, setListEntranceAnimation]  = useState(false);
-  const [permissionsOk,   setPermissionsOk]   = useState(false);
-  const [socketStatus,    setSocketStatus]    = useState<'connecting'|'connected'|'disconnected'|'error'>('disconnected');
+  const [permissionsOk, setPermissionsOk]     = useState(false);
+  const [socketStatus,  setSocketStatus]      = useState<'connecting'|'connected'|'disconnected'|'error'>('disconnected');
+  const [typingUsers,   setTypingUsers]       = useState<Set<string>>(new Set());
 
-  const [tickets,     setTickets]     = useState<Ticket[]>(data?.sampleTickets ?? []);
+  const [tickets,     setTickets]     = useState<Ticket[]>([]);
   const [recentChats, setRecentChats] = useState<RecentChat[]>([]);
-  const [blockedUids, setBlockedUids] = useState<string[]>(data?.blockedUsers ?? []);
+  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]);
 
-  /* ── Socket setup ───────────────────────────────────────────────────── */
+  // ── Socket ────────────────────────────────────────────────────────────────
   const viewerUidForSocket = (viewer?.uid ?? data?.widget?.viewerUid ?? '').trim();
 
   const {
@@ -111,114 +200,95 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
     emitMessage, emitPauseToggle, emitReport,
     emitBlock, emitUnblock, emitTransfer,
     emitCallOffer, emitCallAnswer, emitIceCandidate, emitCallEnd,
-    emitAddParticipant,
+    emitAddParticipant, emitPresence,
+    emitTicketCreate, emitTicketUpdate,
     status: _socketStatus,
   } = useSocket({
     widgetId,
     viewerUid: viewerUidForSocket,
-    serverUrl: getSocketUrl(),
+    serverUrl: socketUrl,
     onMessage: (msg) => {
       receiveMessage(msg);
       if (messageSoundEnabled && msg.senderId !== 'me') playMessageSound();
-      // Update recent chats last message
       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);
-    },
+    onMessageAck: ({ messageId, status }) => { updateMessageStatus(messageId, status); },
     onChatPaused: (_roomId, paused) => {
-      // Sync pause state from remote
-      setRecentChats(prev => prev.map(r =>
-        activeUser && r.user.uid === activeUser.uid ? { ...r, isPaused: paused } : r
+      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) => {
-      // Find peer user
       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);
-      }
-    },
-    onCallAnswer: async (answer, _fromUid, _callId) => {
-      await addIceCandidate({ sdpMid: '0', sdpMLineIndex: 0, candidate: '' });
-      // WebRTC: set remote description
-      void answer;
-    },
-    onIceCandidate: async (candidate) => {
-      await addIceCandidate(candidate);
+      if (peer) { await acceptCall(offer, peer, callId); setScreen('call'); setIsOpen(true); }
     },
     onCallEnd: () => { _endCall(); },
-    onError: (code, message) => {
-      console.error('[ChatWidget] Socket error:', code, message);
-    },
     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 ──────────────────────────────────────────────────────── */
+  // ── Chat hook ─────────────────────────────────────────────────────────────
   const {
     messages, activeUser, isPaused, isReported,
     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); },
+    onEmitMessage: (msg) => emitMessage(msg),
+    onEmitPause:   (roomId, targetUid, paused) => emitPauseToggle(roomId, targetUid, paused),
+    onEmitReport:  (roomId) => emitReport(roomId),
   });
 
-  /* ── WebRTC hook ────────────────────────────────────────────────────── */
+  // ── 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); },
+    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';
+  const callInProgress = callSession.state === 'calling' || callSession.state === 'connected';
+  useEffect(() => { if (!callInProgress) setCallMinimized(false); }, [callInProgress]);
 
-  useEffect(() => {
-    if (!callInProgress) setCallMinimized(false);
-  }, [callInProgress]);
-
-  /* ── Drawer open/close ──────────────────────────────────────────────── */
-  const openDrawer = () => {
-    setClosing(false);
-    setIsOpen(true);
-    setCallMinimized(false);
-  };
+  // ── 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]);
+  }, [persistWidgetState, displayMode]);
 
   useEffect(() => {
     const id = data?.widget?.id;
@@ -226,84 +296,43 @@ 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);
-          // Rejoin socket room
           const roomId = [u.uid, viewerUidForSocket].sort().join('_');
           joinRoom(roomId);
         }
       }
     }
     restoredRef.current = true;
-  }, [data, selectUser, clearChat, viewer?.projectId, viewer?.uid, viewerUidForSocket, joinRoom]);
-
-  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]);
-
   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'); }
@@ -311,8 +340,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
   }, []);
 
   const handleNavFromMenu = useCallback((ctx: UserListContext | 'ticket') => {
-    setListEntranceAnimation(false);
-    clearChat();
+    setListEntranceAnimation(false); clearChat();
     if (ctx === 'ticket') { setActiveTab('tickets'); setScreen('tickets'); }
     else { setUserListCtx(ctx); setScreen('user-list'); }
   }, [clearChat]);
@@ -328,7 +356,6 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
     const history = data?.sampleChats[user.uid] ?? [];
     selectUser(user, history);
     setScreen('chat');
-    // Join socket room for real-time messages
     const roomId = [user.uid, viewerUidForSocket].sort().join('_');
     joinRoom(roomId);
     setRecentChats(prev => {
@@ -340,25 +367,16 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
 
   const handleBackFromChat = useCallback(() => {
     setListEntranceAnimation(false);
-    if (activeUser) {
-      const roomId = [activeUser.uid, viewerUidForSocket].sort().join('_');
-      leaveRoom(roomId);
-    }
-    clearChat();
-    setUserListCtx(chatReturnCtx);
-    setScreen('user-list');
+    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');
   }, []);
 
@@ -368,14 +386,12 @@ 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]);
     emitBlock(activeUser.uid);
-    clearChat();
-    setScreen('block-list');
-    setActiveTab('home');
+    clearChat(); setScreen('block-list'); setActiveTab('home');
   }, [activeUser, clearChat, emitBlock]);
 
   const handleUnblock = useCallback((uid: string) => {
@@ -383,91 +399,62 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
     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
-      ));
-    }
+    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');
+    if (!activeUser) return; _startCall(activeUser, withVideo); setScreen('call');
   }, [activeUser, _startCall]);
 
-  const handleEndCall = useCallback(() => {
-    _endCall();
-    setCallMinimized(false);
-    setScreen('chat');
-  }, [_endCall]);
-
-  const minimizeCall = useCallback(() => {
-    setCallMinimized(true);
-    closeDrawer();
-  }, [closeDrawer]);
+  const handleEndCall = useCallback(() => { _endCall(); setCallMinimized(false); setScreen('chat'); }, [_endCall]);
+  const minimizeCall  = useCallback(() => { setCallMinimized(true); closeDrawer(); }, [closeDrawer]);
 
-  /* ── Derived config (must be declared before callbacks that use it) ── */
+  // ── 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]);
 
-  /* ── Transfer (developer feature) ──────────────────────────────────── */
   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()}_${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',
+      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]);
 
-  /* ── Add participant (developer feature) ────────────────────────────── */
   const handleAddParticipant = useCallback((uid: string) => {
     if (!activeUser) return;
-    const roomId = [activeUser.uid, viewerUidForSocket].sort().join('_');
-    emitAddParticipant(roomId, uid);
+    emitAddParticipant([activeUser.uid, viewerUidForSocket].sort().join('_'), uid);
   }, [activeUser, viewerUidForSocket, emitAddParticipant]);
 
-  /* ── Derived ────────────────────────────────────────────────────────── */
+  // ── Derived ───────────────────────────────────────────────────────────────
   const isBlocked = activeUser ? blockedUids.includes(activeUser.uid) : false;
-
-  const primaryColor = theme.primaryColor;
+  const primaryColor = headerBg;
 
   const allUsers = useMemo(() => {
     if (!data) return [];
@@ -491,9 +478,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
 
   const filteredUsers = screen === 'user-list'
     ? allUsers.filter(u => {
-        if (userListCtx === 'support') {
-          return viewerIsDev ? u.type === 'user' : u.type === 'developer';
-        }
+        if (userListCtx === 'support') return viewerIsDev ? u.type === 'user' : u.type === 'developer';
         if (viewerIsDev) return u.type === 'developer' && u.uid !== viewerUid;
         return u.type === 'user';
       })
@@ -501,330 +486,168 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
 
   const otherDevelopers = useMemo(
     () => allUsers.filter(u => u.type === 'developer' && u.uid !== viewerUid),
-    [allUsers, 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],
-  );
+  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)',
+    };
+  }, [btnType, theme, minimizedDesktop]);
 
   const posStyle: React.CSSProperties = theme.buttonPosition === 'bottom-left'
-    ? { left: 24, right: 'auto' }
-    : { right: 24, left: 'auto' };
-
-  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' };
 
   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 (
     <ErrorBoundary primaryColor={primaryColor}>
-      {/* ── 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; } }
-        @keyframes spin { to { transform: rotate(360deg); } }
-        .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>
-
-      {/* ── Socket status dot (subtle, only visible when not connected) ── */}
-      {socketStatus !== 'connected' && socketStatus !== 'disconnected' && (
+      <style>{GLOBAL_STYLES(agentBg, visitorBg, headerBg)}</style>
+
+      {/* Socket status indicator */}
+      {socketStatus !== 'connected' && socketStatus !== 'disconnected' && isOpen && (
         <div style={{
-          position: 'fixed', bottom: 80, ...posStyle, zIndex: 9996,
+          position:'fixed', bottom:80, ...posStyle, zIndex:9996,
           background: socketStatus === 'connecting' ? '#f59e0b' : '#ef4444',
-          color: '#fff', fontSize: 11, fontWeight: 700,
-          padding: '3px 10px', borderRadius: 20,
-          animation: 'cw-fadeUp 0.3s ease',
+          color:'#fff', fontSize:11, fontWeight:700,
+          padding:'3px 10px', borderRadius:20,
         }}>
           {socketStatus === 'connecting' ? '● Connecting…' : '● Offline'}
         </div>
       )}
 
-      {/* ── Minimized call bar ── */}
+      {/* 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 ── */}
+      {/* 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 ── */}
-      {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 ── */}
+      {/* 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 */}
           {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' }} />
-              <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 */}
           {cfgError && !cfgLoading && (
-            <div style={{ display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',height:'100%',gap:12,padding:32,textAlign:'center' }}>
+            <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>
+              <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 && (
             <ErrorBoundary primaryColor={primaryColor}>
-              {/* Close button */}
-              {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>
-              )}
-
-              {widgetConfig.status === 'MAINTENANCE' && <MaintenanceView primaryColor={primaryColor} />}
-
-              {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>
-              )}
-
-              {widgetConfig.status === 'ACTIVE' && effectiveViewerBlocked && (
-                <ViewerBlockedScreen config={widgetConfig} apiKey={apiKey} onClose={closeDrawer} />
-              )}
-
-              {widgetConfig.status === 'ACTIVE' && !effectiveViewerBlocked && !permissionsOk && (
-                <PermissionsGateScreen
-                  primaryColor={primaryColor}
-                  widgetId={widgetConfig.id}
-                  onGranted={() => setPermissionsOk(true)}
-                />
-              )}
-
-              {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 */}
-              {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} />
-              )}
+              <WidgetContent
+                {...contentProps()} widgetConfig={widgetConfig} primaryColor={primaryColor}
+                agentBg={agentBg} visitorBg={visitorBg}
+                panelStyle={{}} isClosable={true}
+              />
             </ErrorBoundary>
           )}
         </div>
@@ -835,11 +658,187 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
 
 export default ChatWidget;
 
-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};
+    }
+  `;
+}