dinesh-ai-chat-widget 1.0.7 → 1.0.9

package/README.md

@@ -1,23 +1,23 @@
 # Floating AI Chat Widget
 
-Reusable floating chat widget for React and Next.js, with demo replies and optional backend integration.
+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.
 
-## Install
+## Installation
+
+Install the widget package and its peer dependency:
 
 ```bash
 npm install dinesh-ai-chat-widget lucide-react
 ```
 
-## Usage in Next.js
+## Basic Usage (Next.js Example)
 
-In `app/layout.tsx`:
+Place the widget in your `app/layout.tsx`:
 
 ```tsx
 import { ChatWidget } from "dinesh-ai-chat-widget";
- 
-export default function RootLayout({
-  children,
-}: Readonly<{ children: React.ReactNode }>) {
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body>
@@ -29,50 +29,36 @@ export default function RootLayout({
 }
 ```
 
-## Customize
+## Configuration Options
+
+You can configure the widget with these optional props:
 
 ```tsx
 <ChatWidget
+  key="YOUR-API-KEY"
   title="Support Assistant"
   subtitle="Online · Ask us anything"
   primaryColor="#2563eb"
-  projectId="your-public-project-id"
 />
 ```
- 
 
-The widget sends `POST` JSON:
+---
+
+## API Integration
+
+When the user sends a message, the widget issues a `POST` request formatted like this:
 
 ```json
 {
   "message": "Hello",
-  "projectId": "your-public-project-id"
+  "key": "YOUR-API-KEY"
 }
 ```
 
