Symbl Elements

Plug in components by Symbl to use in your react web applications

• Symbl Elements
  • Features
  • Installation
  • Components
    • SymblProvider
      • Example
      • Props
      • Config
    • Transcripts
      • Example - Transcripts
      • Props - Transcripts
      • Highlight classes
    • Topics
      • Example - Topics
      • Props - Topics

Features

• Plug n Play
• Full featured UI components for both Offline and Realtime conversations
• Custom hooks to build your own components
• Full Typescript support

Installation

# using npm
npm i @symblai/react-elements

# using yarn
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 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: '__appId__',
  appSecret: '__appSecret__',
};

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

Props

| Prop | Type | Description | |----------|----------------------------|-------------------------| | config | Object (Config) | The Symbl config object |

Config

| Key | Type | Description | |---------------|--------------------------------------------|------------------------------------------------------------------------------| | appId | String | Can be generated from Symbl Developer Platform | | appSecret | String | Can be generated from Symbl Developer Platform | | accessToken | String | Generated accessToken | | basePath | String (Default: 'https://api.symbl.ai') | |

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

Transcripts

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

Example - Transcripts

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 - Transcripts

| Prop | Type | Description | |--------------------------------|----------------------------|-------------------------------------------------------------------------------------------------------------------------------------| | conversationId | String | The id of the conversation | | messages | Array | Array of messages retrieved from the symbl realtime api - Message response | | highlightPhrases | Array | Highlight key points, actionable texts in the transcript. To style the highlighting a global class is available for each type. Available type action_phrase | | showAvatar | Boolean (Deafault: true) | toggle the avatar in the transcription | | mediaElementRefOrId | String / ReactRef | Id of the audio/video element for mapping it to transcripts or ref to the element | | transcriptsWrapperClassName | String | Wrapper class for the whole transcript body | | transcriptRowClassName | String | Class for handling the styling of the transcript row | | transcriptClassName | String | Class for handling the styling of transcript text | | transcriptRowHeaderClassName | String | Class for handling the style of the header section of transcript | | avatarClassName | String | Class for styling the avatar |

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

Note: action_phrase is only available when you pass detectActionPhraseForMessages=true during submiting the request in Async and Websocket API. Link

Highlight classes

| Type | ClassName | |-----------------|-----------------------------| | action_phrase | action-phrase-highlighted | | | |

Topics

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

Example - Topics

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

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

Props - Topics

| Prop | Type | Description | |-----------------------|-------------------|----------------------------------------------------------------| | conversationId | String required | The id of the conversation | | confidenceThreshold | Number | A value between 0 to 1 which will be used to filter the topics | | orderBy | String | Sort topics based on either score or text | | colorize | Boolean | Toggle to enable the coloring of the topic pills | | color | String | Change the text color. | | backgroundColor | String | Change the background color | | onTopicClick | Function | Callback called when clicked a pill |