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

@@ -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>
   )

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)}
+    />
   )
 }
 

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} />