@k2b/ui 0.29.0 → 0.30.0

package/dist/browser/chat/ChatPrimitives.js

@@ -1,7 +1,9 @@
 import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
 import { setProperty as _$setProperty } from "solid-js/web";
 import { style as _$style } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
@@ -31,12 +33,14 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-chat-progress-dots aria-hi
   _tmpl$17 = /*#__PURE__*/_$template(`<i class="ti ti-chevron-right k2b-chat-activity__chevron"aria-hidden=true>`),
   _tmpl$18 = /*#__PURE__*/_$template(`<i>`),
   _tmpl$19 = /*#__PURE__*/_$template(`<small>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<details><summary class=k2b-chat-activity__row></summary><div class=k2b-chat-activity__body>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<div><div class=k2b-chat-activity__row>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<i class="ti ti-brain"aria-hidden=true>`),
-  _tmpl$23 = /*#__PURE__*/_$template(`<div><dt></dt><dd>`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<dl><!$><!/><div><dt></dt><dd></dd></div><div><dt></dt><dd></dd></div><!$><!/><div><dt></dt><dd></dd></div><!$><!/>`);
-import { createRenderEffect, createSignal, For, onCleanup, Show } from "solid-js";
+  _tmpl$20 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-activity__toggle><span class=k2b-chat-activity__toggle-label></span><i class="ti ti-chevron-right k2b-chat-activity__chevron"aria-hidden=true>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<details><summary class=k2b-chat-activity__row></summary><div class=k2b-chat-activity__body>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<div><div class=k2b-chat-activity__row>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<div><div class=k2b-chat-activity__row></div><div class=k2b-chat-activity__body>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<i class="ti ti-brain"aria-hidden=true>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<div><dt></dt><dd>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<dl><!$><!/><div><dt></dt><dd></dd></div><div><dt></dt><dd></dd></div><!$><!/><div><dt></dt><dd></dd></div><!$><!/>`);
+import { children, createContext, createRenderEffect, createSignal, createUniqueId, For, onCleanup, Show, useContext } from "solid-js";
 import { Button } from "../actions/Button";
 import { Dropdown } from "../actions/Dropdown";
 import { Tooltip } from "../feedback/Tooltip";
@@ -468,6 +472,42 @@ const ActivityContent = props => [(() => {
     return _$getNextElement(_tmpl$17);
   }
 })];
