Symbl.ai React elements

The Symbl.ai React Elements are a set of UI components, which can be easily integrated into your front end application to use Symbl.ai conversation intelligence. The library provides UI elements and hooks to customize your own components.

Key Features

• Plug-n-play
• Full-featured UI components for both Offline and Real-time conversations
• Custom hooks to build your own components
• Full Typescript support

Getting Started

Throughout the documentation you'll find various references to these variable names, which you will have to replace with your own values:

Installation

npm i @symblai/react-elements

yarn add @symblai/react-elements

Components

The project is still in early development. New components will be added regularly over the coming months.

SymblProvider

The <SymblProvider/> component lets all the child components access the Symbl config inside it.

Normally, like any other Providers, <SymblProvider/> should be at the top level, with the component tree inside it.

Example

import { SymblProvider } from '@symblai/react-elements';

const symblConfig = {
  appId: 'APP_ID',
  appSecret: 'APP_SECRET',
};

function App({ children }) {
  return (
    <SymblProvider config={symblConfig}>
      {children}
    </SymblProvider>
  );
}

Props

Config

📘

One of appId/appSecret or accessToken is a required parameter.

Transcript

The <Transcripts/> can be used to directly add a Transcript component in your app without much configuration and only need a Conversation ID (conversationId) to enable it.

Example

import { Transcripts } from '@symblai/react-elements';

function App(props) {
  return (
    // ...
    <Transcripts
      conversationId={12345567}
      highlightPhrases={['action_phrase']}
      transcriptsWrapperClassName="testWrapperClass"
      transcriptRowClassName="testClassRow"
      transcriptRowHeaderClassName=""
      transcriptClassName=""
      avatarClassName="avatarClass"
    />
    // ...
  );
}

Props

📘

When a conversationId is passed the Transcripts data is retrieved from the Conversation API and is required if the messages prop is not passed.

📘

action_phrase is only available when you pass detectPhrases=true as a query parameter during submitting the request in Async and Websocket API. Link.

Highlight classes

Topics

The <Topics/> will render a list of topic pills ordered by a confidence score.

Example

import { Topics } from '@symblai/react-elements';

function App(props) {
  return (
    // ...
    <Topics
      conversationId={12345567}
      confidenceThreshold={0.8}
      orderBy={'score'}
    />
    // ...
  );
}

Props