Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

assistant2: Revise thread visual design #23083

Merged
merged 18 commits into from
Jan 14, 2025
Merged

assistant2: Revise thread visual design #23083

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
8c0a84d
Kick off revising the assistant 2 thread visual design
danilo-leal Jan 13, 2025
0d7ad39
Start cleaning it up (remove comments and more)
danilo-leal Jan 13, 2025
b79dc9d
Add person circle icon
danilo-leal Jan 13, 2025
317a1ec
Add the "`esc` to cancel" communication
danilo-leal Jan 13, 2025
87efc14
Iterate on the "generating" container design
danilo-leal Jan 13, 2025
de3b263
Fix generating container z-index issue
danilo-leal Jan 13, 2025
f81755b
Clean it up more
danilo-leal Jan 13, 2025
f1cc659
Merge branch 'main' into revise-assistant2-thread-visual-design
danilo-leal Jan 13, 2025
893c296
Merge branch 'main' into revise-assistant2-thread-visual-design
danilo-leal Jan 13, 2025
70fea9b
Adjust design after merge with main
danilo-leal Jan 13, 2025
1fc1183
Add small fixes
danilo-leal Jan 13, 2025
4bc4abe
Adjust top padding
danilo-leal Jan 13, 2025
537698f
Add new iteration on the header design
danilo-leal Jan 14, 2025
df40220
Merge branch 'main' into revise-assistant2-thread-visual-design
danilo-leal Jan 14, 2025
7a7af81
Fine-tune styles
danilo-leal Jan 14, 2025
e5029b8
Merge branch 'main' into revise-assistant2-thread-visual-design
danilo-leal Jan 14, 2025
07371aa
Merge branch 'main' into revise-assistant2-thread-visual-design
danilo-leal Jan 14, 2025
7dd4c5d
Adjust the "Cancel" generation button
danilo-leal Jan 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions assets/icons/person_circle.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
243 changes: 125 additions & 118 deletions crates/assistant2/src/active_thread.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ use std::time::Duration;
use assistant_tool::ToolWorkingSet;
use collections::HashMap;
use gpui::{
list, percentage, AbsoluteLength, Animation, AnimationExt, AnyElement, AppContext,
DefiniteLength, EdgesRefinement, Empty, FocusHandle, Length, ListAlignment, ListOffset,
ListState, Model, StyleRefinement, Subscription, TextStyleRefinement, Transformation,
UnderlineStyle, View, WeakView,
linear_color_stop, linear_gradient, list, percentage, AbsoluteLength, Animation, AnimationExt,
AnyElement, AppContext, DefiniteLength, EdgesRefinement, Empty, FocusHandle, Length,
ListAlignment, ListOffset, ListState, Model, StyleRefinement, Subscription,
TextStyleRefinement, Transformation, UnderlineStyle, View, WeakView,
};
use language::LanguageRegistry;
use language_model::Role;
use markdown::{Markdown, MarkdownStyle};
use settings::Settings as _;
use theme::ThemeSettings;
use ui::{prelude::*, ButtonLike, KeyBinding};
use ui::{prelude::*, Divider, KeyBinding};
use workspace::Workspace;

