InteractionContainer

Usage

import { InteractionContainer } from 'edge-interact-ui';

// Place inside InteractionProvider — renders interactions as they arrive
function App() {
  return (
    <InteractionProvider>
      {/* InteractionContainer renders as a fixed overlay or inline — your choice */}
      <InteractionContainer
        renderMode="modal"  // or "inline"
        className="my-container"
      />
      <AppContent />
    </InteractionProvider>
  );
}

Container Props

How the Container Routes Types

// Simplified InteractionContainer internals
function InteractionContainer({ renderMode, maxVisible = 1, fallbackRenderer: Fallback }) {
  const { queue, respond } = useInteractionReceiver();
  const visible = queue.slice(0, maxVisible);

  return (
    <>
      {visible.map(interaction => {
        const Renderer = getRegisteredRenderer(interaction.type) ?? Fallback;

        const handleRespond = (outcome: string, data?: unknown) =>
          respond(interaction.interactionId, outcome, data);

        return (
          <Renderer
            key={interaction.interactionId}
            interaction={interaction}
            respond={handleRespond}
          />
        );
      })}
      {renderMode === 'modal' && visible.length > 0 && (
        <div className="interaction-backdrop" />
      )}
    </>
  );
}

Rendering Modes

Modal Mode (default)

Interactions appear as modal dialogs over the application. A semi-transparent backdrop is shown behind the interaction component. The user cannot interact with the main app until the interaction is resolved.

Inline Mode

Interactions render in the DOM position where InteractionContainer is placed. No backdrop. Used in the WorkDesk HIL Inbox where interactions are displayed as cards in a list, and the user can scroll and choose which to act on.

Multi-Interaction Queue Display

Set maxVisible to show multiple interactions simultaneously (e.g., for an inbox-style view):

// Show up to 3 interactions simultaneously in inline mode
<InteractionContainer
  renderMode="inline"
  maxVisible={3}
  showQueueCount={true}
/>