feat: make avatar size configurable via config.toml

backend/chainlit/config.py

@@ -226,6 +226,9 @@
 # Load assistant avatar image directly from URL.
 default_avatar_file_url = ""
 
+# Avatar size in pixels (default: 20).
+# avatar_size = 20
+
 # Specify a custom build directory for the frontend.
 # This can be used to customize the frontend code.
 # Be careful: If this is a relative path, it should not start with a slash.
@@ -372,6 +375,7 @@ class UISettings(BaseModel):
     custom_meta_image_url: Optional[str] = None
     logo_file_url: Optional[str] = None
     default_avatar_file_url: Optional[str] = None
+    avatar_size: Optional[int] = None
     custom_build: Optional[str] = None
     header_links: Optional[List[HeaderLink]] = None
 

frontend/src/components/chat/Messages/Message/Avatar.tsx

@@ -42,6 +42,11 @@ const MessageAvatar = ({ author, hide, isError }: Props) => {
     return apiClient?.buildEndpoint(`/avatars/${author || 'default'}`);
   }, [apiClient, selectedChatProfile, config, author]);
 
+  const avatarSize = config?.ui?.avatar_size;
+  const sizeStyle = avatarSize
+    ? { width: `${avatarSize}px`, height: `${avatarSize}px` }
+    : undefined;
+
   if (isError) {
     return (
       <span className={cn('inline-block', hide && 'invisible')}>
@@ -55,7 +60,10 @@ const MessageAvatar = ({ author, hide, isError }: Props) => {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Avatar className="h-5 w-5 mt-[3px]">
+            <Avatar
+              className={avatarSize ? 'mt-[3px]' : 'h-5 w-5 mt-[3px]'}
+              style={sizeStyle}
+            >
               <AvatarImage
                 src={avatarUrl}
                 alt={`Avatar for ${author || 'default'}`}

libs/react-client/src/types/config.ts

@@ -57,6 +57,7 @@ export interface IChainlitConfig {
     custom_meta_image_url?: string;
     logo_file_url?: string;
     default_avatar_file_url?: string;
+    avatar_size?: number;
     header_links?: {
       name: string;
       display_name: string;