"use client"; import { useState, useEffect, useRef } from "react"; import { cn } from "@/lib/utils"; import Image from "next/image"; interface Message { avatar?: string; avatarBackground?: string; username: string; content: string; color?: string; duration: number; timestamp?: number; } interface Channel { name: string; description: string; } type Variations = "default" | "compact" | "expanded"; interface ChatPreviewProps { messages?: Message[]; channel?: Channel; maxMessages?: number; className?: string; gradientBackground?: boolean; variation?: Variations; removeShadow?: boolean; theme?: { background?: string; border?: string; textColor?: string; avatarSize?: string; }; } const defaultTheme = { background: "bg-background/50", border: "border border-foreground/10", textColor: "text-foreground/90", avatarSize: "w-7 h-7 sm:w-8 sm:h-8", }; export function ChatPreview({ messages = defaultMessages, channel = defaultChannel, maxMessages = 3, className, gradientBackground = true, variation = "default", removeShadow = false, theme = defaultTheme, }: ChatPreviewProps) { const [visibleMessages, setVisibleMessages] = useState([]); const containerRef = useRef(null); const currentIndexRef = useRef(0); const intervalRef = useRef(null); useEffect(() => { const addMessage = () => { const newMessage = { ...messages[currentIndexRef.current], timestamp: Date.now(), }; currentIndexRef.current = (currentIndexRef.current + 1) % messages.length; setVisibleMessages((prev) => [...prev, newMessage].slice(-maxMessages)); if (intervalRef.current) clearInterval(intervalRef.current); intervalRef.current = setInterval(addMessage, newMessage.duration); }; const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { currentIndexRef.current = 0; setVisibleMessages([]); addMessage(); } else { if (intervalRef.current) clearInterval(intervalRef.current); setVisibleMessages([]); } }, { threshold: 0.5 } ); if (containerRef.current) { observer.observe(containerRef.current); } return () => { observer.disconnect(); if (intervalRef.current) clearInterval(intervalRef.current); }; }, [messages, maxMessages]); return (

{gradientBackground && (

)}

#{channel.name} | {channel.description}

{visibleMessages.map((message) => (

{message.avatar && (

)}

{message.username} just now

{message.content}

))}

); } const defaultChannel: Channel = { name: "creative-writing", description: "Share your verses and artistic expressions.", }; const defaultMessages: Message[] = [ { avatarBackground: "bg-blue-500/30", username: "TechPoet", content: "In the realm of web, where Next.js shines bright,", color: "text-blue-400", duration: 3000, }, { avatarBackground: "bg-red-500/30", username: "ReactBard", content: "React components dance in the night,", color: "text-pink-400", duration: 2000, }, { avatarBackground: "bg-green-500/30", username: "CodeScribe", content: "With hooks and state, we build with care,", color: "text-green-400", duration: 3500, }, { avatarBackground: "bg-yellow-500/30", username: "WebVerse", content: "Server-side rendering, beyond compare!", color: "text-yellow-400", duration: 2000, }, { avatarBackground: "bg-purple-500/30", username: "DevRhymer", content: "Static pages load in a flash,", color: "text-purple-400", duration: 3500, }, { avatarBackground: "bg-indigo-500/30", username: "JSPoet", content: "While TypeScript keeps our code from crash,", color: "text-indigo-400", duration: 2000, }, { avatarBackground: "bg-red-500/30", username: "VerseWriter", content: "Next.js and React, a perfect pair,", color: "text-red-400", duration: 3500, }, { avatarBackground: "bg-teal-500/30", username: "ByteBard", content: "Creating apps with modern flair!", color: "text-teal-400", duration: 2500, }, ];