511 lines
18 KiB
TypeScript
511 lines
18 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useRef, useEffect, useMemo } from 'react'
|
||
import { useMutation, useQuery } from '@apollo/client'
|
||
import { GET_MESSAGES } 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 { Send, MoreVertical } 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
|
||
users?: Array<{ id: string, avatar?: string, managerName?: 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
|
||
}
|
||
|
||
export function MessengerChat({ counterparty }: MessengerChatProps) {
|
||
const { user } = useAuth()
|
||
const [message, setMessage] = useState('')
|
||
const messagesEndRef = useRef<HTMLDivElement>(null)
|
||
|
||
// Загружаем сообщения с контрагентом
|
||
const { data: messagesData, loading, refetch } = useQuery(GET_MESSAGES, {
|
||
variables: { counterpartyId: counterparty.id },
|
||
pollInterval: 3000, // Обновляем каждые 3 секунды для получения новых сообщений
|
||
fetchPolicy: 'cache-and-network', // Всегда загружаем свежие данные
|
||
errorPolicy: 'all' // Показываем данные даже при ошибках
|
||
})
|
||
|
||
// Мутация для отметки сообщений как прочитанных
|
||
const [markMessagesAsReadMutation] = useMutation(MARK_MESSAGES_AS_READ, {
|
||
onError: (error) => {
|
||
console.error('Ошибка отметки сообщений как прочитанных:', error)
|
||
}
|
||
})
|
||
|
||
const [sendMessageMutation] = useMutation(SEND_MESSAGE, {
|
||
onCompleted: () => {
|
||
refetch() // Перезагружаем сообщения после отправки
|
||
},
|
||
onError: (error) => {
|
||
console.error('Ошибка отправки сообщения:', error)
|
||
}
|
||
})
|
||
|
||
const [sendVoiceMessageMutation] = useMutation(SEND_VOICE_MESSAGE, {
|
||
onCompleted: () => {
|
||
refetch() // Перезагружаем сообщения после отправки
|
||
},
|
||
onError: (error) => {
|
||
console.error('Ошибка отправки голосового сообщения:', error)
|
||
}
|
||
})
|
||
|
||
const [sendImageMessageMutation] = useMutation(SEND_IMAGE_MESSAGE, {
|
||
onCompleted: () => {
|
||
refetch()
|
||
},
|
||
onError: (error) => {
|
||
console.error('Ошибка отправки изображения:', error)
|
||
}
|
||
})
|
||
|
||
const [sendFileMessageMutation] = useMutation(SEND_FILE_MESSAGE, {
|
||
onCompleted: () => {
|
||
refetch()
|
||
},
|
||
onError: (error) => {
|
||
console.error('Ошибка отправки файла:', error)
|
||
}
|
||
})
|
||
|
||
const messages = useMemo(() => messagesData?.messages || [], [messagesData?.messages])
|
||
|
||
// Автоматически отмечаем сообщения как прочитанные при открытии чата
|
||
useEffect(() => {
|
||
if (user?.organization?.id && counterparty.id) {
|
||
const conversationId = `${user.organization.id}-${counterparty.id}`
|
||
markMessagesAsReadMutation({
|
||
variables: { conversationId },
|
||
})
|
||
}
|
||
}, [counterparty.id, user?.organization?.id, markMessagesAsReadMutation])
|
||
|
||
// Отмечаем сообщения как прочитанные при получении новых сообщений
|
||
useEffect(() => {
|
||
if (messages.length > 0 && user?.organization?.id && counterparty.id) {
|
||
const hasUnreadMessages = messages.some((msg: Message) =>
|
||
!msg.isRead &&
|
||
msg.senderOrganization?.id !== user.organization?.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])
|
||
|
||
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 } = {
|
||
'Общество с ограниченной ответственностью': 'ООО',
|
||
'Открытое акционерное общество': 'ОАО',
|
||
'Закрытое акционерное общество': 'ЗАО',
|
||
'Публичное акционерное общество': 'ПАО',
|
||
'Непубличное акционерное общество': 'НАО',
|
||
'Акционерное общество': 'АО',
|
||
'Индивидуальный предприниматель': 'ИП',
|
||
'Товарищество с ограниченной ответственностью': 'ТОО',
|
||
'Частное предприятие': 'ЧП',
|
||
'Субъект предпринимательской деятельности': 'СПД'
|
||
}
|
||
|
||
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 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 handleSendFile = async (fileUrl: string, fileName: string, fileSize: number, fileType: string, messageType: 'IMAGE' | 'FILE') => {
|
||
try {
|
||
if (messageType === 'IMAGE') {
|
||
await sendImageMessageMutation({
|
||
variables: {
|
||
receiverOrganizationId: counterparty.id,
|
||
fileUrl,
|
||
fileName,
|
||
fileSize,
|
||
fileType
|
||
}
|
||
})
|
||
} else {
|
||
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: 'numeric',
|
||
month: 'long'
|
||
})
|
||
}
|
||
}
|
||
|
||
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>
|
||
<div className="flex items-center space-x-3">
|
||
<h3 className="text-white font-medium">
|
||
{getOrganizationName(counterparty)}
|
||
</h3>
|
||
<Badge className={`${getTypeColor(counterparty.type)} text-xs`}>
|
||
{getTypeLabel(counterparty.type)}
|
||
</Badge>
|
||
</div>
|
||
<p className="text-white/60 text-sm">
|
||
{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">
|
||
{loading ? (
|
||
<div className="flex items-center justify-center h-full">
|
||
<div className="text-white/60">Загрузка сообщений...</div>
|
||
</div>
|
||
) : messages.length === 0 ? (
|
||
<div className="flex items-center justify-center h-full">
|
||
<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>
|
||
<p className="text-white/60 text-sm mb-1">Начните беседу</p>
|
||
<p className="text-white/40 text-xs">
|
||
Отправьте первое сообщение {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="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="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
|
||
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}
|
||
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'
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<EmojiPickerComponent onEmojiSelect={handleEmojiSelect} />
|
||
<FileUploader onSendFile={handleSendFile} />
|
||
<VoiceRecorder onSendVoice={handleSendVoice} />
|
||
<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"
|
||
>
|
||
<Send className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|