Refactor AuthMenuItems into its own AuthProvider so it has full control

Author: mythz

llms/extensions/github_auth/ui/index.mjs

@@ -1,4 +1,6 @@
-import { ref } from "vue"
+import { ref, computed, inject } from "vue"
+
+let ext
 
 const SignIn = {
     template: `
@@ -55,12 +57,58 @@ const SignIn = {
     }
 }
 
+const AuthMenuItems = {
+    template: `
+        <div class="px-4 py-2 text-sm border-b border-[var(--user-border)]">
+            <div class="font-medium whitespace-nowrap overflow-hidden text-ellipsis">{{ auth.displayName || auth.userName }}</div>
+            <div class="text-xs whitespace-nowrap overflow-hidden text-ellipsis">{{ auth.email }}</div>
+        </div>
+
+        <button type="button"
+            @click="handleLogout"
+            class="w-full text-left px-4 py-2 text-sm flex items-center whitespace-nowrap hover:bg-[var(--background)]/50">
+            <svg class="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
+            </svg>
+            Sign Out
+        </button>
+    `,
+    emits: ['done'],
+    props: { auth: Object },
+    setup(props, { emit }) {
+        const ctx = inject('ctx')
+        const showComponents = computed(() => {
+            const args = { auth: props.auth }
+            return Object.values(ctx.userMenuItemComponents).filter(def => def.show(args)).map(def => def.component)
+        })
+
+        async function handleLogout() {
+            emit('done')
+            await ctx.ai.signOut()
+            // Reload the page to show sign-in screen
+            window.location.reload()
+        }
+
+        return {
+            showComponents,
+            handleLogout,
+        }
+    }
+}
 
 export default {
     install(ctx) {
-        // Override SignIn component
+        ext = ctx.scope("credentials")
+
+        ctx.setUserMenuItems({
+            auth: {
+                component: AuthMenuItems,
+                show: ({ auth }) => !!auth?.userId
+            }
+        })
+
         ctx.components({
             SignIn,
         })
     }
-}
+}

llms/ui/app.css

@@ -626,6 +626,9 @@
   .-my-1\.5 {
     margin-block: calc(var(--spacing) * -1.5);
   }
+  .my-1 {
+    margin-block: calc(var(--spacing) * 1);
+  }
   .my-2 {
     margin-block: calc(var(--spacing) * 2);
   }

llms/ui/ctx.mjs

@@ -153,6 +153,7 @@ export class AppContext {
         this.updateThreadFilters = []
         this.threadHeaderComponents = {}
         this.threadFooterComponents = {}
+        this.userMenuItemComponents = {}
         this.top = {}
         this.left = {}
         this.leftTop = {}
@@ -370,6 +371,9 @@ export class AppContext {
     setThreadFooters(components) {
         Object.assign(this.threadFooterComponents, components)
     }
+    setUserMenuItems(components) {
+        Object.assign(this.userMenuItemComponents, components)
+    }
 
     async createJsonResult(res) {
         return this.ai.createJsonResult(res)

llms/ui/modules/layout.mjs

@@ -29,7 +29,7 @@ const Welcome = {
 
 const Avatar = {
     template: `
-        <div v-if="$ai.auth?.profileUrl" class="relative" ref="avatarContainer">
+        <div v-if="$ai.auth?.profileUrl && showComponents.length" class="relative" ref="avatarContainer">
             <img
                 @click.stop="toggleMenu"
                 :src="$ai.auth.profileUrl"
@@ -39,21 +39,12 @@ const Avatar = {
             <div
                 v-if="showMenu"
                 @click.stop
-                class="absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 z-50 border" :class="[$styles.messageAssistant]"
-            >
-                <div class="px-4 py-2 text-sm border-b border-[var(--user-border)]">
-                    <div class="font-medium whitespace-nowrap overflow-hidden text-ellipsis">{{ $ai.auth.displayName || $ai.auth.userName }}</div>
-                    <div class="text-xs whitespace-nowrap overflow-hidden text-ellipsis">{{ $ai.auth.email }}</div>
+                class="absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 z-50 border" :class="[$styles.messageAssistant]">
+
+                <div v-for="component in showComponents">
+                    <component :is="component" :auth="$ai.auth" @done="showMenu = false" />
                 </div>
-                <button type="button"
-                    @click="handleLogout"
-                    class="w-full text-left px-4 py-2 text-sm flex items-center whitespace-nowrap hover:bg-[var(--background)]/50"
-                >
-                    <svg class="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
-                    </svg>
-                    Sign Out
-                </button>
+
             </div>
         </div>
     `,
@@ -79,20 +70,18 @@ const Avatar = {
             showMenu.value = !showMenu.value
         }
 
-        async function handleLogout() {
-            showMenu.value = false
-            await ai.signOut()
-            // Reload the page to show sign-in screen
-            window.location.reload()
-        }
-
         // Close menu when clicking outside
         const handleClickOutside = (event) => {
             if (showMenu.value && avatarContainer.value && !avatarContainer.value.contains(event.target)) {
                 showMenu.value = false
             }
         }
 
+        const showComponents = computed(() => {
+            const args = { auth: ai.auth }
+            return Object.values(ctx.userMenuItemComponents).filter(def => def.show(args)).map(def => def.component)
+        })
+
         onMounted(() => {
             document.addEventListener('click', handleClickOutside)
         })
@@ -103,10 +92,10 @@ const Avatar = {
 
         return {
             authTitle,
-            handleLogout,
             showMenu,
             toggleMenu,
             avatarContainer,
+            showComponents,
         }
     }
 }