From c204b0d01a1e8ff35f6185f05d8e0632c4e3c720 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Thu, 12 Dec 2024 11:17:08 -0300
Subject: [PATCH] zeta: Add adjustments to the review modal UI (#21920)
Most notably, adding a current iteration of a possible logo to feel it
out! :) Also, I'm hiding the input and instructions container after the
review has been sent. In the future, if we allow changing an already
sent review, we can change this behavior.
Release Notes:
- N/A
---
assets/icons/zed_predict.svg | 4 +
.../src/inline_completion_button.rs | 21 +++--
crates/ui/src/components/icon.rs | 1 +
crates/zeta/src/rate_completion_modal.rs | 77 +++++++++----------
4 files changed, 57 insertions(+), 46 deletions(-)
create mode 100644 assets/icons/zed_predict.svg
diff --git a/assets/icons/zed_predict.svg b/assets/icons/zed_predict.svg
new file mode 100644
index 0000000000..6b152af0d9
--- /dev/null
+++ b/assets/icons/zed_predict.svg
@@ -0,0 +1,4 @@
+
diff --git a/crates/inline_completion_button/src/inline_completion_button.rs b/crates/inline_completion_button/src/inline_completion_button.rs
index f5a129de1b..ab32d127f0 100644
--- a/crates/inline_completion_button/src/inline_completion_button.rs
+++ b/crates/inline_completion_button/src/inline_completion_button.rs
@@ -4,8 +4,8 @@ use editor::{scroll::Autoscroll, Editor};
use feature_flags::{FeatureFlagAppExt, ZetaFeatureFlag};
use fs::Fs;
use gpui::{
- div, Action, AnchorCorner, AppContext, AsyncWindowContext, Entity, IntoElement, ParentElement,
- Render, Subscription, View, ViewContext, WeakView, WindowContext,
+ actions, div, Action, AnchorCorner, AppContext, AsyncWindowContext, Entity, IntoElement,
+ ParentElement, Render, Subscription, View, ViewContext, WeakView, WindowContext,
};
use language::{
language_settings::{
@@ -16,7 +16,6 @@ use language::{
use settings::{update_settings_file, Settings, SettingsStore};
use std::{path::Path, sync::Arc};
use supermaven::{AccountStatus, Supermaven};
-use ui::{Button, LabelSize};
use workspace::{
create_and_open_local_file,
item::ItemHandle,
@@ -29,6 +28,8 @@ use workspace::{
use zed_actions::OpenBrowser;
use zeta::RateCompletionModal;
+actions!(zeta, [RateCompletions]);
+
const COPILOT_SETTINGS_URL: &str = "https://github.com/settings/copilot";
struct CopilotErrorToast;
@@ -204,16 +205,22 @@ impl Render for InlineCompletionButton {
}
div().child(
- Button::new("zeta", "ΞΆ")
- .label_size(LabelSize::Small)
+ IconButton::new("zeta", IconName::ZedPredict)
+ .tooltip(|cx| {
+ Tooltip::with_meta(
+ "Zed Predict",
+ Some(&RateCompletions),
+ "Click to rate completions",
+ cx,
+ )
+ })
.on_click(cx.listener(|this, _, cx| {
if let Some(workspace) = this.workspace.upgrade() {
workspace.update(cx, |workspace, cx| {
RateCompletionModal::toggle(workspace, cx)
});
}
- }))
- .tooltip(|cx| Tooltip::text("Rate Completions", cx)),
+ })),
)
}
}
diff --git a/crates/ui/src/components/icon.rs b/crates/ui/src/components/icon.rs
index e663e00708..414a7c94c0 100644
--- a/crates/ui/src/components/icon.rs
+++ b/crates/ui/src/components/icon.rs
@@ -303,6 +303,7 @@ pub enum IconName {
XCircle,
ZedAssistant,
ZedAssistantFilled,
+ ZedPredict,
ZedXCopilot,
}
diff --git a/crates/zeta/src/rate_completion_modal.rs b/crates/zeta/src/rate_completion_modal.rs
index d08f6bc005..f5b95d2353 100644
--- a/crates/zeta/src/rate_completion_modal.rs
+++ b/crates/zeta/src/rate_completion_modal.rs
@@ -8,7 +8,7 @@ use language::{language_settings, OffsetRangeExt};
use settings::Settings;
use std::time::Duration;
use theme::ThemeSettings;
-use ui::{prelude::*, KeyBinding, List, ListItem, ListItemSpacing, TintColor, Tooltip};
+use ui::{prelude::*, KeyBinding, List, ListItem, ListItemSpacing, Tooltip};
use workspace::{ModalView, Workspace};
actions!(
@@ -369,34 +369,39 @@ impl RateCompletionModal {
.overflow_scroll()
.child(StyledText::new(diff).with_highlights(&text_style, diff_highlights)),
)
- .child(
- h_flex()
- .p_2()
- .gap_2()
- .border_y_1()
- .border_color(border_color)
- .child(
- Icon::new(IconName::Info)
- .size(IconSize::XSmall)
- .color(Color::Muted)
- )
- .child(
- Label::new("Ensure you explain why this completion is negative or positive. In case it's negative, report what you expected instead.")
- .size(LabelSize::Small)
- .color(Color::Muted)
- )
- )
- .child(
- div()
- .h_40()
- .pt_1()
- .bg(bg_color)
- .child(active_completion.feedback_editor.clone()),
- )
+ .when_some((!rated).then(|| ()), |this, _| {
+ this.child(
+ h_flex()
+ .p_2()
+ .gap_2()
+ .border_y_1()
+ .border_color(border_color)
+ .child(
+ Icon::new(IconName::Info)
+ .size(IconSize::XSmall)
+ .color(Color::Muted)
+ )
+ .child(
+ Label::new("Ensure you explain why this completion is negative or positive. In case it's negative, report what you expected instead.")
+ .size(LabelSize::Small)
+ .color(Color::Muted)
+ )
+ )
+ })
+ .when_some((!rated).then(|| ()), |this, _| {
+ this.child(
+ div()
+ .h_40()
+ .pt_1()
+ .bg(bg_color)
+ .child(active_completion.feedback_editor.clone())
+ )
+ })
.child(
h_flex()
.p_1()
.h_8()
+ .max_h_8()
.border_t_1()
.border_color(border_color)
.max_w_full()
@@ -409,7 +414,7 @@ impl RateCompletionModal {
.size(IconSize::Small)
.color(Color::Success),
)
- .child(Label::new("Rated completion").color(Color::Muted)),
+ .child(Label::new("Rated completion.").color(Color::Muted)),
)
} else if active_completion.completion.edits.is_empty() {
Some(
@@ -419,7 +424,7 @@ impl RateCompletionModal {
.size(IconSize::Small)
.color(Color::Warning),
)
- .child(Label::new("No edits produced").color(Color::Muted)),
+ .child(Label::new("No edits produced.").color(Color::Muted)),
)
} else {
Some(label_container())
@@ -434,11 +439,10 @@ impl RateCompletionModal {
&self.focus_handle(cx),
cx,
))
- .style(ButtonStyle::Tinted(TintColor::Negative))
+ .style(ButtonStyle::Filled)
.icon(IconName::ThumbsDown)
.icon_size(IconSize::Small)
.icon_position(IconPosition::Start)
- .icon_color(Color::Error)
.disabled(rated || feedback_empty)
.when(feedback_empty, |this| {
this.tooltip(|cx| {
@@ -459,11 +463,10 @@ impl RateCompletionModal {
&self.focus_handle(cx),
cx,
))
- .style(ButtonStyle::Tinted(TintColor::Positive))
+ .style(ButtonStyle::Filled)
.icon(IconName::ThumbsUp)
.icon_size(IconSize::Small)
.icon_position(IconPosition::Start)
- .icon_color(Color::Success)
.disabled(rated)
.on_click(cx.listener(move |this, _, cx| {
this.thumbs_up_active(&ThumbsUpActiveCompletion, cx);
@@ -537,7 +540,7 @@ impl Render for RateCompletionModal {
.focused(index == self.selected_index)
.selected(selected)
.start_slot(if rated {
- Icon::new(IconName::Check).color(Color::Success)
+ Icon::new(IconName::Check).color(Color::Success).size(IconSize::Small)
} else if completion.edits.is_empty() {
Icon::new(IconName::File).color(Color::Muted).size(IconSize::Small)
} else {
@@ -546,13 +549,9 @@ impl Render for RateCompletionModal {
.child(
v_flex()
.child(Label::new(completion.path.to_string_lossy().to_string()).size(LabelSize::Small))
- .child(div()
- .overflow_hidden()
- .text_ellipsis()
- .child(Label::new(format!("{} ago, {:.2?}", format_time_ago(completion.response_received_at.elapsed()), completion.latency()))
- .color(Color::Muted)
- .size(LabelSize::XSmall)
- )
+ .child(Label::new(format!("{} ago, {:.2?}", format_time_ago(completion.response_received_at.elapsed()), completion.latency()))
+ .color(Color::Muted)
+ .size(LabelSize::XSmall)
)
)
.on_click(cx.listener(move |this, _, cx| {