open-index/open-npm huggingface dataset:
npm package: @jaleeson11/commitguard
Description: Git pre-commit hook for AI agent code review against project guidelines
Latest version: 0.1.8

# CommitGuard

A git pre-commit hook that enables AI agents to review code changes against project guidelines before committing.

## Features

- **Automated code review** — Blocks commits and presents staged changes for AI agent review against your project's coding standards.

- **Zero configuration** — Installs automatically via npm postinstall. Just add your `COMMITGUARD.md` and you're ready to go.

- **Framework agnostic** — Works with any project that uses git. No API calls or external services required.

- **Non-intrusive workflow** — Agents can bypass the hook with `--no-verify` after reviewing, or fix issues and re-commit.

## Getting Started

### Prerequisites

- Node.js 18+
- Git

### Installation

1. Install the package as a dev dependency:

```bash
npm install @jaleeson11/commitguard --save-dev
```

2. Create a `COMMITGUARD.md` in your project root with your coding standards:

```bash
touch COMMITGUARD.md
```

The hook will automatically be installed to `.git/hooks/pre-commit`.

## Usage

When an AI agent (or developer) attempts to commit:

```bash
git commit -m "add new feature"
```

The hook will:
1. Display the project's `COMMITGUARD.md`
2. Show the staged diff
3. Block the commit with review instructions

After reviewing, the agent can either:

- **Approve and commit:**
  ```bash
  git commit --no-verify -m "add new feature"
  ```

- **Fix issues and retry:**
  ```bash
  # Make fixes
  git add .
  git commit -m "add new feature"
  ```

### Guidelines Location

The hook searches for `COMMITGUARD.md` in these locations (in order):
- `./COMMITGUARD.md`
- `./.github/COMMITGUARD.md`
- `./docs/COMMITGUARD.md`

## License

This project is licensed under the MIT License.
npm package: @jalenparham97/create-app
Description: A cli to bootstrap new apps
Latest version: 1.1.0

# create-app

