ajaxter-chat 2.0.1 → 3.0.3

package/dist/hooks/useWebRTC.js

@@ -0,0 +1,112 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+const ICE_SERVERS = [
+    { urls: 'stun:stun.l.google.com:19302' },
+    { urls: 'stun:stun1.l.google.com:19302' },
+];
+export function useWebRTC() {
+    const [session, setSession] = useState({
+        state: 'idle',
+        peer: null,
+        startedAt: null,
+        isMuted: false,
+        isCameraOn: false,
+    });
+    const pcRef = useRef(null);
+    const localStream = useRef(null);
+    const localVideoRef = useRef(null);
+    const remoteVideoRef = useRef(null);
+    const updateSession = (patch) => setSession(prev => (Object.assign(Object.assign({}, prev), patch)));
+    /** Start an outgoing call */
+    const startCall = useCallback(async (peer, withVideo = false) => {
+        updateSession({ state: 'calling', peer });
+        const stream = await navigator.mediaDevices.getUserMedia({
+            audio: true,
+            video: withVideo,
+        });
+        localStream.current = stream;
+        if (localVideoRef.current)
+            localVideoRef.current.srcObject = stream;
+        const pc = new RTCPeerConnection({ iceServers: ICE_SERVERS });
+        pcRef.current = pc;
+        stream.getTracks().forEach(t => pc.addTrack(t, stream));
+        pc.ontrack = e => {
+            if (remoteVideoRef.current)
+                remoteVideoRef.current.srcObject = e.streams[0];
+            updateSession({ state: 'connected', startedAt: new Date(), isCameraOn: withVideo });
+        };
+        pc.onicecandidate = e => {
+            if (e.candidate) {
+                // TODO: socket.emit('ice-candidate', { candidate: e.candidate, to: peer.uid });
+                console.log('[WebRTC] ICE candidate ready — send via signalling:', e.candidate);
+            }
+        };
+        const offer = await pc.createOffer();
+        await pc.setLocalDescription(offer);
+        // TODO: socket.emit('call-offer', { offer, to: peer.uid, from: 'me' });
+        console.log('[WebRTC] Offer created — send via signalling server:', offer);
+    }, []);
+    /** Accept an incoming call offer */
+    const acceptCall = useCallback(async (offer, peer, withVideo = false) => {
+        updateSession({ state: 'connected', peer, startedAt: new Date(), isCameraOn: withVideo });
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: withVideo });
+        localStream.current = stream;
+        if (localVideoRef.current)
+            localVideoRef.current.srcObject = stream;
+        const pc = new RTCPeerConnection({ iceServers: ICE_SERVERS });
+        pcRef.current = pc;
+        stream.getTracks().forEach(t => pc.addTrack(t, stream));
+        pc.ontrack = e => {
+            if (remoteVideoRef.current)
+                remoteVideoRef.current.srcObject = e.streams[0];
+        };
+        pc.onicecandidate = e => {
+            if (e.candidate) {
+                // TODO: socket.emit('ice-candidate', { candidate: e.candidate, to: peer.uid });
+            }
+        };
+        await pc.setRemoteDescription(offer);
+        const answer = await pc.createAnswer();
+        await pc.setLocalDescription(answer);
+        // TODO: socket.emit('call-answer', { answer, to: peer.uid });
+    }, []);
+    /** Hang up */
+    const endCall = useCallback(() => {
+        var _a, _b;
+        (_a = localStream.current) === null || _a === void 0 ? void 0 : _a.getTracks().forEach(t => t.stop());
+        (_b = pcRef.current) === null || _b === void 0 ? void 0 : _b.close();
+        pcRef.current = null;
+        localStream.current = null;
+        updateSession({ state: 'ended', peer: null, startedAt: null });
+        setTimeout(() => updateSession({ state: 'idle' }), 1800);
+    }, []);
+    const toggleMute = useCallback(() => {
+        if (!localStream.current)
+            return;
+        const enabled = !session.isMuted;
+        localStream.current.getAudioTracks().forEach(t => { t.enabled = enabled; });
+        updateSession({ isMuted: !session.isMuted });
+    }, [session.isMuted]);
+    const toggleCamera = useCallback(() => {
+        if (!localStream.current)
+            return;
+        const enabled = !session.isCameraOn;
+        localStream.current.getVideoTracks().forEach(t => { t.enabled = enabled; });
+        updateSession({ isCameraOn: enabled });
+    }, [session.isCameraOn]);
+    // Cleanup on unmount
+    useEffect(() => () => {
+        var _a, _b;
+        (_a = localStream.current) === null || _a === void 0 ? void 0 : _a.getTracks().forEach(t => t.stop());
+        (_b = pcRef.current) === null || _b === void 0 ? void 0 : _b.close();
+    }, []);
+    return {
+        session,
+        localVideoRef,
+        remoteVideoRef,
+        startCall,
+        acceptCall,
+        endCall,
+        toggleMute,
+        toggleCamera,
+    };
+}

