@developer.notchatbot/webchat 1.2.10 → 1.2.11

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.
package/README.md CHANGED
@@ -1,23 +1,4 @@
1
- # 🔷 WebChat Widget
2
-
3
- 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**.
4
-
5
- ## ✨ Features
6
-
7
- - **📦 Single File Bundle**: Everything in one file - no separate CSS needed!
8
- - **🔷 TypeScript**: Full type safety with strict typing and excellent IntelliSense
9
- - **⚛️ React 18**: Component-based architecture for maintainability
10
- - **🎨 Tailwind CSS**: Utility-first styling with prefixed classes (`ncb-`)
11
- - **⚡ Vite**: Lightning-fast development and optimized builds
12
- - **📦 pnpm**: Efficient package management and faster installs
13
- - **🔧 Easy Integration**: Add to any website with just one script tag
14
- - **🎨 Modern Design**: Beautiful, responsive UI that works on all devices
15
- - **🛠️ Customizable**: Configure colors, text, and behavior to match your brand
16
- - **✨ Smooth Animations**: Typing indicators and smooth transitions
17
- - **📱 Mobile Responsive**: Optimized for mobile and desktop
18
- - **🔌 API Ready**: Built-in support for chat API integration
19
- - **🚫 Zero Conflicts**: Prefixed CSS classes prevent style conflicts
20
- - **🛡️ Type Safe**: Catch errors at compile time with TypeScript
1
+ # 🔷 WebChat - Embedded Chat
21
2
 
22
3
  ## 📦 Quick Start
23
4
 
@@ -343,21 +324,21 @@ We emit **custom browser events** so you can capture interactions and feed them
343
324
 
344
325
  | Widget | Event name | Fired when | `detail` payload |
345
326
  |--------|------------|------------|------------------|
346
- | WebChat | `WebChatOpened` | The floating chat is opened | `{ conversationId }` |
347
- | WebChat | `WebChatClosed` | The floating chat is closed | `{ conversationId }` |
348
- | WebChat | `WebChatMessageSent` | The user sends one or more messages | `{ messages: Message[] }` |
349
- | WebChat | `WebChatMessageReceived` | A message is received from the server | `{ message: Message, role: 'assistant' \| 'employee' }` |
350
- | EmbedChat | `EmbedChatMessageSent` | The user sends a message | `{ message: Message }` |
351
- | EmbedChat | `EmbedChatMessageReceived` | A message is received | `{ message: Message, role: 'assistant' \| 'employee' }` |
327
+ | WebChat | `notchatbot-webchat-open` | The floating chat is opened | `{ conversationId }` |
328
+ | WebChat | `notchatbot-webchat-closed` | The floating chat is closed | `{ conversationId }` |
329
+ | WebChat | `notchatbot-webchat-message-sent` | The user sends one or more messages | `{ messages: Message[] }` |
330
+ | WebChat | `notchatbot-webchat-message-received` | A message is received from the server | `{ message: Message, role: 'assistant' \| 'employee' }` |
331
+ | EmbedChat | `notchatbot-embedchat-message-sent` | The user sends a message | `{ message: Message }` |
332
+ | EmbedChat | `notchatbot-embedchat-message-received` | A message is received | `{ message: Message, role: 'assistant' \| 'employee' }` |
352
333
 
353
334
  `Message` follows the same interface used internally by the widget (id, text, sender, timestamp, etc.).
354
335
 
355
336
  #### Quick example
356
337
  ```js
357
- window.addEventListener('WebChatOpened', e => console.log('WebChat opened', e.detail));
358
- window.addEventListener('WebChatClosed', e => console.log('WebChat closed', e.detail));
359
- window.addEventListener('WebChatMessageSent', e => console.log('Sent', e.detail.messages));
360
- window.addEventListener('WebChatMessageReceived', e => {
338
+ window.addEventListener('notchatbot-webchat-open', e => console.log('WebChat opened', e.detail));
339
+ window.addEventListener('notchatbot-webchat-closed', e => console.log('WebChat closed', e.detail));
340
+ window.addEventListener('notchatbot-webchat-message-sent', e => console.log('Sent', e.detail.messages));
341
+ window.addEventListener('notchatbot-webchat-message-received', e => {
361
342
  const { role, message } = e.detail;
362
343
  console.log('Received', role, message);
363
344
  });
@@ -366,7 +347,7 @@ window.addEventListener('WebChatMessageReceived', e => {
366
347
  #### Google Tag Manager / Google Analytics (GA4)
367
348
  Push data directly to the **dataLayer** and create a trigger in GTM:
368
349
  ```js