use crate::thread::{MessageId, Thread, ThreadError, ThreadEvent};
Expand Down Expand Up @@ -123,21 +123,21 @@ impl ActiveThread {
selection_background_color: cx.theme().players().local().selection,
code_block: StyleRefinement {
margin: EdgesRefinement {
top: Some(Length::Definite(rems(1.0).into())),
top: Some(Length::Definite(rems(0.).into())),
left: Some(Length::Definite(rems(0.).into())),
right: Some(Length::Definite(rems(0.).into())),
bottom: Some(Length::Definite(rems(1.).into())),
bottom: Some(Length::Definite(rems(0.5).into())),
},
padding: EdgesRefinement {
top: Some(DefiniteLength::Absolute(AbsoluteLength::Pixels(Pixels(8.)))),
left: Some(DefiniteLength::Absolute(AbsoluteLength::Pixels(Pixels(8.)))),
right: Some(DefiniteLength::Absolute(AbsoluteLength::Pixels(Pixels(8.)))),
bottom: Some(DefiniteLength::Absolute(AbsoluteLength::Pixels(Pixels(8.)))),
},
background: Some(colors.editor_foreground.opacity(0.01).into()),
border_color: Some(colors.border_variant.opacity(0.3)),
background: Some(colors.editor_background.into()),
border_color: Some(colors.border_variant),
border_widths: EdgesRefinement {
top: Some(AbsoluteLength::Pixels(Pixels(1.0))),
top: Some(AbsoluteLength::Pixels(Pixels(1.))),
left: Some(AbsoluteLength::Pixels(Pixels(1.))),
right: Some(AbsoluteLength::Pixels(Pixels(1.))),
bottom: Some(AbsoluteLength::Pixels(Pixels(1.))),
Expand Down Expand Up @@ -245,7 +245,6 @@ impl ActiveThread {

fn render_message(&self, ix: usize, cx: &mut ViewContext<Self>) -> AnyElement {
let message_id = self.messages[ix];
let is_last_message = ix == self.messages.len() - 1;
let Some(message) = self.thread.read(cx).message(message_id) else {
return Empty.into_any();
};
Expand All @@ -254,139 +253,147 @@ impl ActiveThread {
return Empty.into_any();
};

let is_streaming_completion = self.thread.read(cx).is_streaming();
let context = self.thread.read(cx).context_for_message(message_id);
let colors = cx.theme().colors();

let (role_icon, role_name, role_color) = match message.role {
Role::User => (IconName::Person, "You", Color::Muted),
Role::Assistant => (IconName::ZedAssistant, "Assistant", Color::Accent),
Role::System => (IconName::Settings, "System", Color::Default),
};
let message_content = v_flex()
.child(div().p_2p5().text_ui(cx).child(markdown.clone()))
.when_some(context, |parent, context| {
if !context.is_empty() {
parent.child(
h_flex().flex_wrap().gap_1().px_1p5().pb_1p5().children(
context
.into_iter()
.map(|context| ContextPill::new_added(context, false, false, None)),
),
)
} else {
parent
}
});

div()
.id(("message-container", ix))
.py_1()
.px_2()
.child(
let styled_message = match message.role {
Role::User => v_flex()
.id(("message-container", ix))
.py_1()
.px_2p5()
.child(
v_flex()
.bg(colors.editor_background)
.ml_16()
.rounded_t_lg()
.rounded_bl_lg()
.rounded_br_none()
.border_1()
.border_color(colors.border)
.child(
h_flex()
.py_1()
.px_2()
.bg(colors.editor_foreground.opacity(0.05))
.border_b_1()
.border_color(colors.border)
.justify_between()
.rounded_t(px(6.))
.child(
h_flex()
.gap_1p5()
.child(
Icon::new(IconName::PersonCircle)
.size(IconSize::XSmall)
.color(Color::Muted),
)
.child(
Label::new("You")
.size(LabelSize::Small)
.color(Color::Muted),
),
),
)
.child(message_content),
),
Role::Assistant => div().id(("message-container", ix)).child(message_content),
Role::System => div().id(("message-container", ix)).py_1().px_2().child(
v_flex()
.border_1()
.border_color(colors.border_variant)
.bg(colors.editor_background)
.rounded_md()
.child(
h_flex()
.py_1p5()
.px_2p5()
.border_b_1()
.border_color(colors.border_variant)
.justify_between()
.child(
h_flex()
.gap_1p5()
.child(
Icon::new(role_icon)
.size(IconSize::XSmall)
.color(role_color),
)
.child(
Label::new(role_name)
.size(LabelSize::XSmall)
.color(role_color),
),
),
)
.child(div().p_2p5().text_ui(cx).child(markdown.clone()))
.when(
message.role == Role::Assistant
&& is_last_message
&& is_streaming_completion,
|parent| {
parent.child(
h_flex()
.gap_1()
.p_2p5()
.child(
Icon::new(IconName::ArrowCircle)
.size(IconSize::Small)
.color(Color::Muted)
.with_animation(
"arrow-circle",
Animation::new(Duration::from_secs(2)).repeat(),
|icon, delta| {
icon.transform(Transformation::rotate(
percentage(delta),
))
},
),
)
.child(
Label::new("Generating…")
.size(LabelSize::Small)
.color(Color::Muted),
),
)
},
)
.when_some(context, |parent, context| {
if !context.is_empty() {
parent.child(h_flex().flex_wrap().gap_1().px_1p5().pb_1p5().children(
context.into_iter().map(|context| {
ContextPill::new_added(context, false, false, None)
}),
))
} else {
parent
}
}),
)
.into_any()
.child(message_content),
),
};

styled_message.into_any()
}
}

impl Render for ActiveThread {
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
let is_streaming_completion = self.thread.read(cx).is_streaming();

let panel_bg = cx.theme().colors().panel_background;
let focus_handle = self.focus_handle.clone();

v_flex()
.size_full()
.pt_1p5()
.child(list(self.list_state.clone()).flex_grow())
.child(
h_flex()
.absolute()
.bottom_1()
.flex_shrink()
.justify_center()
.w_full()
.when(is_streaming_completion, |parent| {
parent.child(
.when(is_streaming_completion, |parent| {
parent.child(
h_flex()
.w_full()
.pb_2p5()
.absolute()
.bottom_0()
.flex_shrink()
.justify_center()
.bg(linear_gradient(
180.,
linear_color_stop(panel_bg.opacity(0.0), 0.),
linear_color_stop(panel_bg, 1.),
))
.child(
h_flex()
.gap_2()
.flex_none()
.p_1p5()
.bg(cx.theme().colors().editor_background)
.border_1()
.border_color(cx.theme().colors().border)
.rounded_md()
.bg(cx.theme().colors().elevated_surface_background)
.child(Label::new("Generating…").size(LabelSize::Small))
.shadow_lg()
.gap_1()
.child(
ButtonLike::new("cancel-generation")
.style(ButtonStyle::Filled)
.child(Label::new("Cancel").size(LabelSize::Small))
.children(
KeyBinding::for_action_in(
&editor::actions::Cancel,
&self.focus_handle,
cx,
)
.map(|binding| binding.into_any_element()),
)
Icon::new(IconName::ArrowCircle)
.size(IconSize::Small)
.color(Color::Muted)
.with_animation(
"arrow-circle",
Animation::new(Duration::from_secs(2)).repeat(),
|icon, delta| {
icon.transform(Transformation::rotate(percentage(
delta,
)))
},
),
)
.child(
Label::new("Generating…")
.size(LabelSize::Small)
.color(Color::Muted),
)
.child(Divider::vertical())
.child(
Button::new("cancel-generation", "Cancel")
.label_size(LabelSize::Small)
.key_binding(KeyBinding::for_action_in(
&editor::actions::Cancel,
&self.focus_handle,
cx,
))
.on_click(move |_event, cx| {
focus_handle
.dispatch_action(&editor::actions::Cancel, cx);
}),
),
)
}),
)
),
)
})
}
}
1 change: 1 addition & 0 deletions crates/ui/src/components/icon.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,7 @@ pub enum IconName {
PanelRight,
Pencil,
Person,
PersonCircle,
PhoneIncoming,
Pin,
Play,
Expand Down
Loading