1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
Metadata-Version: 2.1
Name: streamlit-chat
Version: 0.0.2.2
Summary: A streamlit component, to make chatbots
Home-page: https://github.com/AI-Yash/st-chat
Author: Yash Pravin Pawar, Yash Vardhan Kapil
Author-email: yashpawarp@gmail.com
Keywords: chat streamlit streamlit-component
Classifier: Programming Language :: Python :: 3
Classifier: Operating System :: OS Independent
Requires-Python: >=3.8
Description-Content-Type: text/markdown
License-File: LICENSE
Requires-Dist: streamlit (>=0.63)
# st-chat
Streamlit Component, for a Chat-bot UI, [example app](https://share.streamlit.io/ai-yash/st-chat/main/examples/chatbot.py)
authors - [@yashppawar](https://github.com/yashppawar) & [@YashVardhan-AI](https://github.com/yashvardhan-ai)
## Installation
Install `streamlit-chat` with pip
```bash
pip install streamlit-chat
```
usage, import the `message` function from `streamlit_chat`
```py
import streamlit as st
from streamlit_chat import message
message("My message")
message("Hello bot!", is_user=True) # align's the message to the right
```
### Screenshot
Another example for html in chat, and Refresh chat button
```py
import streamlit as st
from streamlit_chat import message
from streamlit.components.v1 import html
def on_input_change():
user_input = st.session_state.user_input
st.session_state.past.append(user_input)
st.session_state.generated.append("The messages from Bot\nWith new line")
def on_btn_click():
del st.session_state.past[:]
del st.session_state.generated[:]
audio_path = "https://docs.google.com/uc?export=open&id=16QSvoLWNxeqco_Wb2JvzaReSAw5ow6Cl"
img_path = "https://www.groundzeroweb.com/wp-content/uploads/2017/05/Funny-Cat-Memes-11.jpg"
youtube_embed = '''
<iframe width="400" height="215" src="https://www.youtube.com/embed/LMQ5Gauy17k" title="YouTube video player" frameborder="0" allow="accelerometer; encrypted-media;"></iframe>
'''
markdown = """
### HTML in markdown is ~quite~ **unsafe**
<blockquote>
However, if you are in a trusted environment (you trust the markdown). You can use allow_html props to enable support for html.
</blockquote>
* Lists
* [ ] todo
* [x] done
Math:
Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following
equation.
$$
L = \\frac{1}{2} \\rho v^2 S C_L
$$
~~~py
import streamlit as st
st.write("Python code block")
~~~
~~~js
console.log("Here is some JavaScript code")
~~~
"""
table_markdown = '''
A Table:
| Feature | Support |
| ----------: | :------------------- |
| CommonMark | 100% |
| GFM | 100% w/ `remark-gfm` |
'''
st.session_state.setdefault(
'past',
['plan text with line break',
'play the song "Dancing Vegetables"',
'show me image of cat',
'and video of it',
'show me some markdown sample',
'table in markdown']
)
st.session_state.setdefault(
'generated',
[{'type': 'normal', 'data': 'Line 1 \n Line 2 \n Line 3'},
{'type': 'normal', 'data': f'<audio controls src="{audio_path}"></audio>'},
{'type': 'normal', 'data': f'<img width="100%" height="200" src="{img_path}"/>'},
{'type': 'normal', 'data': f'{youtube_embed}'},
{'type': 'normal', 'data': f'{markdown}'},
{'type': 'table', 'data': f'{table_markdown}'}]
)
st.title("Chat placeholder")
chat_placeholder = st.empty()
with chat_placeholder.container():
for i in range(len(st.session_state['generated'])):
message(st.session_state['past'][i], is_user=True, key=f"{i}_user")
message(
st.session_state['generated'][i]['data'],
key=f"{i}",
allow_html=True,
is_table=True if st.session_state['generated'][i]['type']=='table' else False
)
st.button("Clear message", on_click=on_btn_click)
with st.container():
st.text_input("User Input:", on_change=on_input_change, key="user_input")
```
### Screenshot
|
