@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)  ·  > Twitter [@scttcper](https://twitter.com/scttcper)