1use crate::{
2 CommonAnimationExt, DecoratedIcon, DiffStat, GradientFade, HighlightedLabel, IconDecoration,
3 IconDecorationKind, prelude::*,
4};
5
6use gpui::{AnyView, ClickEvent, Hsla, SharedString};
7
8#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
9pub enum AgentThreadStatus {
10 #[default]
11 Completed,
12 Running,
13 WaitingForConfirmation,
14 Error,
15}
16
17#[derive(IntoElement, RegisterComponent)]
18pub struct ThreadItem {
19 id: ElementId,
20 icon: IconName,
21 custom_icon_from_external_svg: Option<SharedString>,
22 title: SharedString,
23 timestamp: SharedString,
24 notified: bool,
25 status: AgentThreadStatus,
26 selected: bool,
27 focused: bool,
28 hovered: bool,
29 docked_right: bool,
30 added: Option<usize>,
31 removed: Option<usize>,
32 worktree: Option<SharedString>,
33 highlight_positions: Vec<usize>,
34 worktree_highlight_positions: Vec<usize>,
35 on_click: Option<Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>>,
36 on_hover: Box<dyn Fn(&bool, &mut Window, &mut App) + 'static>,
37 action_slot: Option<AnyElement>,
38 tooltip: Option<Box<dyn Fn(&mut Window, &mut App) -> AnyView + 'static>>,
39}
40
41impl ThreadItem {
42 pub fn new(id: impl Into<ElementId>, title: impl Into<SharedString>) -> Self {
43 Self {
44 id: id.into(),
45 icon: IconName::ZedAgent,
46 custom_icon_from_external_svg: None,
47 title: title.into(),
48 timestamp: "".into(),
49 notified: false,
50 status: AgentThreadStatus::default(),
51 selected: false,
52 focused: false,
53 hovered: false,
54 docked_right: false,
55 added: None,
56 removed: None,
57 worktree: None,
58 highlight_positions: Vec::new(),
59 worktree_highlight_positions: Vec::new(),
60 on_click: None,
61 on_hover: Box::new(|_, _, _| {}),
62 action_slot: None,
63 tooltip: None,
64 }
65 }
66
67 pub fn timestamp(mut self, timestamp: impl Into<SharedString>) -> Self {
68 self.timestamp = timestamp.into();
69 self
70 }
71
72 pub fn icon(mut self, icon: IconName) -> Self {
73 self.icon = icon;
74 self
75 }
76
77 pub fn custom_icon_from_external_svg(mut self, svg: impl Into<SharedString>) -> Self {
78 self.custom_icon_from_external_svg = Some(svg.into());
79 self
80 }
81
82 pub fn notified(mut self, notified: bool) -> Self {
83 self.notified = notified;
84 self
85 }
86
87 pub fn status(mut self, status: AgentThreadStatus) -> Self {
88 self.status = status;
89 self
90 }
91
92 pub fn selected(mut self, selected: bool) -> Self {
93 self.selected = selected;
94 self
95 }
96
97 pub fn focused(mut self, focused: bool) -> Self {
98 self.focused = focused;
99 self
100 }
101
102 pub fn added(mut self, added: usize) -> Self {
103 self.added = Some(added);
104 self
105 }
106
107 pub fn removed(mut self, removed: usize) -> Self {
108 self.removed = Some(removed);
109 self
110 }
111
112 pub fn docked_right(mut self, docked_right: bool) -> Self {
113 self.docked_right = docked_right;
114 self
115 }
116
117 pub fn worktree(mut self, worktree: impl Into<SharedString>) -> Self {
118 self.worktree = Some(worktree.into());
119 self
120 }
121
122 pub fn highlight_positions(mut self, positions: Vec<usize>) -> Self {
123 self.highlight_positions = positions;
124 self
125 }
126
127 pub fn worktree_highlight_positions(mut self, positions: Vec<usize>) -> Self {
128 self.worktree_highlight_positions = positions;
129 self
130 }
131
132 pub fn hovered(mut self, hovered: bool) -> Self {
133 self.hovered = hovered;
134 self
135 }
136
137 pub fn on_click(
138 mut self,
139 handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
140 ) -> Self {
141 self.on_click = Some(Box::new(handler));
142 self
143 }
144
145 pub fn on_hover(mut self, on_hover: impl Fn(&bool, &mut Window, &mut App) + 'static) -> Self {
146 self.on_hover = Box::new(on_hover);
147 self
148 }
149
150 pub fn action_slot(mut self, element: impl IntoElement) -> Self {
151 self.action_slot = Some(element.into_any_element());
152 self
153 }
154
155 pub fn tooltip(mut self, tooltip: impl Fn(&mut Window, &mut App) -> AnyView + 'static) -> Self {
156 self.tooltip = Some(Box::new(tooltip));
157 self
158 }
159}
160
161impl RenderOnce for ThreadItem {
162 fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
163 let color = cx.theme().colors();
164 let dot_separator = || {
165 Label::new("•")
166 .size(LabelSize::Small)
167 .color(Color::Muted)
168 .alpha(0.5)
169 };
170
171 let icon_container = || h_flex().size_4().flex_none().justify_center();
172 let agent_icon = if let Some(custom_svg) = self.custom_icon_from_external_svg {
173 Icon::from_external_svg(custom_svg)
174 .color(Color::Muted)
175 .size(IconSize::Small)
176 } else {
177 Icon::new(self.icon)
178 .color(Color::Muted)
179 .size(IconSize::Small)
180 };
181
182 let decoration = |icon: IconDecorationKind, color: Hsla| {
183 IconDecoration::new(icon, cx.theme().colors().surface_background, cx)
184 .color(color)
185 .position(gpui::Point {
186 x: px(-2.),
187 y: px(-2.),
188 })
189 };
190
191 let decoration = if self.status == AgentThreadStatus::WaitingForConfirmation {
192 Some(decoration(
193 IconDecorationKind::Triangle,
194 cx.theme().status().warning,
195 ))
196 } else if self.status == AgentThreadStatus::Error {
197 Some(decoration(IconDecorationKind::X, cx.theme().status().error))
198 } else if self.notified {
199 Some(decoration(IconDecorationKind::Dot, color.text_accent))
200 } else {
201 None
202 };
203
204 let is_running = matches!(
205 self.status,
206 AgentThreadStatus::Running | AgentThreadStatus::WaitingForConfirmation
207 );
208
209 let icon = if is_running {
210 icon_container().child(
211 Icon::new(IconName::LoadCircle)
212 .size(IconSize::Small)
213 .color(Color::Muted)
214 .with_rotate_animation(2),
215 )
216 } else if let Some(decoration) = decoration {
217 icon_container().child(DecoratedIcon::new(agent_icon, Some(decoration)))
218 } else {
219 icon_container().child(agent_icon)
220 };
221
222 let title = self.title;
223 let highlight_positions = self.highlight_positions;
224 let title_label = if highlight_positions.is_empty() {
225 Label::new(title).into_any_element()
226 } else {
227 HighlightedLabel::new(title, highlight_positions).into_any_element()
228 };
229
230 let base_bg = if self.selected {
231 color.element_active
232 } else {
233 color.panel_background
234 };
235
236 let gradient_overlay =
237 GradientFade::new(base_bg, color.element_hover, color.element_active)
238 .width(px(64.0))
239 .right(px(-10.0))
240 .gradient_stop(0.75)
241 .group_name("thread-item");
242
243 let has_diff_stats = self.added.is_some() || self.removed.is_some();
244 let added_count = self.added.unwrap_or(0);
245 let removed_count = self.removed.unwrap_or(0);
246 let diff_stat_id = self.id.clone();
247 let has_worktree = self.worktree.is_some();
248 let has_timestamp = !self.timestamp.is_empty();
249 let timestamp = self.timestamp;
250
251 v_flex()
252 .id(self.id.clone())
253 .group("thread-item")
254 .relative()
255 .overflow_hidden()
256 .cursor_pointer()
257 .w_full()
258 .p_1()
259 .when(self.selected, |s| s.bg(color.element_active))
260 .border_1()
261 .border_color(gpui::transparent_black())
262 .when(self.focused, |s| {
263 s.when(self.docked_right, |s| s.border_r_2())
264 .border_color(color.border_focused)
265 })
266 .hover(|s| s.bg(color.element_hover))
267 .active(|s| s.bg(color.element_active))
268 .on_hover(self.on_hover)
269 .child(
270 h_flex()
271 .min_w_0()
272 .w_full()
273 .gap_2()
274 .justify_between()
275 .child(
276 h_flex()
277 .id("content")
278 .min_w_0()
279 .flex_1()
280 .gap_1p5()
281 .child(icon)
282 .child(title_label)
283 .when_some(self.tooltip, |this, tooltip| this.tooltip(tooltip)),
284 )
285 .child(gradient_overlay)
286 .when(self.hovered, |this| {
287 this.when_some(self.action_slot, |this, slot| this.child(slot))
288 }),
289 )
290 .when_some(self.worktree, |this, worktree| {
291 let worktree_highlight_positions = self.worktree_highlight_positions;
292 let worktree_label = if worktree_highlight_positions.is_empty() {
293 Label::new(worktree)
294 .size(LabelSize::Small)
295 .color(Color::Muted)
296 .into_any_element()
297 } else {
298 HighlightedLabel::new(worktree, worktree_highlight_positions)
299 .size(LabelSize::Small)
300 .color(Color::Muted)
301 .into_any_element()
302 };
303
304 this.child(
305 h_flex()
306 .min_w_0()
307 .gap_1p5()
308 .child(icon_container()) // Icon Spacing
309 .child(worktree_label)
310 .when(has_diff_stats || has_timestamp, |this| {
311 this.child(dot_separator())
312 })
313 .when(has_diff_stats, |this| {
314 this.child(
315 DiffStat::new(diff_stat_id.clone(), added_count, removed_count)
316 .tooltip("Unreviewed changes"),
317 )
318 })
319 .when(has_diff_stats && has_timestamp, |this| {
320 this.child(dot_separator())
321 })
322 .when(has_timestamp, |this| {
323 this.child(
324 Label::new(timestamp.clone())
325 .size(LabelSize::Small)
326 .color(Color::Muted),
327 )
328 }),
329 )
330 })
331 .when(!has_worktree && (has_diff_stats || has_timestamp), |this| {
332 this.child(
333 h_flex()
334 .min_w_0()
335 .gap_1p5()
336 .child(icon_container()) // Icon Spacing
337 .when(has_diff_stats, |this| {
338 this.child(
339 DiffStat::new(diff_stat_id, added_count, removed_count)
340 .tooltip("Unreviewed changes"),
341 )
342 })
343 .when(has_diff_stats && has_timestamp, |this| {
344 this.child(dot_separator())
345 })
346 .when(has_timestamp, |this| {
347 this.child(
348 Label::new(timestamp.clone())
349 .size(LabelSize::Small)
350 .color(Color::Muted),
351 )
352 }),
353 )
354 })
355 .when_some(self.on_click, |this, on_click| this.on_click(on_click))
356 }
357}
358
359impl Component for ThreadItem {
360 fn scope() -> ComponentScope {
361 ComponentScope::Agent
362 }
363
364 fn preview(_window: &mut Window, cx: &mut App) -> Option<AnyElement> {
365 let container = || {
366 v_flex()
367 .w_72()
368 .border_1()
369 .border_color(cx.theme().colors().border_variant)
370 .bg(cx.theme().colors().panel_background)
371 };
372
373 let thread_item_examples = vec![
374 single_example(
375 "Default (minutes)",
376 container()
377 .child(
378 ThreadItem::new("ti-1", "Linking to the Agent Panel Depending on Settings")
379 .icon(IconName::AiOpenAi)
380 .timestamp("15m"),
381 )
382 .into_any_element(),
383 ),
384 single_example(
385 "Timestamp Only (hours)",
386 container()
387 .child(
388 ThreadItem::new("ti-1b", "Thread with just a timestamp")
389 .icon(IconName::AiClaude)
390 .timestamp("3h"),
391 )
392 .into_any_element(),
393 ),
394 single_example(
395 "Notified (weeks)",
396 container()
397 .child(
398 ThreadItem::new("ti-2", "Refine thread view scrolling behavior")
399 .timestamp("1w")
400 .notified(true),
401 )
402 .into_any_element(),
403 ),
404 single_example(
405 "Waiting for Confirmation",
406 container()
407 .child(
408 ThreadItem::new("ti-2b", "Execute shell command in terminal")
409 .timestamp("2h")
410 .status(AgentThreadStatus::WaitingForConfirmation),
411 )
412 .into_any_element(),
413 ),
414 single_example(
415 "Error",
416 container()
417 .child(
418 ThreadItem::new("ti-2c", "Failed to connect to language server")
419 .timestamp("5h")
420 .status(AgentThreadStatus::Error),
421 )
422 .into_any_element(),
423 ),
424 single_example(
425 "Running Agent",
426 container()
427 .child(
428 ThreadItem::new("ti-3", "Add line numbers option to FileEditBlock")
429 .icon(IconName::AiClaude)
430 .timestamp("23h")
431 .status(AgentThreadStatus::Running),
432 )
433 .into_any_element(),
434 ),
435 single_example(
436 "In Worktree",
437 container()
438 .child(
439 ThreadItem::new("ti-4", "Add line numbers option to FileEditBlock")
440 .icon(IconName::AiClaude)
441 .timestamp("2w")
442 .worktree("link-agent-panel"),
443 )
444 .into_any_element(),
445 ),
446 single_example(
447 "With Changes (months)",
448 container()
449 .child(
450 ThreadItem::new("ti-5", "Managing user and project settings interactions")
451 .icon(IconName::AiClaude)
452 .timestamp("1mo")
453 .added(10)
454 .removed(3),
455 )
456 .into_any_element(),
457 ),
458 single_example(
459 "Worktree + Changes + Timestamp",
460 container()
461 .child(
462 ThreadItem::new("ti-5b", "Full metadata example")
463 .icon(IconName::AiClaude)
464 .worktree("my-project")
465 .added(42)
466 .removed(17)
467 .timestamp("3w"),
468 )
469 .into_any_element(),
470 ),
471 single_example(
472 "Selected Item",
473 container()
474 .child(
475 ThreadItem::new("ti-6", "Refine textarea interaction behavior")
476 .icon(IconName::AiGemini)
477 .timestamp("45m")
478 .selected(true),
479 )
480 .into_any_element(),
481 ),
482 single_example(
483 "Focused Item (Keyboard Selection)",
484 container()
485 .child(
486 ThreadItem::new("ti-7", "Implement keyboard navigation")
487 .icon(IconName::AiClaude)
488 .timestamp("12h")
489 .focused(true),
490 )
491 .into_any_element(),
492 ),
493 single_example(
494 "Focused + Docked Right",
495 container()
496 .child(
497 ThreadItem::new("ti-7b", "Focused with right dock border")
498 .icon(IconName::AiClaude)
499 .timestamp("1w")
500 .focused(true)
501 .docked_right(true),
502 )
503 .into_any_element(),
504 ),
505 single_example(
506 "Selected + Focused",
507 container()
508 .child(
509 ThreadItem::new("ti-8", "Active and keyboard-focused thread")
510 .icon(IconName::AiGemini)
511 .timestamp("2mo")
512 .selected(true)
513 .focused(true),
514 )
515 .into_any_element(),
516 ),
517 single_example(
518 "Hovered with Action Slot",
519 container()
520 .child(
521 ThreadItem::new("ti-9", "Hover to see action button")
522 .icon(IconName::AiClaude)
523 .timestamp("6h")
524 .hovered(true)
525 .action_slot(
526 IconButton::new("delete", IconName::Trash)
527 .icon_size(IconSize::Small)
528 .icon_color(Color::Muted),
529 ),
530 )
531 .into_any_element(),
532 ),
533 single_example(
534 "Search Highlight",
535 container()
536 .child(
537 ThreadItem::new("ti-10", "Implement keyboard navigation")
538 .icon(IconName::AiClaude)
539 .timestamp("4w")
540 .highlight_positions(vec![0, 1, 2, 3, 4, 5, 6, 7, 8, 9]),
541 )
542 .into_any_element(),
543 ),
544 single_example(
545 "Worktree Search Highlight",
546 container()
547 .child(
548 ThreadItem::new("ti-11", "Search in worktree name")
549 .icon(IconName::AiClaude)
550 .timestamp("3mo")
551 .worktree("my-project-name")
552 .worktree_highlight_positions(vec![3, 4, 5, 6, 7, 8, 9, 10, 11]),
553 )
554 .into_any_element(),
555 ),
556 ];
557
558 Some(
559 example_group(thread_item_examples)
560 .vertical()
561 .into_any_element(),
562 )
563 }
564}