Bubble

1import type { UIMessage } from "ai";
2import { cva, type VariantProps } from "class-variance-authority";
3import clsx from "clsx";
4import type React from "react";
5import { memo, useCallback, useEffect, useRef } from "react";
6import Markdown from "react-markdown";
7import remarkGfm from "remark-gfm";
8import remarkMath from "remark-math";
9import { twMerge } from "tailwind-merge";
10import { BlockQuote, CodeBlock, Heading, Link } from "@/markdown";
11 
12const bubbleVariants = cva(
13  "flex flex-col gap-1 justify-center rounded-lg dark:text-gray-200 text-gray-800 max-w-full whitespace-pre-wrap wrap-break-word",
14  {
15    variants: {
16      size: {
17        default: "px-4 py-2",
18        lg: "px-6 py-3 text-lg",
19        md: "px-4 py-2 text-base",
20        sm: "px-3 py-1 text-sm",
21        xs: "px-2 py-1 text-xs",
22      },
23      align: {
24        left: "self-start",
25        center: "self-center",
26        right: "self-end",
27      },
28      background: {
29        transparent: "bg-transparent",
30        solid: "bg-gray-100 dark:bg-gray-800",
31      },
32    },
33    defaultVariants: {
34      size: "default",
35      align: "left",
36    },
37  },
38);
39 
40export interface BubbleProps
41  extends React.ComponentProps<"div">,
42    VariantProps<typeof bubbleVariants> {
43  text: string;
44  background?: "transparent" | "solid";
45  pending?: React.ReactNode;
46  isPending?: boolean;
47}
48 
49export function Bubble({
50  className,
51  text,
52  size,
53  align,
54  background = "solid",
55  pending,
56  isPending = false,
57  ...props
58}: BubbleProps) {
59  const defaultPending = (
60    <div className="flex items-center space-x-1 py-1">
61      <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" />
62      <div
63        className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
64        style={{ animationDelay: "0.1s" }}
65      />
66      <div
67        className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
68        style={{ animationDelay: "0.2s" }}
69      />
70    </div>
71  );
72 
73  return (
74    <div
75      data-slot="bubble"
76      className={twMerge(
77        clsx(
78          bubbleVariants({
79            className,
80            size,
81            align,
82            background,
83          }),
84          pending && "flex items-center",
85        ),
86      )}
87      {...props}
88    >
89      {isPending ? (
90        pending || defaultPending
91      ) : (
92        <Markdown
93          remarkPlugins={[remarkGfm, remarkMath]}
94          components={{
95            a: Link,
96            code: CodeBlock,
97            blockquote: BlockQuote,
98// … truncated