ajaxter-chat 1.0.3 → 3.0.1

package/src/components/ChatWidget.tsx

@@ -0,0 +1,471 @@
+'use client';
+
+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 { useRemoteConfig } from '../hooks/useRemoteConfig';
+import { useChat } from '../hooks/useChat';
+import { useWebRTC } from '../hooks/useWebRTC';
+
+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';
+
+/* ─── Drawer width ─────────────────────────────────────────────────────────── */
+const DRAWER_W_NORMAL = 380;
+const DRAWER_W_MAX    = 480;
+
+export const ChatWidget: React.FC<ChatWidgetProps> = ({ theme: localTheme }) => {
+  /* SSR guard */
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => { setMounted(true); }, []);
+
+  /* Env config */
+  const { apiKey, widgetId } = loadLocalConfig();
+
+  /* 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');
+      setScreen('tickets');
+    } else {
+      setUserListCtx(ctx as UserListContext);
+      setScreen('user-list');
+    }
+  }, []);
+
+  const handleSelectUser = useCallback((user: ChatUser) => {
+    // Load history from sample chats if available
+    const history = data?.sampleChats[user.uid] ?? [];
+    selectUser(user, history);
+    setScreen('chat');
+    // 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 handleTabChange = useCallback((tab: BottomTab) => {
+    setActiveTab(tab);
+    setScreen(tab === 'home' ? 'home' : tab === 'chats' ? 'recent-chats' : 'tickets');
+  }, []);
+
+  /* ── Block/Unblock ───────────────────────────────────────────────────── */
+  const handleBlock = useCallback(() => {
+    if (!activeUser) return;
+    setBlockedUids(prev => [...prev, activeUser.uid]);
+    clearChat();
+    setScreen('home');
+    setActiveTab('home');
+  }, [activeUser, clearChat]);
+
+  const handleUnblock = useCallback((uid: string) => {
+    setBlockedUids(prev => prev.filter(id => id !== uid));
+  }, []);
+
+  /* ── 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,
+    };
+    setTickets(prev => [t, ...prev]);
+  }, []);
+
+  /* ── 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]);
+
+  /* ── Call ────────────────────────────────────────────────────────────── */
+  const handleStartCall = useCallback((withVideo: boolean) => {
+    if (!activeUser) return;
+    startCall(activeUser, withVideo);
+    setScreen('call');
+  }, [activeUser, startCall]);
+
+  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' };
+
+  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 styles ── */}
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
+
+        .cw-root * { box-sizing: border-box; font-family: 'DM Sans', 'Segoe UI', sans-serif; }
+
+        @keyframes cw-slideInRight  { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+        @keyframes cw-slideOutRight { from { transform: translateX(0); opacity: 1; }    to { transform: translateX(100%); opacity: 0; } }
+        @keyframes cw-slideInLeft   { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+        @keyframes cw-slideOutLeft  { from { transform: translateX(0); opacity: 1; }    to { transform: translateX(-100%); opacity: 0; } }
+        @keyframes cw-fadeUp  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes cw-slideIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
+        @keyframes cw-pulse   { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+        @keyframes cw-btnPop  { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+
+        .cw-scroll::-webkit-scrollbar        { width: 4px; }
+        .cw-scroll::-webkit-scrollbar-track  { background: transparent; }
+        .cw-scroll::-webkit-scrollbar-thumb  { background: #e0e0e0; border-radius: 4px; }
+
+        .cw-drawer-enter { animation: ${theme.buttonPosition === 'bottom-left' ? 'cw-slideInLeft' : 'cw-slideInRight'} 0.32s cubic-bezier(0.22,1,0.36,1) both; }
+        .cw-drawer-exit  { animation: ${theme.buttonPosition === 'bottom-left' ? 'cw-slideOutLeft' : 'cw-slideOutRight'} 0.28s cubic-bezier(0.55,0,1,0.45) both; }
+      `}</style>
+
+      {/* ── Floating Button ── */}
+      {!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',
+            top: 0,
+            bottom: 0,
+            ...drawerPosStyle,
+            zIndex: 9998,
+            width: drawerW,
+            maxWidth: '100vw',
+            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',
+            transition: 'width 0.28s ease',
+          }}
+        >
+          {/* ── 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>
+          )}
+
+          {/* ── 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>
+          )}
+
+          {/* ── 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>
+      )}
+    </>
+  );
+};
+
+export default ChatWidget;
+
+/* ── Tiny corner button ────────────────────────────────────────────────────── */
+const CornerBtn: React.FC<{ onClick: () => void; title: string; children: React.ReactNode }> = ({ onClick, title, children }) => (
+  <button onClick={onClick} title={title} style={{
+    width: 26, height: 26, borderRadius: '50%',
+    background: 'rgba(0,0,0,0.25)', border: 'none',
+    display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
+  }}>
+    {children}
+  </button>
+);

package/src/components/EmojiPicker/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+const EMOJIS = [
+  '😀','😂','😊','😍','🤔','😎','😢','😡',
+  '👍','👎','👏','🙏','🎉','❤️','🔥','✅',
+  '🚀','💡','⚠️','🎫',
+];
+
+interface EmojiPickerProps {
+  onSelect: (emoji: string) => void;
+  onClose: () => void;
+  primaryColor: string;
+}
+
+export const EmojiPicker: React.FC<EmojiPickerProps> = ({ onSelect, onClose, primaryColor }) => (
+  <div style={{
+    position:'absolute', bottom:'100%', right:0,
+    background:'#fff', borderRadius:14,
+    boxShadow:'0 8px 32px rgba(0,0,0,0.18)',
+    padding:'12px', zIndex:100,
+    animation:'cw-fadeUp 0.18s ease',
+    marginBottom:8,
+  }}>
+    {/* Header */}
+    <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:8 }}>
+      <span style={{ fontSize:11, fontWeight:700, color:'#7b8fa1', textTransform:'uppercase', letterSpacing:'0.06em' }}>
+        Emojis
+      </span>
+      <button onClick={onClose} style={{ background:'none', border:'none', cursor:'pointer', padding:2, color:'#7b8fa1', fontSize:14 }}>✕</button>
+    </div>
+    {/* Grid */}
+    <div style={{ display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:4, width:200 }}>
+      {EMOJIS.map(e => (
+        <button
+          key={e}
+          onClick={() => { onSelect(e); onClose(); }}
+          style={{
+            background:'none', border:'none', cursor:'pointer',
+            fontSize:22, padding:'6px', borderRadius:8,
+            transition:'background 0.12s',
+          }}
+          onMouseEnter={el => (el.currentTarget as HTMLElement).style.background = `${primaryColor}15`}
+          onMouseLeave={el => (el.currentTarget as HTMLElement).style.background = 'none'}
+        >{e}</button>
+      ))}
+    </div>
+  </div>
+);

package/src/components/HomeScreen/index.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { WidgetConfig, UserListContext } from '../../types';
+
+interface HomeScreenProps {
+  config: WidgetConfig;
+  onNavigate: (ctx: UserListContext | 'ticket') => void;
+}
+
+export const HomeScreen: React.FC<HomeScreenProps> = ({ config, onNavigate }) => {
+  const showSupport = config.chatType === 'SUPPORT' || config.chatType === 'BOTH';
+  const showChat    = config.chatType === 'CHAT'    || config.chatType === 'BOTH';
+
+  const cards = [
+    showSupport && {
+      key: 'support' as UserListContext,
+      icon: '🛠',
+      title: 'Need Support',
+      subtitle: 'We typically reply in a few minutes',
+      onClick: () => onNavigate('support'),
+    },
+    showChat && {
+      key: 'conversation' as UserListContext,
+      icon: '💬',
+      title: 'New Conversation',
+      subtitle: 'With your colleague',
+      onClick: () => onNavigate('conversation'),
+    },
+    {
+      key: 'ticket',
+      icon: '🎫',
+      title: 'Raise Ticket',
+      subtitle: 'For major changes',
+      onClick: () => onNavigate('ticket'),
+    },
+  ].filter(Boolean) as Array<{ key: string; icon: string; title: string; subtitle: string; onClick: () => void }>;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      {/* Hero */}
+      <div style={{
+        background: `linear-gradient(145deg, ${config.primaryColor}, ${config.primaryColor}dd)`,
+        padding: '36px 24px 52px',
+        flexShrink: 0,
+        position: 'relative',
+        overflow: 'hidden',
+      }}>
+        {/* Decorative circles */}
+        <div style={{ position:'absolute', top:-40, right:-40, width:140, height:140, borderRadius:'50%', background:'rgba(255,255,255,0.07)' }} />
+        <div style={{ position:'absolute', bottom:-20, left:-20, width:90,  height:90,  borderRadius:'50%', background:'rgba(255,255,255,0.05)' }} />
+        <h1 style={{ margin:'0 0 8px', fontSize:26, fontWeight:800, color:'#fff', letterSpacing:'-0.03em' }}>
+          {config.welcomeTitle}
+        </h1>
+        <p style={{ margin:0, fontSize:14, color:'rgba(255,255,255,0.85)', lineHeight:1.6 }}>
+          {config.welcomeSubtitle}
+        </p>
+      </div>
+
+      {/* Cards float over hero */}
+      <div style={{ flex:1, overflowY:'auto', padding:'0 16px 20px', marginTop:-28, display:'flex', flexDirection:'column', gap:10 }}>
+        {cards.map((card, i) => (
+          <button
+            key={card.key}
+            onClick={card.onClick}
+            style={{
+              width:'100%', background:'#fff', border:'none', borderRadius:14,
+              padding:'18px 20px', display:'flex', alignItems:'center',
+              justifyContent:'space-between', cursor:'pointer', textAlign:'left',
+              boxShadow:'0 2px 14px rgba(0,0,0,0.10)',
+              animation:`cw-fadeUp 0.35s ease both`,
+              animationDelay:`${i * 0.08}s`,
+              transition:'transform 0.15s, box-shadow 0.15s',
+            }}
+            onMouseEnter={e => {
+              (e.currentTarget as HTMLElement).style.transform  = 'translateY(-2px)';
+              (e.currentTarget as HTMLElement).style.boxShadow = '0 8px 24px rgba(0,0,0,0.14)';
+            }}
+            onMouseLeave={e => {
+              (e.currentTarget as HTMLElement).style.transform  = 'translateY(0)';
+              (e.currentTarget as HTMLElement).style.boxShadow = '0 2px 14px rgba(0,0,0,0.10)';
+            }}
+          >
+            <div style={{ display:'flex', alignItems:'center', gap:14 }}>
+              <div style={{
+                width:44, height:44, borderRadius:12,
+                backgroundColor:`${config.primaryColor}14`,
+                display:'flex', alignItems:'center', justifyContent:'center',
+                fontSize:20, flexShrink:0,
+              }}>{card.icon}</div>
+              <div>
+                <div style={{ fontWeight:700, fontSize:15, color:'#1a2332', marginBottom:2 }}>{card.title}</div>
+                <div style={{ fontSize:12, color:'#7b8fa1' }}>{card.subtitle}</div>
+              </div>
+            </div>
+            <SendArrow color={config.primaryColor} />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const SendArrow: React.FC<{ color: string }> = ({ color }) => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style={{ flexShrink:0 }}>
+    <path d="M5 12h14M12 5l7 7-7 7" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);

package/src/components/MaintenanceView/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+interface MaintenanceViewProps {
+  primaryColor: string;
+}
+
+export const MaintenanceView: React.FC<MaintenanceViewProps> = ({ primaryColor }) => (
+  <div style={{
+    display: 'flex', flexDirection: 'column', alignItems: 'center',
+    justifyContent: 'center', height: '100%', padding: '32px', textAlign: 'center', gap: 16,
+  }}>
+    <div style={{
+      width: 72, height: 72, borderRadius: '50%',
+      backgroundColor: `${primaryColor}15`,
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+    }}>
+      <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
+        <path d="M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
+          stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    </div>
+    <h3 style={{ margin: 0, fontSize: 17, fontWeight: 800, color: '#1a2332', letterSpacing: '-0.02em' }}>
+      Under Maintenance
+    </h3>
+    <p style={{ margin: 0, fontSize: 14, color: '#7b8fa1', lineHeight: 1.6, maxWidth: 220 }}>
+      Chat is under maintenance. We'll be back shortly!
+    </p>
+    <span style={{
+      display: 'inline-flex', alignItems: 'center', gap: 6,
+      padding: '6px 14px', borderRadius: 20,
+      backgroundColor: '#fff3cd', color: '#856404',
+      fontSize: 12, fontWeight: 700, border: '1px solid #ffc10730',
+    }}>
+      <span style={{ width: 6, height: 6, borderRadius: '50%', backgroundColor: '#ffc107', display: 'inline-block' }} />
+      Temporarily Unavailable
+    </span>
+  </div>
+);