@asgard-js/react 0.0.2 → 0.0.3

package/dist/components/chatbot/chatbot-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chatbot-header.d.ts","sourceRoot":"","sources":["../../../src/components/chatbot/chatbot-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,CAclE"}
+{"version":3,"file":"chatbot-header.d.ts","sourceRoot":"","sources":["../../../src/components/chatbot/chatbot-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,CAgBlE"}

package/dist/components/chatbot/chatbot.d.ts

@@ -7,6 +7,7 @@ interface ChatbotProps {
     customChannelId: string;
     initMessages?: ConversationMessage[];
     fullScreen?: boolean;
+    avatar?: string;
     options?: {
         showDebugMessage?: boolean;
     };

package/dist/components/chatbot/chatbot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chatbot.d.ts","sourceRoot":"","sources":["../../../src/components/chatbot/chatbot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAQpE,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,YAAY,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE;QAAE,gBAAgB,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CAC1C;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,SAAS,CA0BtD"}
+{"version":3,"file":"chatbot.d.ts","sourceRoot":"","sources":["../../../src/components/chatbot/chatbot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAQpE,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,YAAY,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE;QAAE,gBAAgB,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CAC1C;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,SAAS,CA4BtD"}

package/dist/components/chatbot/profile-icon.d.ts

@@ -1,4 +1,8 @@
 import { ReactNode } from 'react';
 
-export declare function ProfileIcon(): ReactNode;
+interface ProfileIconProps {
+    avatar?: string;
+}
+export declare function ProfileIcon(props: ProfileIconProps): ReactNode;
+export {};
 //# sourceMappingURL=profile-icon.d.ts.map

package/dist/components/chatbot/profile-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"profile-icon.d.ts","sourceRoot":"","sources":["../../../src/components/chatbot/profile-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,wBAAgB,WAAW,IAAI,SAAS,CA+BvC"}
+{"version":3,"file":"profile-icon.d.ts","sourceRoot":"","sources":["../../../src/components/chatbot/profile-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,UAAU,gBAAgB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CA+C9D"}

package/dist/components/templates/avatar/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/avatar/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,wBAAgB,MAAM,IAAI,SAAS,CAoBlC"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/avatar/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,wBAAgB,MAAM,IAAI,SAAS,CA0BlC"}

package/dist/components/templates/quick-replies/quick-replies.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"quick-replies.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/quick-replies/quick-replies.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAI/C,UAAU,iBAAiB;IACzB,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAClC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CA6BhE"}
+{"version":3,"file":"quick-replies.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/quick-replies/quick-replies.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAI/C,UAAU,iBAAiB;IACzB,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAClC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CA8BhE"}

package/dist/context/asgard-service-context.d.ts

@@ -3,6 +3,7 @@ import { DetailedHTMLProps, HTMLAttributes, ReactNode, RefObject } from 'react';
 import { AsgardServiceClient, ClientConfig, ConversationBotMessage, ConversationMessage } from '@asgard-js/core';
 
 interface AsgardServiceContextType {
+    avatar?: string;
     client: AsgardServiceClient | null;
     isConnecting: boolean;
     messages: Map<string, ConversationMessage> | null;
@@ -13,6 +14,7 @@ interface AsgardServiceContextType {
 export declare const AsgardServiceContext: import('react').Context<AsgardServiceContextType>;
 interface AsgardServiceContextProviderProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     children: ReactNode;
+    avatar?: string;
     config: ClientConfig;
     customChannelId: string;
     customMessageId?: string;

package/dist/context/asgard-service-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"asgard-service-context.d.ts","sourceRoot":"","sources":["../../src/context/asgard-service-context.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,mBAAmB,EACnB,YAAY,EACZ,sBAAsB,EACtB,mBAAmB,EACpB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAEL,iBAAiB,EACjB,cAAc,EACd,SAAS,EACT,SAAS,EAIV,MAAM,OAAO,CAAC;AACf,OAAO,EAGL,gBAAgB,EACjB,MAAM,WAAW,CAAC;AAEnB,UAAU,wBAAwB;IAChC,MAAM,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACnC,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC,GAAG,IAAI,CAAC;IAClD,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,sBAAsB,CAAC,GAAG,IAAI,CAAC;IAC3D,mBAAmB,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAC/C,WAAW,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;CAC9C;AAED,eAAO,MAAM,oBAAoB,mDAO/B,CAAC;AAEH,UAAU,iCACR,SAAQ,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IACzE,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,YAAY,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE;QAAE,gBAAgB,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACzC,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;CACtC;AAED,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,iCAAiC,GACvC,SAAS,CAwCX;AAED,wBAAgB,gBAAgB,IAAI,wBAAwB,CAE3D"}
+{"version":3,"file":"asgard-service-context.d.ts","sourceRoot":"","sources":["../../src/context/asgard-service-context.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,mBAAmB,EACnB,YAAY,EACZ,sBAAsB,EACtB,mBAAmB,EACpB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAEL,iBAAiB,EACjB,cAAc,EACd,SAAS,EACT,SAAS,EAIV,MAAM,OAAO,CAAC;AACf,OAAO,EAGL,gBAAgB,EACjB,MAAM,WAAW,CAAC;AAEnB,UAAU,wBAAwB;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACnC,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC,GAAG,IAAI,CAAC;IAClD,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,sBAAsB,CAAC,GAAG,IAAI,CAAC;IAC3D,mBAAmB,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAC/C,WAAW,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;CAC9C;AAED,eAAO,MAAM,oBAAoB,mDAQ/B,CAAC;AAEH,UAAU,iCACR,SAAQ,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IACzE,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,YAAY,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE;QAAE,gBAAgB,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACzC,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;CACtC;AAED,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,iCAAiC,GACvC,SAAS,CA0CX;AAED,wBAAgB,gBAAgB,IAAI,wBAAwB,CAE3D"}

package/dist/hooks/use-channel.d.ts

@@ -10,6 +10,7 @@ interface UseChannelProps {
     onResetChannelInit?: (event: SseResponse<EventType.INIT>) => void;
 }
 export interface UseChannelReturn {
+    isConnecting: boolean;
     messages: Map<string, ConversationMessage> | null;
     typingMessages: Map<string, ConversationBotMessage> | null;
     sendMessage: (text: string, customMessageId?: string) => void;

package/dist/hooks/use-channel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-channel.d.ts","sourceRoot":"","sources":["../../src/hooks/use-channel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EAEnB,sBAAsB,EACtB,mBAAmB,EACnB,SAAS,EACT,WAAW,EACZ,MAAM,iBAAiB,CAAC;AAGzB,UAAU,eAAe;IACvB,MAAM,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACnC,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,OAAO,CAAC,EAAE;QAAE,gBAAgB,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACzC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;CACnE;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC,GAAG,IAAI,CAAC;IAClD,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,sBAAsB,CAAC,GAAG,IAAI,CAAC;IAC3D,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/D;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,gBAAgB,CAuEnE"}
+{"version":3,"file":"use-channel.d.ts","sourceRoot":"","sources":["../../src/hooks/use-channel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EAEnB,sBAAsB,EACtB,mBAAmB,EACnB,SAAS,EACT,WAAW,EACZ,MAAM,iBAAiB,CAAC;AAGzB,UAAU,eAAe;IACvB,MAAM,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACnC,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,OAAO,CAAC,EAAE;QAAE,gBAAgB,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACzC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;CACnE;AAED,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC,GAAG,IAAI,CAAC;IAClD,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,sBAAsB,CAAC,GAAG,IAAI,CAAC;IAC3D,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/D;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,gBAAgB,CA+EnE"}

package/dist/index.js

@@ -1,96 +1,101 @@
-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) {
+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 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);
+  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 n, t, e = 0, s = "", c = arguments.length; e < c; e++) (n = arguments[e]) && (t = V(n)) && (s && (s += " "), s += t);
+  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 X(n) {
-  const { config: t } = n, e = H(null);
-  return e.current || (e.current = new Q(t)), y(() => () => {
+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 G(n) {
-  const { client: t, customChannelId: e, initMessages: s, options: c } = 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 [a, _] = k(
-    new W({
+  const [r, _] = w(!1), [i, l] = w(
+    new J({
       messages: new Map(
-        s == null ? void 0 : s.map((i) => [i.messageId, i])
+        s == null ? void 0 : s.map((h) => [h.messageId, h])
       ),
       typingMessages: null
     })
   );
-  y(() => {
+  T(() => {
     t.setChannel({
       customChannelId: e,
       customMessageId: ""
     });
   }, [t, e]);
-  const l = g(
-    (i, h) => {
-      _((d) => {
-        const p = d.pushMessage(
-          d,
+  const d = f(
+    (h, b) => {
+      _(!0), l((C) => {
+        const x = C.pushMessage(
+          C,
           {
             type: "user",
-            messageId: h ?? crypto.randomUUID(),
-            text: i,
+            messageId: b ?? crypto.randomUUID(),
+            text: h,
             time: /* @__PURE__ */ new Date()
           }
         );
         return t.sendMessage(
           {
             customChannelId: e,
-            customMessageId: h,
-            text: i
+            customMessageId: b,
+            text: h
           },
           {
-            onSseMessage: (N) => {
-              _(
-                (M) => p.onMessage(M, N, {
+            onSseMessage: (z) => {
+              l(
+                (j) => x.onMessage(j, z, {
                   showDebugMessage: c == null ? void 0 : c.showDebugMessage
                 })
               );
+            },
+            onSseCompleted: () => {
+              _(!1);
             }
           }
-        ), p;
+        ), x;
       });
     },
     [t, e, c]
   );
-  return x(
+  return N(
     () => ({
-      messages: a.messages,
-      typingMessages: a.typingMessages,
-      sendMessage: l
+      isConnecting: r,
+      messages: i.messages,
+      typingMessages: i.typingMessages,
+      sendMessage: d
     }),
-    [a, l]
+    [i, r, d]
   );
 }
-function J(n, t) {
-  const [e, s] = k(n);
-  return y(() => {
+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;
+  }, [o, t]), e;
 }
-const E = F({
+const L = W({
+  avatar: void 0,
   client: null,
   isConnecting: !1,
   messages: null,
@@ -99,45 +104,59 @@ const E = F({
   sendMessage: () => {
   }
 });
-function Y(n) {
+function ot(o) {
   const {
-    children: t,
-    config: e,
-    customChannelId: s,
-    customMessageId: c,
-    delayTime: a,
-    initMessages: _,
+    avatar: t,
+    children: e,
+    config: s,
+    customChannelId: c,
+    customMessageId: r,
+    delayTime: _,
+    initMessages: i,
     options: l,
-    ...i
-  } = n, h = H(null), d = X({ config: e }), { messages: p, typingMessages: N, sendMessage: M } = G({
-    client: d,
-    customChannelId: s,
-    initMessages: _,
+    ...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
-  }), L = x(
+  }), Q = N(
     () => ({
-      client: d,
-      isConnecting: (d == null ? void 0 : d.isConnecting) ?? !1,
-      messages: p,
-      typingMessages: N,
-      sendMessage: M,
+      avatar: t,
+      client: b,
+      isConnecting: j,
+      messages: C,
+      typingMessages: x,
+      sendMessage: z,
       messageBoxBottomRef: h
     }),
-    [d, p, M, N]
+    [t, b, j, C, z, x]
   );
-  return /* @__PURE__ */ o(E.Provider, { value: L, children: /* @__PURE__ */ o("div", { ...i, children: t }) });
+  return /* @__PURE__ */ n(L.Provider, { value: Q, children: /* @__PURE__ */ n("div", { ...d, children: e }) });
 }
-function w() {
-  return K(E);
+function m() {
+  return X(L);
 }
-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 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 st() {
-  return /* @__PURE__ */ r(
+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",
@@ -146,15 +165,15 @@ function st() {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ r("g", { "clip-path": "url(#clip0_3084_29383)", children: [
-          /* @__PURE__ */ o(
+        /* @__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__ */ o(
+          /* @__PURE__ */ n(
             "path",
             {
               "fill-rule": "evenodd",
@@ -164,7 +183,7 @@ function st() {
             }
           )
         ] }),
-        /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: "clip0_3084_29383", children: /* @__PURE__ */ o(
+        /* @__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",
@@ -175,96 +194,98 @@ 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, {}),
-      /* @__PURE__ */ o("h4", { children: t })
+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__ */ o("div", { className: T.chatbot_header__extra })
+    /* @__PURE__ */ n("div", { className: k.chatbot_header__extra })
   ] }) });
 }
-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 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 v(n) {
-  const { type: t, direction: e = "horizontal", children: s } = n, c = x(() => {
+function M(o) {
+  const { type: t, direction: e = "horizontal", children: s } = o, c = N(() => {
     switch (t) {
       case "user":
-        return u(m.template_box, m["template_box--user"]);
+        return u(g.template_box, g["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"]
+          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", 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 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 ut(n) {
-  const { quickReplies: t } = n, { sendMessage: e } = w(), s = g(
-    (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: S.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: S.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 O(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 mt = "_time_rgg92_1", bt = {
-  time: mt
+const pt = "_time_rgg92_1", ft = {
+  time: pt
 };
-function I(n) {
-  const { time: t, className: e } = n;
-  return t ? /* @__PURE__ */ o("div", { className: u(bt.time, e), children: O(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 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: [
+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(I, { time: e })
+      /* @__PURE__ */ n(q, { time: e })
     ] }),
-    !!(t != null && t.length) && /* @__PURE__ */ o(ut, { quickReplies: t })
+    !!(t != null && t.length) && /* @__PURE__ */ n(gt, { quickReplies: t })
   ] });
 }
-const gt = "_bot_avatar_14r1r_1", pt = {
-  bot_avatar: gt
+const Ct = "_bot_avatar_xrs9x_1", U = {
+  bot_avatar: Ct
 };
-function z() {
-  return /* @__PURE__ */ o("div", { className: pt.bot_avatar, children: /* @__PURE__ */ r(
+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%" },
@@ -272,14 +293,14 @@ function z() {
       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",
@@ -290,54 +311,54 @@ function z() {
     }
   ) });
 }
-const ft = "_text_1djgp_1", Ct = "_dot_1djgp_18", xt = "_blink_1djgp_1", b = {
-  text: ft,
+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: Ct,
-  blink: xt
+  dot: vt,
+  blink: yt
 };
-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 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 yt(n) {
-  const { typingMessage: t } = n, { messageBoxBottomRef: e } = w(), s = g(() => {
-    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 })
+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 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
+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 P(n) {
+function K(o) {
   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(() => {
+  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";
@@ -345,21 +366,21 @@ function P(n) {
       default:
         return "1.51 / 1";
     }
-  }, [t]), a = g(
-    (l) => function() {
-      switch (l.type) {
+  }, [t]), r = f(
+    (i) => function() {
+      switch (i.type) {
         case "message":
-          e(l.text);
+          e(i.text);
           return;
         case "uri":
-          window.open(l.uri, "_blank");
+          window.open(i.uri, "_blank");
           return;
       }
     },
     [e]
   );
-  return /* @__PURE__ */ r("div", { className: f.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,
@@ -372,186 +393,188 @@ 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__ */ 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 kt(n) {
-  const { conversationMessage: t } = n, e = t.message.template;
-  return /* @__PURE__ */ r(v, { type: "bot", direction: "horizontal", children: [
-    /* @__PURE__ */ o(z, {}),
-    /* @__PURE__ */ o(
-      R,
+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(P, { template: e })
+        children: /* @__PURE__ */ n(K, { template: e })
       }
     )
   ] });
 }
-const zt = "_text_sbjtw_1", Bt = "_content_sbjtw_19", j = {
-  text: zt,
+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: Bt
+  content: It
 };
-function A(n) {
+function D(o) {
   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, {}),
-    /* @__PURE__ */ o(
-      R,
+  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: u(j.text, j["text--bot"]), children: t.message.text })
+        children: /* @__PURE__ */ n("div", { className: u(B.text, B["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 Rt = "_carousel_root_sv1hc_1", qt = "_carousel_time_sv1hc_12", V = {
+  carousel_root: Rt,
+  carousel_time: qt
 };
-function Rt(n) {
+function $t(o) {
   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 })
+  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 $t = "_hint_root_g119q_1", qt = "_time_g119q_14", U = {
-  hint_root: $t,
-  time: qt
+const St = "_hint_root_g119q_1", At = "_time_g119q_14", E = {
+  hint_root: St,
+  time: At
 };
-function St(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 !== C.HINT ? null : /* @__PURE__ */ r("div", { className: U.hint_root, children: [
-    /* @__PURE__ */ o("div", { className: U.time, children: O(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 At(n) {
-  const { conversationMessage: t } = n;
+function Ut(o) {
+  const { conversationMessage: t } = o;
   if (t.type === "user")
-    return /* @__PURE__ */ o(A, { conversationMessage: t });
+    return /* @__PURE__ */ n(D, { 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 });
+    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 Zt() {
-  const { messages: n, typingMessages: t, messageBoxBottomRef: e } = w();
-  return y(() => {
+function Dt() {
+  const { messages: o, typingMessages: t, messageBoxBottomRef: e } = m();
+  return T(() => {
     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,
+  }, [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: s
       },
       crypto.randomUUID()
     )),
-    Array.from((t == null ? void 0 : t.values()) ?? []).map((s) => /* @__PURE__ */ o(
-      yt,
+    Array.from((t == null ? void 0 : t.values()) ?? []).map((s) => /* @__PURE__ */ n(
+      Nt,
       {
         typingMessage: s
       },
       crypto.randomUUID()
     )),
-    /* @__PURE__ */ o("div", { ref: e })
+    /* @__PURE__ */ n("div", { ref: e })
   ] }) });
 }
-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
+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 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);
+function Pt() {
+  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 = g(
-    (i) => {
-      i.key === "Enter" && !c && !t && (n(e), s(""));
+  ), i = f(
+    (l) => {
+      l.key === "Enter" && !c && !t && (o(e), s(""));
     },
-    [c, t, n, e]
+    [c, t, o, e]
   );
-  return /* @__PURE__ */ o("div", { className: B.chatbot_footer, children: /* @__PURE__ */ o("div", { className: B.chatbot_footer__content, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ n("div", { className: I.chatbot_footer, children: /* @__PURE__ */ n("div", { className: I.chatbot_footer__content, children: /* @__PURE__ */ n(
     "textarea",
     {
-      className: B.chatbot_textarea,
+      className: I.chatbot_textarea,
       disabled: t,
       cols: 40,
       value: e,
       placeholder: "Enter message",
       onChange: _,
-      onKeyDown: l,
-      onCompositionStart: () => a(!0),
-      onCompositionEnd: () => a(!1)
+      onKeyDown: i,
+      onCompositionStart: () => r(!0),
+      onCompositionEnd: () => r(!1)
     }
   ) }) });
 }
-const Ot = "_chatbot_root_1jllh_1", Pt = "_chatbot_root__fullScreen_1jllh_12", D = {
-  chatbot_root: Ot,
-  chatbot_root__fullScreen: Pt
+const Lt = "_chatbot_root_1jllh_1", Ft = "_chatbot_root__fullScreen_1jllh_12", O = {
+  chatbot_root: Lt,
+  chatbot_root__fullScreen: Ft
 };
-function Qt(n) {
+function Xt(o) {
   const {
     title: t,
     config: e,
     customChannelId: s,
     initMessages: c,
-    fullScreen: a = !1,
-    options: _
-  } = n;
-  return /* @__PURE__ */ r(
-    Y,
+    fullScreen: r = !1,
+    avatar: _,
+    options: i
+  } = o;
+  return /* @__PURE__ */ a(
+    ot,
     {
       className: u(
-        D.chatbot_root,
-        a && D.chatbot_root__fullScreen
+        O.chatbot_root,
+        r && O.chatbot_root__fullScreen
       ),
+      avatar: _,
       config: e,
       customChannelId: s,
       initMessages: c,
-      options: _,
+      options: i,
       children: [
-        /* @__PURE__ */ o(ct, { title: t }),
-        /* @__PURE__ */ o(Zt, {}),
-        /* @__PURE__ */ o(Et, {})
+        /* @__PURE__ */ n(it, { title: t }),
+        /* @__PURE__ */ n(Dt, {}),
+        /* @__PURE__ */ n(Pt, {})
       ]
     }
   );
 }
 export {
-  Qt as Chatbot,
-  X as useAsgardServiceClient,
-  G as useChannel,
-  J as useDebounce
+  Xt as Chatbot,
+  Y as useAsgardServiceClient,
+  tt as useChannel,
+  et as useDebounce
 };

package/dist/style.css

@@ -1 +1 @@
-._chatbot_header_1xj9n_1 ._chatbot_header__content_1xj9n_1{margin:0 auto;max-width:1200px;padding:16px;display:flex;justify-content:space-between}._chatbot_header__title_1xj9n_9{display:flex;flex-direction:row;align-items:center;gap:8px}._chatbot_header__title_1xj9n_9>h4{margin:0;color:#fff}._chatbot_header__extra_1xj9n_20{display:flex;flex-direction:row;align-items:center;gap:8px}._chatbot_body_1f0gq_1{border-top:1px solid #434343;border-bottom:1px solid #434343;overflow-x:hidden;overflow-y:scroll}._chatbot_body_1f0gq_1 ._chatbot_body__content_1f0gq_7{margin:0 auto;display:flex;flex-direction:column;padding:16px;gap:16px;max-width:1200px}._template_box_1ozig_1{width:100%;display:flex;gap:8px}._template_box--bot_1ozig_7._template_box--horizontal_1ozig_7{flex-direction:row}._template_box--bot_1ozig_7._template_box--vertical_1ozig_10{flex-direction:column}._template_box--user_1ozig_14{flex-direction:row-reverse}._template_box_content_12ojl_1{display:flex;flex-direction:column;gap:8px}._content_12ojl_7{display:flex;flex-direction:row;gap:8px}._quick_replies_box_19pe0_1{display:flex;flex-wrap:wrap;gap:8px}._quick_reply_19pe0_7{font-size:13px;padding:4px 8px;border-radius:8px;border:1px solid #434343;background:#58585833;color:#fff;cursor:pointer}._time_rgg92_1{display:flex;align-items:flex-end;font-size:12px;color:#8c8c8c}._bot_avatar_14r1r_1{flex:0 0 auto;width:24px;height:24px}._text_1djgp_1{padding:8px 12px;border-radius:8px;color:#fff}._text--bot_1djgp_7{max-width:70%;background:#585858;border-top-left-radius:0}._typing-indicator_1djgp_13{display:inline-flex;align-items:flex-end;justify-content:center}._typing-indicator_1djgp_13 ._dot_1djgp_18{width:2px;height:2px;margin:0 2px;background-color:#fff;border-radius:50%;animation:_blink_1djgp_1 1.4s infinite ease-in-out both}._typing-indicator_1djgp_13 ._dot_1djgp_18:nth-child(1){animation-delay:0s}._typing-indicator_1djgp_13 ._dot_1djgp_18:nth-child(2){animation-delay:.2s}._typing-indicator_1djgp_13 ._dot_1djgp_18:nth-child(3){animation-delay:.4s}@keyframes _blink_1djgp_1{0%,80%,to{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-5px)}}._card_root_1ygom_1{width:255px;height:368px;max-height:380px;border-radius:8px;background:#333;overflow:hidden}._card_content_1ygom_10{display:flex;flex-direction:column;gap:8px;padding:12px}._card_title_1ygom_17{color:#fff;margin:0;font-size:15px}._card_description_1ygom_23{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:#8c8c8c;font-size:13px;font-weight:400;line-height:20px;text-underline-position:from-font;text-decoration-skip-ink:none;text-overflow:ellipsis}._card_actions_1ygom_37{display:flex;flex-direction:column;gap:8px}._card_actions_1ygom_37>button{width:100%;height:32px;line-height:32px;text-align:center;border:none;border-radius:4px;background:#4767eb;color:#fff;font-size:15px;cursor:pointer}._text_sbjtw_1{padding:8px 12px;border-radius:8px;color:#fff}._text--user_sbjtw_7{max-width:75%;background:#4767eb;border-top-right-radius:0}._text--bot_sbjtw_13{max-width:70%;background:#585858;border-top-left-radius:0}._content_sbjtw_19{display:flex;flex-direction:column;gap:8px}._carousel_root_sv1hc_1{width:100%;display:flex;flex-wrap:nowrap;overflow-x:scroll;gap:8px}._carousel_root_sv1hc_1>div{flex:0 0 auto}._carousel_time_sv1hc_12{justify-content:flex-end}._hint_root_g119q_1{margin:0 auto;display:flex;flex-direction:column;align-items:center;padding:4px 12px;gap:4px;border-radius:2px;background:#58585833;font-size:13px;color:#fff}._time_g119q_14{font-size:12px;color:#8c8c8c}._chatbot_footer_3box0_1 ._chatbot_footer__content_3box0_1{margin:0 auto;max-width:1200px;padding:16px;gap:16px}._chatbot_textarea_3box0_8{font:inherit;width:calc(100% - 20px);height:20px;max-height:240px;padding:8px 8px 8px 12px;background:#1f1f1f;border:1px solid rgb(67,67,67);border-radius:2px;color:#8c8c8c;resize:none;overflow:hidden}._chatbot_root_1jllh_1{min-width:375px;width:100%;height:100%;background-color:#141414;border-radius:8px;font-size:15px;display:grid;grid-template-rows:max-content auto max-content}._chatbot_root__fullScreen_1jllh_12{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;border-radius:0}
+._chatbot_header_1xj9n_1 ._chatbot_header__content_1xj9n_1{margin:0 auto;max-width:1200px;padding:16px;display:flex;justify-content:space-between}._chatbot_header__title_1xj9n_9{display:flex;flex-direction:row;align-items:center;gap:8px}._chatbot_header__title_1xj9n_9>h4{margin:0;color:#fff}._chatbot_header__extra_1xj9n_20{display:flex;flex-direction:row;align-items:center;gap:8px}._chatbot_body_1f0gq_1{border-top:1px solid #434343;border-bottom:1px solid #434343;overflow-x:hidden;overflow-y:scroll}._chatbot_body_1f0gq_1 ._chatbot_body__content_1f0gq_7{margin:0 auto;display:flex;flex-direction:column;padding:16px;gap:16px;max-width:1200px}._template_box_1ozig_1{width:100%;display:flex;gap:8px}._template_box--bot_1ozig_7._template_box--horizontal_1ozig_7{flex-direction:row}._template_box--bot_1ozig_7._template_box--vertical_1ozig_10{flex-direction:column}._template_box--user_1ozig_14{flex-direction:row-reverse}._template_box_content_12ojl_1{display:flex;flex-direction:column;gap:8px}._content_12ojl_7{display:flex;flex-direction:row;gap:8px}._quick_replies_box_zoq7y_1{display:flex;flex-wrap:wrap;gap:8px}._quick_reply_zoq7y_7{font:inherit;font-size:13px;padding:4px 8px;border-radius:8px;border:1px solid #434343;background:#58585833;color:#fff;cursor:pointer}._time_rgg92_1{display:flex;align-items:flex-end;font-size:12px;color:#8c8c8c}._bot_avatar_xrs9x_1{flex:0 0 auto;width:24px;height:24px;border-radius:50%}._text_1djgp_1{padding:8px 12px;border-radius:8px;color:#fff}._text--bot_1djgp_7{max-width:70%;background:#585858;border-top-left-radius:0}._typing-indicator_1djgp_13{display:inline-flex;align-items:flex-end;justify-content:center}._typing-indicator_1djgp_13 ._dot_1djgp_18{width:2px;height:2px;margin:0 2px;background-color:#fff;border-radius:50%;animation:_blink_1djgp_1 1.4s infinite ease-in-out both}._typing-indicator_1djgp_13 ._dot_1djgp_18:nth-child(1){animation-delay:0s}._typing-indicator_1djgp_13 ._dot_1djgp_18:nth-child(2){animation-delay:.2s}._typing-indicator_1djgp_13 ._dot_1djgp_18:nth-child(3){animation-delay:.4s}@keyframes _blink_1djgp_1{0%,80%,to{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-5px)}}._card_root_1ygom_1{width:255px;height:368px;max-height:380px;border-radius:8px;background:#333;overflow:hidden}._card_content_1ygom_10{display:flex;flex-direction:column;gap:8px;padding:12px}._card_title_1ygom_17{color:#fff;margin:0;font-size:15px}._card_description_1ygom_23{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:#8c8c8c;font-size:13px;font-weight:400;line-height:20px;text-underline-position:from-font;text-decoration-skip-ink:none;text-overflow:ellipsis}._card_actions_1ygom_37{display:flex;flex-direction:column;gap:8px}._card_actions_1ygom_37>button{width:100%;height:32px;line-height:32px;text-align:center;border:none;border-radius:4px;background:#4767eb;color:#fff;font-size:15px;cursor:pointer}._text_sbjtw_1{padding:8px 12px;border-radius:8px;color:#fff}._text--user_sbjtw_7{max-width:75%;background:#4767eb;border-top-right-radius:0}._text--bot_sbjtw_13{max-width:70%;background:#585858;border-top-left-radius:0}._content_sbjtw_19{display:flex;flex-direction:column;gap:8px}._carousel_root_sv1hc_1{width:100%;display:flex;flex-wrap:nowrap;overflow-x:scroll;gap:8px}._carousel_root_sv1hc_1>div{flex:0 0 auto}._carousel_time_sv1hc_12{justify-content:flex-end}._hint_root_g119q_1{margin:0 auto;display:flex;flex-direction:column;align-items:center;padding:4px 12px;gap:4px;border-radius:2px;background:#58585833;font-size:13px;color:#fff}._time_g119q_14{font-size:12px;color:#8c8c8c}._chatbot_footer_3box0_1 ._chatbot_footer__content_3box0_1{margin:0 auto;max-width:1200px;padding:16px;gap:16px}._chatbot_textarea_3box0_8{font:inherit;width:calc(100% - 20px);height:20px;max-height:240px;padding:8px 8px 8px 12px;background:#1f1f1f;border:1px solid rgb(67,67,67);border-radius:2px;color:#8c8c8c;resize:none;overflow:hidden}._chatbot_root_1jllh_1{min-width:375px;width:100%;height:100%;background-color:#141414;border-radius:8px;font-size:15px;display:grid;grid-template-rows:max-content auto max-content}._chatbot_root__fullScreen_1jllh_12{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;border-radius:0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asgard-js/react",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "publishConfig": {
     "access": "public"
   },