ajaxter-chat 3.0.4 → 3.0.6

package/src/components/ChatScreen/index.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { ChatMessage, ChatUser, WidgetConfig } from '../../types';
+import { ChatMessage, ChatUser, WidgetConfig, UserListContext } from '../../types';
 import { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText } from '../../utils/chat';
 import { EmojiPicker } from '../EmojiPicker';
+import { SlideNavMenu } from '../SlideNavMenu';
 
 interface ChatScreenProps {
   activeUser:   ChatUser;
@@ -17,15 +18,23 @@ interface ChatScreenProps {
   onReport:     () => void;
   onBlock:      () => void;
   onStartCall:  (withVideo: boolean) => void;
+  /** Navigate to support list, colleague list, or tickets (from slide menu) */
+  onNavAction:  (ctx: UserListContext | 'ticket') => void;
+  /** Other devs (excl. viewer) — for transfer when staff chats with a customer */
+  otherDevelopers?: ChatUser[];
+  onTransferToDeveloper?: (dev: ChatUser) => void;
 }
 
 export const ChatScreen: React.FC<ChatScreenProps> = ({
   activeUser, messages, config, isPaused, isReported, isBlocked,
-  onSend, onBack, onClose, onTogglePause, onReport, onBlock, onStartCall,
+  onSend, onBack, onClose, onTogglePause, onReport, onBlock, onStartCall, onNavAction,
+  otherDevelopers = [], onTransferToDeveloper,
 }) => {
   const [text,          setText]         = useState('');
   const [showEmoji,     setShowEmoji]    = useState(false);
   const [showMenu,      setShowMenu]     = useState(false);
+  const [slideMenuOpen, setSlideMenuOpen] = useState(false);
+  const [transferOpen,  setTransferOpen]  = useState(false);
   const [isRecording,   setIsRecording]  = useState(false);
   const [recordSec,     setRecordSec]    = useState(0);
   const [showConfirm,   setShowConfirm]  = useState<'report'|'block'|'pause'|null>(null);
@@ -35,6 +44,7 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
   const fileRef       = useRef<HTMLInputElement>(null);
   const recordTimer   = useRef<ReturnType<typeof setInterval> | null>(null);
   const mediaRecorder = useRef<MediaRecorder | null>(null);
+  const recordChunks  = useRef<BlobPart[]>([]);
 
   useEffect(() => { endRef.current?.scrollIntoView({ behavior:'smooth' }); }, [messages]);
 
@@ -49,21 +59,27 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
     if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(); }
   };
 
-  // Voice recording
   const startRecording = async () => {
     if (isPaused || isBlocked) return;
     const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    recordChunks.current = [];
     const mr = new MediaRecorder(stream);
     mediaRecorder.current = mr;
-    const chunks: BlobPart[] = [];
-    mr.ondataavailable = e => chunks.push(e.data);
+    mr.ondataavailable = e => { if (e.data.size) recordChunks.current.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 });
+      const chunks = recordChunks.current;
+      if (!chunks.length) {
+        setRecordSec(0);
+        return;
+      }
+      const blob = new Blob(chunks, { type: chunks[0] instanceof Blob ? (chunks[0] as Blob).type : 'audio/webm' });
+      const voiceUrl = URL.createObjectURL(blob);
+      const dur = Math.max(1, recordSec);
+      onSend('Voice message', 'voice', { voiceDuration: dur, voiceUrl });
       setRecordSec(0);
     };
-    mr.start();
+    mr.start(200);
     setIsRecording(true);
     recordTimer.current = setInterval(() => setRecordSec(s => s + 1), 1000);
   };
@@ -74,25 +90,24 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
     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', {
+    const attachmentUrl = URL.createObjectURL(file);
+    onSend(file.name, 'attachment', {
       attachmentName: file.name,
       attachmentSize: `${(file.size / 1024).toFixed(1)} KB`,
+      attachmentUrl,
     });
     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();
@@ -102,20 +117,33 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
 
   const peerAvatar = avatarColor(activeUser.name);
   const peerInit   = initials(activeUser.name);
-
-  // Group messages by date
   const grouped = groupByDate(messages);
 
