dinesh-ai-chat-widget 1.0.8 → 1.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +20 -34
  2. package/package.json +6 -6
package/README.md CHANGED
@@ -1,23 +1,23 @@
1
1
  # Floating AI Chat Widget
2
2
 
3
- Reusable floating chat widget for React and Next.js, with demo replies and optional backend integration.
3
+ A floating, customizable chat widget for React and Next.js. Demo replies are built-in. Easily connect your own backend API for custom AI-driven conversations.
4
4
 
5
- ## Install
5
+ ## Installation
6
+
7
+ Install the widget package and its peer dependency:
6
8
 
7
9
  ```bash
8
10
  npm install dinesh-ai-chat-widget lucide-react
9
11
  ```
10
12
 
11
- ## Usage in Next.js
13
+ ## Basic Usage (Next.js Example)
12
14
 
13
- In `app/layout.tsx`:
15
+ Place the widget in your `app/layout.tsx`:
14
16
 
15
17
  ```tsx
16
18
  import { ChatWidget } from "dinesh-ai-chat-widget";
17
-
18
- export default function RootLayout({
19
- children,
20
- }: Readonly<{ children: React.ReactNode }>) {
19
+
20
+ export default function RootLayout({ children }: { children: React.ReactNode }) {
21
21
  return (
22
22
  <html lang="en">
23
23
  <body>
@@ -29,50 +29,36 @@ export default function RootLayout({
29
29
  }
30
30
  ```
31
31
 
32
- ## Customize
32
+ ## Configuration Options
33
+
34
+ You can configure the widget with these optional props:
33
35
 
34
36
  ```tsx
35
37
  <ChatWidget
38
+ key="YOUR-API-KEY"
36
39
  title="Support Assistant"
37
40
  subtitle="Online · Ask us anything"
38
41
  primaryColor="#2563eb"
39
- projectId="your-public-project-id"
40
42
  />
41
43
  ```
42
-
43
44
 
44
- The widget sends `POST` JSON:
45
+ ---
46
+
47
+ ## API Integration
48
+
49
+ When the user sends a message, the widget issues a `POST` request formatted like this:
45
50
 
46
51
  ```json
47
52
  {
48
53
  "message": "Hello",
49
- "projectId": "your-public-project-id"
54
+ "key": "YOUR-API-KEY"
50
55
  }
51
56
  ```
52
57
 
53
- Your endpoint should return JSON such as:
58
+ Your backend should return a JSON response with a reply:
54
59
 
55
60
  ```json
56
61
  {
57
62
  "reply": "Hello! How can I help?"
58
63
  }
59
- ```
60
-
61
- The `projectId` is an identifier, not a secret. Never pass provider API keys to this browser component. Store provider keys securely on your backend and validate allowed websites, authentication, rate limits, and usage there. Configure CORS on your API for the websites that will use the widget.
62
-
63
- ## Build locally
64
-
65
- ```bash
66
- npm install
67
- npm run build
68
- npm pack
69
- ```
70
-
71
- ## Publish
72
-
73
- 1. Change `name` in `package.json` to a unique npm package name.
74
- 2. Run `npm login`.
75
- 3. Run `npm publish` (for an unscoped public package).
76
- 4. Install it in your website using `npm install your-package-name`.
77
-
78
- This starter is a UI package; it does not include a production AI backend or admin dashboard.
64
+ ```
package/package.json CHANGED
@@ -1,18 +1,18 @@
1
1
  {
2
2
  "name": "dinesh-ai-chat-widget",
3
- "version": "1.0.8",
3
+ "version": "1.0.10",
4
4
  "description": "Reusable floating AI chat widget for React and Next.js",
5
5
  "license": "MIT",
6
- "main": "./dist/index.js",
7
- "module": "./dist/index.mjs",
6
+ "main": "./dist/index.cjs",
7
+ "module": "./dist/index.js",
8
8
  "types": "./dist/index.d.ts",
9
9
  "exports": {
10
10
  ".": {
11
11
  "types": "./dist/index.d.ts",
12
- "import": "./dist/index.mjs",
13
- "require": "./dist/index.js"
12
+ "import": "./dist/index.js",
13
+ "require": "./dist/index.cjs"
14
14
  },
15
- "./styles.css": "./dist/index.css"
15
+ "./styles.css": "./dist/styles.css"
16
16
  },
17
17
  "files": [
18
18
  "dist",