663 lines
24 KiB
TypeScript
663 lines
24 KiB
TypeScript
'use client';
|
||
|
||
import React from 'react';
|
||
import { Avatar, Box, IconButton, TextField, Typography } from '@mui/material';
|
||
import SendRoundedIcon from '@mui/icons-material/SendRounded';
|
||
import AssignmentRoundedIcon from '@mui/icons-material/AssignmentRounded';
|
||
import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
|
||
import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
|
||
import ScheduleRoundedIcon from '@mui/icons-material/ScheduleRounded';
|
||
import EventNoteRoundedIcon from '@mui/icons-material/EventNoteRounded';
|
||
import NotificationsActiveRoundedIcon from '@mui/icons-material/NotificationsActiveRounded';
|
||
import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
|
||
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
|
||
import type { Chat, Message } from '@/api/chat';
|
||
import { getMessages, getChatMessagesByUuid, sendMessage, markMessagesAsRead } from '@/api/chat';
|
||
import { useChatWebSocket } from '@/hooks/useChatWebSocket';
|
||
import { getUserStatus, subscribeToUserStatus } from '@/hooks/usePresenceWebSocket';
|
||
|
||
function formatTime(ts?: string) {
|
||
try {
|
||
if (!ts) return '';
|
||
const d = new Date(ts);
|
||
if (Number.isNaN(d.getTime())) return '';
|
||
return d.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
|
||
} catch {
|
||
return '';
|
||
}
|
||
}
|
||
|
||
function formatRelativeStamp(ts?: string) {
|
||
if (!ts) return '';
|
||
const d = new Date(ts);
|
||
if (Number.isNaN(d.getTime())) return '';
|
||
const now = new Date();
|
||
const diffMs = now.getTime() - d.getTime();
|
||
if (diffMs < 0) return formatTime(ts);
|
||
const diffMin = Math.floor(diffMs / 60000);
|
||
const diffHr = Math.floor(diffMs / 3600000);
|
||
|
||
const pluralRu = (n: number, one: string, few: string, many: string) => {
|
||
const mod10 = n % 10;
|
||
const mod100 = n % 100;
|
||
if (mod10 === 1 && mod100 !== 11) return one;
|
||
if (mod10 >= 2 && mod10 <= 4 && (mod100 < 12 || mod100 > 14)) return few;
|
||
return many;
|
||
};
|
||
|
||
if (diffMin < 1) return 'только что';
|
||
if (diffMin < 60) return `${diffMin} ${pluralRu(diffMin, 'минуту', 'минуты', 'минут')} назад`;
|
||
if (diffHr < 6) {
|
||
if (diffHr === 1) return 'час назад';
|
||
return `${diffHr} ${pluralRu(diffHr, 'час', 'часа', 'часов')} назад`;
|
||
}
|
||
// больше 6 часов — показываем HH:mm
|
||
return formatTime(ts);
|
||
}
|
||
|
||
function dateKey(ts?: string) {
|
||
if (!ts) return '';
|
||
const d = new Date(ts);
|
||
if (Number.isNaN(d.getTime())) return '';
|
||
const y = d.getFullYear();
|
||
const m = String(d.getMonth() + 1).padStart(2, '0');
|
||
const day = String(d.getDate()).padStart(2, '0');
|
||
return `${y}-${m}-${day}`;
|
||
}
|
||
|
||
function formatDayHeader(ts?: string) {
|
||
if (!ts) return '';
|
||
const d = new Date(ts);
|
||
if (Number.isNaN(d.getTime())) return '';
|
||
const now = new Date();
|
||
const todayKey = dateKey(now.toISOString());
|
||
const yKey = dateKey(new Date(now.getTime() - 24 * 3600000).toISOString());
|
||
const k = dateKey(ts);
|
||
if (k === todayKey) return 'Сегодня';
|
||
if (k === yKey) return 'Вчера';
|
||
const dd = String(d.getDate()).padStart(2, '0');
|
||
const mm = String(d.getMonth() + 1).padStart(2, '0');
|
||
const yyyy = String(d.getFullYear());
|
||
return `${dd}.${mm}.${yyyy}`;
|
||
}
|
||
|
||
function formatLastSeen(iso: string | null) {
|
||
if (!iso) return null;
|
||
try {
|
||
const d = new Date(iso);
|
||
const now = new Date();
|
||
const sameYear = d.getFullYear() === now.getFullYear();
|
||
const sameDay = d.toDateString() === now.toDateString();
|
||
if (sameDay) {
|
||
return `Был(а) в сети сегодня в ${d.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })}`;
|
||
}
|
||
const datePart = d.toLocaleDateString('ru-RU', {
|
||
day: 'numeric',
|
||
month: 'long',
|
||
...(sameYear ? {} : { year: 'numeric' }),
|
||
});
|
||
const timePart = d.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
|
||
return `Был(а) в сети ${datePart} в ${timePart}`;
|
||
} catch {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
const SYSTEM_EMOJI_PREFIX = /^[\s🔔📝🗑️🗑✅📤⚠️⏰📅📚]+/;
|
||
|
||
function stripLeadingEmojis(s: string): string {
|
||
const t = (s || '').trim();
|
||
return t.replace(SYSTEM_EMOJI_PREFIX, '').replace(/^[-–—•\s]+/, '').trim() || t;
|
||
}
|
||
|
||
/** Убирает HTML-теги из строки (чтобы в чате не отображались теги в уведомлениях). */
|
||
function stripHtml(s: string): string {
|
||
if (typeof s !== 'string') return '';
|
||
return s.replace(/<[^>]*>/g, '').trim();
|
||
}
|
||
|
||
type SystemTheme = {
|
||
icon: React.ReactNode;
|
||
label: string;
|
||
};
|
||
|
||
function getSystemMessageTheme(content: string): SystemTheme {
|
||
const raw = (content || '').trim();
|
||
const lower = raw.toLowerCase();
|
||
|
||
if (/проверено|проверен/.test(lower) && /домашнее|дз|задани/.test(lower)) {
|
||
return { icon: <CheckCircleRoundedIcon sx={{ fontSize: 18 }} />, label: 'ДЗ проверено' };
|
||
}
|
||
if (/(сдано|сдал)\s|дз сдано|домашнее задание сдано/.test(lower)) {
|
||
return { icon: <SendRoundedIcon sx={{ fontSize: 18 }} />, label: 'ДЗ сдано' };
|
||
}
|
||
if (/просрочено|просрочен/.test(lower)) {
|
||
return { icon: <WarningAmberRoundedIcon sx={{ fontSize: 18 }} />, label: 'Просрочено' };
|
||
}
|
||
if (/напоминание|дедлайн|напоминание о дедлайне/.test(lower)) {
|
||
return { icon: <ScheduleRoundedIcon sx={{ fontSize: 18 }} />, label: 'Напоминание' };
|
||
}
|
||
if (/удалено|удален|удалил|сообщение удалено/.test(lower)) {
|
||
return { icon: <DeleteRoundedIcon sx={{ fontSize: 18 }} />, label: 'Удалено' };
|
||
}
|
||
if (/занятие началось|занятие завершено|урок начался|урок завершен|перенесен|отменен/.test(lower)) {
|
||
return { icon: <EventNoteRoundedIcon sx={{ fontSize: 18 }} />, label: 'Занятие' };
|
||
}
|
||
if (/новое домашнее|назначено.*домашнее|домашнее задание|^дз\s|дз назначено/.test(lower)) {
|
||
return { icon: <AssignmentRoundedIcon sx={{ fontSize: 18 }} />, label: 'Домашнее задание' };
|
||
}
|
||
if (/уведомление|напоминани/.test(lower) || /^🔔/.test(raw)) {
|
||
return { icon: <NotificationsActiveRoundedIcon sx={{ fontSize: 18 }} />, label: 'Уведомление' };
|
||
}
|
||
|
||
return { icon: <InfoOutlinedIcon sx={{ fontSize: 18 }} />, label: 'Системное сообщение' };
|
||
}
|
||
|
||
export function ChatWindow({
|
||
chat,
|
||
currentUserId,
|
||
onBack,
|
||
onMessagesMarkedAsRead,
|
||
}: {
|
||
chat: Chat | null;
|
||
currentUserId: number | null;
|
||
onBack?: () => void;
|
||
/** Вызывается после того, как часть сообщений отмечена прочитанными (для обновления счётчика в списке чатов) */
|
||
onMessagesMarkedAsRead?: () => void;
|
||
}) {
|
||
const [messages, setMessages] = React.useState<Message[]>([]);
|
||
const [loading, setLoading] = React.useState(false);
|
||
const [loadingMore, setLoadingMore] = React.useState(false);
|
||
const [page, setPage] = React.useState(1);
|
||
const [hasMore, setHasMore] = React.useState(false);
|
||
const [text, setText] = React.useState('');
|
||
const listRef = React.useRef<HTMLDivElement>(null);
|
||
const lastWheelUpAtRef = React.useRef<number>(0);
|
||
const markedReadRef = React.useRef<Set<string>>(new Set());
|
||
const lastSentRef = React.useRef<{ id: number | string; uuid?: string } | null>(null);
|
||
|
||
const chatUuid = (chat as any)?.uuid || null;
|
||
const otherUserId = (chat as any)?.other_user_id ?? null;
|
||
const [presence, setPresence] = React.useState<{ is_online: boolean; last_activity: string | null } | null>(null);
|
||
|
||
// initial from chat list + realtime updates
|
||
React.useEffect(() => {
|
||
if (!chat) return;
|
||
setPresence({
|
||
is_online: !!(chat as any).other_is_online,
|
||
last_activity: (chat as any).other_last_activity ?? null,
|
||
});
|
||
}, [chat]);
|
||
|
||
// Сброс при смене чата
|
||
React.useEffect(() => {
|
||
markedReadRef.current = new Set();
|
||
lastSentRef.current = null;
|
||
}, [chatUuid]);
|
||
|
||
React.useEffect(() => {
|
||
if (!otherUserId) return;
|
||
const existing = getUserStatus(otherUserId);
|
||
if (existing) setPresence({ is_online: existing.is_online, last_activity: existing.last_activity });
|
||
const unsubscribe = subscribeToUserStatus((s) => {
|
||
if (s.user_id === otherUserId) setPresence({ is_online: s.is_online, last_activity: s.last_activity });
|
||
});
|
||
return () => { unsubscribe?.(); };
|
||
}, [otherUserId]);
|
||
|
||
useChatWebSocket({
|
||
chatUuid,
|
||
enabled: !!chatUuid,
|
||
onMessage: (m) => {
|
||
const chatId = chat?.id != null ? Number(chat.id) : null;
|
||
const msgChatId = m.chat != null ? Number(m.chat) : null;
|
||
if (chatId == null || msgChatId !== chatId) return;
|
||
const mid = (m as any).id;
|
||
const muuid = (m as any).uuid;
|
||
const sent = lastSentRef.current;
|
||
if (sent && (String(mid) === String(sent.id) || (muuid != null && sent.uuid != null && String(muuid) === String(sent.uuid)))) {
|
||
lastSentRef.current = null;
|
||
return;
|
||
}
|
||
setMessages((prev) => {
|
||
const isDuplicate = prev.some((x) => {
|
||
const sameId = mid != null && x.id != null && String(x.id) === String(mid);
|
||
const sameUuid = muuid != null && (x as any).uuid != null && String((x as any).uuid) === String(muuid);
|
||
return sameId || sameUuid;
|
||
});
|
||
if (isDuplicate) return prev;
|
||
return [...prev, m];
|
||
});
|
||
},
|
||
});
|
||
|
||
React.useEffect(() => {
|
||
if (!chat) return;
|
||
setLoading(true);
|
||
setLoadingMore(false);
|
||
setPage(1);
|
||
setHasMore(false);
|
||
|
||
(async () => {
|
||
try {
|
||
const pageSize = 30;
|
||
const resp = chatUuid
|
||
? await getChatMessagesByUuid(chatUuid, { page: 1, page_size: pageSize })
|
||
: await getMessages(chat.id, { page: 1, page_size: pageSize });
|
||
const initial = (resp.results || []) as Message[];
|
||
const sorted = [...initial].sort((a: any, b: any) => {
|
||
const ta = a?.created_at ? new Date(a.created_at).getTime() : 0;
|
||
const tb = b?.created_at ? new Date(b.created_at).getTime() : 0;
|
||
return ta - tb;
|
||
});
|
||
setMessages(sorted);
|
||
setHasMore(!!(resp as any).next || ((resp as any).count ?? 0) > sorted.length);
|
||
|
||
// Молниеносный скролл вниз (мгновенно, без анимации)
|
||
requestAnimationFrame(() => {
|
||
const el = listRef.current;
|
||
if (el) el.scrollTo({ top: el.scrollHeight, behavior: 'auto' });
|
||
});
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
})();
|
||
}, [chat?.id, chatUuid]);
|
||
|
||
// Отмечаем сообщения прочитанными, когда они попадают в зону скролла
|
||
React.useEffect(() => {
|
||
if (!chatUuid || !listRef.current || messages.length === 0) return;
|
||
const container = listRef.current;
|
||
const observer = new IntersectionObserver(
|
||
(entries) => {
|
||
const toMark: string[] = [];
|
||
for (const e of entries) {
|
||
if (!e.isIntersecting) continue;
|
||
const uuid = (e.target as HTMLElement).getAttribute('data-message-uuid');
|
||
const isMine = (e.target as HTMLElement).getAttribute('data-is-mine') === 'true';
|
||
if (uuid && !isMine && !markedReadRef.current.has(uuid)) {
|
||
toMark.push(uuid);
|
||
markedReadRef.current.add(uuid);
|
||
}
|
||
}
|
||
if (toMark.length > 0) {
|
||
markMessagesAsRead(chatUuid, toMark)
|
||
.then(() => onMessagesMarkedAsRead?.())
|
||
.catch(() => {});
|
||
}
|
||
},
|
||
{ root: container, rootMargin: '0px', threshold: 0.5 }
|
||
);
|
||
const nodes = container.querySelectorAll('[data-message-uuid]');
|
||
nodes.forEach((n) => observer.observe(n));
|
||
return () => observer.disconnect();
|
||
}, [chatUuid, messages, onMessagesMarkedAsRead]);
|
||
|
||
const loadOlder = React.useCallback(async () => {
|
||
if (!chat || loading || loadingMore || !hasMore) return;
|
||
const container = listRef.current;
|
||
if (!container) return;
|
||
setLoadingMore(true);
|
||
const prevScrollHeight = container.scrollHeight;
|
||
const prevScrollTop = container.scrollTop;
|
||
|
||
try {
|
||
const nextPage = page + 1;
|
||
const pageSize = 30;
|
||
const resp = chatUuid
|
||
? await getChatMessagesByUuid(chatUuid, { page: nextPage, page_size: pageSize })
|
||
: await getMessages(chat.id, { page: nextPage, page_size: pageSize });
|
||
|
||
const batch = (resp.results || []) as Message[];
|
||
const sortedBatch = [...batch].sort((a: any, b: any) => {
|
||
const ta = a?.created_at ? new Date(a.created_at).getTime() : 0;
|
||
const tb = b?.created_at ? new Date(b.created_at).getTime() : 0;
|
||
return ta - tb;
|
||
});
|
||
|
||
setMessages((prev) => {
|
||
const existingKeys = new Set(prev.map((m: any) => m?.uuid || m?.id));
|
||
const toAdd = sortedBatch.filter((m: any) => !existingKeys.has(m?.uuid || m?.id));
|
||
const merged = [...toAdd, ...prev];
|
||
merged.sort((a: any, b: any) => {
|
||
const ta = a?.created_at ? new Date(a.created_at).getTime() : 0;
|
||
const tb = b?.created_at ? new Date(b.created_at).getTime() : 0;
|
||
return ta - tb;
|
||
});
|
||
return merged;
|
||
});
|
||
|
||
setPage(nextPage);
|
||
setHasMore(!!(resp as any).next);
|
||
} finally {
|
||
// сохранить позицию прокрутки
|
||
setTimeout(() => {
|
||
const c = listRef.current;
|
||
if (!c) return;
|
||
const newScrollHeight = c.scrollHeight;
|
||
c.scrollTop = prevScrollTop + (newScrollHeight - prevScrollHeight);
|
||
}, 0);
|
||
setLoadingMore(false);
|
||
}
|
||
}, [chat, chatUuid, hasMore, loading, loadingMore, page]);
|
||
|
||
const handleSend = async () => {
|
||
if (!chat) return;
|
||
const content = text.trim();
|
||
if (!content) return;
|
||
setText('');
|
||
try {
|
||
const msg = await sendMessage(chat.id, content);
|
||
lastSentRef.current = { id: msg.id, uuid: (msg as any).uuid };
|
||
const safeMsg = { ...msg, created_at: (msg as any).created_at || new Date().toISOString() } as Message;
|
||
setMessages((prev) => [...prev, safeMsg]);
|
||
requestAnimationFrame(() => {
|
||
requestAnimationFrame(() => {
|
||
const el = listRef.current;
|
||
if (el) el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
|
||
});
|
||
});
|
||
} catch {
|
||
// rollback
|
||
setText(content);
|
||
}
|
||
};
|
||
|
||
if (!chat) {
|
||
return (
|
||
<Box
|
||
className="ios-glass-panel"
|
||
sx={{
|
||
flex: 1,
|
||
borderRadius: '20px',
|
||
p: 3,
|
||
background: 'var(--ios26-glass)',
|
||
border: '1px solid var(--ios26-glass-border)',
|
||
backdropFilter: 'var(--ios26-blur)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
color: 'var(--md-sys-color-on-surface-variant)',
|
||
}}
|
||
>
|
||
Выберите чат из списка
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Box
|
||
className="ios-glass-panel"
|
||
data-tour="chat-window"
|
||
sx={{
|
||
flex: 1,
|
||
borderRadius: '20px',
|
||
p: 2,
|
||
background: 'var(--ios26-glass)',
|
||
border: '1px solid var(--ios26-glass-border)',
|
||
backdropFilter: 'var(--ios26-blur)',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
minHeight: 0,
|
||
}}
|
||
>
|
||
{/* Header */}
|
||
<Box sx={{ px: 1, py: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25, minWidth: 0 }}>
|
||
{onBack && (
|
||
<IconButton
|
||
onClick={onBack}
|
||
sx={{ mr: 0.5, color: 'var(--md-sys-color-on-surface)' }}
|
||
aria-label="Назад"
|
||
>
|
||
<span className="material-symbols-outlined" style={{ fontSize: 24 }}>
|
||
arrow_back
|
||
</span>
|
||
</IconButton>
|
||
)}
|
||
<Avatar
|
||
src={(chat as any).avatar_url || undefined}
|
||
alt={chat.participant_name || 'Аватар'}
|
||
sx={{
|
||
width: 40,
|
||
height: 40,
|
||
bgcolor: 'rgba(116, 68, 253, 0.18)',
|
||
color: 'var(--md-sys-color-primary)',
|
||
fontWeight: 800,
|
||
}}
|
||
>
|
||
{(chat.participant_name || 'Ч')
|
||
.trim()
|
||
.split(/\s+/)
|
||
.slice(0, 2)
|
||
.map((p) => p[0])
|
||
.join('')
|
||
.toUpperCase()}
|
||
</Avatar>
|
||
<Box sx={{ minWidth: 0 }}>
|
||
<Typography
|
||
sx={{
|
||
fontWeight: 800,
|
||
fontSize: 16,
|
||
color: 'var(--md-sys-color-on-surface)',
|
||
whiteSpace: 'nowrap',
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
}}
|
||
>
|
||
{chat.participant_name || 'Чат'}
|
||
</Typography>
|
||
<Typography sx={{ fontSize: 12, color: 'var(--md-sys-color-on-surface-variant)' }}>
|
||
{presence?.is_online
|
||
? 'Онлайн'
|
||
: formatLastSeen(presence?.last_activity ?? null) || 'Оффлайн'}
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
|
||
{/* Messages */}
|
||
<Box
|
||
ref={listRef}
|
||
sx={{
|
||
flex: 1,
|
||
minHeight: 0,
|
||
overflowY: 'auto',
|
||
px: 1,
|
||
py: 1,
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: 1,
|
||
}}
|
||
onWheel={(e) => {
|
||
// deltaY < 0 = прокрутка вверх
|
||
if (e.deltaY < 0) lastWheelUpAtRef.current = Date.now();
|
||
}}
|
||
onScroll={(e) => {
|
||
const el = e.currentTarget;
|
||
// Подгружаем только если:
|
||
// - до верха осталось < 40px
|
||
// - пользователь именно скроллит вверх (wheel up недавно)
|
||
const nearTop = el.scrollTop < 40;
|
||
const wheelUpRecently = Date.now() - lastWheelUpAtRef.current < 200;
|
||
if (nearTop && wheelUpRecently) loadOlder();
|
||
}}
|
||
>
|
||
{loadingMore && (
|
||
<Typography sx={{ color: 'var(--md-sys-color-on-surface-variant)', textAlign: 'center', fontSize: 12 }}>
|
||
Загрузка…
|
||
</Typography>
|
||
)}
|
||
{loading ? (
|
||
<Typography sx={{ color: 'var(--md-sys-color-on-surface-variant)', textAlign: 'center', mt: 2 }}>
|
||
Загрузка…
|
||
</Typography>
|
||
) : (
|
||
(() => {
|
||
const out: React.ReactNode[] = [];
|
||
let prevDay = '';
|
||
const seen = new Set<string>();
|
||
const uniqueMessages = messages.filter((m) => {
|
||
const k = String((m as any).uuid ?? m.id ?? '');
|
||
if (!k || seen.has(k)) return false;
|
||
seen.add(k);
|
||
return true;
|
||
});
|
||
|
||
uniqueMessages.forEach((m, idx) => {
|
||
const created = (m as any).created_at as string | undefined;
|
||
const day = dateKey(created);
|
||
if (day && day !== prevDay) {
|
||
out.push(
|
||
<Box
|
||
key={`day-${day}`}
|
||
sx={{
|
||
alignSelf: 'center',
|
||
px: 1.5,
|
||
py: 0.5,
|
||
borderRadius: 999,
|
||
backgroundColor: 'rgba(255,255,255,0.7)',
|
||
border: '1px solid rgba(0,0,0,0.06)',
|
||
color: 'var(--md-sys-color-on-surface-variant)',
|
||
fontSize: 12,
|
||
fontWeight: 700,
|
||
mb: 0.5,
|
||
}}
|
||
>
|
||
{formatDayHeader(created)}
|
||
</Box>
|
||
);
|
||
prevDay = day;
|
||
}
|
||
|
||
const senderId =
|
||
(m as any).sender_id ??
|
||
(typeof (m as any).sender === 'number'
|
||
? (m as any).sender
|
||
: (m as any).sender?.id ?? null);
|
||
const isMine = !!currentUserId && senderId === currentUserId;
|
||
const isSystem =
|
||
(m as any).message_type === 'system' ||
|
||
(typeof (m as any).sender === 'string' && (m as any).sender.toLowerCase() === 'system') ||
|
||
(!senderId && (m as any).sender_name === 'System');
|
||
const msgContent = (m as any).content || '';
|
||
const sysTheme = isSystem ? getSystemMessageTheme(msgContent) : null;
|
||
const sysDisplayContent = isSystem ? stripHtml(stripLeadingEmojis(msgContent)) : '';
|
||
|
||
const msgUuid = (m as any).uuid ? String((m as any).uuid) : null;
|
||
const msgKey = (m as any).uuid || m.id || `msg-${idx}`;
|
||
out.push(
|
||
<Box
|
||
key={msgKey}
|
||
data-message-uuid={msgUuid ?? undefined}
|
||
data-is-mine={isMine}
|
||
sx={{
|
||
alignSelf: isSystem ? 'center' : isMine ? 'flex-end' : 'flex-start',
|
||
maxWidth: isSystem ? '85%' : '75%',
|
||
px: 1.25,
|
||
py: 0.75,
|
||
borderRadius: 2,
|
||
backgroundColor: isSystem
|
||
? 'rgb(245 242 253)'
|
||
: isMine
|
||
? 'var(--md-sys-color-primary)'
|
||
: 'rgba(255,255,255,0.75)',
|
||
color: isSystem
|
||
? 'var(--md-sys-color-on-surface)'
|
||
: isMine
|
||
? 'var(--md-sys-color-on-primary)'
|
||
: 'var(--md-sys-color-on-surface)',
|
||
border: isSystem ? '1px dashed rgba(116, 68, 253, 0.25)' : isMine ? 'none' : '1px solid rgba(0,0,0,0.06)',
|
||
}}
|
||
>
|
||
{isSystem && sysTheme && (
|
||
<>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 0.75,
|
||
mb: 0.25,
|
||
color: 'var(--md-sys-color-primary)',
|
||
}}
|
||
>
|
||
<Box sx={{ display: 'flex', alignItems: 'center' }}>{sysTheme.icon}</Box>
|
||
<Typography
|
||
sx={{
|
||
fontSize: 11,
|
||
fontWeight: 800,
|
||
letterSpacing: '0.06em',
|
||
color: 'inherit',
|
||
textTransform: 'uppercase',
|
||
}}
|
||
>
|
||
{sysTheme.label}
|
||
</Typography>
|
||
</Box>
|
||
<Typography sx={{ fontSize: 13, whiteSpace: 'pre-wrap' }}>
|
||
{sysDisplayContent || '—'}
|
||
</Typography>
|
||
</>
|
||
)}
|
||
{!isSystem && (
|
||
<Typography sx={{ fontSize: 13, whiteSpace: 'pre-wrap' }}>{msgContent}</Typography>
|
||
)}
|
||
<Typography sx={{ fontSize: 11, opacity: 0.7, mt: 0.25, textAlign: 'right' }}>
|
||
{formatRelativeStamp((m as any).created_at)}
|
||
</Typography>
|
||
</Box>
|
||
);
|
||
});
|
||
|
||
return out;
|
||
})()
|
||
)}
|
||
</Box>
|
||
|
||
{/* Input */}
|
||
<Box
|
||
sx={{
|
||
pt: 1.25,
|
||
borderTop: '1px solid rgba(0,0,0,0.06)',
|
||
display: 'flex',
|
||
gap: 1,
|
||
alignItems: 'center',
|
||
}}
|
||
>
|
||
<TextField
|
||
value={text}
|
||
onChange={(e) => setText(e.target.value)}
|
||
placeholder="Сообщение…"
|
||
fullWidth
|
||
multiline
|
||
minRows={1}
|
||
maxRows={4}
|
||
sx={{
|
||
'& .MuiInputBase-root': {
|
||
borderRadius: 3,
|
||
backgroundColor: 'rgba(255,255,255,0.85)',
|
||
},
|
||
}}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter' && !e.shiftKey) {
|
||
e.preventDefault();
|
||
handleSend();
|
||
}
|
||
}}
|
||
/>
|
||
<IconButton
|
||
onClick={handleSend}
|
||
sx={{
|
||
backgroundColor: 'var(--md-sys-color-primary)',
|
||
color: 'var(--md-sys-color-on-primary)',
|
||
'&:hover': { backgroundColor: 'color-mix(in srgb, var(--md-sys-color-primary) 88%, #000 12%)' },
|
||
}}
|
||
>
|
||
<SendRoundedIcon />
|
||
</IconButton>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}
|
||
|