95 lines
3.3 KiB
Python
95 lines
3.3 KiB
Python
# -*- coding: utf-8 -*-
|
|
"""
|
|
对话页面
|
|
"""
|
|
import reflex as rx
|
|
|
|
from application.components.conversation import (
|
|
render_conversation_component,
|
|
render_conversation_item_component,
|
|
render_input_component,
|
|
)
|
|
from application.state.conversation import ConversationState
|
|
from application.state.conversation_history_collapse import (
|
|
ConversationHistoryCollapseState,
|
|
)
|
|
|
|
|
|
def render_conversation_page() -> rx.Component:
|
|
"""
|
|
渲染对话页面：左侧为对话历史折叠面板，右侧为对话和输入等组件
|
|
"""
|
|
# 对话历史折叠面板打开状态
|
|
is_open = ConversationHistoryCollapseState.is_open
|
|
|
|
return rx.hstack(
|
|
# 渲染对话历史组件（聊天容器左侧部分），若对话历史列表
|
|
rx.hstack(
|
|
# 若对话历史折叠面板关闭则不渲染，否则渲染
|
|
rx.cond(
|
|
is_open,
|
|
rx.fragment(),
|
|
# 渲染对话历史组件
|
|
rx.box(
|
|
rx.vstack(
|
|
# 标题
|
|
rx.text(
|
|
"对话历史", font_size="16px", weight="bold", width="100%"
|
|
),
|
|
# 分割线
|
|
rx.divider(),
|
|
# 遍历渲染对话字典
|
|
rx.foreach(
|
|
ConversationState.get_conversations,
|
|
lambda i, _: render_conversation_item_component(i[0], i[1]),
|
|
),
|
|
rx.vstack(
|
|
rx.icon("box", size=64, color=rx.color("mauve", 8)),
|
|
rx.text("无数据", size="3", color=rx.color("mauve", 10)),
|
|
align_items="center",
|
|
justify_content="center",
|
|
flex="1",
|
|
margin_top="60px",
|
|
),
|
|
align_items="stretch",
|
|
width="100%",
|
|
spacing="2",
|
|
padding="2em",
|
|
),
|
|
width="20em",
|
|
height="100vh",
|
|
background_color=rx.color("mauve", 1),
|
|
),
|
|
),
|
|
rx.button(
|
|
rx.cond(
|
|
is_open,
|
|
rx.icon("chevron-left", size=16),
|
|
rx.icon("chevron-right", size=16),
|
|
),
|
|
width="24px",
|
|
height="80px",
|
|
border_radius=rx.cond(is_open, "0 8px 8px 0", "9999px"),
|
|
background=rx.color("mauve", 2),
|
|
variant="ghost",
|
|
box_shadow="0 2px 8px rgba(0,0,0,0.08)",
|
|
on_click=ConversationHistoryCollapseState.toggle,
|
|
),
|
|
align_items="center",
|
|
height="100vh",
|
|
spacing="0",
|
|
),
|
|
# 渲染对话、输入和其它组件（聊天容器右侧部分）
|
|
rx.vstack(
|
|
render_conversation_component(),
|
|
render_input_component(),
|
|
flex=1,
|
|
height="100vh",
|
|
spacing="0",
|
|
),
|
|
width="100vw",
|
|
height="100vh",
|
|
spacing="0",
|
|
align_items="stretch",
|
|
)
|