142 lines
4.9 KiB
Python
142 lines
4.9 KiB
Python
# -*- coding: utf-8 -*-
|
|
"""
|
|
对话页面
|
|
"""
|
|
import reflex as rx
|
|
|
|
from application.components.conversation import (
|
|
render_conversation_component,
|
|
render_conversation_history_item,
|
|
render_input_bar,
|
|
render_create_conversation_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.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.vstack(
|
|
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="hidden", # 禁用滚动条
|
|
),
|
|
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_component(),
|
|
# 渲染创建对话按钮
|
|
render_create_conversation_component(),
|
|
# 渲染输入栏
|
|
render_input_bar(),
|
|
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", # 溢出隐藏
|
|
)
|