QIE Chatbot

A React-based chatbot package for inquiries about the QIE Blockchain Ecosystem.

Table of Contents

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

Installation

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

npm install qie-chatbot

or if you're using Yarn:

yarn add qie-chatbot

Usage

To use the QIE Chatbot in your React application:

1. Import the component in your page or component file:

import Chatbot from 'qie-chatbot';

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

function MyComponent() {
  return (
    <div>
      <h1>Welcome to QIE Blockchain</h1>
      <Chatbot apiUrl="https://api.example.com/qie" />
    </div>
  );
}

export default MyComponent;

Make sure to replace "https://api.example.com/qie" with the actual QIE API URL.

Props

The QIE Chatbot component accepts the following prop:

• apiUrl (required): The URL of the QIE API that the chatbot will communicate with.

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:

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

'use client'

import Chatbot from 'qie-chatbot'

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

2. Use this client component in your page or layout:

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

export default function Home() {
  return (
    <main>
      <h1>Welcome to QIE Blockchain</h1>
      <ChatbotClient apiUrl="https://api.example.com/qie" />
    </main>
  );
}

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

Styling

The QIE 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 QIE 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.

1. Navigate to the root directory of the QIE Chatbot project.
2. Run npm link to create a global link to this package.
3. In your consuming application (the app where you want to use and test the QIE Chatbot), run npm link qie-chatbot to use the local version of the package.
4. In the QIE 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 QIE 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.

1. In the root directory of the QIE Chatbot project, run npm run build to ensure the latest changes are built.
2. Run npm pack. This will create a .tgz file.
3. In your consuming application, you can install this local version using:

   npm install /path/to/qie-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

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

Testing in a Consuming Application

To properly test your changes:

1. Create a new React application or use an existing one where you can integrate the QIE Chatbot.
2. Use either npm link or npm pack as described above to use your local version of QIE Chatbot in this application.
3. Implement the QIE Chatbot in your test application as described in the Usage section.
4. Test all features and ensure that your changes work as expected in a real application environment.
5. 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.

Support

If you encounter any issues or have questions about implementing the QIE Chatbot, please contact our support team at [email protected].

License

This project is licensed under the ISC License - see the LICENSE file for details.

For more information about the QIE Blockchain Ecosystem, please visit QIE Blockchain's official website.

If you encounter any issues or have questions, please file an issue on our GitHub repository.