135 lines
3.9 KiB
Python
135 lines
3.9 KiB
Python
# -*- coding: utf-8 -*-
|
|
"""
|
|
导航栏相关组件
|
|
"""
|
|
|
|
import reflex as rx
|
|
|
|
from application.state.chat import ChatState
|
|
from application.state.create_chat import CreateChatState
|
|
|
|
|
|
def render_chat_item(chat_id: str, chat_description: str) -> rx.Component:
|
|
"""
|
|
渲染聊天项
|
|
:param chat_id: 聊天唯一标识
|
|
:param description: 聊天描述
|
|
:return: Component
|
|
"""
|
|
return rx.drawer.close(
|
|
rx.hstack(
|
|
rx.button(
|
|
chat_description,
|
|
on_click=lambda: ChatState.switch_chat(chat_id), # 点击按钮将切换会话
|
|
width="80%",
|
|
variant="surface",
|
|
), # 点击按钮将切换聊天
|
|
rx.button(
|
|
rx.icon(
|
|
tag="trash",
|
|
on_click=lambda: ChatState.delete_chat(chat_id), # 点击按钮删除聊天
|
|
stroke_width=1,
|
|
),
|
|
width="20%",
|
|
variant="surface",
|
|
color_scheme="red",
|
|
),
|
|
width="100%",
|
|
),
|
|
key=chat_id, # 使用聊天唯一标识作为键
|
|
)
|
|
|
|
|
|
def render_chat_list(trigger) -> rx.Component:
|
|
"""
|
|
渲染聊天列表
|
|
"""
|
|
return rx.drawer.root(
|
|
rx.drawer.trigger(trigger),
|
|
rx.drawer.overlay(),
|
|
rx.drawer.portal(
|
|
rx.drawer.content(
|
|
rx.vstack(
|
|
rx.heading("聊天列表", color=rx.color("mauve", 11)),
|
|
rx.divider(),
|
|
rx.foreach(
|
|
ChatState.get_chats, # 获取聊天列表
|
|
lambda chat_id, chat: render_chat_item(
|
|
chat_id=chat_id,
|
|
chat_description=chat.description,
|
|
), # 创建聊天组件
|
|
),
|
|
align_items="stretch",
|
|
width="100%",
|
|
),
|
|
top="auto",
|
|
right="auto",
|
|
height="100%",
|
|
width="20em",
|
|
padding="2em",
|
|
background_color=rx.color("mauve", 2),
|
|
outline="none",
|
|
)
|
|
),
|
|
direction="left",
|
|
)
|
|
|
|
|
|
def render_create_chat_modal(trigger) -> rx.Component:
|
|
"""
|
|
渲染新建聊天模态窗
|
|
"""
|
|
return rx.dialog.root(
|
|
rx.dialog.trigger(trigger),
|
|
rx.dialog.content(
|
|
rx.form(
|
|
rx.hstack(
|
|
rx.input(
|
|
name="chat_description",
|
|
placeholder="请输入聊天描述（可选）",
|
|
flex="auto",
|
|
min_width="20ch",
|
|
),
|
|
rx.button("新建"),
|
|
spacing="2",
|
|
wrap="wrap",
|
|
width="100%",
|
|
),
|
|
on_submit=ChatState.create_chat,
|
|
),
|
|
background_color=rx.color("mauve", 1),
|
|
), # 模态窗内容容器
|
|
open=CreateChatState.is_open,
|
|
on_open_change=CreateChatState.toggle,
|
|
)
|
|
|
|
|
|
def render_navbar() -> rx.Component:
|
|
"""
|
|
渲染导航栏
|
|
"""
|
|
return rx.hstack(
|
|
rx.badge(
|
|
ChatState.get_current_chat_description,
|
|
size="3",
|
|
variant="soft",
|
|
margin_inline_end="auto",
|
|
),
|
|
render_create_chat_modal(
|
|
rx.box(rx.tooltip(rx.icon("message-square-plus"), content="新建聊天"))
|
|
),
|
|
render_chat_list(
|
|
rx.box(
|
|
rx.tooltip(
|
|
rx.icon("messages-square"),
|
|
content="聊天历史",
|
|
)
|
|
)
|
|
),
|
|
justify_content="space-between",
|
|
align_items="center",
|
|
padding="12px",
|
|
border_bottom=f"1px solid {rx.color('mauve', 3)}",
|
|
background_color=rx.color("mauve", 2),
|
|
)
|