133 lines
3.8 KiB
Python
133 lines
3.8 KiB
Python
# -*- coding: utf-8 -*-
|
|
"""
|
|
导航栏组件
|
|
"""
|
|
|
|
import reflex as rx
|
|
|
|
from application.state.chat import ChatState
|
|
from application.state.create_chat_modal import CreateChatModalState
|
|
|
|
|
|
def create_chat_modal_component(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=CreateChatModalState.is_open,
|
|
on_open_change=CreateChatModalState.toggle,
|
|
)
|
|
|
|
|
|
def chat_item_component(chat_id: str) -> rx.Component:
|
|
"""
|
|
聊天项组件
|
|
:param chat_id: 聊天唯一标识
|
|
:return: Component
|
|
"""
|
|
return rx.drawer.close(
|
|
rx.hstack(
|
|
rx.button(
|
|
ChatState.get_chat_descriptions[chat_id],
|
|
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 chat_list_component(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_chat_ids, # 获取所有聊天唯一标识
|
|
lambda chat_id: chat_item_component(
|
|
chat_id=chat_id
|
|
), # 创建聊天组件
|
|
),
|
|
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 navbar_component() -> rx.Component:
|
|
"""
|
|
导航栏组件
|
|
"""
|
|
return rx.hstack(
|
|
rx.badge(
|
|
ChatState.get_chat_descriptions[ChatState.current_chat_id],
|
|
size="3",
|
|
variant="soft",
|
|
margin_inline_end="auto",
|
|
),
|
|
create_chat_modal_component(
|
|
rx.box(rx.tooltip(rx.icon("message-square-plus"), content="新建聊天"))
|
|
),
|
|
chat_list_component(
|
|
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),
|
|
)
|