Add support for customizable user and agent avatars

Author: mythz

llms/extensions/app/README.md

@@ -1,20 +1,2 @@
-# App Extension
+# Customizing User and Agent Avatars
 
-This extension provides the core application logic and data persistence for the LLMs platform.
-
-## Data Storage & Architecture
-
-### Server-Side SQLite Migration
-The application has migrated from client-side IndexedDB storage to a robust server-side SQLite solution. This architectural shift ensures better data consistency, improved performance, and enables multi-device access to your chat history.
-
-### Asset Management
-To keep the database efficient and portable, binary assets (images, audio, etc.) are not stored directly in the SQLite database. Instead:
-- All generated assets are stored in the local file system cache at `~/.llms/cache`.
-- The database stores only **relative URLs** pointing to these assets.
-- This approach allows for efficient caching and serving of static media.
-
-### Concurrency Model
-To ensure data integrity and high performance without complex locking mechanisms, the system utilizes a **single background thread** for managing all write operations to the database. This design improves concurrency handling and eliminates database locking issues during high-load scenarios.
-
-### Multi-Tenancy & Security
-When authentication is enabled, data isolation is automatically enforced. All core tables, including `threads` and `requests`, are scoped to the authenticated user, ensuring that users can only access their own data.

llms/extensions/app/__init__.py

@@ -431,6 +431,82 @@ async def compact_thread(request):
 
     ctx.add_post("threads/{id}/compact", compact_thread)
 
+    async def get_user_avatar(req):
+        user = ctx.get_username(req)
+        mode = req.query.get("mode", "light")
+
+        # Cache for 1 hour # "Cache-Control": "public, max-age=3600",
+        headers = {"Content-Type": "image/svg+xml"}
+
+        candidate_paths = [
+            os.path.join(ctx.get_user_path(user=user), "avatar." + mode + ".png"),
+            os.path.join(ctx.get_user_path(user=user), "avatar." + mode + ".svg"),
+            os.path.join(ctx.get_user_path(user=user), "avatar.png"),
+            os.path.join(ctx.get_user_path(user=user), "avatar.svg"),
+            os.path.join(ctx.get_user_path(), "avatar." + mode + ".png"),
+            os.path.join(ctx.get_user_path(), "avatar." + mode + ".svg"),
+            os.path.join(ctx.get_user_path(), "avatar.png"),
+            os.path.join(ctx.get_user_path(), "avatar.svg"),
+        ]
+
+        for path in candidate_paths:
+            if os.path.exists(path):
+                headers["Content-Type"] = "image/png" if path.endswith(".png") else "image/svg+xml"
+                return web.FileResponse(path, headers=headers)
+
+        # Fall back to default 'user' avatar
+        bg_color = "#1e3a8a" if mode == "dark" else "#bfdbfe"
+        text_color = "#f3f4f6" if mode == "dark" else "#111827"
+
+        default_avatar = f"""
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="color:{text_color}">
+            <circle cx="16" cy="16" r="16" fill="{bg_color}"/>
+            <g transform="translate(4, 4)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
+            </g>
+        </svg>
+        """
+        return web.Response(text=default_avatar, headers=headers)
+
+    ctx.add_get("/avatar/user", get_user_avatar)
+
+    async def get_agent_avatar(req):
+        role = req.match_info["role"]
+        mode = req.query.get("mode", "light")
+
+        # Cache for 1 hour # "Cache-Control": "public, max-age=3600",
+        headers = {"Content-Type": "image/svg+xml"}
+
+        candidate_paths = [
+            os.path.join(ctx.get_user_path(), role + "." + mode + ".png"),
+            os.path.join(ctx.get_user_path(), role + "." + mode + ".svg"),
+            os.path.join(ctx.get_user_path(), role + ".png"),
+            os.path.join(ctx.get_user_path(), role + ".svg"),
+            os.path.join(ctx.get_user_path(), "agent." + mode + ".png"),
+            os.path.join(ctx.get_user_path(), "agent." + mode + ".svg"),
+            os.path.join(ctx.get_user_path(), "agent.png"),
+            os.path.join(ctx.get_user_path(), "agent.svg"),
+        ]
+
+        for path in candidate_paths:
+            if os.path.exists(path):
+                headers["Content-Type"] = "image/png" if path.endswith(".png") else "image/svg+xml"
+                return web.FileResponse(path, headers=headers)
+
+        # Fall back to default 'agent' avatar
+        bg_color = "#1f2937" if mode == "dark" else "#eceef1"
+        text_color = "#f3f4f6" if mode == "dark" else "#111827"
+
+        default_avatar = f"""
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="color:{text_color}">
+            <circle cx="16" cy="16" r="16" fill="{bg_color}"/>
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 20v-8a2.667 2.667 0 1 1 5.333 0v8m-5.333-4h5.333m5.334-6.667v10.667" transform="translate(2.667, 1.5)"/>
+        </svg>
+        """
+        return web.Response(text=default_avatar, headers=headers)
+
+    ctx.add_get("/agents/avatar/{role}", get_agent_avatar)
+
     async def chat_request(openai_request, context):
         chat = openai_request
         user = context.get("user", None)

