Droplinked Chatbot

A React-based chatbot component with AI capabilities, now supporting both SSR and browser environments with dual builds.

Installation

npm install droplinked-chatbot-next

Usage

For SSR Frameworks (Next.js, etc.)

For SSR frameworks like Next.js, use the client export with dynamic imports:

'use client'

import dynamic from 'next/dynamic'

const Chatbot = dynamic(
  () => import('droplinked-chatbot-next/client'),
  { ssr: false }
)

function App() {
  return (
    <Chatbot 
      apiBaseUrl="https://your-api-base-url.com"
      drawerTrigger={(onClick) => (
        <button onClick={onClick}>Open Chat</button>
      )}
    />
  )
}

For Browser-Only Applications (Vite, Create React App, etc.)

For browser-only applications, you can import directly:

import { Chatbot } from 'droplinked-chatbot-next'

function App() {
  return (
    <Chatbot 
      apiBaseUrl="https://your-api-base-url.com"
      drawerTrigger={(onClick) => (
        <button onClick={onClick}>Open Chat</button>
      )}
    />
  )
}

Dual Builds

This package now provides dual builds for maximum compatibility:

• CommonJS: dist/index.cjs - For Node.js/SSR environments
• ES Module: dist/index.mjs - For modern browser bundlers
• Client Export: dist/index.client.js - For client-side only imports

The package.json uses modern "exports" field for proper resolution:

{
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    },
    "./client": "./dist/index.client.js"
  }
}

Integration Guide

React Version Compatibility

This component is compatible with React 18.x. If you encounter the following error:

TypeError: Cannot read properties of null (reading 'useContext')

This typically indicates a React version mismatch or context initialization issue.

Solution 1: Ensure React Version Compatibility

Make sure your project uses React 18.x:

npm install react@^18.3.1 react-dom@^18.3.1

Solution 2: Check Peer Dependencies

Install all required peer dependencies:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Solution 3: Proper React Context Initialization

Ensure your application properly initializes React context. Your root component should look like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ChakraProvider value={defaultSystem}>
      <App />
    </ChakraProvider>
  </React.StrictMode>
);

Solution 4: Module Resolution Issues

If you see this error:

require is not defined in ES module scope, you can use import instead

This indicates a mismatch between ES modules and CommonJS modules. To fix this:

1. Ensure your project's package.json has the correct type field:

   {
     "type": "module"
   }

2. Use import syntax instead of require:

   // Good
   import { Chatbot } from 'droplinked-chatbot-next';
      
   // Avoid
   const { Chatbot } = require('droplinked-chatbot-next');

3. If you must use CommonJS, rename your files to use the .cjs extension.

Solution 5: Module Resolution Configuration

If you're still experiencing issues, try adding this to your project's tsconfig.json or jsconfig.json:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "jsx": "react-jsx",
    "module": "ESNext",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

API Configuration

The chatbot requires an apiBaseUrl prop to connect to your backend services:

<Chatbot 
  apiBaseUrl={process.env.REACT_APP_API_BASE_URL}
/>

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | apiBaseUrl | string | Yes | Base URL for API endpoints | | apiKey | string | No | API key for authentication | | user | object | No | Initial user information | | drawerTrigger | function | Yes | Function that returns a React element to trigger the chat drawer |

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Examples

See the examples directory for detailed usage in different frameworks:

• Next.js Example
• React + Vite Example

Troubleshooting

Node.js Version Warning

If you see a warning about your Node.js version, upgrade to version 20.19+ or 22.12+:

# Check your current version
node --version

# If needed, upgrade Node.js using nvm
nvm install 22.12.0
nvm use 22.12.0

Common Integration Issues

1. React Context Error: This occurs when React context is not properly initialized. Make sure your app wraps the root component with ChakraProvider.

2. Peer Dependency Warnings: Install all peer dependencies listed in the package.json.

3. Styling Issues: Ensure your CSS reset or global styles don't conflict with Chakra UI components.

4. Module Not Found: If you get module resolution errors, check that all peer dependencies are installed in your project.

5. ES Module vs CommonJS Issues: Ensure your project is configured consistently for module handling.

Testing in Another Project

To test the chatbot in another project:

1. Build the chatbot:

   cd droplinked-chatbot
   npm run build
   npm link

2. In your test project:

   npm link droplinked-chatbot-next

3. Make sure your test project has all peer dependencies installed:

   npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Publishing to npm

When publishing to npm, the package is built with both CommonJS and ES module formats for maximum compatibility:

• dist/index.cjs - CommonJS format
• dist/index.mjs - ES module format
• dist/index.client.js - Client-only format

The package.json includes proper export maps to ensure the correct format is used based on the importing environment.