Symbl Elements

Symbl Elements are a set of UI components, which can be easily integrated into your frontend application to directly utilize Symbl’s capabilities such as Transcripts, Topics, and Insights(coming soon). The library provides you with UI elements & custom hooks to customize your own components.

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#

npm i @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: '__appId__',
appSecret: '__appSecret__',
};
function App({ children }) {
return (
<SymblProvider config={symblConfig}>
{children}
</SymblProvider>
);
}

Props#

NameTypeDescription
configObjectThe Symbl config object

Config#

NameTypeDescription
appIdStringCan be generated from Symbl Developer Platform
appSecretStringCan be generated from Symbl Developer Platform
accessTokenStringCan be generated from Symbl Developer Platform
basePathString (Default: https://api.symbl.ai)
info

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

NameTypeDescription
conversationIdStringThe id of the conversation
messagesArrayArray of messages retrieved from the symbl realtime api - Message response
highlightPhrasesArrayHighlight key points, actionable texts in the transcript. To style the highlighting a global class is available for each type. Available type action_phrase.
showAvatarBoolean (Default: true)toggle the avatar in the transcription
mediaElementRefOrIdString / ReactRefId of the audio/video element for mapping it to transcripts or ref to the element.
transcriptsWrapperClassNameStringWrapper class for the whole transcript body.
transcriptRowClassNameStringClass for handling the styling of the transcript row.
transcriptClassNameStringClass for handling the styling of transcript text.
transcriptRowHeaderClassNameStringClass for handling the style of the header section of transcript.
avatarClassNameStringClass for styling the avatar
info

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

info

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

Highlight classes#

TypeClassName
action_phraseaction-phrase-highlighted

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#

PropTypeDescription
conversationIdString(REQUIRED)The id of the conversation
confidenceThresholdNumberA value between 0 to 1 which will be used to filter the topics
orderByStringSort topics based on either score or text
colorizeBooleanToggle to enable the coloring of the topic pills
colorStringChange the text color
backgroundColorStringChange the background color
onTopicClickFunctionCallback called when clicked a pill

Sample App#