open-index/open-npm huggingface dataset:
npm package: @hasham94/ai-chat-widget
Description: A customizable chat widget component built with React and TypeScript using Vite. Supports chat interaction with large language models (LLMs), local message persistence, and theming.
Latest version: 2.4.0

# React + TypeScript + Vite

A customizable chat widget component built with React and TypeScript using Vite.
Supports chat interaction with large language models (LLMs), local message persistence, and theming.

## Features
Simple React + TypeScript + Vite setup

Customizable UI: colors, icons, modes, and varaints

Basic chat interaction powered by Hugging Face or other LLM APIs

Local persistence of chat messages with localStorage

Maintenance mode disabling input with a warning banner

## Installation

npm install @hasham94/chat-widget2
# or
yarn add @hasham94/chat-widget2

## Usage

```tsx
import React from "react";
import ChatWidget from "@hasham94/chat-widget2";

function App() {
  return (
    <ChatWidget
      primaryColor="#5C6BC0"
      maintenanceMode={false}
      icon={<YourCustomIcon />}
      variant="drawer"
      apiKey='<hugging face api key>'
    />
  );
}

export default App;
```



## Chat Configuration

| Prop                 | Type                     | Description                                                     |
| -------------------- | ------------------------ | --------------------------------------------------------------- |
| `primaryColor`       | `string`                 | Primary color for the chat button and UI.                       |
| `isUnderMaintenance` | `boolean`                | When `true`, disables input and displays a maintenance message. |
| `isOnline`           | `boolean`                | Displays online/offline status indicator.                       |
| `variant`            | `"bubble"` | `"drawer"`  | Controls the chat layout: floating bubble or full-width drawer. |
| `icon`               | `string`  | `null`       | Optional custom emoji or image URL for the chat launcher icon.  |


## Hugging Face Integration
https://huggingface.co/

## Link to published package
https://www.npmjs.com/package/@hasham94/ai-chat-widget
npm package: @hashbite/gatsby-transformer-react-docgen
Description: Expose React component metadata and prop information as GraphQL types
Author: Jason Quense
Latest version: 8.8.1

# gatsby-transformer-react-docgen

Parses inline component-documentation using
[react-docgen](https://github.com/reactjs/react-docgen).

## Install

```shell
npm install gatsby-transformer-react-docgen
```

## Usage

Add a plugin-entry to your `gatsby-config.js`

```js
module.exports = {
  plugins: [`gatsby-transformer-react-docgen`],
}
```

For custom resolvers or handlers, all config options are passed directly to react-docgen.
In addition any custom handlers are passed the component file `Node` object as their last
argument for more Gatsby specific handler behavior.

```js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-transformer-react-docgen",
      options: {
        resolver: require("./custom-resolver"),
      },
    },
  ],
}
```

### File parsing and babel configs

By default, your local `.babelrc` will be used to determine how to parse source files. Don't worry
if you don't have a local babel config and are using Gatsby's default settings! If there isn't any config react-docgen will
use it's own, permissive parsing options.

In the case of more complex sites with local custom configs, such as in a monorepo, you may have to tell babel (via react-docgen),
how to properly resolve your local babel config. See the [react-docgen documentation for more details](https://github.com/reactjs/react-docgen#options).

```js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-transformer-react-docgen",
      options: {
        babelrcRoots: ["../packages/*"],
      },
    },
  ],
}
```

You'll also need to include a source-plugin, such as
[gatsby-source-filesystem](https://www.npmjs.com/package/gatsby-source-filesystem),
so that the transformer has access to source data.

> Note: that at least one of your React Components must have PropTypes defined.

## How to query

An example _graphql_ query to get nodes:

```graphql
{
  allComponentMetadata {
    edges {
      node {
        displayName
        description
        props {
          name
          type
          required
        }
      }
    }
  }
}
```