QAPanel

QAPanel is the audience Q&A surface — question feed sorted by upvotes, with a composer at the bottom for asking and host-only "mark answered live" / "type answer" actions. Composes useQA.

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 { QAPanel } from '@levelchat/react-components';

<QAPanel isHost={isHost} className="h-full w-80" />

Sorting + status

The server returns questions sorted by (status='open' ? 0 : 1, upvotes desc, createdAt asc). The burning, well-upvoted question lands at the top; answered ones drop to the bottom but stay visible.

Three status states:

• open — awaiting an answer.
• answered-live — host marked answered live (they spoke it).
• answered-text — host typed a written response, attached.

Host actions

• "Mark answered live" — flips the status to answered-live.
• "Type answer" — opens an inline textarea; submitting attaches the text + flips to answered-text.

Accessibility

• role="region" + aria-label="Q and A" on the panel.
• Upvote buttons are aria-pressed for toggle semantics.
• Question list is <ul role="feed">.

Props