@walkspan/chatbot

A floating chatbot component for React applications with Tailwind CSS styling.

Installation

npm install @walkspan/chatbot

or with yarn:

yarn add @walkspan/chatbot

or with pnpm:

pnpm add @walkspan/chatbot

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-dom react-icons tailwindcss

| Package | Version | |---------|---------| | react | >= 17 | | react-dom | >= 17 | | react-icons | >= 4 | | tailwindcss | >= 3 |

Usage

import FloatingChatbot from '@walkspan/chatbot';

function App() {
  return (
    <div>
      <FloatingChatbot
        apiUrl="https://your-api-endpoint.com/chat"
        position="bottom-right"
        title="AI Assistant"
        placeholder="Ask something..."
      />
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiUrl | string | required | The API endpoint URL for the chatbot backend | | position | "bottom-right" | "bottom-left" | "bottom-right" | Position of the floating chatbot button | | title | string | "AI Assistant" | Title displayed in the chat window header | | placeholder | string | "Ask something..." | Placeholder text for the input field |

API Response Format

Your API endpoint should accept POST requests with the following body:

{
  "text": "user message"
}

And return a response in this format:

{
  "message": "Bot response message",
  "link": "https://optional-link.com"
}

License

MIT