# @symblai/react-elements

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

Latest version **0.7.1** (published 2021-11-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @symblai/react-elements
pnpm add @symblai/react-elements
yarn add @symblai/react-elements
bun add @symblai/react-elements
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.1 |
| Published | 2021-11-12 |
| First published | 2020-09-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 11 |
| Unpacked size | 836.5 KB |
| Known vulnerabilities | 0 (+4 in 2 direct dependencies) |
| Install scripts | no |
| Author | Ankeeth Suvarna |
| Maintainers | arjun-chouhan, adamvoliva-symbl, vaibhav.patil.symbl, toshish, ankeeth-rammer, sapirguy |

## Links

- npm: https://www.npmjs.com/package/@symblai/react-elements
- npm.io page: https://npm.io/package/@symblai/react-elements

## Dependencies (11)

- [clsx](https://npm.io/package/clsx.md) ^1.1.1
- [lodash](https://npm.io/package/lodash.md) ~4.17.20
- [date-fns](https://npm.io/package/date-fns.md) ^2.16.1
- [lodash-es](https://npm.io/package/lodash-es.md) ~4.17.15
- [valid-url](https://npm.io/package/valid-url.md) ^1.0.9
- [utility-types](https://npm.io/package/utility-types.md) ~3.10.0
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.1.4
- [copy-to-clipboard](https://npm.io/package/copy-to-clipboard.md) ~3.3.1
- [react-content-loader](https://npm.io/package/react-content-loader.md) ^5.1.4
- [react-error-boundary](https://npm.io/package/react-error-boundary.md) ^3.1.0
- [react-highlight-words](https://npm.io/package/react-highlight-words.md) ^0.16.0

## Recent versions

- 0.7.1 (latest) — 2021-11-12
- 0.7.0 — 2021-11-12
- 0.6.0 — 2021-01-19
- 0.5.0 — 2020-11-12
- 0.4.0 — 2020-10-30
- 0.3.0 — 2020-10-27
- 0.2.0 — 2020-09-30

## README

# Symbl Elements

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

<a href="https://www.npmjs.com/package/@symblai/react-elements"><img src="https://img.shields.io/npm/dt/@symblai/react-elements.svg" alt="Total Downloads"></a> <a href="https://img.shields.io/npm/v/@symblai/react-elements/latest" alt="Latest version"></a>

- [Symbl Elements](#symbl-elements)
  - [Features](#features)
  - [Installation](#installation)
  - [Components](#components)
    - [SymblProvider](#symblprovider)
      - [Example](#example)
      - [Props](#props)
      - [Config](#config)
    - [Transcripts](#transcripts)
      - [Example - Transcripts](#example---transcripts)
      - [Props - Transcripts](#props---transcripts)
      - [Highlight classes](#highlight-classes)
    - [Topics](#topics)
      - [Example - Topics](#example---topics)
      - [Props - 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

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

```tsx
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)](#config) | The Symbl config object |

#### Config

| Key           | Type                                       | Description                                                                  |
|---------------|--------------------------------------------|------------------------------------------------------------------------------|
| `appId`       | String                                     | Can be generated from [Symbl Developer Platform](https://platform.symbl.ai/) |
| `appSecret`   | String                                     | Can be generated from [Symbl Developer Platform](https://platform.symbl.ai/) |
| `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

```tsx
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](https://docs.symbl.ai/#messages)                       |
| `highlightPhrases`             | Array                      | Highlight key points, actionable texts in the transcript. To style the highlighting a global [class](#highlight-classes) 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](https://reactjs.org/docs/refs-and-the-dom.html) 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](https://docs.symbl.ai/#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](https://docs.symbl.ai/#get-messages-transcript)

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

```tsx
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                            |

---
_Source: https://npm.io/package/@symblai/react-elements · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._