@asgard-js/react 0.0.5 → 0.0.7

package/dist/index.js

@@ -1,36 +1,23 @@
-import { jsx as s, 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) {
-  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);
-  } 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);
-  return n;
-}
-function F(e) {
+import { jsx as s, jsxs as p } 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);
 }
-function P(e, t) {
+function st(e, t) {
   const o = { ...e };
   if (!t) return o;
   for (const [n, r] of Object.entries(t)) {
-    if (!F(r)) {
+    if (!U(r)) {
       o[n] = r;
       continue;
     }
-    o[n] = P(F(o[n]) ? o[n] : {}, r);
+    o[n] = st(U(o[n]) ? o[n] : {}, r);
   }
   return o;
 }
-const nt = {
+const ct = {
   chatbot: {
     width: "375px",
     height: "640px",
@@ -47,35 +34,26 @@ const nt = {
     color: "var(--asg-color-text)",
     backgroundColor: "var(--asg-color-primary)"
   }
-}, st = tt(
-  nt
+}, it = nt(
+  ct
 );
-function ht(e) {
-  const { children: t, fullScreen: o, theme: n = {} } = e, r = y(
-    () => P(
-      nt,
-      o ? P(n, {
-        chatbot: {
-          width: "100vw",
-          height: "100vh",
-          borderRadius: "var(--asg-radius-none)"
-        }
-      }) : n
-    ),
-    [o, n]
+function pt(e) {
+  const { children: t, theme: o = {} } = e, n = C(
+    () => st(ct, o),
+    [o]
   );
-  return /* @__PURE__ */ s(st.Provider, { value: r, children: t });
+  return /* @__PURE__ */ s(it.Provider, { value: n, children: t });
 }
-function Z() {
-  return et(st);
+function z() {
+  return ot(it);
 }
-function mt(e) {
-  const { config: t } = e, o = q(null);
-  return o.current || (o.current = new _t(t)), L(() => () => {
+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 gt(e) {
+function Ct(e) {
   const {
     client: t,
     customChannelId: o,
@@ -87,78 +65,205 @@ function gt(e) {
     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] = 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,
       messages: new Map(
-        r == null ? void 0 : r.map((T) => [T.messageId, T])
+        r == null ? void 0 : r.map((H) => [H.messageId, H])
       )
     });
-    f(!0), d(!0), p(x);
-    const $ = await dt.reset(
+    f(!0), _(!0), v(L);
+    const ht = await bt.reset(
       {
         client: t,
         customChannelId: o,
         customMessageId: n,
-        conversation: x,
-        statesObserver: (T) => {
-          d(T.isConnecting), p(T.conversation);
+        conversation: L,
+        statesObserver: (H) => {
+          _(H.isConnecting), v(H.conversation);
         }
       },
       {
         onSseCompleted() {
           f(!1);
+        },
+        onSseError() {
+          f(!1);
         }
       }
     );
-    a($);
+    a(ht);
   }, [
     t,
     o,
     n,
     r,
     c
-  ]), M = g(() => {
-    a((x) => (x == null || x.close(), null)), b(!1), f(!1), d(!1), p(null);
-  }, []), k = g(
-    (x) => {
-      i == null || i.sendMessage({ text: x });
+  ]), 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]
   );
-  return L(() => {
-    !i && _ && C();
-  }, [i, _, C]), L(() => () => M(), [M]), y(
+  return w(() => {
+    !i && l && E();
+  }, [i, l, E]), w(() => () => S(), [S]), C(
     () => ({
-      isOpen: _,
-      isResetting: v,
-      isConnecting: l,
-      conversation: h,
-      sendMessage: k,
-      resetChannel: C,
-      closeChannel: M
+      isOpen: l,
+      isResetting: h,
+      isConnecting: u,
+      conversation: m,
+      sendMessage: W,
+      resetChannel: E,
+      closeChannel: S
     }),
     [
-      _,
-      v,
       l,
       h,
-      k,
-      C,
-      M
+      u,
+      m,
+      W,
+      E,
+      S
     ]
   );
 }
-function bt(e, t) {
-  const [o, n] = N(e);
-  return L(() => {
+function wt(e, t) {
+  const [o, n] = x(e);
+  return w(() => {
     const r = window.setTimeout(() => {
       n(e);
     }, t ?? 300);
     return () => clearTimeout(r);
   }, [e, t]), o;
 }
-const rt = tt({
+const D = typeof window < "u" ? rt : null;
+function xt() {
+  return window.visualViewport ? [window.visualViewport.width, window.visualViewport.height] : [window.innerWidth, window.innerHeight];
+}
+function yt() {
+  const [e, t] = x(), o = b(() => {
+    const n = xt();
+    t(
+      (r) => r && r[0] === n[0] && r[1] === n[1] ? r : n
+    );
+  }, []);
+  return D == null || D(o, [o]), w(() => {
+    var r;
+    function n() {
+      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);
+    };
+  }, [o]), e;
+}
+function K(e) {
+  return ["INPUT", "TEXTAREA"].includes(e.tagName) && !["button", "submit", "checkbox", "file", "image"].includes(
+    e.type
+  ) || e.hasAttribute("contenteditable");
+}
+function Tt() {
+  const [e, t] = x(!1);
+  return w(() => {
+    function o(r) {
+      if (!r.target) return;
+      const c = r.target;
+      K(c) && t(!0);
+    }
+    function n(r) {
+      if (!r.target) return;
+      const c = r.target;
+      K(c) && t(!1);
+    }
+    return document.addEventListener("focusin", o), document.addEventListener("focusout", n), () => {
+      document.removeEventListener("focusin", o), document.removeEventListener("focusout", n);
+    };
+  }, []), e;
+}
+function Nt() {
+  w(() => {
+    function e() {
+      window.scrollTo(0, 0);
+    }
+    return window.addEventListener("scroll", e), () => {
+      window.removeEventListener("scroll", e);
+    };
+  }, []);
+}
+function at(e) {
+  if (e.scrollHeight > e.offsetHeight)
+    return e;
+  const t = e.parentElement;
+  if (t)
+    return at(t);
+}
+function Et(e) {
+  w(() => {
+    const t = e.current;
+    if (!t) return;
+    let o;
+    function n(c) {
+      c.touches.length === 1 && (o = c.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);
+      if (!d) {
+        c.preventDefault();
+        return;
+      }
+      const h = i < 0, f = d.scrollTop === 0;
+      if (h && f) {
+        c.preventDefault();
+        return;
+      }
+      const u = d.scrollTop === d.scrollHeight - d.clientHeight;
+      if (!h && u) {
+        c.preventDefault();
+        return;
+      }
+    }
+    return t.addEventListener("touchstart", n), t.addEventListener("touchmove", r), () => {
+      t.removeEventListener("touchstart", n), t.removeEventListener("touchmove", r);
+    };
+  }, [e]);
+}
+const j = typeof window < "u" ? rt : null;
+function Lt(e) {
+  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(() => {
+    function o() {
+      t(), setTimeout(t, 1e3);
+    }
+    return t(), window.addEventListener("resize", o), () => {
+      window.removeEventListener("resize", o);
+    };
+  }, [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);
+      }
+    });
+    return t.current && n.observe(t.current), () => {
+      n.disconnect();
+    };
+  }, [t, o]);
+}
+const lt = nt({
   avatar: void 0,
   client: null,
   isOpen: !1,
@@ -168,70 +273,67 @@ const rt = tt({
   messageBoxBottomRef: { current: null },
   botTypingPlaceholder: void 0
 });
-function ft(e) {
+function Mt(e) {
   const {
     avatar: t,
     children: o,
     config: n,
     botTypingPlaceholder: r,
     customChannelId: c,
-    customMessageId: i,
-    delayTime: a,
-    initMessages: _,
-    options: b,
-    ...v
-  } = e, f = q(null), l = mt({ config: n }), {
-    isOpen: d,
-    isResetting: h,
-    isConnecting: p,
-    conversation: C,
-    sendMessage: M,
-    resetChannel: k,
-    closeChannel: x
-  } = gt({
-    client: l,
+    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: _,
-    showDebugMessage: b == null ? void 0 : b.showDebugMessage
-  }), $ = y(
+    initMessages: i,
+    showDebugMessage: a == null ? void 0 : a.showDebugMessage
+  }), S = C(
     () => ({
       avatar: t,
-      client: l,
-      isOpen: d,
-      isResetting: h,
-      isConnecting: p,
-      messages: (C == null ? void 0 : C.messages) ?? null,
-      sendMessage: M,
-      resetChannel: k,
-      closeChannel: x,
+      client: d,
+      isOpen: h,
+      isResetting: f,
+      isConnecting: u,
+      messages: (_ == null ? void 0 : _.messages) ?? null,
+      sendMessage: m,
+      resetChannel: v,
+      closeChannel: E,
       botTypingPlaceholder: r,
-      messageBoxBottomRef: f
+      messageBoxBottomRef: l
     }),
     [
       t,
-      l,
       d,
       h,
-      p,
-      C == null ? void 0 : C.messages,
-      M,
-      k,
-      x,
+      f,
+      u,
+      _ == null ? void 0 : _.messages,
+      m,
+      v,
+      E,
       r
     ]
-  ), T = Z();
-  return /* @__PURE__ */ s(rt.Provider, { value: $, children: /* @__PURE__ */ s("div", { style: T == null ? void 0 : T.chatbot, ...v, children: o }) });
-}
-function w() {
-  return et(rt);
-}
-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) {
+  );
+  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(
     "img",
@@ -244,72 +346,86 @@ function wt(e) {
         borderRadius: "50%"
       }
     }
-  ) : /* @__PURE__ */ s(yt, {});
+  ) : /* @__PURE__ */ s(Vt, {});
 }
-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 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(
     () => ({
-      maxWidth: (r == null ? void 0 : r.contentMaxWidth) ?? "1200px"
+      maxWidth: (r == null ? void 0 : r.contentMaxWidth) ?? "1200px",
+      borderBottomColor: r == null ? void 0 : r.borderColor
     }),
     [r]
-  ), v = g(
-    (l) => {
-      i || (l.stopPropagation(), o == null || o(), a == null || a());
+  ), h = b(
+    (u) => {
+      i || (u.stopPropagation(), o == null || o(), a == null || a());
     },
     [i, o, a]
-  ), f = g(
-    (l) => {
-      i || (l.stopPropagation(), n == null || n(), _ == null || _());
+  ), f = b(
+    (u) => {
+      i || (u.stopPropagation(), n == null || n(), l == null || l());
     },
-    [i, n, _]
+    [i, n, l]
   );
-  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 }),
+  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 })
     ] }),
-    /* @__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__ */ 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, {}) })
     ] })
   ] }) });
 }
