Botric NPM | npm.io

Botric Chatbot

A React-based Chatbot package with Custom knowledge of your products to answer all the queries of your users.

Installation
Usage
Props
Next.js Usage
Styling
Peer Dependencies
Contributing
For Developers
Support
License

Installation

To install the Botric Chatbot package, run the following command in your project directory:

npm install Botric

or if you're using Yarn:

yarn add Botric

Usage

To use the Botric Chatbot in your React application:

Import the component in your page or component file:

import Chatbot from 'Botric';

Use the component in your JSX, passing the required apiUrl prop:

function MyComponent() {
  return (
    <div>
      <h1>Welcome to Botric Blockchain</h1>
      <Chatbot id="#######" />
    </div>
  );
}

export default MyComponent;

Make sure to replace ####### with the actual Botric's Bot ID.

Props

The Botric Chatbot component accepts the following prop:

id (required): The ID of the Botric Bot that you received when created the Bot.

Next.js Usage

For Next.js applications, you should use the Chatbot component in a client-side component, as it relies on browser APIs. Here's how to do it:

Create a new file, e.g., components/ChatbotClient.js:

'use client'

import Chatbot from 'Botric-chatbot'

export default function ChatbotClient({ id } : { id: string }) {
  return <Chatbot id={id} />;
};

Use this client component in your page or layout:

import ChatbotClient from '../components/ChatbotClient';

export default function Home() {
  return (
    <main>
      <h1>Welcome to Botric</h1>
      <ChatbotClient id=""  />
    </main>
  );
}

This approach ensures that the Chatbot component is only rendered on the client side, avoiding any server-side rendering issues.

Styling

The Botric Chatbot uses Emotion for styling. Emotion is a popular CSS-in-JS library that allows for dynamic and scoped styling. The styles are pre-packaged with the component, so you don't need to import any additional stylesheets.

Peer Dependencies

This package has the following peer dependencies:

React: ^16.8.0 || ^17.0.0 || ^18.0.0
React DOM: ^16.8.0 || ^17.0.0 || ^18.0.0

Make sure these are installed in your project.

Contributing

We welcome contributions to the Botric Chatbot package! Please read our CONTRIBUTING.md file for details on our code of conduct and the process for submitting pull requests.

For Developers

If you're a developer working on this project, here are some helpful instructions for local development:

Using npm link

npm link allows you to use your local version of the package in other projects without publishing to npm. This is useful for testing your changes in a real application environment.

Navigate to the root directory of the Botric Chatbot project.
Run npm link to create a global link to this package.
In your consuming application (the app where you want to use and test the Botric Chatbot), run npm link botric to use the local version of the package.
In the Botric Chatbot project directory, run npm run watch. This starts the Rollup watch mode, which will automatically rebuild the package whenever you make changes.

Now, any changes you make to the Botric Chatbot package will be immediately rebuilt and reflected in your consuming application.

Using npm pack

npm pack allows you to create a tarball of your package, simulating what would be published to npm. This is useful for testing the package as it would be after publication.

In the root directory of the Botric Chatbot project, run npm run build to ensure the latest changes are built.
Run npm pack. This will create a .tgz file.
In your consuming application, you can install this local version using:
```
npm install /path/to/Botric-chatbot-x.x.x.tgz
```
Replace x.x.x with the actual version number.

This method allows you to test the exact package that would be published to npm.

Development Workflow

Make your changes to the Botric Chatbot package.
Run npm run watch in the Botric Chatbot project directory to start the Rollup watch mode.
If you've added new dependencies, make sure to update the peerDependencies in package.json if necessary.
Update the version number in package.json following semantic versioning principles.
Test your changes thoroughly in a separate consuming application using either npm link or npm pack.
Update this README.md if you've made changes that affect usage or installation.
Commit your changes and create a pull request.

Testing in a Consuming Application

To properly test your changes:

Create a new React application or use an existing one where you can integrate the Botric Chatbot.
Use either npm link or npm pack as described above to use your local version of Botric Chatbot in this application.
Implement the Botric Chatbot in your test application as described in the Usage section.
Test all features and ensure that your changes work as expected in a real application environment.
Test different scenarios and edge cases to ensure robustness.

Remember, thorough testing in a real consuming application is crucial before submitting your changes for review.