Requirements

• React: ^16.8.0, ^17.0.0, or ^18.0.0 required
• React DOM: ^16.8.0, ^17.0.0, or ^18.0.0 required
• Node.js: version 20.x or 22.x required

🤖 cuckuku-ai-chatbot-npm-reactjs-nextjs

A customizable AI chatbot React component that is easy to integrate into your React or Next.js applications. Styled with flexibility and powered via an API endpoint.

🚀 Installation

npm install cuckuku-ai-chatbot-npm-reactjs-nextjs


## 💡 Usage

### Basic Usage (Default Theme)
```jsx
import ChatbotTemplates from 'cuckuku-ai-chatbot-npm-reactjs-nextjs';

<ChatbotTemplates />

Using Theme Config File

import ChatbotTemplates from "cuckuku-ai-chatbot-npm-reactjs-nextjs";

<ChatbotTemplates themeConfigUrl="/themeConfig.json" />;

Next.js Usage (SSR Issues)

If you encounter SSR errors in Next.js, use dynamic import:

import dynamic from "next/dynamic";

const ChatbotTemplates = dynamic(() => import("cuckuku-ai-chatbot-npm-reactjs-nextjs"), {
  ssr: false, // Disable SSR for this component
});

// Then use normally
<ChatbotTemplates themeConfigUrl="/themeConfig.json" />;

Note: All customization is now done through JSON config files only. If no themeConfigUrl is provided, the component will use the default theme.

Wrapping with Provider and Controlling Visibility from Any Component

To control the chatbot's visibility state (show/hide) from anywhere in your app, wrap your root component (e.g. App) with the StatusComponentProvider.

import ChatbotTemplates, { StatusComponentProvider } from "cuckuku-ai-chatbot-npm-reactjs-nextjs";

function App() {
  return (
    <StatusComponentProvider>
      <ChatbotTemplates />
      {/* Other components */}
    </StatusComponentProvider>
  );
}

Then, in any child component, use the useStatusComponent() hook to access or update the chatbot status:

import { useStatusComponent } from "cuckuku-ai-chatbot-npm-reactjs-nextjs";

const YourComponent = () => {
  const { statusChatbot, setStatusChatbot } = useStatusComponent();

  const handleClickToggleChatbot = () => {
    setStatusChatbot(!statusChatbot);
  };

  return (
    <button onClick={handleClickToggleChatbot}>
      {statusChatbot ? "Hide Chatbot" : "Show Chatbot"}
    </button>
  );
};

This approach allows you to show or hide the chatbot dynamically, from any part of your application UI.

📂 Common File Paths

Different project setups require different paths:

• React (CRA): Place themeConfig.json in public/ folder → Use "/themeConfig.json"
• Next.js: Place themeConfig.json in public/ folder → Use "/themeConfig.json"
  • Note: If you get SSR errors, use dynamic import with ssr: false
• Express.js: Place in static folder → Use "/assets/themeConfig.json"

🧩 Props

| Prop | Type | Description | | -------------- | ------ | ------------------------------------- | | themeConfigUrl | string | URL to external themeConfig.json file |

Theme Config JSON Properties

| Property | Type | Description | | ---------------- | ------------- | --------------------------------------- | | LogoIcon | string | URL of the top-left logo icon | | ChatbotIcon | string | Avatar/icon of the chatbot | | Title | string | Chatbot title text | | TitleColor | string | Title text color | | TitleBgColor | string | Background (or gradient) for the title | | GreetingSentence | string | Initial greeting message | | HolderInputText | string | Placeholder text for the input field | | BadgeNumber | boolean | Show badge notification or not | | BgColor | string | Chat popup background color | | BgMaskColor | string | Overlay color | | BgOpacity | number/string | Overlay opacity (0 to 1) | | BgMaskImg | string | Overlay background image URL | | MainColor | string | Primary color for theme | | SubColor | string | Secondary color | | AudioShow | boolean | Enable audio feedback (true/false) | | ExampleQuestions | array | Array of example questions (strings) | | IconName | string | FontAwesome icon name (e.g., "faRobot") | | webhookUrl | string | API endpoint base URL | | embedCode | string | Embed code for API authentication |

## 🛠️ For Development

```bash
# Build the package
npm run build

# Update version (choose one)
npm version patch   # Bug fixes (1.0.0 → 1.0.1)
npm version minor   # New features (1.0.0 → 1.1.0)
npm version major   # Breaking changes (1.0.0 → 2.0.0)

# Publish to npm
npm publish
```

**Note:** The build process may show warnings about bundle size due to animation libraries, but this doesn't affect functionality.