ChatWidget

Lightweight React chat widget with streaming responses and optional Cloudflare Turnstile support.

Usage

import { ChatWidget } from "your-package-name";
import "your-package-name/styles.css";

export default function Page() {
  return (
    <ChatWidget
      apiUrl="https://your-api.com/chat"
      placeholder="Type a message..."
      sendLabel="Send"
    />
  );
}

Props

Prop	Type	Required	Description
apiUrl	string	yes	Endpoint that receives { query: string } and returns a streamed response
placeholder	string	yes	Input placeholder text
sendLabel	string	yes	Submit button label
title	string	no	Header title
description	string	no	Header description
initialMessages	string[]	no	Initial assistant messages
onClose	() => void	no	Called when close button is clicked
errorMessage	string	no	Fallback error message
turnstileSiteKey	string	no	Cloudflare Turnstile site key
turnstileAction	string	no	Turnstile action name

API Requirements

The widget sends:

{
  "query": "user message"
}

Expected response:

• text/plain stream (chunked)
• Each chunk is appended to the assistant message

Turnstile (Optional)

If turnstileSiteKey is provided:

• Token is fetched automatically
• Sent via header:

x-turnstile-token: <token>

Styling

The component requires:

import "chatbot-widget/styles.css";

Styles use CSS variables for easy customization:

--primary
--background
--border
--radius
--font-sans

Development

A demo app is included for local development.

npm run dev

Notes

• React is a peer dependency
• Built with Vite in library mode
• ES module output
• Supports streaming responses