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:T87b,"use client"; import { useState } from "react"; import Chat, { type User } from "@/registry/components/chat-messages/chat"; import type { Message } from "@/registry/components/chat-messages/chat-message"; import IphoneFrame from "@/registry/components/chat-messages/iphone-frame"; export default function ChatMessagesDemo() { // Define users with their avatars const users: User[] = [ { name: "User1", avatar: "https://assets.solaceui.com/solaceui-member-five.png", // Replace with actual avatar URL }, { name: "User2", avatar: "https://assets.solaceui.com/solaceui-member-four.png", // Replace with actual avatar URL }, ]; const [messages] = useState([ { id: "m1", name: "User1", message: "Hey, why'd you call it Solace UI ?", }, { id: "m2", name: "User2", message: "Because it is meant to be chill and stress free.", }, { id: "m3", name: "User1", message: "So is it like a digital chill zone?", }, { id: "m4", name: "User2", message: "Exactly, simple and calm design.", }, ]); return (

{/* Clipping Wrapper */}

); } 53:Tbbf,"use client"; import { type FC, useRef, useEffect, useState, useLayoutEffect } from "react"; import { motion, AnimatePresence } from "motion/react"; import ChatMessage, { type Message } from "@/registry/components/chat-messages/chat-message"; export interface User { name: string; avatar: string; } interface ChatProps { messages: Message[]; currentUser: string; users: User[]; } const Chat: FC = ({ messages, currentUser, users }) => { const containerRef = useRef(null); const [visibleMessages, setVisibleMessages] = useState([]); useEffect(() => { if (messages.length === 0) return; setVisibleMessages([]); let cancelled = false; (async () => { for (const msg of messages) { if (cancelled) return; // guard before delay await new Promise((r) => setTimeout(r, 700)); if (cancelled) return; // guard after delay setVisibleMessages((prev) => [...prev, msg]); } })(); return () => { cancelled = true; }; }, [messages]); useLayoutEffect(() => { const el = containerRef.current; if (el) el.scrollTop = el.scrollHeight; }, [visibleMessages]); const getUserAvatar = (name: string) => users.find((u) => u.name === name)?.avatar ?? "/placeholder.svg?height=40&width=40"; return (

{visibleMessages.map((message) => ( ))} {visibleMessages.length > 0 && visibleMessages[visibleMessages.length - 1].name === currentUser && (

Delivered

)}

); }; export default Chat; 54:T8a6,"use client"; import { motion } from "motion/react"; import type { FC } from "react"; import Image from "next/image"; export interface Message { id: string; name: string; message: string; timestamp?: string; } interface ChatMessageProps { message: Message; isCurrentUser: boolean; avatar: string; } const ChatMessage: FC = ({ message, isCurrentUser, avatar, }) => { return ( {!isCurrentUser && (

)}

{message.message}

{message.timestamp && (

{message.timestamp}

)}

{isCurrentUser &&

} ); }; export default ChatMessage; 55:T8a5,// Component From Motion-Primitives "use client"; import { AnimatePresence, motion, useInView, UseInViewOptions, Variants, MotionProps, } from "motion/react"; import { useRef } from "react"; type MarginType = UseInViewOptions["margin"]; interface BlurFadeProps extends MotionProps { children: React.ReactNode; className?: string; variant?: { hidden: { y: number }; visible: { y: number }; }; duration?: number; delay?: number; offset?: number; direction?: "up" | "down" | "left" | "right"; inView?: boolean; inViewMargin?: MarginType; blur?: string; } export function BlurFade({ children, className, variant, duration = 0.4, delay = 0, offset = 6, direction = "down", inView = false, inViewMargin = "-50px", blur = "6px", ...props }: BlurFadeProps) { const ref = useRef(null); const inViewResult = useInView(ref, { once: true, margin: inViewMargin }); const isInView = !inView || inViewResult; const defaultVariants: Variants = { hidden: { [direction === "left" || direction === "right" ? "x" : "y"]: direction === "right" || direction === "down" ? -offset : offset, opacity: 0, filter: `blur(${blur})`, }, visible: { [direction === "left" || direction === "right" ? "x" : "y"]: 0, opacity: 1, filter: `blur(0px)`, }, }; const combinedVariants = variant || defaultVariants; return ( {children} ); } 56:Tc27,import type { FC, ReactNode } from "react"; import { WifiIcon as LuWifi, BatteryMediumIcon as LuBatteryMedium, SignalIcon as LuSignal, } from "lucide-react"; interface IphoneFrameProps { children: ReactNode; className?: string; } const IphoneFrame: FC = ({ children, className = "" }) => { // Get current time in format HH:MM const getCurrentTime = () => { const now = new Date(); const hours = now.getHours().toString().padStart(2, "0"); const minutes = now.getMinutes().toString().padStart(2, "0"); return `${hours}:${minutes}`; }; return ( // The main phone body

{/* Status Bar */}

{/* Left side - Time */}

{getCurrentTime()}

{/* Notch (center) */}

{/* Notch Details (Speaker/Camera) */}

{/* Right side - WiFi and Battery */}

{/* The screen area */}

{children}

{/* Side Buttons */} {/* Volume Up */}

{/* Volume Down */}

{/* Power/Side Button */}

); }; export default IphoneFrame; 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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/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":"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"}]]}]}]]}],["$","$L50",null,{"namespace":"@solaceui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/components/chat-messages/one/index.tsx","content":"$52","type":"registry:component","target":"components/chat-messages-1.tsx"},{"path":"src/registry/components/chat-messages/chat.tsx","content":"$53","type":"registry:component","target":"components/chat.tsx"},{"path":"src/registry/components/chat-messages/chat-message.tsx","content":"$54","type":"registry:component","target":"components/chat-message.tsx"},{"path":"src/registry/components/chat-messages/blur-fade.tsx","content":"$55","type":"registry:component","target":"components/blur-fade.tsx"},{"path":"src/registry/components/chat-messages/iphone-frame.tsx","content":"$56","type":"registry:component","target":"components/iphone-frame.tsx"}],"className":"h-[70svh] min-h-80"}]]}]