Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
3.8 kB · 111 lines
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112import { useMutation, useQuery } from "@octanejs/tanstack-query";import { Button } from "octane-kumo/components/button";import { Badge } from "octane-kumo/components/badge";import { useCustomerQuerySession } from "../runtime/customer-query-provider";import type { ConversationSession } from "../runtime/conversation-session";
export function CapabilityApprovals({ session, connected,}: { session: ConversationSession; connected: boolean;}) { const cache = useCustomerQuerySession(); const queryKey = cache.key("conversation", session.id, "approvals"); const query = useQuery({ queryKey, queryFn: ({ signal }) => session.listCapabilityApprovals(signal), enabled: !!cache.getSnapshot().scope && connected, staleTime: 0, gcTime: 0, refetchInterval: 2000, }); const mutation = useMutation({ mutationFn: (decision: { executionId: string; decision: "approve" | "deny"; }) => session.decideCapabilityApproval(decision), onSettled: () => cache.client.invalidateQueries({ queryKey }), }); const pending = query.data ?? []; if (!pending.length && !query.isError && !mutation.isError) return null; return ( <section className="capability-approvals" aria-label="Action approvals"> {query.isError && ( <p role="alert"> Could not load pending approvals. Reconnect or reload approvals to check their current status. </p> )} {mutation.isError && ( <p role="alert"> Could not confirm the decision. Reload approvals to check whether the action is still waiting. </p> )} {(query.isError || mutation.isError) && ( <Button variant="secondary" disabled={!connected || query.isFetching || mutation.isPending} onClick={() => { mutation.reset(); void query.refetch(); }} > Reload approvals </Button> )} {pending.map((request) => ( <article className="capability-approval" key={request.executionId}> <div className="capability-approval-heading"> <h2>Approval required</h2> <Badge>Waiting for you</Badge> </div> <p>{request.summary}</p> <details open> <summary>Arguments to send</summary> <pre>{JSON.stringify(request.arguments, null, 2)}</pre> </details> <p className="muted"> Approving permits this action once. Future actions follow your approval settings. </p> {!connected && ( <p role="status">Reconnect to approve or deny this action.</p> )} <div className="capability-approval-actions"> <Button variant="primary" disabled={!connected || mutation.isPending || query.isError} onClick={() => mutation.mutate({ executionId: request.executionId, decision: "approve", }) } > Approve once </Button> <Button variant="secondary" disabled={!connected || mutation.isPending || query.isError} onClick={() => mutation.mutate({ executionId: request.executionId, decision: "deny", }) } > Deny </Button> </div> {mutation.isPending && mutation.variables?.executionId === request.executionId && ( <p role="status">Applying your decision…</p> )} </article> ))} </section> );}