@k2b/ui 0.9.1 → 0.11.0

package/dist/browser/chat/ChatPrimitives.js

@@ -1,9 +1,7 @@
 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 { setProperty as _$setProperty } 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";
@@ -27,24 +25,24 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-chat-progress-dots aria-hi
   _tmpl$11 = /*#__PURE__*/_$template(`<a class=k2b-chat-message__attachment role=listitem target=_blank rel="noopener noreferrer">`),
   _tmpl$12 = /*#__PURE__*/_$template(`<span class=k2b-chat-message__status><i aria-hidden=true></i><!$><!/>`),
   _tmpl$13 = /*#__PURE__*/_$template(`<time>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<button type=button><i aria-hidden=true>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<span class=k2b-chat-activity__leading aria-hidden=true>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<span class=k2b-chat-activity__copy><strong></strong><!$><!/>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<span class=k2b-chat-activity__trailing>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<i class="ti ti-chevron-right k2b-chat-activity__chevron"aria-hidden=true>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<i>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<small>`),
-  _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(`<i class="ti ti-brain"aria-hidden=true>`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<div><dt></dt><dd>`),
-  _tmpl$25 = /*#__PURE__*/_$template(`<div class=k2b-chat-context__tooltip><strong></strong><!$><!/><dl><!$><!/><div><dt></dt><dd></dd></div><div><dt></dt><dd></dd></div><!$><!/><div><dt></dt><dd></dd></div><!$><!/></dl><!$><!/>`);
+  _tmpl$14 = /*#__PURE__*/_$template(`<span class=k2b-chat-activity__leading aria-hidden=true>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<span class=k2b-chat-activity__copy><strong></strong><!$><!/>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<span class=k2b-chat-activity__trailing>`),
+  _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 { createSignal, For, onCleanup, Show } from "solid-js";
 import { Button } from "../actions/Button";
 import { Dropdown } from "../actions/Dropdown";
+import { Tooltip } from "../feedback/Tooltip";
 import { useUiMessages } from "../intl/messages";
 import { ProgressBar } from "../surfaces/ProgressBar";
-import { ChatContextPopup } from "./ChatContextPopup";
+import { ChatContextPanel, ChatContextPopup } from "./ChatContextPopup";
 import { executeChatAction } from "./chat-behavior";
 const roleLabel = (role, messages) => {
   if (role === "assistant") return messages.assistant;
@@ -327,38 +325,33 @@ export function ChatMessage(props) {
               get each() {
                 return actions();
               },
-              children: action => (() => {
-                var _el$36 = _$getNextElement(_tmpl$14),
-                  _el$37 = _el$36.firstChild;
-                _el$36.$$click = () => void runAction(action);
-                _$effect(_p$ => {
-                  var _v$14 = action.label,
-                    _v$15 = action.pressed,
-                    _v$16 = action.pressedTone,
-                    _v$17 = action.label,
-                    _v$18 = action.variant === "danger" ? "true" : undefined,
-                    _v$19 = action.disabled || Boolean(busyActionId()),
-                    _v$20 = actionIcon(action);
-                  _v$14 !== _p$.e && _$setAttribute(_el$36, "aria-label", _p$.e = _v$14);
-                  _v$15 !== _p$.t && _$setAttribute(_el$36, "aria-pressed", _p$.t = _v$15);
-                  _v$16 !== _p$.a && _$setAttribute(_el$36, "data-pressed-tone", _p$.a = _v$16);
-                  _v$17 !== _p$.o && _$setAttribute(_el$36, "title", _p$.o = _v$17);
-                  _v$18 !== _p$.i && _$setAttribute(_el$36, "data-danger", _p$.i = _v$18);
-                  _v$19 !== _p$.n && _$setProperty(_el$36, "disabled", _p$.n = _v$19);
-                  _v$20 !== _p$.s && _$className(_el$37, _p$.s = _v$20);
-                  return _p$;
-                }, {
-                  e: undefined,
-                  t: undefined,
-                  a: undefined,
-                  o: undefined,
-                  i: undefined,
-                  n: undefined,
-                  s: undefined
-                });
-                _$runHydrationEvents();
-                return _el$36;
-              })()
+              children: action => _$createComponent(Tooltip.Trigger, {
+                type: "button",
+                get ["aria-label"]() {
+                  return action.label;
+                },
+                get ["aria-pressed"]() {
+                  return action.pressed;
+                },
+                get ["data-pressed-tone"]() {
+                  return action.pressedTone;
+                },
+                get content() {
+                  return action.label;
+                },
+                get ["data-danger"]() {
+                  return action.variant === "danger" ? "true" : undefined;
+                },
+                get disabled() {
+                  return action.disabled || Boolean(busyActionId());
+                },
+                onClick: () => void runAction(action),
+                get children() {
+                  var _el$36 = _$getNextElement(_tmpl$1);
+                  _$effect(() => _$className(_el$36, actionIcon(action)));
+                  return _el$36;
+                }
+              })
             }));
             _$effect(() => _$setAttribute(_el$10, "aria-label", messages().messageActions));
             return _el$10;
@@ -371,7 +364,6 @@ export function ChatMessage(props) {
           get children() {
             return _$createComponent(Dropdown.Root, {
               position: "bottom-left",
-              width: "12rem",
               get label() {
                 return messages().messageActions;
               },
@@ -422,55 +414,55 @@ export function ChatMessage(props) {
   })();
 }
 const ActivityContent = props => [(() => {
-  var _el$38 = _$getNextElement(_tmpl$15);
-  _$insert(_el$38, _$createComponent(Show, {
+  var _el$37 = _$getNextElement(_tmpl$14);
+  _$insert(_el$37, _$createComponent(Show, {
     get when() {
       return props.leading;
     },
     get fallback() {
       return (() => {
-        var _el$45 = _$getNextElement(_tmpl$19);
-        _$effect(() => _$className(_el$45, props.icon ?? "ti ti-sparkles"));
-        return _el$45;
+        var _el$44 = _$getNextElement(_tmpl$18);
+        _$effect(() => _$className(_el$44, props.icon ?? "ti ti-sparkles"));
+        return _el$44;
       })();
     },
     get children() {
       return props.leading;
     }
   }));
-  return _el$38;
+  return _el$37;
 })(), (() => {
-  var _el$39 = _$getNextElement(_tmpl$16),
-    _el$40 = _el$39.firstChild,
-    _el$41 = _el$40.nextSibling,
-    [_el$42, _co$0] = _$getNextMarker(_el$41.nextSibling);
-  _$insert(_el$40, () => props.label);
-  _$insert(_el$39, _$createComponent(Show, {
+  var _el$38 = _$getNextElement(_tmpl$15),
+    _el$39 = _el$38.firstChild,
+    _el$40 = _el$39.nextSibling,
+    [_el$41, _co$0] = _$getNextMarker(_el$40.nextSibling);
+  _$insert(_el$39, () => props.label);
+  _$insert(_el$38, _$createComponent(Show, {
     get when() {
       return props.description;
     },
     children: description => (() => {
-      var _el$46 = _$getNextElement(_tmpl$20);
-      _$insert(_el$46, description);
-      return _el$46;
+      var _el$45 = _$getNextElement(_tmpl$19);
+      _$insert(_el$45, description);
+      return _el$45;
     })()
-  }), _el$42, _co$0);
-  return _el$39;
+  }), _el$41, _co$0);
+  return _el$38;
 })(), _$createComponent(Show, {
   get when() {
     return props.trailing;
   },
   get children() {
-    var _el$43 = _$getNextElement(_tmpl$17);
-    _$insert(_el$43, () => props.trailing);
-    return _el$43;
+    var _el$42 = _$getNextElement(_tmpl$16);
+    _$insert(_el$42, () => props.trailing);
+    return _el$42;
   }
 }), _$createComponent(Show, {
   get when() {
     return props.disclosure;
   },
   get children() {
-    return _$getNextElement(_tmpl$18);
+    return _$getNextElement(_tmpl$17);
   }
 })];
 export function ChatActivity(props) {
@@ -486,24 +478,24 @@ export function ChatActivity(props) {
     },
     get fallback() {
       return (() => {
-        var _el$50 = _$getNextElement(_tmpl$22),
-          _el$51 = _el$50.firstChild;
-        _$insert(_el$51, _$createComponent(ActivityContent, props));
+        var _el$49 = _$getNextElement(_tmpl$21),
+          _el$50 = _el$49.firstChild;
+        _$insert(_el$50, _$createComponent(ActivityContent, props));
         _$effect(_p$ => {
-          var _v$30 = `k2b-chat-activity ${props.class ?? ""}`,
-            _v$31 = tone(),
-            _v$32 = props.accent ? "true" : undefined,
-            _v$33 = props.busy ? "true" : undefined,
-            _v$34 = props.anchorId !== undefined ? String(props.anchorId) : undefined,
-            _v$35 = style(),
-            _v$36 = props.busy ? "true" : undefined;
-          _v$30 !== _p$.e && _$className(_el$50, _p$.e = _v$30);
-          _v$31 !== _p$.t && _$setAttribute(_el$50, "data-tone", _p$.t = _v$31);
-          _v$32 !== _p$.a && _$setAttribute(_el$50, "data-accent", _p$.a = _v$32);
-          _v$33 !== _p$.o && _$setAttribute(_el$50, "data-busy", _p$.o = _v$33);
-          _v$34 !== _p$.i && _$setAttribute(_el$50, "data-chat-anchor", _p$.i = _v$34);
-          _p$.n = _$style(_el$50, _v$35, _p$.n);
-          _v$36 !== _p$.s && _$setAttribute(_el$50, "aria-busy", _p$.s = _v$36);
+          var _v$23 = `k2b-chat-activity ${props.class ?? ""}`,
+            _v$24 = tone(),
+            _v$25 = props.accent ? "true" : undefined,
+            _v$26 = props.busy ? "true" : undefined,
+            _v$27 = props.anchorId !== undefined ? String(props.anchorId) : undefined,
+            _v$28 = style(),
+            _v$29 = props.busy ? "true" : undefined;
+          _v$23 !== _p$.e && _$className(_el$49, _p$.e = _v$23);
+          _v$24 !== _p$.t && _$setAttribute(_el$49, "data-tone", _p$.t = _v$24);
+          _v$25 !== _p$.a && _$setAttribute(_el$49, "data-accent", _p$.a = _v$25);
+          _v$26 !== _p$.o && _$setAttribute(_el$49, "data-busy", _p$.o = _v$26);
+          _v$27 !== _p$.i && _$setAttribute(_el$49, "data-chat-anchor", _p$.i = _v$27);
+          _p$.n = _$style(_el$49, _v$28, _p$.n);
+          _v$29 !== _p$.s && _$setAttribute(_el$49, "aria-busy", _p$.s = _v$29);
           return _p$;
         }, {
           e: undefined,
@@ -514,21 +506,21 @@ export function ChatActivity(props) {
           n: undefined,
           s: undefined
         });
-        return _el$50;
+        return _el$49;
       })();
     },
     get children() {
-      var _el$47 = _$getNextElement(_tmpl$21),
-        _el$48 = _el$47.firstChild,
-        _el$49 = _el$48.nextSibling;
-      _el$47.addEventListener("toggle", event => {
+      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$48, _$createComponent(ActivityContent, _$mergeProps(props, {
+      _$insert(_el$47, _$createComponent(ActivityContent, _$mergeProps(props, {
         disclosure: true
       })));
-      _$insert(_el$49, (() => {
+      _$insert(_el$48, (() => {
         var _c$ = _$memo(() => !!props.renderBody);
         return () => _c$() ? _$createComponent(Show, {
           get when() {
@@ -538,24 +530,24 @@ export function ChatActivity(props) {
         }) : props.children;
       })());
       _$effect(_p$ => {
-        var _v$21 = `k2b-chat-activity ${props.class ?? ""}`,
-          _v$22 = tone(),
-          _v$23 = props.accent ? "true" : undefined,
-          _v$24 = props.busy ? "true" : undefined,
-          _v$25 = props.bodyInset === false ? "false" : undefined,
-          _v$26 = props.anchorId !== undefined ? String(props.anchorId) : undefined,
-          _v$27 = style(),
-          _v$28 = open(),
-          _v$29 = props.busy ? "true" : undefined;
-        _v$21 !== _p$.e && _$className(_el$47, _p$.e = _v$21);
-        _v$22 !== _p$.t && _$setAttribute(_el$47, "data-tone", _p$.t = _v$22);
-        _v$23 !== _p$.a && _$setAttribute(_el$47, "data-accent", _p$.a = _v$23);
-        _v$24 !== _p$.o && _$setAttribute(_el$47, "data-busy", _p$.o = _v$24);
-        _v$25 !== _p$.i && _$setAttribute(_el$47, "data-body-inset", _p$.i = _v$25);
-        _v$26 !== _p$.n && _$setAttribute(_el$47, "data-chat-anchor", _p$.n = _v$26);
-        _p$.s = _$style(_el$47, _v$27, _p$.s);
-        _v$28 !== _p$.h && _$setProperty(_el$47, "open", _p$.h = _v$28);
-        _v$29 !== _p$.r && _$setAttribute(_el$47, "aria-busy", _p$.r = _v$29);
+        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.bodyInset === false ? "false" : undefined,
+          _v$19 = props.anchorId !== undefined ? String(props.anchorId) : undefined,
+          _v$20 = style(),
+          _v$21 = open(),
+          _v$22 = props.busy ? "true" : undefined;
+        _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-body-inset", _p$.i = _v$18);
+        _v$19 !== _p$.n && _$setAttribute(_el$46, "data-chat-anchor", _p$.n = _v$19);
+        _p$.s = _$style(_el$46, _v$20, _p$.s);
+        _v$21 !== _p$.h && _$setProperty(_el$46, "open", _p$.h = _v$21);
+        _v$22 !== _p$.r && _$setAttribute(_el$46, "aria-busy", _p$.r = _v$22);
         return _p$;
       }, {
         e: undefined,
@@ -568,7 +560,7 @@ export function ChatActivity(props) {
         h: undefined,
         r: undefined
       });
-      return _el$47;
+      return _el$46;
     }
   });
 }
@@ -611,125 +603,123 @@ export function ChatContextUsage(props) {
   };
   return _$createComponent(ChatContextPopup, {
     get content() {
-      return (() => {
-        var _el$54 = _$getNextElement(_tmpl$25),
-          _el$55 = _el$54.firstChild,
-          _el$78 = _el$55.nextSibling,
-          [_el$79, _co$12] = _$getNextMarker(_el$78.nextSibling),
-          _el$56 = _el$79.nextSibling,
-          _el$72 = _el$56.firstChild,
-          [_el$73, _co$1] = _$getNextMarker(_el$72.nextSibling),
-          _el$57 = _el$73.nextSibling,
-          _el$58 = _el$57.firstChild,
-          _el$59 = _el$58.nextSibling,
-          _el$60 = _el$57.nextSibling,
-          _el$61 = _el$60.firstChild,
-          _el$62 = _el$61.nextSibling,
-          _el$74 = _el$60.nextSibling,
-          [_el$75, _co$10] = _$getNextMarker(_el$74.nextSibling),
-          _el$66 = _el$75.nextSibling,
-          _el$67 = _el$66.firstChild,
-          _el$68 = _el$67.nextSibling,
-          _el$76 = _el$66.nextSibling,
-          [_el$77, _co$11] = _$getNextMarker(_el$76.nextSibling),
-          _el$80 = _el$56.nextSibling,
-          [_el$81, _co$13] = _$getNextMarker(_el$80.nextSibling);
-        _$insert(_el$55, () => messages().lastRequestContext);
-        _$insert(_el$54, _$createComponent(Show, {
-          get when() {
-            return percent() !== null;
-          },
-          get children() {
-            return _$createComponent(ProgressBar, {
-              get value() {
-                return percent() ?? 0;
+      return _$createComponent(ChatContextPanel, {
+        get title() {
+          return messages().lastRequestContext;
+        },
+        get children() {
+          return [_$createComponent(Show, {
+            get when() {
+              return percent() !== null;
+            },
+            get children() {
+              return _$createComponent(ProgressBar, {
+                get value() {
+                  return percent() ?? 0;
+                },
+                size: "xs",
+                get tone() {
+                  return (percent() ?? 0) >= 85 ? "danger" : "info";
+                },
+                get label() {
+                  return messages().contextWindowUsed;
+                }
+              });
+            }
+          }), (() => {
+            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, {
+              get when() {
+                return props.modelLabel;
               },
-              size: "xs",
-              get tone() {
-                return (percent() ?? 0) >= 85 ? "danger" : "info";
+              children: model => (() => {
+                var _el$75 = _$getNextElement(_tmpl$23),
+                  _el$76 = _el$75.firstChild,
+                  _el$77 = _el$76.nextSibling;
+                _$insert(_el$76, () => messages().model);
+                _$insert(_el$77, model);
+                return _el$75;
+              })()
+            }), _el$70, _co$1);
+            _$insert(_el$55, () => messages().input);
+            _$insert(_el$56, () => formattedUsageValue(usage().input));
+            _$insert(_el$58, () => messages().output);
+            _$insert(_el$59, () => formattedUsageValue(usage().output));
+            _$insert(_el$53, _$createComponent(Show, {
+              get when() {
+                return loopUsage().reported;
               },
-              get label() {
-                return messages().contextWindowUsed;
+              get children() {
+                var _el$60 = _$getNextElement(_tmpl$23),
+                  _el$61 = _el$60.firstChild,
+                  _el$62 = _el$61.nextSibling;
+                _$insert(_el$61, () => messages().loopTotal);
+                _$insert(_el$62, () => formattedUsageValue(loopUsage().total));
+                return _el$60;
               }
-            });
-          }
-        }), _el$79, _co$12);
-        _$insert(_el$56, _$createComponent(Show, {
-          get when() {
-            return props.modelLabel;
-          },
-          children: model => (() => {
-            var _el$82 = _$getNextElement(_tmpl$24),
-              _el$83 = _el$82.firstChild,
-              _el$84 = _el$83.nextSibling;
-            _$insert(_el$83, () => messages().model);
-            _$insert(_el$84, model);
-            return _el$82;
-          })()
-        }), _el$73, _co$1);
-        _$insert(_el$58, () => messages().input);
-        _$insert(_el$59, () => formattedUsageValue(usage().input));
-        _$insert(_el$61, () => messages().output);
-        _$insert(_el$62, () => formattedUsageValue(usage().output));
-        _$insert(_el$56, _$createComponent(Show, {
-          get when() {
-            return loopUsage().reported;
-          },
-          get children() {
-            var _el$63 = _$getNextElement(_tmpl$24),
-              _el$64 = _el$63.firstChild,
-              _el$65 = _el$64.nextSibling;
-            _$insert(_el$64, () => messages().loopTotal);
-            _$insert(_el$65, () => formattedUsageValue(loopUsage().total));
-            return _el$63;
-          }
-        }), _el$75, _co$10);
-        _$insert(_el$67, () => messages().window);
-        _$insert(_el$68, (() => {
-          var _c$3 = _$memo(() => windowSize() > 0);
-          return () => _c$3() ? formatNumber(windowSize()) : messages().notConfigured;
-        })());
-        _$insert(_el$56, _$createComponent(Show, {
-          get when() {
-            return remaining() !== null;
-          },
-          get children() {
-            var _el$69 = _$getNextElement(_tmpl$24),
-              _el$70 = _el$69.firstChild,
-              _el$71 = _el$70.nextSibling;
-            _$insert(_el$70, () => messages().remaining);
-            _$insert(_el$71, (() => {
-              var _c$4 = _$memo(() => remaining() === null);
-              return () => _c$4() ? messages().unknown : formatNumber(remaining());
+            }), _el$72, _co$10);
+            _$insert(_el$64, () => messages().window);
+            _$insert(_el$65, (() => {
+              var _c$3 = _$memo(() => windowSize() > 0);
+              return () => _c$3() ? formatNumber(windowSize()) : messages().notConfigured;
             })());
-            return _el$69;
-          }
-        }), _el$77, _co$11);
-        _$insert(_el$54, _$createComponent(Show, {
-          get when() {
-            return props.action;
-          },
-          children: action => _$createComponent(Button, {
-            size: "xs",
-            variant: "subtle",
-            get disabled() {
-              return action().disabled || busy();
-            },
-            onClick: () => void run(),
-            get ["aria-busy"]() {
-              return busy();
+            _$insert(_el$53, _$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, () => messages().remaining);
+                _$insert(_el$68, (() => {
+                  var _c$4 = _$memo(() => remaining() === null);
+                  return () => _c$4() ? messages().unknown : formatNumber(remaining());
+                })());
+                return _el$66;
+              }
+            }), _el$74, _co$11);
+            return _el$53;
+          })(), _$createComponent(Show, {
+            get when() {
+              return props.action;
             },
-            get children() {
-              return [(() => {
-                var _el$85 = _$getNextElement(_tmpl$1);
-                _$effect(() => _$className(_el$85, busy() ? "ti ti-loader-2 k2b-spin" : action().icon));
-                return _el$85;
-              })(), _$memo(() => action().label)];
-            }
-          })
-        }), _el$81, _co$13);
-        return _el$54;
-      })();
+            children: action => _$createComponent(Button, {
+              size: "xs",
+              variant: "subtle",
+              get disabled() {
+                return action().disabled || busy();
+              },
+              onClick: () => void run(),
+              get ["aria-busy"]() {
+                return busy();
+              },
+              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;
+                })(), _$memo(() => action().label)];
+              }
+            })
+          })];
+        }
+      });
     },
     type: "button",
     get ["class"]() {
@@ -742,16 +732,15 @@ export function ChatContextUsage(props) {
       return accessibleLabel();
     },
     get children() {
-      return [_$getNextElement(_tmpl$23), (() => {
-        var _el$53 = _$getNextElement(_tmpl$0);
-        _$insert(_el$53, (() => {
+      return [_$getNextElement(_tmpl$22), (() => {
+        var _el$52 = _$getNextElement(_tmpl$0);
+        _$insert(_el$52, (() => {
           var _c$2 = _$memo(() => percent() === null);
           return () => _c$2() ? "–" : `${percent()}%`;
         })());
-        return _el$53;
+        return _el$52;
       })()];
     }
   });
 }
-_$delegateEvents(["click"]);
 //# sourceMappingURL=ChatPrimitives.js.map