121 lines
4.6 KiB
TypeScript
121 lines
4.6 KiB
TypeScript
import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent } from 'react'
|
||
import { AlertCircle, Send, X } from 'lucide-react'
|
||
import type { ChatConnectionStatus, ChatMessageOut } from '@/hooks/useChat'
|
||
import { formatLocalTime } from '@/lib/localTime'
|
||
|
||
interface ChatPanelProps {
|
||
messages: ChatMessageOut[]
|
||
status: ChatConnectionStatus
|
||
statusMessage: string | null
|
||
onSend: (text: string) => void
|
||
onClose: () => void
|
||
}
|
||
|
||
/**
|
||
* Панель чата комнаты конференции (см. design/mockups/room.html, блок
|
||
* `.chat-panel`). Всегда в развёрнутом виде рендерится только пока сама
|
||
* панель открыта — сворачивание/разворачивание и счётчик непрочитанных
|
||
* управляются на уровне RoomPage (WS-соединение живёт независимо от того,
|
||
* открыта ли панель, — иначе при сворачивании терялась бы история).
|
||
*
|
||
* Textarea, а не `<input>` из макета — сознательное отступление ради
|
||
* Enter/Shift+Enter (перенос строки), стили сохранены визуально идентичными
|
||
* пилюле-полю из макета.
|
||
*/
|
||
export function ChatPanel({ messages, status, statusMessage, onSend, onClose }: ChatPanelProps) {
|
||
const [draft, setDraft] = useState('')
|
||
const listRef = useRef<HTMLDivElement>(null)
|
||
const textareaRef = useRef<HTMLTextAreaElement>(null)
|
||
|
||
// Автоскролл к последнему сообщению — только если пользователь и так был
|
||
// внизу списка, чтобы не мешать чтению прокрученной вверх истории.
|
||
useEffect(() => {
|
||
const el = listRef.current
|
||
if (!el) return
|
||
const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight
|
||
if (distanceFromBottom < 120) {
|
||
el.scrollTop = el.scrollHeight
|
||
}
|
||
}, [messages])
|
||
|
||
function handleSend() {
|
||
const text = draft.trim()
|
||
if (!text || status !== 'open') return
|
||
onSend(text)
|
||
setDraft('')
|
||
if (textareaRef.current) textareaRef.current.style.height = 'auto'
|
||
}
|
||
|
||
function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
|
||
if (event.key === 'Enter' && !event.shiftKey) {
|
||
event.preventDefault()
|
||
handleSend()
|
||
}
|
||
}
|
||
|
||
function handleDraftChange(event: ChangeEvent<HTMLTextAreaElement>) {
|
||
setDraft(event.target.value)
|
||
// Авторасширение textarea до 4 строк, дальше — внутренний скролл.
|
||
const el = event.target
|
||
el.style.height = 'auto'
|
||
el.style.height = `${Math.min(el.scrollHeight, 96)}px`
|
||
}
|
||
|
||
return (
|
||
<aside className="chat-panel">
|
||
<div className="chat-head">
|
||
<h2>Чат встречи</h2>
|
||
<button type="button" aria-label="Свернуть чат" onClick={onClose}>
|
||
<X className="lucide" aria-hidden="true" />
|
||
</button>
|
||
</div>
|
||
|
||
{statusMessage && (
|
||
<p className="chat-status-banner">
|
||
<AlertCircle className="lucide" aria-hidden="true" /> {statusMessage}
|
||
</p>
|
||
)}
|
||
|
||
<div className="chat-messages" ref={listRef}>
|
||
{messages.length === 0 && status === 'open' && !statusMessage && (
|
||
<p className="chat-empty">Сообщений пока нет — начните обсуждение</p>
|
||
)}
|
||
{messages.map((message) => (
|
||
<div className="msg" key={message.id}>
|
||
<div className="msg-meta">
|
||
<span className="msg-author">
|
||
{message.author_name}
|
||
{message.is_guest && <span className="msg-guest-badge">гость</span>}
|
||
</span>
|
||
<span className="msg-time">{formatLocalTime(message.created_at)}</span>
|
||
</div>
|
||
<div className="msg-bubble">{message.text}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<form
|
||
className="chat-input-row"
|
||
onSubmit={(event) => {
|
||
event.preventDefault()
|
||
handleSend()
|
||
}}
|
||
>
|
||
<textarea
|
||
ref={textareaRef}
|
||
rows={1}
|
||
placeholder="Написать сообщение…"
|
||
value={draft}
|
||
onChange={handleDraftChange}
|
||
onKeyDown={handleKeyDown}
|
||
disabled={status !== 'open'}
|
||
maxLength={2000}
|
||
/>
|
||
<button type="submit" aria-label="Отправить" disabled={!draft.trim() || status !== 'open'}>
|
||
<Send className="lucide" aria-hidden="true" />
|
||
</button>
|
||
</form>
|
||
</aside>
|
||
)
|
||
}
|