global update and global fix

apps/frontend/components/chat/bot-chat-message-context-menu.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { Copy } from 'lucide-react';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger
+} from '@/components/ui/context-menu';
+
+interface BotChatMessageContextMenuProps {
+  text?: string;
+  onCopy?: () => void;
+  children: React.ReactNode;
+}
+
+export function BotChatMessageContextMenu({ text, onCopy, children }: BotChatMessageContextMenuProps) {
+  const copyText = text?.trim();
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
+      <ContextMenuContent className="min-w-[200px]">
+        {copyText ? (
+          <ContextMenuItem
+            onClick={() => {
+              void navigator.clipboard.writeText(copyText);
+              onCopy?.();
+            }}
+          >
+            <Copy className="h-4 w-4" />
+            Копировать текст
+          </ContextMenuItem>
+        ) : null}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

apps/frontend/components/chat/bot-inline-keyboard.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { Loader2 } from 'lucide-react';
+import { InlineKeyboardButton, parseInlineKeyboardMarkup } from '@/lib/bot-reply-markup';
+import { cn } from '@/lib/utils';
+
+export function buildInlineButtonKey(messageId: number, rowIndex: number, buttonIndex: number) {
+  return `${messageId}:${rowIndex}:${buttonIndex}`;
+}
+
+interface BotInlineKeyboardProps {
+  markup: unknown;
+  messageId: number;
+  loadingButtonKey?: string | null;
+  disabled?: boolean;
+  onCallbackClick?: (callbackData: string, buttonKey: string) => void | Promise<void>;
+  onOpenMiniApp?: (url: string) => void;
+  onOpenUrl?: (url: string) => void;
+}
+
+export function BotInlineKeyboard({
+  markup,
+  messageId,
+  loadingButtonKey = null,
+  disabled = false,
+  onCallbackClick,
+  onOpenMiniApp,
+  onOpenUrl
+}: BotInlineKeyboardProps) {
+  const rows = parseInlineKeyboardMarkup(markup);
+  if (!rows.length) return null;
+
+  return (
+    <div className="mt-2 space-y-1.5">
+      {rows.map((row, rowIndex) => (
+        <div
+          key={`row-${rowIndex}`}
+          className={cn('flex gap-1.5', row.length === 1 ? 'flex-col' : 'flex-row flex-wrap')}
+        >
+          {row.map((button, buttonIndex) => (
+            <InlineKeyboardButtonView
+              key={`btn-${rowIndex}-${buttonIndex}`}
+              button={button}
+              buttonKey={buildInlineButtonKey(messageId, rowIndex, buttonIndex)}
+              fullWidth={row.length === 1}
+              loading={loadingButtonKey === buildInlineButtonKey(messageId, rowIndex, buttonIndex)}
+              disabled={disabled || (loadingButtonKey !== null && loadingButtonKey !== buildInlineButtonKey(messageId, rowIndex, buttonIndex))}
+              onCallbackClick={onCallbackClick}
+              onOpenMiniApp={onOpenMiniApp}
+              onOpenUrl={onOpenUrl}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function InlineKeyboardButtonView({
+  button,
+  buttonKey,
+  fullWidth,
+  loading,
+  disabled,
+  onCallbackClick,
+  onOpenMiniApp,
+  onOpenUrl
+}: {
+  button: InlineKeyboardButton;
+  buttonKey: string;
+  fullWidth: boolean;
+  loading: boolean;
+  disabled: boolean;
+  onCallbackClick?: (callbackData: string, buttonKey: string) => void | Promise<void>;
+  onOpenMiniApp?: (url: string) => void;
+  onOpenUrl?: (url: string) => void;
+}) {
+  const webAppUrl = button.web_app?.url;
+  const callbackData = button.callback_data ?? button.callbackData;
+
+  async function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
+    event.preventDefault();
+    if (disabled || loading) return;
+
+    if (webAppUrl) {
+      if (onOpenMiniApp) {
+        onOpenMiniApp(webAppUrl);
+      } else {
+        window.open(webAppUrl, '_blank', 'noopener,noreferrer');
+      }
+      return;
+    }
+
+    if (button.url) {
+      if (onOpenUrl) {
+        onOpenUrl(button.url);
+      } else {
+        window.open(button.url, '_blank', 'noopener,noreferrer');
+      }
+      return;
+    }
+
+    if (callbackData && onCallbackClick) {
+      await onCallbackClick(callbackData, buttonKey);
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      disabled={disabled || loading}
+      className={cn(
+        'inline-flex min-h-9 items-center justify-center rounded-xl border border-[#dce3ec] bg-[#f4f7fb] px-3 py-2 text-xs font-medium text-[#1f2430] transition',
+        'hover:bg-[#e8eef6] disabled:cursor-not-allowed disabled:opacity-60',
+        fullWidth ? 'w-full' : 'min-w-0 flex-1'
+      )}
+      onClick={(event) => void handleClick(event)}
+    >
+      {loading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : button.text}
+    </button>
+  );
+}

apps/frontend/components/chat/bot-message-keyboard.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { BotInlineKeyboard } from '@/components/chat/bot-inline-keyboard';
+import { useToast } from '@/components/id/toast-provider';
+import { useRealtime } from '@/components/notifications/realtime-provider';
+import { submitBotCallback } from '@/lib/api';
+
+const CALLBACK_ANSWER_TIMEOUT_MS = 30_000;
+
+interface BotMessageKeyboardProps {
+  botRef: string;
+  messageId: number;
+  markup: unknown;
+  token: string | null;
+  botId?: string;
+  onOpenMiniApp?: (url: string) => void;
+}
+
+export function BotMessageKeyboard({
+  botRef,
+  messageId,
+  markup,
+  token,
+  botId,
+  onOpenMiniApp
+}: BotMessageKeyboardProps) {
+  const { showToast } = useToast();
+  const { subscribe } = useRealtime();
+  const [loadingButtonKey, setLoadingButtonKey] = useState<string | null>(null);
+  const pendingQueriesRef = useRef(new Map<string, ReturnType<typeof setTimeout>>());
+
+  const clearPendingQuery = useCallback((callbackQueryId: string) => {
+    const timer = pendingQueriesRef.current.get(callbackQueryId);
+    if (timer) {
+      clearTimeout(timer);
+      pendingQueriesRef.current.delete(callbackQueryId);
+    }
+    setLoadingButtonKey(null);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      pendingQueriesRef.current.forEach((timer) => clearTimeout(timer));
+      pendingQueriesRef.current.clear();
+    };
+  }, []);
+
+  useEffect(() => {
+    return subscribe((event) => {
+      if (event.type !== 'bot_callback_answer') return;
+
+      const payload = event.payload ?? {};
+      const callbackQueryId = typeof payload.callbackQueryId === 'string' ? payload.callbackQueryId : null;
+      if (!callbackQueryId || !pendingQueriesRef.current.has(callbackQueryId)) return;
+
+      const eventBotId = typeof payload.botId === 'string' ? payload.botId : null;
+      if (botId && eventBotId && eventBotId !== botId) return;
+
+      clearPendingQuery(callbackQueryId);
+
+      const text = typeof payload.text === 'string' ? payload.text.trim() : '';
+      const showAlert = Boolean(payload.showAlert);
+      const url = typeof payload.url === 'string' ? payload.url.trim() : '';
+
+      if (url && onOpenMiniApp) {
+        onOpenMiniApp(url);
+      }
+
+      if (text) {
+        if (showAlert) {
+          window.alert(text);
+        } else {
+          showToast(text);
+        }
+      }
+    });
+  }, [botId, clearPendingQuery, onOpenMiniApp, showToast, subscribe]);
+
+  async function handleCallbackClick(callbackData: string, buttonKey: string) {
+    if (!token) return;
+
+    setLoadingButtonKey(buttonKey);
+    try {
+      const response = await submitBotCallback(botRef, messageId, callbackData, token);
+      const callbackQueryId = response.callbackQueryId;
+      if (!callbackQueryId) {
+        setLoadingButtonKey(null);
+        return;
+      }
+
+      const timer = setTimeout(() => clearPendingQuery(callbackQueryId), CALLBACK_ANSWER_TIMEOUT_MS);
+      pendingQueriesRef.current.set(callbackQueryId, timer);
+    } catch (error) {
+      setLoadingButtonKey(null);
+      showToast(error instanceof Error ? error.message : 'Не удалось отправить действие');
+    }
+  }
+
+  return (
+    <BotInlineKeyboard
+      markup={markup}
+      messageId={messageId}
+      loadingButtonKey={loadingButtonKey}
+      onCallbackClick={handleCallbackClick}
+      onOpenMiniApp={onOpenMiniApp}
+    />
+  );
+}

apps/frontend/components/chat/chat-delete-message-dialog.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+
+interface ChatDeleteMessageDialogProps {
+  open: boolean;
+  count: number;
+  loading?: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void | Promise<void>;
+}
+
+export function ChatDeleteMessageDialog({ open, count, loading, onOpenChange, onConfirm }: ChatDeleteMessageDialogProps) {
+  const plural =
+    count === 1 ? 'это сообщение' : count < 5 ? `${count} сообщения` : `${count} сообщений`;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="rounded-[24px] sm:max-w-[420px]">
+        <DialogHeader>
+          <DialogTitle>Удалить сообщение?</DialogTitle>
+        </DialogHeader>
+        <p className="text-sm text-[#667085]">
+          {count === 1
+            ? 'Сообщение будет удалено для всех участников чата. Это действие нельзя отменить.'
+            : `Будут удалены ${plural}. Это действие нельзя отменить.`}
+        </p>
+        <div className="mt-6 flex justify-end gap-2">
+          <Button type="button" variant="secondary" className="rounded-xl" disabled={loading} onClick={() => onOpenChange(false)}>
+            Отмена
+          </Button>
+          <Button
+            type="button"
+            className="rounded-xl bg-red-600 text-white hover:bg-red-700"
+            disabled={loading}
+            onClick={() => void onConfirm()}
+          >
+            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Удалить'}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/frontend/components/chat/chat-emoji-content.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { isEmojiId } from '@/lib/emoji-catalog';
+import { emojiIdToNative, resolveNativeEmojiContent } from '@/lib/emoji-native-map';
+
+export function ChatEmojiContent({ content, size = 22 }: { content?: string | null; size?: number }) {
+  if (!content) return null;
+
+  if (isEmojiId(content)) {
+    const native = emojiIdToNative(content);
+    if (native) {
+      return (
+        <span
+          className="text-[length:var(--emoji-size)] leading-none"
+          style={{ ['--emoji-size' as string]: `${size + 8}px` }}
+        >
+          {native}
+        </span>
+      );
+    }
+  }
+
+  if (/:([a-z0-9-]+):/.test(content)) {
+    return <span className="whitespace-pre-wrap break-words">{resolveNativeEmojiContent(content)}</span>;
+  }
+
+  return <span className="whitespace-pre-wrap break-words">{content}</span>;
+}

apps/frontend/components/chat/chat-forward-dialog.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { ChatRoomAvatarDisplay } from '@/components/family/chat-room-avatar-display';
+import type { ChatRoom } from '@/lib/api';
+import { roomDisplayLabel } from '@/lib/family-chat';
+
+interface ChatForwardDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  rooms: ChatRoom[];
+  viewerUserId: string;
+  token: string | null;
+  currentRoomId?: string;
+  forwarding?: boolean;
+  onSelectRoom: (roomId: string) => void;
+}
+
+export function ChatForwardDialog({
+  open,
+  onOpenChange,
+  rooms,
+  viewerUserId,
+  token,
+  currentRoomId,
+  forwarding,
+  onSelectRoom
+}: ChatForwardDialogProps) {
+  const targets = rooms.filter((room) => room.id !== currentRoomId && room.type !== 'BOT');
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md rounded-[24px]">
+        <DialogHeader>
+          <DialogTitle>Переслать в чат</DialogTitle>
+        </DialogHeader>
+        {forwarding ? (
+          <div className="flex items-center justify-center gap-2 py-8 text-sm text-[#667085]">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            Пересылка...
+          </div>
+        ) : (
+          <div className="max-h-[360px] space-y-1 overflow-y-auto">
+            {targets.length ? (
+              targets.map((room) => (
+                <button
+                  key={room.id}
+                  type="button"
+                  className="flex w-full items-center gap-3 rounded-xl px-2 py-2 text-left transition hover:bg-[#f4f5f8]"
+                  onClick={() => onSelectRoom(room.id)}
+                >
+                  <ChatRoomAvatarDisplay room={room} viewerUserId={viewerUserId} token={token} size="sm" />
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium">{roomDisplayLabel(room, viewerUserId)}</p>
+                    <p className="text-xs text-[#667085]">{room.members.length} участников</p>
+                  </div>
+                </button>
+              ))
+            ) : (
+              <p className="py-6 text-center text-sm text-[#667085]">Нет доступных чатов для пересылки</p>
+            )}
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/frontend/components/chat/chat-message-context-menu.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import { CheckCircle2, Copy, Forward, Pencil, Reply, Trash2 } from 'lucide-react';
+import { ChatMessageReactions } from '@/components/chat/chat-message-reactions';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger
+} from '@/components/ui/context-menu';
+import type { ChatMessage } from '@/lib/api';
+import { QUICK_REACTIONS, canDeleteMessage, canEditMessage, getMessageCopyText } from '@/lib/chat-message-utils';
+import { cn } from '@/lib/utils';
+
+interface ChatMessageContextMenuProps {
+  message: ChatMessage;
+  userId?: string;
+  isE2E?: boolean;
+  visibleText?: string;
+  children: React.ReactNode;
+  onEdit?: () => void;
+  onDelete?: () => void;
+  onReply?: () => void;
+  onForward?: () => void;
+  onSelect?: () => void;
+  onToggleReaction?: (emoji: string) => void;
+  onCopy?: () => void;
+}
+
+export function ChatMessageContextMenu({
+  message,
+  userId,
+  isE2E,
+  visibleText,
+  children,
+  onEdit,
+  onDelete,
+  onReply,
+  onForward,
+  onSelect,
+  onToggleReaction,
+  onCopy
+}: ChatMessageContextMenuProps) {
+  const editable = canEditMessage(message, userId, isE2E);
+  const deletable = canDeleteMessage(message, userId);
+  const copyText = getMessageCopyText(message, visibleText);
+  const disabled = message.isDeleted;
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
+      <ContextMenuContent className="min-w-[240px]">
+        {!disabled ? (
+          <>
+            <div className="mb-1 flex items-center gap-1 overflow-x-auto px-1 py-1">
+              {QUICK_REACTIONS.map((emoji) => (
+                <button
+                  key={emoji}
+                  type="button"
+                  className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-lg transition hover:bg-[#eef1f6]"
+                  onClick={() => onToggleReaction?.(emoji)}
+                >
+                  {emoji}
+                </button>
+              ))}
+            </div>
+            <ContextMenuSeparator />
+          </>
+        ) : null}
+        {onReply && !disabled ? (
+          <ContextMenuItem onClick={onReply}>
+            <Reply className="h-4 w-4" />
+            Ответить
+          </ContextMenuItem>
+        ) : null}
+        {editable ? (
+          <ContextMenuItem onClick={onEdit}>
+            <Pencil className="h-4 w-4" />
+            Изменить
+          </ContextMenuItem>
+        ) : null}
+        {copyText ? (
+          <ContextMenuItem
+            onClick={() => {
+              void navigator.clipboard.writeText(copyText);
+              onCopy?.();
+            }}
+          >
+            <Copy className="h-4 w-4" />
+            Копировать текст
+          </ContextMenuItem>
+        ) : null}
+        {onForward && !disabled && !message.isEncrypted ? (
+          <ContextMenuItem onClick={onForward}>
+            <Forward className="h-4 w-4" />
+            Переслать
+          </ContextMenuItem>
+        ) : null}
+        {deletable ? (
+          <ContextMenuItem className="text-red-600 data-[highlighted]:bg-red-50 data-[highlighted]:text-red-700" onClick={onDelete}>
+            <Trash2 className="h-4 w-4" />
+            Удалить
+          </ContextMenuItem>
+        ) : null}
+        {onSelect && !disabled ? (
+          <>
+            <ContextMenuSeparator />
+            <ContextMenuItem onClick={onSelect}>
+              <CheckCircle2 className="h-4 w-4" />
+              Выделить
+            </ContextMenuItem>
+          </>
+        ) : null}
+        {!disabled && message.reactions?.length ? (
+          <div className="px-2 pb-1 pt-2">
+            <ChatMessageReactions reactions={message.reactions} onToggle={onToggleReaction} compact />
+          </div>
+        ) : null}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
+
+interface SelectableMessageWrapperProps {
+  selected?: boolean;
+  selectionMode?: boolean;
+  align?: 'left' | 'right';
+  onClick?: () => void;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export function SelectableMessageWrapper({
+  selected,
+  selectionMode,
+  align = 'left',
+  onClick,
+  className,
+  children
+}: SelectableMessageWrapperProps) {
+  return (
+    <div
+      className={cn(
+        'relative w-fit max-w-[78%] shrink-0',
+        selectionMode && 'cursor-pointer',
+        selectionMode && (align === 'right' ? 'mr-7' : 'ml-7'),
+        className
+      )}
+      onClick={selectionMode ? onClick : undefined}
+    >
+      {selectionMode ? (
+        <span
+          className={cn(
+            'absolute top-1/2 z-10 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-full border text-[10px] shadow-sm transition',
+            align === 'right' ? 'right-0 translate-x-[calc(100%+8px)]' : 'left-0 -translate-x-[calc(100%+8px)]',
+            selected ? 'border-[#3390ec] bg-[#3390ec] text-white' : 'border-[#dce3ec] bg-white text-transparent'
+          )}
+        >
+          ✓
+        </span>
+      ) : null}
+      <div
+        className={cn(
+          'rounded-[18px] transition',
+          selected && 'ring-2 ring-[#3390ec] ring-offset-2 ring-offset-[#eef1f6]'
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

apps/frontend/components/chat/chat-message-edit-banner.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { Pencil, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface ChatMessageEditBannerProps {
+  preview?: string;
+  onCancel: () => void;
+}
+
+export function ChatMessageEditBanner({ preview, onCancel }: ChatMessageEditBannerProps) {
+  return (
+    <div className="mb-2 flex items-center gap-3 rounded-xl border border-[#3390ec]/20 bg-[#eef4ff] px-3 py-2 animate-in fade-in slide-in-from-bottom-1 duration-200">
+      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#3390ec]/15 text-[#3390ec]">
+        <Pencil className="h-4 w-4" />
+      </div>
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-medium text-[#3390ec]">Редактирование сообщения</p>
+        {preview ? <p className="truncate text-xs text-[#667085]">{preview}</p> : null}
+      </div>
+      <Button type="button" variant="ghost" size="icon" className="h-8 w-8 shrink-0 rounded-lg" aria-label="Отменить редактирование" onClick={onCancel}>
+        <X className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}

apps/frontend/components/chat/chat-message-reactions.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import type { ChatMessageReaction } from '@/lib/api';
+import { cn } from '@/lib/utils';
+
+interface ChatMessageReactionsProps {
+  reactions?: ChatMessageReaction[];
+  onToggle?: (emoji: string) => void;
+  compact?: boolean;
+}
+
+export function ChatMessageReactions({ reactions, onToggle, compact }: ChatMessageReactionsProps) {
+  if (!reactions?.length) return null;
+
+  return (
+    <div className={cn('flex flex-wrap gap-1', compact ? 'mt-1' : 'mt-1.5')}>
+      {reactions.map((reaction) => (
+        <button
+          key={reaction.emoji}
+          type="button"
+          onClick={() => onToggle?.(reaction.emoji)}
+          className={cn(
+            'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs transition',
+            reaction.reactedByMe
+              ? 'border-[#3390ec]/40 bg-[#3390ec]/15 text-[#1f2430]'
+              : 'border-[#dce3ec] bg-white/80 text-[#667085] hover:bg-white'
+          )}
+        >
+          <span>{reaction.emoji}</span>
+          <span>{reaction.count}</span>
+        </button>
+      ))}
+    </div>
+  );
+}

apps/frontend/components/chat/chat-selection-toolbar.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { Copy, Forward, Loader2, Trash2, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface ChatSelectionToolbarProps {
+  count: number;
+  deleting?: boolean;
+  onCancel: () => void;
+  onCopy: () => void;
+  onForward: () => void;
+  onDelete: () => void;
+}
+
+export function ChatSelectionToolbar({ count, deleting, onCancel, onCopy, onForward, onDelete }: ChatSelectionToolbarProps) {
+  return (
+    <div className="flex items-center gap-2 border-t border-[#dce3ec] bg-white px-4 py-3 shadow-[0_-8px_24px_rgba(31,36,48,0.08)] animate-in fade-in slide-in-from-bottom-2 duration-200">
+      <Button type="button" variant="ghost" size="icon" className="h-9 w-9 shrink-0 rounded-xl" onClick={onCancel}>
+        <X className="h-4 w-4" />
+      </Button>
+      <p className="min-w-0 flex-1 text-sm font-medium">{count} выбрано</p>
+      <Button type="button" variant="secondary" size="sm" className="rounded-xl" onClick={onCopy}>
+        <Copy className="mr-1 h-4 w-4" />
+        Копировать
+      </Button>
+      <Button type="button" variant="secondary" size="sm" className="rounded-xl" onClick={onForward}>
+        <Forward className="mr-1 h-4 w-4" />
+        Переслать
+      </Button>
+      <Button
+        type="button"
+        variant="secondary"
+        size="sm"
+        className="rounded-xl text-red-600 hover:text-red-700"
+        disabled={deleting}
+        onClick={onDelete}
+      >
+        {deleting ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Trash2 className="mr-1 h-4 w-4" />}
+        Удалить
+      </Button>
+    </div>
+  );
+}

apps/frontend/components/chat/emoji-picker.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+
+
+import { useMemo, useState } from 'react';
+
+import { Search } from 'lucide-react';
+
+import { Input } from '@/components/ui/input';
+
+import { EMOJI_CATEGORIES, EMOJI_DEFINITIONS, searchEmojis, type EmojiCategoryId } from '@/lib/emoji-catalog';
+
+import { emojiIdToNative } from '@/lib/emoji-native-map';
+
+import { cn } from '@/lib/utils';
+
+
+
+interface EmojiPickerProps {
+
+  onSelect: (nativeEmoji: string) => void;
+
+  className?: string;
+
+}
+
+
+
+export function EmojiPicker({ onSelect, className }: EmojiPickerProps) {
+
+  const [category, setCategory] = useState<EmojiCategoryId>('smileys');
+
+  const [query, setQuery] = useState('');
+
+
+
+  const items = useMemo(() => {
+
+    const filtered = searchEmojis(query);
+
+    if (query.trim()) return filtered;
+
+    return filtered.filter((item) => item.category === category);
+
+  }, [category, query]);
+
+
+
+  return (
+
+    <div className={cn('rounded-2xl border border-[#dce3ec] bg-white shadow-lg', className)}>
+
+      <div className="border-b border-[#eceef4] p-2">
+
+        <div className="relative">
+
+          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#a8adbc]" />
+
+          <Input
+
+            value={query}
+
+            onChange={(event) => setQuery(event.target.value)}
+
+            placeholder="Поиск смайликов"
+
+            className="rounded-xl pl-9"
+
+          />
+
+        </div>
+
+      </div>
+
+      {!query.trim() ? (
+
+        <div className="flex gap-1 overflow-x-auto border-b border-[#eceef4] px-2 py-2">
+
+          {EMOJI_CATEGORIES.map((item) => {
+
+            const native = emojiIdToNative(item.icon) ?? '✨';
+
+            return (
+

apps/frontend/components/chat/emoji-sprite-provider.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { useEffect } from 'react';
+
+let spriteInjected = false;
+
+export function EmojiSpriteProvider() {
+  useEffect(() => {
+    if (spriteInjected || typeof document === 'undefined') return;
+    fetch('/emojis/lendry-emojis.svg')
+      .then((response) => response.text())
+      .then((markup) => {
+        if (spriteInjected) return;
+        const container = document.createElement('div');
+        container.innerHTML = markup;
+        container.style.display = 'none';
+        container.setAttribute('aria-hidden', 'true');
+        document.body.appendChild(container);
+        spriteInjected = true;
+      })
+      .catch(() => {});
+  }, []);
+
+  return null;
+}

apps/frontend/components/chat/emoji-sprite.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+export const EMOJI_SPRITE_PATH = '/emojis/lendry-emojis.svg';
+
+interface EmojiSpriteProps {
+  id: string;
+  size?: number;
+  className?: string;
+  title?: string;
+}
+
+export function EmojiSprite({ id, size = 24, className, title }: EmojiSpriteProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 36 36"
+      className={cn('inline-block shrink-0 align-middle', className)}
+      role="img"
+      aria-label={title}
+    >
+      <use href={`${EMOJI_SPRITE_PATH}#${id}`} xlinkHref={`${EMOJI_SPRITE_PATH}#${id}`} />
+    </svg>
+  );
+}

apps/frontend/components/chat/inline-editable-title.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { Loader2, Pencil } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface InlineEditableTitleProps {
+  value: string;
+  onSave: (nextValue: string) => Promise<void> | void;
+  className?: string;
+  inputClassName?: string;
+  disabled?: boolean;
+}
+
+export function InlineEditableTitle({
+  value,
+  onSave,
+  className,
+  inputClassName,
+  disabled = false
+}: InlineEditableTitleProps) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const [saving, setSaving] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!editing) setDraft(value);
+  }, [editing, value]);
+
+  useEffect(() => {
+    if (editing) {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }
+  }, [editing]);
+
+  async function commit() {
+    const trimmed = draft.trim();
+    if (!trimmed || trimmed === value) {
+      setDraft(value);
+      setEditing(false);
+      return;
+    }
+    setSaving(true);
+    try {
+      await onSave(trimmed);
+      setEditing(false);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (editing) {
+    return (
+      <div className={cn('relative min-w-0', className)}>
+        <input
+          ref={inputRef}
+          value={draft}
+          disabled={saving}
+          onChange={(event) => setDraft(event.target.value)}
+          onBlur={() => void commit()}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              void commit();
+            }
+            if (event.key === 'Escape') {
+              setDraft(value);
+              setEditing(false);
+            }
+          }}
+          className={cn(
+            'w-full border-0 bg-transparent p-0 text-base font-semibold leading-tight text-[#1f2430] outline-none ring-0',
+            inputClassName
+          )}
+        />
+        {saving ? <Loader2 className="absolute -right-5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 animate-spin text-[#667085]" /> : null}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('group/title flex min-w-0 items-center gap-1.5', className)}>
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => !disabled && setEditing(true)}
+        className="min-w-0 truncate text-left text-base font-semibold leading-tight text-[#1f2430] transition hover:text-[#3390ec] disabled:cursor-default disabled:hover:text-[#1f2430]"
+      >
+        {value}
+      </button>
+      {!disabled ? (
+        <button
+          type="button"
+          aria-label="Изменить название"
+          onClick={() => setEditing(true)}
+          className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-[#667085] opacity-0 transition hover:bg-[#f4f5f8] hover:text-[#3390ec] group-hover/title:opacity-100"
+        >
+          <Pencil className="h-3.5 w-3.5" />
+        </button>
+      ) : null}
+    </div>
+  );
+}

apps/frontend/components/chat/replied-message-preview.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+interface RepliedMessagePreviewProps {
+  senderName: string;
+  preview: string;
+  accentClassName?: string;
+  onClick?: () => void;
+  className?: string;
+}
+
+export function RepliedMessagePreview({
+  senderName,
+  preview,
+  accentClassName = 'bg-[#3390ec]',
+  onClick,
+  className
+}: RepliedMessagePreviewProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'mb-2 flex w-full items-stretch gap-2 rounded-xl bg-black/[0.04] px-2 py-1.5 text-left transition hover:bg-black/[0.07]',
+        className
+      )}
+    >
+      <span className={cn('w-0.5 shrink-0 rounded-full', accentClassName)} aria-hidden />
+      <span className="min-w-0">
+        <span className="block truncate text-xs font-semibold text-[#3390ec]">{senderName}</span>
+        <span className="block truncate text-xs text-[#667085]">{preview || 'Сообщение'}</span>
+      </span>
+    </button>
+  );
+}
+
+export function scrollToChatMessage(messageId: string) {
+  const element = document.getElementById(`msg-${messageId}`);
+  if (!element) return false;
+  element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  element.classList.add('blink-highlight');
+  window.setTimeout(() => element.classList.remove('blink-highlight'), 2000);
+  return true;
+}

apps/frontend/components/chat/typing-indicator.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+interface TypingIndicatorProps {
+  roomType?: string;
+  typers: Array<{ userId: string; userName: string }>;
+  className?: string;
+}
+
+function isGroupRoomType(type?: string) {
+  return type === 'GROUP' || type === 'GENERAL';
+}
+
+export function TypingIndicator({ roomType, typers, className }: TypingIndicatorProps) {
+  if (!typers.length) return null;
+
+  const group = isGroupRoomType(roomType);
+  let label = 'печатает';
+
+  if (group) {
+    if (typers.length === 1) {
+      label = `${typers[0]!.userName} печатает`;
+    } else if (typers.length === 2) {
+      label = `${typers[0]!.userName} и ${typers[1]!.userName} печатают`;
+    } else {
+      label = `${typers.length} участника печатают`;
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-2 px-4 py-1 text-xs text-[#667085] transition-all duration-300 animate-in fade-in slide-in-from-bottom-1',
+        className
+      )}
+    >
+      <span className="inline-flex items-center gap-1">
+        <span className="inline-flex gap-0.5">
+          <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-[#3390ec]/70 [animation-delay:0ms]" />
+          <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-[#3390ec]/70 [animation-delay:120ms]" />
+          <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-[#3390ec]/70 [animation-delay:240ms]" />
+        </span>
+      </span>
+      <span>{group ? label : 'печатает…'}</span>
+    </div>
+  );
+}