Querium Chatty - A React function component for displaying a conversation between a user and chatbot

Baseline template/process used

This repository was published together with an article on how to create a react component library using Vite's library mode.

How to Use

Install

npm i @jimvanriper/chatty

Import

In the file you want to display Chatty, import the component and type (if using Typescript):

import { Chatty, type ChatMsg } from "@jimvanriper/chatty"

Instantiate Chatty

Instantiate Chatty in its parent

<Chatty chats={myConversation}></Chatty>

Chatty will expand to fill the width of its parent container and will grow vertically as much as needed. The parent container is responsible for letting Chatty control the parent's vertical height or enforcing a height and then enabling scrolling with overflow-y: auto.

Data

The data must be passed as a ChatMsg[] array. An example of this is shown below.

  const DevData: ChatMsg[] = [
    {
      timestamp: now,
      source: "USER",
      msg: "Hello",
      log: "log of Hello by USER",
    },
  ]

Chatty works with both JavaScript and Typescript. Here is the type definition for ChatMsg.

export type ChatMsg = {
  timestamp: number; // JS timestamp
  source: 'USER' | 'BOT';
  msg: string; // unformatted, plain text message ***
  log: string | object; // unformatted, plain text message or POSJ object ****
};

Developing

From your projects folder, run...

gh repo clone QueriumCorp/chatty
cd chatty
npm install
npm run dev

The files in /src are the test app. The files in /lib are the chatty source code.

When it is working as expected, you have to build it with...

npm run build

You can't have any errors including TypeScript ones or the build will fail. Once those are fixed, you are almost ready to publish to npm. But first you have to update the version number in the package.json file using the semantic versioning scheme where x.y.z are major, minor, and patch versions. Major versions are 'breaking' changes, minor versions are 'feature' changes, and patch versions are 'bug' fixes. After the version is updated and pushed to GitHub, you can publish to npm with...

npm publish --access=public