@asgard-js/react 0.0.5 → 0.0.6

package/README.md

@@ -7,7 +7,7 @@ This package provides React components and hooks for integrating with the Asgard
 To install the React package, use the following command:
 
 ```sh
-yarn add asgardjs-react
+yarn add @asgard-js/core @asgard-js/react
 ```
 
 ## Usage
@@ -16,7 +16,7 @@ Here's a basic example of how to use the React components:
 
 ```javascript
 import React from 'react';
-import { Chatbot } from 'asgardjs-react';
+import { Chatbot } from '@asgard-js/react';
 
 const App = () => {
   return (
@@ -25,13 +25,25 @@ const App = () => {
       config={{
         apiKey: 'your-api-key',
         endpoint: 'https://api.asgard-ai.com',
+        onExecutionError: (error) => {
+          console.error('Execution error:', error);
+        },
+        transformSsePayload: (payload) => {
+          return payload;
+        }
       }}
       customChannelId="your-channel-id"
       initMessages={[]}
+      debugMode={false}
       fullScreen={false}
       avatar="https://example.com/avatar.png"
       botTypingPlaceholder="Bot is typing..."
-      options={{ showDebugMessage: true }}
+      onReset={() => {
+        console.log('Chat reset');
+      }}
+      onClose={() => {
+        console.log('Chat closed');
+      }}
     />
   );
 };
@@ -42,43 +54,152 @@ export default App;
 ### Chatbot Component Props
 
 - **title**: `string` - The title of the chatbot.
-- **config**: `ClientConfig` - Configuration object for the Asgard service client.
-- **customChannelId**: `string` - Custom channel identifier.
-- **initMessages**: `ConversationMessage[]` - Initial messages to display in the chat.
-- **fullScreen**: `boolean` - Whether the chatbot should be displayed in full screen.
-- **avatar**: `string` - URL of the avatar image for the chatbot.
-- **botTypingPlaceholder**: `string` - Placeholder text to show when the bot is typing.
-- **options**: `object` - Additional options, such as `showDebugMessage`.
+- **config**: `ClientConfig` - Configuration object for the Asgard service client, including:
+  - `apiKey`: `string` (required) - API key for authentication
+  - `endpoint`: `string` (required) - API endpoint URL
+  - `onExecutionError?`: `(error: ErrorEventData) => void` - Error handler for execution errors
+  - `transformSsePayload?`: `(payload: FetchSsePayload) => FetchSsePayload` - SSE payload transformer
+- **customChannelId**: `string` - Custom channel identifier for the chat session
+- **initMessages**: `ConversationMessage[]` - Initial messages to display in the chat
+- **debugMode**: `boolean` - Enable debug mode, defaults to `false`
+- **fullScreen**: `boolean` - Display chatbot in full screen mode, defaults to `false`
+- **avatar**: `string` - URL for the chatbot's avatar image
+- **botTypingPlaceholder**: `string` - Text to display while the bot is typing
+- **theme**: `Partial<AsgardThemeContextValue>` - Custom theme configuration
+- **onReset**: `() => void` - Callback function when chat is reset
+- **onClose**: `() => void` - Callback function when chat is closed
+
+### Theme Configuration
+
+```typescript
+interface AsgardThemeContextValue {
+  chatbot: {
+    width?: string;
+    height?: string;
+    maxWidth?: string;
+    minWidth?: string;
+    maxHeight?: string;
+    minHeight?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    borderRadius?: string;
+    contentMaxWidth?: string;
+  };
+  botMessage: {
+    color?: string;
+    backgroundColor?: string;
+  };
+  userMessage: {
+    color?: string;
+    backgroundColor?: string;
+  };
+}
+```
+
+### Default Theme
+
+The default theme uses CSS variables for consistent styling:
+
+```javascript
+const defaultTheme = {
+  chatbot: {
+    width: '375px',
+    height: '640px',
+    backgroundColor: 'var(--asg-color-bg)',
+    borderColor: 'var(--asg-color-border)',
+    borderRadius: 'var(--asg-radius-md)',
+    contentMaxWidth: '1200px',
+  },
+  botMessage: {
+    color: 'var(--asg-color-text)',
+    backgroundColor: 'var(--asg-color-secondary)',
+  },
+  userMessage: {
+    color: 'var(--asg-color-text)',
+    backgroundColor: 'var(--asg-color-primary)',
+  },
+}
+```
+
+### Usage Example
+
+```javascript
+const App = () => {
+  const customTheme = {
+    chatbot: {
+      width: '400px',
+      height: '600px',
+      backgroundColor: '#ffffff',
+      borderRadius: '12px',
+    },
+    botMessage: {
+      backgroundColor: '#f0f0f0',
+    },
+    userMessage: {
+      backgroundColor: '#007bff',
+      color: '#ffffff',
+    },
+  };
+
+  return (
+    <Chatbot
+      // ... other props
+      theme={customTheme}
+    />
+  );
+};
+```
+
+Note: When `fullScreen` prop is set to `true`, the chatbot's width and height will be set to `100vw` and `100vh` respectively, and `borderRadius` will be set to zero, regardless of theme settings.
 
 ## Development
 
-To start developing the React package, follow these steps:
+To develop the React package locally, follow these steps:
 
-1. Clone the repository and navigate to the `packages/react` directory.
-2. Install dependencies:
+1. Clone the repository and navigate to the project root directory.
 
+2. Install dependencies:
 ```sh
 yarn install
 ```
 
-3. Build the package:
+3. Start development:
+
+You can use the following commands to work with the React package:
 
 ```sh
-yarn build
-```
+# Lint the React package
+yarn lint:react
 
-4. Run tests to ensure everything is working:
+# Run tests
+yarn test:react
 
-```sh
-yarn test
+# Build the package
+yarn build:react
+
+# Watch mode for development
+yarn watch:react
+
+# Run the demo application
+yarn serve:react-demo
 ```
 
-5. Start the development server:
+For working with both core and React packages:
 
 ```sh
