Picker Component

Live Mockup (Multi-Select)

Picker Payload Schema

interface PickerPayload {
  /** The options to display */
  options: Array<{
    id: string;          // Unique option identifier
    label: string;       // Display label
    description?: string; // Optional description shown below the label
    icon?: string;       // Optional icon (Font Awesome class or URL)
    disabled?: boolean;  // Whether this option is selectable
  }>;

  /** Selection mode: "single" (radio) or "multiple" (checkbox). Default: "single" */
  selectionMode?: 'single' | 'multiple';

  /** Minimum selections required (for multiple mode). Default: 1 */
  minSelections?: number;

  /** Maximum selections allowed (for multiple mode). Default: unlimited */
  maxSelections?: number;

  /** Label for the submit button (default: "Confirm Selection") */
  submitLabel?: string;
}

Response Schema

// Outcome: "selected"
interface PickerResponseData {
  selectedIds: string[]; // Array of selected option IDs
}

// respond("selected", { selectedIds: ["staging", "dev"] })

Server-Side Usage

// Agent generates options dynamically
var templates = await _emailTemplateService.GetAvailableTemplatesAsync(ct);

var request = new InteractionRequest {
  Type = InteractionTypes.Picker,
  TargetUserId = marketingUserId,
  Title = "Select Email Template",
  Payload = new PickerPayload {
    Options = templates.Select(t => new PickerOption {
      Id = t.TemplateId,
      Label = t.Name,
      Description = $"Last used: {t.LastUsedDate:MMM d}"
    }).ToList(),
    SelectionMode = "single",
    SubmitLabel = "Use This Template"
  },
  TimeoutMs = 300_000
};

var response = await _publisher.PublishAndWaitAsync(request, ct);
var selectedId = response.Data?.Deserialize<PickerResponseData>()?.SelectedIds.First();

Display Modes