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(32.0))
239 .right(px(-10.0))
240 .gradient_stop(0.8)
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 .on_hover(self.on_hover)
268 .child(
269 h_flex()
270 .min_w_0()
271 .w_full()
272 .gap_2()
273 .justify_between()
274 .child(
275 h_flex()
276 .id("content")
277 .min_w_0()
278 .flex_1()
279 .gap_1p5()
280 .child(icon)
281 .child(title_label)
282 .when_some(self.tooltip, |this, tooltip| this.tooltip(tooltip)),
283 )
284 .child(gradient_overlay)
285 .when(self.hovered, |this| {
286 this.when_some(self.action_slot, |this, slot| this.child(slot))
287 }),
288 )
289 .when_some(self.worktree, |this, worktree| {
290 let worktree_highlight_positions = self.worktree_highlight_positions;
291 let worktree_label = if worktree_highlight_positions.is_empty() {
292 Label::new(worktree)
293 .size(LabelSize::Small)
294 .color(Color::Muted)
295 .into_any_element()
296 } else {
297 HighlightedLabel::new(worktree, worktree_highlight_positions)
298 .size(LabelSize::Small)
299 .color(Color::Muted)
300 .into_any_element()
301 };
302
303 this.child(
304 h_flex()
305 .min_w_0()
306 .gap_1p5()
307 .child(icon_container()) // Icon Spacing
308 .child(worktree_label)
309 .when(has_diff_stats || has_timestamp, |this| {
310 this.child(dot_separator())
311 })
312 .when(has_diff_stats, |this| {
313 this.child(DiffStat::new(
314 diff_stat_id.clone(),
315 added_count,
316 removed_count,
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(DiffStat::new(diff_stat_id, added_count, removed_count))
339 })
340 .when(has_diff_stats && has_timestamp, |this| {
341 this.child(dot_separator())
342 })
343 .when(has_timestamp, |this| {
344 this.child(
345 Label::new(timestamp.clone())
346 .size(LabelSize::Small)
347 .color(Color::Muted),
348 )
349 }),
350 )
351 })
352 .when_some(self.on_click, |this, on_click| this.on_click(on_click))
353 }
354}
355
356impl Component for ThreadItem {
357 fn scope() -> ComponentScope {
358 ComponentScope::Agent
359 }
360
361 fn preview(_window: &mut Window, cx: &mut App) -> Option<AnyElement> {
362 let container = || {
363 v_flex()
364 .w_72()
365 .border_1()
366 .border_color(cx.theme().colors().border_variant)
367 .bg(cx.theme().colors().panel_background)
368 };
369
370 let thread_item_examples = vec![
371 single_example(
372 "Default (minutes)",
373 container()
374 .child(
375 ThreadItem::new("ti-1", "Linking to the Agent Panel Depending on Settings")
376 .icon(IconName::AiOpenAi)
377 .timestamp("15m"),
378 )
379 .into_any_element(),
380 ),
381 single_example(
382 "Timestamp Only (hours)",
383 container()
384 .child(
385 ThreadItem::new("ti-1b", "Thread with just a timestamp")
386 .icon(IconName::AiClaude)
387 .timestamp("3h"),
388 )
389 .into_any_element(),
390 ),
391 single_example(
392 "Notified (weeks)",
393 container()
394 .child(
395 ThreadItem::new("ti-2", "Refine thread view scrolling behavior")
396 .timestamp("1w")
397 .notified(true),
398 )
399 .into_any_element(),
400 ),
401 single_example(
402 "Waiting for Confirmation",
403 container()
404 .child(
405 ThreadItem::new("ti-2b", "Execute shell command in terminal")
406 .timestamp("2h")
407 .status(AgentThreadStatus::WaitingForConfirmation),
408 )
409 .into_any_element(),
410 ),
411 single_example(
412 "Error",
413 container()
414 .child(
415 ThreadItem::new("ti-2c", "Failed to connect to language server")
416 .timestamp("5h")
417 .status(AgentThreadStatus::Error),
418 )
419 .into_any_element(),
420 ),
421 single_example(
422 "Running Agent",
423 container()
424 .child(
425 ThreadItem::new("ti-3", "Add line numbers option to FileEditBlock")
426 .icon(IconName::AiClaude)
427 .timestamp("23h")
428 .status(AgentThreadStatus::Running),
429 )
430 .into_any_element(),
431 ),
432 single_example(
433 "In Worktree",
434 container()
435 .child(
436 ThreadItem::new("ti-4", "Add line numbers option to FileEditBlock")
437 .icon(IconName::AiClaude)
438 .timestamp("2w")
439 .worktree("link-agent-panel"),
440 )
441 .into_any_element(),
442 ),
443 single_example(
444 "With Changes (months)",
445 container()
446 .child(
447 ThreadItem::new("ti-5", "Managing user and project settings interactions")
448 .icon(IconName::AiClaude)
449 .timestamp("1mo")
450 .added(10)
451 .removed(3),
452 )
453 .into_any_element(),
454 ),
455 single_example(
456 "Worktree + Changes + Timestamp",
457 container()
458 .child(
459 ThreadItem::new("ti-5b", "Full metadata example")
460 .icon(IconName::AiClaude)
461 .worktree("my-project")
462 .added(42)
463 .removed(17)
464 .timestamp("3w"),
465 )
466 .into_any_element(),
467 ),
468 single_example(
469 "Selected Item",
470 container()
471 .child(
472 ThreadItem::new("ti-6", "Refine textarea interaction behavior")
473 .icon(IconName::AiGemini)
474 .timestamp("45m")
475 .selected(true),
476 )
477 .into_any_element(),
478 ),
479 single_example(
480 "Focused Item (Keyboard Selection)",
481 container()
482 .child(
483 ThreadItem::new("ti-7", "Implement keyboard navigation")
484 .icon(IconName::AiClaude)
485 .timestamp("12h")
486 .focused(true),
487 )
488 .into_any_element(),
489 ),
490 single_example(
491 "Focused + Docked Right",
492 container()
493 .child(
494 ThreadItem::new("ti-7b", "Focused with right dock border")
495 .icon(IconName::AiClaude)
496 .timestamp("1w")
497 .focused(true)
498 .docked_right(true),
499 )
500 .into_any_element(),
501 ),
502 single_example(
503 "Selected + Focused",
504 container()
505 .child(
506 ThreadItem::new("ti-8", "Active and keyboard-focused thread")
507 .icon(IconName::AiGemini)
508 .timestamp("2mo")
509 .selected(true)
510 .focused(true),
511 )
512 .into_any_element(),
513 ),
514 single_example(
515 "Hovered with Action Slot",
516 container()
517 .child(
518 ThreadItem::new("ti-9", "Hover to see action button")
519 .icon(IconName::AiClaude)
520 .timestamp("6h")
521 .hovered(true)
522 .action_slot(
523 IconButton::new("delete", IconName::Trash)
524 .icon_size(IconSize::Small)
525 .icon_color(Color::Muted),
526 ),
527 )
528 .into_any_element(),
529 ),
530 single_example(
531 "Search Highlight",
532 container()
533 .child(
534 ThreadItem::new("ti-10", "Implement keyboard navigation")
535 .icon(IconName::AiClaude)
536 .timestamp("4w")
537 .highlight_positions(vec![0, 1, 2, 3, 4, 5, 6, 7, 8, 9]),
538 )
539 .into_any_element(),
540 ),
541 single_example(
542 "Worktree Search Highlight",
543 container()
544 .child(
545 ThreadItem::new("ti-11", "Search in worktree name")
546 .icon(IconName::AiClaude)
547 .timestamp("3mo")
548 .worktree("my-project-name")
549 .worktree_highlight_positions(vec![3, 4, 5, 6, 7, 8, 9, 10, 11]),
550 )
551 .into_any_element(),
552 ),
553 ];
554
555 Some(
556 example_group(thread_item_examples)
557 .vertical()
558 .into_any_element(),
559 )
560 }
561}