@asgard-js/react 0.0.1 → 0.0.3

package/dist/index.js

@@ -1,283 +1,306 @@
-import { jsx as o, jsxs as i } from "react/jsx-runtime";
-import { useRef as q, useEffect as m, useState as C, useCallback as h, createContext as Q, useMemo as A, useContext as W } from "react";
-import { AsgardServiceClient as X, FetchSSEAction as z, EventType as S, MessageTemplateType as w } from "@asgard-js/core";
-function J(n) {
-  const { config: t } = n, e = q(null);
-  return e.current || (e.current = new X(t)), m(() => () => {
+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;
+}
+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 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 Y(n) {
-  const {
-    client: t,
-    customChannelId: e,
-    initConversation: s,
-    onResetChannelInit: c,
-    startTyping: l,
-    onTyping: r,
-    stopTyping: a
-  } = n;
+function tt(o) {
+  const { client: t, customChannelId: e, initMessages: s, options: c } = o;
   if (!t)
     throw new Error("Client instance is required");
   if (!e)
     throw new Error("Custom channel id is required");
-  const [_, u] = C(!1), [p, v] = C(
-    s ?? []
+  const [r, _] = w(!1), [i, l] = w(
+    new J({
+      messages: new Map(
+        s == null ? void 0 : s.map((h) => [h.messageId, h])
+      ),
+      typingMessages: null
+    })
   );
-  m(() => {
-    console.log("conversation", p);
-  }, [p]), m(() => {
-    t.setChannel(
-      {
-        customChannelId: e,
-        customMessageId: "",
-        text: ""
-      },
-      {
-        onStart: () => u(!0),
-        onCompleted: () => u(!1)
-      }
-    );
+  T(() => {
+    t.setChannel({
+      customChannelId: e,
+      customMessageId: ""
+    });
   }, [t, e]);
-  const B = h(
-    (d, g) => {
-      v(
-        (b) => b.concat({
-          type: "user",
-          customMessageId: g,
-          text: d,
-          time: /* @__PURE__ */ new Date()
-        })
-      ), t.sendMessage(
-        {
-          customChannelId: e,
-          customMessageId: g,
-          text: d
-        },
-        {
-          onStart: () => u(!0),
-          onCompleted: () => u(!1)
-        }
-      );
+  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;
+      });
     },
-    [t, e]
+    [t, e, c]
+  );
+  return N(
+    () => ({
+      isConnecting: r,
+      messages: i.messages,
+      typingMessages: i.typingMessages,
+      sendMessage: d
+    }),
+    [i, r, d]
   );
-  return m(() => {
-    c && t.on(z.RESET_CHANNEL, S.INIT, c);
-  }, [t, c]), m(() => {
-    t.on(z.NONE, S.MESSAGE_START, (d) => {
-      l(d.fact.messageStart.message);
-    });
-  }, [t, l]), m(() => {
-    t.on(z.NONE, S.MESSAGE_DELTA, (d) => {
-      r(d.fact.messageDelta.message);
-    });
-  }, [t, r]), m(() => {
-    t.on(z.NONE, S.MESSAGE_COMPLETE, (d) => {
-      const { eventType: g, fact: b } = d, T = b.messageComplete.message;
-      T.isDebug || v(
-        (E) => E.concat({
-          type: "bot",
-          eventType: g,
-          message: T,
-          time: /* @__PURE__ */ new Date()
-        })
-      ), a();
-    });
-  }, [t, a]), {
-    conversation: p,
-    sendMessage: B,
-    isConnectionProcessing: _
-  };
 }
-function tt(n, t) {
-  const [e, s] = C(n);
-  return m(() => {
+function et(o, t) {
+  const [e, s] = w(o);
+  return T(() => {
     const c = window.setTimeout(() => {
-      s(n);
+      s(o);
     }, t ?? 300);
     return () => clearTimeout(c);
-  }, [n, t]), e;
-}
-function et() {
-  const [n, t] = C(!1), [e, s] = C(null), c = h(() => t(!0), [t]), l = h((_) => {
-    s((u) => (u ?? "") + _.text);
-  }, []), r = h(() => {
-    t(!1), s(null);
-  }, [t]);
-  return {
-    isTyping: tt(n, 500),
-    displayText: e,
-    startTyping: c,
-    onTyping: l,
-    stopTyping: r
-  };
+  }, [o, t]), e;
 }
-const U = Q({
+const L = W({
+  avatar: void 0,
   client: null,
-  isTyping: !1,
-  displayText: null,
+  isConnecting: !1,
+  messages: null,
+  typingMessages: null,
   messageBoxBottomRef: { current: null },
-  isConnectionProcessing: !1,
-  conversation: [],
   sendMessage: () => {
   }
 });
-function nt(n) {
+function ot(o) {
   const {
-    children: t,
-    config: e,
-    customChannelId: s,
-    customMessageId: c,
-    delayTime: l,
-    initConversation: r,
-    ...a
-  } = n, _ = q(null), u = J({ config: e }), { isTyping: p, displayText: v, startTyping: B, onTyping: d, stopTyping: g } = et(), { sendMessage: b, conversation: T, isConnectionProcessing: E } = Y({
-    client: u,
-    customChannelId: s,
-    startTyping: B,
-    onTyping: d,
-    stopTyping: g,
-    initConversation: r
-  }), K = A(
+    avatar: t,
+    children: e,
+    config: s,
+    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,
+    customChannelId: c,
+    initMessages: i,
+    options: l
+  }), Q = N(
     () => ({
-      client: u,
-      isTyping: p,
-      displayText: v,
-      messageBoxBottomRef: _,
-      isConnectionProcessing: E,
-      conversation: T,
-      sendMessage: b
+      avatar: t,
+      client: b,
+      isConnecting: j,
+      messages: C,
+      typingMessages: x,
+      sendMessage: z,
+      messageBoxBottomRef: h
     }),
-    [
-      u,
-      T,
-      v,
-      _,
-      E,
-      p,
-      b
-    ]
+    [t, b, j, C, z, x]
   );
-  return /* @__PURE__ */ o(U.Provider, { value: K, children: /* @__PURE__ */ o("div", { ...a, children: t }) });
+  return /* @__PURE__ */ n(L.Provider, { value: Q, children: /* @__PURE__ */ n("div", { ...d, children: e }) });
 }
-function k() {
-  return W(U);
+function m() {
+  return X(L);
 }
-const ot = "_chatbot_header_uinpm_1", st = {
-  chatbot_header: ot
+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 ct() {
-  return /* @__PURE__ */ o("div", { className: st.chatbot_header, children: "Header" });
+function at(o) {
+  const { avatar: t } = o;
+  return t ? /* @__PURE__ */ n(
+    "img",
+    {
+      src: t,
+      alt: "avatar",
+      style: {
+        width: 33,
+        height: 32,
+        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"
+          }
+        ) }) })
+      ]
+    }
+  );
 }
-const rt = "_chatbot_body_okhax_1", it = {
-  chatbot_body: rt
-}, at = "_template_box_1ozig_1", f = {
-  template_box: at,
+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 })
+    ] }),
+    /* @__PURE__ */ n("div", { className: k.chatbot_header__extra })
+  ] }) });
+}
+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,
   "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 L(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 = L(n[t])) && (s && (s += " "), s += e);
