ajaxter-chat 2.0.1 → 3.0.1

package/src/components/ChatWidget.tsx

@@ -1,57 +1,110 @@
 'use client';
 
-import React, { useState, useEffect, useCallback } from 'react';
-import { ChatWidgetProps, BottomTab, Screen, UserListContext, ChatUser, Ticket } from '../types';
-import { loadChatConfig, buildUserListUrl } from '../config';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { ChatWidgetProps, BottomTab, Screen, UserListContext, ChatUser, Ticket, RecentChat } from '../types';
+import { loadLocalConfig } from '../config';
 import { mergeTheme } from '../utils/theme';
-import { useUsers } from '../hooks/useUsers';
+import { useRemoteConfig } from '../hooks/useRemoteConfig';
 import { useChat } from '../hooks/useChat';
+import { useWebRTC } from '../hooks/useWebRTC';
 
-// Screens
 import { HomeScreen }        from './HomeScreen';
 import { UserListScreen }    from './UserListScreen';
 import { ChatScreen }        from './ChatScreen';
 import { RecentChatsScreen } from './RecentChatsScreen';
 import { TicketScreen }      from './TicketScreen';
+import { BlockListScreen }   from './BlockList';
+import { CallScreen }        from './CallScreen';
 import { MaintenanceView }   from './MaintenanceView';
 import { BottomTabs }        from './Tabs/BottomTabs';
 
-export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme }) => {
-  const [isMounted, setIsMounted]       = useState(false);
-  const [isOpen, setIsOpen]             = useState(false);
-  const [isMaximized, setIsMaximized]   = useState(false);
-  const [activeTab, setActiveTab]       = useState<BottomTab>('home');
-  const [screen, setScreen]             = useState<Screen>('home');
-  const [userListCtx, setUserListCtx]   = useState<UserListContext>('support');
-  const [tickets, setTickets]           = useState<Ticket[]>([]);
-
-  // SSR guard
-  useEffect(() => { setIsMounted(true); }, []);
-
-  const config = loadChatConfig();
-  const t      = mergeTheme(theme);
-  const apiUrl = buildUserListUrl(config);
-
-  // Determine filter based on context
-  const filterType = userListCtx === 'support' ? 'developer' : 'user';
-  const { users, loading, error } = useUsers(
-    apiUrl,
-    filterType,
-    config.status === 'ACTIVE' && screen === 'user-list'
-  );
+/* ─── Drawer width ─────────────────────────────────────────────────────────── */
+const DRAWER_W_NORMAL = 380;
+const DRAWER_W_MAX    = 480;
 
-  const { messages, activeUser, selectUser, sendMessage, clearChat } = useChat();
+export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) => {
+  /* SSR guard */
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => { setMounted(true); }, []);
 
-  // ── Navigation helpers ─────────────────────────────────────────────────────
-  const goHome = useCallback(() => { setScreen('home'); setActiveTab('home'); }, []);
+  /* Env config */
+  const { apiKey, widgetId } = loadLocalConfig();
 
-  const handleTabChange = useCallback((tab: BottomTab) => {
-    setActiveTab(tab);
-    if (tab === 'home')    { setScreen('home');         }
-    if (tab === 'chats')   { setScreen('recent-chats'); }
-    if (tab === 'tickets') { setScreen('tickets');      }
-  }, []);
+  /* Remote config */
+  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
+  );
 
