UI Components Overview

Built-in Components

Shared Props Interface

All five built-in components (and custom renderers) receive the same props:

interface InteractionComponentProps<TPayload = unknown> {
  /** The full interaction request — access payload, title, description */
  interaction: InteractionRequest<TPayload>;

  /** Call this to submit the user's response */
  respond: (outcome: string, data?: unknown) => Promise<void>;

  /** Optional — call to remove from queue without responding (future: "remind me later") */
  dismiss?: () => void;

  /** Optional — className for the outermost container element */
  className?: string;
}

Component Rendering Pattern

The InteractionContainer handles routing to the correct component. You rarely need to render components directly — instead, render InteractionContainer and let it handle everything:

// Recommended: use InteractionContainer — it handles routing automatically
import { InteractionContainer } from 'edge-interact-ui';

function App() {
  return (
    <InteractionProvider>
      <InteractionContainer />  {/* Renders interactions as they arrive */}
      <YourApp />
    </InteractionProvider>
  );
}

Direct Component Use

You can render components directly when building a custom inbox view:

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

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

  return (
    <div>
      {queue.map(interaction => {
        const props = {
          interaction,
          respond: (outcome: string, data?: unknown) =>
            respond(interaction.interactionId, outcome, data)
        };

        switch (interaction.type) {
          case 'approval':     return <ApprovalComponent key={interaction.interactionId} {...props} />;
          case 'confirmation': return <ConfirmationComponent key={interaction.interactionId} {...props} />;
          // ... other types
          default:             return null;
        }
      })}
    </div>
  );
}

Component Package