@lifeintelligencegroup/ngx-lig-ari

<div align="center">
  <h1>@lifeintelligencegroup/ngx-lig-ari</h1>
  <br>
  <a href="https://www.npmjs.com/package/@lifeintelligencegroup/ngx-lig-ari">
    <img src="https://badge.fury.io/js/%40lifeintelligencegroup%2Fngx-lig-ari.svg" alt="npm">
  </a>
  <br>
  <br>
</div>

DEMO: https://stackblitz.com/edit/angular-ngx-lig-ari-demo

APP URL: https://angular-ngx-lig-ari-demo.stackblitz.io

## Features

- AoT compilation and lazy loading compatible
- Component inheritance
- SystemJS/UMD rollup bundle

## Dependencies

Latest version available for each version of Angular

| @lifeintelligencegroup/ngx-lig-ari | Angular   |
| ---------------------------------- | --------- |
| 0.7.0                              | 7.x & 6.x |
| 0.8.0                              | 8.x       |
| 0.9.0                              | 9.x       |
| 0.17.28                            | >= 10.x    |
| 0.17.29                            | >= 11.x    |
| 0.17.30                            | >= 12.x    |
| 0.17.31                            | >= 13.x    |

## Install

```bash
npm install @lifeintelligencegroup/ngx-lig-ari --save
```

`@ionic/angular` package is a required dependency for the default mobile UI/UX

```bash
npm install @ionic/angular --save
```

`speak-tts` package is a required dependency for the Text to Speech

```bash
npm install speak-tts --save
```

`lodash-es` package is a required dependency

```bash
npm install lodash-es --save
```

`async-es` package is a required dependency for the Text to Speech

```bash
npm install async-es --save
```

`chart.js` package is a required dependency for the Graphs

```bash
npm install chart.js --save
```

`chartjs-plugin-datalabels` package is a required dependency for the Graphs label

```bash
npm install chartjs-plugin-datalabels --save
```

`@ionic-native/speech-recognition` package is a required dependency for the Speech Recognition

```bash
npm install @ionic-native/speech-recognition --save
```

`@ionic-native/text-to-speech` package is a required dependency for the Text to Speech

```bash
npm install @ionic-native/speech-recognition --save

## Install on Cordova

`Text to Speech plugin` package is a required dependency for the Text to Speech
[https://github.com/vilic/cordova-plugin-tts](https://github.com/vilic/cordova-plugin-tts)

```bash
npm install @ionic-native/core

ionic cordova plugin add cordova-plugin-tts
npm install @ionic-native/text-to-speech
```

### Supported Platform

- Android
- iOS
- Windows Phone 8

`Speech Recognition` This plugin does speech recognition using cloud services
[https://github.com/pbakondy/cordova-plugin-speechrecognition](https://github.com/pbakondy/cordova-plugin-speechrecognition)

```bash
npm install @ionic-native/core

ionic cordova plugin add cordova-plugin-speechrecognition
npm install @ionic-native/speech-recognition
```

### Supported Platform

- Android
- iOS

## Install on Capacitor

`Text to Speech plugin` package is a required dependency for the Text to Speech
[https://github.com/vilic/cordova-plugin-tts](https://github.com/vilic/cordova-plugin-tts)

```bash
npm install @ionic-native/core

npm install @capacitor/core @capacitor/cli

npm install cordova-plugin-tts
npm install @ionic-native/text-to-speech
ionic cap sync
```

### Supported Platform

- Android
- iOS
- Windows Phone 8

`Speech Recognition` This plugin does speech recognition using cloud services
[https://github.com/pbakondy/cordova-plugin-speechrecognition](https://github.com/pbakondy/cordova-plugin-speechrecognition)

```bash
npm install @ionic-native/core

npm install @capacitor/core @capacitor/cli

npm install cordova-plugin-speechrecognition
npm install @ionic-native/speech-recognition
ionic cap sync
```

### Supported Platform

- Android
- iOS

## Setup

**step 1:** add NgxLigAriModule to app NgModule

```typescript
import { CommonModule } from '@angular/common';

import { NgxLigAriModule } from 'ngx-lig-ari';

@NgModule({
  imports: [
    CommonModule,
    // NgxLigAriModule added
    NgxLigAriModule.forRoot({
      apiSecret: '<YOUR API SECRET KEY HERE>',
      showFab: true // default: false,
      settings: {  // doptional,
        title: '``Your App Title``',
        auth: '``Where to get the authentication``',
        theme: '``APP theme color``',
        assistantName: '``What would be the custom name of your assistant?``',
        baseUrl: "``Custom Initial message get from the Project Database``",
      },
    })
  ],
  bootstrap: [App],
  declarations: [App]
})
class MainModule {}
```

## Setup for Ionic Native/Cordova or Capacitor

**step 1:** add NgxLigAriModule to app NgModule

```typescript
import { CommonModule } from "@angular/common";

import { NgxLigAriModule } from "ngx-lig-ari";

import { SpeechRecognition } from "@ionic-native/speech-recognition/ngx";
import { TextToSpeech } from "@ionic-native/text-to-speech/ngx";

