@bridge-ai-dev/ecom-chat 1.1.0 → 1.1.1

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 (16) hide show
  1. package/README.md +15 -16
  2. package/bin/cli.js +40 -21
  3. package/dist/cjs/index.d.ts +0 -1
  4. package/dist/cjs/index.d.ts.map +1 -1
  5. package/dist/cjs/index.js +1 -4
  6. package/dist/cjs/index.js.map +1 -1
  7. package/dist/esm/index.js +0 -2
  8. package/dist/esm/index.js.map +1 -1
  9. package/package.json +1 -1
  10. package/templates/ChatWrapper.tsx.template +14 -0
  11. package/dist/cjs/LitiumChatComponent.d.ts +0 -40
  12. package/dist/cjs/LitiumChatComponent.d.ts.map +0 -1
  13. package/dist/cjs/LitiumChatComponent.js +0 -47
  14. package/dist/cjs/LitiumChatComponent.js.map +0 -1
  15. package/dist/esm/LitiumChatComponent.js +0 -43
  16. package/dist/esm/LitiumChatComponent.js.map +0 -1
package/README.md CHANGED
@@ -21,53 +21,52 @@ npm install @bridge-ai-dev/ecom-chat
21
21
 
22
22
  The chat components require a server-side API route to retrieve secure HttpOnly cookies (like `cart-context` and ASP.NET Core Identity cookies) that are inaccessible from client-side JavaScript.
23
23
 
24
- To automatically generate this API route in your Next.js app, run:
24
+ To automatically generate this API route and a wrapper component in your Next.js app, run:
25
25
 
26
26
  ```bash
27
27
  npx create-ecom-chat
28
28
  ```
29
29
 
30
- This will create an API route at `app/api/bridge-auth/route.ts`.
30
+ This will create:
31
+ 1. An API route at `app/api/bridge-auth/route.ts`.
32
+ 2. A React wrapper component at `components/ChatWrapper.tsx`.
31
33
 
32
34
  ## Usage
33
35
 
34
- You can include the chat component in your main layout or any client component.
36
+ You can include the generic `ChatComponent` directly in your application, or use the CLI-generated `ChatWrapper` for a cleaner integration.
35
37
 
36
- ### Standard Usage (`ChatComponent`)
38
+ ### Method 1: Using the Generated Wrapper (Recommended for Litium)
37
39
 
38
- ```tsx
39
- 'use client';
40
+ If you used `npx create-ecom-chat`, a `ChatWrapper.tsx` file was generated for you. It is pre-configured to handle Litium's cart context creation. Simply drop it into your root layout (`app/layout.tsx`):
40
41
 
41
- import { ChatComponent } from '@bridge-ai-dev/ecom-chat';
42
+ ```tsx
43
+ import ChatWrapper from '@/components/ChatWrapper';
42
44
 
43
45
  export default function RootLayout({ children }: { children: React.ReactNode }) {
44
46
  return (
45
47
  <html lang="en">
46
48
  <body>
47
49
  {children}
48
- <ChatComponent
49
- tenantId="your-tenant-uuid"
50
- widgetScriptUrl="https://your-cdn.com/chat-widget.js"
51
- />
50
+ <ChatWrapper />
52
51
  </body>
53
52
  </html>
54
53
  );
55
54
  }
56
55
  ```
57
56
 
58
- ### Litium Storefront Usage (`LitiumChatComponent`)
57
+ ### Method 2: Standard Usage (`ChatComponent`)
59
58
 
60
- For Litium projects, there is a specialized wrapper component. You can pass your project's cart creation function to automatically handle cases where the user doesn't have an active cart session yet.
59
+ If you prefer to integrate the component manually without the wrapper, you can import and use `ChatComponent` directly in any client component:
61
60
 
62
61
  ```tsx
63
62
  'use client';
64
63
 
65
- import { LitiumChatComponent } from '@bridge-ai-dev/ecom-chat';
64
+ import { ChatComponent } from '@bridge-ai-dev/ecom-chat';
66
65
  import { createCart } from '@/services/cartService.client'; // Adjust path to your project's mutation
67
66
 
