```tsx import React, { useState, useEffect } from 'react'; import { ChatIcon, DatabaseIcon } from 'lucide-react'; // Example code to fetch data from your database const fetchChatData = async () => { try { const response = await fetch('/api/chat'); const data = await response.json(); return data; } catch (error) { console.error(error); return []; } }; // Example code to send a message to your database const sendMessage = async (message: string) => { try { const response = await fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ message }), }); const data = await response.json(); console.log(data); } catch (error) { console.error(error); } }; export default function App() { const [chatData, setChatData] = useState([]); const [inputValue, setInputValue] = useState(''); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); sendMessage(inputValue); setInputValue(''); }; useEffect(() => { const fetchData = async () => { const data = await fetchChatData(); setChatData(data); }; fetchData(); }, []); return (

IA Chat

{message.username}

{message.text}

); } interface ChatMessage { id: number; avatar: string; username: string; text: string; } ```