https://github.com/farah-s/streamlit_custom_chat
Streamlit custom chat messages and container for the chat messages
https://github.com/farah-s/streamlit_custom_chat
reactjs streamlit-component streamlit-components
Last synced: 2 months ago
JSON representation
Streamlit custom chat messages and container for the chat messages
- Host: GitHub
- URL: https://github.com/farah-s/streamlit_custom_chat
- Owner: Farah-S
- License: mit
- Created: 2023-12-02T21:01:58.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-01-02T23:44:34.000Z (over 2 years ago)
- Last Synced: 2025-02-11T13:43:05.566Z (over 1 year ago)
- Topics: reactjs, streamlit-component, streamlit-components
- Language: Python
- Homepage:
- Size: 10.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# streamlit_custom_chat
Streamlit custom chat messages and container for the chat messages, takes an array of messages for an llm, where each messages can have user or assitant role. The parameters are as follow:
Args:
messages (list, optional):
Messages that will be displayed. Each message must be in the form of
{"role":"","content":"","key":""}
where the role can be "user" or "assistant",
content is the message,
key uniquely identifies each messages.
Defaults to [].
key (string, optional):
uniquely identifies the container instance. Defaults to None.
containerStyle (dict, optional):
Allows the customization of the chat container style with CSS.
The values that can be changed and their default values are
{
"overflowY": "auto",
"scrollBackgroundColor": "transparent",
"borderColor": "transparent",
"borderRadius": "2rem",
"height": "550px",
"boxShadow": "inset 0px 0 20px 5px rgb(219 219 219 / 11%), 0px 0px 0px 0px rgb(0 0 0 / 8%), 0px 1px 3px 0px rgb(0 0 0 / 0%)",
"backgroundColor": "#fafaff"
}.
bubbleStyle (dict, optional):
Allows the customization of the chat bubble style with CSS.
The values that can be changed and their default values are
{
textColor:"#534eb1",
userBackgroundColor:"rgb(232, 243, 255)",
agentBackgroundColor:"#f0efff",
paddingRight:"10px",
paddingLeft:"10px",
paddingBottom:"7px",
paddingTop:"7px",
fontWeight:"525",
borderRadius:"2rem",
fontFamily:"itim"
}.
Returns:
None
## Installation instructions
```sh
python -m pip install --index-url https://test.pypi.org/simple/ --no-deps streamlit_custom_chat
```
## Usage instructions
Example of how to use without customization
```python
import streamlit as st
from streamlit_custom_chat import ChatContainer
ChatContainer(messages=[{"role":"assistant", "content":"hello!", "key":"0"}], key="")
```
Example of how to use with customization
```python
import streamlit as st
from streamlit_custom_chat import ChatContainer
ChatContainer(messages=[{"role":"assistant", "content":"hello!", "key":"0"}, {"role":"user", "content":"hello!", "key":"1"}], key="", containerStyle={"backgroundColor":"pink"}, bubbleStyle={"userBackgroundColor":"#f0eeef"})
```
For more example please check the app.py