agent: Simplify user message design (#29165)
Mainly removing the "You" label, which didn't add a lot of value. Still figuring out an issue with font size Markdown rendering before merging this PR. Release Notes: - N/A
This commit is contained in:
Danilo Leal
GitHub
parent
a5852d4537
commit
109f1d43fc
1 changed files with 35 additions and 32 deletions
|
|
@ -1557,9 +1557,7 @@ impl ActiveThread {
|
||||||
.map(|(_, state)| state.editor.clone());
|
.map(|(_, state)| state.editor.clone());
|
||||||
|
|
||||||
let colors = cx.theme().colors();
|
let colors = cx.theme().colors();
|
||||||
let active_color = colors.element_active;
|
|
||||||
let editor_bg_color = colors.editor_background;
|
let editor_bg_color = colors.editor_background;
|
||||||
let bg_user_message_header = editor_bg_color.blend(active_color.opacity(0.25));
|
|
||||||
|
|
||||||
let open_as_markdown = IconButton::new(("open-as-markdown", ix), IconName::FileCode)
|
let open_as_markdown = IconButton::new(("open-as-markdown", ix), IconName::FileCode)
|
||||||
.shape(ui::IconButtonShape::Square)
|
.shape(ui::IconButtonShape::Square)
|
||||||
|
|
@ -1724,7 +1722,6 @@ impl ActiveThread {
|
||||||
} else {
|
} else {
|
||||||
div()
|
div()
|
||||||
.min_h_6()
|
.min_h_6()
|
||||||
.text_ui(cx)
|
|
||||||
.child(self.render_message_content(
|
.child(self.render_message_content(
|
||||||
message_id,
|
message_id,
|
||||||
rendered_message,
|
rendered_message,
|
||||||
|
|
@ -1783,35 +1780,18 @@ impl ActiveThread {
|
||||||
.pb_4()
|
.pb_4()
|
||||||
.child(
|
.child(
|
||||||
v_flex()
|
v_flex()
|
||||||
.bg(colors.editor_background)
|
.bg(editor_bg_color)
|
||||||
.rounded_lg()
|
.rounded_lg()
|
||||||
.border_1()
|
.border_1()
|
||||||
.border_color(colors.border)
|
.border_color(colors.border)
|
||||||
.shadow_md()
|
.shadow_md()
|
||||||
|
.child(div().py_2().px_2p5().children(message_content))
|
||||||
.child(
|
.child(
|
||||||
h_flex()
|
h_flex()
|
||||||
.py_1()
|
.p_1()
|
||||||
.pl_2()
|
.border_t_1()
|
||||||
.pr_1()
|
.border_color(colors.border_variant)
|
||||||
.bg(bg_user_message_header)
|
.justify_end()
|
||||||
.border_b_1()
|
|
||||||
.border_color(colors.border)
|
|
||||||
.justify_between()
|
|
||||||
.rounded_t_md()
|
|
||||||
.child(
|
|
||||||
h_flex()
|
|
||||||
.gap_1p5()
|
|
||||||
.child(
|
|
||||||
Icon::new(IconName::PersonCircle)
|
|
||||||
.size(IconSize::XSmall)
|
|
||||||
.color(Color::Muted),
|
|
||||||
)
|
|
||||||
.child(
|
|
||||||
Label::new("You")
|
|
||||||
.size(LabelSize::Small)
|
|
||||||
.color(Color::Muted),
|
|
||||||
),
|
|
||||||
)
|
|
||||||
.child(
|
.child(
|
||||||
h_flex()
|
h_flex()
|
||||||
.gap_1()
|
.gap_1()
|
||||||
|
|
@ -1864,8 +1844,12 @@ impl ActiveThread {
|
||||||
edit_message_editor.is_none() && allow_editing_message,
|
edit_message_editor.is_none() && allow_editing_message,
|
||||||
|this| {
|
|this| {
|
||||||
this.child(
|
this.child(
|
||||||
Button::new("edit-message", "Edit")
|
Button::new("edit-message", "Edit Message")
|
||||||
.label_size(LabelSize::Small)
|
.label_size(LabelSize::Small)
|
||||||
|
.icon(IconName::Pencil)
|
||||||
|
.icon_size(IconSize::XSmall)
|
||||||
|
.icon_color(Color::Muted)
|
||||||
|
.icon_position(IconPosition::Start)
|
||||||
.on_click(cx.listener({
|
.on_click(cx.listener({
|
||||||
let message_segments =
|
let message_segments =
|
||||||
message.segments.clone();
|
message.segments.clone();
|
||||||
|
|
@ -1882,8 +1866,7 @@ impl ActiveThread {
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
)
|
),
|
||||||
.child(div().p_2().children(message_content)),
|
|
||||||
),
|
),
|
||||||
Role::Assistant => v_flex()
|
Role::Assistant => v_flex()
|
||||||
.id(("message-container", ix))
|
.id(("message-container", ix))
|
||||||
|
|
@ -2122,11 +2105,13 @@ impl ActiveThread {
|
||||||
.map(|m| m.role)
|
.map(|m| m.role)
|
||||||
.unwrap_or(Role::User);
|
.unwrap_or(Role::User);
|
||||||
|
|
||||||
let is_assistant = message_role == Role::Assistant;
|
let is_assistant_message = message_role == Role::Assistant;
|
||||||
|
let is_user_message = message_role == Role::User;
|
||||||
|
|
||||||
v_flex()
|
v_flex()
|
||||||
.text_ui(cx)
|
.text_ui(cx)
|
||||||
.gap_2()
|
.gap_2()
|
||||||
|
.when(is_user_message, |this| this.text_xs())
|
||||||
.children(
|
.children(
|
||||||
rendered_message.segments.iter().enumerate().map(
|
rendered_message.segments.iter().enumerate().map(
|
||||||
|(index, segment)| match segment {
|
|(index, segment)| match segment {
|
||||||
|
|
@ -2147,10 +2132,28 @@ impl ActiveThread {
|
||||||
RenderedMessageSegment::Text(markdown) => {
|
RenderedMessageSegment::Text(markdown) => {
|
||||||
let markdown_element = MarkdownElement::new(
|
let markdown_element = MarkdownElement::new(
|
||||||
markdown.clone(),
|
markdown.clone(),
|
||||||
default_markdown_style(window, cx),
|
if is_user_message {
|
||||||
|
let mut style = default_markdown_style(window, cx);
|
||||||
|
let mut text_style = window.text_style();
|
||||||
|
let theme_settings = ThemeSettings::get_global(cx);
|
||||||
|
|
||||||
|
let buffer_font = theme_settings.buffer_font.family.clone();
|
||||||
|
let buffer_font_size = TextSize::Small.rems(cx);
|
||||||
|
|
||||||
|
text_style.refine(&TextStyleRefinement {
|
||||||
|
font_family: Some(buffer_font),
|
||||||
|
font_size: Some(buffer_font_size.into()),
|
||||||
|
..Default::default()
|
||||||
|
});
|
||||||
|
|
||||||
|
style.base_text_style = text_style;
|
||||||
|
style
|
||||||
|
} else {
|
||||||
|
default_markdown_style(window, cx)
|
||||||
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
let markdown_element = if is_assistant {
|
let markdown_element = if is_assistant_message {
|
||||||
markdown_element.code_block_renderer(
|
markdown_element.code_block_renderer(
|
||||||
markdown::CodeBlockRenderer::Custom {
|
markdown::CodeBlockRenderer::Custom {
|
||||||
render: Arc::new({
|
render: Arc::new({
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue