ajaxter-chat 3.0.8 → 3.0.10

package/src/components/ChatScreen/index.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { ChatMessage, ChatUser, WidgetConfig, UserListContext } from '../../types';
+import { ChatMessage, ChatUser, WidgetConfig, UserListContext, ChatType } from '../../types';
 import { avatarColor, initials, formatTime, formatDate, generateTranscript, downloadText } from '../../utils/chat';
+import { shortAttachmentLabel } from '../../utils/fileName';
 import { shouldShowPrivacyNotice, dismissPrivacyNotice } from '../../utils/privacyConsent';
 import { EmojiPicker } from '../EmojiPicker';
-import { SlideNavMenu } from '../SlideNavMenu';
 
 interface ChatScreenProps {
   activeUser:   ChatUser;
@@ -24,22 +24,27 @@ interface ChatScreenProps {
   /** Other devs (excl. viewer) — for transfer when staff chats with a customer */
   otherDevelopers?: ChatUser[];
   onTransferToDeveloper?: (dev: ChatUser) => void;
+  messageSoundEnabled?: boolean;
+  onToggleMessageSound?: (enabled: boolean) => void;
 }
 
 export const ChatScreen: React.FC<ChatScreenProps> = ({
   activeUser, messages, config, isPaused, isReported, isBlocked,
   onSend, onBack, onClose, onTogglePause, onReport, onBlock, onStartCall, onNavAction,
   otherDevelopers = [], onTransferToDeveloper,
+  messageSoundEnabled = true,
+  onToggleMessageSound,
 }) => {
   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);
   const [showPrivacy,   setShowPrivacy]  = useState(false);
+  const [pendingAttach, setPendingAttach] = useState<{ file: File; url: string } | null>(null);
+  const [waveBars,      setWaveBars]      = useState<number[]>(() => Array(24).fill(0.08));
 
   const endRef        = useRef<HTMLDivElement>(null);
   const inputRef      = useRef<HTMLTextAreaElement>(null);
@@ -47,6 +52,11 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
   const recordTimer   = useRef<ReturnType<typeof setInterval> | null>(null);
   const mediaRecorder = useRef<MediaRecorder | null>(null);
   const recordChunks  = useRef<BlobPart[]>([]);
+  const discardRecordingRef = useRef(false);
+  const waveStreamRef = useRef<MediaStream | null>(null);
+  const audioCtxRef   = useRef<AudioContext | null>(null);
+  const analyserRef   = useRef<AnalyserNode | null>(null);
+  const waveRafRef    = useRef<number>(0);
 
   useEffect(() => { endRef.current?.scrollIntoView({ behavior:'smooth' }); }, [messages]);
 
@@ -69,56 +79,177 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
     setShowPrivacy(false);
   }, [config.id]);
 
+  const clearPendingAttach = useCallback((revoke: boolean) => {
+    setPendingAttach(prev => {
+      if (prev && revoke) URL.revokeObjectURL(prev.url);
+      return null;
+    });
+  }, []);
+
   const handleSend = useCallback(() => {
-    if (!text.trim() || isPaused || isBlocked) return;
+    if (isPaused || isBlocked) return;
+    if (pendingAttach) {
+      const { file, url } = pendingAttach;
+      const body = text.trim();
+      onSend(body || ' ', 'attachment', {
+        attachmentName: file.name,
+        attachmentSize: `${(file.size / 1024).toFixed(1)} KB`,
+        attachmentUrl: url,
+        attachmentMime: file.type,
+      });
+      setPendingAttach(null);
+      setText('');
+      inputRef.current?.focus();
+      return;
+    }
+    if (!text.trim()) return;
     onSend(text.trim());
     setText('');
     inputRef.current?.focus();
-  }, [text, isPaused, isBlocked, onSend]);
+  }, [text, isPaused, isBlocked, onSend, pendingAttach]);
 
   const handleKey = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(); }
   };
 
