Add new Settings Page to allow users to upload new User and Agent avatars

mythz · mythz · commit 8a7614a7cb3c · 2026-02-09T19:23:34.000+08:00
diff --git a/llms/ui/App.mjs b/llms/ui/App.mjs
@@ -5,20 +5,32 @@ import { AppContext } from "./ctx.mjs"
 // Vertical Sidebar Icons
 const LeftBar = {
     template: `
-        <div class="select-none flex flex-col space-y-2 pt-2.5 px-1">
-            <div v-for="(icon, id) in $ctx.left" :key="id" class="relative flex items-center justify-center">
-                <component :is="icon.component" 
-                    class="size-7 p-1 cursor-pointer text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 rounded block"
-                    :class="{ 'bg-gray-200 dark:bg-gray-700' : icon.isActive({ ...$layout }) }" 
-                    @mouseenter="tooltip = icon.id"
-                    @mouseleave="tooltip = ''"
-                    />
-                <div v-if="tooltip === icon.id && !icon.isActive({ ...$layout })" 
-                    class="absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 text-xs text-white bg-gray-900 dark:bg-gray-800 rounded shadow-md z-50 whitespace-nowrap pointer-events-none" style="z-index: 60">
-                    {{icon.title ?? icon.name}}
-                </div>    
+        <div class="select-none flex flex-col justify-between h-full">
+            <!-- top icons -->
+            <div class="flex flex-col space-y-2 pt-2.5 px-1">
+                <div v-for="(icon, id) in $ctx.left" :key="id" class="relative flex items-center justify-center">
+                    <component :is="icon.component" 
+                        class="size-7 p-1 cursor-pointer text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 rounded block"
+                        :class="{ 'bg-gray-200 dark:bg-gray-700' : icon.isActive({ ...$layout }) }" 
+                        @mouseenter="tooltip = icon.id"
+                        @mouseleave="tooltip = ''"
+                        />
+                    <div v-if="tooltip === icon.id && !icon.isActive({ ...$layout })" 
+                        class="absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 text-xs text-white bg-gray-900 dark:bg-gray-800 rounded shadow-md z-50 whitespace-nowrap pointer-events-none" style="z-index: 60">
+                        {{icon.title ?? icon.name}}
+                    </div>    
+                </div>
+            </div>
+            <!-- bottom icons -->
+            <div>
+                <div title="Settings" @click="$router.push($route.path == '/settings' ? '/' : '/settings')">
+                    <svg class="size-7 p-1 cursor-pointer text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 rounded block" 
+                        :class="{ 'bg-gray-200 dark:bg-gray-700' : $route.path == '/settings' }" 
+                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 7.5h-7.628a2.251 2.251 0 0 0-4.244 0H5V9h2.128a2.25 2.25 0 0 0 4.244 0H19zm0 7.5h-2.128a2.251 2.251 0 0 0-4.244 0H5v1.5h7.628a2.251 2.251 0 0 0 4.244 0H19z"/></svg>
+                </div>
             </div>
         </div>
+        
     `,
     setup() {
         const tooltip = ref('')
diff --git a/llms/ui/app.css b/llms/ui/app.css
@@ -929,6 +929,9 @@
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
   .w-28 {
     width: calc(var(--spacing) * 28);
   }
diff --git a/llms/ui/ctx.mjs b/llms/ui/ctx.mjs
@@ -136,7 +136,9 @@ export class AppContext {
         this.marked = marked
         this.markedFallback = markedFallback
 
-        this.state = reactive({})
+        this.state = reactive({
+            cacheBreaker: 1
+        })
         this.events = new EventBus()
         this.modalComponents = {}
         this.extensions = []
@@ -190,6 +192,15 @@ export class AppContext {
     getColorScheme() {
         return document.documentElement.classList.contains('dark') ? 'dark' : 'light'
     }
+    getUserAvatar() {
+        return this.resolveUrl(`/avatar/user?mode=${this.getColorScheme()}&t=${this.state.cacheBreaker}`)
+    }
+    getAgentAvatar() {
+        return this.resolveUrl(`/agents/avatar?mode=${this.getColorScheme()}&t=${this.state.cacheBreaker}`)
+    }
+    incCacheBreaker() {
+        this.state.cacheBreaker++
+    }
     getPrefs() {
         return this.prefs
     }
diff --git a/llms/ui/modules/chat/ChatBody.mjs b/llms/ui/modules/chat/ChatBody.mjs
@@ -879,17 +879,14 @@ export const ToolCall = {
 
 export const UserAvatar = {
     template: `
-        <img class="size-8 rounded-full" :src="'/avatar/user?mode=' + $ctx.getColorScheme()" />
+        <img class="size-8 rounded-full" :src="$ctx.getUserAvatar()" />
     `
 }
 
 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
-    }
+        <img class="size-8 rounded-full bg-gray-200 dark:bg-gray-600" :src="$ctx.getAgentAvatar()" />
+    `
 }
 
 export const ChatBody = {
@@ -930,7 +927,7 @@ export const ChatBody = {
                                 <!-- Avatar outside the bubble -->
                                 <div class="flex-shrink-0 flex flex-col justify-center">
                                     <UserAvatar v-if="message.role === 'user'" />
-                                    <AgentAvatar v-else :role="message.role" />
+                                    <AgentAvatar v-else />
 
                                     <!-- Delete button (shown on hover) -->
                                     <button type="button" @click.stop="$threads.deleteMessageFromThread(currentThread.id, message.timestamp)"
diff --git a/llms/ui/modules/layout.mjs b/llms/ui/modules/layout.mjs
@@ -198,7 +198,190 @@ const ErrorViewer = {
         </div>
     `,
     setup() {
+    }
+}
 
+const SettingsPage = {
+    template: `
+    <div class="max-w-2xl mx-auto p-6">
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-8">Settings</h1>
+        
+        <!-- User Avatar Section -->
+        <div class="mb-8 p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">User Avatar</h2>
+            <div class="flex items-center gap-6">
+                <label for="userAvatarInput" class="relative group cursor-pointer">
+                    <img 
+                        :src="userAvatarUrl" 
+                        class="w-20 h-20 rounded-full object-cover border-2 border-gray-200 dark:border-gray-600 shadow-md"
+                        alt="User Avatar"
+                    />
+                    <div class="absolute inset-0 rounded-full bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
+                        </svg>
+                    </div>
+                    <input id="userAvatarInput" type="file" class="hidden" accept="image/*" @change="uploadUserAvatar" />
+                </label>
+                <div class="flex-1">
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
+                        Upload a new image for your avatar
+                    </p>
+                    <div class="flex items-center gap-3">
+                        <label for="userAvatarInput" class="cursor-pointer px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors shadow-sm">
+                            <span>Choose File</span>
+                        </label>
+                        <span v-if="userUploading" class="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-2">
+                            <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
+                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                            </svg>
+                            Uploading...
+                        </span>
+                        <span v-if="userSuccess" class="text-sm text-green-600 dark:text-green-400 flex items-center gap-1">
+                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+                            </svg>
+                            Uploaded!
+                        </span>
+                    </div>
+                    <p v-if="userError" class="mt-2 text-sm text-red-600 dark:text-red-400">{{ userError }}</p>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Agent Avatar Section -->
+        <div class="p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Agent Avatar</h2>
+            <div class="flex items-center gap-6">
+                <label for="agentAvatarInput" class="relative group cursor-pointer">
+                    <img 
+                        :src="agentAvatarUrl" 
+                        class="w-20 h-20 rounded-full object-cover border-2 border-gray-200 dark:border-gray-600 shadow-md"
+                        alt="Agent Avatar"
+                    />
+                    <div class="absolute inset-0 rounded-full bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
+                        </svg>
+                    </div>
+                    <input id="agentAvatarInput" type="file" class="hidden" accept="image/*" @change="uploadAgentAvatar" />
+                </label>
+                <div class="flex-1">
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
+                        Upload a new image for your Agent's avatar
+                    </p>
+                    <div class="flex items-center gap-3">
+                        <label for="agentAvatarInput" class="cursor-pointer px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors shadow-sm">
+                            <span>Choose File</span>
+                        </label>
+                        <span v-if="agentUploading" class="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-2">
+                            <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
+                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                            </svg>
+                            Uploading...
+                        </span>
+                        <span v-if="agentSuccess" class="text-sm text-green-600 dark:text-green-400 flex items-center gap-1">
+                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+                            </svg>
+                            Uploaded!
+                        </span>
+                    </div>
+                    <p v-if="agentError" class="mt-2 text-sm text-red-600 dark:text-red-400">{{ agentError }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    `,
+    setup() {
+        const ctx = inject('ctx')
+
+        const userAvatarUrl = computed(() => ctx.getUserAvatar())
+        const agentAvatarUrl = computed(() => ctx.getAgentAvatar())
+
+        const userUploading = ref(false)
+        const userSuccess = ref(false)
+        const userError = ref('')
+        const agentUploading = ref(false)
+        const agentSuccess = ref(false)
+        const agentError = ref('')
+
+        async function uploadUserAvatar(event) {
+            const file = event.target.files?.[0]
+            if (!file) return
+
+            userUploading.value = true
+            userSuccess.value = false
+            userError.value = ''
+
+            try {
+                const formData = new FormData()
+                formData.append('file', file)
+
+                const response = await ctx.postForm('/user/avatar', { body: formData })
+                const result = await response.json()
+
+                if (response.ok && result.success) {
+                    userSuccess.value = true
+                    ctx.incCacheBreaker()
+                    setTimeout(() => { userSuccess.value = false }, 3000)
+                } else {
+                    userError.value = result.message || 'Upload failed'
+                }
+            } catch (e) {
+                userError.value = e.message || 'Upload failed'
+            } finally {
+                userUploading.value = false
+                event.target.value = ''
+            }
+        }
+
+        async function uploadAgentAvatar(event) {
+            const file = event.target.files?.[0]
+            if (!file) return
+
+            agentUploading.value = true
+            agentSuccess.value = false
+            agentError.value = ''
+
+            try {
+                const formData = new FormData()
+                formData.append('file', file)
+
+                const response = await ctx.postForm('/agents/avatar', { body: formData })
+                const result = await response.json()
+
+                if (response.ok && result.success) {
+                    agentSuccess.value = true
+                    ctx.incCacheBreaker()
+                    setTimeout(() => { agentSuccess.value = false }, 3000)
+                } else {
+                    agentError.value = result.message || 'Upload failed'
+                }
+            } catch (e) {
+                agentError.value = e.message || 'Upload failed'
+            } finally {
+                agentUploading.value = false
+                event.target.value = ''
+            }
+        }
+
+        return {
+            userAvatarUrl,
+            agentAvatarUrl,
+            userUploading,
+            userSuccess,
+            userError,
+            agentUploading,
+            agentSuccess,
+            agentError,
+            uploadUserAvatar,
+            uploadAgentAvatar,
+        }
     }
 }
 
@@ -210,6 +393,11 @@ export default {
             Avatar,
             SignIn,
             ErrorViewer,
+            SettingsPage,
         })
+
+        ctx.routes.push(...[
+            { path: '/settings', component: SettingsPage },
+        ])
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -929,6 +929,9 @@`
`929`	`929`	`.w-16 {`
`930`	`930`	`width: calc(var(--spacing) * 16);`
`931`	`931`	`}`
	`932`	`+ .w-20 {`
	`933`	`+ width: calc(var(--spacing) * 20);`
	`934`	`+ }`
`932`	`935`	`.w-28 {`
`933`	`936`	`width: calc(var(--spacing) * 28);`
`934`	`937`	`}`