@asgard-js/react 0.0.3 → 0.0.5

package/dist/index.js

@@ -1,151 +1,239 @@
-import { jsx as n, jsxs as a } from "react/jsx-runtime";
-import { useRef as R, useEffect as T, useState as w, useCallback as f, useMemo as N, createContext as W, useContext as X } from "react";
-import { AsgardServiceClient as G, Conversation as J, MessageTemplateType as y } from "@asgard-js/core";
-function P(o) {
-  var t, e, s = "";
-  if (typeof o == "string" || typeof o == "number") s += o;
-  else if (typeof o == "object") if (Array.isArray(o)) {
-    var c = o.length;
-    for (t = 0; t < c; t++) o[t] && (e = P(o[t])) && (s && (s += " "), s += e);
-  } else for (e in o) o[e] && (s && (s += " "), s += e);
-  return s;
+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 u() {
-  for (var o, t, e = 0, s = "", c = arguments.length; e < c; e++) (o = arguments[e]) && (t = P(o)) && (s && (s += " "), s += t);
-  return s;
+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 Y(o) {
-  const { config: t } = o, e = R(null);
-  return e.current || (e.current = new G(t)), T(() => () => {
-    e.current && (e.current.close(), e.current = null);
-  }, [t]), e.current;
+function F(e) {
+  return e !== null && typeof e == "object" && !Array.isArray(e);
 }
-function tt(o) {
-  const { client: t, customChannelId: e, initMessages: s, options: c } = o;
+function P(e, t) {
+  const o = { ...e };
+  if (!t) return o;
+  for (const [n, r] of Object.entries(t)) {
+    if (!F(r)) {
+      o[n] = r;
+      continue;
+    }
+    o[n] = P(F(o[n]) ? o[n] : {}, r);
+  }
+  return o;
+}
+const nt = {
+  chatbot: {
+    width: "375px",
+    height: "640px",
+    backgroundColor: "var(--asg-color-bg)",
+    borderColor: "var(--asg-color-border)",
+    borderRadius: "var(--asg-radius-md)",
+    contentMaxWidth: "1200px"
+  },
+  botMessage: {
+    color: "var(--asg-color-text)",
+    backgroundColor: "var(--asg-color-secondary)"
+  },
+  userMessage: {
+    color: "var(--asg-color-text)",
+    backgroundColor: "var(--asg-color-primary)"
+  }
+}, st = tt(
+  nt
+);
+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]
+  );
+  return /* @__PURE__ */ s(st.Provider, { value: r, children: t });
+}
+function Z() {
+  return et(st);
+}
+function mt(e) {
+  const { config: t } = e, o = q(null);
+  return o.current || (o.current = new _t(t)), L(() => () => {
+    o.current && (o.current.close(), o.current = null);
+  }, [t]), o.current;
+}
+function gt(e) {
+  const {
+    client: t,
+    customChannelId: o,
+    customMessageId: n,
+    initMessages: r,
+    showDebugMessage: c
+  } = e;
   if (!t)
     throw new Error("Client instance is required");
-  if (!e)
+  if (!o)
     throw new Error("Custom channel id is required");
-  const [r, _] = w(!1), [i, l] = w(
-    new J({
+  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({
+      showDebugMessage: c,
       messages: new Map(
-        s == null ? void 0 : s.map((h) => [h.messageId, h])
-      ),
-      typingMessages: null
-    })
-  );
-  T(() => {
-    t.setChannel({
-      customChannelId: e,
-      customMessageId: ""
+        r == null ? void 0 : r.map((T) => [T.messageId, T])
+      )
     });
-  }, [t, e]);
-  const d = f(
-    (h, b) => {
-      _(!0), l((C) => {
-        const x = C.pushMessage(
-          C,
-          {
-            type: "user",
-            messageId: b ?? crypto.randomUUID(),
-            text: h,
-            time: /* @__PURE__ */ new Date()
-          }
-        );
-        return t.sendMessage(
-          {
-            customChannelId: e,
-            customMessageId: b,
-            text: h
-          },
-          {
-            onSseMessage: (z) => {
-              l(
-                (j) => x.onMessage(j, z, {
-                  showDebugMessage: c == null ? void 0 : c.showDebugMessage
-                })
-              );
-            },
-            onSseCompleted: () => {
-              _(!1);
-            }
-          }
-        ), x;
-      });
+    f(!0), d(!0), p(x);
+    const $ = await dt.reset(
+      {
+        client: t,
+        customChannelId: o,
+        customMessageId: n,
+        conversation: x,
+        statesObserver: (T) => {
+          d(T.isConnecting), p(T.conversation);
+        }
+      },
+      {
+        onSseCompleted() {
+          f(!1);
+        }
+      }
+    );
+    a($);
+  }, [
+    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 });
     },
-    [t, e, c]
+    [i]
   );
-  return N(
+  return L(() => {
+    !i && _ && C();
+  }, [i, _, C]), L(() => () => M(), [M]), y(
     () => ({
-      isConnecting: r,
-      messages: i.messages,
-      typingMessages: i.typingMessages,
-      sendMessage: d
+      isOpen: _,
+      isResetting: v,
+      isConnecting: l,
+      conversation: h,
+      sendMessage: k,
+      resetChannel: C,
+      closeChannel: M
     }),
-    [i, r, d]
+    [
+      _,
+      v,
+      l,
+      h,
+      k,
+      C,
+      M
+    ]
   );
 }
-function et(o, t) {
-  const [e, s] = w(o);
-  return T(() => {
-    const c = window.setTimeout(() => {
-      s(o);
+function bt(e, t) {
+  const [o, n] = N(e);
+  return L(() => {
+    const r = window.setTimeout(() => {
+      n(e);
     }, t ?? 300);
-    return () => clearTimeout(c);
-  }, [o, t]), e;
+    return () => clearTimeout(r);
+  }, [e, t]), o;
 }
-const L = W({
+const rt = tt({
   avatar: void 0,
   client: null,
+  isOpen: !1,
+  isResetting: !1,
   isConnecting: !1,
   messages: null,
-  typingMessages: null,
   messageBoxBottomRef: { current: null },
-  sendMessage: () => {
-  }
+  botTypingPlaceholder: void 0
 });
-function ot(o) {
+function ft(e) {
   const {
     avatar: t,
-    children: e,
-    config: s,
+    children: o,
+    config: n,
+    botTypingPlaceholder: r,
     customChannelId: c,
-    customMessageId: r,
-    delayTime: _,
-    initMessages: i,
-    options: l,
-    ...d
-  } = o, h = R(null), b = Y({ config: s }), { messages: C, typingMessages: x, sendMessage: z, isConnecting: j } = tt({
-    client: b,
+    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,
     customChannelId: c,
-    initMessages: i,
-    options: l
-  }), Q = N(
+    initMessages: _,
+    showDebugMessage: b == null ? void 0 : b.showDebugMessage
+  }), $ = y(
     () => ({
       avatar: t,
-      client: b,
-      isConnecting: j,
-      messages: C,
-      typingMessages: x,
-      sendMessage: z,
-      messageBoxBottomRef: h
+      client: l,
+      isOpen: d,
+      isResetting: h,
+      isConnecting: p,
+      messages: (C == null ? void 0 : C.messages) ?? null,
+      sendMessage: M,
+      resetChannel: k,
+      closeChannel: x,
+      botTypingPlaceholder: r,
+      messageBoxBottomRef: f
     }),
-    [t, b, j, C, z, x]
-  );
-  return /* @__PURE__ */ n(L.Provider, { value: Q, children: /* @__PURE__ */ n("div", { ...d, children: e }) });
+    [
+      t,
+      l,
+      d,
+      h,
+      p,
+      C == null ? void 0 : C.messages,
+      M,
+      k,
+      x,
+      r
+    ]
+  ), T = Z();
+  return /* @__PURE__ */ s(rt.Provider, { value: $, children: /* @__PURE__ */ s("div", { style: T == null ? void 0 : T.chatbot, ...v, children: o }) });
 }
-function m() {
-  return X(L);
+function w() {
+  return et(rt);
 }
-const nt = "_chatbot_header_1xj9n_1", st = "_chatbot_header__content_1xj9n_1", ct = "_chatbot_header__title_1xj9n_9", rt = "_chatbot_header__extra_1xj9n_20", k = {
-  chatbot_header: nt,
-  chatbot_header__content: st,
-  chatbot_header__title: ct,
-  chatbot_header__extra: rt
-};
-function at(o) {
-  const { avatar: t } = o;
-  return t ? /* @__PURE__ */ n(
+const pt = "_chatbot_header_cqlve_1", Ct = "_chatbot_header__content_cqlve_1", vt = "_chatbot_header__title_cqlve_9", xt = "_chatbot_header__extra_cqlve_20", A = {
+  chatbot_header: pt,
+  chatbot_header__content: Ct,
+  chatbot_header__title: vt,
+  chatbot_header__extra: xt
+}, yt = (e) => /* @__PURE__ */ u.createElement("svg", { width: 33, height: 32, viewBox: "0 0 33 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("g", { clipPath: "url(#clip0_3084_29383)" }, /* @__PURE__ */ u.createElement("path", { d: "M0.410645 16C0.410645 7.16344 7.57409 0 16.4106 0C25.2472 0 32.4106 7.16344 32.4106 16C32.4106 24.8366 25.2472 32 16.4106 32C7.57409 32 0.410645 24.8366 0.410645 16Z", fill: "#333333" }), /* @__PURE__ */ u.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.5788 6.33398C19.8925 6.33398 22.5788 9.02028 22.5788 12.334C22.5788 14.2211 21.7075 15.9048 20.3453 17.0047C23.6487 18.3735 26.0607 21.6974 26.4106 25.6673H24.4569C24.0206 21.6274 20.9742 18.4911 17.2591 18.3397L16.9776 18.334H16.5788H15.8437C12.0019 18.334 8.81164 21.5258 8.36437 25.6673H6.41064C6.76857 21.607 9.28344 18.2225 12.7029 16.9143C11.4036 15.8137 10.5788 14.1701 10.5788 12.334C10.5788 9.02028 13.265 6.33398 16.5788 6.33398ZM16.5788 16.334C18.7879 16.334 20.5788 14.5431 20.5788 12.334C20.5788 10.1248 18.7879 8.33398 16.5788 8.33398C14.3696 8.33398 12.5788 10.1248 12.5788 12.334C12.5788 14.5431 14.3696 16.334 16.5788 16.334Z", fill: "#8C8C8C" })), /* @__PURE__ */ u.createElement("defs", null, /* @__PURE__ */ u.createElement("clipPath", { id: "clip0_3084_29383" }, /* @__PURE__ */ u.createElement("path", { d: "M0.410645 16C0.410645 7.16344 7.57409 0 16.4106 0C25.2472 0 32.4106 7.16344 32.4106 16C32.4106 24.8366 25.2472 32 16.4106 32C7.57409 32 0.410645 24.8366 0.410645 16Z", fill: "white" }))));
+function wt(e) {
+  const { avatar: t } = e;
+  return t ? /* @__PURE__ */ s(
     "img",
     {
       src: t,
@@ -156,209 +244,174 @@ function at(o) {
         borderRadius: "50%"
       }
     }
-  ) : /* @__PURE__ */ a(
-    "svg",
-    {
-      width: "33",
-      height: "32",
-      viewBox: "0 0 33 32",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ a("g", { "clip-path": "url(#clip0_3084_29383)", children: [
-          /* @__PURE__ */ n(
-            "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__ */ n(
-            "path",
-            {
-              "fill-rule": "evenodd",
-              "clip-rule": "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__ */ n("defs", { children: /* @__PURE__ */ n("clipPath", { id: "clip0_3084_29383", children: /* @__PURE__ */ n(
-          "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"
-          }
-        ) }) })
-      ]
-    }
-  );
+  ) : /* @__PURE__ */ s(yt, {});
 }
-function it(o) {
-  const { title: t } = o, { avatar: e } = m();
-  return /* @__PURE__ */ n("div", { className: k.chatbot_header, children: /* @__PURE__ */ a("div", { className: k.chatbot_header__content, children: [
-    /* @__PURE__ */ a("div", { className: k.chatbot_header__title, children: [
-      /* @__PURE__ */ n(at, { avatar: e }),
-      /* @__PURE__ */ n("h4", { children: t })
+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(
+    () => ({
+      maxWidth: (r == null ? void 0 : r.contentMaxWidth) ?? "1200px"
+    }),
+    [r]
+  ), v = g(
+    (l) => {
+      i || (l.stopPropagation(), o == null || o(), a == null || a());
+    },
+    [i, o, a]
+  ), f = g(
+    (l) => {
+      i || (l.stopPropagation(), n == null || n(), _ == null || _());
+    },
+    [i, n, _]
+  );
+  return /* @__PURE__ */ s("div", { className: A.chatbot_header, children: /* @__PURE__ */ m("div", { className: A.chatbot_header__content, style: b, children: [
+    /* @__PURE__ */ m("div", { className: A.chatbot_header__title, children: [
+      /* @__PURE__ */ s(wt, { avatar: c }),
+      /* @__PURE__ */ s("h4", { children: t })
     ] }),
-    /* @__PURE__ */ n("div", { className: k.chatbot_header__extra })
+    /* @__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, {}) })
+    ] })
   ] }) });
 }
-const lt = "_chatbot_body_1f0gq_1", _t = "_chatbot_body__content_1f0gq_7", S = {
-  chatbot_body: lt,
-  chatbot_body__content: _t
-}, dt = "_template_box_1ozig_1", g = {
-  template_box: dt,
+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,
   "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 M(o) {
-  const { type: t, direction: e = "horizontal", children: s } = o, c = N(() => {
+function V(e) {
+  const { type: t, direction: o = "horizontal", children: n } = e, r = y(() => {
     switch (t) {
       case "user":
-        return u(g.template_box, g["template_box--user"]);
+        return R(E.template_box, E["template_box--user"]);
       case "bot":
       default:
-        return u(
-          g.template_box,
-          g["template_box--bot"],
-          e === "horizontal" ? g["template_box--horizontal"] : g["template_box--vertical"]
+        return R(
+          E.template_box,
+          E["template_box--bot"],
+          o === "horizontal" ? E["template_box--horizontal"] : E["template_box--vertical"]
         );
     }
-  }, [e, t]);
-  return /* @__PURE__ */ n("div", { className: c, children: s });
+  }, [o, t]);
+  return /* @__PURE__ */ s("div", { className: r, children: n });
 }
-const ht = "_template_box_content_12ojl_1", ut = "_content_12ojl_7", A = {
-  template_box_content: ht,
-  content: ut
-}, mt = "_quick_replies_box_zoq7y_1", bt = "_quick_reply_zoq7y_7", Z = {
-  quick_replies_box: mt,
-  quick_reply: bt
+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
 };
-function gt(o) {
-  const { quickReplies: t } = o, { sendMessage: e, isConnecting: s } = m(), c = f(
-    (r) => {
-      e(r);
+function zt(e) {
+  const { quickReplies: t } = e, { sendMessage: o, isConnecting: n } = w(), r = g(
+    (c) => {
+      o == null || o(c);
     },
-    [e]
+    [o]
   );
-  return t != null && t.length ? /* @__PURE__ */ n("div", { className: Z.quick_replies_box, children: t.map((r) => /* @__PURE__ */ n(
+  return t != null && t.length ? /* @__PURE__ */ s("div", { className: J.quick_replies_box, children: t.map((c) => /* @__PURE__ */ s(
     "button",
     {
-      className: Z.quick_reply,
-      disabled: s,
-      onClick: () => c(r.text),
-      children: r.text
+      className: J.quick_reply,
+      disabled: n,
+      onClick: () => r(c.text),
+      children: c.text
     },
-    r.text
+    c.text
   )) }) : null;
 }
-function F(o) {
-  return o.toLocaleTimeString("zh-TW", {
+function ct(e) {
+  return e.toLocaleTimeString("zh-TW", {
     timeZone: "Asia/Taipei",
     hour: "2-digit",
     minute: "2-digit",
     hour12: !1
   });
 }
-const pt = "_time_rgg92_1", ft = {
-  time: pt
+const Vt = "_time_rgg92_1", qt = {
+  time: Vt
 };
-function q(o) {
-  const { time: t, className: e } = o;
-  return t ? /* @__PURE__ */ n("div", { className: u(ft.time, e), children: F(t) }) : null;
+function D(e) {
+  const { time: t, className: o } = e;
+  return t ? /* @__PURE__ */ s("div", { className: R(qt.time, o), children: ct(t) }) : null;
 }
-function $(o) {
-  const { quickReplies: t, time: e, children: s } = o;
-  return /* @__PURE__ */ a("div", { className: A.template_box_content, children: [
-    /* @__PURE__ */ a("div", { className: A.content, children: [
-      s,
-      /* @__PURE__ */ n(q, { time: e })
+function O(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: [
+      n,
+      /* @__PURE__ */ s(D, { time: o })
     ] }),
-    !!(t != null && t.length) && /* @__PURE__ */ n(gt, { quickReplies: t })
+    !!(t != null && t.length) && /* @__PURE__ */ s(zt, { quickReplies: t })
   ] });
 }
-const Ct = "_bot_avatar_xrs9x_1", U = {
-  bot_avatar: Ct
-};
-function H() {
-  const { avatar: o } = m();
-  return o ? /* @__PURE__ */ n("img", { src: o, alt: "Bot Avatar", className: U.bot_avatar }) : /* @__PURE__ */ n("div", { className: U.bot_avatar, children: /* @__PURE__ */ a(
-    "svg",
-    {
-      style: { width: "100%", height: "100%" },
-      viewBox: "0 0 25 24",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ n(
-          "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__ */ n(
-          "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"
-          }
-        )
-      ]
-    }
-  ) });
-}
-const xt = "_text_1djgp_1", vt = "_dot_1djgp_18", yt = "_blink_1djgp_1", p = {
-  text: xt,
+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 { 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: vt,
-  blink: yt
+  dot: jt
 };
-function wt(o) {
-  const { children: t, onResize: e } = o, s = R(null);
-  return T(() => {
-    const c = new ResizeObserver((r) => {
-      for (const _ of r) {
-        const { width: i, height: l } = _.contentRect;
-        e(i, l);
+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 s.current && c.observe(s.current), () => {
-      c.disconnect();
+    return n.current && r.observe(n.current), () => {
+      r.disconnect();
     };
-  }, [s, e]), /* @__PURE__ */ n("div", { ref: s, children: t });
+  }, [n, o]), /* @__PURE__ */ s("div", { ref: n, children: t });
 }
-function Nt(o) {
-  const { typingMessage: t } = o, { messageBoxBottomRef: e } = m(), s = f(() => {
-    var r;
-    (r = e.current) == null || r.scrollIntoView({ behavior: "smooth" });
-  }, [e]), c = et(t == null ? void 0 : t.isTyping, 500);
-  return c ? /* @__PURE__ */ a(M, { type: "bot", direction: "horizontal", children: [
-    /* @__PURE__ */ n(H, {}),
-    /* @__PURE__ */ n($, { time: /* @__PURE__ */ new Date(), children: /* @__PURE__ */ n("div", { className: u(p.text, p["text--bot"]), children: /* @__PURE__ */ a(wt, { onResize: s, children: [
-      /* @__PURE__ */ n("span", { children: (t == null ? void 0 : t.typingText) ?? "" }),
-      c && /* @__PURE__ */ a("span", { className: p["typing-indicator"], children: [
-        /* @__PURE__ */ n("div", { className: p.dot }),
-        /* @__PURE__ */ n("div", { className: p.dot }),
-        /* @__PURE__ */ n("div", { className: p.dot })
+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;
 }
-const Mt = "_card_root_1ygom_1", Tt = "_card_content_1ygom_10", zt = "_card_title_1ygom_17", jt = "_card_description_1ygom_23", kt = "_card_actions_1ygom_37", v = {
-  card_root: Mt,
-  card_content: Tt,
-  card_title: zt,
-  card_description: jt,
-  card_actions: kt
+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
 };
-function K(o) {
-  var _;
-  const { template: t } = o, { sendMessage: e } = m(), s = N(() => (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]), c = N(() => {
+function at(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(() => {
     switch (t == null ? void 0 : t.imageAspectRatio) {
       case "square":
         return "1 / 1";
@@ -366,215 +419,331 @@ function K(o) {
       default:
         return "1.51 / 1";
     }
-  }, [t]), r = f(
-    (i) => function() {
-      switch (i.type) {
+  }, [t]), c = g(
+    (a) => function() {
+      switch (a.type) {
         case "message":
-          e(i.text);
+          o == null || o(a.text);
           return;
         case "uri":
-          window.open(i.uri, "_blank");
+          window.open(a.uri, "_blank");
           return;
       }
     },
-    [e]
+    [o]
   );
-  return /* @__PURE__ */ a("div", { className: v.card_root, children: [
-    (t == null ? void 0 : t.thumbnailImageUrl) && /* @__PURE__ */ n(
+  return /* @__PURE__ */ m("div", { className: H.card_root, children: [
+    (t == null ? void 0 : t.thumbnailImageUrl) && /* @__PURE__ */ s(
       "img",
       {
         alt: t == null ? void 0 : t.title,
-        src: s,
+        src: n,
         style: {
           display: "block",
           width: "100%",
+          maxHeight: "170px",
           objectFit: t == null ? void 0 : t.imageSize,
-          aspectRatio: c
+          aspectRatio: r
         }
       }
     ),
-    /* @__PURE__ */ a("div", { className: v.card_content, children: [
-      /* @__PURE__ */ n("h5", { className: v.card_title, children: t == null ? void 0 : t.title }),
-      /* @__PURE__ */ n("div", { className: v.card_description, children: t == null ? void 0 : t.text }),
-      /* @__PURE__ */ n("div", { className: v.card_actions, children: (_ = t == null ? void 0 : t.buttons) == null ? void 0 : _.map((i, l) => /* @__PURE__ */ n("button", { onClick: r(i.action), children: i.label }, l)) })
+    /* @__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 }, _)) })
     ] })
   ] });
 }
-function Bt(o) {
-  const { conversationMessage: t } = o, e = t.message.template;
-  return /* @__PURE__ */ a(M, { type: "bot", direction: "horizontal", children: [
-    /* @__PURE__ */ n(H, {}),
-    /* @__PURE__ */ n(
-      $,
+function Jt(e) {
+  const { message: t } = e, { avatar: o } = w(), n = t.message.template;
+  return /* @__PURE__ */ m(V, { type: "bot", direction: "horizontal", children: [
+    /* @__PURE__ */ s(j, { avatar: o }),
+    /* @__PURE__ */ s(
+      O,
       {
         time: t.time,
-        quickReplies: e == null ? void 0 : e.quickReplies,
-        children: /* @__PURE__ */ n(K, { template: e })
+        quickReplies: n == null ? void 0 : n.quickReplies,
+        children: /* @__PURE__ */ s(at, { template: n })
       }
     )
   ] });
 }
-const Ht = "_text_sbjtw_1", It = "_content_sbjtw_19", B = {
-  text: Ht,
+const Kt = "_text_sbjtw_1", I = {
+  text: Kt,
   "text--user": "_text--user_sbjtw_7",
-  "text--bot": "_text--bot_sbjtw_13",
-  content: It
+  "text--bot": "_text--bot_sbjtw_13"
 };
-function D(o) {
-  var e;
-  const { conversationMessage: t } = o;
-  return t.type === "user" ? /* @__PURE__ */ a(M, { type: "user", direction: "horizontal", children: [
-    /* @__PURE__ */ n("div", { className: u(B.text, B["text--user"]), children: t.text }),
-    /* @__PURE__ */ n(q, { time: t.time })
-  ] }) : /* @__PURE__ */ a(M, { type: "bot", direction: "horizontal", children: [
-    /* @__PURE__ */ n(H, {}),
-    /* @__PURE__ */ n(
-      $,
+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 }),
+    /* @__PURE__ */ s(
+      O,
       {
         time: t.time,
-        quickReplies: (e = t.message.template) == null ? void 0 : e.quickReplies,
-        children: /* @__PURE__ */ n("div", { className: u(B.text, B["text--bot"]), children: t.message.text })
+        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 })
       }
     )
   ] });
 }
-const Rt = "_carousel_root_sv1hc_1", qt = "_carousel_time_sv1hc_12", V = {
-  carousel_root: Rt,
-  carousel_time: qt
+const Qt = "_carousel_root_sv1hc_1", Xt = "_carousel_time_sv1hc_12", X = {
+  carousel_root: Qt,
+  carousel_time: Xt
 };
-function $t(o) {
-  var s;
-  const { conversationMessage: t } = o, e = t.message.template;
-  return /* @__PURE__ */ a(M, { type: "bot", direction: "vertical", children: [
-    /* @__PURE__ */ n(H, {}),
-    /* @__PURE__ */ n("div", { className: V.carousel_root, children: (s = e.columns) == null ? void 0 : s.map((c, r) => /* @__PURE__ */ n(K, { template: c }, r)) }),
-    /* @__PURE__ */ n(q, { className: V.carousel_time, time: t.time })
+function Gt(e) {
+  var r;
+  const { message: t } = e, { avatar: o } = w(), n = t.message.template;
+  return /* @__PURE__ */ m(V, { type: "bot", direction: "vertical", children: [
+    /* @__PURE__ */ s(j, { avatar: o }),
+    /* @__PURE__ */ s("div", { className: X.carousel_root, children: (r = n.columns) == null ? void 0 : r.map((c, i) => /* @__PURE__ */ s(at, { template: c }, i)) }),
+    /* @__PURE__ */ s(D, { className: X.carousel_time, time: t.time })
   ] });
 }
-const St = "_hint_root_g119q_1", At = "_time_g119q_14", E = {
-  hint_root: St,
-  time: At
+const Yt = "_hint_root_g119q_1", te = "_time_g119q_14", G = {
+  hint_root: Yt,
+  time: te
 };
-function Zt(o) {
-  const { conversationMessage: t } = o;
+function ee(e) {
+  const { message: t } = e;
   if (t.type === "user") return null;
-  const e = t.message.template;
-  return e.type !== y.HINT ? null : /* @__PURE__ */ a("div", { className: E.hint_root, children: [
-    /* @__PURE__ */ n("div", { className: E.time, children: F(t.time) }),
-    e.text
+  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) }),
+    o.text
   ] });
 }
-function Ut(o) {
-  const { conversationMessage: t } = o;
+function oe(e) {
+  var o;
+  const { message: t } = e;
   if (t.type === "user")
-    return /* @__PURE__ */ n(D, { conversationMessage: t });
-  const e = t.message.template;
-  switch (e == null ? void 0 : e.type) {
-    case y.TEXT:
-      return /* @__PURE__ */ n(D, { conversationMessage: t });
-    case y.HINT:
-      return /* @__PURE__ */ n(Zt, { conversationMessage: t });
-    case y.BUTTON:
-      return /* @__PURE__ */ n(Bt, { conversationMessage: t });
-    case y.CAROUSEL:
-      return /* @__PURE__ */ n($t, { conversationMessage: t });
+    return /* @__PURE__ */ s(Q, { message: t });
+  if (t.isTyping)
+    return /* @__PURE__ */ s(
+      it,
+      {
+        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 });
     default:
-      return /* @__PURE__ */ n("div", { children: "Unknown template" });
+      return /* @__PURE__ */ s("div", {});
   }
 }
-function Dt() {
-  const { messages: o, typingMessages: t, messageBoxBottomRef: e } = m();
-  return T(() => {
-    var s;
-    (s = e.current) == null || s.scrollIntoView({ behavior: "smooth" });
-  }, [o, e]), /* @__PURE__ */ n("div", { className: S.chatbot_body, children: /* @__PURE__ */ a("div", { className: S.chatbot_body__content, children: [
-    Array.from((o == null ? void 0 : o.values()) ?? []).map((s) => /* @__PURE__ */ n(
-      Ut,
+function ne() {
+  const { chatbot: e } = Z(), { messages: t, messageBoxBottomRef: o, botTypingPlaceholder: n } = w();
+  L(() => {
+    var c;
+    (c = o.current) == null || c.scrollIntoView({ behavior: "smooth" });
+  }, [t, o]);
+  const r = y(
+    () => ({
+      maxWidth: (e == null ? void 0 : e.contentMaxWidth) ?? "1200px"
+    }),
+    [e]
+  );
+  return /* @__PURE__ */ s("div", { className: W.chatbot_body, children: /* @__PURE__ */ m("div", { className: W.chatbot_body__content, style: r, children: [
+    Array.from((t == null ? void 0 : t.values()) ?? []).map((c) => /* @__PURE__ */ s(
+      oe,
       {
-        conversationMessage: s
+        message: c
       },
-      crypto.randomUUID()
+      c.messageId
     )),
-    Array.from((t == null ? void 0 : t.values()) ?? []).map((s) => /* @__PURE__ */ n(
-      Nt,
+    /* @__PURE__ */ s(
+      Pt,
       {
-        typingMessage: s
-      },
-      crypto.randomUUID()
-    )),
-    /* @__PURE__ */ n("div", { ref: e })
+        placeholder: n ?? "正在輸入訊息"
+      }
+    ),
+    /* @__PURE__ */ s("div", { ref: o })
   ] }) });
 }
-const Vt = "_chatbot_footer_3box0_1", Et = "_chatbot_footer__content_3box0_1", Ot = "_chatbot_textarea_3box0_8", I = {
-  chatbot_footer: Vt,
-  chatbot_footer__content: Et,
-  chatbot_textarea: Ot
-};
-function Pt() {
-  const { sendMessage: o, isConnecting: t } = m(), [e, s] = w(""), [c, r] = w(!1), _ = f(
+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 = () => {
+      r(!1);
+    }, c.current = d;
+  }, [t]);
+  const i = g(() => {
+    if (!c.current) {
+      alert("無法開始辨識: 語音識別器未初始化，請檢查是否有授權使用麥克風");
+      return;
+    }
+    try {
+      c.current.start(), r(!0);
+    } catch (l) {
+      alert(`無法開始辨識: ${JSON.stringify(l)}`);
+    }
+  }, []), a = g(() => {
+    c.current && (c.current.stop(), r(!1));
+  }, []), _ = g(
     (l) => {
-      const d = l.target, h = d.value;
-      d.style.height = "20px", h && (d.style.height = `${d.scrollHeight - 16}px`), s(l.target.value);
+      n || (l.preventDefault(), i());
     },
-    []
-  ), i = f(
+    [n, i]
+  ), b = g(
+    (l) => {
+      n && (l.preventDefault(), a());
+    },
+    [n, a]
+  ), v = g(
+    (l) => {
+      n || (l.preventDefault(), i());
+    },
+    [n, i]
+  ), f = g(
     (l) => {
-      l.key === "Enter" && !c && !t && (o(e), s(""));
+      n && (l.preventDefault(), a());
     },
-    [c, t, o, e]
+    [n, a]
   );
-  return /* @__PURE__ */ n("div", { className: I.chatbot_footer, children: /* @__PURE__ */ n("div", { className: I.chatbot_footer__content, children: /* @__PURE__ */ n(
-    "textarea",
+  return /* @__PURE__ */ s(
+    "div",
     {
-      className: I.chatbot_textarea,
-      disabled: t,
-      cols: 40,
-      value: e,
-      placeholder: "Enter message",
-      onChange: _,
-      onKeyDown: i,
-      onCompositionStart: () => r(!0),
-      onCompositionEnd: () => r(!1)
+      className: o,
+      onMouseDown: _,
+      onMouseUp: b,
+      onTouchStart: v,
+      onTouchEnd: f,
+      children: n ? /* @__PURE__ */ s(ue, {}) : /* @__PURE__ */ s(_e, {})
     }
-  ) }) });
+  );
+}
+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(
+    () => ({
+      maxWidth: (o == null ? void 0 : o.contentMaxWidth) ?? "1200px"
+    }),
+    [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);
+    },
+    []
+  ), f = g(() => {
+    !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) {
+        e == null || e(n), r("");
+        const h = d.target;
+        h.style.height = "36px";
+      }
+    },
+    [c, t, e, n]
+  );
+  return /* @__PURE__ */ s("div", { className: S.chatbot_footer, children: /* @__PURE__ */ m("div", { className: S.chatbot_footer__content, style: b, children: [
+    /* @__PURE__ */ s(
+      "textarea",
+      {
+        ref: a,
+        className: S.chatbot_textarea,
+        disabled: t,
+        cols: 40,
+        value: n,
+        placeholder: "Enter message",
+        onChange: v,
+        onKeyDown: l,
+        onCompositionStart: () => i(!0),
+        onCompositionEnd: () => i(!1)
+      }
+    ),
+    n ? /* @__PURE__ */ s(
+      "button",
+      {
+        className: R(
+          S.chatbot_submit_button,
+          _ && S.chatbot_submit_button__disabled
+        ),
+        disabled: _,
+        onClick: f,
+        children: /* @__PURE__ */ s(le, {})
+      }
+    ) : /* @__PURE__ */ s(
+      de,
+      {
+        setValue: r,
+        className: R(
+          S.chatbot_submit_button,
+          t && S.chatbot_submit_button__disabled
+        )
+      }
+    )
+  ] }) });
 }
-const Lt = "_chatbot_root_1jllh_1", Ft = "_chatbot_root__fullScreen_1jllh_12", O = {
-  chatbot_root: Lt,
-  chatbot_root__fullScreen: Ft
+const me = "_chatbot_root_od4qx_1", ge = "_chatbot_root__fullScreen_od4qx_126", Y = {
+  chatbot_root: me,
+  chatbot_root__fullScreen: ge
 };
-function Xt(o) {
+function Ce(e) {
   const {
     title: t,
-    config: e,
-    customChannelId: s,
+    theme: o,
+    config: n,
+    customChannelId: r,
     initMessages: c,
-    fullScreen: r = !1,
+    debugMode: i = !1,
+    fullScreen: a = !1,
     avatar: _,
-    options: i
-  } = o;
-  return /* @__PURE__ */ a(
-    ot,
+    botTypingPlaceholder: b,
+    onReset: v,
+    onClose: f
+  } = e;
+  return /* @__PURE__ */ s(ht, { fullScreen: a, theme: o, children: /* @__PURE__ */ m(
+    ft,
     {
-      className: u(
-        O.chatbot_root,
-        r && O.chatbot_root__fullScreen
+      className: R(
+        Y.chatbot_root,
+        a && Y.chatbot_root__fullScreen
       ),
       avatar: _,
-      config: e,
-      customChannelId: s,
+      config: n,
+      customChannelId: r,
       initMessages: c,
-      options: i,
+      botTypingPlaceholder: b,
+      options: { showDebugMessage: i },
       children: [
-        /* @__PURE__ */ n(it, { title: t }),
-        /* @__PURE__ */ n(Dt, {}),
-        /* @__PURE__ */ n(Pt, {})
+        /* @__PURE__ */ s(Rt, { title: t, onReset: v, onClose: f }),
+        /* @__PURE__ */ s(ne, {}),
+        /* @__PURE__ */ s(he, {})
       ]
     }
-  );
+  ) });
 }
 export {
-  Xt as Chatbot,
-  Y as useAsgardServiceClient,
-  tt as useChannel,
-  et as useDebounce
+  Ce as Chatbot,
+  mt as useAsgardServiceClient,
+  gt as useChannel,
+  bt as useDebounce
 };