package/dist/index.d.ts

@@ -4,11 +4,15 @@ export { UserListScreen } from './components/UserListScreen';
 export { ChatScreen } from './components/ChatScreen';
 export { RecentChatsScreen } from './components/RecentChatsScreen';
 export { TicketScreen } from './components/TicketScreen';
+export { BlockListScreen } from './components/BlockList';
+export { CallScreen } from './components/CallScreen';
 export { MaintenanceView } from './components/MaintenanceView';
 export { BottomTabs } from './components/Tabs/BottomTabs';
-export { useUsers } from './hooks/useUsers';
+export { EmojiPicker } from './components/EmojiPicker';
 export { useChat } from './hooks/useChat';
-export { loadChatConfig, buildUserListUrl } from './config';
-export { fetchUsers } from './services/userService';
-export { defaultTheme, mergeTheme } from './utils/theme';
-export type { ChatUser, ChatMessage, ChatConfig, ChatWidgetTheme, ChatWidgetProps, ChatStatus, ChatType, UserType, Screen, BottomTab, UserListContext, Ticket, } from './types';
+export { useWebRTC } from './hooks/useWebRTC';
+export { useRemoteConfig } from './hooks/useRemoteConfig';
+export { loadLocalConfig, fetchRemoteChatData } from './config';
+export { mergeTheme, darken } from './utils/theme';
+export { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText } from './utils/chat';
+export type { ChatWidgetProps, ChatWidgetTheme, WidgetConfig, RemoteChatData, ChatUser, ChatMessage, Ticket, RecentChat, CallSession, CallState, ChatStatus, ChatType, UserType, OnlineStatus, Screen, BottomTab, UserListContext, MessageType, LocalEnvConfig, } from './types';

package/dist/index.js

@@ -4,10 +4,14 @@ export { UserListScreen } from './components/UserListScreen';
 export { ChatScreen } from './components/ChatScreen';
 export { RecentChatsScreen } from './components/RecentChatsScreen';
 export { TicketScreen } from './components/TicketScreen';
+export { BlockListScreen } from './components/BlockList';
+export { CallScreen } from './components/CallScreen';
 export { MaintenanceView } from './components/MaintenanceView';
 export { BottomTabs } from './components/Tabs/BottomTabs';
-export { useUsers } from './hooks/useUsers';
+export { EmojiPicker } from './components/EmojiPicker';
 export { useChat } from './hooks/useChat';
-export { loadChatConfig, buildUserListUrl } from './config';
-export { fetchUsers } from './services/userService';
-export { defaultTheme, mergeTheme } from './utils/theme';
+export { useWebRTC } from './hooks/useWebRTC';
+export { useRemoteConfig } from './hooks/useRemoteConfig';
+export { loadLocalConfig, fetchRemoteChatData } from './config';
+export { mergeTheme, darken } from './utils/theme';
+export { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText } from './utils/chat';

package/dist/types/index.d.ts

@@ -1,32 +1,60 @@
+export interface WidgetConfig {
+    id: string;
+    apiKey: string;
+    status: ChatStatus;
+    chatType: ChatType;
+    primaryColor: string;
+    buttonLabel: string;
+    buttonPosition: 'bottom-right' | 'bottom-left';
+    welcomeTitle: string;
+    welcomeSubtitle: string;
+    allowVoiceMessage: boolean;
+    allowAttachment: boolean;
+    allowEmoji: boolean;
+    allowWebCall: boolean;
+    maxEmojiCount: number;
+    allowTranscriptDownload: boolean;
+    allowReport: boolean;
+    allowBlock: boolean;
+}
+export interface RemoteChatData {
+    widget: WidgetConfig;
+    developers: ChatUser[];
+    users: ChatUser[];
+    sampleChats: Record<string, ChatMessage[]>;
+    sampleTickets: Ticket[];
+    blockedUsers: string[];
+}
 export type ChatStatus = 'ACTIVE' | 'DISABLE' | 'MAINTENANCE';
 export type ChatType = 'SUPPORT' | 'CHAT' | 'BOTH';
 export type UserType = 'developer' | 'user';
