如何在Streamlit的RAG聊天机器人中实现可交互源内容引用

核心思路 #

借助Streamlit的st.session_state跟踪用户点击的本地文件内容，通过可点击交互触发状态更新，再根据状态控制右侧侧边栏的内容渲染。

具体实现步骤 #

1. 初始化会话状态
   在脚本开头初始化状态变量，确保页面刷新时选中的文件状态不丢失：

if "selected_local_content" not in st.session_state:
    st.session_state.selected_local_content = None
if "show_sidebar" not in st.session_state:
    st.session_state.show_sidebar = False

2. 渲染来源列表
   遍历后端返回的来源数据，区分网站链接和本地文件分别处理：

• 网站链接：继续使用streamlit_extras.mention组件实现跳转
• 本地文件：用按钮或带交互的文本触发状态更新

from streamlit_extras import mention

# 替换为你的后端返回的来源数据列表
sources = [
    {"id": 1, "file_name": "产品手册.md", "url_name": "", "content": "这是产品手册的详细内容...", "origin": "local"},
    {"id": 2, "file_name": "官方技术博客", "url_name": "https://example.com/blog", "content": "", "origin": "web"}
]

st.subheader("参考来源")
for source in sources:
    if source["url_name"]:
        # 处理网站来源
        mention(
            label=source["file_name"],
            url=source["url_name"],
            icon="link"
        )
    else:
        # 处理本地文件：点击按钮更新会话状态
        if st.button(source["file_name"], key=f"source_{source['id']}"):
            st.session_state.selected_local_content = source["content"]
            st.session_state.show_sidebar = True

3. 实现右侧侧边栏
   根据会话状态控制侧边栏的显示与内容渲染：

if st.session_state.show_sidebar:
    with st.sidebar:
        st.subheader("文档内容")
        if st.session_state.selected_local_content:
            # 长内容可嵌套expander优化显示
            with st.expander("查看完整内容", expanded=True):
                st.markdown(st.session_state.selected_local_content)
        # 添加关闭按钮重置状态
        if st.button("关闭"):
            st.session_state.show_sidebar = False
            st.session_state.selected_local_content = None

注意事项 #

• 本地文件的按钮需设置唯一key（结合文件id），避免组件冲突
• 若本地内容包含特殊字符，需提前转义，防止渲染异常
• 可根据需求自定义按钮样式，比如用markdown加CSS调整字体颜色和鼠标样式

内容的提问来源于stack exchange，提问作者Daniel