127 lines
5.0 KiB
Python
127 lines
5.0 KiB
Python
# -*- coding: utf-8 -*-
|
|
"""
|
|
对话页面
|
|
"""
|
|
import reflex as rx
|
|
|
|
from application.components.conversation import (
|
|
render_conversation_component,
|
|
render_conversation_history_item,
|
|
render_input_component,
|
|
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.hstack(
|
|
# 渲染左侧
|
|
rx.hstack(
|
|
# 若对话历史折叠面板打开则渲染，否则不渲染
|
|
rx.cond(
|
|
is_open,
|
|
# 渲染标题、搜索栏和对话历史列表
|
|
rx.vstack(
|
|
# 标题
|
|
rx.hstack(
|
|
rx.text(
|
|
"对话历史",
|
|
font_size="var(--devui-font-size-lg)", # 字体大小
|
|
font_weight="700", # 字体粗细
|
|
margin_bottom="8px", # 底部外边距
|
|
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%", # 宽度
|
|
overflow="auto", # 允许溢出时显示垂直滚动条
|
|
align_items="stretch", # 子元素水平拉伸
|
|
),
|
|
backdrop_filter="blur(50px)", # 背景模糊
|
|
background_color="#f9f9f9cc", # 背景颜色
|
|
display="flex", # 弹性布局
|
|
flex_direction="column", # 垂直方向布局
|
|
gap="12px", # 子元素间距
|
|
min_width="240px", # 最小宽度
|
|
max_width="380px", # 最大宽度
|
|
width="25%", # 宽度
|
|
height="100%", # 高度
|
|
padding="12px", # 内边距
|
|
color="var(--devui-text)",
|
|
transition="all 0.3s ease-in-out", # 过渡动画
|
|
),
|
|
rx.fragment(),
|
|
),
|
|
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.box(
|
|
# 渲染内容排版层
|
|
rx.vstack(
|
|
# 渲染对话
|
|
render_conversation_component(),
|
|
# 渲染创建对话
|
|
render_create_conversation_component(),
|
|
# 渲染输入
|
|
render_input_component(),
|
|
width="100%", # 宽度
|
|
height="100%", # 高度
|
|
display="flex", # 弹性布局
|
|
flex_flow="column", # 垂直方向布局
|
|
align_items="center", # 子元素水平居中
|
|
gap="8px", # 子元素间距
|
|
),
|
|
background_color="linear-gradient(180deg, #fffffff2, #f8fafff2 99%)", # 背景颜色
|
|
position="relative", # 相对定位
|
|
display="flex", # 弹性布局
|
|
flex="1", # 分配父容器宽度
|
|
width="0", # 宽度
|
|
height="100%", # 高度
|
|
),
|
|
position="relative", # 相对定位
|
|
flex="1", # 分配父容器宽度
|
|
display="flex", # 弹性布局
|
|
overflow="hidden", # 隐藏溢出内容
|
|
height="100%", # 高度
|
|
min_height="0", # 最小高度
|
|
border_radius="12px", # 圆角
|
|
)
|