369
- window.addEventListener('WebChatMessageSent', e => {
350
+ window.addEventListener('notchatbot-webchat-message-sent', e => {
370
351
  window.dataLayer = window.dataLayer || [];
371
352
  window.dataLayer.push({
372
353
  event: 'webchat_message_sent',
@@ -379,13 +360,13 @@ Then in GTM, add a **Custom Event** trigger called `webchat_message_sent` and li
379
360
 
380
361
  #### Meta / Facebook Pixel
381
362
  ```js
382
- window.addEventListener('WebChatOpened', () => {
363
+ window.addEventListener('notchatbot-webchat-open', () => {
383
364
  if (window.fbq) {
384
365
  fbq('trackCustom', 'WebChatOpened');
385
366
  }
386
367
  });
387
368
 
388
- window.addEventListener('WebChatMessageReceived', e => {
369
+ window.addEventListener('notchatbot-webchat-message-received', e => {
389
370
  if (window.fbq) {
390
371
  fbq('trackCustom', 'WebChatMessageReceived', {
391
372
  role: e.detail.role
@@ -16470,7 +16470,7 @@ También puedes pedir hablar con nuestro equipo de los sueños!`, xd = (e) => ({
16470
16470
  return;
16471
16471
  }
16472
16472
  if (typeof window != "undefined") {
16473
- const ee = o ? "WebChatOpened" : "WebChatClosed";
16473
+ const ee = o ? "notchatbot-webchat-open" : "notchatbot-webchat-closed";
16474
16474
  window.dispatchEvent(new CustomEvent(ee, { detail: { conversationId: f } }));
16475
16475
  }
16476
16476
  }, [o, f]);
@@ -16485,7 +16485,7 @@ También puedes pedir hablar con nuestro equipo de los sueños!`, xd = (e) => ({
16485
16485
  ]), T = Z.useCallback((ee, Y = "bot") => {
16486
16486
  if (A((le) => [...le, ee]), !o && (ee.sender === "bot" || Y === "bot") && ee.id !== s && h(!0), typeof window != "undefined" && (Y === "bot" || Y === "ably")) {
16487
16487
  const le = Y === "bot" ? "assistant" : "employee";
16488
- window.dispatchEvent(new CustomEvent("WebChatMessageReceived", {
16488
+ window.dispatchEvent(new CustomEvent("notchatbot-webchat-message-received", {
16489
16489
  detail: { message: ee, role: le }
16490
16490
  }));
16491
16491
  }
@@ -16604,7 +16604,7 @@ También puedes pedir hablar con nuestro equipo de los sueños!`, xd = (e) => ({
16604
16604
  }));
16605
16605
  ae.push(...ce), be.push(...ce);
16606
16606
  }
16607
- A((ce) => [...ce, ...ae]), typeof window != "undefined" && ae.length > 0 && window.dispatchEvent(new CustomEvent("WebChatMessageSent", {
16607
+ A((ce) => [...ce, ...ae]), typeof window != "undefined" && ae.length > 0 && window.dispatchEvent(new CustomEvent("notchatbot-webchat-message-sent", {
16608
16608
  detail: { messages: ae }
16609
16609
  })), C(!0);
16610
16610
  try {
@@ -16897,7 +16897,7 @@ También puedes pedir hablar con nuestro equipo de los sueños!`, xd = (e) => ({
16897
16897
  });
16898
16898
  }, []);
16899
16899
  const C = Z.useCallback((p) => {
16900
- u(p), typeof window != "undefined" && window.dispatchEvent(new CustomEvent("EmbedChatMessageReceived", {
16900
+ u(p), typeof window != "undefined" && window.dispatchEvent(new CustomEvent("notchatbot-embedchat-message-received", {
16901
16901
  detail: { message: p, role: "employee" }
16902
16902
  }));
16903
16903
  }, [u]), P = Z.useCallback((p) => {
@@ -16916,7 +16916,7 @@ También puedes pedir hablar con nuestro equipo de los sueños!`, xd = (e) => ({
16916
16916
  conversationId: S,
16917
16917
  type: "text"
16918
16918
  };
16919
- u(s), typeof window != "undefined" && window.dispatchEvent(new CustomEvent("EmbedChatMessageSent", {
16919
+ u(s), typeof window != "undefined" && window.dispatchEvent(new CustomEvent("notchatbot-embedchat-message-sent", {
16920
16920
  detail: { message: s }
16921
16921
  })), d.push(s), c.push(s);
16922
16922
  }
@@ -16931,7 +16931,7 @@ También puedes pedir hablar con nuestro equipo de los sueños!`, xd = (e) => ({
16931
16931
  metaContent: w.url
16932
16932
  }));
16933
16933
  s.forEach((w) => {
16934
- u(w), typeof window != "undefined" && window.dispatchEvent(new CustomEvent("EmbedChatMessageSent", {
16934
+ u(w), typeof window != "undefined" && window.dispatchEvent(new CustomEvent("notchatbot-embedchat-message-sent", {
16935
16935
  detail: { message: w }
16936
16936
  })), c.push(w);
16937
16937
  }), d.push(...s);
@@ -16957,7 +16957,7 @@ También puedes pedir hablar con nuestro equipo de los sueños!`, xd = (e) => ({
16957
16957
  l(k), f.current = k.client, m(!0);
16958
16958
  }
16959
16959
  const v = bd(w.response.message);
16960
- v && (u(v), typeof window != "undefined" && window.dispatchEvent(new CustomEvent("EmbedChatMessageReceived", {
16960
+ v && (u(v), typeof window != "undefined" && window.dispatchEvent(new CustomEvent("notchatbot-embedchat-message-received", {
16961
16961
  detail: { message: v, role: "assistant" }
16962
16962
  })));
16963
16963
  } else {
@@ -146,4 +146,4 @@ Please report this to https://github.com/markedjs/marked.`,e){const r="<p>An err
146
146
 
147
147
  Aunque no lo creas, soy una inteligencia artificial! Puedo resolver todas tus dudas 😊
148
148
 
149
- También puedes pedir hablar con nuestro equipo de los sueños!`,Cd=e=>({id:ut(),text:lm(e),sender:"bot",timestamp:new Date().toISOString(),type:"text"}),kd=()=>typeof window!="undefined"&&window.innerWidth<640,um=({config:e,exposeControl:t})=>{if(!e.apiKey)return null;const[n,r]=Z.useState(()=>Ti(e)),[o,i]=Z.useState(!1),[a,l]=Z.useState(()=>kd()),[d,m]=Z.useState(""),[x,R]=Z.useState(!1),[y,E]=Z.useState(!1),[u,C]=Z.useState(!1),[P,b]=Z.useState(""),[,p]=Z.useState(null),g=Z.useRef(null),[S,h]=Z.useState(!1),[f,c]=Z.useState(!1),[s,w]=Z.useState(""),[v,k]=Z.useState(!0),[L,N]=Z.useState(!1),I=Z.useRef(!0);Z.useEffect(()=>{if(I.current){I.current=!1;return}if(typeof window!="undefined"){const ee=o?"WebChatOpened":"WebChatClosed";window.dispatchEvent(new CustomEvent(ee,{detail:{conversationId:d}}))}},[o,d]);const[O,A]=Z.useState([e.initialMessage?{id:ut(),text:e.initialMessage,sender:"bot",timestamp:new Date().toISOString(),type:"text"}:Cd(e.title)]),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",{detail:{message:ee,role:le}}))}},[o,s]);Z.useEffect(()=>{const ee=()=>{const Y=kd();l(Y)};return window.addEventListener("resize",ee),()=>window.removeEventListener("resize",ee)},[]),Z.useEffect(()=>em(()=>{r(Ti(e))}),[e]),Z.useEffect(()=>{r(Ti(e))},[e]),Z.useEffect(()=>{De(this,null,function*(){const Y=pd();m(Y);const le=yield md();b(le)})},[]),Z.useEffect(()=>{if(O.length>0){const ee=O[O.length-1];ee.sender==="bot"&&w(ee.id)}},[]);const j=Z.useCallback(ee=>{T(ee,"ably")},[T]),B=Z.useCallback(ee=>{k(ee)},[]),z=Z.useCallback(ee=>De(this,null,function*(){if(!(f||g.current))try{if(ee.tokenDetails){const Y=yield Ai(ee.tokenDetails,e.apiKey||"",d,j,B);p(Y),g.current=Y.client,c(!0)}}catch(Y){console.error("[❌ ABLY SETUP ERROR from history]",Y)}}),[f,d,j]),$=Z.useCallback(()=>De(this,null,function*(){if(!(f||g.current))try{const ee=yield sm(d,e.apiKey||"");if(ee!=null&&ee.tokenDetails){const Y=yield Ai(ee.tokenDetails,e.apiKey||"",d,j,B);p(Y),g.current=Y.client,c(!0)}}catch(ee){console.error("[❌ ABLY SETUP ERROR from endpoint]",ee)}}),[f,d,e.apiKey,j]),V=Z.useCallback(()=>De(this,null,function*(){var Y,le;const ee=o;if(i(se=>!se),!ee){h(!1);const se=O.filter(ke=>ke.sender==="bot").slice(-1)[0];se&&w(se.id)}if(!ee&&!x&&d&&gd()&&!f){E(!0);const se=yield nm(d,e.apiKey||"");if(((le=(Y=se==null?void 0:se.conversation)==null?void 0:Y.messages)==null?void 0:le.length)>0){const ke=rm(se.conversation.messages);A(ke),se.conversation.chatbotActivated!==void 0&&k(se.conversation.chatbotActivated),se.conversation.isRated!==void 0&&N(se.conversation.isRated);const ce=ke.filter(xe=>xe.sender==="bot").slice(-1)[0];ce&&w(ce.id),yield z(se)}else console.warn("WebChat: No conversation history found, showing initial message");E(!1),R(!0)}else!ee&&gd()&&!f&&(yield $())}),[o,d,x,f,e.apiKey,z,$,O]),G=Z.useCallback(()=>{i(!1)},[]),M=Z.useCallback((ee,Y)=>De(this,null,function*(){const le=new Date().toISOString(),se=[],ke=[...O];if(ee.trim()){const ce={id:ut(),text:ee,sender:"user",timestamp:le,type:"text"};se.push(ce),ke.push(ce)}if(Y&&Y.length>0){const ce=Y.map(xe=>({id:ut(),text:xe.type.startsWith("image/")?`![image](${xe.url})`:`[${xe.name}](${xe.url})`,sender:"user",timestamp:le,type:xe.type.startsWith("image/")?"image":"file",metaContent:xe.url}));se.push(...ce),ke.push(...ce)}A(ce=>[...ce,...se]),typeof window!="undefined"&&se.length>0&&window.dispatchEvent(new CustomEvent("WebChatMessageSent",{detail:{messages:se}})),C(!0);try{const ce=bd(d,ke,se,{apiKey:e.apiKey||""},P),xe=yield xd(ce);if(xe){if(xe.response.tokenDetails&&!g.current){const tt=yield Ai(xe.response.tokenDetails,e.apiKey||"",d,j,B);p(tt),g.current=tt.client,c(!0)}const Wt=Sd(xe.response.message);Wt&&T(Wt,"bot")}else{setTimeout(()=>{const Wt=Ii();T(Wt,"bot"),C(!1)},1e3);return}}catch(ce){console.error("WebChat: Error in message handling:",ce),setTimeout(()=>{const xe=Ii();T(xe,"bot"),C(!1)},1e3);return}C(!1),Zg(!0)}),[d,O,e.apiKey,P,j,T]),D=tm(n);Z.useEffect(()=>()=>{wd(g.current),g.current=null},[]);const U=Z.useCallback(ee=>i(ee),[]),_=Z.useCallback(ee=>r(Y=>ae(ae({},Y),ee)),[]),W=Z.useCallback(ee=>r(Y=>ae(ae({},Y),ee)),[]),[X,q]=Z.useState(!1),re=Z.useCallback(()=>q(!0),[]),ie=Z.useCallback(()=>q(!1),[]);return Z.useEffect(()=>{t&&t({setIsOpen:U,updateConfig:_,setPosition:W,hide:re,show:ie})},[t,U,_,W,re,ie]),F.jsxs("div",{className:"nbc-font-sans",style:{zIndex:2147483647,display:X?"none":void 0},children:[D.showPopup!==!1&&F.jsx(Yg,{initialMessage:e.initialMessage,avatar:n.avatar,position:D.position,marginBottom:D.marginBottom,marginSide:D.marginSide,primaryColor:n.primaryColor||"#007bff",isMobile:a,isOpen:o,onPopoverClick:V}),F.jsx(tg,{isOpen:o,onClick:V,primaryColor:n.primaryColor,position:D.position,marginBottom:D.marginBottom,marginSide:D.marginSide,hasNewMessages:S,isMobile:a}),F.jsx(Qg,{isOpen:o,onClose:G,config:n,messages:O,onSendMessage:M,isLoading:y,isAiTyping:u,position:D.position,marginBottom:D.marginBottom,marginSide:D.marginSide,isMobile:a,apiKeyMissing:!e.apiKey,chatbotActivated:v,isRated:L,onRatingChange:N,conversationId:d})]})},Ed='*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.nbc-pointer-events-none{pointer-events:none}.nbc-pointer-events-auto{pointer-events:auto}.nbc-fixed{position:fixed}.nbc-absolute{position:absolute}.nbc-relative{position:relative}.nbc-inset-0{inset:0}.nbc-inset-auto{inset:auto}.nbc-left-2{left:8px}.nbc-right-0{right:0}.nbc-right-2{right:8px}.nbc-top-0{top:0}.nbc-top-1\\/2{top:50%}.nbc-top-2{top:8px}.nbc-top-full{top:100%}.nbc-m-0{margin:0}.nbc-mx-auto{margin-left:auto;margin-right:auto}.nbc-mb-1{margin-bottom:4px}.nbc-mb-2{margin-bottom:8px}.nbc-mb-4{margin-bottom:16px}.nbc-ml-1{margin-left:4px}.nbc-ml-2{margin-left:8px}.nbc-mr-1{margin-right:4px}.nbc-mr-3{margin-right:12px}.nbc-mt-1{margin-top:4px}.nbc-line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.nbc-flex{display:flex}.nbc-hidden{display:none}.nbc-h-0{height:0px}.nbc-h-10{height:40px}.nbc-h-12{height:48px}.nbc-h-16{height:64px}.nbc-h-2{height:8px}.nbc-h-24{height:96px}.nbc-h-3{height:12px}.nbc-h-4{height:16px}.nbc-h-5{height:20px}.nbc-h-6{height:24px}.nbc-h-7{height:28px}.nbc-h-8{height:32px}.nbc-h-auto{height:auto}.nbc-h-full{height:100%}.nbc-min-h-0{min-height:0px}.nbc-min-h-\\[220px\\]{min-height:220px}.nbc-w-0{width:0px}.nbc-w-10{width:40px}.nbc-w-12{width:48px}.nbc-w-16{width:64px}.nbc-w-2{width:8px}.nbc-w-3{width:12px}.nbc-w-4{width:16px}.nbc-w-5{width:20px}.nbc-w-6{width:24px}.nbc-w-7{width:28px}.nbc-w-8{width:32px}.nbc-w-auto{width:auto}.nbc-w-full{width:100%}.nbc-max-w-20{max-width:80px}.nbc-max-w-\\[90\\%\\]{max-width:90%}.nbc-max-w-xs{max-width:20rem}.nbc-flex-1{flex:1 1 0%}.nbc-flex-shrink-0{flex-shrink:0}.-nbc-translate-y-4{--tw-translate-y: -16px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc--translate-y-1\\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-translate-y-2{--tw-translate-y: 8px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-translate-y-3{--tw-translate-y: 12px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-translate-y-4{--tw-translate-y: 16px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-translate-y-\\[-10px\\]{--tw-translate-y: -10px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-scale-90{--tw-scale-x: .9;--tw-scale-y: .9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-scale-95{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-scale-\\[1\\.13\\]{--tw-scale-x: 1.13;--tw-scale-y: 1.13;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes nbc-bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.nbc-animate-bounce{animation:nbc-bounce 1s infinite}@keyframes nbc-ping{75%,to{transform:scale(2);opacity:0}}.nbc-animate-ping{animation:nbc-ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes nbc-pulse{50%{opacity:.5}}.nbc-animate-pulse{animation:nbc-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes nbc-spin{to{transform:rotate(360deg)}}.nbc-animate-spin{animation:nbc-spin 1s linear infinite}.nbc-cursor-pointer{cursor:pointer}.nbc-flex-col{flex-direction:column}.nbc-flex-wrap{flex-wrap:wrap}.nbc-items-start{align-items:flex-start}.nbc-items-end{align-items:flex-end}.nbc-items-center{align-items:center}.nbc-justify-start{justify-content:flex-start}.nbc-justify-end{justify-content:flex-end}.nbc-justify-center{justify-content:center}.nbc-justify-between{justify-content:space-between}.nbc-gap-2{gap:8px}.nbc-space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(4px * var(--tw-space-x-reverse));margin-left:calc(4px * calc(1 - var(--tw-space-x-reverse)))}.nbc-space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(12px * var(--tw-space-x-reverse));margin-left:calc(12px * calc(1 - var(--tw-space-x-reverse)))}.nbc-space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(8px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(8px * var(--tw-space-y-reverse))}.nbc-space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(16px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(16px * var(--tw-space-y-reverse))}.nbc-overflow-hidden{overflow:hidden}.nbc-overflow-y-auto{overflow-y:auto}.nbc-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nbc-whitespace-nowrap{white-space:nowrap}.nbc-break-words{overflow-wrap:break-word}.nbc-rounded{border-radius:4px}.nbc-rounded-2xl{border-radius:16px}.nbc-rounded-full{border-radius:9999px}.nbc-rounded-lg{border-radius:8px}.nbc-rounded-none{border-radius:0}.nbc-rounded-bl-md{border-bottom-left-radius:6px}.nbc-rounded-br-md{border-bottom-right-radius:6px}.nbc-border{border-width:1px}.nbc-border-0{border-width:0px}.nbc-border-2{border-width:2px}.nbc-border-b{border-bottom-width:1px}.nbc-border-t{border-top-width:1px}.nbc-border-none{border-style:none}.nbc-border-gray-100{--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.nbc-border-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.nbc-border-white{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.nbc-border-t-gray-600{--tw-border-opacity: 1;border-top-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.nbc-bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.nbc-bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.nbc-bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.nbc-bg-gray-300{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))}.nbc-bg-gray-400{--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.nbc-bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.nbc-bg-green-400{--tw-bg-opacity: 1;background-color:rgb(74 222 128 / var(--tw-bg-opacity, 1))}.nbc-bg-green-500{--tw-bg-opacity: 1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.nbc-bg-transparent{background-color:transparent}.nbc-bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.nbc-bg-none{background-image:none}.nbc-object-cover{-o-object-fit:cover;object-fit:cover}.nbc-p-0{padding:0}.nbc-p-1{padding:4px}.nbc-p-2{padding:8px}.nbc-p-4{padding:16px}.nbc-p-5{padding:20px}.nbc-px-2{padding-left:8px;padding-right:8px}.nbc-px-4{padding-left:16px;padding-right:16px}.nbc-py-1{padding-top:4px;padding-bottom:4px}.nbc-py-2{padding-top:8px;padding-bottom:8px}.nbc-py-3{padding-top:12px;padding-bottom:12px}.nbc-pl-12{padding-left:48px}.nbc-pr-12{padding-right:48px}.nbc-pt-4{padding-top:16px}.nbc-text-center{text-align:center}.nbc-text-right{text-align:right}.nbc-font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.nbc-text-\\[15px\\]{font-size:15px}.nbc-text-lg{font-size:18px}.nbc-text-sm{font-size:14px}.nbc-text-xs{font-size:12px}.nbc-font-bold{font-weight:700}.nbc-font-medium{font-weight:500}.nbc-italic{font-style:italic}.nbc-leading-none{line-height:1}.nbc-leading-relaxed{line-height:1.625}.nbc-text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.nbc-text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.nbc-text-blue-500{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.nbc-text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.nbc-text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.nbc-text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.nbc-text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.nbc-text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.nbc-text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.nbc-text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.nbc-no-underline{text-decoration-line:none}.nbc-opacity-0{opacity:0}.nbc-opacity-100{opacity:1}.nbc-opacity-50{opacity:.5}.nbc-opacity-70{opacity:.7}.nbc-opacity-75{opacity:.75}.nbc-shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.nbc-shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.nbc-shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.nbc-shadow-none{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.nbc-shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.nbc-shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.nbc-outline-none{outline:2px solid transparent;outline-offset:2px}.nbc-transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.nbc-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.nbc-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.nbc-duration-200{transition-duration:.2s}.nbc-duration-300{transition-duration:.3s}.nbc-duration-500{transition-duration:.5s}.nbc-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\\:nbc-scale-105:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:nbc-scale-\\[1\\.02\\]:hover{--tw-scale-x: 1.02;--tw-scale-y: 1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:nbc-bg-black:hover{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.hover\\:nbc-bg-gray-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.hover\\:nbc-bg-opacity-20:hover{--tw-bg-opacity: .2}.hover\\:nbc-text-gray-600:hover{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.hover\\:nbc-text-gray-700:hover{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.disabled\\:nbc-cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:nbc-opacity-50:disabled{opacity:.5}',cm={apiKey:"",primaryColor:"#111111",avatar:"",title:"NotChatBot",placeholder:"Escribe tu mensaje...",initialMessage:"¡Hola! ¿En qué puedo ayudarte?",position:"bottom-right",marginBottom:20,marginSide:20,showPopup:!0,mobile:{position:"bottom-right",marginBottom:15,marginSide:15,showPopup:!0},desktop:{position:"bottom-right",marginBottom:25,marginSide:25,showPopup:!0},closeButtonIcon:"default",closeButtonText:"Cerrar",closeButtonCustomIcon:""},fm=({title:e,primaryColor:t="#3b82f6",avatar:n})=>{const r={backgroundColor:t};return F.jsxs("div",{id:"notchatbot-embed-chat-header",style:r,className:"nbc-flex nbc-items-center nbc-p-4",children:[F.jsx("div",{className:"nbc-flex nbc-items-center nbc-mr-3 nbc-text-black",children:n?F.jsx("img",{src:n,alt:"Avatar",className:"nbc-w-8 nbc-h-8 nbc-rounded-full nbc-object-cover"}):F.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"40",height:"40",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"nbc-w-8 nbc-h-8 nbc-bg-white nbc-rounded-full nbc-p-1",children:[F.jsx("path",{d:"M12 6V2H8"}),F.jsx("path",{d:"m8 18-4 4V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2Z"}),F.jsx("path",{d:"M2 12h2"}),F.jsx("path",{d:"M9 11v2"}),F.jsx("path",{d:"M15 11v2"}),F.jsx("path",{d:"M20 12h2"})]})}),F.jsx("h3",{className:"nbc-m-0 nbc-text-lg nbc-font-bold nbc-text-white",children:e})]})},dm=({footerText:e,primaryColor:t,footerColor:n})=>{if(!e)return null;const r=o=>{const i=/(https?:\/\/[^\s]+)/g;return o.split(i).map((l,d)=>i.test(l)?F.jsx("a",{href:l,target:"_blank",rel:"noopener noreferrer",className:"nbc-font-medium nbc-no-underline",style:{color:t},children:l},d):l)};return F.jsx("div",{id:"notchatbot-embed-chat-footer",className:"nbc-py-3 nbc-px-4 nbc-bg-gray-50 nbc-text-xs nbc-text-gray-600 nbc-text-center nbc-leading-relaxed nbc-italic",style:{backgroundColor:n},children:r(e)})},hm=({config:e,messages:t,onSendMessage:n,isLoading:r,isAiTyping:o,chatbotActivated:i=!0})=>{var d;const a=(m,x="auto")=>m===void 0?x:typeof m=="number"?`${m}px`:m,l={width:a(e.width,"100%"),height:a(e.height,"400px"),maxWidth:a(e.maxWidth,"100%"),maxHeight:a(e.maxHeight,"100vh"),minWidth:a(e.minWidth,"280px"),minHeight:a(e.minHeight,"300px"),display:"flex",flexDirection:"column",backgroundColor:e.chatTransparent?"transparent":e.chatBackground||"#ffffff",borderRadius:a(e.borderRadius,"0px"),border:e.border||"1px solid #e5e7eb",boxShadow:e.boxShadow||"0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",overflow:"hidden",position:"relative"};return F.jsxs("div",{id:"notchatbot-embed-chat",className:"nbc-font-sans",style:l,children:[e.showHeader!==!1&&F.jsx(fm,{title:e.title||"Chat",primaryColor:e.primaryColor,avatar:e.avatar}),F.jsxs("div",{id:"notchatbot-embed-chat-body",className:"nbc-flex-1 nbc-flex nbc-flex-col nbc-min-h-0",style:{position:"relative",overflow:"hidden"},children:[r?F.jsx("div",{className:"nbc-flex-1 nbc-p-4",children:F.jsx(ld,{})}):F.jsx(od,{messages:t,isTyping:o||!1,avatar:e.avatar,textColor:e.textColor,bubbleUserColor:e.bubbleUserColor,chatbotActivated:i}),F.jsx("div",{id:"notchatbot-embed-chat-body-input",className:"nbc-py-2 nbc-bg-gray-50 nbc-border-none",style:{backgroundColor:(d=e.input)==null?void 0:d.backgroundColor},children:F.jsx(sd,{onSendMessage:n,placeholder:e.placeholder||"Escribe un mensaje...",primaryColor:e.primaryColor,disabled:r,input:e.input,apiKey:e.apiKey})})]}),e.showFooter!==!1&&e.footerText&&F.jsx(dm,{footerText:e.footerText,primaryColor:e.primaryColor,footerColor:e.footerColor})]})},pm=({config:e})=>{if(!e.apiKey)return null;const[t,n]=Z.useState(""),[r,o]=Z.useState(!1),[i,a]=Z.useState(""),[,l]=Z.useState(null),d=Z.useRef(null),[,m]=Z.useState(!1),[x,R]=Z.useState(!0),[y,E]=Z.useState([e.initialMessage?{id:ut(),text:e.initialMessage,sender:"bot",timestamp:new Date().toISOString(),type:"text"}:Cd(e.title)]),u=Z.useCallback(p=>{E(g=>[...g,p])},[]);Z.useEffect(()=>{De(this,null,function*(){const g=yield md();a(g)})},[]);const C=Z.useCallback(p=>{u(p),typeof window!="undefined"&&window.dispatchEvent(new CustomEvent("EmbedChatMessageReceived",{detail:{message:p,role:"employee"}}))},[u]),P=Z.useCallback(p=>{R(p)},[]),b=Z.useCallback((p,g)=>De(this,null,function*(){if(!p.trim()&&(!g||g.length===0))return;let S=t;S||(S=ut(),n(S));const h=new Date().toISOString(),f=[...y],c=[];if(p.trim()){const s={id:ut(),text:p,sender:"user",timestamp:h,conversationId:S,type:"text"};u(s),typeof window!="undefined"&&window.dispatchEvent(new CustomEvent("EmbedChatMessageSent",{detail:{message:s}})),f.push(s),c.push(s)}if(g&&g.length>0){const s=g.map(w=>({id:ut(),text:w.type.startsWith("image/")?`![image](${w.url})`:`[${w.name}](${w.url})`,sender:"user",timestamp:h,conversationId:S,type:w.type.startsWith("image/")?"image":"file",metaContent:w.url}));s.forEach(w=>{u(w),typeof window!="undefined"&&window.dispatchEvent(new CustomEvent("EmbedChatMessageSent",{detail:{message:w}})),c.push(w)}),f.push(...s)}o(!0);try{const s=bd(S,f,c,{apiKey:e.apiKey||""},i),w=yield xd(s);if(w){if(w.response.tokenDetails&&!d.current){const k=yield Ai(w.response.tokenDetails,e.apiKey||"",S,C,P);l(k),d.current=k.client,m(!0)}const v=Sd(w.response.message);v&&(u(v),typeof window!="undefined"&&window.dispatchEvent(new CustomEvent("EmbedChatMessageReceived",{detail:{message:v,role:"assistant"}})))}else{setTimeout(()=>{const v=Ii();u(v),o(!1)},1e3);return}o(!1)}catch(s){console.error("EmbedChat: Error sending message:",s),setTimeout(()=>{const w=Ii();u(w),o(!1)},1e3);return}}),[t,i,e.apiKey,u,C,y]);return Z.useEffect(()=>()=>{d.current&&wd(d.current)},[]),F.jsx(hm,{config:e,messages:y,onSendMessage:b,isLoading:!1,isAiTyping:r,chatbotActivated:x})};(()=>{if(typeof document=="undefined")return;const e={},t=document.dispatchEvent.bind(document);document.dispatchEvent=r=>{const o=r==null?void 0:r.type;return(o==="WebChatReady"||o==="EmbedChatReady")&&(e[o]=!0),t(r)};const n=document.addEventListener.bind(document);document.addEventListener=(r,o,i)=>{const a=r;if((a==="WebChatReady"||a==="EmbedChatReady")&&e[a]){const l=new CustomEvent(a);setTimeout(()=>{typeof o=="function"?o.call(document,l):o&&typeof o.handleEvent=="function"&&o.handleEvent(l)},0)}return n(r,o,i)}})();let or=null;const qr={},Pi={};let ct=null,Ne=null,ul=!1,eo={};const cl={},Rd=e=>{try{if(!e.elementId)return console.error("EmbedChat: elementId is required"),null;const t=document.getElementById(e.elementId);if(!t)return null;let n;t.shadowRoot?(n=t.shadowRoot,n.innerHTML=""):n=t.attachShadow({mode:"open"});const r=document.createElement("style");if(r.textContent=Ed,n.appendChild(r),e.customCSS){const a=document.createElement("style");a.setAttribute("data-custom","true"),a.textContent=e.customCSS,n.appendChild(a)}const o=document.createElement("div");n.appendChild(o);const i=Ys(o);return i.render(Hi.createElement(pm,{config:e})),Pi[e.elementId]={destroy:()=>{i.unmount(),n.innerHTML="",delete Pi[e.elementId],cl[e.elementId]=e}},cl[e.elementId]=e,Pi[e.elementId]}catch(t){return console.error("EmbedChat: Failed to initialize",t),null}};function Gt(){let e=qr["webchat-notchatbot"];if(!e){const n=ae(ae({},Ne),eo);let r="webchat-notchatbot";typeof(Ne==null?void 0:Ne.elementId)=="string"&&Ne.elementId&&(r=Ne.elementId);const t=n,{elementId:o}=t,i=vl(t,["elementId"]);"elementId"in i&&delete i.elementId;const a=Object.assign({elementId:r},i);e=Od(a),ul&&e&&e.setIsOpen&&e.setIsOpen(!0);const l=new CustomEvent("WebChatReady");document.dispatchEvent(l)}return e}const Od=e=>{try{let t=function(u){return Hi.createElement(um,We(ae({},u),{exposeControl:C=>{l=C.setIsOpen,d=C.updateConfig,m=C.setPosition,x=C.hide,R=C.show,y=C.getIsOpen}}))};or&&(or.destroy(),or=null);const n=ae(ae({elementId:"webchat-notchatbot"},cm),e);Ne=n;let r=document.getElementById(n.elementId);r||(r=document.createElement("div"),r.id=n.elementId,document.body.appendChild(r));let o;r.shadowRoot?(o=r.shadowRoot,o.innerHTML=""):o=r.attachShadow({mode:"open"}),ct=o;const i=document.createElement("style");i.textContent=Ed,o.appendChild(i);const a=document.createElement("div");o.appendChild(a);let l=null,d=null,m=null,x=null,R=null,y=null;const E=Ys(a);return E.render(Hi.createElement(t,{config:n})),qr[n.elementId]={root:E,destroy:()=>{E.unmount(),or=null,ct&&(ct.innerHTML=""),delete qr[n.elementId]},getConversationId:()=>pd(),setIsOpen:u=>{ul=u,l&&l(u)},updateConfig:u=>{Ne=dl(ae(ae({},Ne),u)),d&&d(u)},setPosition:u=>{eo=to(eo,u),Ne=dl(to(Ne||{},u)),m&&m(u),d&&d(u)},hide:()=>x&&x(),show:()=>R&&R(),injectCSS:u=>{if(!ct)return;let C=ct.querySelector("style[data-custom]");C&&C.remove(),C=document.createElement("style"),C.setAttribute("data-custom","true"),C.textContent=u,ct.appendChild(C)},removeCustomCSS:()=>{if(!ct)return;const u=ct.querySelector("style[data-custom]");u&&u.remove()},getIsOpen:()=>y?y():ul},or=qr[n.elementId],or}catch(t){return console.error("WebChat: Failed to initialize",t),null}},Td={initialize:Od},Ad={initialize:Rd};typeof window!="undefined"&&(window.WebChat=Td,window.EmbedChat=Ad,window.openWebChat=()=>{const e=Gt();e&&e.setIsOpen(!0)},window.closeWebChat=()=>{const e=Gt();e&&e.setIsOpen(!1)},window.toggleWebChat=()=>{const e=Gt();e&&e.setIsOpen&&e.getIsOpen&&e.setIsOpen(!e.getIsOpen())},window.unmountWebChat=()=>{const e=qr["webchat-notchatbot"];e&&e.destroy()},window.mountWebChat=()=>{Gt()},window.setWebChatPosition=e=>{const t=Gt();if(!t||!t.setPosition)return;let n={};if(e.mobile||e.desktop)n=to({},e);else if(e.device==="mobile"||e.device==="desktop"){const r=e.device;n[r]=ae(ae({},Ne&&typeof Ne[r]=="object"?Ne[r]:{}),e),n[r]&&typeof n[r]=="object"&&"device"in n[r]&&delete n[r].device}else n=ae({},e);Ne=dl(to(Ne||{},n)),eo=to(eo,n),t.setPosition(n)},window.hideWebChat=()=>{const e=Gt();e&&e.hide&&e.hide()},window.showWebChat=()=>{const e=Gt();e&&e.show&&e.show()},window.injectWebChatCSS=e=>{if(Gt(),ct){let t=ct.querySelector("style[data-custom]");t&&t.remove(),t=document.createElement("style"),t.setAttribute("data-custom","true"),t.textContent=e,ct.appendChild(t)}},window.removeWebChatCSS=()=>{if(Gt(),ct){const e=ct.querySelector("style[data-custom]");e&&e.remove()}},window.unmountEmbedChat=e=>{const t=Pi[e];t&&t.destroy()},window.mountEmbedChat=e=>{const t=cl[e];t?Rd(t):console.warn(`No config found for EmbedChat with elementId: ${e}`)},window.addEventListener("openWebChatbot",()=>window.openWebChat()),window.addEventListener("closeWebChatbot",()=>window.closeWebChat()),window.addEventListener("toggleWebChatbot",()=>window.toggleWebChat()),window.addEventListener("addCustomPadding",e=>{if(e&&e.detail){let t={};if(typeof e.detail=="object")if(e.detail.mobile||e.detail.desktop)t=ae({},e.detail);else if(e.detail.device==="mobile"||e.detail.device==="desktop"){const n=e.detail.device;t[n]=ae(ae({},Ne&&typeof Ne[n]=="object"?Ne[n]:{}),e.detail),t[n]&&typeof t[n]=="object"&&"device"in t[n]&&delete t[n].device}else("y"in e.detail||"marginBottom"in e.detail)&&(t={},"y"in e.detail&&(t.marginBottom=parseInt(e.detail.y,10)),"x"in e.detail&&(t.marginSide=parseInt(e.detail.x,10)),"marginBottom"in e.detail&&(t.marginBottom=parseInt(e.detail.marginBottom,10)),"marginSide"in e.detail&&(t.marginSide=parseInt(e.detail.marginSide,10)));window.setWebChatPosition(t)}}),setTimeout(()=>{const e=new CustomEvent("WebChatReady",{bubbles:!0});document.dispatchEvent(e)},0),setTimeout(()=>{const e=new CustomEvent("EmbedChatReady",{bubbles:!0});document.dispatchEvent(e)},0));const gm=()=>{const e=new CustomEvent("WebChatReady",{bubbles:!0});document.dispatchEvent(e)},Id=()=>{const e=new CustomEvent("EmbedChatReady",{bubbles:!0});document.dispatchEvent(e)},Pd=()=>{gm(),Id()},fl=()=>{requestAnimationFrame(()=>{setTimeout(()=>{Id()},0)})};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",Pd):setTimeout(Pd,0),function(e){const t=e.pushState,n=e.replaceState;e.pushState=function(...r){const o=t.apply(e,r);return window.dispatchEvent(new Event("routechange")),o},e.replaceState=function(...r){const o=n.apply(e,r);return window.dispatchEvent(new Event("routechange")),o}}(window.history),window.addEventListener("popstate",fl),window.addEventListener("hashchange",fl),window.addEventListener("routechange",fl);function to(e,t){if(!t)return e;const n=ae({},e);for(const r of Object.keys(t))r==="mobile"||r==="desktop"?n[r]=ae(ae({},e[r]||{}),t[r]):n[r]=t[r];return n}function dl(e){const t=typeof e.elementId=="string"&&e.elementId?e.elementId:"webchat-notchatbot",o=e,{elementId:n}=o,r=vl(o,["elementId"]);return ae({elementId:t},r)}pe.EmbedChatAPI=Ad,pe.WebChat=Td,Object.defineProperty(pe,Symbol.toStringTag,{value:"Module"})});
149
+ También puedes pedir hablar con nuestro equipo de los sueños!`,Cd=e=>({id:ut(),text:lm(e),sender:"bot",timestamp:new Date().toISOString(),type:"text"}),kd=()=>typeof window!="undefined"&&window.innerWidth<640,um=({config:e,exposeControl:t})=>{if(!e.apiKey)return null;const[n,r]=Z.useState(()=>Ti(e)),[o,i]=Z.useState(!1),[a,l]=Z.useState(()=>kd()),[d,m]=Z.useState(""),[x,R]=Z.useState(!1),[y,E]=Z.useState(!1),[u,C]=Z.useState(!1),[P,b]=Z.useState(""),[,p]=Z.useState(null),g=Z.useRef(null),[S,h]=Z.useState(!1),[f,c]=Z.useState(!1),[s,w]=Z.useState(""),[v,k]=Z.useState(!0),[L,N]=Z.useState(!1),I=Z.useRef(!0);Z.useEffect(()=>{if(I.current){I.current=!1;return}if(typeof window!="undefined"){const ee=o?"notchatbot-webchat-open":"notchatbot-webchat-closed";window.dispatchEvent(new CustomEvent(ee,{detail:{conversationId:d}}))}},[o,d]);const[O,A]=Z.useState([e.initialMessage?{id:ut(),text:e.initialMessage,sender:"bot",timestamp:new Date().toISOString(),type:"text"}:Cd(e.title)]),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("notchatbot-webchat-message-received",{detail:{message:ee,role:le}}))}},[o,s]);Z.useEffect(()=>{const ee=()=>{const Y=kd();l(Y)};return window.addEventListener("resize",ee),()=>window.removeEventListener("resize",ee)},[]),Z.useEffect(()=>em(()=>{r(Ti(e))}),[e]),Z.useEffect(()=>{r(Ti(e))},[e]),Z.useEffect(()=>{De(this,null,function*(){const Y=pd();m(Y);const le=yield md();b(le)})},[]),Z.useEffect(()=>{if(O.length>0){const ee=O[O.length-1];ee.sender==="bot"&&w(ee.id)}},[]);const j=Z.useCallback(ee=>{T(ee,"ably")},[T]),B=Z.useCallback(ee=>{k(ee)},[]),z=Z.useCallback(ee=>De(this,null,function*(){if(!(f||g.current))try{if(ee.tokenDetails){const Y=yield Ai(ee.tokenDetails,e.apiKey||"",d,j,B);p(Y),g.current=Y.client,c(!0)}}catch(Y){console.error("[❌ ABLY SETUP ERROR from history]",Y)}}),[f,d,j]),$=Z.useCallback(()=>De(this,null,function*(){if(!(f||g.current))try{const ee=yield sm(d,e.apiKey||"");if(ee!=null&&ee.tokenDetails){const Y=yield Ai(ee.tokenDetails,e.apiKey||"",d,j,B);p(Y),g.current=Y.client,c(!0)}}catch(ee){console.error("[❌ ABLY SETUP ERROR from endpoint]",ee)}}),[f,d,e.apiKey,j]),V=Z.useCallback(()=>De(this,null,function*(){var Y,le;const ee=o;if(i(se=>!se),!ee){h(!1);const se=O.filter(ke=>ke.sender==="bot").slice(-1)[0];se&&w(se.id)}if(!ee&&!x&&d&&gd()&&!f){E(!0);const se=yield nm(d,e.apiKey||"");if(((le=(Y=se==null?void 0:se.conversation)==null?void 0:Y.messages)==null?void 0:le.length)>0){const ke=rm(se.conversation.messages);A(ke),se.conversation.chatbotActivated!==void 0&&k(se.conversation.chatbotActivated),se.conversation.isRated!==void 0&&N(se.conversation.isRated);const ce=ke.filter(xe=>xe.sender==="bot").slice(-1)[0];ce&&w(ce.id),yield z(se)}else console.warn("WebChat: No conversation history found, showing initial message");E(!1),R(!0)}else!ee&&gd()&&!f&&(yield $())}),[o,d,x,f,e.apiKey,z,$,O]),G=Z.useCallback(()=>{i(!1)},[]),M=Z.useCallback((ee,Y)=>De(this,null,function*(){const le=new Date().toISOString(),se=[],ke=[...O];if(ee.trim()){const ce={id:ut(),text:ee,sender:"user",timestamp:le,type:"text"};se.push(ce),ke.push(ce)}if(Y&&Y.length>0){const ce=Y.map(xe=>({id:ut(),text:xe.type.startsWith("image/")?`![image](${xe.url})`:`[${xe.name}](${xe.url})`,sender:"user",timestamp:le,type:xe.type.startsWith("image/")?"image":"file",metaContent:xe.url}));se.push(...ce),ke.push(...ce)}A(ce=>[...ce,...se]),typeof window!="undefined"&&se.length>0&&window.dispatchEvent(new CustomEvent("notchatbot-webchat-message-sent",{detail:{messages:se}})),C(!0);try{const ce=bd(d,ke,se,{apiKey:e.apiKey||""},P),xe=yield xd(ce);if(xe){if(xe.response.tokenDetails&&!g.current){const tt=yield Ai(xe.response.tokenDetails,e.apiKey||"",d,j,B);p(tt),g.current=tt.client,c(!0)}const Wt=Sd(xe.response.message);Wt&&T(Wt,"bot")}else{setTimeout(()=>{const Wt=Ii();T(Wt,"bot"),C(!1)},1e3);return}}catch(ce){console.error("WebChat: Error in message handling:",ce),setTimeout(()=>{const xe=Ii();T(xe,"bot"),C(!1)},1e3);return}C(!1),Zg(!0)}),[d,O,e.apiKey,P,j,T]),D=tm(n);Z.useEffect(()=>()=>{wd(g.current),g.current=null},[]);const U=Z.useCallback(ee=>i(ee),[]),_=Z.useCallback(ee=>r(Y=>ae(ae({},Y),ee)),[]),W=Z.useCallback(ee=>r(Y=>ae(ae({},Y),ee)),[]),[X,q]=Z.useState(!1),re=Z.useCallback(()=>q(!0),[]),ie=Z.useCallback(()=>q(!1),[]);return Z.useEffect(()=>{t&&t({setIsOpen:U,updateConfig:_,setPosition:W,hide:re,show:ie})},[t,U,_,W,re,ie]),F.jsxs("div",{className:"nbc-font-sans",style:{zIndex:2147483647,display:X?"none":void 0},children:[D.showPopup!==!1&&F.jsx(Yg,{initialMessage:e.initialMessage,avatar:n.avatar,position:D.position,marginBottom:D.marginBottom,marginSide:D.marginSide,primaryColor:n.primaryColor||"#007bff",isMobile:a,isOpen:o,onPopoverClick:V}),F.jsx(tg,{isOpen:o,onClick:V,primaryColor:n.primaryColor,position:D.position,marginBottom:D.marginBottom,marginSide:D.marginSide,hasNewMessages:S,isMobile:a}),F.jsx(Qg,{isOpen:o,onClose:G,config:n,messages:O,onSendMessage:M,isLoading:y,isAiTyping:u,position:D.position,marginBottom:D.marginBottom,marginSide:D.marginSide,isMobile:a,apiKeyMissing:!e.apiKey,chatbotActivated:v,isRated:L,onRatingChange:N,conversationId:d})]})},Ed='*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.nbc-pointer-events-none{pointer-events:none}.nbc-pointer-events-auto{pointer-events:auto}.nbc-fixed{position:fixed}.nbc-absolute{position:absolute}.nbc-relative{position:relative}.nbc-inset-0{inset:0}.nbc-inset-auto{inset:auto}.nbc-left-2{left:8px}.nbc-right-0{right:0}.nbc-right-2{right:8px}.nbc-top-0{top:0}.nbc-top-1\\/2{top:50%}.nbc-top-2{top:8px}.nbc-top-full{top:100%}.nbc-m-0{margin:0}.nbc-mx-auto{margin-left:auto;margin-right:auto}.nbc-mb-1{margin-bottom:4px}.nbc-mb-2{margin-bottom:8px}.nbc-mb-4{margin-bottom:16px}.nbc-ml-1{margin-left:4px}.nbc-ml-2{margin-left:8px}.nbc-mr-1{margin-right:4px}.nbc-mr-3{margin-right:12px}.nbc-mt-1{margin-top:4px}.nbc-line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.nbc-flex{display:flex}.nbc-hidden{display:none}.nbc-h-0{height:0px}.nbc-h-10{height:40px}.nbc-h-12{height:48px}.nbc-h-16{height:64px}.nbc-h-2{height:8px}.nbc-h-24{height:96px}.nbc-h-3{height:12px}.nbc-h-4{height:16px}.nbc-h-5{height:20px}.nbc-h-6{height:24px}.nbc-h-7{height:28px}.nbc-h-8{height:32px}.nbc-h-auto{height:auto}.nbc-h-full{height:100%}.nbc-min-h-0{min-height:0px}.nbc-min-h-\\[220px\\]{min-height:220px}.nbc-w-0{width:0px}.nbc-w-10{width:40px}.nbc-w-12{width:48px}.nbc-w-16{width:64px}.nbc-w-2{width:8px}.nbc-w-3{width:12px}.nbc-w-4{width:16px}.nbc-w-5{width:20px}.nbc-w-6{width:24px}.nbc-w-7{width:28px}.nbc-w-8{width:32px}.nbc-w-auto{width:auto}.nbc-w-full{width:100%}.nbc-max-w-20{max-width:80px}.nbc-max-w-\\[90\\%\\]{max-width:90%}.nbc-max-w-xs{max-width:20rem}.nbc-flex-1{flex:1 1 0%}.nbc-flex-shrink-0{flex-shrink:0}.-nbc-translate-y-4{--tw-translate-y: -16px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc--translate-y-1\\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-translate-y-2{--tw-translate-y: 8px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-translate-y-3{--tw-translate-y: 12px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-translate-y-4{--tw-translate-y: 16px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-translate-y-\\[-10px\\]{--tw-translate-y: -10px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-scale-90{--tw-scale-x: .9;--tw-scale-y: .9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-scale-95{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-scale-\\[1\\.13\\]{--tw-scale-x: 1.13;--tw-scale-y: 1.13;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nbc-transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes nbc-bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.nbc-animate-bounce{animation:nbc-bounce 1s infinite}@keyframes nbc-ping{75%,to{transform:scale(2);opacity:0}}.nbc-animate-ping{animation:nbc-ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes nbc-pulse{50%{opacity:.5}}.nbc-animate-pulse{animation:nbc-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes nbc-spin{to{transform:rotate(360deg)}}.nbc-animate-spin{animation:nbc-spin 1s linear infinite}.nbc-cursor-pointer{cursor:pointer}.nbc-flex-col{flex-direction:column}.nbc-flex-wrap{flex-wrap:wrap}.nbc-items-start{align-items:flex-start}.nbc-items-end{align-items:flex-end}.nbc-items-center{align-items:center}.nbc-justify-start{justify-content:flex-start}.nbc-justify-end{justify-content:flex-end}.nbc-justify-center{justify-content:center}.nbc-justify-between{justify-content:space-between}.nbc-gap-2{gap:8px}.nbc-space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(4px * var(--tw-space-x-reverse));margin-left:calc(4px * calc(1 - var(--tw-space-x-reverse)))}.nbc-space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(12px * var(--tw-space-x-reverse));margin-left:calc(12px * calc(1 - var(--tw-space-x-reverse)))}.nbc-space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(8px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(8px * var(--tw-space-y-reverse))}.nbc-space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(16px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(16px * var(--tw-space-y-reverse))}.nbc-overflow-hidden{overflow:hidden}.nbc-overflow-y-auto{overflow-y:auto}.nbc-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nbc-whitespace-nowrap{white-space:nowrap}.nbc-break-words{overflow-wrap:break-word}.nbc-rounded{border-radius:4px}.nbc-rounded-2xl{border-radius:16px}.nbc-rounded-full{border-radius:9999px}.nbc-rounded-lg{border-radius:8px}.nbc-rounded-none{border-radius:0}.nbc-rounded-bl-md{border-bottom-left-radius:6px}.nbc-rounded-br-md{border-bottom-right-radius:6px}.nbc-border{border-width:1px}.nbc-border-0{border-width:0px}.nbc-border-2{border-width:2px}.nbc-border-b{border-bottom-width:1px}.nbc-border-t{border-top-width:1px}.nbc-border-none{border-style:none}.nbc-border-gray-100{--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.nbc-border-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.nbc-border-white{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.nbc-border-t-gray-600{--tw-border-opacity: 1;border-top-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.nbc-bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.nbc-bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.nbc-bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.nbc-bg-gray-300{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))}.nbc-bg-gray-400{--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.nbc-bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.nbc-bg-green-400{--tw-bg-opacity: 1;background-color:rgb(74 222 128 / var(--tw-bg-opacity, 1))}.nbc-bg-green-500{--tw-bg-opacity: 1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.nbc-bg-transparent{background-color:transparent}.nbc-bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.nbc-bg-none{background-image:none}.nbc-object-cover{-o-object-fit:cover;object-fit:cover}.nbc-p-0{padding:0}.nbc-p-1{padding:4px}.nbc-p-2{padding:8px}.nbc-p-4{padding:16px}.nbc-p-5{padding:20px}.nbc-px-2{padding-left:8px;padding-right:8px}.nbc-px-4{padding-left:16px;padding-right:16px}.nbc-py-1{padding-top:4px;padding-bottom:4px}.nbc-py-2{padding-top:8px;padding-bottom:8px}.nbc-py-3{padding-top:12px;padding-bottom:12px}.nbc-pl-12{padding-left:48px}.nbc-pr-12{padding-right:48px}.nbc-pt-4{padding-top:16px}.nbc-text-center{text-align:center}.nbc-text-right{text-align:right}.nbc-font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.nbc-text-\\[15px\\]{font-size:15px}.nbc-text-lg{font-size:18px}.nbc-text-sm{font-size:14px}.nbc-text-xs{font-size:12px}.nbc-font-bold{font-weight:700}.nbc-font-medium{font-weight:500}.nbc-italic{font-style:italic}.nbc-leading-none{line-height:1}.nbc-leading-relaxed{line-height:1.625}.nbc-text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.nbc-text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.nbc-text-blue-500{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.nbc-text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.nbc-text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.nbc-text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.nbc-text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.nbc-text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.nbc-text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.nbc-text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.nbc-no-underline{text-decoration-line:none}.nbc-opacity-0{opacity:0}.nbc-opacity-100{opacity:1}.nbc-opacity-50{opacity:.5}.nbc-opacity-70{opacity:.7}.nbc-opacity-75{opacity:.75}.nbc-shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.nbc-shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.nbc-shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.nbc-shadow-none{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.nbc-shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.nbc-shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.nbc-outline-none{outline:2px solid transparent;outline-offset:2px}.nbc-transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.nbc-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.nbc-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.nbc-duration-200{transition-duration:.2s}.nbc-duration-300{transition-duration:.3s}.nbc-duration-500{transition-duration:.5s}.nbc-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\\:nbc-scale-105:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:nbc-scale-\\[1\\.02\\]:hover{--tw-scale-x: 1.02;--tw-scale-y: 1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:nbc-bg-black:hover{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.hover\\:nbc-bg-gray-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.hover\\:nbc-bg-opacity-20:hover{--tw-bg-opacity: .2}.hover\\:nbc-text-gray-600:hover{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.hover\\:nbc-text-gray-700:hover{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.disabled\\:nbc-cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:nbc-opacity-50:disabled{opacity:.5}',cm={apiKey:"",primaryColor:"#111111",avatar:"",title:"NotChatBot",placeholder:"Escribe tu mensaje...",initialMessage:"¡Hola! ¿En qué puedo ayudarte?",position:"bottom-right",marginBottom:20,marginSide:20,showPopup:!0,mobile:{position:"bottom-right",marginBottom:15,marginSide:15,showPopup:!0},desktop:{position:"bottom-right",marginBottom:25,marginSide:25,showPopup:!0},closeButtonIcon:"default",closeButtonText:"Cerrar",closeButtonCustomIcon:""},fm=({title:e,primaryColor:t="#3b82f6",avatar:n})=>{const r={backgroundColor:t};return F.jsxs("div",{id:"notchatbot-embed-chat-header",style:r,className:"nbc-flex nbc-items-center nbc-p-4",children:[F.jsx("div",{className:"nbc-flex nbc-items-center nbc-mr-3 nbc-text-black",children:n?F.jsx("img",{src:n,alt:"Avatar",className:"nbc-w-8 nbc-h-8 nbc-rounded-full nbc-object-cover"}):F.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"40",height:"40",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"nbc-w-8 nbc-h-8 nbc-bg-white nbc-rounded-full nbc-p-1",children:[F.jsx("path",{d:"M12 6V2H8"}),F.jsx("path",{d:"m8 18-4 4V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2Z"}),F.jsx("path",{d:"M2 12h2"}),F.jsx("path",{d:"M9 11v2"}),F.jsx("path",{d:"M15 11v2"}),F.jsx("path",{d:"M20 12h2"})]})}),F.jsx("h3",{className:"nbc-m-0 nbc-text-lg nbc-font-bold nbc-text-white",children:e})]})},dm=({footerText:e,primaryColor:t,footerColor:n})=>{if(!e)return null;const r=o=>{const i=/(https?:\/\/[^\s]+)/g;return o.split(i).map((l,d)=>i.test(l)?F.jsx("a",{href:l,target:"_blank",rel:"noopener noreferrer",className:"nbc-font-medium nbc-no-underline",style:{color:t},children:l},d):l)};return F.jsx("div",{id:"notchatbot-embed-chat-footer",className:"nbc-py-3 nbc-px-4 nbc-bg-gray-50 nbc-text-xs nbc-text-gray-600 nbc-text-center nbc-leading-relaxed nbc-italic",style:{backgroundColor:n},children:r(e)})},hm=({config:e,messages:t,onSendMessage:n,isLoading:r,isAiTyping:o,chatbotActivated:i=!0})=>{var d;const a=(m,x="auto")=>m===void 0?x:typeof m=="number"?`${m}px`:m,l={width:a(e.width,"100%"),height:a(e.height,"400px"),maxWidth:a(e.maxWidth,"100%"),maxHeight:a(e.maxHeight,"100vh"),minWidth:a(e.minWidth,"280px"),minHeight:a(e.minHeight,"300px"),display:"flex",flexDirection:"column",backgroundColor:e.chatTransparent?"transparent":e.chatBackground||"#ffffff",borderRadius:a(e.borderRadius,"0px"),border:e.border||"1px solid #e5e7eb",boxShadow:e.boxShadow||"0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",overflow:"hidden",position:"relative"};return F.jsxs("div",{id:"notchatbot-embed-chat",className:"nbc-font-sans",style:l,children:[e.showHeader!==!1&&F.jsx(fm,{title:e.title||"Chat",primaryColor:e.primaryColor,avatar:e.avatar}),F.jsxs("div",{id:"notchatbot-embed-chat-body",className:"nbc-flex-1 nbc-flex nbc-flex-col nbc-min-h-0",style:{position:"relative",overflow:"hidden"},children:[r?F.jsx("div",{className:"nbc-flex-1 nbc-p-4",children:F.jsx(ld,{})}):F.jsx(od,{messages:t,isTyping:o||!1,avatar:e.avatar,textColor:e.textColor,bubbleUserColor:e.bubbleUserColor,chatbotActivated:i}),F.jsx("div",{id:"notchatbot-embed-chat-body-input",className:"nbc-py-2 nbc-bg-gray-50 nbc-border-none",style:{backgroundColor:(d=e.input)==null?void 0:d.backgroundColor},children:F.jsx(sd,{onSendMessage:n,placeholder:e.placeholder||"Escribe un mensaje...",primaryColor:e.primaryColor,disabled:r,input:e.input,apiKey:e.apiKey})})]}),e.showFooter!==!1&&e.footerText&&F.jsx(dm,{footerText:e.footerText,primaryColor:e.primaryColor,footerColor:e.footerColor})]})},pm=({config:e})=>{if(!e.apiKey)return null;const[t,n]=Z.useState(""),[r,o]=Z.useState(!1),[i,a]=Z.useState(""),[,l]=Z.useState(null),d=Z.useRef(null),[,m]=Z.useState(!1),[x,R]=Z.useState(!0),[y,E]=Z.useState([e.initialMessage?{id:ut(),text:e.initialMessage,sender:"bot",timestamp:new Date().toISOString(),type:"text"}:Cd(e.title)]),u=Z.useCallback(p=>{E(g=>[...g,p])},[]);Z.useEffect(()=>{De(this,null,function*(){const g=yield md();a(g)})},[]);const C=Z.useCallback(p=>{u(p),typeof window!="undefined"&&window.dispatchEvent(new CustomEvent("notchatbot-embedchat-message-received",{detail:{message:p,role:"employee"}}))},[u]),P=Z.useCallback(p=>{R(p)},[]),b=Z.useCallback((p,g)=>De(this,null,function*(){if(!p.trim()&&(!g||g.length===0))return;let S=t;S||(S=ut(),n(S));const h=new Date().toISOString(),f=[...y],c=[];if(p.trim()){const s={id:ut(),text:p,sender:"user",timestamp:h,conversationId:S,type:"text"};u(s),typeof window!="undefined"&&window.dispatchEvent(new CustomEvent("notchatbot-embedchat-message-sent",{detail:{message:s}})),f.push(s),c.push(s)}if(g&&g.length>0){const s=g.map(w=>({id:ut(),text:w.type.startsWith("image/")?`![image](${w.url})`:`[${w.name}](${w.url})`,sender:"user",timestamp:h,conversationId:S,type:w.type.startsWith("image/")?"image":"file",metaContent:w.url}));s.forEach(w=>{u(w),typeof window!="undefined"&&window.dispatchEvent(new CustomEvent("notchatbot-embedchat-message-sent",{detail:{message:w}})),c.push(w)}),f.push(...s)}o(!0);try{const s=bd(S,f,c,{apiKey:e.apiKey||""},i),w=yield xd(s);if(w){if(w.response.tokenDetails&&!d.current){const k=yield Ai(w.response.tokenDetails,e.apiKey||"",S,C,P);l(k),d.current=k.client,m(!0)}const v=Sd(w.response.message);v&&(u(v),typeof window!="undefined"&&window.dispatchEvent(new CustomEvent("notchatbot-embedchat-message-received",{detail:{message:v,role:"assistant"}})))}else{setTimeout(()=>{const v=Ii();u(v),o(!1)},1e3);return}o(!1)}catch(s){console.error("EmbedChat: Error sending message:",s),setTimeout(()=>{const w=Ii();u(w),o(!1)},1e3);return}}),[t,i,e.apiKey,u,C,y]);return Z.useEffect(()=>()=>{d.current&&wd(d.current)},[]),F.jsx(hm,{config:e,messages:y,onSendMessage:b,isLoading:!1,isAiTyping:r,chatbotActivated:x})};(()=>{if(typeof document=="undefined")return;const e={},t=document.dispatchEvent.bind(document);document.dispatchEvent=r=>{const o=r==null?void 0:r.type;return(o==="WebChatReady"||o==="EmbedChatReady")&&(e[o]=!0),t(r)};const n=document.addEventListener.bind(document);document.addEventListener=(r,o,i)=>{const a=r;if((a==="WebChatReady"||a==="EmbedChatReady")&&e[a]){const l=new CustomEvent(a);setTimeout(()=>{typeof o=="function"?o.call(document,l):o&&typeof o.handleEvent=="function"&&o.handleEvent(l)},0)}return n(r,o,i)}})();let or=null;const qr={},Pi={};let ct=null,Ne=null,ul=!1,eo={};const cl={},Rd=e=>{try{if(!e.elementId)return console.error("EmbedChat: elementId is required"),null;const t=document.getElementById(e.elementId);if(!t)return null;let n;t.shadowRoot?(n=t.shadowRoot,n.innerHTML=""):n=t.attachShadow({mode:"open"});const r=document.createElement("style");if(r.textContent=Ed,n.appendChild(r),e.customCSS){const a=document.createElement("style");a.setAttribute("data-custom","true"),a.textContent=e.customCSS,n.appendChild(a)}const o=document.createElement("div");n.appendChild(o);const i=Ys(o);return i.render(Hi.createElement(pm,{config:e})),Pi[e.elementId]={destroy:()=>{i.unmount(),n.innerHTML="",delete Pi[e.elementId],cl[e.elementId]=e}},cl[e.elementId]=e,Pi[e.elementId]}catch(t){return console.error("EmbedChat: Failed to initialize",t),null}};function Gt(){let e=qr["webchat-notchatbot"];if(!e){const n=ae(ae({},Ne),eo);let r="webchat-notchatbot";typeof(Ne==null?void 0:Ne.elementId)=="string"&&Ne.elementId&&(r=Ne.elementId);const t=n,{elementId:o}=t,i=vl(t,["elementId"]);"elementId"in i&&delete i.elementId;const a=Object.assign({elementId:r},i);e=Od(a),ul&&e&&e.setIsOpen&&e.setIsOpen(!0);const l=new CustomEvent("WebChatReady");document.dispatchEvent(l)}return e}const Od=e=>{try{let t=function(u){return Hi.createElement(um,We(ae({},u),{exposeControl:C=>{l=C.setIsOpen,d=C.updateConfig,m=C.setPosition,x=C.hide,R=C.show,y=C.getIsOpen}}))};or&&(or.destroy(),or=null);const n=ae(ae({elementId:"webchat-notchatbot"},cm),e);Ne=n;let r=document.getElementById(n.elementId);r||(r=document.createElement("div"),r.id=n.elementId,document.body.appendChild(r));let o;r.shadowRoot?(o=r.shadowRoot,o.innerHTML=""):o=r.attachShadow({mode:"open"}),ct=o;const i=document.createElement("style");i.textContent=Ed,o.appendChild(i);const a=document.createElement("div");o.appendChild(a);let l=null,d=null,m=null,x=null,R=null,y=null;const E=Ys(a);return E.render(Hi.createElement(t,{config:n})),qr[n.elementId]={root:E,destroy:()=>{E.unmount(),or=null,ct&&(ct.innerHTML=""),delete qr[n.elementId]},getConversationId:()=>pd(),setIsOpen:u=>{ul=u,l&&l(u)},updateConfig:u=>{Ne=dl(ae(ae({},Ne),u)),d&&d(u)},setPosition:u=>{eo=to(eo,u),Ne=dl(to(Ne||{},u)),m&&m(u),d&&d(u)},hide:()=>x&&x(),show:()=>R&&R(),injectCSS:u=>{if(!ct)return;let C=ct.querySelector("style[data-custom]");C&&C.remove(),C=document.createElement("style"),C.setAttribute("data-custom","true"),C.textContent=u,ct.appendChild(C)},removeCustomCSS:()=>{if(!ct)return;const u=ct.querySelector("style[data-custom]");u&&u.remove()},getIsOpen:()=>y?y():ul},or=qr[n.elementId],or}catch(t){return console.error("WebChat: Failed to initialize",t),null}},Td={initialize:Od},Ad={initialize:Rd};typeof window!="undefined"&&(window.WebChat=Td,window.EmbedChat=Ad,window.openWebChat=()=>{const e=Gt();e&&e.setIsOpen(!0)},window.closeWebChat=()=>{const e=Gt();e&&e.setIsOpen(!1)},window.toggleWebChat=()=>{const e=Gt();e&&e.setIsOpen&&e.getIsOpen&&e.setIsOpen(!e.getIsOpen())},window.unmountWebChat=()=>{const e=qr["webchat-notchatbot"];e&&e.destroy()},window.mountWebChat=()=>{Gt()},window.setWebChatPosition=e=>{const t=Gt();if(!t||!t.setPosition)return;let n={};if(e.mobile||e.desktop)n=to({},e);else if(e.device==="mobile"||e.device==="desktop"){const r=e.device;n[r]=ae(ae({},Ne&&typeof Ne[r]=="object"?Ne[r]:{}),e),n[r]&&typeof n[r]=="object"&&"device"in n[r]&&delete n[r].device}else n=ae({},e);Ne=dl(to(Ne||{},n)),eo=to(eo,n),t.setPosition(n)},window.hideWebChat=()=>{const e=Gt();e&&e.hide&&e.hide()},window.showWebChat=()=>{const e=Gt();e&&e.show&&e.show()},window.injectWebChatCSS=e=>{if(Gt(),ct){let t=ct.querySelector("style[data-custom]");t&&t.remove(),t=document.createElement("style"),t.setAttribute("data-custom","true"),t.textContent=e,ct.appendChild(t)}},window.removeWebChatCSS=()=>{if(Gt(),ct){const e=ct.querySelector("style[data-custom]");e&&e.remove()}},window.unmountEmbedChat=e=>{const t=Pi[e];t&&t.destroy()},window.mountEmbedChat=e=>{const t=cl[e];t?Rd(t):console.warn(`No config found for EmbedChat with elementId: ${e}`)},window.addEventListener("openWebChatbot",()=>window.openWebChat()),window.addEventListener("closeWebChatbot",()=>window.closeWebChat()),window.addEventListener("toggleWebChatbot",()=>window.toggleWebChat()),window.addEventListener("addCustomPadding",e=>{if(e&&e.detail){let t={};if(typeof e.detail=="object")if(e.detail.mobile||e.detail.desktop)t=ae({},e.detail);else if(e.detail.device==="mobile"||e.detail.device==="desktop"){const n=e.detail.device;t[n]=ae(ae({},Ne&&typeof Ne[n]=="object"?Ne[n]:{}),e.detail),t[n]&&typeof t[n]=="object"&&"device"in t[n]&&delete t[n].device}else("y"in e.detail||"marginBottom"in e.detail)&&(t={},"y"in e.detail&&(t.marginBottom=parseInt(e.detail.y,10)),"x"in e.detail&&(t.marginSide=parseInt(e.detail.x,10)),"marginBottom"in e.detail&&(t.marginBottom=parseInt(e.detail.marginBottom,10)),"marginSide"in e.detail&&(t.marginSide=parseInt(e.detail.marginSide,10)));window.setWebChatPosition(t)}}),setTimeout(()=>{const e=new CustomEvent("WebChatReady",{bubbles:!0});document.dispatchEvent(e)},0),setTimeout(()=>{const e=new CustomEvent("EmbedChatReady",{bubbles:!0});document.dispatchEvent(e)},0));const gm=()=>{const e=new CustomEvent("WebChatReady",{bubbles:!0});document.dispatchEvent(e)},Id=()=>{const e=new CustomEvent("EmbedChatReady",{bubbles:!0});document.dispatchEvent(e)},Pd=()=>{gm(),Id()},fl=()=>{requestAnimationFrame(()=>{setTimeout(()=>{Id()},0)})};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",Pd):setTimeout(Pd,0),function(e){const t=e.pushState,n=e.replaceState;e.pushState=function(...r){const o=t.apply(e,r);return window.dispatchEvent(new Event("routechange")),o},e.replaceState=function(...r){const o=n.apply(e,r);return window.dispatchEvent(new Event("routechange")),o}}(window.history),window.addEventListener("popstate",fl),window.addEventListener("hashchange",fl),window.addEventListener("routechange",fl);function to(e,t){if(!t)return e;const n=ae({},e);for(const r of Object.keys(t))r==="mobile"||r==="desktop"?n[r]=ae(ae({},e[r]||{}),t[r]):n[r]=t[r];return n}function dl(e){const t=typeof e.elementId=="string"&&e.elementId?e.elementId:"webchat-notchatbot",o=e,{elementId:n}=o,r=vl(o,["elementId"]);return ae({elementId:t},r)}pe.EmbedChatAPI=Ad,pe.WebChat=Td,Object.defineProperty(pe,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@developer.notchatbot/webchat",
3
- "version": "1.2.10",
3
+ "version": "1.2.11",
4
4
  "description": "A beautiful React chatbot widget with single-file bundle",
5
5
  "main": "dist/webchat-bundle.min.umd.cjs",
6
6
  "module": "dist/webchat-bundle.min.js",