From d3d455fb6a765f30d97d0ea704f8681716417e7a Mon Sep 17 00:00:00 2001 From: Brian Antonelli Date: Mon, 17 Jul 2023 23:17:34 -0400 Subject: [PATCH 1/2] Add support to disable math formatting --- streamlit_chat/__init__.py | 11 +++++++---- streamlit_chat/frontend/package-lock.json | 4 ++-- streamlit_chat/frontend/src/message.tsx | 6 +++--- streamlit_chat/frontend/src/stChat.tsx | 4 ++-- test_component.py | 1 + 5 files changed, 15 insertions(+), 11 deletions(-) diff --git a/streamlit_chat/__init__.py b/streamlit_chat/__init__.py index fa4fc23..bdde3d8 100644 --- a/streamlit_chat/__init__.py +++ b/streamlit_chat/__init__.py @@ -64,6 +64,7 @@ def message(message: str, 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 @@ -85,9 +86,11 @@ def message(message: str, 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 +100,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, 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..4c7c857 100644 --- a/streamlit_chat/frontend/src/stChat.tsx +++ b/streamlit_chat/frontend/src/stChat.tsx @@ -16,7 +16,7 @@ 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 { isUser, avatarStyle, seed, message, logo, allow_html, allow_math, is_table } = this.props.args; const avatarUrl: string = !!logo ? logo: `https://api.dicebear.com/5.x/${avatarStyle}/svg?seed=${seed}` // Streamlit sends us a theme object via props that we can use to ensure @@ -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 ) From 9d0b4624037610d1c1b465a55e45d8c2983cf6ec Mon Sep 17 00:00:00 2001 From: Brian Antonelli Date: Tue, 18 Jul 2023 14:43:05 -0400 Subject: [PATCH 2/2] Allow custom user avatar --- streamlit_chat/__init__.py | 6 +++++- streamlit_chat/frontend/src/stChat.tsx | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/streamlit_chat/__init__.py b/streamlit_chat/__init__.py index bdde3d8..b516806 100644 --- a/streamlit_chat/__init__.py +++ b/streamlit_chat/__init__.py @@ -60,6 +60,7 @@ 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, @@ -80,6 +81,9 @@ 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 @@ -104,4 +108,4 @@ def message(message: str, 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, allow_math=allow_math, 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/src/stChat.tsx b/streamlit_chat/frontend/src/stChat.tsx index 4c7c857..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, allow_math, 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