React Integration

useInteractionReceiver

Subscribe to all incoming interactions for the current user. Returns the current pending interaction queue and a respond function:

import { useInteractionReceiver } from 'edge-interact-react';

function HILInbox() {
  const { queue, respond } = useInteractionReceiver();

  if (queue.length === 0) {
    return <p>No pending interactions.</p>;
  }

  // Render the first interaction (or all of them in a list)
  const current = queue[0];

  return (
    <div className="hil-inbox">
      {queue.map(interaction => (
        <InteractionCard
          key={interaction.interactionId}
          interaction={interaction}
          onRespond={(outcome, data) => respond(interaction.interactionId, outcome, data)}
        />
      ))}
    </div>
  );
}

useInteractionCallback

Subscribe to the response for a specific interaction (by interactionId). Useful when you initiate an interaction from a React component and want to react to its response:

import { useInteractionCallback } from 'edge-interact-react';

function ApprovalButton({ workflowId }: { workflowId: string }) {
  const [interactionId, setInteractionId] = useState<string | null>(null);
  const { response, error, isPending } = useInteractionCallback(interactionId);

  const handleSendApproval = async () => {
    const id = await sendApprovalInteraction(workflowId);
    setInteractionId(id);
  };

  useEffect(() => {
    if (response) {
      console.log('Approval response received:', response.outcome);
      setInteractionId(null); // clean up
    }
  }, [response]);

  return (
    <div>
      {!interactionId && (
        <button onClick={handleSendApproval}>Request Approval</button>
      )}
      {isPending && <span>Waiting for approver response...</span>}
      {response && <span>Decision: {response.outcome}</span>}
      {error && <span>Error or timeout: {error.message}</span>}
    </div>
  );
}

Hook Summary