Enhance Markdown render in playground chat

[codenprogressive]

Feature Request

Enhance Markdown rendering in playground chat. For instance, if you have tables as outputs, then they will not display nicely.

For example, this is a table in Markdown format:

	system Categories	total_count
0	Network	67
1	Container	6
2	VMWare	2
3	Hybrid	1
4	Storage	6
5	Servers	7
6	Bare Metal	1
7	Infra (Internal use)	1

See display in Langflow playground chat:

[ch4mploo]

Hi, I am also facing this issue and would like the playground dialogue to display a markdown table correctly. I recall that an older version of langflow is able to display a markdown table within the playground dialogue space (not sure which specific version, but it's definitely before version 1.0).

I've been trying to investigate this issue, here's my finding:

1. The reason that the playground dialogue is unable to display a markdown table correctly is it always add an additional newline in each row of data.
2. However, when I have inspected the text data from the memory, it did not have the additional newlines. When this text is placed in a markdown previewer, it was able to show the table correctly.

Here's a quick example using the Memory Chatbot template, with OpenAI gpt-4o-mini as the LLM.

Prompt template:

You are a friendly robot that will answer all questions given by the user.
#####
Context: {context}
#####
User: {user_message}

In raw text:

User: Create a table of comparison between red and green apple
AI: 
Sure! Here’s a comparison table between red and green apples:

| Feature | Red Apples | Green Apples |

|-----------------------|----------------------------------|----------------------------------|

| Color | Bright red to deep crimson | Bright green |

| Taste | Sweet, sometimes slightly tart | Tart and crisp |

| Texture | Generally softer | Crunchy and firm |

| Common Varieties | Red Delicious, Fuji, Gala | Granny Smith, Pippin |

| Nutritional Value | High in antioxidants, vitamin C | High in fiber, vitamin C |

| Best Uses | Eating fresh, baking, salads | Baking, cooking, salads |

| Shelf Life | Typically shorter | Generally longer |

| Sugar Content | Higher sugar content | Lower sugar content |

Feel free to ask if you need more information!

Viewed from the memory:

Viewed with a markdown previewer:

in raw text (only the response):

Sure! Here’s a comparison table between red and green apples:

| Feature                | Red Apples                       | Green Apples                     |
|-----------------------|----------------------------------|----------------------------------|
| **Color**             | Bright red to deep crimson       | Bright green                     |
| **Taste**             | Sweet, sometimes slightly tart   | Tart and crisp                   |
| **Texture**           | Generally softer                 | Crunchy and firm                 |
| **Common Varieties**  | Red Delicious, Fuji, Gala        | Granny Smith, Pippin             |
| **Nutritional Value** | High in antioxidants, vitamin C  | High in fiber, vitamin C        |
| **Best Uses**         | Eating fresh, baking, salads     | Baking, cooking, salads          |
| **Shelf Life**        | Typically shorter                 | Generally longer                 |
| **Sugar Content**     | Higher sugar content              | Lower sugar content              |

Feel free to ask if you need more information!

Hope this finding will help to solve this issue. This is tested with langflow version 1.0.15.

[buntys2010]

Is this issue resolved?

Changes in pull 3687 doesn't seems to have fix this issue.