mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2025-01-12 05:15:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

assistant2: Improve markdown rendering design (#22321)

Browse source 
This PR visually balances code blocks within thread messages a bit more.

<img width="800" alt="Screenshot 2024-12-23 at 11 26 14 AM"
src="https://github.com/user-attachments/assets/6d459aac-5d94-4021-8289-0125bc82e77c"
/>

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2024-12-23 15:18:20 -03:00 committed by GitHub
parent 7f33f31ebe
commit d25c2ff866
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 43 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
crates/assistant2/src/active_thread.rs
View file

@ -3,8 +3,9 @@ use std::sync::Arc;
use assistant_tool::ToolWorkingSet; use assistant_tool::ToolWorkingSet;
use collections::HashMap; use collections::HashMap;
use gpui::{ use gpui::{
list, AnyElement, AppContext, Empty, ListAlignment, ListState, Model, StyleRefinement, list, AbsoluteLength, AnyElement, AppContext, CornersRefinement, DefiniteLength,
Subscription, TextStyleRefinement, View, WeakView, EdgesRefinement, Empty, Length, ListAlignment, ListState, Model, StyleRefinement, Subscription,
TextStyleRefinement, View, WeakView,
}; };
use language::LanguageRegistry; use language::LanguageRegistry;
use language_model::Role; use language_model::Role;
@ -89,10 +90,11 @@ impl ActiveThread {
self.list_state.splice(old_len..old_len, 1); self.list_state.splice(old_len..old_len, 1);
let theme_settings = ThemeSettings::get_global(cx); let theme_settings = ThemeSettings::get_global(cx);
let colors = cx.theme().colors();
let ui_font_size = TextSize::Default.rems(cx); let ui_font_size = TextSize::Default.rems(cx);
let buffer_font_size = theme_settings.buffer_font_size; let buffer_font_size = TextSize::Small.rems(cx);
let mut text_style = cx.text_style(); let mut text_style = cx.text_style();
text_style.refine(&TextStyleRefinement { text_style.refine(&TextStyleRefinement {
font_family: Some(theme_settings.ui_font.family.clone()), font_family: Some(theme_settings.ui_font.family.clone()),
font_size: Some(ui_font_size.into()), font_size: Some(ui_font_size.into()),
@ -105,6 +107,32 @@ impl ActiveThread {
syntax: cx.theme().syntax().clone(), syntax: cx.theme().syntax().clone(),
selection_background_color: cx.theme().players().local().selection, selection_background_color: cx.theme().players().local().selection,
code_block: StyleRefinement { code_block: StyleRefinement {
margin: EdgesRefinement {
top: Some(Length::Definite(rems(0.5).into())),
left: Some(Length::Definite(rems(0.).into())),
right: Some(Length::Definite(rems(0.).into())),
bottom: Some(Length::Definite(rems(1.).into())),
},
padding: EdgesRefinement {
top: Some(DefiniteLength::Absolute(AbsoluteLength::Pixels(Pixels(8.)))),
left: Some(DefiniteLength::Absolute(AbsoluteLength::Pixels(Pixels(8.)))),
right: Some(DefiniteLength::Absolute(AbsoluteLength::Pixels(Pixels(8.)))),
bottom: Some(DefiniteLength::Absolute(AbsoluteLength::Pixels(Pixels(8.)))),
},
background: Some(colors.editor_foreground.opacity(0.01).into()),
border_color: Some(colors.border_variant.opacity(0.25)),
border_widths: EdgesRefinement {
top: Some(AbsoluteLength::Pixels(Pixels(1.0))),
left: Some(AbsoluteLength::Pixels(Pixels(1.))),
right: Some(AbsoluteLength::Pixels(Pixels(1.))),
bottom: Some(AbsoluteLength::Pixels(Pixels(1.))),
},
corner_radii: CornersRefinement {
top_left: Some(AbsoluteLength::Pixels(Pixels(2.))),
top_right: Some(AbsoluteLength::Pixels(Pixels(2.))),
bottom_right: Some(AbsoluteLength::Pixels(Pixels(2.))),
bottom_left: Some(AbsoluteLength::Pixels(Pixels(2.))),
},
text: Some(TextStyleRefinement { text: Some(TextStyleRefinement {
font_family: Some(theme_settings.buffer_font.family.clone()), font_family: Some(theme_settings.buffer_font.family.clone()),
font_size: Some(buffer_font_size.into()), font_size: Some(buffer_font_size.into()),
@ -114,8 +142,8 @@ impl ActiveThread {
}, },
inline_code: TextStyleRefinement { inline_code: TextStyleRefinement {
font_family: Some(theme_settings.buffer_font.family.clone()), font_family: Some(theme_settings.buffer_font.family.clone()),
font_size: Some(ui_font_size.into()), font_size: Some(buffer_font_size.into()),
background_color: Some(cx.theme().colors().editor_background), background_color: Some(colors.editor_foreground.opacity(0.01)),
..Default::default() ..Default::default()
}, },
..Default::default() ..Default::default()
@ -204,6 +232,7 @@ impl ActiveThread {
}; };
let context = self.thread.read(cx).context_for_message(message_id); let context = self.thread.read(cx).context_for_message(message_id);
let colors = cx.theme().colors();
let (role_icon, role_name, role_color) = match message.role { let (role_icon, role_name, role_color) = match message.role {
Role::User => (IconName::Person, "You", Color::Muted), Role::User => (IconName::Person, "You", Color::Muted),
@ -218,16 +247,16 @@ impl ActiveThread {
.child( .child(
v_flex() v_flex()
.border_1() .border_1()
.border_color(cx.theme().colors().border) .border_color(colors.border_variant)
.bg(cx.theme().colors().editor_background) .bg(colors.editor_background)
.rounded_md() .rounded_md()
.child( .child(
h_flex() h_flex()
.justify_between() .py_1p5()
.py_1() .px_2p5()
.px_2()
.border_b_1() .border_b_1()
.border_color(cx.theme().colors().border_variant) .border_color(colors.border_variant)
.justify_between()
.child( .child(
h_flex() h_flex()
.gap_1p5() .gap_1p5()
@ -243,10 +272,10 @@ impl ActiveThread {
), ),
), ),
) )
.child(v_flex().px_2().py_1().text_ui(cx).child(markdown.clone())) .child(v_flex().p_2p5().text_ui(cx).child(markdown.clone()))
.when_some(context, |parent, context| { .when_some(context, |parent, context| {
parent.child( parent.child(
h_flex().flex_wrap().gap_2().p_1p5().children( h_flex().flex_wrap().gap_1().p_1p5().children(
context context
.iter() .iter()
.map(|context| ContextPill::new(context.clone())), .map(|context| ContextPill::new(context.clone())),