agent_ui: Fix show markdown list checked state (#43567)

Closes #37527

This PR adds support for showing the list state of a list item inside
the agent UI.

**Before**
<img width="643" height="505" alt="Screenshot 2025-11-26 at 16 21 31"
src="https://github.com/user-attachments/assets/30c78022-4096-4fe4-a6cc-db208d03900f"
/>

**After**
<img width="640" height="503" alt="Screenshot 2025-11-26 at 16 41 32"
src="https://github.com/user-attachments/assets/ece14172-79a5-4d5e-a577-4b87db04280f"
/>

Release Notes:
- Agent UI now show the checked state of a list item

---------

Co-authored-by: Danilo Leal <daniloleal09@gmail.com>

crates/ui/src/components/toggle.rs

@@ -44,15 +44,16 @@ pub enum ToggleStyle {
 pub struct Checkbox {
     id: ElementId,
     toggle_state: ToggleState,
+    style: ToggleStyle,
     disabled: bool,
     placeholder: bool,
-    on_click: Option<Box<dyn Fn(&ToggleState, &ClickEvent, &mut Window, &mut App) + 'static>>,
     filled: bool,
-    style: ToggleStyle,
-    tooltip: Option<Box<dyn Fn(&mut Window, &mut App) -> AnyView>>,
+    visualization: bool,
     label: Option<SharedString>,
     label_size: LabelSize,
     label_color: Color,
+    tooltip: Option<Box<dyn Fn(&mut Window, &mut App) -> AnyView>>,
+    on_click: Option<Box<dyn Fn(&ToggleState, &ClickEvent, &mut Window, &mut App) + 'static>>,
 }
 
 impl Checkbox {
@@ -61,15 +62,16 @@ impl Checkbox {
         Self {
             id: id.into(),
             toggle_state: checked,
-            disabled: false,
-            on_click: None,
-            filled: false,
             style: ToggleStyle::default(),
-            tooltip: None,
+            disabled: false,
+            placeholder: false,
+            filled: false,
+            visualization: false,
             label: None,
             label_size: LabelSize::Default,
             label_color: Color::Muted,
-            placeholder: false,
+            tooltip: None,
+            on_click: None,
         }
     }
 
@@ -110,6 +112,13 @@ impl Checkbox {
         self
     }
 
+    /// Makes the checkbox look enabled but without pointer cursor and hover styles.
+    /// Primarily used for uninteractive markdown previews.
+    pub fn visualization_only(mut self, visualization: bool) -> Self {
+        self.visualization = visualization;
+        self
+    }
+
     /// Sets the style of the checkbox using the specified [`ToggleStyle`].
     pub fn style(mut self, style: ToggleStyle) -> Self {
         self.style = style;
@@ -209,11 +218,10 @@ impl RenderOnce for Checkbox {
         let size = Self::container_size();
 
         let checkbox = h_flex()
-            .id(self.id.clone())
-            .justify_center()
-            .items_center()
-            .size(size)
             .group(group_id.clone())
+            .id(self.id.clone())
+            .size(size)
+            .justify_center()
             .child(
                 div()
                     .flex()
@@ -230,7 +238,7 @@ impl RenderOnce for Checkbox {
                     .when(self.disabled, |this| {
                         this.bg(cx.theme().colors().element_disabled.opacity(0.6))
                     })
-                    .when(!self.disabled, |this| {
+                    .when(!self.disabled && !self.visualization, |this| {
                         this.group_hover(group_id.clone(), |el| el.border_color(hover_border_color))
                     })
                     .when(self.placeholder, |this| {
@@ -250,20 +258,14 @@ impl RenderOnce for Checkbox {
             .map(|this| {
                 if self.disabled {
                     this.cursor_not_allowed()
+                } else if self.visualization {
+                    this.cursor_default()
                 } else {
                     this.cursor_pointer()
                 }
             })
             .gap(DynamicSpacing::Base06.rems(cx))
             .child(checkbox)
-            .when_some(
-                self.on_click.filter(|_| !self.disabled),
-                |this, on_click| {
-                    this.on_click(move |click, window, cx| {
-                        on_click(&self.toggle_state.inverse(), click, window, cx)
-                    })
-                },
-            )
             .when_some(self.label, |this, label| {
                 this.child(
                     Label::new(label)
@@ -274,6 +276,14 @@ impl RenderOnce for Checkbox {
             .when_some(self.tooltip, |this, tooltip| {
                 this.tooltip(move |window, cx| tooltip(window, cx))
             })
+            .when_some(
+                self.on_click.filter(|_| !self.disabled),
+                |this, on_click| {
+                    this.on_click(move |click, window, cx| {
+                        on_click(&self.toggle_state.inverse(), click, window, cx)
+                    })
+                },
+            )
     }
 }
 
@@ -914,6 +924,15 @@ impl Component for Checkbox {
                                 .into_any_element(),
                         )],
                     ),
+                    example_group_with_title(
+                        "Extra",
+                        vec![single_example(
+                            "Visualization-Only",
+                            Checkbox::new("viz_only", ToggleState::Selected)
+                                .visualization_only(true)
+                                .into_any_element(),
+                        )],
+                    ),
                 ])
                 .into_any_element(),
         )