fix(Messages): Fix single model response style issue (#7560)

* fix(Messages): update multiModelMessageStyle condition to check message count

* style(Messages): update styles for MultiSelectionPopup and MessageGroup components
This commit is contained in:
Teo 2025-06-26 17:05:48 +08:00 committed by GitHub
parent 0160655dba
commit f5165e12f1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 4 deletions

View File

@ -90,7 +90,7 @@ const ActionBar = styled.div`
background-color: var(--color-background);
padding: 4px 4px;
border-radius: 99px;
box-shadow: 0 0px 5px 0px rgb(128 128 128 / 30%);
box-shadow: 0px 2px 8px 0px rgb(128 128 128 / 20%);
border: 0.5px solid var(--color-border);
gap: 16px;
`

View File

@ -173,7 +173,7 @@ const MessageGroup = ({ messages, topic, registerMessageElement }: Props) => {
key={message.id}
className={classNames([
{
[multiModelMessageStyle]: message.role === 'assistant',
[multiModelMessageStyle]: message.role === 'assistant' && messages.length > 1,
selected: message.id === selectedMessageId
}
])}>
@ -191,7 +191,7 @@ const MessageGroup = ({ messages, topic, registerMessageElement }: Props) => {
className={classNames([
'in-popover',
{
[multiModelMessageStyle]: message.role === 'assistant',
[multiModelMessageStyle]: message.role === 'assistant' && messages.length > 1,
selected: message.id === selectedMessageId
}
])}>
@ -210,7 +210,7 @@ const MessageGroup = ({ messages, topic, registerMessageElement }: Props) => {
return messageContent
},
[isGrid, isGrouped, topic, multiModelMessageStyle, selectedMessageId, gridPopoverTrigger]
[isGrid, isGrouped, topic, multiModelMessageStyle, messages.length, selectedMessageId, gridPopoverTrigger]
)
return (
@ -284,6 +284,9 @@ const GridContainer = styled(Scrollbar)<{ $count: number; $gridColumns: number }
&.multi-select-mode {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 10px;
.grid {
height: auto;
}
.message {
border: 0.5px solid var(--color-border);
border-radius: 10px;
@ -307,10 +310,12 @@ const MessageWrapper = styled.div<MessageWrapperProps>`
&.horizontal {
overflow-y: auto;
.message {
height: 100%;
border: 0.5px solid var(--color-border);
border-radius: 10px;
}
.message-content-container {
flex: 1;
padding-left: 0;
max-height: calc(100vh - 350px);
overflow-y: auto !important;
@ -328,6 +333,20 @@ const MessageWrapper = styled.div<MessageWrapperProps>`
border: 0.5px solid var(--color-border);
border-radius: 10px;
cursor: pointer;
.message {
height: 100%;
}
.message-content-container {
overflow: hidden;
padding-left: 0;
flex: 1;
pointer-events: none;
}
.MessageFooter {
margin-left: 0;
margin-top: 2px;
margin-bottom: 2px;
}
}
&.in-popover {
height: auto;