diff --git a/src/renderer/src/components/Popups/MultiSelectionPopup.tsx b/src/renderer/src/components/Popups/MultiSelectionPopup.tsx index f277fbe3a8..31c9877eca 100644 --- a/src/renderer/src/components/Popups/MultiSelectionPopup.tsx +++ b/src/renderer/src/components/Popups/MultiSelectionPopup.tsx @@ -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; ` diff --git a/src/renderer/src/pages/home/Messages/MessageGroup.tsx b/src/renderer/src/pages/home/Messages/MessageGroup.tsx index 995540a6cf..9d0fb1c6f8 100644 --- a/src/renderer/src/pages/home/Messages/MessageGroup.tsx +++ b/src/renderer/src/pages/home/Messages/MessageGroup.tsx @@ -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` &.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` 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;