# @hiyve/rn-meeting

React Native meeting utility components for Hiyve video conferencing.

Provides `Alerts`, `MeetingSummary`, and `JoinToken` -- presentation-only components for meeting notifications, post-meeting summaries, and token-based room joining.

## Installation

```bash
npm install @hiyve/rn-meeting @hiyve/rn-react @hiyve/rn-core react-native-webrtc
```

## Quick Start

### Alerts

```tsx
import { Alerts } from '@hiyve/rn-meeting';

const alerts = [
  { id: '1', type: 'info', title: 'Recording started', message: 'The meeting is now being recorded.', timestamp: new Date() },
  { id: '2', type: 'warning', title: 'Unstable connection', message: 'Your network may affect call quality.', timestamp: new Date() },
  { id: '3', type: 'error', title: 'Recording failed', message: 'Could not start recording. Please try again.', timestamp: new Date() },
];

function AlertsPanel() {
  return (
    <Alerts
      alerts={alerts}
      onAcknowledge={(id) => console.log('Acknowledged', id)}
      onDismiss={(id) => console.log('Dismissed', id)}
    />
  );
}
```

### Meeting Summary

```tsx
import { MeetingSummary } from '@hiyve/rn-meeting';

const summary = {
  title: 'Sprint Planning',
  duration: 3600,
  participants: ['Alice', 'Bob', 'Carol'],
  keyPoints: [
    { id: '1', text: 'Agreed on Q2 roadmap priorities' },
  ],
  actionItems: [
    { id: '1', text: 'Draft RFC for new auth flow', assignee: 'Alice', dueDate: '2025-04-01' },
  ],
  decisions: [
    { id: '1', text: 'Switch to pnpm for all packages' },
  ],
};

function SummaryScreen() {
  return <MeetingSummary summary={summary} />;
}
```

### Join Token

```tsx
import { JoinToken } from '@hiyve/rn-meeting';

// Display mode -- show token with copy/share buttons
<JoinToken mode="display" token="abc-123-xyz" roomName="Sprint Planning" onCopyToken={handleCopy} onShare={handleShare} />

// Input mode -- enter token to join a room
<JoinToken mode="input" onJoin={(token, password) => joinRoom(token, password)} onLookup={previewRoom} roomInfo={roomInfo} />
```

## Components

### Alerts

Color-coded alert cards with four severity levels (info, warning, success, error). Each card shows a title, message, relative timestamp, and optional acknowledge/dismiss buttons.

```tsx
<Alerts
  alerts={alerts}
  onAcknowledge={(id) => markAcknowledged(id)}
  onDismiss={(id) => removeAlert(id)}
/>
```

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `alerts` | `AlertItem[]` | -- | Alert items to display |
| `onAcknowledge` | `(alertId: string) => void` | -- | Acknowledge handler |
| `onDismiss` | `(alertId: string) => void` | -- | Dismiss handler |
| `colors` | `Partial<AlertsColors>` | -- | Color overrides |
| `labels` | `Partial<AlertsLabels>` | -- | Label overrides |

**AlertItem:**

| Field | Type | Description |
|-------|------|-------------|
| `id` | `string` | Unique identifier |
| `type` | `'info' \| 'warning' \| 'success' \| 'error'` | Severity level |
| `title` | `string` | Bold heading text |
| `message` | `string` | Body text |
| `timestamp` | `Date` | When alert was created (shown as relative time) |
| `acknowledged` | `boolean` | Renders with reduced opacity when true |

### MeetingSummary

Post-meeting summary with collapsible sections for key points, action items (with checkbox, assignee, due date), decisions, and participants.

```tsx
<MeetingSummary summary={summary} showParticipants />
```

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `summary` | `MeetingSummaryData` | -- | Structured summary data |
| `title` | `string` | -- | Override the main title |
| `showParticipants` | `boolean` | `true` | Show participants section |
| `colors` | `Partial<MeetingSummaryColors>` | -- | Color overrides |
| `labels` | `Partial<MeetingSummaryLabels>` | -- | Label overrides |

**MeetingSummaryData:**

| Field | Type | Description |
|-------|------|-------------|
| `keyPoints` | `KeyPoint[]` | Key discussion points |
| `actionItems` | `ActionItem[]` | Action items with assignee/due date/completed |
| `decisions` | `Decision[]` | Decisions made |
| `participants` | `string[]` | Participant display names |
| `duration` | `number` | Meeting duration in seconds |
| `title` | `string` | Meeting title |

### JoinToken

Two-mode component for sharing and entering room invite tokens.

**Display mode** -- shows token with copy and share buttons:

```tsx
<JoinToken
  mode="display"
  token="abc-123-xyz"
  roomName="Sprint Planning"
  onCopyToken={() => copyToClipboard(token)}
  onShare={() => shareToken(token)}
/>
```

**Input mode** -- form to enter token, optional password, preview, and join:

```tsx
<JoinToken
  mode="input"
  onJoin={(token, password) => joinRoom(token, password)}
  onLookup={(token) => previewRoom(token)}
  requirePassword
  roomInfo={{ roomName: 'Sprint Planning', isActive: true }}
/>
```

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `mode` | `'display' \| 'input'` | -- | Display token or enter token |
| `token` | `string` | -- | Token to display (display mode) |
| `roomName` | `string` | -- | Room name context (display mode) |
| `onCopyToken` | `() => void` | -- | Copy handler (display mode) |
| `onShare` | `() => void` | -- | Share handler (display mode) |
| `onJoin` | `(token, password?) => void` | -- | Join handler (input mode) |
| `onLookup` | `(token) => void` | -- | Preview handler (input mode) |
| `requirePassword` | `boolean` | `false` | Show password input field |
| `isLoading` | `boolean` | -- | Show loading indicator on buttons |
| `roomInfo` | `{ roomName, isActive }` | -- | Room preview from lookup |
| `colors` | `Partial<JoinTokenColors>` | -- | Color overrides |
| `labels` | `Partial<JoinTokenLabels>` | -- | Label overrides |

## Customization

All components accept `colors` and `labels` props. Pass partial objects to override only what you need:

```tsx
<Alerts
  colors={{
    infoBorder: '#3B82F6',
    infoBackground: '#EFF6FF',
    acknowledgeButton: '#6366F1',
  }}
  labels={{
    acknowledge: 'Got it',
    dismiss: 'Hide',
  }}
  // ... other props
/>
```

## Requirements

- React 18+
- React Native 0.70+
- `@hiyve/rn-core`
- `@hiyve/rn-react`

## Related Packages

- [`@hiyve/rn-react`](../rn-react) -- Provider, hooks, and core UI components
- [`@hiyve/rn-capture`](../rn-capture) -- Recording, Streaming, and Transcription
- [`@hiyve/rn-collaboration`](../rn-collaboration) -- Chat, Polls, and Q&A