+  const viewerIsDev = config.viewerType === 'developer';
+  const headerRole =
+    viewerIsDev
+      ? (activeUser.type === 'user' ? 'Customer' : 'Developer')
+      : 'Support';
+
   return (
-    <div style={{ display:'flex', flexDirection:'column', height:'100%', animation:'cw-slideIn 0.22s ease', position:'relative' }}>
+    <div style={{ display:'flex', flexDirection:'column', height:'100%', animation:'cw-slideIn 0.22s ease', position:'relative', overflow: 'hidden' }}>
+
+      <SlideNavMenu
+        open={slideMenuOpen}
+        onClose={() => setSlideMenuOpen(false)}
+        primaryColor={config.primaryColor}
+        chatType={config.chatType}
+        viewerType={config.viewerType ?? 'user'}
+        onSelect={onNavAction}
+        onBackHome={onBack}
+      />
 
       {/* ── Header ── */}
       <div style={{
         background:`linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`,
-        padding:'12px 14px', display:'flex', alignItems:'center', gap:10, flexShrink:0,
+        padding:'10px 12px', display:'flex', alignItems:'center', gap:8, flexShrink:0,
       }}>
-        {/* hamburger/back */}
-        <button onClick={onBack} style={hdrBtn}>
+        <button type="button" onClick={() => setSlideMenuOpen(true)} style={hdrBtn} aria-label="Open menu">
           <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"/>
@@ -133,31 +161,53 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
           <div style={{ fontSize:11, color:'rgba(255,255,255,0.8)' }}>{activeUser.designation}</div>
         </div>
 
-        {/* Title "Support" */}
-        <span style={{ fontSize:14, fontWeight:700, color:'#fff', opacity:0.9 }}>Support</span>
+        <span style={{ fontSize:13, fontWeight:700, color:'#fff', opacity:0.95, flexShrink:0 }}>{headerRole}</span>
 
-        {/* Call button */}
         {config.allowWebCall && (
-          <button onClick={() => onStartCall(false)} style={hdrBtn} title="Voice Call">
+          <button type="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="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"/>
+        <button type="button" onClick={() => setShowMenu(v => !v)} style={{ ...hdrBtn, background:'rgba(255,255,255,0.2)' }} title="More options" aria-expanded={showMenu}>
+          <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>
       </div>
 
-      {/* ── Paused / Blocked / Reported banners ── */}
+      {showMenu && (
+        <div style={{ position:'absolute', top:52, right:12, zIndex:120, background:'#fff', borderRadius:12, boxShadow:'0 8px 30px rgba(0,0,0,0.16)', padding:'6px', minWidth:200, animation:'cw-fadeUp 0.18s ease' }}>
+          {config.allowTranscriptDownload && (
+            <MenuItem icon="📥" label="Download Transcript" onClick={handleTranscript} />
+          )}
+          {viewerIsDev && activeUser.type === 'user' && otherDevelopers.length > 0 && onTransferToDeveloper && (
+            <MenuItem
+              icon="🔀"
+              label="Transfer to developer"
+              onClick={() => { setShowMenu(false); setTransferOpen(true); }}
+            />
+          )}
+          <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>
+      )}
+
       {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>
+          <button type="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 && (
@@ -171,24 +221,6 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
         </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"
       >
@@ -196,7 +228,7 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
           <React.Fragment key={date}>
             <DateDivider label={date} />
             {msgs.map(msg => (
-              <Bubble key={msg.id} msg={msg} peer={activeUser} primaryColor={config.primaryColor} />
+              <Bubble key={msg.id} msg={msg} primaryColor={config.primaryColor} />
             ))}
           </React.Fragment>
         ))}
@@ -209,10 +241,9 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
         <div ref={endRef} />
       </div>
 
-      {/* ── Input bar ── */}
-      <div style={{ borderTop:'1px solid #eef0f5', padding:'10px 14px', background:'#fff', flexShrink:0, position:'relative' }}>
+      {/* Composer — reference layout */}
+      <div style={{ borderTop:'1px solid #eef0f5', padding:'10px 12px 8px', background:'#fff', flexShrink:0, position:'relative' }}>
 
-        {/* Emoji picker */}
         {showEmoji && config.allowEmoji && (
           <EmojiPicker
             primaryColor={config.primaryColor}
@@ -221,124 +252,192 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
           />
         )}
 
-        {/* Recording indicator */}
         {isRecording && (
-          <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8, padding:'6px 12px', background:'#fee2e2', borderRadius:8 }}>
+          <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8, padding:'8px 12px', background:'#fee2e2', borderRadius:10 }}>
             <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>
+            <button type="button" onClick={stopRecording} style={{ marginLeft:'auto', background:'#ef4444', color:'#fff', border:'none', borderRadius:6, padding:'4px 12px', fontSize:12, cursor:'pointer', fontWeight:600 }}>Stop & send</button>
           </div>
         )}
 
