Symbl Elements
Plug in components by Symbl to use in your react web applications
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
oraccessToken
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 passdetectActionPhraseForMessages=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 |