ajaxter-chat 1.0.3 → 3.0.1

package/src/components/RecentChatsScreen/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { ChatUser, WidgetConfig } from '../../types';
+import { avatarColor, initials, formatTime } from '../../utils/chat';
+
+interface RecentChat {
+  id: string; user: ChatUser; lastMessage: string; lastTime: string; unread: number; isPaused: boolean;
+}
+
+interface RecentChatsScreenProps {
+  chats:         RecentChat[];
+  config:        WidgetConfig;
+  onSelectChat:  (user: ChatUser) => void;
+}
+
+export const RecentChatsScreen: React.FC<RecentChatsScreenProps> = ({ chats, config, onSelectChat }) => (
+  <div style={{ display:'flex', flexDirection:'column', height:'100%' }}>
+    <div style={{ background:`linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`, padding:'18px 18px 22px', flexShrink:0 }}>
+      <h2 style={{ margin:0, fontSize:20, fontWeight:800, color:'#fff', letterSpacing:'-0.02em' }}>Recent Chats</h2>
+      <p style={{ margin:'3px 0 0', fontSize:12, color:'rgba(255,255,255,0.8)' }}>Your conversation history</p>
+    </div>
+
+    <div style={{ flex:1, overflowY:'auto' }}>
+      {chats.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 chats yet</div>
+          <div style={{ fontSize:13, color:'#7b8fa1' }}>Start a conversation from home</div>
+        </div>
+      ) : chats.map((chat, i) => (
+        <button key={chat.id} onClick={() => onSelectChat(chat.user)} style={{
+          width:'100%', padding:'13px 16px', display:'flex', alignItems:'center', gap:13,
+          background:'transparent', border:'none', borderBottom:'1px solid #f0f2f5',
+          cursor:'pointer', textAlign:'left', animation:`cw-fadeUp 0.28s ease both`, animationDelay:`${i*0.05}s`,
+          transition:'background 0.14s',
+        }}
+        onMouseEnter={e=>(e.currentTarget as HTMLElement).style.background='#f8faff'}
+        onMouseLeave={e=>(e.currentTarget as HTMLElement).style.background='transparent'}
+        >
+          <div style={{ position:'relative', flexShrink:0 }}>
+            <div style={{ width:46, height:46, borderRadius:'50%', backgroundColor:avatarColor(chat.user.name), display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontWeight:700, fontSize:15 }}>
+              {initials(chat.user.name)}
+            </div>
+            {chat.unread > 0 && (
+              <span style={{ position:'absolute', top:-2, right:-2, width:18, height:18, borderRadius:'50%', background:'#ef4444', color:'#fff', fontSize:10, fontWeight:700, display:'flex', alignItems:'center', justifyContent:'center', border:'2px solid #fff' }}>
+                {chat.unread}
+              </span>
+            )}
+          </div>
+          <div style={{ flex:1, minWidth:0 }}>
+            <div style={{ display:'flex', justifyContent:'space-between', marginBottom:3 }}>
+              <span style={{ fontWeight:700, fontSize:14, color:'#1a2332' }}>{chat.user.name}</span>
+              <span style={{ fontSize:11, color:'#b0bec5' }}>{formatTime(chat.lastTime)}</span>
+            </div>
+            <div style={{ fontSize:13, color:'#7b8fa1', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', display:'flex', alignItems:'center', gap:5 }}>
+              {chat.isPaused && <span style={{ fontSize:10, background:'#fef3c7', color:'#92400e', padding:'1px 5px', borderRadius:4, fontWeight:700 }}>PAUSED</span>}
+              {chat.lastMessage}
+            </div>
+          </div>
+        </button>
+      ))}
+    </div>
+  </div>
+);

package/src/components/Tabs/BottomTabs.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { BottomTab } from '../../types';
+
+interface BottomTabsProps {
+  active:       BottomTab;
+  onChange:     (tab: BottomTab) => void;
+  primaryColor: string;
+  onBlockList:  () => void;
+}
+
+export const BottomTabs: React.FC<BottomTabsProps> = ({ active, onChange, primaryColor, onBlockList }) => {
+  const tabs: { key: BottomTab; label: string; Icon: React.FC<{ a: boolean; c: string }> }[] = [
+    { key: 'home',    label: 'Home',    Icon: HomeIcon    },
+    { key: 'chats',   label: 'Chats',   Icon: ChatsIcon   },
+    { key: 'tickets', label: 'Tickets', Icon: TicketsIcon },
+  ];
+
+  return (
+    <div style={{
+      display: 'flex', borderTop: '1px solid #eef0f5',
+      backgroundColor: '#fff', flexShrink: 0,
+    }}>
+      {tabs.map(tab => {
+        const isActive = active === tab.key;
+        return (
+          <button
+            key={tab.key}
+            onClick={() => onChange(tab.key)}
+            style={{
+              flex: 1, padding: '10px 0 8px',
+              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
+              background: 'transparent', border: 'none', cursor: 'pointer',
+              fontSize: '10px', fontWeight: isActive ? 700 : 500,
+              color: isActive ? primaryColor : '#9aa3af',
+              borderTop: isActive ? `2px solid ${primaryColor}` : '2px solid transparent',
+              transition: 'color 0.15s',
+              fontFamily: 'inherit',
+            }}
+          >
+            <tab.Icon a={isActive} c={isActive ? primaryColor : '#b0bec5'} />
+            {tab.label}
+          </button>
+        );
+      })}
+
+      {/* Block list icon */}
+      <button
+        onClick={onBlockList}
+        style={{
+          padding: '10px 14px 8px',
+          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
+          background: 'transparent', border: 'none', cursor: 'pointer',
+          fontSize: '10px', fontWeight: 500, color: '#9aa3af',
+          borderTop: '2px solid transparent',
+          transition: 'color 0.15s', fontFamily: 'inherit',
+        }}
+        title="Block List"
+      >
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+          <circle cx="12" cy="12" r="10" stroke="#b0bec5" strokeWidth="1.8" />
+          <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" stroke="#b0bec5" strokeWidth="1.8" strokeLinecap="round" />
+        </svg>
+        Blocked
+      </button>
+    </div>
+  );
+};
+
+const HomeIcon: React.FC<{ a: boolean; c: string }> = ({ a, c }) => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+    <path d="M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H4a1 1 0 01-1-1V9.5z"
+      stroke={c} strokeWidth={a ? 2.2 : 1.8} fill={a ? `${c}20` : 'none'} strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M9 21V12h6v9" stroke={c} strokeWidth={a ? 2.2 : 1.8} strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+const ChatsIcon: React.FC<{ a: boolean; c: string }> = ({ a, c }) => (
+  <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={c} strokeWidth={a ? 2.2 : 1.8} fill={a ? `${c}20` : 'none'} strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+const TicketsIcon: React.FC<{ a: boolean; c: string }> = ({ a, c }) => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+    <path d="M15 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V9l-4-4z"
+      stroke={c} strokeWidth={a ? 2.2 : 1.8} fill={a ? `${c}20` : 'none'} strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M15 5v4h4M9 13h6M9 17h4" stroke={c} strokeWidth={a ? 2.2 : 1.8} strokeLinecap="round" />
+  </svg>
+);

