Algolia

What's New?

Getting Started

Foundations

Accessibility

Layout

CSS Utilities

Bubble Chat

Introduction

The component is used to represent the real-time and archived messages of three main objects: users, experts and system.

Message background
Message content
Avatar
Time stamp

Examples

Text Message

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    text="Welcome to Aha Design System"
    time="16:23"
  />
  <BubbleChat
    text="This is an example for multiple lines or paragraph"
    time="16:24"
  />
</div>

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    text="Welcome to Aha Design System"
    time="16:23"
  />
  <BubbleChat
    text="This is an example for multiple lines or paragraph"
    time="16:24"
  />
</div>

File Message

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    time="14:00"
  >
    <FileAttachment
      fileType="spreadsheet"
      fileName="DS-File-name-here-11-12-2019-crazy-designer.xlsx"
      closeButton={false}
      actionRight={() => <SafeAnchor className="hover:u-textDecorationNone u-block">Download</SafeAnchor>}
    />
  </BubbleChat>
  <BubbleChat
    time="14:00"
  >
    <FileAttachment
      fileType="image"
      fileName="DS-File-name-here-11-12-2019-crazy-designer.png"
      closeButton={false}
      actionLeft={() => <SafeAnchor className="hover:u-textDecorationNone u-block">Preview</SafeAnchor>}
      actionRight={() => <SafeAnchor className="hover:u-textDecorationNone u-block">Download</SafeAnchor>}
    />
  </BubbleChat>
</div>

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    time="14:00"
  >
    <FileAttachment
      fileType="spreadsheet"
      fileName="DS-File-name-here-11-12-2019-crazy-designer.xlsx"
      closeButton={false}
      actionRight={() => <SafeAnchor className="hover:u-textDecorationNone u-block">Download</SafeAnchor>}
    />
  </BubbleChat>
  <BubbleChat
    time="14:00"
  >
    <FileAttachment
      fileType="image"
      fileName="DS-File-name-here-11-12-2019-crazy-designer.png"
      closeButton={false}
      actionLeft={() => <SafeAnchor className="hover:u-textDecorationNone u-block">Preview</SafeAnchor>}
      actionRight={() => <SafeAnchor className="hover:u-textDecorationNone u-block">Download</SafeAnchor>}
    />
  </BubbleChat>
</div>

Image Message

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    type="outbound"
    avatar={(() => <Avatar size="small" className="u-backgroundPrimaryLighter u-textPrimary u-text100" text="KT" />)}
    className="u-marginBottomNone"
  >
    <BubbleChat.Image
      src="holder.js/250px120?text=Image"
    />
  </BubbleChat>
  <BubbleChat
    type="outbound"
    avatar={(() => <Avatar size="small" className="u-backgroundPrimaryLighter u-textPrimary u-text100" text="KT" />)}
    text="This is an example for image"
    time="16:20"
  />
  <BubbleChat
    className="u-marginBottomNone"
  >
    <BubbleChat.Image
      src="holder.js/250px120?text=Image"
    />

  </BubbleChat>
  <BubbleChat
    text="This is an example for image"
    time="16:24"
  />
</div>

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    type="outbound"
    avatar={(() => <Avatar size="small" className="u-backgroundPrimaryLighter u-textPrimary u-text100" text="KT" />)}
    className="u-marginBottomNone"
  >
    <BubbleChat.Image
      src="holder.js/250px120?text=Image"
    />
  </BubbleChat>
  <BubbleChat
    type="outbound"
    avatar={(() => <Avatar size="small" className="u-backgroundPrimaryLighter u-textPrimary u-text100" text="KT" />)}
    text="This is an example for image"
    time="16:20"
  />
  <BubbleChat
    className="u-marginBottomNone"
  >
    <BubbleChat.Image
      src="holder.js/250px120?text=Image"
    />

  </BubbleChat>
  <BubbleChat
    text="This is an example for image"
    time="16:24"
  />
</div>

Typing Message

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    isTyping
    type="outbound"
    avatar={(() => <Avatar size="small" className="u-backgroundPrimaryLighter u-textPrimary u-text100" text="KT" />)}
  />