<!-- [![npm version](https://badge.fury.io/js/create-mf-app.svg)](https://badge.fury.io/js/create-mf-app) [![npm version](https://img.shields.io/npm/dm/create-mf-app.svg)](https://badge.fury.io/js/create-mf-app) -->

Creates boilerplate code for new apps based on different templates.

## Usage

```
npx create-app
```
npm package: @jalescardoso/cordova-plugin-push
Description: Register and receive push notifications.
Author: Erisu
Latest version: 4.0.3

# Cordova Plugin Push

[![Node CI](https://github.com/jalescardoso/cordova-plugin-push/actions/workflows/ci.yml/badge.svg)](https://github.com/jalescardoso/cordova-plugin-push/actions/workflows/ci.yml) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/422c67b5e70c4a0eadae7b9fc794d3c1)](https://app.codacy.com/gh/jalescardoso/cordova-plugin-push?utm_source=github.com&utm_medium=referral&utm_content=jalescardoso/cordova-plugin-push&utm_campaign=Badge_Grade_Settings)

> Register and receive push notifications

# What is this?

This plugin offers support to receive and handle native push notifications with a **single unified API**.

This does not mean you will be able to send a single push message and have it arrive on devices running different operating systems. By default Android uses FCM and iOS uses APNS and their payloads are significantly different. Even if you are using FCM for both Android and iOS there are differences in the payload required for the plugin to work correctly. For Android **always** put your push payload in the `data` section of the push notification. For more information on why that is the case read [Notification vs Data Payload](https://github.com/jalescardoso/cordova-plugin-push/blob/master/docs/PAYLOAD.md#notification-vs-data-payloads). For iOS follow the regular [FCM documentation](https://firebase.google.com/docs/cloud-messaging/http-server-ref).

This plugin does not provide a way to determine which platform you are running on. The best way to do that is use the `device.platform` property provided by [cordova-plugin-device](https://github.com/apache/cordova-plugin-device).

* [Reporting Issues](docs/ISSUES.md)
* [Installation](docs/INSTALLATION.md)
* [API reference](docs/API.md)
* [Typescript support](docs/TYPESCRIPT.md)
* [Examples](docs/EXAMPLES.md)
* [Platform support](docs/PLATFORM_SUPPORT.md)
* [Cloud build support (PG Build, IntelXDK)](docs/PHONEGAP_BUILD.md)
* [Push notification payload details](docs/PAYLOAD.md)
* [Contributing](.github/CONTRIBUTING.md)
* [License (MIT)](MIT-LICENSE)

# Do you like tutorial? You get tutorial!

* [PhoneGap Day US Push Workshop 2016 (using node-gcm)](http://macdonst.github.io/push-workshop/)
npm package: @jalik/deep-extend
Description: Deep merge any objects
Author: Karl Stein
Latest version: 3.0.1

# @jalik/deep-extend

![GitHub package.json version](https://img.shields.io/github/package-json/v/jalik/js-deep-extend.svg)
![Build Status](https://github.com/jalik/js-deep-extend/actions/workflows/node.js.yml/badge.svg)
![GitHub last commit](https://img.shields.io/github/last-commit/jalik/js-deep-extend.svg)
[![GitHub issues](https://img.shields.io/github/issues/jalik/js-deep-extend.svg)](https://github.com/jalik/js-deep-extend/issues)
![GitHub](https://img.shields.io/github/license/jalik/js-deep-extend.svg)
![npm](https://img.shields.io/npm/dt/@jalik/deep-extend.svg)

Deep merge any objects.

## Sandbox

Play with the lib here: https://codesandbox.io/s/jalik-deep-extend-demo-wyeo99?file=/src/index.js

## Installing

```shell
npm i -P @jalik/deep-extend
```
```shell
yarn add @jalik/deep-extend
```

## Merging deep objects

The following code shows how to merge objects without losing values that are not defined in objects
to merge.

```js
import { deepExtend } from "@jalik/deep-extend";

const defaultColors = {
  cold: {
    blue: '#0000FF',
    green: '#00FF00',
  },
  hot: {
    red: '#FF0000',
    yellow: '#FFFF00',
  },
};

const customColors = {
  cold: {
    blue: '#48C2ED',
  },
  hot: {
    yellow: '#E6CB5F',
  },
};

// Merge all colors into a new object.
// The final colors will have custom blue and yellow colors,
// but the other colors will be the default ones.
const result = deepExtend({}, defaultColors, customColors);
```

The result:

```json
{
  "cold": {
    "blue": "#48C2ED",
    "green": "#00FF00"
  },
  "hot": {
    "red": "#FF0000",
    "yellow": "#E6CB5F"
  }
}
```

## Merging arrays

See below how it is easy to merge arrays recursively.

```js
import { deepExtend } from "@jalik/deep-extend";

const a = [1, [2, [3]]];
const b = [undefined, [4, [undefined, 5], 6], 7];

const result = deepExtend([], a, b);
```

The result:

```json
[
  1,
  [
    4,
    [
      3,
      5
    ],
    6
  ],
  7
]
```

## Changelog

History of releases is in the [changelog](./CHANGELOG.md).

## License

The code is released under the [MIT License](http://www.opensource.org/licenses/MIT).
npm package: @jalik/extend
Description: A utility to merge flat objects.
Author: Karl Stein
Latest version: 3.0.1

# @jalik/extend

![GitHub package.json version](https://img.shields.io/github/package-json/v/jalik/js-extend.svg)
![Build Status](https://github.com/jalik/js-extend/actions/workflows/node.js.yml/badge.svg)
![GitHub last commit](https://img.shields.io/github/last-commit/jalik/js-extend.svg)
[![GitHub issues](https://img.shields.io/github/issues/jalik/js-extend.svg)](https://github.com/jalik/js-extend/issues)
![GitHub](https://img.shields.io/github/license/jalik/js-extend.svg)
![npm](https://img.shields.io/npm/dt/@jalik/extend.svg)

A utility to merge flat objects.

**Warning:** 
*This library is doing a "flat merge", so if you need to merge deep objects, use the following library instead: [@jalik/deep-extend](https://www.npmjs.com/package/@jalik/deep-extend)*

## Introduction

Useful to merge several objects into one, for creating a configuration based on default parameters for example.

## Installing

```shell
npm i -P @jalik/extend
```
```shell
yarn add @jalik/extend
```

## Merging objects

In this example, all objects are merged into the first object, so the first object is modified, if you don't want to modify the object, pass en empty object `{}` as the first argument.

Note that objects are merged based on their order, so the 2nd object is merged in the first, then the 3rd is merged in the first, and so on...

```js
import { extend } from "@jalik/extend";

const coldColors = {
  blue: "#0000FF",
  cyan: "#00FFFF",
  green: "#00FF00"
};

const hotColors = {
  yellow: "#FFFF00",
  orange: "#FFAA00",
  red: "#FF0000"
};

const result = extend({}, coldColors, hotColors);
```

The result:

```json
{
  "blue": "#0000FF",
  "cyan": "#00FFFF",
  "green": "#00FF00",
  "yellow": "#FFFF00",
  "orange": "#FFAA00",
  "red": "#FF0000"
}
```

## Merging arrays

Several arrays can be merged easily. Note that `undefined` values are ignored when merging.

```js
import { extend } from "@jalik/extend";

const a = [0, 0, 0, 7];
const b = [0, 0, 3];
const c = [1, 3, undefined, undefined];

const result = extend([], a, b, c);
```

The result:

```json
[1, 3, 3, 7]
```

## Merging arrays into object

You can easily convert an array to an object with the extend method.

```js
import { extend } from "@jalik/extend";

const numbers = [1, 3, 3, 7];
const object = { length: numbers.length };

const result = extend({}, object, numbers);
```

The result:

```json
{
  "length": 4,
  "0": 1,
  "1": 3,
  "2": 3,
  "3": 7
}
```

## Changelog

History of releases is in the [changelog](./CHANGELOG.md).

## License

The code is released under the [MIT License](http://www.opensource.org/licenses/MIT).
npm package: @jalik/hal
Description: Hypertext Application Language toolbox
Author: Karl Stein
Latest version: 1.0.2

# @jalik/hal

![GitHub package.json version](https://img.shields.io/github/package-json/v/jalik/js-hal.svg)
![Build Status](https://github.com/jalik/js-hal/actions/workflows/node.js.yml/badge.svg)
![Last commit](https://img.shields.io/github/last-commit/jalik/js-hal.svg)
[![GitHub issues](https://img.shields.io/github/issues/jalik/js-hal.svg)](https://github.com/jalik/js-hal/issues)
![GitHub](https://img.shields.io/github/license/jalik/js-hal.svg)
![npm](https://img.shields.io/npm/dt/@jalik/hal.svg)

H.A.L. (Hypertext Application Language) TypeScript declarations and functions.

## Features

* Create HAL resources
* Create HAL paginated resources
* Consume HAL embedded data
* TypeScript declarations ♥

## Installing

```shell
npm i -P @jalik/hal
```
```shell
yarn add @jalik/hal
```

## Creating an HAL resource

```ts
import { createHalResource } from '@jalik/hal'

const user = {
  username: 'admin'
}

const roles = [
  { name: 'administrator' }
]

// we can add links to roles (optional)
const rolesResources = roles.map((role) => createHalResource(role, undefined, {
  self: { href: `http://localhost/roles/${role.name}` }
}))

const embedded = {
  roles: rolesResources
}

const links = {
  self: { href: 'http://localhost/users/admin' }
}

const resource = createHalResource(user, embedded, links)
```

## Creating an HAL paged resource

```ts
import { createHalPagedResource } from '@jalik/hal'

const users = [
  { username: 'admin' },
  { username: 'john' }
]

// we can add links to users (optional)
const usersResources = users.map((user) => createHalResource(user, undefined, {
  self: { href: `http://localhost/users/${user.username}` }
}))

const embedded = {
  users: usersResources
}

const page = {
  number: 3,
  size: 2,
  totalElements: 10,
  totalPages: 5
}

const links = {
  first: 'http://localhost/users?p=1',
  prev: 'http://localhost/users?p=2',
  self: 'http://localhost/users?p=3',
  next: 'http://localhost/users?p=4',
  last: 'http://localhost/users?p=5',
}

const resource = createHalPagedResource(embedded, page, links)
```

## Getting the HAL embedded values

```ts
import { getHalEmbedded } from '@jalik/hal'

const doc = {
  username: 'admin',
  _embedded: {
    roles: [
      { name: 'administrator' },
      { name: 'member' }
    ]
  }
}

const embedded = getHalEmbedded(doc)
// embedded = { roles[] }
```

## Getting the HAL links

```ts
import { getHalLinks } from '@jalik/hal'

const doc = {
  username: 'admin',
  _links: {
    self: { href: 'http://localhost/users/admin' }
  }
}

const links = getHalLinks(doc)
// links = { self }
```

## Getting the HAL page information

```ts
import { getHalPage } from '@jalik/hal'

const doc = {
  _embedded: { users: [] },
  page: {
    number: 1,
    size: 0,
    totalElements: 0,
    totalPages: 1
  }
}

const page = getHalPage(doc)
// page = { number, size, totalElements, totalPages }
```

## Changelog

History of releases is in the [changelog](./CHANGELOG.md) on GitHub.

## License

The code is released under the [MIT License](http://www.opensource.org/licenses/MIT).
npm package: @jalik/observer
Description: A library to observe events and trigger callbacks.
Author: Karl Stein
Latest version: 2.2.2

# @jalik/observer

![GitHub package.json version](https://img.shields.io/github/package-json/v/jalik/js-observer.svg)
![Build Status](https://github.com/jalik/js-observer/actions/workflows/node.js.yml/badge.svg)
![GitHub last commit](https://img.shields.io/github/last-commit/jalik/js-observer.svg)
[![GitHub issues](https://img.shields.io/github/issues/jalik/js-observer.svg)](https://github.com/jalik/js-observer/issues)
![GitHub](https://img.shields.io/github/license/jalik/js-observer.svg)
![npm](https://img.shields.io/npm/dt/@jalik/observer.svg)

Make anything observable.

## Introduction

The Observer design pattern is a well known pattern to create reactive applications.  
You can attach observers to a form text field, then when the text field value changes, all
observers are notified of that change and thus can do something in response.

## Features

* Add event listeners
* Remove event listeners
* Emit events with arguments passed to listeners
* TypeScript declarations ♥

## Sandbox

Play with the lib here:
https://codesandbox.io/s/jalik-observer-demo-de16gw?file=/src/index.js

## Installing

```shell
npm i -P @jalik/observer
```
```shell
yarn add @jalik/observer
```

## Adding an event listener

```js
import { Observer } from '@jalik/observer'

class Person {
  constructor (name) {
    this.name = name
    // Create the observer with current context
    this.observer = new Observer(this)
  }

  on (event, observer) {
    // Attach observer
    this.observer.on(event, observer)
  }

  say (words) {
    // Notify observers
    this.observer.emit('say', words, new Date())
  }
}

const karl = new Person('karl')

karl.on('say', function (words, date) {
  console.log(`${this.name} said: "${words}"`)
})
// this will show: karl said: "hello"
karl.say('hello')
```

## Removing an event listener

```js
import { Observer } from '@jalik/observer'

const listener = function () {
  console.log('double click detected')
  // This avoid the current function to be called
  // on the next "doubleClick" event notification.
  observer.off('doubleClick', listener)
}

const observer = new Observer()
observer.on('doubleClick', listener)

// This will call the doubleClickListener once.
observer.emit('doubleClick')

// This will not call the doubleClickListener
// since it has been detached in the previous call.
observer.emit('doubleClick')
```

## Changelog

History of releases is in the [changelog](./CHANGELOG.md).

## License

The code is released under the [MIT License](http://www.opensource.org/licenses/MIT).
npm package: @jalik/react-lightbox
Description: Light box component for React
Author: Karl Stein
Latest version: 1.0.12

# @jalik/react-lightbox

![GitHub package.json version](https://img.shields.io/github/package-json/v/jalik/react-lightbox.svg)
![GitHub](https://img.shields.io/github/license/jalik/react-lightbox.svg)
![GitHub last commit](https://img.shields.io/github/last-commit/jalik/react-lightbox.svg)
[![GitHub issues](https://img.shields.io/github/issues/jalik/react-lightbox.svg)](https://github.com/jalik/react-lightbox/issues)
![npm](https://img.shields.io/npm/dt/@jalik/react-lightbox.svg)

# Quick start

This example allows to open any clicked images in `LightBoxWrapper` tags.

```js
import { LightBoxProvider, LightBoxWrapper } from '@jalik/react-lightbox';

const images = [
  {alt: 'dogs', src: '/relative/images/dogs.jpg'},
  {alt: 'cats', src: 'http://localhost/images/cats.jpg'},
];

function App() {
  return (
    <LightBoxProvider
      duration={3000}
      loop
    >
      <div>
        <h1>Images</h1>
        <LightBoxWrapper items={images}>
          {images.map((image) => (
            <img src={image.src} alt={image.alt} />
          ))}
        </LightBoxWrapper>
      </div>
    </LightBoxProvider>
  );
}
```

## Changelog

History of releases is in the [changelog](./CHANGELOG.md).

## License

The code is released under the [MIT License](http://www.opensource.org/licenses/MIT).
npm package: @jaller94/node-co2-monitor
Description: Read CO₂ concentration, temperature and humidity from TFA Dostmann AirCO2NTROL Mini & Coach.
Author: Christian Paul
Latest version: 0.3.4

# node-co2-monitor

Read CO₂ concentration, temperature and humidity from TFA Dostmann AirCO2NTROL Mini & Coach.

## Contents

* [Supported Hardware](#supported-hardware)
* [Install](#install)
* [Getting started](#getting-started)
* [API](#api)
    * [Methods](#methods)
    * [Events](#events)
* [Credits](#credits)
* [License](#license)


## Supported Hardware

* [TFA Dostmann AirCO2NTROL Mini - Monitor CO2 31.5006](https://www.tfa-dostmann.de/produkt/co2-monitor-airco2ntrol-mini-31-5006/)
* [TFA Dostmann AirCO2NTROL Coach - Monitor CO2 31.5009](https://www.tfa-dostmann.de/en/produkt/co2-monitor-airco2ntrol-coach-31-5009/)


## Install

```bash
npm install @jaller94/node-co2-monitor
```


## Getting started

```javascript
'use strict';
const CO2Monitor = require('@jaller94/node-co2-monitor');

const monitor = new CO2Monitor();

// Connect device.
monitor.connect((err) => {
    if (err) {
        return console.error(err.stack);
    }
    console.log('Monitor connected.');

    // Read data from CO2 monitor.
    monitor.transfer();
});

// Get results.
monitor.on('temp', (temperature) => {
    console.log(`temp: ${ temperature }`);
});
monitor.on('co2', (co2) => {
    console.log(`co2: ${ co2 }`);
});
monitor.on('hum', (humidity) => {
    console.log(`hum: ${ humidity }`);
});

// Error handler
monitor.on('error', (err) => {
    console.error(err.stack);
    // Disconnect device
    monitor.disconnect(() => {
        console.log('Monitor disconnected.');
        process.exit(0);
    });
});
```


## API
### Methods
#### new CO2Monitor(options) -> Object
Create CO2Monitor instance.

#### monitor.connect(Function callback)
Setup usb connection to CO2 monitor.

#### monitor.disconnect(Function callback)
Close device connection.

#### monitor.transfer([Function callback])
Start data transfer from CO2 monitor.

#### monitor.temperature -> Number
Get latest Ambient Temperature (Tamb) in ℃.

#### monitor.co2 -> Number
Get latest Relative Concentration of CO2 (CntR) in ppm.

#### monitor.humidity -> Number
Get latest Relative Humidity of CO2 in relative humidity * 100. Only the Coach supports this value. The Mini will report 0.

### Events

#### temp -> Number
Triggered by temperature update with Ambient Temperature (Tamb) in ℃.

#### co2 -> Number
Triggered by co2 update with Relative Concentration of CO2 (CntR) in ppm.

#### hum -> Number
Triggered by hum update with Relative Humidity of CO2 in relative humidity * 100. Only the Coach supports this value. The Mini will report 0.

#### error -> Error
Triggered by error.


## Projects using node-co2-monitor

* [CO2 Monitor Exporter](https://github.com/huhamhire/co2-monitor-exporter) - Prometheus exporter for CO2 concentration and indoor temperature from TFA Dostmann AirCO2NTROL Mini.


## Credits

Inspired by Henryk Plötz:
[Reverse-Engineering a low-cost USB CO₂ monitor](https://hackaday.io/project/5301-reverse-engineering-a-low-cost-usb-co-monitor/log/17909-all-your-base-are-belong-to-us).


## License

MIT
npm package: @jalmendhry1/joes-components
Description: Running locally can cause issues with multiple versions of react/styled-components producing an error relating to invalid hook calls.
Author: Joe Al-mendhry
Latest version: 1.0.1

# Local dev

Running locally can cause issues with multiple versions of react/styled-components producing an error relating to invalid hook calls.

https://github.com/facebook/react/issues/14257

To fix this locally, run the following:

```
  cd YOUR_PROJECT/
    yarn install

  cd joes-components/
    yarn install
    npm link ../path/to/your-project/node_modules/react
    npm link ../path/to/your-project/node_modules/styled-components
    yarn link

  cd YOUR_PROJECT/
    yarn link @jalmendhry1/joes-components
```

# Commands

```bash
yarn dev
```

This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.

will rebuild if you change files within src/

Then run Storybook

### Storybook

Run inside another terminal:

```bash
yarn storybook
```

This loads the stories from `./src/componetns/**/*.stories.tsx`.

## Configuration

TODO:
implement husky hooks for ESlint/Prettier/Tests

### Jest

Jest tests are set up to run with `npm test` or `yarn test`.

### Bundle analysis

Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visulize it with `npm run analyze`.

#### Setup Files

This is the folder structure we set up for you:

```txt
/src
  /components/
    /YourComponent
      YourComponent.tsx         # EDIT THIS
      YourComponent.test.tsx    # EDIT THIS
      YourComponent.stories.tsx # EDIT THIS
      YourComponent.scss        # EDIT THIS
      index.ts
/.storybook
  main.js
  preview.js
.gitignore
package.json
README.md                       # EDIT THIS
tsconfig.json
```

### Rollup

uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.

### TypeScript

`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.

## Module Formats

CJS, ESModules, and UMD module formats are supported.

The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.

## Named Exports

Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.

## Including Styles

There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.

For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader.
npm package: @jalngo/gtools
Description: 工具库
Author: JalnGo
Latest version: 0.0.2

# Gtools

工具库

## API

| name     | 说明             |
| -------- | ---------------- |
| Utils    | 常用 API         |
| EleRules | Element 表单验证 |
| Stock    | 本地存储         |

## NPM 安装

```javascript
npm i @jalngo/gtools
```

## 使用

```javascript
import Gtools from '@jalngo/gtools';

// or

import { Utils, EleRules, Stock } from '@jalngo/gtools';
```

<br>
<br>

### （一）Utils 说明

| 属性         | 说明     |
| ------------ | -------- |
| DataType     | 数据类型 |
| ObjectExtend | 对象扩展 |

### （二）EleRules 说明

| 属性          | 说明                     |
| ------------- | ------------------------ |
| createRules   | 生成验证规则方法（必须） |
| LimitEnums    | 限制枚举                 |
| Patterns      | 正则表达式合集           |
| baserule      | 生成正则表达式验证方法   |
| comparerule   | 多个比较 生成验证方法    |
| patternsTest  | 正则 test 验证方法       |
| thresholdrule | 阈值 区间限制验证方法    |

### （三）Stock 说明

| 属性      | 说明         |
| --------- | ------------ |
| Stock     | Stock 类     |
| StockType | 存储类型枚举 |
npm package: @jalontsui/jt-element
Description: Vue3 components library
Author: Jaontsui
Latest version: 1.0.0

# j-element
j-element 实现

# 图标解决方案
fontawesome
官网：https://docs.fontawesome.com/web/use-with/vue/add-icons#set-up-the-library
pnpm i -S @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons
pnpm i -S @fortawesome/vue-fontawesome@latest-3
pnpm i @fortawesome/fontawesome-svg-core -S

# 学习的源码地址
https://git.imooc.com/coding-693/v-element
npm package: @jalpa.buha/chatbot-package
Description: A reusable React chatbot component package
Author: Jalpa Buha
Latest version: 2.0.10

# My Chatbot Package

A customizable **React chatbot component** that can be embedded in any React project. Includes typewriter effects, PDF export, and persistent local chat history.  

---

## **Features**

- Fully React-based, lightweight, and responsive  
- Minimized & maximized states  
- Typewriter effect for AI messages  
- Input validation and character count  
- Persistent chat history (localStorage)  
- Download chat conversation as PDF  
- Customizable primary color and styles  
- Ready to publish as an npm package  

---

## **Installation**

Install via npm:

```bash
npm install chatbot-package

```

## **Usage**
import Chatbot from "my-chatbot-package";

function App() {
  return (
    <div>
      <h1>Demo Chatbot</h1>
      <Chatbot 
        title="Superwise Expert Agent" 
        agentId="AGENT_ID_HERE" 
        primaryColor="#000000" 
      />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
npm package: @jalpa.buha/superwise-chatbot-package
Description: A reusable React chatbot component package
Author: Jalpa Buha
Latest version: 2.0.1

# My Chatbot Package

A customizable **React chatbot component** that can be embedded in any React project. Includes typewriter effects, PDF export, and persistent local chat history.  

---

## **Features**

- Fully React-based, lightweight, and responsive  
- Minimized & maximized states  
- Typewriter effect for AI messages  
- Input validation and character count  
- Persistent chat history (localStorage)  
- Download chat conversation as PDF  
- Customizable primary color and styles  
- Ready to publish as an npm package  

---

## **Installation**

Install via npm:

```bash
npm install chatbot-package

```

## **Usage**
import Chatbot from "my-chatbot-package";

function App() {
  return (
    <div>
      <h1>Demo Chatbot</h1>
      <Chatbot 
        title="Superwise Expert Agent" 
        agentId="AGENT_ID_HERE" 
        primaryColor="#000000" 
      />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);