Обновлен компонент MessengerAttachments: добавлена поддержка голосовых сообщений с использованием VoicePlayer, улучшена логика фильтрации вложений, добавлены функции обновления данных при открытии вкладки вложений. Удален устаревший компонент MessengerChatWithAttachments и обновлен интерфейс для улучшения взаимодействия с пользователем.

2025-07-21 15:11:52 +03:00
parent b935807cc2
commit 8063ca64b8
4 changed files with 393 additions and 893 deletions
--- a/src/components/messenger/messenger-attachments.tsx
+++ b/src/components/messenger/messenger-attachments.tsx
@ -1,6 +1,6 @@
 "use client"

-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { useQuery } from '@apollo/client'
 import { GET_MESSAGES } from '@/graphql/queries'
 import { useAuth } from '@/hooks/useAuth'
@ -9,6 +9,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Badge } from '@/components/ui/badge'
 import { ImageLightbox } from '@/components/ui/image-lightbox'
+import { VoicePlayer } from '@/components/ui/voice-player'
 import { 
  FileText, 
  Image, 
@ -16,7 +17,8 @@ import {
  Video, 
  Download,
  Calendar,
-  User
+  User,
+  RefreshCw
 } from 'lucide-react'

 interface Organization {
@ -47,24 +49,33 @@ interface Message {

 interface MessengerAttachmentsProps {
  counterparty: Organization
+  onViewChange?: () => void
 }

-export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps) {
+export function MessengerAttachments({ counterparty, onViewChange }: MessengerAttachmentsProps) {
  const { user } = useAuth()
  const [activeTab, setActiveTab] = useState('all')
  const [lightboxImage, setLightboxImage] = useState<{ url: string; fileName: string; fileSize?: number } | null>(null)

  // Загружаем все сообщения для получения вложений
-  const { data: messagesData, loading } = useQuery(GET_MESSAGES, {
-    variables: { counterpartyId: counterparty.id, limit: 1000 }, // Увеличиваем лимит для получения всех файлов
-    fetchPolicy: 'cache-first',
+  const { data: messagesData, loading, refetch } = useQuery(GET_MESSAGES, {
+    variables: { counterpartyId: counterparty.id, limit: 1000 },
+    fetchPolicy: 'cache-and-network',
+    pollInterval: 5000, // Обновляем каждые 5 секунд
+    notifyOnNetworkStatusChange: false, // Не показываем loading при обновлениях
  })

+  // Обновляем данные при открытии вкладки вложений
+  useEffect(() => {
+    onViewChange?.()
+  }, [onViewChange])
+
  const messages: Message[] = messagesData?.messages || []

  // Фильтруем только сообщения с вложениями
  const attachmentMessages = messages.filter(msg => 
-    msg.type && ['VOICE', 'IMAGE', 'FILE'].includes(msg.type) && msg.fileUrl
+    msg.type && ['VOICE', 'IMAGE', 'FILE'].includes(msg.type) && 
+    (msg.fileUrl || (msg.type === 'VOICE' && msg.voiceUrl))
  )

  // Группируем по типам
@ -76,10 +87,6 @@ export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps
    return org.name || org.fullName || 'Организация'
  }

-  const getManagerName = (org: Organization) => {
-    return org.users?.[0]?.managerName || 'Управляющий'
-  }
-
  const getInitials = (org: Organization) => {
    const name = getOrganizationName(org)
    return name.charAt(0).toUpperCase()
@ -128,12 +135,12 @@ export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps
  }

  const renderFileIcon = (fileType?: string) => {
-    if (!fileType) return <FileText className="h-4 w-4" />
+    if (!fileType) return <FileText className="h-4 w-4 text-gray-400" />
    
-    if (fileType.startsWith('image/')) return <Image className="h-4 w-4" />
-    if (fileType.startsWith('audio/')) return <Music className="h-4 w-4" />
-    if (fileType.startsWith('video/')) return <Video className="h-4 w-4" />
-    return <FileText className="h-4 w-4" />
+    if (fileType.startsWith('image/')) return <Image className="h-4 w-4 text-blue-400" />
+    if (fileType.startsWith('audio/')) return <Music className="h-4 w-4 text-green-400" />
+    if (fileType.startsWith('video/')) return <Video className="h-4 w-4 text-purple-400" />
+    return <FileText className="h-4 w-4 text-gray-400" />
  }

  const renderAttachmentCard = (message: Message) => {
@ -175,6 +182,17 @@ export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps
            </div>

            {/* Содержимое вложения */}
+            {message.type === 'VOICE' && message.voiceUrl ? (
+              /* Голосовой плеер */
+              <div className="w-full">
+                <VoicePlayer 
+                  audioUrl={message.voiceUrl} 
+                  duration={message.voiceDuration || 0}
+                  isCurrentUser={isCurrentUser}
+                />
+              </div>
+            ) : (
+              /* Обычные файлы и изображения */
              <div className="flex items-center justify-between bg-white/5 rounded-lg p-3">
                <div className="flex items-center space-x-3 flex-1 min-w-0">
                  {/* Превью изображения или иконка */}
@ -194,27 +212,19 @@ export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps
                    </div>
                  ) : (
                    <div className="flex items-center justify-center w-10 h-10 bg-white/10 rounded-lg flex-shrink-0">
-                    {message.type === 'VOICE' ? (
-                      <Music className="h-5 w-5 text-green-400" />
-                    ) : (
-                      renderFileIcon(message.fileType)
-                    )}
+                      {renderFileIcon(message.fileType)}
                    </div>
                  )}
                  
                  <div className="flex-1 min-w-0">
                    <p className="text-white text-sm font-medium truncate">
                      {message.fileName || 
-                     (message.type === 'VOICE' ? 'Голосовое сообщение' : 
-                      message.type === 'IMAGE' ? 'Изображение' : 'Файл')}
+                       (message.type === 'IMAGE' ? 'Изображение' : 'Файл')}
                    </p>
                    <div className="flex items-center space-x-2 text-xs text-white/60">
                      {message.fileSize && (
                        <span>{formatFileSize(message.fileSize)}</span>
                      )}
-                    {message.voiceDuration && (
-                      <span>{Math.floor(message.voiceDuration / 60)}:{(message.voiceDuration % 60).toString().padStart(2, '0')}</span>
-                    )}
                      {message.type === 'IMAGE' && (
                        <span className="text-blue-300">• Нажмите для просмотра</span>
                      )}
@ -230,6 +240,7 @@ export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps
                  <Download className="h-4 w-4 text-white/70" />
                </button>
              </div>
+            )}
          </div>
        </div>
      </Card>
@ -244,40 +255,51 @@ export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps
    )
  }

+  if (attachmentMessages.length === 0) {
    return (
-    <div className="h-full flex flex-col">
-      <div className="flex items-center space-x-3 mb-4 px-4 pt-4">
-        <FileText className="h-5 w-5 text-blue-400" />
-        <div>
-          <h3 className="text-lg font-semibold text-white">Вложения</h3>
-          <p className="text-white/60 text-sm">
-            {attachmentMessages.length} файлов от {getOrganizationName(counterparty)}
+      <div className="flex items-center justify-center h-64">
+        <div className="text-center">
+          <FileText className="h-12 w-12 text-white/20 mx-auto mb-4" />
+          <p className="text-white/60 text-lg mb-2">Нет вложений</p>
+          <p className="text-white/40 text-sm">
+            Файлы, изображения и голосовые сообщения будут отображаться здесь
          </p>
        </div>
      </div>
+    )
+  }

-      <div className="flex-1 px-4 pb-4">
-        <Tabs value={activeTab} onValueChange={setActiveTab} className="h-full">
-          <TabsList className="grid w-full grid-cols-4 mb-4">
-            <TabsTrigger value="all" className="flex items-center space-x-2">
-              <FileText className="h-4 w-4" />
-              <span>Все ({attachmentMessages.length})</span>
+      return (
+      <div className="h-full flex flex-col">
+        <div className="flex-1 overflow-auto p-4">
+          {/* Кнопка обновления */}
+          <div className="flex justify-between items-center mb-4">
+            <h2 className="text-white/80 text-lg font-medium">Вложения</h2>
+            <button
+              onClick={() => refetch()}
+              className="flex items-center space-x-2 px-3 py-1 bg-white/10 hover:bg-white/20 rounded-lg transition-colors"
+              title="Обновить вложения"
+            >
+              <RefreshCw className="h-4 w-4 text-white/70" />
+              <span className="text-white/70 text-sm">Обновить</span>
+            </button>
+          </div>
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+          <TabsList className="grid w-full grid-cols-4 mb-6">
+            <TabsTrigger value="all" className="text-xs">
+              Все ({attachmentMessages.length})
            </TabsTrigger>
-            <TabsTrigger value="images" className="flex items-center space-x-2">
-              <Image className="h-4 w-4" />
-              <span>Фото ({imageMessages.length})</span>
+            <TabsTrigger value="images" className="text-xs">
+              Фото ({imageMessages.length})
            </TabsTrigger>
-            <TabsTrigger value="voice" className="flex items-center space-x-2">
-              <Music className="h-4 w-4" />
-              <span>Аудио ({voiceMessages.length})</span>
+            <TabsTrigger value="audio" className="text-xs">
+              Аудио ({voiceMessages.length})
            </TabsTrigger>
-            <TabsTrigger value="files" className="flex items-center space-x-2">
-              <FileText className="h-4 w-4" />
-              <span>Файлы ({fileMessages.length})</span>
+            <TabsTrigger value="files" className="text-xs">
+              Файлы ({fileMessages.length})
            </TabsTrigger>
          </TabsList>

-          <div className="h-full overflow-auto">
          <TabsContent value="all" className="mt-0">
            {attachmentMessages.length === 0 ? (
              <div className="flex items-center justify-center h-64">
@ -337,7 +359,7 @@ export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps
            )}
          </TabsContent>

-            <TabsContent value="voice" className="mt-0">
+          <TabsContent value="audio" className="mt-0">
            {voiceMessages.length === 0 ? (
              <div className="flex items-center justify-center h-64">
                <div className="text-center">
@ -366,7 +388,6 @@ export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps
              </div>
            )}
          </TabsContent>
-          </div>
        </Tabs>
        </div>

--- a/src/components/messenger/messenger-chat-with-attachments.tsx
+++ b/src/components/messenger/messenger-chat-with-attachments.tsx
@ -1,518 +0,0 @@
-"use client"
-
-import { useState, useRef, useEffect, useMemo } from 'react'
-import { useMutation, useQuery } from '@apollo/client'
-import { GET_MESSAGES, GET_CONVERSATIONS } from '@/graphql/queries'
-import { SEND_MESSAGE, SEND_VOICE_MESSAGE, SEND_IMAGE_MESSAGE, SEND_FILE_MESSAGE, MARK_MESSAGES_AS_READ } from '@/graphql/mutations'
-import { Button } from '@/components/ui/button'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import { Badge } from '@/components/ui/badge'
-import { EmojiPickerComponent } from '@/components/ui/emoji-picker'
-import { VoiceRecorder } from '@/components/ui/voice-recorder'
-import { VoicePlayer } from '@/components/ui/voice-player'
-import { FileUploader } from '@/components/ui/file-uploader'
-import { ImageMessage } from '@/components/ui/image-message'
-import { FileMessage } from '@/components/ui/file-message'
-import { MessengerAttachments } from './messenger-attachments'
-import { Send, FileText, MessageCircle } from 'lucide-react'
-import { useAuth } from '@/hooks/useAuth'
-
-interface Organization {
-  id: string
-  inn: string
-  name?: string
-  fullName?: string
-  type: 'FULFILLMENT' | 'SELLER' | 'LOGIST' | 'WHOLESALE'
-  address?: string
-  phones?: Array<{ value: string }>
-  emails?: Array<{ value: string }>
-  users?: Array<{ id: string, avatar?: string, managerName?: string }>
-  createdAt: string
-}
-
-interface Message {
-  id: string
-  content?: string
-  type?: 'TEXT' | 'VOICE' | 'IMAGE' | 'FILE' | null
-  voiceUrl?: string
-  voiceDuration?: number
-  fileUrl?: string
-  fileName?: string
-  fileSize?: number
-  fileType?: string
-  senderId: string
-  senderOrganization: Organization
-  receiverOrganization: Organization
-  createdAt: string
-  isRead: boolean
-}
-
-interface MessengerChatProps {
-  counterparty: Organization
-  onMessagesRead?: () => void
-}
-
-export function MessengerChatWithAttachments({ counterparty, onMessagesRead }: MessengerChatProps) {
-  const { user } = useAuth()
-  const [message, setMessage] = useState('')
-  const [currentView, setCurrentView] = useState<'chat' | 'attachments'>('chat')
-  const messagesEndRef = useRef<HTMLDivElement>(null)
-  const messageInputRef = useRef<HTMLTextAreaElement>(null)
-  
-  // Загружаем сообщения с контрагентом
-  const { data: messagesData, loading, refetch } = useQuery(GET_MESSAGES, {
-    variables: { counterpartyId: counterparty.id },
-    pollInterval: 3000,
-    fetchPolicy: 'cache-and-network',
-    errorPolicy: 'all'
-  })
-
-  // Мутация для отметки сообщений как прочитанных
-  const [markMessagesAsReadMutation] = useMutation(MARK_MESSAGES_AS_READ, {
-    onCompleted: () => {
-      setTimeout(() => {
-        onMessagesRead?.()
-      }, 500)
-    },
-    onError: (error) => {
-      console.error('Ошибка отметки сообщений как прочитанных:', error)
-    }
-  })
-  
-  const [sendMessageMutation] = useMutation(SEND_MESSAGE, {
-    onCompleted: () => {
-      refetch()
-    }
-  })
-
-  const [sendVoiceMessageMutation] = useMutation(SEND_VOICE_MESSAGE, {
-    onCompleted: () => {
-      refetch()
-    }
-  })
-
-  const [sendImageMessageMutation] = useMutation(SEND_IMAGE_MESSAGE, {
-    onCompleted: () => {
-      refetch()
-    }
-  })
-
-  const [sendFileMessageMutation] = useMutation(SEND_FILE_MESSAGE, {
-    onCompleted: () => {
-      refetch()
-    }
-  })
-
-  const messages = useMemo(() => messagesData?.messages || [], [messagesData?.messages])
-
-  // Отмечаем сообщения как прочитанные только если есть непрочитанные
-  useEffect(() => {
-    if (messages.length > 0 && user?.organization?.id && counterparty.id) {
-      const hasUnreadMessages = messages.some((msg: Message) => 
-        !msg.isRead && 
-        msg.senderOrganization?.id === counterparty.id
-      )
-      
-      if (hasUnreadMessages) {
-        const conversationId = `${user.organization.id}-${counterparty.id}`
-        markMessagesAsReadMutation({
-          variables: { conversationId },
-        })
-      }
-    }
-  }, [messages, counterparty.id, user?.organization?.id, markMessagesAsReadMutation])
-
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
-  }
-
-  useEffect(() => {
-    scrollToBottom()
-  }, [messages])
-
-  // Автофокус на поле ввода при открытии чата
-  useEffect(() => {
-    if (currentView === 'chat') {
-      const timer = setTimeout(() => {
-        messageInputRef.current?.focus()
-      }, 100)
-      return () => clearTimeout(timer)
-    }
-  }, [counterparty.id, currentView])
-
-  const getOrganizationName = (org: Organization) => {
-    return org.name || org.fullName || 'Организация'
-  }
-
-  const getShortCompanyName = (fullName: string) => {
-    if (!fullName) return 'Полное название не указано'
-    
-    const legalFormReplacements: { [key: string]: string } = {
-      'Общество с ограниченной ответственностью': 'ООО',
-      'Открытое акционерное общество': 'ОАО',
-      'Закрытое акционерное общество': 'ЗАО',
-      'Публичное акционерное общество': 'ПАО',
-      'Непубличное акционерное общество': 'НАО',
-      'Акционерное общество': 'АО',
-      'Индивидуальный предприниматель': 'ИП',
-      'Товарищество с ограниченной ответственностью': 'ТОО',
-      'Частное предприятие': 'ЧП',
-      'Субъект предпринимательской деятельности': 'СПД'
-    }
-    
-    let result = fullName
-    
-    for (const [fullForm, shortForm] of Object.entries(legalFormReplacements)) {
-      const regex = new RegExp(`^${fullForm}\\s+`, 'i')
-      if (regex.test(result)) {
-        result = result.replace(regex, `${shortForm} `)
-        break
-      }
-    }
-    
-    return result
-  }
-
-  const getTypeLabel = (type: string) => {
-    switch (type) {
-      case 'FULFILLMENT':
-        return 'Фулфилмент'
-      case 'SELLER':
-        return 'Селлер'
-      case 'LOGIST':
-        return 'Логистика'
-      case 'WHOLESALE':
-        return 'Оптовик'
-      default:
-        return type
-    }
-  }
-
-  const getTypeColor = (type: string) => {
-    switch (type) {
-      case 'FULFILLMENT':
-        return 'bg-blue-500/20 text-blue-300 border-blue-500/30'
-      case 'SELLER':
-        return 'bg-green-500/20 text-green-300 border-green-500/30'
-      case 'LOGIST':
-        return 'bg-orange-500/20 text-orange-300 border-orange-500/30'
-      case 'WHOLESALE':
-        return 'bg-purple-500/20 text-purple-300 border-purple-500/30'
-      default:
-        return 'bg-gray-500/20 text-gray-300 border-gray-500/30'
-    }
-  }
-
-  const getInitials = (org: Organization) => {
-    const name = getOrganizationName(org)
-    return name.charAt(0).toUpperCase()
-  }
-
-  const handleSendMessage = async () => {
-    if (!message.trim()) return
-
-    try {
-      await sendMessageMutation({
-        variables: {
-          receiverOrganizationId: counterparty.id,
-          content: message.trim()
-        }
-      })
-      setMessage('')
-    } catch (error) {
-      console.error('Ошибка отправки сообщения:', error)
-    }
-  }
-
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault()
-      handleSendMessage()
-    }
-  }
-
-  const handleEmojiSelect = (emoji: string) => {
-    setMessage(prev => prev + emoji)
-  }
-
-  const handleSendVoice = async (audioUrl: string, duration: number) => {
-    try {
-      await sendVoiceMessageMutation({
-        variables: {
-          receiverOrganizationId: counterparty.id,
-          voiceUrl: audioUrl,
-          voiceDuration: duration
-        }
-      })
-    } catch (error) {
-      console.error('Ошибка отправки голосового сообщения:', error)
-    }
-  }
-
-  const handleSendImage = async (fileUrl: string, fileName: string, fileSize: number, fileType: string) => {
-    try {
-      await sendImageMessageMutation({
-        variables: {
-          receiverOrganizationId: counterparty.id,
-          fileUrl,
-          fileName,
-          fileSize,
-          fileType
-        }
-      })
-    } catch (error) {
-      console.error('Ошибка отправки изображения:', error)
-    }
-  }
-
-  const handleSendFile = async (fileUrl: string, fileName: string, fileSize: number, fileType: string) => {
-    try {
-      await sendFileMessageMutation({
-        variables: {
-          receiverOrganizationId: counterparty.id,
-          fileUrl,
-          fileName,
-          fileSize,
-          fileType
-        }
-      })
-    } catch (error) {
-      console.error('Ошибка отправки файла:', error)
-    }
-  }
-
-  const formatTime = (dateString: string) => {
-    const date = new Date(dateString)
-    if (isNaN(date.getTime())) {
-      return '00:00'
-    }
-    return date.toLocaleTimeString('ru-RU', { 
-      hour: '2-digit', 
-      minute: '2-digit' 
-    })
-  }
-
-  const formatDate = (dateString: string) => {
-    const date = new Date(dateString)
-    if (isNaN(date.getTime())) {
-      return 'Неизвестная дата'
-    }
-    
-    const today = new Date()
-    const yesterday = new Date(today)
-    yesterday.setDate(yesterday.getDate() - 1)
-
-    if (date.toDateString() === today.toDateString()) {
-      return 'Сегодня'
-    } else if (date.toDateString() === yesterday.toDateString()) {
-      return 'Вчера'
-    } else {
-      return date.toLocaleDateString('ru-RU', {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric'
-      })
-    }
-  }
-
-  return (
-    <div className="flex flex-col h-full">
-      {/* Заголовок чата */}
-      <div className="flex items-center justify-between p-4 border-b border-white/10">
-        <div className="flex items-center space-x-3">
-          <Avatar className="h-10 w-10">
-            {counterparty.users?.[0]?.avatar ? (
-              <AvatarImage 
-                src={counterparty.users[0].avatar} 
-                alt="Аватар организации" 
-                className="w-full h-full object-cover"
-              />
-            ) : null}
-            <AvatarFallback className="bg-purple-500 text-white text-sm">
-              {getInitials(counterparty)}
-            </AvatarFallback>
-          </Avatar>
-          <div>
-            <h3 className="font-semibold text-white">
-              {getOrganizationName(counterparty)}
-            </h3>
-            <div className="flex items-center space-x-2">
-              <Badge className={`${getTypeColor(counterparty.type)} text-xs`}>
-                {getTypeLabel(counterparty.type)}
-              </Badge>
-              <p className="text-white/60 text-xs">
-                {getShortCompanyName(counterparty.fullName || '')}
-              </p>
-            </div>
-          </div>
-        </div>
-        
-        {/* Переключатель между чатом и вложениями */}
-        <div className="flex items-center space-x-2">
-          <Button
-            variant={currentView === 'chat' ? 'secondary' : 'ghost'}
-            size="sm"
-            onClick={() => setCurrentView('chat')}
-            className="text-xs"
-          >
-            <MessageCircle className="h-4 w-4 mr-1" />
-            Чат
-          </Button>
-          <Button
-            variant={currentView === 'attachments' ? 'secondary' : 'ghost'}
-            size="sm"
-            onClick={() => setCurrentView('attachments')}
-            className="text-xs"
-          >
-            <FileText className="h-4 w-4 mr-1" />
-            Вложения
-          </Button>
-        </div>
-      </div>
-
-      {/* Основное содержимое */}
-      {currentView === 'chat' ? (
-        <>
-          {/* Сообщения */}
-          <div className="flex-1 overflow-y-auto p-4 space-y-4">
-            {loading ? (
-              <div className="flex items-center justify-center h-32">
-                <div className="text-white/60">Загрузка сообщений...</div>
-              </div>
-            ) : messages.length === 0 ? (
-              <div className="flex items-center justify-center h-32">
-                <div className="text-center">
-                  <div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <MessageCircle className="h-8 w-8 text-white/40" />
-                  </div>
-                  <p className="text-white/60 text-lg mb-2">Пока нет сообщений</p>
-                  <p className="text-white/40 text-sm">
-                    Начните беседу с {getOrganizationName(counterparty)}
-                  </p>
-                </div>
-              </div>
-            ) : (
-              messages.map((msg: Message, index: number) => {
-                const isCurrentUser = msg.senderOrganization?.id === user?.organization?.id
-                const showDate = index === 0 || 
-                  formatDate(messages[index - 1].createdAt) !== formatDate(msg.createdAt)
-
-                return (
-                  <div key={msg.id}>
-                    {showDate && (
-                      <div className="flex justify-center mb-4">
-                        <div className="bg-white/10 rounded-full px-3 py-1">
-                          <span className="text-white/60 text-xs">
-                            {formatDate(msg.createdAt)}
-                          </span>
-                        </div>
-                      </div>
-                    )}
-                    
-                    <div className={`flex ${isCurrentUser ? 'justify-end' : 'justify-start'} mb-3`}>
-                      <div className={`max-w-xs lg:max-w-md xl:max-w-lg ${
-                        isCurrentUser ? 'mr-2' : 'ml-2'
-                      }`}>
-                        <div className="space-y-2">
-                          {msg.type === 'VOICE' && msg.voiceUrl ? (
-                            <VoicePlayer 
-                              audioUrl={msg.voiceUrl} 
-                              duration={msg.voiceDuration || 0}
-                              isCurrentUser={isCurrentUser}
-                            />
-                          ) : msg.type === 'IMAGE' && msg.fileUrl ? (
-                            <ImageMessage
-                              imageUrl={msg.fileUrl}
-                              fileName={msg.fileName || 'image'}
-                              fileSize={msg.fileSize}
-                              isCurrentUser={isCurrentUser}
-                            />
-                          ) : msg.type === 'FILE' && msg.fileUrl ? (
-                            <FileMessage
-                              fileUrl={msg.fileUrl}
-                              fileName={msg.fileName || 'file'}
-                              fileSize={msg.fileSize}
-                              fileType={msg.fileType}
-                              isCurrentUser={isCurrentUser}
-                            />
-                          ) : msg.content ? (
-                            <div className={`px-4 py-2 rounded-lg break-words ${
-                              isCurrentUser 
-                                ? 'bg-blue-500/20 text-white border border-blue-500/30'
-                                : 'bg-white/10 text-white border border-white/20'
-                            }`}>
-                              <p className="text-sm leading-relaxed whitespace-pre-wrap break-words">{msg.content}</p>
-                            </div>
-                          ) : null}
-                          
-                          <p className={`text-xs ${
-                            isCurrentUser ? 'text-blue-300/70' : 'text-white/50'
-                          }`}>
-                            {formatTime(msg.createdAt)}
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                )
-              })
-            )}
-            <div ref={messagesEndRef} />
-          </div>
-
-          {/* Поле ввода сообщения */}
-          <div className="px-4 py-3 border-t border-white/10">
-            <div className="flex items-center space-x-2">
-              <div className="flex-1">
-                <textarea
-                  ref={messageInputRef}
-                  value={message}
-                  onChange={(e) => setMessage(e.target.value)}
-                  onKeyPress={handleKeyPress}
-                  placeholder="Введите сообщение..."
-                  className="glass-input text-white placeholder:text-white/40 w-full resize-none overflow-y-auto rounded-lg py-2 px-3"
-                  rows={1}
-                  onInput={(e) => {
-                    const target = e.target as HTMLTextAreaElement
-                    target.style.height = 'auto'
-                    target.style.height = Math.min(target.scrollHeight, 120) + 'px'
-                  }}
-                />
-              </div>
-              
-              <div className="flex items-center space-x-1">
-                <EmojiPickerComponent onEmojiSelect={handleEmojiSelect} />
-                <VoiceRecorder onVoiceRecorded={handleSendVoice} />
-                <FileUploader 
-                  onFileUploaded={handleSendImage}
-                  onFileUploadError={(error) => console.error('Ошибка загрузки файла:', error)}
-                  accept="image/*"
-                  icon="image"
-                />
-                <FileUploader 
-                  onFileUploaded={handleSendFile}
-                  onFileUploadError={(error) => console.error('Ошибка загрузки файла:', error)}
-                  accept="*"
-                  icon="file"
-                />
-                <Button
-                  onClick={handleSendMessage}
-                  disabled={!message.trim()}
-                  size="icon"
-                  className="bg-blue-500 hover:bg-blue-600 text-white"
-                >
-                  <Send className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-          </div>
-        </>
-      ) : (
-        /* Вложения */
-        <div className="flex-1 overflow-hidden">
-          <MessengerAttachments counterparty={counterparty} />
-        </div>
-      )}
-    </div>
-  )
-} 
--- a/src/components/messenger/messenger-chat.tsx
+++ b/src/components/messenger/messenger-chat.tsx
@ -5,7 +5,6 @@ import { useMutation, useQuery } from '@apollo/client'
 import { GET_MESSAGES, GET_CONVERSATIONS } from '@/graphql/queries'
 import { SEND_MESSAGE, SEND_VOICE_MESSAGE, SEND_IMAGE_MESSAGE, SEND_FILE_MESSAGE, MARK_MESSAGES_AS_READ } from '@/graphql/mutations'
 import { Button } from '@/components/ui/button'
