1

agent/application/pages/conversation.py

@@ -107,10 +107,8 @@ def render_conversation_history_item(
                     "opacity": rx.cond(
                         is_actived, "1", "0"
                     ),  # 若当前会话已激活则不透明，否则透明
-                    "pointer_events": rx.cond(
-                        is_actived, "auto", "none"
-                    ),  # 若当前会话已激活则可点击，否则不可点击
                     "transition": "opacity 0.18s ease",
+                    "pointer_events": rx.cond(is_actived, "auto", "none"),
                 },
             ),
             display="flex",
@@ -323,16 +321,10 @@ def render_thought_node(thought_node_id: int, thought_node: ThoughtNode):
             thought_node.kind,
             (
                 "thinking",
-                rx.markdown(
+                rx.text(
                     thought_node.content,
-                    component_map={
-                        "p": lambda text: rx.text(
-                            text,
-                            color="var(--prismui-color-text-light)",
-                            margin="0 0 8px",
-                            font_size="var(--prismui-font-size-sm)",
-                        )
-                    },
+                    font_size="var(--prismui-font-size-2)",
+                    color="var(--prismui-color-3)",
                 ),
             ),
             rx.fragment(),
@@ -418,10 +410,10 @@ def render_dialog_history_item(dialog_id: str, dialog: Dialog) -> rx.Component:
                         height="14px",
                         color="var(--prismui-color-3)",
                         style={
-                            "transition": "transform 0.2s ease-in-out",
                             "transform": rx.cond(
                                 is_collapse_expanded, "rotate(90deg)", "rotate(0deg)"
                             ),
+                            "transition": "transform 0.2s ease-out",
                         },
                     ),
                     align_items="center",
@@ -433,20 +425,28 @@ def render_dialog_history_item(dialog_id: str, dialog: Dialog) -> rx.Component:
                 # 点击事件，展开/折叠思考折叠面板
                 on_click=lambda: ConversationState.toggle_collapse(dialog_id),
             ),
-            rx.cond(
-                is_collapse_expanded,
+            rx.box(
                 rx.auto_scroll(
                     rx.foreach(
                         thought_nodes,
                         lambda i, _: render_thought_node(i[0], i[1]),
                     ),
                     width="100%",
+                    margin_top="8px",
+                    align_self="start",
                 ),
-                rx.fragment(),
+                width="100%",
+                overflow="hidden",
+                style={
+                    "max-height": rx.cond(is_collapse_expanded, "1200px", "20px"),
+                    "opacity": rx.cond(is_collapse_expanded, "1", "0"),
+                    "transition": "max-height 0.2s ease-out, opacity 0.2s ease-out",
+                },
             ),
-            text_align="left",
             width="100%",
             margin_top="8px",
+            text_align="left",
+            overflow="visible",
         ),
         # 渲染回答
         rx.markdown(
@@ -454,6 +454,7 @@ def render_dialog_history_item(dialog_id: str, dialog: Dialog) -> rx.Component:
             component_map={
                 "p": lambda text: rx.text(
                     text,
+                    margin_bottom="8px",
                     word_wrap="break-word",
                     word_break="break-all",
                     white_space="pre-line",
@@ -466,10 +467,28 @@ def render_dialog_history_item(dialog_id: str, dialog: Dialog) -> rx.Component:
                     display="inline",
                     font_weight="var(--prismui-font-weight-1)",
                 ),
+                "ul": lambda children: rx.vstack(
+                    children, margin_bottom="8px", gap="4px"
+                ),
+                "li": lambda text: rx.text(
+                    text,
+                    word_wrap="break-word",
+                    word_break="break-all",
+                    white_space="pre-line",
+                    line_height="24px",
+                    font_size="var(--prismui-font-size-1)",
+                    color="var(--prismui-color-1)",
+                    style={
+                        "display": "list-item",
+                        "list_style_type": "disc",
+                        "list_style_position": "inside",
+                    },
+                ),
             },
             width="100%",
-            margin_bottom="8px",
+            margin_top="8px",
         ),
+        padding="0 16px",
         width="100%",
         key=dialog_id,
     )