[BUG] Markdown colors are hardcoded in chat messages

[yavisht]

Bot message setting for text color does not work for links, headings and other markdown elements: (See examples below)

Same issue for iframe embed code as well as react component. From what I can see the color value is hardcode and there is no way to override it.

[HenryHengZJ]

Related to the embed side: https://github.com/FlowiseAI/FlowiseChatEmbed/blob/main/src/components/bubbles/BotBubble.tsx#L375

[yavisht]

Related to the embed side: https://github.com/FlowiseAI/FlowiseChatEmbed/blob/main/src/components/bubbles/BotBubble.tsx#L375

@HenryHengZJ I have found the fix for this.

Caused by the className "prose" which is required by

plugins: [
  require('@tailwindcss/typography'),
],

Fix (NOTE: This is not tested properly and im not sure if all affected elements are targeted)

Update the tailwind config for elements to inherit colors instead of using the default theme vars.

theme: {
  typography: {
    DEFAULT: {
      css: {
        a: {
          color: 'inherit',
        },
        h1: { color: 'inherit' },
        h2: { color: 'inherit' },
        h3: { color: 'inherit' },
        h4: { color: 'inherit' },
        h5: { color: 'inherit' },
        h6: { color: 'inherit' },
        th: {
          color: 'inherit',
        },
        blockquote: {
          color: 'inherit',
        },
        strong: {
          color: 'inherit',
        },
        tr: {
          borderBottomColor: 'inherit',
        },
        ul: {
          color: 'inherit',
        },
        ol: {
          color: 'inherit',
        },
        li: {
          color: 'inherit',
          '&::marker': {
            color: 'inherit',
          },
        },
      },
    },
  },
}

Results