@opengeni/react 6.5.2-canary.41607687019001 → 6.7.0

package/dist/chunk-K2A5PXQ5.js

@@ -0,0 +1,412 @@
+"use client";
+import {
+  classifySessionUsageLimitSaveError,
+  isOutcomeUnknown,
+  parseSessionUsageLimitDraft,
+  sessionUsageLimitCapability,
+  sessionUsageLimitInputValue,
+  useSessionUsageLimit
+} from "./chunk-UMTXA2TH.js";
+import {
+  hasWorkspacePermission
+} from "./chunk-H2ALCTWC.js";
+import {
+  toast
+} from "./chunk-O4EA4F3W.js";
+import {
+  useAppContext
+} from "./chunk-JDFDPMKX.js";
+import {
+  HelpLink,
+  HelpTip,
+  InlineHelp
+} from "./chunk-MWSRT3IQ.js";
+import {
+  cn
+} from "./chunk-A3MTTRCX.js";
+import {
+  SegmentedControl
+} from "./chunk-RGBI63KJ.js";
+import {
+  StatusDot
+} from "./chunk-X6WZOHBI.js";
+import {
+  Skeleton
+} from "./chunk-HJO32O7Z.js";
+import {
+  SettingRow
+} from "./chunk-YNF2OC54.js";
+import {
+  Field,
+  TextInput
+} from "./chunk-MVW6HNPI.js";
+import {
+  DEFAULT_SESSION_USAGE_LIMIT_LABELS,
+  summarizeSessionUsageLimit
+} from "./chunk-4U7SHFQ2.js";
+import {
+  Button
+} from "./chunk-7QQN3KNP.js";
+import {
+  useOpenGeniText
+} from "./chunk-7T2ZE3VT.js";
+
+// src/app/components/session/session-usage-limit-section.tsx
+import {
+  formatSessionUsageMicros
+} from "@opengeni/sdk/session-usage-limits";
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DISABLED_REASON = "New limits are turned off here. You can still remove a limit.";
+var SESSION_USAGE_LIMIT_UNKNOWN_RETRY_MS = [500, 1500];
+function limitText(limitMicros) {
+  return limitMicros === null ? "no limit" : formatSessionUsageMicros(limitMicros);
+}
+function sessionHref(workspaceId, sessionId) {
+  return `/workspaces/${workspaceId}/sessions/${sessionId}`;
+}
+function SessionUsageLimitSection(props) {
+  const { session } = props;
+  const t = useOpenGeniText();
+  const LABELS = DEFAULT_SESSION_USAGE_LIMIT_LABELS(t);
+  const context = useAppContext();
+  const capability = sessionUsageLimitCapability(context.clientConfig);
+  const canControl = hasWorkspacePermission(
+    context.accessContext,
+    session.workspaceId,
+    "sessions:control"
+  );
+  const limit = useSessionUsageLimit({
+    client: context.client,
+    workspaceId: session.workspaceId,
+    sessionId: session.id,
+    initial: session.usageLimit,
+    enabled: capability !== "absent"
+  });
+  const { usage, refresh } = limit;
+  useEffect(() => {
+    if (capability !== "absent" && !usage) void refresh();
+  }, [capability, session.id]);
+  const child = Boolean(session.parentSessionId) || usage?.inherited === true;
+  const rootSessionId = usage?.rootSessionId ?? null;
+  const editable = capability !== "absent" && canControl && !child && usage !== null;
+  const stale = usage !== null && limit.error !== null;
+  const summary = summarizeSessionUsageLimit(t, usage, void 0, { stale });
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState({ kind: "none" });
+  const [saving, setSaving] = useState(false);
+  const [failure, setFailure] = useState(null);
+  const [touched, setTouched] = useState(false);
+  const [editBase, setEditBase] = useState(null);
+  const pendingSave = useRef(null);
+  const changeButton = useRef(null);
+  const editorRef = useRef(null);
+  const amountInput = useRef(null);
+  const rootRef = useRef(null);
+  const statusId = useId();
+  const openEditor = () => {
+    if (usage) setEditBase({ version: usage.version, limitMicros: usage.limitMicros });
+    pendingSave.current = null;
+    setDraft(
+      usage?.limitMicros === null || usage?.limitMicros === void 0 ? { kind: "none" } : { kind: "limit", text: sessionUsageLimitInputValue(usage.limitMicros) }
+    );
+    setFailure(null);
+    setTouched(false);
+    setEditing(true);
+  };
+  const closeEditor = () => {
+    setEditing(false);
+    setFailure(null);
+    requestAnimationFrame(() => changeButton.current?.focus({ preventScroll: true }));
+  };
+  const focusRequest = props.focusRequest ?? 0;
+  const handledFocus = useRef(0);
+  const [focusNonce, setFocusNonce] = useState(0);
+  useEffect(() => {
+    if (!focusRequest || handledFocus.current === focusRequest) return;
+    if (capability === "absent") return;
+    if (editable === false && usage === null && !limit.error) return;
+    handledFocus.current = focusRequest;
+    if (editable && !editing) openEditor();
+    setFocusNonce((current) => current + 1);
+  }, [focusRequest, editable, usage === null, limit.error]);
+  useEffect(() => {
+    if (!focusNonce) return;
+    const frame = requestAnimationFrame(() => {
+      rootRef.current?.scrollIntoView({ block: "nearest" });
+      const target = editorRef.current?.querySelector(
+        '[role="radio"][aria-checked="true"], [data-state="on"]'
+      ) ?? changeButton.current ?? rootRef.current?.querySelector("a, button");
+      target?.focus({ preventScroll: true });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [focusNonce]);
+  useEffect(() => {
+    if (editing && draft.kind === "limit" && touched) amountInput.current?.focus();
+  }, [draft.kind]);
+  if (capability === "absent") return null;
+  const parsed = parseSessionUsageLimitDraft(draft);
+  const draftMicros = parsed.ok ? parsed.limitMicros : void 0;
+  const unchanged = parsed.ok && draftMicros === (usage?.limitMicros ?? null);
+  const settingBlocked = capability === "disabled" && draft.kind === "limit";
+  const amountError = draft.kind === "limit" && !parsed.ok && (touched || draft.text.trim()) ? parsed.error : null;
+  async function save() {
+    if (!usage || saving || !parsed.ok || settingBlocked) return;
+    const base = editBase ?? { version: usage.version, limitMicros: usage.limitMicros };
+    const request = { limitMicros: parsed.limitMicros, expectedVersion: base.version };
+    const previous = pendingSave.current;
+    const operationId = previous && previous.limitMicros === request.limitMicros && previous.expectedVersion === request.expectedVersion ? previous.operationId : crypto.randomUUID();
+    pendingSave.current = { ...request, operationId };
+    setSaving(true);
+    setFailure(null);
+    try {
+      let committed = null;
+      for (let attempt = 0; committed === null; attempt += 1) {
+        try {
+          committed = await context.client.setSessionUsageLimit(session.workspaceId, session.id, {
+            ...request,
+            operationId
+          });
+        } catch (error) {
+          const retryIn = SESSION_USAGE_LIMIT_UNKNOWN_RETRY_MS[attempt];
+          if (!isOutcomeUnknown(error) || retryIn === void 0) throw error;
+          await new Promise((resolve) => setTimeout(resolve, retryIn));
+        }
+      }
+      pendingSave.current = null;
+      limit.apply(committed);
+      closeEditor();
+      const title = committed.limitMicros === null ? "Usage limit removed" : `Usage limit set to ${formatSessionUsageMicros(committed.limitMicros)}`;
+      toast.success(
+        title,
+        props.goalPausedAtLimit ? { description: "Resume the goal to continue." } : void 0
+      );
+    } catch (error) {
+      const classified = classifySessionUsageLimitSaveError(error);
+      if (classified.kind !== "unknown") pendingSave.current = null;
+      if (classified.kind === "conflict") {
+        const latest = await refresh();
+        if (latest && latest.version !== base.version) {
+          setEditBase({ version: latest.version, limitMicros: latest.limitMicros });
+          setFailure({
+            ...classified,
+            message: `Someone changed this limit to ${limitText(latest.limitMicros)} while you were editing. Save again to use your amount instead.`
+          });
+        } else {
+          setFailure(classified);
+        }
+      } else {
+        setFailure(classified);
+        if (classified.kind === "preparing") void refresh();
+      }
+    } finally {
+      setSaving(false);
+    }
+  }
+  const limitLine = usage === null ? null : usage.limitMicros === null ? LABELS.noLimit : LABELS.pauseAt(formatSessionUsageMicros(usage.limitMicros));
+  const amountLeads = summary.state === "within" || summary.state === "near" || summary.state === "reached";
+  const primaryLine = amountLeads ? summary.amountText : limitLine;
+  const secondaryLine = amountLeads ? null : summary.amountText;
+  const value = usage === null ? limit.error ? /* @__PURE__ */ jsx(
+    InlineHelp,
+    {
+      action: /* @__PURE__ */ jsx(HelpLink, { onClick: () => void refresh(), className: "text-xs", children: "Try again" }),
+      children: "Couldn't read this chat's usage limit."
+    }
+  ) : /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-40", "aria-label": "Loading usage limit" }) : /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: statusId,
+      "data-usage-limit-state": summary.state,
+      className: "flex min-w-0 flex-col gap-1.5",
+      children: [
+        /* @__PURE__ */ jsxs("p", { className: "flex min-w-0 flex-wrap items-center gap-x-2 text-sm leading-5 text-fg", children: [
+          /* @__PURE__ */ jsx("span", { "data-usage-limit-amount": true, children: primaryLine }),
+          summary.state === "reached" ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs font-medium text-status-waiting", children: [
+            /* @__PURE__ */ jsx(StatusDot, { tone: "waiting", size: "sm" }),
+            "Reached"
+          ] }) : null
+        ] }),
+        summary.barFraction !== null ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "h-1 w-full max-w-60 overflow-hidden rounded-full bg-surface-2",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "h-full rounded-full",
+                  summary.state === "reached" ? "bg-status-waiting" : "bg-brand"
+                ),
+                style: { width: `${Math.round(summary.barFraction * 100)}%` }
+              }
+            )
+          }
+        ) : null,
+        secondaryLine ? /* @__PURE__ */ jsx("p", { className: "text-xs leading-4.5 text-fg-muted", children: secondaryLine }) : null,
+        summary.notes.filter((note) => !(summary.stale && note === LABELS.staleNote)).map((note) => /* @__PURE__ */ jsx("p", { className: "text-xs leading-4.5 text-fg-muted", children: note }, note)),
+        summary.stale ? /* @__PURE__ */ jsx(
+          InlineHelp,
+          {
+            action: /* @__PURE__ */ jsx(HelpLink, { onClick: () => void refresh(), className: "text-xs", children: "Try again" }),
+            children: /* @__PURE__ */ jsx("span", { "data-usage-limit-stale": true, children: LABELS.staleNote })
+          }
+        ) : null,
+        child && rootSessionId ? /* @__PURE__ */ jsx(
+          InlineHelp,
+          {
+            action: /* @__PURE__ */ jsx(HelpLink, { href: sessionHref(session.workspaceId, rootSessionId), className: "text-xs", children: LABELS.openMainTask }),
+            children: "Set on the main task for it and all its agents."
+          }
+        ) : !child && !canControl ? /* @__PURE__ */ jsx(InlineHelp, { children: "Changing it needs permission to run this chat." }) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-session-usage-limit": true, className: "-mt-3 flex min-w-0 flex-col", children: [
+    /* @__PURE__ */ jsx(
+      SettingRow,
+      {
+        label: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+          LABELS.title,
+          /* @__PURE__ */ jsx(HelpTip, { label: "About usage limits", children: LABELS.notYourBill })
+        ] }),
+        description: LABELS.explanation,
+        control: editable && !editing ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            ref: changeButton,
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            className: "pointer-coarse:h-11",
+            "aria-describedby": statusId,
+            onClick: openEditor,
+            children: "Change"
+          }
+        ) : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "pb-1", children: value }),
+    editing && usage ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: editorRef,
+        "data-usage-limit-editor": true,
+        role: "group",
+        "aria-label": "Change usage limit",
+        className: "mt-4 flex min-w-0 flex-col gap-4 pb-1",
+        children: [
+          failure ? /* @__PURE__ */ jsxs("p", { role: "alert", className: "text-xs leading-4.5 text-danger", children: [
+            failure.message,
+            " ",
+            failure.kind === "not_root" && failure.rootSessionId ? /* @__PURE__ */ jsx(
+              HelpLink,
+              {
+                href: sessionHref(session.workspaceId, failure.rootSessionId),
+                className: "text-xs",
+                children: LABELS.openMainTask
+              }
+            ) : null
+          ] }) : null,
+          /* @__PURE__ */ jsx(Field, { label: "Limit", group: true, children: /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              size: "sm",
+              value: draft.kind,
+              disabled: saving,
+              onValueChange: (kind) => {
+                setFailure(null);
+                setTouched(true);
+                setDraft(
+                  (current) => kind === "none" ? { kind: "none" } : current.kind === "limit" ? current : {
+                    kind: "limit",
+                    text: usage.limitMicros === null ? "" : sessionUsageLimitInputValue(usage.limitMicros)
+                  }
+                );
+              },
+              options: [
+                { value: "none", label: LABELS.noLimit },
+                {
+                  value: "limit",
+                  label: "Pause at",
+                  disabled: capability === "disabled",
+                  disabledReason: capability === "disabled" ? DISABLED_REASON : void 0
+                }
+              ]
+            }
+          ) }),
+          draft.kind === "limit" ? /* @__PURE__ */ jsx(Field, { label: "Limit in US dollars", error: amountError ?? void 0, children: /* @__PURE__ */ jsxs("div", { className: "relative max-w-60", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "pointer-events-none absolute inset-y-0 left-3 flex items-center text-sm text-fg-muted",
+                children: "$"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                ref: amountInput,
+                value: draft.text,
+                inputMode: "decimal",
+                autoComplete: "off",
+                placeholder: "25.00",
+                disabled: saving || capability === "disabled",
+                className: "pl-6",
+                onChange: (event) => {
+                  setFailure(null);
+                  setDraft({ kind: "limit", text: event.target.value });
+                },
+                onBlur: () => setTouched(true),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+                    event.preventDefault();
+                    setTouched(true);
+                    void save();
+                  } else if (event.key === "Escape") {
+                    event.preventDefault();
+                    closeEditor();
+                  }
+                }
+              }
+            )
+          ] }) }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center justify-end gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                className: "pointer-coarse:h-11",
+                disabled: saving,
+                onClick: closeEditor,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                className: "pointer-coarse:h-11",
+                disabled: saving || !parsed.ok || unchanged || settingBlocked,
+                onClick: () => void save(),
+                children: saving ? "Saving\u2026" : "Save"
+              }
+            )
+          ] })
+        ]
+      }
+    ) : null
+  ] });
+}
+
+export {
+  SESSION_USAGE_LIMIT_UNKNOWN_RETRY_MS,
+  sessionHref,
+  SessionUsageLimitSection
+};
+//# sourceMappingURL=chunk-K2A5PXQ5.js.map