From f8da9ce94b2771b44f9029df6d6d1783e226fc29 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Wed, 10 Jul 2024 20:15:49 +0800
Subject: [PATCH] feat: add avatar for unknown model

---
 src/renderer/src/pages/home/components/Message.tsx           | 5 ++++-
 .../src/pages/settings/components/ProviderSetting.tsx        | 4 +++-
 src/renderer/src/services/provider.ts                        | 4 ++--
 src/renderer/src/utils/index.ts                              | 5 +++++
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/pages/home/components/Message.tsx b/src/renderer/src/pages/home/components/Message.tsx
index eba3cf26..c2adec58 100644
--- a/src/renderer/src/pages/home/components/Message.tsx
+++ b/src/renderer/src/pages/home/components/Message.tsx
@@ -10,6 +10,7 @@ import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
 import { getModelLogo } from '@renderer/services/provider'
 import Logo from '@renderer/assets/images/logo.png'
 import { SyncOutlined } from '@ant-design/icons'
+import { firstLetter } from '@renderer/utils'
 
 interface Props {
   message: Message
@@ -44,7 +45,9 @@ const MessageItem: FC<Props> = ({ message, showMenu, onDeleteMessage }) => {
     <MessageContainer key={message.id}>
       <AvatarWrapper>
         {message.role === 'assistant' ? (
-          <Avatar src={message.modelId ? getModelLogo(message.modelId) : Logo} />
+          <Avatar src={message.modelId ? getModelLogo(message.modelId) : Logo}>
+            {firstLetter(message.modelId).toUpperCase()}
+          </Avatar>
         ) : (
           <Avatar src={avatar} />
         )}
diff --git a/src/renderer/src/pages/settings/components/ProviderSetting.tsx b/src/renderer/src/pages/settings/components/ProviderSetting.tsx
index b094f54b..88d69143 100644
--- a/src/renderer/src/pages/settings/components/ProviderSetting.tsx
+++ b/src/renderer/src/pages/settings/components/ProviderSetting.tsx
@@ -73,7 +73,9 @@ const ProviderSetting: FC<Props> = ({ provider }) => {
         <Card key={group} type="inner" title={group} style={{ marginBottom: '10px' }} size="small">
           {modelGroups[group].map((model) => (
             <ModelListItem key={model.id}>
-              <Avatar src={getModelLogo(model.id)} size={22} style={{ marginRight: '8px' }} />
+              <Avatar src={getModelLogo(model.id)} size={22} style={{ marginRight: '8px' }}>
+                {model.name[0]}
+              </Avatar>
               {model.name}
             </ModelListItem>
           ))}
diff --git a/src/renderer/src/services/provider.ts b/src/renderer/src/services/provider.ts
index c1d36e52..f7340841 100644
--- a/src/renderer/src/services/provider.ts
+++ b/src/renderer/src/services/provider.ts
@@ -31,7 +31,7 @@ export function getProviderLogo(providerId: string) {
     case 'ollama':
       return OllamaProviderLogo
     default:
-      return ''
+      return undefined
   }
 }
 
@@ -53,5 +53,5 @@ export function getModelLogo(modelId: string) {
     }
   }
 
-  return ''
+  return undefined
 }
diff --git a/src/renderer/src/utils/index.ts b/src/renderer/src/utils/index.ts
index 6064f318..c8be6590 100644
--- a/src/renderer/src/utils/index.ts
+++ b/src/renderer/src/utils/index.ts
@@ -88,3 +88,8 @@ export function droppableReorder<T>(list: T[], startIndex: number, endIndex: num
   result.splice(endIndex, 0, ...removed)
   return result
 }
+
+// firstLetter
+export const firstLetter = (str?: string) => {
+  return str ? str[0] : ''
+}