llms-py 2.0.24__py3-none-any.whl → 2.0.26__py3-none-any.whl

llms/ui/Avatar.mjs

@@ -1,13 +1,40 @@
-import { computed, inject } from "vue"
+import { computed, inject, ref, onMounted, onUnmounted } from "vue"
 
 export default {
     template:`
-        <div v-if="$ai.auth?.profileUrl" :title="authTitle">
-            <img :src="$ai.auth.profileUrl" class="size-8 rounded-full" />
+        <div v-if="$ai.auth?.profileUrl" class="relative" ref="avatarContainer">
+            <img
+                @click.stop="toggleMenu"
+                :src="$ai.auth.profileUrl"
+                :title="authTitle"
+                class="size-8 rounded-full cursor-pointer hover:ring-2 hover:ring-gray-300"
+            />
+            <div
+                v-if="showMenu"
+                @click.stop
+                class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700"
+            >
+                <div class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">
+                    <div class="font-medium whitespace-nowrap overflow-hidden text-ellipsis">{{ $ai.auth.displayName || $ai.auth.userName }}</div>
+                    <div class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap overflow-hidden text-ellipsis">{{ $ai.auth.email }}</div>
+                </div>
+                <button type="button"
+                    @click="handleLogout"
+                    class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center whitespace-nowrap"
+                >
+                    <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>
     `,
     setup() {
         const ai = inject('ai')
+        const showMenu = ref(false)
+        const avatarContainer = ref(null)
+
         const authTitle = computed(() => {
             if (!ai.auth) return ''
             const { userId, userName, displayName, bearerToken, roles } = ai.auth
@@ -20,9 +47,39 @@ export default {
             ]
             return sb.filter(x => x).join('\n')
         })
-        
+
+        function toggleMenu() {
+            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
+            }
+        }
+
+        onMounted(() => {
+            document.addEventListener('click', handleClickOutside)
+        })
+
+        onUnmounted(() => {
+            document.removeEventListener('click', handleClickOutside)
+        })
+
         return {
             authTitle,
+            handleLogout,
+            showMenu,
+            toggleMenu,
+            avatarContainer,
         }
     }
 }

llms/ui/Main.mjs

@@ -6,6 +6,7 @@ import { storageObject, addCopyButtons, formatCost, statsTitle } from './utils.m
 import { renderMarkdown } from './markdown.mjs'
 import ChatPrompt, { useChatPrompt } from './ChatPrompt.mjs'
 import SignIn from './SignIn.mjs'
+import OAuthSignIn from './OAuthSignIn.mjs'
 import Avatar from './Avatar.mjs'
 import ModelSelector from './ModelSelector.mjs'
 import SystemPromptSelector from './SystemPromptSelector.mjs'
