@developer.notchatbot/webchat 1.2.10 → 1.3.0

package/README.md

@@ -1,23 +1,4 @@
-# 🔷 WebChat Widget
-
-A beautiful, embeddable chatbot widget built with **React**, **TypeScript**, **Vite**, **pnpm**, and **Tailwind CSS** that can be easily integrated into any website with **just one file**.
-
-## ✨ Features
-
-- **📦 Single File Bundle**: Everything in one file - no separate CSS needed!
-- **🔷 TypeScript**: Full type safety with strict typing and excellent IntelliSense
-- **⚛️ React 18**: Component-based architecture for maintainability
-- **🎨 Tailwind CSS**: Utility-first styling with prefixed classes (`ncb-`)
-- **⚡ Vite**: Lightning-fast development and optimized builds
-- **📦 pnpm**: Efficient package management and faster installs
-- **🔧 Easy Integration**: Add to any website with just one script tag
-- **🎨 Modern Design**: Beautiful, responsive UI that works on all devices
-- **🛠️ Customizable**: Configure colors, text, and behavior to match your brand
-- **✨ Smooth Animations**: Typing indicators and smooth transitions
-- **📱 Mobile Responsive**: Optimized for mobile and desktop
-- **🔌 API Ready**: Built-in support for chat API integration
-- **🚫 Zero Conflicts**: Prefixed CSS classes prevent style conflicts
-- **🛡️ Type Safe**: Catch errors at compile time with TypeScript
+# 🔷 WebChat - Embedded Chat
 
 ## 📦 Quick Start
 
@@ -343,21 +324,21 @@ We emit **custom browser events** so you can capture interactions and feed them
 
 | Widget | Event name | Fired when | `detail` payload |
 |--------|------------|------------|------------------|
-| WebChat | `WebChatOpened` | The floating chat is opened | `{ conversationId }` |
-| WebChat | `WebChatClosed` | The floating chat is closed | `{ conversationId }` |
-| WebChat | `WebChatMessageSent` | The user sends one or more messages | `{ messages: Message[] }` |
-| WebChat | `WebChatMessageReceived` | A message is received from the server | `{ message: Message, role: 'assistant' \| 'employee' }` |
-| EmbedChat | `EmbedChatMessageSent` | The user sends a message | `{ message: Message }` |
-| EmbedChat | `EmbedChatMessageReceived` | A message is received | `{ message: Message, role: 'assistant' \| 'employee' }` |
+| WebChat | `notchatbot-webchat-open` | The floating chat is opened | `{ conversationId }` |
+| WebChat | `notchatbot-webchat-closed` | The floating chat is closed | `{ conversationId }` |
+| WebChat | `notchatbot-webchat-message-sent` | The user sends one or more messages | `{ messages: Message[] }` |
+| WebChat | `notchatbot-webchat-message-received` | A message is received from the server | `{ message: Message, role: 'assistant' \| 'employee' }` |
+| EmbedChat | `notchatbot-embedchat-message-sent` | The user sends a message | `{ message: Message }` |
+| EmbedChat | `notchatbot-embedchat-message-received` | A message is received | `{ message: Message, role: 'assistant' \| 'employee' }` |
 
 `Message` follows the same interface used internally by the widget (id, text, sender, timestamp, etc.).
 
 #### Quick example
 ```js
-window.addEventListener('WebChatOpened',  e => console.log('WebChat opened', e.detail));
-window.addEventListener('WebChatClosed',  e => console.log('WebChat closed', e.detail));
-window.addEventListener('WebChatMessageSent', e => console.log('Sent', e.detail.messages));
-window.addEventListener('WebChatMessageReceived', e => {
+window.addEventListener('notchatbot-webchat-open',  e => console.log('WebChat opened', e.detail));
+window.addEventListener('notchatbot-webchat-closed',  e => console.log('WebChat closed', e.detail));
+window.addEventListener('notchatbot-webchat-message-sent', e => console.log('Sent', e.detail.messages));
+window.addEventListener('notchatbot-webchat-message-received', e => {
   const { role, message } = e.detail;
   console.log('Received', role, message);
 });
@@ -366,7 +347,7 @@ window.addEventListener('WebChatMessageReceived', e => {
 #### Google Tag Manager / Google Analytics (GA4)
 Push data directly to the **dataLayer** and create a trigger in GTM:
 ```js
