llms-py 3.0.0b1__py3-none-any.whl → 3.0.0b3__py3-none-any.whl

llms/ui/App.mjs

@@ -1,97 +1,190 @@
-import { inject, ref, onMounted, onUnmounted } from "vue"
-import Sidebar from "./Sidebar.mjs"
+import { ref, computed, watch, inject, onMounted, onUnmounted } from "vue"
+import { useRouter, useRoute } from "vue-router"
+import { AppContext } from "./ctx.mjs"
+
+// Vertical Sidebar Icons
+const LeftBar = {
+    template: `
+        <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.name}}
+                </div>    
+            </div>
+        </div>
+    `,
+    setup() {
+        const tooltip = ref('')
+        return {
+            tooltip,
+        }
+    }
+}
+
+const LeftPanel = {
+    template: `
+        <div v-if="component" class="flex flex-col h-full border-r border-gray-200 dark:border-gray-700">
+            <button type="button" @click="$emit('toggle-sidebar')" class="absolute top-2 right-2 p-1 rounded-md text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 lg:hidden z-20">
+                <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
+            </button>
+            <component :is="component" />
+        </div>
+    `,
+    setup() {
+        /**@type {AppContext} */
+        const ctx = inject('ctx')
+        const component = computed(() => ctx.component(ctx.layout.left))
+        return {
+            component,
+        }
+    }
+}
+
+const TopBar = {
+    template: `
+        <div class="flex space-x-2">
+            <div v-for="(icon, id) in $ctx.top" :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 block"
+                    :class="{ 'bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded' : icon.isActive({ ...$layout }) }" 
+                    @mouseenter="tooltip = icon.id"
+                    @mouseleave="tooltip = ''"
+                    />
+                <div v-if="tooltip === icon.id && !icon.isActive({ ...$layout })" 
+                    class="absolute top-full mt-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"
+                    :class="last2.includes(id) ? 'right-0' : 'left-1/2 -translate-x-1/2'">
+                    {{icon.name}}
+                </div>    
+            </div>
+        </div>
+    `,
+    setup() {
+        const tooltip = ref('')
+        const last2 = ref(Object.keys($ctx.top).slice(-2))
+        return {
+            tooltip,
+            last2,
+        }
+    }
+}
+
+const TopPanel = {
+    template: `
+        <component v-if="component" :is="component" class="mb-2" />
+    `,
+    setup() {
+        /**@type {AppContext} */
+        const ctx = inject('ctx')
+        const component = computed(() => ctx.component(ctx.layout.top))
+        return {
+            component,
+        }
+    }
+}
 
 export default {
     components: {
-        Sidebar,
+        LeftBar,
+        LeftPanel,
+        TopBar,
+        TopPanel,
     },
     setup() {
-        const ai = inject('ai')
+        const router = useRouter()
+        const route = useRoute()
+
+        /**@type {AppContext} */
+        const ctx = inject('ctx')
+        const ai = ctx.ai
         const isMobile = ref(false)
+        const modal = ref()
 
         const checkMobile = () => {
-            const wasMobile = isMobile.value
-            isMobile.value = window.innerWidth < 1024 // lg breakpoint
+            //const wasMobile = isMobile.value
+            isMobile.value = window.innerWidth < 640 // sm breakpoint
 
+            //console.log('checkMobile', wasMobile, isMobile.value)
             // Only auto-adjust sidebar state when transitioning between mobile/desktop
-            if (wasMobile !== isMobile.value) {
-                if (isMobile.value) {
-                    ai.isSidebarOpen = false
-                } else {
-                    ai.isSidebarOpen = true
-                }
-            }
-        }
-
-        const toggleSidebar = () => {
-            ai.isSidebarOpen = !ai.isSidebarOpen
-        }
-
-        const closeSidebar = () => {
             if (isMobile.value) {
-                ai.isSidebarOpen = false
+                ctx.toggleLayout('left', false)
             }
         }
 
         onMounted(() => {
             checkMobile()
             window.addEventListener('resize', checkMobile)
+            if (route.query.open) {
+                modal.value = ctx.openModal(route.query.open)
+            }
         })
 
         onUnmounted(() => {
             window.removeEventListener('resize', checkMobile)
         })
 
-        return { ai, isMobile, toggleSidebar, closeSidebar }
+        function closeModal() {
+            ctx.closeModal(route.query.open)
+        }
+
+        watch(() => route.query.open, (newVal) => {
+            modal.value = ctx.modalComponents[newVal]
+            console.log('open', newVal, modal.value)
+        })
+
+        watch(() => ctx.state.selectedModel, (newVal) => {
+            ctx.chat.setSelectedModel(ctx.chat.getModel(newVal))
+        })
+
+        return { ai, modal, isMobile, closeModal }
     },
     template: `
-        <div class="flex h-screen bg-white dark:bg-gray-900">
+        <div class="flex h-screen">
             <!-- Mobile Overlay -->
             <div
-                v-if="isMobile && ai.isSidebarOpen && !(ai.requiresAuth && !ai.auth)"
-                @click="closeSidebar"
+                v-if="isMobile && $ctx.layoutVisible('left') && $ai.hasAccess"
+                @click="$ctx.toggleLayout('left')"
                 class="fixed inset-0 bg-black/50 z-40 lg:hidden"
             ></div>
 
-            <!-- Sidebar (hidden when auth required and not authenticated) -->
-            <div
-                v-if="!(ai.requiresAuth && !ai.auth) && ai.isSidebarOpen"
-                :class="[
-                    'transition-transform duration-300 ease-in-out z-50',
-                    'w-72 xl:w-80 flex-shrink-0',
-                    'lg:relative',
-                    'fixed inset-y-0 left-0'
-                ]"
-            >
-                <Sidebar @thread-selected="closeSidebar" @toggle-sidebar="toggleSidebar" />
+            <div id="sidebar" class="z-100 relative flex bg-gray-50 dark:bg-gray-800">
+                <LeftBar />
+                <LeftPanel
+                    v-if="$ai.hasAccess && $ctx.layoutVisible('left')"
+                    :class="[
+                        'transition-transform duration-300 ease-in-out z-50',
+                        'w-72 xl:w-80 flex-shrink-0',
+                        'lg:relative',
+                        'fixed inset-y-0 left-[2.25rem] lg:left-0',
+                        'bg-gray-50 dark:bg-gray-800'
+                    ]"
+                    @thread-selected="$ctx.toggleLayout('left',false)" @toggle-sidebar="$ctx.toggleLayout('left')"
+                />
             </div>
 
             <!-- Main Area -->
             <div class="flex-1 flex flex-col">
-                <!-- Collapsed Sidebar Toggle Button -->
-                <div
-                    v-if="!(ai.requiresAuth && !ai.auth) && !ai.isSidebarOpen"
-                    class="fixed top-4 left-0"
-                >
-                    <button type="button"
-                        @click="toggleSidebar"
-                        class="group p-1 text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-                        title="Open sidebar"
-                    >
-                        <div class="relative w-5 h-5">
-                            <!-- Default sidebar icon -->
-                            <svg class="absolute inset-0 group-hover:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                                <line x1="9" y1="3" x2="9" y2="21"></line>
-                            </svg>
-                            <!-- Hover state: |→ icon -->
-                            <svg class="absolute inset-0 hidden group-hover:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m17.172 11l-4.657-4.657l1.414-1.414L21 12l-7.071 7.071l-1.414-1.414L17.172 13H8v-2zM4 19V5h2v14z"/></svg>
+                <div class="flex flex-col h-full w-full overflow-hidden">
+                    <div class="py-1 pr-1 flex items-center justify-between shrink-0">
+                        <div>
+                            <ModelSelector :models="$state.models" v-model="$state.selectedModel" />
                         </div>
-                    </button>
+                        <TopBar />
+                    </div>
+                    <TopPanel class="shrink-0" />
+                    <div class="flex-1 overflow-hidden min-h-0 flex flex-col">
+                        <RouterView class="h-full" />
+                    </div>
                 </div>
-
-                <RouterView />
             </div>
+
+            <component v-if="modal" :is="modal" class="!z-[200]" @done="closeModal" />
         </div>
     `,
 }

