Components
The Ethereal AI chat is designed to offer a sleek, modern, and user-friendly interface optimized for low-light environments. With a dark background and contrasting accent colors, it reduces eye strain during prolonged use while enhancing readability. The interface typically features a clean layout with minimal distractions, allowing users to focus solely on the conversation. Elements like message bubbles, input fields, icons, and buttons are styled with subtle shadows, rounded corners, and smooth animations to provide a seamless and immersive experience. This dark mode UI not only improves aesthetics but also contributes to better battery efficiency on OLED screens, making it both visually appealing and practical for users interacting with AI-powered chat systems.
Loading preview...
import * as React from "react"
import { ChatInterface } from "@/components/ui/chat-interface-1"
function DemoDarkChatUI() {
return (
<div className="dark bg-background text-foreground p-4 min-h-screen">
<ChatInterface
title="Ethereal AI"
messages={[
{ type: "bot", text: "Hello! How can I assist you today?" },
{ type: "user", text: "Tell me a joke." },
{ type: "bot", text: "Why did the developer go broke? Because he used up all his cache!" },
]}
placeholder="Type your message..."
onSendMessage={(msg) => console.log("Sent:", msg)}
/>
</div>
)
}
export { DemoDarkChatUI }