|
| 1 | +--- |
| 2 | +title: Avatars |
| 3 | +description: Personalize your chat experience by adding custom avatars for yourself and AI agents. |
| 4 | +--- |
| 5 | + |
| 6 | +## Customizing User and Agent Avatars |
| 7 | + |
| 8 | +Avatars are displayed in the chat interface to visually distinguish between user messages and AI responses. You can customize these avatars using the bottom left icon to open the Settings Page: |
| 9 | + |
| 10 | +<Screenshot src="/img/features/avatars-settings.webp" class="mx-auto max-w-2xl border rounded" /> |
| 11 | + |
| 12 | +The new Avatars will be used in the Chat UI and other areas of the app where it's needed. |
| 13 | + |
| 14 | +<Screenshot src="/img/features/avatars-chat.webp" class="mx-auto max-w-2xl border rounded" /> |
| 15 | + |
| 16 | +### Supported Formats |
| 17 | + |
| 18 | +* `.png` - Recommended for photos |
| 19 | +* `.svg` - Vector format for illustrations |
| 20 | +* All other image formats will be converted to **png** automatically. |
| 21 | + |
| 22 | +They can also be manually added to your `~/.llms/users/` directory at: |
| 23 | + |
| 24 | +## User Avatar |
| 25 | + |
| 26 | +Your user avatar appears next to your messages in the Chat UI, with either of the file names: |
| 27 | + |
| 28 | +- `avatar.png` or `avatar.svg` |
| 29 | + |
| 30 | +You can also provide separate avatars for light and dark modes by including the mode in the filename: |
| 31 | + |
| 32 | +- `avatar.light.png` or `avatar.dark.svg` |
| 33 | + |
| 34 | +#### File Resolution Order |
| 35 | + |
| 36 | +The system checks for user avatar images in this order (first match wins): |
| 37 | + |
| 38 | +1. `~/.llms/users/{username}/{avatar}` (if using authentication) |
| 39 | +2. `~/.llms/users/default/{avatar}` |
| 40 | + |
| 41 | +## Agent Avatar |
| 42 | + |
| 43 | +Agent avatars appear next to AI responses. You can customize the default agent avatar or create role-specific avatars. |
| 44 | + |
| 45 | +- `agent.png` or `agent.svg` |
| 46 | + |
| 47 | +Or customized for light and dark modes by including the mode in the filename: |
| 48 | + |
| 49 | +- `agent.light.png` or `agent.dark.svg` |
| 50 | + |
| 51 | +#### File Resolution Order |
| 52 | + |
| 53 | +1. `~/.llms/users/default/{agent}` |
| 54 | + |
0 commit comments