@NgModule({
  imports: [
    CommonModule,
    // NgxLigAriModule added
    NgxLigAriModule.forRoot({
      apiSecret: "<YOUR API SECRET KEY HERE>",
      showFab: true, // default: false
      settings: {  // doptional,
        title: '``Your App Title``',
        auth: '``Where to get the authentication``',
        theme: '``APP theme color``',
        assistantName: '``What would be the custom name of your assistant?``',
        baseUrl: "``Custom Initial message get from the Project Database``",
      },
    }),
  ],
  bootstrap: [App],
  declarations: [App],
  providers: [SpeechRecognition, TextToSpeech],
})
class MainModule {}
```

## Use

```typescript
import { NgxLigAriService } from '@lifeintelligencegroup/ngx-lig-ari';

@Component({...})
export class YourComponent {
  constructor(private ariService: NgxLigAriService) {}

  showAri() {
    this.ariService.showAri();
  }

  closeAri(){
    this.ariService.closeAri();
  }

  // OR Toggle ARI

  toggleAri(){
    this.ariService.toogleAri();
  }
}
```

## Options

All individual options can be overridden in the global
options. In addition, global options include the following
options:

| Option    | Type    | Default        | Description                                                                                       |
| --------- | ------- | -------------- | ------------------------------------------------------------------------------------------------- |
| apiSecret | string  | null/undefined | Your API Secret Key from LIG                                                                      |
| showFab   | boolean | false          | Shows Fab Button for ARI to be initialize, By default this can be clickable to show Ari Component |
|           |         |                |                                                                                                   |

#### Setting Global Options

Pass values to `NgxLigAriModule.forRoot()`

```typescript
// root app NgModule
imports: [
  NgxLigAriModule.forRoot({
    apiSecret: <YOUR API SECRET KEY HERE>,
    showFab: true // default: false
  }),
],
```

### LIG Ari Service status return:

```typescript
export enum AriStatus {
  /** Ari Window is Open */
  Open,
  /** Ari Window is Close */
  Close,
}
```

Add `ngx-lig-ari` as a component on the web app. By default when the Ari Fab button renders on the page, when click it triggers the `showAri()` method on the `NgxLigAriService`

```typescript
import { Component, OnInit } from "@angular/core";

import {
  NgxLigAriService,
  AriStatus,
} from "@lifeintelligencegroup/ngx-lig-ari";

@Component({
  selector: "app-root",
  template: `
    <div class="main-container">
      <ngx-lig-ari></ngx-lig-ari>
    </div>
  `,
})
export class AppComponent implements OnInit {
  constructor(private ariService: NgxLigAriService) {}

  ngOnInit() {
    this.ariService.onAriStatusChange().subscribe((status: AriStatus) => {
      //  This is to check the Status of Ari Window
    });
  }

  showAri() {
    this.ariService.showAri();
  }

  closeAri() {
    this.ariService.closeAri();
  }

  checkAriStatus() {
    if (this.ariService.getCurrentAriStatus() === AriStatus.Open) {
      // Do Something here
    }
  }
}
```

## ngx-lig-ari

This is the component that renders the ARI Window according to the device plaform.

### Usage:

```html
<ngx-lig-ari
  [buttonVertical]="'bottom'"
  [buttonHorizontal]="'end'"
  [buttonSlot]="'fixed'"
></ngx-lig-ari>
```

### Properties:

| Option               | Description                                                                                                                                                                | Attribute        | Type                                           |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ---------------------------------------------- |
| **buttonVertical**   | Where to align the Ari Button vertically in the viewport.                                                                                                                  | buttonVertical   | `"bottom"`/ `"center"` / `"top"` / `undefined` |
| **buttonHorizontal** | Where to align the Ari Button horizontally in the viewport.                                                                                                                | buttonHorizontal | `"center"` / `"end"` / `"start"` / `undefined` |
| **buttonEdge**       | If `true`, the fab will display on the edge of the header if `vertical` is `"top"`, and on the edge of the footer if it is `"bottom"`. Should be used with a `fixed` slot. | buttonEdge       | boolean : Default `false`                      |
| **buttonSlot**       |                                                                                                                                                                            | buttonSlot       | "fixed" / undefined                            |
|                      |                                                                                                                                                                            |                  |                                                |

## Functions

Show ARI Window according to Device Platform `desktop` or `mobile`

```
showAri()
```

Closes ARI Window

##

```
closeAri(): Close Ari Window or Ari Modal
```

Can be used to toggle an ARI Window to open or closed.

```
toggleAri()
```

## SystemJS

If you are using SystemJS, you should also adjust your configuration to point to
the UMD bundle.

In your SystemJS config file, `map` needs to tell the System loader where to
look for `ngx-lig-ari`:

```js
map: {
  'ngx-lig-ari': 'node_modules/ngx-lig-ari/bundles/@lifeintelligencegroup/ngx-lig-ari.umd.min.js',
}
```

## FAQ

-
-

## License

MIT

---

> GitHub [@scttcper](https://github.com/scttcper) &nbsp;&middot;&nbsp;
> Twitter [@scttcper](https://twitter.com/scttcper)