68
67
  export default function ChatWrapper() {
69
68
  return (
70
- <LitiumChatComponent
69
+ <ChatComponent
71
70
  tenantId="your-tenant-uuid"
72
71
  widgetScriptUrl="https://your-cdn.com/chat-widget.js"
73
72
  getCartFunction={createCart}
@@ -80,7 +79,7 @@ export default function ChatWrapper() {
80
79
 
81
80
  ### Component Properties
82
81
 
83
- Both `ChatComponent` and `LitiumChatComponent` accept the following properties:
82
+ `ChatComponent` accepts the following properties:
84
83
 
85
84
  #### Required
86
85
  - **`tenantId`** (`string`): The unique tenant identifier for your Bridge Chat instance.
package/bin/cli.js CHANGED
@@ -21,14 +21,23 @@ const log = {
21
21
  step: (msg) => console.log(`${colors.bold}🚀 ${msg}${colors.reset}`)
22
22
  };
23
23
 
24
- // Read the API route content from the template file
25
- const templatePath = path.join(__dirname, '..', 'templates', 'route.ts.template');
24
+ // Read the API route content from the template files
25
+ const apiTemplatePath = path.join(__dirname, '..', 'templates', 'route.ts.template');
26
+ const wrapperTemplatePath = path.join(__dirname, '..', 'templates', 'ChatWrapper.tsx.template');
26
27
  let apiRouteContent;
28
+ let wrapperContent;
27
29
 
28
30
  try {
29
- apiRouteContent = fs.readFileSync(templatePath, 'utf8');
31
+ apiRouteContent = fs.readFileSync(apiTemplatePath, 'utf8');
30
32
  } catch (error) {
31
- console.error(`${colors.red}❌ Error reading template file: ${error.message}${colors.reset}`);
33
+ console.error(`${colors.red}❌ Error reading API template file: ${error.message}${colors.reset}`);
34
+ process.exit(1);
35
+ }
36
+
37
+ try {
38
+ wrapperContent = fs.readFileSync(wrapperTemplatePath, 'utf8');
39
+ } catch (error) {
40
+ console.error(`${colors.red}❌ Error reading Wrapper template file: ${error.message}${colors.reset}`);
32
41
  process.exit(1);
33
42
  }
34
43
 
@@ -115,39 +124,49 @@ function setup() {
115
124
  }
116
125
 
117
126
  function createFiles(cwd) {
118
- const targetDir = path.join(cwd, 'app', 'api', 'bridge-auth');
119
- const targetFile = path.join(targetDir, 'route.ts');
127
+ // 1. Create API Route
128
+ const targetApiDir = path.join(cwd, 'app', 'api', 'bridge-auth');
129
+ const targetApiFile = path.join(targetApiDir, 'route.ts');
120
130
 
121
- // Check if file already exists
122
- if (fs.existsSync(targetFile)) {
131
+ if (fs.existsSync(targetApiFile)) {
123
132
  log.warning('API route already exists at: app/api/bridge-auth/route.ts');
124
133
  log.info('Skipping file creation to avoid overwriting.');
125
134
  } else {
126
- // Create directory structure
127
- if (!fs.existsSync(targetDir)) {
128
- fs.mkdirSync(targetDir, { recursive: true });
135
+ if (!fs.existsSync(targetApiDir)) {
136
+ fs.mkdirSync(targetApiDir, { recursive: true });
129
137
  log.success('Created directory: app/api/bridge-auth/');
130
138
  }
131
-
132
- // Write the API route file
133
- fs.writeFileSync(targetFile, apiRouteContent, 'utf8');
139
+ fs.writeFileSync(targetApiFile, apiRouteContent, 'utf8');
134
140
  log.success('Created API route: app/api/bridge-auth/route.ts');
135
141
  }
136
142
 
143
+ // 2. Create ChatWrapper Component
144
+ const targetCompDir = path.join(cwd, 'components');
145
+ const targetCompFile = path.join(targetCompDir, 'ChatWrapper.tsx');
146
+
147
+ if (fs.existsSync(targetCompFile)) {
148
+ log.warning('Component already exists at: components/ChatWrapper.tsx');
149
+ log.info('Skipping wrapper generation to avoid overwriting.');
150
+ } else {
151
+ if (!fs.existsSync(targetCompDir)) {
152
+ fs.mkdirSync(targetCompDir, { recursive: true });
153
+ log.success('Created directory: components/');
154
+ }
155
+ fs.writeFileSync(targetCompFile, wrapperContent, 'utf8');
156
+ log.success('Created Wrapper Component: components/ChatWrapper.tsx');
157
+ }
158
+
137
159
  console.log('\n');
138
160
  log.step('Next Steps:');
139
161
  console.log('\n');
140
162
  console.log(' 1. Install the package (if not already):');
141
163
  console.log(` ${colors.yellow}npm install @bridge-ai-dev/ecom-chat${colors.reset}`);
142
164
  console.log('\n');
143
- console.log(' 2. Add the ChatComponent to your layout.tsx:');
144
- console.log(` ${colors.yellow}import { ChatComponent } from '@bridge-ai-dev/ecom-chat';${colors.reset}`);
145
- console.log('\n');
146
- console.log(' 3. Include it in your layout:');
147
- console.log(` ${colors.yellow}<ChatComponent tenantId="your-tenant-uuid" />${colors.reset}`);
165
+ console.log(' 2. Add the generated ChatWrapper to your layout.tsx:');
166
+ console.log(` ${colors.yellow}import ChatWrapper from 'components/ChatWrapper';${colors.reset}`);
148
167
  console.log('\n');
149
- console.log(' 4. Add your chat widget script to the layout:');
150
- console.log(` ${colors.yellow}<script src="https://your-cdn.com/chat-widget.js" async />${colors.reset}`);
168
+ console.log(' 3. Include it in your layout body:');
169
+ console.log(` ${colors.yellow}<ChatWrapper />${colors.reset}`);
151
170
  console.log('\n');
152
171
  log.success('Setup complete! 🎉');
153
172
  console.log('\n');
package/dist/cjs/index.d.ts CHANGED
@@ -6,6 +6,5 @@
6
6
  * @packageDocumentation
7
7
  */
8
8
  export { ChatComponent, default } from './ChatComponent';
9
- export { LitiumChatComponent } from './LitiumChatComponent';
10
9
  export type { ChatComponentProps, BridgeAuthResponse, BridgeChatInitConfig, BridgeChatGlobal, WidgetPosition, WidgetSize } from './types';
11
10
  //# sourceMappingURL=index.d.ts.map
package/dist/cjs/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAGzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAI5D,YAAY,EACR,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,gBAAgB,EAChB,cAAc,EACd,UAAU,EACb,MAAM,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAGzD,YAAY,EACR,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,gBAAgB,EAChB,cAAc,EACd,UAAU,EACb,MAAM,SAAS,CAAC"}
package/dist/cjs/index.js CHANGED
@@ -10,12 +10,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
10
10
  return (mod && mod.__esModule) ? mod : { "default": mod };
11
11
  };
12
12
  Object.defineProperty(exports, "__esModule", { value: true });
13
- exports.LitiumChatComponent = exports.default = exports.ChatComponent = void 0;
13
+ exports.default = exports.ChatComponent = void 0;
14
14
  // Export the main component
15
15
  var ChatComponent_1 = require("./ChatComponent");
16
16
  Object.defineProperty(exports, "ChatComponent", { enumerable: true, get: function () { return ChatComponent_1.ChatComponent; } });
17
17
  Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ChatComponent_1).default; } });
18
- // Export the Litium-specific convenience component
19
- var LitiumChatComponent_1 = require("./LitiumChatComponent");
20
- Object.defineProperty(exports, "LitiumChatComponent", { enumerable: true, get: function () { return LitiumChatComponent_1.LitiumChatComponent; } });
21
18
  //# sourceMappingURL=index.js.map
package/dist/cjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;;;;;AAEH,4BAA4B;AAC5B,iDAAyD;AAAhD,8GAAA,aAAa,OAAA;AAAE,yHAAA,OAAO,OAAA;AAE/B,mDAAmD;AACnD,6DAA4D;AAAnD,0HAAA,mBAAmB,OAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;;;;;AAEH,4BAA4B;AAC5B,iDAAyD;AAAhD,8GAAA,aAAa,OAAA;AAAE,yHAAA,OAAO,OAAA"}
package/dist/esm/index.js CHANGED
@@ -7,6 +7,4 @@
7
7
  */
8
8
  // Export the main component
9
9
  export { ChatComponent, default } from './ChatComponent';
10
- // Export the Litium-specific convenience component
11
- export { LitiumChatComponent } from './LitiumChatComponent';
12
10
  //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,4BAA4B;AAC5B,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAEzD,mDAAmD;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,4BAA4B;AAC5B,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bridge-ai-dev/ecom-chat",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
4
4
  "description": "Bridge E-commerce Chat widget integration for Next.js with Litium authentication",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/templates/ChatWrapper.tsx.template ADDED
@@ -0,0 +1,14 @@
1
+ 'use client';
2
+
3
+ import { ChatComponent } from '@bridge-ai-dev/ecom-chat';
4
+ import { createCart } from 'services/cartService.client';
5
+
6
+ export default function ChatWrapper() {
7
+ return (
8
+ <ChatComponent
9
+ tenantId="YOUR_TENANT_ID_HERE"
10
+ widgetScriptUrl="https://YOUR_CLOUDFRONT_URL/chat-widget.js"
11
+ getCartFunction={createCart}
12
+ />
13
+ );
14
+ }
package/dist/cjs/LitiumChatComponent.d.ts DELETED
@@ -1,40 +0,0 @@
1
- import React from 'react';
2
- import type { ChatComponentProps } from './types';
3
- /**
4
- * LitiumChatComponent - Ready-to-use Bridge Chat Widget for Litium Storefront
5
- *
6
- * A convenience wrapper around `ChatComponent` tailored for Litium projects.
7
- * Accepts the same props as `ChatComponent`. Pass your project's `createCart`
8
- * function as `getCartFunction` so the widget can automatically create a cart
9
- * (and set the `cart-context` cookie) when one doesn't exist yet.
10
- *
11
- * @example
12
- * ```tsx
13
- * // In your layout.tsx or any client component:
14
- * 'use client';
15
- * import { LitiumChatComponent } from '@bridge-ai-dev/ecom-chat';
16
- * import { createCart } from 'services/cartService.client';
17
- *
18
- * export default function ChatWrapper() {
19
- * return (
20
- * <LitiumChatComponent
21
- * tenantId="your-tenant-uuid"
22
- * widgetScriptUrl="https://your-chat-widget-url/chat-widget.js"
23
- * getCartFunction={createCart}
24
- * />
25
- * );
26
- * }
27
- * ```
28
- *
29
- * @remarks
30
- * - `getCartFunction` should be the `createCart` mutation (not `getCart`) from
31
- * your Litium `cartService.client.ts`. The `createCart` mutation triggers
32
- * Litium to set the `cart-context` cookie in the browser, which is required
33
- * for the chat widget to initialize correctly.
34
- * - Because this component uses React hooks, it must be rendered inside a
35
- * `'use client'` boundary. Wrap it in a client component if your layout is
36
- * a server component.
37
- */
38
- export declare const LitiumChatComponent: React.FC<ChatComponentProps>;
39
- export default LitiumChatComponent;
40
- //# sourceMappingURL=LitiumChatComponent.d.ts.map
package/dist/cjs/LitiumChatComponent.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"LitiumChatComponent.d.ts","sourceRoot":"","sources":["../../src/LitiumChatComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAE5D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
package/dist/cjs/LitiumChatComponent.js DELETED
@@ -1,47 +0,0 @@
1
- "use strict";
2
- 'use client';
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.LitiumChatComponent = void 0;
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const ChatComponent_1 = require("./ChatComponent");
7
- /**
8
- * LitiumChatComponent - Ready-to-use Bridge Chat Widget for Litium Storefront
9
- *
10
- * A convenience wrapper around `ChatComponent` tailored for Litium projects.
11
- * Accepts the same props as `ChatComponent`. Pass your project's `createCart`
12
- * function as `getCartFunction` so the widget can automatically create a cart
13
- * (and set the `cart-context` cookie) when one doesn't exist yet.
14
- *
15
- * @example
16
- * ```tsx
17
- * // In your layout.tsx or any client component:
18
- * 'use client';
19
- * import { LitiumChatComponent } from '@bridge-ai-dev/ecom-chat';
20
- * import { createCart } from 'services/cartService.client';
21
- *
22
- * export default function ChatWrapper() {
23
- * return (
24
- * <LitiumChatComponent
25
- * tenantId="your-tenant-uuid"
26
- * widgetScriptUrl="https://your-chat-widget-url/chat-widget.js"
27
- * getCartFunction={createCart}
28
- * />
29
- * );
30
- * }
31
- * ```
32
- *
33
- * @remarks
34
- * - `getCartFunction` should be the `createCart` mutation (not `getCart`) from
35
- * your Litium `cartService.client.ts`. The `createCart` mutation triggers
36
- * Litium to set the `cart-context` cookie in the browser, which is required
37
- * for the chat widget to initialize correctly.
38
- * - Because this component uses React hooks, it must be rendered inside a
39
- * `'use client'` boundary. Wrap it in a client component if your layout is
40
- * a server component.
41
- */
42
- const LitiumChatComponent = (props) => {
43
- return (0, jsx_runtime_1.jsx)(ChatComponent_1.ChatComponent, { ...props });
44
- };
45
- exports.LitiumChatComponent = LitiumChatComponent;
46
- exports.default = exports.LitiumChatComponent;
47
- //# sourceMappingURL=LitiumChatComponent.js.map
package/dist/cjs/LitiumChatComponent.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"LitiumChatComponent.js","sourceRoot":"","sources":["../../src/LitiumChatComponent.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAGb,mDAAgD;AAGhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACI,MAAM,mBAAmB,GAAiC,CAAC,KAAK,EAAE,EAAE;IACvE,OAAO,uBAAC,6BAAa,OAAK,KAAK,GAAI,CAAC;AACxC,CAAC,CAAC;AAFW,QAAA,mBAAmB,uBAE9B;AAEF,kBAAe,2BAAmB,CAAC"}
package/dist/esm/LitiumChatComponent.js DELETED
@@ -1,43 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- import { ChatComponent } from './ChatComponent';
4
- /**
5
- * LitiumChatComponent - Ready-to-use Bridge Chat Widget for Litium Storefront
6
- *
7
- * A convenience wrapper around `ChatComponent` tailored for Litium projects.
8
- * Accepts the same props as `ChatComponent`. Pass your project's `createCart`
9
- * function as `getCartFunction` so the widget can automatically create a cart
10
- * (and set the `cart-context` cookie) when one doesn't exist yet.
11
- *
12
- * @example
13
- * ```tsx
14
- * // In your layout.tsx or any client component:
15
- * 'use client';
16
- * import { LitiumChatComponent } from '@bridge-ai-dev/ecom-chat';
17
- * import { createCart } from 'services/cartService.client';
18
- *
19
- * export default function ChatWrapper() {
20
- * return (
21
- * <LitiumChatComponent
22
- * tenantId="your-tenant-uuid"
23
- * widgetScriptUrl="https://your-chat-widget-url/chat-widget.js"
24
- * getCartFunction={createCart}
25
- * />
26
- * );
27
- * }
28
- * ```
29
- *
30
- * @remarks
31
- * - `getCartFunction` should be the `createCart` mutation (not `getCart`) from
32
- * your Litium `cartService.client.ts`. The `createCart` mutation triggers
33
- * Litium to set the `cart-context` cookie in the browser, which is required
34
- * for the chat widget to initialize correctly.
35
- * - Because this component uses React hooks, it must be rendered inside a
36
- * `'use client'` boundary. Wrap it in a client component if your layout is
37
- * a server component.
38
- */
39
- export const LitiumChatComponent = (props) => {
40
- return _jsx(ChatComponent, { ...props });
41
- };
42
- export default LitiumChatComponent;
43
- //# sourceMappingURL=LitiumChatComponent.js.map
package/dist/esm/LitiumChatComponent.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"LitiumChatComponent.js","sourceRoot":"","sources":["../../src/LitiumChatComponent.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,KAAK,EAAE,EAAE;IACvE,OAAO,KAAC,aAAa,OAAK,KAAK,GAAI,CAAC;AACxC,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}