How to change the font-size of conversation messages in the chat?

[Munkhtegsh]

I tried to apply this concept by selecting ".msg p { font-size:12px important!} in css, but it didn’t work.

• App is running locally
• Python: 3.8 and Streamlit: 1.27.2

[edsaac]

Try selecting the p tags in the stChatMessageContent class

import streamlit as st

st.markdown(
    """
    <style>
    [data-testid="stChatMessageContent"] p{
        font-size: 1.5rem;
    }
    </style>
    """, unsafe_allow_html=True
)

"""
# A Title

Some normal text outside the chat
"""

with st.chat_message("user"):
    """
    This text is inside the chat message
    """

with st.chat_message("ai"):
    """
    This text too
    """

with st.chat_message("human", avatar="🦟"):
    """
    hehe
    """

[Munkhtegsh]

Thank you for the response @edsaac
This solution works when I use st.chat_message(), but it’s not applying to my case.

I am using message from streamlit in my code and trying to style it.

from streamlit_chat import message

st.session_state.messages.append(SystemMessage(content='I am trying style this'))
for i, msg in enumarate(st.session_state.messages1:):
     message(msg.content, is_user=False, key=f'{i})

I tried a few different ways to css selector to work using st.markdow like how you used, but still no luck. Would you mind suggest more options?

[edsaac]

Ah I assumed you were using the streamlit’s own chat elements and not an external component. The CSS you define with st.markdown won’t affect external components because they are their own iframe. In this case, each message is its own iframe :/.

Here is a bad idea:

streamlit_chat accepts html so you could pass strings with some custom text size. Here is a bad implementation to override the streamlit_chat.message function so it accepts a font size and wraps everything in another p tag.

import streamlit as st
from streamlit_chat import message as msg

def message(txt:str, size="1.25rem", **kwargs):
    styled_text = f"""<p style="font-size:{size};">{txt}</p>"""
    msg(styled_text, allow_html=True, **kwargs)

message("My message") 
message("Hello bot!", size="2rem", is_user=True)
message("Big hi!", size="6rem")

But it’s probably not good idea to default the allow_html to True if you expect user input.

[Atharva_Sawant]

hi ! you can refer this docs to change your font size as per your needs

st.metric - Streamlit Docs