llms/ui/App.mjs

@@ -170,8 +170,9 @@ export default {
             <div id="main" :class="$ctx.cls('main', 'flex-1 flex flex-col')">
                 <div id="main-inner" :class="$ctx.cls('main-inner', 'flex flex-col h-full w-full overflow-hidden')">
                     <div v-if="$ai.hasAccess" id="header" :class="$ctx.cls('header', 'py-1 pr-1 flex items-center justify-between shrink-0')">
-                        <div>
+                        <div class="flex items-center gap-2">
                             <ModelSelector :models="$state.models" v-model="$state.selectedModel" />
+                            <component v-for="(c, id) in $ctx.leftTop" :is="c.component" />
                         </div>
                         <div class="flex items-center gap-2">
                             <TopBar id="top-bar" />

llms/ui/app.css

@@ -108,7 +108,6 @@
     --color-fuchsia-900: oklch(40.1% 0.17 325.612);
     --color-slate-50: oklch(98.4% 0.003 247.858);
     --color-slate-200: oklch(92.9% 0.013 255.508);
-    --color-slate-300: oklch(86.9% 0.022 252.894);
     --color-slate-400: oklch(70.4% 0.04 256.788);
     --color-slate-500: oklch(55.4% 0.046 257.417);
     --color-slate-700: oklch(37.2% 0.044 257.287);
@@ -201,7 +200,6 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
-    --default-ring-color: hsl(var(--ring));
   }
 }
 @layer base {
@@ -604,9 +602,6 @@
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
-  .mt-10 {
-    margin-top: calc(var(--spacing) * 10);
-  }
   .mt-12 {
     margin-top: calc(var(--spacing) * 12);
   }
@@ -821,9 +816,6 @@
   .h-22 {
     height: calc(var(--spacing) * 22);
   }
-  .h-24 {
-    height: calc(var(--spacing) * 24);
-  }
   .h-40 {
     height: calc(var(--spacing) * 40);
   }
@@ -1682,6 +1674,9 @@
   .bg-blue-100 {
     background-color: var(--color-blue-100);
   }
+  .bg-blue-200 {
+    background-color: var(--color-blue-200);
+  }
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
@@ -1748,9 +1743,6 @@
       background-color: color-mix(in oklab, var(--color-gray-500) 75%, transparent);
     }
   }
-  .bg-gray-600 {
-    background-color: var(--color-gray-600);
-  }
   .bg-gray-700 {
     background-color: var(--color-gray-700);
   }
@@ -2532,9 +2524,6 @@
   .text-sky-600 {
     color: var(--color-sky-600);
   }
