@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:

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.

"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.

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 for details on changes and updates.