System Message Bubble

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import "@/components/ui/whatsapp/styles/whatsapp.css";
6 
7export interface SystemMessageBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
8  children: React.ReactNode;
9  timestamp?: string;
10  icon?: React.ReactNode;
11}
12 
13const SystemMessageBubble = React.forwardRef<HTMLDivElement, SystemMessageBubbleProps>(
14  ({ className, children, timestamp, icon, ...props }, ref) => {
15    return (
16      <div
17        ref={ref}
18        className={cn("font-wa flex items-center justify-center py-[6px]", className)}
19        {...props}
20      >
21        <div className="inline-flex max-w-[70%] items-center gap-[5px] rounded-[7.5px] bg-wa-bg px-3 py-[5px] shadow-sm">
22          {icon && (
23            <span className="shrink-0 text-wa-system-msg">{icon}</span>
24          )}
25          <span className="text-center text-[12.5px] leading-[18px] text-wa-system-msg">
26            {children}
27          </span>
28          {timestamp && (
29            <span className="ml-1 shrink-0 text-[11px] text-wa-text-secondary">{timestamp}</span>
30          )}
31        </div>
32      </div>
33    );
34  }
35);
36SystemMessageBubble.displayName = "SystemMessageBubble";
37 
38export { SystemMessageBubble };