assistant2: Adjust text and padding alignment between messages (#27067)
Ensuring that text between the "you" messages align with text in the assistant response. This also creates a nice subtle hierarchy effect where the "you" message card is wider than the message, making it slightly easier to tell them apart. <img src="https://github.com/user-attachments/assets/616c1776-ca51-454e-9d52-e480bf26c843" width="600px" /> Release Notes: - N/A
This commit is contained in:
parent
1d33bfde37
commit
3874d315ec
1 changed files with 9 additions and 8 deletions
|
@ -583,7 +583,7 @@ impl ActiveThread {
|
|||
.p_2p5()
|
||||
.child(edit_message_editor)
|
||||
} else {
|
||||
div().p_2p5().text_ui(cx).child(markdown.clone())
|
||||
div().text_ui(cx).child(markdown.clone())
|
||||
},
|
||||
)
|
||||
.when_some(context, |parent, context| {
|
||||
|
@ -603,15 +603,16 @@ impl ActiveThread {
|
|||
let styled_message = match message.role {
|
||||
Role::User => v_flex()
|
||||
.id(("message-container", ix))
|
||||
.pt_2p5()
|
||||
.px_2p5()
|
||||
.pt_2()
|
||||
.pl_2()
|
||||
.pr_2p5()
|
||||
.child(
|
||||
v_flex()
|
||||
.bg(colors.editor_background)
|
||||
.rounded_lg()
|
||||
.border_1()
|
||||
.border_color(colors.border)
|
||||
.shadow_sm()
|
||||
.shadow_md()
|
||||
.child(
|
||||
h_flex()
|
||||
.py_1()
|
||||
|
@ -702,12 +703,12 @@ impl ActiveThread {
|
|||
},
|
||||
),
|
||||
)
|
||||
.child(message_content),
|
||||
.child(div().p_2().child(message_content)),
|
||||
),
|
||||
Role::Assistant => {
|
||||
v_flex()
|
||||
.id(("message-container", ix))
|
||||
.child(message_content)
|
||||
.child(div().py_3().px_4().child(message_content))
|
||||
.when(
|
||||
!tool_uses.is_empty() || !scripting_tool_uses.is_empty(),
|
||||
|parent| {
|
||||
|
@ -729,7 +730,7 @@ impl ActiveThread {
|
|||
v_flex()
|
||||
.bg(colors.editor_background)
|
||||
.rounded_sm()
|
||||
.child(message_content),
|
||||
.child(div().p_4().child(message_content)),
|
||||
),
|
||||
};
|
||||
|
||||
|
@ -745,7 +746,7 @@ impl ActiveThread {
|
|||
|
||||
let lighter_border = cx.theme().colors().border.opacity(0.5);
|
||||
|
||||
div().px_2p5().child(
|
||||
div().px_4().child(
|
||||
v_flex()
|
||||
.rounded_lg()
|
||||
.border_1()
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue