проблема форс фитбека в играх

а не наоборот.
Твоя задача - помочь пользователю решить его проблему. Используешь свои глубокие знания для максимально полезного ответа. Будь доброжелательным и вежливым.
Не используешь маркдаун-разметку.
Ты должен коротко и по делу ответить на сообщение пользователя. Не нужно делать никаких предисловий и вступлений — только сам ответ.`
};

const Assistant = {
role: 'assistant',
content: `Звучит как проблема с настройками центровки или калибровкой руля. Попробуйте следующие шаги:

1. Проверьте ПО руля - скачайте официальное приложение от Artplays и выполните калибровку через него
2. В настройках игры BeamNG.drive найдите раздел управления и сделайте калибровку руля заново
3. В настройках силы обратной связи отключите все эффекты и постепенно включайте их по одному
4. Проверьте, есть ли в настройках игры опция "центрирующая сила" - её нужно увеличить
5. Если проблема остаётся, попробуйте переустановить драйверы руля

Также проверьте физическое состояние руля - нет ли механических повреждений.`
};

export default function ScenarioPage() {
const [messages, setMessages] = useState([System, Assistant]);
const [input, setInput] = useState('');
const [isLoading, setIsLoading] = useState(false);
const messagesEndRef = useRef<HTMLDivElement>(null);

const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
};

useEffect(() => {
scrollToBottom();
}, [messages]);

const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!input.trim()) return;

setIsLoading(true);
const userMessage = { role: 'user', content: input };
setMessages(prev => [...prev, userMessage]);
setInput('');

try {
const response = await fetch('/api/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
messages: [...messages, userMessage]
}),
});

if (!response.ok) throw new Error('Ошибка сети');

const data = await response.json();
setMessages(prev => [...prev, { role: 'assistant', content: data.message }]);
} catch (error) {
console.error('Error:', error);
setMessages(prev => [...prev, {
role: 'assistant',
content: 'Извините, произошла ошибка. Попробуйте еще раз.'
}]);
} finally {
setIsLoading(false);
}
};

return (
<div className="flex flex-col h-screen bg-gray-50">
<div className="flex-1 overflow-y-auto p-4">
<div className="max-w-4xl mx-auto space-y-4">
{messages.filter(msg => msg.role !== 'system').map((message, index) => (
<div
key={index}
className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
>
<div
className={`max-w-[80%] rounded-lg px-4 py-2 ${
message.role === 'user'
? 'bg-blue-500 text-white'
: 'bg-white border border-gray-200'
}`}
>
<div className="whitespace-pre-wrap">{message.content}</div>
</div>
</div>
))}
{isLoading && (
<div className="flex justify-start">
<div className="bg-white border border-gray-200 rounded-lg px-4 py-2">
<div className="flex space-x-2">
<div className="w-2 h-2 bg-gray-300 rounded-full animate-bounce"></div>
<div className="w-2 h-2 bg-gray-300 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
<div className="w-2 h-2 bg-gray-300 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
</div>
</div>
</div>
)}
<div ref={messagesEndRef} />
</div>
</div>

<div className="border-t border-gray-200 p-4">
<form onSubmit={handleSubmit} className="max-w-4xl mx-auto">
<div className="flex space-x-2">
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Введите ваше сообщение..."
className="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
disabled={isLoading}
/>
<button
type="submit"
disabled={isLoading}
className="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 disabled:opacity-50"
>
Отправить
</button>
</div>
</form>
</div>
</div>
);
}