Skip to content

Commit 63a0b20

Browse files
authored
fix: preserve line breaks in received messages (#2372)
So after careful investigation on #2367 and #2264, I tested as many scenarios as I could and concluded the following: * Line breaks in received messages (both user and AI) are not preserved properly, and this PR fixes that * There will still be cases of "improper" or "unexpected" rendering - for example, multiple consecutive new lines like this: ```text print("Line 1") print("Line 3") print("Line 6") ``` which will be rendered into this: ```text print("Line 1") print("Line 3") print("Line 6") ``` or code like this: ```python import os import streamlit as st from app_env import configure_logger configure_logger(os.path.basename(__file__)) # This file contains the menu for the app. It is used to navigate between pages and to show the documentation link. # The default page to show when logged in DEFAULT_PAGE = "pages/example.py" def authenticated_menu(): # Show a navigation menu for authenticated users with st.sidebar: st.sidebar.page_link("pages/example.py", label="Example Link", icon="🚀") ``` will be rendered into this: <img width="1051" height="1141" alt="image" src="https://github.com/user-attachments/assets/8608330a-82a9-4770-99bc-6c36001ccf06" /> This happens because **Chainlit treats both user and AI messages as Markdown**, and changing this behavior would not only be a breaking change, but also potentially undesirable, as LLMs will interpret such text as Markdown too and we can''t distinguish cases where it should be treated as such and where it shouldn't. Any future issues caused by rendering user messages as Markdown should be closed with the resolution `won't fix`, and this behavior should be preserved at least until (if) #2357 is implemented. If users desire to preserve formatting, they may use the \``` block: <pre> ```python import os import streamlit as st from app_env import configure_logger configure_logger(os.path.basename(__file__)) # This file contains the menu for the app. It is used to navigate between pages and to show the documentation link. # The default page to show when logged in DEFAULT_PAGE = "pages/example.py" def authenticated_menu(): # Show a navigation menu for authenticated users with st.sidebar: st.sidebar.page_link("pages/example.py", label="Example Link", icon="🚀") ``` </pre> will be rendered as <img width="533" height="639" alt="image" src="https://github.com/user-attachments/assets/3cfc8bdc-0411-42d7-b12f-743b8c999111" />
1 parent fc38d78 commit 63a0b20

File tree

1 file changed

+1
-1
lines changed

1 file changed

+1
-1
lines changed

frontend/src/components/Markdown.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ const Markdown = ({
124124

125125
return (
126126
<ReactMarkdown
127-
className={cn('prose lg:prose-xl', className)}
127+
className={cn('prose lg:prose-xl whitespace-pre-wrap', className)}
128128
remarkPlugins={remarkPlugins}
129129
rehypePlugins={rehypePlugins}
130130
components={{

0 commit comments

Comments
 (0)