@k2b/ui 0.1.0-rc.0

package/dist/browser/chat/ChatPrimitives.js

@@ -0,0 +1,688 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } 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";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-chat-progress-dots aria-hidden=true><span></span><span></span><span>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-chat-message__attachments role=list>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-chat-message__bubble><div class=k2b-chat-message__content>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<span class="k2b-chat-message__status k2b-chat-message__status--streaming"role=status>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<span class=k2b-chat-message__actions role=group>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<i class="ti ti-dots"aria-hidden=true>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<footer class=k2b-chat-message__meta><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<article><span class=k2b-sr-only><!$><!/>: </span><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<img>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-chat-message__attachment role=listitem>`),
+  _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><!$><!/>`);
+import { createSignal, For, onCleanup, Show } from "solid-js";
+import { Dropdown } from "../actions/Dropdown";
+import { Tooltip } from "../feedback/Tooltip";
+import { useUiMessages } from "../intl/messages";
+import { ProgressBar } from "../surfaces/ProgressBar";
+import { executeChatAction } from "./chat-behavior";
+const roleLabel = (role, messages) => {
+  if (role === "assistant") return messages.assistant;
+  if (role === "user") return messages.user;
+  if (role === "tool") return messages.tool;
+  return messages.system;
+};
+const statusLabel = (status, messages) => {
+  if (status === "pending") return messages.waiting;
+  if (status === "streaming") return messages.generating;
+  if (status === "error") return messages.failed;
+  return null;
+};
+const statusIcon = status => {
+  if (status === "pending") return "ti ti-clock";
+  return "ti ti-alert-circle";
+};
+const ChatProgressDots = () => _$getNextElement(_tmpl$);
+const attachmentIcon = attachment => attachment.icon ?? (attachment.kind === "image" ? "ti ti-photo" : attachment.kind === "resource" ? "ti ti-link" : "ti ti-file");
+const finiteNonNegative = value => typeof value === "number" && Number.isFinite(value) ? Math.max(0, value) : 0;
+const finiteUsageValue = value => typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : null;
+const normalizedUsage = usage => {
+  const input = finiteUsageValue(usage?.input);
+  const output = finiteUsageValue(usage?.output);
+  const explicitTotal = finiteUsageValue(usage?.total);
+  const total = explicitTotal ?? (input !== null || output !== null ? (input ?? 0) + (output ?? 0) : null);
+  return {
+    input,
+    output,
+    total,
+    reported: total !== null
+  };
+};
+const formatStableInteger = value => {
+  const digits = String(Math.round(finiteNonNegative(value)));
+  return digits.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+};
+export const formatChatTokens = tokens => {
+  const value = finiteNonNegative(tokens);
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
+  if (value >= 1_000) return `${(value / 1_000).toFixed(1)}k`;
+  return String(Math.round(value));
+};
+const dateTime = value => {
+  if (!value) return null;
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isFinite(date.getTime()) ? date.toISOString() : null;
+};
+export function ChatMessage(props) {
+  const messages = useUiMessages();
+  const [busyActionId, setBusyActionId] = createSignal(null);
+  const [completedActionId, setCompletedActionId] = createSignal(null);
+  let completedTimer;
+  const status = () => statusLabel(props.status, messages());
+  const timestamp = () => dateTime(props.createdAt);
+  // Locale and timezone are application policy. Requiring an explicit visible
+  // label keeps SSR and hydration byte-stable while `createdAt` still supplies
+  // the semantic machine-readable timestamp.
+  const time = () => props.timeLabel ?? null;
+  const actions = () => props.actions ?? [];
+  const actionDisplay = () => props.actionDisplay === "auto" || !props.actionDisplay ? props.role === "user" ? "menu" : "inline" : props.actionDisplay;
+  const hasMeta = () => props.status === "streaming" || status() !== null || Boolean(time()) || actions().length > 0;
+  const runAction = async action => {
+    if (action.disabled || busyActionId()) return;
+    setBusyActionId(action.id);
+    try {
+      await executeChatAction(action);
+      setCompletedActionId(action.id);
+      if (completedTimer) clearTimeout(completedTimer);
+      completedTimer = setTimeout(() => setCompletedActionId(null), 1400);
+    } catch (error) {
+      props.onActionError?.(error);
+    } finally {
+      setBusyActionId(null);
+    }
+  };
+  const actionIcon = action => busyActionId() === action.id ? "ti ti-loader-2 k2b-spin" : completedActionId() === action.id ? "ti ti-check" : action.icon ?? "ti ti-dots";
+  onCleanup(() => {
+    if (completedTimer) clearTimeout(completedTimer);
+  });
+  const menuItems = () => actions().map(action => ({
+    icon: actionIcon(action),
+    label: action.label,
+    variant: action.variant,
+    disabled: action.disabled || Boolean(busyActionId()),
+    action: () => void runAction(action)
+  }));
+  return (() => {
+    var _el$2 = _$getNextElement(_tmpl$8),
+      _el$3 = _el$2.firstChild,
+      _el$5 = _el$3.firstChild,
+      [_el$6, _co$] = _$getNextMarker(_el$5.nextSibling),
+      _el$4 = _el$6.nextSibling,
+      _el$20 = _el$3.nextSibling,
+      [_el$21, _co$6] = _$getNextMarker(_el$20.nextSibling),
+      _el$22 = _el$21.nextSibling,
+      [_el$23, _co$7] = _$getNextMarker(_el$22.nextSibling),
+      _el$24 = _el$23.nextSibling,
+      [_el$25, _co$8] = _$getNextMarker(_el$24.nextSibling);
+    _$insert(_el$3, () => props.label ?? roleLabel(props.role, messages()), _el$6, _co$);
+    _$insert(_el$2, _$createComponent(Show, {
+      get when() {
+        return (props.attachments?.length ?? 0) > 0;
+      },
+      get children() {
+        var _el$7 = _$getNextElement(_tmpl$2);
+        _$insert(_el$7, _$createComponent(For, {
+          get each() {
+            return props.attachments;
+          },
+          children: attachment => {
+            const content = () => [_$createComponent(Show, {
+              get when() {
+                return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
+              },
+              get fallback() {
+                return (() => {
+                  var _el$28 = _$getNextElement(_tmpl$1);
+                  _$effect(() => _$className(_el$28, attachmentIcon(attachment)));
+                  return _el$28;
+                })();
+              },
+              get children() {
+                var _el$26 = _$getNextElement(_tmpl$9);
+                _$effect(_p$ => {
+                  var _v$6 = attachment.previewUrl,
+                    _v$7 = attachment.alt ?? attachment.name;
+                  _v$6 !== _p$.e && _$setAttribute(_el$26, "src", _p$.e = _v$6);
+                  _v$7 !== _p$.t && _$setAttribute(_el$26, "alt", _p$.t = _v$7);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined
+                });
+                return _el$26;
+              }
+            }), _$createComponent(Show, {
+              get when() {
+                return attachment.kind !== "image";
+              },
+              get children() {
+                var _el$27 = _$getNextElement(_tmpl$0);
+                _$insert(_el$27, () => attachment.name);
+                return _el$27;
+              }
+            })];
+            return _$createComponent(Show, {
+              get when() {
+                return attachment.href;
+              },
+              get fallback() {
+                return (() => {
+                  var _el$29 = _$getNextElement(_tmpl$10);
+                  _$insert(_el$29, content);
+                  _$effect(() => _$setAttribute(_el$29, "title", attachment.name));
+                  return _el$29;
+                })();
+              },
+              children: href => (() => {
+                var _el$30 = _$getNextElement(_tmpl$11);
+                _$insert(_el$30, content);
+                _$effect(_p$ => {
+                  var _v$8 = attachment.name,
+                    _v$9 = href(),
+                    _v$0 = messages().openInNewTab({
+                      name: attachment.name
+                    });
+                  _v$8 !== _p$.e && _$setAttribute(_el$30, "title", _p$.e = _v$8);
+                  _v$9 !== _p$.t && _$setAttribute(_el$30, "href", _p$.t = _v$9);
+                  _v$0 !== _p$.a && _$setAttribute(_el$30, "aria-label", _p$.a = _v$0);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined
+                });
+                return _el$30;
+              })()
+            });
+          }
+        }));
+        _$effect(() => _$setAttribute(_el$7, "aria-label", messages().attachments));
+        return _el$7;
+      }
+    }), _el$21, _co$6);
+    _$insert(_el$2, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!(props.children !== undefined && props.children !== null))() && props.children !== "";
+      },
+      get children() {
+        var _el$8 = _$getNextElement(_tmpl$3),
+          _el$9 = _el$8.firstChild;
+        _$insert(_el$9, () => props.children);
+        return _el$8;
+      }
+    }), _el$23, _co$7);
+    _$insert(_el$2, _$createComponent(Show, {
+      get when() {
+        return hasMeta();
+      },
+      get children() {
+        var _el$0 = _$getNextElement(_tmpl$7),
+          _el$12 = _el$0.firstChild,
+          [_el$13, _co$2] = _$getNextMarker(_el$12.nextSibling),
+          _el$14 = _el$13.nextSibling,
+          [_el$15, _co$3] = _$getNextMarker(_el$14.nextSibling),
+          _el$16 = _el$15.nextSibling,
+          [_el$17, _co$4] = _$getNextMarker(_el$16.nextSibling),
+          _el$18 = _el$17.nextSibling,
+          [_el$19, _co$5] = _$getNextMarker(_el$18.nextSibling);
+        _$insert(_el$0, _$createComponent(Show, {
+          get when() {
+            return props.status === "streaming";
+          },
+          get fallback() {
+            return _$createComponent(Show, {
+              get when() {
+                return status();
+              },
+              children: label => (() => {
+                var _el$31 = _$getNextElement(_tmpl$12),
+                  _el$32 = _el$31.firstChild,
+                  _el$33 = _el$32.nextSibling,
+                  [_el$34, _co$9] = _$getNextMarker(_el$33.nextSibling);
+                _$insert(_el$31, label, _el$34, _co$9);
+                _$effect(_p$ => {
+                  var _v$1 = props.status === "error" ? "alert" : "status",
+                    _v$10 = statusIcon(props.status);
+                  _v$1 !== _p$.e && _$setAttribute(_el$31, "role", _p$.e = _v$1);
+                  _v$10 !== _p$.t && _$className(_el$32, _p$.t = _v$10);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined
+                });
+                return _el$31;
+              })()
+            });
+          },
+          get children() {
+            var _el$1 = _$getNextElement(_tmpl$4);
+            _$insert(_el$1, _$createComponent(ChatProgressDots, {}));
+            _$effect(() => _$setAttribute(_el$1, "aria-label", messages().generating));
+            return _el$1;
+          }
+        }), _el$13, _co$2);
+        _$insert(_el$0, _$createComponent(Show, {
+          get when() {
+            return time();
+          },
+          children: label => (() => {
+            var _el$35 = _$getNextElement(_tmpl$13);
+            _$insert(_el$35, label);
+            _$effect(() => _$setAttribute(_el$35, "datetime", timestamp() ?? undefined));
+            return _el$35;
+          })()
+        }), _el$15, _co$3);
+        _$insert(_el$0, _$createComponent(Show, {
+          get when() {
+            return _$memo(() => actions().length > 0)() && actionDisplay() === "inline";
+          },
+          get children() {
+            var _el$10 = _$getNextElement(_tmpl$5);
+            _$insert(_el$10, _$createComponent(For, {
+              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$11 = action.label,
+                    _v$12 = action.pressed,
+                    _v$13 = action.label,
+                    _v$14 = action.variant === "danger" ? "true" : undefined,
+                    _v$15 = action.disabled || Boolean(busyActionId()),
+                    _v$16 = actionIcon(action);
+                  _v$11 !== _p$.e && _$setAttribute(_el$36, "aria-label", _p$.e = _v$11);
+                  _v$12 !== _p$.t && _$setAttribute(_el$36, "aria-pressed", _p$.t = _v$12);
+                  _v$13 !== _p$.a && _$setAttribute(_el$36, "title", _p$.a = _v$13);
+                  _v$14 !== _p$.o && _$setAttribute(_el$36, "data-danger", _p$.o = _v$14);
+                  _v$15 !== _p$.i && _$setProperty(_el$36, "disabled", _p$.i = _v$15);
+                  _v$16 !== _p$.n && _$className(_el$37, _p$.n = _v$16);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined,
+                  o: undefined,
+                  i: undefined,
+                  n: undefined
+                });
+                _$runHydrationEvents();
+                return _el$36;
+              })()
+            }));
+            _$effect(() => _$setAttribute(_el$10, "aria-label", messages().messageActions));
+            return _el$10;
+          }
+        }), _el$17, _co$4);
+        _$insert(_el$0, _$createComponent(Show, {
+          get when() {
+            return _$memo(() => actions().length > 0)() && actionDisplay() === "menu";
+          },
+          get children() {
+            return _$createComponent(Dropdown.Root, {
+              position: "bottom-left",
+              width: "12rem",
+              get label() {
+                return messages().messageActions;
+              },
+              get items() {
+                return menuItems();
+              },
+              get children() {
+                return _$createComponent(Dropdown.Trigger, {
+                  appearance: "plain",
+                  "class": "k2b-chat-message__menu",
+                  get label() {
+                    return messages().messageActions;
+                  },
+                  get title() {
+                    return messages().messageActions;
+                  },
+                  get children() {
+                    return _$getNextElement(_tmpl$6);
+                  }
+                });
+              }
+            });
+          }
+        }), _el$19, _co$5);
+        return _el$0;
+      }
+    }), _el$25, _co$8);
+    _$effect(_p$ => {
+      var _v$ = `k2b-chat-message ${props.class ?? ""}`,
+        _v$2 = props.role,
+        _v$3 = props.status ?? "complete",
+        _v$4 = props.anchorId !== undefined ? String(props.anchorId) : undefined,
+        _v$5 = props.status === "pending" || props.status === "streaming" ? "true" : undefined;
+      _v$ !== _p$.e && _$className(_el$2, _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$2, "data-role", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setAttribute(_el$2, "data-status", _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setAttribute(_el$2, "data-chat-anchor", _p$.o = _v$4);
+      _v$5 !== _p$.i && _$setAttribute(_el$2, "aria-busy", _p$.i = _v$5);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined
+    });
+    return _el$2;
+  })();
+}
+const ActivityContent = props => [(() => {
+  var _el$38 = _$getNextElement(_tmpl$15);
+  _$insert(_el$38, _$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;
+      })();
+    },
+    get children() {
+      return props.leading;
+    }
+  }));
+  return _el$38;
+})(), (() => {
+  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, {
+    get when() {
+      return props.description;
+    },
+    children: description => (() => {
+      var _el$46 = _$getNextElement(_tmpl$20);
+      _$insert(_el$46, description);
+      return _el$46;
+    })()
+  }), _el$42, _co$0);
+  return _el$39;
+})(), _$createComponent(Show, {
+  get when() {
+    return props.trailing;
+  },
+  get children() {
+    var _el$43 = _$getNextElement(_tmpl$17);
+    _$insert(_el$43, () => props.trailing);
+    return _el$43;
+  }
+}), _$createComponent(Show, {
+  get when() {
+    return props.disclosure;
+  },
+  get children() {
+    return _$getNextElement(_tmpl$18);
+  }
+})];
+export function ChatActivity(props) {
+  const tone = () => props.tone ?? "neutral";
+  const style = () => props.accent ? {
+    "--k2b-chat-activity-accent": props.accent
+  } : undefined;
+  return _$createComponent(Show, {
+    get when() {
+      return props.children;
+    },
+    get fallback() {
+      return (() => {
+        var _el$50 = _$getNextElement(_tmpl$22),
+          _el$51 = _el$50.firstChild;
+        _$insert(_el$51, _$createComponent(ActivityContent, props));
+        _$effect(_p$ => {
+          var _v$26 = `k2b-chat-activity ${props.class ?? ""}`,
+            _v$27 = tone(),
+            _v$28 = props.accent ? "true" : undefined,
+            _v$29 = props.busy ? "true" : undefined,
+            _v$30 = props.anchorId !== undefined ? String(props.anchorId) : undefined,
+            _v$31 = style(),
+            _v$32 = props.busy ? "true" : undefined;
+          _v$26 !== _p$.e && _$className(_el$50, _p$.e = _v$26);
+          _v$27 !== _p$.t && _$setAttribute(_el$50, "data-tone", _p$.t = _v$27);
+          _v$28 !== _p$.a && _$setAttribute(_el$50, "data-accent", _p$.a = _v$28);
+          _v$29 !== _p$.o && _$setAttribute(_el$50, "data-busy", _p$.o = _v$29);
+          _v$30 !== _p$.i && _$setAttribute(_el$50, "data-chat-anchor", _p$.i = _v$30);
+          _p$.n = _$style(_el$50, _v$31, _p$.n);
+          _v$32 !== _p$.s && _$setAttribute(_el$50, "aria-busy", _p$.s = _v$32);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined,
+          n: undefined,
+          s: undefined
+        });
+        return _el$50;
+      })();
+    },
+    get children() {
+      var _el$47 = _$getNextElement(_tmpl$21),
+        _el$48 = _el$47.firstChild,
+        _el$49 = _el$48.nextSibling;
+      _el$47.addEventListener("toggle", event => props.onOpenChange?.(event.currentTarget.open));
+      _$insert(_el$48, _$createComponent(ActivityContent, _$mergeProps(props, {
+        disclosure: true
+      })));
+      _$insert(_el$49, () => props.children);
+      _$effect(_p$ => {
+        var _v$17 = `k2b-chat-activity ${props.class ?? ""}`,
+          _v$18 = tone(),
+          _v$19 = props.accent ? "true" : undefined,
+          _v$20 = props.busy ? "true" : undefined,
+          _v$21 = props.bodyInset === false ? "false" : undefined,
+          _v$22 = props.anchorId !== undefined ? String(props.anchorId) : undefined,
+          _v$23 = style(),
+          _v$24 = props.open ?? props.defaultOpen,
+          _v$25 = props.busy ? "true" : undefined;
+        _v$17 !== _p$.e && _$className(_el$47, _p$.e = _v$17);
+        _v$18 !== _p$.t && _$setAttribute(_el$47, "data-tone", _p$.t = _v$18);
+        _v$19 !== _p$.a && _$setAttribute(_el$47, "data-accent", _p$.a = _v$19);
+        _v$20 !== _p$.o && _$setAttribute(_el$47, "data-busy", _p$.o = _v$20);
+        _v$21 !== _p$.i && _$setAttribute(_el$47, "data-body-inset", _p$.i = _v$21);
+        _v$22 !== _p$.n && _$setAttribute(_el$47, "data-chat-anchor", _p$.n = _v$22);
+        _p$.s = _$style(_el$47, _v$23, _p$.s);
+        _v$24 !== _p$.h && _$setProperty(_el$47, "open", _p$.h = _v$24);
+        _v$25 !== _p$.r && _$setAttribute(_el$47, "aria-busy", _p$.r = _v$25);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined,
+        n: undefined,
+        s: undefined,
+        h: undefined,
+        r: undefined
+      });
+      return _el$47;
+    }
+  });
+}
+export function ChatContextUsage(props) {
+  const messages = useUiMessages();
+  const formatNumber = value => (props.formatNumber ?? formatStableInteger)(value);
+  const formattedUsageValue = value => value === null ? messages().unknown : formatNumber(value);
+  const usage = () => normalizedUsage(props.usage);
+  const loopUsage = () => normalizedUsage(props.loopUsage);
+  const total = () => usage().total ?? 0;
+  const windowSize = () => finiteNonNegative(props.contextWindow);
+  const reported = () => usage().reported;
+  const percent = () => reported() && windowSize() > 0 ? Math.min(100, Math.round(total() / windowSize() * 100)) : null;
+  const remaining = () => reported() && windowSize() > 0 ? Math.max(0, windowSize() - total()) : null;
+  const accessibleLabel = () => {
+    if (!reported()) {
+      return windowSize() > 0 ? messages().contextUsageUnavailableWithWindow({
+        window: formatNumber(windowSize())
+      }) : messages().contextUsageUnavailable;
+    }
+    return percent() === null ? messages().tokensUsed({
+      total: formatNumber(total())
+    }) : messages().tokensUsedPercent({
+      total: formatNumber(total()),
+      percent: percent()
+    });
+  };
+  return _$createComponent(Tooltip.Trigger, {
+    placement: "top",
+    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);
+        _$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;
+              },
+              size: "xs",
+              get tone() {
+                return (percent() ?? 0) >= 85 ? "danger" : "info";
+              },
+              get label() {
+                return messages().contextWindowUsed;
+              }
+            });
+          }
+        }), _el$79, _co$12);
+        _$insert(_el$56, _$createComponent(Show, {
+          get when() {
+            return props.modelLabel;
+          },
+          children: model => (() => {
+            var _el$80 = _$getNextElement(_tmpl$24),
+              _el$81 = _el$80.firstChild,
+              _el$82 = _el$81.nextSibling;
+            _$insert(_el$81, () => messages().model);
+            _$insert(_el$82, model);
+            return _el$80;
+          })()
+        }), _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$2 = _$memo(() => windowSize() > 0);
+          return () => _c$2() ? 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$3 = _$memo(() => remaining() === null);
+              return () => _c$3() ? messages().unknown : formatNumber(remaining());
+            })());
+            return _el$69;
+          }
+        }), _el$77, _co$11);
+        return _el$54;
+      })();
+    },
+    type: "button",
+    get ["class"]() {
+      return `k2b-chat-context ${props.class ?? ""}`;
+    },
+    get ["data-warning"]() {
+      return reported() && (percent() ?? 0) >= 85 ? "true" : undefined;
+    },
+    get ["aria-label"]() {
+      return accessibleLabel();
+    },
+    get children() {
+      return [_$getNextElement(_tmpl$23), (() => {
+        var _el$53 = _$getNextElement(_tmpl$0);
+        _$insert(_el$53, (() => {
+          var _c$ = _$memo(() => percent() === null);
+          return () => _c$() ? "–" : `${percent()}%`;
+        })());
+        return _el$53;
+      })()];
+    }
+  });
+}
+_$delegateEvents(["click"]);
+//# sourceMappingURL=ChatPrimitives.js.map