Aieracast Component

Embed the Aieracast component to simultaneously view and analyze multiple events

The Aieracast module provides a multi-column transcript viewer with integrated audio playback for comparing and analyzing multiple financial events simultaneously.

Overview

Aieracast is a comprehensive event viewer that allows users to:

• Browse and search financial events in a sidebar
• Open multiple event transcripts side-by-side
• Play audio with synchronized transcript highlighting
• Drag and reorder transcript columns
• Resize columns for optimal viewing

Installation

import { Aieracast } from '@aiera/client-sdk/modules/Aieracast';

Basic Usage

React Component

import { Aieracast } from '@aiera/client-sdk/modules/Aieracast';
import { Provider } from '@aiera/client-sdk/components/Provider';

function App() {
  return (
    <Provider config={{ moduleName: 'Aieracast' }}>
      <Aieracast />
    </Provider>
  );
}

Web Embedding

<script src="https://public.aiera.com/aiera-sdk/0.0.80/embed.js"></script>
<script>
  const aieracast = new Aiera.Module(
      'https://public.aiera.com/aiera-sdk/0.0.80/modules/Aieracast/index.html', 
      'YOUR-IFRAME-ID'
  );

  aieracast.load().then(() => {
    aieracast.authenticateApiKey('your-public-api-key');
  });

  aieracast.on('authenticated', () => {
    aieracast.configure({
      hideSettings: true,
      options: {
        showGlobalSearch: true,
        darkMode: false,
        eventListFilters: [
          { name: 'transcripts', visible: false, defaultValue: true },
          { name: 'earningsOnly', visible: true, defaultValue: false }
        ]
      },
      tracking: { userId: '12345' }
    });
  });
</script>

Configuration Options

Configure Aieracast through the options object in your configuration:

EventListFilter Configuration

interface EventListFilter {
  name: 'transcripts' | 'earningsOnly';
  visible: boolean;      // Show filter toggle in UI
  defaultValue: boolean; // Initial filter state
}

Configuration Example

aieracast.configure({
  hideSettings: true,
  options: {
    darkMode: true,
    showGlobalSearch: true,
    eventListFilters: [
      { name: 'transcripts', visible: true, defaultValue: true },
      { name: 'earningsOnly', visible: false, defaultValue: false }
    ]
  },
  tracking: { userId: '12345' },
  overrides: {
    style: `/* Custom CSS overrides */`
  }
});

Features

Event Sidebar

• Searchable event list: Search across all events and transcripts
• Filter controls: Filter by transcript availability, earnings events
• Toggle functionality: Click events to open/close transcript panels
• Collapsible sidebar: Toggle button to maximize transcript viewing area

Multi-Column Display

• Horizontal layout: View multiple transcripts side-by-side
• Drag & drop reordering: Reorder columns by dragging (powered by @dnd-kit)
• Resizable columns: Drag the right edge of any column to resize (minimum width: 368px)
• Horizontal scrolling: Scroll to view additional open transcripts

Audio Playback

The integrated Playbar component provides:

• Play/pause controls
• Seek functionality
• Playback rate adjustment
• Volume control
• Event information display

Search

• Global search: Search bar in sidebar for finding events
• Debounced input: 250ms debounce for optimal performance
• Quoted search: Use quotes for exact phrase matching

Events

Emitted Events

EventSelected Payload

interface EventSelected {
  ticker?: string;
  eventDate?: string;
  eventType?: string;
  eventId?: string;
  title?: string;
}

Incoming Events

Event Handling Example

// Listen for event selection
aieracast.on('event-selected', (event) => {
  console.log(`User selected: ${event.ticker} - ${event.title}`);
  // Update other UI components, analytics, etc.
});

// Listen for audio events
aieracast.on('event-audio', (event) => {
  console.log('Audio playback:', event);
});

// Set up watchlist after authentication
aieracast.on('authenticated', () => {
  aieracast.setWatchlist([
    { ticker: 'AAPL' },
    { ticker: 'GOOGL' },
    { ISIN: 'US0231351067' }
  ]);
});

Internal State

Aieracast manages the following state:

Requirements

Internal Module Dependencies

Aieracast uses these internal modules:

• EventList - Sidebar event list
• Transcript - Individual transcript column rendering
• Playbar - Audio playback controls

External Libraries

• @dnd-kit/core and @dnd-kit/sortable - Drag and drop functionality
• luxon - Date/time manipulation
• lodash.debounce - Debounced search

Styling

Dark Mode

Apply dark mode via configuration:

configure({
  options: { darkMode: true }
});

CSS Classes

Key CSS classes for custom styling:

Custom CSS Overrides

configure({
  overrides: {
    style: `
      .aieracast__events {
        width: 350px;
      }
      .aieracast__search input {
        border-radius: 8px;
      }
    `
  }
});

Interactions

Opening Events

Click the toggle switch next to any event in the sidebar to open its transcript in a new column.

Reordering Columns

1. Click and hold on a transcript column header
2. Drag horizontally to desired position
3. Release to drop

Resizing Columns

1. Hover over the right edge of a column (cursor changes to resize indicator)
2. Click and drag to resize
3. Minimum width is 368px

Collapsing Sidebar

Click the chevron button at the sidebar edge to collapse/expand the event list, maximizing space for transcripts.

Example: Complete Integration

import { Aieracast } from '@aiera/client-sdk/modules/Aieracast';
import { Provider } from '@aiera/client-sdk/components/Provider';

function TranscriptViewer() {
  return (
    <Provider
      config={{
        moduleName: 'Aieracast',
        tracking: { userId: '12345' },
        options: {
          darkMode: false,
          showGlobalSearch: true,
          eventListFilters: [
            { name: 'transcripts', visible: true, defaultValue: true },
            { name: 'earningsOnly', visible: true, defaultValue: false }
          ]
        }
      }}
    >
      <div style={{ height: '100vh' }}>
        <Aieracast />
      </div>
    </Provider>
  );
}

Troubleshooting

Events not loading

1. Verify API authentication is successful
2. Ensure network connectivity to Aiera API

Drag and drop not working

1. Confirm @dnd-kit libraries are installed
2. Check for JavaScript errors in console
3. Verify the transcript column has proper event handlers

Audio not playing

1. Check browser autoplay policies
2. Verify the event has audio available (audioProxy or audioStreamUri)
3. Ensure the Playbar component is rendering

Search not filtering

1. Verify showGlobalSearch is enabled
2. Check for debounce timing (250ms delay)
3. Ensure search is reaching the API endpoint

Performance Tips

• Limit open transcripts: Each open transcript loads full content; keep open count reasonable
• Use filters: Apply filters to reduce the event list size
• Enable transcript filter: Filter to only events with transcripts for faster loading