@hiyve/react-intelligence

AI intelligence, meeting summaries, alerts, scheduling, and sentiment analysis components for Hiyve.

Installation

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

Quick Start

CloudProvider connects your app to the Hiyve Cloud AI service. Provide a generateCloudToken callback that fetches a cloud token from your backend, and the SDK handles authentication and automatic token refresh:

import { CloudProvider, AIAssistant } from '@hiyve/react-intelligence';
import { HiyveProvider } from '@hiyve/react';

async function generateCloudToken({ userId }: { userId: string }) {
  const res = await fetch('/api/generate-cloud-token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ userId }),
  });
  const { cloudToken, environment } = await res.json();
  return { cloudToken, environment };
}

function App() {
  return (
    <HiyveProvider generateRoomToken={generateRoomToken}>
      <CloudProvider generateCloudToken={generateCloudToken}>
        <MeetingRoom />
      </CloudProvider>
    </HiyveProvider>
  );
}

function MeetingRoom() {
  return <AIAssistant roomName="my-room" />;
}
Copy

When IdentityProvider wraps your app, CloudProvider automatically resolves the user's email for token generation -- no userId prop needed:

<IdentityProvider>
  <CloudProvider generateCloudToken={generateCloudToken}>
    <App />
  </CloudProvider>
</IdentityProvider>
Copy

You can also pass userId directly if you are not using IdentityProvider:

<CloudProvider userId="user@example.com" generateCloudToken={generateCloudToken}>
  <App />
</CloudProvider>
Copy

Components

Cloud Provider

AI Assistant

Intelligence

Meeting Summary

Alerts

Scheduling

Mood Analysis

Sentiment Dashboard

Intelligence Settings

Intelligence Hub

Search

Scorecard

Coaching

Conversation Manager

Agent Assistant

Components for building agent-style AI assistants with structured results, inline action forms, reasoning visualization, and network graph rendering.

AgentInput Props

AgentInput exposes an imperative handle via ref with setValue(text) and focus() methods.

AgentSidebar Props

AgentConversationView Props

AgentMessage Props

ActionForm Props

ReasoningSteps Props

NetworkGraph Props

Agent Assistant Usage

import {
  AgentInput,
  AgentConversationView,
  AgentSidebar,
  useAgentConversations,
} from '@hiyve/react-intelligence';

function AgentPanel({ userId }: { userId: string }) {
  const {
    conversations,
    activeConversationId,
    activeConversation,
    createConversation,
    deleteConversation,
    switchConversation,
    renameConversation,
    addMessage,
    deleteMessage,
  } = useAgentConversations(userId);

  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(query: string) {
    addMessage({ type: 'user', query });
    setLoading(true);
    const result = await fetchAgentResponse(query);
    addMessage({ type: 'assistant', result });
    setLoading(false);
  }

  return (
    <div style={{ display: 'flex', height: '100%' }}>
      <AgentSidebar
        open={sidebarOpen}
        onClose={() => setSidebarOpen(false)}
        conversations={conversations}
        activeConversationId={activeConversationId}
        onSelectConversation={switchConversation}
        onNewConversation={createConversation}
        onDeleteConversation={deleteConversation}
        onRenameConversation={renameConversation}
      />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <AgentConversationView
          messages={activeConversation?.messages}
          loading={loading}
          onDeleteMessage={deleteMessage}
        />
        <AgentInput onSubmit={handleSubmit} loading={loading} />
      </div>
    </div>
  );
}
Copy

Room Dashboard

A configurable card-grid dashboard designed for rooms without active video. The dashboard provides AI assistant, semantic search, alerts, room statistics, and settings cards in a responsive grid layout. Cards can be shown, hidden, reordered, or replaced with custom cards.

RoomDashboard Props

DashboardCard Props

RoomStatsDashboard Props

RoomStatsDashboard Usage

import { RoomStatsDashboard } from '@hiyve/react-intelligence';
import GroupIcon from '@mui/icons-material/Group';
import FolderIcon from '@mui/icons-material/Folder';
import VideocamIcon from '@mui/icons-material/Videocam';
import TimerIcon from '@mui/icons-material/Timer';

function StatsPage({ stats }: { stats: RoomStatsData }) {
  return (
    <RoomStatsDashboard
      stats={stats}
      statCards={[
        { icon: <GroupIcon />, label: 'Participants', value: stats.participantCount ?? 0 },
        { icon: <FolderIcon />, label: 'Files', value: stats.fileCount ?? 0 },
        { icon: <VideocamIcon />, label: 'Recordings', value: stats.recordingCount ?? 0 },
        { icon: <TimerIcon />, label: 'Sessions', value: stats.sessionCount ?? 0 },
      ]}
      renderChart={() => <MyChart data={chartData} />}
    />
  );
}
Copy

