Add support to disable math formatting, add custom user avatar

streamlit_chat/__init__.py

@@ -60,10 +60,12 @@
 def message(message: str, 
             is_user: Optional[bool] = False, 
             avatar_style: Optional[AvatarStyle] = None,
+            avatar_custom: Optional[str] = None,
             logo: Optional[str]=None,
             seed: Optional[Union[int, str]] = 88,
             key: Optional[str] = None, 
             allow_html: Optional[bool] = False, 
+            allow_math: Optional[bool] = True,
             is_table: Optional[bool] = False):
     """
     Creates a new instance of streamlit-chat component
@@ -79,15 +81,20 @@ def message(message: str,
         The style for the avatar of the sender of message, default is bottts
         for not user, and pixel-art-neutral for user.
         st-chat uses https://www.dicebear.com/styles for the avatar
+    avatar_custom: str or None
+        Use a custom avatar from a URL instead of a pre-canned avatar icon.
+        If this is set `avatar_style` will be ignored.
     logo: Literal or None
         The logo to be used if we do not wish Avatars to be used. This is useful
         if we want the chatbot to be branded
     seed: int or str
         The seed for choosing the avatar to be used, default is 42.
     allow_html: Boolean 
-        makes it possible to use html in the message, when True, default False
+        Makes it possible to use html in the message, when True, default False
+    allow_math: Boolean
+        Makes it possible to use math (LaTeX) in the message, when True, default True
     is_table: Boolean
-        applies specific styling for tables
+        Applies specific styling for tables
     key: str or None
         An optional key that uniquely identifies this component. If this is
         None, and the component's arguments are changed, the component will
@@ -97,8 +104,8 @@ def message(message: str,
     """
 
     if logo:
-        _streamlit_chat(message=message, seed=seed, isUser=is_user, logo=logo, key=key, allow_html=allow_html, is_table=is_table)
+        _streamlit_chat(message=message, seed=seed, isUser=is_user, logo=logo, key=key, allow_html=allow_html, allow_math=allow_math, is_table=is_table)
     else:
         if not avatar_style:
             avatar_style = "fun-emoji" if is_user else "bottts"
-        _streamlit_chat(message=message, seed=seed, isUser=is_user, avatarStyle=avatar_style, key=key, allow_html=allow_html, is_table=is_table)
+        _streamlit_chat(message=message, seed=seed, isUser=is_user, avatarStyle=avatar_style, avatarCustom=avatar_custom, key=key, allow_html=allow_html, allow_math=allow_math, is_table=is_table)

streamlit_chat/frontend/src/message.tsx

@@ -9,14 +9,14 @@ import 'katex/dist/katex.min.css'
 import 'highlight.js/styles/monokai-sublime.css'
 import React, { ReactElement } from "react"
 
-function Message(props: React.PropsWithChildren<{ is_table: boolean, message: string, allow_html: boolean }>): ReactElement {
+function Message(props: React.PropsWithChildren<{ is_table: boolean, message: string, allow_html: boolean, allow_math: boolean }>): ReactElement {
     // Init React Markdown plugins
     const remarkPlugins = [
-        remarkMath,
+        ...(props.allow_math ? [remarkMath] : []),
         remarkGfm
     ]
     const rehypePlugins = [
-        rehypeKatex,
+        ...(props.allow_math ? [rehypeKatex] : []),
         ...(props.allow_html ? [rehypeRaw] : [])
     ]
 

streamlit_chat/frontend/src/stChat.tsx

@@ -16,8 +16,8 @@ class Chat extends StreamlitComponentBase {
     Streamlit.setFrameHeight(window.innerHeight)
 
     // const { isUser, avatarStyle, seed, message, logo } = this.props.args;
-    const { isUser, avatarStyle, seed, message, logo, allow_html, is_table } = this.props.args;
-    const avatarUrl: string = !!logo ? logo: `https://api.dicebear.com/5.x/${avatarStyle}/svg?seed=${seed}`
+    const { isUser, avatarStyle, avatarCustom, seed, message, logo, allow_html, allow_math, is_table } = this.props.args;
+    const avatarUrl: string = !!logo ? logo: !!avatarCustom ? avatarCustom : `https://api.dicebear.com/5.x/${avatarStyle}/svg?seed=${seed}`
 
     // Streamlit sends us a theme object via props that we can use to ensure
     // that our component has visuals that match the active theme in a
@@ -42,7 +42,7 @@ class Chat extends StreamlitComponentBase {
     return (
       <ChatElement isUser={isUser} avatar={!(avatarStyle === 'no-avatar')}>
         <Avatar src={avatarUrl}/>
-        <Message is_table={is_table} message={message} allow_html={allow_html}/>
+        <Message is_table={is_table} message={message} allow_html={allow_html} allow_math={allow_math}/>
       </ChatElement>
     )
   }

test_component.py

@@ -97,6 +97,7 @@ def on_btn_click():
                 st.session_state['generated'][i]['data'], 
                 key=f"{i}", 
                 allow_html=True,
+                allow_math=True,
                 is_table=st.session_state['generated'][i]['type']=='table',
                 avatar_style=NO_AVATAR
             )