I am attempting to create a ChatGPT replica using Next.js and Tailwind CSS. My focus is currently on the main chat screen, where each message is displayed using a separate Message component with its own styling. However, I am facing an issue where the styling for the Message component is not being applied at all despite trying various solutions.
chatpage.js
import Head from 'next/head';
import { ChatSidebar } from '@/components /ChatSidebar';
import { useState } from 'react';
import { streamReader } from 'openai-edge-stream';
import { v4 as uuid } from 'uuid';
import { Message } from '@/components /Message';
export default function Home() {
const [incomingMessage, setIncomingMessage] = useState('');
const [messageText, setMessageText] = useState('');
const [newChatMessages, setNewChatMessages] = useState([]);
const handleSubmit = async e => {
e.preventDefault();
setNewChatMessages(prev => {
const newChatMessages = [
...prev,
{
_id: uuid(),
role: 'user',
content: messageText,
},
];
return newChatMessages;
});
console.log(messageText);
const response = await fetch('/api/chat/sendMessage', {
method: 'POST',
headers: {
'content-type': 'application/json',
},
body: JSON.stringify({ message: messageText }),
});
const data = response.body;
if (!data) {
return;
}
const reader = data.getReader();
await streamReader(reader, async message => {
console.log('Message: ', message);
setIncomingMessage(s => `${s}${message.content}`);
});
};
return (
<>
<Head>
<title>New Chat</title>
</Head>
<div className="grid h-screen grid-cols-[260px_1fr]">
<ChatSidebar />
<div className="flex flex-col bg-gray-700">
<div className="flex-1 text-white">
{newChatMessages.map(message => (
<Message
key={message._id}
role={message.role}
content={message.content}
/>
))}
{!!incomingMessage && (
<Message role="assistant" content={incomingMessage} />
)}
</div>
<footer className="bg-gray-800 p-8">
<form onSubmit={handleSubmit}>
<fieldset className="flex gap-2">
<textarea
value={messageText}
onChange={e => setMessageText(e.target.value)}
placeholder="Send a message..."
className="w-full resize-none rounded-md bg-gray-700 px-5 py-1 text-white"
></textarea>
<button className="btn" type="submit">
Send
</button>
</fieldset>
</form>
</footer>
</div>
</div>
</>
);
}
message component js
import { useUser } from '@auth0/nextjs-auth0/client';
import Image from 'next/image';
export const Message = ({ role, content }) => {
const { user } = useUser();
return (
<div
className={`grid grid-cols-[30px_1fr] gap-5 p-5${
role === 'assistant' ? ' bg-gray-600' : ''
}`}
>
<div>
{role === 'user' && !!user && (
<Image
src={user.picture}
width={30}
height={30}
alt="User profile picture"
className="rounded-sm shadow-md shadow-black/50"
/>
)}
{role === 'assistant' && <div>avatar</div>}
</div>
<div>{content}</div>
</div>
);
};
I am determined to resolve the issue with the Message component's styling.