Room Dashboard Usage

import {
  RoomDashboard,
  DashboardCard,
} from '@hiyve/react-intelligence';
import type { RoomDashboardCardConfig } from '@hiyve/react-intelligence';

// Basic usage
function RoomView({ roomId, userId }: { roomId: string; userId: string }) {
  return (
    <RoomDashboard
      roomId={roomId}
      userId={userId}
      isOwner={true}
      roomStats={{
        roomCount: 12,
        fileCount: 45,
        sessionCount: 8,
        participantCount: 24,
      }}
    />
  );
}

// With custom cards
const customCards: RoomDashboardCardConfig[] = [
  {
    id: 'announcements',
    title: 'Announcements',
    gridSize: { xs: 12, md: 6 },
    render: (context) => <AnnouncementsFeed roomId={context.roomId} />,
  },
];

function CustomDashboard({ roomId, userId }: { roomId: string; userId: string }) {
  return (
    <RoomDashboard
      roomId={roomId}
      userId={userId}
      customCards={customCards}
      cardOrder={['assistant', 'announcements', 'search', 'roomStats']}
      showAlerts={false}
    />
  );
}
Copy

Hooks

Cloud & AI

Alerts & Scheduling

Search & Analysis

Note Generation

Conversation Manager

Mood & Sentiment

Chat Notes

Alert Toasts

Agent Conversations

useAgentConversations

Manages multiple agent conversations with automatic persistence scoped to each user. Conversations are preserved across page reloads.

Parameters:

Returns UseAgentConversationsReturn:

Customization

Every component domain supports custom labels, colors, styles, and icons via merge functions.

AI Assistant

import {
  AIAssistant,
  defaultAIAssistantLabels,
  mergeAIAssistantColors,
} from '@hiyve/react-intelligence';

<AIAssistant
  userId="user-123"
  roomName="my-room"
  labels={{ ...defaultAIAssistantLabels, title: 'Meeting AI' }}
  colors={mergeAIAssistantColors({ userBubble: '#e3f2fd' })}
/>
Copy

Intelligence Panel

import {
  IntelligencePanel,
  DEFAULT_INTELLIGENCE_LABELS,
  DEFAULT_INTELLIGENCE_COLORS,
} from '@hiyve/react-intelligence';

<IntelligencePanel
  labels={{ ...DEFAULT_INTELLIGENCE_LABELS, title: 'AI Insights' }}
  colors={{ ...DEFAULT_INTELLIGENCE_COLORS, primary: '#1976d2' }}
/>
Copy

Meeting Summary

import {
  MeetingSummary,
  mergeMeetingSummaryLabels,
  mergeMeetingSummaryColors,
} from '@hiyve/react-intelligence';

<MeetingSummary
  data={summaryData}
  labels={mergeMeetingSummaryLabels({ title: 'Session Recap' })}
  colors={mergeMeetingSummaryColors({ primary: '#2e7d32' })}
/>
Copy

Alerts

import {
  AlertsPanel,
  mergeAlertsPanelLabels,
  mergeAlertsColors,
} from '@hiyve/react-intelligence';

<AlertsPanel
  roomId="room-123"
  labels={mergeAlertsPanelLabels({ title: 'Meeting Alerts' })}
  colors={mergeAlertsColors({ high: '#d32f2f' })}
/>
Copy

Scheduling

import {
  ScheduleForm,
  mergeScheduleFormLabels,
  mergeSchedulingColors,
} from '@hiyve/react-intelligence';

<ScheduleForm
  onSubmit={handleSubmit}
  labels={mergeScheduleFormLabels({ submitButton: 'Create Meeting' })}
  colors={mergeSchedulingColors({ primary: '#1565c0' })}
/>
Copy

Sentiment Dashboard

import {
  SentimentDashboard,
  mergeSentimentDashboardLabels,
  mergeSentimentDashboardColors,
} from '@hiyve/react-intelligence';

<SentimentDashboard
  roomName="my-room"
  labels={mergeSentimentDashboardLabels({ title: 'Mood Overview' })}
  colors={mergeSentimentDashboardColors({ positive: '#4caf50' })}
/>
Copy

Intelligence Settings

import {
  IntelligenceSettings,
  defaultIntelligenceSettingsLabels,
  mergeIntelligenceSettingsLabels,
} from '@hiyve/react-intelligence';

<IntelligenceSettings
  labels={mergeIntelligenceSettingsLabels({ title: 'AI Configuration' })}
/>
Copy

Intelligence Hub

