@symblai/react-elements v0.7.1

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

Config

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

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

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