138 lines
4.0 KiB
Python
138 lines
4.0 KiB
Python
# -*- coding: utf-8 -*-
|
|
"""
|
|
导航栏组件
|
|
"""
|
|
|
|
import reflex
|
|
|
|
from ..state import State
|
|
|
|
|
|
def create_session_modal(trigger) -> reflex.Component:
|
|
"""
|
|
创建会话模态窗组件
|
|
"""
|
|
return reflex.dialog.root(
|
|
reflex.dialog.trigger(trigger),
|
|
reflex.dialog.content(
|
|
reflex.form(
|
|
reflex.hstack(
|
|
reflex.input(
|
|
name="session_name",
|
|
placeholder="会话名称",
|
|
flex="auto",
|
|
min_width="20ch",
|
|
),
|
|
reflex.button("创建会话"),
|
|
spacing="2",
|
|
wrap="wrap",
|
|
width="100%",
|
|
),
|
|
on_submit=State.create_session,
|
|
),
|
|
background_color=reflex.color("mauve", 1),
|
|
),
|
|
open=State.create_session_modal_is_open,
|
|
on_open_change=State.toggle_create_session_modal,
|
|
)
|
|
|
|
|
|
def session_history_item(session_name: str) -> reflex.Component:
|
|
"""
|
|
会话历史侧边栏中一次会话组件
|
|
:param session_name: 会话名称
|
|
:return: Component
|
|
"""
|
|
return reflex.drawer.close(
|
|
reflex.hstack(
|
|
reflex.button(
|
|
session_name,
|
|
on_click=lambda: State.switch_session(
|
|
session_name
|
|
), # 点击按钮将切换会话
|
|
width="80%",
|
|
variant="surface",
|
|
),
|
|
reflex.button(
|
|
reflex.icon(
|
|
tag="trash",
|
|
on_click=lambda: State.delete_session(
|
|
session_name
|
|
), # 点击按钮删除会话
|
|
stroke_width=1,
|
|
),
|
|
width="20%",
|
|
variant="surface",
|
|
color_scheme="red",
|
|
),
|
|
width="100%",
|
|
),
|
|
key=session_name, # 使用会话名称作为唯一标识（会话名称不可重复）
|
|
)
|
|
|
|
|
|
def session_history(trigger) -> reflex.Component:
|
|
"""
|
|
会话历史侧边栏组件
|
|
"""
|
|
return reflex.drawer.root(
|
|
reflex.drawer.trigger(trigger),
|
|
reflex.drawer.overlay(),
|
|
reflex.drawer.portal(
|
|
reflex.drawer.content(
|
|
reflex.vstack(
|
|
reflex.heading("会话列表", color=reflex.color("mauve", 11)),
|
|
reflex.divider(),
|
|
reflex.foreach(
|
|
State.get_session_names, # 获取所有会话名称
|
|
lambda session_name: session_history_item(
|
|
session_name=session_name
|
|
), # 创建会话组件
|
|
),
|
|
align_items="stretch",
|
|
width="100%",
|
|
),
|
|
top="auto",
|
|
right="auto",
|
|
height="100%",
|
|
width="20em",
|
|
padding="2em",
|
|
background_color=reflex.color("mauve", 2),
|
|
outline="none",
|
|
)
|
|
),
|
|
direction="left",
|
|
)
|
|
|
|
|
|
def navigation_bar() -> reflex.Component:
|
|
"""
|
|
导航栏组件
|
|
"""
|
|
return reflex.hstack(
|
|
reflex.badge(
|
|
State.current_session_name,
|
|
size="3",
|
|
variant="soft",
|
|
margin_inline_end="auto",
|
|
),
|
|
create_session_modal(
|
|
reflex.box(
|
|
reflex.tooltip(reflex.icon("message-square-plus"), content="创建会话")
|
|
)
|
|
),
|
|
session_history(
|
|
reflex.box(
|
|
reflex.tooltip(
|
|
reflex.icon("messages-square"),
|
|
content="会话历史",
|
|
)
|
|
)
|
|
),
|
|
justify_content="space-between",
|
|
align_items="center",
|
|
padding="12px",
|
|
border_bottom=f"1px solid {reflex.color('mauve', 3)}",
|
|
background_color=reflex.color("mauve", 2),
|
|
)
|