-
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Badge } from '@/components/ui/badge'
 import { EmojiPickerComponent } from '@/components/ui/emoji-picker'
@ -15,7 +14,7 @@ import { FileUploader } from '@/components/ui/file-uploader'
 import { ImageMessage } from '@/components/ui/image-message'
 import { FileMessage } from '@/components/ui/file-message'
 import { MessengerAttachments } from './messenger-attachments'
-import { Send, MoreVertical, FileText, MessageCircle } from 'lucide-react'
+import { Send, FileText, MessageCircle } from 'lucide-react'
 import { useAuth } from '@/hooks/useAuth'

 interface Organization {
@ -25,7 +24,10 @@ interface Organization {
  fullName?: string
  type: 'FULFILLMENT' | 'SELLER' | 'LOGIST' | 'WHOLESALE'
  address?: string
+  phones?: Array<{ value: string }>
+  emails?: Array<{ value: string }>
  users?: Array<{ id: string, avatar?: string, managerName?: string }>
+  createdAt: string
 }

 interface Message {
@ -60,18 +62,17 @@ export function MessengerChat({ counterparty, onMessagesRead }: MessengerChatPro
  // Загружаем сообщения с контрагентом
  const { data: messagesData, loading, refetch } = useQuery(GET_MESSAGES, {
    variables: { counterpartyId: counterparty.id },
-    pollInterval: 3000, // Обновляем каждые 3 секунды для получения новых сообщений
-    fetchPolicy: 'cache-and-network', // Всегда загружаем свежие данные
-    errorPolicy: 'all' // Показываем данные даже при ошибках
+    pollInterval: 3000,
+    fetchPolicy: 'cache-and-network',
+    errorPolicy: 'all'
  })

  // Мутация для отметки сообщений как прочитанных
  const [markMessagesAsReadMutation] = useMutation(MARK_MESSAGES_AS_READ, {
    onCompleted: () => {
-      // Деликатное обновление с задержкой чтобы было незаметно
      setTimeout(() => {
        onMessagesRead?.()
-      }, 500) // Полсекунды задержки для плавности
+      }, 500)
    },
    onError: (error) => {
      console.error('Ошибка отметки сообщений как прочитанных:', error)
@ -80,38 +81,35 @@ export function MessengerChat({ counterparty, onMessagesRead }: MessengerChatPro
  
  const [sendMessageMutation] = useMutation(SEND_MESSAGE, {
    onCompleted: () => {
-      refetch() // Перезагружаем сообщения после отправки
-    },
-    onError: (error) => {
-      console.error('Ошибка отправки сообщения:', error)
+      refetch()
    }
  })

  const [sendVoiceMessageMutation] = useMutation(SEND_VOICE_MESSAGE, {
    onCompleted: () => {
-      refetch() // Перезагружаем сообщения после отправки
+      refetch()
    },
-    onError: (error) => {
-      console.error('Ошибка отправки голосового сообщения:', error)
-    }
+    refetchQueries: [
+      { query: GET_MESSAGES, variables: { counterpartyId: counterparty.id, limit: 1000 } }
+    ]
  })

  const [sendImageMessageMutation] = useMutation(SEND_IMAGE_MESSAGE, {
    onCompleted: () => {
      refetch()
    },
-    onError: (error) => {
-      console.error('Ошибка отправки изображения:', error)
-    }
+    refetchQueries: [
+      { query: GET_MESSAGES, variables: { counterpartyId: counterparty.id, limit: 1000 } }
+    ]
  })

  const [sendFileMessageMutation] = useMutation(SEND_FILE_MESSAGE, {
    onCompleted: () => {
      refetch()
    },
-    onError: (error) => {
-      console.error('Ошибка отправки файла:', error)
-    }
+    refetchQueries: [
+      { query: GET_MESSAGES, variables: { counterpartyId: counterparty.id, limit: 1000 } }
+    ]
  })

  const messages = useMemo(() => messagesData?.messages || [], [messagesData?.messages])
@ -133,8 +131,6 @@ export function MessengerChat({ counterparty, onMessagesRead }: MessengerChatPro
    }
  }, [messages, counterparty.id, user?.organization?.id, markMessagesAsReadMutation])

-
-
  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }
@ -145,30 +141,21 @@ export function MessengerChat({ counterparty, onMessagesRead }: MessengerChatPro

  // Автофокус на поле ввода при открытии чата
  useEffect(() => {
+    if (currentView === 'chat') {
      const timer = setTimeout(() => {
        messageInputRef.current?.focus()
-    }, 100) // Небольшая задержка для корректного фокуса
-    
+      }, 100)
      return () => clearTimeout(timer)
-  }, [counterparty.id])
+    }
+  }, [counterparty.id, currentView])

  const getOrganizationName = (org: Organization) => {
    return org.name || org.fullName || 'Организация'
  }

