@burdenoff/fluidgrids-fe-sdk 2026.1111.16 → 2026.1111.17

package/dist/HumanRequestCard-D-ooVPDn.js

@@ -0,0 +1,439 @@
+"use client";
+import { r as useTr } from "./TranslationBridge-Da-TPgQm.js";
+import { _ as throwIfResultError, n as getFluidGridsClient, x as getFluidGridsConfig } from "./client-C9XSzSXr.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Icon } from "@iconify/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
+import { gql } from "@apollo/client";
+import { Badge, Card, CardContent, CardHeader, Input, Label, Textarea } from "@burdenoff/fe-libs/ui";
+import { Button as Button$1 } from "@burdenoff/fe-libs/button";
+import { buildActorFallback, useActorProfiles } from "@burdenoff/fe-libs/shared";
+
+// src/modules/human-response/utils/recipient.ts
+/**
+* Who an ask went to, for display (BOFF-7651). An in-app ask stores its responders as user ids
+* (the worker cannot resolve names); the UI resolves them to people before showing them.
+*/
+const USER_ID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+/** The recipient label split into its parts, in order. */
+function recipientParts(recipient) {
+	return (recipient ?? "").split(",").map((part) => part.trim()).filter(Boolean);
+}
+/** The user ids in an in-app ask's recipient label, in order and without repeats. */
+function inAppResponderIds(recipient) {
+	return [...new Set(recipientParts(recipient).filter((part) => USER_ID.test(part)))];
+}
+
+// src/modules/human-response/hooks/useRecipientLabel.ts
+/**
+* The people an ask went to, by name (BOFF-7651). In-app asks carry user ids; they are resolved
+* through the shared actor-profile cache, the same lookup the run page uses for "triggered by".
+* Email addresses, Slack channels and anything else are shown as stored.
+*/
+function useRecipientLabel(request, fallback) {
+	const idsKey = request.channel === "IN_APP" ? inAppResponderIds(request.recipient).join(",") : "";
+	const inputs = useMemo(() => idsKey ? idsKey.split(",").map((actorId) => ({
+		actorId,
+		actorType: "user"
+	})) : [], [idsKey]);
+	const config = getFluidGridsConfig();
+	const profiles = useActorProfiles(inputs, {
+		workspaceId: config.workspaceId || void 0,
+		orgId: config.organizationId,
+		authToken: config.authToken
+	});
+	if (!request.recipient) return fallback;
+	if (!idsKey) return request.recipient;
+	const ids = new Set(idsKey.split(","));
+	return recipientParts(request.recipient).map((part) => ids.has(part) ? profiles[part]?.displayName ?? buildActorFallback({
+		actorId: part,
+		actorType: "user"
+	}).displayName : part).join(", ");
+}
+
+// src/modules/human-response/hooks/useHumanRequests.ts
+/**
+* Hooks for "Send and Wait for Response" (BOFF-7651): asks a workflow made of a person, the
+* in-app inbox of asks still waiting, and answering an in-app ask. Mirrors the tool-approval
+* hooks (`modules/tool-approval/hooks/useToolApprovals.ts`).
+*/
+const HUMAN_REQUEST_FIELDS = gql`
+  fragment WorkflowHumanRequestFields on WorkflowHumanRequest {
+    id
+    runId
+    nodeId
+    workflowKey
+    channel
+    recipient
+    responseType
+    title
+    message
+    approvalType
+    approveLabel
+    declineLabel
+    submitLabel
+    fields {
+      name
+      label
+      type
+      required
+      placeholder
+      options
+    }
+    status
+    decision
+    response
+    respondedBy
+    respondedVia
+    expiresAt
+    respondedAt
+    createdAt
+    canRespond
+  }
+`;
+const GET_PENDING_HUMAN_REQUESTS = gql`
+  ${HUMAN_REQUEST_FIELDS}
+  query GetPendingWorkflowHumanRequests($limit: Int, $offset: Int) {
+    pendingWorkflowHumanRequests(limit: $limit, offset: $offset) {
+      totalCount
+      items {
+        ...WorkflowHumanRequestFields
+      }
+    }
+  }
+`;
+const GET_RUN_HUMAN_REQUESTS = gql`
+  ${HUMAN_REQUEST_FIELDS}
+  query GetWorkflowHumanRequests($runId: ID!) {
+    workflowHumanRequests(runId: $runId) {
+      ...WorkflowHumanRequestFields
+    }
+  }
+`;
+const RESPOND_TO_HUMAN_REQUEST = gql`
+  ${HUMAN_REQUEST_FIELDS}
+  mutation RespondToWorkflowHumanRequest(
+    $input: RespondToWorkflowHumanRequestInput!
+  ) {
+    respondToWorkflowHumanRequest(input: $input) {
+      success
+      decision
+      error
+      request {
+        ...WorkflowHumanRequestFields
+      }
+    }
+  }
+`;
+/** Asks still waiting for a person in the workspace (polled, like the tool-approval inbox). */
+function usePendingHumanRequests(options) {
+	const limit = options?.limit ?? 50;
+	const offset = options?.offset ?? 0;
+	const pollIntervalMs = options?.pollIntervalMs ?? 15e3;
+	const [items, setItems] = useState([]);
+	const [totalCount, setTotalCount] = useState(0);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const generation = useRef(0);
+	const fetchData = useCallback(async () => {
+		const ticket = ++generation.current;
+		setError(null);
+		try {
+			const result = throwIfResultError(await getFluidGridsClient().query({
+				query: GET_PENDING_HUMAN_REQUESTS,
+				variables: {
+					limit,
+					offset
+				},
+				fetchPolicy: "network-only"
+			}));
+			if (ticket !== generation.current) return;
+			setItems(result.data?.pendingWorkflowHumanRequests?.items ?? []);
+			setTotalCount(result.data?.pendingWorkflowHumanRequests?.totalCount ?? 0);
+		} catch (err) {
+			if (ticket !== generation.current) return;
+			setError(err);
+		} finally {
+			if (ticket === generation.current) setLoading(false);
+		}
+	}, [limit, offset]);
+	useEffect(() => {
+		fetchData();
+		if (pollIntervalMs <= 0) return;
+		const interval = setInterval(fetchData, pollIntervalMs);
+		return () => clearInterval(interval);
+	}, [fetchData, pollIntervalMs]);
+	return {
+		items,
+		totalCount,
+		loading,
+		error,
+		refetch: fetchData
+	};
+}
+/** Every ask a run made — who was asked, how, until when, and the answer. */
+function useRunHumanRequests(runId, options) {
+	const pollIntervalMs = options?.pollIntervalMs ?? 0;
+	const [items, setItems] = useState([]);
+	const [error, setError] = useState(null);
+	const [loaded, setLoaded] = useState(false);
+	const [loadedAt, setLoadedAt] = useState(null);
+	const currentRunId = useRef(runId);
+	useEffect(() => {
+		currentRunId.current = runId;
+		setItems([]);
+		setError(null);
+		setLoaded(false);
+		setLoadedAt(null);
+	}, [runId]);
+	const generation = useRef(0);
+	const fetchData = useCallback(async () => {
+		if (!runId) return;
+		const ticket = ++generation.current;
+		const startedAt = Date.now();
+		setError(null);
+		try {
+			const result = throwIfResultError(await getFluidGridsClient().query({
+				query: GET_RUN_HUMAN_REQUESTS,
+				variables: { runId },
+				fetchPolicy: "network-only",
+				context: { queryDeduplication: false }
+			}));
+			if (ticket !== generation.current || currentRunId.current !== runId) return;
+			setItems(result.data?.workflowHumanRequests ?? []);
+			setLoaded(true);
+			setLoadedAt(startedAt);
+		} catch (err) {
+			if (ticket !== generation.current || currentRunId.current !== runId) return;
+			setError(err);
+		}
+	}, [runId]);
+	useEffect(() => {
+		fetchData();
+		if (pollIntervalMs <= 0) return;
+		const interval = setInterval(fetchData, pollIntervalMs);
+		return () => clearInterval(interval);
+	}, [fetchData, pollIntervalMs]);
+	return {
+		items,
+		error,
+		loaded,
+		loadedAt,
+		refetch: fetchData
+	};
+}
+/** Answer an in-app ask. Resolves to the decision; throws with the service's reason. */
+function useRespondToHumanRequest() {
+	const [loading, setLoading] = useState(false);
+	return {
+		respond: useCallback(async (id, answer) => {
+			setLoading(true);
+			try {
+				const payload = throwIfResultError(await getFluidGridsClient().mutate({
+					mutation: RESPOND_TO_HUMAN_REQUEST,
+					variables: { input: {
+						id,
+						...answer
+					} }
+				})).data?.respondToWorkflowHumanRequest;
+				if (!payload?.success) throw new Error(payload?.error || "The response was not recorded");
+				return payload.decision;
+			} finally {
+				setLoading(false);
+			}
+		}, []),
+		loading
+	};
+}
+
+// src/modules/human-response/components/HumanRequestCard.tsx
+/**
+* One "Send and Wait for Response" ask in the in-app inbox (BOFF-7651): what was asked, of whom,
+* through which channel and until when — and, when the caller may answer it in-app, the controls
+* to do so (Approve / Decline, a text box, or the custom form).
+*/
+const CHANNEL_ICON = {
+	EMAIL: "mdi:email-outline",
+	SLACK: "mdi:slack",
+	IN_APP: "mdi:bell-outline"
+};
+function channelLabel(channel, tr) {
+	switch (channel) {
+		case "EMAIL": return tr("fluidgrids.humanResponse.channelEmail", "email");
+		case "SLACK": return tr("fluidgrids.humanResponse.channelSlack", "Slack");
+		default: return tr("fluidgrids.humanResponse.channelInApp", "in-app");
+	}
+}
+function inputType(field) {
+	const type = (field.type || "text").toLowerCase();
+	return [
+		"email",
+		"number",
+		"date",
+		"tel",
+		"url"
+	].includes(type) ? type : "text";
+}
+function FormControls({ requestId, fields, values, onChange }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "space-y-3",
+		children: fields.map((field) => {
+			const id = `human-field-${requestId}-${field.name}`;
+			const label = `${field.label || field.name}${field.required ? " *" : ""}`;
+			const type = (field.type || "text").toLowerCase();
+			return /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1.5",
+				children: [/* @__PURE__ */ jsx(Label, {
+					htmlFor: id,
+					children: label
+				}), type === "textarea" ? /* @__PURE__ */ jsx(Textarea, {
+					id,
+					value: values[field.name] ?? "",
+					placeholder: field.placeholder ?? void 0,
+					onChange: (event) => onChange(field.name, event.target.value)
+				}) : type === "dropdown" || type === "select" ? /* @__PURE__ */ jsxs("select", {
+					id,
+					className: "w-full rounded-md border border-border-secondary bg-background-primary px-3 py-2 text-sm text-text-primary",
+					value: values[field.name] ?? "",
+					onChange: (event) => onChange(field.name, event.target.value),
+					children: [/* @__PURE__ */ jsx("option", {
+						value: "",
+						children: "—"
+					}), (field.options ?? []).map((option) => /* @__PURE__ */ jsx("option", {
+						value: option,
+						children: option
+					}, option))]
+				}) : /* @__PURE__ */ jsx(Input, {
+					id,
+					type: inputType(field),
+					value: values[field.name] ?? "",
+					placeholder: field.placeholder ?? void 0,
+					onChange: (event) => onChange(field.name, event.target.value)
+				})]
+			}, field.name);
+		})
+	});
+}
+function HumanRequestCard({ request, onAnswered }) {
+	const tr = useTr();
+	const { respond, loading } = useRespondToHumanRequest();
+	const [text, setText] = useState("");
+	const [values, setValues] = useState({});
+	const submit = async (answer) => {
+		try {
+			const decision = await respond(request.id, answer);
+			toast.success(decision === "declined" ? tr("fluidgrids.humanResponse.declinedToast", "Declined — the workflow is continuing") : tr("fluidgrids.humanResponse.answeredToast", "Response sent — the workflow is continuing"));
+			onAnswered();
+		} catch (err) {
+			toast.error(err instanceof Error ? err.message : tr("fluidgrids.humanResponse.failed", "Your response could not be recorded"));
+		}
+	};
+	const missingRequired = request.responseType === "CUSTOM_FORM" && request.fields.some((field) => field.required && !(values[field.name] ?? "").trim());
+	const emptyText = request.responseType === "FREE_TEXT" && !text.trim();
+	const recipient = useRecipientLabel(request, request.channel === "IN_APP" ? tr("fluidgrids.humanResponse.anyMember", "any workspace member") : "");
+	return /* @__PURE__ */ jsxs(Card, {
+		className: "border border-border-secondary bg-background-secondary",
+		"data-testid": "human-request-card",
+		"data-request-id": request.id,
+		children: [/* @__PURE__ */ jsxs(CardHeader, {
+			className: "pb-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center justify-between gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-center gap-2",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: CHANNEL_ICON[request.channel] ?? "mdi:account-question",
+						width: 18,
+						className: "shrink-0 text-text-secondary"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "truncate text-sm font-semibold text-text-primary",
+						children: request.title
+					})]
+				}), /* @__PURE__ */ jsx(Badge, {
+					variant: "outline",
+					className: "font-mono text-[10px]",
+					children: request.workflowKey
+				})]
+			}), /* @__PURE__ */ jsxs("p", {
+				className: "text-xs text-text-secondary",
+				children: [tr("fluidgrids.humanResponse.askedVia", "Asked {{recipient}} via {{channel}}", {
+					recipient,
+					channel: channelLabel(request.channel, tr)
+				}), request.expiresAt && ` · ${tr("fluidgrids.humanResponse.until", "until {{time}}", { time: new Date(request.expiresAt).toLocaleString() })}`]
+			})]
+		}), /* @__PURE__ */ jsxs(CardContent, {
+			className: "space-y-3",
+			children: [
+				request.message && /* @__PURE__ */ jsx("p", {
+					className: "whitespace-pre-wrap break-words text-sm text-text-primary",
+					children: request.message
+				}),
+				!request.canRespond && /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-text-secondary",
+					children: request.channel === "IN_APP" ? tr("fluidgrids.humanResponse.notForYou", "This request was sent to someone else.") : tr("fluidgrids.humanResponse.answerByLink", "Answered through the link in the {{channel}} message.", { channel: channelLabel(request.channel, tr) })
+				}),
+				request.canRespond && request.responseType === "FREE_TEXT" && /* @__PURE__ */ jsxs("div", {
+					className: "space-y-1.5",
+					children: [/* @__PURE__ */ jsx(Label, {
+						htmlFor: `human-text-${request.id}`,
+						children: tr("fluidgrids.humanResponse.yourResponse", "Your response")
+					}), /* @__PURE__ */ jsx(Textarea, {
+						id: `human-text-${request.id}`,
+						value: text,
+						onChange: (event) => setText(event.target.value)
+					})]
+				}),
+				request.canRespond && request.responseType === "CUSTOM_FORM" && /* @__PURE__ */ jsx(FormControls, {
+					requestId: request.id,
+					fields: request.fields,
+					values,
+					onChange: (name, value) => setValues((current) => ({
+						...current,
+						[name]: value
+					}))
+				}),
+				request.canRespond && /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap items-center gap-2 pt-1",
+					children: request.responseType === "APPROVAL" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Button$1, {
+						"data-agent": "confirm",
+						size: "sm",
+						disabled: loading,
+						onClick: () => submit({ action: "approve" }),
+						"data-testid": "human-request-approve",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: "mdi:check",
+							className: "mr-1.5",
+							width: 16
+						}), request.approveLabel]
+					}), request.approvalType === "double" && /* @__PURE__ */ jsxs(Button$1, {
+						"data-agent": "confirm",
+						size: "sm",
+						variant: "destructive",
+						disabled: loading,
+						onClick: () => submit({ action: "decline" }),
+						"data-testid": "human-request-decline",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: "mdi:close",
+							className: "mr-1.5",
+							width: 16
+						}), request.declineLabel]
+					})] }) : /* @__PURE__ */ jsxs(Button$1, {
+						"data-agent": "confirm",
+						size: "sm",
+						disabled: loading || missingRequired || emptyText,
+						onClick: () => submit(request.responseType === "FREE_TEXT" ? { text } : { values }),
+						"data-testid": "human-request-submit",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: "mdi:send",
+							className: "mr-1.5",
+							width: 16
+						}), request.submitLabel]
+					})
+				})
+			]
+		})]
+	});
+}
+
+export { useRunHumanRequests as a, useRespondToHumanRequest as i, channelLabel as n, useRecipientLabel as o, usePendingHumanRequests as r, HumanRequestCard as t };