EndCallSummary

EndCallSummary is the post-call surface — duration, participant count, end reason, links to the composed recording + transcript, and a re-join button if you supply the closure. Composes useCallSummary, which is the same source the recording dashboard uses for asset URLs.

Install

pnpm add @levelchat/react-components @levelchat/web

Requirements

• React — react and react-dom ^18 || ^19 (peer dependency).
• LevelChat Web SDK — @levelchat/web ^0.2.4 (peer dependency, wires hook-driven mode to the live Room).
• Provider — wrap the tree in <LevelChatProvider> from @levelchat/web-react so hook-driven mode can subscribe to room events. Prop-driven demos work without it.
• Styles — import the brand tokens + kit stylesheet exactly once at the app entry, before any kit component renders.

In Next.js (App Router), import the stylesheets at the top of your root layout:

// app/layout.tsx
import '@levelchat/brand/tokens.css';
import '@levelchat/react-components/styles.css';

In Vite (or any plain React app), import them at the top of your entry module:

// src/main.tsx
import '@levelchat/brand/tokens.css';
import '@levelchat/react-components/styles.css';

Basic usage

import { EndCallSummary } from '@levelchat/react-components';

<EndCallSummary onRejoin={() => router.push('/meet/' + roomId)} />

Custom actions

Inject renderActions to replace the default re-join button with your own CTAs (book a follow-up, share a survey, copy the recording link):

<EndCallSummary
  renderActions={(summary) => (
    <>
      <CopyButton text={summary.recordingUrl} />
      <Button onClick={() => bookFollowup(summary.callId)}>Book follow-up</Button>
    </>
  )}
/>

Props