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:T4cd4,'use client' import { cn } from '@/lib/utils' import React, { useState, useEffect } from 'react' import { motion, AnimatePresence } from 'motion/react' interface Message { id: number sender: string avatar: string text: string side: 'left' | 'right' time: string reactions: string[] } const messages: Message[] = [ { id: 1, sender: 'Emily Chen', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop', text: 'Just integrated the new grid system. Incredible work!', side: 'left', time: '2:34 PM', reactions: ['👏', '🔥'], }, { id: 2, sender: 'Team Lab', avatar: 'TL', text: 'So glad you like it Emily! Let us know if you need any help.', side: 'right', time: '2:35 PM', reactions: ['❤️'], }, { id: 3, sender: 'Markus T.', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop', text: 'The documentation is actually readable for once. Thank you.', side: 'left', time: '2:37 PM', reactions: ['😄', '💯'], }, { id: 4, sender: 'Emily Chen', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop', text: 'Btw, the dark mode tokens are perfect.', side: 'left', time: '2:38 PM', reactions: ['✨'], }, { id: 5, sender: 'Sarah K.', avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop', text: 'Migration took 10 minutes. Best decision we made this quarter!', side: 'left', time: '2:40 PM', reactions: ['🚀', '💪'], }, ] const TypingIndicator = () => (

{[0, 1, 2].map((i) => ( ))}

) export const ChatTestimonials: React.FC = () => { const [visibleMessages, setVisibleMessages] = useState([]) const [showTyping, setShowTyping] = useState(false) const [activeReactions, setActiveReactions] = useState>(new Set()) useEffect(() => { const showMessages = async () => { for (let i = 0; i < messages.length; i++) { // Show typing indicator setShowTyping(true) await new Promise((resolve) => setTimeout(resolve, 800)) // Hide typing and show message setShowTyping(false) setVisibleMessages((prev) => [...prev, i]) // Wait before next message await new Promise((resolve) => setTimeout(resolve, 1200)) } } showMessages() }, []) const toggleReaction = (messageId: number) => { setActiveReactions((prev) => { const newSet = new Set(prev) if (newSet.has(messageId)) { newSet.delete(messageId) } else { newSet.add(messageId) } return newSet }) } return (

{/* Header */}

Live Support Conversations

See real-time interactions between our support team and customers. Experience the responsive, helpful communication that sets us apart.

{/* Two-column layout */}

{/* Left Content */}

Real Customer Experiences

Our support team is dedicated to providing exceptional assistance. Watch as customers share their genuine experiences and receive immediate, helpful responses.

Lightning Fast Response

Average response time under 2 minutes

24/7 Availability

Always here when you need us

Customer Satisfaction

98% positive feedback rate

{[ { label: 'Response Rate', value: '98%' }, { label: 'Avg. Rating', value: '4.9★' }, { label: 'Active Users', value: '2.4k' }, ].map((stat, idx) => (

{stat.value}

{stat.label}

))}

{/* Right - Chat Interface */}

{/* Chat Header */}

Support Chat

42 customers online

{[1, 2, 3].map((i) => (

))}

{/* Messages */}

{visibleMessages.map((index) => { const msg = messages[index] const showReactions = activeReactions.has(msg?.id || 0) return ( {/* Avatar */} {msg?.avatar.startsWith('http') ? (

) : ( {msg?.avatar} )} {/* Message Content */}

{/* Sender Name */} {msg?.sender} {/* Message Bubble */}

toggleReaction(msg?.id || 0)} > {msg?.text} {/* Reactions */} {showReactions && ( {msg?.reactions.map((reaction, idx) => ( {reaction} ))} )}

{/* Timestamp */} {msg?.time}

) })} {/* Typing Indicator */} {showTyping && (

)}

{/* Chat Footer */}

) } 53:T582,import type { Variants } from 'motion/react'; import { type HTMLMotionProps, motion, useInView } from 'motion/react'; import type React from 'react'; type TimelineContentProps = { children?: React.ReactNode; animationNum: number; className?: string; timelineRef: React.RefObject; as?: T; customVariants?: Variants; once?: boolean; } & HTMLMotionProps; export const TimelineAnimation = ({ children, animationNum, timelineRef, className, as, customVariants, once = true, ...props }: TimelineContentProps) => { const defaultSequenceVariants = { visible: (i: number) => ({ filter: 'blur(0px)', y: 0, opacity: 1, transition: { delay: i * 0.5, duration: 0.5, }, }), hidden: { filter: 'blur(20px)', y: 0, opacity: 0, }, }; const sequenceVariants = customVariants || defaultSequenceVariants; const isInView = useInView(timelineRef, { once, }); const MotionComponent = motion[as || 'div'] as React.ElementType; return ( {children} ); }; 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"}]]}]}]]}],["$","$L50",null,{"namespace":"@ui-layouts","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"../../packages/blocks/src/testimonial-section/chat-interface.tsx","content":"$52","type":"registry:block"},{"path":"./components/ui/timeline-animation.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]