From 97ef7016d37320b50c0ce74c55ec1e625da348fc Mon Sep 17 00:00:00 2001
From: Teo <cheesen.xu@gmail.com>
Date: Sat, 12 Apr 2025 22:58:01 +0800
Subject: [PATCH] feat(AssistantItem): add emoji support and improve icon
 display logic

---
 .../src/pages/home/Tabs/AssistantItem.tsx     | 37 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/pages/home/Tabs/AssistantItem.tsx b/src/renderer/src/pages/home/Tabs/AssistantItem.tsx
index f88ca3dc..1ffaa30b 100644
--- a/src/renderer/src/pages/home/Tabs/AssistantItem.tsx
+++ b/src/renderer/src/pages/home/Tabs/AssistantItem.tsx
@@ -174,14 +174,20 @@ const AssistantItem: FC<AssistantItemProps> = ({ assistant, isActive, onSwitch,
     <Dropdown menu={{ items: getMenuItems(assistant) }} trigger={['contextMenu']}>
       <Container onClick={handleSwitch} className={isActive ? 'active' : ''}>
         <AssistantNameRow className="name" title={fullAssistantName}>
-          {showAssistantIcon && (
+          {showAssistantIcon ? (
             <ModelAvatar
               model={assistant.model || defaultModel}
               size={22}
               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>
         {isActive && (
           <MenuButton onClick={() => EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)}>
@@ -228,6 +234,33 @@ const AssistantNameRow = styled.div`
   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 MenuButton = styled.div`