📦 wfi-chat

A simple and customizable chatbot widget for React applications.

🚀 Installation

npm install wfi-chat
# or
yarn add wfi-chat

⚙️ Setup

Since this package doesn’t export TypeScript types, you’ll need to declare the module manually if you’re using TypeScript:

// declarations.d.ts
declare module 'wfi-chat';

🛠️ Usage

import { ChatBot, ConfigProvider } from 'wfi-chat';
import 'wfi-chat/dist/index.css';
import './App.css';

function App() {

    return (
        <>
            <h1>Other Data</h1>
            <ConfigProvider
                initialConfig={{
                    clientId: 'client-from-backend-123',
                    sessionId: 'session-from-backend-456',
                }}
            >
                <ChatBot/>
            </ConfigProvider>
        </>
    );
}

export default App;

🧩 Components

🔹 ConfigProvider

Provides default chatbot configuration.

| Prop | Type | Required | Description | | --------------- | ------ | -------- | ----------------------------------------- | | initialConfig | object | ✅ | Contains default clientId, sessionId. |

🔹 ChatBot

Renders the chatbot widget.

| Prop | Type | Required | Description | | ----------- | ------ | -------- | ------------------------------- | | userId | string | ✅ | Unique identifier for the user. | | clientId | string | ✅ | Client identifier. | | sessionId | string | ✅ | Chat session identifier. |

🎨 Styles

import 'wfi-chat/dist/index.css';

Override in your own stylesheets if needed.

🔧 TypeScript Setup

// global.d.ts
declare module 'wfi-chat';

📂 Directory Structure

my-app/
├─ src/
│  ├─ App.tsx
│  ├─ App.css
│  ├─ global.d.ts
├─ package.json

🗺️ Roadmap

• ✅ Basic ChatBot and ConfigProvider
• ❌ TypeScript type exports (coming soon)
• ❌ Custom theme support

🤝 Contributing

Pull requests are welcome!

📄 License

NIL