import {
Message,
MessageContent,
MessageAvatar,
} from '@/components/ui/message';
export default function DemoOne() {
return (
<div className="flex flex-col gap-4 p-4">
{/* User Message */}
<Message from="user">
<MessageContent>
Hello! Can you tell me what the current time is in Yieldry?
</MessageContent>
<MessageAvatar
src="https://cdn.21st.dev/assets/mirror/51/513d06f542692036ff0bb17938f04b3efd60567ba2cae08049469d21f18e0524.jpg"
name="User"
/>
</Message>
{/* Assistant Message */}
<Message from="assistant">
<MessageContent>
Of course! As of our conversation, the current time in Yieldry, Urenso is approximately 12:18 PM.
</MessageContent>
<MessageAvatar
src="https://cdn.21st.dev/assets/mirror/75/750f6ec055e825533be5a5f62844312beeb7f41870eac9fa7d1e168f9f352246.png"
name="AI"
/>
</Message>
</div>
);
}Part of AI Elements — browse the full library on 21st.dev.