Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

@bagdock/hive-react

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@bagdock/hive-react - npm Package Compare versions

Comparing version
0.1.5
 to
0.2.0
+506
-73
dist/index.d.mts

@@ -0,98 +1,531 @@

import { ClassValue } from 'clsx';
import * as react_jsx_runtime from 'react/jsx-runtime';
import React from 'react';
import { AuthAdapterConfig, BagdockHive } from '@bagdock/hive';
export { AccessCode, AuthAdapterConfig, AuthProvider, BookingParams, BookingResult, ChatMessage, EmbedScope, HiveUnit } from '@bagdock/hive';
import * as React$1 from 'react';
interface HiveAppearance {
theme?: 'light' | 'dark' | 'auto';
variables?: HiveThemeVariables;
elements?: Partial<HiveElementStyles>;
type AIAssistantContext = "dashboard" | "payments" | "access" | "help" | "move_out" | "general";
interface AIAssistantSuggestion {
id: string;
type: "action" | "info" | "upsell" | "warning";
title: string;
description: string;
icon?: string;
actionLabel?: string;
actionUrl?: string;
dismissible: boolean;
priority: number;
context: AIAssistantContext;
expiresAt?: string;
}
interface HiveThemeVariables {
colorPrimary?: string;
colorPrimaryHover?: string;
colorBackground?: string;
colorSurface?: string;
colorText?: string;
colorTextSecondary?: string;
colorBorder?: string;
colorSuccess?: string;
colorWarning?: string;
colorDanger?: string;
fontFamily?: string;
fontFamilyMono?: string;
borderRadius?: string;
borderRadiusLg?: string;
shadow?: string;
shadowLg?: string;
interface AIMessageSource {
title: string;
url: string;
}
interface HiveElementStyles {
card?: string;
button?: string;
input?: string;
interface AIMessagePart {
type: "text" | "tool-invocation";
text?: string;
state?: "call" | "partial-call" | "result";
toolCallId?: string;
toolName?: string;
args?: Record<string, unknown>;
output?: unknown;
}
interface AIRoutingMetadata {
agent: string;
confidence: number;
reasoning: string;
modelTier: string;
}
interface AIMessageMetadata {
routing?: AIRoutingMetadata;
sessionId?: string;
}
interface AIMessage {
id: string;
role: "user" | "assistant";
content: string;
timestamp: string;
suggestions?: AIAssistantSuggestion[];
actions?: AIAction[];
sources?: AIMessageSource[];
parts?: AIMessagePart[];
metadata?: AIMessageMetadata;
}
interface AIAction {
id: string;
label: string;
type: "navigate" | "action" | "confirm";
payload: Record<string, unknown>;
}
interface AgentNotification {
count: number;
summary: string;
}
interface RecentThread {
id: string;
preview: string;
agentRole: string;
createdAt: string;
messageCount: number;
}
interface HistorySession {
id: string;
agentRole: string;
status: string;
messageCount: number;
createdAt: string;
preview: string;
}
type DashboardRole = "customer" | "operator_owner" | "facility_manager" | "admin";
interface SearchFacility {
id: string;
name: string;
address?: string;
city?: string;
price?: number;
currency?: string;
rating?: number;
reviewCount?: number;
latitude?: number;
longitude?: number;
imageUrl?: string;
features?: string[];
}
interface PricingPlan {
id: string;
name: string;
pricePerMonth: number;
badge?: string;
avatar?: string;
chatBubble?: string;
chatInput?: string;
}
interface ResolvedTheme {
variables: Required<HiveThemeVariables>;
elements: HiveElementStyles;
isDark: boolean;
interface AddOn {
id: string;
name: string;
description: string;
pricePerMonth: number;
}
declare const DEFAULT_THEME: Required<HiveThemeVariables>;
interface ProtectionPlan {
id: string;
name: string;
description: string;
coverAmount: number;
pricePerMonth: number;
features: string[];
isRecommended?: boolean;
}
interface AuthResult {
token: string;
userId: string;
contactId?: string;
displayName?: string;
}
interface SendOtpParams {
method: "phone" | "email";
phone?: string;
email?: string;
}
interface SendOtpResult {
methodId: string;
}
interface VerifyOtpParams {
methodId: string;
code: string;
method: "phone" | "email";
}
interface VerifyOtpResult extends AuthResult {
}
interface CountryCode {
code: string;
flag: string;
name: string;
}
type ToolResultRenderer = (toolName: string, output: unknown, onSendMessage?: (msg: string) => void) => React.ReactNode | null;
interface HiveProviderProps {
apiKey?: string;
embedToken?: string;
baseUrl?: string;
operatorId?: string;
auth?: AuthAdapterConfig;
appearance?: HiveAppearance;
children: React.ReactNode;
declare function cn(...inputs: ClassValue[]): string;
declare function formatTimeAgo(dateStr: string): string;
declare function currencySymbol(currency: string): string;
declare const TOOL_STEP_LABELS: Record<string, string>;
declare const HIDDEN_TOOL_STEPS: Set<string>;
declare function isToolDone(state?: string): boolean;
declare function isToolError(state?: string): boolean;
declare function ToolExecutionStep({ toolName, state, children, }: {
toolName: string;
state?: string;
children?: React$1.ReactNode;
}): react_jsx_runtime.JSX.Element;
declare function QuickReplyChips({ choices, onSelect, disabled: externalDisabled, }: {
choices: {
label: string;
value: string;
}[];
onSelect?: (value: string) => void;
disabled?: boolean;
}): react_jsx_runtime.JSX.Element;
declare function VerificationCard({ url, sessionRef, onVerified, pollingUrl, }: {
url?: string | null;
sessionRef?: string | null;
onVerified?: () => void;
pollingUrl?: string;
}): react_jsx_runtime.JSX.Element | null;
declare function ChatMarkdown({ content }: {
content: string;
}): react_jsx_runtime.JSX.Element;
declare const AGENT_LABELS: Record<string, string>;
declare function ReasoningBlock({ routing }: {
routing: AIRoutingMetadata;
}): react_jsx_runtime.JSX.Element;
interface ChatMessageProps {
message: AIMessage;
onSendMessage?: (message: string) => void;
renderToolResult?: ToolResultRenderer;
}
declare function HiveProvider({ apiKey, embedToken, baseUrl, operatorId, auth, appearance, children, }: HiveProviderProps): react_jsx_runtime.JSX.Element;
declare function ChatMessage({ message, onSendMessage, renderToolResult }: ChatMessageProps): react_jsx_runtime.JSX.Element;
declare function LoadingMessage(): react_jsx_runtime.JSX.Element;
interface HiveChatProps {
/** Initial greeting message from the bot */
greeting?: string;
/** Placeholder text for the input */
declare function AgentRentalsToolCard({ data }: {
data: Record<string, unknown>;
}): react_jsx_runtime.JSX.Element;
declare function PaymentSummaryCard({ data }: {
data: Record<string, unknown>;
}): react_jsx_runtime.JSX.Element;
declare function DashboardSummaryCard({ data }: {
data: Record<string, unknown>;
}): react_jsx_runtime.JSX.Element;
declare function LoyaltyCard({ data }: {
data: Record<string, unknown>;
}): react_jsx_runtime.JSX.Element;
declare function AccountProfileCard({ data }: {
data: Record<string, unknown>;
}): react_jsx_runtime.JSX.Element;
declare function defaultRenderToolResult(toolName: string, output: unknown): React$1.ReactNode | null;
interface ComposerProps {
value: string;
onChange: (v: string) => void;
onSubmit: (e: React$1.FormEvent) => void;
onKeyDown: (e: React$1.KeyboardEvent<HTMLTextAreaElement>) => void;
isLoading?: boolean;
placeholder?: string;
/** Bot name displayed in the chat */
inputRef?: React$1.Ref<HTMLTextAreaElement>;
className?: string;
}
declare function Composer({ value, onChange, onSubmit, onKeyDown, isLoading, placeholder, inputRef, className, }: ComposerProps): react_jsx_runtime.JSX.Element;
declare function RecentThreadsDropdown({ threads, onSelect, onNewChat, }: {
threads: RecentThread[];
onSelect?: (sessionId: string) => void;
onNewChat?: () => void;
}): react_jsx_runtime.JSX.Element;
interface HiveChatPanelProps {
isOpen?: boolean;
onClose?: () => void;
onExpand?: () => void;
messages?: AIMessage[];
onSendMessage?: (message: string) => void;
isLoading?: boolean;
suggestions?: AIAssistantSuggestion[];
recentThreads?: RecentThread[];
onLoadThread?: (sessionId: string) => void;
onNewChat?: () => void;
botName?: string;
/** Height of the chat container */
height?: string | number;
/** Callback when a message is sent */
onMessage?: (message: string) => void;
/** CSS class name */
botSubtitle?: string;
botAvatarUrl?: string;
className?: string;
renderToolResult?: ToolResultRenderer;
}
declare function HiveChat({ greeting, placeholder, botName, height, onMessage, className, }: HiveChatProps): react_jsx_runtime.JSX.Element;
declare function HiveChatPanel({ isOpen, onClose, onExpand, messages, onSendMessage, isLoading, suggestions, recentThreads, onLoadThread, onNewChat, className, renderToolResult, }: HiveChatPanelProps): react_jsx_runtime.JSX.Element | null;
/** @deprecated Use HiveChatPanel */
declare const AIChatPanel: typeof HiveChatPanel;
interface HiveBookingProps {
facilityId?: string;
onBookingComplete?: (booking: {
interface HiveFullPageProps {
messages?: AIMessage[];
onSendMessage?: (message: string) => void;
isLoading?: boolean;
suggestions?: AIAssistantSuggestion[];
recentThreads?: {
id: string;
checkoutUrl?: string;
}) => void;
preview: string;
agentRole: string;
createdAt: string;
messageCount: number;
}[];
onLoadThread?: (sessionId: string) => void;
onNewChat?: () => void;
onCollapse?: () => void;
onClose?: () => void;
className?: string;
renderToolResult?: ToolResultRenderer;
}
declare function HiveBooking({ facilityId, onBookingComplete, className, }: HiveBookingProps): react_jsx_runtime.JSX.Element;
declare function HiveFullPage({ messages, onSendMessage, isLoading, suggestions, onCollapse, onClose, className, renderToolResult, }: HiveFullPageProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveFullPage */
declare const CoraFullPage: typeof HiveFullPage;
interface HiveAccessProps {
unitId: string;
showHistory?: boolean;
interface HiveFloatingButtonProps {
onClick?: () => void;
isOpen?: boolean;
hasUnread?: boolean;
className?: string;
}
declare function HiveAccess({ unitId, showHistory, className, }: HiveAccessProps): react_jsx_runtime.JSX.Element;
declare function HiveFloatingButton({ onClick, isOpen, hasUnread, className, }: HiveFloatingButtonProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveFloatingButton */
declare const AIFloatingButton: typeof HiveFloatingButton;
interface HiveContextValue {
client: BagdockHive | null;
theme: ResolvedTheme;
interface HiveAssistantStripProps {
suggestions?: AIAssistantSuggestion[];
onSuggestionClick?: (suggestion: AIAssistantSuggestion) => void;
onOpenChat?: () => void;
className?: string;
}
declare function HiveAssistantStrip({ suggestions, onSuggestionClick, onOpenChat, className, }: HiveAssistantStripProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveAssistantStrip */
declare const AssistantStrip: typeof HiveAssistantStrip;
interface HiveAssistantPanelProps {
context?: string;
suggestions?: AIAssistantSuggestion[];
isExpanded?: boolean;
onExpand?: () => void;
onCollapse?: () => void;
onSuggestionClick?: (suggestion: AIAssistantSuggestion) => void;
className?: string;
}
declare function HiveAssistantPanel({ suggestions, isExpanded, onExpand, onCollapse, onSuggestionClick, className, }: HiveAssistantPanelProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveAssistantPanel */
declare const AIAssistantPanel: typeof HiveAssistantPanel;
interface HiveInlineHintProps {
text?: string;
onAsk?: () => void;
className?: string;
}
declare function HiveInlineHint({ text, onAsk, className, }: HiveInlineHintProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveInlineHint */
declare const InlineSmartHint: typeof HiveInlineHint;
declare function HiveBadge({ className }: {
className?: string;
}): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveBadge */
declare const AIBadge: typeof HiveBadge;
interface HiveDashboardPromptProps {
userName: string;
dashboardRole: DashboardRole;
hideGreeting?: boolean;
briefing?: string;
isLoading?: boolean;
context?: {
operatorName?: string;
facilityName?: string;
};
suggestions?: AIAssistantSuggestion[];
agentNotifications?: AgentNotification;
onSendMessage?: (message: string) => void;
onSuggestionClick?: (suggestion: AIAssistantSuggestion) => void;
onNotificationClick?: () => void;
onExpandChat?: () => void;
className?: string;
}
declare function HiveDashboardPrompt({ userName, dashboardRole, hideGreeting, briefing, isLoading, suggestions, agentNotifications, onSendMessage, onSuggestionClick, onNotificationClick, onExpandChat, className, }: HiveDashboardPromptProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveDashboardPrompt */
declare const DashboardPromptBox: typeof HiveDashboardPrompt;
interface HiveSearchViewProps {
messages?: AIMessage[];
onSendMessage?: (message: string) => void;
isLoading?: boolean;
suggestions?: AIAssistantSuggestion[];
facilities?: SearchFacility[];
selectedFacility?: SearchFacility | null;
onSelectFacility?: (facility: SearchFacility) => void;
onViewDetails?: (facilityId: string) => void;
onRentalWithCora?: (facilityId: string) => void;
onCollapse?: () => void;
onSwitchToFullSearch?: () => void;
renderMap?: (props: {
facilities: SearchFacility[];
selectedFacility: SearchFacility | null;
onSelect: (facility: SearchFacility) => void;
}) => React$1.ReactNode;
className?: string;
}
declare function HiveSearchView({ messages, onSendMessage, isLoading, facilities, selectedFacility, onSelectFacility, onViewDetails, onRentalWithCora, onCollapse, onSwitchToFullSearch, renderMap, className, }: HiveSearchViewProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveSearchView */
declare const CoraSearchView: typeof HiveSearchView;
interface HiveHistoryPanelProps {
sessions: HistorySession[];
onBack: () => void;
onSelectSession: (sessionId: string) => void;
onDeleteSession?: (sessionId: string) => void;
}
declare function HiveHistoryPanel({ sessions, onBack, onSelectSession }: HiveHistoryPanelProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveHistoryPanel */
declare const AgentHistoryPanel: typeof HiveHistoryPanel;
interface HiveInlineAuthProps {
reason?: string;
onAuthSuccess: (data: AuthResult) => void;
onSendOtp: (params: SendOtpParams) => Promise<SendOtpResult>;
onVerifyOtp: (params: VerifyOtpParams) => Promise<VerifyOtpResult>;
defaultCountryCode?: string;
countryCodes?: CountryCode[];
}
declare function HiveInlineAuth({ reason, onAuthSuccess, onSendOtp, onVerifyOtp, defaultCountryCode, countryCodes, }: HiveInlineAuthProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveInlineAuth */
declare const InlineChatAuth: typeof HiveInlineAuth;
interface HivePostRentalCardProps {
facilityName: string;
unitSize: string;
monthlyPrice: number;
currency: string;
identityVerified: boolean;
rentalFlowType: "rent" | "reserve";
addOnsDeclined: boolean;
dashboardUrl: string;
onVerifyIdentity?: () => void;
onManageUnit?: () => void;
}
declare function HivePostRentalCard({ facilityName, unitSize, monthlyPrice, currency, identityVerified, rentalFlowType, addOnsDeclined, dashboardUrl, onVerifyIdentity, onManageUnit, }: HivePostRentalCardProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HivePostRentalCard */
declare const PostRentalCard: typeof HivePostRentalCard;
type CheckoutStep = "summary" | "contact" | "identity" | "protection" | "payment" | "complete";
interface HiveCheckoutFlowProps {
facilityId: string;
facilityName: string;
unitTypeId: string;
unitSize: string;
monthlyPrice: number;
currency?: string;
pinned?: boolean;
userEmail?: string;
userName?: string;
userPhone?: string;
availablePlans?: PricingPlan[];
selectedPlanId?: string | null;
onPlanChange?: (planId: string) => void;
availableAddOns?: AddOn[];
selectedAddOnIds?: string[];
onAddOnsChange?: (ids: string[]) => void;
rentalType?: "rent" | "reserve";
identityVerified?: boolean;
protectionPlans?: ProtectionPlan[];
preSelectedProtectionPlanId?: string | null;
preSelectedHasOwnInsurance?: boolean;
initialStep?: CheckoutStep;
initialCompletedSteps?: CheckoutStep[];
onInitCheckoutSession?: (params: {
facilityId: string;
unitTypeId: string;
amountPence: number;
currency: string;
}) => Promise<{
success: boolean;
sessionId?: string;
error?: string;
}>;
onCreateIdentitySession?: (params: {
email?: string;
name?: string;
}) => Promise<{
success: boolean;
url?: string;
sessionRef?: string;
error?: string;
}>;
onCheckVerificationStatus?: (sessionRef?: string) => Promise<{
status: string;
}>;
onCreatePaymentIntent?: (params: {
amountPence: number;
currency: string;
checkoutSessionId?: string;
customerEmail?: string;
rentalType?: string;
}) => Promise<{
success: boolean;
clientSecret?: string;
error?: string;
}>;
/** Render prop for the payment form (Stripe Elements or custom) */
renderPaymentForm?: (props: {
clientSecret: string;
totalLabel: string;
onSuccess: () => void;
onError: (msg: string) => void;
}) => React$1.ReactNode;
onMinimize?: () => void;
onStepChange?: (step: CheckoutStep, completedSteps: CheckoutStep[]) => void;
onComplete?: () => void;
onCancel?: () => void;
onBackToChat?: () => void;
onSendMessage?: (text: string) => void;
}
declare function HiveCheckoutFlow({ facilityId, facilityName, unitTypeId, unitSize, monthlyPrice, currency, pinned, userEmail, userName, userPhone, availablePlans, selectedPlanId, onPlanChange, availableAddOns, selectedAddOnIds, onAddOnsChange, rentalType: rentalTypeProp, identityVerified, protectionPlans, preSelectedProtectionPlanId, preSelectedHasOwnInsurance, initialStep, initialCompletedSteps, onInitCheckoutSession, onCreateIdentitySession, onCheckVerificationStatus, onCreatePaymentIntent, renderPaymentForm, onMinimize, onStepChange, onComplete, onCancel, onBackToChat, onSendMessage, }: HiveCheckoutFlowProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveCheckoutFlow */
declare const AgentCheckoutFlow: typeof HiveCheckoutFlow;
interface HiveProviderConfig {
/** Custom renderer for tool results — takes precedence over built-in cards */
renderToolResult?: ToolResultRenderer;
/** Operator-specific bot name */
botName?: string;
/** Operator branding color (used for accent in some components) */
accentColor?: string;
}
declare function HiveProvider({ children, ...config }: HiveProviderConfig & {
children: React$1.ReactNode;
}): react_jsx_runtime.JSX.Element;
declare function useHiveConfig(): HiveProviderConfig;
interface UseHiveChatConfig {
/** Hive API key (embed key or restricted key) */
apiKey: string;
/** Operator ID for multi-tenant resolution */
operatorId?: string;
embedToken?: string;
/** Base URL override for local development (e.g., ngrok tunnel) */
baseUrl?: string;
/** Initial messages to pre-populate */
initialMessages?: AIMessage[];
/** Callback when session ID is resolved from the first response */
onSessionId?: (sessionId: string) => void;
/** Callback when the current agent changes */
onAgentChange?: (agent: string) => void;
}
declare function useHive(): HiveContextValue;
declare function useHiveClient(): BagdockHive;
interface UseHiveChatReturn {
messages: AIMessage[];
isLoading: boolean;
error: string | null;
sessionId: string | null;
currentAgent: string | null;
sendMessage: (text: string) => void;
clearMessages: () => void;
setMessages: React$1.Dispatch<React$1.SetStateAction<AIMessage[]>>;
}
/**
* Hook that wraps the Vercel AI SDK `useChat` with HiveChatTransport.
*
* Requires `@bagdock/hive` and `@ai-sdk/react` as peer dependencies.
* When those are not installed, this hook throws a helpful error.
*
* Usage:
* ```tsx
* import { useHiveChat } from '@bagdock/hive-react'
*
* function ChatPage() {
* const { messages, sendMessage, isLoading } = useHiveChat({
* apiKey: 'ek_live_...',
* operatorId: 'op_...',
* })
* // ...
* }
* ```
*/
declare function useHiveChat({ apiKey, operatorId, baseUrl, initialMessages, onSessionId, onAgentChange, }: UseHiveChatConfig): UseHiveChatReturn;
export { DEFAULT_THEME, HiveAccess, type HiveAccessProps, type HiveAppearance, HiveBooking, type HiveBookingProps, HiveChat, type HiveChatProps, type HiveContextValue, type HiveElementStyles, HiveProvider, type HiveProviderProps, type HiveThemeVariables, type ResolvedTheme, useHive, useHiveClient };
export { AGENT_LABELS, type AIAction, type AIAssistantContext, AIAssistantPanel, type AIAssistantSuggestion, AIBadge, AIChatPanel, AIFloatingButton, type AIMessage, type AIMessageMetadata, type AIMessagePart, type AIMessageSource, type AIRoutingMetadata, AccountProfileCard, type AddOn, AgentCheckoutFlow, AgentHistoryPanel, type AgentNotification, AgentRentalsToolCard, AssistantStrip, type AuthResult, ChatMarkdown, ChatMessage, type ChatMessageProps, Composer, type ComposerProps, CoraFullPage, CoraSearchView, type CountryCode, DashboardPromptBox, type DashboardRole, DashboardSummaryCard, HIDDEN_TOOL_STEPS, type HistorySession, HiveAssistantPanel, type HiveAssistantPanelProps, HiveAssistantStrip, type HiveAssistantStripProps, HiveBadge, HiveChatPanel, type HiveChatPanelProps, HiveCheckoutFlow, type HiveCheckoutFlowProps, HiveDashboardPrompt, type HiveDashboardPromptProps, HiveFloatingButton, type HiveFloatingButtonProps, HiveFullPage, type HiveFullPageProps, HiveHistoryPanel, type HiveHistoryPanelProps, HiveInlineAuth, type HiveInlineAuthProps, HiveInlineHint, type HiveInlineHintProps, HivePostRentalCard, type HivePostRentalCardProps, HiveProvider, type HiveProviderConfig, HiveSearchView, type HiveSearchViewProps, InlineChatAuth, InlineSmartHint, LoadingMessage, LoyaltyCard, PaymentSummaryCard, PostRentalCard, type PricingPlan, type ProtectionPlan, QuickReplyChips, ReasoningBlock, type RecentThread, RecentThreadsDropdown, type SearchFacility, type SendOtpParams, type SendOtpResult, TOOL_STEP_LABELS, ToolExecutionStep, type ToolResultRenderer, type UseHiveChatConfig, type UseHiveChatReturn, VerificationCard, type VerifyOtpParams, type VerifyOtpResult, cn, currencySymbol, defaultRenderToolResult, formatTimeAgo, isToolDone, isToolError, useHiveChat, useHiveConfig };
+506
-73
dist/index.d.ts

@@ -0,98 +1,531 @@

import { ClassValue } from 'clsx';
import * as react_jsx_runtime from 'react/jsx-runtime';
import React from 'react';
import { AuthAdapterConfig, BagdockHive } from '@bagdock/hive';
export { AccessCode, AuthAdapterConfig, AuthProvider, BookingParams, BookingResult, ChatMessage, EmbedScope, HiveUnit } from '@bagdock/hive';
import * as React$1 from 'react';
interface HiveAppearance {
theme?: 'light' | 'dark' | 'auto';
variables?: HiveThemeVariables;
elements?: Partial<HiveElementStyles>;
type AIAssistantContext = "dashboard" | "payments" | "access" | "help" | "move_out" | "general";
interface AIAssistantSuggestion {
id: string;
type: "action" | "info" | "upsell" | "warning";
title: string;
description: string;
icon?: string;
actionLabel?: string;
actionUrl?: string;
dismissible: boolean;
priority: number;
context: AIAssistantContext;
expiresAt?: string;
}
interface HiveThemeVariables {
colorPrimary?: string;
colorPrimaryHover?: string;
colorBackground?: string;
colorSurface?: string;
colorText?: string;
colorTextSecondary?: string;
colorBorder?: string;
colorSuccess?: string;
colorWarning?: string;
colorDanger?: string;
fontFamily?: string;
fontFamilyMono?: string;
borderRadius?: string;
borderRadiusLg?: string;
shadow?: string;
shadowLg?: string;
interface AIMessageSource {
title: string;
url: string;
}
interface HiveElementStyles {
card?: string;
button?: string;
input?: string;
interface AIMessagePart {
type: "text" | "tool-invocation";
text?: string;
state?: "call" | "partial-call" | "result";
toolCallId?: string;
toolName?: string;
args?: Record<string, unknown>;
output?: unknown;
}
interface AIRoutingMetadata {
agent: string;
confidence: number;
reasoning: string;
modelTier: string;
}
interface AIMessageMetadata {
routing?: AIRoutingMetadata;
sessionId?: string;
}
interface AIMessage {
id: string;
role: "user" | "assistant";
content: string;
timestamp: string;
suggestions?: AIAssistantSuggestion[];
actions?: AIAction[];
sources?: AIMessageSource[];
parts?: AIMessagePart[];
metadata?: AIMessageMetadata;
}
interface AIAction {
id: string;
label: string;
type: "navigate" | "action" | "confirm";
payload: Record<string, unknown>;
}
interface AgentNotification {
count: number;
summary: string;
}
interface RecentThread {
id: string;
preview: string;
agentRole: string;
createdAt: string;
messageCount: number;
}
interface HistorySession {
id: string;
agentRole: string;
status: string;
messageCount: number;
createdAt: string;
preview: string;
}
type DashboardRole = "customer" | "operator_owner" | "facility_manager" | "admin";
interface SearchFacility {
id: string;
name: string;
address?: string;
city?: string;
price?: number;
currency?: string;
rating?: number;
reviewCount?: number;
latitude?: number;
longitude?: number;
imageUrl?: string;
features?: string[];
}
interface PricingPlan {
id: string;
name: string;
pricePerMonth: number;
badge?: string;
avatar?: string;
chatBubble?: string;
chatInput?: string;
}
interface ResolvedTheme {
variables: Required<HiveThemeVariables>;
elements: HiveElementStyles;
isDark: boolean;
interface AddOn {
id: string;
name: string;
description: string;
pricePerMonth: number;
}
declare const DEFAULT_THEME: Required<HiveThemeVariables>;
interface ProtectionPlan {
id: string;
name: string;
description: string;
coverAmount: number;
pricePerMonth: number;
features: string[];
isRecommended?: boolean;
}
interface AuthResult {
token: string;
userId: string;
contactId?: string;
displayName?: string;
}
interface SendOtpParams {
method: "phone" | "email";
phone?: string;
email?: string;
}
interface SendOtpResult {
methodId: string;
}
interface VerifyOtpParams {
methodId: string;
code: string;
method: "phone" | "email";
}
interface VerifyOtpResult extends AuthResult {
}
interface CountryCode {
code: string;
flag: string;
name: string;
}
type ToolResultRenderer = (toolName: string, output: unknown, onSendMessage?: (msg: string) => void) => React.ReactNode | null;
interface HiveProviderProps {
apiKey?: string;
embedToken?: string;
baseUrl?: string;
operatorId?: string;
auth?: AuthAdapterConfig;
appearance?: HiveAppearance;
children: React.ReactNode;
declare function cn(...inputs: ClassValue[]): string;
declare function formatTimeAgo(dateStr: string): string;
declare function currencySymbol(currency: string): string;
declare const TOOL_STEP_LABELS: Record<string, string>;
declare const HIDDEN_TOOL_STEPS: Set<string>;
declare function isToolDone(state?: string): boolean;
declare function isToolError(state?: string): boolean;
declare function ToolExecutionStep({ toolName, state, children, }: {
toolName: string;
state?: string;
children?: React$1.ReactNode;
}): react_jsx_runtime.JSX.Element;
declare function QuickReplyChips({ choices, onSelect, disabled: externalDisabled, }: {
choices: {
label: string;
value: string;
}[];
onSelect?: (value: string) => void;
disabled?: boolean;
}): react_jsx_runtime.JSX.Element;
declare function VerificationCard({ url, sessionRef, onVerified, pollingUrl, }: {
url?: string | null;
sessionRef?: string | null;
onVerified?: () => void;
pollingUrl?: string;
}): react_jsx_runtime.JSX.Element | null;
declare function ChatMarkdown({ content }: {
content: string;
}): react_jsx_runtime.JSX.Element;
declare const AGENT_LABELS: Record<string, string>;
declare function ReasoningBlock({ routing }: {
routing: AIRoutingMetadata;
}): react_jsx_runtime.JSX.Element;
interface ChatMessageProps {
message: AIMessage;
onSendMessage?: (message: string) => void;
renderToolResult?: ToolResultRenderer;
}
declare function HiveProvider({ apiKey, embedToken, baseUrl, operatorId, auth, appearance, children, }: HiveProviderProps): react_jsx_runtime.JSX.Element;
declare function ChatMessage({ message, onSendMessage, renderToolResult }: ChatMessageProps): react_jsx_runtime.JSX.Element;
declare function LoadingMessage(): react_jsx_runtime.JSX.Element;
interface HiveChatProps {
/** Initial greeting message from the bot */
greeting?: string;
/** Placeholder text for the input */
declare function AgentRentalsToolCard({ data }: {
data: Record<string, unknown>;
}): react_jsx_runtime.JSX.Element;
declare function PaymentSummaryCard({ data }: {
data: Record<string, unknown>;
}): react_jsx_runtime.JSX.Element;
declare function DashboardSummaryCard({ data }: {
data: Record<string, unknown>;
}): react_jsx_runtime.JSX.Element;
declare function LoyaltyCard({ data }: {
data: Record<string, unknown>;
}): react_jsx_runtime.JSX.Element;
declare function AccountProfileCard({ data }: {
data: Record<string, unknown>;
}): react_jsx_runtime.JSX.Element;
declare function defaultRenderToolResult(toolName: string, output: unknown): React$1.ReactNode | null;
interface ComposerProps {
value: string;
onChange: (v: string) => void;
onSubmit: (e: React$1.FormEvent) => void;
onKeyDown: (e: React$1.KeyboardEvent<HTMLTextAreaElement>) => void;
isLoading?: boolean;
placeholder?: string;
/** Bot name displayed in the chat */
inputRef?: React$1.Ref<HTMLTextAreaElement>;
className?: string;
}
declare function Composer({ value, onChange, onSubmit, onKeyDown, isLoading, placeholder, inputRef, className, }: ComposerProps): react_jsx_runtime.JSX.Element;
declare function RecentThreadsDropdown({ threads, onSelect, onNewChat, }: {
threads: RecentThread[];
onSelect?: (sessionId: string) => void;
onNewChat?: () => void;
}): react_jsx_runtime.JSX.Element;
interface HiveChatPanelProps {
isOpen?: boolean;
onClose?: () => void;
onExpand?: () => void;
messages?: AIMessage[];
onSendMessage?: (message: string) => void;
isLoading?: boolean;
suggestions?: AIAssistantSuggestion[];
recentThreads?: RecentThread[];
onLoadThread?: (sessionId: string) => void;
onNewChat?: () => void;
botName?: string;
/** Height of the chat container */
height?: string | number;
/** Callback when a message is sent */
onMessage?: (message: string) => void;
/** CSS class name */
botSubtitle?: string;
botAvatarUrl?: string;
className?: string;
renderToolResult?: ToolResultRenderer;
}
declare function HiveChat({ greeting, placeholder, botName, height, onMessage, className, }: HiveChatProps): react_jsx_runtime.JSX.Element;
declare function HiveChatPanel({ isOpen, onClose, onExpand, messages, onSendMessage, isLoading, suggestions, recentThreads, onLoadThread, onNewChat, className, renderToolResult, }: HiveChatPanelProps): react_jsx_runtime.JSX.Element | null;
/** @deprecated Use HiveChatPanel */
declare const AIChatPanel: typeof HiveChatPanel;
interface HiveBookingProps {
facilityId?: string;
onBookingComplete?: (booking: {
interface HiveFullPageProps {
messages?: AIMessage[];
onSendMessage?: (message: string) => void;
isLoading?: boolean;
suggestions?: AIAssistantSuggestion[];
recentThreads?: {
id: string;
checkoutUrl?: string;
}) => void;
preview: string;
agentRole: string;
createdAt: string;
messageCount: number;
}[];
onLoadThread?: (sessionId: string) => void;
onNewChat?: () => void;
onCollapse?: () => void;
onClose?: () => void;
className?: string;
renderToolResult?: ToolResultRenderer;
}
declare function HiveBooking({ facilityId, onBookingComplete, className, }: HiveBookingProps): react_jsx_runtime.JSX.Element;
declare function HiveFullPage({ messages, onSendMessage, isLoading, suggestions, onCollapse, onClose, className, renderToolResult, }: HiveFullPageProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveFullPage */
declare const CoraFullPage: typeof HiveFullPage;
interface HiveAccessProps {
unitId: string;
showHistory?: boolean;
interface HiveFloatingButtonProps {
onClick?: () => void;
isOpen?: boolean;
hasUnread?: boolean;
className?: string;
}
declare function HiveAccess({ unitId, showHistory, className, }: HiveAccessProps): react_jsx_runtime.JSX.Element;
declare function HiveFloatingButton({ onClick, isOpen, hasUnread, className, }: HiveFloatingButtonProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveFloatingButton */
declare const AIFloatingButton: typeof HiveFloatingButton;
interface HiveContextValue {
client: BagdockHive | null;
theme: ResolvedTheme;
interface HiveAssistantStripProps {
suggestions?: AIAssistantSuggestion[];
onSuggestionClick?: (suggestion: AIAssistantSuggestion) => void;
onOpenChat?: () => void;
className?: string;
}
declare function HiveAssistantStrip({ suggestions, onSuggestionClick, onOpenChat, className, }: HiveAssistantStripProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveAssistantStrip */
declare const AssistantStrip: typeof HiveAssistantStrip;
interface HiveAssistantPanelProps {
context?: string;
suggestions?: AIAssistantSuggestion[];
isExpanded?: boolean;
onExpand?: () => void;
onCollapse?: () => void;
onSuggestionClick?: (suggestion: AIAssistantSuggestion) => void;
className?: string;
}
declare function HiveAssistantPanel({ suggestions, isExpanded, onExpand, onCollapse, onSuggestionClick, className, }: HiveAssistantPanelProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveAssistantPanel */
declare const AIAssistantPanel: typeof HiveAssistantPanel;
interface HiveInlineHintProps {
text?: string;
onAsk?: () => void;
className?: string;
}
declare function HiveInlineHint({ text, onAsk, className, }: HiveInlineHintProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveInlineHint */
declare const InlineSmartHint: typeof HiveInlineHint;
declare function HiveBadge({ className }: {
className?: string;
}): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveBadge */
declare const AIBadge: typeof HiveBadge;
interface HiveDashboardPromptProps {
userName: string;
dashboardRole: DashboardRole;
hideGreeting?: boolean;
briefing?: string;
isLoading?: boolean;
context?: {
operatorName?: string;
facilityName?: string;
};
suggestions?: AIAssistantSuggestion[];
agentNotifications?: AgentNotification;
onSendMessage?: (message: string) => void;
onSuggestionClick?: (suggestion: AIAssistantSuggestion) => void;
onNotificationClick?: () => void;
onExpandChat?: () => void;
className?: string;
}
declare function HiveDashboardPrompt({ userName, dashboardRole, hideGreeting, briefing, isLoading, suggestions, agentNotifications, onSendMessage, onSuggestionClick, onNotificationClick, onExpandChat, className, }: HiveDashboardPromptProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveDashboardPrompt */
declare const DashboardPromptBox: typeof HiveDashboardPrompt;
interface HiveSearchViewProps {
messages?: AIMessage[];
onSendMessage?: (message: string) => void;
isLoading?: boolean;
suggestions?: AIAssistantSuggestion[];
facilities?: SearchFacility[];
selectedFacility?: SearchFacility | null;
onSelectFacility?: (facility: SearchFacility) => void;
onViewDetails?: (facilityId: string) => void;
onRentalWithCora?: (facilityId: string) => void;
onCollapse?: () => void;
onSwitchToFullSearch?: () => void;
renderMap?: (props: {
facilities: SearchFacility[];
selectedFacility: SearchFacility | null;
onSelect: (facility: SearchFacility) => void;
}) => React$1.ReactNode;
className?: string;
}
declare function HiveSearchView({ messages, onSendMessage, isLoading, facilities, selectedFacility, onSelectFacility, onViewDetails, onRentalWithCora, onCollapse, onSwitchToFullSearch, renderMap, className, }: HiveSearchViewProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveSearchView */
declare const CoraSearchView: typeof HiveSearchView;
interface HiveHistoryPanelProps {
sessions: HistorySession[];
onBack: () => void;
onSelectSession: (sessionId: string) => void;
onDeleteSession?: (sessionId: string) => void;
}
declare function HiveHistoryPanel({ sessions, onBack, onSelectSession }: HiveHistoryPanelProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveHistoryPanel */
declare const AgentHistoryPanel: typeof HiveHistoryPanel;
interface HiveInlineAuthProps {
reason?: string;
onAuthSuccess: (data: AuthResult) => void;
onSendOtp: (params: SendOtpParams) => Promise<SendOtpResult>;
onVerifyOtp: (params: VerifyOtpParams) => Promise<VerifyOtpResult>;
defaultCountryCode?: string;
countryCodes?: CountryCode[];
}
declare function HiveInlineAuth({ reason, onAuthSuccess, onSendOtp, onVerifyOtp, defaultCountryCode, countryCodes, }: HiveInlineAuthProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveInlineAuth */
declare const InlineChatAuth: typeof HiveInlineAuth;
interface HivePostRentalCardProps {
facilityName: string;
unitSize: string;
monthlyPrice: number;
currency: string;
identityVerified: boolean;
rentalFlowType: "rent" | "reserve";
addOnsDeclined: boolean;
dashboardUrl: string;
onVerifyIdentity?: () => void;
onManageUnit?: () => void;
}
declare function HivePostRentalCard({ facilityName, unitSize, monthlyPrice, currency, identityVerified, rentalFlowType, addOnsDeclined, dashboardUrl, onVerifyIdentity, onManageUnit, }: HivePostRentalCardProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HivePostRentalCard */
declare const PostRentalCard: typeof HivePostRentalCard;
type CheckoutStep = "summary" | "contact" | "identity" | "protection" | "payment" | "complete";
interface HiveCheckoutFlowProps {
facilityId: string;
facilityName: string;
unitTypeId: string;
unitSize: string;
monthlyPrice: number;
currency?: string;
pinned?: boolean;
userEmail?: string;
userName?: string;
userPhone?: string;
availablePlans?: PricingPlan[];
selectedPlanId?: string | null;
onPlanChange?: (planId: string) => void;
availableAddOns?: AddOn[];
selectedAddOnIds?: string[];
onAddOnsChange?: (ids: string[]) => void;
rentalType?: "rent" | "reserve";
identityVerified?: boolean;
protectionPlans?: ProtectionPlan[];
preSelectedProtectionPlanId?: string | null;
preSelectedHasOwnInsurance?: boolean;
initialStep?: CheckoutStep;
initialCompletedSteps?: CheckoutStep[];
onInitCheckoutSession?: (params: {
facilityId: string;
unitTypeId: string;
amountPence: number;
currency: string;
}) => Promise<{
success: boolean;
sessionId?: string;
error?: string;
}>;
onCreateIdentitySession?: (params: {
email?: string;
name?: string;
}) => Promise<{
success: boolean;
url?: string;
sessionRef?: string;
error?: string;
}>;
onCheckVerificationStatus?: (sessionRef?: string) => Promise<{
status: string;
}>;
onCreatePaymentIntent?: (params: {
amountPence: number;
currency: string;
checkoutSessionId?: string;
customerEmail?: string;
rentalType?: string;
}) => Promise<{
success: boolean;
clientSecret?: string;
error?: string;
}>;
/** Render prop for the payment form (Stripe Elements or custom) */
renderPaymentForm?: (props: {
clientSecret: string;
totalLabel: string;
onSuccess: () => void;
onError: (msg: string) => void;
}) => React$1.ReactNode;
onMinimize?: () => void;
onStepChange?: (step: CheckoutStep, completedSteps: CheckoutStep[]) => void;
onComplete?: () => void;
onCancel?: () => void;
onBackToChat?: () => void;
onSendMessage?: (text: string) => void;
}
declare function HiveCheckoutFlow({ facilityId, facilityName, unitTypeId, unitSize, monthlyPrice, currency, pinned, userEmail, userName, userPhone, availablePlans, selectedPlanId, onPlanChange, availableAddOns, selectedAddOnIds, onAddOnsChange, rentalType: rentalTypeProp, identityVerified, protectionPlans, preSelectedProtectionPlanId, preSelectedHasOwnInsurance, initialStep, initialCompletedSteps, onInitCheckoutSession, onCreateIdentitySession, onCheckVerificationStatus, onCreatePaymentIntent, renderPaymentForm, onMinimize, onStepChange, onComplete, onCancel, onBackToChat, onSendMessage, }: HiveCheckoutFlowProps): react_jsx_runtime.JSX.Element;
/** @deprecated Use HiveCheckoutFlow */
declare const AgentCheckoutFlow: typeof HiveCheckoutFlow;
interface HiveProviderConfig {
/** Custom renderer for tool results — takes precedence over built-in cards */
renderToolResult?: ToolResultRenderer;
/** Operator-specific bot name */
botName?: string;
/** Operator branding color (used for accent in some components) */
accentColor?: string;
}
declare function HiveProvider({ children, ...config }: HiveProviderConfig & {
children: React$1.ReactNode;
}): react_jsx_runtime.JSX.Element;
declare function useHiveConfig(): HiveProviderConfig;
interface UseHiveChatConfig {
/** Hive API key (embed key or restricted key) */
apiKey: string;
/** Operator ID for multi-tenant resolution */
operatorId?: string;
embedToken?: string;
/** Base URL override for local development (e.g., ngrok tunnel) */
baseUrl?: string;
/** Initial messages to pre-populate */
initialMessages?: AIMessage[];
/** Callback when session ID is resolved from the first response */
onSessionId?: (sessionId: string) => void;
/** Callback when the current agent changes */
onAgentChange?: (agent: string) => void;
}
declare function useHive(): HiveContextValue;
declare function useHiveClient(): BagdockHive;
interface UseHiveChatReturn {
messages: AIMessage[];
isLoading: boolean;
error: string | null;
sessionId: string | null;
currentAgent: string | null;
sendMessage: (text: string) => void;
clearMessages: () => void;
setMessages: React$1.Dispatch<React$1.SetStateAction<AIMessage[]>>;
}
/**
* Hook that wraps the Vercel AI SDK `useChat` with HiveChatTransport.
*
* Requires `@bagdock/hive` and `@ai-sdk/react` as peer dependencies.
* When those are not installed, this hook throws a helpful error.
*
* Usage:
* ```tsx
* import { useHiveChat } from '@bagdock/hive-react'
*
* function ChatPage() {
* const { messages, sendMessage, isLoading } = useHiveChat({
* apiKey: 'ek_live_...',
* operatorId: 'op_...',
* })
* // ...
* }
* ```
*/
declare function useHiveChat({ apiKey, operatorId, baseUrl, initialMessages, onSessionId, onAgentChange, }: UseHiveChatConfig): UseHiveChatReturn;
export { DEFAULT_THEME, HiveAccess, type HiveAccessProps, type HiveAppearance, HiveBooking, type HiveBookingProps, HiveChat, type HiveChatProps, type HiveContextValue, type HiveElementStyles, HiveProvider, type HiveProviderProps, type HiveThemeVariables, type ResolvedTheme, useHive, useHiveClient };
export { AGENT_LABELS, type AIAction, type AIAssistantContext, AIAssistantPanel, type AIAssistantSuggestion, AIBadge, AIChatPanel, AIFloatingButton, type AIMessage, type AIMessageMetadata, type AIMessagePart, type AIMessageSource, type AIRoutingMetadata, AccountProfileCard, type AddOn, AgentCheckoutFlow, AgentHistoryPanel, type AgentNotification, AgentRentalsToolCard, AssistantStrip, type AuthResult, ChatMarkdown, ChatMessage, type ChatMessageProps, Composer, type ComposerProps, CoraFullPage, CoraSearchView, type CountryCode, DashboardPromptBox, type DashboardRole, DashboardSummaryCard, HIDDEN_TOOL_STEPS, type HistorySession, HiveAssistantPanel, type HiveAssistantPanelProps, HiveAssistantStrip, type HiveAssistantStripProps, HiveBadge, HiveChatPanel, type HiveChatPanelProps, HiveCheckoutFlow, type HiveCheckoutFlowProps, HiveDashboardPrompt, type HiveDashboardPromptProps, HiveFloatingButton, type HiveFloatingButtonProps, HiveFullPage, type HiveFullPageProps, HiveHistoryPanel, type HiveHistoryPanelProps, HiveInlineAuth, type HiveInlineAuthProps, HiveInlineHint, type HiveInlineHintProps, HivePostRentalCard, type HivePostRentalCardProps, HiveProvider, type HiveProviderConfig, HiveSearchView, type HiveSearchViewProps, InlineChatAuth, InlineSmartHint, LoadingMessage, LoyaltyCard, PaymentSummaryCard, PostRentalCard, type PricingPlan, type ProtectionPlan, QuickReplyChips, ReasoningBlock, type RecentThread, RecentThreadsDropdown, type SearchFacility, type SendOtpParams, type SendOtpResult, TOOL_STEP_LABELS, ToolExecutionStep, type ToolResultRenderer, type UseHiveChatConfig, type UseHiveChatReturn, VerificationCard, type VerifyOtpParams, type VerifyOtpResult, cn, currencySymbol, defaultRenderToolResult, formatTimeAgo, isToolDone, isToolError, useHiveChat, useHiveConfig };
+23
-12
package.json
{
"name": "@bagdock/hive-react",
"version": "0.1.5",
"description": "Bagdock Hive React SDK — embeddable AI chat, booking, and access widgets",
"version": "0.2.0",
"description": "Bagdock Hive React SDK — embeddable AI chat, rental, and access widgets for self-storage",
"main": "dist/index.js",

@@ -19,4 +19,4 @@ "module": "dist/index.mjs",

"scripts": {
"build": "tsup src/index.ts --format cjs,esm --dts --clean --external react --external react-dom",
"dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react --external react-dom",
"build": "tsup src/index.ts --format cjs,esm --dts --clean --external react --external react-dom --external lucide-react",
"dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react --external react-dom --external lucide-react",
"typecheck": "tsc --noEmit"

@@ -26,12 +26,21 @@ },

"react": ">=18.0.0",
"react-dom": ">=18.0.0"
"react-dom": ">=18.0.0",
"lucide-react": ">=0.300.0"
},
"peerDependenciesMeta": {
"lucide-react": {
"optional": false
}
},
"dependencies": {
"@bagdock/hive": "^0.1.0"
"@bagdock/hive": "^0.2.0",
"clsx": "^2.1.0",
"tailwind-merge": "^2.2.0"
},
"devDependencies": {
"@types/react": "^18.2.48",
"@types/react-dom": "^18.2.18",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"lucide-react": "^0.460.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tsup": "^8.0.1",

@@ -56,5 +65,7 @@ "typescript": "^5.3.3"

"chat",
"booking",
"rental",
"widget",
"self-storage"
"self-storage",
"cora",
"agent"
],

@@ -61,0 +72,0 @@ "license": "MIT",

+392
-42
README.md

@@ -17,3 +17,3 @@ ```

React components for embedding the Bagdock Hive experience — AI chat, unit booking, and gate access widgets with built-in theming.
React components and hooks for embedding Bagdock Hive — AI chat with streaming, rich tool results, checkout flows, and operator dashboards.

@@ -26,15 +26,158 @@ [![npm version](https://img.shields.io/npm/v/@bagdock/hive-react.svg)](https://www.npmjs.com/package/@bagdock/hive-react)

```bash
npm install @bagdock/hive-react @bagdock/hive react react-dom
npm install @bagdock/hive-react @bagdock/hive react react-dom lucide-react
```
## Quick start
**Peer dependencies:** `react >= 18`, `react-dom >= 18`, `lucide-react >= 0.300`
## How it fits together
```mermaid
graph TB
subgraph Your App
Provider["&lt;HiveProvider&gt;"]
Hook["useHiveChat()"]
UI["Chat UI Components"]
end
subgraph "@bagdock/hive-react"
ChatMsg["ChatMessage"]
ToolCards["Tool Result Cards"]
Composer["Composer"]
FullPage["HiveFullPage"]
CheckoutFlow["HiveCheckoutFlow"]
end
subgraph "@bagdock/hive"
SDK["BagdockHive Client"]
end
Provider --> Hook
Hook --> SDK
SDK -- "ek_* / rk_*" --> API["Bagdock API"]
Hook --> UI
UI --> ChatMsg
UI --> ToolCards
UI --> Composer
```
### Data flow
```mermaid
sequenceDiagram
participant User
participant Component as React Component
participant Hook as useHiveChat
participant API as Bagdock API
User->>Component: Types message
Component->>Hook: sendMessage("Find storage in London")
Hook->>API: POST /hive/chat/stream
loop SSE Stream
API-->>Hook: text deltas + tool results
Hook-->>Component: messages[] with parts
Component-->>User: Renders text + facility cards + chips
end
```
---
## Use cases
### 1. Drop-in chat widget (simplest)
Add a floating AI chat button to any page in under 20 lines.
```tsx
import { HiveProvider, HiveChat, HiveBooking } from '@bagdock/hive-react'
import { useHiveChat } from '@bagdock/hive-react'
function ChatWidget() {
const { messages, sendMessage, isLoading } = useHiveChat({
apiKey: 'ek_live_...',
})
return (
<div>
{messages.map(msg => (
<div key={msg.id}>
<strong>{msg.role}:</strong> {msg.content}
</div>
))}
<input
onKeyDown={(e) => {
if (e.key === 'Enter') {
sendMessage(e.currentTarget.value)
e.currentTarget.value = ''
}
}}
placeholder="Ask anything..."
/>
</div>
)
}
```
### 2. Rich chat with tool rendering
Render facility cards, loyalty tiers, quick-reply chips, and checkout flows from tool results.
```tsx
import { useHiveChat } from '@bagdock/hive-react'
import type { AIMessagePart } from '@bagdock/hive-react'
function RichChat() {
const { messages, sendMessage, isLoading } = useHiveChat({
apiKey: 'ek_live_...',
})
return (
<div>
{messages.map(msg => (
<div key={msg.id}>
{msg.parts?.map((part, i) => {
if (part.type === 'text') return <p key={i}>{part.text}</p>
if (part.type === 'tool-invocation' && part.state === 'result') {
if (part.toolName === 'searchFacilities') {
const { facilities } = part.output as any
return facilities.map((f: any) => (
<FacilityCard key={f.id} facility={f} />
))
}
if (part.toolName === 'offerChoices') {
const { choices } = part.output as any
return choices.map((c: string) => (
<button key={c} onClick={() => sendMessage(c)}>{c}</button>
))
}
}
return null
})}
</div>
))}
</div>
)
}
```
### 3. Custom tool renderers via HiveProvider
Use `HiveProvider` to inject custom renderers for specific tool results across your entire app.
```tsx
import { HiveProvider, useHiveChat, defaultRenderToolResult } from '@bagdock/hive-react'
function App() {
return (
<HiveProvider apiKey="hk_live_..." operatorId="opreg_wisestorage">
<HiveChat />
<HiveBooking />
<HiveProvider
apiKey="ek_live_..."
renderToolResult={(toolName, output, onSend) => {
if (toolName === 'searchFacilities') {
return <MyCustomFacilityGrid results={output} />
}
return defaultRenderToolResult(toolName, output, onSend)
}}
>
<ChatPage />
</HiveProvider>

@@ -45,60 +188,267 @@ )

## Components
### 4. Full-page agent experience
### `<HiveProvider>`
Pre-built full-page layout with header, message list, composer, and tool rendering.
Wraps your app (or a subtree) to configure the Hive client and apply theming.
```tsx
import { HiveFullPage } from '@bagdock/hive-react'
function CoraPage() {
return (
<HiveFullPage
messages={messages}
onSendMessage={sendMessage}
isLoading={isLoading}
agentName="Cora"
suggestions={['Find storage near me', 'Compare prices']}
/>
)
}
```
### 5. Operator dashboard integration
Embed the AI assistant into an operator dashboard with context-aware suggestions and inline hints.
```tsx
import {
HiveAssistantStrip,
HiveAssistantPanel,
HiveInlineHint,
HiveDashboardPrompt,
} from '@bagdock/hive-react'
function OperatorDashboard() {
const [panelOpen, setPanelOpen] = useState(false)
return (
<div>
<HiveAssistantStrip
agentName="Cora"
notificationCount={3}
onClick={() => setPanelOpen(true)}
/>
<HiveInlineHint
title="3 invoices overdue"
description="Cora can help you follow up"
onAction={() => setPanelOpen(true)}
/>
{panelOpen && (
<HiveAssistantPanel
messages={messages}
onSendMessage={sendMessage}
onClose={() => setPanelOpen(false)}
/>
)}
</div>
)
}
```
### 6. Complete checkout flow
Multi-step checkout wizard with injectable callbacks for Stripe, identity verification, and protection plans.
```mermaid
stateDiagram-v2
[*] --> Auth: User not signed in
Auth --> PlanSelection: Authenticated
PlanSelection --> Terms: Plan chosen
Terms --> AddOns: Terms accepted
AddOns --> Protection: Add-ons selected
Protection --> Identity: Protection chosen
Identity --> Payment: Verified
Payment --> Confirmation: Payment complete
Confirmation --> [*]
```
```tsx
import { HiveCheckoutFlow } from '@bagdock/hive-react'
function Checkout({ facility, unit }) {
return (
<HiveCheckoutFlow
facilityName={facility.name}
unitDescription={unit.sizeDescription}
monthlyPrice={unit.pricePerMonth}
currency="GBP"
availablePlans={plans}
availableAddOns={addOns}
availableProtectionPlans={protectionPlans}
onInitCheckoutSession={async (params) => {
return await myApi.createCheckoutSession(params)
}}
onCreatePaymentIntent={async (amount) => {
return await stripe.paymentIntents.create({ amount })
}}
renderPaymentForm={(clientSecret) => (
<Elements stripe={stripePromise} options={{ clientSecret }}>
<PaymentForm />
</Elements>
)}
onCreateIdentitySession={async () => {
return await myApi.createVerificationSession()
}}
onComplete={(result) => {
router.push(`/rentals/${result.rentalId}`)
}}
/>
)
}
```
---
## Component reference
### Hooks
| Hook | Returns | Description |
|------|---------|-------------|
| `useHiveChat(config)` | `UseHiveChatReturn` | Streaming chat with tool invocation parsing |
| `useHiveConfig()` | `HiveProviderConfig` | Access provider context (apiKey, renderToolResult) |
### `useHiveChat` config
| Prop | Type | Description |
|------|------|-------------|
| `apiKey` | `string` | Your Bagdock API key |
| `embedToken` | `string` | Embed token (alternative to apiKey) |
| `baseUrl` | `string` | API base URL override |
| `apiKey` | `string` | **Required.** Embed key or restricted key |
| `operatorId` | `string` | Scope to a specific operator |
| `auth` | `AuthAdapterConfig` | Pluggable auth config |
| `appearance` | `HiveAppearance` | Theming object |
| `baseUrl` | `string` | API URL override for local dev |
| `initialMessages` | `AIMessage[]` | Pre-populate messages |
| `onSessionId` | `(id: string) => void` | Called when session ID is resolved |
| `onAgentChange` | `(agent: string) => void` | Called when the active agent context changes |
### `<HiveChat>`
### `useHiveChat` return
Embeddable AI chat widget for answering tenant questions.
| Property | Type | Description |
|----------|------|-------------|
| `messages` | `AIMessage[]` | All messages with `parts[]` for tool rendering |
| `isLoading` | `boolean` | `true` while streaming |
| `error` | `string \| null` | Last error message |
| `sessionId` | `string \| null` | Resolved session ID |
| `currentAgent` | `string \| null` | Active agent context |
| `sendMessage` | `(text: string) => void` | Send a user message |
| `clearMessages` | `() => void` | Reset the conversation |
| `setMessages` | `Dispatch<SetStateAction>` | Direct state access |
### `<HiveBooking>`
### Chat primitives
Unit booking flow — search, select, and checkout.
| Component | Description |
|-----------|-------------|
| `ChatMessage` | Single message bubble with role-based styling |
| `ChatMarkdown` | Renders markdown content with syntax highlighting |
| `ToolExecutionStep` | Shows tool execution state (loading, result) |
| `QuickReplyChips` | Clickable choice chips from `offerChoices` tool |
| `ReasoningBlock` | Collapsible block showing agent reasoning |
| `VerificationCard` | Identity verification status card |
| `LoadingMessage` | Typing indicator (animated dots) |
| `Composer` | Auto-resizing textarea with submit button |
### `<HiveAccess>`
### Built-in tool cards
Displays gate access codes (PIN, QR, NFC) for a tenant's unit.
| Component | Tool | Description |
|-----------|------|-------------|
| `AgentRentalsToolCard` | `getMyRentals` | List of active rentals |
| `PaymentSummaryCard` | `getMyNextPayment` | Upcoming payment details |
| `DashboardSummaryCard` | `getDashboardSummary` | Account overview |
| `LoyaltyCard` | `getMyLoyalty` | Tier, points, referral info |
| `AccountProfileCard` | `getMyProfile` | User profile details |
## Hooks
### High-level compositions
| Hook | Returns | Description |
|------|---------|-------------|
| `useHive()` | `HiveContextValue` | Access the Hive context (client, theme) |
| `useHiveClient()` | `BagdockHive` | Direct access to the typed HTTP client |
| Component | Description |
|-----------|-------------|
| `HiveFullPage` | Full-page chat layout (header + messages + composer) |
| `HiveChatPanel` | Side panel chat (like a support widget) |
| `HiveFloatingButton` | FAB that opens/closes the chat panel |
| `HiveAssistantStrip` | Top bar with agent status and notification count |
| `HiveAssistantPanel` | Slide-out panel for dashboard integration |
| `HiveInlineHint` | Contextual suggestion card |
| `HiveBadge` | "Powered by Bagdock" badge |
| `HiveDashboardPrompt` | Full-width prompt input for dashboards |
| `HiveSearchView` | Split view with facility grid + chat panel |
## Theming
### Feature components
Customize the look with a Stripe/Clerk-style `appearance` prop:
| Component | Description |
|-----------|-------------|
| `HiveCheckoutFlow` | Multi-step checkout wizard with injectable callbacks |
| `HiveHistoryPanel` | Chat session history list |
| `HiveInlineAuth` | Phone/email OTP authentication card |
| `HivePostRentalCard` | Confirmation card after checkout |
### Backward compatibility
All `Hive*` components have deprecated aliases matching the original internal names:
```tsx
<HiveProvider
apiKey="hk_live_..."
appearance={{
theme: 'dark',
variables: {
colorPrimary: '#6366f1',
borderRadius: '12px',
fontFamily: 'Inter, sans-serif',
},
}}
>
<HiveChat />
</HiveProvider>
import { HiveChatPanel } from '@bagdock/hive-react' // preferred
import { AIChatPanel } from '@bagdock/hive-react' // deprecated alias
import { HiveFullPage } from '@bagdock/hive-react' // preferred
import { CoraFullPage } from '@bagdock/hive-react' // deprecated alias
```
All variables are exposed as CSS custom properties (`--hive-color-primary`, etc.) for further customization.
---
## Message format
`useHiveChat` returns messages with a `parts` array for rich rendering:
```typescript
interface AIMessage {
id: string
role: 'user' | 'assistant'
content: string
timestamp: string
parts?: AIMessagePart[]
metadata?: AIMessageMetadata
}
interface AIMessagePart {
type: 'text' | 'tool-invocation'
text?: string
state?: 'call' | 'partial-call' | 'result'
toolCallId?: string
toolName?: string
args?: Record<string, unknown>
output?: unknown
}
```
### Rendering pattern
```tsx
{message.parts?.map((part, i) => {
if (part.type === 'text') {
return <ChatMarkdown key={i} content={part.text} />
}
if (part.type === 'tool-invocation') {
if (part.state !== 'result') {
return <ToolExecutionStep key={i} toolName={part.toolName} />
}
return renderToolResult(part.toolName, part.output, sendMessage)
}
})}
```
## Styling
Components use Tailwind CSS classes. Include the package in your Tailwind `content` config:
```javascript
// tailwind.config.js
module.exports = {
content: [
'./src/**/*.{ts,tsx}',
'./node_modules/@bagdock/hive-react/dist/**/*.{js,mjs}',
],
}
```
## License
MIT
dist/index.js

Sorry, the diff of this file is too big to display

dist/index.mjs

Sorry, the diff of this file is too big to display