useInteractionReceiver

Signature

function useInteractionReceiver(): {
  /** Current pending interactions, sorted by priority then arrival time */
  queue: InteractionRequest[];

  /** Number of pending interactions */
  queueLength: number;

  /** Respond to an interaction */
  respond: (
    interactionId: string,
    outcome: string,
    data?: unknown
  ) => Promise<void>;

  /** Dismiss an interaction without responding (e.g., "remind later") */
  dismiss: (interactionId: string) => void;

  /** Is the receiver connected? */
  isConnected: boolean;
}

Building a Custom Inbox

import { useInteractionReceiver } from 'edge-interact-react';
import { ApprovalComponent, NotificationComponent, PickerComponent } from 'edge-interact-ui';

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

  return (
    <div className="hil-inbox">
      <h2>Pending Interactions <span className="count">{queueLength}</span></h2>

      {queueLength === 0 && (
        <p className="empty-state">No pending interactions. Great work!</p>
      )}

      {queue.map(interaction => {
        const respondFn = (outcome: string, data?: unknown) =>
          respond(interaction.interactionId, outcome, data);

        return (
          <div key={interaction.interactionId} className="inbox-item">
            <div className="inbox-meta">
              <span className="type-badge">{interaction.type}</span>
              {interaction.priority === 'high' && (
                <span className="priority-badge">HIGH PRIORITY</span>
              )}
            </div>

            {interaction.type === 'approval' && (
              <ApprovalComponent interaction={interaction} respond={respondFn} />
            )}
            {interaction.type === 'notification' && (
              <NotificationComponent interaction={interaction} respond={respondFn} />
            )}
            {/* ... other types */}
          </div>
        );
      })}
    </div>
  );
}

Admin View — Another User's Interactions

For admin dashboards showing another user's inbox, use useInteractionReceiverForUser(userId):

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

// Admin monitoring another user's pending interactions (read-only)
function AdminUserInbox({ targetUserId }: { targetUserId: string }) {
  const { queue } = useInteractionReceiverForUser(targetUserId);

  return (
    <div>
      <h3>{targetUserId}'s Pending Interactions: {queue.length}</h3>
      {queue.map(i => (
        <div key={i.interactionId}>
          <strong>{i.type}</strong>: {i.title}
        </div>
      ))}
    </div>
  );
}