package/src/components/TicketScreen/index.tsx

@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import { Ticket, WidgetConfig } from '../../types';
+
+interface TicketScreenProps {
+  tickets:       Ticket[];
+  config:        WidgetConfig;
+  onRaiseTicket: (title: string, desc: string, priority: Ticket['priority']) => void;
+}
+
+export const TicketScreen: React.FC<TicketScreenProps> = ({ tickets, config, onRaiseTicket }) => {
+  const [showForm,  setShowForm]  = useState(false);
+  const [title,     setTitle]     = useState('');
+  const [desc,      setDesc]      = useState('');
+  const [priority,  setPriority]  = useState<Ticket['priority']>('medium');
+
+  const handleSubmit = () => {
+    if (!title.trim()) return;
+    onRaiseTicket(title.trim(), desc.trim(), priority);
+    setTitle(''); setDesc(''); setPriority('medium'); setShowForm(false);
+  };
+
+  const sm: Record<Ticket['status'], { label: string; bg: string; color: string }> = {
+    open:          { label:'Open',        bg:`${config.primaryColor}14`, color: config.primaryColor },
+    'in-progress': { label:'In Progress', bg:'#fef3c7',                  color:'#d97706'            },
+    resolved:      { label:'Resolved',    bg:'#f0fdf4',                  color:'#16a34a'            },
+    closed:        { label:'Closed',      bg:'#f3f4f6',                  color:'#6b7280'            },
+  };
+
+  const pm: Record<Ticket['priority'], { label: string; color: string }> = {
+    low:    { label:'Low',    color:'#6b7280' },
+    medium: { label:'Medium', color:'#d97706' },
+    high:   { label:'High',   color:'#ef4444' },
+  };
+
+  return (
+    <div style={{ display:'flex', flexDirection:'column', height:'100%' }}>
+      {/* Header */}
+      <div style={{
+        background:`linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`,
+        padding:'18px 18px 22px', flexShrink:0, position:'relative',
+      }}>
+        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
+          <div>
+            <h2 style={{ margin:0, fontSize:20, fontWeight:800, color:'#fff', letterSpacing:'-0.02em' }}>Tickets</h2>
+            <p style={{ margin:'3px 0 0', fontSize:12, color:'rgba(255,255,255,0.8)' }}>
+              {tickets.length} ticket{tickets.length!==1?'s':''} raised
+            </p>
+          </div>
+          <button onClick={() => setShowForm(v => !v)} style={{
+            background:'rgba(255,255,255,0.22)', border:'none', borderRadius:20,
+            padding:'7px 14px', color:'#fff', fontWeight:700, fontSize:13,
+            cursor:'pointer', display:'flex', alignItems:'center', gap:5,
+          }}>
+            {showForm ? '✕ Cancel' : '+ New'}
+          </button>
+        </div>
+      </div>
+
+      {/* New Ticket Form */}
+      {showForm && (
+        <div style={{ padding:'16px', borderBottom:'1px solid #eef0f5', background:'#fafcff', flexShrink:0, animation:'cw-fadeUp 0.2s ease' }}>
+          <input placeholder="Title *" value={title} onChange={e => setTitle(e.target.value)}
+            style={inputStyle(config.primaryColor)} onFocus={e=>(e.target.style.borderColor=config.primaryColor)} onBlur={e=>(e.target.style.borderColor='#e5e7eb')}
+          />
+          <textarea placeholder="Describe the issue…" value={desc} onChange={e => setDesc(e.target.value)} rows={3}
+            style={{ ...inputStyle(config.primaryColor), resize:'none', marginTop:8 }} onFocus={e=>(e.target.style.borderColor=config.primaryColor)} onBlur={e=>(e.target.style.borderColor='#e5e7eb')}
+          />
+          {/* Priority */}
+          <div style={{ display:'flex', gap:8, marginTop:8, marginBottom:12 }}>
+            {(['low','medium','high'] as Ticket['priority'][]).map(p => (
+              <button key={p} onClick={() => setPriority(p)} style={{
+                flex:1, padding:'6px', border:`1.5px solid ${priority===p ? pm[p].color : '#e5e7eb'}`,
+                borderRadius:8, background: priority===p ? pm[p].color+'15' : '#fff',
+                color: pm[p].color, fontWeight:700, fontSize:12, cursor:'pointer', textTransform:'capitalize',
+                transition:'all 0.15s',
+              }}>{pm[p].label}</button>
+            ))}
+          </div>
+          <button onClick={handleSubmit} disabled={!title.trim()} style={{
+            width:'100%', padding:'10px', borderRadius:10, border:'none',
+            background: title.trim() ? config.primaryColor : '#e5e7eb',
+            color: title.trim() ? '#fff' : '#9ca3af',
+            fontWeight:700, fontSize:14, cursor: title.trim() ? 'pointer' : 'not-allowed',
+          }}>Submit Ticket</button>
+        </div>
+      )}
+
+      {/* List */}
+      <div style={{ flex:1, overflowY:'auto' }}>
+        {tickets.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 tickets yet</div>
+            <div style={{ fontSize:13, color:'#7b8fa1' }}>Raise a ticket for major issues</div>
+          </div>
+        ) : tickets.map((t, i) => (
+          <div key={t.id} style={{ padding:'14px 16px', borderBottom:'1px solid #f0f2f5', animation:`cw-fadeUp 0.3s ease both`, animationDelay:`${i*0.05}s` }}>
+            <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', marginBottom:5 }}>
+              <span style={{ fontWeight:700, fontSize:14, color:'#1a2332', flex:1, paddingRight:10 }}>{t.title}</span>
+              <span style={{ fontSize:10, fontWeight:700, padding:'3px 9px', borderRadius:20, backgroundColor:sm[t.status].bg, color:sm[t.status].color, whiteSpace:'nowrap', textTransform:'uppercase', letterSpacing:'0.04em', flexShrink:0 }}>
+                {sm[t.status].label}
+              </span>
+            </div>
+            {t.description && <p style={{ margin:'0 0 7px', fontSize:13, color:'#7b8fa1', lineHeight:1.5 }}>{t.description}</p>}
+            <div style={{ display:'flex', gap:10, fontSize:11, color:'#b0bec5' }}>
+              <span style={{ color:pm[t.priority].color, fontWeight:700 }}>● {pm[t.priority].label}</span>
+              <span>#{t.id}</span>
+              <span>{new Date(t.createdAt).toLocaleDateString([], { month:'short', day:'numeric' })}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+function inputStyle(primaryColor: string): React.CSSProperties {
+  return {
+    width:'100%', padding:'9px 13px', borderRadius:10,
+    border:'1.5px solid #e5e7eb', outline:'none',
+    fontSize:14, color:'#1a2332', boxSizing:'border-box',
+    fontFamily:'inherit', transition:'border-color 0.2s',
+  };
+}

package/src/components/UserListScreen/index.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { ChatUser, UserListContext } from '../../types';
+import { avatarColor, initials } from '../../utils/chat';
+
+interface UserListScreenProps {
+  context: UserListContext;
+  users: ChatUser[];
+  primaryColor: string;
+  onBack: () => void;
+  onSelectUser: (user: ChatUser) => void;
+}
+
+export const UserListScreen: React.FC<UserListScreenProps> = ({
+  context, users, primaryColor, onBack, onSelectUser,
+}) => {
+  const title    = context === 'support' ? 'Need Support' : 'New Conversation';
+  const subtitle = context === 'support' ? 'Choose a support agent' : 'Choose a colleague';
+
+  return (
+    <div style={{ display:'flex', flexDirection:'column', height:'100%', animation:'cw-slideIn 0.22s ease' }}>
+      {/* Header */}
+      <div style={{ background:`linear-gradient(135deg,${primaryColor},${primaryColor}cc)`, padding:'14px 18px', display:'flex', alignItems:'center', gap:12, flexShrink:0 }}>
+        <BackBtn onClick={onBack} />
+        <div>
+          <div style={{ fontWeight:700, fontSize:16, color:'#fff' }}>{title}</div>
+          <div style={{ fontSize:12, color:'rgba(255,255,255,0.8)' }}>{subtitle}</div>
+        </div>
+      </div>
+
+      {/* User list */}
+      <div style={{ flex:1, overflowY:'auto' }}>
+        {users.length === 0 ? (
+          <Empty />
+        ) : users.map((u, i) => (
+          <button
+            key={u.uid}
+            onClick={() => onSelectUser(u)}
+            style={{
+              width:'100%', padding:'13px 18px', display:'flex',
+              alignItems:'center', gap:13, background:'transparent',
+              border:'none', borderBottom:'1px solid #f0f2f5',
+              cursor:'pointer', textAlign:'left',
+              animation:`cw-fadeUp 0.28s ease both`, animationDelay:`${i*0.05}s`,
+              transition:'background 0.14s',
+            }}
+            onMouseEnter={e => (e.currentTarget as HTMLElement).style.background = '#f8faff'}
+            onMouseLeave={e => (e.currentTarget as HTMLElement).style.background = 'transparent'}
+          >
+            {/* Avatar with online dot */}
+            <div style={{ position:'relative', flexShrink:0 }}>
+              <div style={{
+                width:44, height:44, borderRadius:'50%',
+                backgroundColor: avatarColor(u.name),
+                display:'flex', alignItems:'center', justifyContent:'center',
+                color:'#fff', fontWeight:700, fontSize:14,
+              }}>{initials(u.name)}</div>
+              <span style={{
+                position:'absolute', bottom:1, right:1,
+                width:11, height:11, borderRadius:'50%', border:'2px solid #fff',
+                backgroundColor: u.status==='online' ? '#22c55e' : u.status==='away' ? '#f59e0b' : '#d1d5db',
+              }} />
+            </div>
+            {/* Info */}
+            <div style={{ flex:1, minWidth:0 }}>
+              <div style={{ fontWeight:700, fontSize:14, color:'#1a2332', marginBottom:2 }}>{u.name}</div>
+              <div style={{ fontSize:12, color:'#7b8fa1', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
+                {u.designation} · {u.project}
+              </div>
+            </div>
+            {/* Type badge */}
+            <span style={{
+              fontSize:10, fontWeight:700, padding:'3px 9px', borderRadius:20,
+              textTransform:'uppercase', letterSpacing:'0.05em', flexShrink:0,
+              background: u.type==='developer' ? `${primaryColor}15` : '#f0fdf4',
+              color:      u.type==='developer' ? primaryColor          : '#16a34a',
+              border:`1px solid ${u.type==='developer' ? primaryColor+'30' : '#16a34a30'}`,
+            }}>{u.type==='developer' ? 'Dev' : 'User'}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const BackBtn: React.FC<{ onClick: () => void }> = ({ onClick }) => (
+  <button onClick={onClick} style={{
+    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,
+  }}>
+    <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>
+);
+
+const Empty: React.FC = () => (
+  <div style={{ padding:'50px 24px', textAlign:'center' }}>
+    <div style={{ fontSize:36, marginBottom:10 }}>👥</div>
+    <div style={{ fontWeight:700, color:'#1a2332', marginBottom:6 }}>No users available</div>
+    <div style={{ fontSize:13, color:'#7b8fa1' }}>Check back later</div>
+  </div>
+);

package/src/config/index.ts

@@ -0,0 +1,40 @@
+import { LocalEnvConfig, RemoteChatData } from '../types';
+
+const REMOTE_URL = 'https://window.mscorpres.com/TEST/chatData.json';
+const DEMO_API_KEY   = 'demo1234';
+const DEMO_WIDGET_ID = 'demo';
+
+function getEnv(key: string): string | undefined {
+  if (typeof process !== 'undefined' && process.env) {
+    return (
+      process.env[`NEXT_PUBLIC_${key}`] ??
+      process.env[`REACT_APP_${key}`] ??
+      process.env[key] ??
+      undefined
+    );
+  }
+  return undefined;
+}
+
+export function loadLocalConfig(): LocalEnvConfig {
+  return {
+    apiKey:   getEnv('CHAT_API_KEY')    ?? DEMO_API_KEY,
+    widgetId: getEnv('CHAT_WIDGET_ID')  ?? DEMO_WIDGET_ID,
+  };
+}
+
+export async function fetchRemoteChatData(
+  apiKey: string,
+  widgetId: string
+): Promise<RemoteChatData> {
+  const url = REMOTE_URL;
+  const res = await fetch(url, {
+    headers: {
+      'X-Chat-Api-Key':   apiKey,
+      'X-Chat-Widget-Id': widgetId,
+      'Content-Type':     'application/json',
+    },
+  });
+  if (!res.ok) throw new Error(`Failed to load chat config: ${res.status}`);
+  return res.json() as Promise<RemoteChatData>;
+}

package/src/hooks/useChat.ts

@@ -0,0 +1,48 @@
+import { useState, useCallback } from 'react';
+import { ChatMessage, ChatUser } from '../types';
+
+export function useChat(initialMessages: ChatMessage[] = []) {
+  const [messages,   setMessages]   = useState<ChatMessage[]>(initialMessages);
+  const [activeUser, setActiveUser] = useState<ChatUser | null>(null);
+  const [isPaused,   setIsPaused]   = useState(false);
+  const [isReported, setIsReported] = useState(false);
+
+  const selectUser = useCallback((user: ChatUser, history: ChatMessage[] = []) => {
+    setActiveUser(user);
+    setMessages(history);
+    setIsPaused(false);
+    setIsReported(false);
+    // TODO: socket.emit('join', { roomId: user.uid });
+    // TODO: socket.on('message', msg => setMessages(prev => [...prev, msg]));
+  }, []);
+
+  const sendMessage = useCallback((
+    text: string,
+    type: ChatMessage['type'] = 'text',
+    extra: Partial<ChatMessage> = {}
+  ) => {
+    if (!activeUser || isPaused) return;
+    const msg: ChatMessage = {
+      id:         `msg_${Date.now()}_${Math.random().toString(36).slice(2)}`,
+      senderId:   'me',
+      receiverId: activeUser.uid,
+      text,
+      timestamp:  new Date().toISOString(),
+      type,
+      status:     'sent',
+      ...extra,
+    };
+    setMessages(prev => [...prev, msg]);
+    // TODO: socket.emit('message', msg);
+  }, [activeUser, isPaused]);
+
+  const togglePause   = useCallback(() => setIsPaused(p => !p), []);
+  const reportChat    = useCallback(() => { setIsReported(true); /* TODO: API call */ }, []);
+  const clearChat     = useCallback(() => { setMessages([]); setActiveUser(null); }, []);
+
+  return {
+    messages, activeUser, isPaused, isReported,
+    selectUser, sendMessage, togglePause, reportChat, clearChat,
+    setMessages,
+  };
+}

package/src/hooks/useRemoteConfig.ts

@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react';
+import { RemoteChatData } from '../types';
+import { fetchRemoteChatData } from '../config';
+
+export function useRemoteConfig(apiKey: string, widgetId: string) {
+  const [data,    setData]    = useState<RemoteChatData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error,   setError]   = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    fetchRemoteChatData(apiKey, widgetId)
+      .then(d  => { if (!cancelled) { setData(d); setLoading(false); } })
+      .catch(e => { if (!cancelled) { setError(e.message); setLoading(false); } });
+    return () => { cancelled = true; };
+  }, [apiKey, widgetId]);
+
+  return { data, loading, error };
+}

package/src/hooks/useWebRTC.ts

@@ -0,0 +1,130 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { CallSession, CallState, ChatUser } from '../types';
+
+const ICE_SERVERS: RTCIceServer[] = [
+  { urls: 'stun:stun.l.google.com:19302' },
+  { urls: 'stun:stun1.l.google.com:19302' },
+];
+
+export function useWebRTC() {
+  const [session, setSession] = useState<CallSession>({
+    state:     'idle',
+    peer:      null,
+    startedAt: null,
+    isMuted:   false,
+    isCameraOn: false,
+  });
+
+  const pcRef         = useRef<RTCPeerConnection | null>(null);
+  const localStream   = useRef<MediaStream | null>(null);
+  const localVideoRef = useRef<HTMLVideoElement | null>(null);
+  const remoteVideoRef = useRef<HTMLVideoElement | null>(null);
+
+  const updateSession = (patch: Partial<CallSession>) =>
+    setSession(prev => ({ ...prev, ...patch }));
+
+  /** Start an outgoing call */
+  const startCall = useCallback(async (peer: ChatUser, 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: RTCSessionDescriptionInit,
+    peer: ChatUser,
+    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(() => {
+    localStream.current?.getTracks().forEach(t => t.stop());
+    pcRef.current?.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(() => () => {
+    localStream.current?.getTracks().forEach(t => t.stop());
+    pcRef.current?.close();
+  }, []);
+
+  return {
+    session,
+    localVideoRef,
+    remoteVideoRef,
+    startCall,
+    acceptCall,
+    endCall,
+    toggleMute,
+    toggleCamera,
+  };
+}

package/src/index.ts

@@ -0,0 +1,29 @@
+export { ChatWidget, default } from './components/ChatWidget';
+export { HomeScreen }         from './components/HomeScreen';
+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 { EmojiPicker }        from './components/EmojiPicker';
+
+export { useChat }            from './hooks/useChat';
+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';