From ec8c24a1c2c22a4ef5e1bfbe7c5c570e25df6b0a Mon Sep 17 00:00:00 2001
From: MyPrototypeWhat <daoquqiexing@gmail.com>
Date: Tue, 30 Sep 2025 15:03:58 +0800
Subject: [PATCH] refactor: update Avatar components for improved styling and
 functionality

- Refactored ProviderAvatar to use the name prop for better clarity.
- Updated ModelAvatar to apply consistent styling using Tailwind CSS for width and height.
- Adjusted useOcrProvider hook to standardize Avatar component usage with dynamic sizing.

These changes enhance the overall consistency and maintainability of the Avatar components across the application.
---
 src/renderer/src/components/Avatar/ModelAvatar.tsx | 8 ++++++--
 src/renderer/src/components/ProviderAvatar.tsx     | 6 +++---
 src/renderer/src/hooks/useOcrProvider.tsx          | 4 ++--
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/renderer/src/components/Avatar/ModelAvatar.tsx b/src/renderer/src/components/Avatar/ModelAvatar.tsx
index dccbeb0a68..0c85c61b66 100644
--- a/src/renderer/src/components/Avatar/ModelAvatar.tsx
+++ b/src/renderer/src/components/Avatar/ModelAvatar.tsx
@@ -13,9 +13,13 @@ interface Props {
 }
 
 const ModelAvatar: FC<Props> = ({ model, size, className, ...props }) => {
-  const classNames = cn('flex items-center justify-center', `h-[${size}px] w-[${size}px]`, `${className || ''}`)
   return (
-    <Avatar src={getModelLogo(model?.id || '')} {...props} className={classNames}>
+    <Avatar
+      src={getModelLogo(model?.id || '')}
+      radius="lg"
+      className={cn('flex items-center justify-center', `${className || ''}`)}
+      style={{ width: size, height: size }}
+      {...props}>
       {first(model?.name)}
     </Avatar>
   )
diff --git a/src/renderer/src/components/ProviderAvatar.tsx b/src/renderer/src/components/ProviderAvatar.tsx
index 5460ed66bb..536dadc874 100644
--- a/src/renderer/src/components/ProviderAvatar.tsx
+++ b/src/renderer/src/components/ProviderAvatar.tsx
@@ -72,9 +72,9 @@ export const ProviderAvatarPrimitive: React.FC<ProviderAvatarPrimitiveProps> = (
         backgroundColor,
         color,
         ...style
-      }}>
-      {getFirstCharacter(providerName)}
-    </Avatar>
+      }}
+      name={getFirstCharacter(providerName)}
+    />
   )
 }
 
diff --git a/src/renderer/src/hooks/useOcrProvider.tsx b/src/renderer/src/hooks/useOcrProvider.tsx
index d34a2915dd..01ecab885a 100644
--- a/src/renderer/src/hooks/useOcrProvider.tsx
+++ b/src/renderer/src/hooks/useOcrProvider.tsx
@@ -72,11 +72,11 @@ export const useOcrProviders = () => {
     if (isBuiltinOcrProvider(p)) {
       switch (p.id) {
         case 'tesseract':
-          return <Avatar className={`h-[${size}px] w-[${size}px]`} src={TesseractLogo} />
+          return <Avatar src={TesseractLogo} style={{ width: size, height: size }} />
         case 'system':
           return <MonitorIcon size={size} />
         case 'paddleocr':
-          return <Avatar className={`h-[${size}px] w-[${size}px]`} src={PaddleocrLogo} />
+          return <Avatar src={PaddleocrLogo} style={{ width: size, height: size }} />
       }
     }
     return <FileQuestionMarkIcon size={size} />