@asgard-js/react 0.1.3 → 0.1.4

package/README.md

@@ -132,6 +132,46 @@ When `enableLoadConfigFromService` is enabled, you can also control the upload f
 
 **Features**: Multiple file selection, image preview with modal view, and responsive design. Supports JPEG, PNG, GIF, WebP up to 20MB per file, maximum 10 files at once.
 
+### Conversation Export
+
+The Chatbot component includes built-in conversation export functionality, allowing users to download chat history as Markdown files. You can control this feature using the `enableExport` prop.
+
+#### Enabling Conversation Export
+
+```javascript
+<Chatbot
+  config={{
+    apiKey: 'your-api-key',
+    botProviderEndpoint: 'https://api.asgard-ai.com/ns/{namespace}/bot-provider/{botProviderId}',
+  }}
+  customChannelId="your-channel-id"
+  enableExport={true}  // Explicitly enable conversation export
+/>
+```
+
+#### Control via Remote Configuration
+
+When `enableLoadConfigFromService` is enabled, you can also control the export feature through the bot provider's `embedConfig`:
+
+```javascript
+<Chatbot
+  config={{
+    apiKey: 'your-api-key',
+    botProviderEndpoint: 'https://api.asgard-ai.com/ns/{namespace}/bot-provider/{botProviderId}',
+  }}
+  customChannelId="your-channel-id"
+  enableLoadConfigFromService={true}
+  // Export feature will be controlled by annotations.embedConfig.enableExport from the API
+/>
+```
+
+**Configuration Priority** (highest to lowest):
+1. `enableExport` prop value
+2. `annotations.embedConfig.enableExport` from bot provider metadata
+3. Default: `false`
+
+**Features**: Download button in chatbot footer, exports conversation history with timestamps and trace IDs, human-readable filename format (`{BotName}_對話紀錄_{Date}_{Time}.md`).
+
 ### API Key Authentication
 
 For applications that need dynamic API key input (such as embedded chatbots), you can use the authentication state management:
@@ -222,6 +262,7 @@ config: {
 - **customActions?**: `ReactNode[]` - Custom actions to display on the chatbot header
 - **enableLoadConfigFromService?**: `boolean` - Enable loading configuration from service
 - **enableUpload?**: `boolean` - Enable file upload functionality. When set, it takes priority over the `embedConfig.enableUpload` setting from the bot provider metadata. Defaults to `false` if not specified in either location. Supports image files (JPEG, PNG, GIF, WebP) up to 20MB per file, maximum 10 files at once.
+- **enableExport?**: `boolean` - Enable conversation export functionality. When set, it takes priority over the `embedConfig.enableExport` setting from the bot provider metadata. Defaults to `false` if not specified in either location. Adds a download button to the chatbot footer that exports the conversation history as a Markdown file with timestamps and trace IDs.
 - **maintainConnectionWhenClosed?**: `boolean` - Maintain connection when chat is closed, defaults to `false`
 - **loadingComponent?**: `ReactNode` - Custom loading component
 - **asyncInitializers?**: `Record<string, () => Promise<unknown>>` - Asynchronous initializers for app initialization before rendering any component. Good for loading data or other async operations as the initial state. It only works when `enableLoadConfigFromService` is set to `true`.

package/dist/components/templates/text-template/bot-typing-placeholder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bot-typing-placeholder.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/text-template/bot-typing-placeholder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAI3C,UAAU,yBAAyB;IACjC,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,yBAAyB,GAC/B,SAAS,CA4BX"}
+{"version":3,"file":"bot-typing-placeholder.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/text-template/bot-typing-placeholder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAI3C,UAAU,yBAAyB;IACjC,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,yBAAyB,GAC/B,SAAS,CAiBX"}

package/dist/index.js

@@ -7,7 +7,7 @@ var U = (e, t, n) => AL(e, typeof t != "symbol" ? t + "" : t, n), hC = (e, t, n)
 var pC = (e, t, n) => (hC(e, t, "read from private field"), n ? n.call(e) : t.get(e)), gC = (e, t, n) => t.has(e) ? dC("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, n), O0 = (e, t, n, i) => (hC(e, t, "write to private field"), i ? i.call(e, n) : t.set(e, n), n);
 import { jsx as N, jsxs as we, Fragment as If } from "react/jsx-runtime";
 import * as Te from "react";
-import ra, { useRef as Bi, useEffect as pt, useState as et, useCallback as Ve, useMemo as Je, useLayoutEffect as m5, createContext as $g, useContext as Ag, useImperativeHandle as ML, memo as FL, forwardRef as TL } from "react";
+import ra, { useRef as Bi, useEffect as pt, useState as Qe, useCallback as Ve, useMemo as et, useLayoutEffect as m5, createContext as $g, useContext as Ag, useImperativeHandle as ML, memo as FL, forwardRef as TL } from "react";
 import { AsgardServiceClient as NL, EventType as nu, Conversation as RL, Channel as OL, MessageTemplateType as Hs } from "@asgard-js/core";
 function mC(e) {
   return e !== null && typeof e == "object" && !Array.isArray(e);
@@ -118,7 +118,7 @@ function IL(e) {
     throw new Error("Client instance is required");
   if (!r)
     throw new Error("Custom channel id is required");
-  const [l, c] = et(null), [f, d] = et(n ?? !0), [h, p] = et(!1), [g, m] = et(!1), [y, b] = et(null), v = Ve(
+  const [l, c] = Qe(null), [f, d] = Qe(n ?? !0), [h, p] = Qe(!1), [g, m] = Qe(!1), [y, b] = Qe(null), v = Ve(
     async (E) => {
       const w = new RL({
         messages: new Map(
@@ -162,7 +162,7 @@ function IL(e) {
   );
   return pt(() => {
     !l && f && v(i);
-  }, [l, f, v, i]), pt(() => () => x(), [x]), Je(
+  }, [l, f, v, i]), pt(() => () => x(), [x]), et(
     () => ({
       isOpen: f,
       isResetting: h,
@@ -184,7 +184,7 @@ function IL(e) {
   );
 }
 function zL(e, t) {
-  const [n, i] = et(e);
+  const [n, i] = Qe(e);
   return pt(() => {
     const r = window.setTimeout(() => {
       i(e);
@@ -197,7 +197,7 @@ function BL() {
   return window.visualViewport ? [window.visualViewport.width, window.visualViewport.height] : [window.innerWidth, window.innerHeight];
 }
 function UL() {
-  const [e, t] = et(), n = Ve(() => {
+  const [e, t] = Qe(), n = Ve(() => {
     const i = BL();
     t(
       (r) => r && r[0] === i[0] && r[1] === i[1] ? r : i
@@ -220,7 +220,7 @@ function bC(e) {
   ) || e.hasAttribute("contenteditable");
 }
 function jL() {
-  const [e, t] = et(!1);
+  const [e, t] = Qe(!1);
   return pt(() => {
     function n(r) {
       if (!r.target) return;
@@ -384,9 +384,9 @@ const x5 = $g({
       n
     ),
     [...VL(n), o]
-  ), [a, u] = et(
+  ), [a, u] = Qe(
     {}
-  ), [l, c] = et(!0), [f, d] = et(null);
+  ), [l, c] = Qe(!0), [f, d] = Qe(null);
   return pt(() => {
     let h = !0;
     if (t)
@@ -751,7 +751,7 @@ function xC(e) {
       return vu(u, n);
     },
     [n, (s = i == null ? void 0 : i.embedConfig) == null ? void 0 : s.theme]
-  ), o = Je(() => r(), [r]);
+  ), o = et(() => r(), [r]);
   return /* @__PURE__ */ N(_5.Provider, { value: o, children: t });
 }
 function an() {
@@ -801,7 +801,7 @@ function _C(e) {
     initMessages: f,
     onSseMessage: d,
     onAuthError: h
-  }), w = Je(
+  }), w = et(
     () => ({
       avatar: t,
       title: n,
@@ -858,7 +858,7 @@ function XL(e) {
     errorMessageRenderer: i,
     onTemplateBtnClick: r,
     defaultLinkTarget: o
-  } = e, s = Je(
+  } = e, s = et(
     () => ({
       onErrorClick: n,
       errorMessageRenderer: i,
@@ -926,7 +926,7 @@ function wC({
   className: s
 }) {
   var m, y;
-  const [a, u] = et(""), [l, c] = et(!1), { chatbot: f } = an(), { avatar: d } = ri(), h = (b) => {
+  const [a, u] = Qe(""), [l, c] = Qe(!1), { chatbot: f } = an(), { avatar: d } = ri(), h = (b) => {
     b.preventDefault(), a.trim() && !t && e(a.trim());
   }, p = (b) => {
     u(b.target.value);
@@ -1013,7 +1013,7 @@ function EC(e) {
     maintainConnectionWhenClosed: o
   } = e, { chatbot: s } = an(), {
     data: { annotations: a }
-  } = Wv(), { avatar: u, isResetting: l, resetChannel: c, closeChannel: f } = ri(), d = Je(
+  } = Wv(), { avatar: u, isResetting: l, resetChannel: c, closeChannel: f } = ri(), d = et(
     () => ({
       maxWidth: (s == null ? void 0 : s.contentMaxWidth) ?? "1200px",
       borderBottomColor: s == null ? void 0 : s.borderColor
@@ -1067,7 +1067,7 @@ const gP = "_chatbot_body_f6sqm_1", mP = "_chatbot_body__content_f6sqm_5", SC =
   "template_box--user": "_template_box--user_1ozig_14"
 };
 function ts(e) {
-  const { type: t, direction: n = "horizontal", children: i, style: r, className: o } = e, s = Je(() => {
+  const { type: t, direction: n = "horizontal", children: i, style: r, className: o } = e, s = et(() => {
     switch (t) {
       case "user":
         return Ye(iu.template_box, iu["template_box--user"]);
@@ -1140,7 +1140,7 @@ const EP = "_time_rgg92_1", SP = {
 };
 function zf(e) {
   var o, s;
-  const { time: t, className: n } = e, { template: i } = an(), r = Je(
+  const { time: t, className: n } = e, { template: i } = an(), r = et(
     () => {
       var a, u;
       return {
@@ -1223,10 +1223,10 @@ function DP(e, t, n) {
 }
 function A5(e) {
   var l;
-  const { template: t, customStyle: n } = e, { sendMessage: i } = ri(), { onTemplateBtnClick: r, defaultLinkTarget: o } = S5(), s = Je(() => {
+  const { template: t, customStyle: n } = e, { sendMessage: i } = ri(), { onTemplateBtnClick: r, defaultLinkTarget: o } = S5(), s = et(() => {
     var c;
     return ((c = t == null ? void 0 : t.thumbnailImageUrl) == null ? void 0 : c.replace(/^http:/, "").replace(/^https:/, "")) || "https://via.assets.so/img.jpg?w=200&h=270&tc=white&bg=#eeeeee";
-  }, [t]), a = Je(() => {
+  }, [t]), a = et(() => {
     switch (t == null ? void 0 : t.imageAspectRatio) {
       case "square":
         return "1 / 1";
@@ -1344,7 +1344,7 @@ const PP = "_text_1ooxl_1", IP = "_dot_1ooxl_42", ur = {
   dot: IP
 };
 function M5({ children: e }) {
-  const [t, n] = et(null), [i, r] = et(!1);
+  const [t, n] = Qe(null), [i, r] = Qe(!1);
   return pt(() => {
     (async () => {
       try {
@@ -1358,7 +1358,7 @@ function M5({ children: e }) {
 }
 function AC(e) {
   var l, c, f, d;
-  const { message: t } = e, { avatar: n } = ri(), i = an(), { botMessage: r } = i, o = ((l = t == null ? void 0 : t.message) == null ? void 0 : l.text) || "", s = t.type === "bot", a = (f = (c = i == null ? void 0 : i.template) == null ? void 0 : c.TextMessageTemplate) == null ? void 0 : f.style, u = Je(() => {
+  const { message: t } = e, { avatar: n } = ri(), i = an(), { botMessage: r } = i, o = ((l = t == null ? void 0 : t.message) == null ? void 0 : l.text) || "", s = t.type === "bot", a = (f = (c = i == null ? void 0 : i.template) == null ? void 0 : c.TextMessageTemplate) == null ? void 0 : f.style, u = et(() => {
     var h, p, g, m, y, b, v, x, _;
     switch (t.type) {
       case "user":
@@ -1431,7 +1431,7 @@ function F5(e) {
     (f = i.current) == null || f.scrollIntoView({ behavior: "smooth" });
   }, [i]);
   GL({ ref: s, onResize: a });
-  const u = zL(t, 500), l = Je(
+  const u = zL(t, 500), l = et(
     () => {
       var f, d;
       return {
@@ -1440,7 +1440,7 @@ function F5(e) {
       };
     },
     [o]
-  ), c = Je(
+  ), c = et(
     () => {
       var f;
       return {
@@ -1478,19 +1478,13 @@ function F5(e) {
   ) : null;
 }
 function zP(e) {
-  const { placeholder: t } = e, { isConnecting: n, messages: i } = ri(), r = Je(
+  const { placeholder: t } = e, { isConnecting: n, messages: i } = ri(), r = et(
     () => Array.from((i == null ? void 0 : i.values()) ?? []).some(
-      (s) => s.type === "bot" && s.isTyping
+      (o) => o.type === "bot" && o.isTyping
     ),
     [i]
-  ), o = Je(
-    () => {
-      const a = Array.from((i == null ? void 0 : i.values()) ?? []).filter((u) => u.type === "bot").pop();
-      return a && !a.isTyping;
-    },
-    [i]
   );
-  return n && !r && !o ? /* @__PURE__ */ N(F5, { isTyping: !0, typingText: t }) : null;
+  return n && !r ? /* @__PURE__ */ N(F5, { isTyping: !0, typingText: t }) : null;
 }
 const BP = "_carousel_root_sv1hc_1", UP = "_carousel_time_sv1hc_12", MC = {
   carousel_root: BP,
@@ -13394,7 +13388,7 @@ function AV(e) {
   const t = e.bounds.clone();
   return t.empty() ? t.set(0, 0, 0, 0) : t.translate(-(e.x || 0), -(e.y || 0));
 }
-function Qe(e, t, n) {
+function Je(e, t, n) {
   const i = J(e) ? e[t] : e;
   return i ?? (n !== void 0 ? n : 0);
 }
@@ -13402,7 +13396,7 @@ function x$(e) {
   return e < 0 ? Math.ceil(-e) : 0;
 }
 function qN(e, t, n) {
-  var i = !n.nodirty, r = n.bounds === y_ ? $V : AV, o = Xt.set(0, 0, 0, 0), s = Qe(n.align, Wo), a = Qe(n.align, Ho), u = Qe(n.padding, Wo), l = Qe(n.padding, Ho), c = n.columns || t.length, f = c <= 0 ? 1 : Math.ceil(t.length / c), d = t.length, h = Array(d), p = Array(c), g = 0, m = Array(d), y = Array(f), b = 0, v = Array(d), x = Array(d), _ = Array(d), E, w, S, C, A, $, R, T, M, k, F;
+  var i = !n.nodirty, r = n.bounds === y_ ? $V : AV, o = Xt.set(0, 0, 0, 0), s = Je(n.align, Wo), a = Je(n.align, Ho), u = Je(n.padding, Wo), l = Je(n.padding, Ho), c = n.columns || t.length, f = c <= 0 ? 1 : Math.ceil(t.length / c), d = t.length, h = Array(d), p = Array(c), g = 0, m = Array(d), y = Array(f), b = 0, v = Array(d), x = Array(d), _ = Array(d), E, w, S, C, A, $, R, T, M, k, F;
   for (w = 0; w < c; ++w) p[w] = 0;
   for (w = 0; w < f; ++w) y[w] = 0;
   for (w = 0; w < d; ++w)
@@ -13446,22 +13440,22 @@ function qN(e, t, n) {
   for (S = 0; S < c; ++S)
     for (k = 0, w = S; w < d; w += c)
       k += m[w], x[w] += k - t[w].y;
-  if (s && Qe(n.center, Wo) && f > 1)
+  if (s && Je(n.center, Wo) && f > 1)
     for (w = 0; w < d; ++w)
       A = s === Wd ? g : p[w % c], M = A - _[w].x2 - t[w].x - v[w], M > 0 && (v[w] += M / 2);
-  if (a && Qe(n.center, Ho) && c !== 1)
+  if (a && Je(n.center, Ho) && c !== 1)
     for (w = 0; w < d; ++w)
       A = a === Wd ? b : y[~~(w / c)], k = A - _[w].y2 - t[w].y - x[w], k > 0 && (x[w] += k / 2);
   for (w = 0; w < d; ++w)
     o.union(_[w].translate(v[w], x[w]));
-  switch (M = Qe(n.anchor, dV), k = Qe(n.anchor, hV), Qe(n.anchor, Wo)) {
+  switch (M = Je(n.anchor, dV), k = Je(n.anchor, hV), Je(n.anchor, Wo)) {
     case fn:
       M -= o.width();
       break;
     case hb:
       M -= o.width() / 2;
   }
-  switch (Qe(n.anchor, Ho)) {
+  switch (Je(n.anchor, Ho)) {
     case fn:
       k -= o.height();
       break;
@@ -13477,7 +13471,7 @@ function qN(e, t, n) {
 function MV(e, t, n) {
   var i = kV(t), r = i.marks, o = n.bounds === y_ ? FV : TV, s = n.offset, a = n.columns || r.length, u = a <= 0 ? 1 : Math.ceil(r.length / a), l = u * a, c, f, d, h, p, g, m;
   const y = qN(e, r, n);
-  y.empty() && y.set(0, 0, 0, 0), i.rowheaders && (g = Qe(n.headerBand, Ho, null), c = Vd(e, i.rowheaders, r, a, u, -Qe(s, "rowHeader"), b$, 0, o, "x1", 0, a, 1, g)), i.colheaders && (g = Qe(n.headerBand, Wo, null), f = Vd(e, i.colheaders, r, a, a, -Qe(s, "columnHeader"), b$, 1, o, "y1", 0, 1, a, g)), i.rowfooters && (g = Qe(n.footerBand, Ho, null), d = Vd(e, i.rowfooters, r, a, u, Qe(s, "rowFooter"), v$, 0, o, "x2", a - 1, a, 1, g)), i.colfooters && (g = Qe(n.footerBand, Wo, null), h = Vd(e, i.colfooters, r, a, a, Qe(s, "columnFooter"), v$, 1, o, "y2", l - a, 1, a, g)), i.rowtitle && (p = Qe(n.titleAnchor, Ho), m = Qe(s, "rowTitle"), m = p === fn ? d + m : c - m, g = Qe(n.titleBand, Ho, 0.5), _$(e, i.rowtitle, m, 0, y, g)), i.coltitle && (p = Qe(n.titleAnchor, Wo), m = Qe(s, "columnTitle"), m = p === fn ? h + m : f - m, g = Qe(n.titleBand, Wo, 0.5), _$(e, i.coltitle, m, 1, y, g));
+  y.empty() && y.set(0, 0, 0, 0), i.rowheaders && (g = Je(n.headerBand, Ho, null), c = Vd(e, i.rowheaders, r, a, u, -Je(s, "rowHeader"), b$, 0, o, "x1", 0, a, 1, g)), i.colheaders && (g = Je(n.headerBand, Wo, null), f = Vd(e, i.colheaders, r, a, a, -Je(s, "columnHeader"), b$, 1, o, "y1", 0, 1, a, g)), i.rowfooters && (g = Je(n.footerBand, Ho, null), d = Vd(e, i.rowfooters, r, a, u, Je(s, "rowFooter"), v$, 0, o, "x2", a - 1, a, 1, g)), i.colfooters && (g = Je(n.footerBand, Wo, null), h = Vd(e, i.colfooters, r, a, a, Je(s, "columnFooter"), v$, 1, o, "y2", l - a, 1, a, g)), i.rowtitle && (p = Je(n.titleAnchor, Ho), m = Je(s, "rowTitle"), m = p === fn ? d + m : c - m, g = Je(n.titleBand, Ho, 0.5), _$(e, i.rowtitle, m, 0, y, g)), i.coltitle && (p = Je(n.titleAnchor, Wo), m = Je(s, "columnTitle"), m = p === fn ? h + m : f - m, g = Je(n.titleBand, Wo, 0.5), _$(e, i.coltitle, m, 1, y, g));
 }
 function FV(e, t) {
   return t === "x1" ? e.x || 0 : t === "y1" ? e.y || 0 : t === "x2" ? (e.x || 0) + (e.width || 0) : t === "y2" ? (e.y || 0) + (e.height || 0) : void 0;
@@ -40861,15 +40855,15 @@ const o0e = "_text_we7dz_1", s0e = "_chart_time_we7dz_30", a0e = "_quick_replies
 };
 function l0e(e) {
   var f, d, h;
-  const { message: t } = e, n = t.message.template, { template: i, botMessage: r } = an(), { avatar: o } = ri(), [s, a] = et(
+  const { message: t } = e, n = t.message.template, { template: i, botMessage: r } = an(), { avatar: o } = ri(), [s, a] = Qe(
     (n == null ? void 0 : n.defaultChart) ?? ((d = (f = n == null ? void 0 : n.chartOptions) == null ? void 0 : f[0]) == null ? void 0 : d.type)
-  ), u = Je(() => n.chartOptions, [n]), l = Je(
+  ), u = et(() => n.chartOptions, [n]), l = et(
     () => {
       var p, g;
       return ((g = (p = n == null ? void 0 : n.chartOptions) == null ? void 0 : p.find((m) => m.type === s)) == null ? void 0 : g.spec) ?? u[0].spec;
     },
     [s, n.chartOptions, u]
-  ), c = Je(
+  ), c = et(
     () => ({
       color: r == null ? void 0 : r.color,
       backgroundColor: r == null ? void 0 : r.backgroundColor
@@ -40912,7 +40906,7 @@ const c0e = "_image_box_8cz9p_1", f0e = "_full_screen_8cz9p_24", d0e = "_imageOr
 };
 function p0e(e) {
   var l;
-  const { message: t } = e, n = t.message.template, { previewImageUrl: i, originalContentUrl: r } = n, { template: o } = an(), { avatar: s } = ri(), [a, u] = et(!1);
+  const { message: t } = e, n = t.message.template, { previewImageUrl: i, originalContentUrl: r } = n, { template: o } = an(), { avatar: s } = ri(), [a, u] = Qe(!1);
   return a ? /* @__PURE__ */ we(
     "div",
     {
@@ -40962,7 +40956,7 @@ const g0e = "_message_wrapper_a44in_1", m0e = "_text_bubble_a44in_9", y0e = "_im
 };
 function w0e({ message: e }) {
   var s, a;
-  const [t, n] = et(null), i = an(), r = Je(() => {
+  const [t, n] = Qe(null), i = an(), r = et(() => {
     var u, l;
     return {
       color: (u = i == null ? void 0 : i.userMessage) == null ? void 0 : u.color,
@@ -41051,7 +41045,7 @@ function S0e() {
     var s;
     (s = n.current) == null || s.scrollIntoView({ behavior: "smooth" });
   }, [t, n]);
-  const r = Je(
+  const r = et(
     () => ({
       maxWidth: (e == null ? void 0 : e.contentMaxWidth) ?? "1200px"
     }),
@@ -41102,7 +41096,7 @@ const C0e = "_chatbot_footer_1d2n0_1", k0e = "_chatbot_footer__content_1d2n0_4",
   image_modal_close_button: j0e
 }, q0e = (e) => /* @__PURE__ */ Te.createElement("svg", { width: 15, height: 12, viewBox: "0 0 15 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ Te.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: "currentColor" })), W0e = (e) => /* @__PURE__ */ Te.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ Te.createElement("rect", { x: 3, y: 3, width: 18, height: 18, rx: 2, ry: 2, stroke: "currentColor", strokeWidth: 2 }), /* @__PURE__ */ Te.createElement("circle", { cx: 8.5, cy: 8.5, r: 1.5, fill: "currentColor" }), /* @__PURE__ */ Te.createElement("path", { d: "M21 15L16 10L5 21", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })), H0e = (e) => /* @__PURE__ */ Te.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ Te.createElement("path", { d: "M12 3V16M12 16L16 12M12 16L8 12", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ Te.createElement("path", { d: "M3 17V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V17", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })), G0e = (e) => /* @__PURE__ */ Te.createElement("svg", { width: 11, height: 16, viewBox: "0 0 11 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ Te.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: "currentColor" })), V0e = (e) => /* @__PURE__ */ Te.createElement("svg", { width: 40, height: 40, viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ Te.createElement("circle", { cx: 20, cy: 20, r: 18, fill: "#D04444" }), /* @__PURE__ */ Te.createElement("rect", { x: 12, y: 12, width: 16, height: 16, fill: "#FFFFFF", rx: 2, ry: 2 }));
 function Y0e(e) {
-  const { setValue: t, className: n, style: i } = e, [r, o] = et(!1), s = Bi(null);
+  const { setValue: t, className: n, style: i } = e, [r, o] = Qe(!1), s = Bi(null);
   pt(() => {
     const h = window.SpeechRecognition || window.webkitSpeechRecognition;
     if (!h) return;
@@ -41189,19 +41183,19 @@ function Z0e(e) {
 }
 function J0e() {
   var I, Z, ae, se, he, Ne, pe, at, Un, Cn, ee, ge, be, q;
-  const { sendMessage: e, isConnecting: t, inputPlaceholder: n, client: i, customChannelId: r, enableUpload: o, enableExport: s, messages: a, title: u } = ri(), { data: l } = Wv(), { chatbot: c } = an(), f = Je(() => {
+  const { sendMessage: e, isConnecting: t, inputPlaceholder: n, client: i, customChannelId: r, enableUpload: o, enableExport: s, messages: a, title: u } = ri(), { data: l } = Wv(), { chatbot: c } = an(), f = et(() => {
     var ie, ne;
     return o !== void 0 ? o : ((ne = (ie = l.annotations) == null ? void 0 : ie.embedConfig) == null ? void 0 : ne.enableUpload) ?? !1;
-  }, [o, (Z = (I = l.annotations) == null ? void 0 : I.embedConfig) == null ? void 0 : Z.enableUpload]), d = Je(() => {
+  }, [o, (Z = (I = l.annotations) == null ? void 0 : I.embedConfig) == null ? void 0 : Z.enableUpload]), d = et(() => {
     var ie, ne;
     return s !== void 0 ? s : ((ne = (ie = l.annotations) == null ? void 0 : ie.embedConfig) == null ? void 0 : ne.enableExport) ?? !1;
-  }, [s, (se = (ae = l.annotations) == null ? void 0 : ae.embedConfig) == null ? void 0 : se.enableExport]), h = Je(() => {
+  }, [s, (se = (ae = l.annotations) == null ? void 0 : ae.embedConfig) == null ? void 0 : se.enableExport]), h = et(() => {
     var ie, ne;
     return ((ne = (ie = l.annotations) == null ? void 0 : ie.embedConfig) == null ? void 0 : ne.title) || u || "Bot";
-  }, [(Ne = (he = l.annotations) == null ? void 0 : he.embedConfig) == null ? void 0 : Ne.title, u]), [p, g] = et(""), [m, y] = et(!1), [b, v] = et([]), [x, _] = et([]), [E, w] = et(null), S = Bi(null), C = Bi(null), A = Je(
+  }, [(Ne = (he = l.annotations) == null ? void 0 : he.embedConfig) == null ? void 0 : Ne.title, u]), [p, g] = Qe(""), [m, y] = Qe(!1), [b, v] = Qe([]), [x, _] = Qe([]), [E, w] = Qe(null), S = Bi(null), C = Bi(null), A = et(
     () => t || !p.trim() && b.length === 0,
     [t, p, b.length]
-  ), $ = Je(
+  ), $ = et(
     () => ({
       maxWidth: (c == null ? void 0 : c.contentMaxWidth) ?? "1200px",
       borderTopColor: c == null ? void 0 : c.borderColor
@@ -41453,7 +41447,7 @@ function i1e(e) {
   v5(n);
   const [, r] = UL() ?? [], o = jL();
   qL(o);
-  const s = Je(() => {
+  const s = et(() => {
     var a, u;
     return Object.assign(
       (a = i == null ? void 0 : i.chatbot) != null && a.backgroundColor ? {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asgard-js/react",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "publishConfig": {
     "access": "public"
   },
@@ -48,7 +48,7 @@
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
-    "@asgard-js/core": "^0.1.3",
+    "@asgard-js/core": "^0.1.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },