Multiline text in chat_message interface

[Preetham_Manjunatha]

Summary

Is there a way to output multiline text while in for loop? First line should print in chat_message and then second line should print.

Steps to reproduce

Code snippet:

with st.chat_message("assistant"):
                message_placeholder = st.empty()
                assistant_response = "Hey there, I am Line 1 of text!  \n Hey there, I am Line 2 of text."

                # Simulate stream of response with milliseconds delay
                full_response = ""
                for chunk in assistant_response.split():
                    full_response += chunk + " "
                    time.sleep(0.01)

                    # Add a blinking cursor to simulate typing
                    message_placeholder.markdown(full_response + "▌")

Debug info

• Streamlit version: (get it with $ streamlit version) – 1.27.0
• Python version: (get it with $ python --version) – 3.10
• Using Conda? PipEnv? PyEnv? Pex? – Conda
• OS version: macOS 13.6
• Browser version: Chrome 117.0

[Caroline]

Hey @Preetham_Manjunatha,

I think the reason this isn’t working with your current code is because you have to put two whitespace characters in front of the newline character in order for it to properly appear as a newline in Streamlit (check out this related thread). When you’re splitting the text with assistant_response.split(), you’re getting rid of the spaces, so the newline isn’t rendering because we don’t have the required two spaces before it.

You can see what I mean if you change your code to split on the exclamation point instead:

with st.chat_message("assistant"):
                message_placeholder = st.empty()
                assistant_response = "Hey there, I am Line 1 of text!  \nHey there, I am Line 2 of text."

                # Simulate stream of response with milliseconds delay
                full_response = ""
                for chunk in assistant_response.split('!'):
                    full_response += chunk + " "
                    time.sleep(0.01)

                    # Add a blinking cursor to simulate typing
                    message_placeholder.markdown(full_response + "▌")

This is what we get:

[Preetham_Manjunatha]

@Caroline

'!'

It directly splits at the ! mark. So the chunk would be just two lines (sentences). Is there a way to split every words and ! mark at end and then line 2?

[Caroline]

Hey @Preetham_Manjunatha,

To keep the original chunks, you could still split on the spaces but preserve them:

import streamlit as st
import time
import re

with st.chat_message("assistant"):
                message_placeholder = st.empty()
                assistant_response = "Hey there, I am Line 1 of text!  \nHey there, I am Line 2 of text."

                # Simulate stream of response with milliseconds delay
                full_response = ""
                for chunk in re.split(r'(\s+)', assistant_response):
                    full_response += chunk + " "
                    time.sleep(0.01)

                    # Add a blinking cursor to simulate typing
                    message_placeholder.markdown(full_response + "▌")

[Preetham_Manjunatha]

@Caroline, thanks a lot! I also used the re.split() to split them on spacing and !.