@hiyve/react-collaboration

Chat, polls, Q&A, and file management components for Hiyve.

Installation

npx @hiyve/cli login
npm install @hiyve/react-collaboration
Copy

Quick Start

import { ChatPanel, PollsWindow, QAPanel, FileManager } from '@hiyve/react-collaboration';
import { HiyveProvider } from '@hiyve/react';

function CollaborationSidebar() {
  return (
    <HiyveProvider generateRoomToken={generateRoomToken}>
      <ChatPanel maxHeight={400} />
      <PollsWindow />
      <QAPanel />
      <FileManager />
    </HiyveProvider>
  );
}
Copy

Components

Chat

Chat Hub

Polls

Q&A

File Manager

Room File Scope

<FileCacheProvider>
  <RoomFileScope>
    <FileManager />
  </RoomFileScope>
</FileCacheProvider>
Copy

RoomFileScope Props

useRoomFileScope Hook

Returns the current room file scope context, or null when not inside a RoomFileScope.

Session Common

ChatPanel Props

ChatMessageList Props

ChatInput Props

ChatHub Props

Quick Start: Multi-Channel Chat

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

const channels = [
  { id: 'general', name: 'General', unreadCount: 3, lastMessagePreview: 'Hello!' },
  { id: 'design', name: 'Design Team', unreadCount: 0 },
];

function MultiChannelChat() {
  const [activeId, setActiveId] = useState<string | null>('general');
  const [messages, setMessages] = useState<ChatMessage[]>([]);

  return (
    <ChatHub
      channels={channels}
      activeChannelId={activeId}
      messages={messages}
      localUserId="user-123"
      onChannelSelect={setActiveId}
      onSend={(content) => handleSendMessage(activeId, content)}
      channelListProps={{ showSearch: true }}
    />
  );
}
Copy

ChatChannelList Props

PollsWindow Props

QAPanel Props

FileManager Props

FileCacheProvider Props

Room mode (default): Place inside HiyveProvider. Automatically manages the file cache when a room is joined.

Library mode: Provide the files prop and on* callbacks to use without HiyveProvider.

FileViewer Props

MediaFileViewer Props

Enhanced media player for audio/video files. Requires @hiyve/react-media-player.

FileIcon Props

RoomSummaryViewer Props

Dialog Props

CreateFolderDialog

RenameFileDialog

DeleteConfirmDialog

FileSharingDialog

Hooks

Polls

Q&A

File Manager

Session

Utilities

Polls

Q&A

File Manager

File Reference Utilities

Utilities for discovering file references when sharing files that link to other files (e.g., a clip composition referencing audio clips). Built-in extractors handle clip-composition and assignment resource types.

import {
  registerFileReferenceExtractor,
  hasFileReferences,
  extractFileReferences,
} from '@hiyve/react-collaboration';

// Register a custom extractor for playlist files
const cleanup = registerFileReferenceExtractor('playlist', (content) => {
  const playlist = content as { tracks?: Array<{ fileId: string }> };
  return (playlist.tracks ?? []).map(t => t.fileId);
});

// Check and extract references
if (hasFileReferences('playlist')) {
  const referencedIds = extractFileReferences('playlist', parsedContent);
}

// Unregister when done
cleanup();
Copy

Constants

Customization

Every component supports customization through labels, icons, colors, and styles props. Pass a partial object to override only the values you need.

Chat

import { ChatPanel, defaultChatPanelColors } from '@hiyve/react-collaboration';

<ChatPanel
  labels={{
    title: 'Mensajes',
    placeholder: 'Escribe un mensaje...',
    emptyState: 'Sin mensajes',
  }}
  colors={{
    headerBackground: '#f5f5f5',
    containerBackground: '#ffffff',
    localMessageBackground: '#1976d2',
  }}
  styles={{
    avatarSize: 28,
    messageBorderRadius: 16,
  }}
/>
Copy

Chat defaults and merge functions:

Chat Hub

import { ChatHub, defaultChatHubColors } from '@hiyve/react-collaboration';

<ChatHub
  channels={channels}
  activeChannelId={activeId}
  messages={messages}
  localUserId="user-123"
  onChannelSelect={setActiveId}
  onSend={handleSend}
  labels={{ emptyStateMessage: 'Selecciona una conversacion' }}
  colors={{ subtitleColor: '#888' }}
  channelListProps={{
    labels: { title: 'Conversaciones', searchPlaceholder: 'Buscar...' },
  }}
/>
Copy

Chat Hub defaults and merge functions:

Polls

import { PollsWindow, defaultPollsWindowLabels } from '@hiyve/react-collaboration';

<PollsWindow
  labels={{
    createPoll: 'Neue Umfrage',
    vote: 'Abstimmen',
  }}
  colors={{
    primary: '#7c3aed',
  }}
/>
Copy

Polls defaults and merge functions:

Q&A

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

<QAPanel
  labels={{
    askQuestion: 'Poser une question',
    answer: 'Repondre',
  }}
  icons={{
    upvote: <MyUpvoteIcon />,
  }}
/>
Copy

Q&A defaults and merge functions:

File Manager

import {
  FileManager,
  defaultFileManagerLabels,
  defaultFileIcons,
} from '@hiyve/react-collaboration';

<FileManager
  labels={{
    upload: 'Subir archivo',
    newFolder: 'Nueva carpeta',
  }}
/>
Copy

File Manager defaults and merge functions:

Note: The unprefixed names (defaultLabels, mergeLabels, defaultIcons, mergeIcons, defaultColors, mergeColors, defaultStyles, mergeStyles) are deprecated. Use the prefixed defaultFileManager* / mergeFileManager* names shown above. | defaultFileIcons | mergeFileIcons | | defaultFileIconColors | mergeFileIconColors | | defaultViewerLabels | -- | | defaultViewerColors | -- | | defaultViewerStyles | -- | | defaultMediaFileViewerLabels | mergeMediaFileViewerLabels | | defaultMediaFileViewerColors | mergeMediaFileViewerColors | | defaultCreateFolderLabels | -- | | defaultRenameLabels | -- | | defaultDeleteLabels | -- | | defaultShareLabels | -- | | defaultRoomSummaryLabels | -- | | defaultRoomSummaryColors | -- |

Session Common

Namespaced Constants

Some constant names are shared across the polls and Q&A domains. They are exported with domain prefixes to avoid conflicts:

Key Types

Requirements

• @hiyve/react (^2.0.0) -- components must be rendered inside HiyveProvider
• @hiyve/rtc-client -- WebRTC client (provided by HiyveProvider)
• @hiyve/utilities (^1.0.0)
• @mui/material (^5.0.0 || ^6.0.0) and @mui/icons-material
• @emotion/react (^11.0.0) and @emotion/styled (^11.0.0)
• react (^18.0.0)
• dayjs (^1.11.0) -- optional, used for date formatting in file manager
• @hiyve/react-media-player (^1.0.0) -- optional, enables enhanced media playback in MediaFileViewer

License

Proprietary - Hiyve SDK