@growthub/realtime-ssr

Professional React Real-time SDK for seamless real-time functionality.

Installation

npm install @growthub/realtime-ssr

Quick Start

import { useRealtimeEngine, useCoordinatedPanels } from '@growthub/realtime-ssr';

export function MyComponent({ userId, threadId }: Props) {
  const {
    messages,
    isConnected,
    currentStep,
    isActivelyGenerating
  } = useRealtimeEngine(userId, threadId);

  return (
    <div>
      <div>Status: {isConnected ? '🟢' : '🔴'}</div>
      <div>Step: {currentStep}</div>
      {messages.map(msg => (
        <div key={msg.id}>{msg.message}</div>
      ))}
    </div>
  );
}

Advanced Usage

export function AdvancedComponent({ userId, threadId }: Props) {
  const coordinatedData = useCoordinatedPanels(threadId, userId, {
    enableAssetExtraction: true,
    maxAssets: 50,
  });

  return (
    <div>
      {/* Execution panel */}
      <div>
        <h3>Status: {coordinatedData.leftPanelData.executionStatus}</h3>
        {coordinatedData.leftPanelData.messages.map(msg => (
          <div key={msg.id}>{msg.message}</div>
        ))}
      </div>

      {/* Assets panel */}
      <div>
        <h3>Assets ({coordinatedData.rightPanelData.generatedImages.length})</h3>
        {coordinatedData.rightPanelData.generatedImages.map(url => (
          <img key={url} src={url} alt="Generated" />
        ))}
      </div>
    </div>
  );
}

API Reference

useRealtimeEngine(userId, threadId, options?)

Core real-time messaging hook.

Returns:

• messages: RealtimeMessage[]
• isConnected: boolean
• isActivelyGenerating: boolean
• currentStep: string | null
• latestProgress: number
• isCompleted: boolean
• hasError: boolean

useCoordinatedPanels(threadId, userId, options?)

Advanced coordinated UI panels hook.

Returns:

• leftPanelData - Execution logs and status
• rightPanelData - Generated assets and media

TypeScript Support

Full TypeScript support with comprehensive type definitions included.

interface RealtimeMessage {
  id: string;
  threadId: string;
  userId: string;
  message: string;
  status: 'pending' | 'running' | 'completed' | 'failed';
  step: string;
  progress: number;
  timestamp: string;
}

Requirements

• React 18+
• TypeScript 4.5+
• Node.js 18+

License

Proprietary - Growthub Marketing OS

Built with ❤️ by the Growthub Team