+const ActivityDisclosureContext = createContext();
+/**
+ * The words of an activity label that open its body, with the chevron right after them. With a toggle in its label,
+ * only these words are the disclosure, and the rest of the row, chips with links included, stays ordinary content.
+ * Outside an activity with a body it renders its words as plain text.
+ */
+export function ChatActivityToggle(props) {
+  const disclosure = useContext(ActivityDisclosureContext);
+  disclosure?.register();
+  return _$createComponent(Show, {
+    get when() {
+      return disclosure?.expandable() ? disclosure : undefined;
+    },
+    get fallback() {
+      return props.children;
+    },
+    children: current => (() => {
+      var _el$46 = _$getNextElement(_tmpl$20),
+        _el$47 = _el$46.firstChild;
+      _el$46.$$click = () => current().toggle();
+      _$insert(_el$47, () => props.children);
+      _$effect(_p$ => {
+        var _v$14 = current().open() ? "true" : "false",
+          _v$15 = current().bodyId;
+        _v$14 !== _p$.e && _$setAttribute(_el$46, "aria-expanded", _p$.e = _v$14);
+        _v$15 !== _p$.t && _$setAttribute(_el$46, "aria-controls", _p$.t = _v$15);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      _$runHydrationEvents();
+      return _el$46;
+    })()
+  });
+}
 export function ChatActivity(props) {
   // The disclosure's real state. A controlled `open` sets it, and every toggle reports it, so the body renders whenever
   // the row is open, also when a host has not yet passed its new `open` back.
@@ -477,108 +517,200 @@ export function ChatActivity(props) {
     if (open !== undefined) setExpanded(open);
   });
   const open = expanded;
+  const setOpen = next => {
+    if (next === expanded()) return;
+    setExpanded(next);
+    props.onOpenChange?.(next);
+  };
   const tone = () => props.tone ?? "neutral";
   const style = () => props.accent ? {
     "--k2b-chat-activity-accent": props.accent
   } : undefined;
-  return _$createComponent(Show, {
+  const expandable = () => Boolean(props.renderBody || props.children);
+  // A `Chat.Activity.Toggle` in the label registers while the label resolves, before the row picks its element, so the
+  // server and the first browser frame agree on whether the whole row or only the toggle is the disclosure.
+  const [toggles, setToggles] = createSignal(0);
+  const bodyId = createUniqueId();
+  const disclosure = {
+    expandable,
+    open,
+    toggle: () => setOpen(!expanded()),
+    bodyId,
+    register: () => {
+      setToggles(count => count + 1);
+      onCleanup(() => setToggles(count => count - 1));
+    }
+  };
+  const body = () => props.renderBody ? _$createComponent(Show, {
     get when() {
-      return props.renderBody || props.children;
-    },
-    get fallback() {
-      return (() => {
-        var _el$49 = _$getNextElement(_tmpl$21),
-          _el$50 = _el$49.firstChild;
-        _$insert(_el$50, _$createComponent(ActivityContent, props));
-        _$effect(_p$ => {
-          var _v$25 = `k2b-chat-activity ${props.class ?? ""}`,
-            _v$26 = tone(),
-            _v$27 = props.accent ? "true" : undefined,
-            _v$28 = props.busy ? "true" : undefined,
-            _v$29 = props.wrap ? "true" : undefined,
-            _v$30 = props.anchorId !== undefined ? String(props.anchorId) : undefined,
-            _v$31 = style(),
-            _v$32 = props.busy ? "true" : undefined;
-          _v$25 !== _p$.e && _$className(_el$49, _p$.e = _v$25);
-          _v$26 !== _p$.t && _$setAttribute(_el$49, "data-tone", _p$.t = _v$26);
-          _v$27 !== _p$.a && _$setAttribute(_el$49, "data-accent", _p$.a = _v$27);
-          _v$28 !== _p$.o && _$setAttribute(_el$49, "data-busy", _p$.o = _v$28);
-          _v$29 !== _p$.i && _$setAttribute(_el$49, "data-wrap", _p$.i = _v$29);
-          _v$30 !== _p$.n && _$setAttribute(_el$49, "data-chat-anchor", _p$.n = _v$30);
-          _p$.s = _$style(_el$49, _v$31, _p$.s);
-          _v$32 !== _p$.h && _$setAttribute(_el$49, "aria-busy", _p$.h = _v$32);
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined,
-          a: undefined,
-          o: undefined,
-          i: undefined,
-          n: undefined,
-          s: undefined,
-          h: undefined
-        });
-        return _el$49;
-      })();
+      return _$memo(() => !!open())() ? props.renderBody : undefined;
     },
+    children: render => render()()
+  }) : props.children;
+  return _$createComponent(ActivityDisclosureContext.Provider, {
+    value: disclosure,
     get children() {
-      var _el$46 = _$getNextElement(_tmpl$20),
-        _el$47 = _el$46.firstChild,
-        _el$48 = _el$47.nextSibling;
-      _el$46.addEventListener("toggle", event => {
-        setExpanded(event.currentTarget.open);
-        props.onOpenChange?.(event.currentTarget.open);
-      });
-      _$insert(_el$47, _$createComponent(ActivityContent, _$mergeProps(props, {
-        disclosure: true
-      })));
-      _$insert(_el$48, (() => {
-        var _c$ = _$memo(() => !!props.renderBody);
-        return () => _c$() ? _$createComponent(Show, {
+      return (() => {
+        const label = children(() => props.label);
+        return _$createComponent(Show, {
           get when() {
-            return _$memo(() => !!open())() ? props.renderBody : undefined;
+            return expandable();
           },
-          children: render => render()()
-        }) : props.children;
-      })());
-      _$effect(_p$ => {
-        var _v$14 = `k2b-chat-activity ${props.class ?? ""}`,
-          _v$15 = tone(),
-          _v$16 = props.accent ? "true" : undefined,
-          _v$17 = props.busy ? "true" : undefined,
-          _v$18 = props.wrap ? "true" : undefined,
-          _v$19 = props.bodyInset === false ? "false" : undefined,
-          _v$20 = props.anchorId !== undefined ? String(props.anchorId) : undefined,
-          _v$21 = style(),
-          _v$22 = open(),
-          _v$23 = props.busy ? "true" : undefined,
-          _v$24 = props.ariaLabel;
-        _v$14 !== _p$.e && _$className(_el$46, _p$.e = _v$14);
-        _v$15 !== _p$.t && _$setAttribute(_el$46, "data-tone", _p$.t = _v$15);
-        _v$16 !== _p$.a && _$setAttribute(_el$46, "data-accent", _p$.a = _v$16);
-        _v$17 !== _p$.o && _$setAttribute(_el$46, "data-busy", _p$.o = _v$17);
-        _v$18 !== _p$.i && _$setAttribute(_el$46, "data-wrap", _p$.i = _v$18);
-        _v$19 !== _p$.n && _$setAttribute(_el$46, "data-body-inset", _p$.n = _v$19);
-        _v$20 !== _p$.s && _$setAttribute(_el$46, "data-chat-anchor", _p$.s = _v$20);
-        _p$.h = _$style(_el$46, _v$21, _p$.h);
-        _v$22 !== _p$.r && _$setProperty(_el$46, "open", _p$.r = _v$22);
-        _v$23 !== _p$.d && _$setAttribute(_el$46, "aria-busy", _p$.d = _v$23);
-        _v$24 !== _p$.l && _$setAttribute(_el$47, "aria-label", _p$.l = _v$24);
-        return _p$;
-      }, {
-        e: undefined,
-        t: undefined,
-        a: undefined,
-        o: undefined,
-        i: undefined,
-        n: undefined,
-        s: undefined,
-        h: undefined,
-        r: undefined,
-        d: undefined,
-        l: undefined
-      });
-      return _el$46;
+          get fallback() {
+            return (() => {
+              var _el$51 = _$getNextElement(_tmpl$22),
+                _el$52 = _el$51.firstChild;
+              _$insert(_el$52, _$createComponent(ActivityContent, _$mergeProps(props, {
+                get label() {
+                  return label();
+                }
+              })));
+              _$effect(_p$ => {
+                var _v$27 = `k2b-chat-activity ${props.class ?? ""}`,
+                  _v$28 = tone(),
+                  _v$29 = props.accent ? "true" : undefined,
+                  _v$30 = props.busy ? "true" : undefined,
+                  _v$31 = props.wrap ? "true" : undefined,
+                  _v$32 = props.anchorId !== undefined ? String(props.anchorId) : undefined,
+                  _v$33 = style(),
+                  _v$34 = props.busy ? "true" : undefined;
+                _v$27 !== _p$.e && _$className(_el$51, _p$.e = _v$27);
+                _v$28 !== _p$.t && _$setAttribute(_el$51, "data-tone", _p$.t = _v$28);
+                _v$29 !== _p$.a && _$setAttribute(_el$51, "data-accent", _p$.a = _v$29);
+                _v$30 !== _p$.o && _$setAttribute(_el$51, "data-busy", _p$.o = _v$30);
+                _v$31 !== _p$.i && _$setAttribute(_el$51, "data-wrap", _p$.i = _v$31);
+                _v$32 !== _p$.n && _$setAttribute(_el$51, "data-chat-anchor", _p$.n = _v$32);
+                _p$.s = _$style(_el$51, _v$33, _p$.s);
+                _v$34 !== _p$.h && _$setAttribute(_el$51, "aria-busy", _p$.h = _v$34);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined,
+                a: undefined,
+                o: undefined,
+                i: undefined,
+                n: undefined,
+                s: undefined,
+                h: undefined
+              });
+              return _el$51;
+            })();
+          },
+          get children() {
+            return _$createComponent(Show, {
+              get when() {
+                return toggles() === 0;
+              },
+              get fallback() {
+                return (() => {
+                  var _el$53 = _$getNextElement(_tmpl$23),
+                    _el$54 = _el$53.firstChild,
+                    _el$55 = _el$54.nextSibling;
+                  _$insert(_el$54, _$createComponent(ActivityContent, _$mergeProps(props, {
+                    get label() {
+                      return label();
+                    }
+                  })));
+                  _$setAttribute(_el$55, "id", bodyId);
+                  _$insert(_el$55, body);
+                  _$effect(_p$ => {
+                    var _v$35 = `k2b-chat-activity ${props.class ?? ""}`,
+                      _v$36 = tone(),
+                      _v$37 = props.accent ? "true" : undefined,
+                      _v$38 = props.busy ? "true" : undefined,
+                      _v$39 = props.wrap ? "true" : undefined,
+                      _v$40 = props.bodyInset === false ? "false" : undefined,
+                      _v$41 = open() ? "true" : "false",
+                      _v$42 = props.anchorId !== undefined ? String(props.anchorId) : undefined,
+                      _v$43 = style(),
+                      _v$44 = props.busy ? "true" : undefined,
+                      _v$45 = !open();
+                    _v$35 !== _p$.e && _$className(_el$53, _p$.e = _v$35);
+                    _v$36 !== _p$.t && _$setAttribute(_el$53, "data-tone", _p$.t = _v$36);
+                    _v$37 !== _p$.a && _$setAttribute(_el$53, "data-accent", _p$.a = _v$37);
+                    _v$38 !== _p$.o && _$setAttribute(_el$53, "data-busy", _p$.o = _v$38);
+                    _v$39 !== _p$.i && _$setAttribute(_el$53, "data-wrap", _p$.i = _v$39);
+                    _v$40 !== _p$.n && _$setAttribute(_el$53, "data-body-inset", _p$.n = _v$40);
+                    _v$41 !== _p$.s && _$setAttribute(_el$53, "data-open", _p$.s = _v$41);
+                    _v$42 !== _p$.h && _$setAttribute(_el$53, "data-chat-anchor", _p$.h = _v$42);
+                    _p$.r = _$style(_el$53, _v$43, _p$.r);
+                    _v$44 !== _p$.d && _$setAttribute(_el$53, "aria-busy", _p$.d = _v$44);
+                    _v$45 !== _p$.l && _$setProperty(_el$55, "hidden", _p$.l = _v$45);
+                    return _p$;
+                  }, {
+                    e: undefined,
+                    t: undefined,
+                    a: undefined,
+                    o: undefined,
+                    i: undefined,
+                    n: undefined,
+                    s: undefined,
+                    h: undefined,
+                    r: undefined,
+                    d: undefined,
+                    l: undefined
+                  });
+                  return _el$53;
+                })();
+              },
+              get children() {
+                var _el$48 = _$getNextElement(_tmpl$21),
+                  _el$49 = _el$48.firstChild,
+                  _el$50 = _el$49.nextSibling;
+                _el$48.addEventListener("toggle", event => {
+                  setExpanded(event.currentTarget.open);
+                  props.onOpenChange?.(event.currentTarget.open);
+                });
+                _$insert(_el$49, _$createComponent(ActivityContent, _$mergeProps(props, {
+                  get label() {
+                    return label();
+                  },
+                  disclosure: true
+                })));
+                _$insert(_el$50, body);
+                _$effect(_p$ => {
+                  var _v$16 = `k2b-chat-activity ${props.class ?? ""}`,
+                    _v$17 = tone(),
+                    _v$18 = props.accent ? "true" : undefined,
+                    _v$19 = props.busy ? "true" : undefined,
+                    _v$20 = props.wrap ? "true" : undefined,
+                    _v$21 = props.bodyInset === false ? "false" : undefined,
+                    _v$22 = props.anchorId !== undefined ? String(props.anchorId) : undefined,
+                    _v$23 = style(),
+                    _v$24 = open(),
+                    _v$25 = props.busy ? "true" : undefined,
+                    _v$26 = props.ariaLabel;
+                  _v$16 !== _p$.e && _$className(_el$48, _p$.e = _v$16);
+                  _v$17 !== _p$.t && _$setAttribute(_el$48, "data-tone", _p$.t = _v$17);
+                  _v$18 !== _p$.a && _$setAttribute(_el$48, "data-accent", _p$.a = _v$18);
+                  _v$19 !== _p$.o && _$setAttribute(_el$48, "data-busy", _p$.o = _v$19);
+                  _v$20 !== _p$.i && _$setAttribute(_el$48, "data-wrap", _p$.i = _v$20);
+                  _v$21 !== _p$.n && _$setAttribute(_el$48, "data-body-inset", _p$.n = _v$21);
+                  _v$22 !== _p$.s && _$setAttribute(_el$48, "data-chat-anchor", _p$.s = _v$22);
+                  _p$.h = _$style(_el$48, _v$23, _p$.h);
+                  _v$24 !== _p$.r && _$setProperty(_el$48, "open", _p$.r = _v$24);
+                  _v$25 !== _p$.d && _$setAttribute(_el$48, "aria-busy", _p$.d = _v$25);
+                  _v$26 !== _p$.l && _$setAttribute(_el$49, "aria-label", _p$.l = _v$26);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined,
+                  o: undefined,
+                  i: undefined,
+                  n: undefined,
+                  s: undefined,
+                  h: undefined,
+                  r: undefined,
+                  d: undefined,
+                  l: undefined
+                });
+                return _el$48;
+              }
+            });
+          }
+        });
+      })();
     }
   });
 }
@@ -647,74 +779,74 @@ export function ChatContextUsage(props) {
               });
             }
           }), (() => {
-            var _el$53 = _$getNextElement(_tmpl$24),
-              _el$69 = _el$53.firstChild,
-              [_el$70, _co$1] = _$getNextMarker(_el$69.nextSibling),
-              _el$54 = _el$70.nextSibling,
-              _el$55 = _el$54.firstChild,
-              _el$56 = _el$55.nextSibling,
-              _el$57 = _el$54.nextSibling,
-              _el$58 = _el$57.firstChild,
-              _el$59 = _el$58.nextSibling,
-              _el$71 = _el$57.nextSibling,
-              [_el$72, _co$10] = _$getNextMarker(_el$71.nextSibling),
-              _el$63 = _el$72.nextSibling,
-              _el$64 = _el$63.firstChild,
-              _el$65 = _el$64.nextSibling,
-              _el$73 = _el$63.nextSibling,
-              [_el$74, _co$11] = _$getNextMarker(_el$73.nextSibling);
-            _$insert(_el$53, _$createComponent(Show, {
+            var _el$58 = _$getNextElement(_tmpl$26),
+              _el$74 = _el$58.firstChild,
+              [_el$75, _co$1] = _$getNextMarker(_el$74.nextSibling),
+              _el$59 = _el$75.nextSibling,
+              _el$60 = _el$59.firstChild,
+              _el$61 = _el$60.nextSibling,
+              _el$62 = _el$59.nextSibling,
+              _el$63 = _el$62.firstChild,
+              _el$64 = _el$63.nextSibling,
+              _el$76 = _el$62.nextSibling,
+              [_el$77, _co$10] = _$getNextMarker(_el$76.nextSibling),
+              _el$68 = _el$77.nextSibling,
+              _el$69 = _el$68.firstChild,
+              _el$70 = _el$69.nextSibling,
+              _el$78 = _el$68.nextSibling,
+              [_el$79, _co$11] = _$getNextMarker(_el$78.nextSibling);
+            _$insert(_el$58, _$createComponent(Show, {
               get when() {
                 return props.modelLabel;
               },
               children: model => (() => {
-                var _el$75 = _$getNextElement(_tmpl$23),
-                  _el$76 = _el$75.firstChild,
-                  _el$77 = _el$76.nextSibling;
-                _$insert(_el$76, () => chatMessages().model);
-                _$insert(_el$77, model);
-                return _el$75;
+                var _el$80 = _$getNextElement(_tmpl$25),
+                  _el$81 = _el$80.firstChild,
+                  _el$82 = _el$81.nextSibling;
+                _$insert(_el$81, () => chatMessages().model);
+                _$insert(_el$82, model);
+                return _el$80;
               })()
-            }), _el$70, _co$1);
-            _$insert(_el$55, () => chatMessages().input);
-            _$insert(_el$56, () => formattedUsageValue(usage().input));
-            _$insert(_el$58, () => chatMessages().output);
-            _$insert(_el$59, () => formattedUsageValue(usage().output));
-            _$insert(_el$53, _$createComponent(Show, {
+            }), _el$75, _co$1);
+            _$insert(_el$60, () => chatMessages().input);
+            _$insert(_el$61, () => formattedUsageValue(usage().input));
+            _$insert(_el$63, () => chatMessages().output);
+            _$insert(_el$64, () => formattedUsageValue(usage().output));
+            _$insert(_el$58, _$createComponent(Show, {
               get when() {
                 return loopUsage().reported;
               },
               get children() {
-                var _el$60 = _$getNextElement(_tmpl$23),
-                  _el$61 = _el$60.firstChild,
-                  _el$62 = _el$61.nextSibling;
-                _$insert(_el$61, () => chatMessages().loopTotal);
-                _$insert(_el$62, () => formattedUsageValue(loopUsage().total));
-                return _el$60;
+                var _el$65 = _$getNextElement(_tmpl$25),
+                  _el$66 = _el$65.firstChild,
+                  _el$67 = _el$66.nextSibling;
+                _$insert(_el$66, () => chatMessages().loopTotal);
+                _$insert(_el$67, () => formattedUsageValue(loopUsage().total));
+                return _el$65;
               }
-            }), _el$72, _co$10);
-            _$insert(_el$64, () => chatMessages().contextWindow);
-            _$insert(_el$65, (() => {
-              var _c$3 = _$memo(() => windowSize() > 0);
-              return () => _c$3() ? formatNumber(windowSize()) : chatMessages().notConfigured;
+            }), _el$77, _co$10);
+            _$insert(_el$69, () => chatMessages().contextWindow);
+            _$insert(_el$70, (() => {
+              var _c$2 = _$memo(() => windowSize() > 0);
+              return () => _c$2() ? formatNumber(windowSize()) : chatMessages().notConfigured;
             })());
-            _$insert(_el$53, _$createComponent(Show, {
+            _$insert(_el$58, _$createComponent(Show, {
               get when() {
                 return remaining() !== null;
               },
               get children() {
-                var _el$66 = _$getNextElement(_tmpl$23),
-                  _el$67 = _el$66.firstChild,
-                  _el$68 = _el$67.nextSibling;
-                _$insert(_el$67, () => chatMessages().remaining);
-                _$insert(_el$68, (() => {
-                  var _c$4 = _$memo(() => remaining() === null);
-                  return () => _c$4() ? messages().unknown : formatNumber(remaining());
+                var _el$71 = _$getNextElement(_tmpl$25),
+                  _el$72 = _el$71.firstChild,
+                  _el$73 = _el$72.nextSibling;
+                _$insert(_el$72, () => chatMessages().remaining);
+                _$insert(_el$73, (() => {
+                  var _c$3 = _$memo(() => remaining() === null);
+                  return () => _c$3() ? messages().unknown : formatNumber(remaining());
                 })());
-                return _el$66;
+                return _el$71;
               }
-            }), _el$74, _co$11);
-            return _el$53;
+            }), _el$79, _co$11);
+            return _el$58;
           })(), _$createComponent(Show, {
             get when() {
               return props.action;
@@ -731,9 +863,9 @@ export function ChatContextUsage(props) {
               },
               get children() {
                 return [(() => {
-                  var _el$78 = _$getNextElement(_tmpl$1);
-                  _$effect(() => _$className(_el$78, busy() ? "ti ti-loader-2 k2b-spin" : action().icon));
-                  return _el$78;
+                  var _el$83 = _$getNextElement(_tmpl$1);
+                  _$effect(() => _$className(_el$83, busy() ? "ti ti-loader-2 k2b-spin" : action().icon));
+                  return _el$83;
                 })(), _$memo(() => action().label)];
               }
             })
@@ -752,15 +884,16 @@ export function ChatContextUsage(props) {
       return accessibleLabel();
     },
     get children() {
-      return [_$getNextElement(_tmpl$22), (() => {
-        var _el$52 = _$getNextElement(_tmpl$0);
-        _$insert(_el$52, (() => {
-          var _c$2 = _$memo(() => percent() === null);
-          return () => _c$2() ? "–" : `${percent()}%`;
+      return [_$getNextElement(_tmpl$24), (() => {
+        var _el$57 = _$getNextElement(_tmpl$0);
+        _$insert(_el$57, (() => {
+          var _c$ = _$memo(() => percent() === null);
+          return () => _c$() ? "–" : `${percent()}%`;
         })());
-        return _el$52;
+        return _el$57;
       })()];
     }
   });
 }
+_$delegateEvents(["click"]);
 //# sourceMappingURL=ChatPrimitives.js.map