From ffc8a33ccffe61dd6229cdeaa4e20f60429131af Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Mon, 14 Apr 2025 10:43:39 +0800
Subject: [PATCH] fix: emoji icon empty

---
 src/renderer/src/components/EmojiIcon.tsx     | 47 +++++++++++++------
 .../components/Popups/AddAssistantPopup.tsx   |  2 +-
 .../src/pages/home/Tabs/AssistantItem.tsx     |  7 ++-
 3 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/renderer/src/components/EmojiIcon.tsx b/src/renderer/src/components/EmojiIcon.tsx
index 71804be8..29249c88 100644
--- a/src/renderer/src/components/EmojiIcon.tsx
+++ b/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%;
-    content: ${({ $emoji }) => `'${getLeadingEmoji($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 EmojiBackground = styled.div`
+  width: 100%;
+  height: 100%;
+  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;
 `
 
 export default EmojiIcon
diff --git a/src/renderer/src/components/Popups/AddAssistantPopup.tsx b/src/renderer/src/components/Popups/AddAssistantPopup.tsx
index 77edaacb..2efecdf0 100644
--- a/src/renderer/src/components/Popups/AddAssistantPopup.tsx
+++ b/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>}
diff --git a/src/renderer/src/pages/home/Tabs/AssistantItem.tsx b/src/renderer/src/pages/home/Tabs/AssistantItem.tsx
index 35d61e00..a2ed2715 100644
--- a/src/renderer/src/pages/home/Tabs/AssistantItem.tsx
+++ b/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)}
-                className={isPending && !isActive ? 'animation-pulse' : ''}>
-                {assistant.emoji || assistantName.slice(0, 1)}
-              </EmojiIcon>
+                emoji={assistant.emoji || assistantName.slice(0, 1)}
+                className={isPending && !isActive ? 'animation-pulse' : ''}
+              />
             )
           )}
           <AssistantName className="text-nowrap">{assistantName}</AssistantName>