N8N Chat Embed Text Rendering Issue

[asitcoderapper]

Hey,

I’ve embedded the n8n chat module (@n8n/chat - npm) into my react app, and it’s working great.

Just one thing is that it has issues rendering lists (bullet or numbered) and overflows the chat bubble. Also the font size increases as compared to the normal text.

Screenshot attached below. Could someone help me with the solution?

Thanks in advance.

Information on your n8n setup

• n8n version: 1.71.3
• Database (default: SQLite):
• n8n EXECUTIONS_PROCESS setting (default: own, main):
• Running n8n via (Docker, npm, n8n cloud, desktop app): N8N Cloud
• Operating system: MacOS

[ria]

Hi @asitcoderapper

Thanks for posting here and welcome to the community!

Can you check what the response from the AI is? Looks like it’s returning in HTML format that’s being rendered. You might want to do add some instructions on the output format.

[asitcoderapper]

Hi @ria

The response of the AI Agent Node Includes \n and other markdown formatting. Below is an example of the output.

Here's the delightful collection of candle products we offer at Tranquil Haven:\n\n- **Scented Candles Tin**\n\n- **Scented Candles Pillar**  \n   - Lavender Fields  \n   - Citrus Zest  \n   - Patchouli Spice  \n   - Vanilla Bourbon\n   \n- **Scented Candles Glass**  \n   - Eucalyptus Mint  \n   - Jasmine Bloom  \n   - Ocean Breeze  \n   - White Tea & Sage  \n\nIf you have any specific preferences or need more details about any of these candles, feel free to ask! 😊

Could you please recommend me some additional prompts to format the output?

Thanks a lot