</div>

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    isTyping
    type="outbound"
    avatar={(() => <Avatar size="small" className="u-backgroundPrimaryLighter u-textPrimary u-text100" text="KT" />)}
  />
</div>

Outbound Message

Normally this style is applied for users. Outbound messages use the system’s primary color and right-aligned.

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    text="Welcome to Aha Design System"
    time="16:23"
  />
</div>

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    text="Welcome to Aha Design System"
    time="16:23"
  />
</div>

Inbound Message

Normally this style is applied for experts. Inbound messages use the system’s secondary color, left-aligned and have an avatar on the left.

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    text="Hi there!"
    type="outbound"
    avatar={(() => <Avatar size="small" className="u-backgroundPrimaryLighter u-textPrimary u-text100" text="KT" />)}
    time="16:24"
  />
</div>

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    text="Hi there!"
    type="outbound"
    avatar={(() => <Avatar size="small" className="u-backgroundPrimaryLighter u-textPrimary u-text100" text="KT" />)}
    time="16:24"
  />
</div>

System Message

System messages use the system’s primary-light color, left-aligned and have products’ avatars on the left.

() => {
  const [option, setOption] = useState(1);
  return (

    <div style={{ maxWidth: 360 }}>
      <BubbleChat
        text="This is a System message with Options."
        avatar={(() => <Avatar size="small" className="u-backgroundPrimary u-textWhite u-text100" text="EC" />)}
        type="system"
        time="16:30"
        currentOption={option}
        onSelectOption={setOption}
        options={[
          {
            name: 'Option 1',
            id: 1,
          },
          {
            name: 'Option 2',
            id: 2,
          },
        ]}
      />
      <BubbleChat
        text="This is a System message with Options."
        avatar={(() => <Avatar size="small" className="u-backgroundPrimary u-textWhite u-text100" text="EC" />)}
        type="system"
        time="16:30"
        disabledOption
        currentOption={1}
        options={[
          {
            name: 'Option 1',
            id: 1,
          },
          {
            name: 'Option 2',
            id: 2,
          },
        ]}
      />
      <BubbleChat
        text="This is a System message with Options."
        avatar={(() => <Avatar size="small" className="u-backgroundPrimary u-textWhite u-text100" text="EC" />)}
        type="system"
        time="16:30"
        disabledOption
        currentOption={null}
        options={[
          {
            name: 'Option 1',
            id: 1,
          },
          {
            name: 'Option 2',
            id: 2,
          },
        ]}
      />
    </div>
  );
};

() => {
  const [option, setOption] = useState(1);
  return (

    <div style={{ maxWidth: 360 }}>
      <BubbleChat
        text="This is a System message with Options."
        avatar={(() => <Avatar size="small" className="u-backgroundPrimary u-textWhite u-text100" text="EC" />)}
        type="system"
        time="16:30"
        currentOption={option}
        onSelectOption={setOption}
        options={[
          {
            name: 'Option 1',
            id: 1,
          },
          {
            name: 'Option 2',
            id: 2,
          },
        ]}
      />
      <BubbleChat
        text="This is a System message with Options."
        avatar={(() => <Avatar size="small" className="u-backgroundPrimary u-textWhite u-text100" text="EC" />)}
        type="system"
        time="16:30"
        disabledOption
        currentOption={1}
        options={[
          {
            name: 'Option 1',
            id: 1,
          },
          {
            name: 'Option 2',
            id: 2,
          },
        ]}
      />
      <BubbleChat
        text="This is a System message with Options."
        avatar={(() => <Avatar size="small" className="u-backgroundPrimary u-textWhite u-text100" text="EC" />)}
        type="system"
        time="16:30"
        disabledOption
        currentOption={null}
        options={[
          {
            name: 'Option 1',
            id: 1,
          },
          {
            name: 'Option 2',
            id: 2,
          },
        ]}
      />
    </div>
  );
};

Variants

Light

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    variant="light"
    type="outbound"
    avatar={(() => <Avatar size="small" className="u-backgroundPrimaryLighter u-textPrimary u-text100" text="KT" />)}
    text="Welcome to Aha Design System"
    time="16:23"
  />
