ajaxter-chat 3.0.15 → 3.0.17

package/dist/utils/presenceStatus.js

@@ -0,0 +1,45 @@
+const key = (widgetId) => `ajaxter_presence_${widgetId}`;
+export function loadPresenceStatus(widgetId) {
+    if (typeof sessionStorage === 'undefined')
+        return 'ACTIVE';
+    try {
+        const v = sessionStorage.getItem(key(widgetId));
+        if (v === 'ACTIVE' || v === 'AWAY' || v === 'DND')
+            return v;
+    }
+    catch (_a) {
+        /* */
+    }
+    return 'ACTIVE';
+}
+export function savePresenceStatus(widgetId, status) {
+    try {
+        sessionStorage.setItem(key(widgetId), status);
+    }
+    catch (_a) {
+        /* quota */
+    }
+}
+/** Prefer server value from DB when the host includes it in config */
+export function resolveInitialPresence(widgetId, serverStatus) {
+    if (serverStatus === 'ACTIVE' || serverStatus === 'AWAY' || serverStatus === 'DND')
+        return serverStatus;
+    return loadPresenceStatus(widgetId);
+}
+/** Call your backend to persist presence (production DB). */
+export async function syncPresenceToServer(url, payload) {
+    const res = await fetch(url, {
+        method: 'POST',
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+        mode: 'cors',
+        credentials: 'omit',
+    });
+    if (!res.ok) {
+        const t = await res.text().catch(() => '');
+        throw new Error(t || `Presence sync failed (${res.status})`);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ajaxter-chat",
-  "version": "3.0.15",
+  "version": "3.0.17",
   "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",

package/src/components/CallScreen/index.tsx

@@ -10,11 +10,13 @@ interface CallScreenProps {
   onToggleMute:   () => void;
   onToggleCamera: () => void;
   primaryColor:   string;
+  /** Collapse the drawer while keeping the call active (mic/cam stay on). */
+  onMinimize?:    () => void;
 }
 
 export const CallScreen: React.FC<CallScreenProps> = ({
   session, localVideoRef, remoteVideoRef,
-  onEnd, onToggleMute, onToggleCamera, primaryColor,
+  onEnd, onToggleMute, onToggleCamera, primaryColor, onMinimize,
 }) => {
   const [duration, setDuration] = useState(0);
   const peer = session.peer as ChatUser;
@@ -64,6 +66,26 @@ export const CallScreen: React.FC<CallScreenProps> = ({
               {session.state === 'ended'     && 'Call Ended'}
             </div>
           </div>
+          {(session.state === 'calling' || session.state === 'connected') && onMinimize && (
+            <button
+              type="button"
+              onClick={onMinimize}
+              title="Minimize — keep call while you use the page"
+              style={{
+                padding: '8px 12px',
+                borderRadius: 10,
+                border: '1px solid rgba(255,255,255,0.35)',
+                background: 'rgba(0,0,0,0.25)',
+                color: '#fff',
+                fontSize: 13,
+                fontWeight: 600,
+                cursor: 'pointer',
+                flexShrink: 0,
+              }}
+            >
+              Minimize
+            </button>
+          )}
         </div>
 
         {/* Center: avatar + name */}

package/src/components/ChatScreen/index.tsx

@@ -314,12 +314,13 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
               marginLeft: 4,
             }}
           >
-            <span style={{ fontSize: 10, color: 'rgba(255,255,255,0.85)', fontWeight: 600 }}>Sound</span>
             <button
               type="button"
               role="switch"
               aria-checked={messageSoundEnabled}
               onClick={() => onToggleMessageSound(!messageSoundEnabled)}
+              aria-label="Toggle message sound"
+              title="Toggle message sound"
               style={{
                 width: 36,
                 height: 20,

package/src/components/ChatWidget.tsx

@@ -19,6 +19,7 @@ import { TicketDetailScreen } from './TicketDetailScreen';
 import { TicketFormScreen } from './TicketFormScreen';
 import { BlockListScreen }   from './BlockList';
 import { CallScreen }        from './CallScreen';
+import { MiniCallBar }       from './MiniCallBar';
 import { MaintenanceView }   from './MaintenanceView';
 import { BottomTabs }        from './Tabs/BottomTabs';
 import { ViewerBlockedScreen } from './ViewerBlockedScreen';
@@ -45,6 +46,8 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
   /* Drawer open state */
   const [isOpen,      setIsOpen]      = useState(false);
   const [closing,     setClosing]     = useState(false); // for slide-out animation
+  /** True when user hid the drawer during ringing/connected call; WebRTC session stays active. */
+  const [callMinimized, setCallMinimized] = useState(false);
 
   /* Navigation */
   const [activeTab,    setActiveTab]    = useState<BottomTab>('home');
@@ -98,10 +101,18 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
   /* WebRTC hook */
   const { session: callSession, localVideoRef, remoteVideoRef, startCall, endCall, toggleMute, toggleCamera } = useWebRTC();
 
+  const callInProgress =
+    callSession.state === 'calling' || callSession.state === 'connected';
+
+  useEffect(() => {
+    if (!callInProgress) setCallMinimized(false);
+  }, [callInProgress]);
+
   /* ── Drawer open/close with slide animation ───────────────────────────── */
   const openDrawer = () => {
     setClosing(false);
     setIsOpen(true);
+    setCallMinimized(false);
   };
 
   const persistWidgetState = useCallback(() => {
@@ -333,9 +344,15 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
 
   const handleEndCall = useCallback(() => {
     endCall();
+    setCallMinimized(false);
     setScreen('chat');
   }, [endCall]);
 
+  const minimizeCall = useCallback(() => {
+    setCallMinimized(true);
+    closeDrawer();
+  }, [closeDrawer]);
+
   /* ── Derived ─────────────────────────────────────────────────────────── */
   const isBlocked      = activeUser ? blockedUids.includes(activeUser.uid) : false;
 
@@ -394,6 +411,11 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
   );
   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 handleTransferToDeveloper = useCallback((dev: ChatUser) => {
     if (!activeUser || !widgetConfig) return;
     const agent = widgetConfig.viewerName?.trim() || 'Agent';
@@ -467,12 +489,25 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
         }
       `}</style>
 
-      {/* ── Floating Button ── */}
+      {/* ── Minimized call bar (drawer closed, call still active) ── */}
+      {!isOpen && callMinimized && callInProgress && callSession.peer && (
+        <MiniCallBar
+          session={callSession}
+          primaryColor={primaryColor}
+          buttonPosition={theme.buttonPosition}
+          onExpand={openDrawer}
+          onEnd={handleEndCall}
+        />
+      )}
+
+      {/* ── Floating Button (unread badge + tooltip when closed) ── */}
       {!isOpen && (
         <button
           className="cw-root"
+          type="button"
           onClick={openDrawer}
-          aria-label={theme.buttonLabel}
+          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,
@@ -495,10 +530,35 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
             (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 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>
         </button>
       )}
@@ -562,8 +622,8 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
           {/* ── Main content ── */}
           {!cfgLoading && !cfgError && widgetConfig && (
             <>
-              {/* Resize + Close controls — shown outside chat/call screens */}
-              {screen !== 'chat' && screen !== 'call' && (
+              {/* Resize + Close controls — hidden on blocked screen (Close is in-panel) */}
+              {screen !== 'chat' && screen !== 'call' && !effectiveViewerBlocked && (
                 <div style={{
                   position: 'absolute', top: 12,
                   right: theme.buttonPosition === 'bottom-left' ? 'auto' : 12,
@@ -594,7 +654,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
 
               {/* ── ACTIVE: viewer spam-blocked (no chat/tickets UI) ── */}
               {widgetConfig.status === 'ACTIVE' && effectiveViewerBlocked && (
-                <ViewerBlockedScreen config={widgetConfig} apiKey={apiKey} />
+                <ViewerBlockedScreen config={widgetConfig} apiKey={apiKey} onClose={closeDrawer} />
               )}
 
               {/* ── ACTIVE: microphone, location, screen share required ── */}
@@ -613,6 +673,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
                   {screen === 'home' && (
                     <HomeScreen
                       config={widgetConfig}
+                      apiKey={apiKey}
                       onNavigate={handleCardClick}
                       onOpenTicket={handleOpenTicket}
                       tickets={tickets}
@@ -665,6 +726,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme, viewe
                       onToggleMute={toggleMute}
                       onToggleCamera={toggleCamera}
                       primaryColor={primaryColor}
+                      onMinimize={minimizeCall}
                     />
                   )}
 

package/src/components/HomeScreen/index.tsx

@@ -1,7 +1,13 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { WidgetConfig, UserListContext, Ticket } from '../../types';
 import { SlideNavMenu } from '../SlideNavMenu';
 import { truncateWords } from '../../utils/chat';
+import type { PresenceStatus } from '../../types';
+import {
+  resolveInitialPresence,
+  savePresenceStatus,
+  syncPresenceToServer,
+} from '../../utils/presenceStatus';
 
 export interface HomeNavigateOptions {
   /** When true, list screens play stagger animation (home burger menu only) */
@@ -10,14 +16,44 @@ export interface HomeNavigateOptions {
 
 interface HomeScreenProps {
   config: WidgetConfig;
+  /** Same as env / chatData — required to POST presence in production */
+  apiKey: string;
   onNavigate: (ctx: UserListContext | 'ticket', options?: HomeNavigateOptions) => void;
   /** Open a specific pending ticket (full detail) */
   onOpenTicket: (ticketId: string) => void;
   tickets: Ticket[];
 }
 
-export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, onOpenTicket, tickets }) => {
+const STATUS_OPTIONS: { value: PresenceStatus; label: string }[] = [
+  { value: 'ACTIVE', label: 'Active' },
+  { value: 'AWAY', label: 'Away' },
+  { value: 'DND', label: 'DND' },
+];
+
+export const HomeScreen: React.FC<HomeScreenProps> = ({ config, apiKey, onNavigate, onOpenTicket, tickets }) => {
   const [menuOpen, setMenuOpen] = useState(false);
+  const [presence, setPresence] = useState<PresenceStatus>(() =>
+    resolveInitialPresence(config.id, config.presenceStatus),
+  );
+
+  useEffect(() => {
+    setPresence(resolveInitialPresence(config.id, config.presenceStatus));
+  }, [config.id, config.presenceStatus]);
+
+  const setPresenceAndSave = (s: PresenceStatus) => {
+    setPresence(s);
+    savePresenceStatus(config.id, s);
+    const url = config.presenceUpdateUrl?.trim();
+    if (!url) return;
+    void syncPresenceToServer(url, {
+      widgetId: config.id,
+      apiKey,
+      viewerUid: config.viewerUid?.trim() || undefined,
+      status: s,
+    }).catch(err => {
+      console.error('[ajaxter-chat] presence sync failed', err);
+    });
+  };
   const showSupport = config.chatType === 'SUPPORT' || config.chatType === 'BOTH';
   const showChat = config.chatType === 'CHAT' || config.chatType === 'BOTH';
   const viewerIsDev = config.viewerType === 'developer';
@@ -56,14 +92,14 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, onOp
         }}
       />
 
-      {/* Top bar — burger left */}
+      {/* Top bar — menu + presence status */}
       <div
         style={{
           flexShrink: 0,
-          padding: '14px 16px 10px',
+          padding: '12px 14px 12px',
           display: 'flex',
           alignItems: 'center',
-          gap: 12,
+          gap: 10,
           background: '#fff',
           borderBottom: '1px solid #eef0f5',
         }}
@@ -91,6 +127,59 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate, onOp
           <span style={{ width: 18, height: 2, background: '#334155', borderRadius: 1 }} />
           <span style={{ width: 18, height: 2, background: '#334155', borderRadius: 1 }} />
         </button>
+
+        <div style={{ flex: 1, minWidth: 0 }} />
+
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+            flexShrink: 0,
+            flexWrap: 'wrap',
+            justifyContent: 'flex-end',
+          }}
+        >
+          <div
+            role="group"
+            aria-label="Your status"
+            style={{
+              display: 'flex',
+              borderRadius: 10,
+              padding: 3,
+              background: '#f1f5f9',
+              gap: 2,
+            }}
+          >
+            {STATUS_OPTIONS.map(({ value, label }) => {
+              const isOn = presence === value;
+              return (
+                <button
+                  key={value}
+                  type="button"
+                  onClick={() => setPresenceAndSave(value)}
+                  style={{
+                    border: 'none',
+                    borderRadius: 8,
+                    padding: '7px 10px',
+                    fontSize: 11,
+                    fontWeight: 700,
+                    letterSpacing: '0.04em',
+                    cursor: 'pointer',
+                    fontFamily: 'inherit',
+                    textTransform: 'uppercase',
+                    background: isOn ? config.primaryColor : 'transparent',
+                    color: isOn ? '#fff' : '#64748b',
+                    boxShadow: isOn ? `0 2px 8px ${config.primaryColor}55` : 'none',
+                    transition: 'background 0.15s, color 0.15s',
+                  }}
+                >
+                  {label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
       </div>
 
       <div className="cw-scroll" style={{ flex: 1, overflowY: 'auto', padding: '20px 18px 28px' }}>

package/src/components/MiniCallBar/index.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { CallSession, ChatUser } from '../../types';
+import { avatarColor, initials } from '../../utils/chat';
+
+export interface MiniCallBarProps {
+  session: CallSession;
+  primaryColor: string;
+  buttonPosition: 'bottom-left' | 'bottom-right';
+  onExpand: () => void;
+  onEnd: () => void;
+}
+
+/**
+ * Shown when the user minimizes the widget during an active call (ringing or connected).
+ * Sits above the main launcher button so the user can work on the page and return to the call.
+ */
+export const MiniCallBar: React.FC<MiniCallBarProps> = ({
+  session,
+  primaryColor,
+  buttonPosition,
+  onExpand,
+  onEnd,
+}) => {
+  const peer = session.peer as ChatUser | null;
+  const [duration, setDuration] = useState(0);
+
+  useEffect(() => {
+    if (session.state !== 'connected' || !session.startedAt) return;
+    const t = setInterval(() => {
+      setDuration(Math.floor((Date.now() - session.startedAt!.getTime()) / 1000));
+    }, 1000);
+    return () => clearInterval(t);
+  }, [session.state, session.startedAt]);
+
+  const mins = String(Math.floor(duration / 60)).padStart(2, '0');
+  const secs = String(duration % 60).padStart(2, '0');
+
+  const pos: React.CSSProperties =
+    buttonPosition === 'bottom-left'
+      ? { left: 24, right: 'auto' }
+      : { right: 24, left: 'auto' };
+
+  return (
+    <div
+      role="toolbar"
+      aria-label="Call in progress"
+      style={{
+        position: 'fixed',
+        bottom: 88,
+        zIndex: 10000,
+        ...pos,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 10,
+        padding: '10px 14px',
+        maxWidth: 'min(360px, calc(100vw - 48px))',
+        borderRadius: 14,
+        background: `linear-gradient(135deg, ${primaryColor}ee, #0f172a)`,
+        color: '#fff',
+        boxShadow: '0 10px 32px rgba(0,0,0,0.28)',
+        animation: 'cw-miniBarIn 0.28s cubic-bezier(0.22,1,0.36,1)',
+        cursor: 'default',
+      }}
+    >
+      <style>{`
+        @keyframes cw-miniBarIn {
+          from { opacity: 0; transform: translateY(12px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      `}</style>
+
+      <button
+        type="button"
+        onClick={onExpand}
+        title="Open call"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 10,
+          flex: 1,
+          minWidth: 0,
+          padding: 0,
+          border: 'none',
+          background: 'transparent',
+          color: 'inherit',
+          cursor: 'pointer',
+          textAlign: 'left',
+        }}
+      >
+        {peer && (
+          <div
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: '50%',
+              backgroundColor: avatarColor(peer.name),
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: 14,
+              fontWeight: 700,
+              flexShrink: 0,
+              animation: session.state === 'calling' ? 'cw-pulse 1.5s ease infinite' : 'none',
+            }}
+          >
+            {initials(peer.name)}
+          </div>
+        )}
+        <div style={{ minWidth: 0, flex: 1 }}>
+          <div style={{ fontWeight: 700, fontSize: 14, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {peer?.name ?? 'Call'}
+          </div>
+          <div style={{ fontSize: 12, opacity: 0.9, marginTop: 2 }}>
+            {session.state === 'calling' && 'Calling…'}
+            {session.state === 'connected' && `${mins}:${secs}`}
+          </div>
+        </div>
+      </button>
+
+      <button
+        type="button"
+        onClick={onEnd}
+        title="End call"
+        style={{
+          width: 40,
+          height: 40,
+          borderRadius: '50%',
+          border: 'none',
+          background: '#ef4444',
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexShrink: 0,
+          boxShadow: '0 2px 10px rgba(239,68,68,0.45)',
+        }}
+      >
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+          <path
+            d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8a19.79 19.79 0 01-3.07-8.68A2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z"
+            fill="#fff"
+            transform="rotate(135 12 12)"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+};

package/src/components/ViewerBlockedScreen/index.tsx

@@ -10,9 +10,10 @@ const DEFAULT_MESSAGE =
 interface ViewerBlockedScreenProps {
   config: WidgetConfig;
   apiKey: string;
+  onClose: () => void;
 }
 
-export const ViewerBlockedScreen: React.FC<ViewerBlockedScreenProps> = ({ config, apiKey }) => {
+export const ViewerBlockedScreen: React.FC<ViewerBlockedScreenProps> = ({ config, apiKey, onClose }) => {
   const [text, setText] = useState('');
   const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');
   const [error, setError] = useState<string | null>(null);
@@ -79,9 +80,29 @@ export const ViewerBlockedScreen: React.FC<ViewerBlockedScreenProps> = ({ config
         </p>
 
         {status === 'sent' ? (
-          <p style={{ margin: 0, fontSize: 14, color: '#16a34a', fontWeight: 600 }}>
-            Your request was sent. We will review it shortly.
-          </p>
+          <>
+            <p style={{ margin: '0 0 16px', fontSize: 14, color: '#16a34a', fontWeight: 600 }}>
+              Your request was sent. We will review it shortly.
+            </p>
+            <button
+              type="button"
+              onClick={onClose}
+              style={{
+                width: '100%',
+                padding: '12px 16px',
+                borderRadius: 12,
+                border: '2px solid #ef4444',
+                background: '#fff',
+                color: '#ef4444',
+                fontWeight: 700,
+                fontSize: 15,
+                cursor: 'pointer',
+                fontFamily: 'inherit',
+              }}
+            >
+              Close
+            </button>
+          </>
         ) : (
           <>
             <label
@@ -96,6 +117,8 @@ export const ViewerBlockedScreen: React.FC<ViewerBlockedScreenProps> = ({ config
               onChange={e => { setText(e.target.value); setError(null); setStatus('idle'); }}
               placeholder="Explain briefly why your access should be restored…"
               rows={4}
+              maxLength={500}
+              minLength={50}
               disabled={status === 'sending'}
               style={{
                 width: '100%',
@@ -106,8 +129,9 @@ export const ViewerBlockedScreen: React.FC<ViewerBlockedScreenProps> = ({ config
                 fontSize: 14,
                 fontFamily: 'inherit',
                 color: '#1e293b',
-                resize: 'vertical',
+                resize: 'none',
                 minHeight: 100,
+                maxHeight: 250,
                 marginBottom: 14,
                 outline: 'none',
               }}
@@ -130,6 +154,25 @@ export const ViewerBlockedScreen: React.FC<ViewerBlockedScreenProps> = ({ config
             >
               {status === 'sending' ? 'Sending…' : 'Submit request'}
             </button>
+            <button
+              type="button"
+              onClick={onClose}
+              style={{
+                width: '100%',
+                marginTop: 12,
+                padding: '12px 16px',
+                borderRadius: 12,
+                border: '2px solid #ef4444',
+                background: '#fff',
+                color: '#ef4444',
+                fontWeight: 700,
+                fontSize: 15,
+                cursor: 'pointer',
+                fontFamily: 'inherit',
+              }}
+            >
+              Close
+            </button>
             {error && (
               <p style={{ margin: '12px 0 0', fontSize: 13, color: '#dc2626', lineHeight: 1.45 }}>
                 {error}

package/src/index.ts

@@ -20,6 +20,8 @@ export { submitReenableRequest } from './utils/reenableRequest';
 export type { ReenableRequestPayload } from './utils/reenableRequest';
 export { loadLocalConfig, fetchRemoteChatData } from './config';
 export { mergeTheme, darken }                   from './utils/theme';
+export { loadPresenceStatus, savePresenceStatus, resolveInitialPresence, syncPresenceToServer } from './utils/presenceStatus';
+export type { PresenceSyncPayload } from './utils/presenceStatus';
 export { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText, truncateWords } from './utils/chat';
 
 export type {
@@ -30,4 +32,5 @@ export type {
   ChatStatus, ChatType, UserType, OnlineStatus,
   Screen, BottomTab, UserListContext, MessageType,
   LocalEnvConfig,
+  PresenceStatus,
 } from './types';