144 lines
5.0 KiB
Python
144 lines
5.0 KiB
Python
# -*- coding: utf-8 -*-
|
||
"""
|
||
会话页面
|
||
"""
|
||
import reflex as rx
|
||
|
||
from application.components import (
|
||
render_conversation_box,
|
||
render_conversation_history_item,
|
||
render_input_box,
|
||
render_create_conversation_button,
|
||
)
|
||
from application.states import ConversationState, ConversationHistoryState
|
||
|
||
|
||
def conversation() -> rx.Component:
|
||
"""
|
||
会话页面：布局参考 MetaChat，左侧为会话历史，右侧为会话。其中，会话历史为折叠面板。
|
||
"""
|
||
# 会话历史折叠面板打开状态
|
||
is_open = ConversationHistoryState.is_open
|
||
|
||
return rx.box(
|
||
rx.hstack(
|
||
# 渲染对话历史折叠面板
|
||
rx.box(
|
||
rx.vstack(
|
||
# 渲染标题
|
||
rx.hstack(
|
||
rx.text(
|
||
"对话历史",
|
||
margin_bottom="8px",
|
||
font_size="var(--devui-font-size-lg)",
|
||
font_weight="700",
|
||
white_space="nowrap",
|
||
),
|
||
display="flex",
|
||
align_items="center",
|
||
justify_content="space-between",
|
||
),
|
||
# 渲染列表
|
||
rx.auto_scroll(
|
||
rx.foreach(
|
||
ConversationState.get_conversation_history,
|
||
lambda item, _: render_conversation_history_item(
|
||
item[0], item[1]
|
||
),
|
||
),
|
||
flex="1",
|
||
margin_top="8px",
|
||
width="100%",
|
||
align_items="stretch",
|
||
overflow="auto",
|
||
style={
|
||
"&::-webkit-scrollbar": {
|
||
"display": "none",
|
||
},
|
||
},
|
||
),
|
||
display="flex",
|
||
flex_direction="column",
|
||
padding="12px",
|
||
height="100%",
|
||
background_color="#f9f9f9cc",
|
||
backdrop_filter="blur(50px)", # 背景模糊
|
||
gap="12px",
|
||
color="var(--devui-text)",
|
||
),
|
||
width=rx.cond(is_open, "25%", "0px"),
|
||
min_width=rx.cond(is_open, "240px", "0px"),
|
||
max_width=rx.cond(is_open, "380px", "0px"),
|
||
height="100%",
|
||
overflow="hidden",
|
||
transition="all 0.3s ease-in-out",
|
||
),
|
||
# 渲染对话区域
|
||
rx.box(
|
||
rx.vstack(
|
||
# 渲染对话框
|
||
render_conversation_box(),
|
||
# 渲染新建对话按钮
|
||
render_create_conversation_button(),
|
||
# 渲染输入框
|
||
render_input_box(),
|
||
display="flex",
|
||
flex_flow="column",
|
||
width="100%",
|
||
height="100%",
|
||
gap="8px",
|
||
align_items="center",
|
||
),
|
||
position="relative",
|
||
display="flex",
|
||
flex="1",
|
||
width="0",
|
||
height="100%",
|
||
background="linear-gradient(180deg, #fffffff2, #f8fafff2 99%)",
|
||
),
|
||
position="relative",
|
||
display="flex",
|
||
flex="1",
|
||
height="100%",
|
||
min_height="0",
|
||
overflow="hidden",
|
||
transition="all 0.3s ease-in-out",
|
||
),
|
||
# 渲染打开/关闭对话历史折叠面板按钮
|
||
rx.button(
|
||
rx.cond(
|
||
is_open,
|
||
rx.icon(
|
||
"chevron-left",
|
||
width="16px",
|
||
height="16px",
|
||
color="var(--devui-icon-fill-weak)",
|
||
),
|
||
rx.icon(
|
||
"chevron-right",
|
||
width="16px",
|
||
height="16px",
|
||
color="var(--devui-icon-fill-weak)",
|
||
),
|
||
),
|
||
position="absolute",
|
||
top="50%",
|
||
left=rx.cond(is_open, "calc(clamp(240px, 25%, 380px) - 8px)", "0"),
|
||
z_index=99,
|
||
width="16px",
|
||
height="40px",
|
||
background="var(--devui-base-bg)",
|
||
box_shadow="var(--mc-float-block-shadow)",
|
||
border_radius=rx.cond(is_open, "6px", "0 6px 6px 0"),
|
||
transition="all 0.3s ease-in-out",
|
||
cursor="pointer",
|
||
# 点击事件：打开/关闭对话历史折叠面板
|
||
on_click=ConversationHistoryCollapseState.toggle,
|
||
),
|
||
position="relative",
|
||
width="100%",
|
||
height="100%",
|
||
border_radius="12px",
|
||
overflow="hidden", # 溢出隐藏
|
||
)
|