import {
  IntelligenceHub,
  mergeIntelligenceHubLabels,
  mergeIntelligenceHubColors,
} from '@hiyve/react-intelligence';

<IntelligenceHub
  userId="user-123"
  roomName="my-room"
  labels={mergeIntelligenceHubLabels({ title: 'AI Hub' })}
  colors={mergeIntelligenceHubColors({ primary: '#1976d2' })}
/>
Copy

Search Panel

import {
  SearchPanel,
  mergeSearchPanelLabels,
  mergeSearchPanelColors,
} from '@hiyve/react-intelligence';

<SearchPanel
  userId="user-123"
  labels={mergeSearchPanelLabels({ placeholder: 'Search meetings...' })}
  colors={mergeSearchPanelColors({ primary: '#1976d2' })}
/>
Copy

Scorecard Panel

import {
  ScorecardPanel,
  mergeScorecardPanelLabels,
  mergeScorecardPanelColors,
} from '@hiyve/react-intelligence';

<ScorecardPanel
  variant="sales"
  transcript={transcript}
  userId="user-123"
  labels={mergeScorecardPanelLabels({ title: 'Call Score' })}
  colors={mergeScorecardPanelColors({ high: '#4caf50' })}
/>
Copy

Coaching Overlay

import {
  CoachingOverlay,
  TalkRatioBar,
  TopicTracker,
  mergeCoachingOverlayLabels,
  mergeCoachingOverlayColors,
} from '@hiyve/react-intelligence';

<CoachingOverlay
  hints={hints}
  labels={mergeCoachingOverlayLabels({ dismiss: 'Got it' })}
  colors={mergeCoachingOverlayColors({ hint: '#fff3e0' })}
/>
<TalkRatioBar talkRatio={0.65} />
<TopicTracker currentTopic="Budget" topicShifts={shifts} />
Copy

Conversation List

import {
  ConversationList,
  mergeConversationListLabels,
  mergeConversationListColors,
} from '@hiyve/react-intelligence';

<ConversationList
  labels={mergeConversationListLabels({ title: 'Past Conversations' })}
  colors={mergeConversationListColors({ selected: '#e3f2fd' })}
/>
Copy

Agent Assistant

import {
  AgentConversationView,
  mergeAgentAssistantLabels,
  mergeAgentAssistantColors,
  mergeAgentAssistantStyles,
} from '@hiyve/react-intelligence';

<AgentConversationView
  messages={messages}
  labels={mergeAgentAssistantLabels({ thinking: 'Processing...' })}
  colors={mergeAgentAssistantColors({ accent: '#7c3aed' })}
  styles={mergeAgentAssistantStyles({ borderRadius: 8 })}
/>
Copy

Room Dashboard

import {
  RoomDashboard,
  mergeRoomDashboardLabels,
  mergeRoomDashboardColors,
  mergeRoomDashboardStyles,
} from '@hiyve/react-intelligence';

<RoomDashboard
  roomId="room-123"
  userId="user-123"
  labels={mergeRoomDashboardLabels({ assistantCard: 'AI Helper' })}
  colors={mergeRoomDashboardColors({ cardBackground: '#1a1a2e' })}
  styles={mergeRoomDashboardStyles({ borderRadius: 16, gridSpacing: 3 })}
/>
Copy

CloudProvider Props

Key Types

Agent Assistant Types

Room Dashboard Types

Naming Conventions

Utility Naming

Utility functions are prefixed by feature area to avoid naming conflicts when importing multiple features. For example, summaryFormatDuration and schedulingFormatDuration both format durations but for different contexts. Similarly, summaryGetPriorityColor and alertsGetPriorityColor return priority colors using each feature's color scheme. The prefix tells you which feature area the utility belongs to: summary*, alerts*, mood*, sentiment*, scheduling*, agent*, calendar*.

Type Aliases

Several common type names (e.g. ActionItem, MeetingAlert, Meeting, EmotionType) appear in multiple feature areas. To avoid collisions, import them using the prefixed aliases below:

Utilities

Re-exported from @hiyve/cloud for convenience. These are available without importing @hiyve/cloud directly.

Cloud Client

Validation

Mood Bridge

Cloud Defaults

Formatting Utilities

Utilities exported from individual component modules:

Heatmap Utilities

Functions for processing mood data into heatmap visualizations.

Scheduling Utilities

Summary Utilities

Alert Utilities

Mood Utilities

Sentiment Utilities

Requirements

• React 18+
• @hiyve/react with HiyveProvider (for room-connected features)
• @hiyve/cloud (CloudClient — must be installed as a peer dependency)
• @mui/material v5 or v6
• @mui/icons-material v5 or v6
• @emotion/react and @emotion/styled

License

Proprietary - Hiyve SDK