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