Release 1.4.0

Release 1.4.0

CHANGELOG.md

@@ -2,10 +2,16 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 1.4.0 - 2020-03-19
+* [NEW] Add new API method the set the default Agent before chatting (#383)
+* [NEW] Keep trigger messages after the conversation starts. (#384)
+* [NEW] Widget API Methods (#381)
+* [FIX] Livechat guest avatar using name instead of username (#380)
+
 ## 1.3.1 - 2020-02-12
- * [FIX] Add Cross-tab communication on the same origin (#364)
- * [FIX] Corrected German title for finished chat (#363)
- * [FIX] Update polish translation (#324)
+* [FIX] Add Cross-tab communication on the same origin (#364)
+* [FIX] Corrected German title for finished chat (#363)
+* [FIX] Update polish translation (#324)
 
 ## 1.3.0 - 2019-12-12
 * [NEW] Add Service Offline callback (#341)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rocket.chat/livechat",
-	"version": "1.3.1",
+	"version": "1.4.0",
 	"files": [
 		"/build"
 	],

src/components/Messages/Message/index.js

@@ -67,6 +67,19 @@ const getSystemMessageText = ({ t, conversationFinishedMessage }) =>
 	|| (t === MESSAGE_TYPE_WELCOME && I18n.t('Welcome'))
 	|| (t === MESSAGE_TYPE_LIVECHAT_CLOSED && (conversationFinishedMessage || I18n.t('Conversation finished')));
 
+const getMessageUsernames = (compact, message) => {
+	if (compact || !message.u) {
+		return [];
+	}
+
+	const { alias, u: { username, name } } = message;
+	if (alias && name) {
+		return [name];
+	}
+
+	return [username];
+};
+
 export const Message = memo(({
 	avatarResolver,
 	attachmentResolver = getAttachmentUrl,
@@ -88,7 +101,7 @@ export const Message = memo(({
 	>
 		<MessageAvatars
 			avatarResolver={avatarResolver}
-			usernames={compact ? [] : message.u && message.u.username && [message.u.username]}
+			usernames={getMessageUsernames(compact, message)}
 		/>
 		<MessageContent reverse={me}>
 			{renderContent({

src/components/Messages/MessageAvatars/stories.js

@@ -32,4 +32,10 @@ storiesOf('Messages|MessageAvatars', module)
 			avatarResolver={avatarResolver}
 			usernames={object('usernames', ['guilherme.gazzo', 'tasso.evangelista', 'martin.schoeler'])}
 		/>
+	))
+	.add('with name as avatar instead of username for guests', () => (
+		<MessageAvatars
+			avatarResolver={avatarResolver}
+			usernames={object('usernames', ['livechat guest'])}
+		/>
 	));

src/lib/hooks.js

@@ -10,8 +10,8 @@ import { parentCall } from './parentCall';
 const createOrUpdateGuest = async (guest) => {
 	const { token } = guest;
 	token && await store.setState({ token });
-	await Livechat.grantVisitor({ visitor: { ...guest } });
-	await loadConfig();
+	const user = await Livechat.grantVisitor({ visitor: { ...guest } });
+	store.setState({ user });
 };
 
 const updateIframeGuestData = (data) => {
@@ -42,7 +42,7 @@ const api = {
 		CustomFields.setCustomField(key, value, overwrite);
 	},
 
-	setTheme({ color, fontColor, iconColor } = {}) {
+	setTheme({ color, fontColor, iconColor, title, offlineTitle } = {}) {
 		const { iframe, iframe: { theme } } = store.state;
 		store.setState({
 			iframe: {
@@ -52,6 +52,8 @@ const api = {
 					color,
 					fontColor,
 					iconColor,
+					title,
+					offlineTitle,
 				},
 			},
 		});
@@ -70,6 +72,21 @@ const api = {
 		updateIframeGuestData({ department: '' });
 	},
 
+	setAgent({ _id, username, ...props } = {}) {
+		if (!_id || !username) {
+			return console.warn('The fields _id and username are mandatory.');
+		}
+
+		store.setState({
+			defaultAgent: {
+				_id,
+				username,
+				ts: Date.now(),
+				...props,
+			},
+		});
+	},
+
 	setExpanded(expanded) {
 		store.setState({ expanded });
 	},

src/lib/room.js

@@ -149,20 +149,19 @@ Livechat.onMessage(async (message) => {
 });
 
 export const loadMessages = async () => {
-	const { room: { _id: rid } = {} } = store.state;
+	const { messages: storedMessages, room: { _id: rid } = {} } = store.state;
+	const previousMessages = getGreetingMessages(storedMessages);
 
 	if (!rid) {
 		return;
 	}
 
 	await store.setState({ loading: true });
-
-	const rawMessages = await Livechat.loadMessages(rid);
+	const rawMessages = (await Livechat.loadMessages(rid)).concat(previousMessages);
 	const messages = (await normalizeMessages(rawMessages)).map(transformAgentInformationOnMessage);
 
 	await initRoom();
-	await store.setState({ messages: (messages || []).reverse(), noMoreMessages: false });
-	await store.setState({ loading: false });
+	await store.setState({ messages: (messages || []).reverse(), noMoreMessages: false, loading: false });
 
 	if (messages && messages.length) {
 		const lastMessage = messages[messages.length - 1];
@@ -185,21 +184,25 @@ export const loadMoreMessages = async () => {
 	await store.setState({
 		messages: (moreMessages || []).reverse(),
 		noMoreMessages: messages.length + 10 > moreMessages.length,
+		loading: false,
 	});
-	await store.setState({ loading: false });
 };
 
 export const defaultRoomParams = () => {
 	const params = {};
 
-	const { triggerAgent: { agent } = {} } = store.state;
+	const { defaultAgent: agent = {} } = store.state;
 	if (agent && agent._id) {
 		Object.assign(params, { agentId: agent._id });
 	}
 
 	return params;
 };
 
+export const getGreetingMessages = (messages) => {
+	return messages && messages.filter((msg) => msg.trigger);
+}
+
 store.on('change', (state, prevState) => {
 	// Cross-tab communication
 	// Detects when a room is created and then route to the correct container

src/lib/triggers.js

@@ -19,14 +19,9 @@ const getAgent = (triggerAction) => {
 
 		if (params.sender === 'queue') {
 			const { state } = store;
-			const { triggerAgent, iframe: { guest: { department } } } = state;
-
-			if (triggerAgent) {
-				const cacheAgent = triggerAgent;
-				// cache valid for 1h
-				if (cacheAgent.ts && Date.now() - cacheAgent.ts < agentCacheExpiry) {
-					return resolve(cacheAgent.agent);
-				}
+			const { defaultAgent, iframe: { guest: { department } } } = state;
+			if (defaultAgent && defaultAgent.ts && Date.now() - defaultAgent.ts < agentCacheExpiry) {
+				return resolve(defaultAgent); // cache valid for 1
 			}
 
 			let agent;
@@ -36,7 +31,7 @@ const getAgent = (triggerAction) => {
 				return reject(error);
 			}
 
-			store.setState({ triggerAgent: { agent, ts: Date.now() } });
+			store.setState({ defaultAgent: { ...agent, ts: Date.now() } });
 			resolve(agent);
 		} else if (params.sender === 'custom') {
 			resolve({
@@ -114,6 +109,7 @@ class Triggers {
 						u: agent,
 						ts: ts.toISOString(),
 						_id: createToken(),
+						trigger: true,
 					};
 
 					await store.setState({

src/routes/Chat/container.js

@@ -9,7 +9,7 @@ import constants from '../../lib/constants';
 import { createToken, debounce, getAvatarUrl, canRenderMessage, throttle, upsert } from '../../components/helpers';
 import Chat from './component';
 import { ModalManager } from '../../components/Modal';
-import { initRoom, closeChat, loadMessages, loadMoreMessages, defaultRoomParams } from '../../lib/room';
+import { initRoom, closeChat, loadMessages, loadMoreMessages, defaultRoomParams, getGreetingMessages } from '../../lib/room';
 import { normalizeQueueAlert } from '../../lib/api';
 
 export class ChatContainer extends Component {
@@ -48,19 +48,20 @@ export class ChatContainer extends Component {
 	}
 
 	grantUser = async () => {
-		const { token, user, guest } = this.props;
+		const { token, user, guest, dispatch } = this.props;
 
 		if (user) {
 			return user;
 		}
 
 		const visitor = { token, ...guest };
-		await Livechat.grantVisitor({ visitor });
-		await loadConfig();
+		const newUser = await Livechat.grantVisitor({ visitor });
+		await dispatch({ user: newUser });
 	}
 
 	getRoom = async () => {
-		const { alerts, dispatch, room } = this.props;
+		const { alerts, dispatch, room, messages } = this.props;
+		const previousMessages = getGreetingMessages(messages);
 
 		if (room) {
 			return room;
@@ -70,7 +71,7 @@ export class ChatContainer extends Component {
 		try {
 			const params = defaultRoomParams();
 			const newRoom = await Livechat.room(params);
-			await dispatch({ room: newRoom, messages: [], noMoreMessages: false });
+			await dispatch({ room: newRoom, messages: previousMessages, noMoreMessages: false });
 			await initRoom();
 
 			parentCall('callback', 'chat-started');
@@ -117,6 +118,7 @@ export class ChatContainer extends Component {
 		await this.grantUser();
 		const { _id: rid } = await this.getRoom();
 		const { alerts, dispatch, token, user } = this.props;
+
 		try {
 			this.stopTypingDebounced.stop();
 			await Promise.all([
@@ -353,6 +355,7 @@ export const ChatConnector = ({ ref, ...props }) => (
 					color: customColor,
 					fontColor: customFontColor,
 					iconColor: customIconColor,
+					title: customTitle,
 				} = {},
 				guest,
 			} = {},
@@ -380,8 +383,9 @@ export const ChatConnector = ({ ref, ...props }) => (
 					color: customColor || color,
 					fontColor: customFontColor,
 					iconColor: customIconColor,
+					title: customTitle,
 				}}
-				title={title || I18n.t('Need help?')}
+				title={customTitle || title || I18n.t('Need help?')}
 				sound={sound}
 				token={token}
 				user={user}

src/routes/LeaveMessage/container.js

@@ -51,6 +51,11 @@ export const LeaveMessageConnector = ({ ref, ...props }) => (
 					displayOfflineForm,
 				} = {},
 			} = {},
+			iframe: {
+				theme: {
+					offlineTitle: customOfflineTitle,
+				} = {},
+			} = {},
 			loading,
 			token,
 			dispatch,
@@ -59,8 +64,11 @@ export const LeaveMessageConnector = ({ ref, ...props }) => (
 			<LeaveMessageContainer
 				ref={ref}
 				{...props}
-				title={title}
-				theme={{ color }}
+				theme={{
+					color,
+					offlineTitle: customOfflineTitle,
+				}}
+				title={customOfflineTitle || title}
 				message={message}
 				successMessage={successMessage}
 				unavailableMessage={unavailableMessage}

src/routes/Register/container.js

@@ -29,9 +29,9 @@ export class RegisterContainer extends Component {
 
 		await dispatch({ loading: true, department });
 		try {
-			await Livechat.grantVisitor({ visitor: { ...fields, token } });
+			const user = await Livechat.grantVisitor({ visitor: { ...fields, token } });
+			await dispatch({ user });
 			parentCall('callback', ['pre-chat-form-submit', fields]);
-			await loadConfig();
 		} finally {
 			await dispatch({ loading: false });
 		}
@@ -85,6 +85,7 @@ export const RegisterConnector = ({ ref, ...props }) => (
 					color: customColor,
 					fontColor: customFontColor,
 					iconColor: customIconColor,
+					title: customTitle,
 				} = {},
 			} = {},
 			loading = false,
@@ -99,8 +100,9 @@ export const RegisterConnector = ({ ref, ...props }) => (
 					color: customColor || color,
 					fontColor: customFontColor,
 					iconColor: customIconColor,
+					title: customTitle,
 				}}
-				title={title}
+				title={customTitle || title}
 				message={message}
 				hasNameField={hasNameField}
 				hasEmailField={hasEmailField}

src/routes/SwitchDepartment/container.js

@@ -27,9 +27,8 @@ export class SwitchDepartmentContainer extends Component {
 		}
 
 		if (!room) {
-			await Livechat.grantVisitor({ visitor: { department, token } });
-			await loadConfig();
-			await dispatch({ alerts: (alerts.push({ id: createToken(), children: I18n.t('Department switched'), success: true }), alerts) });
+			const user = await Livechat.grantVisitor({ visitor: { department, token } });
+			await dispatch({ user, alerts: (alerts.push({ id: createToken(), children: I18n.t('Department switched'), success: true }), alerts) });
 			return history.go(-1);
 		}