@agents24/chat-react 0.3.0 → 0.3.1

package/dist/ui/index.js

@@ -824,18 +824,47 @@ var MessageResponse = React3.memo(
 );
 MessageResponse.displayName = "MessageResponse";
 
+// src/ui/hitl-presentation.ts
+function optionalString(value) {
+  return typeof value === "string" && value.trim() ? value.trim() : null;
+}
+function hitlActionLabel(part, action) {
+  if (action === "approve") return ["tool_review", "app_data_permission"].includes(part.hitlKind) ? "Allow once" : "Approve";
+  if (action === "reject") return ["tool_review", "app_data_permission"].includes(part.hitlKind) ? "Don\u2019t allow" : "Reject";
+  if (action === "connect") return "Connect";
+  return "Skip";
+}
+function hitlTitle(part) {
+  const presentation = part.presentation || {};
+  if (part.hitlKind === "tool_review") return `Run ${optionalString(presentation.tool_name) || "this tool"}?`;
+  if (part.hitlKind === "mcp_auth") return `Connect ${optionalString(presentation.server_name) || "this service"} to continue`;
+  if (part.hitlKind === "app_data_permission") return "Allow this data change?";
+  return part.message;
+}
+function resolvedHitlLabel(part) {
+  const outcome = String(part.resolution?.outcome || part.status).trim().toLowerCase();
+  return {
+    approved: part.hitlKind === "user_approval" ? "Approved" : "Allowed",
+    rejected: part.hitlKind === "user_approval" ? "Rejected" : "Not allowed",
+    connected: "Connected",
+    skipped: "Skipped",
+    timeout: "Timed out",
+    expired: "Timed out",
+    cancelled: "Cancelled",
+    invalidated: "No longer available",
+    policy_denied: "Not allowed"
+  }[outcome] || outcome.replace(/_/g, " ");
+}
+
 // src/ui/agent-response-timeline.tsx
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-function asRecord(value) {
-  return value && typeof value === "object" && !Array.isArray(value) ? value : null;
-}
-function optionalString(value) {
+function optionalString2(value) {
   return typeof value === "string" && value.trim() ? value.trim() : null;
 }
 function presentationValue(part, key) {
   const presentation = part.presentation || {};
   const snakeKey = key.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
-  return optionalString(presentation[key]) || optionalString(presentation[snakeKey]);
+  return optionalString2(presentation[key]) || optionalString2(presentation[snakeKey]);
 }
 function groupKey(part) {
   return presentationValue(part, "groupKey");
@@ -924,12 +953,6 @@ function ToolGroup({
     part.id
   )) }) });
 }
