@adecore/agents-react 0.31.12 → 0.33.0

package/dist/chat/ui/intelligent-ui/renderers/choices.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useId, useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
@@ -9,13 +9,66 @@ import { useChatHost } from '../../../../host.js';
 import { UiFallbackPart } from '../UiFallbackPart.js';
 import { useLater } from '../use-later.js';
 /* A context this long may run past its two lines, so the row offers all of it in a tooltip. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const LONG_CONTEXT = 120;
 const SPINNER_AFTER_MS = 300;
 /* Says once, politely, that the choices opened when the reply was done; never on a block that was already done. */
-export function ChoicesRenderer({ children, context }) {
-    const { t } = useTranslation('agent-chat');
-    const [streamed] = useState(context.phase === 'streaming');
-    return (_jsxs("div", { role: "group", "aria-label": t('blocks.choices'), className: "chat-ui-nodes @container flex flex-wrap items-start gap-2", children: [children, _jsx("span", { className: "sr-only", role: "status", children: streamed && context.phase === 'final' ? t('blocks.choice.ready') : '' })] }));
+export function ChoicesRenderer(t0) {
+  const $ = _c(12);
+  const {
+    children,
+    context
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const [streamed] = useState(context.phase === "streaming");
+  let t1;
+  if ($[0] !== t) {
+    t1 = t("blocks.choices");
+    $[0] = t;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== context.phase || $[3] !== streamed || $[4] !== t) {
+    t2 = streamed && context.phase === "final" ? t("blocks.choice.ready") : "";
+    $[2] = context.phase;
+    $[3] = streamed;
+    $[4] = t;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== t2) {
+    t3 = /*#__PURE__*/_jsx("span", {
+      className: "sr-only",
+      role: "status",
+      children: t2
+    });
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== children || $[9] !== t1 || $[10] !== t3) {
+    t4 = /*#__PURE__*/_jsxs("div", {
+      role: "group",
+      "aria-label": t1,
+      className: "chat-ui-nodes @container flex flex-wrap items-start gap-2",
+      children: [children, t3]
+    });
+    $[8] = children;
+    $[9] = t1;
+    $[10] = t3;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  return t4;
 }
 /*
  * A button that shows what it sends: the label, and under it the context the agent receives. It stays
@@ -24,33 +77,258 @@ export function ChoicesRenderer({ children, context }) {
  * its label is no button at all, but its text. The primary one says the key that picks it while the
  * focus is in the block (`UiBlockFrame`).
  */
-export function ChoiceRenderer({ node, children, context }) {
-    const { t } = useTranslation('agent-chat');
-    const host = useChatHost();
-    const descriptionId = useId();
-    const { context: detail, primary, disabled } = node.props;
-    const { answer, onChoose } = context;
-    const chosen = answer !== null && answer.choiceId === node.id;
-    const waiting = context.phase === 'streaming';
-    const unavailable = disabled === true || onChoose === undefined;
-    const failed = answer === null && context.failedChoiceId === node.id;
-    const closed = waiting || unavailable || answer !== null;
-    const slow = useLater(chosen && answer.state === 'sending', SPINNER_AFTER_MS);
-    if (!waiting && uiChoiceLabel(node) === null) {
-        return _jsx(UiFallbackPart, { fallback: node.fallback, problem: { kind: 'failed' } });
+export function ChoiceRenderer(t0) {
+  const $ = _c(65);
+  const {
+    node,
+    children,
+    context
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const host = useChatHost();
+  const descriptionId = useId();
+  const {
+    context: detail,
+    primary,
+    disabled
+  } = node.props;
+  const {
+    answer,
+    onChoose
+  } = context;
+  const chosen = answer !== null && answer.choiceId === node.id;
+  const waiting = context.phase === "streaming";
+  const unavailable = disabled === true || onChoose === undefined;
+  const failed = answer === null && context.failedChoiceId === node.id;
+  const closed = waiting || unavailable || answer !== null;
+  const slow = useLater(chosen && answer.state === "sending", SPINNER_AFTER_MS);
+  if (!waiting && uiChoiceLabel(node) === null) {
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = {
+        kind: "failed"
+      };
+      $[0] = t1;
+    } else {
+      t1 = $[0];
     }
-    const reason = waiting
-        ? t('blocks.choice.waiting')
-        : answer === null && unavailable
-            ? ((disabled === true ? null : context.choiceReason) ?? t('blocks.choice.unavailable'))
-            : null;
-    const described = detail !== undefined && detail !== '';
-    const strong = primary === true;
-    const button = (_jsxs("button", { type: "button", "aria-disabled": closed || undefined, "aria-describedby": described ? descriptionId : undefined, "aria-keyshortcuts": strong && !closed ? 'Meta+Enter Control+Enter' : undefined, "data-ui-primary-choice": strong && !closed ? '' : undefined, className: clsx('flex max-w-full min-h-9.5 items-center gap-2.5 rounded-xl px-4 py-2 text-left text-xs transition-[opacity,scale,background-color,filter] duration-150 motion-reduce:transition-none', strong ? 'bg-accent text-accent-text' : 'bg-ui-tile text-text', chosen && 'ring-2 ring-accent ring-offset-2 ring-offset-surface', failed && 'ring-2 ring-status-error', !closed && (strong ? 'hover:brightness-110' : 'hover:bg-surface-active'), !closed && 'active:scale-99', waiting ? 'opacity-60' : closed && !chosen && 'opacity-50'), onClick: () => {
-            if (!closed) {
-                onChoose?.(node.id);
-            }
-        }, children: [_jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: clsx('wrap-anywhere', strong ? 'font-semibold' : 'font-medium'), children: children }), described && (_jsx("span", { id: descriptionId, className: clsx('line-clamp-2 text-2xs wrap-anywhere', strong ? 'text-accent-text/80' : 'text-text-muted'), children: detail }))] }), strong && !closed && (_jsx("kbd", { "aria-hidden": true, className: "shrink-0 rounded-md bg-accent-text/18 px-1.5 font-sans text-2xs font-medium", children: formatShortcut(KEY_SHORTCUTS.modEnter, host.isApplePlatform()) })), chosen && (_jsxs("span", { className: clsx('flex shrink-0 items-center gap-1 text-2xs', strong ? 'text-accent-text' : 'text-accent'), children: [slow ? _jsx(Spinner, { size: 12 }) : _jsx(Icon, { icon: Check, size: 12 }), answer.state === 'queued' ? t('blocks.choice.queued') : t('blocks.choice.sent')] }))] }));
-    // At most half the row less half the gap, so two long choices stand side by side and end on one edge; a narrow block gives each the row.
-    return (_jsxs("div", { className: "flex max-w-full flex-col gap-1 @min-[420px]:max-w-[calc(50%-4px)]", children: [reason !== null ? (_jsx(DisabledReason, { reason: reason, children: button })) : described && detail.length > LONG_CONTEXT ? (_jsx(Tooltip, { label: detail, children: button })) : (button), failed && (_jsx("p", { role: "alert", className: "px-1 text-2xs text-status-error", children: t('blocks.choice.failed') }))] }));
-}
+    let t2;
+    if ($[1] !== node.fallback) {
+      t2 = /*#__PURE__*/_jsx(UiFallbackPart, {
+        fallback: node.fallback,
+        problem: t1
+      });
+      $[1] = node.fallback;
+      $[2] = t2;
+    } else {
+      t2 = $[2];
+    }
+    return t2;
+  }
+  let t1;
+  if ($[3] !== answer || $[4] !== context.choiceReason || $[5] !== disabled || $[6] !== t || $[7] !== unavailable || $[8] !== waiting) {
+    t1 = waiting ? t("blocks.choice.waiting") : answer === null && unavailable ? (disabled === true ? null : context.choiceReason) ?? t("blocks.choice.unavailable") : null;
+    $[3] = answer;
+    $[4] = context.choiceReason;
+    $[5] = disabled;
+    $[6] = t;
+    $[7] = unavailable;
+    $[8] = waiting;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
+  }
+  const reason = t1;
+  const described = detail !== undefined && detail !== "";
+  const strong = primary === true;
+  const t2 = closed || undefined;
+  const t3 = described ? descriptionId : undefined;
+  const t4 = strong && !closed ? "Meta+Enter Control+Enter" : undefined;
+  const t5 = strong && !closed ? "" : undefined;
+  const t6 = strong ? "bg-accent text-accent-text" : "bg-ui-tile text-text";
+  const t7 = chosen && "ring-2 ring-accent ring-offset-2 ring-offset-surface";
+  const t8 = failed && "ring-2 ring-status-error";
+  const t9 = !closed && (strong ? "hover:brightness-110" : "hover:bg-surface-active");
+  const t10 = !closed && "active:scale-99";
+  const t11 = waiting ? "opacity-60" : closed && !chosen && "opacity-50";
+  let t12;
+  if ($[10] !== t10 || $[11] !== t11 || $[12] !== t6 || $[13] !== t7 || $[14] !== t8 || $[15] !== t9) {
+    t12 = clsx("flex max-w-full min-h-9.5 items-center gap-2.5 rounded-xl px-4 py-2 text-left text-xs transition-[opacity,scale,background-color,filter] duration-150 motion-reduce:transition-none", t6, t7, t8, t9, t10, t11);
+    $[10] = t10;
+    $[11] = t11;
+    $[12] = t6;
+    $[13] = t7;
+    $[14] = t8;
+    $[15] = t9;
+    $[16] = t12;
+  } else {
+    t12 = $[16];
+  }
+  let t13;
+  if ($[17] !== closed || $[18] !== node.id || $[19] !== onChoose) {
+    t13 = () => {
+      if (!closed) {
+        onChoose?.(node.id);
+      }
+    };
+    $[17] = closed;
+    $[18] = node.id;
+    $[19] = onChoose;
+    $[20] = t13;
+  } else {
+    t13 = $[20];
+  }
+  const t14 = strong ? "font-semibold" : "font-medium";
+  let t15;
+  if ($[21] !== t14) {
+    t15 = clsx("wrap-anywhere", t14);
+    $[21] = t14;
+    $[22] = t15;
+  } else {
+    t15 = $[22];
+  }
+  let t16;
+  if ($[23] !== children || $[24] !== t15) {
+    t16 = /*#__PURE__*/_jsx("span", {
+      className: t15,
+      children: children
+    });
+    $[23] = children;
+    $[24] = t15;
+    $[25] = t16;
+  } else {
+    t16 = $[25];
+  }
+  let t17;
+  if ($[26] !== described || $[27] !== descriptionId || $[28] !== detail || $[29] !== strong) {
+    t17 = described && /*#__PURE__*/_jsx("span", {
+      id: descriptionId,
+      className: clsx("line-clamp-2 text-2xs wrap-anywhere", strong ? "text-accent-text/80" : "text-text-muted"),
+      children: detail
+    });
+    $[26] = described;
+    $[27] = descriptionId;
+    $[28] = detail;
+    $[29] = strong;
+    $[30] = t17;
+  } else {
+    t17 = $[30];
+  }
+  let t18;
+  if ($[31] !== t16 || $[32] !== t17) {
+    t18 = /*#__PURE__*/_jsxs("span", {
+      className: "flex min-w-0 flex-col",
+      children: [t16, t17]
+    });
+    $[31] = t16;
+    $[32] = t17;
+    $[33] = t18;
+  } else {
+    t18 = $[33];
+  }
+  let t19;
+  if ($[34] !== closed || $[35] !== host || $[36] !== strong) {
+    t19 = strong && !closed && /*#__PURE__*/_jsx("kbd", {
+      "aria-hidden": true,
+      className: "shrink-0 rounded-md bg-accent-text/18 px-1.5 font-sans text-2xs font-medium",
+      children: formatShortcut(KEY_SHORTCUTS.modEnter, host.isApplePlatform())
+    });
+    $[34] = closed;
+    $[35] = host;
+    $[36] = strong;
+    $[37] = t19;
+  } else {
+    t19 = $[37];
+  }
+  let t20;
+  if ($[38] !== answer || $[39] !== chosen || $[40] !== slow || $[41] !== strong || $[42] !== t) {
+    t20 = chosen && /*#__PURE__*/_jsxs("span", {
+      className: clsx("flex shrink-0 items-center gap-1 text-2xs", strong ? "text-accent-text" : "text-accent"),
+      children: [slow ? /*#__PURE__*/_jsx(Spinner, {
+        size: 12
+      }) : /*#__PURE__*/_jsx(Icon, {
+        icon: Check,
+        size: 12
+      }), answer.state === "queued" ? t("blocks.choice.queued") : t("blocks.choice.sent")]
+    });
+    $[38] = answer;
+    $[39] = chosen;
+    $[40] = slow;
+    $[41] = strong;
+    $[42] = t;
+    $[43] = t20;
+  } else {
+    t20 = $[43];
+  }
+  let t21;
+  if ($[44] !== t12 || $[45] !== t13 || $[46] !== t18 || $[47] !== t19 || $[48] !== t2 || $[49] !== t20 || $[50] !== t3 || $[51] !== t4 || $[52] !== t5) {
+    t21 = /*#__PURE__*/_jsxs("button", {
+      type: "button",
+      "aria-disabled": t2,
+      "aria-describedby": t3,
+      "aria-keyshortcuts": t4,
+      "data-ui-primary-choice": t5,
+      className: t12,
+      onClick: t13,
+      children: [t18, t19, t20]
+    });
+    $[44] = t12;
+    $[45] = t13;
+    $[46] = t18;
+    $[47] = t19;
+    $[48] = t2;
+    $[49] = t20;
+    $[50] = t3;
+    $[51] = t4;
+    $[52] = t5;
+    $[53] = t21;
+  } else {
+    t21 = $[53];
+  }
+  const button = t21;
+  let t22;
+  if ($[54] !== button || $[55] !== described || $[56] !== detail || $[57] !== reason) {
+    t22 = reason !== null ? /*#__PURE__*/_jsx(DisabledReason, {
+      reason: reason,
+      children: button
+    }) : described && detail.length > LONG_CONTEXT ? /*#__PURE__*/_jsx(Tooltip, {
+      label: detail,
+      children: button
+    }) : button;
+    $[54] = button;
+    $[55] = described;
+    $[56] = detail;
+    $[57] = reason;
+    $[58] = t22;
+  } else {
+    t22 = $[58];
+  }
+  let t23;
+  if ($[59] !== failed || $[60] !== t) {
+    t23 = failed && /*#__PURE__*/_jsx("p", {
+      role: "alert",
+      className: "px-1 text-2xs text-status-error",
+      children: t("blocks.choice.failed")
+    });
+    $[59] = failed;
+    $[60] = t;
+    $[61] = t23;
+  } else {
+    t23 = $[61];
+  }
+  let t24;
+  if ($[62] !== t22 || $[63] !== t23) {
+    t24 = /*#__PURE__*/_jsxs("div", {
+      className: "flex max-w-full flex-col gap-1 @min-[420px]:max-w-[calc(50%-4px)]",
+      children: [t22, t23]
+    });
+    $[62] = t22;
+    $[63] = t23;
+    $[64] = t24;
+  } else {
+    t24 = $[64];
+  }
+  return t24;
+}