Refine assistant config UI (#17871)

This PR does a little bit of a touch-up on the copywriting on the
assistant config UI. I had friends reporting to me that some of the
writing could be clearer, and hopefully, this goes into that direction!

Release Notes:

- N/A

assets/icons/sliders_alt.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 4H8" stroke="black" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 10L11 10" stroke="black" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="4" cy="10" r="1.875" stroke="black" stroke-width="1.75"/>
+<circle cx="10" cy="4" r="1.875" stroke="black" stroke-width="1.75"/>
+</svg>

assets/icons/sliders_vertical.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.6665 14V9.33333" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.6665 6.66667V2" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 14V8" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 5.33333V2" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.3335 14V10.6667" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.3335 8V2" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.3335 9.33333H5.00016" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.6665 5.33334H9.33317" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 10.6667H13.6667" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

crates/assistant/src/assistant_panel.rs

@@ -4117,9 +4117,11 @@ impl ContextEditor {
                             .child(Label::new(label)),
                     )
                     .child(
-                        Button::new("open-configuration", "Open configuration")
+                        Button::new("open-configuration", "Configure Providers")
                             .size(ButtonSize::Compact)
+                            .icon(Some(IconName::SlidersVertical))
                             .icon_size(IconSize::Small)
+                            .icon_position(IconPosition::Start)
                             .style(ButtonStyle::Filled)
                             .on_click({
                                 let focus_handle = self.focus_handle(cx).clone();

crates/language_model/src/provider/anthropic.rs

@@ -657,11 +657,10 @@ impl ConfigurationView {
 impl Render for ConfigurationView {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         const ANTHROPIC_CONSOLE_URL: &str = "https://console.anthropic.com/settings/keys";
-        const INSTRUCTIONS: [&str; 4] = [
+        const INSTRUCTIONS: [&str; 3] = [
-            "To use the assistant panel or inline assistant, you need to add your Anthropic API key.",
+            "To use Zed's assistant with Anthropic, you need to add an API key. Follow these steps:",
-            "You can create an API key at:",
+            "- Create one at:",
-            "",
+            "- Paste your API key below and hit enter to use the assistant:",
-            "Paste your Anthropic API key below and hit enter to use the assistant:",
         ];
         let env_var_set = self.state.read(cx).api_key_from_env;
 
@@ -682,7 +681,6 @@ impl Render for ConfigurationView {
                     )
                 )
                 .child(Label::new(INSTRUCTIONS[2]))
-                .child(Label::new(INSTRUCTIONS[3]))
                 .child(
                     h_flex()
                         .w_full()

crates/language_model/src/provider/copilot_chat.rs

@@ -358,7 +358,7 @@ impl Render for ConfigurationView {
                     }
                     _ => {
                         const LABEL: &str =
-                    "To use the assistant panel or inline assistant, you must login to GitHub Copilot. Your GitHub account must have an active Copilot Chat subscription.";
+                    "To use Zed's assistant with GitHub Copilot, you need to be logged in to GitHub. Note that your GitHub account must have an active Copilot Chat subscription.";
                         v_flex().gap_6().child(Label::new(LABEL)).child(
                             v_flex()
                                 .gap_2()

crates/language_model/src/provider/google.rs

@@ -446,11 +446,10 @@ impl ConfigurationView {
 impl Render for ConfigurationView {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         const GOOGLE_CONSOLE_URL: &str = "https://aistudio.google.com/app/apikey";
-        const INSTRUCTIONS: [&str; 4] = [
+        const INSTRUCTIONS: [&str; 3] = [
-            "To use the Google AI assistant, you need to add your Google AI API key.",
+            "To use Zed's assistant with Google AI, you need to add an API key. Follow these steps:",
-            "You can create an API key at:",
+            "- Create one by visiting:",
-            "",
+            "- Paste your API key below and hit enter to use the assistant",
-            "Paste your Google AI API key below and hit enter to use the assistant:",
         ];
 
         let env_var_set = self.state.read(cx).api_key_from_env;
@@ -472,7 +471,6 @@ impl Render for ConfigurationView {
                     )
                 )
                 .child(Label::new(INSTRUCTIONS[2]))
-                .child(Label::new(INSTRUCTIONS[3]))
                 .child(
                     h_flex()
                         .w_full()

crates/language_model/src/provider/open_ai.rs

@@ -497,13 +497,11 @@ impl ConfigurationView {
 impl Render for ConfigurationView {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         const OPENAI_CONSOLE_URL: &str = "https://platform.openai.com/api-keys";
-        const INSTRUCTIONS: [&str; 6] = [
+        const INSTRUCTIONS: [&str; 4] = [
-            "To use the assistant panel or inline assistant, you need to add your OpenAI API key.",
+            "To use Zed's assistant with OpenAI, you need to add an API key. Follow these steps:",
-            " - You can create an API key at: ",
+            " - Create one by visiting:",
-            " - Make sure your OpenAI account has credits",
+            " - Ensure your OpenAI account has credits",
-            " - Having a subscription for another service like GitHub Copilot won't work.",
+            " - Paste your API key below and hit enter to start using the assistant",
-            "",
-            "Paste your OpenAI API key below and hit enter to use the assistant:",
         ];
 
         let env_var_set = self.state.read(cx).api_key_from_env;
@@ -543,6 +541,12 @@ impl Render for ConfigurationView {
                     )
                     .size(LabelSize::Small),
                 )
+                .child(
+                    Label::new(
+                        "Note that having a subscription for another service like GitHub Copilot won't work.".to_string(),
+                    )
+                    .size(LabelSize::Small),
+                )
                 .into_any()
         } else {
             h_flex()

crates/ui/src/components/icon.rs

@@ -255,6 +255,7 @@ pub enum IconName {
     Slash,
     SlashSquare,
     Sliders,
+    SlidersVertical,
     Snip,
     Space,
     Sparkle,
@@ -284,6 +285,7 @@ pub enum IconName {
     XCircle,
     ZedAssistant,
     ZedAssistantFilled,
+    ZedXCopilot,
 }
 
 #[derive(IntoElement)]