AieraChat Component

Embed the AieraChat component to interact with our AI assistant

The AieraChat component provides an AI-powered chat interface with real-time messaging, source management, and source viewing capabilities for financial analysis.

Overview

AieraChat is a self-contained React component that enables users to interact with Aiera's AI assistant. It supports real-time streaming responses, citation tracking with source navigation, and integrated source viewing.

Installation

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

Basic Usage

React Component

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

function App() {
  return (
    <Provider config={{ tracking: { userId: '12345' } }}>
      <AieraChat />
    </Provider>
  );
}

Web Embedding

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

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

  chat.on('authenticated', () => {
    chat.configure({
      options: {
        darkMode: false
      },
      tracking: { userId: '12345' }
    });
  });
</script>

Configuration Options

Configure AieraChat through the options object in your configuration:

Configuration Example

chat.configure({
  options: {
    darkMode: true,
    aieraChatDisableSourceNav: true,
    aieraChatCollectInternalFeedback: true
  },
  tracking: {
    userId: '12345'
  }
});

Features

Chat Sessions

• Create new chats: Start conversations with optional source context
• Session management: Switch between existing chat sessions
• Title editing: Rename chat sessions in real-time
• Session deletion: Remove chat sessions with confirmation

Real-time Messaging

• Streaming responses: AI responses stream in real-time
• Thinking states: Visual feedback during processing

Sources & Citations

Supported source types:

Web Search

When enabled, users can toggle web search to include external sources in AI responses.

Transcript Viewer

Click on transcript citations to view full earnings call transcripts with:

• Animated transitions
• Back navigation
• Source highlighting

Events

Emitted Events

Listening for Events

chat.on('chat-source', (data) => {
  const { targetId, targetType } = data;
  // Handle source navigation externally
  navigateTo(`/event/${targetId}`);
});

State Management

AieraChat uses Zustand for internal state management. The store tracks:

• Current chat session ID and status
• Active sources and citation markers
• Web search toggle state
• Selected transcript for viewing

Requirements

Authentication

AieraChat requires:

• A valid API key or user authentication
• tracking.userId in configuration for authentication and session filtering

Styling

Dark Mode

Apply dark mode via configuration:

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

CSS Classes

Key CSS classes for custom styling:

• .aiera-chat - Main container
• .aiera-chat__header - Header section
• .aiera-chat__messages - Message list container
• .aiera-chat__prompt - Input area
• .aiera-chat__sources - Sources panel
• .aiera-chat__menu - Chat session menu

Performance Considerations

• Citation normalization: Processed client-side for performance
• Token refresh: Streaming tokens include TTL and refresh automatically

Example: Complete Integration

import { AieraChat } from '@aiera/client-sdk/modules/AieraChat';
import { Provider } from '@aiera/client-sdk/components/Provider';
import { useMessageBus } from '@aiera/client-sdk/lib/msg';

function ChatContainer() {
  const bus = useMessageBus();

  useEffect(() => {
    // Handle external source navigation
    const unsubscribe = bus.on('chat-source', (data) => {
      console.log('Navigate to source:', data);
      // Open transcript viewer, etc.
    });

    return unsubscribe;
  }, [bus]);

  return <AieraChat />;
}

function App() {
  return (
    <Provider
      config={{
        tracking: { userId: '12345' },
        options: {
          darkMode: false,
          aieraChatDisableSourceNav: true
        }
      }}
    >
      <ChatContainer />
    </Provider>
  );
}

Troubleshooting

Messages not appearing

1. Verify tracking.userId is set in configuration

Sources not loading

1. Verify API authentication is successful
2. Check network requests for errors

Dark mode not applying

1. Confirm darkMode: true is in the options object
2. Verify CSS is properly loaded
3. Check for CSS specificity conflicts