+  const recordSecRef = useRef(0);
+
+  const stopWaveLoop = useCallback(() => {
+    if (waveRafRef.current) {
+      cancelAnimationFrame(waveRafRef.current);
+      waveRafRef.current = 0;
+    }
+    analyserRef.current = null;
+    void audioCtxRef.current?.close();
+    audioCtxRef.current = null;
+    waveStreamRef.current = null;
+    setWaveBars(Array(24).fill(0.08));
+  }, []);
+
   const startRecording = async () => {
     if (isPaused || isBlocked) return;
     const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    waveStreamRef.current = stream;
+    discardRecordingRef.current = false;
+    setRecordSec(0);
+    recordSecRef.current = 0;
+
+    try {
+      const audioCtx = new AudioContext();
+      await audioCtx.resume();
+      audioCtxRef.current = audioCtx;
+      const source = audioCtx.createMediaStreamSource(stream);
+      const analyser = audioCtx.createAnalyser();
+      analyser.fftSize = 128;
+      analyser.smoothingTimeConstant = 0.65;
+      source.connect(analyser);
+      analyserRef.current = analyser;
+      const data = new Uint8Array(analyser.frequencyBinCount);
+      const tick = () => {
+        const a = analyserRef.current;
+        if (!a) return;
+        a.getByteFrequencyData(data);
+        const bars: number[] = [];
+        const step = Math.max(1, Math.floor(data.length / 24));
+        for (let i = 0; i < 24; i++) {
+          const v = data[Math.min(i * step, data.length - 1)] / 255;
+          bars.push(Math.max(0.08, v));
+        }
+        setWaveBars(bars);
+        waveRafRef.current = requestAnimationFrame(tick);
+      };
+      waveRafRef.current = requestAnimationFrame(tick);
+    } catch {
+      /* optional waveform */
+    }
+
     recordChunks.current = [];
     const mr = new MediaRecorder(stream);
     mediaRecorder.current = mr;
     mr.ondataavailable = e => { if (e.data.size) recordChunks.current.push(e.data); };
     mr.onstop = () => {
+      stopWaveLoop();
       stream.getTracks().forEach(t => t.stop());
       const chunks = recordChunks.current;
+      if (discardRecordingRef.current) {
+        discardRecordingRef.current = false;
+        setRecordSec(0);
+        recordSecRef.current = 0;
+        return;
+      }
       if (!chunks.length) {
         setRecordSec(0);
+        recordSecRef.current = 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);
+      const dur = Math.max(1, recordSecRef.current);
       onSend('Voice message', 'voice', { voiceDuration: dur, voiceUrl });
       setRecordSec(0);
+      recordSecRef.current = 0;
     };
     mr.start(200);
     setIsRecording(true);
-    recordTimer.current = setInterval(() => setRecordSec(s => s + 1), 1000);
+    recordTimer.current = setInterval(() => {
+      setRecordSec(s => {
+        const n = s + 1;
+        recordSecRef.current = n;
+        return n;
+      });
+    }, 1000);
   };
 
-  const stopRecording = () => {
+  const cancelRecording = () => {
+    if (!isRecording) return;
+    discardRecordingRef.current = true;
+    if (recordTimer.current) {
+      clearInterval(recordTimer.current);
+      recordTimer.current = null;
+    }
     mediaRecorder.current?.stop();
-    if (recordTimer.current) clearInterval(recordTimer.current);
     setIsRecording(false);
   };
 
+  const stopRecordingSend = () => {
+    if (!isRecording) return;
+    discardRecordingRef.current = false;
+    if (recordTimer.current) {
+      clearInterval(recordTimer.current);
+      recordTimer.current = null;
+    }
+    mediaRecorder.current?.stop();
+    setIsRecording(false);
+  };
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+    if (isPaused || isBlocked || !config.allowAttachment) return;
+    const items = e.clipboardData?.items;
+    if (!items?.length) return;
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.kind === 'file' && item.type.startsWith('image/')) {
+        const f = item.getAsFile();
+        if (f) {
+          e.preventDefault();
+          const url = URL.createObjectURL(f);
+          setPendingAttach(prev => {
+            if (prev) URL.revokeObjectURL(prev.url);
+            return { file: f, url };
+          });
+          return;
+        }
+      }
+    }
+  };
+
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file || isPaused || isBlocked) return;
-    const attachmentUrl = URL.createObjectURL(file);
-    onSend(file.name, 'attachment', {
-      attachmentName: file.name,
-      attachmentSize: `${(file.size / 1024).toFixed(1)} KB`,
-      attachmentUrl,
+    const url = URL.createObjectURL(file);
+    setPendingAttach(prev => {
+      if (prev) URL.revokeObjectURL(prev.url);
+      return { file, url };
     });
     e.target.value = '';
   };
@@ -149,26 +280,14 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
   return (
     <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:'10px 12px', display:'flex', alignItems:'center', gap:8, flexShrink:0,
       }}>