-  } else for (e in n) n[e] && (s && (s += " "), s += e);
-  return s;
-}
-function x() {
-  for (var n, t, e = 0, s = "", c = arguments.length; e < c; e++) (n = arguments[e]) && (t = L(n)) && (s && (s += " "), s += t);
-  return s;
-}
-function M(n) {
-  const { type: t, direction: e = "horizontal", children: s } = n, c = A(() => {
+function M(o) {
+  const { type: t, direction: e = "horizontal", children: s } = o, c = N(() => {
     switch (t) {
       case "user":
-        return x(f.template_box, f["template_box--user"]);
+        return u(g.template_box, g["template_box--user"]);
       case "bot":
       default:
-        return x(
-          f.template_box,
-          f["template_box--bot"],
-          e === "horizontal" ? f["template_box--horizontal"] : f["template_box--vertical"]
+        return u(
+          g.template_box,
+          g["template_box--bot"],
+          e === "horizontal" ? g["template_box--horizontal"] : g["template_box--vertical"]
         );
     }
   }, [e, t]);
-  return /* @__PURE__ */ o("div", { className: c, children: s });
+  return /* @__PURE__ */ n("div", { className: c, children: s });
 }
-const lt = "_template_box_content_12ojl_1", _t = "_content_12ojl_7", D = {
-  template_box_content: lt,
-  content: _t
-}, ut = "_quick_replies_box_19pe0_1", dt = "_quick_reply_19pe0_7", V = {
-  quick_replies_box: ut,
-  quick_reply: dt
+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
 };
-function mt(n) {
-  const { quickReplies: t } = n, { sendMessage: e } = k(), s = h(
-    (c) => {
-      e(c);
+function gt(o) {
+  const { quickReplies: t } = o, { sendMessage: e, isConnecting: s } = m(), c = f(
+    (r) => {
+      e(r);
     },
     [e]
   );
-  return t != null && t.length ? /* @__PURE__ */ o("div", { className: V.quick_replies_box, children: t.map((c) => /* @__PURE__ */ o(
-    "div",
+  return t != null && t.length ? /* @__PURE__ */ n("div", { className: Z.quick_replies_box, children: t.map((r) => /* @__PURE__ */ n(
+    "button",
     {
-      className: V.quick_reply,
-      onClick: () => s(c.text),
-      children: c.text
+      className: Z.quick_reply,
+      disabled: s,
+      onClick: () => c(r.text),
+      children: r.text
     },
-    c.text
+    r.text
   )) }) : null;
 }
-function F(n) {
-  return n.toLocaleTimeString("zh-TW", {
+function F(o) {
+  return o.toLocaleTimeString("zh-TW", {
     timeZone: "Asia/Taipei",
     hour: "2-digit",
     minute: "2-digit",
     hour12: !1
   });
 }
-const ht = "_time_rgg92_1", pt = {
-  time: ht
+const pt = "_time_rgg92_1", ft = {
+  time: pt
 };
-function $(n) {
-  const { time: t, className: e } = n;
-  return t ? /* @__PURE__ */ o("div", { className: x(pt.time, e), children: F(t) }) : null;
+function q(o) {
+  const { time: t, className: e } = o;
+  return t ? /* @__PURE__ */ n("div", { className: u(ft.time, e), children: F(t) }) : null;
 }
-function H(n) {
-  const { quickReplies: t, time: e, children: s } = n;
-  return /* @__PURE__ */ i("div", { className: D.template_box_content, children: [
-    /* @__PURE__ */ i("div", { className: D.content, children: [
+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__ */ o($, { time: e })
+      /* @__PURE__ */ n(q, { time: e })
     ] }),
-    !!(t != null && t.length) && /* @__PURE__ */ o(mt, { quickReplies: t })
+    !!(t != null && t.length) && /* @__PURE__ */ n(gt, { quickReplies: t })
   ] });
 }
-const gt = "_bot_avatar_14r1r_1", bt = {
-  bot_avatar: gt
+const Ct = "_bot_avatar_xrs9x_1", U = {
+  bot_avatar: Ct
 };
-function I() {
-  return /* @__PURE__ */ o("div", { className: bt.bot_avatar, children: /* @__PURE__ */ i(
+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",
     {
-      width: "25",
-      height: "24",
+      style: { width: "100%", height: "100%" },
       viewBox: "0 0 25 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ o(
+        /* @__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__ */ o(
+        /* @__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",
@@ -288,54 +311,54 @@ function I() {
     }
   ) });
 }
-const ft = "_text_1b4yq_1", yt = "_dot_1b4yq_18", Ct = "_blink_1b4yq_1", y = {
-  text: ft,
-  "text--bot": "_text--bot_1b4yq_7",
-  "typing-indicator": "_typing-indicator_1b4yq_13",
-  dot: yt,
-  blink: Ct
+const xt = "_text_1djgp_1", vt = "_dot_1djgp_18", yt = "_blink_1djgp_1", p = {
+  text: xt,
+  "text--bot": "_text--bot_1djgp_7",
+  "typing-indicator": "_typing-indicator_1djgp_13",
+  dot: vt,
+  blink: yt
 };
-function xt(n) {
-  const { children: t, onResize: e } = n, s = q(null);
-  return m(() => {
-    const c = new ResizeObserver((l) => {
-      for (const r of l) {
-        const { width: a, height: _ } = r.contentRect;
-        e(a, _);
+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);
       }
     });
     return s.current && c.observe(s.current), () => {
       c.disconnect();
     };
-  }, [s, e]), /* @__PURE__ */ o("div", { ref: s, children: t });
+  }, [s, e]), /* @__PURE__ */ n("div", { ref: s, children: t });
 }
-function vt() {
-  const { isTyping: n, displayText: t, messageBoxBottomRef: e } = k(), s = h(() => {
-    var c;
-    (c = e.current) == null || c.scrollIntoView({ behavior: "smooth" });
-  }, [e]);
-  return n ? /* @__PURE__ */ i(M, { type: "bot", direction: "horizontal", children: [
-    /* @__PURE__ */ o(I, {}),
-    /* @__PURE__ */ o(H, { time: /* @__PURE__ */ new Date(), children: /* @__PURE__ */ o("div", { className: x(y.text, y["text--bot"]), children: /* @__PURE__ */ i(xt, { onResize: s, children: [
-      /* @__PURE__ */ o("span", { children: t ?? "" }),
-      n && /* @__PURE__ */ i("span", { className: y["typing-indicator"], children: [
-        /* @__PURE__ */ o("div", { className: y.dot }),
-        /* @__PURE__ */ o("div", { className: y.dot }),
-        /* @__PURE__ */ o("div", { className: y.dot })
+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 })
       ] })
     ] }) }) })
   ] }) : null;
 }
-const Tt = "_card_root_1ygom_1", Nt = "_card_content_1ygom_10", wt = "_card_title_1ygom_17", Mt = "_card_description_1ygom_23", kt = "_card_actions_1ygom_37", N = {
-  card_root: Tt,
-  card_content: Nt,
-  card_title: wt,
-  card_description: Mt,
+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 G(n) {
-  var r;
-  const { template: t } = n, { sendMessage: e } = k(), s = A(() => (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 = A(() => {
+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(() => {
     switch (t == null ? void 0 : t.imageAspectRatio) {
       case "square":
         return "1 / 1";
@@ -343,21 +366,21 @@ function G(n) {
       default:
         return "1.51 / 1";
     }
-  }, [t]), l = h(
-    (a) => function() {
-      switch (a.type) {
+  }, [t]), r = f(
+    (i) => function() {
+      switch (i.type) {
         case "message":
-          e(a.text);
+          e(i.text);
           return;
         case "uri":
-          window.open(a.uri, "_blank");
+          window.open(i.uri, "_blank");
           return;
       }
     },
     [e]
   );
-  return /* @__PURE__ */ i("div", { className: N.card_root, children: [
-    (t == null ? void 0 : t.thumbnailImageUrl) && /* @__PURE__ */ o(
+  return /* @__PURE__ */ a("div", { className: v.card_root, children: [
+    (t == null ? void 0 : t.thumbnailImageUrl) && /* @__PURE__ */ n(
       "img",
       {
         alt: t == null ? void 0 : t.title,
@@ -370,164 +393,188 @@ function G(n) {
         }
       }
     ),
-    /* @__PURE__ */ i("div", { className: N.card_content, children: [
-      /* @__PURE__ */ o("h5", { className: N.card_title, children: t == null ? void 0 : t.title }),
-      /* @__PURE__ */ o("div", { className: N.card_description, children: t == null ? void 0 : t.text }),
-      /* @__PURE__ */ o("div", { className: N.card_actions, children: (r = t == null ? void 0 : t.buttons) == null ? void 0 : r.map((a, _) => /* @__PURE__ */ o("button", { onClick: l(a.action), children: a.label }, _)) })
+    /* @__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)) })
     ] })
   ] });
 }
-function Et(n) {
-  const { conversationMessage: t } = n, e = t.message.template;
-  return /* @__PURE__ */ i(M, { type: "bot", direction: "horizontal", children: [
-    /* @__PURE__ */ o(I, {}),
-    /* @__PURE__ */ o(
-      H,
+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(
+      $,
       {
         time: t.time,
         quickReplies: e == null ? void 0 : e.quickReplies,
-        children: /* @__PURE__ */ o(G, { template: e })
+        children: /* @__PURE__ */ n(K, { template: e })
       }
     )
   ] });
 }
-const zt = "_text_1p20y_1", St = "_content_1p20y_19", R = {
-  text: zt,
-  "text--user": "_text--user_1p20y_7",
-  "text--bot": "_text--bot_1p20y_13",
-  content: St
+const Ht = "_text_sbjtw_1", It = "_content_sbjtw_19", B = {
+  text: Ht,
+  "text--user": "_text--user_sbjtw_7",
+  "text--bot": "_text--bot_sbjtw_13",
+  content: It
 };
-function O(n) {
+function D(o) {
   var e;
-  const { conversationMessage: t } = n;
-  return t.type === "user" ? /* @__PURE__ */ i(M, { type: "user", direction: "horizontal", children: [
-    /* @__PURE__ */ o("div", { className: x(R.text, R["text--user"]), children: t.text }),
-    /* @__PURE__ */ o($, { time: t.time })
-  ] }) : /* @__PURE__ */ i(M, { type: "bot", direction: "horizontal", children: [
-    /* @__PURE__ */ o(I, {}),
-    /* @__PURE__ */ o(
-      H,
+  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(
+      $,
       {
         time: t.time,
         quickReplies: (e = t.message.template) == null ? void 0 : e.quickReplies,
-        children: /* @__PURE__ */ o("div", { className: x(R.text, R["text--bot"]), children: t.message.text })
+        children: /* @__PURE__ */ n("div", { className: u(B.text, B["text--bot"]), children: t.message.text })
       }
     )
   ] });
 }
-const Rt = "_carousel_root_sv1hc_1", At = "_carousel_time_sv1hc_12", P = {
+const Rt = "_carousel_root_sv1hc_1", qt = "_carousel_time_sv1hc_12", V = {
   carousel_root: Rt,
-  carousel_time: At
+  carousel_time: qt
 };
-function It(n) {
+function $t(o) {
   var s;
-  const { conversationMessage: t } = n, e = t.message.template;
-  return /* @__PURE__ */ i(M, { type: "bot", direction: "vertical", children: [
-    /* @__PURE__ */ o(I, {}),
-    /* @__PURE__ */ o("div", { className: P.carousel_root, children: (s = e.columns) == null ? void 0 : s.map((c, l) => /* @__PURE__ */ o(G, { template: c }, l)) }),
-    /* @__PURE__ */ o($, { className: P.carousel_time, time: t.time })
+  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 })
   ] });
 }
-const Bt = "_hint_root_4opfe_1", qt = "_time_4opfe_15", Z = {
-  hint_root: Bt,
-  time: qt
+const St = "_hint_root_g119q_1", At = "_time_g119q_14", E = {
+  hint_root: St,
+  time: At
 };
-function $t(n) {
-  const { conversationMessage: t } = n;
+function Zt(o) {
+  const { conversationMessage: t } = o;
   if (t.type === "user") return null;
   const e = t.message.template;
-  return e.type !== w.HINT ? null : /* @__PURE__ */ i("div", { className: Z.hint_root, children: [
-    /* @__PURE__ */ o("div", { className: Z.time, children: F(t.time) }),
+  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
   ] });
 }
-function Ht(n) {
-  const { conversationMessage: t } = n;
+function Ut(o) {
+  const { conversationMessage: t } = o;
   if (t.type === "user")
-    return /* @__PURE__ */ o(O, { conversationMessage: t });
+    return /* @__PURE__ */ n(D, { conversationMessage: t });
   const e = t.message.template;
   switch (e == null ? void 0 : e.type) {
-    case w.TEXT:
-      return /* @__PURE__ */ o(O, { conversationMessage: t });
-    case w.HINT:
-      return /* @__PURE__ */ o($t, { conversationMessage: t });
-    case w.BUTTON:
-      return /* @__PURE__ */ o(Et, { conversationMessage: t });
-    case w.CAROUSEL:
-      return /* @__PURE__ */ o(It, { conversationMessage: t });
+    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 });
     default:
-      return /* @__PURE__ */ o("div", { children: "Unknown template" });
+      return /* @__PURE__ */ n("div", { children: "Unknown template" });
   }
 }
 function Dt() {
-  const { conversation: n, messageBoxBottomRef: t } = k();
-  return m(() => {
-    var e;
-    (e = t.current) == null || e.scrollIntoView({ behavior: "smooth" });
-  }, [n, t]), /* @__PURE__ */ i("div", { className: it.chatbot_body, children: [
-    n.map((e) => /* @__PURE__ */ o(
-      Ht,
+  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,
       {
-        conversationMessage: e
+        conversationMessage: s
       },
       crypto.randomUUID()
     )),
-    /* @__PURE__ */ o(vt, {}),
-    /* @__PURE__ */ o("div", { ref: t })
-  ] });
+    Array.from((t == null ? void 0 : t.values()) ?? []).map((s) => /* @__PURE__ */ n(
+      Nt,
+      {
+        typingMessage: s
+      },
+      crypto.randomUUID()
+    )),
+    /* @__PURE__ */ n("div", { ref: e })
+  ] }) });
 }
-const Vt = "_chatbot_footer_1i661_1", Ot = "_chatbot_input_1i661_5", j = {
+const Vt = "_chatbot_footer_3box0_1", Et = "_chatbot_footer__content_3box0_1", Ot = "_chatbot_textarea_3box0_8", I = {
   chatbot_footer: Vt,
-  chatbot_input: Ot
+  chatbot_footer__content: Et,
+  chatbot_textarea: Ot
 };
 function Pt() {
-  const { sendMessage: n, isConnectionProcessing: t } = k(), [e, s] = C(""), c = h(
-    (r) => {
-      s(r.target.value);
+  const { sendMessage: o, isConnecting: t } = m(), [e, s] = w(""), [c, r] = w(!1), _ = f(
+    (l) => {
+      const d = l.target, h = d.value;
+      d.style.height = "20px", h && (d.style.height = `${d.scrollHeight - 16}px`), s(l.target.value);
     },
     []
-  ), l = h(
-    (r) => {
-      r.key === "Enter" && (n(e), s(""));
+  ), i = f(
+    (l) => {
+      l.key === "Enter" && !c && !t && (o(e), s(""));
     },
-    [n, e]
+    [c, t, o, e]
   );
-  return /* @__PURE__ */ o("div", { className: j.chatbot_footer, children: /* @__PURE__ */ o(
-    "input",
+  return /* @__PURE__ */ n("div", { className: I.chatbot_footer, children: /* @__PURE__ */ n("div", { className: I.chatbot_footer__content, children: /* @__PURE__ */ n(
+    "textarea",
     {
-      className: j.chatbot_input,
+      className: I.chatbot_textarea,
       disabled: t,
+      cols: 40,
       value: e,
       placeholder: "Enter message",
-      onChange: c,
-      onKeyDown: l
+      onChange: _,
+      onKeyDown: i,
+      onCompositionStart: () => r(!0),
+      onCompositionEnd: () => r(!1)
     }
-  ) });
+  ) }) });
 }
-const Zt = "_chatbot_root_1tkt9_1", jt = {
-  chatbot_root: Zt
+const Lt = "_chatbot_root_1jllh_1", Ft = "_chatbot_root__fullScreen_1jllh_12", O = {
+  chatbot_root: Lt,
+  chatbot_root__fullScreen: Ft
 };
-function Gt(n) {
-  const { config: t, customChannelId: e, initConversation: s } = n;
-  return /* @__PURE__ */ i(
-    nt,
+function Xt(o) {
+  const {
+    title: t,
+    config: e,
+    customChannelId: s,
+    initMessages: c,
+    fullScreen: r = !1,
+    avatar: _,
+    options: i
+  } = o;
+  return /* @__PURE__ */ a(
+    ot,
     {
-      className: jt.chatbot_root,
-      config: t,
-      customChannelId: e,
-      initConversation: s,
+      className: u(
+        O.chatbot_root,
+        r && O.chatbot_root__fullScreen
+      ),
+      avatar: _,
+      config: e,
+      customChannelId: s,
+      initMessages: c,
+      options: i,
       children: [
-        /* @__PURE__ */ o(ct, {}),
-        /* @__PURE__ */ o(Dt, {}),
-        /* @__PURE__ */ o(Pt, {})
+        /* @__PURE__ */ n(it, { title: t }),
+        /* @__PURE__ */ n(Dt, {}),
+        /* @__PURE__ */ n(Pt, {})
       ]
     }
   );
 }
 export {
-  Gt as Chatbot,
-  J as useAsgardServiceClient,
-  Y as useChannel,
-  et as useChatbotTyping,
-  tt as useDebounce
+  Xt as Chatbot,
+  Y as useAsgardServiceClient,
+  tt as useChannel,
+  et as useDebounce
 };