Merge pull request #83 from Cognigy/bug/87618-fix-start-behavior-with-privacy-screen

Bug/87618 fix start behavior with privacy screen

Author: sushmi21

docs/css-customization.md

@@ -34,6 +34,7 @@ There are several classes that you need to take in consideration if you want to
 - _webchat-input-button-add-attachments_
 - _webchat-input-drag-and-drop-file-text_
 - _webchat-input-button-send_
+- _webchat-input-get-started-button_
 - _webchat-toggle-button_
 - _webchat-unread-message-preview_
 - _webchat-unread-message-badge_
@@ -387,6 +388,17 @@ The avatars can be repositioned to appear at the top edge of a message rather th
 }
 ```
 
+- _webchat-input-get-started-button_  
+  The button to initiate the first interaction in the Webchat. You can customize its appearance, size, and background.
+
+```CSS
+[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input-get-started-button {
+
+    border-radius: 10px;
+    background-color: rgb(0, 123, 255);
+}
+```
+
 - _webchat-input-button-add-attachments_  
   The button to open the file attachment section, you can not change the icon but you can customize the position, size and background.
 

src/plugins/get-started-button-input/GetStartedInput.tsx

@@ -7,11 +7,6 @@ import styled from "@emotion/styled";
 const GetStartedButton = styled(Button)(({ theme }) => ({
 	marginBottom: theme.unitSize * 2,
 	flexGrow: 1,
-	"&:focus": {
-		outline: "none",
-		boxShadow: `0 0 3px 1px ${theme.primaryWeakColor}`,
-		backgroundColor: theme.primaryStrongColor,
-	},
 }));
 
 const GetStartedInput = ({ onSendMessage, config }: InputComponentProps) => (
@@ -26,6 +21,7 @@ const GetStartedInput = ({ onSendMessage, config }: InputComponentProps) => (
 			}
 			color="primary"
 			id="webchatGetStartedButton"
+			className="webchat-input-get-started-button"
 		>
 			{config.settings.startBehavior.getStartedButtonText}
 		</GetStartedButton>

src/plugins/get-started-button-input/index.ts

@@ -1,6 +1,7 @@
 import GetStartedInput from "./GetStartedInput";
 import { InputRule, InputPlugin } from "../../common/interfaces/input-plugin";
 import { registerInputPlugin } from "../helper";
+import getMessagesListWithoutControlCommands from "../../webchat-ui/utils/filter-out-control-commands";
 
 const rule: InputRule = ({
 	config: {
@@ -16,7 +17,9 @@ const rule: InputRule = ({
 	},
 	messages,
 }) =>
-	(messages.length === 0 || (messages.length === 1 && messages[0].source === "engagement")) &&
+	(messages.length === 0 ||
+		(messages.length === 1 && messages[0].source === "engagement") ||
+		getMessagesListWithoutControlCommands(messages)?.length === 0) &&
 	startBehavior === "button" &&
 	!!getStartedPayload &&
 	(!!getStartedButtonText ||

src/webchat/store/autoinject/autoinject-middleware.ts

@@ -58,8 +58,13 @@ export const createAutoInjectMiddleware =
 				}
 
 				// Don't trigger the auto inject message when the history is not empty
-				// except if explicitly set via enableAutoInjectWithHistory
+				// except if explicitly set via enableInjectionWithoutEmptyHistory
 				if (!config.settings.widgetSettings.enableInjectionWithoutEmptyHistory) {
+					// If there are stored messages waiting to be sent, don't send the auto-inject message
+					if (state.ui.storedMessage) {
+						break;
+					}
+
 					// Exclude engagement messages from state.messages
 					const messagesExcludingEngagementMessages =
 						state.messages.messageHistory?.filter(

src/webchat/store/connection/connection-middleware.ts

@@ -56,7 +56,6 @@ export const createConnectionMiddleware =
 							// set options
 							store.dispatch(setConnecting(false));
 							store.dispatch(setReconnectionLimit(false));
-							store.dispatch(setOptions(client.socketOptions));
 
 							if (storedMessage) {
 								store.dispatch(
@@ -67,6 +66,7 @@ export const createConnectionMiddleware =
 								);
 								store.dispatch(setStoredMessage(null));
 							}
+							store.dispatch(setOptions(client.socketOptions));
 						})
 						.catch(() => {
 							store.dispatch(setConnecting(false));