🚧 MateChat React document is still under development
MateChat React
  • English

      • 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