diff --git a/agent/application/pages/task.py b/agent/application/pages/task.py index 558e948..ad61413 100644 --- a/agent/application/pages/task.py +++ b/agent/application/pages/task.py @@ -46,7 +46,7 @@ def task_history_item( width="100%", margin_bottom="8px", # 点击事件：设置激活任务 - on_click=lambda: TaskState.set_task(item.id), + on_click=lambda: TaskState.set_current_task_id(item.id), ), # 会话历史项的更多按钮 rx.box( @@ -855,10 +855,10 @@ def conversation_creating() -> rx.Component: ) -def user_prompt_sending() -> rx.Component: +def user_prompt_box() -> rx.Component: """ - 用户提示词发送 - :return: Component + 用户提示词框 + :return: rx.Component """ return rx.vstack( # 创建对话 @@ -954,10 +954,6 @@ def user_prompt_sending() -> rx.Component: font_size="var(--prismui-font-size-1)", color="var(--prismui-color-10)", ), - position="absolute", - bottom="0", - left="0", - right="0", z_index="99", display="flex", flex_direction="column", @@ -969,123 +965,32 @@ def user_prompt_sending() -> rx.Component: ) -def conversation_history_toggle_button( - is_conversation_history_shown: bool, -) -> rx.Component: - """ - 会话历史显示 / 隐藏按钮 - :param is_conversation_history_shown: 会话历史展示状态 - :return: Component - """ - return rx.button( - rx.icon( - rx.cond(is_conversation_history_shown, "chevron-left", "chevron-right"), - stroke_width=1, - width="16px", - height="16px", - color="var(--prismui-color-3)", - ), - position="absolute", - top="calc(50% - 20px)", - z_index="99", - width="16px", - height="40px", - background_color="var(--prismui-background-color-1)", - border_radius=rx.cond( - is_conversation_history_shown, - "var(--prismui-border-radius-2)", - "0 var(--prismui-border-radius-2)", - ), - box_shadow="var(--prismui-box-shadow-4)", - transition="all 0.18s ease-in-out", - cursor="pointer", - ) - - def task_page() -> rx.Component: """ 任务页面 + :return: rx.Component """ - return rx.box( - rx.hstack( - # 任务历史 - # 工作区 - rx.box( - # 对话历史 - rx.vstack( - message_history(), - width="100%", - height="100%", - gap="8px", - align_items="center", - ), - # 用户提示词发送 - user_prompt_sending(), - position="relative", - display="flex", + return rx.hstack( + # 渲染消息历史和用户提示词框 + rx.vstack( + rx.vstack( + # 渲染消息历史 + message_history(), + align_items="center", + gap="8px", flex="1", - width="0", - height="100%", - padding_bottom="120px", - background="var(--prismui-background-2)", + width="100%", + overflow_y="auto", ), - position="relative", - display="flex", - flex="1", + user_prompt_box(), + width="100%", height="100%", - min_height="0", + background="var(--prismui-background-2)", overflow="hidden", - transition="all 0.18s ease-in-out", ), - # 挂载事件：恢复任务状态 - on_mount=AuthState.resume_task_state, - position="relative", + # 渲染... width="100%", height="100%", - border_radius="var(--prismui-border-radius-4)", - overflow="hidden", - ) - - -def conversation_page() -> rx.Component: - """ - 会话页面：布局参考 MetaChat，从左到右分别为会话历史和工作区。其中，工作区从上到下分别为消息历史和用户提示词输入框。 - """ - return rx.box( - rx.hstack( - # 工作区 - rx.box( - # 对话历史 - rx.vstack( - message_history(), - width="100%", - height="100%", - gap="8px", - align_items="center", - ), - # 用户提示词发送 - user_prompt_sending(), - position="relative", - display="flex", - flex="1", - width="0", - height="100%", - padding_bottom="120px", - background="var(--prismui-background-2)", - ), - position="relative", - display="flex", - flex="1", - height="100%", - min_height="0", - overflow="hidden", - transition="all 0.18s ease-in-out", - ), # 挂载事件：恢复任务状态 on_mount=AuthState.resume_task_state, - position="relative", - width="100%", - height="100%", - border_radius="var(--prismui-border-radius-4)", - overflow="hidden", ) diff --git a/agent/application/pages/workbench.py b/agent/application/pages/workbench.py index 41a6b76..eac158b 100644 --- a/agent/application/pages/workbench.py +++ b/agent/application/pages/workbench.py @@ -28,8 +28,9 @@ def nav_button( :param nav_button: 导航按钮 :return : Component """ - # 导航按钮激活状态 - is_actived = nav_button == AuthState.activated_nav_button + + # 导航按钮选中状态 + is_selected = nav_button == AuthState.selected_nav_button return rx.hstack( # 导航按钮的图标 @@ -37,7 +38,7 @@ def nav_button( NAV_BUTTONS[nav_button]["src"], width="16px", height="16px", - object_fit="contain", + object_fit="contain", # 保持图标宽高比 ), # 导航按钮的文本 rx.text( @@ -45,19 +46,21 @@ def nav_button( line_height="20px", font_size="var(--prismui-font-size-2)", font_weight=rx.cond( - is_actived, "--prismui-font-weight-3", None - ), # 通过加粗字体区分是否激活 + is_selected, "var(--prismui-font-weight-3)", None + ), # 通过加粗字体区分是否选中 color="var(--prismui-color-1)", ), align_items="center", gap="8px", + width="100%", padding="5px 12px", background_color=rx.cond( - is_actived, "var(--prismui-background-color-2)", "transparent" - ), + is_selected, "var(--prismui-background-color-2)", "transparent" + ), # 通过背景颜色区分是否选中 + border_radius="var(--prismui-border-radius-3)", cursor="pointer", - # 点击事件：设置激活导航按钮 - on_click=AuthState.set_activated_nav_button(nav_button), + # 点击事件：设置选中导航按钮 + on_click=AuthState.set_selected_nav_button(nav_button), ) @@ -100,7 +103,7 @@ def task_history_item( width="100%", padding="5px 0", # 点击事件：设置激活任务 - on_click=lambda: TaskState.set_task(item.id), + on_click=lambda: TaskState.set_current_task_id(item.id), ), width="100%", ) @@ -308,16 +311,15 @@ def workbench() -> rx.Component: rx.hstack( # 侧边栏 sidebar(), - # 默认新建任务页面 + # 根据选中的导航按钮渲染对应的页面 rx.match( - AuthState.activated_nav_button, + AuthState.selected_nav_button, # 知识库页面 ("knowledge_base", knowledge_base_page()), - # 会话页面 + # 任务页面 task_page(), ), width="100%", height="100vh", - overflow="auto", ), ) diff --git a/agent/application/states/auth.py b/agent/application/states/auth.py index 6ab209e..8e003b9 100644 --- a/agent/application/states/auth.py +++ b/agent/application/states/auth.py @@ -44,8 +44,8 @@ class AuthState(rx.State): # 登录中状态 is_logging_in: bool = False - # 激活的导航按钮 - activated_nav_button: str = "conversation" + # 选中的导航按钮，默认为创建任务 + selected_nav_button: str = "create_task" # 设置悬停卡片打开状态 is_settings_hover_card_open: bool = False @@ -279,11 +279,17 @@ class AuthState(rx.State): self.is_settings_hover_card_open = is_settings_hover_card_open @rx.event - def set_activated_nav_button(self, nav_button: str): + async def set_selected_nav_button(self, nav_button: str): """ - 设置激活导航按钮 + 设置选中导航按钮 """ - self.activated_nav_button = nav_button + self.selected_nav_button = nav_button + + if nav_button == "create_task": + # 获取任务状态 + task_state = await self.get_state(TaskState) + # 将空设置为当前任务唯一标识 + task_state.set_current_task_id("") @rx.event async def logout(self) -> None: diff --git a/agent/application/states/task.py b/agent/application/states/task.py index 9878405..965d512 100644 --- a/agent/application/states/task.py +++ b/agent/application/states/task.py @@ -174,9 +174,9 @@ class TaskState(rx.State): self.task_id = next(reversed(self.tasks.keys())) @rx.event - def set_task(self, task_id: str) -> None: + def set_current_task_id(self, task_id: str) -> None: """ - 将指定任务设置为当前任务 + 将指定任务唯一标识设置为当前任务唯一标识 :param task_id: 任务唯一标识 :return: None """ @@ -185,8 +185,8 @@ class TaskState(rx.State): @rx.var def message_history(self) -> list[MessageHistoryItem]: """ - 获取当前会话的消息历史 - :return: 当前会话的消息历史 + 获取当前任务的消息历史 + :return: 当前任务的消息历史 """ # 当前任务 task = self.tasks.get(self.task_id) diff --git a/agent/assets/styles.css b/agent/assets/styles.css index bc87770..d0d417d 100644 --- a/agent/assets/styles.css +++ b/agent/assets/styles.css @@ -1,6 +1,6 @@ :root { --prismui-background-color-1: #ffffff; - --prismui-background-color-2: #ebebeb; + --prismui-background-color-2: #e6e6e6; --prismui-background-color-3: rgb(230, 230, 230); --prismui-background-color-4: #babbc0; --prismui-background-color-5: #ffffff33;