InfraHub

1
import { useState, useEffect } from 'react'
2

3
export function Chat() {
4
  const [messages, setMessages] = useState([])
5
  const [newMessage, setNewMessage] = useState('')
6

7
  useEffect(() => {
8
    // Здесь мы будем загружать сообщения с бэкенда
9
    // И, возможно, устанавливать WebSocket соединение для real-time чата
10
  }, [])
11

12
  const handleSendMessage = (e) => {
13
    e.preventDefault()
14
    // Здесь мы будем отправлять сообщение на бэкенд
15
    // И добавлять его в список сообщений
16
    setMessages([...messages, { text: newMessage, sender: 'me' }])
17
    setNewMessage('')
18
  }
19

20
  return (
21
    <div className="h-[500px] flex flex-col">
22
      <div className="flex-1 overflow-y-auto p-4 space-y-2">
23
        {messages.map((message, index) => (
24
          <div key={index} className={`p-2 rounded ${message.sender === 'me' ? 'bg-blue-100 ml-auto' : 'bg-gray-100'}`}>
25
            {message.text}
26
          </div>
27
        ))}
28
      </div>
29
      <form onSubmit={handleSendMessage} className="p-4 border-t">
30
        <input
31
          type="text"
32
          value={newMessage}
33
          onChange={(e) => setNewMessage(e.target.value)}
34
          placeholder="Введите сообщение..."
35
          className="w-full p-2 border rounded"
36
        />
37
      </form>
38
    </div>
39
  )
40
}