-  const getManagerName = (org: Organization) => {
-    return org.users?.[0]?.managerName || 'Управляющий'
-  }
-
-  const getInitials = (org: Organization) => {
-    const name = getOrganizationName(org)
-    return name.charAt(0).toUpperCase()
-  }
-
  const getShortCompanyName = (fullName: string) => {
    if (!fullName) return 'Полное название не указано'
    
-    // Словарь для замены полных форм на сокращенные
    const legalFormReplacements: { [key: string]: string } = {
      'Общество с ограниченной ответственностью': 'ООО',
      'Открытое акционерное общество': 'ОАО',
@ -184,7 +171,6 @@ export function MessengerChat({ counterparty, onMessagesRead }: MessengerChatPro
    
    let result = fullName
    
-    // Заменяем полные формы на сокращенные
    for (const [fullForm, shortForm] of Object.entries(legalFormReplacements)) {
      const regex = new RegExp(`^${fullForm}\\s+`, 'i')
      if (regex.test(result)) {
@ -226,6 +212,11 @@ export function MessengerChat({ counterparty, onMessagesRead }: MessengerChatPro
    }
  }

+  const getInitials = (org: Organization) => {
+    const name = getOrganizationName(org)
+    return name.charAt(0).toUpperCase()
+  }
+
  const handleSendMessage = async () => {
    if (!message.trim()) return

@ -322,8 +313,9 @@ export function MessengerChat({ counterparty, onMessagesRead }: MessengerChatPro
      return 'Вчера'
    } else {
      return date.toLocaleDateString('ru-RU', {
-        day: 'numeric',
-        month: 'long'
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric'
      })
    }
  }
@ -345,42 +337,62 @@ export function MessengerChat({ counterparty, onMessagesRead }: MessengerChatPro
              {getInitials(counterparty)}
            </AvatarFallback>
          </Avatar>
-          
          <div>
-            <div className="flex items-center space-x-3">
-              <h3 className="text-white font-medium">
+            <h3 className="font-semibold text-white">
              {getOrganizationName(counterparty)}
            </h3>
+            <div className="flex items-center space-x-2">
              <Badge className={`${getTypeColor(counterparty.type)} text-xs`}>
                {getTypeLabel(counterparty.type)}
              </Badge>
-            </div>
-                         <p className="text-white/60 text-sm">
+              <p className="text-white/60 text-xs">
                {getShortCompanyName(counterparty.fullName || '')}
              </p>
            </div>
          </div>
-        
-        <Button variant="ghost" size="sm" className="text-white/60 hover:text-white">
-          <MoreVertical className="h-4 w-4" />
-        </Button>
        </div>
        
-      {/* Область сообщений */}
-      <div className="flex-1 overflow-auto p-4 space-y-4">
+        {/* Переключатель между чатом и вложениями */}
+        <div className="flex items-center space-x-2">
+          <Button
+            variant={currentView === 'chat' ? 'secondary' : 'ghost'}
+            size="sm"
+            onClick={() => setCurrentView('chat')}
+            className="text-xs"
+          >
+            <MessageCircle className="h-4 w-4 mr-1" />
+            Чат
+          </Button>
+          <Button
+            variant={currentView === 'attachments' ? 'secondary' : 'ghost'}
+            size="sm"
+            onClick={() => setCurrentView('attachments')}
+            className="text-xs"
+          >
+            <FileText className="h-4 w-4 mr-1" />
+            Вложения
+          </Button>
+        </div>
+      </div>
+
+      {/* Основное содержимое */}
+      {currentView === 'chat' ? (
+        <>
+          {/* Сообщения */}
+          <div className="flex-1 overflow-y-auto p-4 space-y-4">
            {loading ? (
-          <div className="flex items-center justify-center h-full">
+              <div className="flex items-center justify-center h-32">
                <div className="text-white/60">Загрузка сообщений...</div>
              </div>
            ) : messages.length === 0 ? (
-          <div className="flex items-center justify-center h-full">
+              <div className="flex items-center justify-center h-32">
                <div className="text-center">
-              <div className="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-3">
-                <Send className="h-6 w-6 text-white/40" />
+                  <div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <MessageCircle className="h-8 w-8 text-white/40" />
                  </div>
-              <p className="text-white/60 text-sm mb-1">Начните беседу</p>
-              <p className="text-white/40 text-xs">
-                Отправьте первое сообщение {getOrganizationName(counterparty)}
+                  <p className="text-white/60 text-lg mb-2">Пока нет сообщений</p>
+                  <p className="text-white/40 text-sm">
+                    Начните беседу с {getOrganizationName(counterparty)}
                  </p>
                </div>
              </div>
@ -403,32 +415,9 @@ export function MessengerChat({ counterparty, onMessagesRead }: MessengerChatPro
                    )}
                    
                    <div className={`flex ${isCurrentUser ? 'justify-end' : 'justify-start'} mb-3`}>
-                  <div className="flex flex-col max-w-xs lg:max-w-md break-words">
-                    {/* Имя отправителя */}
-                    {!isCurrentUser && (
-                      <div className="flex items-center space-x-2 mb-1 px-1">
-                        <Avatar className="h-6 w-6">
-                          {msg.senderOrganization?.users?.[0]?.avatar ? (
-                            <AvatarImage 
-                              src={msg.senderOrganization.users[0].avatar} 
-                              alt="Аватар отправителя" 
-                              className="w-full h-full object-cover"
-                            />
-                          ) : null}
-                          <AvatarFallback className="bg-purple-500 text-white text-xs">
-                            {getInitials(msg.senderOrganization)}
-                          </AvatarFallback>
-                        </Avatar>
-                        <span className="text-white/60 text-xs">
-                          {getManagerName(msg.senderOrganization)}
-                        </span>
-                        <Badge className={`${getTypeColor(msg.senderOrganization.type)} text-xs`}>
-                          {getTypeLabel(msg.senderOrganization.type)}
-                        </Badge>
-                      </div>
-                    )}
-                    
-                    {/* Сообщение */}
+                      <div className={`max-w-xs lg:max-w-md xl:max-w-lg ${
+                        isCurrentUser ? 'mr-2' : 'ml-2'
+                      }`}>
                        <div className="space-y-2">
                          {msg.type === 'VOICE' && msg.voiceUrl ? (
                            <VoicePlayer 
@ -488,34 +477,42 @@ export function MessengerChat({ counterparty, onMessagesRead }: MessengerChatPro
                  placeholder="Введите сообщение..."
                  className="glass-input text-white placeholder:text-white/40 w-full resize-none overflow-y-auto rounded-lg py-2 px-3"
                  rows={1}
-              style={{
-                height: 'auto',
-                minHeight: '40px',
-                maxHeight: '120px'
-              }}
                  onInput={(e) => {
                    const target = e.target as HTMLTextAreaElement
                    target.style.height = 'auto'
-                const newHeight = Math.min(Math.max(target.scrollHeight, 40), 120)
-                target.style.height = newHeight + 'px'
+                    target.style.height = Math.min(target.scrollHeight, 120) + 'px'
                  }}
                />
              </div>
-          <div className="flex items-center gap-2">
+              
+              <div className="flex items-center space-x-1">
                <EmojiPickerComponent onEmojiSelect={handleEmojiSelect} />
-            <FileUploader onSendFile={handleSendFile} />
                <VoiceRecorder onSendVoice={handleSendVoice} />
+                <FileUploader onSendFile={handleSendFile} />
                <Button
                  onClick={handleSendMessage}
                  disabled={!message.trim()}
-              className="bg-blue-500/20 hover:bg-blue-500/30 text-blue-300 border-blue-500/30 cursor-pointer h-10 w-10 p-0"
-              variant="outline"
+                  size="icon"
+                  className="bg-blue-500 hover:bg-blue-600 text-white"
                >
                  <Send className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </div>
+        </>
+      ) : (
+        /* Вложения */
+        <div className="flex-1 overflow-hidden">
+          <MessengerAttachments 
+            counterparty={counterparty} 
+            onViewChange={() => {
+              // Принудительно обновляем сообщения при переходе на вложения
+              refetch()
+            }}
+          />
+        </div>
+      )}
    </div>
  )
 } 
--- a/src/components/messenger/messenger-dashboard.tsx
+++ b/src/components/messenger/messenger-dashboard.tsx
@ -7,7 +7,7 @@ import { Button } from '@/components/ui/button'
 import { Sidebar } from '@/components/dashboard/sidebar'
 import { useSidebar } from '@/hooks/useSidebar'
 import { MessengerConversations } from './messenger-conversations'
-import { MessengerChatWithAttachments } from './messenger-chat-with-attachments'
+import { MessengerChat } from './messenger-chat'
 import { MessengerEmptyState } from './messenger-empty-state'
 import { GET_CONVERSATIONS, GET_MY_COUNTERPARTIES } from '@/graphql/queries'
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels'
@ -122,7 +122,7 @@ export function MessengerDashboard() {
              <Panel defaultSize={70} className="pl-2">
                <Card className="glass-card h-full overflow-hidden">
                  {selectedCounterparty && selectedCounterpartyData ? (
-                    <MessengerChatWithAttachments 
+                    <MessengerChat 
                      counterparty={selectedCounterpartyData} 
                      onMessagesRead={refetchConversations} 
                    />