const { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } = React; const API = window.location.origin; // ─── Helpers ────────────────────────────────────────────────────────────────── function nameColor(name) { const palette = ['#f472b6','#60a5fa','#34d399','#fb923c','#a78bfa','#facc15','#f87171','#4ade80','#38bdf8','#e879f9']; let h = 0; for (const c of (name||'')) h = (h * 31 + c.charCodeAt(0)) & 0xfffffff; return palette[Math.abs(h) % palette.length]; } function initials(name) { return (name||'??').slice(0,2).toUpperCase(); } function fmtTime(ts) { return new Date(ts).toLocaleTimeString('ru-RU',{hour:'2-digit',minute:'2-digit'}); } function fmtDate(ts) { const d = new Date(ts), today = new Date(); if (d.toDateString() === today.toDateString()) return 'Сегодня'; const yest = new Date(today); yest.setDate(today.getDate()-1); if (d.toDateString() === yest.toDateString()) return 'Вчера'; return d.toLocaleDateString('ru-RU',{day:'numeric',month:'long'}); } function fmtSize(bytes) { if (bytes < 1024) return bytes+'B'; if (bytes < 1048576) return (bytes/1024).toFixed(1)+'KB'; return (bytes/1048576).toFixed(1)+'MB'; } function fmtDur(s) { return Math.floor(s/60)+':'+String(Math.floor(s%60)).padStart(2,'0'); } async function apiFetch(path, opts={}, token) { const headers = { Authorization: 'Bearer '+(token||'') }; let body = opts.body; if (body && !(body instanceof FormData)) { headers['Content-Type']='application/json'; body=JSON.stringify(body); } const res = await fetch(API+path, {...opts, headers, body}); const data = await res.json().catch(()=>({})); if (!res.ok) throw new Error(data.error || res.statusText); return data; } function detectMime() { for (const t of ['audio/webm;codecs=opus','audio/webm','audio/ogg;codecs=opus','audio/ogg','audio/mp4']) if (MediaRecorder.isTypeSupported(t)) return t; return ''; } // ─── App Context ────────────────────────────────────────────────────────────── const Ctx = createContext({}); const useCtx = () => useContext(Ctx); // ─── Auth Screen ────────────────────────────────────────────────────────────── function AuthScreen({ onAuth }) { const [tab, setTab] = useState('login'); const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [email, setEmail] = useState(''); const [error, setError] = useState(''); const [loading, setLoading] = useState(false); const submit = async (e) => { e.preventDefault(); setError(''); setLoading(true); try { const isReg = tab === 'register'; const data = await apiFetch(isReg ? '/auth/register' : '/auth/login', { method: 'POST', body: isReg ? { username, password, email: email||undefined } : { username, password }, }); onAuth(data); } catch(err) { setError(err.message); } finally { setLoading(false); } }; const inp = { display:'block', width:'100%', padding:'11px 14px', marginTop:8, background:'var(--bg-elev-2)', border:'1px solid var(--border)', borderRadius:10, fontSize:14, color:'var(--text)', outline:'none', fontFamily:'inherit' }; return (
чатАгенты
real-time · AI-native
{['login','register'].map(t => ( ))}
setUsername(e.target.value)} placeholder="Имя пользователя" required style={{ ...inp, marginTop:0 }}/> {tab==='register' && ( setEmail(e.target.value)} placeholder="Email (необязательно)" type="email" style={inp}/> )} setPassword(e.target.value)} placeholder="Пароль" type="password" required style={inp}/> {error &&
{error}
}
); } // ─── User Avatar ────────────────────────────────────────────────────────────── function UserAvatar({ name, size=32, status=null, agent=false }) { const s = size; const fs = Math.max(10, Math.round(s*0.36)); const color = nameColor(name); return (
{initials(name)}
{agent && (
AI
)} {status && !agent && (
)}
); } // ─── Voice Player ───────────────────────────────────────────────────────────── function VoicePlayer({ src }) { const [playing, setPlaying] = useState(false); const [progress, setProgress] = useState(0); const [duration, setDuration] = useState(0); const audioRef = useRef(null); useEffect(() => { const a = new Audio(src); audioRef.current = a; a.addEventListener('loadedmetadata', () => setDuration(a.duration||0)); a.addEventListener('timeupdate', () => { const p = a.duration ? a.currentTime / a.duration : 0; setProgress(p); }); a.addEventListener('ended', () => { setPlaying(false); setProgress(0); }); return () => { a.pause(); }; }, [src]); const toggle = () => { const a = audioRef.current; if (!a) return; if (playing) { a.pause(); setPlaying(false); } else { a.play(); setPlaying(true); } }; const seek = (e) => { const a = audioRef.current; if (!a || !a.duration) return; const rect = e.currentTarget.getBoundingClientRect(); a.currentTime = ((e.clientX - rect.left) / rect.width) * a.duration; }; return (
{duration ? fmtDur(progress*duration)+' / '+fmtDur(duration) : '0:00'}
); } // ─── Image Lightbox ─────────────────────────────────────────────────────────── function Lightbox({ images, startIdx, onClose }) { const [idx, setIdx] = useState(startIdx); useEffect(() => { const handler = (e) => { if (e.key === 'Escape') onClose(); if (e.key === 'ArrowLeft') setIdx(i => Math.max(0, i-1)); if (e.key === 'ArrowRight') setIdx(i => Math.min(images.length-1, i+1)); }; window.addEventListener('keydown', handler); return () => window.removeEventListener('keydown', handler); }, [images.length]); return (
{idx > 0 && ( )} {idx < images.length-1 && ( )}
); } // ─── Message ────────────────────────────────────────────────────────────────── function MessageRow({ msg, showHeader, onEdit, onDelete, onImgClick }) { const { myId } = useCtx(); const isMe = msg.userId === myId || msg.user_id === myId; const isAgent = msg.isAgent; const name = msg.username || '?'; const ts = msg.createdAt || msg.created_at; const renderContent = () => { if (msg.type === 'audio') return ; if (msg.type === 'image') return (
onImgClick && onImgClick(msg.file.url)} style={{ borderRadius:10, overflow:'hidden', maxWidth:280, cursor:'pointer', border:'1px solid var(--border)' }}>
); if (msg.type === 'video') return (