import { ChatBubble, ChatList, BubbleAttachmentType } from "@zuzjs/ui"
            

                
                <ChatBubble text="Hello! How can I help?" side="you" />
            

                
                <ChatBubble text="Hello! How can I help?" side="you" />
            

                
                <ChatBubble text="iPhone style" side="me" stylePreset="ios" />
            

                
                <ChatBubble text="Android style" side="you" stylePreset="android" />
            

                
                <ChatBubble text="Block style" side="me" stylePreset="blocks" />
            

                
                <ChatBubble text="Glass style" side="you" stylePreset="glass" />
            

                
                <ChatBubble text="Minimal style" side="you" stylePreset="minimal" />
            

                
                <ChatBubble
            

                
                    side="me"
            

                
                    text="Please check these files"
            

                
                    attachments={[
            

                
                        {
            

                
                            type: BubbleAttachmentType.File,
            

                
                            name: "Invoice-Apr-2026.pdf",
            

                
                            size: "2.1 MB",
            

                
                            url: "/files/invoice.pdf"
            

                
                        },
            

                
                        {
            

                
                            type: BubbleAttachmentType.Image,
            

                
                            name: "Screenshot.png",
            

                
                            preview: "/images/shot.png",
            

                
                            url: "/images/shot.png"
            

                
                        }
            

                
                    ]}
            

                
                />
            

                
                <ChatList
            

                
                    messages={messages}
            

                
                    dateLabels={{
            

                
                        today: "Today",
            

                
                        yesterday: "Yesterday"
            

                
                    }}
            

                
                />
            

                
                 
            

                
                <ChatList
            

                
                    messages={messages}
            

                
                    locale="ur-PK"
            

                
                    dateLabels={{
            

                
                        today: "آج",
            

                
                        yesterday: "کل"
            

                
                    }}
            

                
                />
            

                
                <ChatList
            

                
                    messages={messages}
            

                
                    formatDateLabel={(ts, { dayDiff, date, labels, locale }) => {
            

                
                        if (dayDiff === 0) return labels.today;
            

                
                        if (dayDiff === 1) return labels.yesterday;
            

                
                        return new Intl.DateTimeFormat(locale || "en-US", {
            

                
                            weekday: "short",
            

                
                            month: "short",
            

                
                            day: "numeric",
            

                
                            year: "numeric"
            

                
                        }).format(date);
            

                
                    }}
            

                
                />