diff --git a/streamlit_chat/__init__.py b/streamlit_chat/__init__.py index fa4fc23..b516806 100644 --- a/streamlit_chat/__init__.py +++ b/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) diff --git a/streamlit_chat/frontend/package-lock.json b/streamlit_chat/frontend/package-lock.json index af9e48b..9abb9c6 100644 --- a/streamlit_chat/frontend/package-lock.json +++ b/streamlit_chat/frontend/package-lock.json @@ -1,12 +1,12 @@ { "name": "frontend", - "version": "0.1.0", + "version": "0.1.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "frontend", - "version": "0.1.0", + "version": "0.1.1", "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/streamlit_chat/frontend/src/message.tsx b/streamlit_chat/frontend/src/message.tsx index 8a6d468..27ba2a4 100644 --- a/streamlit_chat/frontend/src/message.tsx +++ b/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] : []) ] diff --git a/streamlit_chat/frontend/src/stChat.tsx b/streamlit_chat/frontend/src/stChat.tsx index 17189dc..a7bb718 100644 --- a/streamlit_chat/frontend/src/stChat.tsx +++ b/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 ( - + ) } diff --git a/test_component.py b/test_component.py index bb4f571..6a40a27 100644 --- a/test_component.py +++ b/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 )