71 lines
4.1 KiB
JavaScript
71 lines
4.1 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
||
import ReactMarkdown from 'react-markdown';
|
||
import remarkGfm from 'remark-gfm';
|
||
import rehypeRaw from 'rehype-raw'; // Импортируем rehype-raw для обработки сырого HTML
|
||
import CommandInput from './CommandInput';
|
||
|
||
function ChatPanel({ chatHistory, onSendMessage }) {
|
||
const [message, setMessage] = useState('');
|
||
|
||
const handleSubmit = (event) => {
|
||
event.preventDefault(); // Предотвращаем стандартное действие отправки формы, которое перезагружает страницу
|
||
if (message.trim()) { // Проверяем, что сообщение не пустое
|
||
onSendMessage(message); // Вызываем функцию отправки сообщения, переданную из родителя
|
||
setMessage(''); // Очищаем поле ввода после отправки
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
const chatHistoryDiv = document.querySelector('.chat-history');
|
||
if (chatHistoryDiv) {
|
||
chatHistoryDiv.scrollTop = chatHistoryDiv.scrollHeight;
|
||
}
|
||
}, [chatHistory]);
|
||
|
||
return (
|
||
<div className="chat-panel">
|
||
<div className="chat-history">
|
||
{chatHistory.map((msg, index) => (
|
||
<div key={index} className={`message ${msg.role}`}>
|
||
{/* Добавлено: обработка текста с Markdown */}
|
||
<ReactMarkdown
|
||
remarkPlugins={[remarkGfm]} // remarkHtml больше не нужен здесь
|
||
rehypePlugins={[rehypeRaw]} // Добавляем rehypeRaw для парсинга и отображения сырого HTML
|
||
components={{
|
||
a: ({ node, ...props }) => (
|
||
<a {...props} target="_blank" rel="noopener noreferrer">
|
||
{props.children}
|
||
</a>
|
||
),
|
||
img: ({ node, ...props }) => (
|
||
// Переопределяем стили изображения для адаптивности
|
||
<img
|
||
{...props}
|
||
style={{
|
||
...props.style, // Сохраняем другие инлайн-стили, переданные из бэкенда (например, max-height)
|
||
maxWidth: '100%', // Гарантируем, что изображение не выходит за пределы ширины родителя
|
||
height: 'auto' // Сохраняем пропорции изображения
|
||
}}
|
||
/>
|
||
)
|
||
}}
|
||
children={msg.content} // Явное указание children
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<form onSubmit={handleSubmit} className="chat-input-form">
|
||
<CommandInput
|
||
value={message} // Передаем текущее значение поля ввода
|
||
onChange={(e) => setMessage(e.target.value)} // Обновляем состояние при изменении поля ввода
|
||
// onSendMessage больше НЕ передается сюда,
|
||
// так как CommandInput не должен напрямую отправлять сообщения.
|
||
// Отправка происходит через onSubmit формы.
|
||
/>
|
||
<button type="submit">Отправить</button>
|
||
</form>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default ChatPanel; |