🚧 MateChat React 文档仍在开发中
MateChat React
  • 简体中文

      • Bubble 气泡

      Bubble 组件用于承载对话内容的气泡组件，支持透明背景、自定义加载动画和 Markdown 渲染。

      安装

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

      代码演示

      你好，有什么我可以帮助你的吗

      我很好，谢谢关心！

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

export default function () {
  return (
    <div className="flex flex-col w-full gap-4">
      <Bubble text="你好，有什么我可以帮助你的吗" />
      <Bubble text="我很好，谢谢关心！" align="right" />
    </div>
  );
}

      尺寸变体

      超小尺寸

      小尺寸

      默认尺寸

      中等尺寸

      大尺寸

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

export default function () {
  return (
    <div className="flex flex-col w-full gap-4">
      <Bubble text="超小尺寸" size="xs" />
      <Bubble text="小尺寸" size="sm" />
      <Bubble text="默认尺寸" size="default" />
      <Bubble text="中等尺寸" size="md" />
      <Bubble text="大尺寸" size="lg" />
    </div>
  );
}

      加载状态

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

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

      参数

      Bubble

      属性说明类型默认值

      Avatar

      属性说明类型默认值

      BubbleList

      属性说明类型默认值