@asgard-js/react 0.0.7 → 0.0.9

package/dist/index.js

@@ -1,19 +1,19 @@
-import { jsx as s, jsxs as p } from "react/jsx-runtime";
+import { jsx as c, jsxs as m, Fragment as mt } from "react/jsx-runtime";
 import * as g from "react";
-import { createContext as nt, useMemo as C, useContext as ot, useRef as M, useEffect as w, useState as x, useCallback as b, useLayoutEffect as rt, memo as gt } from "react";
-import { AsgardServiceClient as ft, Conversation as mt, Channel as bt, MessageTemplateType as A } from "@asgard-js/core";
-function U(e) {
-  return e !== null && typeof e == "object" && !Array.isArray(e);
+import { createContext as F, useMemo as v, useContext as W, useRef as R, useEffect as C, useState as w, useCallback as b, useLayoutEffect as rt, memo as ft } from "react";
+import { AsgardServiceClient as bt, EventType as V, Conversation as pt, Channel as Ct, MessageTemplateType as O } from "@asgard-js/core";
+function X(n) {
+  return n !== null && typeof n == "object" && !Array.isArray(n);
 }
-function st(e, t) {
-  const o = { ...e };
+function st(n, t) {
+  const o = { ...n };
   if (!t) return o;
-  for (const [n, r] of Object.entries(t)) {
-    if (!U(r)) {
-      o[n] = r;
+  for (const [e, r] of Object.entries(t)) {
+    if (!X(r)) {
+      o[e] = r;
       continue;
     }
-    o[n] = st(U(o[n]) ? o[n] : {}, r);
+    o[e] = st(X(o[e]) ? o[e] : {}, r);
   }
   return o;
 }
@@ -34,213 +34,208 @@ const ct = {
     color: "var(--asg-color-text)",
     backgroundColor: "var(--asg-color-primary)"
   }
-}, it = nt(
+}, it = F(
   ct
 );
-function pt(e) {
-  const { children: t, theme: o = {} } = e, n = C(
+function vt(n) {
+  const { children: t, theme: o = {} } = n, e = v(
     () => st(ct, o),
     [o]
   );
-  return /* @__PURE__ */ s(it.Provider, { value: n, children: t });
-}
-function z() {
-  return ot(it);
-}
-function vt(e) {
-  const { config: t } = e, o = M(null);
-  return o.current || (o.current = new ft(t)), w(() => () => {
-    o.current && (o.current.close(), o.current = null);
-  }, [t]), o.current;
-}
-function Ct(e) {
-  const {
-    client: t,
-    customChannelId: o,
-    customMessageId: n,
-    initMessages: r,
-    showDebugMessage: c
-  } = e;
+  return /* @__PURE__ */ c(it.Provider, { value: e, children: t });
+}
+function L() {
+  return W(it);
+}
+function xt(n) {
+  const { config: t } = n, { onRunInit: o, onProcess: e, onMessage: r, onRunDone: s, onRunError: a } = t, i = R(null);
+  return i.current || (i.current = new bt(t)), C(() => () => {
+    i.current && (i.current.close(), i.current = null);
+  }, []), C(() => {
+    !i.current || !o || i.current.on(V.INIT, o);
+  }, [o]), C(() => {
+    !i.current || !e || i.current.on(V.PROCESS, e);
+  }, [e]), C(() => {
+    !i.current || !r || i.current.on(V.MESSAGE, r);
+  }, [r]), C(() => {
+    !i.current || !s || i.current.on(V.DONE, s);
+  }, [s]), C(() => {
+    !i.current || !a || i.current.on(V.ERROR, a);
+  }, [a]), i.current;
+}
+function wt(n) {
+  const { client: t, customChannelId: o, customMessageId: e, initMessages: r } = n;
   if (!t)
     throw new Error("Client instance is required");
   if (!o)
     throw new Error("Custom channel id is required");
-  const [i, a] = x(null), [l, d] = x(!0), [h, f] = x(!1), [u, _] = x(!1), [m, v] = x(null), E = b(async () => {
-    const L = new mt({
-      showDebugMessage: c,
+  const [s, a] = w(null), [i, u] = w(!0), [d, h] = w(!1), [_, l] = w(!1), [p, f] = w(null), x = b(async () => {
+    const k = new pt({
       messages: new Map(
         r == null ? void 0 : r.map((H) => [H.messageId, H])
       )
     });
-    f(!0), _(!0), v(L);
-    const ht = await bt.reset(
+    h(!0), l(!0), f(k);
+    const gt = await Ct.reset(
       {
         client: t,
         customChannelId: o,
-        customMessageId: n,
-        conversation: L,
+        customMessageId: e,
+        conversation: k,
         statesObserver: (H) => {
-          _(H.isConnecting), v(H.conversation);
+          l(H.isConnecting), f(H.conversation);
         }
       },
       {
         onSseCompleted() {
-          f(!1);
+          h(!1);
         },
         onSseError() {
-          f(!1);
+          h(!1);
         }
       }
     );
-    a(ht);
-  }, [
-    t,
-    o,
-    n,
-    r,
-    c
-  ]), S = b(() => {
-    a((L) => (L == null || L.close(), null)), d(!1), f(!1), _(!1), v(null);
-  }, []), W = b(
-    (L) => {
-      i == null || i.sendMessage({ text: L });
-    },
-    [i]
+    a(gt);
+  }, [t, o, e, r]), N = b(() => {
+    a((k) => (k == null || k.close(), null)), u(!1), h(!1), l(!1), f(null);
+  }, []), K = b(
+    (k) => s == null ? void 0 : s.sendMessage({ text: k }),
+    [s]
   );
-  return w(() => {
-    !i && l && E();
-  }, [i, l, E]), w(() => () => S(), [S]), C(
+  return C(() => {
+    !s && i && x();
+  }, [s, i, x]), C(() => () => N(), [N]), v(
     () => ({
-      isOpen: l,
-      isResetting: h,
-      isConnecting: u,
-      conversation: m,
-      sendMessage: W,
-      resetChannel: E,
-      closeChannel: S
+      isOpen: i,
+      isResetting: d,
+      isConnecting: _,
+      conversation: p,
+      sendMessage: K,
+      resetChannel: x,
+      closeChannel: N
     }),
     [
-      l,
-      h,
-      u,
-      m,
-      W,
-      E,
-      S
+      i,
+      d,
+      _,
+      p,
+      K,
+      x,
+      N
     ]
   );
 }
-function wt(e, t) {
-  const [o, n] = x(e);
-  return w(() => {
+function yt(n, t) {
+  const [o, e] = w(n);
+  return C(() => {
     const r = window.setTimeout(() => {
-      n(e);
+      e(n);
     }, t ?? 300);
     return () => clearTimeout(r);
-  }, [e, t]), o;
+  }, [n, t]), o;
 }
-const D = typeof window < "u" ? rt : null;
-function xt() {
+const q = typeof window < "u" ? rt : null;
+function Tt() {
   return window.visualViewport ? [window.visualViewport.width, window.visualViewport.height] : [window.innerWidth, window.innerHeight];
 }
-function yt() {
-  const [e, t] = x(), o = b(() => {
-    const n = xt();
+function Et() {
+  const [n, t] = w(), o = b(() => {
+    const e = Tt();
     t(
-      (r) => r && r[0] === n[0] && r[1] === n[1] ? r : n
+      (r) => r && r[0] === e[0] && r[1] === e[1] ? r : e
     );
   }, []);
-  return D == null || D(o, [o]), w(() => {
+  return q == null || q(o, [o]), C(() => {
     var r;
-    function n() {
+    function e() {
       o(), setTimeout(o, 1e3);
     }
-    return window.addEventListener("resize", n), window.addEventListener("orientationchange", n), (r = window.visualViewport) == null || r.addEventListener("resize", n), () => {
-      var c;
-      window.removeEventListener("resize", n), window.removeEventListener("orientationchange", n), (c = window.visualViewport) == null || c.removeEventListener("resize", n);
+    return window.addEventListener("resize", e), window.addEventListener("orientationchange", e), (r = window.visualViewport) == null || r.addEventListener("resize", e), () => {
+      var s;
+      window.removeEventListener("resize", e), window.removeEventListener("orientationchange", e), (s = window.visualViewport) == null || s.removeEventListener("resize", e);
     };
-  }, [o]), e;
+  }, [o]), n;
 }
-function K(e) {
-  return ["INPUT", "TEXTAREA"].includes(e.tagName) && !["button", "submit", "checkbox", "file", "image"].includes(
-    e.type
-  ) || e.hasAttribute("contenteditable");
+function Y(n) {
+  return ["INPUT", "TEXTAREA"].includes(n.tagName) && !["button", "submit", "checkbox", "file", "image"].includes(
+    n.type
+  ) || n.hasAttribute("contenteditable");
 }
-function Tt() {
-  const [e, t] = x(!1);
-  return w(() => {
+function Nt() {
+  const [n, t] = w(!1);
+  return C(() => {
     function o(r) {
       if (!r.target) return;
-      const c = r.target;
-      K(c) && t(!0);
+      const s = r.target;
+      Y(s) && t(!0);
     }
-    function n(r) {
+    function e(r) {
       if (!r.target) return;
-      const c = r.target;
-      K(c) && t(!1);
+      const s = r.target;
+      Y(s) && t(!1);
     }
-    return document.addEventListener("focusin", o), document.addEventListener("focusout", n), () => {
-      document.removeEventListener("focusin", o), document.removeEventListener("focusout", n);
+    return document.addEventListener("focusin", o), document.addEventListener("focusout", e), () => {
+      document.removeEventListener("focusin", o), document.removeEventListener("focusout", e);
     };
-  }, []), e;
+  }, []), n;
 }
-function Nt() {
-  w(() => {
-    function e() {
+function kt() {
+  C(() => {
+    function n() {
       window.scrollTo(0, 0);
     }
-    return window.addEventListener("scroll", e), () => {
-      window.removeEventListener("scroll", e);
+    return window.addEventListener("scroll", n), () => {
+      window.removeEventListener("scroll", n);
     };
   }, []);
 }
-function at(e) {
-  if (e.scrollHeight > e.offsetHeight)
-    return e;
-  const t = e.parentElement;
+function at(n) {
+  if (n.scrollHeight > n.offsetHeight)
+    return n;
+  const t = n.parentElement;
   if (t)
     return at(t);
 }
-function Et(e) {
-  w(() => {
-    const t = e.current;
+function St(n) {
+  C(() => {
+    const t = n.current;
     if (!t) return;
     let o;
-    function n(c) {
-      c.touches.length === 1 && (o = c.touches[0]);
+    function e(s) {
+      s.touches.length === 1 && (o = s.touches[0]);
     }
-    function r(c) {
-      if (c.touches.length !== 1 || !o) return;
-      const i = o.pageY - c.targetTouches[0].pageY, a = o.pageX - c.targetTouches[0].pageX;
-      if (Math.abs(a) > Math.abs(i)) return;
-      const l = c.target, d = at(l);
+    function r(s) {
+      if (s.touches.length !== 1 || !o) return;
+      const a = o.pageY - s.targetTouches[0].pageY, i = o.pageX - s.targetTouches[0].pageX;
+      if (Math.abs(i) > Math.abs(a)) return;
+      const u = s.target, d = at(u);
       if (!d) {
-        c.preventDefault();
+        s.preventDefault();
         return;
       }
-      const h = i < 0, f = d.scrollTop === 0;
-      if (h && f) {
-        c.preventDefault();
+      const h = a < 0, _ = d.scrollTop === 0;
+      if (h && _) {
+        s.preventDefault();
         return;
       }
-      const u = d.scrollTop === d.scrollHeight - d.clientHeight;
-      if (!h && u) {
-        c.preventDefault();
+      const l = d.scrollTop === d.scrollHeight - d.clientHeight;
+      if (!h && l) {
+        s.preventDefault();
         return;
       }
     }
-    return t.addEventListener("touchstart", n), t.addEventListener("touchmove", r), () => {
-      t.removeEventListener("touchstart", n), t.removeEventListener("touchmove", r);
+    return t.addEventListener("touchstart", e), t.addEventListener("touchmove", r), () => {
+      t.removeEventListener("touchstart", e), t.removeEventListener("touchmove", r);
     };
-  }, [e]);
+  }, [n]);
 }
-const j = typeof window < "u" ? rt : null;
-function Lt(e) {
+const D = typeof window < "u" ? rt : null;
+function Rt(n) {
   const t = b(() => {
     const o = window.innerHeight * 0.01;
-    e.current && e.current.style.setProperty("--vh", `${o}px`);
-  }, [e]);
-  j == null || j(t, [t]), w(() => {
+    n.current && n.current.style.setProperty("--vh", `${o}px`);
+  }, [n]);
+  D == null || D(t, [t]), C(() => {
     function o() {
       t(), setTimeout(t, 1e3);
     }
@@ -249,21 +244,21 @@ function Lt(e) {
     };
   }, [t]);
 }
-function kt(e) {
-  const { ref: t, onResize: o } = e;
-  w(() => {
-    const n = new ResizeObserver((r) => {
-      for (const c of r) {
-        const { width: i, height: a } = c.contentRect;
-        o(i, a);
+function Lt(n) {
+  const { ref: t, onResize: o } = n;
+  C(() => {
+    const e = new ResizeObserver((r) => {
+      for (const s of r) {
+        const { width: a, height: i } = s.contentRect;
+        o(a, i);
       }
     });
-    return t.current && n.observe(t.current), () => {
-      n.disconnect();
+    return t.current && e.observe(t.current), () => {
+      e.disconnect();
     };
   }, [t, o]);
 }
-const lt = nt({
+const lt = F({
   avatar: void 0,
   client: null,
   isOpen: !1,
@@ -273,69 +268,81 @@ const lt = nt({
   messageBoxBottomRef: { current: null },
   botTypingPlaceholder: void 0
 });
-function Mt(e) {
+function Mt(n) {
   const {
     avatar: t,
     children: o,
-    config: n,
+    config: e,
     botTypingPlaceholder: r,
-    customChannelId: c,
-    initMessages: i,
-    options: a
-  } = e, l = M(null), d = vt({ config: n }), {
-    isOpen: h,
-    isResetting: f,
-    isConnecting: u,
-    conversation: _,
-    sendMessage: m,
-    resetChannel: v,
-    closeChannel: E
-  } = Ct({
-    client: d,
-    customChannelId: c,
-    initMessages: i,
-    showDebugMessage: a == null ? void 0 : a.showDebugMessage
-  }), S = C(
+    customChannelId: s,
+    initMessages: a
+  } = n, i = R(null), u = xt({ config: e }), {
+    isOpen: d,
+    isResetting: h,
+    isConnecting: _,
+    conversation: l,
+    sendMessage: p,
+    resetChannel: f,
+    closeChannel: x
+  } = wt({
+    client: u,
+    customChannelId: s,
+    initMessages: a
+  }), N = v(
     () => ({
       avatar: t,
-      client: d,
-      isOpen: h,
-      isResetting: f,
-      isConnecting: u,
-      messages: (_ == null ? void 0 : _.messages) ?? null,
-      sendMessage: m,
-      resetChannel: v,
-      closeChannel: E,
+      client: u,
+      isOpen: d,
+      isResetting: h,
+      isConnecting: _,
+      messages: (l == null ? void 0 : l.messages) ?? null,
+      sendMessage: p,
+      resetChannel: f,
+      closeChannel: x,
       botTypingPlaceholder: r,
-      messageBoxBottomRef: l
+      messageBoxBottomRef: i
     }),
     [
       t,
+      u,
       d,
       h,
+      _,
+      l == null ? void 0 : l.messages,
+      p,
       f,
-      u,
-      _ == null ? void 0 : _.messages,
-      m,
-      v,
-      E,
+      x,
       r
     ]
   );
-  return /* @__PURE__ */ s(lt.Provider, { value: S, children: o });
-}
-function N() {
-  return ot(lt);
-}
-const St = "_chatbot_header_luxt4_1", Rt = "_chatbot_header__content_luxt4_4", zt = "_chatbot_header__title_luxt4_12", Ht = "_chatbot_header__extra_luxt4_23", Z = {
-  chatbot_header: St,
-  chatbot_header__content: Rt,
-  chatbot_header__title: zt,
-  chatbot_header__extra: Ht
-}, Vt = (e) => /* @__PURE__ */ g.createElement("svg", { width: 33, height: 32, viewBox: "0 0 33 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ g.createElement("g", { clipPath: "url(#clip0_3084_29383)" }, /* @__PURE__ */ g.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__ */ g.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__ */ g.createElement("defs", null, /* @__PURE__ */ g.createElement("clipPath", { id: "clip0_3084_29383" }, /* @__PURE__ */ g.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 Bt(e) {
-  const { avatar: t } = e;
-  return t ? /* @__PURE__ */ s(
+  return /* @__PURE__ */ c(lt.Provider, { value: N, children: o });
+}
+function T() {
+  return W(lt);
+}
+const ut = F({
+  onErrorClick: void 0,
+  errorMessageRenderer: void 0
+});
+function zt(n) {
+  const { children: t, onErrorClick: o, errorMessageRenderer: e } = n, r = v(
+    () => ({ onErrorClick: o, errorMessageRenderer: e }),
+    [e, o]
+  );
+  return /* @__PURE__ */ c(ut.Provider, { value: r, children: t });
+}
+function Ht() {
+  return W(ut);
+}
+const Vt = "_chatbot_header_luxt4_1", At = "_chatbot_header__content_luxt4_4", Ot = "_chatbot_header__title_luxt4_12", Bt = "_chatbot_header__extra_luxt4_23", P = {
+  chatbot_header: Vt,
+  chatbot_header__content: At,
+  chatbot_header__title: Ot,
+  chatbot_header__extra: Bt
+}, It = (n) => /* @__PURE__ */ g.createElement("svg", { width: 33, height: 32, viewBox: "0 0 33 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n }, /* @__PURE__ */ g.createElement("g", { clipPath: "url(#clip0_3084_29383)" }, /* @__PURE__ */ g.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__ */ g.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__ */ g.createElement("defs", null, /* @__PURE__ */ g.createElement("clipPath", { id: "clip0_3084_29383" }, /* @__PURE__ */ g.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 Pt(n) {
+  const { avatar: t } = n;
+  return t ? /* @__PURE__ */ c(
     "img",
     {
       src: t,
@@ -346,142 +353,142 @@ function Bt(e) {
         borderRadius: "50%"
       }
     }
-  ) : /* @__PURE__ */ s(Vt, {});
+  ) : /* @__PURE__ */ c(It, {});
 }
-const At = (e) => /* @__PURE__ */ g.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ g.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" })), It = (e) => /* @__PURE__ */ g.createElement("svg", { width: 15, height: 14, viewBox: "0 0 15 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ g.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 Ot(e) {
-  const { title: t, onReset: o, onClose: n } = e, { chatbot: r } = z(), { avatar: c, isResetting: i, resetChannel: a, closeChannel: l } = N(), d = C(
+const Zt = (n) => /* @__PURE__ */ g.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n }, /* @__PURE__ */ g.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" })), qt = (n) => /* @__PURE__ */ g.createElement("svg", { width: 15, height: 14, viewBox: "0 0 15 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n }, /* @__PURE__ */ g.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 Dt(n) {
+  const { title: t, onReset: o, onClose: e } = n, { chatbot: r } = L(), { avatar: s, isResetting: a, resetChannel: i, closeChannel: u } = T(), d = v(
     () => ({
       maxWidth: (r == null ? void 0 : r.contentMaxWidth) ?? "1200px",
       borderBottomColor: r == null ? void 0 : r.borderColor
     }),
     [r]
   ), h = b(
-    (u) => {
-      i || (u.stopPropagation(), o == null || o(), a == null || a());
+    (l) => {
+      a || (l.stopPropagation(), o == null || o(), i == null || i());
     },
-    [i, o, a]
-  ), f = b(
-    (u) => {
-      i || (u.stopPropagation(), n == null || n(), l == null || l());
+    [a, o, i]
+  ), _ = b(
+    (l) => {
+      a || (l.stopPropagation(), e == null || e(), u == null || u());
     },
-    [i, n, l]
+    [a, e, u]
   );
-  return /* @__PURE__ */ s("div", { className: Z.chatbot_header, children: /* @__PURE__ */ p("div", { className: Z.chatbot_header__content, style: d, children: [
-    /* @__PURE__ */ p("div", { className: Z.chatbot_header__title, children: [
-      /* @__PURE__ */ s(Bt, { avatar: c }),
-      /* @__PURE__ */ s("h4", { children: t })
+  return /* @__PURE__ */ c("div", { className: P.chatbot_header, children: /* @__PURE__ */ m("div", { className: P.chatbot_header__content, style: d, children: [
+    /* @__PURE__ */ m("div", { className: P.chatbot_header__title, children: [
+      /* @__PURE__ */ c(Pt, { avatar: s }),
+      /* @__PURE__ */ c("h4", { children: t })
     ] }),
-    /* @__PURE__ */ p("div", { className: Z.chatbot_header__extra, children: [
-      /* @__PURE__ */ s("div", { onClick: h, children: /* @__PURE__ */ s(At, {}) }),
-      /* @__PURE__ */ s("div", { onClick: f, children: /* @__PURE__ */ s(It, {}) })
+    /* @__PURE__ */ m("div", { className: P.chatbot_header__extra, children: [
+      /* @__PURE__ */ c("div", { onClick: h, children: /* @__PURE__ */ c(Zt, {}) }),
+      /* @__PURE__ */ c("div", { onClick: _, children: /* @__PURE__ */ c(qt, {}) })
     ] })
   ] }) });
 }
-const Zt = "_chatbot_body_f6sqm_1", Pt = "_chatbot_body__content_f6sqm_5", X = {
-  chatbot_body: Zt,
-  chatbot_body__content: Pt
-}, Dt = "_template_box_1ozig_1", R = {
-  template_box: Dt,
+const $t = "_chatbot_body_f6sqm_1", Ft = "_chatbot_body__content_f6sqm_5", J = {
+  chatbot_body: $t,
+  chatbot_body__content: Ft
+}, Wt = "_template_box_1ozig_1", M = {
+  template_box: Wt,
   "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 ut(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 = ut(e[t])) && (n && (n += " "), n += o);
-  } else for (o in e) e[o] && (n && (n += " "), n += o);
-  return n;
-}
-function T() {
-  for (var e, t, o = 0, n = "", r = arguments.length; o < r; o++) (e = arguments[o]) && (t = ut(e)) && (n && (n += " "), n += t);
-  return n;
-}
-function O(e) {
-  const { type: t, direction: o = "horizontal", children: n } = e, r = C(() => {
+function dt(n) {
+  var t, o, e = "";
+  if (typeof n == "string" || typeof n == "number") e += n;
+  else if (typeof n == "object") if (Array.isArray(n)) {
+    var r = n.length;
+    for (t = 0; t < r; t++) n[t] && (o = dt(n[t])) && (e && (e += " "), e += o);
+  } else for (o in n) n[o] && (e && (e += " "), e += o);
+  return e;
+}
+function E() {
+  for (var n, t, o = 0, e = "", r = arguments.length; o < r; o++) (n = arguments[o]) && (t = dt(n)) && (e && (e += " "), e += t);
+  return e;
+}
+function I(n) {
+  const { type: t, direction: o = "horizontal", children: e } = n, r = v(() => {
     switch (t) {
       case "user":
-        return T(R.template_box, R["template_box--user"]);
+        return E(M.template_box, M["template_box--user"]);
       case "bot":
       default:
-        return T(
-          R.template_box,
-          R["template_box--bot"],
-          o === "horizontal" ? R["template_box--horizontal"] : R["template_box--vertical"]
+        return E(
+          M.template_box,
+          M["template_box--bot"],
+          o === "horizontal" ? M["template_box--horizontal"] : M["template_box--vertical"]
         );
     }
   }, [o, t]);
-  return /* @__PURE__ */ s("div", { className: r, children: n });
+  return /* @__PURE__ */ c("div", { className: r, children: e });
 }
-const jt = "_template_box_content_fs2wk_1", qt = "_content_fs2wk_8", Y = {
+const jt = "_template_box_content_fs2wk_1", Ut = "_content_fs2wk_8", G = {
   template_box_content: jt,
-  content: qt
-}, $t = "_quick_replies_box_zoq7y_1", Ft = "_quick_reply_zoq7y_7", J = {
-  quick_replies_box: $t,
-  quick_reply: Ft
+  content: Ut
+}, Kt = "_quick_replies_box_zoq7y_1", Xt = "_quick_reply_zoq7y_7", Q = {
+  quick_replies_box: Kt,
+  quick_reply: Xt
 };
-function Wt(e) {
-  const { quickReplies: t } = e, { sendMessage: o, isConnecting: n } = N(), r = b(
-    (c) => {
-      o == null || o(c);
+function Yt(n) {
+  const { quickReplies: t } = n, { sendMessage: o, isConnecting: e } = T(), r = b(
+    (s) => {
+      o == null || o(s);
     },
     [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__ */ c("div", { className: Q.quick_replies_box, children: t.map((s) => /* @__PURE__ */ c(
     "button",
     {
-      className: J.quick_reply,
-      disabled: n,
-      onClick: () => r(c.text),
-      children: c.text
+      className: Q.quick_reply,
+      disabled: e,
+      onClick: () => r(s.text),
+      children: s.text
     },
-    c.text
+    s.text
   )) }) : null;
 }
-function q(e) {
-  return e.toLocaleTimeString("zh-TW", {
+function $(n) {
+  return n.toLocaleTimeString("zh-TW", {
     timeZone: "Asia/Taipei",
     hour: "2-digit",
     minute: "2-digit",
     hour12: !1
   });
 }
-const Ut = "_time_rgg92_1", Kt = {
-  time: Ut
+const Jt = "_time_rgg92_1", Gt = {
+  time: Jt
 };
-function $(e) {
-  const { time: t, className: o } = e;
-  return t ? /* @__PURE__ */ s("div", { className: T(Kt.time, o), children: q(t) }) : null;
-}
-function F(e) {
-  const { quickReplies: t, time: o, children: n } = e;
-  return /* @__PURE__ */ p("div", { className: Y.template_box_content, children: [
-    /* @__PURE__ */ p("div", { className: Y.content, children: [
-      n,
-      /* @__PURE__ */ s($, { time: o })
+function j(n) {
+  const { time: t, className: o } = n;
+  return t ? /* @__PURE__ */ c("div", { className: E(Gt.time, o), children: $(t) }) : null;
+}
+function U(n) {
+  const { quickReplies: t, time: o, children: e } = n;
+  return /* @__PURE__ */ m("div", { className: G.template_box_content, children: [
+    /* @__PURE__ */ m("div", { className: G.content, children: [
+      e,
+      /* @__PURE__ */ c(j, { time: o })
     ] }),
-    !!(t != null && t.length) && /* @__PURE__ */ s(Wt, { quickReplies: t })
+    !!(t != null && t.length) && /* @__PURE__ */ c(Yt, { quickReplies: t })
   ] });
 }
-const Xt = "_bot_avatar_xrs9x_1", Q = {
-  bot_avatar: Xt
-}, Yt = (e) => /* @__PURE__ */ g.createElement("svg", { viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ g.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__ */ g.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" })), P = gt((e) => {
-  const { avatar: t } = e;
-  return t ? /* @__PURE__ */ s("img", { src: t, alt: "Bot Avatar", className: Q.bot_avatar }) : /* @__PURE__ */ s("div", { className: Q.bot_avatar, children: /* @__PURE__ */ s(Yt, {}) });
-}), Jt = "_card_root_1ygom_1", Qt = "_card_content_1ygom_10", Gt = "_card_title_1ygom_17", te = "_card_description_1ygom_23", ee = "_card_actions_1ygom_37", V = {
-  card_root: Jt,
-  card_content: Qt,
-  card_title: Gt,
-  card_description: te,
-  card_actions: ee
+const Qt = "_bot_avatar_xrs9x_1", tt = {
+  bot_avatar: Qt
+}, te = (n) => /* @__PURE__ */ g.createElement("svg", { viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n }, /* @__PURE__ */ g.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__ */ g.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" })), Z = ft((n) => {
+  const { avatar: t } = n;
+  return t ? /* @__PURE__ */ c("img", { src: t, alt: "Bot Avatar", className: tt.bot_avatar }) : /* @__PURE__ */ c("div", { className: tt.bot_avatar, children: /* @__PURE__ */ c(te, {}) });
+}), ee = "_card_root_1ygom_1", ne = "_card_content_1ygom_10", oe = "_card_title_1ygom_17", re = "_card_description_1ygom_23", se = "_card_actions_1ygom_37", A = {
+  card_root: ee,
+  card_content: ne,
+  card_title: oe,
+  card_description: re,
+  card_actions: se
 };
-function dt(e) {
-  var i;
-  const { template: t } = e, { sendMessage: o } = N(), n = C(() => (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 = C(() => {
+function _t(n) {
+  var a;
+  const { template: t } = n, { sendMessage: o } = T(), e = v(() => (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 = v(() => {
     switch (t == null ? void 0 : t.imageAspectRatio) {
       case "square":
         return "1 / 1";
@@ -489,25 +496,25 @@ function dt(e) {
       default:
         return "1.51 / 1";
     }
-  }, [t]), c = b(
-    (a) => function() {
-      switch (a.type) {
+  }, [t]), s = b(
+    (i) => function() {
+      switch (i.type) {
         case "message":
-          o == null || o(a.text);
+          o == null || o(i.text);
           return;
         case "uri":
-          window.open(a.uri, "_blank");
+          window.open(i.uri, "_blank");
           return;
       }
     },
     [o]
   );
-  return /* @__PURE__ */ p("div", { className: V.card_root, children: [
-    (t == null ? void 0 : t.thumbnailImageUrl) && /* @__PURE__ */ s(
+  return /* @__PURE__ */ m("div", { className: A.card_root, children: [
+    (t == null ? void 0 : t.thumbnailImageUrl) && /* @__PURE__ */ c(
       "img",
       {
         alt: t == null ? void 0 : t.title,
-        src: n,
+        src: e,
         style: {
           display: "block",
           width: "100%",
@@ -517,74 +524,74 @@ function dt(e) {
         }
       }
     ),
-    /* @__PURE__ */ p("div", { className: V.card_content, children: [
-      /* @__PURE__ */ s("h5", { className: V.card_title, children: t == null ? void 0 : t.title }),
-      /* @__PURE__ */ s("div", { className: V.card_description, children: t == null ? void 0 : t.text }),
-      /* @__PURE__ */ s("div", { className: V.card_actions, children: (i = t == null ? void 0 : t.buttons) == null ? void 0 : i.map((a, l) => /* @__PURE__ */ s("button", { onClick: c(a.action), children: a.label }, l)) })
+    /* @__PURE__ */ m("div", { className: A.card_content, children: [
+      /* @__PURE__ */ c("h5", { className: A.card_title, children: t == null ? void 0 : t.title }),
+      /* @__PURE__ */ c("div", { className: A.card_description, children: t == null ? void 0 : t.text }),
+      /* @__PURE__ */ c("div", { className: A.card_actions, children: (a = t == null ? void 0 : t.buttons) == null ? void 0 : a.map((i, u) => /* @__PURE__ */ c("button", { onClick: s(i.action), children: i.label }, u)) })
     ] })
   ] });
 }
-function ne(e) {
-  const { message: t } = e, { avatar: o } = N(), n = t.message.template;
-  return /* @__PURE__ */ p(O, { type: "bot", direction: "horizontal", children: [
-    /* @__PURE__ */ s(P, { avatar: o }),
-    /* @__PURE__ */ s(
-      F,
+function ce(n) {
+  const { message: t } = n, { avatar: o } = T(), e = t.message.template;
+  return /* @__PURE__ */ m(I, { type: "bot", direction: "horizontal", children: [
+    /* @__PURE__ */ c(Z, { avatar: o }),
+    /* @__PURE__ */ c(
+      U,
       {
         time: t.time,
-        quickReplies: n == null ? void 0 : n.quickReplies,
-        children: /* @__PURE__ */ s(dt, { template: n })
+        quickReplies: e == null ? void 0 : e.quickReplies,
+        children: /* @__PURE__ */ c(_t, { template: e })
       }
     )
   ] });
 }
-const oe = "_text_5fknl_1", re = "_dot_5fknl_31", y = {
-  text: oe,
+const ie = "_text_5fknl_1", ae = "_dot_5fknl_31", y = {
+  text: ie,
   "text--user": "_text--user_5fknl_8",
   "text--bot": "_text--bot_5fknl_14",
   "typing-indicator": "_typing-indicator_5fknl_26",
-  dot: re
+  dot: ae
 };
-function G(e) {
-  var c;
-  const { message: t } = e, { avatar: o } = N(), n = z(), r = C(() => {
-    var i, a, l, d;
+function et(n) {
+  var s;
+  const { message: t } = n, { avatar: o } = T(), e = L(), r = v(() => {
+    var a, i, u, d;
     switch (t.type) {
       case "user":
         return {
-          color: (i = n == null ? void 0 : n.userMessage) == null ? void 0 : i.color,
-          backgroundColor: (a = n == null ? void 0 : n.userMessage) == null ? void 0 : a.backgroundColor
+          color: (a = e == null ? void 0 : e.userMessage) == null ? void 0 : a.color,
+          backgroundColor: (i = e == null ? void 0 : e.userMessage) == null ? void 0 : i.backgroundColor
         };
       case "bot":
         return {
-          color: (l = n == null ? void 0 : n.botMessage) == null ? void 0 : l.color,
-          backgroundColor: (d = n == null ? void 0 : n.botMessage) == null ? void 0 : d.backgroundColor
+          color: (u = e == null ? void 0 : e.botMessage) == null ? void 0 : u.color,
+          backgroundColor: (d = e == null ? void 0 : e.botMessage) == null ? void 0 : d.backgroundColor
         };
       default:
         return {};
     }
-  }, [t, n]);
-  return t.type === "error" ? null : t.type === "user" ? /* @__PURE__ */ p(O, { type: "user", direction: "horizontal", children: [
-    /* @__PURE__ */ s(
+  }, [t, e]);
+  return t.type === "error" ? null : t.type === "user" ? /* @__PURE__ */ m(I, { type: "user", direction: "horizontal", children: [
+    /* @__PURE__ */ c(
       "div",
       {
-        className: T(y.text, y["text--user"]),
+        className: E(y.text, y["text--user"]),
         style: r,
         children: t.text
       }
     ),
-    /* @__PURE__ */ s($, { time: t.time })
-  ] }) : /* @__PURE__ */ p(O, { type: "bot", direction: "horizontal", children: [
-    /* @__PURE__ */ s(P, { avatar: o }),
-    /* @__PURE__ */ s(
-      F,
+    /* @__PURE__ */ c(j, { time: t.time })
+  ] }) : /* @__PURE__ */ m(I, { type: "bot", direction: "horizontal", children: [
+    /* @__PURE__ */ c(Z, { avatar: o }),
+    /* @__PURE__ */ c(
+      U,
       {
         time: t.time,
-        quickReplies: (c = t.message.template) == null ? void 0 : c.quickReplies,
-        children: /* @__PURE__ */ s(
+        quickReplies: (s = t.message.template) == null ? void 0 : s.quickReplies,
+        children: /* @__PURE__ */ c(
           "div",
           {
-            className: T(y.text, y["text--bot"]),
+            className: E(y.text, y["text--bot"]),
             style: r,
             children: t.message.text
           }
@@ -593,343 +600,383 @@ function G(e) {
     )
   ] });
 }
-function _t(e) {
-  const { isTyping: t, typingText: o } = e, { messageBoxBottomRef: n, avatar: r } = N(), c = z(), i = M(null), a = b(() => {
-    var h;
-    (h = n.current) == null || h.scrollIntoView({ behavior: "smooth" });
-  }, [n]);
-  kt({ ref: i, onResize: a });
-  const l = wt(t, 500), d = C(
+function ht(n) {
+  const { isTyping: t, typingText: o } = n, { messageBoxBottomRef: e, avatar: r } = T(), s = L(), a = R(null), i = b(() => {
+    var _;
+    (_ = e.current) == null || _.scrollIntoView({ behavior: "smooth" });
+  }, [e]);
+  Lt({ ref: a, onResize: i });
+  const u = yt(t, 500), d = v(
     () => {
-      var h, f;
+      var _, l;
       return {
-        color: (h = c == null ? void 0 : c.botMessage) == null ? void 0 : h.color,
-        backgroundColor: (f = c == null ? void 0 : c.botMessage) == null ? void 0 : f.backgroundColor
+        color: (_ = s == null ? void 0 : s.botMessage) == null ? void 0 : _.color,
+        backgroundColor: (l = s == null ? void 0 : s.botMessage) == null ? void 0 : l.backgroundColor
       };
     },
-    [c]
+    [s]
+  ), h = v(
+    () => {
+      var _;
+      return {
+        backgroundColor: (_ = s == null ? void 0 : s.botMessage) == null ? void 0 : _.color
+      };
+    },
+    [s]
   );
-  return l ? /* @__PURE__ */ p(O, { type: "bot", direction: "horizontal", children: [
-    /* @__PURE__ */ s(P, { avatar: r }),
-    /* @__PURE__ */ s(F, { time: /* @__PURE__ */ new Date(), children: /* @__PURE__ */ s(
+  return u ? /* @__PURE__ */ m(I, { type: "bot", direction: "horizontal", children: [
+    /* @__PURE__ */ c(Z, { avatar: r }),
+    /* @__PURE__ */ c(U, { time: /* @__PURE__ */ new Date(), children: /* @__PURE__ */ c(
       "div",
       {
-        ref: i,
-        className: T(y.text, y["text--bot"]),
+        ref: a,
+        className: E(y.text, y["text--bot"]),
         style: d,
-        children: /* @__PURE__ */ p("span", { children: [
+        children: /* @__PURE__ */ m("span", { children: [
           o ?? "",
-          l && /* @__PURE__ */ p("span", { className: y["typing-indicator"], children: [
-            /* @__PURE__ */ s("div", { className: y.dot }),
-            /* @__PURE__ */ s("div", { className: y.dot }),
-            /* @__PURE__ */ s("div", { className: y.dot })
+          u && /* @__PURE__ */ m("span", { className: y["typing-indicator"], children: [
+            /* @__PURE__ */ c("div", { className: y.dot, style: h }),
+            /* @__PURE__ */ c("div", { className: y.dot, style: h }),
+            /* @__PURE__ */ c("div", { className: y.dot, style: h })
           ] })
         ] })
       }
     ) })
   ] }) : null;
 }
-function se(e) {
-  const { placeholder: t } = e, { isConnecting: o, messages: n } = N(), r = C(
-    () => Array.from((n == null ? void 0 : n.values()) ?? []).some(
-      (c) => c.type === "bot" && c.isTyping
+function le(n) {
+  const { placeholder: t } = n, { isConnecting: o, messages: e } = T(), r = v(
+    () => Array.from((e == null ? void 0 : e.values()) ?? []).some(
+      (s) => s.type === "bot" && s.isTyping
     ),
-    [n]
+    [e]
   );
-  return o && !r ? /* @__PURE__ */ s(_t, { isTyping: !0, typingText: t }) : null;
+  return o && !r ? /* @__PURE__ */ c(ht, { isTyping: !0, typingText: t }) : null;
 }
-const ce = "_carousel_root_sv1hc_1", ie = "_carousel_time_sv1hc_12", tt = {
-  carousel_root: ce,
-  carousel_time: ie
+const ue = "_carousel_root_sv1hc_1", de = "_carousel_time_sv1hc_12", nt = {
+  carousel_root: ue,
+  carousel_time: de
 };
-function ae(e) {
+function _e(n) {
   var r;
-  const { message: t } = e, { avatar: o } = N(), n = t.message.template;
-  return /* @__PURE__ */ p(O, { type: "bot", direction: "vertical", children: [
-    /* @__PURE__ */ s(P, { avatar: o }),
-    /* @__PURE__ */ s("div", { className: tt.carousel_root, children: (r = n.columns) == null ? void 0 : r.map((c, i) => /* @__PURE__ */ s(dt, { template: c }, i)) }),
-    /* @__PURE__ */ s($, { className: tt.carousel_time, time: t.time })
+  const { message: t } = n, { avatar: o } = T(), e = t.message.template;
+  return /* @__PURE__ */ m(I, { type: "bot", direction: "vertical", children: [
+    /* @__PURE__ */ c(Z, { avatar: o }),
+    /* @__PURE__ */ c("div", { className: nt.carousel_root, children: (r = e.columns) == null ? void 0 : r.map((s, a) => /* @__PURE__ */ c(_t, { template: s }, a)) }),
+    /* @__PURE__ */ c(j, { className: nt.carousel_time, time: t.time })
   ] });
 }
-const le = "_hint_root_k5fud_1", ue = "_hint_root__error_k5fud_13", de = "_time_k5fud_17", B = {
-  hint_root: le,
-  hint_root__error: ue,
-  time: de
+const he = "_hint_root_1bw94_1", ge = "_error_hint_title_1bw94_16", me = "_error_hint_message_1bw94_22", fe = "_time_1bw94_31", z = {
+  hint_root: he,
+  error_hint_title: ge,
+  error_hint_message: me,
+  time: fe
 };
-function et(e) {
-  const { message: t } = e;
+function ot(n) {
+  const { message: t } = n, { onErrorClick: o, errorMessageRenderer: e } = Ht(), r = b(() => {
+    o == null || o(t);
+  }, [t, o]);
   if (t.type === "user") return null;
   if (t.type === "error")
-    return /* @__PURE__ */ p("div", { className: T(B.hint_root, B.hint_root__error), children: [
-      /* @__PURE__ */ s("div", { className: B.time, children: q(t.time) }),
-      /* @__PURE__ */ s("span", { children: "Unexpected error" })
-    ] });
-  const o = t.message.template;
-  return o.type !== A.HINT ? null : /* @__PURE__ */ p("div", { className: B.hint_root, children: [
-    /* @__PURE__ */ s("div", { className: B.time, children: q(t.time) }),
-    o.text
+    return /* @__PURE__ */ c("div", { className: z.hint_root, children: (e == null ? void 0 : e(t)) ?? /* @__PURE__ */ m(mt, { children: [
+      /* @__PURE__ */ m("div", { className: z.error_hint_title, children: [
+        /* @__PURE__ */ c("span", { className: z.time, children: $(t.time) }),
+        /* @__PURE__ */ c("span", { children: "Unexpected error" })
+      ] }),
+      o && /* @__PURE__ */ m(
+        "div",
+        {
+          className: z.error_hint_message,
+          onClick: r,
+          children: [
+            "Click ",
+            /* @__PURE__ */ c("span", { children: "here" }),
+            " to view the report."
+          ]
+        }
+      )
+    ] }) });
+  const s = t.message.template;
+  return s.type !== O.HINT ? null : /* @__PURE__ */ m("div", { className: z.hint_root, children: [
+    /* @__PURE__ */ c("div", { className: z.time, children: $(t.time) }),
+    s.text
   ] });
 }
-function _e(e) {
+function be(n) {
   var o;
-  const { message: t } = e;
+  const { message: t } = n;
   if (t.type === "user")
-    return /* @__PURE__ */ s(G, { message: t });
+    return /* @__PURE__ */ c(et, { message: t });
   if (t.type === "error")
-    return /* @__PURE__ */ s(et, { message: t });
+    return /* @__PURE__ */ c(ot, { message: t });
   if (t.isTyping)
-    return /* @__PURE__ */ s(
-      _t,
+    return /* @__PURE__ */ c(
+      ht,
       {
         isTyping: t.isTyping,
         typingText: t.typingText
       }
     );
   switch ((o = t.message.template) == null ? void 0 : o.type) {
-    case A.TEXT:
-      return /* @__PURE__ */ s(G, { message: t });
-    case A.HINT:
-      return /* @__PURE__ */ s(et, { message: t });
-    case A.BUTTON:
-      return /* @__PURE__ */ s(ne, { message: t });
-    case A.CAROUSEL:
-      return /* @__PURE__ */ s(ae, { message: t });
+    case O.TEXT:
+      return /* @__PURE__ */ c(et, { message: t });
+    case O.HINT:
+      return /* @__PURE__ */ c(ot, { message: t });
+    case O.BUTTON:
+      return /* @__PURE__ */ c(ce, { message: t });
+    case O.CAROUSEL:
+      return /* @__PURE__ */ c(_e, { message: t });
     default:
-      return /* @__PURE__ */ s("div", {});
+      return /* @__PURE__ */ c("div", {});
   }
 }
-function he() {
-  const { chatbot: e } = z(), { messages: t, messageBoxBottomRef: o, botTypingPlaceholder: n } = N();
-  w(() => {
-    var c;
-    (c = o.current) == null || c.scrollIntoView({ behavior: "smooth" });
+function pe() {
+  const { chatbot: n } = L(), { messages: t, messageBoxBottomRef: o, botTypingPlaceholder: e } = T();
+  C(() => {
+    var s;
+    (s = o.current) == null || s.scrollIntoView({ behavior: "smooth" });
   }, [t, o]);
-  const r = C(
+  const r = v(
     () => ({
-      maxWidth: (e == null ? void 0 : e.contentMaxWidth) ?? "1200px"
+      maxWidth: (n == null ? void 0 : n.contentMaxWidth) ?? "1200px"
     }),
-    [e]
+    [n]
   );
-  return /* @__PURE__ */ s("div", { className: X.chatbot_body, children: /* @__PURE__ */ p("div", { className: X.chatbot_body__content, style: r, children: [
-    Array.from((t == null ? void 0 : t.values()) ?? []).map((c) => /* @__PURE__ */ s(
-      _e,
+  return /* @__PURE__ */ c("div", { className: J.chatbot_body, children: /* @__PURE__ */ m("div", { className: J.chatbot_body__content, style: r, children: [
+    Array.from((t == null ? void 0 : t.values()) ?? []).map((s) => /* @__PURE__ */ c(
+      be,
       {
-        message: c
+        message: s
       },
-      c.messageId
+      s.messageId
     )),
-    /* @__PURE__ */ s(
-      se,
+    /* @__PURE__ */ c(
+      le,
       {
-        placeholder: n ?? "正在輸入訊息"
+        placeholder: e ?? "正在輸入訊息"
       }
     ),
-    /* @__PURE__ */ s("div", { ref: o })
+    /* @__PURE__ */ c("div", { ref: o })
   ] }) });
 }
-const ge = "_chatbot_footer_1slg7_1", fe = "_chatbot_footer__content_1slg7_4", me = "_chatbot_textarea_1slg7_14", be = "_chatbot_submit_button_1slg7_29", pe = "_chatbot_submit_button__disabled_1slg7_54", k = {
-  chatbot_footer: ge,
-  chatbot_footer__content: fe,
-  chatbot_textarea: me,
-  chatbot_submit_button: be,
-  chatbot_submit_button__disabled: pe
-}, ve = (e) => /* @__PURE__ */ g.createElement("svg", { width: 15, height: 12, viewBox: "0 0 15 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ g.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" })), Ce = (e) => /* @__PURE__ */ g.createElement("svg", { width: 11, height: 16, viewBox: "0 0 11 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ g.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" })), we = (e) => /* @__PURE__ */ g.createElement("svg", { width: 40, height: 40, viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ g.createElement("circle", { cx: 20, cy: 20, r: 18, fill: "#D04444" }), /* @__PURE__ */ g.createElement("rect", { x: 12, y: 12, width: 16, height: 16, fill: "#FFFFFF", rx: 2, ry: 2 }));
-function xe(e) {
-  const { setValue: t, className: o } = e, [n, r] = x(!1), c = M(null);
-  w(() => {
-    const u = window.SpeechRecognition || window.webkitSpeechRecognition;
-    if (!u) return;
-    const _ = new u();
-    _.lang = "zh-TW", _.continuous = !0, _.interimResults = !0, _.onresult = (m) => {
-      for (let v = m.resultIndex; v < m.results.length; v++)
-        m.results[v].isFinal && t((E) => E + m.results[v][0].transcript);
-    }, _.onerror = (m) => {
-      alert(`語音識別錯誤: ${JSON.stringify(m.error)}`);
-    }, _.onend = () => {
+const Ce = "_chatbot_footer_1slg7_1", ve = "_chatbot_footer__content_1slg7_4", xe = "_chatbot_textarea_1slg7_14", we = "_chatbot_submit_button_1slg7_29", ye = "_chatbot_submit_button__disabled_1slg7_54", S = {
+  chatbot_footer: Ce,
+  chatbot_footer__content: ve,
+  chatbot_textarea: xe,
+  chatbot_submit_button: we,
+  chatbot_submit_button__disabled: ye
+}, Te = (n) => /* @__PURE__ */ g.createElement("svg", { width: 15, height: 12, viewBox: "0 0 15 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n }, /* @__PURE__ */ g.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" })), Ee = (n) => /* @__PURE__ */ g.createElement("svg", { width: 11, height: 16, viewBox: "0 0 11 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...n }, /* @__PURE__ */ g.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" })), Ne = (n) => /* @__PURE__ */ g.createElement("svg", { width: 40, height: 40, viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg", ...n }, /* @__PURE__ */ g.createElement("circle", { cx: 20, cy: 20, r: 18, fill: "#D04444" }), /* @__PURE__ */ g.createElement("rect", { x: 12, y: 12, width: 16, height: 16, fill: "#FFFFFF", rx: 2, ry: 2 }));
+function ke(n) {
+  const { setValue: t, className: o } = n, [e, r] = w(!1), s = R(null);
+  C(() => {
+    const l = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (!l) return;
+    const p = new l();
+    p.lang = "zh-TW", p.continuous = !0, p.interimResults = !0, p.onresult = (f) => {
+      for (let x = f.resultIndex; x < f.results.length; x++)
+        f.results[x].isFinal && t((N) => N + f.results[x][0].transcript);
+    }, p.onerror = (f) => {
+      alert(`語音識別錯誤: ${JSON.stringify(f.error)}`);
+    }, p.onend = () => {
       r(!1);
-    }, c.current = _;
+    }, s.current = p;
   }, [t]);
-  const i = b(() => {
-    if (!c.current) {
+  const a = b(() => {
+    if (!s.current) {
       alert("無法開始辨識: 語音識別器未初始化，請檢查是否有授權使用麥克風");
       return;
     }
     try {
-      c.current.start(), r(!0);
-    } catch (u) {
-      alert(`無法開始辨識: ${JSON.stringify(u)}`);
+      s.current.start(), r(!0);
+    } catch (l) {
+      alert(`無法開始辨識: ${JSON.stringify(l)}`);
     }
-  }, []), a = b(() => {
-    c.current && (c.current.stop(), r(!1));
-  }, []), l = b(
-    (u) => {
-      n || (u.preventDefault(), i());
+  }, []), i = b(() => {
+    s.current && (s.current.stop(), r(!1));
+  }, []), u = b(
+    (l) => {
+      e || (l.preventDefault(), a());
     },
-    [n, i]
+    [e, a]
   ), d = b(
-    (u) => {
-      n && (u.preventDefault(), a());
+    (l) => {
+      e && (l.preventDefault(), i());
     },
-    [n, a]
+    [e, i]
   ), h = b(
-    (u) => {
-      n || (u.preventDefault(), i());
+    (l) => {
+      e || (l.preventDefault(), a());
     },
-    [n, i]
-  ), f = b(
-    (u) => {
-      n && (u.preventDefault(), a());
+    [e, a]
+  ), _ = b(
+    (l) => {
+      e && (l.preventDefault(), i());
     },
-    [n, a]
+    [e, i]
   );
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ c(
     "div",
     {
       className: o,
-      onMouseDown: l,
+      onMouseDown: u,
       onMouseUp: d,
       onTouchStart: h,
-      onTouchEnd: f,
-      children: n ? /* @__PURE__ */ s(we, {}) : /* @__PURE__ */ s(Ce, {})
+      onTouchEnd: _,
+      children: e ? /* @__PURE__ */ c(Ne, {}) : /* @__PURE__ */ c(Ee, {})
     }
   );
 }
-function ye() {
-  const { sendMessage: e, isConnecting: t } = N(), { chatbot: o } = z(), [n, r] = x(""), [c, i] = x(!1), a = M(null), l = C(
-    () => t || !n.trim(),
-    [t, n]
-  ), d = C(
+function Se() {
+  const { sendMessage: n, isConnecting: t } = T(), { chatbot: o } = L(), [e, r] = w(""), [s, a] = w(!1), i = R(null), u = v(
+    () => t || !e.trim(),
+    [t, e]
+  ), d = v(
     () => ({
       maxWidth: (o == null ? void 0 : o.contentMaxWidth) ?? "1200px",
       borderTopColor: o == null ? void 0 : o.borderColor
     }),
     [o]
   ), h = b(
-    (_) => {
-      const m = _.target, v = m.value;
-      m.style.height = "36px", v && (m.style.height = `${m.scrollHeight}px`), r(_.target.value);
+    (p) => {
+      const f = p.target, x = f.value;
+      f.style.height = "36px", x && (f.style.height = `${f.scrollHeight}px`), r(p.target.value);
     },
     []
-  ), f = b(() => {
-    !c && !t && (e == null || e(n), r(""), a.current && (a.current.style.height = "36px"));
-  }, [c, t, e, n]), u = b(
-    (_) => {
-      if (_.key === "Enter" && !c && !t && n.trim()) {
-        e == null || e(n), r("");
-        const m = _.target;
-        m.style.height = "36px";
+  ), _ = b(() => {
+    !s && !t && (n == null || n(e), r(""), i.current && (i.current.style.height = "36px"));
+  }, [s, t, n, e]), l = b(
+    (p) => {
+      if (p.key === "Enter" && !s && !t && e.trim()) {
+        n == null || n(e), r("");
+        const f = p.target;
+        f.style.height = "36px";
       }
     },
-    [c, t, e, n]
+    [s, t, n, e]
   );
-  return /* @__PURE__ */ s("div", { className: k.chatbot_footer, children: /* @__PURE__ */ p("div", { className: k.chatbot_footer__content, style: d, children: [
-    /* @__PURE__ */ s(
+  return /* @__PURE__ */ c("div", { className: S.chatbot_footer, children: /* @__PURE__ */ m("div", { className: S.chatbot_footer__content, style: d, children: [
+    /* @__PURE__ */ c(
       "textarea",
       {
-        ref: a,
-        className: k.chatbot_textarea,
+        ref: i,
+        className: S.chatbot_textarea,
         disabled: t,
         cols: 40,
-        value: n,
+        value: e,
         placeholder: "Enter message",
         onChange: h,
-        onKeyDown: u,
-        onCompositionStart: () => i(!0),
-        onCompositionEnd: () => i(!1)
+        onKeyDown: l,
+        onCompositionStart: () => a(!0),
+        onCompositionEnd: () => a(!1)
       }
     ),
-    n ? /* @__PURE__ */ s(
+    e ? /* @__PURE__ */ c(
       "button",
       {
-        className: T(
-          k.chatbot_submit_button,
-          l && k.chatbot_submit_button__disabled
+        className: E(
+          S.chatbot_submit_button,
+          u && S.chatbot_submit_button__disabled
         ),
-        disabled: l,
-        onClick: f,
-        children: /* @__PURE__ */ s(ve, {})
+        disabled: u,
+        onClick: _,
+        children: /* @__PURE__ */ c(Te, {})
       }
-    ) : /* @__PURE__ */ s(
-      xe,
+    ) : /* @__PURE__ */ c(
+      ke,
       {
         setValue: r,
-        className: T(
-          k.chatbot_submit_button,
-          t && k.chatbot_submit_button__disabled
+        className: E(
+          S.chatbot_submit_button,
+          t && S.chatbot_submit_button__disabled
         )
       }
     )
   ] }) });
 }
-const Te = "_chatbot_root_1tnjj_1", Ne = "_full_screen_1tnjj_121", Ee = "_chatbot_container_1tnjj_129", Le = "_screen_keyboard_open_1tnjj_134", I = {
-  chatbot_root: Te,
-  full_screen: Ne,
-  chatbot_container: Ee,
-  screen_keyboard_open: Le
+const Re = "_chatbot_root_1t5cx_1", Le = "_full_screen_1t5cx_122", Me = "_chatbot_container_1t5cx_130", ze = "_screen_keyboard_open_1t5cx_135", B = {
+  chatbot_root: Re,
+  full_screen: Le,
+  chatbot_container: Me,
+  screen_keyboard_open: ze
 };
-function ke(e) {
-  const { children: t } = e, o = M(null);
-  Et(o), Nt();
-  const [, n] = yt() ?? [], r = Tt();
-  return /* @__PURE__ */ s("div", { className: I.full_screen, children: /* @__PURE__ */ s(
+function He(n) {
+  const { children: t } = n, o = R(null), e = L();
+  St(o), kt();
+  const [, r] = Et() ?? [], s = Nt(), a = v(() => {
+    var i, u;
+    return Object.assign(
+      (i = e == null ? void 0 : e.chatbot) != null && i.backgroundColor ? {
+        backgroundColor: (u = e.chatbot) == null ? void 0 : u.backgroundColor
+      } : {},
+      s ? { height: r } : {}
+    );
+  }, [r, s, e]);
+  return /* @__PURE__ */ c("div", { className: B.full_screen, children: /* @__PURE__ */ c(
     "div",
     {
       ref: o,
-      className: T(
-        I.chatbot_container,
-        r && I.screen_keyboard_open
+      className: E(
+        B.chatbot_container,
+        s && B.screen_keyboard_open
       ),
-      style: r ? { height: n } : void 0,
+      style: a,
       children: t
     }
   ) });
 }
-function Me(e) {
-  const { fullScreen: t, children: o } = e, n = M(null);
-  Lt(n);
-  const r = z();
-  return /* @__PURE__ */ s("div", { ref: n, className: I.chatbot_root, children: t ? /* @__PURE__ */ s(ke, { children: o }) : /* @__PURE__ */ s("div", { className: I.chatbot_container, style: r == null ? void 0 : r.chatbot, children: o }) });
+function Ve(n) {
+  const { fullScreen: t, children: o } = n, e = R(null);
+  Rt(e);
+  const r = L();
+  return /* @__PURE__ */ c("div", { ref: e, className: B.chatbot_root, children: t ? /* @__PURE__ */ c(He, { children: o }) : /* @__PURE__ */ c("div", { className: B.chatbot_container, style: r == null ? void 0 : r.chatbot, children: o }) });
 }
-function He(e) {
+function Ie(n) {
   const {
     title: t,
     theme: o,
-    config: n,
+    config: e,
     customChannelId: r,
-    initMessages: c,
-    debugMode: i = !1,
+    initMessages: s,
     fullScreen: a = !1,
-    avatar: l,
-    botTypingPlaceholder: d,
-    onReset: h,
-    onClose: f
-  } = e;
-  return /* @__PURE__ */ s(pt, { theme: o, children: /* @__PURE__ */ s(
+    avatar: i,
+    botTypingPlaceholder: u,
+    onReset: d,
+    onClose: h,
+    onErrorClick: _,
+    errorMessageRenderer: l
+  } = n;
+  return /* @__PURE__ */ c(vt, { theme: o, children: /* @__PURE__ */ c(
     Mt,
     {
-      avatar: l,
-      config: n,
+      avatar: i,
+      config: e,
       customChannelId: r,
-      initMessages: c,
-      botTypingPlaceholder: d,
-      options: { showDebugMessage: i },
-      children: /* @__PURE__ */ p(Me, { fullScreen: a, children: [
-        /* @__PURE__ */ s(Ot, { title: t, onReset: h, onClose: f }),
-        /* @__PURE__ */ s(he, {}),
-        /* @__PURE__ */ s(ye, {})
+      initMessages: s,
+      botTypingPlaceholder: u,
+      children: /* @__PURE__ */ m(Ve, { fullScreen: a, children: [
+        /* @__PURE__ */ c(Dt, { title: t, onReset: d, onClose: h }),
+        /* @__PURE__ */ c(
+          zt,
+          {
+            onErrorClick: _,
+            errorMessageRenderer: l,
+            children: /* @__PURE__ */ c(pe, {})
+          }
+        ),
+        /* @__PURE__ */ c(Se, {})
       ] })
     }
   ) });
 }
 export {
-  He as Chatbot,
-  vt as useAsgardServiceClient,
-  Ct as useChannel,
-  wt as useDebounce,
-  Tt as useIsOnScreenKeyboardOpen,
-  Nt as useOnScreenKeyboardScrollFix,
-  Et as usePreventOverScrolling,
-  kt as useResizeObserver,
-  Lt as useUpdateVh,
-  yt as useViewportSize
+  Ie as Chatbot,
+  xt as useAsgardServiceClient,
+  wt as useChannel,
+  yt as useDebounce,
+  Nt as useIsOnScreenKeyboardOpen,
+  kt as useOnScreenKeyboardScrollFix,
+  St as usePreventOverScrolling,
+  Lt as useResizeObserver,
+  Rt as useUpdateVh,
+  Et as useViewportSize
 };