-window.addEventListener('WebChatMessageSent', e => {
+window.addEventListener('notchatbot-webchat-message-sent', e => {
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({
     event: 'webchat_message_sent',
@@ -379,13 +360,13 @@ Then in GTM, add a **Custom Event** trigger called `webchat_message_sent` and li
 
 #### Meta / Facebook Pixel
 ```js
-window.addEventListener('WebChatOpened', () => {
+window.addEventListener('notchatbot-webchat-open', () => {
   if (window.fbq) {
     fbq('trackCustom', 'WebChatOpened');
   }
 });
 
-window.addEventListener('WebChatMessageReceived', e => {
+window.addEventListener('notchatbot-webchat-message-received', e => {
   if (window.fbq) {
     fbq('trackCustom', 'WebChatMessageReceived', {
       role: e.detail.role

package/dist/types.d.ts

@@ -19,6 +19,7 @@ export interface WebChatConfig {
     marginBottom?: number;
     marginSide?: number;
     showPopup?: boolean;
+    note?: string;
     mobile?: WebChatPositionConfig;
     desktop?: WebChatPositionConfig;
 }

package/dist/utils/messaging.d.ts

@@ -13,6 +13,7 @@ export interface SendMessagePayload {
     };
     chatbotUid: string;
     newMessages: any[];
+    note?: string;
 }
 /**
  * Creates a fallback bot message for error scenarios
@@ -30,6 +31,7 @@ export declare const createFallbackMessage: () => Message;
  */
 export declare const buildMessagePayload: (conversationId: string, messages: Message[], newMessages: Message[], config: {
     apiKey: string;
+    note?: string;
 }, sessionId: string) => SendMessagePayload;
 /**
  * Sends messages to the chat API

package/dist/webchat-bundle.min.js

@@ -16423,7 +16423,8 @@ const um = /* @__PURE__ */ Lu(lm), Mo = (e, t, n, r, o, i) => Pe(void 0, null, f
     conversationId: e,
     conversation: l,
     chatbotUid: r.apiKey,
-    newMessages: a
+    newMessages: a,
+    note: r.note
   };
 }, wd = (e) => Pe(void 0, null, function* () {
   try {
@@ -16470,7 +16471,7 @@ También puedes pedir hablar con nuestro equipo de los sueños!`, xd = (e) => ({
       return;
     }
     if (typeof window != "undefined") {
-      const ee = o ? "WebChatOpened" : "WebChatClosed";
+      const ee = o ? "notchatbot-webchat-open" : "notchatbot-webchat-closed";
       window.dispatchEvent(new CustomEvent(ee, { detail: { conversationId: f } }));
     }
   }, [o, f]);
@@ -16485,7 +16486,7 @@ También puedes pedir hablar con nuestro equipo de los sueños!`, xd = (e) => ({
   ]), T = Z.useCallback((ee, Y = "bot") => {
     if (A((le) => [...le, ee]), !o && (ee.sender === "bot" || Y === "bot") && ee.id !== s && h(!0), typeof window != "undefined" && (Y === "bot" || Y === "ably")) {
       const le = Y === "bot" ? "assistant" : "employee";
-      window.dispatchEvent(new CustomEvent("WebChatMessageReceived", {
+      window.dispatchEvent(new CustomEvent("notchatbot-webchat-message-received", {
         detail: { message: ee, role: le }
       }));
     }
@@ -16604,7 +16605,7 @@ También puedes pedir hablar con nuestro equipo de los sueños!`, xd = (e) => ({
       }));
       ae.push(...ce), be.push(...ce);
     }
-    A((ce) => [...ce, ...ae]), typeof window != "undefined" && ae.length > 0 && window.dispatchEvent(new CustomEvent("WebChatMessageSent", {
+    A((ce) => [...ce, ...ae]), typeof window != "undefined" && ae.length > 0 && window.dispatchEvent(new CustomEvent("notchatbot-webchat-message-sent", {
       detail: { messages: ae }
     })), C(!0);
     try {
@@ -16612,7 +16613,7 @@ También puedes pedir hablar con nuestro equipo de los sueños!`, xd = (e) => ({
         f,
         be,
         ae,
-        { apiKey: e.apiKey || "" },
+        { apiKey: e.apiKey || "", note: e.note },
         P
       ), ve = yield wd(ce);
       if (ve) {
@@ -16897,7 +16898,7 @@ También puedes pedir hablar con nuestro equipo de los sueños!`, xd = (e) => ({
     });
   }, []);
   const C = Z.useCallback((p) => {
-    u(p), typeof window != "undefined" && window.dispatchEvent(new CustomEvent("EmbedChatMessageReceived", {
+    u(p), typeof window != "undefined" && window.dispatchEvent(new CustomEvent("notchatbot-embedchat-message-received", {
       detail: { message: p, role: "employee" }
     }));
   }, [u]), P = Z.useCallback((p) => {
@@ -16916,7 +16917,7 @@ También puedes pedir hablar con nuestro equipo de los sueños!`, xd = (e) => ({
         conversationId: S,
         type: "text"
       };
-      u(s), typeof window != "undefined" && window.dispatchEvent(new CustomEvent("EmbedChatMessageSent", {
+      u(s), typeof window != "undefined" && window.dispatchEvent(new CustomEvent("notchatbot-embedchat-message-sent", {
         detail: { message: s }
       })), d.push(s), c.push(s);
     }
@@ -16931,7 +16932,7 @@ También puedes pedir hablar con nuestro equipo de los sueños!`, xd = (e) => ({
         metaContent: w.url
       }));
       s.forEach((w) => {
-        u(w), typeof window != "undefined" && window.dispatchEvent(new CustomEvent("EmbedChatMessageSent", {
+        u(w), typeof window != "undefined" && window.dispatchEvent(new CustomEvent("notchatbot-embedchat-message-sent", {
           detail: { message: w }
         })), c.push(w);
       }), d.push(...s);
@@ -16957,7 +16958,7 @@ También puedes pedir hablar con nuestro equipo de los sueños!`, xd = (e) => ({
           l(k), f.current = k.client, m(!0);
         }
         const v = bd(w.response.message);
-        v && (u(v), typeof window != "undefined" && window.dispatchEvent(new CustomEvent("EmbedChatMessageReceived", {
+        v && (u(v), typeof window != "undefined" && window.dispatchEvent(new CustomEvent("notchatbot-embedchat-message-received", {
           detail: { message: v, role: "assistant" }
         })));
       } else {