Chat Bubble Notification

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
"use client";
 
import {
  forwardRef,
  useEffect,
  useState,
  type ComponentPropsWithoutRef,
} from "react";
 
import Image from "next/image";
 
import { cn } from "@/lib/cn";
import { X } from "lucide-react";
 
const EXIT_MS = 260;
 
export type ChatBubbleNotificationBannerProps = Readonly<
  {
    sender?: string;
    message?: string;
    time?: string;
    avatarSrc?: string;
    avatarAlt?: string;
    showTriggerLabel?: string;
    onDismiss?: () => void;
    onShow?: () => void;
  } & ComponentPropsWithoutRef<"output">
>;
 
// Chat bubble alert — sender label above a rounded message bubble.
export const ChatBubbleNotificationBanner = forwardRef<
  HTMLOutputElement,
  ChatBubbleNotificationBannerProps
>(
  (
    {
      className,
      sender = "Maya",
      message = "Running 5 min late — start without me if you need to",
      time = "just now",
      avatarSrc = "/woman.png",
      avatarAlt = "Maya",
      showTriggerLabel = "Show chat alert",
      onDismiss,
      onShow,
      ...props
    },
    ref,
  ) => {
    const [phase, setPhase] = useState<"open" | "closing" | "closed">("open");
 
    useEffect(() => {
      if (phase !== "closing") return;
      const timer = globalThis.setTimeout(() => setPhase("closed"), EXIT_MS);
      return () => globalThis.clearTimeout(timer);
    }, [phase]);
 
    const handleDismiss = () => {
      if (phase !== "open") return;
      setPhase("closing");
      onDismiss?.();
    };
 
    const handleShow = () => {
      setPhase("open");
      onShow?.();
    };
 
    if (phase === "closed") {
      return (
        <button
          type="button"
          onClick={handleShow}
          className={cn(
            "cursor-pointer rounded-full bg-neutral-100 px-4 py-2 text-xs font-medium text-neutral-700",
            "opacity-100 starting:opacity-0 transition-opacity duration-200 hover:bg-neutral-200",
            className,
          )}
        >
          {showTriggerLabel}
        </button>
      );
    }
 
    return (
      <output
        ref={ref}
        data-slot="chat-bubble-notification-banner"
        data-phase={phase}
        className={cn(
          "relative block w-72 font-sans",
          "translate-y-0 opacity-100 starting:translate-y-2 starting:opacity-0",
          "transition-all duration-300 ease-out",
          "data-[phase=closing]:translate-y-1.5 data-[phase=closing]:opacity-0",
          className,
        )}
        {...props}
      >
        <button
          type="button"
          onClick={handleDismiss}
          aria-label="Dismiss"
          className="absolute -top-1 -right-1 z-10 flex size-6 cursor-pointer items-center justify-center rounded-full bg-white text-neutral-400 shadow-sm transition-colors hover:text-neutral-600"
        >
          <X size={10} strokeWidth={2} />
        </button>
 
        <div className="flex items-end gap-2">
          <div className="relative size-7 shrink-0 overflow-hidden rounded-full bg-neutral-200">
            <Image
              src={avatarSrc}
              alt={avatarAlt}
              fill
              sizes="28px"
              className="object-cover"
            />
          </div>
 
          <div className="min-w-0 flex-1">
            <p className="mb-1 px-1 text-[11px] font-medium text-neutral-600">
              {sender}
            </p>
            <p className="rounded-2xl rounded-bl-md bg-neutral-100 px-3.5 py-2.5 text-[12px] leading-relaxed text-neutral-800">
              {message}
            </p>
            <p className="mt-1 px-1 text-right text-[10px] text-neutral-400">
              {time}
            </p>
          </div>
        </div>
      </output>
    );
  },
);
 
ChatBubbleNotificationBanner.displayName = "ChatBubbleNotificationBanner";