Onlive Common 121

A shared utility package containing common services, utilities, types, and themes used across the Onlive 121 ecosystem. This package provides the foundational components for building interactive chat, flow, and video meeting applications.

📦 Installation

npm install @onlive.ai/common-121

📂 Package Structure

🛠️ Services

• AudioService: Handles audio notifications and sound management for incoming calls and interactions
• FirebaseService: Manages real-time Firebase connections for chat requests and agent presence
• LivekitService: Provides WebRTC functionality for video/audio communication using LiveKit

🔧 Utilities

• adopt-styles: Utility for adopting CSS styles in web components
• browser-preferences: Browser preference detection and management
• classify-media: Media file classification and type detection
• decorators: Custom element decorators and helpers
• detected-lang: Language detection utilities
• fullscreen: Fullscreen API helpers
• markdown: Markdown parsing with sanitization
• merge: Deep object merging utilities
• sanitize: HTML content sanitization
• watch: Reactive property watching utilities
• And more...

🎨 Themes

• Light Theme: Default light mode styling
• Dark Theme: Dark mode color scheme
• Custom Themes: Brand-specific themes (Audi, Cupra, Hyundai, Magimix, Onlive)

📋 Types

• TrackingOptions: Configuration types for analytics tracking
• WindowContext: Global window context definitions

🚀 Usage

Basic Import

import { AudioService } from "@onlive.ai/common-121/services/audio.service";
import { markdown } from "@onlive.ai/common-121/utils/markdown";
import { merge } from "@onlive.ai/common-121/utils/merge";

Audio Service

import { AudioService } from "@onlive.ai/common-121/services/audio.service";

const audioService = AudioService.getInstance();

// Play incoming call sound
audioService.playIncoming();

// Stop current sound
audioService.stopCurrentSound();

Firebase Service

import { FirebaseService } from "@onlive.ai/common-121/services/firebase/firebase.service";

const firebaseService = new FirebaseService(firebaseConfig, organizationId);

// Listen for new requests
firebaseService.onNewRequest((id, request) => {
  console.log("New request:", request);
});

LiveKit Service

import { LivekitService } from "@onlive.ai/common-121/services/livekit.service";

const livekitService = new LivekitService();

// Join a room
await livekitService.joinRoom(roomId, timezone, language);

Utilities

import { markdown } from "@onlive.ai/common-121/utils/markdown";
import { merge } from "@onlive.ai/common-121/utils/merge";
import { sanitize } from "@onlive.ai/common-121/utils/sanitize";

// Parse markdown safely
const htmlContent = markdown("# Hello **World**");

// Merge objects deeply
const merged = merge(defaultOptions, userOptions);

// Sanitize HTML content
const cleanHtml = sanitize(userInput);

Themes

import { styles as lightTheme } from '@onlive.ai/common-121/themes/light';
import { styles as darkTheme } from '@onlive.ai/common-121/themes/dark';

// Apply theme to a Lit component
static styles = [lightTheme];

🏗️ Architecture

This package is designed to be used as a foundation for the Onlive 121 ecosystem, providing:

• Modular Design: Each service and utility can be imported independently
• Type Safety: Full TypeScript support with comprehensive type definitions
• Performance: Optimized for production use with efficient caching and lazy loading
• Extensibility: Easy to extend and customize for specific use cases

🔗 Dependencies

This package integrates with several key technologies:

• Firebase: Real-time database and authentication
• LiveKit: WebRTC infrastructure for video/audio
• Lit: Web components framework
• RxJS: Reactive programming utilities
• Marked: Markdown parsing
• DOMPurify: HTML sanitization

📱 Compatibility

• Frameworks: Lit, Web Components
• Browsers: Modern browsers with ES2020+ support
• Node.js: 18.x or higher
• TypeScript: 5.7.x

🤝 Related Packages

• @onlive.ai/chat: Chat component and messaging functionality
• @onlive.ai/flow: Interactive flow components
• @onlive.ai/meet: Video conferencing components
• @onlive.ai/flow-client: Flow client SDK

📄 License

This package is part of the Onlive 121 ecosystem and follows the project's licensing terms.