fix: Improve ModelAvatar and AssistantItem styling for better layout and text handling

- Add min-width and min-height to ModelAvatar to ensure consistent sizing
- Separate AssistantName into a new styled component for better text overflow handling
- Refactor AssistantItem to improve text display and icon alignment
This commit is contained in:
kangfenmao 2025-03-01 10:41:24 +08:00
parent 59b1d8bcc4
commit 27c0edfb79
2 changed files with 15 additions and 9 deletions

View File

@ -14,7 +14,15 @@ const ModelAvatar: FC<Props> = ({ model, size, props }) => {
return (
<Avatar
src={getModelLogo(model?.id || '')}
style={{ width: size, height: size, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
style={{
width: size,
height: size,
minWidth: size,
minHeight: size,
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
{...props}>
{first(model?.name)}
</Avatar>

View File

@ -115,10 +115,10 @@ const AssistantItem: FC<AssistantItemProps> = ({ assistant, isActive, onSwitch,
return (
<Dropdown menu={{ items: getMenuItems(assistant) }} trigger={['contextMenu']}>
<Container onClick={handleSwitch} className={isActive ? 'active' : ''}>
<AssistantName className="name" title={fullAssistantName}>
<AssistantNameRow className="name" title={fullAssistantName}>
{showAssistantIcon && <ModelAvatar model={assistant.model || defaultModel} size={22} />}
{showAssistantIcon ? assistantName : fullAssistantName}
</AssistantName>
<AssistantName className="text-nowrap">{showAssistantIcon ? assistantName : fullAssistantName}</AssistantName>
</AssistantNameRow>
{isActive && (
<MenuButton onClick={() => EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)}>
<TopicCount className="topics-count">{assistant.topics.length}</TopicCount>
@ -155,12 +155,8 @@ const Container = styled.div`
}
`
const AssistantName = styled.div`
const AssistantNameRow = styled.div`
color: var(--color-text);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 13px;
display: flex;
flex-direction: row;
@ -168,6 +164,8 @@ const AssistantName = styled.div`
gap: 5px;
`
const AssistantName = styled.div``
const MenuButton = styled.div`
display: flex;
flex-direction: row;