Merge pull request #301 from FlowiseAI/bugfix/Code-Block-Color

Bugfix/white color within code block

Author: HenryHengZJ

dist/components/bubbles/BotBubble.d.ts.map

@@ -58,12 +58,26 @@ export const BotBubble = (props: Props) => {
     if (el) {
       el.innerHTML = Marked.parse(props.message.message);
 
-      // Apply textColor to all links, headings, and other markdown elements
+      // Apply textColor to all links, headings, and other markdown elements except code
       const textColor = props.textColor ?? defaultTextColor;
-      el.querySelectorAll('a, h1, h2, h3, h4, h5, h6, strong, em, blockquote, li, code, pre').forEach((element) => {
+      el.querySelectorAll('a, h1, h2, h3, h4, h5, h6, strong, em, blockquote, li').forEach((element) => {
         (element as HTMLElement).style.color = textColor;
       });
 
+      // Code blocks (with pre) get white text
+      el.querySelectorAll('pre').forEach((element) => {
+        (element as HTMLElement).style.color = '#FFFFFF';
+        // Also ensure any code elements inside pre have white text
+        element.querySelectorAll('code').forEach((codeElement) => {
+          (codeElement as HTMLElement).style.color = '#FFFFFF';
+        });
+      });
+
+      // Inline code (not in pre) gets green text
+      el.querySelectorAll('code:not(pre code)').forEach((element) => {
+        (element as HTMLElement).style.color = '#4CAF50'; // Green color
+      });
+
       // Set target="_blank" for links
       el.querySelectorAll('a').forEach((link) => {
         link.target = '_blank';
@@ -267,10 +281,25 @@ export const BotBubble = (props: Props) => {
     const setArtifactRef = (el: HTMLSpanElement) => {
       if (el) {
         const textColor = props.textColor ?? defaultTextColor;
-        el.querySelectorAll('a, h1, h2, h3, h4, h5, h6, strong, em, blockquote, li, code, pre').forEach((element) => {
+        // Apply textColor to all elements except code blocks
+        el.querySelectorAll('a, h1, h2, h3, h4, h5, h6, strong, em, blockquote, li').forEach((element) => {
           (element as HTMLElement).style.color = textColor;
         });
 
+        // Code blocks (with pre) get white text
+        el.querySelectorAll('pre').forEach((element) => {
+          (element as HTMLElement).style.color = '#FFFFFF';
+          // Also ensure any code elements inside pre have white text
+          element.querySelectorAll('code').forEach((codeElement) => {
+            (codeElement as HTMLElement).style.color = '#FFFFFF';
+          });
+        });
+
+        // Inline code (not in pre) gets green text
+        el.querySelectorAll('code:not(pre code)').forEach((element) => {
+          (element as HTMLElement).style.color = '#4CAF50'; // Green color
+        });
+
         el.querySelectorAll('a').forEach((link) => {
           link.target = '_blank';
         });

dist/components/bubbles/GuestBubble.d.ts.map

@@ -31,10 +31,24 @@ export const GuestBubble = (props: Props) => {
 
       // Apply textColor to all links, headings, and other markdown elements
       const textColor = props.textColor ?? defaultTextColor;
-      el.querySelectorAll('a, h1, h2, h3, h4, h5, h6, strong, em, blockquote, li, code, pre').forEach((element) => {
+      el.querySelectorAll('a, h1, h2, h3, h4, h5, h6, strong, em, blockquote, li').forEach((element) => {
         (element as HTMLElement).style.color = textColor;
       });
 
+      // Code blocks (with pre) get white text
+      el.querySelectorAll('pre').forEach((element) => {
+        (element as HTMLElement).style.color = '#FFFFFF';
+        // Also ensure any code elements inside pre have white text
+        element.querySelectorAll('code').forEach((codeElement) => {
+          (codeElement as HTMLElement).style.color = '#FFFFFF';
+        });
+      });
+
+      // Inline code (not in pre) gets green text
+      el.querySelectorAll('code:not(pre code)').forEach((element) => {
+        (element as HTMLElement).style.color = '#4CAF50'; // Green color
+      });
+
       // Set target="_blank" for links
       el.querySelectorAll('a').forEach((link) => {
         link.target = '_blank';