Merge branch 'v3' into build-improvements-cleanup

cypress/fixtures/messages/image.json

@@ -5,15 +5,15 @@
 			"_default": {
 				"_image": {
 					"type": "image",
-					"imageUrl": "https://placewaifu.com/image/300/300"
+					"imageUrl": "https://picsum.photos/id/237/200/200"
 				}
 			},
 			"_webchat": {
 				"message": {
 					"attachment": {
 						"type": "image",
 						"payload": {
-							"url": "https://placewaifu.com/image/300/300"
+							"url": "https://picsum.photos/id/237/200/200"
 						}
 					}
 				}

cypress/integration/messages/image.spec.ts

@@ -42,7 +42,9 @@ describe("Message with Image", { retries: 3 }, () => {
 		cy.visitWebchat();
 		cy.initMockWebchat({
 			settings: {
-				dynamicImageAspectRatio: true,
+				layout: {
+					dynamicImageAspectRatio: true,
+				},
 			},
 		});
 		cy.openWebchat();

package.json

@@ -30,14 +30,15 @@
 		"deps:analyze": "npx -y webpack-bundle-analyzer stats.json dist"
 	},
 	"dependencies": {
-		"@cognigy/chat-components": "file:../chat-components/cognigy-chat-components-0.19.0.tgz",
+		"@braintree/sanitize-url": "^6.0.0",
+		"@cognigy/chat-components": "0.19.0",
 		"@cognigy/socket-client": "5.0.0-beta.10",
 		"@emotion/cache": "^10.0.29",
 		"@emotion/react": "^11.7.1",
 		"@emotion/serialize": "1.1.3",
 		"@emotion/styled": "^11.6.0",
 		"@types/react-transition-group": "4.4.10",
-		"axios": "0.27.2",
+		"axios": "1.6.4",
 		"classnames": "2.3.2",
 		"cypress-real-events": "^1.7.0",
 		"dompurify": "^2.0.7",

src/webchat-ui/components/WebchatUI.tsx

@@ -241,27 +241,66 @@ export class WebchatUI extends React.PureComponent<
 		this.menuButtonInHeaderRef = React.createRef();
 		this.ratingButtonInHeaderRef = React.createRef();
 		this.webchatWindowRef = React.createRef();
+
+		this.handleStartConversation = this.handleStartConversation.bind(this);
 	}
 
 	static getDerivedStateFromProps(
 		props: WebchatUIProps,
 		state: WebchatUIState,
 	): WebchatUIState | null {
-		const color = props?.config?.settings?.colors?.primaryColor;
+		const primaryColor = props?.config?.settings?.colors?.primaryColor;
+		const secondaryColor = props?.config?.settings?.colors?.secondaryColor;
+		const chatInterfaceColor = props?.config?.settings?.colors?.chatInterfaceColor;
+		const botMessageColor = props?.config?.settings?.colors?.botMessageColor;
+		const userMessageColor = props?.config?.settings?.colors?.userMessageColor;
+		const textLinkColor = props?.config?.settings?.colors?.textLinkColor;
+
+		let isThemeChanged = false;
 
-		if (!!color && color !== state.theme.primaryColor) {
+		if (!!primaryColor && primaryColor !== state.theme.primaryColor) {
 			// We will integrate this into the theme object in the future
 			// This is a demo of injecting a custom color scheme
-			document.documentElement.style.setProperty("--webchat-primary-color", color);
+			document.documentElement.style.setProperty("--webchat-primary-color", primaryColor);
 			// This is example of how a new theme properties can be added
 			// document.documentElement.style.setProperty('--webchat-background-bot-message', color);
 
-			return {
-				...state,
-				theme: createWebchatTheme({ primaryColor: color }),
-			};
+			isThemeChanged = true;
 		}
 
+		if (!!secondaryColor && secondaryColor !== state.theme.secondaryColor) {
+			document.documentElement.style.setProperty("--webchat-secondary-color", secondaryColor);
+			isThemeChanged = true;
+		}
+		if (!!chatInterfaceColor && chatInterfaceColor !== state.theme.backgroundWebchat) {
+			document.documentElement.style.setProperty("--webchat-background-webchat", chatInterfaceColor);
+			isThemeChanged = true;
+		}
+		if (!!botMessageColor && botMessageColor !== state.theme.backgroundBotMessage) {
+			document.documentElement.style.setProperty("--webchat-background-bot-message", botMessageColor);
+			isThemeChanged = true;
+		}
+		if (!!userMessageColor && userMessageColor !== state.theme.backgroundUserMessage) {
+			document.documentElement.style.setProperty("--webchat-background-user-message", userMessageColor);
+			isThemeChanged = true;
+		}
+		if (!!textLinkColor && textLinkColor !== state.theme.textLink) {
+			document.documentElement.style.setProperty("--webchat-text-link", textLinkColor);
+			isThemeChanged = true;
+		}
+
+		if (isThemeChanged) return {
+			...state,
+			theme: createWebchatTheme({
+				primaryColor,
+				secondaryColor,
+				backgroundWebchat: chatInterfaceColor,
+				backgroundBotMessage: botMessageColor,
+				backgroundUserMessage: userMessageColor,
+				textLink: textLinkColor,
+			}),
+		};
+
 		return null;
 	}
 
@@ -305,9 +344,21 @@ export class WebchatUI extends React.PureComponent<
 	}
 
 	async componentDidUpdate(prevProps: WebchatUIProps, prevState: WebchatUIState) {
-		if (this.props.config.settings.colors.primaryColor !== prevProps.config.settings.colors.primaryColor) {
+		if (this?.props?.config?.settings?.colors?.primaryColor !== prevProps?.config?.settings?.colors?.primaryColor ||
+			this?.props?.config?.settings?.colors?.secondaryColor !== prevProps?.config?.settings?.colors?.secondaryColor ||
+			this?.props?.config?.settings?.colors?.chatInterfaceColor !== prevProps?.config?.settings?.colors?.chatInterfaceColor ||
+			this?.props?.config?.settings?.colors?.botMessageColor !== prevProps?.config?.settings?.colors?.botMessageColor ||
+			this?.props?.config?.settings?.colors?.userMessageColor !== prevProps?.config?.settings?.colors?.userMessageColor ||
+			this?.props?.config?.settings?.colors?.textLinkColor !== prevProps?.config?.settings?.colors?.textLinkColor) {
 			this.setState({
-				theme: createWebchatTheme({ primaryColor: this.props.config.settings.colors.primaryColor }),
+				theme: createWebchatTheme({
+					primaryColor: this?.props?.config?.settings?.colors?.primaryColor,
+					secondaryColor: this?.props?.config?.settings?.colors?.secondaryColor,
+					backgroundWebchat: this?.props?.config?.settings?.colors?.chatInterfaceColor,
+					backgroundBotMessage: this?.props?.config?.settings?.colors?.botMessageColor,
+					backgroundUserMessage: this?.props?.config?.settings?.colors?.userMessageColor,
+					textLink: this?.props?.config?.settings?.colors?.textLinkColor,
+				}),
 			});
 		}
 
@@ -571,6 +622,22 @@ export class WebchatUI extends React.PureComponent<
 		}
 	};
 
+	handleStartConversation = () => {
+		if (!this.props.config.settings.privacyNotice.enabled || this.props.hasAcceptedTerms) {
+			const { initialSessionId } = this.props.config;
+			if (!initialSessionId) {
+				this.props.onSwitchSession();
+			}
+			if (initialSessionId && initialSessionId !== this.props.currentSession) {
+				this.props.onSwitchSession(initialSessionId);
+			}
+		}
+
+		if (!this.props.open) this.props.onToggle();
+		this.props.onSetShowHomeScreen(false);
+		this.props.onSetShowChatOptionsScreen(false);
+	}
+
 	render() {
 		const { props, state } = this;
 		const {
@@ -739,7 +806,7 @@ export class WebchatUI extends React.PureComponent<
 											lastUnseenMessageText && (
 												<TeaserMessage
 													messageText={lastUnseenMessageText}
-													onToggle={onToggle}
+													onClick={this.handleStartConversation}
 													config={config}
 													onEmitAnalytics={onEmitAnalytics}
 													onSendActionButtonMessage={this.handleSendActionButtonMessage}
@@ -859,19 +926,6 @@ export class WebchatUI extends React.PureComponent<
 		// TODO: implement better navigation history and currentPage string property on redux
 		const isSecondaryView = showInformationMessage;
 
-		const handleStartConversation = () => {
-			if (!config.settings.privacyNotice.enabled || hasAcceptedTerms) {
-				const { initialSessionId } = config;
-				if (!initialSessionId) {
-					onSwitchSession();
-				}
-				if (initialSessionId && initialSessionId !== currentSession) {
-					onSwitchSession(initialSessionId);
-				}
-			}
-			onSetShowHomeScreen(false);
-			onSetShowChatOptionsScreen(false);
-		}
 
 		const handleOnClose = () => {
 			onClose?.();
@@ -1045,7 +1099,7 @@ export class WebchatUI extends React.PureComponent<
 						<HomeScreen
 							showHomeScreen={showHomeScreen}
 							onSetShowHomeScreen={onSetShowHomeScreen}
-							onStartConversation={handleStartConversation}
+							onStartConversation={this.handleStartConversation}
 							onSetShowPrevConversations={onSetShowPrevConversations}
 							onClose={onClose}
 							config={config}

src/webchat-ui/components/plugins/input/base/BaseInput.tsx

@@ -378,6 +378,7 @@ export class BaseInput extends React.PureComponent<IBaseInputProps, IBaseInputSt
 		const files = event.target.files;
 		const newFilesArray = Array.prototype.slice.call(files);
 		this.props.onAddFilesToList(newFilesArray);
+		event.target.value = "";
 	};
 
 	handleUploadFile = event => {