ajaxter-chat 2.0.1 → 3.0.3

package/src/components/ChatScreen/index.tsx

@@ -1,159 +1,297 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { ChatMessage, ChatUser, ChatWidgetTheme } from '../../types';
-import { mergeTheme } from '../../utils/theme';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { ChatMessage, ChatUser, WidgetConfig } from '../../types';
+import { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText } from '../../utils/chat';
+import { EmojiPicker } from '../EmojiPicker';
 
 interface ChatScreenProps {
-  activeUser: ChatUser;
-  messages: ChatMessage[];
-  onSend: (text: string) => void;
-  onBack: () => void;
-  onClose: () => void;
-  theme?: ChatWidgetTheme;
+  activeUser:   ChatUser;
+  messages:     ChatMessage[];
+  config:       WidgetConfig;
+  isPaused:     boolean;
+  isReported:   boolean;
+  isBlocked:    boolean;
+  onSend:       (text: string, type?: ChatMessage['type'], extra?: Partial<ChatMessage>) => void;
+  onBack:       () => void;
+  onClose:      () => void;
+  onTogglePause:() => void;
+  onReport:     () => void;
+  onBlock:      () => void;
+  onStartCall:  (withVideo: boolean) => void;
 }
 
 export const ChatScreen: React.FC<ChatScreenProps> = ({
-  activeUser, messages, onSend, onBack, onClose, theme,
+  activeUser, messages, config, isPaused, isReported, isBlocked,
+  onSend, onBack, onClose, onTogglePause, onReport, onBlock, onStartCall,
 }) => {
-  const t = mergeTheme(theme);
-  const [text, setText] = useState('');
-  const endRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [text,          setText]         = useState('');
+  const [showEmoji,     setShowEmoji]    = useState(false);
+  const [showMenu,      setShowMenu]     = useState(false);
+  const [isRecording,   setIsRecording]  = useState(false);
+  const [recordSec,     setRecordSec]    = useState(0);
+  const [showConfirm,   setShowConfirm]  = useState<'report'|'block'|'pause'|null>(null);
 
-  useEffect(() => { endRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]);
+  const endRef        = useRef<HTMLDivElement>(null);
+  const inputRef      = useRef<HTMLTextAreaElement>(null);
+  const fileRef       = useRef<HTMLInputElement>(null);
+  const recordTimer   = useRef<ReturnType<typeof setInterval> | null>(null);
+  const mediaRecorder = useRef<MediaRecorder | null>(null);
 
-  const handleSend = () => {
-    if (!text.trim()) return;
-    onSend(text);
+  useEffect(() => { endRef.current?.scrollIntoView({ behavior:'smooth' }); }, [messages]);
+
+  const handleSend = useCallback(() => {
+    if (!text.trim() || isPaused || isBlocked) return;
+    onSend(text.trim());
     setText('');
     inputRef.current?.focus();
-  };
+  }, [text, isPaused, isBlocked, onSend]);
 
   const handleKey = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(); }
   };
 
