{"_id":"@coditashq/chizzle-ai","_rev":"3-e3bdf061dce329ac8ec0223787ad2c97","name":"@coditashq/chizzle-ai","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@coditashq/chizzle-ai","version":"1.0.0","keywords":["web-components","lit-element","typescript","lit"],"author":{"name":"Chinmay Patil"},"license":"ISC","_id":"@coditashq/chizzle-ai@1.0.0","maintainers":[{"name":"chinmay-coditas","email":"chinmay.patil@coditas.com"},{"name":"sushant-patil-coditas","email":"sushant.patil@coditas.com"},{"name":"naman-coditas","email":"naman.dembla@coditas.com"},{"name":"varun-coditas","email":"varun@coditas.com"}],"dist":{"shasum":"a7952eac6ba36e214bf8a442e2efefe81e9ae684","tarball":"https://registry.npmjs.org/@coditashq/chizzle-ai/-/chizzle-ai-1.0.0.tgz","fileCount":28,"integrity":"sha512-VtGGviO98tSindaNUBKqHcpLh1fcK8SnHRtmisXq48sCfg/dO4rw7cz4udxLFKRpA8nGOkOQ0EpjDsgFAqUJ0g==","signatures":[{"sig":"MEUCIQCvudJ37IRew0hx5L+vvo6gE6ECTzpMcmFs+omSJJ1sBAIgIRwlTI9UGZhkNmbTA4hs4+jQeTf1xgXu2Hkw3LMktNI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":54764},"main":"dist/chat-bot.js","type":"module","types":"dist/index.d.ts","module":"dist/chat-bot.js","gitHead":"91cde077123240c3e8dd59124041e96290a2faf4","scripts":{"docs":"npm run docs:clean && npm run build && npm run analyze && npm run docs:build && npm run docs:assets && npm run docs:gen","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"npm run test:dev && npm run test:prod","build":"tsc -b && esbuild dist/**/*.js --minify --outdir=dist --allow-overwrite","clean":"rimraf chat-bot.{d.ts,d.ts.map,js,js.map} test/chat-bot.{d.ts,d.ts.map,js,js.map} test/chat-bot_test.{d.ts,d.ts.map,js,js.map}","serve":"wds --dir dist --watch","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","csstots":"css-to-ts","publish":"npm publish --access public","docs:gen":"eleventy --config=.eleventy.cjs","test:dev":"wtr","checksize":"rollup -c ; cat chat-bot.bundled.js | gzip -9 | wc -c ; rm chat-bot.bundled.js","postbuild":"shx rm -rf assets && shx cp -r src/assets dist","test:prod":"MODE=prod wtr","docs:build":"rollup -c --file docs/chat-bot.bundled.js","docs:clean":"rimraf docs","docs:serve":"wds --root-dir=docs --node-resolve --watch","serve:prod":"MODE=prod npm run serve","test:watch":"wtr --watch","build:watch":"tsc --watch","docs:assets":"cp node_modules/prismjs/themes/prism-okaidia.css docs/","lint:eslint":"eslint 'src/**/*.ts'","analyze:watch":"cem analyze --litelement --globs \"src/**/*.ts\" --watch","csstots:watch":"css-to-ts --watch","docs:gen:watch":"eleventy --config=.eleventy.cjs --watch","test:prod:watch":"MODE=prod wtr --watch","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"chinmay-coditas","email":"chinmay.patil@coditas.com"},"_npmVersion":"8.19.3","description":"A generative ai chat bot","directories":{},"_nodeVersion":"18.13.0","dependencies":{"lit":"^2.4.0","rxjs":"^7.8.1","showdown":"^2.1.0","@types/showdown":"^2.0.1","@webcomponents/webcomponentsjs":"^2.6.0"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","devDependencies":{"shx":"^0.3.4","eslint":"^8.15.0","rimraf":"^3.0.2","rollup":"^2.73.0","esbuild":"^0.19.2","webpack":"^5.88.2","prettier":"^2.6.2","css-to-ts":"^1.0.1","ts-loader":"^9.4.1","typescript":"^5.1.6","@babel/core":"^7.19.3","webpack-cli":"^4.10.0","babel-loader":"^8.2.5","lit-analyzer":"^0.0.6","ts-lit-plugin":"^1.0.5","@11ty/eleventy":"^2.0.1","@web/dev-server":"^0.1.31","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.5","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.19.4","webpack-dev-server":"^4.11.1","html-webpack-plugin":"^5.5.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-summary":"^1.4.3","terser-webpack-plugin":"^5.3.6","@rollup/plugin-replace":"^5.0.2","@web/dev-server-legacy":"^1.0.0","webpack-bundle-analyzer":"^4.6.1","@typescript-eslint/parser":"^5.25.0","@rollup/plugin-node-resolve":"^13.3.0","@web/test-runner-playwright":"^0.9.0","@typescript-eslint/eslint-plugin":"^5.25.0","@custom-elements-manifest/analyzer":"^0.6.3","@11ty/eleventy-plugin-syntaxhighlight":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/chizzle-ai_1.0.0_1693821197627_0.33807354072978857","host":"s3://npm-registry-packages"}}},"time":{"created":"2023-09-04T09:53:17.517Z","modified":"2026-03-31T19:16:07.867Z","1.0.0":"2023-09-04T09:53:17.805Z"},"author":{"name":"Chinmay Patil"},"license":"ISC","keywords":["web-components","lit-element","typescript","lit"],"description":"A generative ai chat bot","maintainers":[{"email":"sohail.hamdule@coditas.com","name":"sohailhamdule"},{"email":"varun@coditas.com","name":"varun-coditas"}],"readme":"# Chat Bot LitElement\r\n\r\n## Attributes you can pass to the Custom element tag\r\n\r\n| AttributeName   | Required       | Default          | Description                                                                                                 |\r\n|-----------------|----------------|------------------|-------------------------------------------------------------------------------------------------------------|\r\n| `chat-bot-id`   | Yes            | Empty String     | We need this ID for authentication and the chat bot to work.                                                |\r\n| `chat-bot-name` | No             | Empty String     | You can name your chat bot using this attribute.                                                            |\r\n| `chat-bot-logo` | No             | Default Bot Logo | You can provide a different logo for the chat bot UI.                                                       |\r\n| `user-name`     | No             | 'User'           | You can provide a different name for the user.                                                              |\r\n| `is-modal`      | No             | FALSE            | Used for displaying chat bot as a modal or a popup UI. By default the chat bot will be visible as a small popup on the right side of the screen. |\r\n\r\n>\r\n>## ANGULAR Usage\r\n>\r\n><img src=\"https://angular.io/assets/images/logos/angular/angular.svg\" width=\"40\" height=\"40\">\r\n>\r\n>## STEP 1\r\n>\r\n>### Install Web Components Polyfills & Our Lit Component with 2 simple commands.\r\n>\r\n>Here we are assuming you have an Angular application already setup.\r\n>\r\n>We will instll the following packages using npm.\r\n>\r\n>```sh\r\n>npm install --save @webcomponents/webcomponentsjs\r\n>\r\n>npm install --save @coditashq/chizzle-ai\r\n>```\r\n>Then you can use the webcomponents-loader.js, which allows loading a minimum polyfill bundle.\r\n>\r\n\r\n>\r\n>## STEP 2\r\n>\r\n>### Update the Angular Configuration\r\n>\r\n>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:\r\n>\r\n>```json\r\n>\"architect\": {\r\n>  \"build\": {\r\n>    ...\r\n>    \"options\": {\r\n>      ...\r\n>      \"assets\": [\r\n>        \"src/favicon.ico\",\r\n>        \"src/assets\",\r\n>        {\r\n>          \"glob\": \"{*loader.js,bundles/*.js}\",\r\n>          \"input\": \"node_modules/@webcomponents/webcomponentsjs\",\r\n>          \"output\": \"node_modules/@webcomponents/webcomponentsjs\"\r\n>        }\r\n>      ],\r\n>      \"scripts\": [\r\n>        \"node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js\"\r\n>      ]\r\n>      ...\r\n>    },\r\n>    \"configurations\": {\r\n>      ...\r\n>    },\r\n>      ...\r\n>  },\r\n> }\r\n>```\r\n>Both input and output properties must be relative to the project's root path. The same applies to the script imported.\r\n>\r\n\r\n>\r\n>## STEP 3\r\n>\r\n>### Add the `CUSTOM_ELEMENTS_SCHEMA` schema in `app.module.ts` for our lit component to work in the Angular application.\r\n>\r\n>```ts\r\n>// app.module.ts\r\n>\r\n>import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\r\n>import { BrowserModule } from '@angular/platform-browser';\r\n>\r\n>import { AppRoutingModule } from './app-routing.module';\r\n>import { AppComponent } from './app.component';\r\n>\r\n>@NgModule({\r\n>  declarations: [AppComponent],\r\n>  imports: [BrowserModule, AppRoutingModule],\r\n>  providers: [],\r\n>  bootstrap: [AppComponent],\r\n>  schemas: [CUSTOM_ELEMENTS_SCHEMA], // <-- update the schemas array like this\r\n>})\r\n>export class AppModule {}\r\n>```\r\n>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:\r\n>\r\n\r\n>\r\n>## STEP 4\r\n>\r\n>### Import the Web Component in Angular project\r\n>\r\n>Before using any Web Component in an Angular component, we'll need to make sure to import its definition as follows.\r\n>\r\n>```ts\r\n>// app.component.ts\r\n>\r\n>import { Component } from '@angular/core';\r\n>\r\n>import '@coditashq/chizzle-ai/dist'; // <-- import the web component\r\n>\r\n>@Component({\r\n>  selector: 'corp-root',\r\n>  templateUrl: './app.component.html',\r\n>  styleUrls: ['./app.component.css'],\r\n>})\r\n>export class AppComponent {}\r\n>```\r\n>Next is the final step.\r\n>\r\n\r\n>\r\n>## STEP 5 (Final Step)\r\n>\r\n>### Use the Custom Lit Element\r\n>\r\n>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:\r\n>\r\n>```html\r\n><chizzle-ai\r\n>  chat-bot-name=\"Site Assistant\"\r\n>  user-name=\"Visitor\"\r\n>  chat-bot-id=\"xxxx-xxxx-xxxx-xxxx-xxxx\"\r\n>  chat-bot-logo=\"https://cdn.pixabay.com/photo/2012/04/14/16/11/planet-34450_1280.png\"\r\n>></chizzle-ai>\r\n>```\r\n>You should now see the chat bot working once you serve your Angular application.\r\n>\r\n\r\n>\r\n>## REACT Usage\r\n>\r\n><img src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png?20220125121207\" width=\"40\" height=\"40\">\r\n>\r\n>\r\n>## STEP 1\r\n>\r\n>### Install the following packages with 2 simple npm commands.\r\n>\r\n>The `@lit-labs/react` package provides utilities to create React wrapper components for web components, and custom hooks from reactive controllers.\r\n>\r\n>```sh\r\n>npm install @lit-labs/react\r\n>\r\n>npm install --save @coditashq/chizzle-ai\r\n>```\r\n>The @lit-labs/react package provides two main exports:\r\n>\r\n>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.\r\n>\r\n>useController() lets you use a Lit reactive controller as a React hook.\r\n>\r\n>More info can be found here - https://lit.dev/docs/frameworks/react/\r\n>\r\n\r\n>\r\n>## STEP 2\r\n>\r\n>### createComponent()\r\n>\r\n>Import `React`, a custom element class, and `createComponent`.\r\n>\r\n>```js\r\n>import React from 'react';\r\n>import { createComponent } from '@lit-labs/react';\r\n>import { ChatBot } from \"@coditashq/chizzle-ai/dist/chat-bot.js\";\r\n>\r\n>const ChizzleAI = createComponent({\r\n>  react: React,\r\n>  tagName: \"chizzle-ai\",\r\n>  elementClass: ChatBot,\r\n>});\r\n>```\r\n>Create the wrapper react component as shown above.\r\n>\r\n\r\n>\r\n>## STEP 3 (Final Step)\r\n>\r\n>### Use the wrapper component\r\n>\r\n>After defining the React wrapper component, you can use it just as you would any other React component.\r\n>\r\n>```HTML\r\n><ChizzleAI\r\n>   chat-bot-name=\"Site Assistant\"\r\n>   user-name=\"Visitor\"\r\n>   chat-bot-id=\"xxxx-xxxx-xxxx-xxxx-xxxx\"\r\n>   chat-bot-logo=\"https://cdn.pixabay.com/photo/2012/04/14/16/11/planet-34450_1280.png\"\r\n> />\r\n>```\r\n>You should now see the chat bot working once you serve your React application.\r\n>","readmeFilename":"README.md"}