Chat bento card

1"use client";
2 
3import * as React from "react";
4import {
5  AnimatePresence,
6  motion,
7  stagger,
8  type HTMLMotionProps,
9} from "motion/react";
10import { CheckCheckIcon } from "lucide-react";
11 
12import { cn } from "@/lib/utils";
13import { Avatar, AvatarImage, AvatarFallback } from "./ui/avatar";
14 
15interface OutgoingMessageType {
16  type: "outgoing";
17  content: React.ReactNode;
18}
19 
20interface IncomingMessageType {
21  type: "incoming";
22  content: React.ReactNode;
23  from: string;
24  avatarProps: { src?: string | Blob; fallback: string };
25}
26 
27export type ChatMessageType = OutgoingMessageType | IncomingMessageType;
28 
29const MotionAvatar = motion.create(Avatar);
30 
31interface ChatBentoCardProps extends React.ComponentPropsWithoutRef<"div"> {
32  messages: ChatMessageType[];
33  staggerMessagesInSec?: number;
34  typingDurationInSec?: number;
35  initialMessagesCount?: number;
36  timestamp?: React.ReactNode;
37  viewOptions?: IntersectionObserverInit;
38  startChatOn?: "hover" | "view";
39}
40 
41const POP_LAYOUT_SYNC_DURATION = 0.2;
42 
43export function ChatBentoCard({
44  messages,
45  className,
46  startChatOn = "view",
47  initialMessagesCount = 1,
48  staggerMessagesInSec = 2,
49  typingDurationInSec = 0.75,
50  timestamp = "Today",
51  onMouseEnter,
52  onMouseLeave,
53  viewOptions = { threshold: 1 },
54  ...rest
55}: ChatBentoCardProps) {
56  const id = React.useId();
57 
58  const [totalMessagesAnimated, setTotalMessagesAnimated] = React.useState(0);
59  const [typing, setTyping] = React.useState(true);
60  const intervalRef = React.useRef<NodeJS.Timeout>(undefined);
61 
62  const chatContainerRef = React.useRef<HTMLDivElement>(null);
63  const upcomingMessage = React.useRef<number>(initialMessagesCount);
64 
65  const startAnimation = React.useCallback(() => {
66    const advanceMessage = () => {
67      if (messages[upcomingMessage.current]) {
68        setTotalMessagesAnimated((prev) => prev + 1);
69        upcomingMessage.current += 1;
70        setTyping(true);
71      } else {
72        clearInterval(intervalRef.current);
73      }
74    };
75    advanceMessage();
76    intervalRef.current = setInterval(
77      advanceMessage,
78      staggerMessagesInSec * 1000,
79    );
80  }, [messages, staggerMessagesInSec]);
81 
82  const resetAnimation = () => {
83    setTotalMessagesAnimated(0);
84    setTyping(true);
85    upcomingMessage.current = 0;
86    clearInterval(intervalRef.current);
87  };
88 
89  React.useEffect(() => {
90    if (startChatOn !== "view") return;
91 
92    const observer = new IntersectionObserver(([entry]) => {
93      if (entry.isIntersecting) startAnimation();
94// … truncated