🚧 MateChat React document is still under development

Bubble

Bubble component is used to contain conversation content, supporting transparent background, custom loading animation, and Markdown rendering.

Installation

pnpm dlx shadcn@latest add https://matechat.noctisynth.org/r/bubble.json

Examples

Hello, how can I help you?

I'm doing great, thanks for asking!

import { Bubble } from "@matechat/react";

export default function () {
  return (
    <div className="flex flex-col w-full gap-4">
      <Bubble text="Hello, how can I help you?" />
      <Bubble text="I'm doing great, thanks for asking!" align="right" />
    </div>
  );
}

Size Variants

Extra small size

Small size

Default size

Medium size

Large size

import { Bubble } from "@matechat/react";

export default function () {
  return (
    <div className="flex flex-col w-full gap-4">
      <Bubble text="Extra small size" size="xs" />
      <Bubble text="Small size" size="sm" />
      <Bubble text="Default size" size="default" />
      <Bubble text="Medium size" size="md" />
      <Bubble text="Large size" size="lg" />
    </div>
  );
}

Pending State

import { Bubble } from "@matechat/react";

export default function () {
  return (
    <div className="flex flex-col w-full">
      <Bubble text="" isPending={true} />
    </div>
  );
}

Properties

Bubble

PropertyDescriptionTypeDefault Value

Avatar

PropertyDescriptionTypeDefault Value

BubbleList

PropertyDescriptionTypeDefault Value