ajaxter-chat 2.0.1 → 3.0.1

package/src/components/TicketScreen/index.tsx

@@ -1,170 +1,124 @@
 import React, { useState } from 'react';
-import { ChatWidgetTheme, Ticket } from '../../types';
-import { mergeTheme } from '../../utils/theme';
+import { Ticket, WidgetConfig } from '../../types';
 
 interface TicketScreenProps {
-  tickets: Ticket[];
-  theme?: ChatWidgetTheme;
-  onRaiseTicket: (title: string, description: string) => void;
+  tickets:       Ticket[];
+  config:        WidgetConfig;
+  onRaiseTicket: (title: string, desc: string, priority: Ticket['priority']) => void;
 }
 
-export const TicketScreen: React.FC<TicketScreenProps> = ({ tickets, theme, onRaiseTicket }) => {
-  const t = mergeTheme(theme);
-  const [showForm, setShowForm] = useState(false);
-  const [title, setTitle] = useState('');
-  const [desc,  setDesc]  = useState('');
+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());
-    setTitle(''); setDesc(''); setShowForm(false);
+    onRaiseTicket(title.trim(), desc.trim(), priority);
+    setTitle(''); setDesc(''); setPriority('medium'); setShowForm(false);
   };
 
-  const statusMeta: Record<Ticket['status'], { label: string; bg: string; color: string }> = {
-    'open':        { label: 'Open',        bg: '#e6faf8', color: t.primaryColor },
-    'in-progress': { label: 'In Progress', bg: '#fffbeb', color: '#d97706' },
-    'resolved':    { label: 'Resolved',    bg: '#f0fdf4', color: '#16a34a' },
-    'closed':      { label: 'Closed',      bg: '#f3f4f6', color: '#6b7280' },
+  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 priorityMeta: Record<Ticket['priority'], { label: string; color: string }> = {
-    low:    { label: '↓ Low',    color: '#6b7280' },
-    medium: { label: '→ Medium', color: '#d97706' },
-    high:   { label: '↑ High',   color: '#dc2626' },
+  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%' }}>
+    <div style={{ display:'flex', flexDirection:'column', height:'100%' }}>
       {/* Header */}
-      <div style={{ backgroundColor: t.primaryColor, padding: '20px 20px 24px', flexShrink: 0 }}>
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+      <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: '20px', fontWeight: 800, color: '#fff', fontFamily: t.fontFamily, letterSpacing: '-0.02em' }}>
-              Tickets
-            </h2>
-            <p style={{ margin: '4px 0 0', fontSize: '13px', color: 'rgba(255,255,255,0.8)', fontFamily: t.fontFamily }}>
-              {tickets.length} ticket{tickets.length !== 1 ? 's' : ''} raised
+            <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.25)', border: 'none', borderRadius: '20px',
-              padding: '8px 16px', color: '#fff', fontWeight: 700, fontSize: '13px',
-              cursor: 'pointer', fontFamily: t.fontFamily, display: 'flex', alignItems: 'center', gap: 5,
-            }}
-          >
-            {showForm ? '✕ Cancel' : '+ New Ticket'}
+          <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 20px',
-          borderBottom: '1px solid #eef0f5',
-          backgroundColor: '#fafcff',
-          animation: 'cw-fadeUp 0.2s ease',
-          flexShrink: 0,
-        }}>
-          <input
-            placeholder="Ticket title *"
-            value={title}
-            onChange={e => setTitle(e.target.value)}
-            style={{
-              width: '100%', padding: '10px 14px', borderRadius: 10,
-              border: '1.5px solid #e2e8f0', outline: 'none',
-              fontFamily: t.fontFamily, fontSize: '14px', color: '#1a2332',
-              marginBottom: 10, boxSizing: 'border-box',
-            }}
-            onFocus={e => (e.target.style.borderColor = t.primaryColor)}
-            onBlur={e => (e.target.style.borderColor = '#e2e8f0')}
+        <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 (optional)"
-            value={desc}
-            onChange={e => setDesc(e.target.value)}
-            rows={3}
-            style={{
-              width: '100%', padding: '10px 14px', borderRadius: 10,
-              border: '1.5px solid #e2e8f0', outline: 'none', resize: 'none',
-              fontFamily: t.fontFamily, fontSize: '14px', color: '#1a2332',
-              marginBottom: 10, boxSizing: 'border-box',
-            }}
-            onFocus={e => (e.target.style.borderColor = t.primaryColor)}
-            onBlur={e => (e.target.style.borderColor = '#e2e8f0')}
+          <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')}
           />
-          <button
-            onClick={handleSubmit}
-            disabled={!title.trim()}
-            style={{
-              width: '100%', padding: '11px', borderRadius: 10,
-              backgroundColor: title.trim() ? t.primaryColor : '#e2e8f0',
-              color: title.trim() ? '#fff' : '#9aa3af',
-              border: 'none', cursor: title.trim() ? 'pointer' : 'not-allowed',
-              fontWeight: 700, fontSize: '14px', fontFamily: t.fontFamily,
-              transition: 'background 0.2s',
-            }}
-          >
-            Submit Ticket
-          </button>
+          {/* 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>
       )}
 
-      {/* Ticket List */}
-      <div style={{ flex: 1, overflowY: 'auto' }}>
+      {/* List */}
+      <div style={{ flex:1, overflowY:'auto' }}>
         {tickets.length === 0 ? (
-          <div style={{ padding: '50px 24px', textAlign: 'center', fontFamily: t.fontFamily }}>
-            <div style={{ fontSize: '36px', marginBottom: 12 }}>🎫</div>
-            <div style={{ fontWeight: 700, color: '#1a2332', marginBottom: 6 }}>No tickets yet</div>
-            <div style={{ fontSize: '13px', color: '#7b8fa1' }}>
-              Raise a ticket for major issues or changes
+          <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>
-        ) : (
-          tickets.map((ticket, i) => {
-            const sm = statusMeta[ticket.status];
-            const pm = priorityMeta[ticket.priority];
-            const date = new Date(ticket.createdAt).toLocaleDateString([], { month: 'short', day: 'numeric' });
-            return (
-              <div
-                key={ticket.id}
-                style={{
-                  padding: '14px 20px',
-                  borderBottom: '1px solid #f3f4f6',
-                  fontFamily: t.fontFamily,
-                  animation: `cw-fadeUp 0.3s ease both`,
-                  animationDelay: `${i * 0.05}s`,
-                }}
-              >
-                <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 6 }}>
-                  <span style={{ fontWeight: 700, fontSize: '14px', color: '#1a2332', flex: 1, paddingRight: 12 }}>
-                    {ticket.title}
-                  </span>
-                  <span style={{
-                    fontSize: '10px', fontWeight: 700, padding: '3px 9px', borderRadius: 20,
-                    backgroundColor: sm.bg, color: sm.color, whiteSpace: 'nowrap',
-                    textTransform: 'uppercase', letterSpacing: '0.04em',
-                  }}>
-                    {sm.label}
-                  </span>
-                </div>
-                {ticket.description && (
-                  <div style={{ fontSize: '13px', color: '#7b8fa1', marginBottom: 8, lineHeight: 1.5 }}>
-                    {ticket.description}
-                  </div>
-                )}
-                <div style={{ display: 'flex', gap: 12, fontSize: '11px', color: '#b0bec5' }}>
-                  <span style={{ color: pm.color, fontWeight: 600 }}>{pm.label}</span>
-                  <span>#{ticket.id.slice(-6).toUpperCase()}</span>
-                  <span>{date}</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

@@ -1,181 +1,103 @@
 import React from 'react';
-import { ChatUser, ChatWidgetTheme, UserListContext } from '../../types';
-import { mergeTheme } from '../../utils/theme';
+import { ChatUser, UserListContext } from '../../types';
+import { avatarColor, initials } from '../../utils/chat';
 
 interface UserListScreenProps {
   context: UserListContext;
   users: ChatUser[];
-  loading: boolean;
-  error: string | null;
-  theme?: ChatWidgetTheme;
+  primaryColor: string;
   onBack: () => void;
   onSelectUser: (user: ChatUser) => void;
 }
 
 export const UserListScreen: React.FC<UserListScreenProps> = ({
-  context, users, loading, error, theme, onBack, onSelectUser,
+  context, users, primaryColor, onBack, onSelectUser,
 }) => {
-  const t = mergeTheme(theme);
-  const title = context === 'support' ? 'Need Support' : 'New Conversation';
-  const subtitle = context === 'support'
-    ? 'Choose a support agent'
-    : 'Choose a colleague to chat with';
+  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-slideInRight 0.25s ease' }}>
+    <div style={{ display:'flex', flexDirection:'column', height:'100%', animation:'cw-slideIn 0.22s ease' }}>
       {/* Header */}
-      <div
-        style={{
-          backgroundColor: t.primaryColor,
-          padding: '16px 20px',
-          display: 'flex',
-          alignItems: 'center',
-          gap: '12px',
-          flexShrink: 0,
-        }}
-      >
-        <button
-          onClick={onBack}
-          style={{
-            background: 'rgba(255,255,255,0.2)',
-            border: 'none',
-            borderRadius: '50%',
-            width: '34px',
-            height: '34px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            cursor: 'pointer',
-            flexShrink: 0,
-          }}
-        >
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
-            <path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
-          </svg>
-        </button>
+      <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: '16px', color: '#fff', fontFamily: t.fontFamily }}>
-            {title}
-          </div>
-          <div style={{ fontSize: '12px', color: 'rgba(255,255,255,0.8)', fontFamily: t.fontFamily }}>
-            {subtitle}
-          </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>
 
-      {/* List */}
-      <div style={{ flex: 1, overflowY: 'auto', padding: '8px 0' }}>
-        {loading && <UserListSkeleton />}
-        {error && <ErrorState message={error} color={t.primaryColor} font={t.fontFamily} />}
-        {!loading && !error && users.length === 0 && (
-          <EmptyState color={t.primaryColor} font={t.fontFamily} />
-        )}
-        {!loading && !error && users.map((user, i) => (
-          <UserRow
-            key={user.uid}
-            user={user}
-            index={i}
-            primaryColor={t.primaryColor}
-            fontFamily={t.fontFamily}
-            onClick={() => onSelectUser(user)}
-          />
+      {/* 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>
   );
 };
 
-// ── Sub-components ─────────────────────────────────────────────────────────────
-
-const UserRow: React.FC<{
-  user: ChatUser; index: number;
-  primaryColor: string; fontFamily: string;
-  onClick: () => void;
-}> = ({ user, index, primaryColor, fontFamily, onClick }) => {
-  const initials = user.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
-  const avatarColors = ['#1aaa96','#2563EB','#7C3AED','#D97706','#DC2626','#059669'];
-  const bg = avatarColors[user.name.charCodeAt(0) % avatarColors.length];
-
-  return (
-    <button
-      onClick={onClick}
-      style={{
-        width: '100%',
-        padding: '14px 20px',
-        display: 'flex',
-        alignItems: 'center',
-        gap: '14px',
-        background: 'transparent',
-        border: 'none',
-        borderBottom: '1px solid #f3f4f6',
-        cursor: 'pointer',
-        textAlign: 'left',
-        fontFamily,
-        animation: 'cw-fadeUp 0.3s ease both',
-        animationDelay: `${index * 0.05}s`,
-        transition: 'background 0.15s',
-      }}
-      onMouseEnter={e => (e.currentTarget as HTMLElement).style.background = '#f8fdfc'}
-      onMouseLeave={e => (e.currentTarget as HTMLElement).style.background = 'transparent'}
-    >
-      {/* Avatar */}
-      <div style={{
-        width: '46px', height: '46px', borderRadius: '50%',
-        backgroundColor: bg, flexShrink: 0,
-        display: 'flex', alignItems: 'center', justifyContent: 'center',
-        color: '#fff', fontWeight: 700, fontSize: '15px',
-      }}>
-        {initials}
-      </div>
-      {/* Info */}
-      <div style={{ flex: 1, minWidth: 0 }}>
-        <div style={{ fontWeight: 700, fontSize: '14px', color: '#1a2332', marginBottom: '2px' }}>
-          {user.name}
-        </div>
-        <div style={{ fontSize: '12px', color: '#7b8fa1', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-          {user.project || user.email}
-        </div>
-      </div>
-      {/* Type badge */}
-      <span style={{
-        fontSize: '10px', fontWeight: 700, padding: '3px 9px',
-        borderRadius: '20px', textTransform: 'uppercase', letterSpacing: '0.05em',
-        backgroundColor: user.type === 'developer' ? '#e6faf8' : '#eff6ff',
-        color: user.type === 'developer' ? primaryColor : '#2563EB',
-        border: `1px solid ${user.type === 'developer' ? primaryColor + '30' : '#2563eb30'}`,
-      }}>
-        {user.type === 'developer' ? 'Dev' : 'User'}
-      </span>
-    </button>
-  );
-};
-
-const UserListSkeleton: React.FC = () => (
-  <>
-    {[1,2,3,4].map(i => (
-      <div key={i} style={{ padding: '14px 20px', display: 'flex', gap: '14px', alignItems: 'center' }}>
-        <div style={{ width: 46, height: 46, borderRadius: '50%', background: '#f0f0f0', flexShrink: 0 }} />
-        <div style={{ flex: 1 }}>
-          <div style={{ height: 13, width: '55%', background: '#f0f0f0', borderRadius: 6, marginBottom: 7 }} />
-          <div style={{ height: 11, width: '38%', background: '#f0f0f0', borderRadius: 6 }} />
-        </div>
-      </div>
-    ))}
-  </>
-);
-
-const ErrorState: React.FC<{ message: string; color: string; font: string }> = ({ message, color, font }) => (
-  <div style={{ padding: '40px 24px', textAlign: 'center', fontFamily: font }}>
-    <div style={{ fontSize: '32px', marginBottom: '10px' }}>⚠️</div>
-    <div style={{ fontWeight: 700, color: '#1a2332', marginBottom: '6px' }}>Could not load users</div>
-    <div style={{ fontSize: '13px', color: '#7b8fa1' }}>{message}</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 EmptyState: React.FC<{ color: string; font: string }> = ({ color, font }) => (
-  <div style={{ padding: '40px 24px', textAlign: 'center', fontFamily: font }}>
-    <div style={{ fontSize: '32px', marginBottom: '10px' }}>👥</div>
-    <div style={{ fontWeight: 700, color: '#1a2332', marginBottom: '6px' }}>No users available</div>
-    <div style={{ fontSize: '13px', color: '#7b8fa1' }}>Check back later</div>
+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

@@ -1,4 +1,8 @@
-import { ChatConfig, ChatStatus, ChatType } from '../types';
+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) {
@@ -12,35 +16,25 @@ function getEnv(key: string): string | undefined {
   return undefined;
 }
 
-function validateStatus(v?: string): ChatStatus {
-  if (v === 'ACTIVE' || v === 'DISABLE' || v === 'MAINTENANCE') return v;
-  console.warn(`[ChatWidget] Invalid CHAT_STATUS "${v}". Defaulting to DISABLE.`);
-  return 'DISABLE';
-}
-
-function validateChatType(v?: string): ChatType {
-  if (v === 'SUPPORT' || v === 'CHAT' || v === 'BOTH') return v;
-  console.warn(`[ChatWidget] Invalid CHAT_TYPE "${v}". Defaulting to SUPPORT.`);
-  return 'SUPPORT';
-}
-
-export function loadChatConfig(): ChatConfig {
-  const portStr = getEnv('CHAT_HOST_PORT');
-  const hostPort = portStr ? parseInt(portStr, 10) : null;
-
+export function loadLocalConfig(): LocalEnvConfig {
   return {
-    hostUrl:          getEnv('CHAT_HOST_URL')  ?? 'http://localhost',
-    hostPort,
-    userListEndpoint: getEnv('CHAT_USER_LIST') ?? 'api/users',
-    status:           validateStatus(getEnv('CHAT_STATUS')),
-    chatType:         validateChatType(getEnv('CHAT_TYPE')),
+    apiKey:   getEnv('CHAT_API_KEY')    ?? DEMO_API_KEY,
+    widgetId: getEnv('CHAT_WIDGET_ID')  ?? DEMO_WIDGET_ID,
   };
 }
 
-export function buildUserListUrl(config: ChatConfig): string {
-  const base     = config.hostUrl.replace(/\/$/, '');
-  const endpoint = config.userListEndpoint.replace(/^\//, '');
-  // Port is optional
-  const portPart = config.hostPort ? `:${config.hostPort}` : '';
-  return `${base}${portPart}/${endpoint}`;
+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

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