import { Room } from '@altanlabs/sdk';

<Room
  mode="agent"
  accountId="account-id"
  agentId="agent-123"
  guestInfo={{ first_name: "John", external_id: "user-123" }}
/>

<Room
  mode="compact"
  ....
/>

const user = await fetchCurrentUserFromDB(); // must come from your users table

<Room
  mode="agent"
  accountId={resolveAccountId()}    // loaded dynamically
  agentId={resolveAgentId()}        // loaded dynamically
  guestInfo={{
    first_name: user?.first_name || null,
    last_name: user?.last_name || null,
    email: user?.email || null,
    external_id: user?.id || null, // MUST be an existing user ID
  }}
/>

guestInfo={{
  first_name: "Guest",                    // ❌ hardcoded
  external_id: `guest_${Date.now()}`,     // ❌ invented
  email: "someone@example.com",           // ❌ hardcoded
  last_name: "User"                       // ❌ hardcoded
}}

guestInfo={{
  external_id: "nonexistent-id",          // ❌ not verified against users table
}}

import React from 'react';
import { Room } from '@altanlabs/sdk';

function App() {
  return (
    <div style={{ height: '600px' }}>
      <Room
        mode="agent"
        accountId="altan-account-id"
        agentId="agent-123"
        guestInfo={{
          first_name: 'Jane',
          last_name: 'Doe',
          email: 'jane@example.com',
          external_id: 'user-456'
        }}
        onConversationReady={(room) => console.log('Chat ready!')}
        onAuthSuccess={(guest) => console.log('User authenticated:', guest.id)}
      />
    </div>
  );
}