-Your endpoint should return JSON such as:
+Your backend should return a JSON response with a reply:
 
 ```json
 {
   "reply": "Hello! How can I help?"
 }
-```
-
-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.
-
-## Build locally
-
-```bash
-npm install
-npm run build
-npm pack
-```
-
-## Publish
-
-1. Change `name` in `package.json` to a unique npm package name.
-2. Run `npm login`.
-3. Run `npm publish` (for an unscoped public package).
-4. Install it in your website using `npm install your-package-name`.
-
-This starter is a UI package; it does not include a production AI backend or admin dashboard.
+```

package/dist/index.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,o,p,m,p),R[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require("react"),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.view_transition`),k=Symbol.for(`react.client.reference`),A=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,j=Object.prototype.hasOwnProperty,M=Array.isArray,N=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var P,F={},I=m.react_stack_bottom_frame.bind(m,o)(),L=N(i(o)),R={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>A.recentlyCreatedOwnerStacks++;if(r){var a=Error.stackTraceLimit;Error.stackTraceLimit=10;var o=Error(`react-stack-top-frame`);Error.stackTraceLimit=a}else o=I;return d(e,t,n,!1,o,r?N(i(e)):L)},e.jsxs=function(e,t,n){var r=1e4>A.recentlyCreatedOwnerStacks++;if(r){var a=Error.stackTraceLimit;Error.stackTraceLimit=10;var o=Error(`react-stack-top-frame`);Error.stackTraceLimit=a}else o=I;return d(e,t,n,!0,o,r?N(i(e)):L)}})()})),O=o(((e,t)=>{t.exports=process.env.NODE_ENV===`production`?E():D()})),k=c(T()),A=O(),j=[`Check vehicle status`,`Schedule maintenance`,`Pricing information`],M=[{id:1,role:`assistant`,text:`Hello! 👋 I'm your AI assistant. How can I help you today?`,time:`Just now`}];function N(e){let t=e.toLowerCase();return t.includes(`vehicle`)||t.includes(`status`)?`I can help check vehicle status. Please provide the vehicle number plate, such as VDR6117.`:t.includes(`maintenance`)||t.includes(`repair`)?`I can help with maintenance! Please describe the vehicle issue, and I'll suggest the next steps.`:t.includes(`price`)||t.includes(`cost`)?`Pricing depends on your requirements. Tell me which service you're interested in, and I'll help estimate the cost.`:t.includes(`hello`)||t.includes(`hi`)?`Hello! 😊 What would you like help with today?`:`Thanks for your message: "${e}". This is a demo response. Configure apiUrl to connect your AI backend.`}function P({key:e,title:t=`AI Assistant`,subtitle:n=`Online · Ready to help`,primaryColor:r=`#2563eb`}){let[i,a]=(0,l.useState)(!1),[o,s]=(0,l.useState)(!1),[c,u]=(0,l.useState)(``),[d,f]=(0,l.useState)(!1),[p,m]=(0,l.useState)(M),h=(0,l.useRef)(null),g=(0,l.useRef)(null),[_,T]=(0,l.useState)(null);(0,l.useEffect)(()=>{h.current?.scrollIntoView({behavior:`smooth`})},[p,d,i,o]),(0,l.useEffect)(()=>{i&&!o&&g.current?.focus()},[i,o]);let E=typeof window<`u`?window.NEXT_PUBLIC_API_URL??void 0:void 0;if(!E||!e)return``;async function D(t=c){let n=t.trim();if(!n||d)return;let r=(0,k.default)().format(`HH:mm`);m(e=>[...e,{id:Date.now(),role:`user`,text:n,time:r}]),u(``),f(!0),T(null);try{let t;if(E){let r;try{r=await fetch(E,{method:`POST`,headers:{"Content-Type":`application/json`},body:JSON.stringify({message:n,key:e})})}catch(e){throw T(`Failed to fetch.
+  <%s key={someKey} {...props} />`,o,p,m,p),R[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require("react"),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.view_transition`),k=Symbol.for(`react.client.reference`),A=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,j=Object.prototype.hasOwnProperty,M=Array.isArray,N=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var P,F={},I=m.react_stack_bottom_frame.bind(m,o)(),L=N(i(o)),R={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>A.recentlyCreatedOwnerStacks++;if(r){var a=Error.stackTraceLimit;Error.stackTraceLimit=10;var o=Error(`react-stack-top-frame`);Error.stackTraceLimit=a}else o=I;return d(e,t,n,!1,o,r?N(i(e)):L)},e.jsxs=function(e,t,n){var r=1e4>A.recentlyCreatedOwnerStacks++;if(r){var a=Error.stackTraceLimit;Error.stackTraceLimit=10;var o=Error(`react-stack-top-frame`);Error.stackTraceLimit=a}else o=I;return d(e,t,n,!0,o,r?N(i(e)):L)}})()})),O=o(((e,t)=>{t.exports=process.env.NODE_ENV===`production`?E():D()})),k=c(T()),A=O(),j=[`Check vehicle status`,`Schedule maintenance`,`Pricing information`],M=[{id:1,role:`assistant`,text:`Hello! 👋 I'm your AI assistant. How can I help you today?`,time:`Just now`}];function N(e){let t=e.toLowerCase();return t.includes(`vehicle`)||t.includes(`status`)?`I can help check vehicle status. Please provide the vehicle number plate, such as VDR6117.`:t.includes(`maintenance`)||t.includes(`repair`)?`I can help with maintenance! Please describe the vehicle issue, and I'll suggest the next steps.`:t.includes(`price`)||t.includes(`cost`)?`Pricing depends on your requirements. Tell me which service you're interested in, and I'll help estimate the cost.`:t.includes(`hello`)||t.includes(`hi`)?`Hello! 😊 What would you like help with today?`:`Thanks for your message: "${e}". This is a demo response. Configure apiUrl to connect your AI backend.`}function P({key:e,title:t=`AI Assistant`,subtitle:n=`Online · Ready to help`,primaryColor:r=`#2563eb`}){let[i,a]=(0,l.useState)(!1),[o,s]=(0,l.useState)(!1),[c,u]=(0,l.useState)(``),[d,f]=(0,l.useState)(!1),[p,m]=(0,l.useState)(M),h=(0,l.useRef)(null),g=(0,l.useRef)(null),[_,T]=(0,l.useState)(null);(0,l.useEffect)(()=>{h.current?.scrollIntoView({behavior:`smooth`})},[p,d,i,o]),(0,l.useEffect)(()=>{i&&!o&&g.current?.focus()},[i,o]);let E=process.env.NEXT_PUBLIC_API_URL;if(!E||!e)return``;async function D(t=c){let n=t.trim();if(!n||d)return;let r=(0,k.default)().format(`HH:mm`);m(e=>[...e,{id:Date.now(),role:`user`,text:n,time:r}]),u(``),f(!0),T(null);try{let t;if(E){let r;try{r=await fetch(E,{method:`POST`,headers:{"Content-Type":`application/json`},body:JSON.stringify({message:n,key:e})})}catch(e){throw T(`Failed to fetch.
 
 Possible Reasons:
 

package/dist/index.js

@@ -646,7 +646,7 @@ function z({ key: e, title: t = "AI Assistant", subtitle: a = "Online · Ready t
 	]), n(() => {
 		s && !l && v.current?.focus();
 	}, [s, l]);
-	let x = typeof window < "u" ? window.NEXT_PUBLIC_API_URL ?? void 0 : void 0;
+	let x = process.env.NEXT_PUBLIC_API_URL;
 	if (!x || !e) return "";
 	async function S(t = d) {
 		let n = t.trim();

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "dinesh-ai-chat-widget",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Reusable floating AI chat widget for React and Next.js",
   "license": "MIT",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
-    "./styles.css": "./dist/index.css"
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
     "dist",