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.

[dosubot[bot]]

Hi, @codenprogressive. I'm Dosu, and I'm helping the langflow team manage their backlog. I'm marking this issue as stale.

Issue Summary

• The issue requests an enhancement for better Markdown table rendering in the playground chat.
• @ch4mploo provided a detailed analysis, identifying extra newlines as the cause of the display issue.
• Previous versions of langflow displayed tables correctly, as noted by @ch4mploo.
• @buntys2010 asked if the issue was resolved, mentioning a recent pull request did not fix it.

Next Steps

• Please confirm if this issue is still relevant to the latest version of the langflow repository by commenting here.
• If there is no further activity, the issue will be automatically closed in 7 days.

Thank you for your understanding and contribution!

[codenprogressive]

@dosu this still needed

[dosubot[bot]]

@ogabrielluiz, the user @codenprogressive has confirmed that the issue regarding better Markdown table rendering in the playground chat is still relevant. Could you please assist them with this?

[buntys2010]

I see this has been fixed in recent release of V1.11

I can see better table and markdown code then earlier version.

[dosubot[bot]]

I found a similar closed issue regarding Markdown formatting not being rendered correctly in the chat interface. This issue was resolved by a pull request that addressed streaming, chat Markdown, and cache management ^[1].

To enhance Markdown rendering in the Langflow playground chat, particularly for tables, ensure that the remarkGfm plugin is used with the react-markdown component. This plugin supports GitHub Flavored Markdown, which includes table syntax. The current implementation already includes this plugin, but if tables are still not rendering correctly, you may need to check the CSS styles applied to the Markdown content to ensure they do not introduce unwanted newlines or spacing ^[2][3][4].

Additionally, specific functions like dict_to_markdown_table and list_of_dicts_to_markdown_table have been added to format data into Markdown tables, which can then be rendered in the chat interface ^[5]. If the issue persists, reviewing these implementations and the associated CSS might help identify the cause of the problem.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}