first commit

apps/frontend/components/family/family-group-view.tsx

@@ -0,0 +1,805 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  ArrowLeft,
+  BarChart3,
+  Camera,
+  FileText,
+  Loader2,
+  Mic,
+  Paperclip,
+  Plus,
+  Send,
+  Smile,
+  UserPlus,
+  Volume2,
+  VolumeX
+} from 'lucide-react';
+import { useAuth } from '@/components/id/auth-provider';
+import { useToast } from '@/components/id/toast-provider';
+import { useRealtime } from '@/components/notifications/realtime-provider';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { useRequireAuth } from '@/hooks/use-require-auth';
+import {
+  apiFetch,
+  ChatMessage,
+  ChatRoom,
+  createChatRoom,
+  FamilyGroup,
+  fetchChatMessages,
+  fetchChatRooms,
+  fetchFamilyGroup,
+  getApiErrorMessage,
+  sendChatMessage,
+  sendFamilyInvite,
+  setChatRoomMuted,
+  updateFamilyGroup,
+  voteChatPoll
+} from '@/lib/api';
+import { cn } from '@/lib/utils';
+import {
+  createBlobObjectUrl,
+  fetchAuthenticatedMediaBlob,
+  mediaExpiresAtMs,
+  revokeBlobObjectUrl,
+  shouldRefreshMedia,
+  triggerBlobDownload
+} from '@/lib/authenticated-media';
+import {
+  detectChatMessageType,
+  fileIconLabel,
+  formatFileSize,
+  parseMessageMetadata,
+  resolveChatContentType
+} from '@/lib/chat-media';
+
+const EMOJIS = ['😀', '😂', '❤️', '👍', '🎉', '🔥', '😍', '🙏', '👋', '🤔', '😢', '😎'];
+
+interface PresignedUploadResponse {
+  uploadUrl: string;
+  storageKey: string;
+}
+
+interface LoadedChatMedia {
+  blobUrl: string;
+  expiresAt: number;
+  fileName?: string;
+}
+
+function formatMessageTime(value: string) {
+  return new Intl.DateTimeFormat('ru-RU', { hour: '2-digit', minute: '2-digit' }).format(new Date(value));
+}
+
+function FamilyAvatar({ groupId, name, hasAvatar, token }: { groupId: string; name: string; hasAvatar?: boolean; token: string | null }) {
+  const [url, setUrl] = useState<string | null>(null);
+  useEffect(() => {
+    if (!hasAvatar || !token) return;
+    apiFetch<{ accessUrl: string }>(`/media/families/${groupId}/avatar/url`, {}, token)
+      .then((response) => setUrl(response.accessUrl))
+      .catch(() => setUrl(null));
+  }, [groupId, hasAvatar, token]);
+  return (
+    <Avatar className="h-11 w-11">
+      {url ? <AvatarImage src={url} alt={name} /> : null}
+      <AvatarFallback>{name.slice(0, 2).toUpperCase()}</AvatarFallback>
+    </Avatar>
+  );
+}
+
+export function FamilyGroupView({ groupId }: { groupId: string }) {
+  const router = useRouter();
+  const { user, token } = useAuth();
+  const { isReady, isPinLocked } = useRequireAuth();
+  const { showToast } = useToast();
+  const { subscribe } = useRealtime();
+
+  const [group, setGroup] = useState<FamilyGroup | null>(null);
+  const [rooms, setRooms] = useState<ChatRoom[]>([]);
+  const [activeRoomId, setActiveRoomId] = useState<string | null>(null);
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [draft, setDraft] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [sending, setSending] = useState(false);
+  const [inviteOpen, setInviteOpen] = useState(false);
+  const [createRoomOpen, setCreateRoomOpen] = useState(false);
+  const [pollOpen, setPollOpen] = useState(false);
+  const [inviteTarget, setInviteTarget] = useState('');
+  const [renameValue, setRenameValue] = useState('');
+  const [newRoomName, setNewRoomName] = useState('');
+  const [selectedMembers, setSelectedMembers] = useState<string[]>([]);
+  const [pollQuestion, setPollQuestion] = useState('');
+  const [pollOptions, setPollOptions] = useState(['', '']);
+  const [emojiOpen, setEmojiOpen] = useState(false);
+  const [recording, setRecording] = useState(false);
+  const [mediaUrls, setMediaUrls] = useState<Record<string, LoadedChatMedia>>({});
+  const [downloadingKey, setDownloadingKey] = useState<string | null>(null);
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const recordingStartedAtRef = useRef<number | null>(null);
+  const mediaUrlsRef = useRef<Record<string, LoadedChatMedia>>({});
+  const avatarInputRef = useRef<HTMLInputElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    mediaUrlsRef.current = mediaUrls;
+  }, [mediaUrls]);
+
+  const appendMessage = useCallback((message: ChatMessage) => {
+    setMessages((current) => (current.some((item) => item.id === message.id) ? current : [...current, message]));
+  }, []);
+
+  const activeRoom = useMemo(() => rooms.find((room) => room.id === activeRoomId) ?? null, [activeRoomId, rooms]);
+  const myMembership = activeRoom?.members.find((member) => member.userId === user?.id);
+
+  const loadGroup = useCallback(async () => {
+    if (!token || isPinLocked) return;
+    const [groupResponse, roomsResponse] = await Promise.all([fetchFamilyGroup(groupId, token), fetchChatRooms(groupId, token)]);
+    setGroup(groupResponse);
+    setRenameValue(groupResponse.name);
+    const roomList = roomsResponse.rooms ?? [];
+    setRooms(roomList);
+    setActiveRoomId((current) => current ?? roomList[0]?.id ?? null);
+  }, [groupId, isPinLocked, token]);
+
+  const loadMessages = useCallback(async (roomId: string) => {
+    if (!token || isPinLocked) return;
+    const response = await fetchChatMessages(roomId, token);
+    setMessages(response.messages ?? []);
+  }, [isPinLocked, token]);
+
+  useEffect(() => {
+    if (!isReady || !token || isPinLocked) return;
+    setLoading(true);
+    loadGroup()
+      .catch((error) => showToast(getApiErrorMessage(error, 'Не удалось загрузить семью') ?? 'Ошибка'))
+      .finally(() => setLoading(false));
+  }, [isPinLocked, isReady, loadGroup, showToast, token]);
+
+  useEffect(() => {
+    if (!activeRoomId) return;
+    void loadMessages(activeRoomId);
+  }, [activeRoomId, loadMessages]);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  useEffect(() => {
+    return subscribe((event) => {
+      if (event.type !== 'chat_message') return;
+      const payload = event.payload;
+      if (!payload?.roomId || payload.roomId !== activeRoomId) return;
+      if (payload.message) {
+        appendMessage(payload.message);
+      } else {
+        void loadMessages(activeRoomId!);
+      }
+      void loadGroup();
+    });
+  }, [activeRoomId, appendMessage, loadGroup, loadMessages, subscribe]);
+
+  const loadChatMedia = useCallback(
+    async (message: ChatMessage, force = false) => {
+      if (!token || !activeRoomId || !message.storageKey) return;
+      const storageKey = message.storageKey;
+      const existing = mediaUrlsRef.current[storageKey];
+      if (!force && existing && !shouldRefreshMedia(existing.expiresAt)) return;
+
+      const meta = parseMessageMetadata(message.metadataJson);
+      const fileName = meta.fileName || message.content || undefined;
+      const query = new URLSearchParams({ storageKey });
+      if (fileName) query.set('fileName', fileName);
+
+      try {
+        const access = await apiFetch<{ accessUrl: string; expiresAt: string }>(
+          `/media/chat/${activeRoomId}/media/url?${query.toString()}`,
+          {},
+          token
+        );
+        const blob = await fetchAuthenticatedMediaBlob(access.accessUrl, token);
+        const blobUrl = createBlobObjectUrl(blob);
+        setMediaUrls((current) => {
+          revokeBlobObjectUrl(current[storageKey]?.blobUrl);
+          return {
+            ...current,
+            [storageKey]: {
+              blobUrl,
+              expiresAt: mediaExpiresAtMs(access.expiresAt),
+              fileName
+            }
+          };
+        });
+      } catch {
+        // ignore failed media loads in background
+      }
+    },
+    [activeRoomId, token]
+  );
+
+  useEffect(() => {
+    if (!token || !activeRoomId) return;
+    messages.forEach((message) => {
+      if (message.storageKey) void loadChatMedia(message);
+    });
+  }, [activeRoomId, loadChatMedia, messages, token]);
+
+  useEffect(() => {
+    if (!token || !activeRoomId) return;
+    const timer = window.setInterval(() => {
+      messages.forEach((message) => {
+        if (!message.storageKey) return;
+        const cached = mediaUrlsRef.current[message.storageKey];
+        if (cached && shouldRefreshMedia(cached.expiresAt)) {
+          void loadChatMedia(message, true);
+        }
+      });
+    }, 60_000);
+    return () => window.clearInterval(timer);
+  }, [activeRoomId, loadChatMedia, messages, token]);
+
+  useEffect(() => {
+    return () => {
+      Object.values(mediaUrlsRef.current).forEach((entry) => revokeBlobObjectUrl(entry.blobUrl));
+    };
+  }, []);
+
+  async function downloadChatFile(message: ChatMessage) {
+    if (!token || !activeRoomId || !message.storageKey) return;
+    const storageKey = message.storageKey;
+    const meta = parseMessageMetadata(message.metadataJson);
+    const fileName = meta.fileName || message.content || 'file';
+    setDownloadingKey(storageKey);
+    try {
+      let blob: Blob | null = null;
+      const cached = mediaUrls[storageKey];
+      if (cached?.blobUrl) {
+        blob = await fetch(cached.blobUrl).then((response) => response.blob());
+      } else {
+        const query = new URLSearchParams({ storageKey });
+        if (fileName) query.set('fileName', fileName);
+        const access = await apiFetch<{ accessUrl: string }>(
+          `/media/chat/${activeRoomId}/media/url?${query.toString()}`,
+          {},
+          token
+        );
+        blob = await fetchAuthenticatedMediaBlob(`${access.accessUrl}?download=1`, token);
+      }
+      if (!blob) {
+        throw new Error('Не удалось получить файл');
+      }
+      triggerBlobDownload(blob, fileName);
+    } catch (error) {
+      showToast(getApiErrorMessage(error, 'Не удалось скачать файл') ?? 'Ошибка');
+    } finally {
+      setDownloadingKey(null);
+    }
+  }
+
+  async function saveRename() {
+    if (!token || !renameValue.trim()) return;
+    try {
+      const updated = await updateFamilyGroup(groupId, renameValue.trim(), token);
+      setGroup(updated);
+      showToast('Название семьи обновлено');
+    } catch (error) {
+      showToast(getApiErrorMessage(error, 'Не удалось переименовать семью') ?? 'Ошибка');
+    }
+  }
+
+  async function uploadFamilyAvatar(file: File) {
+    if (!token) return;
+    try {
+      const presigned = await apiFetch<PresignedUploadResponse>(
+        `/media/families/${groupId}/avatar/upload-url`,
+        { method: 'POST', body: JSON.stringify({ contentType: file.type }) },
+        token
+      );
+      await fetch(presigned.uploadUrl, { method: 'PUT', headers: { 'Content-Type': file.type }, body: file });
+      await apiFetch(`/media/families/${groupId}/avatar/confirm`, {
+        method: 'POST',
+        body: JSON.stringify({ storageKey: presigned.storageKey })
+      }, token);
+      await loadGroup();
+      showToast('Аватар семьи обновлён');
+    } catch (error) {
+      showToast(getApiErrorMessage(error, 'Не удалось загрузить аватар') ?? 'Ошибка');
+    }
+  }
+
+  async function submitInvite() {
+    if (!token || !inviteTarget.trim()) return;
+    try {
+      await sendFamilyInvite(groupId, inviteTarget.trim(), token);
+      setInviteOpen(false);
+      setInviteTarget('');
+      showToast('Приглашение отправлено');
+    } catch (error) {
+      showToast(getApiErrorMessage(error, 'Не удалось отправить приглашение') ?? 'Ошибка');
+    }
+  }
+
+  async function submitCreateRoom() {
+    if (!token || !newRoomName.trim()) return;
+    try {
+      const room = await createChatRoom(groupId, newRoomName.trim(), selectedMembers, token);
+      setRooms((current) => [...current, room]);
+      setActiveRoomId(room.id);
+      setCreateRoomOpen(false);
+      setNewRoomName('');
+      setSelectedMembers([]);
+      showToast('Групповой чат создан');
+    } catch (error) {
+      showToast(getApiErrorMessage(error, 'Не удалось создать чат') ?? 'Ошибка');
+    }
+  }
+
+  async function sendText(type: string = 'TEXT') {
+    if (!token || !activeRoomId || sending) return;
+    const content = draft.trim();
+    if (!content && type === 'TEXT') return;
+    setSending(true);
+    try {
+      const message = await sendChatMessage(activeRoomId, { type, content }, token);
+      appendMessage(message);
+      setDraft('');
+      setEmojiOpen(false);
+      void loadGroup();
+    } catch (error) {
+      showToast(getApiErrorMessage(error, 'Не удалось отправить сообщение') ?? 'Ошибка');
+    } finally {
+      setSending(false);
+    }
+  }
+
+  async function uploadChatFile(file: File, options?: { voice?: boolean; durationMs?: number }) {
+    if (!token || !activeRoomId) return;
+    setSending(true);
+    try {
+      const contentType = resolveChatContentType(file);
+      const messageType = detectChatMessageType(file, { voice: options?.voice });
+      const metadata = {
+        fileName: file.name,
+        fileSize: file.size,
+        ...(options?.durationMs ? { durationMs: options.durationMs } : {})
+      };
+
+      const presigned = await apiFetch<PresignedUploadResponse>(
+        `/media/chat/${activeRoomId}/media/upload-url`,
+        {
+          method: 'POST',
+          body: JSON.stringify({ contentType, fileName: file.name })
+        },
+        token
+      );
+      await fetch(presigned.uploadUrl, {
+        method: 'PUT',
+        headers: { 'Content-Type': contentType },
+        body: file
+      });
+      const message = await sendChatMessage(
+        activeRoomId,
+        {
+          type: messageType,
+          storageKey: presigned.storageKey,
+          mimeType: contentType,
+          content:
+            messageType === 'VOICE'
+              ? 'Голосовое сообщение'
+              : messageType === 'FILE'
+                ? file.name
+                : undefined,
+          metadataJson: JSON.stringify(metadata)
+        },
+        token
+      );
+      appendMessage(message);
+      void loadGroup();
+    } catch (error) {
+      showToast(getApiErrorMessage(error, 'Не удалось отправить файл') ?? 'Ошибка');
+    } finally {
+      setSending(false);
+    }
+  }
+
+  async function submitPoll() {
+    if (!token || !activeRoomId) return;
+    const options = pollOptions.map((item) => item.trim()).filter(Boolean);
+    if (!pollQuestion.trim() || options.length < 2) {
+      showToast('Укажите вопрос и минимум 2 варианта');
+      return;
+    }
+    setSending(true);
+    try {
+      const message = await sendChatMessage(
+        activeRoomId,
+        { type: 'POLL', poll: { question: pollQuestion.trim(), options } },
+        token
+      );
+      appendMessage(message);
+      setPollOpen(false);
+      setPollQuestion('');
+      setPollOptions(['', '']);
+      void loadGroup();
+    } catch (error) {
+      showToast(getApiErrorMessage(error, 'Не удалось создать опрос') ?? 'Ошибка');
+    } finally {
+      setSending(false);
+    }
+  }
+
+  async function toggleMute() {
+    if (!token || !activeRoomId || !activeRoom) return;
+    const muted = !myMembership?.notificationsMuted;
+    await setChatRoomMuted(activeRoomId, muted, token);
+    setRooms((current) =>
+      current.map((room) =>
+        room.id === activeRoomId
+          ? {
+              ...room,
+              members: room.members.map((member) =>
+                member.userId === user?.id ? { ...member, notificationsMuted: muted } : member
+              )
+            }
+          : room
+      )
+    );
+    showToast(muted ? 'Уведомления чата выключены' : 'Уведомления чата включены');
+  }
+
+  async function startVoiceRecording() {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const preferredTypes = ['audio/webm;codecs=opus', 'audio/webm', 'audio/ogg;codecs=opus', 'audio/ogg'];
+      const mimeType = preferredTypes.find((type) => MediaRecorder.isTypeSupported(type)) ?? '';
+      const recorder = mimeType ? new MediaRecorder(stream, { mimeType }) : new MediaRecorder(stream);
+      const chunks: BlobPart[] = [];
+      recorder.ondataavailable = (event) => {
+        if (event.data.size > 0) chunks.push(event.data);
+      };
+      recorder.onstop = () => {
+        stream.getTracks().forEach((track) => track.stop());
+        const durationMs = recordingStartedAtRef.current ? Date.now() - recordingStartedAtRef.current : undefined;
+        recordingStartedAtRef.current = null;
+        const blob = new Blob(chunks, { type: 'audio/webm' });
+        void uploadChatFile(new File([blob], `voice-${Date.now()}.webm`, { type: 'audio/webm' }), {
+          voice: true,
+          durationMs
+        });
+      };
+      mediaRecorderRef.current = recorder;
+      recordingStartedAtRef.current = Date.now();
+      recorder.start();
+      setRecording(true);
+    } catch {
+      showToast('Не удалось получить доступ к микрофону');
+    }
+  }
+
+  function stopVoiceRecording() {
+    mediaRecorderRef.current?.stop();
+    mediaRecorderRef.current = null;
+    setRecording(false);
+  }
+
+  if (!isReady || loading) {
+    return <div className="py-20 text-center text-[#667085]">Загрузка семьи...</div>;
+  }
+
+  return (
+    <div className="flex h-[calc(100vh-120px)] min-h-[640px] overflow-hidden rounded-[28px] border border-[#eceef4] bg-[#eef2f8]">
+      <aside className="flex w-[300px] shrink-0 flex-col border-r border-[#e4e8ef] bg-white">
+        <div className="border-b border-[#eceef4] p-4">
+          <button type="button" className="mb-3 flex items-center gap-2 text-sm text-[#667085]" onClick={() => router.push('/family')}>
+            <ArrowLeft className="h-4 w-4" />
+            Все семьи
+          </button>
+          <div className="flex items-center gap-3">
+            <button type="button" onClick={() => avatarInputRef.current?.click()}>
+              <FamilyAvatar groupId={groupId} name={group?.name ?? 'С'} hasAvatar={group?.hasAvatar} token={token} />
+            </button>
+            <div className="min-w-0 flex-1">
+              <Input value={renameValue} onChange={(event) => setRenameValue(event.target.value)} className="h-9" />
+              <Button size="sm" variant="secondary" className="mt-2 h-8 rounded-xl" onClick={() => void saveRename()}>
+                Сохранить название
+              </Button>
+            </div>
+          </div>
+          <div className="mt-3 flex gap-2">
+            <Button size="sm" variant="secondary" className="flex-1 rounded-xl" onClick={() => setInviteOpen(true)}>
+              <UserPlus className="mr-1 h-4 w-4" />
+              Пригласить
+            </Button>
+            <Button size="sm" variant="secondary" className="rounded-xl" onClick={() => avatarInputRef.current?.click()}>
+              <Camera className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+        <div className="flex items-center justify-between px-4 py-3">
+          <p className="text-sm font-semibold text-[#667085]">Чаты</p>
+          <Button size="sm" variant="ghost" className="h-8 w-8 rounded-xl p-0" onClick={() => setCreateRoomOpen(true)}>
+            <Plus className="h-4 w-4" />
+          </Button>
+        </div>
+        <div className="flex-1 overflow-y-auto">
+          {rooms.map((room) => (
+            <button
+              key={room.id}
+              type="button"
+              onClick={() => setActiveRoomId(room.id)}
+              className={cn(
+                'flex w-full items-start gap-3 px-4 py-3 text-left transition hover:bg-[#f7f9fc]',
+                activeRoomId === room.id && 'bg-[#3390ec]/10'
+              )}
+            >
+              <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[#3390ec] text-sm font-semibold text-white">
+                {room.name.slice(0, 2).toUpperCase()}
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center justify-between gap-2">
+                  <p className="truncate font-medium">{room.name}</p>
+                  {room.lastMessage ? (
+                    <span className="shrink-0 text-[11px] text-[#a8adbc]">{formatMessageTime(room.lastMessage.createdAt)}</span>
+                  ) : null}
+                </div>
+                <p className="truncate text-sm text-[#667085]">
+                  {room.lastMessage?.content ?? (room.type === 'GENERAL' ? 'Общий чат семьи' : 'Нет сообщений')}
+                </p>
+              </div>
+            </button>
+          ))}
+        </div>
+      </aside>
+
+      <section className="flex min-w-0 flex-1 flex-col bg-[#e6ebf2]">
+        {activeRoom ? (
+          <>
+            <div className="flex items-center justify-between border-b border-[#dce3ec] bg-white px-4 py-3">
+              <div>
+                <h2 className="font-semibold">{activeRoom.name}</h2>
+                <p className="text-xs text-[#667085]">{activeRoom.members.length} участников</p>
+              </div>
+              <Button size="sm" variant="secondary" className="rounded-xl" onClick={() => void toggleMute()}>
+                {myMembership?.notificationsMuted ? <VolumeX className="h-4 w-4" /> : <Volume2 className="h-4 w-4" />}
+              </Button>
+            </div>
+
+            <div className="flex-1 space-y-2 overflow-y-auto px-4 py-4">
+              {messages.map((message) => {
+                const mine = message.senderId === user?.id;
+                return (
+                  <div key={message.id} className={cn('flex', mine ? 'justify-end' : 'justify-start')}>
+                    <div
+                      className={cn(
+                        'max-w-[78%] rounded-[18px] px-3 py-2 shadow-sm',
+                        mine ? 'rounded-br-md bg-[#effdde] text-[#1f2430]' : 'rounded-bl-md bg-white text-[#1f2430]'
+                      )}
+                    >
+                      {!mine ? <p className="mb-1 text-xs font-semibold text-[#3390ec]">{message.senderName}</p> : null}
+                      {message.type === 'POLL' && message.poll ? (
+                        <div className="space-y-2">
+                          <p className="font-medium">{message.poll.question}</p>
+                          {message.poll.options.map((option) => {
+                            const total = message.poll!.options.reduce((sum, item) => sum + item.voteCount, 0) || 1;
+                            const percent = Math.round((option.voteCount / total) * 100);
+                            return (
+                              <button
+                                key={option.id}
+                                type="button"
+                                className="relative w-full overflow-hidden rounded-xl border border-[#dce3ec] px-3 py-2 text-left text-sm"
+                                onClick={() => void voteChatPoll(message.id, [option.id], token).then((updated) => {
+                                  setMessages((current) => current.map((item) => (item.id === updated.id ? updated : item)));
+                                })}
+                              >
+                                <div className="absolute inset-y-0 left-0 bg-[#3390ec]/15" style={{ width: `${percent}%` }} />
+                                <span className="relative flex justify-between gap-2">
+                                  <span>{option.text}</span>
+                                  <span>{percent}%</span>
+                                </span>
+                              </button>
+                            );
+                          })}
+                        </div>
+                      ) : message.storageKey ? (
+                        (() => {
+                          const media = mediaUrls[message.storageKey];
+                          const meta = parseMessageMetadata(message.metadataJson);
+                          const fileName = meta.fileName || message.content || 'Файл';
+                          if (!media?.blobUrl) {
+                            return (
+                              <div className="flex items-center gap-2 text-sm text-[#667085]">
+                                <Loader2 className="h-4 w-4 animate-spin" />
+                                Загрузка файла...
+                              </div>
+                            );
+                          }
+                          if (message.type === 'IMAGE') {
+                            return (
+                              // eslint-disable-next-line @next/next/no-img-element
+                              <img src={media.blobUrl} alt={fileName} className="max-h-72 max-w-full rounded-xl object-cover" />
+                            );
+                          }
+                          if (message.type === 'VOICE' || message.type === 'AUDIO') {
+                            return (
+                              <div className="flex min-w-[220px] items-center gap-3 rounded-xl bg-black/5 px-3 py-2">
+                                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#3390ec] text-white">
+                                  {message.type === 'VOICE' ? <Mic className="h-4 w-4" /> : <Volume2 className="h-4 w-4" />}
+                                </div>
+                                <div className="min-w-0 flex-1">
+                                  <p className="text-xs font-medium text-[#667085]">
+                                    {message.type === 'VOICE' ? 'Голосовое сообщение' : 'Аудиофайл'}
+                                  </p>
+                                  <audio controls preload="metadata" src={media.blobUrl} className="mt-1 h-8 w-full max-w-[240px]" />
+                                </div>
+                              </div>
+                            );
+                          }
+                          return (
+                            <button
+                              type="button"
+                              disabled={downloadingKey === message.storageKey}
+                              onClick={() => void downloadChatFile(message)}
+                              className="flex min-w-[220px] items-center gap-3 rounded-xl bg-black/5 px-3 py-2 text-left transition hover:bg-black/10 disabled:opacity-70"
+                            >
+                              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#3390ec] text-xs font-bold text-white">
+                                {downloadingKey === message.storageKey ? (
+                                  <Loader2 className="h-4 w-4 animate-spin" />
+                                ) : (
+                                  fileIconLabel(fileName, message.mimeType)
+                                )}
+                              </div>
+                              <div className="min-w-0 flex-1">
+                                <p className="truncate text-sm font-medium">{fileName}</p>
+                                <p className="text-xs text-[#667085]">{formatFileSize(meta.fileSize) || 'Документ'}</p>
+                              </div>
+                              <FileText className="h-4 w-4 shrink-0 text-[#667085]" />
+                            </button>
+                          );
+                        })()
+                      ) : (
+                        <p className="whitespace-pre-wrap break-words text-[15px] leading-relaxed">{message.content}</p>
+                      )}
+                      <p className={cn('mt-1 text-[11px]', mine ? 'text-[#7ea06a]' : 'text-[#a8adbc]')}>
+                        {formatMessageTime(message.createdAt)}
+                      </p>
+                    </div>
+                  </div>
+                );
+              })}
+              <div ref={messagesEndRef} />
+            </div>
+
+            <div className="border-t border-[#dce3ec] bg-white px-3 py-3">
+              {emojiOpen ? (
+                <div className="mb-2 flex flex-wrap gap-1 rounded-2xl bg-[#f4f5f8] p-2">
+                  {EMOJIS.map((emoji) => (
+                    <button
+                      key={emoji}
+                      type="button"
+                      className="rounded-lg px-2 py-1 text-xl hover:bg-white"
+                      onClick={() => setDraft((current) => `${current}${emoji}`)}
+                    >
+                      {emoji}
+                    </button>
+                  ))}
+                </div>
+              ) : null}
+              <div className="flex items-end gap-2">
+                <Button size="sm" variant="ghost" className="h-10 w-10 rounded-xl p-0" onClick={() => fileInputRef.current?.click()}>
+                  <Paperclip className="h-4 w-4" />
+                </Button>
+                <Button size="sm" variant="ghost" className="h-10 w-10 rounded-xl p-0" onClick={() => setPollOpen(true)}>
+                  <BarChart3 className="h-4 w-4" />
+                </Button>
+                <Button size="sm" variant="ghost" className="h-10 w-10 rounded-xl p-0" onClick={() => setEmojiOpen((value) => !value)}>
+                  <Smile className="h-4 w-4" />
+                </Button>
+                <textarea
+                  value={draft}
+                  onChange={(event) => setDraft(event.target.value)}
+                  placeholder="Сообщение"
+                  rows={1}
+                  className="max-h-32 min-h-[44px] flex-1 resize-none rounded-[20px] border border-[#dce3ec] bg-[#f4f5f8] px-4 py-3 text-[15px] outline-none focus:border-[#3390ec]"
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter' && !event.shiftKey) {
+                      event.preventDefault();
+                      void sendText();
+                    }
+                  }}
+                />
+                {draft.trim() ? (
+                  <Button className="h-11 w-11 rounded-full p-0" disabled={sending} onClick={() => void sendText()}>
+                    {sending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
+                  </Button>
+                ) : (
+                  <Button
+                    className={cn('h-11 w-11 rounded-full p-0', recording && 'bg-red-500 hover:bg-red-600')}
+                    onMouseDown={() => void startVoiceRecording()}
+                    onMouseUp={stopVoiceRecording}
+                    onMouseLeave={stopVoiceRecording}
+                    onTouchStart={() => void startVoiceRecording()}
+                    onTouchEnd={stopVoiceRecording}
+                  >
+                    <Mic className="h-4 w-4" />
+                  </Button>
+                )}
+              </div>
+            </div>
+          </>
+        ) : (
+          <div className="flex flex-1 items-center justify-center text-[#667085]">Выберите чат</div>
+        )}
+      </section>
+
+      <input ref={avatarInputRef} type="file" accept="image/*" className="hidden" onChange={(event) => {
+        const file = event.target.files?.[0];
+        if (file) void uploadFamilyAvatar(file);
+        event.target.value = '';
+      }} />
+      <input ref={fileInputRef} type="file" className="hidden" onChange={(event) => {
+        const file = event.target.files?.[0];
+        if (file) void uploadChatFile(file);
+        event.target.value = '';
+      }} />
+
+      <Dialog open={inviteOpen} onOpenChange={setInviteOpen}>
+        <DialogContent className="rounded-[28px] sm:max-w-[420px]">
+          <DialogHeader><DialogTitle>Пригласить в семью</DialogTitle></DialogHeader>
+          <Input placeholder="Email, телефон или логин" value={inviteTarget} onChange={(event) => setInviteTarget(event.target.value)} />
+          <Button className="mt-4 w-full rounded-xl" onClick={() => void submitInvite()}>Отправить приглашение</Button>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={createRoomOpen} onOpenChange={setCreateRoomOpen}>
+        <DialogContent className="rounded-[28px] sm:max-w-[480px]">
+          <DialogHeader><DialogTitle>Новый групповой чат</DialogTitle></DialogHeader>
+          <Input placeholder="Название чата" value={newRoomName} onChange={(event) => setNewRoomName(event.target.value)} />
+          <div className="mt-3 space-y-2">
+            <p className="text-sm font-medium">Участники</p>
+            {(group?.members ?? []).filter((member) => member.userId !== user?.id).map((member) => (
+              <label key={member.id} className="flex items-center gap-2 rounded-xl bg-[#f4f5f8] px-3 py-2 text-sm">
+                <input
+                  type="checkbox"
+                  checked={selectedMembers.includes(member.userId)}
+                  onChange={(event) => {
+                    setSelectedMembers((current) =>
+                      event.target.checked ? [...current, member.userId] : current.filter((id) => id !== member.userId)
+                    );
+                  }}
+                />
+                {member.displayName}
+              </label>
+            ))}
+          </div>
+          <Button className="mt-4 w-full rounded-xl" onClick={() => void submitCreateRoom()}>Создать чат</Button>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={pollOpen} onOpenChange={setPollOpen}>
+        <DialogContent className="rounded-[28px] sm:max-w-[480px]">
+          <DialogHeader><DialogTitle>Создать опрос</DialogTitle></DialogHeader>
+          <Input placeholder="Вопрос" value={pollQuestion} onChange={(event) => setPollQuestion(event.target.value)} />
+          <div className="mt-3 space-y-2">
+            {pollOptions.map((option, index) => (
+              <Input
+                key={index}
+                placeholder={`Вариант ${index + 1}`}
+                value={option}
+                onChange={(event) => setPollOptions((current) => current.map((item, i) => (i === index ? event.target.value : item)))}
+              />
+            ))}
+          </div>
+          <Button variant="secondary" className="mt-2 rounded-xl" onClick={() => setPollOptions((current) => [...current, ''])}>
+            Добавить вариант
+          </Button>
+          <Button className="mt-4 w-full rounded-xl" onClick={() => void submitPoll()}>Отправить опрос</Button>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}