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:
parent
59b1d8bcc4
commit
27c0edfb79
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user