fix: improve chatbot iframe handshake (#1373)

## Description
- Make the handshake with the chat easier

## What type of PR is this? (check all applicable)

- [ ] 💡 (feat) - A new feature (non-breaking change which adds
functionality)
- [ ] 🔄 (refactor) - Code Refactoring - A code change that neither fixes
a bug nor adds a feature
- [x] 🐞 (fix) - Bug Fix (non-breaking change which fixes an issue)
- [ ] 🏎 (perf) - Optimization
- [ ] 📄 (docs) - Documentation - Documentation only changes
- [ ] 📄 (test) - Tests - Adding missing tests or correcting existing
tests
- [ ] ⚙️ (ci) - Continuous Integrations - Changes to our CI
configuration files and scripts (example scopes: Travis, Circle,
BrowserStack, SauceLabs)
- [ ] ☑️ (chore) - Chores - Other changes that don't modify src or test
files
- [ ] ↩️ (revert) - Reverts - Reverts a previous commit(s).

<!--
     For a timely review/response, please avoid force-pushing additional
     commits if your PR already received reviews or comments.
Before submitting a Pull Request, please ensure you've done the
following:
     - 👷‍♀️ Create small PRs. In most cases this will be possible.
     - ✅ Provide tests for your changes.
     - 📝 Use descriptive commit messages (as described below).
- 📗 Update any related documentation and include any relevant
screenshots.
     Commit Message Structure (all lower-case):
     <type>(optional ticket number): <description>
     [optional body]
-->

Author: RonenMars

src/services/iframeComm.service.ts

@@ -121,6 +121,14 @@ class IframeCommService {
 		}
 
 		this.iframeRef = iframe;
+
+		if (this.messageQueue.length > 0) {
+			LoggerService.debug(
+				namespaces.iframeCommService,
+				`Iframe ref set - processing ${this.messageQueue.length} queued messages`
+			);
+			void this.processMessageQueue();
+		}
 	}
 
 	public destroy(): void {
@@ -650,20 +658,6 @@ class IframeCommService {
 
 	private async handleIncomingMessages(event: MessageEvent): Promise<void> {
 		try {
-			if (!this.iframeRef || !document.contains(this.iframeRef)) {
-				return;
-			}
-
-			if (event.origin === (this.expectedOrigin || aiChatbotOrigin) && !this.isConnected) {
-				this.isConnected = true;
-				if (this.connectionResolve) {
-					this.connectionResolve();
-					this.connectionResolve = null;
-				}
-
-				this.sendDatadogContext();
-			}
-
 			if (!this.isValidOrigin(event.origin)) {
 				LoggerService.debug(
 					namespaces.iframeCommService,
@@ -688,6 +682,15 @@ class IframeCommService {
 				return;
 			}
 
+			if (event.origin === (this.expectedOrigin || aiChatbotOrigin) && !this.isConnected) {
+				this.isConnected = true;
+				if (this.connectionResolve) {
+					this.connectionResolve();
+					this.connectionResolve = null;
+				}
+				this.sendDatadogContext();
+			}
+
 			const message = event.data as AkbotMessage;
 
 			if (!Object.values(MessageTypes).includes(message?.type)) {
@@ -717,6 +720,19 @@ class IframeCommService {
 				await this.processMessageQueue();
 			}
 
+			if (!this.iframeRef || !document.contains(this.iframeRef)) {
+				if (message.type !== MessageTypes.HANDSHAKE && message.type !== MessageTypes.HANDSHAKE_ACK) {
+					LoggerService.debug(
+						namespaces.iframeCommService,
+						`Received ${message.type} but iframe ref not ready - adding to queue`
+					);
+					if (this.messageQueue.length < this.maxQueueSize) {
+						this.messageQueue.push(message);
+					}
+					return;
+				}
+			}
+
 			switch (message.type) {
 				case MessageTypes.HANDSHAKE: {
 					const handshakeAckMessage: HandshakeAckMessage = {
@@ -726,7 +742,14 @@ class IframeCommService {
 							version: CONFIG.APP_VERSION,
 						},
 					};
-					this.sendMessage(handshakeAckMessage);
+					if (this.iframeRef && document.contains(this.iframeRef)) {
+						this.sendMessage(handshakeAckMessage);
+					} else {
+						LoggerService.debug(
+							namespaces.iframeCommService,
+							"Received HANDSHAKE but iframe ref not ready yet - waiting for iframe to be set"
+						);
+					}
 					break;
 				}
 				case MessageTypes.HANDSHAKE_ACK: