st-chat

Streamlit 组件，用于聊天机器人 UI，示例应用

作者 - @yashppawar 和 @YashVardhan-AI

安装

使用 pip 安装 streamlit-chat

pip install streamlit-chat 

使用方法：从 streamlit_chat 中导入 message 函数

import streamlit as st
from streamlit_chat import message

message("我的消息") 
message("你好，机器人！", is_user=True)  # 将消息对齐到右侧

截图

另一个关于在聊天中使用 HTML 以及刷新聊天按钮的示例

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("来自机器人的消息\n带换行")

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 = """
### 在 Markdown 中使用 HTML 是~相当~ **不安全** 的
<blockquote>
  然而，如果你处于受信任的环境（你信任该 Markdown），你可以使用 allow_html 属性来启用对 HTML 的支持。
</blockquote>

* 列表
* [ ] 待办事项
* [x] 已完成

数学公式：

升力 ($L$) 可以通过升力系数 ($C_L$) 按照以下公式计算。

$$
L = \\frac{1}{2} \\rho v^2 S C_L
$$

~~~py
import streamlit as st

st.write("Python 代码块")
~~~

~~~js
console.log("这里有一些 JavaScript 代码")
~~~

"""

table_markdown = '''
一个表格：

| 特性     | 支持              |
| ----------: | :------------------- |
| CommonMark  | 100%                 |
| GFM         | 100% w/ `remark-gfm` |
'''

st.session_state.setdefault(
    'past', 
    ['用文本计划，带换行',
     '播放歌曲“跳舞的蔬菜”', 
     '给我看一张猫的图片', 
     '再给我看一段视频',
     '给我看看一些 Markdown 示例',
     'Markdown 中的表格']
)
st.session_state.setdefault(
    'generated', 
    [{'type': 'normal', 'data': '第1行 \n 第2行 \n 第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 = 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("清除消息", on_click=on_btn_click)

with st.container():
    st.text_input("用户输入:", on_change=on_input_change, key="user_input")

截图

st-chat 快速上手指南

st-chat 是一个专为 Streamlit 设计的聊天机器人 UI 组件，能够轻松在应用中集成对话界面。

环境准备

• 系统要求：支持 Windows、macOS 或 Linux 的任意现代操作系统。
• 前置依赖：
  • Python 3.7 或更高版本
  • streamlit 库（若未安装需先安装）

建议在使用前确保已安装最新版本的 pip：

python -m pip install --upgrade pip

💡 国内加速提示：如遇网络问题，可使用清华或阿里云镜像源加速安装：

pip install streamlit -i https://pypi.tuna.tsinghua.edu.cn/simple

安装步骤

使用 pip 安装 streamlit-chat：

pip install streamlit-chat

💡 国内加速安装：

pip install streamlit-chat -i https://pypi.tuna.tsinghua.edu.cn/simple

基本使用

以下是最简单的使用示例，展示如何发送用户消息和机器人消息：

import streamlit as st
from streamlit_chat import message

message("My message") 
message("Hello bot!", is_user=True)  # 将消息右对齐，表示用户发言

运行方式：

1. 将上述代码保存为 app.py
2. 在终端执行：

   streamlit run app.py
   

3. 浏览器将自动打开本地预览页面，即可看到聊天界面效果。

该组件支持自定义消息内容、对齐方式，并可扩展支持 HTML、Markdown、表格等丰富内容类型，适用于构建智能客服、问答机器人等交互场景。