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