Blendvision Chatroom Web SDK

Getting Started

• Chatroom
• WordFilter
• Sticker

Chatroom

Setup with Chatroom Web SDK

Installation

npm install @blendvision/chatroom-web-sdk

or

yarn add @blendvision/chatroom-web-sdk

Import

import { Chatroom } from '@blendvision/chatroom-web-sdk';

Initialize

The chatroom token is the response of bv/chatroom/v1/chatrooms/{id}/tokens.

const App = () => {
  const BV_TOKEN = 'YOUR_BV_TOKEN';

  // use BV token to create a chatroom
  const { id } = createChatroom(BV_TOKEN).chatroom;

  // use BV token and chatroom ID to get chatroomToken
  const { token: chatroomToken } = createChatroomToken(BV_TOKEN, id);

  return (
    <YourContainer
      style={{
        width: '373px', // min-width of chatroom component
        height: '600px',
      }}
    >
      <Chatroom token={chatroomToken} />
    </YourContainer>
  );
};

Supported Parameters

Table of Contents

• Default Theme
• Time Format
• Language
• Collapse

Default Theme

Currently support dark and light, and the default theme mode is light.

The defaultTheme would be store in session storage. Therefore, the theme would not be updated if init the chatroom with the same browser window in another theme.

The property only set the default theme, the value could be change by all users.

| Params | Theme | | ------- | ------------------- | | light | Light (default) | | dark | Dark |

const App = () => {
  const defaultTheme = 'dark';

  return <Chatroom token={chatroomToken} defaultTheme={defaultTheme} />;
};

Time Format

You can customize the time format of messages with the following parameters.

| Params | Examples | Description | | --------- | ------------------ | ------------------------------------------ | | H:mm | 8:16, 23:20 | 0-23, 2 digits for the hour | | HH:mm | 08:16, 23:20 | 00-23, 2 digits for the hour (default) | | h:mm A | 8:16 AM, 11:20 PM | 0-23, AM/PM | | hh:mm A | 08:16 AM, 11:20 PM | 00-23, AM/PM | | h:mm a | 8:16 am, 11:20 pm | 0-23, am/pm | | hh:mm a | 08:16 am, 11:20 pm | 00-23, am/pm |

const App = () => {
  const timeFormat = 'hh:mm a';

  return <Chatroom token={chatroomToken} timeFormat={timeFormat} />;
};

Language

Currently support en, zh, and ja.

Since the emoji-mart doesn't support Traditional Chinese, English is used as an alternative for displaying emojis. (We open a PR for this)

| Params | Language | Description | | ------ | ------------------------------ | ------------------------------ | | en | English (default) | | zh | Mandarin (Traditional Chinese) | The emoji would be in English. | | ja | Japanese |

const App = () => {
  const locale = 'zh';

  return <Chatroom token={chatroomToken} locale={locale} />;
};

Collapse

Collapse and expand chatroom is available by the following interface. All the properties is optional.

collapse.in

A boolean that can control the chatroom collapse or expand.

| Params | Description | | ------- | --------------------------------- | | false | Expand the chatroom (default) | | true | Collapse the chatroom |

collapse.default

For setup default collapse or expand.

| Params | Description | | ------- | -------------------------------------------- | | false | Expand the chatroom by default (default) | | true | Collapse the chatroom by default |

collapse.collapseIcon.position

| Params | Description | | ----------- | ----------------------------------------------------------------- | | top-left | The collapse icon would be on the top-left corner (default) | | top-right | The collapse icon would be on the top-right corner |

import { OutlineExpand, OutlineCollapse } from '@sphere/web-ui';

const App = () => {
  const YOUR_EXPAND_ICON = OutlineExpand;
  const YOUR_COLLAPSE_ICON = OutlineCollapse;

  return (
    <Chatroom
      token={chatroomToken}
      collapse={{
        in: true,
        default: true,
        collapseIcon: {
          component: YOUR_COLLAPSE_ICON,
          position: 'top-right',
        },
        expandIcon: {
          component: YOUR_EXPAND_ICON,
        },
      }}
      onCollapse={() => console.log('collapse')}
      onExpand={() => console.log('expand')}
    />
  );
};

Word Filter

Setup With Word Filter SDK

Installation

npm install @blendvision/chatroom-web-sdk

or

yarn add @blendvision/chatroom-web-sdk

Import Word Filter SDK

import { WordFilterListTable, WordFilterDetailForm } from '@blendvision/chatroom-web-sdk';

Initialize

1. Call bv/chatroom/v1/dictionaries/tokens API to get word filter token.
2. Import WordFilterListTable and WordFilterDetailForm component for word filter list and detail UIs display.

const App = () => {
  const BV_TOKEN = 'YOUR_BV_TOKEN';

  // use BV token to get word filter token
  const { token: wordFilterToken } = createWordFilterToken(BV_TOKEN);

  return (
    <WordFilterListTable
      token={wordFilterToken}
      onRowClick={(_, id) => {
        // When you click one word filter, you can get id and do something...
        console.log('word filter detail id', id);
      }}
    />
  );
};

const App = () => {
  const BV_TOKEN = 'YOUR_BV_TOKEN';

  // Get id from `onRowClick function` of WordFilterListTable component
  const id = '1';

  // use BV token to get word filter token
  const { token: wordFilterToken } = createWordFilterToken(BV_TOKEN);

  return <WordFilterDetailFrom token={wordFilterToken} id={id} />;
};

Supported Parameters

Language

Currently support en, zh, and ja.

| Params | Language | Description | | ------ | ------------------------------ | ----------- | | en | English (default) | | | zh | Mandarin (Traditional Chinese) | | | ja | Japanese | |

const App = () => {
  const locale = 'zh';

  return (
    <>
      <WordFilterListTable token={wordFilterToken} locale={locale} />
      <WordFilterDetailForm token={wordFilterToken} id={wordFilterDetailId} locale={locale} />;
    </>
  );
};

Sticker

Setup With Sticker SDK

Installation

npm install @blendvision/chatroom-web-sdk

or

yarn add @blendvision/chatroom-web-sdk

Import Sticker SDK

import { StickerListTable, StickerDetailForm } from '@blendvision/chatroom-web-sdk';

Initialize

1. Call bv/chatroom/v1/stickerpacks/tokens API to get sticker token.
2. Import StickerListTable and StickerDetailForm component for sticker list and detail UIs display.

const App = () => {
  const BV_TOKEN = 'YOUR_BV_TOKEN';

  // use BV token to get sticker token
  const { token: stickerToken } = createStickerToken(BV_TOKEN);

  return (
    <StickerListTable
      token={stickerToken}
      onRowClick={(_, id) => {
        // When you click one sticker, you can get id and do something...
        console.log('sticker detail id', id);
      }}
    />
  );
};

const App = () => {
  const BV_TOKEN = 'YOUR_BV_TOKEN';

  // Get id from `onRowClick function` of stickerListTable component
  const id = '1';

  // use BV token to get sticker token
  const { token: stickerToken } = createStickerToken(BV_TOKEN);

  return <StickerDetailFrom token={stickerToken} id={id} />;
};

Supported Parameters

Language

Currently support en, zh, and ja.

| Params | Language | Description | | ------ | ------------------------------ | ----------- | | en | English (default) | | | zh | Mandarin (Traditional Chinese) | | | ja | Japanese | |

const App = () => {
  const locale = 'zh';

  return (
    <>
      <StickerListTable token={stickerToken} locale={locale} />
      <StickerDetailForm token={stickerToken} id={StickerDetailId} locale={locale} />;
    </>
  );
};