50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T29a2,"use client"; import { useCallback, useEffect, useRef, useState, } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Send, RotateCcw, Sparkles } from "lucide-react"; import { cn } from "@/lib/utils"; export interface ChatMessage { id: string; sender: "user" | "assistant"; content: string; timestamp?: string; } export interface ChatMessagesProps { messages?: ChatMessage[]; autoPlay?: boolean; autoPlayDelay?: number; typingDuration?: number; showReplay?: boolean; interactive?: boolean; className?: string; } const DEFAULT_MESSAGES: ChatMessage[] = [ { id: "1", sender: "assistant", content: "Hello! I'm your Nexus AI assistant. How can I help you build something amazing today?" }, { id: "2", sender: "user", content: "I want to create a beautiful landing page for my SaaS product." }, { id: "3", sender: "assistant", content: "Great choice! Nexus UI has everything you need — animated components, premium styling, and easy integration. What feature would you like to showcase first?" }, { id: "4", sender: "user", content: "I need something that will impress investors during pitch meetings." }, { id: "5", sender: "assistant", content: "Perfect. I'd recommend our Hero Aurora Spotlight combined with the Cinematic Logo Cloud. They create a stunning first impression that showcases both innovation and credibility." }, { id: "6", sender: "user", content: "Can I see how they look together?" }, { id: "7", sender: "assistant", content: "Absolutely. Click any component in the sidebar to preview it live, then copy the code directly into your project. No complex setup required." }, ]; function TypingIndicator({ className }: { className?: string }) { return ( {[0, 1, 2].map((i) => ( ))} ); } function MessageBubble({ message, isLast, }: { message: ChatMessage; isLast?: boolean; }) { const isUser = message.sender === "user"; return (

{!isUser && (

)} {message.content}

); } export function ChatMessages({ messages = DEFAULT_MESSAGES, autoPlay = true, autoPlayDelay = 1800, typingDuration = 1400, showReplay = true, interactive = false, className, }: ChatMessagesProps) { const [visibleCount, setVisibleCount] = useState(autoPlay ? 0 : messages.length); const [isTyping, setIsTyping] = useState(false); const [inputValue, setInputValue] = useState(""); const [chatMessages, setChatMessages] = useState(messages); const scrollRef = useRef(null); const isAutoPlaying = useRef(false); const scrollToBottom = useCallback(() => { if (scrollRef.current) { scrollRef.current.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth", }); } }, []); const revealNext = useCallback( async (index: number) => { if (index >= chatMessages.length) { isAutoPlaying.current = false; return; } const message = chatMessages[index]; if (message.sender === "assistant") { setIsTyping(true); await new Promise((r) => setTimeout(r, typingDuration)); setIsTyping(false); } setVisibleCount(index + 1); await new Promise((r) => setTimeout(r, 100)); scrollToBottom(); await new Promise((r) => setTimeout(r, autoPlayDelay - (message.sender === "assistant" ? typingDuration : 0) - 100)); if (isAutoPlaying.current) { revealNext(index + 1); } }, [chatMessages, autoPlayDelay, typingDuration, scrollToBottom], ); const startAutoPlay = useCallback(() => { if (autoPlay && visibleCount === 0) { isAutoPlaying.current = true; revealNext(0); } }, [autoPlay, visibleCount, revealNext]); const replay = useCallback(() => { setVisibleCount(0); setChatMessages(messages); isAutoPlaying.current = true; setTimeout(() => revealNext(0), 100); }, [messages, revealNext]); useEffect(() => { setChatMessages(messages); if (autoPlay) { setVisibleCount(0); isAutoPlaying.current = true; const timer = setTimeout(() => revealNext(0), 500); return () => { clearTimeout(timer); isAutoPlaying.current = false; }; } else { setVisibleCount(messages.length); } }, [messages, autoPlay, revealNext]); useEffect(() => { scrollToBottom(); }, [visibleCount, isTyping, scrollToBottom]); const handleSend = useCallback(() => { if (!inputValue.trim() || !interactive) return; const newMessage: ChatMessage = { id: `user-${Date.now()}`, sender: "user", content: inputValue.trim(), }; setChatMessages((prev) => [...prev, newMessage]); setInputValue(""); setVisibleCount((prev) => prev + 1); setTimeout(() => { const assistantReply: ChatMessage = { id: `assistant-${Date.now()}`, sender: "assistant", content: "That's a great question! Let me help you explore the best options for your use case.", }; setChatMessages((prev) => [...prev, assistantReply]); setVisibleCount((prev) => prev + 1); }, typingDuration + 500); }, [inputValue, interactive, typingDuration]); const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSend(); } }; return (

{/* Header */}

Nexus AI

Always here to help

{showReplay && ( Replay )}

{/* Messages */}

{chatMessages.slice(0, visibleCount).map((message, i) => ( ))} {isTyping && }

{/* Input */}

setInputValue(e.target.value)} onKeyDown={handleKeyDown} disabled={!interactive} placeholder={interactive ? "Ask Nexus AI..." : "Demo mode - replay to watch again"} aria-label={interactive ? "Type your message" : "Chat input (demo mode)"} className="flex-1 bg-transparent text-sm text-white outline-none placeholder:text-white/30 disabled:cursor-not-allowed" />

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react"}]]}]}]]}],["$","$L50",null,{"namespace":"@nexus-labs","registryDependencies":["https://www.nexus-ui.com/api/registry/nexus-font","utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"next-ui/chat-messages/chat-messages.tsx","content":"$52","type":"registry:component","target":"components/chat-messages/chat-messages.tsx"},{"path":"next-ui/chat-messages/index.ts","content":"export { ChatMessages } from \"./chat-messages\";\nexport type { ChatMessagesProps, ChatMessage } from \"./chat-messages\";\n","type":"registry:lib","target":"components/chat-messages/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]