💬 UI Chat Widget (React + Storybook)

A plug-and-play floating chat widget for React applications.
Made to help our clients troubleshoot and help them through any inconvinience.

Quick Start

1) Install

npm install ui-chat-storybook

2) Import

import { Chat } from 'ui-chat-storybook'

3) Setup

To enable message persistence in Firestore, create a .env file in your project root with:

VITE_API_SERVICE=...
VITE_API_FIREBASE_NAME_INSTANCE=...
VITE_API_REQUESTTYPE =...
VITE_API_FIREBASE_APIKEY=...
VITE_API_FIREBASE_AUTHDOMAIN=...
VITE_API_FIREBASE_PROJECTID=...
VITE_API_FIREBASE_STORAGE_BUCKET=...
VITE_API_FIREBASE_SENDERID=...
VITE_API_FIREBASE_APPID=...
VITE_API_FIREBASE_MEASUREMENTID=...
VITE_API_UID=...

4) Use

export default function App() {
  const userEmail = '[email protected]'

  return (
    <Chat
      title='Asistente'
      initialMessages={[]}       // optional preload
      windowColor='#008000'      // header color
      user={userEmail}           // identifies the current user
    />
  )
}

The widget automatically appears in the bottom-right corner of your app.

Development (for contributors)

Get Started

1) Clone

git clone <repo link>

2) Install

cd ui-chat-storybook
npm install

3) Run

npm run storybook

Note: Restart Storybook after editing .env.

4) Build

npm run build

5) Deploy

Be sured to login to the appropiate account via NPM.

npm version patch
npm publish --access public