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.

<img width="800" alt="Screenshot 2024-12-12 at 10 42 44"
src="https://github.com/user-attachments/assets/37e63d0d-d847-445e-bdf8-bf5c97d0fe4c"
/>

Release Notes:

- N/A

assets/icons/zed_predict.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 8.9V11C5.93097 11 5.06903 11 3 11V10.4L8 5.6V5H3V7.1" stroke="black" stroke-width="1.5"/>
+<path d="M11 5L13 8L11 11" stroke="black" stroke-width="1.5"/>
+</svg>

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,
+    actions, div, Action, AnchorCorner, AppContext, AsyncWindowContext, Entity, IntoElement,
-    Render, Subscription, View, ViewContext, WeakView, WindowContext,
+    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", "ζ")
+                    IconButton::new("zeta", IconName::ZedPredict)
-                        .label_size(LabelSize::Small)
+                        .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)),
                 )
             }
         }

crates/ui/src/components/icon.rs

@@ -303,6 +303,7 @@ pub enum IconName {
     XCircle,
     ZedAssistant,
     ZedAssistantFilled,
+    ZedPredict,
     ZedXCopilot,
 }
 

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(
+                .when_some((!rated).then(|| ()), |this, _| {
-                    h_flex()
+                    this.child(
-                        .p_2()
+                        h_flex()
-                        .gap_2()
+                            .p_2()
-                        .border_y_1()
+                            .gap_2()
-                        .border_color(border_color)
+                            .border_y_1()
-                        .child(
+                            .border_color(border_color)
-                            Icon::new(IconName::Info)
+                            .child(
-                                .size(IconSize::XSmall)
+                                Icon::new(IconName::Info)
-                                .color(Color::Muted)
+                                    .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.")
+                            .child(
-                                .size(LabelSize::Small)
+                                Label::new("Ensure you explain why this completion is negative or positive. In case it's negative, report what you expected instead.")
-                                .color(Color::Muted)
+                                    .size(LabelSize::Small)
-                        )
+                                    .color(Color::Muted)
-                )
+                            )
-                .child(
+                    )
-                    div()
+                })
-                        .h_40()
+                .when_some((!rated).then(|| ()), |this, _| {
-                        .pt_1()
+                    this.child(
-                        .bg(bg_color)
+                        div()
-                        .child(active_completion.feedback_editor.clone()),
+                            .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()
+                                                .child(Label::new(format!("{} ago, {:.2?}", format_time_ago(completion.response_received_at.elapsed()), completion.latency()))
-                                                    .overflow_hidden()
+                                                    .color(Color::Muted)
-                                                    .text_ellipsis()
+                                                    .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| {