Skip to content

feat: make avatar size configurable via config.toml #2744

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
janjagusch wants to merge 1 commit into
base: main
Choose a base branch
from
+15 −2
Draft

feat: make avatar size configurable via config.toml #2744

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions backend/chainlit/config.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,9 @@
# Load assistant avatar image directly from URL.
default_avatar_file_url = ""

# Avatar size in pixels.
# 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.
Expand Down Expand Up @@ -356,6 +359,8 @@ class UISettings(BaseModel):
logo_file_url: Optional[str] = None
# Optional avatar image file url
default_avatar_file_url: Optional[str] = None
# Avatar size in pixels (default: 20)
avatar_size: int = 20
# Optional custom build directory for the frontend
custom_build: Optional[str] = None
# Optional header links
Expand Down
11 changes: 9 additions & 2 deletions frontend/src/components/chat/Messages/Message/Avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,15 @@ interface Props {
isError?: boolean;
}

const DEFAULT_AVATAR_SIZE = 20;

const MessageAvatar = ({ author, hide, isError }: Props) => {
const apiClient = useContext(ChainlitContext);
const { chatProfile } = useChatSession();
const { config } = useConfig();

const avatarSize = config?.ui?.avatar_size ?? DEFAULT_AVATAR_SIZE;

const selectedChatProfile = useMemo(() => {
return config?.chatProfiles.find((profile) => profile.name === chatProfile);
}, [config, chatProfile]);
Expand All @@ -45,7 +49,10 @@ const MessageAvatar = ({ author, hide, isError }: Props) => {
if (isError) {
return (
<span className={cn('inline-block', hide && 'invisible')}>
<AlertCircle className="h-5 w-5 fill-destructive mt-[5px] text-destructive-foreground" />
<AlertCircle
className="fill-destructive text-destructive-foreground"
style={{ width: avatarSize, height: avatarSize, marginTop: 5 }}
/>
</span>
);
}
Expand All @@ -55,7 +62,7 @@ const MessageAvatar = ({ author, hide, isError }: Props) => {
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Avatar className="h-5 w-5 mt-[3px]">
<Avatar style={{ width: avatarSize, height: avatarSize, marginTop: 3 }}>
<AvatarImage
src={avatarUrl}
alt={`Avatar for ${author || 'default'}`}
Expand Down
1 change: 1 addition & 0 deletions libs/react-client/src/types/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,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;
Expand Down