fix: emoji icon empty

src/renderer/src/components/EmojiIcon.tsx

@@ -1,7 +1,24 @@
 import { getLeadingEmoji } from '@renderer/utils'
+import { FC } from 'react'
 import styled from 'styled-components'
 
-const EmojiIcon = styled.div<{ $emoji: string }>`
+interface EmojiIconProps {
+  emoji: string
+  className?: string
+}
+
+const EmojiIcon: FC<EmojiIconProps> = ({ emoji, className }) => {
+  const _emoji = getLeadingEmoji(emoji || '⭐️') || '⭐️'
+
+  return (
+    <Container className={className}>
+      <EmojiBackground>{_emoji}</EmojiBackground>
+      {_emoji}
+    </Container>
+  )
+}
+
+const Container = styled.div`
   width: 26px;
   height: 26px;
   border-radius: 13px;
@@ -13,20 +30,20 @@ const EmojiIcon = styled.div<{ $emoji: string }>`
   position: relative;
   overflow: hidden;
   margin-right: 3px;
-  &:before {
+`
-    width: 100%;
+
-    height: 100%;
+const EmojiBackground = styled.div`
-    content: ${({ $emoji }) => `'${getLeadingEmoji($emoji || ' ')}'`};
+  width: 100%;
-    position: absolute;
+  height: 100%;
-    inset: 0;
+  position: absolute;
-    display: flex;
+  inset: 0;
-    align-items: center;
+  display: flex;
-    justify-content: center;
+  align-items: center;
-    font-size: 200%;
+  justify-content: center;
-    transform: scale(1.5);
+  font-size: 200%;
-    filter: blur(5px);
+  transform: scale(1.5);
-    opacity: 0.4;
+  filter: blur(5px);
-  }
+  opacity: 0.4;
 `
 
 export default EmojiIcon

src/renderer/src/components/Popups/AddAssistantPopup.tsx

@@ -188,7 +188,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
             className={`agent-item ${agent.id === 'default' ? 'default' : ''} ${index === selectedIndex ? 'keyboard-selected' : ''}`}
             onMouseEnter={() => setSelectedIndex(index)}>
             <HStack alignItems="center" gap={5} style={{ overflow: 'hidden', maxWidth: '100%' }}>
-              <EmojiIcon $emoji={agent.emoji || ''}>{agent.emoji}</EmojiIcon>
+              <EmojiIcon emoji={agent.emoji || ''} />
               <span className="text-nowrap">{agent.name}</span>
             </HStack>
             {agent.id === 'default' && <Tag color="green">{t('agents.tag.system')}</Tag>}

src/renderer/src/pages/home/Tabs/AssistantItem.tsx

@@ -217,10 +217,9 @@ const AssistantItem: FC<AssistantItemProps> = ({ assistant, isActive, onSwitch,
           ) : (
             assistantIconType === 'emoji' && (
               <EmojiIcon
-                $emoji={assistant.emoji || assistantName.slice(0, 1)}
+                emoji={assistant.emoji || assistantName.slice(0, 1)}
-                className={isPending && !isActive ? 'animation-pulse' : ''}>
+                className={isPending && !isActive ? 'animation-pulse' : ''}
-                {assistant.emoji || assistantName.slice(0, 1)}
+              />
-              </EmojiIcon>
             )
           )}
           <AssistantName className="text-nowrap">{assistantName}</AssistantName>