nyuchimzizi
Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.
Built by Nyuchi Africav4.0.39
Chat/messaging page composition. Conversation list or active chat with message input, media attachments, read receipts. Competitors: WhatsApp, Telegram, WeChat.
View the full component source code below.
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { useNyuchiHarness } from "@/lib/harness"
interface ChatPageProps { variant?: "list" | "conversation"; title?: string; subtitle?: string; showBack?: boolean; onBack?: () => void; inputArea?: React.ReactNode; children?: React.ReactNode; loading?: boolean; className?: string }
export function ChatPage({ variant = "list", title, subtitle, showBack, onBack, inputArea, children, loading = false, className }: ChatPageProps) {
const { log, motion, LiveRegion } = useNyuchiHarness("chat-page")
const animStyle = React.useMemo(() => motion.prefersReduced ? {} : { animation: `nyuchi-fade-slide-up ${motion.enterDuration}ms ${motion.enterEasing} both` }, [motion])
if (loading) return <main data-slot="chat-page" data-portal="https://design.nyuchi.com/components/chat-page" data-loading role="main" className="flex flex-col h-full animate-pulse"><div className="h-14 bg-muted" /><div className="flex-1 p-4 space-y-3">{[1,2,3].map(i=><div key={i} className="h-16 rounded-[var(--radius-lg,14px)] bg-muted" />)}</div></main>
return (
<main data-slot="chat-page" data-variant={variant} role="main" aria-label={title || "Messages"} style={animStyle} className={cn("flex flex-col h-full", className)}>
{(title || showBack) && (
<header className="flex items-center gap-3 border-b border-border px-4 py-3">
{showBack && <button onClick={onBack} aria-label="Back" className="min-h-[48px] min-w-[48px] flex items-center justify-center rounded-full transition-colors hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary,#00B0FF)]"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 12H5M12 19l-7-7 7-7" /></svg></button>}
<div className="flex-1 min-w-0"><p className="font-semibold truncate">{title}</p>{subtitle && <p className="text-xs text-muted-foreground truncate">{subtitle}</p>}</div>
</header>
)}
<div className="flex-1 overflow-y-auto p-4">{children}</div>
{variant === "conversation" && inputArea && <footer className="border-t border-border p-3">{inputArea}</footer>}
</main>
)
}
export type { ChatPageProps }npx shadcn@latest add https://mzizi.dev/api/v1/ui/chat-pageFetch this component's metadata and source code from the registry API.
/api/v1/ui/chat-page