-function actionLabel(part, action) {
-  if (action === "approve") return part.hitlKind === "tool_review" ? "Allow once" : "Approve";
-  if (action === "reject") return part.hitlKind === "tool_review" ? "Don\u2019t allow" : "Reject";
-  if (action === "connect") return "Connect";
-  return "Skip";
-}
 function HitlPartRow({
   getHitlActionState,
   isLoading,
@@ -939,64 +962,36 @@ function HitlPartRow({
   const state = getHitlActionState?.(part);
   const [comment, setComment] = React4.useState("");
   const presentation = part.presentation || {};
-  const details = asRecord(presentation.sanitized_arguments);
   const requireComment = presentation.require_comment === true;
   const isTerminal = part.status !== "pending";
   if (isTerminal) {
-    return /* @__PURE__ */ jsxs3("div", { className: "rounded-xl border border-border/60 bg-muted/30 px-3 py-2 text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsx6("span", { className: "font-medium text-foreground", children: part.resolution?.outcome || part.status }),
-      part.resolution?.reason ? /* @__PURE__ */ jsxs3("span", { className: "ml-1", children: [
-        "\xB7 ",
-        part.resolution.reason
-      ] }) : null
-    ] });
+    return /* @__PURE__ */ jsx6("div", { className: "px-1 py-1 text-sm text-muted-foreground", children: resolvedHitlLabel(part) });
   }
-  return /* @__PURE__ */ jsxs3("div", { className: "space-y-3 rounded-xl border border-amber-500/30 bg-amber-500/5 p-3", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx6("div", { className: "text-sm font-semibold text-foreground", children: optionalString(presentation.tool_name) || optionalString(presentation.server_name) || "Action required" }),
-      /* @__PURE__ */ jsx6(MessageResponse, { children: part.message }),
-      /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground", children: [
-        optionalString(presentation.source) ? /* @__PURE__ */ jsxs3("span", { children: [
-          "Source: ",
-          optionalString(presentation.source)
-        ] }) : null,
-        optionalString(presentation.risk) ? /* @__PURE__ */ jsxs3("span", { children: [
-          "Risk: ",
-          optionalString(presentation.risk)
-        ] }) : null,
-        optionalString(presentation.credential_scope) ? /* @__PURE__ */ jsxs3("span", { children: [
-          "Credentials: ",
-          optionalString(presentation.credential_scope)
-        ] }) : null
-      ] })
-    ] }),
-    details ? /* @__PURE__ */ jsxs3("details", { className: "text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ jsx6("summary", { className: "cursor-pointer select-none font-medium", children: "Details" }),
-      /* @__PURE__ */ jsx6("pre", { className: "mt-2 max-h-48 overflow-auto rounded-lg bg-background/80 p-2 text-[11px]", children: JSON.stringify(details, null, 2) })
-    ] }) : null,
+  return /* @__PURE__ */ jsxs3("div", { className: "space-y-2.5 rounded-lg bg-muted/45 px-3 py-2.5", children: [
+    /* @__PURE__ */ jsx6("div", { className: "text-sm font-medium text-foreground text-pretty", children: hitlTitle(part) }),
     requireComment ? /* @__PURE__ */ jsx6(
       "textarea",
       {
         "aria-label": "Approval comment",
-        className: "min-h-20 w-full resize-y rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className: "min-h-20 w-full resize-y rounded-md border border-border/60 bg-background px-3 py-2 text-sm outline-none focus-visible:border-neutral-300 focus-visible:ring-0 dark:focus-visible:border-neutral-600",
         onChange: (event) => setComment(event.target.value),
         placeholder: "Comment required",
         value: comment
       }
     ) : null,
     state?.error ? /* @__PURE__ */ jsx6("div", { className: "text-sm text-destructive", children: state.error }) : null,
-    /* @__PURE__ */ jsx6("div", { className: "flex flex-wrap items-center gap-2", children: part.allowedActions.map((action) => /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx6("div", { className: "flex flex-wrap items-center gap-1.5", children: part.allowedActions.map((action) => /* @__PURE__ */ jsx6(
       "button",
       {
-        "aria-label": actionLabel(part, action),
+        "aria-label": hitlActionLabel(part, action),
         className: cn(
-          "min-w-24 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-60",
-          action === "approve" || action === "connect" ? "border-neutral-900 bg-neutral-900 text-white hover:bg-neutral-800" : "border-border bg-background text-foreground hover:bg-muted"
+          "min-h-10 rounded-md px-3 text-sm font-medium transition-[background-color,color,opacity,transform] duration-150 ease-out active:scale-[0.96] disabled:pointer-events-none disabled:opacity-60",
+          action === "approve" || action === "connect" ? "bg-neutral-900 text-white hover:bg-neutral-800 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-white" : "bg-transparent text-muted-foreground hover:bg-background/80 hover:text-foreground"
         ),
         disabled: !onHitlAction || isLoading || state?.status === "connecting" || state?.status === "resuming" || requireComment && !comment.trim(),
         onClick: () => onHitlAction?.(part, action, comment.trim() || void 0),
         type: "button",
-        children: actionLabel(part, action)
+        children: hitlActionLabel(part, action)
       },
       action
     )) })
@@ -1471,7 +1466,10 @@ export {
   attachmentVariants,
   bubbleVariants,
   cn,
+  hitlActionLabel,
+  hitlTitle,
   markerVariants,
+  resolvedHitlLabel,
   shouldCollapseUserMessage
 };
 //# sourceMappingURL=index.js.map