@automattic/agenttic-ui 0.1.62 → 0.1.64

package/dist/components/chat/Messages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Messages.d.ts","sourceRoot":"","sources":["../../../src/components/chat/Messages.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,aAAa,CAAC;AAS1D,UAAU,aAAa;IACtB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,eAAe,CAAC,EAAE,aAAa,CAAE;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAE,CAAC;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CACpC;AAED,wBAAgB,QAAQ,CAAE,EACzB,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,SAAS,EACT,eAAe,EACf,eAAe,EACf,gBAAwB,GACxB,EAAE,aAAa,kDAqGf"}
+{"version":3,"file":"Messages.d.ts","sourceRoot":"","sources":["../../../src/components/chat/Messages.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,aAAa,CAAC;AAS1D,UAAU,aAAa;IACtB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,eAAe,CAAC,EAAE,aAAa,CAAE;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAE,CAAC;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CACpC;AAED,wBAAgB,QAAQ,CAAE,EACzB,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,SAAS,EACT,eAAe,EACf,eAAe,EACf,gBAAwB,GACxB,EAAE,aAAa,kDAuGf"}

package/dist/index.js

@@ -1669,9 +1669,9 @@ function dr(t, e) {
     const o = (i = c.locale_data) == null ? void 0 : i.messages;
     if (o) {
       const n = "", s = Object.fromEntries(
-        Object.entries(o).map(([l, d]) => {
+        Object.entries(o).map(([d, l]) => {
           var h;
-          if (l === "")
+          if (d === "")
             return [
               "",
               {
@@ -1680,8 +1680,8 @@ function dr(t, e) {
                 lang: ((h = o[""]) == null ? void 0 : h.lang) || t
               }
             ];
-          const u = l.indexOf(n);
-          return [u > -1 ? l.slice(u + 1) : l, d];
+          const u = d.indexOf(n);
+          return [u > -1 ? d.slice(u + 1) : d, l];
         })
       );
       kt(s, r);
@@ -1720,7 +1720,7 @@ function Oa(t) {
     i(e);
   }, [e]), s = v(() => {
     i(
-      (l) => l === "collapsed" ? "compact" : "collapsed"
+      (d) => d === "collapsed" ? "compact" : "collapsed"
     );
   }, []);
   return {
@@ -1742,12 +1742,12 @@ function Na({
   floatingChatState: o,
   disabled: n = !1
 }) {
-  const s = E(null), l = v(() => {
+  const s = E(null), d = v(() => {
     e(""), s.current && (s.current.style.height = "auto", setTimeout(() => {
       var g;
       (g = s.current) == null || g.focus();
     }, 100));
-  }, [e]), d = v(() => {
+  }, [e]), l = v(() => {
     const g = s.current;
     if (!g)
       return;
@@ -1759,19 +1759,19 @@ function Na({
     )}px`;
   }, []), u = v(
     (g) => {
-      g.key === "Enter" && !g.shiftKey && !i && !c && !n && (g.preventDefault(), r(t.trim()), l());
+      g.key === "Enter" && !g.shiftKey && !i && !c && !n && (g.preventDefault(), r(t.trim()), d());
     },
-    [t, i, c, r, l, n]
+    [t, i, c, r, d, n]
   );
   return O(() => {
-    d();
-  }, [t, o, d]), {
+    l();
+  }, [t, o, l]), {
     value: t,
     setValue: e,
-    clear: l,
+    clear: d,
     textareaRef: s,
     handleKeyDown: u,
-    adjustHeight: d
+    adjustHeight: l
   };
 }
 function gr() {
@@ -1891,13 +1891,13 @@ const hr = "button-module_button", fr = "button-module_pressed", vr = "button-mo
     children: o,
     asChild: n = !1,
     pressed: s = !1,
-    ...l
-  }, d) {
+    ...d
+  }, l) {
     const u = n ? yn : "button", g = !!c, h = i || (g && !o ? "icon" : void 0);
     return /* @__PURE__ */ w(
       u,
       {
-        ref: d,
+        ref: l,
         "data-slot": "button",
         className: ne(
           Be.button,
@@ -1908,7 +1908,7 @@ const hr = "button-module_button", fr = "button-module_pressed", vr = "button-mo
           e
         ),
         "aria-pressed": s,
-        ...l,
+        ...d,
         children: [
           c,
           o
@@ -2120,8 +2120,8 @@ function ft({
   placeholder: o = $("Ask anything", "a8c-agenttic"),
   isProcessing: n,
   onBlur: s,
-  onFocus: l,
-  onClick: d,
+  onFocus: d,
+  onClick: l,
   fromCompact: u = !1,
   onExpand: g,
   showExpandButton: h = !0,
@@ -2233,8 +2233,8 @@ function ft({
                   onChange: (M) => e(M.target.value),
                   onKeyDown: Z,
                   onBlur: s,
-                  onFocus: l,
-                  onClick: d,
+                  onFocus: d,
+                  onClick: l,
                   placeholder: x ? "" : Q,
                   rows: 1,
                   "aria-label": $("Chat input", "a8c-agenttic")
@@ -2283,14 +2283,14 @@ const Vr = "Suggestions-module_container", Br = "Suggestions-module_vertical", H
   onMouseLeave: n,
   translateY: s = "-100%"
 }) => {
-  const { variant: l } = we(), d = Ge(
-    () => l === "floating" ? e == null ? void 0 : e.slice(0, 3) : e,
-    [e, l]
+  const { variant: d } = we(), l = Ge(
+    () => d === "floating" ? e == null ? void 0 : e.slice(0, 3) : e,
+    [e, d]
   ), u = async (g, h) => {
     let N = !0;
     g.action && (N = await g.action()), N && r && g.prompt && r(g, h);
   };
-  return !d || d.length === 0 ? null : /* @__PURE__ */ a(Ye, { children: c && /* @__PURE__ */ a(
+  return !l || l.length === 0 ? null : /* @__PURE__ */ a(Ye, { children: c && /* @__PURE__ */ a(
     ee.div,
     {
       "data-slot": "suggestions",
@@ -2305,7 +2305,7 @@ const Vr = "Suggestions-module_container", Br = "Suggestions-module_vertical", H
       transition: rt,
       onMouseEnter: o,
       onMouseLeave: n,
-      children: d.map(
+      children: l.map(
         (g, h) => /* @__PURE__ */ a(
           ee.div,
           {
@@ -2322,7 +2322,7 @@ const Vr = "Suggestions-module_container", Br = "Suggestions-module_vertical", H
                 onClick: (N) => {
                   N.stopPropagation(), u(
                     g,
-                    d
+                    l
                   );
                 },
                 variant: "outline",
@@ -2344,8 +2344,8 @@ function Zr() {
   }, []), r = v(
     (o, n, s) => {
       e(o);
-      const l = setTimeout(n, s);
-      return t.current.set(o, l), l;
+      const d = setTimeout(n, s);
+      return t.current.set(o, d), d;
     },
     [e]
   ), i = v(() => {
@@ -2370,8 +2370,8 @@ function Ua({
   placeholder: o,
   isProcessing: n,
   onBlur: s,
-  onFocus: l,
-  onExpand: d,
+  onFocus: d,
+  onExpand: l,
   showExpandButton: u = !0,
   focusOnMount: g = !1,
   customActions: h,
@@ -2391,8 +2391,8 @@ function Ua({
       zr
     );
   }, [m]), U = v(() => {
-    _ && d && !t && d();
-  }, [_, d, t]);
+    _ && l && !t && l();
+  }, [_, l, t]);
   return O(() => {
     if (j(), t) {
       P(!1);
@@ -2422,9 +2422,9 @@ function Ua({
         placeholder: o,
         isProcessing: n,
         onBlur: s,
-        onFocus: l,
+        onFocus: d,
         onClick: U,
-        onExpand: d,
+        onExpand: l,
         showExpandButton: u,
         focusOnMount: g,
         customActions: h,
@@ -2489,8 +2489,8 @@ function Va({
   variant: o = "floating",
   triggerIcon: n,
   placeholder: s,
-  notice: l,
-  onOpen: d,
+  notice: d,
+  onOpen: l,
   onExpand: u,
   onClose: g,
   onStop: h,
@@ -2577,8 +2577,8 @@ function Va({
     },
     [k, c, y, L]
   ), yt = v(() => {
-    se.current = !0, f.open(), d == null || d(), u == null || u();
-  }, [f, d, u]), Ue = v(() => {
+    se.current = !0, f.open(), l == null || l(), u == null || u();
+  }, [f, l, u]), Ue = v(() => {
     var B, te, ae;
     const I = (te = (B = ye.current) == null ? void 0 : B.ownerDocument) == null ? void 0 : te.activeElement;
     return !(I && ((ae = ye.current) != null && ae.contains(I)) || G.trim());
@@ -2679,7 +2679,7 @@ function Va({
     ),
     dismissible: !1,
     status: "error"
-  } : l, Tt = {
+  } : d, Tt = {
     // Core data
     messages: e,
     isProcessing: r,
@@ -2893,9 +2893,9 @@ function no({
 }) {
   const r = E(0), i = E(!0), c = E(!0), o = E(0), n = E(null), s = v(() => {
     cancelAnimationFrame(o.current), o.current = 0, n.current = null;
-  }, []), l = v(() => {
+  }, []), d = v(() => {
     s();
-    const d = () => {
+    const l = () => {
       const u = t.current;
       if (!u || !c.current) {
         s();
@@ -2915,47 +2915,47 @@ function no({
         u.scrollTop = g, s();
         return;
       }
-      u.scrollTop += Math.ceil(h * to), n.current = u.scrollTop, o.current = requestAnimationFrame(d);
+      u.scrollTop += Math.ceil(h * to), n.current = u.scrollTop, o.current = requestAnimationFrame(l);
     };
-    o.current = requestAnimationFrame(d);
+    o.current = requestAnimationFrame(l);
   }, [t, s]);
   O(() => {
-    const d = t.current;
-    if (!d)
+    const l = t.current;
+    if (!l)
       return;
     const u = () => {
       c.current = !1, s();
     };
-    return d.addEventListener("wheel", u, {
+    return l.addEventListener("wheel", u, {
       passive: !0
-    }), d.addEventListener("touchmove", u, {
+    }), l.addEventListener("touchmove", u, {
       passive: !0
     }), () => {
-      d.removeEventListener("wheel", u), d.removeEventListener("touchmove", u);
+      l.removeEventListener("wheel", u), l.removeEventListener("touchmove", u);
     };
   }, [t, s]), O(() => s, [s]), O(() => {
-    const d = t.current;
-    if (!d || e.length === 0) {
+    const l = t.current;
+    if (!l || e.length === 0) {
       r.current = e.length;
       return;
     }
     const u = e.length > r.current, g = e[e.length - 1];
     if (i.current) {
-      d.scrollTop = d.scrollHeight, i.current = !1, r.current = e.length;
+      l.scrollTop = l.scrollHeight, i.current = !1, r.current = e.length;
       return;
     }
     if (u && g.role === "user" && (c.current = !0, s()), !c.current) {
       r.current = e.length;
       return;
     }
-    g.role === "agent" ? o.current || l() : u && d.scrollTo({
-      top: d.scrollHeight,
+    g.role === "agent" ? o.current || d() : u && l.scrollTo({
+      top: l.scrollHeight,
       behavior: "smooth"
     }), r.current = e.length;
   }, [
     e,
     t,
-    l,
+    d,
     s
   ]);
 }
@@ -3024,9 +3024,9 @@ const io = "Message-module_message", co = "Message-module_user", so = "Message-m
         if (n.type === "text" && n.text)
           return /* @__PURE__ */ a(r, { children: n.text }, s);
         if (n.type === "component" && n.component) {
-          const l = n.component;
+          const d = n.component;
           return /* @__PURE__ */ a(
-            l,
+            d,
             {
               ...n.componentProps || {}
             },
@@ -3113,15 +3113,15 @@ function Wa({
   thinkingMessage: o,
   messagesPosition: n = "top"
 }) {
-  const s = E(null), l = wo(t);
-  no({ scrollAreaRef: s, visibleMessages: l });
-  const d = l.length > 0 && l[l.length - 1].role === "agent", u = Ge(() => {
-    const h = l.filter(
+  const s = E(null), d = wo(t);
+  no({ scrollAreaRef: s, visibleMessages: d });
+  const l = Ge(() => {
+    const h = d.filter(
       (D) => D.role === "agent"
     );
     return h.length ? h[h.length - 1].content.filter((D) => D.type === "text").map((D) => D.text).join(" ") : "";
-  }, [l]), [g] = bn(u, 1e3);
-  return l.length === 0 && !e ? i ? /* @__PURE__ */ a(
+  }, [d]), [u] = bn(l, 1e3), g = l !== u;
+  return d.length === 0 && !e ? i ? /* @__PURE__ */ a(
     "div",
     {
       "data-slot": "messages",
@@ -3142,7 +3142,7 @@ function Wa({
           height: "1px",
           overflow: "hidden"
         },
-        children: g
+        children: u
       }
     ),
     /* @__PURE__ */ a(
@@ -3155,7 +3155,7 @@ function Wa({
         ),
         ref: s,
         children: /* @__PURE__ */ w(Ye, { mode: "popLayout", children: [
-          l.map((h) => /* @__PURE__ */ a(
+          d.map((h) => /* @__PURE__ */ a(
             mo,
             {
               message: h,
@@ -3163,7 +3163,7 @@ function Wa({
             },
             h.reactKey || h.id
           )),
-          e && !d && /* @__PURE__ */ a(bo, { content: o }),
+          e && !g && /* @__PURE__ */ a(bo, { content: o }),
           r && /* @__PURE__ */ a(
             "div",
             {
@@ -3236,8 +3236,8 @@ function za({
 } = {}) {
   const {
     inputValue: s,
-    setInputValue: l,
-    handleSubmit: d,
+    setInputValue: d,
+    handleSubmit: l,
     handleKeyDown: u,
     textareaRef: g,
     placeholder: h,
@@ -3265,8 +3265,8 @@ function za({
     ft,
     {
       value: s,
-      onChange: l,
-      onSubmit: d,
+      onChange: d,
+      onSubmit: l,
       onKeyDown: m,
       onFocus: S,
       onBlur: P,
@@ -3297,8 +3297,8 @@ function Ga({
     inputValue: o,
     messages: n,
     variant: s,
-    emptyView: l
-  } = we(), d = v(
+    emptyView: d
+  } = we(), l = v(
     (u, g) => {
       try {
         const h = u.prompt ?? u.label;
@@ -3310,11 +3310,11 @@ function Ga({
     },
     [r, c]
   );
-  return o && !e || l && ["floating", "embedded"].includes(s) && n.length === 0 && !o ? null : /* @__PURE__ */ a(
+  return o && !e || d && ["floating", "embedded"].includes(s) && n.length === 0 && !o ? null : /* @__PURE__ */ a(
     it,
     {
       suggestions: i,
-      onSubmit: d,
+      onSubmit: l,
       className: t
     }
   );
@@ -3413,7 +3413,7 @@ function Ya({
   className: o,
   status: n
 }) {
-  const l = v(() => {
+  const d = v(() => {
     if (ce.isValidElement(t))
       return t;
     if (t === !1 || t === null)
@@ -3442,14 +3442,14 @@ function Ya({
       ),
       children: [
         /* @__PURE__ */ w("div", { className: be.content, children: [
-          l && /* @__PURE__ */ a("div", { className: be.icon, children: l }),
+          d && /* @__PURE__ */ a("div", { className: be.icon, children: d }),
           /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
             ht,
             {
               allowedElements: ["p", "strong", "em", "a", "br"],
               unwrapDisallowed: !0,
               components: {
-                a: ({ node: d, ...u }) => /* @__PURE__ */ a(
+                a: ({ node: l, ...u }) => /* @__PURE__ */ a(
                   "a",
                   {
                     ...u,
@@ -3593,7 +3593,7 @@ function Vo({
   label: i,
   disabled: c
 } = {}) {
-  const [o, n] = z(!1), s = E(null), l = ce.useId(), d = () => {
+  const [o, n] = z(!1), s = E(null), d = ce.useId(), l = () => {
     n((C) => !C);
   }, u = () => {
     n(!1);
@@ -3638,7 +3638,7 @@ function Vo({
     o && ((C = g.floating) != null && C.current) && ((y = (k = g.floating) == null ? void 0 : k.current) == null || y.focus());
   }, [o]);
   const N = (C) => {
-    (C.key === "Enter" || C.key === " ") && (C.preventDefault(), d());
+    (C.key === "Enter" || C.key === " ") && (C.preventDefault(), l());
   }, D = i ?? "Input Toolbar";
   return /* @__PURE__ */ a("div", { ref: s, className: e, children: /* @__PURE__ */ w("div", { className: We.container, children: [
     /* @__PURE__ */ w(
@@ -3646,12 +3646,12 @@ function Vo({
       {
         ref: g.setReference,
         type: "button",
-        onClick: d,
+        onClick: l,
         onKeyDown: N,
         className: We.button,
         "aria-expanded": o,
         "aria-haspopup": "true",
-        "aria-controls": o ? l : void 0,
+        "aria-controls": o ? d : void 0,
         "aria-label": D,
         disabled: c,
         children: [
@@ -3684,7 +3684,7 @@ function Vo({
       "div",
       {
         ref: g.setFloating,
-        id: l,
+        id: d,
         className: We.dropdown,
         role: "dialog",
         "aria-label": D,
@@ -3733,8 +3733,8 @@ function Ho({
   placeholder: o,
   isProcessing: n,
   onStop: s,
-  fromCompact: l = !1,
-  onExpand: d,
+  fromCompact: d = !1,
+  onExpand: l,
   disabled: u,
   notice: g,
   suggestions: h,
@@ -3788,8 +3788,8 @@ function Ho({
             placeholder: o,
             isProcessing: n,
             onStop: s,
-            fromCompact: l,
-            onExpand: d,
+            fromCompact: d,
+            onExpand: l,
             showExpandButton: !1,
             focusOnMount: D,
             customActions: C,
@@ -3810,8 +3810,8 @@ function Lt({
   onKeyDown: o,
   textareaRef: n,
   placeholder: s,
-  isProcessing: l,
-  onStop: d,
+  isProcessing: d,
+  onStop: l,
   fromCompact: u = !1,
   showHeader: g = !1,
   onClose: h,
@@ -3839,7 +3839,7 @@ function Lt({
           Wa,
           {
             messages: t,
-            isProcessing: l,
+            isProcessing: d,
             error: e,
             emptyView: C,
             messageRenderer: _
@@ -3854,8 +3854,8 @@ function Lt({
             onKeyDown: o,
             textareaRef: n,
             placeholder: s,
-            isProcessing: l,
-            onStop: d,
+            isProcessing: d,
+            onStop: l,
             fromCompact: u,
             onExpand: N,
             notice: D,
@@ -3877,8 +3877,8 @@ function Gi({
   triggerIcon: o,
   placeholder: n = $("Ask anything", "a8c-agenttic"),
   notice: s,
-  onOpen: l,
-  onExpand: d,
+  onOpen: d,
+  onExpand: l,
   onClose: u,
   onStop: g,
   emptyView: h,
@@ -3901,15 +3901,15 @@ function Gi({
     value: S,
     setValue: P,
     onSubmit: async (b) => {
-      m.state !== "expanded" && (d == null || d()), m.setState("expanded"), await i(b);
+      m.state !== "expanded" && (l == null || l()), m.setState("expanded"), await i(b);
     },
     isProcessing: e,
     floatingChatState: m.state
   }), [Q, re] = z(56), [q, de] = z(
     Ea
   ), me = E(null), M = E(null), G = E(null), Ne = q === "right" ? window.innerWidth - T.COMPACT_WIDTH - T.VIEWPORT_OFFSET * 2 : 0, f = at(Ne), se = at(0), pe = xt(), Ie = v(() => {
-    j.current = !0, m.open(), l == null || l(), d == null || d();
-  }, [m, l, d]), le = v(() => {
+    j.current = !0, m.open(), d == null || d(), l == null || l();
+  }, [m, d, l]), le = v(() => {
     var F, L, oe;
     const b = (L = (F = G.current) == null ? void 0 : F.ownerDocument) == null ? void 0 : L.activeElement;
     return !(b && ((oe = G.current) != null && oe.contains(b)) || S.trim());
@@ -3930,11 +3930,11 @@ function Gi({
   }, [m, le]), Ce = v(async () => {
     if (x.value.trim()) {
       const b = x.value.trim();
-      x.clear(), m.state !== "expanded" && (d == null || d()), m.setState("expanded"), await i(b);
+      x.clear(), m.state !== "expanded" && (l == null || l()), m.setState("expanded"), await i(b);
     }
-  }, [x, i, m, d]), _e = v(() => {
-    U.current = !0, d == null || d(), m.setState("expanded");
-  }, [d, m]), Ee = v(() => {
+  }, [x, i, m, l]), _e = v(() => {
+    U.current = !0, l == null || l(), m.setState("expanded");
+  }, [l, m]), Ee = v(() => {
     H.current = !0, x.clear(), m.close(), u && u();
   }, [x, m, u]), p = v(
     (b) => {
@@ -4176,14 +4176,14 @@ const Wo = "ImageUploader-module_container", Zo = "ImageUploader-module_active",
       {
         className: J.previewItem,
         draggable: e,
-        onDragStart: (l) => i(t, l),
-        onDragEnd: (l) => c(t, l),
+        onDragStart: (d) => i(t, d),
+        onDragEnd: (d) => c(t, d),
         children: [
           /* @__PURE__ */ a(
             "button",
             {
               className: J.removeButton,
-              onClick: (l) => o(l, t),
+              onClick: (d) => o(d, t),
               "aria-label": $("Remove image", "a8c-agenttic"),
               type: "button",
               children: /* @__PURE__ */ a(
@@ -4240,8 +4240,8 @@ const Wo = "ImageUploader-module_container", Zo = "ImageUploader-module_active",
   onDrop: o,
   onPaste: n,
   onRemoveImage: s,
-  onImageDragStart: l,
-  onImageDragEnd: d,
+  onImageDragStart: d,
+  onImageDragEnd: l,
   acceptedFileTypes: u = ["image/jpeg", "image/png"],
   maxFileSize: g,
   maxFiles: h,
@@ -4392,14 +4392,14 @@ const Wo = "ImageUploader-module_container", Zo = "ImageUploader-module_active",
     (p = X.current) == null || p.click();
   }, se = v(
     (p, R) => {
-      l == null || l(p, R);
+      d == null || d(p, R);
     },
-    [l]
+    [d]
   ), pe = v(
     (p, R) => {
-      d == null || d(p, R);
+      l == null || l(p, R);
     },
-    [d]
+    [l]
   ), Ie = v(
     (p, R) => {
       p.stopPropagation(), s(R);
@@ -4585,42 +4585,42 @@ const qi = ({
   header: r,
   disabled: i = !1
 }) => {
-  const [c, o] = z(null), n = E(null), s = (l) => {
-    o(l.url), e(l);
+  const [c, o] = z(null), n = E(null), s = (d) => {
+    o(d.url), e(d);
   };
   return O(() => {
     if (i || !c)
       return;
-    const l = (d) => {
-      n.current && !n.current.contains(d.target) && (o(null), e(null));
+    const d = (l) => {
+      n.current && !n.current.contains(l.target) && (o(null), e(null));
     };
-    return window.addEventListener("click", l, !0), () => window.removeEventListener("click", l, !0);
+    return window.addEventListener("click", d, !0), () => window.removeEventListener("click", d, !0);
   }, [e, i, c]), /* @__PURE__ */ w(ee.div, { children: [
     r || /* @__PURE__ */ w("div", { className: Pe.header, children: [
       /* @__PURE__ */ a(Ii, {}),
       " Done"
     ] }),
-    /* @__PURE__ */ a("div", { className: Pe.container, ref: n, children: t.map((l) => /* @__PURE__ */ a(
+    /* @__PURE__ */ a("div", { className: Pe.container, ref: n, children: t.map((d) => /* @__PURE__ */ a(
       "button",
       {
         className: ne(
           Pe.imageButton,
-          !i && c === l.url ? Pe.selected : "",
+          !i && c === d.url ? Pe.selected : "",
           i ? Pe.disabled : ""
         ),
-        onClick: () => s(l),
+        onClick: () => s(d),
         disabled: i,
         type: "button",
         children: /* @__PURE__ */ a(
           "img",
           {
-            src: l.url,
-            alt: l.alt,
+            src: d.url,
+            alt: d.alt,
             className: Pe.image
           }
         )
       },
-      l.url
+      d.url
     )) })
   ] });
 };
@@ -4917,8 +4917,8 @@ const ki = (t, e = "") => {
       if (n instanceof Date)
         s = n;
       else if (typeof n == "string") {
-        const l = new Date(n);
-        isNaN(l.getTime()) || (s = l);
+        const d = new Date(n);
+        isNaN(d.getTime()) || (s = d);
       }
       return s ? `${(s.getMonth() + 1).toString().padStart(2, "0")}/${s.getDate().toString().padStart(2, "0")}` : String(n || "");
     },
@@ -4948,16 +4948,16 @@ const ki = (t, e = "") => {
     renderTooltip: o,
     margin: n,
     mode: s = "time-comparison",
-    truncateLabels: l = !0,
-    maxLabelLength: d = 15,
+    truncateLabels: d = !0,
+    maxLabelLength: l = 15,
     error: u,
     ...g
-  } = t, h = (_, S) => !l || _.length <= S ? _ : _.substring(0, S - 3) + "...", N = () => {
+  } = t, h = (_, S) => !d || _.length <= S ? _ : _.substring(0, S - 3) + "...", N = () => {
     if (s === "item-comparison" && e && e.length > 0) {
       let _ = "";
       return e.forEach((S) => {
         S != null && S.data && S.data.forEach((P) => {
-          const m = P.label || "", j = h(m, d);
+          const m = P.label || "", j = h(m, l);
           j.length > _.length && (_ = j);
         });
       }), pt(80, 6, 25, _.length);
@@ -4974,7 +4974,7 @@ const ki = (t, e = "") => {
     axis: {
       x: {
         orientation: "bottom",
-        tickFormat: (_) => h(_, d),
+        tickFormat: (_) => h(_, l),
         tickLabelProps: {
           fontSize: 11,
           textAnchor: "end",
@@ -5070,8 +5070,8 @@ const Mi = (t) => {
     renderTooltip: o,
     margin: n,
     withGradientFill: s = !0,
-    error: l,
-    ...d
+    error: d,
+    ...l
   } = t, u = {
     ...Qa(),
     bottom: 80
@@ -5097,9 +5097,9 @@ const Mi = (t) => {
       }
     },
     ...r && { currency: r },
-    ...d
+    ...l
   };
-  return /* @__PURE__ */ a(qa, { error: l, children: /* @__PURE__ */ a(Ln, { ...g }) });
+  return /* @__PURE__ */ a(qa, { error: d, children: /* @__PURE__ */ a(Ln, { ...g }) });
 }, Li = ({
   data: t,
   className: e = "",
@@ -5107,7 +5107,7 @@ const Mi = (t) => {
 }) => {
   const [i, c] = z(null), [o, n] = z(
     null
-  ), [s, l] = z(300), d = E(null), u = v(
+  ), [s, d] = z(300), l = E(null), u = v(
     (y) => {
       var U;
       const { tooltipData: _ } = y, S = (U = _ == null ? void 0 : _.nearestDatum) == null ? void 0 : U.datum;
@@ -5271,21 +5271,21 @@ const Mi = (t) => {
     }
   }, [t]);
   const g = v((y) => {
-    if (d.current && d.current.disconnect(), y) {
+    if (l.current && l.current.disconnect(), y) {
       const { width: _ } = y.getBoundingClientRect(), S = Math.max(280, _ - 4);
-      l(S), d.current = new ResizeObserver((P) => {
+      d(S), l.current = new ResizeObserver((P) => {
         for (const m of P) {
           const j = m.contentRect.width, H = Math.max(
             280,
             j - 4
           );
-          l(H);
+          d(H);
         }
-      }), d.current.observe(y);
+      }), l.current.observe(y);
     }
   }, []);
   if (O(() => () => {
-    d.current && (d.current.disconnect(), d.current = null);
+    l.current && (l.current.disconnect(), l.current = null);
   }, []), i)
     return /* @__PURE__ */ a(ze, { message: i.message, details: i.details });
   if (!o)
@@ -5390,20 +5390,20 @@ function cc(t = {}) {
     o.components,
     e
   ), s = [...o.remarkPlugins, ...i];
-  return function({ children: d }) {
-    const [u, g] = ce.useState(d);
+  return function({ children: l }) {
+    const [u, g] = ce.useState(l);
     return ce.useEffect(() => {
       c ? Ei().then(async (h) => {
-        const D = (await h.parseMarkdownIntoBlocks(d)).map((C) => h.parseIncompleteMarkdown(
+        const D = (await h.parseMarkdownIntoBlocks(l)).map((C) => h.parseIncompleteMarkdown(
           C.trim()
         )).join(`
 
 `);
         g(D);
       }).catch(() => {
-        g(d);
-      }) : g(d);
-    }, [d]), /* @__PURE__ */ a(
+        g(l);
+      }) : g(l);
+    }, [l]), /* @__PURE__ */ a(
       ht,
       {
         components: n,
@@ -5423,8 +5423,8 @@ const sc = (t) => {
     getActionsForMessage: (n) => {
       if (!e(n))
         return [];
-      const s = r[n.id], l = [];
-      return l.push({
+      const s = r[n.id], d = [];
+      return d.push({
         id: "feedback-up",
         icon: t.icons.up,
         label: "Good response",
@@ -5435,7 +5435,7 @@ const sc = (t) => {
         pressed: s === "up",
         disabled: s === "down"
         // Disable if other is selected
-      }), l.push({
+      }), d.push({
         id: "feedback-down",
         icon: t.icons.down,
         label: "Bad response",
@@ -5446,7 +5446,7 @@ const sc = (t) => {
         pressed: s === "down",
         disabled: s === "up"
         // Disable if other is selected
-      }), l;
+      }), d;
     },
     clearFeedback: (n) => {
       delete r[n], c();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/agenttic-ui",
-  "version": "0.1.62",
+  "version": "0.1.64",
   "type": "module",
   "description": "UI components for the Agenttic framework",
   "main": "dist/index.js",