llms-py 2.0.18__py3-none-any.whl → 2.0.33__py3-none-any.whl

llms/ui/Sidebar.mjs

@@ -12,22 +12,22 @@ const ThreadItem = {
     template: `
         <div
             class="group relative mx-2 mb-1 rounded-md cursor-pointer transition-colors  border border-transparent"
-            :class="isActive ? 'bg-blue-100 border-blue-200' : 'hover:bg-gray-100'"
+            :class="isActive ? 'bg-blue-100 dark:bg-blue-900 border-blue-200 dark:border-blue-700' : 'hover:bg-gray-100 dark:hover:bg-gray-800'"
             @click="$emit('select', thread.id)"
         >
             <div class="flex items-center px-3 py-2">
                 <div class="flex-1 min-w-0">
-                    <div class="text-sm font-medium text-gray-900 truncate" :title="thread.title">
+                    <div class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate" :title="thread.title">
                         {{ thread.title }}
                     </div>
-                    <div class="text-xs text-gray-500 truncate">
+                    <div class="text-xs text-gray-500 dark:text-gray-400 truncate">
                         <span>{{ formatRelativeTime(thread.updatedAt) }} • {{ thread.messages.length }} msgs</span>
                         <span v-if="thread.stats?.inputTokens" :title="statsTitle(thread.stats)">
                             &#8226; {{ humanifyNumber(thread.stats.inputTokens + thread.stats.outputTokens) }} toks
                             {{ thread.stats.cost ? ' ' + formatCost(thread.stats.cost) : '' }}
                         </span>
                     </div>
-                    <div v-if="thread.model" class="text-xs text-blue-600 truncate">
+                    <div v-if="thread.model" class="text-xs text-blue-600 dark:text-blue-400 truncate">
                         {{ thread.model }}
                     </div>
                 </div>
@@ -35,7 +35,7 @@ const ThreadItem = {
                 <!-- Delete button (shown on hover) -->
                 <button type="button"
                     @click.stop="$emit('delete', thread.id)"
-                    class="opacity-0 group-hover:opacity-100 ml-2 p-1 rounded text-gray-400 hover:text-red-600 hover:bg-red-50 transition-all"
+                    class="opacity-0 group-hover:opacity-100 ml-2 p-1 rounded text-gray-400 dark:text-gray-500 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 transition-all"
                     title="Delete conversation"
                 >
                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -89,7 +89,7 @@ const GroupedThreads = {
     template: `
     <!-- Today -->
     <div v-if="groupedThreads.today.length > 0" class="mb-4">
-        <h3 class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider select-none">Today</h3>
+        <h3 class="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider select-none">Today</h3>
         <ThreadItem
             v-for="thread in groupedThreads.today"
             :key="thread.id"
@@ -102,7 +102,7 @@ const GroupedThreads = {
 
     <!-- Last 7 Days -->
     <div v-if="groupedThreads.lastWeek.length > 0" class="mb-4">
-        <h3 class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider select-none">Last 7 Days</h3>
+        <h3 class="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider select-none">Last 7 Days</h3>
         <ThreadItem
             v-for="thread in groupedThreads.lastWeek"
             :key="thread.id"
@@ -115,7 +115,7 @@ const GroupedThreads = {
 
     <!-- Last 30 Days -->
     <div v-if="groupedThreads.lastMonth.length > 0" class="mb-4">
-        <h3 class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider select-none">Last 30 Days</h3>
+        <h3 class="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider select-none">Last 30 Days</h3>
         <ThreadItem
             v-for="thread in groupedThreads.lastMonth"
             :key="thread.id"
@@ -128,7 +128,7 @@ const GroupedThreads = {
 
     <!-- Older (grouped by month/year) -->
     <div v-for="(monthThreads, monthKey) in groupedThreads.older" :key="monthKey" class="mb-4">
-        <h3 class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider select-none">{{ monthKey }}</h3>
+        <h3 class="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider select-none">{{ monthKey }}</h3>
         <ThreadItem
             v-for="thread in monthThreads"
             :key="thread.id"
@@ -140,7 +140,7 @@ const GroupedThreads = {
     </div>
     <div class="mb-4 flex w-full justify-center">
         <button @click="$router.push($ai.base + '/recents')" type="button"
-            class="flex text-sm space-x-1 font-semibold text-gray-900 hover:text-blue-600 focus:outline-none transition-colors">
+            class="flex text-sm space-x-1 font-semibold text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors">
             <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8 2.19c3.13 0 5.68 2.25 5.68 5s-2.55 5-5.68 5a5.7 5.7 0 0 1-1.89-.29l-.75-.26l-.56.56a14 14 0 0 1-2 1.55a.13.13 0 0 1-.07 0v-.06a6.58 6.58 0 0 0 .15-4.29a5.25 5.25 0 0 1-.55-2.16c0-2.77 2.55-5 5.68-5M8 .94c-3.83 0-6.93 2.81-6.93 6.27a6.4 6.4 0 0 0 .64 2.64a5.53 5.53 0 0 1-.18 3.48a1.32 1.32 0 0 0 2 1.5a15 15 0 0 0 2.16-1.71a6.8 6.8 0 0 0 2.31.36c3.83 0 6.93-2.81 6.93-6.27S11.83.94 8 .94"></path><ellipse cx="5.2" cy="7.7" fill="currentColor" rx=".8" ry=".75"></ellipse><ellipse cx="8" cy="7.7" fill="currentColor" rx=".8" ry=".75"></ellipse><ellipse cx="10.8" cy="7.7" fill="currentColor" rx=".8" ry=".75"></ellipse></svg>
             <span>All Chats</span>
         </button>
@@ -163,31 +163,32 @@ const Sidebar = {
         ThreadItem,
     },
     template: `
-        <div class="flex flex-col h-full bg-gray-50 border-r border-gray-200">
-            <Brand @home="goToInitialState" @new="createNewThread" @analytics="goToAnalytics" />
+        <div class="flex flex-col h-full bg-gray-50 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700">
+            <Brand @home="goToInitialState" @new="createNewThread" @analytics="goToAnalytics" @toggle-sidebar="$emit('toggle-sidebar')" />
             <!-- Thread List -->
             <div class="flex-1 overflow-y-auto">
-                <div v-if="isLoading" class="p-4 text-center text-gray-500">
-                    <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mx-auto"></div>
+                <div v-if="isLoading" class="p-4 text-center text-gray-500 dark:text-gray-400">
+                    <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 dark:border-blue-400 mx-auto"></div>
                     <p class="mt-2 text-sm">Loading threads...</p>
                 </div>
 
-                <div v-else-if="threads.length === 0" class="p-4 text-center text-gray-500">
+                <div v-else-if="threads.length === 0" class="p-4 text-center text-gray-500 dark:text-gray-400">
                     <div class="mb-2 flex justify-center">
                         <svg class="size-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8 2.19c3.13 0 5.68 2.25 5.68 5s-2.55 5-5.68 5a5.7 5.7 0 0 1-1.89-.29l-.75-.26l-.56.56a14 14 0 0 1-2 1.55a.13.13 0 0 1-.07 0v-.06a6.58 6.58 0 0 0 .15-4.29a5.25 5.25 0 0 1-.55-2.16c0-2.77 2.55-5 5.68-5M8 .94c-3.83 0-6.93 2.81-6.93 6.27a6.4 6.4 0 0 0 .64 2.64a5.53 5.53 0 0 1-.18 3.48a1.32 1.32 0 0 0 2 1.5a15 15 0 0 0 2.16-1.71a6.8 6.8 0 0 0 2.31.36c3.83 0 6.93-2.81 6.93-6.27S11.83.94 8 .94"/><ellipse cx="5.2" cy="7.7" fill="currentColor" rx=".8" ry=".75"/><ellipse cx="8" cy="7.7" fill="currentColor" rx=".8" ry=".75"/><ellipse cx="10.8" cy="7.7" fill="currentColor" rx=".8" ry=".75"/></svg>
                     </div>
                     <p class="text-sm">No conversations yet</p>
-                    <p class="text-xs text-gray-400 mt-1">Start a new chat to begin</p>
+                    <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Start a new chat to begin</p>
                 </div>
 
                 <div v-else class="py-2">
-                    <GroupedThreads :currentThread="currentThread" :groupedThreads="threadStore.getGroupedThreads(18)" 
-                        @select="selectThread" @delete="deleteThread" />        
+                    <GroupedThreads :currentThread="currentThread" :groupedThreads="threadStore.getGroupedThreads(18)"
+                        @select="selectThread" @delete="deleteThread" />
                 </div>
             </div>
         </div>
     `,
-    setup() {
+    emits: ['thread-selected', 'toggle-sidebar'],
+    setup(props, { emit }) {
         const ai = inject('ai')
         const router = useRouter()
         const threadStore = useThreadStore()
@@ -208,6 +209,7 @@ const Sidebar = {
 
         const selectThread = async (threadId) => {
             router.push(`${ai.base}/c/${threadId}`)
+            emit('thread-selected')
         }
 
         const deleteThread = async (threadId) => {
@@ -223,15 +225,18 @@ const Sidebar = {
         const createNewThread = async () => {
             const newThread = await createThread()
             router.push(`${ai.base}/c/${newThread.id}`)
+            emit('thread-selected')
         }
 
         const goToInitialState = () => {
             clearCurrentThread()
             router.push(`${ai.base}/`)
+            emit('thread-selected')
         }
 
         const goToAnalytics = () => {
             router.push(`${ai.base}/analytics`)
+            emit('thread-selected')
         }
 
         return {

llms/ui/SystemPromptEditor.mjs

@@ -1,10 +1,10 @@
 export default {
     template:`
-    <div class="border-b border-gray-200 bg-gray-50 px-6 py-4">
+    <div class="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-6 py-4">
         <div class="max-w-6xl mx-auto">
-            <label class="block text-sm font-medium text-gray-700 mb-2">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                 System Prompt
-                <span v-if="selected" class="text-gray-500 font-normal">
+                <span v-if="selected" class="text-gray-500 dark:text-gray-400 font-normal">
                     ({{ prompts.find(p => p.id === selected.id)?.name || 'Custom' }})
                 </span>
             </label>
@@ -12,9 +12,9 @@ export default {
                 :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"
                 placeholder="Enter a system prompt to guide AI's behavior..."
                 rows="6"
-                class="block w-full resize-vertical rounded-md border border-gray-300 px-3 py-2 text-sm placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                class="block w-full resize-vertical rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 px-3 py-2 text-sm placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
             ></textarea>
-            <div class="mt-2 text-xs text-gray-500">
+            <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                 You can modify this system prompt before sending messages. Changes will only apply to new conversations.
             </div>
         </div>

llms/ui/SystemPromptSelector.mjs

@@ -1,12 +1,13 @@
+import { ref, onMounted, onUnmounted } from "vue"
 export default {
     template:`
         <button v-if="modelValue" type="button" title="Clear System Prompt" @click="$emit('update:modelValue', null)">
-            <svg class="size-4 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"/></svg>
+            <svg class="size-4 text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"/></svg>
         </button>
-        
-        <Autocomplete id="prompt" :options="prompts" label=""
+
+        <Autocomplete ref="refSelector" id="prompt" :options="prompts" label=""
             :modelValue="modelValue" @update:modelValue="$emit('update:modelValue', $event)"
-            class="w-72 xl:w-84"
+            class="w-68 xl:w-84"
             :match="(x, value) => x.name.toLowerCase().includes(value.toLowerCase())"
             placeholder="Select a System Prompt...">
             <template #item="{ value }">
@@ -17,8 +18,8 @@ export default {
         <!-- Toggle System Prompt Visibility -->
         <button type="button"
             @click="$emit('toggle')"
-            :class="show ? 'text-blue-700' : 'text-gray-600'"
-            class="p-1 rounded-md hover:bg-blue-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+            :class="show ? 'text-blue-700 dark:text-blue-400' : 'text-gray-600 dark:text-gray-400'"
+            class="p-1 rounded-md hover:bg-blue-100 dark:hover:bg-blue-900/30 hover:text-blue-700 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
             :title="show ? 'Hide system prompt' : 'Show system prompt'"
         >
             <svg v-if="!show" class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="currentColor" d="M33.62 17.53c-3.37-6.23-9.28-10-15.82-10S5.34 11.3 2 17.53l-.28.47l.26.48c3.37 6.23 9.28 10 15.82 10s12.46-3.72 15.82-10l.26-.48Zm-15.82 8.9C12.17 26.43 7 23.29 4 18c3-5.29 8.17-8.43 13.8-8.43S28.54 12.72 31.59 18c-3.05 5.29-8.17 8.43-13.79 8.43"/><path fill="currentColor" d="M18.09 11.17A6.86 6.86 0 1 0 25 18a6.86 6.86 0 0 0-6.91-6.83m0 11.72A4.86 4.86 0 1 1 23 18a4.87 4.87 0 0 1-4.91 4.89"/><path fill="none" d="M0 0h36v36H0z"/></svg>
@@ -32,5 +33,24 @@ export default {
         show: Boolean,
     },
     setup() {
+        const refSelector = ref()
+    
+        function collapse(e) {
+            // call toggle when clicking outside of the Autocomplete component
+            if (refSelector.value && !refSelector.value.$el.contains(e.target)) {
+                refSelector.value.toggle(false)
+            }
+        }
+
+        onMounted(() => {
+            document.addEventListener('click', collapse)
+        })
+        onUnmounted(() => {
+            document.removeEventListener('click', collapse)
+        })
+
+        return {
+            refSelector,
+        }
     }
 }

llms/ui/Welcome.mjs

@@ -1,8 +1,8 @@
 export default {
     template: `
         <div class="mb-2 flex justify-center">
-            <svg class="size-20 text-gray-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8 2.19c3.13 0 5.68 2.25 5.68 5s-2.55 5-5.68 5a5.7 5.7 0 0 1-1.89-.29l-.75-.26l-.56.56a14 14 0 0 1-2 1.55a.13.13 0 0 1-.07 0v-.06a6.58 6.58 0 0 0 .15-4.29a5.25 5.25 0 0 1-.55-2.16c0-2.77 2.55-5 5.68-5M8 .94c-3.83 0-6.93 2.81-6.93 6.27a6.4 6.4 0 0 0 .64 2.64a5.53 5.53 0 0 1-.18 3.48a1.32 1.32 0 0 0 2 1.5a15 15 0 0 0 2.16-1.71a6.8 6.8 0 0 0 2.31.36c3.83 0 6.93-2.81 6.93-6.27S11.83.94 8 .94"/><ellipse cx="5.2" cy="7.7" fill="currentColor" rx=".8" ry=".75"/><ellipse cx="8" cy="7.7" fill="currentColor" rx=".8" ry=".75"/><ellipse cx="10.8" cy="7.7" fill="currentColor" rx=".8" ry=".75"/></svg>
+            <svg class="size-20 text-gray-700 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8 2.19c3.13 0 5.68 2.25 5.68 5s-2.55 5-5.68 5a5.7 5.7 0 0 1-1.89-.29l-.75-.26l-.56.56a14 14 0 0 1-2 1.55a.13.13 0 0 1-.07 0v-.06a6.58 6.58 0 0 0 .15-4.29a5.25 5.25 0 0 1-.55-2.16c0-2.77 2.55-5 5.68-5M8 .94c-3.83 0-6.93 2.81-6.93 6.27a6.4 6.4 0 0 0 .64 2.64a5.53 5.53 0 0 1-.18 3.48a1.32 1.32 0 0 0 2 1.5a15 15 0 0 0 2.16-1.71a6.8 6.8 0 0 0 2.31.36c3.83 0 6.93-2.81 6.93-6.27S11.83.94 8 .94"/><ellipse cx="5.2" cy="7.7" fill="currentColor" rx=".8" ry=".75"/><ellipse cx="8" cy="7.7" fill="currentColor" rx=".8" ry=".75"/><ellipse cx="10.8" cy="7.7" fill="currentColor" rx=".8" ry=".75"/></svg>
         </div>
-        <h2 class="text-2xl font-semibold text-gray-900 mb-2">{{ $ai.welcome }}</h2>
+        <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-2">{{ $ai.welcome }}</h2>
     `
 }

llms/ui/ai.mjs

@@ -6,13 +6,15 @@ const headers = { 'Accept': 'application/json' }
 const prefsKey = 'llms.prefs'
 
 export const o = {
-    version: '2.0.18',
+    version: '2.0.33',
     base,
     prefsKey,
     welcome: 'Welcome to llms.py',
     auth: null,
     requiresAuth: false,
+    authType: 'apikey',  // 'oauth' or 'apikey' - controls which SignIn component to use
     headers,
+    isSidebarOpen: true,  // Shared sidebar state (default open for lg+ screens)
     
     resolveUrl(url){
         return url.startsWith('http') || url.startsWith('/v1') ? url : base + url
@@ -50,26 +52,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)
         }