@apizee/chatbox v1.0.0

Chatbox

This package contains the following core components :

• Chatbox: Instant messaging component
• ApzChatbox: ApiRTC wrapper of the Chatbox component

Install

npm install @apizee-components/chatbox date-fns @emotion/styled
# or
yarn add @apizee-components/chatbox date-fns @emotion/styled

Usage

import { ApzChatbox } from '@apizee-components/chatbox';
// ...
<ApzChatbox conversationName="myConversationName" />;

import Chatbox from '@apizee-components/chatbox';
// ...
<Chatbox messages={messages} onSubmit={onSubmit} />;

Props

type ApzChatboxProps = {
	// ApiRTC conversation name
	conversationName: string;
	// Specifies the active locale (date formatter)
	locale?: 'en' | 'fr' | string;
	composer?: {
		// If true, cannot send message
		isDisabled?: boolean = false;
		// Specifies input placeholder
		placeholder?: string = '';
		// If true, display a char counter
		hasCharCounter?: boolean = false;
		// Works if hasCharCounter props is true
		maxCharacters?: number = 1000;
	};
};

type ChatboxProps = {
	// Message list
	messages: Message[] = [];
	// Specifies unread button label. This button is displayed whenever incomming messages are not visible
	unreadLabel?: string = 'See new messages';
	// Specifies annotate button label. This button is displayed whenever message contains a media image
	annotateLabel?: string = 'Annotate';
	// Specifies the active locale (date formatter)
	locale?: 'en' | 'fr' | string = 'en';
	// If true, display button on top of chat-messages container
	// onFetchHistory props is required when hasHistory props is true
	hasHistory?: boolean = false;
	composer?: {
		// If true, cannot send message
		isDisabled?: boolean = false;
		// Specifies input placeholder
		placeholder?: string = '';
		// If true, display a char counter
		hasCharCounter?: boolean = false;
		// Works if hasCharCounter props is true
		maxCharacters?: number = 1000;
	};
	typings?: {
		// Typing list
		typings?: Array<{ id: string; username: string; photoUrl: string }> = [];
		// If true, username is displayed
		isUsernameVisible?: boolean = false;
		// If true, user photo is displayed
		isUserPhotoVisible?: boolean = false;
	};
	// Triggered whenever a message is sent (by press enter or click on submit button)
	onSubmit: (message: { content: string }) => void;
	// Triggered whenever a user begin typing
	onTyping?: () => void;
	// Triggered 2 seconds after the user stopped typing
	onStopTyping?: () => void;
	// Triggered on click on the download button
	onMediaDownload?: (media: PartialMediaDescription) => void;
	// Triggered on click on the annotate button
	onMediaAnnotate?: (media: PartialMediaDescription) => void;
	// Triggered on click on the history button
	onFetchHistory?: () => void;
};

type Message = {
	content: string;
	from: number;
	author: string;
	time: number;
	photoUrl: string;
	metadata?: {
		partialMediaDescription?: PartialMediaDescription;
	};
};

type PartialMediaDescription = {
	id?: string;
	type?: number;
	url?: string;
	title?: string;
	filename?: string;
};