-export type Screen = 'home' | 'user-list' | 'chat' | 'recent-chats' | 'tickets';
-export type UserListContext = 'support' | 'conversation';
+export type OnlineStatus = 'online' | 'away' | 'offline';
 export type BottomTab = 'home' | 'chats' | 'tickets';
-export type WidgetSize = 'normal' | 'maximized';
+export type Screen = 'home' | 'user-list' | 'chat' | 'recent-chats' | 'tickets' | 'block-list' | 'call';
+export type UserListContext = 'support' | 'conversation';
+export type MessageType = 'text' | 'voice' | 'attachment' | 'emoji';
 export interface ChatUser {
-    name: string;
     uid: string;
+    name: string;
     email: string;
     mobile: string;
     project: string;
     type: UserType;
+    avatar: string | null;
+    status: OnlineStatus;
+    designation: string;
 }
 export interface ChatMessage {
     id: string;
     senderId: string;
     receiverId: string;
     text: string;
-    timestamp: Date;
+    timestamp: string;
+    type: MessageType;
     status: 'sent' | 'delivered' | 'read';
-}
-export interface RecentChat {
-    id: string;
-    user: ChatUser;
-    lastMessage: string;
-    lastTime: Date;
-    unread: number;
+    attachmentName?: string;
+    attachmentSize?: string;
+    voiceDuration?: number;
 }
 export interface Ticket {
     id: string;
@@ -34,15 +62,29 @@ export interface Ticket {
     description: string;
     status: 'open' | 'in-progress' | 'resolved' | 'closed';
     priority: 'low' | 'medium' | 'high';
-    createdAt: Date;
-    updatedAt: Date;
+    createdAt: string;
+    updatedAt: string;
+    assignedTo: string | null;
 }
-export interface ChatConfig {
-    hostUrl: string;
-    hostPort: number | null;
-    userListEndpoint: string;
-    status: ChatStatus;
-    chatType: ChatType;
+export interface RecentChat {
+    id: string;
+    user: ChatUser;
+    lastMessage: string;
+    lastTime: string;
+    unread: number;
+    isPaused: boolean;
+}
+export type CallState = 'idle' | 'calling' | 'connected' | 'ended';
+export interface CallSession {
+    state: CallState;
+    peer: ChatUser | null;
+    startedAt: Date | null;
+    isMuted: boolean;
+    isCameraOn: boolean;
+}
+export interface LocalEnvConfig {
+    apiKey: string;
+    widgetId: string;
 }
 export interface ChatWidgetTheme {
     primaryColor?: string;
@@ -52,7 +94,6 @@ export interface ChatWidgetTheme {
     buttonLabel?: string;
     buttonPosition?: 'bottom-right' | 'bottom-left';
     borderRadius?: string;
-    backgroundColor?: string;
 }
 export interface ChatWidgetProps {
     theme?: ChatWidgetTheme;

package/dist/utils/chat.d.ts

@@ -0,0 +1,13 @@
+import { ChatMessage, ChatUser } from '../types';
+/** Generate a consistent avatar color from a name */
+export declare function avatarColor(name: string): string;
+/** Get initials from full name */
+export declare function initials(name: string): string;
+/** Format timestamp to readable time string */
+export declare function formatTime(ts: string | Date): string;
+/** Format date for chat separators */
+export declare function formatDate(ts: string | Date): string;
+/** Generate a plain-text transcript from messages */
+export declare function generateTranscript(messages: ChatMessage[], peer: ChatUser, myName?: string): string;
+/** Trigger a file download in the browser */
+export declare function downloadText(content: string, filename: string): void;

package/dist/utils/chat.js

@@ -0,0 +1,62 @@
+/** Generate a consistent avatar color from a name */
+export function avatarColor(name) {
+    const palette = [
+        '#2563EB', '#7C3AED', '#059669', '#D97706',
+        '#DC2626', '#0891B2', '#4F46E5', '#BE185D',
+    ];
+    let hash = 0;
+    for (let i = 0; i < name.length; i++)
+        hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    return palette[Math.abs(hash) % palette.length];
+}
+/** Get initials from full name */
+export function initials(name) {
+    return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+}
+/** Format timestamp to readable time string */
+export function formatTime(ts) {
+    return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+/** Format date for chat separators */
+export function formatDate(ts) {
+    const d = new Date(ts);
+    const today = new Date();
+    const yesterday = new Date(today);
+    yesterday.setDate(today.getDate() - 1);
+    if (d.toDateString() === today.toDateString())
+        return 'Today';
+    if (d.toDateString() === yesterday.toDateString())
+        return 'Yesterday';
+    return d.toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' });
+}
+/** Generate a plain-text transcript from messages */
+export function generateTranscript(messages, peer, myName = 'Me') {
+    const header = [
+        '═══════════════════════════════════════',
+        '  CHAT TRANSCRIPT',
+        `  Conversation with: ${peer.name} (${peer.email})`,
+        `  Downloaded: ${new Date().toLocaleString()}`,
+        '═══════════════════════════════════════',
+        '',
+    ].join('\n');
+    const body = messages.map(m => {
+        var _a;
+        const sender = m.senderId === 'me' ? myName : peer.name;
+        const time = new Date(m.timestamp).toLocaleString();
+        const label = m.type === 'voice' ? '[Voice Message]'
+            : m.type === 'attachment' ? `[Attachment: ${(_a = m.attachmentName) !== null && _a !== void 0 ? _a : 'file'}]`
+                : m.text;
+        return `[${time}] ${sender}: ${label}`;
+    }).join('\n');
+    return header + body;
+}
+/** Trigger a file download in the browser */
+export function downloadText(content, filename) {
+    const blob = new Blob([content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+}

package/dist/utils/theme.d.ts

@@ -1,3 +1,5 @@
 import { ChatWidgetTheme } from '../types';
 export declare const defaultTheme: Required<ChatWidgetTheme>;
-export declare function mergeTheme(custom?: ChatWidgetTheme): Required<ChatWidgetTheme>;
+export declare function mergeTheme(remote?: Partial<ChatWidgetTheme>, local?: ChatWidgetTheme): Required<ChatWidgetTheme>;
+/** Darken a hex color by `amount` (0-255) */
+export declare function darken(hex: string, amount?: number): string;

package/dist/utils/theme.js

@@ -1,13 +1,20 @@
 export const defaultTheme = {
-    primaryColor: '#1aaa96',
+    primaryColor: '#2563EB',
     fontFamily: "'DM Sans', 'Segoe UI', sans-serif",
-    buttonColor: '#1aaa96',
+    buttonColor: '#2563EB',
     buttonTextColor: '#ffffff',
-    buttonLabel: 'Chat with us',
+    buttonLabel: 'Support',
     buttonPosition: 'bottom-right',
-    borderRadius: '16px',
-    backgroundColor: '#ffffff',
+    borderRadius: '0px', // drawer uses 16px only on top-left / bottom-left
 };
-export function mergeTheme(custom) {
-    return Object.assign(Object.assign({}, defaultTheme), custom);
+export function mergeTheme(remote, local) {
+    return Object.assign(Object.assign(Object.assign({}, defaultTheme), remote), local);
+}
+/** Darken a hex color by `amount` (0-255) */
+export function darken(hex, amount = 20) {
+    const n = parseInt(hex.replace('#', ''), 16);
+    const r = Math.max(0, (n >> 16) - amount);
+    const g = Math.max(0, ((n >> 8) & 0xff) - amount);
+    const b = Math.max(0, (n & 0xff) - amount);
+    return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
 }

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "ajaxter-chat",
-  "version": "2.0.1",
-  "description": "A reusable configurable chat widget for React.js and Next.js with support chat, user chat, and ticket raising.",
+  "version": "3.0.3",
+  "description": "Drawer-based chat widget with support chat, tickets, WebRTC calling, voice messages, block list, and transcript download.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "files": ["dist", "src"],
+  "files": ["dist", "src", "public"],
   "sideEffects": false,
   "scripts": {
     "build": "tsc",
@@ -23,6 +23,6 @@
     "react-dom": "^18.0.0",
     "typescript": "^5.0.0"
   },
-  "keywords": ["react", "nextjs", "chat", "widget", "support", "tickets", "typescript"],
+  "keywords": ["react","nextjs","chat","widget","webrtc","support","tickets","drawer","typescript"],
   "license": "MIT"
 }

package/public/chatData.json

@@ -0,0 +1,162 @@
+{
+  "widget": {
+    "id": "demo",
+    "apiKey": "demo1234",
+    "status": "ACTIVE",
+    "chatType": "BOTH",
+    "primaryColor": "#2563EB",
+    "buttonLabel": "Support",
+    "buttonPosition": "bottom-right",
+    "welcomeTitle": "Hi there 👋",
+    "welcomeSubtitle": "Need help? Start a conversation:",
+    "allowVoiceMessage": true,
+    "allowAttachment": true,
+    "allowEmoji": true,
+    "allowWebCall": true,
+    "maxEmojiCount": 20,
+    "allowTranscriptDownload": true,
+    "allowReport": true,
+    "allowBlock": true
+  },
+  "developers": [
+    {
+      "uid": "dev_001",
+      "name": "Arjun Sharma",
+      "email": "arjun.sharma@mscorpres.com",
+      "mobile": "+91-9876543210",
+      "project": "Platform Engineering",
+      "type": "developer",
+      "avatar": null,
+      "status": "online",
+      "designation": "Senior Developer"
+    },
+    {
+      "uid": "dev_002",
+      "name": "Priya Nair",
+      "email": "priya.nair@mscorpres.com",
+      "mobile": "+91-9876543211",
+      "project": "Product Support",
+      "type": "developer",
+      "avatar": null,
+      "status": "online",
+      "designation": "Support Engineer"
+    }
+  ],
+  "users": [
+    {
+      "uid": "usr_001",
+      "name": "Ravi Kumar",
+      "email": "ravi.kumar@client.com",
+      "mobile": "+91-9988776655",
+      "project": "Client Portal",
+      "type": "user",
+      "avatar": null,
+      "status": "online",
+      "designation": "Product Manager"
+    },
+    {
+      "uid": "usr_002",
+      "name": "Sneha Patel",
+      "email": "sneha.patel@client.com",
+      "mobile": "+91-9988776644",
+      "project": "Client Portal",
+      "type": "user",
+      "avatar": null,
+      "status": "away",
+      "designation": "Business Analyst"
+    },
+    {
+      "uid": "usr_003",
+      "name": "Mohan Das",
+      "email": "mohan.das@client.com",
+      "mobile": "+91-9988776633",
+      "project": "Mobile App",
+      "type": "user",
+      "avatar": null,
+      "status": "offline",
+      "designation": "QA Engineer"
+    }
+  ],
+  "sampleChats": {
+    "dev_001": [
+      {
+        "id": "msg_001",
+        "senderId": "me",
+        "receiverId": "dev_001",
+        "text": "Hi Arjun, I'm getting a 500 error on the login API.",
+        "timestamp": "2025-03-27T09:10:00Z",
+        "type": "text",
+        "status": "read"
+      },
+      {
+        "id": "msg_002",
+        "senderId": "dev_001",
+        "receiverId": "me",
+        "text": "Hey! Can you share the request payload? I'll check on my end.",
+        "timestamp": "2025-03-27T09:11:30Z",
+        "type": "text",
+        "status": "read"
+      },
+      {
+        "id": "msg_003",
+        "senderId": "me",
+        "receiverId": "dev_001",
+        "text": "Sure, here it is: { \"email\": \"test@demo.com\", \"password\": \"***\" }",
+        "timestamp": "2025-03-27T09:12:00Z",
+        "type": "text",
+        "status": "read"
+      },
+      {
+        "id": "msg_004",
+        "senderId": "dev_001",
+        "receiverId": "me",
+        "text": "Got it. The issue was a DB connection timeout. Fixed in the latest deploy 🚀",
+        "timestamp": "2025-03-27T09:20:00Z",
+        "type": "text",
+        "status": "read"
+      },
+      {
+        "id": "msg_005",
+        "senderId": "me",
+        "receiverId": "dev_001",
+        "text": "Perfect, it's working now. Thanks!",
+        "timestamp": "2025-03-27T09:21:00Z",
+        "type": "text",
+        "status": "read"
+      }
+    ]
+  },
+  "sampleTickets": [
+    {
+      "id": "TKT-0001",
+      "title": "Login page 500 error",
+      "description": "Getting a server error when logging in with valid credentials.",
+      "status": "resolved",
+      "priority": "high",
+      "createdAt": "2025-03-25T10:00:00Z",
+      "updatedAt": "2025-03-27T09:22:00Z",
+      "assignedTo": "dev_001"
+    },
+    {
+      "id": "TKT-0002",
+      "title": "Export to CSV not working",
+      "description": "The export button on the reports page does nothing when clicked.",
+      "status": "in-progress",
+      "priority": "medium",
+      "createdAt": "2025-03-26T14:30:00Z",
+      "updatedAt": "2025-03-27T08:00:00Z",
+      "assignedTo": "dev_002"
+    },
+    {
+      "id": "TKT-0003",
+      "title": "Add dark mode support",
+      "description": "Feature request to add a dark mode toggle for the dashboard.",
+      "status": "open",
+      "priority": "low",
+      "createdAt": "2025-03-27T07:00:00Z",
+      "updatedAt": "2025-03-27T07:00:00Z",
+      "assignedTo": null
+    }
+  ],
+  "blockedUsers": []
+}

package/src/components/BlockList/index.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { ChatUser, WidgetConfig } from '../../types';
+import { avatarColor, initials } from '../../utils/chat';
+
+interface BlockListScreenProps {
+  blockedUsers: ChatUser[];
+  config:       WidgetConfig;
+  onUnblock:    (uid: string) => void;
+  onBack:       () => void;
+}
+
+export const BlockListScreen: React.FC<BlockListScreenProps> = ({
+  blockedUsers, config, onUnblock, onBack,
+}) => (
+  <div style={{ display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideIn 0.22s ease' }}>
+    {/* Header */}
+    <div style={{
+      background: `linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`,
+      padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0,
+    }}>
+      <button onClick={onBack} style={backBtnStyle}>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+          <path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </button>
+      <div>
+        <div style={{ fontWeight: 700, fontSize: 16, color: '#fff' }}>Block List</div>
+        <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.8)' }}>
+          {blockedUsers.length} blocked user{blockedUsers.length !== 1 ? 's' : ''}
+        </div>
+      </div>
+    </div>
+
+    <div style={{ flex: 1, overflowY: 'auto' }}>
+      {blockedUsers.length === 0 ? (
+        <div style={{ padding: '50px 24px', textAlign: 'center' }}>
+          <div style={{ fontSize: 36, marginBottom: 10 }}>✅</div>
+          <div style={{ fontWeight: 700, color: '#1a2332', marginBottom: 6 }}>No blocked users</div>
+          <div style={{ fontSize: 13, color: '#7b8fa1' }}>Users you block will appear here</div>
+        </div>
+      ) : (
+        blockedUsers.map((user, i) => (
+          <div key={user.uid} style={{
+            padding: '13px 16px', display: 'flex', alignItems: 'center', gap: 13,
+            borderBottom: '1px solid #f0f2f5',
+            animation: `cw-fadeUp 0.28s ease both`, animationDelay: `${i * 0.05}s`,
+          }}>
+            <div style={{
+              width: 44, height: 44, borderRadius: '50%',
+              backgroundColor: avatarColor(user.name),
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              color: '#fff', fontWeight: 700, fontSize: 14, flexShrink: 0,
+              filter: 'grayscale(0.6)', opacity: 0.7,
+            }}>
+              {initials(user.name)}
+            </div>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ fontWeight: 700, fontSize: 14, color: '#6b7280' }}>{user.name}</div>
+              <div style={{ fontSize: 12, color: '#9ca3af', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {user.email}
+              </div>
+            </div>
+            <button
+              onClick={() => onUnblock(user.uid)}
+              style={{
+                padding: '6px 14px', borderRadius: 20,
+                border: `1.5px solid ${config.primaryColor}`,
+                background: 'transparent', color: config.primaryColor,
+                fontSize: 12, fontWeight: 700, cursor: 'pointer',
+                transition: 'all 0.15s', flexShrink: 0,
+              }}
+              onMouseEnter={e => {
+                (e.currentTarget as HTMLElement).style.background = config.primaryColor;
+                (e.currentTarget as HTMLElement).style.color = '#fff';
+              }}
+              onMouseLeave={e => {
+                (e.currentTarget as HTMLElement).style.background = 'transparent';
+                (e.currentTarget as HTMLElement).style.color = config.primaryColor;
+              }}
+            >
+              Unblock
+            </button>
+          </div>
+        ))
+      )}
+    </div>
+  </div>
+);
+
+const backBtnStyle: React.CSSProperties = {
+  background: 'rgba(255,255,255,0.22)', border: 'none', borderRadius: '50%',
+  width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center',
+  cursor: 'pointer', flexShrink: 0,
+};