-yarn start
+# Lint both packages
+yarn lint:packages
+
+# Build core package (required for React package)
+yarn build:core
+
+# Release packages
+yarn release:core  # Release core package
+yarn release:react # Release React package
 ```
 
+All builds will be available in the `dist` directory of their respective packages.
+
 ## Contributing
 
 We welcome contributions! Please read our [contributing guide](../../CONTRIBUTING.md) to get started.

package/dist/components/conversation-message-renderer/conversation-message-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-message-renderer.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-message-renderer/conversation-message-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,mBAAmB,EAAuB,MAAM,iBAAiB,CAAC;AAS3E,UAAU,gCAAgC;IACxC,OAAO,EAAE,mBAAmB,CAAC;CAC9B;AAED,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,gCAAgC,GACtC,SAAS,CA4BX"}
+{"version":3,"file":"conversation-message-renderer.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-message-renderer/conversation-message-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,mBAAmB,EAAuB,MAAM,iBAAiB,CAAC;AAS3E,UAAU,gCAAgC;IACxC,OAAO,EAAE,mBAAmB,CAAC;CAC9B;AAED,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,gCAAgC,GACtC,SAAS,CAgCX"}

package/dist/components/templates/hint-template/hint-template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hint-template.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/hint-template/hint-template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAE,mBAAmB,EAAuB,MAAM,iBAAiB,CAAC;AAE3E,UAAU,iBAAiB;IACzB,OAAO,EAAE,mBAAmB,CAAC;CAC9B;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CAehE"}
+{"version":3,"file":"hint-template.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/hint-template/hint-template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAE,mBAAmB,EAAuB,MAAM,iBAAiB,CAAC;AAG3E,UAAU,iBAAiB;IACzB,OAAO,EAAE,mBAAmB,CAAC;CAC9B;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CAuBhE"}

package/dist/components/templates/text-template/text-template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-template.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/text-template/text-template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAOtD,UAAU,iBAAiB;IACzB,OAAO,EAAE,mBAAmB,CAAC;CAC9B;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CA6BhE"}
+{"version":3,"file":"text-template.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/text-template/text-template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAOtD,UAAU,iBAAiB;IACzB,OAAO,EAAE,mBAAmB,CAAC;CAC9B;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CA+BhE"}

package/dist/hooks/use-channel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-channel.d.ts","sourceRoot":"","sources":["../../src/hooks/use-channel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EAGnB,YAAY,EACZ,mBAAmB,EACpB,MAAM,iBAAiB,CAAC;AAGzB,UAAU,eAAe;IACvB,MAAM,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACnC,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,gBAAgB,CA6GnE"}
+{"version":3,"file":"use-channel.d.ts","sourceRoot":"","sources":["../../src/hooks/use-channel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EAGnB,YAAY,EACZ,mBAAmB,EACpB,MAAM,iBAAiB,CAAC;AAGzB,UAAU,eAAe;IACvB,MAAM,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACnC,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,gBAAgB,CAgHnE"}

package/dist/index.js

@@ -1,36 +1,36 @@
-import { jsx as s, jsxs as m } from "react/jsx-runtime";
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
 import * as u from "react";
-import { createContext as tt, useMemo as y, useContext as et, useRef as q, useEffect as L, useState as N, useCallback as g, memo as lt } from "react";
-import { AsgardServiceClient as _t, Conversation as ut, Channel as dt, MessageTemplateType as z } from "@asgard-js/core";
-function ot(e) {
+import { createContext as ot, useMemo as y, useContext as nt, useRef as A, useEffect as L, useState as R, useCallback as g, memo as _t } from "react";
+import { AsgardServiceClient as ut, Conversation as dt, Channel as ht, MessageTemplateType as V } from "@asgard-js/core";
+function rt(e) {
   var t, o, n = "";
   if (typeof e == "string" || typeof e == "number") n += e;
   else if (typeof e == "object") if (Array.isArray(e)) {
-    var r = e.length;
-    for (t = 0; t < r; t++) e[t] && (o = ot(e[t])) && (n && (n += " "), n += o);
+    var s = e.length;
+    for (t = 0; t < s; t++) e[t] && (o = rt(e[t])) && (n && (n += " "), n += o);
   } else for (o in e) e[o] && (n && (n += " "), n += o);
   return n;
 }
-function R() {
-  for (var e, t, o = 0, n = "", r = arguments.length; o < r; o++) (e = arguments[o]) && (t = ot(e)) && (n && (n += " "), n += t);
+function w() {
+  for (var e, t, o = 0, n = "", s = arguments.length; o < s; o++) (e = arguments[o]) && (t = rt(e)) && (n && (n += " "), n += t);
   return n;
 }
-function F(e) {
+function U(e) {
   return e !== null && typeof e == "object" && !Array.isArray(e);
 }
-function P(e, t) {
+function D(e, t) {
   const o = { ...e };
   if (!t) return o;
-  for (const [n, r] of Object.entries(t)) {
-    if (!F(r)) {
-      o[n] = r;
+  for (const [n, s] of Object.entries(t)) {
+    if (!U(s)) {
+      o[n] = s;
       continue;
     }
-    o[n] = P(F(o[n]) ? o[n] : {}, r);
+    o[n] = D(U(o[n]) ? o[n] : {}, s);
   }
   return o;
 }
-const nt = {
+const st = {
   chatbot: {
     width: "375px",
     height: "640px",
@@ -47,14 +47,14 @@ const nt = {
     color: "var(--asg-color-text)",
     backgroundColor: "var(--asg-color-primary)"
   }
-}, st = tt(
-  nt
+}, ct = ot(
+  st
 );
-function ht(e) {
-  const { children: t, fullScreen: o, theme: n = {} } = e, r = y(
-    () => P(
-      nt,
-      o ? P(n, {
+function mt(e) {
+  const { children: t, fullScreen: o, theme: n = {} } = e, s = y(
+    () => D(
+      st,
+      o ? D(n, {
         chatbot: {
           width: "100vw",
           height: "100vh",
@@ -64,63 +64,66 @@ function ht(e) {
     ),
     [o, n]
   );
-  return /* @__PURE__ */ s(st.Provider, { value: r, children: t });
+  return /* @__PURE__ */ r(ct.Provider, { value: s, children: t });
 }
-function Z() {
-  return et(st);
+function j() {
+  return nt(ct);
 }
-function mt(e) {
-  const { config: t } = e, o = q(null);
-  return o.current || (o.current = new _t(t)), L(() => () => {
+function gt(e) {
+  const { config: t } = e, o = A(null);
+  return o.current || (o.current = new ut(t)), L(() => () => {
     o.current && (o.current.close(), o.current = null);
   }, [t]), o.current;
 }
-function gt(e) {
+function bt(e) {
   const {
     client: t,
     customChannelId: o,
     customMessageId: n,
-    initMessages: r,
+    initMessages: s,
     showDebugMessage: c
   } = e;
   if (!t)
     throw new Error("Client instance is required");
   if (!o)
     throw new Error("Custom channel id is required");
-  const [i, a] = N(null), [_, b] = N(!0), [v, f] = N(!1), [l, d] = N(!1), [h, p] = N(null), C = g(async () => {
-    const x = new ut({
+  const [i, a] = R(null), [_, f] = R(!0), [v, b] = R(!1), [l, d] = R(!1), [h, p] = R(null), C = g(async () => {
+    const x = new dt({
       showDebugMessage: c,
       messages: new Map(
-        r == null ? void 0 : r.map((T) => [T.messageId, T])
+        s == null ? void 0 : s.map((N) => [N.messageId, N])
       )
     });
-    f(!0), d(!0), p(x);
-    const $ = await dt.reset(
+    b(!0), d(!0), p(x);
+    const P = await ht.reset(
       {
         client: t,
         customChannelId: o,
         customMessageId: n,
         conversation: x,
-        statesObserver: (T) => {
-          d(T.isConnecting), p(T.conversation);
+        statesObserver: (N) => {
+          d(N.isConnecting), p(N.conversation);
         }
       },
       {
         onSseCompleted() {
-          f(!1);
+          b(!1);
+        },
+        onSseError() {
+          b(!1);
         }
       }
     );
-    a($);
+    a(P);
   }, [
     t,
     o,
     n,
-    r,
+    s,
     c
   ]), M = g(() => {
-    a((x) => (x == null || x.close(), null)), b(!1), f(!1), d(!1), p(null);
-  }, []), k = g(
+    a((x) => (x == null || x.close(), null)), f(!1), b(!1), d(!1), p(null);
+  }, []), B = g(
     (x) => {
       i == null || i.sendMessage({ text: x });
     },
@@ -134,7 +137,7 @@ function gt(e) {
       isResetting: v,
       isConnecting: l,
       conversation: h,
-      sendMessage: k,
+      sendMessage: B,
       resetChannel: C,
       closeChannel: M
     }),
@@ -143,22 +146,22 @@ function gt(e) {
       v,
       l,
       h,
-      k,
+      B,
       C,
       M
     ]
   );
 }
-function bt(e, t) {
-  const [o, n] = N(e);
+function ft(e, t) {
+  const [o, n] = R(e);
   return L(() => {
-    const r = window.setTimeout(() => {
+    const s = window.setTimeout(() => {
       n(e);
     }, t ?? 300);
-    return () => clearTimeout(r);
+    return () => clearTimeout(s);
   }, [e, t]), o;
 }
-const rt = tt({
+const it = ot({
   avatar: void 0,
   client: null,
   isOpen: !1,
@@ -168,32 +171,32 @@ const rt = tt({
   messageBoxBottomRef: { current: null },
   botTypingPlaceholder: void 0
 });
-function ft(e) {
+function pt(e) {
   const {
     avatar: t,
     children: o,
     config: n,
-    botTypingPlaceholder: r,
+    botTypingPlaceholder: s,
     customChannelId: c,
     customMessageId: i,
     delayTime: a,
     initMessages: _,
-    options: b,
+    options: f,
     ...v
-  } = e, f = q(null), l = mt({ config: n }), {
+  } = e, b = A(null), l = gt({ config: n }), {
     isOpen: d,
     isResetting: h,
     isConnecting: p,
     conversation: C,
     sendMessage: M,
-    resetChannel: k,
+    resetChannel: B,
     closeChannel: x
-  } = gt({
+  } = bt({
     client: l,
     customChannelId: c,
     initMessages: _,
-    showDebugMessage: b == null ? void 0 : b.showDebugMessage
-  }), $ = y(
+    showDebugMessage: f == null ? void 0 : f.showDebugMessage
+  }), P = y(
     () => ({
       avatar: t,
       client: l,
@@ -202,10 +205,10 @@ function ft(e) {
       isConnecting: p,
       messages: (C == null ? void 0 : C.messages) ?? null,
       sendMessage: M,
-      resetChannel: k,
+      resetChannel: B,
       closeChannel: x,
-      botTypingPlaceholder: r,
-      messageBoxBottomRef: f
+      botTypingPlaceholder: s,
+      messageBoxBottomRef: b
     }),
     [
       t,
@@ -215,25 +218,25 @@ function ft(e) {
       p,
       C == null ? void 0 : C.messages,
       M,
-      k,
+      B,
       x,
-      r
+      s
     ]
-  ), T = Z();
-  return /* @__PURE__ */ s(rt.Provider, { value: $, children: /* @__PURE__ */ s("div", { style: T == null ? void 0 : T.chatbot, ...v, children: o }) });
+  ), N = j();
+  return /* @__PURE__ */ r(it.Provider, { value: P, children: /* @__PURE__ */ r("div", { style: N == null ? void 0 : N.chatbot, ...v, children: o }) });
 }
-function w() {
-  return et(rt);
+function T() {
+  return nt(it);
 }
-const pt = "_chatbot_header_cqlve_1", Ct = "_chatbot_header__content_cqlve_1", vt = "_chatbot_header__title_cqlve_9", xt = "_chatbot_header__extra_cqlve_20", A = {
-  chatbot_header: pt,
-  chatbot_header__content: Ct,
-  chatbot_header__title: vt,
-  chatbot_header__extra: xt
-}, yt = (e) => /* @__PURE__ */ u.createElement("svg", { width: 33, height: 32, viewBox: "0 0 33 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("g", { clipPath: "url(#clip0_3084_29383)" }, /* @__PURE__ */ u.createElement("path", { d: "M0.410645 16C0.410645 7.16344 7.57409 0 16.4106 0C25.2472 0 32.4106 7.16344 32.4106 16C32.4106 24.8366 25.2472 32 16.4106 32C7.57409 32 0.410645 24.8366 0.410645 16Z", fill: "#333333" }), /* @__PURE__ */ u.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.5788 6.33398C19.8925 6.33398 22.5788 9.02028 22.5788 12.334C22.5788 14.2211 21.7075 15.9048 20.3453 17.0047C23.6487 18.3735 26.0607 21.6974 26.4106 25.6673H24.4569C24.0206 21.6274 20.9742 18.4911 17.2591 18.3397L16.9776 18.334H16.5788H15.8437C12.0019 18.334 8.81164 21.5258 8.36437 25.6673H6.41064C6.76857 21.607 9.28344 18.2225 12.7029 16.9143C11.4036 15.8137 10.5788 14.1701 10.5788 12.334C10.5788 9.02028 13.265 6.33398 16.5788 6.33398ZM16.5788 16.334C18.7879 16.334 20.5788 14.5431 20.5788 12.334C20.5788 10.1248 18.7879 8.33398 16.5788 8.33398C14.3696 8.33398 12.5788 10.1248 12.5788 12.334C12.5788 14.5431 14.3696 16.334 16.5788 16.334Z", fill: "#8C8C8C" })), /* @__PURE__ */ u.createElement("defs", null, /* @__PURE__ */ u.createElement("clipPath", { id: "clip0_3084_29383" }, /* @__PURE__ */ u.createElement("path", { d: "M0.410645 16C0.410645 7.16344 7.57409 0 16.4106 0C25.2472 0 32.4106 7.16344 32.4106 16C32.4106 24.8366 25.2472 32 16.4106 32C7.57409 32 0.410645 24.8366 0.410645 16Z", fill: "white" }))));
-function wt(e) {
+const Ct = "_chatbot_header_cqlve_1", vt = "_chatbot_header__content_cqlve_1", xt = "_chatbot_header__title_cqlve_9", yt = "_chatbot_header__extra_cqlve_20", I = {
+  chatbot_header: Ct,
+  chatbot_header__content: vt,
+  chatbot_header__title: xt,
+  chatbot_header__extra: yt
+}, wt = (e) => /* @__PURE__ */ u.createElement("svg", { width: 33, height: 32, viewBox: "0 0 33 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("g", { clipPath: "url(#clip0_3084_29383)" }, /* @__PURE__ */ u.createElement("path", { d: "M0.410645 16C0.410645 7.16344 7.57409 0 16.4106 0C25.2472 0 32.4106 7.16344 32.4106 16C32.4106 24.8366 25.2472 32 16.4106 32C7.57409 32 0.410645 24.8366 0.410645 16Z", fill: "#333333" }), /* @__PURE__ */ u.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.5788 6.33398C19.8925 6.33398 22.5788 9.02028 22.5788 12.334C22.5788 14.2211 21.7075 15.9048 20.3453 17.0047C23.6487 18.3735 26.0607 21.6974 26.4106 25.6673H24.4569C24.0206 21.6274 20.9742 18.4911 17.2591 18.3397L16.9776 18.334H16.5788H15.8437C12.0019 18.334 8.81164 21.5258 8.36437 25.6673H6.41064C6.76857 21.607 9.28344 18.2225 12.7029 16.9143C11.4036 15.8137 10.5788 14.1701 10.5788 12.334C10.5788 9.02028 13.265 6.33398 16.5788 6.33398ZM16.5788 16.334C18.7879 16.334 20.5788 14.5431 20.5788 12.334C20.5788 10.1248 18.7879 8.33398 16.5788 8.33398C14.3696 8.33398 12.5788 10.1248 12.5788 12.334C12.5788 14.5431 14.3696 16.334 16.5788 16.334Z", fill: "#8C8C8C" })), /* @__PURE__ */ u.createElement("defs", null, /* @__PURE__ */ u.createElement("clipPath", { id: "clip0_3084_29383" }, /* @__PURE__ */ u.createElement("path", { d: "M0.410645 16C0.410645 7.16344 7.57409 0 16.4106 0C25.2472 0 32.4106 7.16344 32.4106 16C32.4106 24.8366 25.2472 32 16.4106 32C7.57409 32 0.410645 24.8366 0.410645 16Z", fill: "white" }))));
+function Tt(e) {
   const { avatar: t } = e;
-  return t ? /* @__PURE__ */ s(
+  return t ? /* @__PURE__ */ r(
     "img",
     {
       src: t,
@@ -244,89 +247,89 @@ function wt(e) {
         borderRadius: "50%"
       }
     }
-  ) : /* @__PURE__ */ s(yt, {});
+  ) : /* @__PURE__ */ r(wt, {});
 }
-const Tt = (e) => /* @__PURE__ */ u.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.49453 2.3352C6.44049 -0.226723 10.9105 -0.106316 13.7142 2.69633C16.6428 5.62613 16.6428 10.3739 13.7144 13.3035C10.7846 16.2322 6.03581 16.2322 3.1073 13.3036C2.30873 12.505 1.71132 11.5536 1.34188 10.5109L1.78892 10.3525L1.34171 10.5106L1.22791 10.162C1.01752 9.46018 0.910643 8.73159 0.910643 7.9997H2.4542L2.46382 8.33865C2.49584 8.9024 2.60763 9.46037 2.79674 9.99539L2.7968 9.99536L2.90116 10.2683C3.19714 10.9887 3.63414 11.6475 4.19876 12.2121C6.52451 14.5379 10.2961 14.5379 12.6229 12.212C14.9486 9.88539 14.9486 6.11464 12.6227 3.78781C10.3306 1.49653 6.63579 1.46263 4.30292 3.68622L6.68087 3.68698V5.22954H3.49394H1.95141V3.68698V0.5H3.49394L3.49453 2.3352Z", fill: "#8C8C8C" })), Nt = (e) => /* @__PURE__ */ u.createElement("svg", { width: 15, height: 14, viewBox: "0 0 15 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.3496 0L7.41062 5.938L1.47162 0L0.411621 1.06L6.34962 6.999L0.411621 12.938L1.47162 13.999L7.41062 8.059L13.3496 13.999L14.4096 12.938L8.47162 6.999L14.4096 1.06L13.3496 0Z", fill: "#8C8C8C" }));
-function Rt(e) {
-  const { title: t, onReset: o, onClose: n } = e, { chatbot: r } = Z(), { avatar: c, isResetting: i, resetChannel: a, closeChannel: _ } = w(), b = y(
+const Nt = (e) => /* @__PURE__ */ u.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.49453 2.3352C6.44049 -0.226723 10.9105 -0.106316 13.7142 2.69633C16.6428 5.62613 16.6428 10.3739 13.7144 13.3035C10.7846 16.2322 6.03581 16.2322 3.1073 13.3036C2.30873 12.505 1.71132 11.5536 1.34188 10.5109L1.78892 10.3525L1.34171 10.5106L1.22791 10.162C1.01752 9.46018 0.910643 8.73159 0.910643 7.9997H2.4542L2.46382 8.33865C2.49584 8.9024 2.60763 9.46037 2.79674 9.99539L2.7968 9.99536L2.90116 10.2683C3.19714 10.9887 3.63414 11.6475 4.19876 12.2121C6.52451 14.5379 10.2961 14.5379 12.6229 12.212C14.9486 9.88539 14.9486 6.11464 12.6227 3.78781C10.3306 1.49653 6.63579 1.46263 4.30292 3.68622L6.68087 3.68698V5.22954H3.49394H1.95141V3.68698V0.5H3.49394L3.49453 2.3352Z", fill: "#8C8C8C" })), Rt = (e) => /* @__PURE__ */ u.createElement("svg", { width: 15, height: 14, viewBox: "0 0 15 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.3496 0L7.41062 5.938L1.47162 0L0.411621 1.06L6.34962 6.999L0.411621 12.938L1.47162 13.999L7.41062 8.059L13.3496 13.999L14.4096 12.938L8.47162 6.999L14.4096 1.06L13.3496 0Z", fill: "#8C8C8C" }));
+function Mt(e) {
+  const { title: t, onReset: o, onClose: n } = e, { chatbot: s } = j(), { avatar: c, isResetting: i, resetChannel: a, closeChannel: _ } = T(), f = y(
     () => ({
-      maxWidth: (r == null ? void 0 : r.contentMaxWidth) ?? "1200px"
+      maxWidth: (s == null ? void 0 : s.contentMaxWidth) ?? "1200px"
     }),
-    [r]
+    [s]
   ), v = g(
     (l) => {
       i || (l.stopPropagation(), o == null || o(), a == null || a());
     },
     [i, o, a]
-  ), f = g(
+  ), b = g(
     (l) => {
       i || (l.stopPropagation(), n == null || n(), _ == null || _());
     },
     [i, n, _]
   );
-  return /* @__PURE__ */ s("div", { className: A.chatbot_header, children: /* @__PURE__ */ m("div", { className: A.chatbot_header__content, style: b, children: [
-    /* @__PURE__ */ m("div", { className: A.chatbot_header__title, children: [
-      /* @__PURE__ */ s(wt, { avatar: c }),
-      /* @__PURE__ */ s("h4", { children: t })
+  return /* @__PURE__ */ r("div", { className: I.chatbot_header, children: /* @__PURE__ */ m("div", { className: I.chatbot_header__content, style: f, children: [
+    /* @__PURE__ */ m("div", { className: I.chatbot_header__title, children: [
+      /* @__PURE__ */ r(Tt, { avatar: c }),
+      /* @__PURE__ */ r("h4", { children: t })
     ] }),
-    /* @__PURE__ */ m("div", { className: A.chatbot_header__extra, children: [
-      /* @__PURE__ */ s("div", { onClick: v, children: /* @__PURE__ */ s(Tt, {}) }),
-      /* @__PURE__ */ s("div", { onClick: f, children: /* @__PURE__ */ s(Nt, {}) })
+    /* @__PURE__ */ m("div", { className: I.chatbot_header__extra, children: [
+      /* @__PURE__ */ r("div", { onClick: v, children: /* @__PURE__ */ r(Nt, {}) }),
+      /* @__PURE__ */ r("div", { onClick: b, children: /* @__PURE__ */ r(Rt, {}) })
     ] })
   ] }) });
 }
-const Mt = "_chatbot_body_1f0gq_1", St = "_chatbot_body__content_1f0gq_7", W = {
-  chatbot_body: Mt,
-  chatbot_body__content: St
-}, Lt = "_template_box_1ozig_1", E = {
-  template_box: Lt,
+const St = "_chatbot_body_1f0gq_1", Lt = "_chatbot_body__content_1f0gq_7", J = {
+  chatbot_body: St,
+  chatbot_body__content: Lt
+}, Et = "_template_box_1ozig_1", E = {
+  template_box: Et,
   "template_box--bot": "_template_box--bot_1ozig_7",
   "template_box--horizontal": "_template_box--horizontal_1ozig_7",
   "template_box--vertical": "_template_box--vertical_1ozig_10",
   "template_box--user": "_template_box--user_1ozig_14"
 };
-function V(e) {
-  const { type: t, direction: o = "horizontal", children: n } = e, r = y(() => {
+function q(e) {
+  const { type: t, direction: o = "horizontal", children: n } = e, s = y(() => {
     switch (t) {
       case "user":
-        return R(E.template_box, E["template_box--user"]);
+        return w(E.template_box, E["template_box--user"]);
       case "bot":
       default:
-        return R(
+        return w(
           E.template_box,
           E["template_box--bot"],
           o === "horizontal" ? E["template_box--horizontal"] : E["template_box--vertical"]
         );
     }
   }, [o, t]);
-  return /* @__PURE__ */ s("div", { className: r, children: n });
+  return /* @__PURE__ */ r("div", { className: s, children: n });
 }
-const Et = "_template_box_content_12ojl_1", Bt = "_content_12ojl_7", U = {
-  template_box_content: Et,
+const kt = "_template_box_content_12ojl_1", Bt = "_content_12ojl_7", K = {
+  template_box_content: kt,
   content: Bt
-}, kt = "_quick_replies_box_zoq7y_1", Ht = "_quick_reply_zoq7y_7", J = {
-  quick_replies_box: kt,
-  quick_reply: Ht
+}, Ht = "_quick_replies_box_zoq7y_1", zt = "_quick_reply_zoq7y_7", Q = {
+  quick_replies_box: Ht,
+  quick_reply: zt
 };
-function zt(e) {
-  const { quickReplies: t } = e, { sendMessage: o, isConnecting: n } = w(), r = g(
+function Vt(e) {
+  const { quickReplies: t } = e, { sendMessage: o, isConnecting: n } = T(), s = g(
     (c) => {
       o == null || o(c);
     },
     [o]
   );
-  return t != null && t.length ? /* @__PURE__ */ s("div", { className: J.quick_replies_box, children: t.map((c) => /* @__PURE__ */ s(
+  return t != null && t.length ? /* @__PURE__ */ r("div", { className: Q.quick_replies_box, children: t.map((c) => /* @__PURE__ */ r(
     "button",
     {
-      className: J.quick_reply,
+      className: Q.quick_reply,
       disabled: n,
-      onClick: () => r(c.text),
+      onClick: () => s(c.text),
       children: c.text
     },
     c.text
   )) }) : null;
 }
-function ct(e) {
+function O(e) {
   return e.toLocaleTimeString("zh-TW", {
     timeZone: "Asia/Taipei",
     hour: "2-digit",
@@ -334,84 +337,84 @@ function ct(e) {
     hour12: !1
   });
 }
-const Vt = "_time_rgg92_1", qt = {
-  time: Vt
+const qt = "_time_rgg92_1", At = {
+  time: qt
 };
-function D(e) {
+function F(e) {
   const { time: t, className: o } = e;
-  return t ? /* @__PURE__ */ s("div", { className: R(qt.time, o), children: ct(t) }) : null;
+  return t ? /* @__PURE__ */ r("div", { className: w(At.time, o), children: O(t) }) : null;
 }
-function O(e) {
+function W(e) {
   const { quickReplies: t, time: o, children: n } = e;
-  return /* @__PURE__ */ m("div", { className: U.template_box_content, children: [
-    /* @__PURE__ */ m("div", { className: U.content, children: [
+  return /* @__PURE__ */ m("div", { className: K.template_box_content, children: [
+    /* @__PURE__ */ m("div", { className: K.content, children: [
       n,
-      /* @__PURE__ */ s(D, { time: o })
+      /* @__PURE__ */ r(F, { time: o })
     ] }),
-    !!(t != null && t.length) && /* @__PURE__ */ s(zt, { quickReplies: t })
+    !!(t != null && t.length) && /* @__PURE__ */ r(Vt, { quickReplies: t })
   ] });
 }
-const At = "_bot_avatar_xrs9x_1", K = {
-  bot_avatar: At
-}, It = (e) => /* @__PURE__ */ u.createElement("svg", { viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("path", { d: "M0.40625 12C0.40625 5.37258 5.77883 0 12.4062 0C19.0337 0 24.4062 5.37258 24.4062 12C24.4062 18.6274 19.0337 24 12.4062 24C5.77883 24 0.40625 18.6274 0.40625 12Z", fill: "#585858" }), /* @__PURE__ */ u.createElement("path", { d: "M6.40625 18.75V15C6.40625 14.5875 6.55313 14.2344 6.84688 13.9406C7.14063 13.6469 7.49375 13.5 7.90625 13.5H16.9062C17.3188 13.5 17.6719 13.6469 17.9656 13.9406C18.2594 14.2344 18.4062 14.5875 18.4062 15V18.75H6.40625ZM10.1562 12.75C9.11875 12.75 8.23438 12.3844 7.50312 11.6531C6.77187 10.9219 6.40625 10.0375 6.40625 9C6.40625 7.9625 6.77187 7.07812 7.50312 6.34687C8.23438 5.61562 9.11875 5.25 10.1562 5.25H14.6562C15.6938 5.25 16.5781 5.61562 17.3094 6.34687C18.0406 7.07812 18.4062 7.9625 18.4062 9C18.4062 10.0375 18.0406 10.9219 17.3094 11.6531C16.5781 12.3844 15.6938 12.75 14.6562 12.75H10.1562ZM7.90625 17.25H16.9062V15H7.90625V17.25ZM10.1562 11.25H14.6562C15.2812 11.25 15.8125 11.0312 16.25 10.5938C16.6875 10.1562 16.9062 9.625 16.9062 9C16.9062 8.375 16.6875 7.84375 16.25 7.40625C15.8125 6.96875 15.2812 6.75 14.6562 6.75H10.1562C9.53125 6.75 9 6.96875 8.5625 7.40625C8.125 7.84375 7.90625 8.375 7.90625 9C7.90625 9.625 8.125 10.1562 8.5625 10.5938C9 11.0312 9.53125 11.25 10.1562 11.25ZM10.1562 9.75C10.3688 9.75 10.5469 9.67812 10.6906 9.53438C10.8344 9.39062 10.9062 9.2125 10.9062 9C10.9062 8.7875 10.8344 8.60938 10.6906 8.46562C10.5469 8.32187 10.3688 8.25 10.1562 8.25C9.94375 8.25 9.76562 8.32187 9.62187 8.46562C9.47812 8.60938 9.40625 8.7875 9.40625 9C9.40625 9.2125 9.47812 9.39062 9.62187 9.53438C9.76562 9.67812 9.94375 9.75 10.1562 9.75ZM14.6562 9.75C14.8687 9.75 15.0469 9.67812 15.1906 9.53438C15.3344 9.39062 15.4062 9.2125 15.4062 9C15.4062 8.7875 15.3344 8.60938 15.1906 8.46562C15.0469 8.32187 14.8687 8.25 14.6562 8.25C14.4438 8.25 14.2656 8.32187 14.1219 8.46562C13.9781 8.60938 13.9062 8.7875 13.9062 9C13.9062 9.2125 13.9781 9.39062 14.1219 9.53438C14.2656 9.67812 14.4438 9.75 14.6562 9.75Z", fill: "white" })), j = lt((e) => {
+const It = "_bot_avatar_xrs9x_1", X = {
+  bot_avatar: It
+}, Zt = (e) => /* @__PURE__ */ u.createElement("svg", { viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("path", { d: "M0.40625 12C0.40625 5.37258 5.77883 0 12.4062 0C19.0337 0 24.4062 5.37258 24.4062 12C24.4062 18.6274 19.0337 24 12.4062 24C5.77883 24 0.40625 18.6274 0.40625 12Z", fill: "#585858" }), /* @__PURE__ */ u.createElement("path", { d: "M6.40625 18.75V15C6.40625 14.5875 6.55313 14.2344 6.84688 13.9406C7.14063 13.6469 7.49375 13.5 7.90625 13.5H16.9062C17.3188 13.5 17.6719 13.6469 17.9656 13.9406C18.2594 14.2344 18.4062 14.5875 18.4062 15V18.75H6.40625ZM10.1562 12.75C9.11875 12.75 8.23438 12.3844 7.50312 11.6531C6.77187 10.9219 6.40625 10.0375 6.40625 9C6.40625 7.9625 6.77187 7.07812 7.50312 6.34687C8.23438 5.61562 9.11875 5.25 10.1562 5.25H14.6562C15.6938 5.25 16.5781 5.61562 17.3094 6.34687C18.0406 7.07812 18.4062 7.9625 18.4062 9C18.4062 10.0375 18.0406 10.9219 17.3094 11.6531C16.5781 12.3844 15.6938 12.75 14.6562 12.75H10.1562ZM7.90625 17.25H16.9062V15H7.90625V17.25ZM10.1562 11.25H14.6562C15.2812 11.25 15.8125 11.0312 16.25 10.5938C16.6875 10.1562 16.9062 9.625 16.9062 9C16.9062 8.375 16.6875 7.84375 16.25 7.40625C15.8125 6.96875 15.2812 6.75 14.6562 6.75H10.1562C9.53125 6.75 9 6.96875 8.5625 7.40625C8.125 7.84375 7.90625 8.375 7.90625 9C7.90625 9.625 8.125 10.1562 8.5625 10.5938C9 11.0312 9.53125 11.25 10.1562 11.25ZM10.1562 9.75C10.3688 9.75 10.5469 9.67812 10.6906 9.53438C10.8344 9.39062 10.9062 9.2125 10.9062 9C10.9062 8.7875 10.8344 8.60938 10.6906 8.46562C10.5469 8.32187 10.3688 8.25 10.1562 8.25C9.94375 8.25 9.76562 8.32187 9.62187 8.46562C9.47812 8.60938 9.40625 8.7875 9.40625 9C9.40625 9.2125 9.47812 9.39062 9.62187 9.53438C9.76562 9.67812 9.94375 9.75 10.1562 9.75ZM14.6562 9.75C14.8687 9.75 15.0469 9.67812 15.1906 9.53438C15.3344 9.39062 15.4062 9.2125 15.4062 9C15.4062 8.7875 15.3344 8.60938 15.1906 8.46562C15.0469 8.32187 14.8687 8.25 14.6562 8.25C14.4438 8.25 14.2656 8.32187 14.1219 8.46562C13.9781 8.60938 13.9062 8.7875 13.9062 9C13.9062 9.2125 13.9781 9.39062 14.1219 9.53438C14.2656 9.67812 14.4438 9.75 14.6562 9.75Z", fill: "white" })), $ = _t((e) => {
   const { avatar: t } = e;
-  return t ? /* @__PURE__ */ s("img", { src: t, alt: "Bot Avatar", className: K.bot_avatar }) : /* @__PURE__ */ s("div", { className: K.bot_avatar, children: /* @__PURE__ */ s(It, {}) });
-}), Zt = "_text_1djgp_1", jt = "_dot_1djgp_18", B = {
-  text: Zt,
+  return t ? /* @__PURE__ */ r("img", { src: t, alt: "Bot Avatar", className: X.bot_avatar }) : /* @__PURE__ */ r("div", { className: X.bot_avatar, children: /* @__PURE__ */ r(Zt, {}) });
+}), jt = "_text_1djgp_1", $t = "_dot_1djgp_18", k = {
+  text: jt,
   "text--bot": "_text--bot_1djgp_7",
   "typing-indicator": "_typing-indicator_1djgp_13",
-  dot: jt
+  dot: $t
 };
-function $t(e) {
-  const { children: t, onResize: o } = e, n = q(null);
+function Pt(e) {
+  const { children: t, onResize: o } = e, n = A(null);
   return L(() => {
-    const r = new ResizeObserver((c) => {
+    const s = new ResizeObserver((c) => {
       for (const i of c) {
         const { width: a, height: _ } = i.contentRect;
         o(a, _);
       }
     });
-    return n.current && r.observe(n.current), () => {
-      r.disconnect();
+    return n.current && s.observe(n.current), () => {
+      s.disconnect();
     };
-  }, [n, o]), /* @__PURE__ */ s("div", { ref: n, children: t });
+  }, [n, o]), /* @__PURE__ */ r("div", { ref: n, children: t });
 }
-function it(e) {
-  const { isTyping: t, typingText: o } = e, { messageBoxBottomRef: n, avatar: r } = w(), c = g(() => {
+function at(e) {
+  const { isTyping: t, typingText: o } = e, { messageBoxBottomRef: n, avatar: s } = T(), c = g(() => {
     var a;
     (a = n.current) == null || a.scrollIntoView({ behavior: "smooth" });
-  }, [n]), i = bt(t, 500);
-  return i ? /* @__PURE__ */ m(V, { type: "bot", direction: "horizontal", children: [
-    /* @__PURE__ */ s(j, { avatar: r }),
-    /* @__PURE__ */ s(O, { time: /* @__PURE__ */ new Date(), children: /* @__PURE__ */ s("div", { className: R(B.text, B["text--bot"]), children: /* @__PURE__ */ m($t, { onResize: c, children: [
-      /* @__PURE__ */ s("span", { children: o ?? "" }),
-      i && /* @__PURE__ */ m("span", { className: B["typing-indicator"], children: [
-        /* @__PURE__ */ s("div", { className: B.dot }),
-        /* @__PURE__ */ s("div", { className: B.dot }),
-        /* @__PURE__ */ s("div", { className: B.dot })
+  }, [n]), i = ft(t, 500);
+  return i ? /* @__PURE__ */ m(q, { type: "bot", direction: "horizontal", children: [
+    /* @__PURE__ */ r($, { avatar: s }),
+    /* @__PURE__ */ r(W, { time: /* @__PURE__ */ new Date(), children: /* @__PURE__ */ r("div", { className: w(k.text, k["text--bot"]), children: /* @__PURE__ */ m(Pt, { onResize: c, children: [
+      /* @__PURE__ */ r("span", { children: o ?? "" }),
+      i && /* @__PURE__ */ m("span", { className: k["typing-indicator"], children: [
+        /* @__PURE__ */ r("div", { className: k.dot }),
+        /* @__PURE__ */ r("div", { className: k.dot }),
+        /* @__PURE__ */ r("div", { className: k.dot })
       ] })
     ] }) }) })
   ] }) : null;
 }
-function Pt(e) {
-  const { placeholder: t } = e, { isConnecting: o, messages: n } = w(), r = y(
+function Dt(e) {
+  const { placeholder: t } = e, { isConnecting: o, messages: n } = T(), s = y(
     () => Array.from((n == null ? void 0 : n.values()) ?? []).some(
       (c) => c.type === "bot" && c.isTyping
     ),
     [n]
   );
-  return o && !r ? /* @__PURE__ */ s(it, { isTyping: !0, typingText: t }) : null;
+  return o && !s ? /* @__PURE__ */ r(at, { isTyping: !0, typingText: t }) : null;
 }
-const Dt = "_card_root_1ygom_1", Ot = "_card_content_1ygom_10", Ft = "_card_title_1ygom_17", Wt = "_card_description_1ygom_23", Ut = "_card_actions_1ygom_37", H = {
-  card_root: Dt,
-  card_content: Ot,
-  card_title: Ft,
-  card_description: Wt,
-  card_actions: Ut
+const Ot = "_card_root_1ygom_1", Ft = "_card_content_1ygom_10", Wt = "_card_title_1ygom_17", Ut = "_card_description_1ygom_23", Jt = "_card_actions_1ygom_37", H = {
+  card_root: Ot,
+  card_content: Ft,
+  card_title: Wt,
+  card_description: Ut,
+  card_actions: Jt
 };
-function at(e) {
+function lt(e) {
   var i;
-  const { template: t } = e, { sendMessage: o } = w(), n = y(() => (t == null ? void 0 : t.thumbnailImageUrl.replace(/^http:/, "").replace(/^https:/, "")) || "https://via.assets.so/img.jpg?w=200&h=270&tc=white&bg=#eeeeee", [t]), r = y(() => {
+  const { template: t } = e, { sendMessage: o } = T(), n = y(() => (t == null ? void 0 : t.thumbnailImageUrl.replace(/^http:/, "").replace(/^https:/, "")) || "https://via.assets.so/img.jpg?w=200&h=270&tc=white&bg=#eeeeee", [t]), s = y(() => {
     switch (t == null ? void 0 : t.imageAspectRatio) {
       case "square":
         return "1 / 1";
@@ -433,7 +436,7 @@ function at(e) {
     [o]
   );
   return /* @__PURE__ */ m("div", { className: H.card_root, children: [
-    (t == null ? void 0 : t.thumbnailImageUrl) && /* @__PURE__ */ s(
+    (t == null ? void 0 : t.thumbnailImageUrl) && /* @__PURE__ */ r(
       "img",
       {
         alt: t == null ? void 0 : t.title,
@@ -443,144 +446,152 @@ function at(e) {
           width: "100%",
           maxHeight: "170px",
           objectFit: t == null ? void 0 : t.imageSize,
-          aspectRatio: r
+          aspectRatio: s
         }
       }
     ),
     /* @__PURE__ */ m("div", { className: H.card_content, children: [
-      /* @__PURE__ */ s("h5", { className: H.card_title, children: t == null ? void 0 : t.title }),
-      /* @__PURE__ */ s("div", { className: H.card_description, children: t == null ? void 0 : t.text }),
-      /* @__PURE__ */ s("div", { className: H.card_actions, children: (i = t == null ? void 0 : t.buttons) == null ? void 0 : i.map((a, _) => /* @__PURE__ */ s("button", { onClick: c(a.action), children: a.label }, _)) })
+      /* @__PURE__ */ r("h5", { className: H.card_title, children: t == null ? void 0 : t.title }),
+      /* @__PURE__ */ r("div", { className: H.card_description, children: t == null ? void 0 : t.text }),
+      /* @__PURE__ */ r("div", { className: H.card_actions, children: (i = t == null ? void 0 : t.buttons) == null ? void 0 : i.map((a, _) => /* @__PURE__ */ r("button", { onClick: c(a.action), children: a.label }, _)) })
     ] })
   ] });
 }
-function Jt(e) {
-  const { message: t } = e, { avatar: o } = w(), n = t.message.template;
-  return /* @__PURE__ */ m(V, { type: "bot", direction: "horizontal", children: [
-    /* @__PURE__ */ s(j, { avatar: o }),
-    /* @__PURE__ */ s(
-      O,
+function Kt(e) {
+  const { message: t } = e, { avatar: o } = T(), n = t.message.template;
+  return /* @__PURE__ */ m(q, { type: "bot", direction: "horizontal", children: [
+    /* @__PURE__ */ r($, { avatar: o }),
+    /* @__PURE__ */ r(
+      W,
       {
         time: t.time,
         quickReplies: n == null ? void 0 : n.quickReplies,
-        children: /* @__PURE__ */ s(at, { template: n })
+        children: /* @__PURE__ */ r(lt, { template: n })
       }
     )
   ] });
 }
-const Kt = "_text_sbjtw_1", I = {
-  text: Kt,
+const Qt = "_text_sbjtw_1", Z = {
+  text: Qt,
   "text--user": "_text--user_sbjtw_7",
   "text--bot": "_text--bot_sbjtw_13"
 };
-function Q(e) {
+function G(e) {
   var n;
-  const { message: t } = e, { avatar: o } = w();
-  return t.type === "user" ? /* @__PURE__ */ m(V, { type: "user", direction: "horizontal", children: [
-    /* @__PURE__ */ s("div", { className: R(I.text, I["text--user"]), children: t.text }),
-    /* @__PURE__ */ s(D, { time: t.time })
-  ] }) : /* @__PURE__ */ m(V, { type: "bot", direction: "horizontal", children: [
-    /* @__PURE__ */ s(j, { avatar: o }),
-    /* @__PURE__ */ s(
-      O,
+  const { message: t } = e, { avatar: o } = T();
+  return t.type === "error" ? null : t.type === "user" ? /* @__PURE__ */ m(q, { type: "user", direction: "horizontal", children: [
+    /* @__PURE__ */ r("div", { className: w(Z.text, Z["text--user"]), children: t.text }),
+    /* @__PURE__ */ r(F, { time: t.time })
+  ] }) : /* @__PURE__ */ m(q, { type: "bot", direction: "horizontal", children: [
+    /* @__PURE__ */ r($, { avatar: o }),
+    /* @__PURE__ */ r(
+      W,
       {
         time: t.time,
         quickReplies: (n = t.message.template) == null ? void 0 : n.quickReplies,
-        children: /* @__PURE__ */ s("div", { className: R(I.text, I["text--bot"]), children: t.message.text })
+        children: /* @__PURE__ */ r("div", { className: w(Z.text, Z["text--bot"]), children: t.message.text })
       }
     )
   ] });
 }
-const Qt = "_carousel_root_sv1hc_1", Xt = "_carousel_time_sv1hc_12", X = {
-  carousel_root: Qt,
-  carousel_time: Xt
+const Xt = "_carousel_root_sv1hc_1", Gt = "_carousel_time_sv1hc_12", Y = {
+  carousel_root: Xt,
+  carousel_time: Gt
 };
-function Gt(e) {
-  var r;
-  const { message: t } = e, { avatar: o } = w(), n = t.message.template;
-  return /* @__PURE__ */ m(V, { type: "bot", direction: "vertical", children: [
-    /* @__PURE__ */ s(j, { avatar: o }),
-    /* @__PURE__ */ s("div", { className: X.carousel_root, children: (r = n.columns) == null ? void 0 : r.map((c, i) => /* @__PURE__ */ s(at, { template: c }, i)) }),
-    /* @__PURE__ */ s(D, { className: X.carousel_time, time: t.time })
+function Yt(e) {
+  var s;
+  const { message: t } = e, { avatar: o } = T(), n = t.message.template;
+  return /* @__PURE__ */ m(q, { type: "bot", direction: "vertical", children: [
+    /* @__PURE__ */ r($, { avatar: o }),
+    /* @__PURE__ */ r("div", { className: Y.carousel_root, children: (s = n.columns) == null ? void 0 : s.map((c, i) => /* @__PURE__ */ r(lt, { template: c }, i)) }),
+    /* @__PURE__ */ r(F, { className: Y.carousel_time, time: t.time })
   ] });
 }
-const Yt = "_hint_root_g119q_1", te = "_time_g119q_14", G = {
-  hint_root: Yt,
-  time: te
+const te = "_hint_root_k5fud_1", ee = "_hint_root__error_k5fud_13", oe = "_time_k5fud_17", z = {
+  hint_root: te,
+  hint_root__error: ee,
+  time: oe
 };
-function ee(e) {
+function tt(e) {
   const { message: t } = e;
   if (t.type === "user") return null;
+  if (t.type === "error")
+    return /* @__PURE__ */ m("div", { className: w(z.hint_root, z.hint_root__error), children: [
+      /* @__PURE__ */ r("div", { className: z.time, children: O(t.time) }),
+      /* @__PURE__ */ r("span", { children: "Unexpected error" })
+    ] });
   const o = t.message.template;
-  return o.type !== z.HINT ? null : /* @__PURE__ */ m("div", { className: G.hint_root, children: [
-    /* @__PURE__ */ s("div", { className: G.time, children: ct(t.time) }),
+  return o.type !== V.HINT ? null : /* @__PURE__ */ m("div", { className: z.hint_root, children: [
+    /* @__PURE__ */ r("div", { className: z.time, children: O(t.time) }),
     o.text
   ] });
 }
-function oe(e) {
+function ne(e) {
   var o;
   const { message: t } = e;
   if (t.type === "user")
-    return /* @__PURE__ */ s(Q, { message: t });
+    return /* @__PURE__ */ r(G, { message: t });
+  if (t.type === "error")
+    return /* @__PURE__ */ r(tt, { message: t });
   if (t.isTyping)
-    return /* @__PURE__ */ s(
-      it,
+    return /* @__PURE__ */ r(
+      at,
       {
         isTyping: t.isTyping,
         typingText: t.typingText
       }
     );
   switch ((o = t.message.template) == null ? void 0 : o.type) {
-    case z.TEXT:
-      return /* @__PURE__ */ s(Q, { message: t });
-    case z.HINT:
-      return /* @__PURE__ */ s(ee, { message: t });
-    case z.BUTTON:
-      return /* @__PURE__ */ s(Jt, { message: t });
-    case z.CAROUSEL:
-      return /* @__PURE__ */ s(Gt, { message: t });
+    case V.TEXT:
+      return /* @__PURE__ */ r(G, { message: t });
+    case V.HINT:
+      return /* @__PURE__ */ r(tt, { message: t });
+    case V.BUTTON:
+      return /* @__PURE__ */ r(Kt, { message: t });
+    case V.CAROUSEL:
+      return /* @__PURE__ */ r(Yt, { message: t });
     default:
-      return /* @__PURE__ */ s("div", {});
+      return /* @__PURE__ */ r("div", {});
   }
 }
-function ne() {
-  const { chatbot: e } = Z(), { messages: t, messageBoxBottomRef: o, botTypingPlaceholder: n } = w();
+function re() {
+  const { chatbot: e } = j(), { messages: t, messageBoxBottomRef: o, botTypingPlaceholder: n } = T();
   L(() => {
     var c;
     (c = o.current) == null || c.scrollIntoView({ behavior: "smooth" });
   }, [t, o]);
-  const r = y(
+  const s = y(
     () => ({
       maxWidth: (e == null ? void 0 : e.contentMaxWidth) ?? "1200px"
     }),
     [e]
   );
-  return /* @__PURE__ */ s("div", { className: W.chatbot_body, children: /* @__PURE__ */ m("div", { className: W.chatbot_body__content, style: r, children: [
-    Array.from((t == null ? void 0 : t.values()) ?? []).map((c) => /* @__PURE__ */ s(
-      oe,
+  return /* @__PURE__ */ r("div", { className: J.chatbot_body, children: /* @__PURE__ */ m("div", { className: J.chatbot_body__content, style: s, children: [
+    Array.from((t == null ? void 0 : t.values()) ?? []).map((c) => /* @__PURE__ */ r(
+      ne,
       {
         message: c
       },
       c.messageId
     )),
-    /* @__PURE__ */ s(
-      Pt,
+    /* @__PURE__ */ r(
+      Dt,
       {
         placeholder: n ?? "正在輸入訊息"
       }
     ),
-    /* @__PURE__ */ s("div", { ref: o })
+    /* @__PURE__ */ r("div", { ref: o })
   ] }) });
 }
-const se = "_chatbot_footer_1uvgs_1", re = "_chatbot_footer__content_1uvgs_1", ce = "_chatbot_textarea_1uvgs_11", ie = "_chatbot_submit_button_1uvgs_26", ae = "_chatbot_submit_button__disabled_1uvgs_51", S = {
+const se = "_chatbot_footer_1uvgs_1", ce = "_chatbot_footer__content_1uvgs_1", ie = "_chatbot_textarea_1uvgs_11", ae = "_chatbot_submit_button_1uvgs_26", le = "_chatbot_submit_button__disabled_1uvgs_51", S = {
   chatbot_footer: se,
-  chatbot_footer__content: re,
-  chatbot_textarea: ce,
-  chatbot_submit_button: ie,
-  chatbot_submit_button__disabled: ae
-}, le = (e) => /* @__PURE__ */ u.createElement("svg", { width: 15, height: 12, viewBox: "0 0 15 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("path", { d: "M0.823242 11.6953V0.945312L14.3328 6.32031L0.823242 11.6953ZM1.90658 10.0911L11.3649 6.32031L1.90658 2.54948V4.98052L5.92574 6.32031L1.90658 7.6601V10.0911Z", fill: "white" })), _e = (e) => /* @__PURE__ */ u.createElement("svg", { width: 11, height: 16, viewBox: "0 0 11 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("path", { d: "M5.40658 9.90397C4.82435 9.90397 4.33158 9.7023 3.92824 9.29897C3.52491 8.89564 3.32324 8.40286 3.32324 7.82064V2.82064C3.32324 2.23842 3.52491 1.74564 3.92824 1.3423C4.33158 0.938971 4.82435 0.737305 5.40658 0.737305C5.9888 0.737305 6.48158 0.938971 6.88491 1.3423C7.28824 1.74564 7.48991 2.23842 7.48991 2.82064V7.82064C7.48991 8.40286 7.28824 8.89564 6.88491 9.29897C6.48158 9.7023 5.9888 9.90397 5.40658 9.90397ZM4.86491 15.1123V12.8654C3.56213 12.7208 2.47949 12.1724 1.61699 11.2202C0.754492 10.2679 0.323242 9.13467 0.323242 7.82064H1.40658C1.40658 8.92731 1.79706 9.87064 2.57803 10.6506C3.35887 11.4306 4.30331 11.8206 5.41137 11.8206C6.51928 11.8206 7.46213 11.4306 8.23991 10.6506C9.01769 9.87064 9.40658 8.92731 9.40658 7.82064H10.4899C10.4899 9.13467 10.0587 10.2679 9.19616 11.2202C8.33366 12.1724 7.25102 12.7208 5.94824 12.8654V15.1123H4.86491ZM5.40658 8.82064C5.68991 8.82064 5.92741 8.7248 6.11908 8.53314C6.31074 8.34147 6.40658 8.10397 6.40658 7.82064V2.82064C6.40658 2.5373 6.31074 2.2998 6.11908 2.10814C5.92741 1.91647 5.68991 1.82064 5.40658 1.82064C5.12324 1.82064 4.88574 1.91647 4.69408 2.10814C4.50241 2.2998 4.40658 2.5373 4.40658 2.82064V7.82064C4.40658 8.10397 4.50241 8.34147 4.69408 8.53314C4.88574 8.7248 5.12324 8.82064 5.40658 8.82064Z", fill: "white" })), ue = (e) => /* @__PURE__ */ u.createElement("svg", { width: 40, height: 40, viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("circle", { cx: 20, cy: 20, r: 18, fill: "#D04444" }), /* @__PURE__ */ u.createElement("rect", { x: 12, y: 12, width: 16, height: 16, fill: "#FFFFFF", rx: 2, ry: 2 }));
-function de(e) {
-  const { setValue: t, className: o } = e, [n, r] = N(!1), c = q(null);
+  chatbot_footer__content: ce,
+  chatbot_textarea: ie,
+  chatbot_submit_button: ae,
+  chatbot_submit_button__disabled: le
+}, _e = (e) => /* @__PURE__ */ u.createElement("svg", { width: 15, height: 12, viewBox: "0 0 15 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("path", { d: "M0.823242 11.6953V0.945312L14.3328 6.32031L0.823242 11.6953ZM1.90658 10.0911L11.3649 6.32031L1.90658 2.54948V4.98052L5.92574 6.32031L1.90658 7.6601V10.0911Z", fill: "white" })), ue = (e) => /* @__PURE__ */ u.createElement("svg", { width: 11, height: 16, viewBox: "0 0 11 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("path", { d: "M5.40658 9.90397C4.82435 9.90397 4.33158 9.7023 3.92824 9.29897C3.52491 8.89564 3.32324 8.40286 3.32324 7.82064V2.82064C3.32324 2.23842 3.52491 1.74564 3.92824 1.3423C4.33158 0.938971 4.82435 0.737305 5.40658 0.737305C5.9888 0.737305 6.48158 0.938971 6.88491 1.3423C7.28824 1.74564 7.48991 2.23842 7.48991 2.82064V7.82064C7.48991 8.40286 7.28824 8.89564 6.88491 9.29897C6.48158 9.7023 5.9888 9.90397 5.40658 9.90397ZM4.86491 15.1123V12.8654C3.56213 12.7208 2.47949 12.1724 1.61699 11.2202C0.754492 10.2679 0.323242 9.13467 0.323242 7.82064H1.40658C1.40658 8.92731 1.79706 9.87064 2.57803 10.6506C3.35887 11.4306 4.30331 11.8206 5.41137 11.8206C6.51928 11.8206 7.46213 11.4306 8.23991 10.6506C9.01769 9.87064 9.40658 8.92731 9.40658 7.82064H10.4899C10.4899 9.13467 10.0587 10.2679 9.19616 11.2202C8.33366 12.1724 7.25102 12.7208 5.94824 12.8654V15.1123H4.86491ZM5.40658 8.82064C5.68991 8.82064 5.92741 8.7248 6.11908 8.53314C6.31074 8.34147 6.40658 8.10397 6.40658 7.82064V2.82064C6.40658 2.5373 6.31074 2.2998 6.11908 2.10814C5.92741 1.91647 5.68991 1.82064 5.40658 1.82064C5.12324 1.82064 4.88574 1.91647 4.69408 2.10814C4.50241 2.2998 4.40658 2.5373 4.40658 2.82064V7.82064C4.40658 8.10397 4.50241 8.34147 4.69408 8.53314C4.88574 8.7248 5.12324 8.82064 5.40658 8.82064Z", fill: "white" })), de = (e) => /* @__PURE__ */ u.createElement("svg", { width: 40, height: 40, viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("circle", { cx: 20, cy: 20, r: 18, fill: "#D04444" }), /* @__PURE__ */ u.createElement("rect", { x: 12, y: 12, width: 16, height: 16, fill: "#FFFFFF", rx: 2, ry: 2 }));
+function he(e) {
+  const { setValue: t, className: o } = e, [n, s] = R(!1), c = A(null);
   L(() => {
     const l = window.SpeechRecognition || window.webkitSpeechRecognition;
     if (!l) return;
@@ -591,7 +602,7 @@ function de(e) {
     }, d.onerror = (h) => {
       alert(`語音識別錯誤: ${JSON.stringify(h.error)}`);
     }, d.onend = () => {
-      r(!1);
+      s(!1);
     }, c.current = d;
   }, [t]);
   const i = g(() => {
@@ -600,18 +611,18 @@ function de(e) {
       return;
     }
     try {
-      c.current.start(), r(!0);
+      c.current.start(), s(!0);
     } catch (l) {
       alert(`無法開始辨識: ${JSON.stringify(l)}`);
     }
   }, []), a = g(() => {
-    c.current && (c.current.stop(), r(!1));
+    c.current && (c.current.stop(), s(!1));
   }, []), _ = g(
     (l) => {
       n || (l.preventDefault(), i());
     },
     [n, i]
-  ), b = g(
+  ), f = g(
     (l) => {
       n && (l.preventDefault(), a());
     },
@@ -621,26 +632,26 @@ function de(e) {
       n || (l.preventDefault(), i());
     },
     [n, i]
-  ), f = g(
+  ), b = g(
     (l) => {
       n && (l.preventDefault(), a());
     },
     [n, a]
   );
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ r(
     "div",
     {
       className: o,
       onMouseDown: _,
-      onMouseUp: b,
+      onMouseUp: f,
       onTouchStart: v,
-      onTouchEnd: f,
-      children: n ? /* @__PURE__ */ s(ue, {}) : /* @__PURE__ */ s(_e, {})
+      onTouchEnd: b,
+      children: n ? /* @__PURE__ */ r(de, {}) : /* @__PURE__ */ r(ue, {})
     }
   );
 }
-function he() {
-  const { sendMessage: e, isConnecting: t } = w(), { chatbot: o } = Z(), [n, r] = N(""), [c, i] = N(!1), a = q(null), _ = y(() => t || !n, [t, n]), b = y(
+function me() {
+  const { sendMessage: e, isConnecting: t } = T(), { chatbot: o } = j(), [n, s] = R(""), [c, i] = R(!1), a = A(null), _ = y(() => t || !n, [t, n]), f = y(
     () => ({
       maxWidth: (o == null ? void 0 : o.contentMaxWidth) ?? "1200px"
     }),
@@ -648,23 +659,23 @@ function he() {
   ), v = g(
     (d) => {
       const h = d.target, p = h.value;
-      h.style.height = "36px", p && (h.style.height = `${h.scrollHeight}px`), r(d.target.value);
+      h.style.height = "36px", p && (h.style.height = `${h.scrollHeight}px`), s(d.target.value);
     },
     []
-  ), f = g(() => {
-    !c && !t && (e == null || e(n), r(""), a.current && (a.current.style.height = "36px"));
+  ), b = g(() => {
+    !c && !t && (e == null || e(n), s(""), a.current && (a.current.style.height = "36px"));
   }, [c, t, e, n]), l = g(
     (d) => {
       if (d.key === "Enter" && !c && !t) {
-        e == null || e(n), r("");
+        e == null || e(n), s("");
         const h = d.target;
         h.style.height = "36px";
       }
     },
     [c, t, e, n]
   );
-  return /* @__PURE__ */ s("div", { className: S.chatbot_footer, children: /* @__PURE__ */ m("div", { className: S.chatbot_footer__content, style: b, children: [
-    /* @__PURE__ */ s(
+  return /* @__PURE__ */ r("div", { className: S.chatbot_footer, children: /* @__PURE__ */ m("div", { className: S.chatbot_footer__content, style: f, children: [
+    /* @__PURE__ */ r(
       "textarea",
       {
         ref: a,
@@ -679,22 +690,22 @@ function he() {
         onCompositionEnd: () => i(!1)
       }
     ),
-    n ? /* @__PURE__ */ s(
+    n ? /* @__PURE__ */ r(
       "button",
       {
-        className: R(
+        className: w(
           S.chatbot_submit_button,
           _ && S.chatbot_submit_button__disabled
         ),
         disabled: _,
-        onClick: f,
-        children: /* @__PURE__ */ s(le, {})
+        onClick: b,
+        children: /* @__PURE__ */ r(_e, {})
       }
-    ) : /* @__PURE__ */ s(
-      de,
+    ) : /* @__PURE__ */ r(
+      he,
       {
-        setValue: r,
-        className: R(
+        setValue: s,
+        className: w(
           S.chatbot_submit_button,
           t && S.chatbot_submit_button__disabled
         )
@@ -702,48 +713,48 @@ function he() {
     )
   ] }) });
 }
-const me = "_chatbot_root_od4qx_1", ge = "_chatbot_root__fullScreen_od4qx_126", Y = {
-  chatbot_root: me,
-  chatbot_root__fullScreen: ge
+const ge = "_chatbot_root_od4qx_1", be = "_chatbot_root__fullScreen_od4qx_126", et = {
+  chatbot_root: ge,
+  chatbot_root__fullScreen: be
 };
-function Ce(e) {
+function ve(e) {
   const {
     title: t,
     theme: o,
     config: n,
-    customChannelId: r,
+    customChannelId: s,
     initMessages: c,
     debugMode: i = !1,
     fullScreen: a = !1,
     avatar: _,
-    botTypingPlaceholder: b,
+    botTypingPlaceholder: f,
     onReset: v,
-    onClose: f
+    onClose: b
   } = e;
-  return /* @__PURE__ */ s(ht, { fullScreen: a, theme: o, children: /* @__PURE__ */ m(
-    ft,
+  return /* @__PURE__ */ r(mt, { fullScreen: a, theme: o, children: /* @__PURE__ */ m(
+    pt,
     {
-      className: R(
-        Y.chatbot_root,
-        a && Y.chatbot_root__fullScreen
+      className: w(
+        et.chatbot_root,
+        a && et.chatbot_root__fullScreen
       ),
       avatar: _,
       config: n,
-      customChannelId: r,
+      customChannelId: s,
       initMessages: c,
-      botTypingPlaceholder: b,
+      botTypingPlaceholder: f,
       options: { showDebugMessage: i },
       children: [
-        /* @__PURE__ */ s(Rt, { title: t, onReset: v, onClose: f }),
-        /* @__PURE__ */ s(ne, {}),
-        /* @__PURE__ */ s(he, {})
+        /* @__PURE__ */ r(Mt, { title: t, onReset: v, onClose: b }),
+        /* @__PURE__ */ r(re, {}),
+        /* @__PURE__ */ r(me, {})
       ]
     }
   ) });
 }
 export {
-  Ce as Chatbot,
-  mt as useAsgardServiceClient,
-  gt as useChannel,
-  bt as useDebounce
+  ve as Chatbot,
+  gt as useAsgardServiceClient,
+  bt as useChannel,
+  ft as useDebounce
 };

package/dist/style.css

@@ -1 +1 @@
-._chatbot_header_cqlve_1 ._chatbot_header__content_cqlve_1{margin:0 auto;max-width:1200px;padding:var(--asg-spacing-4);display:flex;justify-content:space-between}._chatbot_header__title_cqlve_9{display:flex;flex-direction:row;align-items:center;gap:var(--asg-spacing-2)}._chatbot_header__title_cqlve_9>h4{margin:0;color:#fff}._chatbot_header__extra_cqlve_20{display:flex;flex-direction:row;align-items:center;gap:var(--asg-spacing-3)}._chatbot_header__extra_cqlve_20>div{width:24px;height:24px;display:flex;justify-content:center;align-items:center}._chatbot_header__extra_cqlve_20>div>svg{width:15px;height:15px;cursor:pointer}._chatbot_header__extra_cqlve_20>div>svg:hover{opacity:.5}._chatbot_body_1f0gq_1{border-top:1px solid #434343;border-bottom:1px solid #434343;overflow-x:hidden;overflow-y:scroll}._chatbot_body_1f0gq_1 ._chatbot_body__content_1f0gq_7{margin:0 auto;display:flex;flex-direction:column;padding:16px;gap:16px;max-width:1200px}._template_box_1ozig_1{width:100%;display:flex;gap:8px}._template_box--bot_1ozig_7._template_box--horizontal_1ozig_7{flex-direction:row}._template_box--bot_1ozig_7._template_box--vertical_1ozig_10{flex-direction:column}._template_box--user_1ozig_14{flex-direction:row-reverse}._template_box_content_12ojl_1{display:flex;flex-direction:column;gap:8px}._content_12ojl_7{display:flex;flex-direction:row;gap:8px}._quick_replies_box_zoq7y_1{display:flex;flex-wrap:wrap;gap:8px}._quick_reply_zoq7y_7{font:inherit;font-size:13px;padding:4px 8px;border-radius:8px;border:1px solid #434343;background:#58585833;color:#fff;cursor:pointer}._time_rgg92_1{display:flex;align-items:flex-end;font-size:12px;color:#8c8c8c}._bot_avatar_xrs9x_1{flex:0 0 auto;width:24px;height:24px;border-radius:50%}._text_1djgp_1{padding:8px 12px;border-radius:8px;color:#fff}._text--bot_1djgp_7{max-width:70%;background:#585858;border-top-left-radius:0}._typing-indicator_1djgp_13{display:inline-flex;align-items:flex-end;justify-content:center}._typing-indicator_1djgp_13 ._dot_1djgp_18{width:2px;height:2px;margin:0 2px;background-color:#fff;border-radius:50%;animation:_blink_1djgp_1 1.4s infinite ease-in-out both}._typing-indicator_1djgp_13 ._dot_1djgp_18:nth-child(1){animation-delay:0s}._typing-indicator_1djgp_13 ._dot_1djgp_18:nth-child(2){animation-delay:.2s}._typing-indicator_1djgp_13 ._dot_1djgp_18:nth-child(3){animation-delay:.4s}@keyframes _blink_1djgp_1{0%,80%,to{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-5px)}}._card_root_1ygom_1{width:255px;height:368px;max-height:380px;border-radius:8px;background:#333;overflow:hidden}._card_content_1ygom_10{display:flex;flex-direction:column;gap:8px;padding:12px}._card_title_1ygom_17{color:#fff;margin:0;font-size:15px}._card_description_1ygom_23{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:#8c8c8c;font-size:13px;font-weight:400;line-height:20px;text-underline-position:from-font;text-decoration-skip-ink:none;text-overflow:ellipsis}._card_actions_1ygom_37{display:flex;flex-direction:column;gap:8px}._card_actions_1ygom_37>button{width:100%;height:32px;line-height:32px;text-align:center;border:none;border-radius:4px;background:#4767eb;color:#fff;font-size:15px;cursor:pointer}._text_sbjtw_1{padding:8px 12px;border-radius:8px;color:#fff}._text--user_sbjtw_7{max-width:75%;background:#4767eb;border-top-right-radius:0}._text--bot_sbjtw_13{max-width:70%;background:#585858;border-top-left-radius:0}._content_sbjtw_19{display:flex;flex-direction:column;gap:8px}._carousel_root_sv1hc_1{width:100%;display:flex;flex-wrap:nowrap;overflow-x:scroll;gap:8px}._carousel_root_sv1hc_1>div{flex:0 0 auto}._carousel_time_sv1hc_12{justify-content:flex-end}._hint_root_g119q_1{margin:0 auto;display:flex;flex-direction:column;align-items:center;padding:4px 12px;gap:4px;border-radius:2px;background:#58585833;font-size:13px;color:#fff}._time_g119q_14{font-size:12px;color:#8c8c8c}._chatbot_footer_1uvgs_1 ._chatbot_footer__content_1uvgs_1{display:grid;align-items:flex-end;grid-template-columns:auto 24px;margin:0 auto;max-width:1200px;padding:var(--asg-spacing-3) var(--asg-spacing-4);gap:var(--asg-spacing-2)}._chatbot_textarea_1uvgs_11{font:inherit;font-size:16px;height:36px;max-height:240px;padding:8px 8px 8px 12px;background:#1f1f1f;border:1px solid rgb(67,67,67);border-radius:2px;color:#8c8c8c;resize:none;overflow:hidden}._chatbot_submit_button_1uvgs_26{font:inherit;width:24px;height:100%;max-height:38px;display:flex;justify-content:center;align-items:center;font-size:16px;border:none;background:transparent;border-radius:50%;color:#fff;cursor:pointer}._chatbot_submit_button_1uvgs_26>svg{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;width:auto;min-width:16px;height:60%;max-height:38px;min-height:16px}._chatbot_submit_button_1uvgs_26._chatbot_submit_button__disabled_1uvgs_51>svg>path{fill:#8c8c8c}._chatbot_root_od4qx_1{--asg-color-blue-1: #edf0fd;--asg-color-blue-2: #d3dbfa;--asg-color-blue-3: #b0bef6;--asg-color-blue-4: #6882ef;--asg-color-blue-5: #8b9ff2;--asg-color-blue-6: #4767eb;--asg-color-blue-7: #3c58c8;--asg-color-blue-8: #3249a7;--asg-color-blue-9: #283b86;--asg-color-blue-10: #202e6a;--asg-color-orange-1: #ffeded;--asg-color-orange-2: #ffd4d5;--asg-color-orange-3: #ffb2b3;--asg-color-orange-4: #ff8f90;--asg-color-orange-5: #ff6d6f;--asg-color-orange-6: #ff4d4f;--asg-color-orange-7: #d94143;--asg-color-orange-8: #b53738;--asg-color-orange-9: #912c2d;--asg-color-orange-10: #732324;--asg-color-green-1: #eef9e8;--asg-color-green-2: #d5f1c8;--asg-color-green-3: #b5e69d;--asg-color-green-4: #92da6f;--asg-color-green-5: #71cf43;--asg-color-green-6: #52c41a;--asg-color-green-7: #46a716;--asg-color-green-8: #3a8b12;--asg-color-green-9: #2f700f;--asg-color-green-10: #25580c;--asg-color-yellow-1: #fef7eb;--asg-color-yellow-2: #fdebcf;--asg-color-yellow-3: #fcdba9;--asg-color-yellow-4: #facb82;--asg-color-yellow-5: #f8bb5c;--asg-color-yellow-6: #f7ac38;--asg-color-yellow-7: #d29230;--asg-color-yellow-8: #af7a28;--asg-color-yellow-9: #8d6220;--asg-color-yellow-10: #6f4d19;--asg-color-grey-1: #f3f3f3;--asg-color-grey-2: #e2e2e2;--asg-color-grey-3: #cbcbcb;--asg-color-grey-4: #b2b2b2;--asg-color-grey-5: #9b9b9b;--asg-color-grey-6: #585858;--asg-color-grey-7: #717171;--asg-color-grey-8: #5e5e5e;--asg-color-grey-9: #4c4c4c;--asg-color-grey-10: #3c3c3c;--asg-color-primary: #4767eb;--asg-color-primary-light: #8b9ff2;--asg-color-primary-dark: #3249a7;--asg-color-primary-on-primary: #ffffff;--asg-color-primary-hover-bg: rgba(139, 159, 242, .15);--asg-color-primary-selected-bg: rgba(71, 103, 235, .2);--asg-color-secondary: #585858;--asg-color-secondary-light: #b2b2b2;--asg-color-secondary-dark: #4c4c4c;--asg-color-secondary-on-secondary: #ffffff;--asg-color-secondary-hover-bg: rgba(178, 178, 178, .15);--asg-color-secondary-selected-bg: rgba(88, 88, 88, .2);--asg-color-error: #ff4d4f;--asg-color-error-light: #ff6d6f;--asg-color-error-dark: #d94143;--asg-color-error-on-error: #ffffff;--asg-color-error-hover-bg: rgba(255, 109, 111, .15);--asg-color-error-selected-bg: rgba(255, 77, 79, .2);--asg-color-warning: #f7ac38;--asg-color-warning-light: #f8bb5c;--asg-color-warning-dark: #af7a28;--asg-color-warning-on-warning: #ffffff;--asg-color-warning-hover-bg: rgba(248, 187, 92, .15);--asg-color-warning-selected-bg: rgba(247, 172, 56, .2);--asg-color-success: #52c41a;--asg-color-success-light: #71cf43;--asg-color-success-dark: #3a8b12;--asg-color-success-on-success: #ffffff;--asg-color-success-hover-bg: rgba(113, 207, 67, .15);--asg-color-success-selected-bg: rgba(82, 196, 26, .2);--asg-color-action-active: #ffffff;--asg-color-action-inactive: #8c8c8c;--asg-color-action-disabled: #595959;--asg-color-action-disabled-bg: #393939;--asg-color-text-primary: #ffffff;--asg-color-text-secondary: #8c8c8c;--asg-color-text-disabled: #595959;--asg-color-bg: #141414;--asg-color-surface: #1f1f1f;--asg-color-divider: #333333;--asg-color-border: #434343;--asg-color-overlay-dark: rgba(0, 0, 0, .5);--asg-color-overlay-light: rgba(31, 31, 31, .9);--asg-radius-none: 0px;--asg-radius-xxs: 2px;--asg-radius-xs: 4px;--asg-radius-s: 6px;--asg-radius-md: 8px;--asg-radius-lg: 10px;--asg-radius-xl: 12px;--asg-radius-2xl: 16px;--asg-radius-3xl: 20px;--asg-radius-4xl: 24px;--asg-spacing-1: 4px;--asg-spacing-2: 8px;--asg-spacing-3: 12px;--asg-spacing-4: 16px;--asg-spacing-5: 24px;--asg-spacing-6: 32px;--asg-spacing-7: 40px;--asg-spacing-8: 48px;--asg-spacing-9: 64px;--asg-spacing-10: 96px;--asg-spacing-11: 160px;width:100%;height:100%;font-size:15px;display:grid;grid-template-rows:max-content auto max-content}._chatbot_root_od4qx_1 *{box-sizing:border-box}._chatbot_root__fullScreen_od4qx_126{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999}
+._chatbot_header_cqlve_1 ._chatbot_header__content_cqlve_1{margin:0 auto;max-width:1200px;padding:var(--asg-spacing-4);display:flex;justify-content:space-between}._chatbot_header__title_cqlve_9{display:flex;flex-direction:row;align-items:center;gap:var(--asg-spacing-2)}._chatbot_header__title_cqlve_9>h4{margin:0;color:#fff}._chatbot_header__extra_cqlve_20{display:flex;flex-direction:row;align-items:center;gap:var(--asg-spacing-3)}._chatbot_header__extra_cqlve_20>div{width:24px;height:24px;display:flex;justify-content:center;align-items:center}._chatbot_header__extra_cqlve_20>div>svg{width:15px;height:15px;cursor:pointer}._chatbot_header__extra_cqlve_20>div>svg:hover{opacity:.5}._chatbot_body_1f0gq_1{border-top:1px solid #434343;border-bottom:1px solid #434343;overflow-x:hidden;overflow-y:scroll}._chatbot_body_1f0gq_1 ._chatbot_body__content_1f0gq_7{margin:0 auto;display:flex;flex-direction:column;padding:16px;gap:16px;max-width:1200px}._template_box_1ozig_1{width:100%;display:flex;gap:8px}._template_box--bot_1ozig_7._template_box--horizontal_1ozig_7{flex-direction:row}._template_box--bot_1ozig_7._template_box--vertical_1ozig_10{flex-direction:column}._template_box--user_1ozig_14{flex-direction:row-reverse}._template_box_content_12ojl_1{display:flex;flex-direction:column;gap:8px}._content_12ojl_7{display:flex;flex-direction:row;gap:8px}._quick_replies_box_zoq7y_1{display:flex;flex-wrap:wrap;gap:8px}._quick_reply_zoq7y_7{font:inherit;font-size:13px;padding:4px 8px;border-radius:8px;border:1px solid #434343;background:#58585833;color:#fff;cursor:pointer}._time_rgg92_1{display:flex;align-items:flex-end;font-size:12px;color:#8c8c8c}._bot_avatar_xrs9x_1{flex:0 0 auto;width:24px;height:24px;border-radius:50%}._text_1djgp_1{padding:8px 12px;border-radius:8px;color:#fff}._text--bot_1djgp_7{max-width:70%;background:#585858;border-top-left-radius:0}._typing-indicator_1djgp_13{display:inline-flex;align-items:flex-end;justify-content:center}._typing-indicator_1djgp_13 ._dot_1djgp_18{width:2px;height:2px;margin:0 2px;background-color:#fff;border-radius:50%;animation:_blink_1djgp_1 1.4s infinite ease-in-out both}._typing-indicator_1djgp_13 ._dot_1djgp_18:nth-child(1){animation-delay:0s}._typing-indicator_1djgp_13 ._dot_1djgp_18:nth-child(2){animation-delay:.2s}._typing-indicator_1djgp_13 ._dot_1djgp_18:nth-child(3){animation-delay:.4s}@keyframes _blink_1djgp_1{0%,80%,to{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-5px)}}._card_root_1ygom_1{width:255px;height:368px;max-height:380px;border-radius:8px;background:#333;overflow:hidden}._card_content_1ygom_10{display:flex;flex-direction:column;gap:8px;padding:12px}._card_title_1ygom_17{color:#fff;margin:0;font-size:15px}._card_description_1ygom_23{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:#8c8c8c;font-size:13px;font-weight:400;line-height:20px;text-underline-position:from-font;text-decoration-skip-ink:none;text-overflow:ellipsis}._card_actions_1ygom_37{display:flex;flex-direction:column;gap:8px}._card_actions_1ygom_37>button{width:100%;height:32px;line-height:32px;text-align:center;border:none;border-radius:4px;background:#4767eb;color:#fff;font-size:15px;cursor:pointer}._text_sbjtw_1{padding:8px 12px;border-radius:8px;color:#fff}._text--user_sbjtw_7{max-width:75%;background:#4767eb;border-top-right-radius:0}._text--bot_sbjtw_13{max-width:70%;background:#585858;border-top-left-radius:0}._content_sbjtw_19{display:flex;flex-direction:column;gap:8px}._carousel_root_sv1hc_1{width:100%;display:flex;flex-wrap:nowrap;overflow-x:scroll;gap:8px}._carousel_root_sv1hc_1>div{flex:0 0 auto}._carousel_time_sv1hc_12{justify-content:flex-end}._hint_root_k5fud_1{margin:0 auto;display:flex;flex-direction:column;align-items:center;padding:4px 12px;gap:4px;border-radius:2px;background:#58585833;font-size:13px;color:#fff}._hint_root_k5fud_1._hint_root__error_k5fud_13{color:var(--asg-color-error)}._time_k5fud_17{font-size:12px;color:#8c8c8c}._chatbot_footer_1uvgs_1 ._chatbot_footer__content_1uvgs_1{display:grid;align-items:flex-end;grid-template-columns:auto 24px;margin:0 auto;max-width:1200px;padding:var(--asg-spacing-3) var(--asg-spacing-4);gap:var(--asg-spacing-2)}._chatbot_textarea_1uvgs_11{font:inherit;font-size:16px;height:36px;max-height:240px;padding:8px 8px 8px 12px;background:#1f1f1f;border:1px solid rgb(67,67,67);border-radius:2px;color:#8c8c8c;resize:none;overflow:hidden}._chatbot_submit_button_1uvgs_26{font:inherit;width:24px;height:100%;max-height:38px;display:flex;justify-content:center;align-items:center;font-size:16px;border:none;background:transparent;border-radius:50%;color:#fff;cursor:pointer}._chatbot_submit_button_1uvgs_26>svg{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;width:auto;min-width:16px;height:60%;max-height:38px;min-height:16px}._chatbot_submit_button_1uvgs_26._chatbot_submit_button__disabled_1uvgs_51>svg>path{fill:#8c8c8c}._chatbot_root_od4qx_1{--asg-color-blue-1: #edf0fd;--asg-color-blue-2: #d3dbfa;--asg-color-blue-3: #b0bef6;--asg-color-blue-4: #6882ef;--asg-color-blue-5: #8b9ff2;--asg-color-blue-6: #4767eb;--asg-color-blue-7: #3c58c8;--asg-color-blue-8: #3249a7;--asg-color-blue-9: #283b86;--asg-color-blue-10: #202e6a;--asg-color-orange-1: #ffeded;--asg-color-orange-2: #ffd4d5;--asg-color-orange-3: #ffb2b3;--asg-color-orange-4: #ff8f90;--asg-color-orange-5: #ff6d6f;--asg-color-orange-6: #ff4d4f;--asg-color-orange-7: #d94143;--asg-color-orange-8: #b53738;--asg-color-orange-9: #912c2d;--asg-color-orange-10: #732324;--asg-color-green-1: #eef9e8;--asg-color-green-2: #d5f1c8;--asg-color-green-3: #b5e69d;--asg-color-green-4: #92da6f;--asg-color-green-5: #71cf43;--asg-color-green-6: #52c41a;--asg-color-green-7: #46a716;--asg-color-green-8: #3a8b12;--asg-color-green-9: #2f700f;--asg-color-green-10: #25580c;--asg-color-yellow-1: #fef7eb;--asg-color-yellow-2: #fdebcf;--asg-color-yellow-3: #fcdba9;--asg-color-yellow-4: #facb82;--asg-color-yellow-5: #f8bb5c;--asg-color-yellow-6: #f7ac38;--asg-color-yellow-7: #d29230;--asg-color-yellow-8: #af7a28;--asg-color-yellow-9: #8d6220;--asg-color-yellow-10: #6f4d19;--asg-color-grey-1: #f3f3f3;--asg-color-grey-2: #e2e2e2;--asg-color-grey-3: #cbcbcb;--asg-color-grey-4: #b2b2b2;--asg-color-grey-5: #9b9b9b;--asg-color-grey-6: #585858;--asg-color-grey-7: #717171;--asg-color-grey-8: #5e5e5e;--asg-color-grey-9: #4c4c4c;--asg-color-grey-10: #3c3c3c;--asg-color-primary: #4767eb;--asg-color-primary-light: #8b9ff2;--asg-color-primary-dark: #3249a7;--asg-color-primary-on-primary: #ffffff;--asg-color-primary-hover-bg: rgba(139, 159, 242, .15);--asg-color-primary-selected-bg: rgba(71, 103, 235, .2);--asg-color-secondary: #585858;--asg-color-secondary-light: #b2b2b2;--asg-color-secondary-dark: #4c4c4c;--asg-color-secondary-on-secondary: #ffffff;--asg-color-secondary-hover-bg: rgba(178, 178, 178, .15);--asg-color-secondary-selected-bg: rgba(88, 88, 88, .2);--asg-color-error: #ff4d4f;--asg-color-error-light: #ff6d6f;--asg-color-error-dark: #d94143;--asg-color-error-on-error: #ffffff;--asg-color-error-hover-bg: rgba(255, 109, 111, .15);--asg-color-error-selected-bg: rgba(255, 77, 79, .2);--asg-color-warning: #f7ac38;--asg-color-warning-light: #f8bb5c;--asg-color-warning-dark: #af7a28;--asg-color-warning-on-warning: #ffffff;--asg-color-warning-hover-bg: rgba(248, 187, 92, .15);--asg-color-warning-selected-bg: rgba(247, 172, 56, .2);--asg-color-success: #52c41a;--asg-color-success-light: #71cf43;--asg-color-success-dark: #3a8b12;--asg-color-success-on-success: #ffffff;--asg-color-success-hover-bg: rgba(113, 207, 67, .15);--asg-color-success-selected-bg: rgba(82, 196, 26, .2);--asg-color-action-active: #ffffff;--asg-color-action-inactive: #8c8c8c;--asg-color-action-disabled: #595959;--asg-color-action-disabled-bg: #393939;--asg-color-text-primary: #ffffff;--asg-color-text-secondary: #8c8c8c;--asg-color-text-disabled: #595959;--asg-color-bg: #141414;--asg-color-surface: #1f1f1f;--asg-color-divider: #333333;--asg-color-border: #434343;--asg-color-overlay-dark: rgba(0, 0, 0, .5);--asg-color-overlay-light: rgba(31, 31, 31, .9);--asg-radius-none: 0px;--asg-radius-xxs: 2px;--asg-radius-xs: 4px;--asg-radius-s: 6px;--asg-radius-md: 8px;--asg-radius-lg: 10px;--asg-radius-xl: 12px;--asg-radius-2xl: 16px;--asg-radius-3xl: 20px;--asg-radius-4xl: 24px;--asg-spacing-1: 4px;--asg-spacing-2: 8px;--asg-spacing-3: 12px;--asg-spacing-4: 16px;--asg-spacing-5: 24px;--asg-spacing-6: 32px;--asg-spacing-7: 40px;--asg-spacing-8: 48px;--asg-spacing-9: 64px;--asg-spacing-10: 96px;--asg-spacing-11: 160px;width:100%;height:100%;font-size:15px;display:grid;grid-template-rows:max-content auto max-content}._chatbot_root_od4qx_1 *{box-sizing:border-box}._chatbot_root__fullScreen_od4qx_126{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asgard-js/react",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "publishConfig": {
     "access": "public"
   },