-        <button type="button" onClick={() => setSlideMenuOpen(true)} style={hdrBtn} aria-label="Open menu">
+        <button type="button" onClick={onBack} style={hdrBtn} aria-label="Back">
           <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"/>
+            <path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
           </svg>
         </button>
 
@@ -184,6 +303,50 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
 
         <span style={{ fontSize:13, fontWeight:700, color:'#fff', opacity:0.95, flexShrink:0 }}>{headerRole}</span>
 
+        {onToggleMessageSound && (
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+              cursor: 'pointer',
+              flexShrink: 0,
+              marginLeft: 4,
+            }}
+          >
+            <span style={{ fontSize: 10, color: 'rgba(255,255,255,0.85)', fontWeight: 600 }}>Sound</span>
+            <button
+              type="button"
+              role="switch"
+              aria-checked={messageSoundEnabled}
+              onClick={() => onToggleMessageSound(!messageSoundEnabled)}
+              style={{
+                width: 36,
+                height: 20,
+                borderRadius: 10,
+                border: 'none',
+                background: messageSoundEnabled ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.2)',
+                position: 'relative',
+                cursor: 'pointer',
+                padding: 0,
+              }}
+            >
+              <span
+                style={{
+                  position: 'absolute',
+                  top: 2,
+                  left: messageSoundEnabled ? 18 : 2,
+                  width: 16,
+                  height: 16,
+                  borderRadius: '50%',
+                  background: '#fff',
+                  transition: 'left 0.15s ease',
+                }}
+              />
+            </button>
+          </label>
+        )}
+
         {config.allowWebCall && (
           <button type="button" onClick={() => onStartCall(false)} style={hdrBtn} title="Voice Call">
             <svg width="17" height="17" viewBox="0 0 24 24" fill="none">
@@ -203,6 +366,15 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
 
       {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' }}>
+          {navEntriesForChat(config.chatType, viewerIsDev).map(item => (
+            <MenuItem
+              key={item.key}
+              icon={item.icon}
+              label={item.label}
+              onClick={() => { setShowMenu(false); onNavAction(item.key); }}
+            />
+          ))}
+          <div style={{ borderTop:'1px solid #f0f2f5', margin:'4px 0' }} />
           {config.allowTranscriptDownload && (
             <MenuItem icon="📥" label="Download Transcript" onClick={handleTranscript} />
           )}
@@ -328,10 +500,91 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
         )}
 
         {isRecording && (
-          <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 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
+            style={{
+              marginBottom: 10,
+              padding: '12px 12px 14px',
+              background: '#fff',
+              borderRadius: 14,
+              border: '1px solid #e8ecf1',
+              boxShadow: '0 1px 4px rgba(15,23,42,0.06)',
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 10, marginBottom: 10 }}>
+              <button
+                type="button"
+                onClick={cancelRecording}
+                title="Discard recording"
+                aria-label="Discard recording"
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  padding: 6,
+                  lineHeight: 0,
+                  flexShrink: 0,
+                }}
+              >
+                <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
+                  <path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6" stroke="#ef4444" strokeWidth="2" strokeLinecap="round" />
+                  <path d="M10 11v6M14 11v6" stroke="#ef4444" strokeWidth="2" strokeLinecap="round" />
+                </svg>
+              </button>
+              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 44, flex: 1, justifyContent: 'flex-end', minWidth: 0 }}>
+                {waveBars.map((h, i) => (
+                  <span
+                    key={i}
+                    style={{
+                      width: 3,
+                      borderRadius: 2,
+                      background: '#cbd5e1',
+                      height: `${8 + h * 36}px`,
+                      transition: 'height 0.05s ease-out',
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+              <div style={{ flex: 1 }} />
+              <div
+                style={{
+                  background: '#ef4444',
+                  color: '#fff',
+                  fontWeight: 700,
+                  fontSize: 13,
+                  padding: '6px 14px',
+                  borderRadius: 999,
+                  minWidth: 52,
+                  textAlign: 'center',
+                }}
+              >
+                {fmtTime(recordSec)}
+              </div>
+              <button
+                type="button"
+                onClick={stopRecordingSend}
+                title="Send voice message"
+                aria-label="Send voice message"
+                style={{
+                  width: 44,
+                  height: 44,
+                  borderRadius: '50%',
+                  border: 'none',
+                  background: config.primaryColor,
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flexShrink: 0,
+                  boxShadow: `0 4px 14px ${config.primaryColor}55`,
+                }}
+              >
+                <svg width="18" height="18" 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>
+              </button>
+            </div>
           </div>
         )}
 
@@ -341,11 +594,79 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
           padding: '10px 12px 8px',
           background: isPaused || isBlocked ? '#f9fafb' : '#fff',
         }}>
+          {pendingAttach && (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 10,
+                marginBottom: 10,
+                padding: '8px 10px',
+                borderRadius: 10,
+                background: '#f8fafc',
+                border: '1px solid #fecaca',
+                position: 'relative',
+              }}
+            >
+              <div
+                style={{
+                  width: 40,
+                  height: 40,
+                  borderRadius: 8,
+                  background: config.primaryColor,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flexShrink: 0,
+                }}
+              >
+                <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="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                </svg>
+              </div>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ fontWeight: 700, fontSize: 13, color: '#1a2332', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={pendingAttach.file.name}>
+                  {pendingAttach.file.name}
+                </div>
+                <div style={{ fontSize: 11, color: '#94a3b8', fontWeight: 600, textTransform: 'uppercase' }}>
+                  {(pendingAttach.file.type.split('/')[1] || 'file').slice(0, 8)}
+                </div>
+              </div>
+              <button
+                type="button"
+                onClick={() => clearPendingAttach(true)}
+                title="Remove attachment"
+                aria-label="Remove attachment"
+                style={{
+                  position: 'absolute',
+                  top: 6,
+                  right: 6,
+                  width: 22,
+                  height: 22,
+                  borderRadius: '50%',
+                  border: 'none',
+                  background: '#ef4444',
+                  color: '#fff',
+                  cursor: 'pointer',
+                  fontSize: 15,
+                  fontWeight: 700,
+                  lineHeight: 1,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  padding: 0,
+                }}
+              >
+                ×
+              </button>
+            </div>
+          )}
           <textarea
             ref={inputRef}
             value={text}
             onChange={e => setText(e.target.value)}
             onKeyDown={handleKey}