-  .text-slate-300 {
-    color: var(--color-slate-300);
-  }
   .text-slate-500 {
     color: var(--color-slate-500);
   }
@@ -4217,6 +4206,11 @@
       max-width: 65ch;
     }
   }
+  .sm\:max-w-sm {
+    @media (width >= 40rem) {
+      max-width: var(--container-sm);
+    }
+  }
   .sm\:flex-initial {
     @media (width >= 40rem) {
       flex: 0 auto;
@@ -4420,6 +4414,11 @@
       width: auto;
     }
   }
+  .md\:max-w-lg {
+    @media (width >= 48rem) {
+      max-width: var(--container-lg);
+    }
+  }
   .md\:max-w-xl {
     @media (width >= 48rem) {
       max-width: var(--container-xl);
@@ -4594,6 +4593,11 @@
       max-width: var(--breakpoint-md);
     }
   }
+  .lg\:max-w-xl {
+    @media (width >= 64rem) {
+      max-width: var(--container-xl);
+    }
+  }
   .lg\:flex-initial {
     @media (width >= 64rem) {
       flex: 0 auto;
@@ -4659,6 +4663,11 @@
       width: calc(var(--spacing) * 80);
     }
   }
+  .xl\:max-w-2xl {
+    @media (width >= 80rem) {
+      max-width: var(--container-2xl);
+    }
+  }
   .xl\:max-w-3xl {
     @media (width >= 80rem) {
       max-width: var(--container-3xl);
@@ -5308,6 +5317,11 @@
       fill: var(--color-gray-300);
     }
   }
