Merge pull request #17 from Cognigy/bug/74861-fix-qr-buttons-disable-issue

Fix issues with controlCommands messages

Author: sushmi21

src/webchat-ui/components/WebchatUI.tsx

@@ -67,7 +67,7 @@ import XAppOverlay from "./functional/xapp-overlay/XAppOverlay";
 import { getSourceBackgroundColor } from "../utils/sourceMapping";
 import type { Options } from "@cognigy/socket-client/lib/interfaces/options";
 import speechOutput from "./plugins/speech-output";
-import getMessagesListWithoutPrivacyMessage from "../utils/filter-out-privacy-message";
+import getMessagesListWithoutControlCommands from "../utils/filter-out-control-commands";
 
 export interface WebchatUIProps {
 	currentSession: string;
@@ -1382,7 +1382,7 @@ export class WebchatUI extends React.PureComponent<
 
 		// Find privacy message and remove it from the messages list (these message types are not displayed in the chat log). 
 		// If we do not remove, it will cause the collatation of the first user message.
-		const messagesExcludingPrivacyMessage = getMessagesListWithoutPrivacyMessage(messages);
+		const messagesExcludingPrivacyMessage = getMessagesListWithoutControlCommands(messages, ["acceptPrivacyPolicy"]);
 
 		return (
 			<>				
@@ -1391,9 +1391,13 @@ export class WebchatUI extends React.PureComponent<
 				</TopStatusMessage>
 				{messagesExcludingPrivacyMessage.map((message, index) => {
 					// Lookahead if there is a user reply
-					const hasReply = messages
+					const hasReply = messagesExcludingPrivacyMessage
 						.slice(index + 1)
-						.some(message => message.source === "user");
+						.some(
+							message =>
+								message.source === "user" &&
+								!(message?.data?._cognigy as any)?.controlCommands,
+						);
 
 					return (
 						<Message
@@ -1408,7 +1412,7 @@ export class WebchatUI extends React.PureComponent<
 							onSetFullscreen={() => this.props.onSetFullscreenMessage(message)}
 							openXAppOverlay={openXAppOverlay}
 							plugins={messagePlugins}
-							prevMessage={messages?.[index - 1]}
+							prevMessage={messagesExcludingPrivacyMessage?.[index - 1]}
 							theme={this.state.theme}
 						/>
 					);

src/webchat-ui/utils/filter-out-control-commands.ts

@@ -0,0 +1,20 @@
+import { IMessageEvent } from "../../common/interfaces/event";
+import { IMessage } from "../../common/interfaces/message";
+
+const EXCLUDE_CC_TYPES = ["acceptPrivacyPolicy", "setRating"];
+
+const getMessagesListWithoutControlCommands = (
+	messages: (IMessage | IMessageEvent)[],
+	types: string[] = EXCLUDE_CC_TYPES,
+) => {
+	return messages.filter(message => {
+		if (message.data?._cognigy && (message.data._cognigy as any).controlCommands) {
+			return !(message.data._cognigy as any).controlCommands.some((controlCommand: any) =>
+				types.includes(controlCommand.type),
+			);
+		}
+		return true;
+	});
+};
+
+export default getMessagesListWithoutControlCommands;

src/webchat-ui/utils/filter-out-privacy-message.ts

@@ -3,7 +3,7 @@ import { StoreState } from "../store";
 import { autoInjectHandled, TAutoInjectAction, triggerAutoInject } from './autoinject-reducer';
 import { Webchat } from "../../components/Webchat";
 import { IWebchatConfig } from "../../../common/interfaces/webchat-config";
-import getMessagesListWithoutPrivacyMessage from "../../../webchat-ui/utils/filter-out-privacy-message";
+import getMessagesListWithoutControlCommands from "../../../webchat-ui/utils/filter-out-control-commands";
 
 export const createAutoInjectMiddleware = (webchat: Webchat): Middleware<unknown, StoreState> => api => next => (action: TAutoInjectAction) => {
     switch (action.type) {
@@ -50,11 +50,11 @@ export const createAutoInjectMiddleware = (webchat: Webchat): Middleware<unknown
 			if (!config.settings.widgetSettings.enableInjectionWithoutEmptyHistory) {
                 // Exclude engagement messages from state.messages
                 const messagesExcludingEngagementMessages = state.messages?.filter(message => message.source !== 'engagement');
-                // Exclude privacy policy accepted message type from filtered message list 
-                const messagesExcludingEngagementAndPrivacyMessage = getMessagesListWithoutPrivacyMessage(messagesExcludingEngagementMessages);                
-                const isEmptyExceptEngagementAndPrivacyMessage = messagesExcludingEngagementAndPrivacyMessage.length === 0;
+                // Exclude controlCommands messages from filtered message list 
+                const messagesExcludingControlCommands = getMessagesListWithoutControlCommands(messagesExcludingEngagementMessages);                
+                const isEmptyExceptEngagementAndControlCommands = messagesExcludingControlCommands.length === 0;
 
-                if (!isEmptyExceptEngagementAndPrivacyMessage) {
+                if (!isEmptyExceptEngagementAndControlCommands) {
                     break;
                 }
             }