-        <div style={{ display:'flex', alignItems:'flex-end', gap:8 }}>
+        <div style={{
+          border: `1.5px solid ${isPaused || isBlocked ? '#e5e7eb' : '#bfdbfe'}`,
+          borderRadius: 16,
+          padding: '10px 12px 8px',
+          background: isPaused || isBlocked ? '#f9fafb' : '#fff',
+        }}>
           <textarea
             ref={inputRef}
             value={text}
             onChange={e => setText(e.target.value)}
             onKeyDown={handleKey}
-            placeholder={isPaused || isBlocked ? 'Chat is unavailable' : 'Message...'}
+            placeholder={isPaused || isBlocked ? 'Chat is unavailable' : 'Compose your message…'}
             disabled={isPaused || isBlocked || isRecording}
-            rows={1}
+            rows={2}
             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',
+              width: '100%',
+              resize: 'none',
+              border: 'none',
+              outline: 'none',
+              fontSize: 14,
+              lineHeight: 1.45,
+              color: '#1a2332',
+              background: 'transparent',
+              maxHeight: 88,
+              overflowY: 'auto',
+              fontFamily: 'inherit',
+              marginBottom: 8,
             }}
-            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:config.primaryColor,
-              border:'none', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
-              transition:'transform 0.15s',
-            }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+              {config.allowEmoji && (
+                <ActionBtn onClick={() => setShowEmoji(v => !v)} title="Emoji">
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                    <circle cx="12" cy="12" r="10" stroke="#94a3b8" strokeWidth="1.8"/>
+                    <path d="M8 14s1.5 2 4 2 4-2 4-2" stroke="#94a3b8" strokeWidth="1.8" strokeLinecap="round"/>
+                    <circle cx="9" cy="9" r="1" fill="#94a3b8"/><circle cx="15" cy="9" r="1" fill="#94a3b8"/>
+                  </svg>
+                </ActionBtn>
+              )}
+              {config.allowAttachment && (
+                <>
+                  <input ref={fileRef} type="file" style={{ display:'none' }} onChange={handleFileChange} />
+                  <ActionBtn onClick={() => fileRef.current?.click()} title="Attach file">
+                    <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="#94a3b8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+                    </svg>
+                  </ActionBtn>
+                </>
+              )}
+              {config.allowVoiceMessage && !isRecording && (
+                <ActionBtn onClick={startRecording} title="Voice message">
+                  <svg width="20" height="20" 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="#94a3b8" strokeWidth="1.8" strokeLinecap="round"/>
+                    <path d="M19 10v2a7 7 0 01-14 0v-2M12 19v4M8 23h8" stroke="#94a3b8" strokeWidth="1.8" strokeLinecap="round"/>
+                  </svg>
+                </ActionBtn>
+              )}
+            </div>
+            <button
+              type="button"
+              onClick={handleSend}
+              disabled={!text.trim() || isPaused || isBlocked || isRecording}
+              style={{
+                width: 36,
+                height: 36,
+                borderRadius: '50%',
+                backgroundColor: text.trim() && !isPaused && !isBlocked ? config.primaryColor : '#e2e8f0',
+                border: 'none',
+                cursor: text.trim() && !isPaused && !isBlocked ? 'pointer' : 'default',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexShrink: 0,
+                transition: 'background 0.15s',
+              }}
+              title="Send"
+            >
               <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"/>
+                <path d="M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z" stroke={text.trim() && !isPaused && !isBlocked ? '#fff' : '#94a3b8'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
               </svg>
             </button>
-          )}
+          </div>
         </div>
+
+        {(config.footerPoweredBy || config.branch) && (
+          <p style={{ margin: '10px 0 0', textAlign: 'center', fontSize: 12, color: '#94a3b8' }}>
+            {config.footerPoweredBy}
+            {config.footerPoweredBy && config.branch ? ' · ' : ''}
+            {config.branch && <span style={{ fontWeight: 600, color: '#64748b' }}>{config.branch}</span>}
+          </p>
+        )}
       </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"
+      {transferOpen && otherDevelopers.length > 0 && onTransferToDeveloper && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            background: 'rgba(0,0,0,0.45)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 280,
+            padding: 16,
+          }}
         >
