whai/cherry-studio
1
1
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(AssistantItem): add emoji support and improve icon display logic

Browse Source
This commit is contained in:
Teo 2025-04-12 22:58:01 +08:00 committed by 亢奋猫
parent e4514bd04c
commit 97ef7016d3
1 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/renderer/src/pages/home/Tabs/AssistantItem.tsx
View File

@ -174,14 +174,20 @@ const AssistantItem: FC<AssistantItemProps> = ({ assistant, isActive, onSwitch,
<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' : ''}>
<AssistantNameRow className="name" title={fullAssistantName}> <AssistantNameRow className="name" title={fullAssistantName}>
{showAssistantIcon && ( {showAssistantIcon ? (
<ModelAvatar <ModelAvatar
model={assistant.model || defaultModel} model={assistant.model || defaultModel}
size={22} size={22}
className={isPending && !isActive ? 'animation-pulse' : ''} className={isPending && !isActive ? 'animation-pulse' : ''}
/> />
) : (
<AssistantEmoji
$emoji={assistant.emoji || assistantName.slice(0, 1)}
className={isPending && !isActive ? 'animation-pulse' : ''}>
{assistant.emoji || assistantName.slice(0, 1)}
</AssistantEmoji>
)} )}
<AssistantName className="text-nowrap">{showAssistantIcon ? assistantName : fullAssistantName}</AssistantName> <AssistantName className="text-nowrap">{assistantName}</AssistantName>
</AssistantNameRow> </AssistantNameRow>
{isActive && ( {isActive && (
<MenuButton onClick={() => EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)}> <MenuButton onClick={() => EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)}>
@ -228,6 +234,33 @@ const AssistantNameRow = styled.div`
gap: 5px; gap: 5px;
` `
const AssistantEmoji = styled.div<{ $emoji: string }>`
width: 22px;
height: 22px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 12px;
position: relative;
overflow: hidden;
&:before {
width: 100%;
height: 100%;
content: ${({ $emoji }) => `'${$emoji || ' '}'`};
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 200%;
transform: scale(1.5);
filter: blur(5px);
opacity: 0.4;
}
`
const AssistantName = styled.div`` const AssistantName = styled.div``
const MenuButton = styled.div` const MenuButton = styled.div`