Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

assistant: Refine settings view's instruction visuals (#25812)

Browse source 
I've been bothered by using simple hyphens for bullet lists here for a
while; it kinda looked cheap and not well-formatted. So, in this PR, I'm
adding a new, custom UI component in the `language_models` crate, called
`InstructionListItem`, based off the `ListItem` that's somewhat
mimic'ing what a `<li>` would be on the web.

It does have a "rigid" structure as in it's always a label followed by a
button (which is optional), but that seems okay given it has been the
overall shape of the copy we've been using here. Also, never really
loved that we were pasting URLs directly, that kinda felt cheap, too. I
could see an argument where it's just clearer, but it looks too
cluttered, as URLs aren't super pretty, necessarily.

| Before | After |
|--------|--------|
| <img
src="https://github.com/user-attachments/assets/ffd1ac27-b1f4-450d-abf5-079285fc9877"
width="700px" /> | <img
src="https://github.com/user-attachments/assets/28fb9d0d-205d-45d8-9e43-1aaa947adc96"
width="700px" /> |

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2025-02-28 12:06:47 -03:00 • committed by GitHub
parent c9aba6c10a
commit 508b581215
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 180 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

33
crates/language_models/src/provider/google.rs
View file

@ -20,9 +20,10 @@ use settings::{Settings, SettingsStore};
use std::{future, sync::Arc};
use strum::IntoEnumIterator;
use theme::ThemeSettings;
use ui::{prelude::*, Icon, IconName, Tooltip};
use ui::{prelude::*, Icon, IconName, List, Tooltip};
use util::ResultExt;
use crate::ui::InstructionListItem;
use crate::AllLanguageModelSettings;
const PROVIDER_ID: &str = "google";
@ -508,13 +509,6 @@ impl ConfigurationView {
impl Render for ConfigurationView {
fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
const GOOGLE_CONSOLE_URL: &str = "https://aistudio.google.com/app/apikey";
const INSTRUCTIONS: [&str; 3] = [
"To use Zed's assistant with Google AI, you need to add an API key. Follow these steps:",
"- Create one by visiting:",
"- Paste your API key below and hit enter to use the assistant",
];
let env_var_set = self.state.read(cx).api_key_from_env;
if self.load_credentials_task.is_some() {
@ -523,17 +517,18 @@ impl Render for ConfigurationView {
v_flex()
.size_full()
.on_action(cx.listener(Self::save_api_key))
.child(Label::new(INSTRUCTIONS[0]))
.child(h_flex().child(Label::new(INSTRUCTIONS[1])).child(
Button::new("google_console", GOOGLE_CONSOLE_URL)
.style(ButtonStyle::Subtle)
.icon(IconName::ArrowUpRight)
.icon_size(IconSize::XSmall)
.icon_color(Color::Muted)
.on_click(move |_, _, cx| cx.open_url(GOOGLE_CONSOLE_URL))
)
.child(Label::new("To use Zed's assistant with Google AI, you need to add an API key. Follow these steps:"))
.child(
List::new()
.child(InstructionListItem::new(
"Create one by visiting",
Some("Google AI's console"),
Some("https://aistudio.google.com/app/apikey"),
))
.child(InstructionListItem::text_only(
"Paste your API key below and hit enter to start using the assistant",
)),
)
.child(Label::new(INSTRUCTIONS[2]))
.child(
h_flex()
.w_full()
@ -550,7 +545,7 @@ impl Render for ConfigurationView {
Label::new(
format!("You can also assign the {GOOGLE_AI_API_KEY_VAR} environment variable and restart Zed."),
)
.size(LabelSize::Small),
.size(LabelSize::Small).color(Color::Muted),
)
.into_any()
} else {