</div>

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    variant="light"
    type="outbound"
    avatar={(() => <Avatar size="small" className="u-backgroundPrimaryLighter u-textPrimary u-text100" text="KT" />)}
    text="Welcome to Aha Design System"
    time="16:23"
  />
</div>

Primary

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    variant="primary"
    type="outbound"
    avatar={(() => <Avatar size="small" className="u-backgroundPrimaryLighter u-textPrimary u-text100" text="KT" />)}
    text="Welcome to Aha Design System"
    time="16:23"
  />
</div>

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    variant="primary"
    type="outbound"
    avatar={(() => <Avatar size="small" className="u-backgroundPrimaryLighter u-textPrimary u-text100" text="KT" />)}
    text="Welcome to Aha Design System"
    time="16:23"
  />
</div>

PrimaryLight

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    variant="primaryLight"
    type="outbound"
    avatar={(() => <Avatar size="small" className="u-backgroundPrimaryLighter u-textPrimary u-text100" text="KT" />)}
    text="Welcome to Aha Design System"
    time="16:23"
  />
</div>

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    variant="primaryLight"
    type="outbound"
    avatar={(() => <Avatar size="small" className="u-backgroundPrimaryLighter u-textPrimary u-text100" text="KT" />)}
    text="Welcome to Aha Design System"
    time="16:23"
  />
</div>

Dark

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    variant="dark"
    type="outbound"
    avatar={(() => <Avatar size="small" className="u-backgroundPrimaryLighter u-textPrimary u-text100" text="KT" />)}
    text="Welcome to Aha Design System"
    time="16:23"
  />
</div>

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    variant="dark"
    type="outbound"
    avatar={(() => <Avatar size="small" className="u-backgroundPrimaryLighter u-textPrimary u-text100" text="KT" />)}
    text="Welcome to Aha Design System"
    time="16:23"
  />
</div>

TransparentDark

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    variant="transparentDark"
    type="outbound"
    avatar={(() => <Avatar size="small" className="u-backgroundPrimaryLighter u-textPrimary u-text100" text="KT" />)}
    text="Welcome to Aha Design System"
    time="16:23"
  />
</div>

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    variant="transparentDark"
    type="outbound"
    avatar={(() => <Avatar size="small" className="u-backgroundPrimaryLighter u-textPrimary u-text100" text="KT" />)}
    text="Welcome to Aha Design System"
    time="16:23"
  />
</div>

TransparentLight

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    variant="transparentLight"
    type="outbound"
    avatar={(() => <Avatar size="small" className="u-backgroundPrimaryLighter u-textPrimary u-text100" text="KT" />)}
    text="Welcome to Aha Design System"
    time="16:23"
  />
</div>

<div style={{ maxWidth: 360 }}>
  <BubbleChat
    variant="transparentLight"
    type="outbound"
    avatar={(() => <Avatar size="small" className="u-backgroundPrimaryLighter u-textPrimary u-text100" text="KT" />)}
    text="Welcome to Aha Design System"
    time="16:23"
  />
</div>

Design Reference

N/A

API

BubbleChat

import { BubbleChat } from '@ahaui/react'Copy import code for the BubbleChat component

Name	Type	Default	Description
isTyping	boolean	`false`	The typing message
text	any		The text message
type	`'inbound'` \| `'outbound'` \| `'system'`	`'inbound'`	The BubbleChat visual type
variant	`'light'` \| `'primary'` \| `'primaryLight'` \| `'dark'` \| `'transparentDark'` \| `'transparentLight'`		The BubbleChat visual style
avatar	string \| function		The avatar to display. The name can get from Component `Avatar` or custom it by your sefl
time	any		The time of a text message
options	arrayOf		The list option using with type `system`
currentOption	string \| number		Defines the current active option
onSelectOption	function		Callback fired when the current active option changes.
disabledOption	boolean		Disables the list of options
onClickText	function		Callback fired when click to the text content
textClassName	string \| arrayOf
actionBar	any		Render actionBar after text content
actionBarClassName	string \| arrayOf

Bubble Chat

Introduction#

Examples#

Text Message#

File Message#

Image Message#

Typing Message#

Outbound Message#

Inbound Message#

System Message#

Variants#

Design Reference#

API#

BubbleChat#