Merge pull request #102 from Cognigy/feature/75532-image-in-quick-rep…

…lies

Add image inside quick reply button

src/common/ActionButtons/ActionButton.module.css

@@ -12,6 +12,8 @@ a.button {
 	color: var(--cc-primary-contrast-color);
 	border: none;
 	outline: none;
+	overflow: hidden;
+	position: relative;
 }
 
 a.button:global(.phone-number-or-url-anchor) {
@@ -49,3 +51,22 @@ a.button.disabled:focus {
 	cursor: default;
 	pointer-events: none;
 }
+
+.buttonLabelWithImage {
+	margin-left: 40px;
+}
+
+.buttonImage {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.buttonImageContainer {
+	display: flex;
+	position: absolute;
+	left: 0;
+	width: 40px;
+	height: 100%;
+	border-right: 2px solid var(--cc-primary-contrast-color);
+}

src/common/ActionButtons/ActionButton.tsx

@@ -49,6 +49,15 @@ const ActionButton: FC<ActionButtonProps> = props => {
 			? (button as any).contentType
 			: null;
 
+	const buttonImage =
+		"image_url" in button ? button.image_url : "imageUrl" in button ? button.imageUrl : null;
+	const butonImageAltText =
+		"image_alt_text" in button
+			? button.image_alt_text
+			: "imageAltText" in button
+			? button.imageAltText
+			: "";
+
 	if (!buttonType) return null;
 
 	const buttonLabel = getWebchatButtonLabel(button) || "";
@@ -151,10 +160,20 @@ const ActionButton: FC<ActionButtonProps> = props => {
 			aria-label={getAriaLabel()}
 			aria-disabled={disabled}
 		>
+			{!!buttonImage && (
+				<div className={classes.buttonImageContainer}>
+					<img
+						src={buttonImage as string}
+						alt={butonImageAltText as string}
+						className={classes.buttonImage}
+					/>
+				</div>
+			)}
 			<Typography
 				variant={size === "large" ? "title1-semibold" : "cta-semibold"}
 				component="span"
 				dangerouslySetInnerHTML={{ __html }}
+				className={!!buttonImage && classes.buttonLabelWithImage}
 			/>
 			{renderIcon()}
 		</Component>

test/demo.tsx

@@ -261,8 +261,8 @@ const screens: TScreen[] = [
 										},
 										{
 											content_type: "user_phone_number",
-											image_url: "",
-											image_alt_text: "",
+											image_url: "https://placewaifu.com/image/300/50",
+											image_alt_text: "Sample anime character",
 											payload: "0111222333",
 											title: "Call us",
 										},