-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 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,
   "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 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(() => {
     switch (t) {
       case "user":
-        return R(E.template_box, E["template_box--user"]);
+        return T(R.template_box, R["template_box--user"]);
       case "bot":
       default:
-        return R(
-          E.template_box,
-          E["template_box--bot"],
-          o === "horizontal" ? E["template_box--horizontal"] : E["template_box--vertical"]
+        return T(
+          R.template_box,
+          R["template_box--bot"],
+          o === "horizontal" ? R["template_box--horizontal"] : R["template_box--vertical"]
         );
     }
   }, [o, t]);
   return /* @__PURE__ */ s("div", { className: r, children: n });
 }
-const Et = "_template_box_content_12ojl_1", Bt = "_content_12ojl_7", U = {
-  template_box_content: Et,
-  content: Bt
-}, kt = "_quick_replies_box_zoq7y_1", Ht = "_quick_reply_zoq7y_7", J = {
-  quick_replies_box: kt,
-  quick_reply: Ht
+const jt = "_template_box_content_fs2wk_1", qt = "_content_fs2wk_8", Y = {
+  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
 };
-function zt(e) {
-  const { quickReplies: t } = e, { sendMessage: o, isConnecting: n } = w(), r = g(
+function Wt(e) {
+  const { quickReplies: t } = e, { sendMessage: o, isConnecting: n } = N(), r = b(
     (c) => {
       o == null || o(c);
     },
@@ -326,7 +442,7 @@ function zt(e) {
     c.text
   )) }) : null;
 }
-function ct(e) {
+function q(e) {
   return e.toLocaleTimeString("zh-TW", {
     timeZone: "Asia/Taipei",
     hour: "2-digit",
@@ -334,84 +450,38 @@ function ct(e) {
     hour12: !1
   });
 }
-const Vt = "_time_rgg92_1", qt = {
-  time: Vt
+const Ut = "_time_rgg92_1", Kt = {
+  time: Ut
 };
-function D(e) {
+function $(e) {
   const { time: t, className: o } = e;
-  return t ? /* @__PURE__ */ s("div", { className: R(qt.time, o), children: ct(t) }) : null;
+  return t ? /* @__PURE__ */ s("div", { className: T(Kt.time, o), children: q(t) }) : null;
 }
-function O(e) {
+function F(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__ */ p("div", { className: Y.template_box_content, children: [
+    /* @__PURE__ */ p("div", { className: Y.content, children: [
       n,
-      /* @__PURE__ */ s(D, { time: o })
+      /* @__PURE__ */ s($, { time: o })
     ] }),
-    !!(t != null && t.length) && /* @__PURE__ */ s(zt, { quickReplies: t })
+    !!(t != null && t.length) && /* @__PURE__ */ s(Wt, { 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 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: 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,
-  "text--bot": "_text--bot_1djgp_7",
-  "typing-indicator": "_typing-indicator_1djgp_13",
-  dot: jt
-};
-function $t(e) {
-  const { children: t, onResize: o } = e, n = q(null);
-  return L(() => {
-    const r = 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();
-    };
-  }, [n, o]), /* @__PURE__ */ s("div", { ref: n, children: t });
-}
-function it(e) {
-  const { isTyping: t, typingText: o } = e, { messageBoxBottomRef: n, avatar: r } = w(), 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 })
-      ] })
-    ] }) }) })
-  ] }) : null;
-}
-function Pt(e) {
-  const { placeholder: t } = e, { isConnecting: o, messages: n } = w(), r = 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;
-}
-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
+  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
 };
