@coditashq/chizzle-ai v1.0.0

Chat Bot LitElement

Attributes you can pass to the Custom element tag

ANGULAR Usage

STEP 1

Install Web Components Polyfills & Our Lit Component with 2 simple commands.

Here we are assuming you have an Angular application already setup.

We will instll the following packages using npm.

npm install --save @webcomponents/webcomponentsjs

npm install --save @coditashq/chizzle-ai

Then you can use the webcomponents-loader.js, which allows loading a minimum polyfill bundle.

STEP 2

Update the Angular Configuration

You can load the polyfills using a <script> tag into the index.html file. However, the Angular way to do it is by adding a new asset and script configurations into >your angular.json file as follows:

"architect": {
 "build": {
   ...
   "options": {
     ...
     "assets": [
       "src/favicon.ico",
       "src/assets",
       {
         "glob": "{*loader.js,bundles/*.js}",
         "input": "node_modules/@webcomponents/webcomponentsjs",
         "output": "node_modules/@webcomponents/webcomponentsjs"
       }
     ],
     "scripts": [
       "node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"
     ]
     ...
   },
   "configurations": {
     ...
   },
     ...
 },
}

Both input and output properties must be relative to the project's root path. The same applies to the script imported.

STEP 3

Add the CUSTOM_ELEMENTS_SCHEMA schema in app.module.ts for our lit component to work in the Angular application.

// app.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
 declarations: [AppComponent],
 imports: [BrowserModule, AppRoutingModule],
 providers: [],
 bootstrap: [AppComponent],
 schemas: [CUSTOM_ELEMENTS_SCHEMA], // <-- update the schemas array like this
})
export class AppModule {}

The important part here is to import the CUSTOM_ELEMENTS_SCHEMA from the @angular/core package, and then use it in the schemas property as follows:

STEP 4

Import the Web Component in Angular project

Before using any Web Component in an Angular component, we'll need to make sure to import its definition as follows.

// app.component.ts

import { Component } from '@angular/core';

import '@coditashq/chizzle-ai/dist'; // <-- import the web component

@Component({
 selector: 'corp-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
})
export class AppComponent {}

Next is the final step.

STEP 5 (Final Step)

Use the Custom Lit Element

The next step is to use custom lit element <chat-bot> as part of any template. In this case, let's use it in our app.component.html file:

<chizzle-ai
 chat-bot-name="Site Assistant"
 user-name="Visitor"
 chat-bot-id="xxxx-xxxx-xxxx-xxxx-xxxx"
 chat-bot-logo="https://cdn.pixabay.com/photo/2012/04/14/16/11/planet-34450_1280.png"
></chizzle-ai>

You should now see the chat bot working once you serve your Angular application.

REACT Usage

STEP 1

Install the following packages with 2 simple npm commands.

The @lit-labs/react package provides utilities to create React wrapper components for web components, and custom hooks from reactive controllers.

npm install @lit-labs/react

npm install --save @coditashq/chizzle-ai

The @lit-labs/react package provides two main exports:

createComponent() creates a React component that wraps an existing web component. The wrapper allows you to set props on the component and add event listeners to the >component like you would any other React component.

useController() lets you use a Lit reactive controller as a React hook.

More info can be found here - https://lit.dev/docs/frameworks/react/

STEP 2

createComponent()

Import React, a custom element class, and createComponent.

import React from 'react';
import { createComponent } from '@lit-labs/react';
import { ChatBot } from "@coditashq/chizzle-ai/dist/chat-bot.js";

const ChizzleAI = createComponent({
 react: React,
 tagName: "chizzle-ai",
 elementClass: ChatBot,
});

Create the wrapper react component as shown above.

STEP 3 (Final Step)

Use the wrapper component

After defining the React wrapper component, you can use it just as you would any other React component.

<ChizzleAI
  chat-bot-name="Site Assistant"
  user-name="Visitor"
  chat-bot-id="xxxx-xxxx-xxxx-xxxx-xxxx"
  chat-bot-logo="https://cdn.pixabay.com/photo/2012/04/14/16/11/planet-34450_1280.png"
/>

You should now see the chat bot working once you serve your React application.