+            onPaste={handlePaste}
             placeholder={isPaused || isBlocked ? 'Chat is unavailable' : 'Compose your message…'}
             disabled={isPaused || isBlocked || isRecording}
             rows={2}
@@ -397,14 +718,14 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
             <button
               type="button"
               onClick={handleSend}
-              disabled={!text.trim() || isPaused || isBlocked || isRecording}
+              disabled={(!text.trim() && !pendingAttach) || isPaused || isBlocked || isRecording}
               style={{
                 width: 36,
                 height: 36,
                 borderRadius: '50%',
-                backgroundColor: text.trim() && !isPaused && !isBlocked ? config.primaryColor : '#e2e8f0',
+                backgroundColor: (text.trim() || pendingAttach) && !isPaused && !isBlocked ? config.primaryColor : '#e2e8f0',
                 border: 'none',
-                cursor: text.trim() && !isPaused && !isBlocked ? 'pointer' : 'default',
+                cursor: (text.trim() || pendingAttach) && !isPaused && !isBlocked ? 'pointer' : 'default',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
@@ -414,7 +735,7 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({
               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={text.trim() && !isPaused && !isBlocked ? '#fff' : '#94a3b8'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                <path d="M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z" stroke={(text.trim() || pendingAttach) && !isPaused && !isBlocked ? '#fff' : '#94a3b8'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
               </svg>
             </button>
           </div>
@@ -638,30 +959,50 @@ const VoiceRow: React.FC<{ msg: ChatMessage; isMe: boolean; primaryColor: string
 const AttachmentRow: React.FC<{ msg: ChatMessage; isMe: boolean; primaryColor: string }> = ({ msg, isMe, primaryColor }) => {
   const name = msg.attachmentName ?? 'File';
   const href = msg.attachmentUrl;
+  const label = shortAttachmentLabel(name, 10);
+  const mime = msg.attachmentMime ?? '';
+  const isImage = mime.startsWith('image/') || /\.(png|jpe?g|gif|webp|bmp|svg)$/i.test(name);
   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 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
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch', gap: 8, flexWrap: 'wrap' }}>
+      {isImage && href && (
+        <a href={href} download={name} title={name} style={{ alignSelf: 'flex-start', lineHeight: 0 }}>
+          <img
+            src={href}
+            alt=""
+            style={{ maxWidth: 220, maxHeight: 200, borderRadius: 10, objectFit: 'cover', display: 'block' }}
+          />
         </a>
       )}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+        {!isImage && (
+          <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 style={{ flex: 1, minWidth: 0 }}>
+          {href ? (
+            <a
+              href={href}
+              download={name}
+              title={name}
+              style={{
+                fontWeight: 700,
+                fontSize: 14,
+                wordBreak: 'break-word',
+                color: isMe ? '#fff' : primaryColor,
+                textDecoration: 'underline',
+              }}
+            >
+              [{label}]
+            </a>
+          ) : (
+            <div style={{ fontWeight: 700, fontSize: 14, wordBreak: 'break-word' }} title={name}>
+              [{label}]
+            </div>
+          )}
+          {msg.attachmentSize && <div style={{ fontSize: 11, opacity: 0.8 }}>{msg.attachmentSize}</div>}
+        </div>
+      </div>
     </div>
   );
 };
@@ -669,10 +1010,16 @@ const AttachmentRow: React.FC<{ msg: ChatMessage; isMe: boolean; primaryColor: s
 const Bubble: React.FC<{ msg: ChatMessage; primaryColor: string }> = ({ msg, primaryColor }) => {
   const isMe = msg.senderId === 'me';
 
+  const caption = msg.text.trim();
   const content = msg.type === 'voice' ? (
     <VoiceRow msg={msg} isMe={isMe} primaryColor={primaryColor} />
   ) : msg.type === 'attachment' ? (
-    <AttachmentRow msg={msg} isMe={isMe} primaryColor={primaryColor} />
+    <>
+      <AttachmentRow msg={msg} isMe={isMe} primaryColor={primaryColor} />
+      {caption && caption !== ' ' && (
+        <div style={{ marginTop: 6, fontSize: 14, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>{msg.text}</div>
+      )}
+    </>
   ) : (
     <span>{msg.text}</span>
   );
@@ -734,6 +1081,16 @@ const hdrBtn: React.CSSProperties = {
   cursor:'pointer', flexShrink:0,
 };
 
+function navEntriesForChat(chatType: ChatType, isStaff: boolean): { key: UserListContext | 'ticket'; label: string; icon: string }[] {
+  const showSupport = chatType === 'SUPPORT' || chatType === 'BOTH';
+  const showChat = chatType === 'CHAT' || chatType === 'BOTH';
+  const items: { key: UserListContext | 'ticket'; label: string; icon: string }[] = [];
+  if (showSupport) items.push({ key: 'support', icon: '🛠', label: isStaff ? 'Provide Support' : 'Need Support' });
+  if (showChat) items.push({ key: 'conversation', icon: '💬', label: isStaff ? 'Chat with developer' : 'New Conversation' });
+  items.push({ key: 'ticket', icon: '🎫', label: 'Raise ticket' });
+  return items;
+}
+
 function groupByDate(messages: ChatMessage[]): { date: string; msgs: ChatMessage[] }[] {
   const map = new Map<string, ChatMessage[]>();
   messages.forEach(m => {