Add font and icon size adjustment

app.py

@@ -30,7 +30,7 @@ def get_ai_response(prompt, chat_history):
     st.session_state.is_streaming = True
     st.session_state.response = ""
     
-    with st.chat_message("ai", avatar=assistant_avatar):
+    with st.chat_message("ai", avatar=st.session_state.assistant_avatar):
         penalty_kwargs = {
             "frequency_penalty" if penalty_type == "Frequency Penalty" else "presence_penalty": penalty_value
         }
@@ -91,7 +91,7 @@ inline_pattern = r"`([^`\n]+?)`"
 def display_messages():
     for i, message in enumerate(st.session_state.messages):
         name = "user" if message["role"] == "USER" else "ai"
-        avatar = user_avatar if message["role"] == "USER" else assistant_avatar
+        avatar = st.session_state.user_avatar if message["role"] == "USER" else st.session_state.assistant_avatar
         with st.chat_message(name, avatar=avatar):
             shown_message = message["text"].replace("\n", "  \n")\
                                            .replace("<", "\\<")\
@@ -252,11 +252,17 @@ with st.sidebar:
         }
         selected_font = st.selectbox("Choose a font", ["Default"] + list(font_options.keys()))
         
+        st.header("Change the font size")
+        st.session_state.font_size  = st.slider("Font size", min_value=16.0, max_value=50.0, value=16.0, step=1.0)
+        
         st.header("Change the user's icon")
-        user_avatar = st.file_uploader("Choose an image", type=["png", "jpg", "jpeg", "webp", "gif", "bmp", "svg",], key="user_avatar_uploader")
+        st.session_state.user_avatar = st.file_uploader("Choose an image", type=["png", "jpg", "jpeg", "webp", "gif", "bmp", "svg",], key="user_avatar_uploader")
     
         st.header("Change the assistant's icon")
-        assistant_avatar = st.file_uploader("Choose an image", type=["png", "jpg", "jpeg", "webp", "gif", "bmp", "svg",], key="assistant_avatar_uploader")
+        st.session_state.assistant_avatar = st.file_uploader("Choose an image", type=["png", "jpg", "jpeg", "webp", "gif", "bmp", "svg",], key="assistant_avatar_uploader")
+
+        st.header("Change the icon size")
+        st.session_state.avatar_size  = st.slider("Icon size", min_value=2.0, max_value=20.0, value=2.0, step=0.2)
 
 
 # After Stop generating
@@ -272,6 +278,33 @@ if selected_font != "Default":
         st.markdown(f'<style>{css.read()}</style>', unsafe_allow_html=True)
     st.markdown(f'<style>body * {{ font-family: "{font_options[selected_font]}", serif !important; }}</style>', unsafe_allow_html=True)
 
+# Change font size
+st.markdown(f'<style>[data-testid="stChatMessageContent"] .st-emotion-cache-cnbvxy p{{font-size: {st.session_state.font_size}px;}}</style>', unsafe_allow_html=True)
+
+# Change icon size
+# (CSS element names may be subject to change.)
+AVATAR_SIZE_STYLE = f"""
+                <style>
+                    [data-testid="chatAvatarIcon-user"] {{
+                        width: {st.session_state.avatar_size}rem;
+                        height: {st.session_state.avatar_size}rem;
+                    }}
+                    [data-testid="chatAvatarIcon-assistant"] {{
+                        width: {st.session_state.avatar_size}rem;
+                        height: {st.session_state.avatar_size}rem;
+                    }}
+                    [data-testid="stChatMessage"] .st-emotion-cache-1pbsqtx {{
+                        width: {st.session_state.avatar_size / 1.6}rem;
+                        height: {st.session_state.avatar_size / 1.6}rem;
+                    }}
+                    [data-testid="stChatMessage"] .st-emotion-cache-p4micv {{
+                        width: {st.session_state.avatar_size}rem;
+                        height: {st.session_state.avatar_size}rem;
+                    }}
+                </style>
+"""
+st.markdown(AVATAR_SIZE_STYLE, unsafe_allow_html=True)
+
 display_messages()
 
 # After Retry
@@ -293,7 +326,7 @@ if prompt := st.chat_input("Enter your message here..."):
                           .replace("<", "\\<")\
                           .replace(">", "\\>")
 
-    with st.chat_message("user", avatar=user_avatar):
+    with st.chat_message("user", avatar=st.session_state.user_avatar):
         st.write(shown_message)
     
     st.session_state.messages.append({"role": "USER", "text": prompt})