@@ -22,32 +23,34 @@ export default {
         SystemPromptEditor,
         ChatPrompt,
         SignIn,
+        OAuthSignIn,
         Avatar,
         Welcome,
     },
     template: `
         <div class="flex flex-col h-full w-full">
-            <!-- Header with model and prompt selectors -->
-            <div class="border-b border-gray-200 bg-white px-2 py-2 w-full min-h-16">
+            <!-- Header with model and prompt selectors (hidden when auth required and not authenticated) -->
+            <div v-if="!($ai.requiresAuth && !$ai.auth)" class="border-b border-gray-200 bg-white px-2 py-2 w-full min-h-16">
                 <div class="flex items-center justify-between w-full">
                     <ModelSelector :models="models" v-model="selectedModel" @updated="configUpdated" />
 
                     <div class="flex items-center space-x-2">
-                        <SystemPromptSelector :prompts="prompts" v-model="selectedPrompt" 
+                        <SystemPromptSelector :prompts="prompts" v-model="selectedPrompt"
                             :show="showSystemPrompt" @toggle="showSystemPrompt = !showSystemPrompt" />
                         <Avatar />
                     </div>
                 </div>
             </div>
 
-            <SystemPromptEditor v-if="showSystemPrompt" 
+            <SystemPromptEditor v-if="showSystemPrompt && !($ai.requiresAuth && !$ai.auth)"
                 v-model="currentSystemPrompt" :prompts="prompts" :selected="selectedPrompt" />
 
             <!-- Messages Area -->
             <div class="flex-1 overflow-y-auto" ref="messagesContainer">
                 <div class="mx-auto max-w-6xl px-4 py-6">
                     <div v-if="$ai.requiresAuth && !$ai.auth">
-                        <SignIn @done="$ai.signIn($event)" />
+                        <OAuthSignIn v-if="$ai.authType === 'oauth'" @done="$ai.signIn($event)" />
+                        <SignIn v-else @done="$ai.signIn($event)" />
                     </div>
                     <!-- Welcome message when no thread is selected -->
                     <div v-else-if="!currentThread" class="text-center py-12">

llms/ui/OAuthSignIn.mjs

@@ -0,0 +1,92 @@
+import { inject, ref, onMounted } from "vue"
+import Welcome from './Welcome.mjs'
+
+export default {
+    components: {
+        Welcome,
+    },
+    template: `
+    <div class="min-h-full -mt-36 flex flex-col justify-center sm:px-6 lg:px-8">
+        <div class="sm:mx-auto sm:w-full sm:max-w-md text-center">
+            <Welcome />
+        </div>
+        <div class="sm:mx-auto sm:w-full sm:max-w-md">
+            <div v-if="errorMessage" class="mb-3 bg-red-50 border border-red-200 text-red-800 rounded-lg px-4 py-3">
+                <div class="flex items-start space-x-2">
+                    <div class="flex-1">
+                        <div class="text-base font-medium">{{ errorMessage }}</div>
+                    </div>
+                    <button type="button"
+                        @click="errorMessage = null"
+                        class="text-red-400 hover:text-red-600 flex-shrink-0"
+                    >
+                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+            <div class="py-8 px-4 sm:px-10">
+                <div class="space-y-4">
+                    <button 
+                        type="button"
+                        @click="signInWithGitHub"
+                        class="w-full inline-flex items-center justify-center px-4 py-3 border border-gray-300 rounded-md shadow-sm text-base font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors"
+                    >
+                        <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
+                        </svg>
+                        Sign in with GitHub
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>     
+    `,
+    emits: ['done'],
+    setup(props, { emit }) {
+        const ai = inject('ai')
+        const errorMessage = ref(null)
+        
+        function signInWithGitHub() {
+            // Redirect to GitHub OAuth endpoint
+            window.location.href = '/auth/github'
+        }
+        
+        // Check for session token in URL (after OAuth callback redirect)
+        onMounted(async () => {
+            const urlParams = new URLSearchParams(window.location.search)
+            const sessionToken = urlParams.get('session')
+            
+            if (sessionToken) {
+                try {
+                    // Validate session with server
+                    const response = await ai.get(`/auth/session?session=${sessionToken}`)
+                    
+                    if (response.ok) {
+                        const sessionData = await response.json()
+                        
+                        // Clean up URL
+                        const url = new URL(window.location.href)
+                        url.searchParams.delete('session')
+                        window.history.replaceState({}, '', url.toString())
+                        
+                        // Emit done event with session data
+                        emit('done', sessionData)
+                    } else {
+                        errorMessage.value = 'Failed to validate session'
+                    }
+                } catch (error) {
+                    console.error('Session validation error:', error)
+                    errorMessage.value = 'Failed to validate session'
+                }
+            }
+        })
+        
+        return {
+            signInWithGitHub,
+            errorMessage,
+        }
+    }
+}
+

llms/ui/ai.mjs

@@ -6,12 +6,13 @@ const headers = { 'Accept': 'application/json' }
 const prefsKey = 'llms.prefs'
 
 export const o = {
-    version: '2.0.24',
+    version: '2.0.26',
     base,
     prefsKey,
     welcome: 'Welcome to llms.py',
     auth: null,
     requiresAuth: false,
+    authType: 'apikey',  // 'oauth' or 'apikey' - controls which SignIn component to use
     headers,
     
     resolveUrl(url){
@@ -50,26 +51,88 @@ export const o = {
         this.auth = auth
         if (auth?.apiKey) {
             this.headers.Authorization = `Bearer ${auth.apiKey}`
-        } else if (this.headers.Authorization) {
+            //localStorage.setItem('llms:auth', JSON.stringify({ apiKey: auth.apiKey }))
+        } else if (auth?.sessionToken) {
+            this.headers['X-Session-Token'] = auth.sessionToken
+            localStorage.setItem('llms:auth', JSON.stringify({ sessionToken: auth.sessionToken }))
+        } else {
+            if (this.headers.Authorization) {
+                delete this.headers.Authorization
+            }
+            if (this.headers['X-Session-Token']) {
+                delete this.headers['X-Session-Token']
+            }
+        }
+    },
+    async signOut() {
+        if (this.auth?.sessionToken) {
+            // Call logout endpoint for OAuth sessions
+            try {
+                await this.post('/auth/logout', {
+                    headers: {
+                        'X-Session-Token': this.auth.sessionToken
+                    }
+                })
+            } catch (error) {
+                console.error('Logout error:', error)
+            }
+        }
+        this.auth = null
+        if (this.headers.Authorization) {
             delete this.headers.Authorization
         }
+        if (this.headers['X-Session-Token']) {
+            delete this.headers['X-Session-Token']
+        }
+        localStorage.removeItem('llms:auth')
     },
     async init() {
         // Load models and prompts
         const { initDB } = useThreadStore()
-        const [_, configRes, modelsRes, authRes] = await Promise.all([
+        const [_, configRes, modelsRes] = await Promise.all([
             initDB(),
             this.getConfig(),
             this.getModels(),
-            this.getAuth(),
         ])
         const config = await configRes.json()
         const models = await modelsRes.json()
-        const auth = this.requiresAuth 
+
+        // Update auth settings from server config
+        if (config.requiresAuth != null) {
+            this.requiresAuth = config.requiresAuth
+        }
+        if (config.authType != null) {
+            this.authType = config.authType
+        }
+
+        // Try to restore session from localStorage
+        if (this.requiresAuth) {
+            const storedAuth = localStorage.getItem('llms:auth')
+            if (storedAuth) {
+                try {
+                    const authData = JSON.parse(storedAuth)
+                    if (authData.sessionToken) {
+                        this.headers['X-Session-Token'] = authData.sessionToken
+                    } 
+                    // else if (authData.apiKey) {
+                    //     this.headers.Authorization = `Bearer ${authData.apiKey}`
+                    // }
+                } catch (e) {
+                    console.error('Failed to restore auth from localStorage:', e)
+                    localStorage.removeItem('llms:auth')
+                }
+            }
+        }
+
+        // Get auth status
+        const authRes = await this.getAuth()
+        const auth = this.requiresAuth
             ? await authRes.json()
             : null
         if (auth?.responseStatus?.errorCode) {
             console.error(auth.responseStatus.errorCode, auth.responseStatus.message)
+            // Clear invalid session from localStorage
+            localStorage.removeItem('llms:auth')
         } else {
             this.signIn(auth)
         }

llms/ui/app.css

@@ -426,6 +426,9 @@
   .-mt-12 {
     margin-top: calc(var(--spacing) * -12);
   }
+  .-mt-36 {
+    margin-top: calc(var(--spacing) * -36);
+  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -662,6 +665,9 @@
   .w-32 {
     width: calc(var(--spacing) * 32);
   }
+  .w-48 {
+    width: calc(var(--spacing) * 48);
+  }
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
@@ -852,6 +858,13 @@
       margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-6 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1431,6 +1444,9 @@
   .break-words {
     overflow-wrap: break-word;
   }
+  .text-ellipsis {
+    text-overflow: ellipsis;
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
@@ -2214,6 +2230,21 @@
       }
     }
   }
+  .hover\:ring-2 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, hsl(var(--ring)));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
+  .hover\:ring-gray-300 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-ring-color: var(--color-gray-300);
+      }
+    }
+  }
   .hover\:file\:bg-violet-100 {
     &:hover {
       @media (hover: hover) {
@@ -2292,6 +2323,11 @@
       --tw-ring-color: var(--color-cyan-500);
     }
   }
+  .focus\:ring-gray-500 {
+    &:focus {
+      --tw-ring-color: var(--color-gray-500);
+    }
+  }
   .focus\:ring-green-500 {
     &:focus {
       --tw-ring-color: var(--color-green-500);