llms/ui/ai.mjs

@@ -1,12 +1,11 @@
 import { reactive } from "vue"
-import { useThreadStore } from "./threadStore.mjs"
 
 const base = ''
 const headers = { 'Accept': 'application/json' }
 const prefsKey = 'llms.prefs'
 
 export const o = {
-    version: '3.0.0b1',
+    version: '3.0.0b3',
     base,
     prefsKey,
     welcome: 'Welcome to llms.py',
@@ -15,6 +14,11 @@ export const o = {
     authType: 'apikey',  // 'oauth' or 'apikey' - controls which SignIn component to use
     headers,
     isSidebarOpen: true,  // Shared sidebar state (default open for lg+ screens)
+    cacheUrlInfo: {},
+
+    get hasAccess() {
+        return !this.requiresAuth || this.auth
+    },
 
     resolveUrl(url) {
         return url.startsWith('http') || url.startsWith('/v1') ? url : base + url
@@ -25,6 +29,17 @@ export const o = {
             headers: Object.assign({}, this.headers, options?.headers),
         })
     },
+    async getJson(url, options) {
+        const res = await this.get(url, options)
+        let txt = ''
+        try {
+            txt = await res.text()
+            return JSON.parse(txt)
+        } catch (e) {
+            console.error('Failed to parse JSON from GET', url, e, txt)
+            return { responseStatus: { errorCode: 'Error', message: `GET failed: ${e.message ?? e}` } }
+        }
+    },
     post(url, options) {
         return fetch(this.resolveUrl(url), {
             method: 'POST',
@@ -32,6 +47,17 @@ export const o = {
             headers: Object.assign({ 'Content-Type': 'application/json' }, this.headers, options?.headers),
         })
     },
+    async postJson(url, options) {
+        const res = await this.post(url, options)
+        let txt = ''
+        try {
+            txt = await res.text()
+            return JSON.parse(txt)
+        } catch (e) {
+            console.error('Failed to parse JSON from POST', url, e, txt)
+            return { responseStatus: { errorCode: 'Error', message: `POST failed: ${e.message ?? e}` } }
+        }
+    },
 
     async getConfig() {
         return this.get('/config')
@@ -52,51 +78,33 @@ export const o = {
         this.auth = auth
         if (auth?.apiKey) {
             this.headers.Authorization = `Bearer ${auth.apiKey}`
-            //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)
-            }
+        try {
+            await this.post('/auth/logout')
+        } 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() {
+    async init(ctx) {
         // Load models and prompts
-        const { initDB } = useThreadStore()
-        const [_, configRes, modelsRes] = await Promise.all([
-            initDB(),
+        const [configRes, modelsRes, extensionsRes] = await Promise.all([
             this.getConfig(),
             this.getModels(),
+            this.get('/ext'),
         ])
         const config = await configRes.json()
         const models = await modelsRes.json()
+        const extensions = await extensionsRes.json()
 
         // Update auth settings from server config
         if (config.requiresAuth != null) {
@@ -106,25 +114,6 @@ export const o = {
             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
@@ -132,14 +121,59 @@ export const o = {
             : 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)
         }
-        return { config, models, auth }
+        return { config, models, extensions, auth }
+    },
+
+
+    async uploadFile(file) {
+        const formData = new FormData()
+        formData.append('file', file)
+        const response = await fetch(this.resolveUrl('/upload'), {
+            method: 'POST',
+            body: formData
+        })
+        if (!response.ok) {
+            throw new Error(`Upload failed: ${response.statusText}`)
+        }
+        return response.json()
+    },
+
+
+    getCacheInfo(url) {
+        return this.cacheUrlInfo[url]
+    },
+    async fetchCacheInfos(urls) {
+        const infos = {}
+        const fetchInfos = []
+        for (const url of urls) {
+            const info = this.getCacheInfo(url)
+            if (info) {
+                infos[url] = info
+            } else {
+                fetchInfos.push(fetch(this.resolveUrl(url + "?info")))
+            }
+        }
+        const responses = await Promise.all(fetchInfos)
+        for (let i = 0; i < urls.length; i++) {
+            try {
+                const info = await responses[i].json()
+                this.setCacheInfo(urls[i], info)
+                infos[urls[i]] = info
+            } catch (e) {
+                console.error('Failed to fetch info for', urls[i], e)
+            }
+        }
+        return infos
+    },
+    setCacheInfo(url, info) {
+        this.cacheUrlInfo[url] = info
     }
+
 }
 
+
 let ai = reactive(o)
 export default ai