-function at(e) {
+function dt(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 } = 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(() => {
     switch (t == null ? void 0 : t.imageAspectRatio) {
       case "square":
         return "1 / 1";
@@ -419,7 +489,7 @@ function at(e) {
       default:
         return "1.51 / 1";
     }
-  }, [t]), c = g(
+  }, [t]), c = b(
     (a) => function() {
       switch (a.type) {
         case "message":
@@ -432,7 +502,7 @@ function at(e) {
     },
     [o]
   );
-  return /* @__PURE__ */ m("div", { className: H.card_root, children: [
+  return /* @__PURE__ */ p("div", { className: V.card_root, children: [
     (t == null ? void 0 : t.thumbnailImageUrl) && /* @__PURE__ */ s(
       "img",
       {
@@ -447,124 +517,209 @@ function at(e) {
         }
       }
     ),
-    /* @__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__ */ 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)) })
     ] })
   ] });
 }
-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 }),
+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(
-      O,
+      F,
       {
         time: t.time,
         quickReplies: n == null ? void 0 : n.quickReplies,
-        children: /* @__PURE__ */ s(at, { template: n })
+        children: /* @__PURE__ */ s(dt, { template: n })
       }
     )
   ] });
 }
-const Kt = "_text_sbjtw_1", I = {
-  text: Kt,
-  "text--user": "_text--user_sbjtw_7",
-  "text--bot": "_text--bot_sbjtw_13"
+const oe = "_text_5fknl_1", re = "_dot_5fknl_31", y = {
+  text: oe,
+  "text--user": "_text--user_5fknl_8",
+  "text--bot": "_text--bot_5fknl_14",
+  "typing-indicator": "_typing-indicator_5fknl_26",
+  dot: re
 };
-function Q(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 }),
+function G(e) {
+  var c;
+  const { message: t } = e, { avatar: o } = N(), n = z(), r = C(() => {
+    var i, a, l, 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
+        };
+      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
+        };
+      default:
+        return {};
+    }
+  }, [t, n]);
+  return t.type === "error" ? null : t.type === "user" ? /* @__PURE__ */ p(O, { type: "user", direction: "horizontal", children: [
     /* @__PURE__ */ s(
-      O,
+      "div",
+      {
+        className: T(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,
       {
         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 })
+        quickReplies: (c = t.message.template) == null ? void 0 : c.quickReplies,
+        children: /* @__PURE__ */ s(
+          "div",
+          {
+            className: T(y.text, y["text--bot"]),
+            style: r,
+            children: t.message.text
+          }
+        )
       }
     )
   ] });
 }
-const Qt = "_carousel_root_sv1hc_1", Xt = "_carousel_time_sv1hc_12", X = {
-  carousel_root: Qt,
-  carousel_time: Xt
+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(
+    () => {
+      var h, f;
+      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
+      };
+    },
+    [c]
+  );
+  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(
+      "div",
+      {
+        ref: i,
+        className: T(y.text, y["text--bot"]),
+        style: d,
+        children: /* @__PURE__ */ p("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 })
+          ] })
+        ] })
+      }
+    ) })
+  ] }) : 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
+    ),
+    [n]
+  );
+  return o && !r ? /* @__PURE__ */ s(_t, { isTyping: !0, typingText: t }) : null;
+}
+const ce = "_carousel_root_sv1hc_1", ie = "_carousel_time_sv1hc_12", tt = {
+  carousel_root: ce,
+  carousel_time: ie
 };
-function Gt(e) {
+function ae(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 })
+  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 Yt = "_hint_root_g119q_1", te = "_time_g119q_14", G = {
-  hint_root: Yt,
-  time: te
+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
 };
-function ee(e) {
+function et(e) {
   const { message: t } = e;
   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 !== z.HINT ? null : /* @__PURE__ */ m("div", { className: G.hint_root, children: [
-    /* @__PURE__ */ s("div", { className: G.time, children: ct(t.time) }),
+  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
   ] });
 }
-function oe(e) {
+function _e(e) {
   var o;
   const { message: t } = e;
   if (t.type === "user")
-    return /* @__PURE__ */ s(Q, { message: t });
+    return /* @__PURE__ */ s(G, { message: t });
+  if (t.type === "error")
+    return /* @__PURE__ */ s(et, { message: t });
   if (t.isTyping)
     return /* @__PURE__ */ s(
-      it,
+      _t,
       {
         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 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 });
     default:
       return /* @__PURE__ */ s("div", {});
   }
 }
-function ne() {
-  const { chatbot: e } = Z(), { messages: t, messageBoxBottomRef: o, botTypingPlaceholder: n } = w();
-  L(() => {
+function he() {
+  const { chatbot: e } = z(), { messages: t, messageBoxBottomRef: o, botTypingPlaceholder: n } = N();
+  w(() => {
     var c;
     (c = o.current) == null || c.scrollIntoView({ behavior: "smooth" });
   }, [t, o]);
-  const r = y(
+  const r = C(
     () => ({
       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: [
+  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(
-      oe,
+      _e,
       {
         message: c
       },
       c.messageId
     )),
     /* @__PURE__ */ s(
-      Pt,
+      se,
       {
         placeholder: n ?? "正在輸入訊息"
       }
@@ -572,58 +727,58 @@ function ne() {
     /* @__PURE__ */ s("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 = {
-  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);
-  L(() => {
-    const l = window.SpeechRecognition || window.webkitSpeechRecognition;
-    if (!l) return;
-    const d = new l();
-    d.lang = "zh-TW", d.continuous = !0, d.interimResults = !0, d.onresult = (h) => {
-      for (let p = h.resultIndex; p < h.results.length; p++)
-        h.results[p].isFinal && t((C) => C + h.results[p][0].transcript);
-    }, d.onerror = (h) => {
-      alert(`語音識別錯誤: ${JSON.stringify(h.error)}`);
-    }, d.onend = () => {
+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 = () => {
       r(!1);
-    }, c.current = d;
+    }, c.current = _;
   }, [t]);
-  const i = g(() => {
+  const i = b(() => {
     if (!c.current) {
       alert("無法開始辨識: 語音識別器未初始化，請檢查是否有授權使用麥克風");
       return;
     }
     try {
       c.current.start(), r(!0);
-    } catch (l) {
-      alert(`無法開始辨識: ${JSON.stringify(l)}`);
+    } catch (u) {
+      alert(`無法開始辨識: ${JSON.stringify(u)}`);
     }
-  }, []), a = g(() => {
+  }, []), a = b(() => {
     c.current && (c.current.stop(), r(!1));
-  }, []), _ = g(
-    (l) => {
-      n || (l.preventDefault(), i());
+  }, []), l = b(
+    (u) => {
+      n || (u.preventDefault(), i());
     },
     [n, i]
-  ), b = g(
-    (l) => {
-      n && (l.preventDefault(), a());
+  ), d = b(
+    (u) => {
+      n && (u.preventDefault(), a());
     },
     [n, a]
-  ), v = g(
-    (l) => {
-      n || (l.preventDefault(), i());
+  ), h = b(
+    (u) => {
+      n || (u.preventDefault(), i());
     },
     [n, i]
-  ), f = g(
-    (l) => {
-      n && (l.preventDefault(), a());
+  ), f = b(
+    (u) => {
+      n && (u.preventDefault(), a());
     },
     [n, a]
   );
@@ -631,50 +786,54 @@ function de(e) {
     "div",
     {
       className: o,
-      onMouseDown: _,
-      onMouseUp: b,
-      onTouchStart: v,
+      onMouseDown: l,
+      onMouseUp: d,
+      onTouchStart: h,
       onTouchEnd: f,
-      children: n ? /* @__PURE__ */ s(ue, {}) : /* @__PURE__ */ s(_e, {})
+      children: n ? /* @__PURE__ */ s(we, {}) : /* @__PURE__ */ s(Ce, {})
     }
   );
 }
-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 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(
     () => ({
-      maxWidth: (o == null ? void 0 : o.contentMaxWidth) ?? "1200px"
+      maxWidth: (o == null ? void 0 : o.contentMaxWidth) ?? "1200px",
+      borderTopColor: o == null ? void 0 : o.borderColor
     }),
     [o]
-  ), 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 = b(
+    (_) => {
+      const m = _.target, v = m.value;
+      m.style.height = "36px", v && (m.style.height = `${m.scrollHeight}px`), r(_.target.value);
     },
     []
-  ), f = g(() => {
+  ), f = b(() => {
     !c && !t && (e == null || e(n), r(""), a.current && (a.current.style.height = "36px"));
-  }, [c, t, e, n]), l = g(
-    (d) => {
-      if (d.key === "Enter" && !c && !t) {
+  }, [c, t, e, n]), u = b(
+    (_) => {
+      if (_.key === "Enter" && !c && !t && n.trim()) {
         e == null || e(n), r("");
-        const h = d.target;
-        h.style.height = "36px";
+        const m = _.target;
+        m.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: [
+  return /* @__PURE__ */ s("div", { className: k.chatbot_footer, children: /* @__PURE__ */ p("div", { className: k.chatbot_footer__content, style: d, children: [
     /* @__PURE__ */ s(
       "textarea",
       {
         ref: a,
-        className: S.chatbot_textarea,
+        className: k.chatbot_textarea,
         disabled: t,
         cols: 40,
         value: n,
         placeholder: "Enter message",
-        onChange: v,
-        onKeyDown: l,
+        onChange: h,
+        onKeyDown: u,
         onCompositionStart: () => i(!0),
         onCompositionEnd: () => i(!1)
       }
@@ -682,31 +841,56 @@ function he() {
     n ? /* @__PURE__ */ s(
       "button",
       {
-        className: R(
-          S.chatbot_submit_button,
-          _ && S.chatbot_submit_button__disabled
+        className: T(
+          k.chatbot_submit_button,
+          l && k.chatbot_submit_button__disabled
         ),
-        disabled: _,
+        disabled: l,
         onClick: f,
-        children: /* @__PURE__ */ s(le, {})
+        children: /* @__PURE__ */ s(ve, {})
       }
     ) : /* @__PURE__ */ s(
-      de,
+      xe,
       {
         setValue: r,
-        className: R(
-          S.chatbot_submit_button,
-          t && S.chatbot_submit_button__disabled
+        className: T(
+          k.chatbot_submit_button,
+          t && k.chatbot_submit_button__disabled
         )
       }
     )
   ] }) });
 }
-const me = "_chatbot_root_od4qx_1", ge = "_chatbot_root__fullScreen_od4qx_126", Y = {
-  chatbot_root: me,
-  chatbot_root__fullScreen: ge
+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
 };
-function Ce(e) {
+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(
+    "div",
+    {
+      ref: o,
+      className: T(
+        I.chatbot_container,
+        r && I.screen_keyboard_open
+      ),
+      style: r ? { height: n } : void 0,
+      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 He(e) {
   const {
     title: t,
     theme: o,
@@ -715,35 +899,37 @@ function Ce(e) {
     initMessages: c,
     debugMode: i = !1,
     fullScreen: a = !1,
-    avatar: _,
-    botTypingPlaceholder: b,
-    onReset: v,
+    avatar: l,
+    botTypingPlaceholder: d,
+    onReset: h,
     onClose: f
   } = e;
-  return /* @__PURE__ */ s(ht, { fullScreen: a, theme: o, children: /* @__PURE__ */ m(
-    ft,
+  return /* @__PURE__ */ s(pt, { theme: o, children: /* @__PURE__ */ s(
+    Mt,
     {
-      className: R(
-        Y.chatbot_root,
-        a && Y.chatbot_root__fullScreen
-      ),
-      avatar: _,
+      avatar: l,
       config: n,
       customChannelId: r,
       initMessages: c,
-      botTypingPlaceholder: b,
+      botTypingPlaceholder: d,
       options: { showDebugMessage: i },
-      children: [
-        /* @__PURE__ */ s(Rt, { title: t, onReset: v, onClose: f }),
-        /* @__PURE__ */ s(ne, {}),
-        /* @__PURE__ */ s(he, {})
-      ]
+      children: /* @__PURE__ */ p(Me, { fullScreen: a, children: [
+        /* @__PURE__ */ s(Ot, { title: t, onReset: h, onClose: f }),
+        /* @__PURE__ */ s(he, {}),
+        /* @__PURE__ */ s(ye, {})
+      ] })
     }
   ) });
 }
 export {
-  Ce as Chatbot,
-  mt as useAsgardServiceClient,
-  gt as useChannel,
-  bt as useDebounce
+  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
 };