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

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

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

npm install @ionic/angular --save

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

npm install speak-tts --save

lodash-es package is a required dependency

npm install lodash-es --save

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

npm install async-es --save

chart.js package is a required dependency for the Graphs

npm install chart.js --save

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

npm install chartjs-plugin-datalabels --save

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

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

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

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

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

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

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

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

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

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()

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

LIG Ari Service status return:

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

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:

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

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

FAQ

License

MIT

GitHub @scttcper  ·  Twitter @scttcper