@dpka54/next-chatbot-widget

v0.1.3

Published

6 months ago

A customizable React chatbot widget with tabs for home, messages, help, and news

0High
0Medium
0Low

dpka54

react chatbot widget ui component typescript

next-chatbot-widget

A lightweight, client-side React chatbot widget with tabs (Home, Messages, Help, News) that docks to the bottom-right of the screen. Ships as a reusable component you can drop into any React or Next.js app.

Installation

npm i @dpka54/next-chatbot-widget

Usage (Next.js or React)

Import the component and the package CSS once in your app (e.g., in your root layout, app provider, or App.tsx). The CSS is minimal and removes the need for Tailwind in the consumer app.

// app/layout.tsx (Next.js) or src/App.tsx (CRA/Vite)
import '@dpka54/next-chatbot-widget/styles.css';
import { ChatWidget } from '@dpka54/next-chatbot-widget';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <ChatWidget />
      </body>
    </html>
  );
}

The widget renders a launcher button in the bottom-right corner and a floating panel when opened.

If your app uses Tailwind

From v0.1.2, the widget no longer relies on Tailwind utility classes in consumers. You only need to import the package CSS as shown above.
If you were on v0.1.1 and saw broken layout in your app, upgrade to ^0.1.2.

API

ChatWidget: Top-level widget including launcher + panel
ChatPanel: Just the floating panel (if you want to control a custom launcher)
LauncherButton: Just the launcher button (if you render panel elsewhere)
HomeTab, MessagesTab, HelpTab, NewsTab, TabNavigation: Composable building blocks
useChatStore: Zustand store with isOpen, activeTab, toggle(), setTab()

Customization (props)

All props are optional and have sensible defaults.

position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' (default 'bottom-right')
size: 'sm' | 'md' | 'lg' | { width: number|string, height: number|string } (default 'md')
offset: number | string — distance from the nearest edge for the panel (default '5rem')
zIndex: number — override stacking order
theme: { bg?, text?, border?, primary?, accent? } — override key colors

Example:

import '@dpka54/next-chatbot-widget/styles.css';
import { ChatWidget } from '@dpka54/next-chatbot-widget';

export default function Layout() {
  return (
    <>
      {/* bottom-left, custom size, custom colors */}
      <ChatWidget
        position="bottom-left"
        size={{ width: 360, height: 520 }}
        theme={{ bg: '#111827', text: '#fff', accent: '#7c3aed' }}
      />
    </>
  );
}

Requirements

peerDependencies: react and react-dom (18 or 19)
dependencies: zustand, framer-motion (installed automatically)

Developing locally

npm run dev runs the Next.js demo app in this repo.
npm run build:lib builds the distributable library to dist/.
npm publish will trigger prepublishOnly which builds the library and copies the CSS.

Notes

Components are marked as client components ("use client") and work in Next.js App Router.
Styles are provided via a small styles.css shipped with the package; Tailwind is not required in consumer apps.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme