@adecore/agents-react 0.31.11 → 0.32.0

package/dist/usage/UsageChart.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Surface, useMeasuredWidth } from '@adecore/ui';
 import { PROVIDER_COLORS, PROVIDER_LABELS, slotAxisLabel, slotLabel } from './format.js';
 import { niceScale } from './summary.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const HEIGHT = 224;
 const TOOLTIP_WIDTH = 168;
 /* A bar that is dimmed still has to read as its own color, so the rest keeps well over half of it. */
@@ -12,36 +13,314 @@ const DIMMED = 0.55;
  * One stacked bar per slot, a segment per provider. Stacked rather than layered areas, since the total
  * of a day is the height of its bar, and the smaller provider never disappears under the larger one.
  */
-export function UsageChart({ slots, providers, format, labelEvery }) {
-    const { t } = useTranslation('agent-usage');
-    const [measure, width] = useMeasuredWidth();
-    const [hovered, setHovered] = useState(null);
-    const scale = niceScale(Math.max(...slots.map((slot) => slot.total), 0));
-    const band = slots.length === 0 ? 0 : width / slots.length;
-    const barWidth = Math.max(1, Math.round(band * 0.62));
-    const ticks = Array.from({ length: Math.round(scale.max / scale.step) + 1 }, (_, index) => index * scale.step);
-    const active = hovered === null ? null : slots[hovered];
-    const onPointerMove = (e) => {
-        const bounds = e.currentTarget.getBoundingClientRect();
-        const index = band === 0 ? -1 : Math.floor((e.clientX - bounds.left) / band);
-        setHovered(index >= 0 && index < slots.length ? index : null);
+export function UsageChart(t0) {
+  const $ = _c(68);
+  const {
+    slots,
+    providers,
+    format,
+    labelEvery
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-usage");
+  const [measure, width] = useMeasuredWidth();
+  const [hovered, setHovered] = useState(null);
+  let t1;
+  if ($[0] !== slots) {
+    t1 = Math.max(...slots.map(_temp), 0);
+    $[0] = slots;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== t1) {
+    t2 = niceScale(t1);
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const scale = t2;
+  const band = slots.length === 0 ? 0 : width / slots.length;
+  let t3;
+  if ($[4] !== band) {
+    t3 = Math.round(band * 0.62);
+    $[4] = band;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const barWidth = Math.max(1, t3);
+  let t4;
+  if ($[6] !== scale.max || $[7] !== scale.step) {
+    let t5;
+    if ($[9] !== scale.step) {
+      t5 = (_, index) => index * scale.step;
+      $[9] = scale.step;
+      $[10] = t5;
+    } else {
+      t5 = $[10];
+    }
+    t4 = Array.from({
+      length: Math.round(scale.max / scale.step) + 1
+    }, t5);
+    $[6] = scale.max;
+    $[7] = scale.step;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  const ticks = t4;
+  const active = hovered === null ? null : slots[hovered];
+  let t5;
+  if ($[11] !== band || $[12] !== slots.length) {
+    t5 = e => {
+      const bounds = e.currentTarget.getBoundingClientRect();
+      const index_0 = band === 0 ? -1 : Math.floor((e.clientX - bounds.left) / band);
+      setHovered(index_0 >= 0 && index_0 < slots.length ? index_0 : null);
+    };
+    $[11] = band;
+    $[12] = slots.length;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  const onPointerMove = t5;
+  let t6;
+  if ($[14] !== band || $[15] !== hovered || $[16] !== width) {
+    t6 = hovered === null ? 0 : Math.round(Math.min(Math.max(0, hovered * band + band / 2 - TOOLTIP_WIDTH / 2), Math.max(0, width - TOOLTIP_WIDTH)));
+    $[14] = band;
+    $[15] = hovered;
+    $[16] = width;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  const tooltipLeft = t6;
+  let t7;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = {
+      height: HEIGHT
     };
-    /* Near the right edge the card would run off the column, so it hangs from the other side. */
-    const tooltipLeft = hovered === null ? 0 : Math.round(Math.min(Math.max(0, hovered * band + band / 2 - TOOLTIP_WIDTH / 2), Math.max(0, width - TOOLTIP_WIDTH)));
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { ref: measure, className: "relative", style: { height: HEIGHT }, onPointerMove: onPointerMove, onPointerLeave: () => setHovered(null), children: [_jsxs("svg", { width: width, height: HEIGHT, role: "presentation", children: [ticks.map((tick) => {
-                                const y = Math.round(HEIGHT - (tick / scale.max) * HEIGHT) + 0.5;
-                                return _jsx("line", { x1: 0, x2: width, y1: y, y2: y, stroke: "var(--border)", strokeWidth: 1 }, tick);
-                            }), slots.map((slot, index) => {
-                                const left = Math.round(index * band + (band - barWidth) / 2);
-                                let bottom = HEIGHT;
-                                return (_jsx("g", { opacity: hovered === null || hovered === index ? 1 : DIMMED, children: providers.map((provider) => {
-                                        const value = slot.byProvider[provider] ?? 0;
-                                        if (value <= 0) {
-                                            return null;
-                                        }
-                                        const height = Math.max(1, Math.round((value / scale.max) * HEIGHT));
-                                        bottom -= height;
-                                        return _jsx("rect", { x: left, y: bottom, width: barWidth, height: height, fill: PROVIDER_COLORS[provider] }, provider);
-                                    }) }, slot.slot));
-                            }), hovered !== null && (_jsx("line", { x1: Math.round(hovered * band + band / 2) + 0.5, x2: Math.round(hovered * band + band / 2) + 0.5, y1: 0, y2: HEIGHT, stroke: "var(--border-strong)", strokeWidth: 1 }))] }), active && (_jsxs(Surface, { className: "pointer-events-none absolute top-2 rounded-lg p-2 text-xs", style: { left: tooltipLeft, width: TOOLTIP_WIDTH }, children: [_jsx("p", { className: "mb-1 font-medium", children: slotLabel(active.slot) }), providers.map((provider) => (_jsxs("p", { className: "flex items-center gap-1.5 text-text-muted", children: [_jsx("span", { className: "size-2 shrink-0 rounded-full", style: { background: PROVIDER_COLORS[provider] } }), PROVIDER_LABELS[provider], _jsx("span", { className: "ml-auto tabular-nums text-text", children: format(active.byProvider[provider] ?? 0) })] }, provider))), _jsxs("p", { className: "mt-1 flex items-center gap-1.5 border-t border-border pt-1 font-medium", children: [t('chart.total'), _jsx("span", { className: "ml-auto tabular-nums", children: format(active.total) })] })] }))] }), _jsx("div", { className: "relative mt-2 h-4", children: slots.map((slot, index) => index % labelEvery === 0 ? (_jsx("span", { className: "absolute -translate-x-1/2 text-xs whitespace-nowrap text-text-faint", style: { left: Math.round(index * band + band / 2) }, children: slotAxisLabel(slot.slot) }, slot.slot)) : null) })] }));
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  let t8;
+  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = () => setHovered(null);
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  let t9;
+  if ($[20] !== scale.max || $[21] !== ticks || $[22] !== width) {
+    t9 = ticks.map(tick => {
+      const y = Math.round(HEIGHT - tick / scale.max * HEIGHT) + 0.5;
+      return /*#__PURE__*/_jsx("line", {
+        x1: 0,
+        x2: width,
+        y1: y,
+        y2: y,
+        stroke: "var(--border)",
+        strokeWidth: 1
+      }, tick);
+    });
+    $[20] = scale.max;
+    $[21] = ticks;
+    $[22] = width;
+    $[23] = t9;
+  } else {
+    t9 = $[23];
+  }
+  let t10;
+  if ($[24] !== band || $[25] !== barWidth || $[26] !== hovered || $[27] !== providers || $[28] !== scale.max || $[29] !== slots) {
+    let t11;
+    if ($[31] !== band || $[32] !== barWidth || $[33] !== hovered || $[34] !== providers || $[35] !== scale.max) {
+      t11 = (slot_0, index_1) => {
+        const left = Math.round(index_1 * band + (band - barWidth) / 2);
+        let bottom = HEIGHT;
+        return /*#__PURE__*/_jsx("g", {
+          opacity: hovered === null || hovered === index_1 ? 1 : DIMMED,
+          children: providers.map(provider => {
+            const value = slot_0.byProvider[provider] ?? 0;
+            if (value <= 0) {
+              return null;
+            }
+            const height = Math.max(1, Math.round(value / scale.max * HEIGHT));
+            bottom = bottom - height;
+            bottom;
+            return /*#__PURE__*/_jsx("rect", {
+              x: left,
+              y: bottom,
+              width: barWidth,
+              height: height,
+              fill: PROVIDER_COLORS[provider]
+            }, provider);
+          })
+        }, slot_0.slot);
+      };
+      $[31] = band;
+      $[32] = barWidth;
+      $[33] = hovered;
+      $[34] = providers;
+      $[35] = scale.max;
+      $[36] = t11;
+    } else {
+      t11 = $[36];
+    }
+    t10 = slots.map(t11);
+    $[24] = band;
+    $[25] = barWidth;
+    $[26] = hovered;
+    $[27] = providers;
+    $[28] = scale.max;
+    $[29] = slots;
+    $[30] = t10;
+  } else {
+    t10 = $[30];
+  }
+  let t11;
+  if ($[37] !== band || $[38] !== hovered) {
+    t11 = hovered !== null && /*#__PURE__*/_jsx("line", {
+      x1: Math.round(hovered * band + band / 2) + 0.5,
+      x2: Math.round(hovered * band + band / 2) + 0.5,
+      y1: 0,
+      y2: HEIGHT,
+      stroke: "var(--border-strong)",
+      strokeWidth: 1
+    });
+    $[37] = band;
+    $[38] = hovered;
+    $[39] = t11;
+  } else {
+    t11 = $[39];
+  }
+  let t12;
+  if ($[40] !== t10 || $[41] !== t11 || $[42] !== t9 || $[43] !== width) {
+    t12 = /*#__PURE__*/_jsxs("svg", {
+      width: width,
+      height: HEIGHT,
+      role: "presentation",
+      children: [t9, t10, t11]
+    });
+    $[40] = t10;
+    $[41] = t11;
+    $[42] = t9;
+    $[43] = width;
+    $[44] = t12;
+  } else {
+    t12 = $[44];
+  }
+  let t13;
+  if ($[45] !== active || $[46] !== format || $[47] !== providers || $[48] !== t || $[49] !== tooltipLeft) {
+    t13 = active && /*#__PURE__*/_jsxs(Surface, {
+      className: "pointer-events-none absolute top-2 rounded-lg p-2 text-xs",
+      style: {
+        left: tooltipLeft,
+        width: TOOLTIP_WIDTH
+      },
+      children: [/*#__PURE__*/_jsx("p", {
+        className: "mb-1 font-medium",
+        children: slotLabel(active.slot)
+      }), providers.map(provider_0 => /*#__PURE__*/_jsxs("p", {
+        className: "flex items-center gap-1.5 text-text-muted",
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "size-2 shrink-0 rounded-full",
+          style: {
+            background: PROVIDER_COLORS[provider_0]
+          }
+        }), PROVIDER_LABELS[provider_0], /*#__PURE__*/_jsx("span", {
+          className: "ml-auto tabular-nums text-text",
+          children: format(active.byProvider[provider_0] ?? 0)
+        })]
+      }, provider_0)), /*#__PURE__*/_jsxs("p", {
+        className: "mt-1 flex items-center gap-1.5 border-t border-border pt-1 font-medium",
+        children: [t("chart.total"), /*#__PURE__*/_jsx("span", {
+          className: "ml-auto tabular-nums",
+          children: format(active.total)
+        })]
+      })]
+    });
+    $[45] = active;
+    $[46] = format;
+    $[47] = providers;
+    $[48] = t;
+    $[49] = tooltipLeft;
+    $[50] = t13;
+  } else {
+    t13 = $[50];
+  }
+  let t14;
+  if ($[51] !== measure || $[52] !== onPointerMove || $[53] !== t12 || $[54] !== t13) {
+    t14 = /*#__PURE__*/_jsxs("div", {
+      ref: measure,
+      className: "relative",
+      style: t7,
+      onPointerMove: onPointerMove,
+      onPointerLeave: t8,
+      children: [t12, t13]
+    });
+    $[51] = measure;
+    $[52] = onPointerMove;
+    $[53] = t12;
+    $[54] = t13;
+    $[55] = t14;
+  } else {
+    t14 = $[55];
+  }
+  let t15;
+  if ($[56] !== band || $[57] !== labelEvery || $[58] !== slots) {
+    let t16;
+    if ($[60] !== band || $[61] !== labelEvery) {
+      t16 = (slot_1, index_2) => index_2 % labelEvery === 0 ? /*#__PURE__*/_jsx("span", {
+        className: "absolute -translate-x-1/2 text-xs whitespace-nowrap text-text-faint",
+        style: {
+          left: Math.round(index_2 * band + band / 2)
+        },
+        children: slotAxisLabel(slot_1.slot)
+      }, slot_1.slot) : null;
+      $[60] = band;
+      $[61] = labelEvery;
+      $[62] = t16;
+    } else {
+      t16 = $[62];
+    }
+    t15 = slots.map(t16);
+    $[56] = band;
+    $[57] = labelEvery;
+    $[58] = slots;
+    $[59] = t15;
+  } else {
+    t15 = $[59];
+  }
+  let t16;
+  if ($[63] !== t15) {
+    t16 = /*#__PURE__*/_jsx("div", {
+      className: "relative mt-2 h-4",
+      children: t15
+    });
+    $[63] = t15;
+    $[64] = t16;
+  } else {
+    t16 = $[64];
+  }
+  let t17;
+  if ($[65] !== t14 || $[66] !== t16) {
+    t17 = /*#__PURE__*/_jsxs("div", {
+      className: "flex flex-col",
+      children: [t14, t16]
+    });
+    $[65] = t14;
+    $[66] = t16;
+    $[67] = t17;
+  } else {
+    t17 = $[67];
+  }
+  return t17;
 }
+function _temp(slot) {
+  return slot.total;
+}

package/dist/usage/UsageDialog.js

@@ -1,10 +1,52 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import i18next from 'i18next';
 import { Dialog } from '@adecore/ui';
 /*
  * The frame of the usage page, wider than the settings for the chart and the breakdown. What goes in
  * it mounts only while it is open, so nothing is scanned behind a closed dialog.
  */
-export function UsageDialog({ open, onOpenChange, children }) {
-    return (_jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Popup, { className: "flex h-[820px] w-[1080px] flex-col", children: [children, _jsx(Dialog.Description, { className: "sr-only", children: i18next.t('agent-usage:dialog.description') })] }) }));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function UsageDialog(t0) {
+  const $ = _c(7);
+  const {
+    open,
+    onOpenChange,
+    children
+  } = t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = /*#__PURE__*/_jsx(Dialog.Description, {
+      className: "sr-only",
+      children: i18next.t("agent-usage:dialog.description")
+    });
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] !== children) {
+    t2 = /*#__PURE__*/_jsxs(Dialog.Popup, {
+      className: "flex h-[820px] w-[1080px] flex-col",
+      children: [children, t1]
+    });
+    $[1] = children;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== onOpenChange || $[4] !== open || $[5] !== t2) {
+    t3 = /*#__PURE__*/_jsx(Dialog.Root, {
+      open: open,
+      onOpenChange: onOpenChange,
+      children: t2
+    });
+    $[3] = onOpenChange;
+    $[4] = open;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}