+  .dark\:fill-gray-500 {
+    &:where(.dark, .dark *) {
+      fill: var(--color-gray-500);
+    }
+  }
   .dark\:text-black {
     &:where(.dark, .dark *) {
       color: var(--color-black);

llms/ui/ctx.mjs

@@ -150,6 +150,7 @@ export class AppContext {
         this.threadFooterComponents = {}
         this.top = {}
         this.left = {}
+        this.leftTop = {}
         this.layout = reactive(storageObject(`llms.layout`))
         this.prefs = reactive(storageObject(ai.prefsKey))
         this._onRouterBeforeEach = []
@@ -186,12 +187,33 @@ export class AppContext {
             this[name] = global
         })
     }
+    getColorScheme() {
+        return document.documentElement.classList.contains('dark') ? 'dark' : 'light'
+    }
     getPrefs() {
         return this.prefs
     }
     setPrefs(o) {
         storageObject(this.ai.prefsKey, Object.assign(this.prefs, o))
     }
+    _validateComponents(componentMap) {
+        Object.entries(componentMap).forEach(([id, def]) => {
+            if (!def.component) {
+                console.error(`Component Definition ${id} is missing component property`)
+            }
+            def.id = id
+            if (!def.name) {
+                def.name = humanize(id)
+            }
+            if (typeof def.isActive != 'function') {
+                def.isActive = () => false
+            }
+        })
+        return componentMap
+    }
+    setLeftTop(componentMap) {
+        Object.assign(this.leftTop, this._validateComponents(componentMap))
+    }
     _validateIcons(icons) {
         Object.entries(icons).forEach(([id, icon]) => {
             if (!icon.component) {

llms/ui/modules/chat/ChatBody.mjs

@@ -876,6 +876,22 @@ export const ToolCall = {
         }
     }
 }
+
+export const UserAvatar = {
+    template: `
+        <img class="size-8 rounded-full" :src="'/avatar/user?mode=' + $ctx.getColorScheme()" />
+    `
+}
+
+export const AgentAvatar = {
+    template: `
+        <img class="size-8 rounded-full bg-gray-200 dark:bg-gray-600" :src="'/agents/avatar/' + role + '?mode=' + $ctx.getColorScheme()" />
+    `,
+    props: {
+        role: String
+    }
+}
+
 export const ChatBody = {
     template: `
         <div class="flex flex-col h-full">
@@ -913,19 +929,8 @@ export const ChatBody = {
                             >
                                 <!-- Avatar outside the bubble -->
                                 <div class="flex-shrink-0 flex flex-col justify-center">
-                                    <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium"
-                                        :class="message.role === 'user'
-                                            ? 'bg-blue-100 dark:bg-blue-900 text-gray-900 dark:text-gray-100 border border-blue-200 dark:border-blue-700'
-                                            : message.role === 'tool'
-                                                ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border border-purple-200 dark:border-purple-800'
-                                                : 'bg-gray-600 dark:bg-gray-500 text-white'"
-                                    >
-                                        <span v-if="message.role === 'user'">U</span>
-                                        <svg v-else-if="message.role === 'tool'" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                            <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
-                                        </svg>
-                                        <span v-else>AI</span>
-                                    </div>
+                                    <UserAvatar v-if="message.role === 'user'" />
+                                    <AgentAvatar v-else :role="message.role" />
 
                                     <!-- Delete button (shown on hover) -->
                                     <button type="button" @click.stop="$threads.deleteMessageFromThread(currentThread.id, message.timestamp)"
@@ -1056,9 +1061,10 @@ export const ChatBody = {
                             <div v-if="$threads.watchingThread" class="flex items-start space-x-3 group">
                                 <!-- Avatar outside the bubble -->
                                 <div class="flex-shrink-0">
-                                    <div class="w-8 h-8 rounded-full bg-gray-600 dark:bg-gray-500 text-white flex items-center justify-center text-sm font-medium">
-                                        AI
-                                    </div>
+                                    <svg class="size-8" viewBox="0 0 32 32" fill="none">
+                                        <circle cx="16" cy="16" r="15" class="fill-gray-600 dark:fill-gray-500" stroke="none"/>
+                                        <path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 20v-8a2.667 2.667 0 1 1 5.333 0v8m-5.333-4h5.333m5.334-6.667v10.667" transform="translate(2.667, 1.5)"/>
+                                    </svg>
                                 </div>
 
                                 <!-- Loading bubble -->
@@ -1363,7 +1369,6 @@ export const ChatBody = {
             hasAttachments,
             resolveUrl,
             getMessageUsage,
-            getToolOutput,
             isToolLinked,
             tryParseJson,
             hasJsonStructure,

llms/ui/modules/chat/index.mjs

@@ -1,7 +1,11 @@
 import { ref, watch, computed, nextTick, inject, onMounted, onUnmounted } from 'vue'
 import { $$, createElement, lastRightPart, ApiResult, createErrorStatus } from "@servicestack/client"
 import SettingsDialog, { useSettings } from './SettingsDialog.mjs'
-import { ChatBody, ErrorBubble, LightboxImage, TypeText, TypeImage, TypeAudio, TypeFile, ViewType, ViewTypes, ViewToolTypes, TextViewer, ToolArguments, ToolOutput, MessageUsage, MessageReasoning, CompactThreadButton } from './ChatBody.mjs'
+import {
+    ChatBody, ErrorBubble, LightboxImage, TypeText, TypeImage, TypeAudio, TypeFile, ViewType, ViewTypes,
+    ViewToolTypes, TextViewer, ToolCall, ToolArguments, ToolOutput, MessageUsage, MessageReasoning,
+    CompactThreadButton, UserAvatar, AgentAvatar
+} from './ChatBody.mjs'
 import { AppContext } from '../../ctx.mjs'
 
 const imageExts = 'png,webp,jpg,jpeg,gif,bmp,svg,tiff,ico'.split(',')
@@ -1121,6 +1125,8 @@ export default {
             Home,
             ThreadHeader,
             ThreadFooter,
+            UserAvatar,
+            AgentAvatar,
         })
         ctx.setGlobals({
             chat: useChatPrompt(ctx)