From 547aab2fea87173326154138bb0e08336cdc1e2c Mon Sep 17 00:00:00 2001
From: Marshall Bowers <elliott.codes@gmail.com>
Date: Thu, 18 Jan 2024 16:38:14 -0500
Subject: [PATCH] Style the reset key state for the assistant panel (#4136)

This PR styles the reset key state for the assistant panel.

Community issue: https://github.com/zed-industries/community/issues/2429

<img width="641" alt="Screenshot 2024-01-18 at 4 28 32 PM"
src="https://github.com/zed-industries/zed/assets/1486634/57377804-2867-45d3-906c-353130ec78e6">

Release Notes:

- Fixed the reset key screen for the assistant panel.
---
 crates/assistant/src/assistant_panel.rs | 85 +++++++++++++++++++------
 1 file changed, 66 insertions(+), 19 deletions(-)

diff --git a/crates/assistant/src/assistant_panel.rs b/crates/assistant/src/assistant_panel.rs
index 93c0954b1710312b1f3f27b0c43fb25564c6046e..f2988b907c07cddba5c1646178762e8b28a508a5 100644
--- a/crates/assistant/src/assistant_panel.rs
+++ b/crates/assistant/src/assistant_panel.rs
@@ -920,6 +920,39 @@ impl AssistantPanel {
         self.editors.get(self.active_editor_index?)
     }
 
+    fn render_api_key_editor(
+        &self,
+        editor: &View<Editor>,
+        cx: &mut ViewContext<Self>,
+    ) -> impl IntoElement {
+        let settings = ThemeSettings::get_global(cx);
+        let text_style = TextStyle {
+            color: if editor.read(cx).read_only(cx) {
+                cx.theme().colors().text_disabled
+            } else {
+                cx.theme().colors().text
+            },
+            font_family: settings.ui_font.family.clone(),
+            font_features: settings.ui_font.features,
+            font_size: rems(0.875).into(),
+            font_weight: FontWeight::NORMAL,
+            font_style: FontStyle::Normal,
+            line_height: relative(1.3).into(),
+            background_color: None,
+            underline: None,
+            white_space: WhiteSpace::Normal,
+        };
+        EditorElement::new(
+            &editor,
+            EditorStyle {
+                background: cx.theme().colors().editor_background,
+                local_player: cx.theme().players().local(),
+                text: text_style,
+                ..Default::default()
+            },
+        )
+    }
+
     fn render_hamburger_button(cx: &mut ViewContext<Self>) -> impl IntoElement {
         IconButton::new("hamburger_button", IconName::Menu)
             .on_click(cx.listener(|this, _event, cx| {
@@ -1091,28 +1124,42 @@ fn build_api_key_editor(cx: &mut ViewContext<AssistantPanel>) -> View<Editor> {
 impl Render for AssistantPanel {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         if let Some(api_key_editor) = self.api_key_editor.clone() {
+            const INSTRUCTIONS: [&'static str; 5] = [
+                "To use the assistant panel or inline assistant, you need to add your OpenAI API key.",
+                " - You can create an API key at: platform.openai.com/api-keys",
+                " - Having a subscription for another service like GitHub Copilot won't work.",
+                " ",
+                "Paste your OpenAI API key and press Enter to use the assistant:"
+            ];
+
             v_flex()
+                .p_4()
+                .size_full()
                 .on_action(cx.listener(AssistantPanel::save_credentials))
                 .track_focus(&self.focus_handle)
-                .child(Label::new(
-                    "To use the assistant panel or inline assistant, you need to add your OpenAI api key.",
-                ))
-                .child(Label::new(
-                    " - Having a subscription for another service like GitHub Copilot won't work."
-                ))
-                .child(Label::new(
-                    " - You can create a api key at: platform.openai.com/api-keys"
-                ))
-                .child(Label::new(
-                    " "
-                ))
-                .child(Label::new(
-                    "Paste your OpenAI API key and press Enter to use the assistant"
-                ))
-                .child(api_key_editor)
-                .child(Label::new(
-                    "Click on the Z button in the status bar to close this panel."
-                ))
+                .children(
+                    INSTRUCTIONS.map(|instruction| Label::new(instruction).size(LabelSize::Small)),
+                )
+                .child(
+                    h_flex()
+                        .w_full()
+                        .my_2()
+                        .px_2()
+                        .py_1()
+                        .bg(cx.theme().colors().editor_background)
+                        .rounded_md()
+                        .child(self.render_api_key_editor(&api_key_editor, cx)),
+                )
+                .child(
+                    h_flex()
+                        .gap_2()
+                        .child(Label::new("Click on").size(LabelSize::Small))
+                        .child(Icon::new(IconName::Ai).size(IconSize::XSmall))
+                        .child(
+                            Label::new("in the status bar to close this panel.")
+                                .size(LabelSize::Small),
+                        ),
+                )
         } else {
             let header = TabBar::new("assistant_header")
                 .start_child(