From 61534ce3b6eff3c193f38695ff6f4e00cc0a3431 Mon Sep 17 00:00:00 2001
From: tjtanjin <cjtanjin@gmail.com>
Date: Thu, 4 Jul 2024 01:19:05 +0800
Subject: [PATCH] fix: Fix rendering media in chat history

---
 .../ChatBotBody/UserOptions/UserOptions.tsx   |  2 +-
 src/services/ChatHistoryService.tsx           | 26 +++++++++++++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/ChatBotBody/UserOptions/UserOptions.tsx b/src/components/ChatBotBody/UserOptions/UserOptions.tsx
index 6f4e8936..7e79d9a4 100644
--- a/src/components/ChatBotBody/UserOptions/UserOptions.tsx
+++ b/src/components/ChatBotBody/UserOptions/UserOptions.tsx
@@ -3,9 +3,9 @@ import { useEffect, useState, MouseEvent } from "react";
 
 import { useBotOptions } from "../../../context/BotOptionsContext";
 import { usePaths } from "../../../context/PathsContext";
+import { Flow } from "../../../types/Flow";
 
 import "./UserOptions.css";
-import { Flow } from "../../../types/Flow";
 
 /**
  * Supports showing of options for user to select.
diff --git a/src/services/ChatHistoryService.tsx b/src/services/ChatHistoryService.tsx
index 98f2640a..3a3e42b4 100644
--- a/src/services/ChatHistoryService.tsx
+++ b/src/services/ChatHistoryService.tsx
@@ -182,6 +182,9 @@ const renderHTML = (html: string, botOptions: Options): ReactNode[] => {
 						styleObject[reactCompliantKey] = value;
 					});
 					acc[attributeName] = styleObject;
+				} else if ((tagName === "audio" || tagName === "video")
+					&& attributeName === "controls" && attr.value === "") {
+					acc[attributeName] = "true";
 				} else {
 					acc[attributeName] = attr.value;
 				}
@@ -195,7 +198,7 @@ const renderHTML = (html: string, botOptions: Options): ReactNode[] => {
 			attributes = addStyleToOptions(classList, attributes, botOptions);
 			attributes = addStyleToCheckboxRows(classList, attributes, botOptions);
 			attributes = addStyleToCheckboxNextButton(classList, attributes, botOptions);
-			//attributes = addStyleToMediaDisplayContainers(classList, attributes, botOptions);
+			attributes = addStyleToMediaDisplayContainer(classList, attributes, botOptions);
 
 			const voidElements = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link',
 				'meta', 'source', 'track', 'wbr'];
@@ -293,7 +296,26 @@ const addStyleToCheckboxNextButton = (classList: DOMTokenList, attributes: {[key
 	return attributes;
 }
 
-
+/**
+ * Add styles (that were lost when saving to history) to options.
+ *
+ * @param classList array of classes the element has
+ * @param attributes current attributes the element has
+ * @param botOptions options provided to the bot
+ */
+const addStyleToMediaDisplayContainer = (classList: DOMTokenList, attributes: {[key: string]: string | CSSProperties},
+	botOptions: Options) => {
+	if (classList.contains("rcb-media-display-image-container")
+		|| classList.contains("rcb-media-display-video-container")) {
+		attributes["style"] = {
+			...(attributes["style"] as CSSProperties),
+			backgroundColor: botOptions.theme?.primaryColor,
+			maxWidth: botOptions.userBubble?.showAvatar ? "65%" : "70%",
+			...botOptions.mediaDisplayContainerStyle
+		}
+	}
+	return attributes;
+}
 
 export {
 	saveChatHistory,