@asgard-js/react 0.0.2 → 0.0.4

package/dist/index.js

@@ -1,143 +1,206 @@
-import { jsx as o, jsxs as r } from "react/jsx-runtime";
-import { useRef as H, useEffect as y, useState as k, useCallback as g, useMemo as x, createContext as F, useContext as K } from "react";
-import { AsgardServiceClient as Q, Conversation as W, MessageTemplateType as C } from "@asgard-js/core";
-function V(n) {
-  var t, e, s = "";
-  if (typeof n == "string" || typeof n == "number") s += n;
-  else if (typeof n == "object") if (Array.isArray(n)) {
-    var c = n.length;
-    for (t = 0; t < c; t++) n[t] && (e = V(n[t])) && (s && (s += " "), s += e);
-  } else for (e in n) n[e] && (s && (s += " "), s += e);
-  return s;
+import { jsx as o, jsxs as _ } from "react/jsx-runtime";
+import * as x from "react";
+import { useRef as z, useEffect as R, useState as N, useCallback as d, useMemo as B, createContext as ot, useContext as st, memo as ct } from "react";
+import { AsgardServiceClient as rt, Channel as it, Conversation as at, MessageTemplateType as j } from "@asgard-js/core";
+function G(e) {
+  var t, s, n = "";
+  if (typeof e == "string" || typeof e == "number") n += e;
+  else if (typeof e == "object") if (Array.isArray(e)) {
+    var c = e.length;
+    for (t = 0; t < c; t++) e[t] && (s = G(e[t])) && (n && (n += " "), n += s);
+  } else for (s in e) e[s] && (n && (n += " "), n += s);
+  return n;
 }
-function u() {
-  for (var n, t, e = 0, s = "", c = arguments.length; e < c; e++) (n = arguments[e]) && (t = V(n)) && (s && (s += " "), s += t);
-  return s;
+function T() {
+  for (var e, t, s = 0, n = "", c = arguments.length; s < c; s++) (e = arguments[s]) && (t = G(e)) && (n && (n += " "), n += t);
+  return n;
 }
-function X(n) {
-  const { config: t } = n, e = H(null);
-  return e.current || (e.current = new Q(t)), y(() => () => {
-    e.current && (e.current.close(), e.current = null);
-  }, [t]), e.current;
+function lt(e) {
+  const { config: t } = e, s = z(null);
+  return s.current || (s.current = new rt(t)), R(() => () => {
+    s.current && (s.current.close(), s.current = null);
+  }, [t]), s.current;
 }
-function G(n) {
-  const { client: t, customChannelId: e, initMessages: s, options: c } = n;
+function _t(e) {
+  const {
+    client: t,
+    customChannelId: s,
+    customMessageId: n,
+    initMessages: c,
+    showDebugMessage: r
+  } = e;
   if (!t)
     throw new Error("Client instance is required");
-  if (!e)
+  if (!s)
     throw new Error("Custom channel id is required");
-  const [a, _] = k(
-    new W({
-      messages: new Map(
-        s == null ? void 0 : s.map((i) => [i.messageId, i])
-      ),
-      typingMessages: null
-    })
-  );
-  y(() => {
-    t.setChannel({
-      customChannelId: e,
-      customMessageId: ""
-    });
-  }, [t, e]);
-  const l = g(
-    (i, h) => {
-      _((d) => {
-        const p = d.pushMessage(
-          d,
-          {
-            type: "user",
-            messageId: h ?? crypto.randomUUID(),
-            text: i,
-            time: /* @__PURE__ */ new Date()
-          }
-        );
-        return t.sendMessage(
-          {
-            customChannelId: e,
-            customMessageId: h,
-            text: i
-          },
-          {
-            onSseMessage: (N) => {
-              _(
-                (M) => p.onMessage(M, N, {
-                  showDebugMessage: c == null ? void 0 : c.showDebugMessage
-                })
-              );
-            }
-          }
-        ), p;
-      });
+  const [i, a] = N(null), [u, p] = N(!0), [m, b] = N(!1), [l, h] = N(!1), [f, v] = N(null), C = z(null), L = d(() => {
+    b(!0), t == null || t.resetChannel(
+      { customChannelId: s, customMessageId: n },
+      {
+        onSseCompleted: () => {
+          b(!1), a(() => {
+            const g = new it({
+              client: t,
+              customChannelId: s,
+              conversation: new at({
+                showDebugMessage: r,
+                messages: new Map(
+                  c == null ? void 0 : c.map((w) => [w.messageId, w])
+                )
+              })
+            });
+            return p(!0), h(g.isConnecting$.value), v(g.conversation$.value), g;
+          });
+        }
+      }
+    );
+  }, [
+    t,
+    s,
+    n,
+    c,
+    r
+  ]), M = d(() => {
+    var g;
+    a((w) => (w == null || w.close(), null)), p(!1), b(!1), h(!1), v(null), (g = C.current) == null || g.forEach(
+      (w) => w.unsubscribe()
+    );
+  }, []), $ = d(
+    (g) => {
+      i == null || i.sendMessage({ text: g });
     },
-    [t, e, c]
+    [i]
   );
-  return x(
+  return R(() => {
+    if (i)
+      return C.current = [
+        i == null ? void 0 : i.isConnecting$.subscribe(h),
+        i == null ? void 0 : i.conversation$.subscribe(v)
+      ], () => {
+        var g;
+        (g = C.current) == null || g.forEach(
+          (w) => w.unsubscribe()
+        );
+      };
+  }, [i]), R(() => {
+    !i && u && L();
+  }, [i, u, L]), R(() => () => M(), [M]), B(
     () => ({
-      messages: a.messages,
-      typingMessages: a.typingMessages,
-      sendMessage: l
+      isOpen: u,
+      isResetting: m,
+      isConnecting: l,
+      conversation: f,
+      sendMessage: $,
+      resetChannel: L,
+      closeChannel: M
     }),
-    [a, l]
+    [
+      u,
+      m,
+      l,
+      f,
+      $,
+      L,
+      M
+    ]
   );
 }
-function J(n, t) {
-  const [e, s] = k(n);
-  return y(() => {
+function ut(e, t) {
+  const [s, n] = N(e);
+  return R(() => {
     const c = window.setTimeout(() => {
-      s(n);
+      n(e);
     }, t ?? 300);
     return () => clearTimeout(c);
-  }, [n, t]), e;
+  }, [e, t]), s;
 }
-const E = F({
+const Y = ot({
+  avatar: void 0,
   client: null,
+  isOpen: !1,
+  isResetting: !1,
   isConnecting: !1,
   messages: null,
-  typingMessages: null,
   messageBoxBottomRef: { current: null },
-  sendMessage: () => {
-  }
+  botTypingPlaceholder: void 0
 });
-function Y(n) {
+function dt(e) {
   const {
-    children: t,
-    config: e,
-    customChannelId: s,
-    customMessageId: c,
+    avatar: t,
+    children: s,
+    config: n,
+    botTypingPlaceholder: c,
+    customChannelId: r,
+    customMessageId: i,
     delayTime: a,
-    initMessages: _,
-    options: l,
-    ...i
-  } = n, h = H(null), d = X({ config: e }), { messages: p, typingMessages: N, sendMessage: M } = G({
-    client: d,
-    customChannelId: s,
-    initMessages: _,
-    options: l
-  }), L = x(
+    initMessages: u,
+    options: p,
+    ...m
+  } = e, b = z(null), l = lt({ config: n }), {
+    isOpen: h,
+    isResetting: f,
+    isConnecting: v,
+    conversation: C,
+    sendMessage: L,
+    resetChannel: M,
+    closeChannel: $
+  } = _t({
+    client: l,
+    customChannelId: r,
+    initMessages: u,
+    showDebugMessage: p == null ? void 0 : p.showDebugMessage
+  }), g = B(
     () => ({
-      client: d,
-      isConnecting: (d == null ? void 0 : d.isConnecting) ?? !1,
-      messages: p,
-      typingMessages: N,
-      sendMessage: M,
-      messageBoxBottomRef: h
+      avatar: t,
+      client: l,
+      isOpen: h,
+      isResetting: f,
+      isConnecting: v,
+      messages: (C == null ? void 0 : C.messages) ?? null,
+      sendMessage: L,
+      resetChannel: M,
+      closeChannel: $,
+      botTypingPlaceholder: c,
+      messageBoxBottomRef: b
     }),
-    [d, p, M, N]
+    [
+      t,
+      l,
+      h,
+      f,
+      v,
+      C == null ? void 0 : C.messages,
+      L,
+      M,
+      $,
+      c
+    ]
   );
-  return /* @__PURE__ */ o(E.Provider, { value: L, children: /* @__PURE__ */ o("div", { ...i, children: t }) });
+  return /* @__PURE__ */ o(Y.Provider, { value: g, children: /* @__PURE__ */ o("div", { ...m, children: s }) });
 }
-function w() {
-  return K(E);
+function y() {
+  return st(Y);
 }
-const tt = "_chatbot_header_1xj9n_1", et = "_chatbot_header__content_1xj9n_1", ot = "_chatbot_header__title_1xj9n_9", nt = "_chatbot_header__extra_1xj9n_20", T = {
-  chatbot_header: tt,
-  chatbot_header__content: et,
-  chatbot_header__title: ot,
-  chatbot_header__extra: nt
+const ht = "_chatbot_header_f3p4c_1", mt = "_chatbot_header__content_f3p4c_1", bt = "_chatbot_header__title_f3p4c_9", gt = "_chatbot_header__extra_f3p4c_20", I = {
+  chatbot_header: ht,
+  chatbot_header__content: mt,
+  chatbot_header__title: bt,
+  chatbot_header__extra: gt
 };
-function st() {
-  return /* @__PURE__ */ r(
+function pt(e) {
+  const { avatar: t } = e;
+  return t ? /* @__PURE__ */ o(
+    "img",
+    {
+      src: t,
+      alt: "avatar",
+      style: {
+        width: 33,
+        height: 32,
+        borderRadius: "50%"
+      }
+    }
+  ) : /* @__PURE__ */ _(
     "svg",
     {
       width: "33",
@@ -146,7 +209,7 @@ function st() {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ r("g", { "clip-path": "url(#clip0_3084_29383)", children: [
+        /* @__PURE__ */ _("g", { "clip-path": "url(#clip0_3084_29383)", children: [
           /* @__PURE__ */ o(
             "path",
             {
@@ -175,96 +238,116 @@ function st() {
     }
   );
 }
-function ct(n) {
-  const { title: t } = n;
-  return /* @__PURE__ */ o("div", { className: T.chatbot_header, children: /* @__PURE__ */ r("div", { className: T.chatbot_header__content, children: [
-    /* @__PURE__ */ r("div", { className: T.chatbot_header__title, children: [
-      /* @__PURE__ */ o(st, {}),
+const ft = (e) => /* @__PURE__ */ x.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ x.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" })), Ct = (e) => /* @__PURE__ */ x.createElement("svg", { width: 15, height: 14, viewBox: "0 0 15 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ x.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 vt(e) {
+  const { title: t } = e, { avatar: s, isOpen: n, isResetting: c, resetChannel: r, closeChannel: i } = y(), a = d(
+    (m) => {
+      !n && !c && (m.stopPropagation(), r == null || r());
+    },
+    [n, c, r]
+  ), u = d(
+    (m) => {
+      n && !c && (m.stopPropagation(), r == null || r());
+    },
+    [n, c, r]
+  ), p = d(
+    (m) => {
+      c || (m.stopPropagation(), i == null || i());
+    },
+    [c, i]
+  );
+  return /* @__PURE__ */ o("div", { className: I.chatbot_header, onClick: a, children: /* @__PURE__ */ _("div", { className: I.chatbot_header__content, children: [
+    /* @__PURE__ */ _("div", { className: I.chatbot_header__title, children: [
+      /* @__PURE__ */ o(pt, { avatar: s }),
       /* @__PURE__ */ o("h4", { children: t })
     ] }),
-    /* @__PURE__ */ o("div", { className: T.chatbot_header__extra })
+    /* @__PURE__ */ _("div", { className: I.chatbot_header__extra, children: [
+      /* @__PURE__ */ o("div", { onClick: u, children: /* @__PURE__ */ o(ft, {}) }),
+      /* @__PURE__ */ o("div", { onClick: p, children: /* @__PURE__ */ o(Ct, {}) })
+    ] })
   ] }) });
 }
-const rt = "_chatbot_body_1f0gq_1", at = "_chatbot_body__content_1f0gq_7", $ = {
-  chatbot_body: rt,
-  chatbot_body__content: at
-}, it = "_template_box_1ozig_1", m = {
-  template_box: it,
+const xt = "_chatbot_body_1f0gq_1", yt = "_chatbot_body__content_1f0gq_7", P = {
+  chatbot_body: xt,
+  chatbot_body__content: yt
+}, wt = "_template_box_1ozig_1", k = {
+  template_box: wt,
   "template_box--bot": "_template_box--bot_1ozig_7",
   "template_box--horizontal": "_template_box--horizontal_1ozig_7",
   "template_box--vertical": "_template_box--vertical_1ozig_10",
   "template_box--user": "_template_box--user_1ozig_14"
 };
-function v(n) {
-  const { type: t, direction: e = "horizontal", children: s } = n, c = x(() => {
+function E(e) {
+  const { type: t, direction: s = "horizontal", children: n } = e, c = B(() => {
     switch (t) {
       case "user":
-        return u(m.template_box, m["template_box--user"]);
+        return T(k.template_box, k["template_box--user"]);
       case "bot":
       default:
-        return u(
-          m.template_box,
-          m["template_box--bot"],
-          e === "horizontal" ? m["template_box--horizontal"] : m["template_box--vertical"]
+        return T(
+          k.template_box,
+          k["template_box--bot"],
+          s === "horizontal" ? k["template_box--horizontal"] : k["template_box--vertical"]
         );
     }
-  }, [e, t]);
-  return /* @__PURE__ */ o("div", { className: c, children: s });
+  }, [s, t]);
+  return /* @__PURE__ */ o("div", { className: c, children: n });
 }
-const lt = "_template_box_content_12ojl_1", _t = "_content_12ojl_7", q = {
-  template_box_content: lt,
-  content: _t
-}, dt = "_quick_replies_box_19pe0_1", ht = "_quick_reply_19pe0_7", S = {
-  quick_replies_box: dt,
-  quick_reply: ht
+const Nt = "_template_box_content_12ojl_1", Tt = "_content_12ojl_7", F = {
+  template_box_content: Nt,
+  content: Tt
+}, Rt = "_quick_replies_box_zoq7y_1", Lt = "_quick_reply_zoq7y_7", U = {
+  quick_replies_box: Rt,
+  quick_reply: Lt
 };
-function ut(n) {
-  const { quickReplies: t } = n, { sendMessage: e } = w(), s = g(
-    (c) => {
-      e(c);
+function Mt(e) {
+  const { quickReplies: t } = e, { sendMessage: s, isConnecting: n } = y(), c = d(
+    (r) => {
+      s == null || s(r);
     },
-    [e]
+    [s]
   );
-  return t != null && t.length ? /* @__PURE__ */ o("div", { className: S.quick_replies_box, children: t.map((c) => /* @__PURE__ */ o(
-    "div",
+  return t != null && t.length ? /* @__PURE__ */ o("div", { className: U.quick_replies_box, children: t.map((r) => /* @__PURE__ */ o(
+    "button",
     {
-      className: S.quick_reply,
-      onClick: () => s(c.text),
-      children: c.text
+      className: U.quick_reply,
+      disabled: n,
+      onClick: () => c(r.text),
+      children: r.text
     },
-    c.text
+    r.text
   )) }) : null;
 }
-function O(n) {
-  return n.toLocaleTimeString("zh-TW", {
+function tt(e) {
+  return e.toLocaleTimeString("zh-TW", {
     timeZone: "Asia/Taipei",
     hour: "2-digit",
     minute: "2-digit",
     hour12: !1
   });
 }
-const mt = "_time_rgg92_1", bt = {
-  time: mt
+const St = "_time_rgg92_1", Bt = {
+  time: St
 };
-function I(n) {
-  const { time: t, className: e } = n;
-  return t ? /* @__PURE__ */ o("div", { className: u(bt.time, e), children: O(t) }) : null;
+function D(e) {
+  const { time: t, className: s } = e;
+  return t ? /* @__PURE__ */ o("div", { className: T(Bt.time, s), children: tt(t) }) : null;
 }
-function R(n) {
-  const { quickReplies: t, time: e, children: s } = n;
-  return /* @__PURE__ */ r("div", { className: q.template_box_content, children: [
-    /* @__PURE__ */ r("div", { className: q.content, children: [
-      s,
-      /* @__PURE__ */ o(I, { time: e })
+function O(e) {
+  const { quickReplies: t, time: s, children: n } = e;
+  return /* @__PURE__ */ _("div", { className: F.template_box_content, children: [
+    /* @__PURE__ */ _("div", { className: F.content, children: [
+      n,
+      /* @__PURE__ */ o(D, { time: s })
     ] }),
-    !!(t != null && t.length) && /* @__PURE__ */ o(ut, { quickReplies: t })
+    !!(t != null && t.length) && /* @__PURE__ */ o(Mt, { quickReplies: t })
   ] });
 }
-const gt = "_bot_avatar_14r1r_1", pt = {
-  bot_avatar: gt
-};
-function z() {
-  return /* @__PURE__ */ o("div", { className: pt.bot_avatar, children: /* @__PURE__ */ r(
+const kt = "_bot_avatar_xrs9x_1", J = {
+  bot_avatar: kt
+}, A = ct((e) => {
+  const { avatar: t } = e;
+  return t ? /* @__PURE__ */ o("img", { src: t, alt: "Bot Avatar", className: J.bot_avatar }) : /* @__PURE__ */ o("div", { className: J.bot_avatar, children: /* @__PURE__ */ _(
     "svg",
     {
       style: { width: "100%", height: "100%" },
@@ -289,55 +372,63 @@ function z() {
       ]
     }
   ) });
-}
-const ft = "_text_1djgp_1", Ct = "_dot_1djgp_18", xt = "_blink_1djgp_1", b = {
-  text: ft,
+}), Ht = "_text_1djgp_1", zt = "_dot_1djgp_18", $t = "_blink_1djgp_1", H = {
+  text: Ht,
   "text--bot": "_text--bot_1djgp_7",
   "typing-indicator": "_typing-indicator_1djgp_13",
-  dot: Ct,
-  blink: xt
+  dot: zt,
+  blink: $t
 };
-function vt(n) {
-  const { children: t, onResize: e } = n, s = H(null);
-  return y(() => {
-    const c = new ResizeObserver((a) => {
-      for (const _ of a) {
-        const { width: l, height: i } = _.contentRect;
-        e(l, i);
+function Vt(e) {
+  const { children: t, onResize: s } = e, n = z(null);
+  return R(() => {
+    const c = new ResizeObserver((r) => {
+      for (const i of r) {
+        const { width: a, height: u } = i.contentRect;
+        s(a, u);
       }
     });
-    return s.current && c.observe(s.current), () => {
+    return n.current && c.observe(n.current), () => {
       c.disconnect();
     };
-  }, [s, e]), /* @__PURE__ */ o("div", { ref: s, children: t });
+  }, [n, s]), /* @__PURE__ */ o("div", { ref: n, children: t });
 }
-function yt(n) {
-  const { typingMessage: t } = n, { messageBoxBottomRef: e } = w(), s = g(() => {
+function et(e) {
+  const { isTyping: t, typingText: s } = e, { messageBoxBottomRef: n, avatar: c } = y(), r = d(() => {
     var a;
-    (a = e.current) == null || a.scrollIntoView({ behavior: "smooth" });
-  }, [e]), c = J(t == null ? void 0 : t.isTyping, 500);
-  return c ? /* @__PURE__ */ r(v, { type: "bot", direction: "horizontal", children: [
-    /* @__PURE__ */ o(z, {}),
-    /* @__PURE__ */ o(R, { time: /* @__PURE__ */ new Date(), children: /* @__PURE__ */ o("div", { className: u(b.text, b["text--bot"]), children: /* @__PURE__ */ r(vt, { onResize: s, children: [
-      /* @__PURE__ */ o("span", { children: (t == null ? void 0 : t.typingText) ?? "" }),
-      c && /* @__PURE__ */ r("span", { className: b["typing-indicator"], children: [
-        /* @__PURE__ */ o("div", { className: b.dot }),
-        /* @__PURE__ */ o("div", { className: b.dot }),
-        /* @__PURE__ */ o("div", { className: b.dot })
+    (a = n.current) == null || a.scrollIntoView({ behavior: "smooth" });
+  }, [n]), i = ut(t, 500);
+  return i ? /* @__PURE__ */ _(E, { type: "bot", direction: "horizontal", children: [
+    /* @__PURE__ */ o(A, { avatar: c }),
+    /* @__PURE__ */ o(O, { time: /* @__PURE__ */ new Date(), children: /* @__PURE__ */ o("div", { className: T(H.text, H["text--bot"]), children: /* @__PURE__ */ _(Vt, { onResize: r, children: [
+      /* @__PURE__ */ o("span", { children: s ?? "" }),
+      i && /* @__PURE__ */ _("span", { className: H["typing-indicator"], children: [
+        /* @__PURE__ */ o("div", { className: H.dot }),
+        /* @__PURE__ */ o("div", { className: H.dot }),
+        /* @__PURE__ */ o("div", { className: H.dot })
       ] })
     ] }) }) })
   ] }) : null;
 }
-const wt = "_card_root_1ygom_1", Nt = "_card_content_1ygom_10", Mt = "_card_title_1ygom_17", Tt = "_card_description_1ygom_23", jt = "_card_actions_1ygom_37", f = {
-  card_root: wt,
-  card_content: Nt,
-  card_title: Mt,
-  card_description: Tt,
-  card_actions: jt
+function jt(e) {
+  const { placeholder: t } = e, { isConnecting: s, messages: n } = y(), c = B(
+    () => Array.from((n == null ? void 0 : n.values()) ?? []).some(
+      (r) => r.type === "bot" && r.isTyping
+    ),
+    [n]
+  );
+  return s && !c ? /* @__PURE__ */ o(et, { isTyping: !0, typingText: t }) : null;
+}
+const Et = "_card_root_1ygom_1", It = "_card_content_1ygom_10", Zt = "_card_title_1ygom_17", qt = "_card_description_1ygom_23", At = "_card_actions_1ygom_37", V = {
+  card_root: Et,
+  card_content: It,
+  card_title: Zt,
+  card_description: qt,
+  card_actions: At
 };
-function P(n) {
-  var _;
-  const { template: t } = n, { sendMessage: e } = w(), s = x(() => (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 = x(() => {
+function nt(e) {
+  var i;
+  const { template: t } = e, { sendMessage: s } = y(), n = B(() => (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 = B(() => {
     switch (t == null ? void 0 : t.imageAspectRatio) {
       case "square":
         return "1 / 1";
@@ -345,25 +436,25 @@ function P(n) {
       default:
         return "1.51 / 1";
     }
-  }, [t]), a = g(
-    (l) => function() {
-      switch (l.type) {
+  }, [t]), r = d(
+    (a) => function() {
+      switch (a.type) {
         case "message":
-          e(l.text);
+          s(a.text);
           return;
         case "uri":
-          window.open(l.uri, "_blank");
+          window.open(a.uri, "_blank");
           return;
       }
     },
-    [e]
+    [s]
   );
-  return /* @__PURE__ */ r("div", { className: f.card_root, children: [
+  return /* @__PURE__ */ _("div", { className: V.card_root, children: [
     (t == null ? void 0 : t.thumbnailImageUrl) && /* @__PURE__ */ o(
       "img",
       {
         alt: t == null ? void 0 : t.title,
-        src: s,
+        src: n,
         style: {
           display: "block",
           width: "100%",
@@ -372,186 +463,301 @@ function P(n) {
         }
       }
     ),
-    /* @__PURE__ */ r("div", { className: f.card_content, children: [
-      /* @__PURE__ */ o("h5", { className: f.card_title, children: t == null ? void 0 : t.title }),
-      /* @__PURE__ */ o("div", { className: f.card_description, children: t == null ? void 0 : t.text }),
-      /* @__PURE__ */ o("div", { className: f.card_actions, children: (_ = t == null ? void 0 : t.buttons) == null ? void 0 : _.map((l, i) => /* @__PURE__ */ o("button", { onClick: a(l.action), children: l.label }, i)) })
+    /* @__PURE__ */ _("div", { className: V.card_content, children: [
+      /* @__PURE__ */ o("h5", { className: V.card_title, children: t == null ? void 0 : t.title }),
+      /* @__PURE__ */ o("div", { className: V.card_description, children: t == null ? void 0 : t.text }),
+      /* @__PURE__ */ o("div", { className: V.card_actions, children: (i = t == null ? void 0 : t.buttons) == null ? void 0 : i.map((a, u) => /* @__PURE__ */ o("button", { onClick: r(a.action), children: a.label }, u)) })
     ] })
   ] });
 }
-function kt(n) {
-  const { conversationMessage: t } = n, e = t.message.template;
-  return /* @__PURE__ */ r(v, { type: "bot", direction: "horizontal", children: [
-    /* @__PURE__ */ o(z, {}),
+function Dt(e) {
+  const { message: t } = e, { avatar: s } = y(), n = t.message.template;
+  return /* @__PURE__ */ _(E, { type: "bot", direction: "horizontal", children: [
+    /* @__PURE__ */ o(A, { avatar: s }),
     /* @__PURE__ */ o(
-      R,
+      O,
       {
         time: t.time,
-        quickReplies: e == null ? void 0 : e.quickReplies,
-        children: /* @__PURE__ */ o(P, { template: e })
+        quickReplies: n == null ? void 0 : n.quickReplies,
+        children: /* @__PURE__ */ o(nt, { template: n })
       }
     )
   ] });
 }
-const zt = "_text_sbjtw_1", Bt = "_content_sbjtw_19", j = {
-  text: zt,
+const Ot = "_text_sbjtw_1", Pt = "_content_sbjtw_19", Z = {
+  text: Ot,
   "text--user": "_text--user_sbjtw_7",
   "text--bot": "_text--bot_sbjtw_13",
-  content: Bt
+  content: Pt
 };
-function A(n) {
-  var e;
-  const { conversationMessage: t } = n;
-  return t.type === "user" ? /* @__PURE__ */ r(v, { type: "user", direction: "horizontal", children: [
-    /* @__PURE__ */ o("div", { className: u(j.text, j["text--user"]), children: t.text }),
-    /* @__PURE__ */ o(I, { time: t.time })
-  ] }) : /* @__PURE__ */ r(v, { type: "bot", direction: "horizontal", children: [
-    /* @__PURE__ */ o(z, {}),
+function W(e) {
+  var n;
+  const { message: t } = e, { avatar: s } = y();
+  return t.type === "user" ? /* @__PURE__ */ _(E, { type: "user", direction: "horizontal", children: [
+    /* @__PURE__ */ o("div", { className: T(Z.text, Z["text--user"]), children: t.text }),
+    /* @__PURE__ */ o(D, { time: t.time })
+  ] }) : /* @__PURE__ */ _(E, { type: "bot", direction: "horizontal", children: [
+    /* @__PURE__ */ o(A, { avatar: s }),
     /* @__PURE__ */ o(
-      R,
+      O,
       {
         time: t.time,
-        quickReplies: (e = t.message.template) == null ? void 0 : e.quickReplies,
-        children: /* @__PURE__ */ o("div", { className: u(j.text, j["text--bot"]), children: t.message.text })
+        quickReplies: (n = t.message.template) == null ? void 0 : n.quickReplies,
+        children: /* @__PURE__ */ o("div", { className: T(Z.text, Z["text--bot"]), children: t.message.text })
       }
     )
   ] });
 }
-const Ht = "_carousel_root_sv1hc_1", It = "_carousel_time_sv1hc_12", Z = {
-  carousel_root: Ht,
-  carousel_time: It
+const Ft = "_carousel_root_sv1hc_1", Ut = "_carousel_time_sv1hc_12", K = {
+  carousel_root: Ft,
+  carousel_time: Ut
 };
-function Rt(n) {
-  var s;
-  const { conversationMessage: t } = n, e = t.message.template;
-  return /* @__PURE__ */ r(v, { type: "bot", direction: "vertical", children: [
-    /* @__PURE__ */ o(z, {}),
-    /* @__PURE__ */ o("div", { className: Z.carousel_root, children: (s = e.columns) == null ? void 0 : s.map((c, a) => /* @__PURE__ */ o(P, { template: c }, a)) }),
-    /* @__PURE__ */ o(I, { className: Z.carousel_time, time: t.time })
+function Jt(e) {
+  var c;
+  const { message: t } = e, { avatar: s } = y(), n = t.message.template;
+  return /* @__PURE__ */ _(E, { type: "bot", direction: "vertical", children: [
+    /* @__PURE__ */ o(A, { avatar: s }),
+    /* @__PURE__ */ o("div", { className: K.carousel_root, children: (c = n.columns) == null ? void 0 : c.map((r, i) => /* @__PURE__ */ o(nt, { template: r }, i)) }),
+    /* @__PURE__ */ o(D, { className: K.carousel_time, time: t.time })
   ] });
 }
-const $t = "_hint_root_g119q_1", qt = "_time_g119q_14", U = {
-  hint_root: $t,
-  time: qt
+const Wt = "_hint_root_g119q_1", Kt = "_time_g119q_14", Q = {
+  hint_root: Wt,
+  time: Kt
 };
-function St(n) {
-  const { conversationMessage: t } = n;
+function Qt(e) {
+  const { message: t } = e;
   if (t.type === "user") return null;
-  const e = t.message.template;
-  return e.type !== C.HINT ? null : /* @__PURE__ */ r("div", { className: U.hint_root, children: [
-    /* @__PURE__ */ o("div", { className: U.time, children: O(t.time) }),
-    e.text
+  const s = t.message.template;
+  return s.type !== j.HINT ? null : /* @__PURE__ */ _("div", { className: Q.hint_root, children: [
+    /* @__PURE__ */ o("div", { className: Q.time, children: tt(t.time) }),
+    s.text
   ] });
 }
-function At(n) {
-  const { conversationMessage: t } = n;
+function Xt(e) {
+  var s;
+  const { message: t } = e;
   if (t.type === "user")
-    return /* @__PURE__ */ o(A, { conversationMessage: t });
-  const e = t.message.template;
-  switch (e == null ? void 0 : e.type) {
-    case C.TEXT:
-      return /* @__PURE__ */ o(A, { conversationMessage: t });
-    case C.HINT:
-      return /* @__PURE__ */ o(St, { conversationMessage: t });
-    case C.BUTTON:
-      return /* @__PURE__ */ o(kt, { conversationMessage: t });
-    case C.CAROUSEL:
-      return /* @__PURE__ */ o(Rt, { conversationMessage: t });
+    return /* @__PURE__ */ o(W, { message: t });
+  if (t.isTyping)
+    return /* @__PURE__ */ o(
+      et,
+      {
+        isTyping: t.isTyping,
+        typingText: t.typingText
+      }
+    );
+  switch ((s = t.message.template) == null ? void 0 : s.type) {
+    case j.TEXT:
+      return /* @__PURE__ */ o(W, { message: t });
+    case j.HINT:
+      return /* @__PURE__ */ o(Qt, { message: t });
+    case j.BUTTON:
+      return /* @__PURE__ */ o(Dt, { message: t });
+    case j.CAROUSEL:
+      return /* @__PURE__ */ o(Jt, { message: t });
     default:
-      return /* @__PURE__ */ o("div", { children: "Unknown template" });
+      return /* @__PURE__ */ o("div", {});
   }
 }
-function Zt() {
-  const { messages: n, typingMessages: t, messageBoxBottomRef: e } = w();
-  return y(() => {
-    var s;
-    (s = e.current) == null || s.scrollIntoView({ behavior: "smooth" });
-  }, [n, e]), /* @__PURE__ */ o("div", { className: $.chatbot_body, children: /* @__PURE__ */ r("div", { className: $.chatbot_body__content, children: [
-    Array.from((n == null ? void 0 : n.values()) ?? []).map((s) => /* @__PURE__ */ o(
-      At,
+function Gt() {
+  const { messages: e, messageBoxBottomRef: t, botTypingPlaceholder: s } = y();
+  return R(() => {
+    var n;
+    (n = t.current) == null || n.scrollIntoView({ behavior: "smooth" });
+  }, [e, t]), /* @__PURE__ */ o("div", { className: P.chatbot_body, children: /* @__PURE__ */ _("div", { className: P.chatbot_body__content, children: [
+    Array.from((e == null ? void 0 : e.values()) ?? []).map((n) => /* @__PURE__ */ o(
+      Xt,
       {
-        conversationMessage: s
+        message: n
       },
-      crypto.randomUUID()
+      n.messageId
     )),
-    Array.from((t == null ? void 0 : t.values()) ?? []).map((s) => /* @__PURE__ */ o(
-      yt,
+    /* @__PURE__ */ o(
+      jt,
       {
-        typingMessage: s
-      },
-      crypto.randomUUID()
-    )),
-    /* @__PURE__ */ o("div", { ref: e })
+        placeholder: s ?? "正在輸入訊息"
+      }
+    ),
+    /* @__PURE__ */ o("div", { ref: t })
   ] }) });
 }
-const Ut = "_chatbot_footer_3box0_1", Dt = "_chatbot_footer__content_3box0_1", Vt = "_chatbot_textarea_3box0_8", B = {
-  chatbot_footer: Ut,
-  chatbot_footer__content: Dt,
-  chatbot_textarea: Vt
-};
-function Et() {
-  const { sendMessage: n, isConnecting: t } = w(), [e, s] = k(""), [c, a] = k(!1), _ = g(
-    (i) => {
-      const h = i.target, d = h.value;
-      h.style.height = "20px", d && (h.style.height = `${h.scrollHeight - 16}px`), s(i.target.value);
+const Yt = "_chatbot_footer_aa5it_1", te = "_chatbot_footer__content_aa5it_1", ee = "_chatbot_textarea_aa5it_12", ne = "_chatbot_submit_button_aa5it_27", oe = "_chatbot_submit_button__disabled_aa5it_52", S = {
+  chatbot_footer: Yt,
+  chatbot_footer__content: te,
+  chatbot_textarea: ee,
+  chatbot_submit_button: ne,
+  chatbot_submit_button__disabled: oe
+}, se = (e) => /* @__PURE__ */ x.createElement("svg", { width: 15, height: 12, viewBox: "0 0 15 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ x.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__ */ x.createElement("svg", { width: 11, height: 16, viewBox: "0 0 11 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ x.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" })), re = (e) => /* @__PURE__ */ x.createElement("svg", { width: 40, height: 40, viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ x.createElement("circle", { cx: 20, cy: 20, r: 18, fill: "#D04444" }), /* @__PURE__ */ x.createElement("rect", { x: 12, y: 12, width: 16, height: 16, fill: "#FFFFFF", rx: 2, ry: 2 }));
+function ie(e) {
+  const { setValue: t, className: s } = e, [n, c] = N(!1), r = z(null);
+  R(() => {
+    const l = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (!l) return;
+    const h = new l();
+    h.lang = "zh-TW", h.continuous = !0, h.interimResults = !0, h.onresult = (f) => {
+      for (let v = f.resultIndex; v < f.results.length; v++)
+        f.results[v].isFinal && t((C) => C + f.results[v][0].transcript);
+    }, h.onerror = (f) => {
+      alert(`語音識別錯誤: ${JSON.stringify(f.error)}`);
+    }, h.onend = () => {
+      c(!1);
+    }, r.current = h;
+  }, [t]);
+  const i = d(() => {
+    if (!r.current) {
+      alert("無法開始辨識: 語音識別器未初始化，請檢查是否有授權使用麥克風");
+      return;
+    }
+    try {
+      r.current.start(), c(!0);
+    } catch (l) {
+      alert(`無法開始辨識: ${JSON.stringify(l)}`);
+    }
+  }, []), a = d(() => {
+    r.current && (r.current.stop(), c(!1));
+  }, []), u = d(
+    (l) => {
+      n || (l.preventDefault(), i());
     },
-    []
-  ), l = g(
-    (i) => {
-      i.key === "Enter" && !c && !t && (n(e), s(""));
+    [n, i]
+  ), p = d(
+    (l) => {
+      n && (l.preventDefault(), a());
+    },
+    [n, a]
+  ), m = d(
+    (l) => {
+      n || (l.preventDefault(), i());
     },
-    [c, t, n, e]
+    [n, i]
+  ), b = d(
+    (l) => {
+      n && (l.preventDefault(), a());
+    },
+    [n, a]
   );
-  return /* @__PURE__ */ o("div", { className: B.chatbot_footer, children: /* @__PURE__ */ o("div", { className: B.chatbot_footer__content, children: /* @__PURE__ */ o(
-    "textarea",
+  return /* @__PURE__ */ o(
+    "div",
     {
-      className: B.chatbot_textarea,
-      disabled: t,
-      cols: 40,
-      value: e,
-      placeholder: "Enter message",
-      onChange: _,
-      onKeyDown: l,
-      onCompositionStart: () => a(!0),
-      onCompositionEnd: () => a(!1)
+      className: s,
+      onMouseDown: u,
+      onMouseUp: p,
+      onTouchStart: m,
+      onTouchEnd: b,
+      children: n ? /* @__PURE__ */ o(re, {}) : /* @__PURE__ */ o(ce, {})
     }
-  ) }) });
+  );
 }
-const Ot = "_chatbot_root_1jllh_1", Pt = "_chatbot_root__fullScreen_1jllh_12", D = {
-  chatbot_root: Ot,
-  chatbot_root__fullScreen: Pt
+function ae() {
+  const { sendMessage: e, isConnecting: t } = y(), [s, n] = N(""), [c, r] = N(!1), i = z(null), a = B(() => t || !s, [t, s]), u = d(
+    (b) => {
+      const l = b.target, h = l.value;
+      l.style.height = "20px", h && (l.style.height = `${l.scrollHeight - 16}px`), n(b.target.value);
+    },
+    []
+  ), p = d(() => {
+    !c && !t && (e == null || e(s), n(""), i.current && (i.current.style.height = "20px"));
+  }, [c, t, e, s]), m = d(
+    (b) => {
+      if (b.key === "Enter" && !c && !t) {
+        e == null || e(s), n("");
+        const l = b.target;
+        l.style.height = "20px";
+      }
+    },
+    [c, t, e, s]
+  );
+  return /* @__PURE__ */ o("div", { className: S.chatbot_footer, children: /* @__PURE__ */ _("div", { className: S.chatbot_footer__content, children: [
+    /* @__PURE__ */ o(
+      "textarea",
+      {
+        ref: i,
+        className: S.chatbot_textarea,
+        disabled: t,
+        cols: 40,
+        value: s,
+        placeholder: "Enter message",
+        onChange: u,
+        onKeyDown: m,
+        onCompositionStart: () => r(!0),
+        onCompositionEnd: () => r(!1)
+      }
+    ),
+    s ? /* @__PURE__ */ o(
+      "button",
+      {
+        className: T(
+          S.chatbot_submit_button,
+          a && S.chatbot_submit_button__disabled
+        ),
+        disabled: a,
+        onClick: p,
+        children: /* @__PURE__ */ o(se, {})
+      }
+    ) : /* @__PURE__ */ o(
+      ie,
+      {
+        setValue: n,
+        className: T(
+          S.chatbot_submit_button,
+          t && S.chatbot_submit_button__disabled
+        )
+      }
+    )
+  ] }) });
+}
+const le = "_chatbot_root_18brc_1", _e = "_chatbot_root__fullScreen_18brc_13", X = {
+  chatbot_root: le,
+  chatbot_root__fullScreen: _e
+}, ue = "_loading_16ajc_1", de = "_spinner_16ajc_14", he = "_spinner_svg_16ajc_19", me = "_rotate_16ajc_1", be = "_spinner_circle_16ajc_25", ge = "_dash_16ajc_1", q = {
+  loading: ue,
+  spinner: de,
+  spinner_svg: he,
+  rotate: me,
+  spinner_circle: be,
+  dash: ge
 };
-function Qt(n) {
+function pe() {
+  const { isResetting: e } = y();
+  return e ? /* @__PURE__ */ o("div", { className: q.loading, children: /* @__PURE__ */ o("div", { className: q.spinner, children: /* @__PURE__ */ o("svg", { className: q.spinner_svg, viewBox: "0 0 50 50", children: /* @__PURE__ */ o("circle", { className: q.spinner_circle, cx: "25", cy: "25", r: "20" }) }) }) }) : null;
+}
+function xe(e) {
   const {
     title: t,
-    config: e,
-    customChannelId: s,
+    config: s,
+    customChannelId: n,
     initMessages: c,
-    fullScreen: a = !1,
-    options: _
-  } = n;
-  return /* @__PURE__ */ r(
-    Y,
+    fullScreen: r = !1,
+    avatar: i,
+    options: a,
+    botTypingPlaceholder: u
+  } = e;
+  return /* @__PURE__ */ _(
+    dt,
     {
-      className: u(
-        D.chatbot_root,
-        a && D.chatbot_root__fullScreen
+      className: T(
+        X.chatbot_root,
+        r && X.chatbot_root__fullScreen
       ),
-      config: e,
-      customChannelId: s,
+      avatar: i,
+      config: s,
+      customChannelId: n,
       initMessages: c,
-      options: _,
+      botTypingPlaceholder: u,
+      options: a,
       children: [
-        /* @__PURE__ */ o(ct, { title: t }),
-        /* @__PURE__ */ o(Zt, {}),
-        /* @__PURE__ */ o(Et, {})
+        /* @__PURE__ */ o(pe, {}),
+        /* @__PURE__ */ o(vt, { title: t }),
+        /* @__PURE__ */ o(Gt, {}),
+        /* @__PURE__ */ o(ae, {})
       ]
     }
   );
 }
 export {
-  Qt as Chatbot,
-  X as useAsgardServiceClient,
-  G as useChannel,
-  J as useDebounce
+  xe as Chatbot,
+  lt as useAsgardServiceClient,
+  _t as useChannel,
+  ut as useDebounce
 };