-          <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
+            style={{
+              background: '#fff',
+              borderRadius: 16,
+              padding: '18px 16px',
+              width: '100%',
+              maxWidth: 320,
+              maxHeight: '70%',
+              overflow: 'hidden',
+              display: 'flex',
+              flexDirection: 'column',
+              boxShadow: '0 16px 48px rgba(0,0,0,0.22)',
+            }}
+          >
+            <div style={{ fontWeight: 800, fontSize: 16, color: '#1a2332', marginBottom: 6 }}>
+              Transfer chat to
+            </div>
+            <p style={{ fontSize: 12, color: '#7b8fa1', margin: '0 0 12px', lineHeight: 1.5 }}>
+              Assign this conversation to another developer. History is kept and a handoff note is added.
+            </p>
+            <div className="cw-scroll" style={{ flex: 1, overflowY: 'auto', margin: '0 -4px' }}>
+              {otherDevelopers.map(dev => (
+                <button
+                  key={dev.uid}
+                  type="button"
+                  onClick={() => {
+                    onTransferToDeveloper(dev);
+                    setTransferOpen(false);
+                  }}
+                  style={{
+                    width: '100%',
+                    textAlign: 'left',
+                    padding: '12px 12px',
+                    marginBottom: 6,
+                    border: '1px solid #eef0f5',
+                    borderRadius: 12,
+                    background: '#f8fafc',
+                    cursor: 'pointer',
+                    fontSize: 14,
+                    fontWeight: 600,
+                    color: '#1e293b',
+                  }}
+                >
+                  {dev.name}
+                  <span style={{ display: 'block', fontSize: 11, fontWeight: 500, color: '#64748b', marginTop: 2 }}>
+                    {dev.designation}
+                  </span>
+                </button>
+              ))}
+            </div>
+            <button
+              type="button"
+              onClick={() => setTransferOpen(false)}
+              style={{
+                marginTop: 12,
+                padding: '10px',
+                borderRadius: 10,
+                border: '1.5px solid #e5e7eb',
+                background: '#fff',
+                fontWeight: 600,
+                fontSize: 13,
+                color: '#475569',
+                cursor: 'pointer',
+              }}
+            >
+              Cancel
+            </button>
           </div>
-        )}
-      </div>
+        </div>
+      )}
 
-      {/* ── Confirm dialog ── */}
       {showConfirm && (
         <div style={{
           position:'absolute', inset:0, background:'rgba(0,0,0,0.45)',
@@ -357,10 +456,10 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
               {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' }}>
+              <button type="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={{
+              <button type="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,
@@ -375,35 +474,138 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
   );
 };
 
-// ── Sub-components ─────────────────────────────────────────────────────────────
+const VoiceRow: React.FC<{ msg: ChatMessage; isMe: boolean; primaryColor: string }> = ({ msg, isMe, primaryColor }) => {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const [playing, setPlaying] = useState(false);
+  const [current, setCurrent] = useState(0);
+  const [dur, setDur] = useState(msg.voiceDuration ?? 0);
+
+  const url = msg.voiceUrl;
+  useEffect(() => {
+    const a = audioRef.current;
+    if (!a || !url) return;
+    const onMeta = () => setDur(a.duration || msg.voiceDuration || 0);
+    const onTime = () => setCurrent(a.currentTime);
+    a.addEventListener('loadedmetadata', onMeta);
+    a.addEventListener('timeupdate', onTime);
+    return () => {
+      a.removeEventListener('loadedmetadata', onMeta);
+      a.removeEventListener('timeupdate', onTime);
+    };
+  }, [url, msg.voiceDuration]);
 
-const Bubble: React.FC<{ msg: ChatMessage; peer: ChatUser; primaryColor: string }> = ({ msg, peer, primaryColor }) => {
-  const isMe = msg.senderId === 'me';
+  const toggle = () => {
+    const a = audioRef.current;
+    if (!a) return;
+    if (playing) { a.pause(); setPlaying(false); }
+    else { void a.play().then(() => setPlaying(true)).catch(() => {}); }
+  };
 
-  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>
+  const pct = dur > 0 ? Math.min(100, (current / dur) * 100) : 0;
+  const timeLabel = fmtTime(Math.floor(current)) + ' / ' + fmtTime(Math.floor(dur || msg.voiceDuration || 0));
+
+  if (!url) {
+    return (
+      <div style={{ display:'flex', alignItems:'center', gap:8 }}>
+        <span style={{ fontSize:13 }}>🎤</span>
+        <span style={{ fontSize:13 }}>Voice message{msg.voiceDuration ? ` · ${msg.voiceDuration}s` : ''}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display:'flex', alignItems:'center', gap:10, minWidth: 200 }}>
+      {url && (
+        <audio
+          ref={audioRef}
+          src={url}
+          preload="metadata"
+          onPlay={() => setPlaying(true)}
+          onPause={() => setPlaying(false)}
+          onEnded={() => { setPlaying(false); setCurrent(0); }}
+        />
+      )}
+      <button
+        type="button"
+        onClick={toggle}
+        style={{
+          width: 36,
+          height: 36,
+          borderRadius: '50%',
+          border: 'none',
+          background: isMe ? 'rgba(255,255,255,0.95)' : '#fff',
+          color: isMe ? primaryColor : primaryColor,
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexShrink: 0,
+          boxShadow: '0 1px 4px rgba(0,0,0,0.12)',
+        }}
+        aria-label={playing ? 'Pause' : 'Play'}
+      >
+        {playing ? (
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
+        ) : (
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+        )}
+      </button>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ height: 4, borderRadius: 2, background: isMe ? 'rgba(255,255,255,0.35)' : '#e2e8f0', overflow: 'hidden' }}>
+          <div style={{ width: `${pct}%`, height: '100%', background: isMe ? '#fff' : primaryColor, borderRadius: 2, transition: 'width 0.1s linear' }} />
+        </div>
+        <div style={{ fontSize: 11, marginTop: 4, opacity: 0.9 }}>{timeLabel}</div>
+      </div>
     </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"/>
+  );
+};
+
+const AttachmentRow: React.FC<{ msg: ChatMessage; isMe: boolean; primaryColor: string }> = ({ msg, isMe, primaryColor }) => {
+  const name = msg.attachmentName ?? 'File';
+  const href = msg.attachmentUrl;
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}>
+        <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' : '#334155'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
       </svg>
-      <div>
-        <div style={{ fontWeight:600 }}>{msg.attachmentName ?? 'File'}</div>
-        {msg.attachmentSize && <div style={{ fontSize:11, opacity:0.75 }}>{msg.attachmentSize}</div>}
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ fontWeight: 700, fontSize: 14, wordBreak: 'break-word' }}>{name}</div>
+        {msg.attachmentSize && <div style={{ fontSize: 11, opacity: 0.8 }}>{msg.attachmentSize}</div>}
       </div>
