droplinked-chatbot-next 1.0.7 → 1.0.9

package/README.md

@@ -1,25 +1,80 @@
 # Droplinked Chatbot
 
-A React-based chatbot component with AI capabilities.
+A React-based chatbot component with AI capabilities, now supporting both SSR and browser environments with dual builds.
 
 ## Installation
 
 ```bash
-npm install droplinked-chatbot
+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:
+
+```jsx
+'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:
+
 ```jsx
-import { Chatbot } from 'droplinked-chatbot';
+import { Chatbot } from 'droplinked-chatbot-next'
 
 function App() {
   return (
     <Chatbot 
-      apiBaseUrl="https://your-api-base-url.com" 
-      buttonType="floating" 
+      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:
+
+```json
+{
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./client": "./dist/index.client.js"
+  }
 }
 ```
 
@@ -90,10 +145,10 @@ This indicates a mismatch between ES modules and CommonJS modules. To fix this:
 2. Use import syntax instead of require:
    ```js
    // Good
-   import { Chatbot } from 'droplinked-chatbot';
+   import { Chatbot } from 'droplinked-chatbot-next';
    
    // Avoid
-   const { Chatbot } = require('droplinked-chatbot');
+   const { Chatbot } = require('droplinked-chatbot-next');
    ```
 
 3. If you must use CommonJS, rename your files to use the `.cjs` extension.
@@ -130,9 +185,8 @@ The chatbot requires an `apiBaseUrl` prop to connect to your backend services:
 |------|------|----------|-------------|
 | apiBaseUrl | string | Yes | Base URL for API endpoints |
 | apiKey | string | No | API key for authentication |
-| buttonType | "floating" \| "solid" | No | Chat button style (default: "floating") |
-| buttonText | string | No | Custom text for solid button |
 | user | object | No | Initial user information |
+| drawerTrigger | function | Yes | Function that returns a React element to trigger the chat drawer |
 
 ## Development
 
@@ -147,6 +201,13 @@ npm run dev
 npm run build
 ```
 
+## Examples
+
+See the [examples](./examples) directory for detailed usage in different frameworks:
+
+- [Next.js Example](./examples/nextjs/README.md)
+- [React + Vite Example](./examples/react-vite/README.md)
+
 ## Troubleshooting
 
 ### Node.js Version Warning
@@ -187,7 +248,7 @@ To test the chatbot in another project:
 
 2. In your test project:
    ```bash
-   npm link droplinked-chatbot
+   npm link droplinked-chatbot-next
    ```
 
 3. Make sure your test project has all peer dependencies installed:
@@ -199,7 +260,8 @@ To test the chatbot in another project:
 
 When publishing to npm, the package is built with both CommonJS and ES module formats for maximum compatibility:
 
-- `dist/index.js` - CommonJS format
-- `dist/index.esm.js` - ES module format
+- `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.

package/dist/Chatbot.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface ChatbotProps {
+    apiBaseUrl?: string;
+    apiKey?: string;
+    user?: {
+        id?: string;
+        name?: string;
+        email?: string;
+    };
+}
+declare const Chatbot: React.FC<ChatbotProps>;
+export default Chatbot;

package/dist/components/Chatbot.d.ts

@@ -2,8 +2,8 @@ import { ChatbotUser } from "../types";
 interface ChatbotProps {
     apiBaseUrl: string;
     apiKey?: string;
-    buttonType?: "floating" | "solid";
     user?: Partial<ChatbotUser> | null;
+    drawerTrigger: (onClick: () => void) => React.ReactNode;
 }
-declare function Chatbot({ apiBaseUrl, apiKey, buttonType, user: initialUser, }: ChatbotProps): import("react/jsx-runtime").JSX.Element;
+declare function Chatbot({ apiBaseUrl, apiKey, user: initialUser, drawerTrigger, }: ChatbotProps): import("react/jsx-runtime").JSX.Element;
 export default Chatbot;