+  /* Drawer open state */
+  const [isOpen,      setIsOpen]      = useState(false);
+  const [isMaximized, setIsMaximized] = useState(false);
+  const [closing,     setClosing]     = useState(false); // for slide-out animation
+
+  /* Navigation */
+  const [activeTab,    setActiveTab]    = useState<BottomTab>('home');
+  const [screen,       setScreen]       = useState<Screen>('home');
+  const [userListCtx,  setUserListCtx]  = useState<UserListContext>('support');
+
+  /* App state */
+  const [tickets,      setTickets]      = useState<Ticket[]>(data?.sampleTickets ?? []);
+  const [recentChats,  setRecentChats]  = useState<RecentChat[]>([]);
+  const [blockedUids,  setBlockedUids]  = useState<string[]>(data?.blockedUsers ?? []);
+
+  /* Sync remote data into local state once loaded */
+  useEffect(() => {
+    if (data) {
+      setTickets(data.sampleTickets);
+      setBlockedUids(data.blockedUsers);
+      // Seed recent chats from sample chats
+      const all = [...(data.developers ?? []), ...(data.users ?? [])];
+      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);
+    }
+  }, [data]);
+
+  /* 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();
+
+  /* ── Drawer open/close with slide animation ───────────────────────────── */
+  const openDrawer = () => {
+    setClosing(false);
+    setIsOpen(true);
+  };
+
+  const closeDrawer = useCallback(() => {
+    setClosing(true);
+    setTimeout(() => {
+      setIsOpen(false);
+      setClosing(false);
+      setScreen('home');
+      setActiveTab('home');
+      clearChat();
+    }, 300);
+  }, [clearChat]);
+
+  /* ── Navigation ──────────────────────────────────────────────────────── */
   const handleCardClick = useCallback((ctx: UserListContext | 'ticket') => {
     if (ctx === 'ticket') {
       setActiveTab('tickets');
@@ -63,235 +116,340 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme }) => {
   }, []);
 
   const handleSelectUser = useCallback((user: ChatUser) => {
-    selectUser(user);
+    // Load history from sample chats if available
+    const history = data?.sampleChats[user.uid] ?? [];
+    selectUser(user, history);
     setScreen('chat');
-  }, [selectUser]);
+    // Update recent chats
+    setRecentChats(prev => {
+      const exists = prev.find(r => r.user.uid === user.uid);
+      if (exists) return prev;
+      return [{ id: `rc_${user.uid}`, user, lastMessage: '', lastTime: new Date().toISOString(), unread: 0, isPaused: false }, ...prev];
+    });
+  }, [data, selectUser]);
 
