Typing Indicator

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import "@/components/ui/whatsapp/styles/whatsapp.css";
6 
7interface TypingIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
8  sender?: string;
9  senderColor?: string;
10}
11 
12const TypingIndicator = React.forwardRef<HTMLDivElement, TypingIndicatorProps>(
13  ({ className, sender, senderColor, ...props }, ref) => {
14    return (
15      <div
16        className={cn("flex w-full justify-start", className)}
17        {...props}
18        ref={ref}
19      >
20        <div className="relative max-w-[var(--wa-msg-max-width)] rounded-lg rounded-bl-[3px] bg-wa-bubble-incoming px-[12px] pb-[10px] pt-[8px]">
21          {/* Tail */}
22          <svg
23            viewBox="0 0 8 13"
24            width="8"
25            height="13"
26            className="absolute bottom-0 -left-[8px]"
27          >
28            <path
29              d="M1.533 10.432L8 1.807V13H2.812C1.042 13 .474 11.844 1.533 10.432z"
30              className="fill-wa-bubble-incoming"
31            />
32          </svg>
33 
34          {sender && (
35            <p
36              className="font-wa mb-1 text-[12.8px] font-medium leading-[22px]"
37              style={{ color: senderColor ?? "var(--wa-emerald-500)" }}
38            >
39              {sender}
40            </p>
41          )}
42 
43          <div className="flex items-center gap-[4px] py-[2px]">
44            {[0, 1, 2].map((i) => (
45              <span
46                key={i}
47                className="animate-wa-typing-bounce block h-[8px] w-[8px] rounded-full bg-wa-text-secondary"
48                style={{ animationDelay: `${i * 0.2}s` }}
49              />
50            ))}
51          </div>
52 
53        </div>
54      </div>
55    );
56  }
57);
58TypingIndicator.displayName = "TypingIndicator";
59 
60export { TypingIndicator, type TypingIndicatorProps };