+      {href && (
+        <a
+          href={href}
+          download={name}
+          style={{
+            fontSize: 12,
+            fontWeight: 700,
+            color: isMe ? '#fff' : primaryColor,
+            textDecoration: 'underline',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          Download
+        </a>
+      )}
     </div>
-  ) : <span>{msg.text}</span>;
+  );
+};
+
+const Bubble: React.FC<{ msg: ChatMessage; primaryColor: string }> = ({ msg, primaryColor }) => {
+  const isMe = msg.senderId === 'me';
+
+  const content = msg.type === 'voice' ? (
+    <VoiceRow msg={msg} isMe={isMe} primaryColor={primaryColor} />
+  ) : msg.type === 'attachment' ? (
+    <AttachmentRow msg={msg} isMe={isMe} primaryColor={primaryColor} />
+  ) : (
+    <span>{msg.text}</span>
+  );
 
   return (
     <div style={{ display:'flex', flexDirection:'column', alignItems: isMe?'flex-end':'flex-start', gap:3 }}>
       <div style={{
-        maxWidth:'76%', padding:'10px 13px',
+        maxWidth:'85%', padding:'10px 13px',
         borderRadius: isMe ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
         backgroundColor: isMe ? primaryColor : '#fff',
         color: isMe ? '#fff' : '#1a2332',
@@ -421,13 +623,13 @@ const Bubble: React.FC<{ msg: ChatMessage; peer: ChatUser; primaryColor: string
 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>
+    <span style={{ fontSize:11, fontWeight:600, color:'#64748b', 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={{
+  <button type="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',
@@ -441,12 +643,12 @@ const MenuItem: React.FC<{ icon: string; label: string; onClick: () => void; dan
 );
 
 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',
+  <button type="button" onClick={onClick} title={title} style={{
+    background:'none', border:'none', cursor:'pointer', padding:'8px',
     borderRadius:'50%', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
     transition:'background 0.13s',
   }}
-  onMouseEnter={e => (e.currentTarget as HTMLElement).style.background = '#f3f4f6'}
+  onMouseEnter={e => (e.currentTarget as HTMLElement).style.background = '#f1f5f9'}
   onMouseLeave={e => (e.currentTarget as HTMLElement).style.background = 'none'}
   >{children}</button>
 );
@@ -457,7 +659,6 @@ const hdrBtn: React.CSSProperties = {
   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 => {
@@ -467,3 +668,9 @@ function groupByDate(messages: ChatMessage[]): { date: string; msgs: ChatMessage
   });
   return Array.from(map.entries()).map(([date, msgs]) => ({ date, msgs }));
 }
+
+function fmtTime(sec: number): string {
+  const m = Math.floor(sec / 60);
+  const s = Math.max(0, sec % 60);
+  return `${m}:${String(s).padStart(2, '0')}`;
+}