-  const handleBackFromUserList = useCallback(() => {
-    setScreen('home');
+  const handleTabChange = useCallback((tab: BottomTab) => {
+    setActiveTab(tab);
+    setScreen(tab === 'home' ? 'home' : tab === 'chats' ? 'recent-chats' : 'tickets');
   }, []);
 
-  const handleBackFromChat = useCallback(() => {
+  /* ── Block/Unblock ───────────────────────────────────────────────────── */
+  const handleBlock = useCallback(() => {
+    if (!activeUser) return;
+    setBlockedUids(prev => [...prev, activeUser.uid]);
     clearChat();
-    setScreen('user-list');
-  }, [clearChat]);
+    setScreen('home');
+    setActiveTab('home');
+  }, [activeUser, clearChat]);
+
+  const handleUnblock = useCallback((uid: string) => {
+    setBlockedUids(prev => prev.filter(id => id !== uid));
+  }, []);
 
-  const handleRaiseTicket = useCallback((title: string, description: string) => {
+  /* ── Tickets ─────────────────────────────────────────────────────────── */
+  const handleRaiseTicket = useCallback((title: string, desc: string, priority: Ticket['priority']) => {
     const t: Ticket = {
-      id:          `ticket_${Date.now()}`,
-      title,
-      description,
-      status:      'open',
-      priority:    'medium',
-      createdAt:   new Date(),
-      updatedAt:   new Date(),
+      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 => [t, ...prev]);
   }, []);
 
-  // ── Sizing ─────────────────────────────────────────────────────────────────
-  const normalW  = 380;
-  const normalH  = 560;
-  const maxW     = 480;
-  const maxH     = 720;
+  /* ── Pause sync back into recent chats ──────────────────────────────── */
+  const handleTogglePause = useCallback(() => {
+    togglePause();
+    if (activeUser) {
+      setRecentChats(prev => prev.map(r => r.user.uid === activeUser.uid ? { ...r, isPaused: !isPaused } : r));
+    }
+  }, [togglePause, activeUser, isPaused]);
 
-  const width  = isMaximized ? maxW  : normalW;
-  const height = isMaximized ? maxH  : normalH;
+  /* ── Call ────────────────────────────────────────────────────────────── */
+  const handleStartCall = useCallback((withVideo: boolean) => {
+    if (!activeUser) return;
+    startCall(activeUser, withVideo);
+    setScreen('call');
+  }, [activeUser, startCall]);
 
-  const posStyle: React.CSSProperties = t.buttonPosition === 'bottom-left'
+  const handleEndCall = useCallback(() => {
+    endCall();
+    setScreen('chat');
+  }, [endCall]);
+
+  /* ── Derived ─────────────────────────────────────────────────────────── */
+  const isBlocked      = activeUser ? blockedUids.includes(activeUser.uid) : false;
+  const drawerW        = isMaximized ? DRAWER_W_MAX : DRAWER_W_NORMAL;
+  const widgetConfig   = data?.widget;
+  const primaryColor   = theme.primaryColor;
+
+  const allUsers     = data ? [...data.developers, ...data.users]     : [];
+  const filteredUsers = screen === 'user-list'
+    ? allUsers.filter(u => userListCtx === 'support' ? u.type === 'developer' : u.type === 'user')
+    : [];
+  const blockedUsers  = allUsers.filter(u => blockedUids.includes(u.uid));
+
+  /* Position */
+  const posStyle: React.CSSProperties = theme.buttonPosition === 'bottom-left'
     ? { left: 24, right: 'auto' }
     : { right: 24, left: 'auto' };
 
-  if (!isMounted)            return null;
-  if (config.status === 'DISABLE') return null;
+  const drawerPosStyle: React.CSSProperties = theme.buttonPosition === 'bottom-left'
+    ? { left: 0, borderRadius: '0 16px 16px 0' }
+    : { right: 0, borderRadius: '16px 0 0 16px' };
+
+  /* ── Don't render until mounted (SSR safe) ──────────────────────────── */
+  if (!mounted) return null;
 
   return (
     <>
-      {/* ── Global keyframes ── */}
+      {/* ── Global styles ── */}
       <style>{`
         @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
-        @keyframes cw-fadeUp {
-          from { opacity:0; transform:translateY(10px); }
-          to   { opacity:1; transform:translateY(0);    }
-        }
-        @keyframes cw-slideInRight {
-          from { opacity:0; transform:translateX(18px); }
-          to   { opacity:1; transform:translateX(0);    }
-        }
-        @keyframes cw-popIn {
-          from { opacity:0; transform:scale(0.88) translateY(16px); }
-          to   { opacity:1; transform:scale(1)    translateY(0);    }
-        }
-        .cw-scrollbar::-webkit-scrollbar { width:4px; }
-        .cw-scrollbar::-webkit-scrollbar-track { background:transparent; }
-        .cw-scrollbar::-webkit-scrollbar-thumb { background:#e0e0e0; border-radius:4px; }
+
+        .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; }
       `}</style>
 
       {/* ── Floating Button ── */}
-      <button
-        onClick={() => setIsOpen(o => !o)}
-        aria-label={isOpen ? 'Close chat' : t.buttonLabel}
-        style={{
-          position: 'fixed',
-          bottom: 24,
-          ...posStyle,
-          zIndex: 9999,
-          display: 'flex', alignItems: 'center', gap: 10,
-          padding: isOpen ? '14px' : '13px 22px',
-          backgroundColor: t.buttonColor,
-          color: t.buttonTextColor,
-          border: 'none', borderRadius: 50,
-          cursor: 'pointer',
-          fontFamily: t.fontFamily,
-          fontSize: '15px', fontWeight: 700,
-          boxShadow: `0 8px 28px ${t.buttonColor}55`,
-          transition: 'all 0.3s cubic-bezier(0.34,1.56,0.64,1)',
-          transform: isOpen ? 'scale(0.94)' : 'scale(1)',
-          minWidth: isOpen ? 50 : 'auto',
-          justifyContent: 'center',
-        }}
-        onMouseEnter={e => {
-          if (!isOpen) {
-            (e.currentTarget as HTMLElement).style.transform = 'scale(1.06) translateY(-2px)';
-            (e.currentTarget as HTMLElement).style.boxShadow = `0 12px 36px ${t.buttonColor}77`;
-          }
-        }}
-        onMouseLeave={e => {
-          (e.currentTarget as HTMLElement).style.transform = isOpen ? 'scale(0.94)' : 'scale(1)';
-          (e.currentTarget as HTMLElement).style.boxShadow = `0 8px 28px ${t.buttonColor}55`;
-        }}
-      >
-        {isOpen
-          ? <CloseIcon color={t.buttonTextColor} />
-          : <><ChatBubbleIcon color={t.buttonTextColor} /><span>{t.buttonLabel}</span></>
-        }
-      </button>
-
-      {/* ── Chat Window ── */}
+      {!isOpen && (
+        <button
+          className="cw-root"
+          onClick={openDrawer}
+          aria-label={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`;
+          }}
+        >
+          <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>
+          <span>{theme.buttonLabel}</span>
+        </button>
+      )}
+
+      {/* ── Backdrop (mobile) ── */}
       {isOpen && (
         <div
+          onClick={closeDrawer}
+          style={{
+            position: 'fixed', inset: 0, zIndex: 9997,
+            backgroundColor: 'rgba(0,0,0,0.35)',
+            opacity: closing ? 0 : 1,
+            transition: 'opacity 0.3s',
+          }}
+        />
+      )}
+
+      {/* ── Drawer / Slider ── */}
+      {isOpen && (
+        <div
+          className={`cw-root ${closing ? 'cw-drawer-exit' : 'cw-drawer-enter'}`}
           style={{
             position: 'fixed',
-            bottom: 86,
-            ...posStyle,
+            top: 0,
+            bottom: 0,
+            ...drawerPosStyle,
             zIndex: 9998,
-            width,
-            height,
-            maxWidth:  'calc(100vw - 32px)',
-            maxHeight: 'calc(100vh - 110px)',
+            width: drawerW,
+            maxWidth: '100vw',
             backgroundColor: '#fff',
-            borderRadius: t.borderRadius,
-            boxShadow: '0 20px 70px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.08)',
+            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',
-            fontFamily: t.fontFamily,
-            animation: 'cw-popIn 0.3s cubic-bezier(0.34,1.56,0.64,1)',
-            transition: 'width 0.3s ease, height 0.3s ease',
+            transition: 'width 0.28s ease',
           }}
         >
-          {/* Resize toggle button */}
-          {screen !== 'chat' && (
-            <button
-              onClick={() => setIsMaximized(m => !m)}
-              title={isMaximized ? 'Minimize' : 'Maximize'}
-              style={{
-                position: 'absolute', top: 12, right: 48, zIndex: 10,
-                background: 'rgba(255,255,255,0.22)', border: 'none', borderRadius: '50%',
-                width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                cursor: 'pointer', transition: 'background 0.15s',
-              }}
-              onMouseEnter={e => (e.currentTarget as HTMLElement).style.background = 'rgba(255,255,255,0.38)'}
-              onMouseLeave={e => (e.currentTarget as HTMLElement).style.background = 'rgba(255,255,255,0.22)'}
-            >
-              {isMaximized
-                ? <MinimizeIcon />
-                : <MaximizeIcon />
-              }
-            </button>
+          {/* ── 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>
           )}
 
-          {/* Close button (top-right X) */}
-          {screen !== 'chat' && (
-            <button
-              onClick={() => setIsOpen(false)}
-              title="Close"
-              style={{
-                position: 'absolute', top: 12, right: 12, zIndex: 10,
-                background: 'rgba(255,255,255,0.22)', border: 'none', borderRadius: '50%',
-                width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                cursor: 'pointer',
-              }}
-            >
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
-                <path d="M18 6L6 18M6 6l12 12" stroke="#fff" strokeWidth="2.5" strokeLinecap="round"/>
-              </svg>
-            </button>
+          {/* ── 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>
           )}
 
-          {/* ── Screen Router ── */}
-          <div className="cw-scrollbar" style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
-
-            {config.status === 'MAINTENANCE' && (
-              <MaintenanceView primaryColor={t.primaryColor} fontFamily={t.fontFamily} />
-            )}
-
-            {config.status === 'ACTIVE' && (
-              <>
-                {screen === 'home' && (
-                  <HomeScreen config={config} theme={theme} onNavigate={handleCardClick} />
-                )}
-
-                {screen === 'user-list' && (
-                  <UserListScreen
-                    context={userListCtx}
-                    users={users}
-                    loading={loading}
-                    error={error}
-                    theme={theme}
-                    onBack={handleBackFromUserList}
-                    onSelectUser={handleSelectUser}
-                  />
-                )}
-
-                {screen === 'chat' && activeUser && (
-                  <ChatScreen
-                    activeUser={activeUser}
-                    messages={messages}
-                    onSend={sendMessage}
-                    onBack={handleBackFromChat}
-                    onClose={() => setIsOpen(false)}
-                    theme={theme}
-                  />
-                )}
-
-                {screen === 'recent-chats' && (
-                  <RecentChatsScreen
-                    chats={[]}
-                    theme={theme}
-                    onSelectChat={handleSelectUser}
-                  />
-                )}
-
-                {screen === 'tickets' && (
-                  <TicketScreen
-                    tickets={tickets}
-                    theme={theme}
-                    onRaiseTicket={handleRaiseTicket}
-                  />
-                )}
-              </>
-            )}
-          </div>
-
-          {/* ── Bottom Tabs (hidden in chat screen) ── */}
-          {screen !== 'chat' && screen !== 'user-list' && config.status !== 'MAINTENANCE' && (
-            <BottomTabs
-              active={activeTab}
-              onChange={handleTabChange}
-              primaryColor={t.primaryColor}
-              fontFamily={t.fontFamily}
-            />
+          {/* ── Main content ── */}
+          {!cfgLoading && !cfgError && widgetConfig && (
+            <>
+              {/* Resize + Close controls — shown outside chat/call screens */}
+              {screen !== 'chat' && screen !== 'call' && (
+                <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={() => setIsMaximized(m => !m)} title={isMaximized ? 'Minimize' : 'Maximize'}>
+                    {isMaximized
+                      ? <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M8 3v5H3M21 8h-5V3M3 16h5v5M16 21v-5h5" stroke="#fff" strokeWidth="2.2" strokeLinecap="round"/></svg>
+                      : <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M8 3H5a2 2 0 00-2 2v3M21 8V5a2 2 0 00-2-2h-3M3 16v3a2 2 0 002 2h3M16 21h3a2 2 0 002-2v-3" stroke="#fff" strokeWidth="2.2" strokeLinecap="round"/></svg>
+                    }
+                  </CornerBtn>
+                  <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 ── */}
+              {widgetConfig.status === 'ACTIVE' && (
+                <div className="cw-scroll" style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+
+                  {screen === 'home' && (
+                    <HomeScreen config={widgetConfig} onNavigate={handleCardClick} />
+                  )}
+
+                  {screen === 'user-list' && (
+                    <UserListScreen
+                      context={userListCtx}
+                      users={filteredUsers}
+                      primaryColor={primaryColor}
+                      onBack={() => setScreen('home')}
+                      onSelectUser={handleSelectUser}
+                    />
+                  )}
+
+                  {screen === 'chat' && activeUser && (
+                    <ChatScreen
+                      activeUser={activeUser}
+                      messages={messages}
+                      config={widgetConfig}
+                      isPaused={isPaused}
+                      isReported={isReported}
+                      isBlocked={isBlocked}
+                      onSend={sendMessage}
+                      onBack={() => { clearChat(); setScreen('home'); setActiveTab('home'); }}
+                      onClose={closeDrawer}
+                      onTogglePause={handleTogglePause}
+                      onReport={reportChat}
+                      onBlock={handleBlock}
+                      onStartCall={handleStartCall}
+                    />
+                  )}
+
+                  {screen === 'call' && callSession.peer && (
+                    <CallScreen
+                      session={callSession}
+                      localVideoRef={localVideoRef}
+                      remoteVideoRef={remoteVideoRef}
+                      onEnd={handleEndCall}
+                      onToggleMute={toggleMute}
+                      onToggleCamera={toggleCamera}
+                      primaryColor={primaryColor}
+                    />
+                  )}
+
+                  {screen === 'recent-chats' && (
+                    <RecentChatsScreen
+                      chats={recentChats}
+                      config={widgetConfig}
+                      onSelectChat={handleSelectUser}
+                    />
+                  )}
+
+                  {screen === 'tickets' && (
+                    <TicketScreen
+                      tickets={tickets}
+                      config={widgetConfig}
+                      onRaiseTicket={handleRaiseTicket}
+                    />
+                  )}
+
+                  {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' &&
+               screen !== 'chat' &&
+               screen !== 'call' &&
+               screen !== 'user-list' &&
+               screen !== 'block-list' && (
+                <BottomTabs
+                  active={activeTab}
+                  onChange={handleTabChange}
+                  primaryColor={primaryColor}
+                  onBlockList={() => setScreen('block-list')}
+                />
+              )}
+            </>
           )}
         </div>
       )}
@@ -301,27 +459,13 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme }) => {
 
 export default ChatWidget;
 
-// ── Tiny SVG icons ─────────────────────────────────────────────────────────────
-const ChatBubbleIcon: React.FC<{ color: string }> = ({ color }) => (
-  <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={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </svg>
-);
-const CloseIcon: React.FC<{ color: string }> = ({ color }) => (
-  <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
-    <path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="2.5" strokeLinecap="round"/>
-  </svg>
-);
-const MaximizeIcon = () => (
-  <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
-    <path d="M8 3H5a2 2 0 00-2 2v3M21 8V5a2 2 0 00-2-2h-3M3 16v3a2 2 0 002 2h3M16 21h3a2 2 0 002-2v-3"
-      stroke="#fff" strokeWidth="2.2" strokeLinecap="round"/>
-  </svg>
-);
-const MinimizeIcon = () => (
-  <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
-    <path d="M8 3v5H3M21 8h-5V3M3 16h5v5M16 21v-5h5"
-      stroke="#fff" strokeWidth="2.2" strokeLinecap="round"/>
-  </svg>
+/* ── 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>
 );