open-index/open-npm huggingface dataset:
npm package: @metabrainnexia/bot-core
Description: A core library that provides functionalities to integrate with the Nexia Bot Framework Web Chat. This library is designed for seamless integration with vanilla JavaScript applications.
Latest version: 1.2.0

# Nexia Bot Core

A core library that provides functionalities to integrate with the Nexia Bot Framework Web Chat. This library is designed for seamless integration with vanilla JavaScript applications.

## Table of Contents

- [Installation](#installation)
- [Usage](#usage)
- [API Reference](#api-reference)
- [Style Options](#style-options)
- [Contributing](#contributing)
- [License](#license)

## Installation

To install the core library, you can either download the library files directly or use a package manager like npm.

### Using npm

```bash
npm install @nexia/bot-core
```

## Usage

Here's a quick example of how to use the library:

```javascript
import { initializeWebChat, loadBotFrameworkWebChat } from "@nexia/bot-core";

// Load the Bot Framework Web Chat script
loadBotFrameworkWebChat()
  .then(() => {
    // Initialize Web Chat
    const directLineToken = "YOUR_DIRECT_LINE_TOKEN";
    const element = document.getElementById("webchat");
    initializeWebChat(element, directLineToken);
  })
  .catch((error) => {
    console.error("Failed to load WebChat:", error);
  });
```

## API Reference

### `loadBotFrameworkWebChat()`

Loads the Bot Framework Web Chat script.

**Returns:** `Promise<void>`

### `initializeWebChat(element: HTMLElement, directLineToken: string)`

Initializes the Web Chat within the specified HTML element.

**Parameters:**

- `element` - The HTML element where the Web Chat will be rendered.
- `directLineToken` - Your Direct Line token for authentication.

**Returns:** `Promise<void>`

## Style Options

You can customize the appearance of the Web Chat using the `styleOptions` parameter. Here are the available options:

```typescript
type StyleOptions = {
  accent?: string;
  backgroundColor?: string;
  subtle?: string;
  paddingRegular?: number;
  paddingWide?: number;
  bubbleBackground?: string;
  bubbleBorderColor?: string;
  bubbleTextColor?: string;
  // Add more options as needed
};
```

## Contributing

By participating in this project, you agree to abide by our [code of conduct](CONTRIBUTING.md).

## License

See the [LICENSE](LICENSE) file for details.
npm package: @metabrainnexia/bot-react
Description: React wrapper for Bot Framework WebChat
Latest version: 1.1.0

# @metabrainnexia/bot-react

The `@metabrainnexia/bot-react` library is a React wrapper around the `@metabrainnexia/bot-core`, allowing for easy integration of a customizable web chat interface into your React applications.

## Installation

To install the library, use npm or yarn:

```bash
npm install @metabrainnexia/bot-react
# or
yarn add @metabrainnexia/bot-react
```

## Usage

### Example (Next.js)

To use the web chat component in a Next.js project, import the `WebChatReact` component and pass the required properties.

```javascript
"use client";
import React from "react";
import { WebChatReact } from "@metabrainnexia/bot-react";

const Page = () => {
  return (
    <div>
      <WebChatReact
        directLineToken="YOUR_DIRECT_LINE_TOKEN"
        styleOptions={{
          accent: "#FFFe24",
          backgroundColor: "#Fe3e24",
          userAvatarInitials: "WC",
          fontSizeSmall: "12px",
          botAvatarImage: "https://i.imgur.com/83aoGyM.gif",
          avatarSize: 140,
          bubbleTextColor: "#000000",
        }}>
        <button
          className="webchat__microphone-button__icon"
          id="webchat__microphone-button__icon">
          <img src="https://i.imgur.com/83aoGyM.gif" alt="WC" />
        </button>
      </WebChatReact>
    </div>
  );
};

export default Page;
```

### Example (React)

For non-Next.js React applications, you can use `WebChatReact` similarly.

```javascript
import React from "react";
import { WebChatReact } from "@metabrainnexia/bot-react";

function App() {
  return (
    <div className="App">
      <WebChatReact
        directLineToken="YOUR_DIRECT_LINE_TOKEN"
        styleOptions={{
          accent: "#FFFe24",
          backgroundColor: "#Fe3e24",
        }}
      />
    </div>
  );
}

export default App;
```

## API Reference

### `WebChatReact` Component

#### Props:

- `directLineToken` (string, required): The token for authenticating with Direct Line.
- `styleOptions` (optional): Customize the style of the web chat interface.

## Style Options

- `accent`: string
- `backgroundColor`: string
- `fontSizeSmall`: number | string
- `avatarSize`: number
- `bubbleTextColor`: string
- `botAvatarImage`: string
- `userAvatarInitials`: string
- And many more... (See full style options in the `types.ts` file)

## License

This project is licensed under the MIT License.

## Contributors

- Boubaker Seddik Jouini (@boubakerjouini)

## Changelog

See [CHANGELOG.md](./CHANGELOG.md) for details on changes and updates.