fix: Fix broken message data content UI in dark theme

src/components/CustomChannelComponent.tsx

@@ -118,7 +118,7 @@ const Root = styled.div<RootStyleProps>`
 `;
 
 export function CustomChannelComponent() {
-  const { suggestedMessageContent, botId, enableEmojiFeedback, customUserAgentParam, botStudioEditProps } =
+  const { suggestedMessageContent, botId, enableEmojiFeedback, botStudioEditProps, customUserAgentParam } =
     useConstantState();
   const { messages, currentChannel: channel, scrollToBottom, refresh } = useGroupChannelContext();
   const { resetSession } = useWidgetSetting();
@@ -278,7 +278,6 @@ export function CustomChannelComponent() {
           if (isWelcomeMessagesGiven && welcomeMessageTimeStamp && message.messageId === firstUserMessage?.messageId) {
             hasSeparator = !isSameDay(message.createdAt, welcomeMessageTimeStamp);
           }
-
           return (
             <Message {...props} hasSeparator={hasSeparator} message={message}>
               <div
@@ -301,6 +300,9 @@ export function CustomChannelComponent() {
                   isLastBotMessage={isLastBotMessage}
                   messageCount={messageCount}
                 />
+                {message.messageId === lastMessage?.messageId &&
+                  isDashboardPreview(customUserAgentParam) &&
+                  message.data && <MessageDataContent messageData={message.data} />}
                 {message.messageId === lastMessage?.messageId &&
                   (() => {
                     if (dynamicReplyOptions.length > 0) {
@@ -313,9 +315,6 @@ export function CustomChannelComponent() {
                     }
                     return null;
                   })()}
-                {message.messageId === lastMessage?.messageId &&
-                  isDashboardPreview(customUserAgentParam) &&
-                  message.data && <MessageDataContent messageData={message.data} />}
               </div>
             </Message>
           );

src/components/MessageDataContent.tsx

@@ -31,32 +31,37 @@ const TextButton = styled.div`
 const ViewDetails = styled.div`
   display: flex;
   align-items: center;
-  color: #6210cc;
-  path {
-    fill: #6210cc;
-  }
-  &:hover {
-    color: #4e11a1;
-    cursor: pointer;
-    path {
-      fill: #4e11a1;
-    }
-  }
-  &:focus {
-    border: 1px solid #6210cc;
-  }
-  &:active {
-    color: #0d0d0d;
-    path {
-      fill: #0d0d0d;
-    }
-  }
-  &:disabled {
-    color: #a6a6a6;
-    path {
-      fill: #a6a6a6;
-    }
-  }
+  ${({ theme }) => {
+    const linkColors = theme.textColor.messageDataContent.link;
+    return {
+      color: linkColors.default,
+      path: {
+        fill: linkColors.default,
+      },
+      '&:hover': {
+        color: linkColors.hover,
+        cursor: 'pointer',
+        path: {
+          fill: linkColors.hover,
+        },
+      },
+      '&:focus': {
+        border: `2px solid ${linkColors.focus}`,
+      },
+      '&:active': {
+        color: linkColors.active,
+        path: {
+          fill: linkColors.active,
+        },
+      },
+      '&:disabled': {
+        color: linkColors.disabled,
+        path: {
+          fill: linkColors.disabled,
+        },
+      },
+    };
+  }};
 `;
 
 const LineHeightWrapper = styled.div`
@@ -67,7 +72,7 @@ const LineHeightWrapper = styled.div`
 
 const WorkFlowType = styled.div`
   border-radius: 2px;
-  border: 1px solid #ccc;
+  border: 1px solid ${({ theme }) => theme.borderColor.messageDataContent.intentType};
   font-size: 12px;
   font-weight: 400;
   line-height: 16px;
@@ -85,7 +90,7 @@ const Root = styled.div`
 const SideBar = styled.div`
   width: 4px;
   border-radius: 100px;
-  background-color: #e0e0e0;
+  background-color: ${({ theme }) => theme.bgColor.messageDataContent.sidebar};
   margin-left: 8px;
 `;
 
@@ -97,6 +102,7 @@ const DataContainer = styled.div`
   gap: 4px;
   margin-left: 16px;
   flex: 1; // Without this, Sidebar width is reduced.
+  color: ${({ theme }) => theme.textColor.messageDataContent.default};
 `;
 
 const DataRow = styled.div`
@@ -108,7 +114,7 @@ const DataRow = styled.div`
 `;
 
 const AdditionalInfo = styled.div`
-  color: #858585;
+  color: ${({ theme }) => theme.textColor.messageDataContent.sideNote};
   font-size: 12px;
   font-weight: 400;
   line-height: 16px;
@@ -121,6 +127,12 @@ const Icon = styled.div`
   align-items: center;
   width: 16px;
   height: 20px;
+
+  svg {
+    path {
+      fill: ${({ theme }) => theme.textColor.messageDataContent.default};
+    }
+  }
 `;
 
 interface MessageDataContentProps {

src/theme.ts

@@ -27,6 +27,9 @@ export interface CommonTheme {
       hover: string;
       focus: string;
     };
+    messageDataContent: {
+      sidebar: string;
+    };
   };
   textColor: {
     incomingMessage: string;
@@ -50,6 +53,17 @@ export interface CommonTheme {
       focus: string;
     };
     activeButton: string;
+    messageDataContent: {
+      default: string;
+      link: {
+        default: string;
+        hover: string;
+        focus: string;
+        active: string;
+        disabled: string;
+      };
+      sideNote: string;
+    };
   };
   borderColor: {
     channelHeader: string;
@@ -66,6 +80,9 @@ export interface CommonTheme {
       hover: string;
       focus: string;
     };
+    messageDataContent: {
+      intentType: string;
+    };
   };
   accentColor: string;
 }
@@ -74,13 +91,33 @@ interface Theme {
   dark: CommonTheme;
 }
 
+interface ColorVariantsByTheme {
+  light: Record<string, string>;
+  dark: Record<string, string>;
+}
+
 export function getTheme({
   accentColor,
   botMessageBGColor,
 }: {
   accentColor?: string;
   botMessageBGColor?: string;
 }): Theme {
+  const colorVarsForBotMessageBGColor: ColorVariantsByTheme | undefined = botMessageBGColor
+    ? {
+        light: generateColorVariants(botMessageBGColor, 'light'),
+        dark: generateColorVariants(botMessageBGColor, 'dark'),
+      }
+    : undefined;
+  const colorVarsForAccentColor: ColorVariantsByTheme | undefined = accentColor
+    ? {
+        light: generateColorVariants(accentColor, 'light'),
+        dark: generateColorVariants(accentColor, 'dark'),
+      }
+    : undefined;
+  const satColorForBotMessageBGColor = botMessageBGColor ? getColorBasedOnSaturation(botMessageBGColor) : undefined;
+  const satColorForAccentColor = accentColor ? getColorBasedOnSaturation(accentColor) : undefined;
+
   return {
     light: {
       bgColor: {
@@ -93,10 +130,12 @@ export function getTheme({
         loadingScreen: 'var(--sendbird-light-background-50)',
         hover: {
           // Give 1 level darker color for hover
-          incomingMessage: botMessageBGColor
-            ? generateColorVariants(botMessageBGColor)[400]
+          incomingMessage: colorVarsForBotMessageBGColor
+            ? colorVarsForBotMessageBGColor['light'][400]
             : 'var(--sendbird-light-background-200)',
-          outgoingMessage: accentColor ? generateColorVariants(accentColor)[400] : 'var(--sendbird-light-primary-400)',
+          outgoingMessage: colorVarsForAccentColor
+            ? colorVarsForAccentColor['light'][400]
+            : 'var(--sendbird-light-primary-400)',
           suggestedReply: 'var(--sendbird-light-background-100)',
           carouselButton: 'var(--sendbird-light-background-100)',
         },
@@ -113,12 +152,13 @@ export function getTheme({
           hover: 'var(--sendbird-light-background-50)',
           focus: 'var(--sendbird-light-background-50)',
         },
+        messageDataContent: {
+          sidebar: 'var(--sendbird-light-background-200)',
+        },
       },
       textColor: {
-        incomingMessage: botMessageBGColor
-          ? getColorBasedOnSaturation(botMessageBGColor)
-          : 'var(--sendbird-dark-onlight-01)',
-        outgoingMessage: accentColor ? getColorBasedOnSaturation(accentColor) : 'var(--sendbird-light-ondark-01)',
+        incomingMessage: satColorForBotMessageBGColor ?? 'var(--sendbird-dark-onlight-01)',
+        outgoingMessage: satColorForAccentColor ?? 'var(--sendbird-light-ondark-01)',
         errorMessage: 'var(--sendbird-dark-onlight-01)',
         sentTime: 'var(--sendbird-dark-onlight-03)',
         sourceInfo: 'var(--sendbird-light-ondark-01)',
@@ -137,7 +177,24 @@ export function getTheme({
           hover: 'var(--sendbird-light-primary-300)',
           focus: 'var(--sendbird-light-onlight-02)',
         },
-        activeButton: accentColor ? getColorBasedOnSaturation(accentColor, 0.88) : 'var(--sendbird-dark-ondark-01)',
+        activeButton: satColorForAccentColor ?? 'var(--sendbird-dark-ondark-01)',
+        messageDataContent: {
+          default: 'var(--sendbird-light-onlight-01)',
+          link: {
+            default: colorVarsForAccentColor
+              ? colorVarsForAccentColor['light'][300]
+              : 'var(--sendbird-light-primary-300)',
+            hover: colorVarsForAccentColor
+              ? colorVarsForAccentColor['light'][400]
+              : 'var(--sendbird-light-primary-400)',
+            focus: colorVarsForAccentColor
+              ? colorVarsForAccentColor['light'][300]
+              : 'var(--sendbird-light-primary-300)',
+            active: 'var(--sendbird-light-onlight-01)',
+            disabled: 'var(--sendbird-light-onlight-03)',
+          },
+          sideNote: 'var(--sendbird-light-onlight-02)',
+        },
       },
       borderColor: {
         channelHeader: 'var(--sendbird-light-onlight-04)',
@@ -154,6 +211,9 @@ export function getTheme({
           hover: 'var(--sendbird-light-primary-300)',
           focus: 'var(--sendbird-light-primary-300)',
         },
+        messageDataContent: {
+          intentType: 'var(--sendbird-light-onlight-04)',
+        },
       },
       accentColor: accentColor ?? 'var(--sendbird-light-primary-300)',
     },
@@ -168,11 +228,13 @@ export function getTheme({
         loadingScreen: 'var(--sendbird-dark-background-600)',
         hover: {
           // Give 1 level lighter color for hover
-          incomingMessage: botMessageBGColor
-            ? generateColorVariants(botMessageBGColor)[200]
+          incomingMessage: colorVarsForBotMessageBGColor
+            ? colorVarsForBotMessageBGColor['dark'][200]
             : 'var(--sendbird-dark-background-400)',
           // Give 1 level darker color for hover
-          outgoingMessage: accentColor ? generateColorVariants(accentColor)[400] : 'var(--sendbird-dark-primary-300)',
+          outgoingMessage: colorVarsForAccentColor
+            ? colorVarsForAccentColor['dark'][400]
+            : 'var(--sendbird-dark-primary-300)',
           suggestedReply: 'var(--sendbird-dark-background-500)',
           carouselButton: 'var(--sendbird-dark-background-500)',
         },
@@ -189,12 +251,13 @@ export function getTheme({
           hover: 'var(--sendbird-light-onlight-03)',
           focus: 'var(--sendbird-light-onlight-03)',
         },
+        messageDataContent: {
+          sidebar: 'var(--sendbird-dark-background-400)',
+        },
       },
       textColor: {
-        outgoingMessage: accentColor ? getColorBasedOnSaturation(accentColor) : 'var(--sendbird-dark-onlight-01)',
-        incomingMessage: botMessageBGColor
-          ? getColorBasedOnSaturation(botMessageBGColor)
-          : 'var(--sendbird-dark-ondark-01)',
+        outgoingMessage: satColorForAccentColor ?? 'var(--sendbird-dark-onlight-01)',
+        incomingMessage: satColorForBotMessageBGColor ?? 'var(--sendbird-dark-ondark-01)',
         errorMessage: 'var(--sendbird-dark-ondark-01)',
         sentTime: 'var(--sendbird-dark-ondark-03)',
         sourceInfo: 'var(--sendbird-light-ondark-01)',
@@ -214,6 +277,19 @@ export function getTheme({
           focus: 'var(--sendbird-dark-ondark-02)',
         },
         activeButton: accentColor ? getColorBasedOnSaturation(accentColor, 0.88) : 'var(--sendbird-light-onlight-01)',
+        messageDataContent: {
+          default: 'var(--sendbird-dark-ondark-01)',
+          link: {
+            default: colorVarsForAccentColor
+              ? colorVarsForAccentColor['dark'][200]
+              : 'var(--sendbird-dark-primary-200)',
+            hover: colorVarsForAccentColor ? colorVarsForAccentColor['dark'][300] : 'var(--sendbird-dark-primary-300)',
+            focus: colorVarsForAccentColor ? colorVarsForAccentColor['dark'][200] : 'var(--sendbird-dark-primary-200)',
+            active: 'var(--sendbird-dark-ondark-01)',
+            disabled: 'var(--sendbird-dark-ondark-03)',
+          },
+          sideNote: 'var(--sendbird-dark-ondark-02)',
+        },
       },
       borderColor: {
         channelHeader: 'var(--sendbird-dark-ondark-04)',
@@ -230,6 +306,9 @@ export function getTheme({
           hover: 'var(--sendbird-dark-primary-200)',
           focus: 'var(--sendbird-dark-ondark-02)',
         },
+        messageDataContent: {
+          intentType: 'var(--sendbird-dark-ondark-02)',
+        },
       },
       accentColor: accentColor ?? 'var(--sendbird-dark-primary-200)',
     },