From f6a496d1b99d07d9c39c40e2d44cddf810f16fc9 Mon Sep 17 00:00:00 2001 From: one Date: Sun, 18 May 2025 10:05:19 +0800 Subject: [PATCH] refactor: clean up code for `MessageGroupModelList` (#6084) * refactor: clean up comments and useless z-index * refactor: remove useless styles, restore segment animation, extract renderLabel * refactor: add left margin to the toggle button * revert: font size --- .../home/Messages/MessageGroupModelList.tsx | 135 +++++++----------- 1 file changed, 49 insertions(+), 86 deletions(-) diff --git a/src/renderer/src/pages/home/Messages/MessageGroupModelList.tsx b/src/renderer/src/pages/home/Messages/MessageGroupModelList.tsx index 328e25159c..8fe085aa2f 100644 --- a/src/renderer/src/pages/home/Messages/MessageGroupModelList.tsx +++ b/src/renderer/src/pages/home/Messages/MessageGroupModelList.tsx @@ -1,5 +1,6 @@ import { ArrowsAltOutlined, ShrinkOutlined } from '@ant-design/icons' import ModelAvatar from '@renderer/components/Avatar/ModelAvatar' +import { HStack } from '@renderer/components/Layout' import Scrollbar from '@renderer/components/Scrollbar' import { useSettings } from '@renderer/hooks/useSettings' import { useAppDispatch } from '@renderer/store' @@ -7,7 +8,7 @@ import { setFoldDisplayMode } from '@renderer/store/settings' import type { Model } from '@renderer/types' import type { Message } from '@renderer/types/newMessage' import { Avatar, Segmented as AntdSegmented, Tooltip } from 'antd' -import { FC } from 'react' +import { FC, memo, useCallback } from 'react' import { useTranslation } from 'react-i18next' import styled from 'styled-components' @@ -25,39 +26,54 @@ const MessageGroupModelList: FC = ({ messages, selec const { foldDisplayMode } = useSettings() const isCompact = foldDisplayMode === 'compact' + const renderLabel = useCallback( + (message: Message) => { + const modelTip = message.model?.name + + if (isCompact) { + return ( + + { + setSelectedMessage(message) + }}> + + + + ) + } + return ( + + + {message.model?.name} + + ) + }, + [isCompact, selectMessageId, setSelectedMessage] + ) + return ( - + dispatch(setFoldDisplayMode(isCompact ? 'expanded' : 'compact'))}> - {foldDisplayMode === 'compact' ? : } + {isCompact ? : } - {foldDisplayMode === 'compact' ? ( + {isCompact ? ( /* Compact style display */ - - {messages.map((message, index) => ( - - { - setSelectedMessage(message) - }}> - - - - ))} - + {messages.map((message) => renderLabel(message))} ) : ( /* Expanded style display */ = ({ messages, selec setSelectedMessage(message) }} options={messages.map((message) => ({ - label: ( - - - {message.model?.name} - - ), + label: renderLabel(message), value: message.id }))} size="small" /> )} - + ) } -const ModelsWrapper = styled.div` - position: relative; - display: flex; +const Container = styled(HStack)` flex: 1; overflow: hidden; + align-items: center; + margin-left: 4px; ` const DisplayModeToggle = styled.div<{ displayMode: DisplayMode }>` - position: absolute; - left: 4px; /* Add more space on the left */ - top: 50%; - transform: translateY(-50%); - z-index: 5; - width: 28px; /* Increase width */ - height: 28px; /* Add height */ display: flex; - justify-content: center; - align-items: center; cursor: pointer; + padding: 2px 6px 3px 6px; border-radius: 4px; - padding: 2px; + width: 26px; + height: 26px; - /* Add hover effect */ &:hover { background-color: var(--color-hover); } @@ -119,9 +122,7 @@ const ModelsContainer = styled(Scrollbar)<{ $displayMode: DisplayMode }>` overflow-x: auto; flex: 1; padding: 0 8px; - margin-left: 24px; /* Space for toggle button */ - /* Hide scrollbar to match original code */ &::-webkit-scrollbar { display: none; } @@ -131,27 +132,23 @@ const ModelsContainer = styled(Scrollbar)<{ $displayMode: DisplayMode }>` display: flex; align-items: center; flex-wrap: nowrap; - position: relative; padding: 6px 4px; /* Base style - default overlapping effect */ & > * { margin-left: -6px !important; - /* Separate transition properties to avoid conflicts */ transition: transform 0.18s ease-out, margin 0.18s ease-out !important; position: relative; - /* Only use will-change for transform to reduce rendering overhead */ will-change: transform; } - /* First element has no left margin */ & > *:first-child { margin-left: 0 !important; } - /* Using :has() selector to handle the element before the hovered one */ + /* Element before the hovered one */ & > *:has(+ *:hover) { margin-right: 2px !important; /* Use transform instead of margin to reduce layout recalculations */ @@ -171,52 +168,24 @@ const ModelsContainer = styled(Scrollbar)<{ $displayMode: DisplayMode }>` } ` -const AvatarWrapper = styled.div<{ isSelected: boolean }>` +const AvatarWrapper = styled.div<{ $isSelected: boolean }>` cursor: pointer; display: inline-flex; border-radius: 50%; - /* Keep z-index separate from transitions to avoid rendering issues */ - z-index: ${(props) => (props.isSelected ? 2 : 0)}; background: var(--color-background); - /* Simplify transitions to reduce jittering */ transition: transform 0.18s ease-out, margin 0.18s ease-out, - box-shadow 0.18s ease-out, filter 0.18s ease-out; - box-shadow: 0 0 0 1px var(--color-background); - - /* Use CSS variables to define animation parameters for easy adjustment */ - --hover-scale: 1.15; - --hover-x-offset: 6px; - --hover-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); + z-index: ${(props) => (props.$isSelected ? 1 : 0)}; + border: ${(props) => (props.$isSelected ? '2px solid var(--color-primary)' : 'none')}; &:hover { - /* z-index is applied immediately, not part of the transition */ - z-index: 10; - transform: translateX(var(--hover-x-offset)) scale(var(--hover-scale)); - box-shadow: var(--hover-shadow); + transform: translateX(6px) scale(1.15); filter: brightness(1.02); margin-left: 8px !important; margin-right: 4px !important; } - - ${(props) => - props.isSelected && - ` - border: 2px solid var(--color-primary); - z-index: 2; - - &:hover { - /* z-index is applied immediately, not part of the transition */ - z-index: 10; - border: 2px solid var(--color-primary); - filter: brightness(1.02); - transform: translateX(var(--hover-x-offset)) scale(var(--hover-scale)); - margin-left: 8px !important; - margin-right: 4px !important; - } - `} ` const Segmented = styled(AntdSegmented)` @@ -224,21 +193,15 @@ const Segmented = styled(AntdSegmented)` background-color: transparent !important; .ant-segmented-item { - background-color: transparent !important; - transition: none !important; border-radius: var(--list-item-border-radius) !important; - box-shadow: none !important; &:hover { background: transparent !important; } } .ant-segmented-thumb, .ant-segmented-item-selected { - background-color: transparent !important; border: 0.5px solid var(--color-border); - transition: none !important; border-radius: var(--list-item-border-radius) !important; - box-shadow: none !important; } ` @@ -254,4 +217,4 @@ const ModelName = styled.span` font-size: 12px; ` -export default MessageGroupModelList +export default memo(MessageGroupModelList)