-  const initials = activeUser.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+  // Voice recording
+  const startRecording = async () => {
+    if (isPaused || isBlocked) return;
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    const mr = new MediaRecorder(stream);
+    mediaRecorder.current = mr;
+    const chunks: BlobPart[] = [];
+    mr.ondataavailable = e => chunks.push(e.data);
+    mr.onstop = () => {
+      stream.getTracks().forEach(t => t.stop());
+      // In production: upload blob, get URL, then send as voice message
+      onSend('[Voice Message]', 'voice', { voiceDuration: recordSec });
+      setRecordSec(0);
+    };
+    mr.start();
+    setIsRecording(true);
+    recordTimer.current = setInterval(() => setRecordSec(s => s + 1), 1000);
+  };
+
+  const stopRecording = () => {
+    mediaRecorder.current?.stop();
+    if (recordTimer.current) clearInterval(recordTimer.current);
+    setIsRecording(false);
+  };
+
+  // Attachment
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file || isPaused || isBlocked) return;
+    onSend(`[Attachment: ${file.name}]`, 'attachment', {
+      attachmentName: file.name,
+      attachmentSize: `${(file.size / 1024).toFixed(1)} KB`,
+    });
+    e.target.value = '';
+  };
+
+  // Download transcript
+  const handleTranscript = () => {
+    const content = generateTranscript(messages, activeUser);
+    downloadText(content, `chat-${activeUser.name.replace(/\s+/g,'_')}-${Date.now()}.txt`);
+    setShowMenu(false);
+  };
+
+  // Confirm actions
+  const handleConfirm = (action: 'report'|'block'|'pause') => {
+    setShowConfirm(null); setShowMenu(false);
+    if (action === 'report') onReport();
+    if (action === 'block')  onBlock();
+    if (action === 'pause')  onTogglePause();
+  };
+
+  const peerAvatar = avatarColor(activeUser.name);
+  const peerInit   = initials(activeUser.name);
+
+  // Group messages by date
+  const grouped = groupByDate(messages);
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideInRight 0.25s ease' }}>
-      {/* Teal header */}
+    <div style={{ display:'flex', flexDirection:'column', height:'100%', animation:'cw-slideIn 0.22s ease', position:'relative' }}>
+
+      {/* ── Header ── */}
       <div style={{
-        backgroundColor: t.primaryColor,
-        padding: '14px 18px',
-        display: 'flex',
-        alignItems: 'center',
-        gap: '10px',
-        flexShrink: 0,
+        background:`linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`,
+        padding:'12px 14px', display:'flex', alignItems:'center', gap:10, flexShrink:0,
       }}>
-        <button onClick={onBack} style={iconBtnStyle}>
-          <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" />
+        {/* hamburger/back */}
+        <button onClick={onBack} style={hdrBtn}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+            <line x1="3" y1="6"  x2="21" y2="6"  stroke="#fff" strokeWidth="2.2" strokeLinecap="round"/>
+            <line x1="3" y1="12" x2="21" y2="12" stroke="#fff" strokeWidth="2.2" strokeLinecap="round"/>
+            <line x1="3" y1="18" x2="21" y2="18" stroke="#fff" strokeWidth="2.2" strokeLinecap="round"/>
           </svg>
         </button>
 
-        <div style={{
-          width: 36, height: 36, borderRadius: '50%',
-          backgroundColor: 'rgba(255,255,255,0.25)',
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-          fontWeight: 700, fontSize: '13px', color: '#fff', flexShrink: 0,
-        }}>
-          {initials}
+        <div style={{ width:36, height:36, borderRadius:'50%', backgroundColor:peerAvatar, display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontWeight:700, fontSize:13, flexShrink:0, position:'relative' }}>
+          {peerInit}
+          <span style={{ position:'absolute', bottom:0, right:0, width:9, height:9, borderRadius:'50%', border:'2px solid', borderColor:'transparent', backgroundColor: activeUser.status==='online'?'#22c55e':activeUser.status==='away'?'#f59e0b':'#9ca3af' }} />
         </div>
 
-        <div style={{ flex: 1, minWidth: 0 }}>
-          <div style={{ fontWeight: 700, fontSize: '14px', color: '#fff', fontFamily: t.fontFamily }}>
-            {activeUser.name}
-          </div>
-          <div style={{ fontSize: '11px', color: 'rgba(255,255,255,0.8)', display: 'flex', alignItems: 'center', gap: 4 }}>
-            <span style={{ width: 6, height: 6, borderRadius: '50%', backgroundColor: '#a8f0c6', display: 'inline-block' }} />
-            Online
-          </div>
+        <div style={{ flex:1, minWidth:0 }}>
+          <div style={{ fontWeight:700, fontSize:14, color:'#fff', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{activeUser.name}</div>
+          <div style={{ fontSize:11, color:'rgba(255,255,255,0.8)' }}>{activeUser.designation}</div>
         </div>
 
-        <button onClick={onClose} style={iconBtnStyle}>
+        {/* Title "Support" */}
+        <span style={{ fontSize:14, fontWeight:700, color:'#fff', opacity:0.9 }}>Support</span>
+
+        {/* Call button */}
+        {config.allowWebCall && (
+          <button onClick={() => onStartCall(false)} style={hdrBtn} title="Voice Call">
+            <svg width="17" height="17" 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"/>
+            </svg>
+          </button>
+        )}
+
+        {/* Maximize/expand icon */}
+        <button style={hdrBtn} title="Fullscreen">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-            <path d="M18 6L6 18M6 6l12 12" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" />
+            <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" strokeLinecap="round"/>
           </svg>
         </button>
       </div>
 
-      {/* Messages area */}
-      <div style={{
-        flex: 1, overflowY: 'auto', padding: '18px 16px',
-        display: 'flex', flexDirection: 'column', gap: '10px',
-        backgroundColor: '#f7f8fc',
-      }}>
+      {/* ── Paused / Blocked / Reported banners ── */}
+      {isPaused && (
+        <div style={{ background:'#fef3c7', padding:'8px 16px', fontSize:12, fontWeight:600, color:'#92400e', textAlign:'center', flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center', gap:6 }}>
+          ⏸ Chat is paused — users cannot send messages
+          <button onClick={onTogglePause} style={{ background:'#92400e', color:'#fff', border:'none', borderRadius:6, padding:'2px 8px', fontSize:11, cursor:'pointer', marginLeft:4 }}>Resume</button>
+        </div>
+      )}
+      {isBlocked && (
+        <div style={{ background:'#fee2e2', padding:'8px 16px', fontSize:12, fontWeight:600, color:'#991b1b', textAlign:'center', flexShrink:0 }}>
+          🚫 This user is blocked
+        </div>
+      )}
+      {isReported && (
+        <div style={{ background:'#fef3c7', padding:'6px 16px', fontSize:11, color:'#92400e', textAlign:'center', flexShrink:0 }}>
+          ⚠️ This chat has been reported
+        </div>
+      )}
+
+      {/* ── "Enter your details" card (ticket chat body placeholder) ── */}
+      <div style={{ padding:'14px 14px 0', flexShrink:0 }}>
+        <div style={{
+          background:`linear-gradient(135deg, ${config.primaryColor}, ${config.primaryColor}cc)`,
+          borderRadius:12, padding:'14px 16px',
+          display:'flex', alignItems:'center', gap:12, cursor:'pointer',
+        }}>
+          <div style={{ width:32, height:32, borderRadius:'50%', background:'rgba(255,255,255,0.25)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
+            <span style={{ fontSize:16 }}>❓</span>
+          </div>
+          <div>
+            <div style={{ fontWeight:700, fontSize:14, color:'#fff' }}>Enter your details</div>
+            <div style={{ fontSize:12, color:'rgba(255,255,255,0.85)' }}>Click here to provide your information</div>
+          </div>
+        </div>
+      </div>
+
+      {/* ── Messages ── */}
+      <div style={{ flex:1, overflowY:'auto', padding:'14px', display:'flex', flexDirection:'column', gap:10, background:'#f8f9fc' }}
+        className="cw-scroll"
+      >
+        {grouped.map(({ date, msgs }) => (
+          <React.Fragment key={date}>
+            <DateDivider label={date} />
+            {msgs.map(msg => (
+              <Bubble key={msg.id} msg={msg} peer={activeUser} primaryColor={config.primaryColor} />
+            ))}
+          </React.Fragment>
+        ))}
         {messages.length === 0 && (
-          <div style={{
-            margin: 'auto', textAlign: 'center',
-            fontSize: '13px', color: '#b0bec5',
-            fontFamily: t.fontFamily,
-          }}>
-            <div style={{ fontSize: '28px', marginBottom: 8 }}>💬</div>
-            Say hi to {activeUser.name}!
+          <div style={{ margin:'auto', textAlign:'center', color:'#c4cad4', fontSize:13 }}>
+            <div style={{ fontSize:28, marginBottom:8 }}>💬</div>
+            Say hello to {activeUser.name}!
           </div>
         )}
-        {messages.map(msg => (
-          <Bubble key={msg.id} msg={msg} primaryColor={t.primaryColor} font={t.fontFamily} />
-        ))}
         <div ref={endRef} />
       </div>
 
-      {/* Input bar — matching image 2 exactly */}
-      <div style={{
-        borderTop: '1px solid #eef0f5',
-        padding: '10px 14px',
-        backgroundColor: '#fff',
-        display: 'flex',
-        alignItems: 'flex-end',
-        gap: '10px',
-        flexShrink: 0,
-      }}>
-        <textarea
-          ref={inputRef}
-          value={text}
-          onChange={e => setText(e.target.value)}
-          onKeyDown={handleKey}
-          placeholder="Type and press [enter].."
-          rows={1}
-          style={{
-            flex: 1, resize: 'none', border: 'none', outline: 'none',
-            fontFamily: t.fontFamily, fontSize: '14px', lineHeight: '1.5',
-            maxHeight: '80px', overflowY: 'auto', color: '#1a2332',
-            padding: '6px 0', backgroundColor: 'transparent',
-          }}
-        />
-        {/* Action icons: like, attachment, emoji — matching image 2 */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0 }}>
-          <IconBtn onClick={() => {}} title="Reaction">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
-              <path d="M14 9h.01M10 9h.01M12 2a10 10 0 100 20A10 10 0 0012 2zm0 14s-4-1.5-4-4" stroke="#9aa3af" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-              <path d="M8 15s1.5 2 4 2 4-2 4-2" stroke="#9aa3af" strokeWidth="1.8" strokeLinecap="round"/>
-            </svg>
-          </IconBtn>
-          <IconBtn onClick={() => {}} title="Attach">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
-              <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66L9.41 17.41a2 2 0 01-2.83-2.83l8.49-8.48" stroke="#9aa3af" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-            </svg>
-          </IconBtn>
-          <IconBtn onClick={() => {}} title="Emoji">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
-              <circle cx="12" cy="12" r="10" stroke="#9aa3af" strokeWidth="1.8"/>
-              <path d="M8 14s1.5 2 4 2 4-2 4-2" stroke="#9aa3af" strokeWidth="1.8" strokeLinecap="round"/>
-              <line x1="9" y1="9" x2="9.01" y2="9" stroke="#9aa3af" strokeWidth="2.5" strokeLinecap="round"/>
-              <line x1="15" y1="9" x2="15.01" y2="9" stroke="#9aa3af" strokeWidth="2.5" strokeLinecap="round"/>
-            </svg>
-          </IconBtn>
+      {/* ── Input bar ── */}
+      <div style={{ borderTop:'1px solid #eef0f5', padding:'10px 14px', background:'#fff', flexShrink:0, position:'relative' }}>
+
+        {/* Emoji picker */}
+        {showEmoji && config.allowEmoji && (
+          <EmojiPicker
+            primaryColor={config.primaryColor}
+            onSelect={e => setText(t => t + e)}
+            onClose={() => setShowEmoji(false)}
+          />
+        )}
+
+        {/* Recording indicator */}
+        {isRecording && (
+          <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8, padding:'6px 12px', background:'#fee2e2', borderRadius:8 }}>
+            <span style={{ width:8, height:8, borderRadius:'50%', background:'#ef4444', display:'inline-block', animation:'cw-pulse 1s infinite' }} />
+            <span style={{ fontSize:13, color:'#991b1b', fontWeight:600 }}>Recording {recordSec}s</span>
+            <button onClick={stopRecording} style={{ marginLeft:'auto', background:'#ef4444', color:'#fff', border:'none', borderRadius:6, padding:'3px 10px', fontSize:12, cursor:'pointer' }}>Stop</button>
+          </div>
+        )}
+
+        <div style={{ display:'flex', alignItems:'flex-end', gap:8 }}>
+          <textarea
+            ref={inputRef}
+            value={text}
+            onChange={e => setText(e.target.value)}
+            onKeyDown={handleKey}
+            placeholder={isPaused || isBlocked ? 'Chat is unavailable' : 'Message...'}
+            disabled={isPaused || isBlocked || isRecording}
+            rows={1}
+            style={{
+              flex:1, resize:'none', border:'1.5px solid #e5e7eb',
+              borderRadius:22, padding:'9px 14px',
+              fontSize:14, outline:'none', lineHeight:1.5,
+              maxHeight:80, overflowY:'auto', color:'#1a2332',
+              background: isPaused || isBlocked ? '#f9fafb' : '#fff',
+              transition:'border-color 0.2s',
+              fontFamily:'inherit',
+            }}
+            onFocus={e  => (e.target.style.borderColor = config.primaryColor)}
+            onBlur={e   => (e.target.style.borderColor = '#e5e7eb')}
+          />
+
+          {/* Emoji */}
+          {config.allowEmoji && (
+            <ActionBtn onClick={() => setShowEmoji(v => !v)} title="Emoji">
+              <svg width="19" height="19" viewBox="0 0 24 24" fill="none">
+                <circle cx="12" cy="12" r="10" stroke="#9ca3af" strokeWidth="1.8"/>
+                <path d="M8 14s1.5 2 4 2 4-2 4-2" stroke="#9ca3af" strokeWidth="1.8" strokeLinecap="round"/>
+                <circle cx="9" cy="9" r="1" fill="#9ca3af"/><circle cx="15" cy="9" r="1" fill="#9ca3af"/>
+              </svg>
+            </ActionBtn>
+          )}
+
+          {/* Attachment */}
+          {config.allowAttachment && (
+            <>
+              <input ref={fileRef} type="file" style={{ display:'none' }} onChange={handleFileChange} />
+              <ActionBtn onClick={() => fileRef.current?.click()} title="Attach file">
+                <svg width="19" height="19" viewBox="0 0 24 24" fill="none">
+                  <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66L9.41 17.41a2 2 0 01-2.83-2.83l8.49-8.48" stroke="#9ca3af" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+                </svg>
+              </ActionBtn>
+            </>
+          )}
+
+          {/* Voice */}
+          {config.allowVoiceMessage && !isRecording && (
+            <ActionBtn onClick={startRecording} title="Voice message">
+              <svg width="19" height="19" viewBox="0 0 24 24" fill="none">
+                <path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z" stroke="#9ca3af" strokeWidth="1.8" strokeLinecap="round"/>
+                <path d="M19 10v2a7 7 0 01-14 0v-2M12 19v4M8 23h8" stroke="#9ca3af" strokeWidth="1.8" strokeLinecap="round"/>
+              </svg>
+            </ActionBtn>
+          )}
+
+          {/* Send */}
           {text.trim() && (
-            <button
-              onClick={handleSend}
-              style={{
-                width: 36, height: 36, borderRadius: '50%',
-                backgroundColor: t.primaryColor, border: 'none',
-                cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                transition: 'transform 0.15s',
-              }}
-            >
+            <button onClick={handleSend} style={{
+              width:36, height:36, borderRadius:'50%', backgroundColor:config.primaryColor,
+              border:'none', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
+              transition:'transform 0.15s',
+            }}>
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                 <path d="M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
               </svg>
@@ -161,45 +299,171 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
           )}
         </div>
       </div>
+
+      {/* ── 3-dot overflow menu ── */}
+      <div style={{ position:'absolute', top:12, right:52, zIndex:50 }}>
+        <button
+          onClick={() => setShowMenu(v => !v)}
+          style={{ ...hdrBtn, background:'rgba(255,255,255,0.18)' }}
+          title="More options"
+        >
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+            <circle cx="12" cy="5"  r="1.5" fill="#fff"/>
+            <circle cx="12" cy="12" r="1.5" fill="#fff"/>
+            <circle cx="12" cy="19" r="1.5" fill="#fff"/>
+          </svg>
+        </button>
+
+        {showMenu && (
+          <div style={{
+            position:'absolute', top:'100%', right:0, marginTop:4,
+            background:'#fff', borderRadius:12,
+            boxShadow:'0 8px 30px rgba(0,0,0,0.16)',
+            padding:'6px', minWidth:200, zIndex:200,
+            animation:'cw-fadeUp 0.18s ease',
+          }}>
+            {config.allowTranscriptDownload && (
+              <MenuItem icon="📥" label="Download Transcript" onClick={handleTranscript} />
+            )}
+            <MenuItem icon={isPaused ? '▶️' : '⏸'} label={isPaused ? 'Resume Chat' : 'Pause Chat'} onClick={() => { setShowMenu(false); setShowConfirm('pause'); }} />
+            {config.allowReport && !isReported && (
+              <MenuItem icon="⚠️" label="Report Chat"         onClick={() => { setShowMenu(false); setShowConfirm('report'); }} />
+            )}
+            {config.allowBlock && activeUser.type === 'user' && !isBlocked && (
+              <MenuItem icon="🚫" label="Block User"          onClick={() => { setShowMenu(false); setShowConfirm('block'); }} danger />
+            )}
+            <div style={{ borderTop:'1px solid #f0f2f5', margin:'4px 0' }} />
+            <MenuItem icon="✕" label="Close Chat"             onClick={onClose} />
+          </div>
+        )}
+      </div>
+
+      {/* ── Confirm dialog ── */}
+      {showConfirm && (
+        <div style={{
+          position:'absolute', inset:0, background:'rgba(0,0,0,0.45)',
+          display:'flex', alignItems:'center', justifyContent:'center', zIndex:300,
+          borderRadius:'inherit',
+        }}>
+          <div style={{ background:'#fff', borderRadius:16, padding:'24px 20px', width:280, boxShadow:'0 16px 48px rgba(0,0,0,0.22)', animation:'cw-fadeUp 0.2s ease' }}>
+            <div style={{ fontWeight:800, fontSize:16, color:'#1a2332', marginBottom:8 }}>
+              {showConfirm === 'pause'  && (isPaused ? 'Resume Chat?' : 'Pause Chat?')}
+              {showConfirm === 'report' && 'Report this chat?'}
+              {showConfirm === 'block'  && 'Block this user?'}
+            </div>
+            <p style={{ fontSize:13, color:'#7b8fa1', lineHeight:1.6, margin:'0 0 18px' }}>
+              {showConfirm === 'pause'  && (isPaused ? 'The user will be able to send messages again.' : 'The user will not be able to send new messages.')}
+              {showConfirm === 'report' && 'This chat will be flagged for review by the admin team.'}
+              {showConfirm === 'block'  && 'This user will be blocked and added to your block list. You can unblock them later.'}
+            </p>
+            <div style={{ display:'flex', gap:10 }}>
+              <button onClick={() => setShowConfirm(null)} style={{ flex:1, padding:'9px', borderRadius:10, border:'1.5px solid #e5e7eb', background:'#fff', cursor:'pointer', fontSize:13, fontWeight:600, color:'#374151' }}>
+                Cancel
+              </button>
+              <button onClick={() => handleConfirm(showConfirm)} style={{
+                flex:1, padding:'9px', borderRadius:10, border:'none',
+                background: showConfirm==='block' ? '#ef4444' : config.primaryColor,
+                color:'#fff', cursor:'pointer', fontSize:13, fontWeight:700,
+              }}>
+                Confirm
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };
 
-const Bubble: React.FC<{ msg: ChatMessage; primaryColor: string; font: string }> = ({ msg, primaryColor, font }) => {
+// ── Sub-components ─────────────────────────────────────────────────────────────
+
+const Bubble: React.FC<{ msg: ChatMessage; peer: ChatUser; primaryColor: string }> = ({ msg, peer, primaryColor }) => {
   const isMe = msg.senderId === 'me';
-  const time = new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+  const content = msg.type === 'voice' ? (
+    <div style={{ display:'flex', alignItems:'center', gap:8 }}>
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+        <path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z" stroke={isMe?'#fff':'#374151'} strokeWidth="2" strokeLinecap="round"/>
+        <path d="M19 10v2a7 7 0 01-14 0v-2M12 19v4" stroke={isMe?'#fff':'#374151'} strokeWidth="2" strokeLinecap="round"/>
+      </svg>
+      <span>Voice Message {msg.voiceDuration ? `· ${msg.voiceDuration}s` : ''}</span>
+    </div>
+  ) : msg.type === 'attachment' ? (
+    <div style={{ display:'flex', alignItems:'center', gap:8 }}>
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+        <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66L9.41 17.41a2 2 0 01-2.83-2.83l8.49-8.48" stroke={isMe?'#fff':'#374151'} strokeWidth="2" strokeLinecap="round"/>
+      </svg>
+      <div>
+        <div style={{ fontWeight:600 }}>{msg.attachmentName ?? 'File'}</div>
+        {msg.attachmentSize && <div style={{ fontSize:11, opacity:0.75 }}>{msg.attachmentSize}</div>}
+      </div>
+    </div>
+  ) : <span>{msg.text}</span>;
+
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', alignItems: isMe ? 'flex-end' : 'flex-start', gap: 3 }}>
+    <div style={{ display:'flex', flexDirection:'column', alignItems: isMe?'flex-end':'flex-start', gap:3 }}>
       <div style={{
-        maxWidth: '75%', padding: '10px 14px',
+        maxWidth:'76%', padding:'10px 13px',
         borderRadius: isMe ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
         backgroundColor: isMe ? primaryColor : '#fff',
         color: isMe ? '#fff' : '#1a2332',
-        fontSize: '14px', lineHeight: '1.5',
-        boxShadow: '0 1px 4px rgba(0,0,0,0.07)',
-        fontFamily: font, wordBreak: 'break-word',
+        fontSize:14, lineHeight:1.5,
+        boxShadow:'0 1px 4px rgba(0,0,0,0.07)',
+        wordBreak:'break-word',
       }}>
-        {msg.text}
+        {content}
       </div>
-      <span style={{ fontSize: '11px', color: '#b0bec5', padding: '0 4px' }}>{time}</span>
+      <span style={{ fontSize:11, color:'#b0bec5', padding:'0 4px' }}>{formatTime(msg.timestamp)}</span>
     </div>
   );
 };
 
-const IconBtn: React.FC<{ onClick: () => void; title: string; children: React.ReactNode }> = ({ onClick, title, children }) => (
-  <button
-    onClick={onClick}
-    title={title}
-    style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '4px', display: 'flex', alignItems: 'center', borderRadius: '6px' }}
-    onMouseEnter={e => (e.currentTarget as HTMLElement).style.background = '#f3f4f6'}
-    onMouseLeave={e => (e.currentTarget as HTMLElement).style.background = 'none'}
+const DateDivider: React.FC<{ label: string }> = ({ label }) => (
+  <div style={{ display:'flex', alignItems:'center', gap:10, margin:'4px 0' }}>
+    <div style={{ flex:1, height:1, background:'#e5e7eb' }} />
+    <span style={{ fontSize:11, fontWeight:600, color:'#9ca3af', whiteSpace:'nowrap' }}>{label}</span>
+    <div style={{ flex:1, height:1, background:'#e5e7eb' }} />
+  </div>
+);
+
+const MenuItem: React.FC<{ icon: string; label: string; onClick: () => void; danger?: boolean }> = ({ icon, label, onClick, danger }) => (
+  <button onClick={onClick} style={{
+    display:'flex', alignItems:'center', gap:10, width:'100%', padding:'9px 12px',
+    background:'none', border:'none', borderRadius:8, cursor:'pointer', textAlign:'left',
+    fontSize:13, fontWeight:600, color: danger ? '#ef4444' : '#374151',
+    transition:'background 0.12s',
+  }}
+  onMouseEnter={e => (e.currentTarget as HTMLElement).style.background = danger ? '#fee2e2' : '#f3f4f6'}
+  onMouseLeave={e => (e.currentTarget as HTMLElement).style.background = 'none'}
   >
-    {children}
+    <span>{icon}</span> {label}
   </button>
 );
 
-const iconBtnStyle: React.CSSProperties = {
-  background: 'rgba(255,255,255,0.2)', border: 'none', borderRadius: '50%',
-  width: 34, height: 34, display: 'flex', alignItems: 'center', justifyContent: 'center',
-  cursor: 'pointer', flexShrink: 0,
+const ActionBtn: React.FC<{ onClick: () => void; title: string; children: React.ReactNode }> = ({ onClick, title, children }) => (
+  <button onClick={onClick} title={title} style={{
+    background:'none', border:'none', cursor:'pointer', padding:'7px',
+    borderRadius:'50%', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
+    transition:'background 0.13s',
+  }}
+  onMouseEnter={e => (e.currentTarget as HTMLElement).style.background = '#f3f4f6'}
+  onMouseLeave={e => (e.currentTarget as HTMLElement).style.background = 'none'}
+  >{children}</button>
+);
+
+const hdrBtn: React.CSSProperties = {
+  background:'rgba(255,255,255,0.2)', border:'none', borderRadius:'50%',
+  width:32, height:32, display:'flex', alignItems:'center', justifyContent:'center',
+  cursor:'pointer', flexShrink:0,
 };
+
+// Group messages by date
+function groupByDate(messages: ChatMessage[]): { date: string; msgs: ChatMessage[] }[] {
+  const map = new Map<string, ChatMessage[]>();
+  messages.forEach(m => {
+    const d = formatDate(m.timestamp);
+    if (!map.has(d)) map.set(d, []);
+    map.get(d)!.push(m);
+  });
+  return Array.from(map.entries()).map(([date, msgs]) => ({ date, msgs }));
+}