Hiyve Components - v1.0.0
    Preparing search index...

    Interface QAPanelProps

    Props for the QAPanel component.

    The QAPanel displays an interactive Q&A interface where participants can ask questions, upvote, and receive answers from the host.

    Features:

    • Real-time question posting and sync
    • Upvoting with duplicate prevention
    • Host-only answering capability
    • Sort by newest, most votes, or unanswered
    • Pin questions to top
    • Delete questions (owner only)
    • Late-joiner state sync

    Basic usage inside HiyveProvider:

    import { QAPanel } from '@hiyve/react-collaboration';

    function QASidebar() {
      return <QAPanel title="Q&A" maxHeight={500} />;
    }

    With customization:

    <QAPanel
      title="Ask Questions"
      labels={{
        askPlaceholder: 'What would you like to know?',
        emptyState: 'No questions yet. Be the first to ask!',
      }}
      colors={{
        upvoteActive: '#ff9800',
        answerBadge: '#4caf50',
      }}
      onQuestionPosted={(q) => console.log('New question:', q.content)}
    />
    interface QAPanelProps {
        allowAnonymous?: boolean;
        autoSaveInterval?: number;
        colors?: Partial<QAPanelColors>;
        disabled?: boolean;
        enableAutoSave?: boolean;
        fileLocation?: string;
        fileName?: string;
        icons?: Partial<QAPanelIcons>;
        initialFileId?: string;
        initialQuestions?: Question[];
        labels?: Partial<QAPanelLabels>;
        maxHeight?: string | number;
        onAutoSave?: (fileId: string) => void;
        onAutoSaveError?: (error: Error) => void;
        onNewQuestion?: (question: Question) => void;
        onQuestionAnswered?: (question: Question) => void;
        onQuestionPosted?: (question: Question) => void;
        onQuestionsChange?: (questions: Question[]) => void;
        ownerOnlyModerate?: boolean;
        readOnly?: boolean;
        renderProps?: QAPanelRenderProps;
        resolveAuthorName?: (authorId: string) => string | undefined;
        showHeader?: boolean;
        styles?: Partial<QAPanelStyles>;
        sx?: SxProps<Theme>;
        title?: string;
    }
    Index

    Properties

    allowAnonymous? autoSaveInterval? colors? disabled? enableAutoSave? fileLocation? fileName? icons? initialFileId? initialQuestions? labels? maxHeight? onAutoSave? onAutoSaveError? onNewQuestion? onQuestionAnswered? onQuestionPosted? onQuestionsChange? ownerOnlyModerate? readOnly? renderProps? resolveAuthorName? showHeader? styles? sx? title?

    Properties

    allowAnonymous?: boolean

    Allow anonymous questions - hides author names (default: false)

    autoSaveInterval?: number

    Auto-save interval in milliseconds (default: 3000)

    colors?: Partial<QAPanelColors>

    Custom colors

    disabled?: boolean

    Whether the panel is disabled

    enableAutoSave?: boolean

    Enable auto-save to file storage (default: false)

    fileLocation?: string

    File storage location (default: '/Questions')

    fileName?: string

    Custom file name used when the session is auto-saved. The JSON extension is appended automatically if missing. When omitted, the panel falls back to an auto-generated <room>_questions_<timestamp>.json name.

    icons?: Partial<QAPanelIcons>

    Custom icons

    initialFileId?: string

    Initial file ID for resuming auto-save to existing file

    initialQuestions?: Question[]

    Initial questions for pre-populating the panel

    labels?: Partial<QAPanelLabels>

    Custom labels for i18n support

    maxHeight?: string | number

    Maximum height before scrolling

    onAutoSave?: (fileId: string) => void

    Callback after successful auto-save

    onAutoSaveError?: (error: Error) => void

    Callback on auto-save error

    onNewQuestion?: (question: Question) => void

    Callback when a new remote question arrives

    onQuestionAnswered?: (question: Question) => void

    Callback when a question is answered

    onQuestionPosted?: (question: Question) => void

    Callback when a new question is posted locally

    onQuestionsChange?: (questions: Question[]) => void

    Callback when questions change (for persistence)

    ownerOnlyModerate?: boolean

    Only room owner can answer and delete questions (default: true)

    readOnly?: boolean

    Read-only mode - hides question input, disables upvoting/answering (for viewing saved sessions)

    renderProps?: QAPanelRenderProps

    Render props for advanced customization

    resolveAuthorName?: (authorId: string) => string | undefined

    Per-author display-name resolver. Called for each question / answer to produce the rendered author name. When provided, this is preferred over the cached question.authorName / answer.authorName stored on the persisted record — cached names go stale (or are written as the raw participant userId when the host's identity layer hasn't been wired to provide a real name yet) and the resolver can apply nicknames, roster lookups, or any other host-specific mapping.

    Falls back through authorName → labels.unknownAuthor / anonymous when the resolver returns undefined.

    showHeader?: boolean

    Show the header (default: true)

    styles?: Partial<QAPanelStyles>

    Custom styles

    sx?: SxProps<Theme>

    MUI sx styling prop

    title?: string

    Title for the Q&A header (default: 'Q&A')

    Settings

    Member Visibility

    On This Page

    Properties