llms-py 2.0.20__py3-none-any.whl → 3.0.10__py3-none-any.whl

llms/ui/App.mjs

@@ -1,20 +1,188 @@
-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="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>
+        </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="$ctx.toggleLayout('left',false)" 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="select-none flex space-x-1">
+            <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 border border-transparent"
+                    :class="{ 'bg-gray-100 dark:bg-gray-800 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.title ?? 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 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 < 640 // sm breakpoint
+
+            //console.log('checkMobile', wasMobile, isMobile.value)
+            // Only auto-adjust sidebar state when transitioning between mobile/desktop
+            if (isMobile.value) {
+                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)
+        })
+
+        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">
-            <!-- Sidebar -->
-            <div class="w-72 xl:w-80 flex-shrink-0">
-                <Sidebar />
+        <div class="flex h-screen">
+            <!-- Mobile Overlay -->
+            <div v-if="isMobile && $ctx.layoutVisible('left') && $ai.hasAccess"
+                @click="$ctx.toggleLayout('left')"
+                :class="$ctx.cls('mobile-overlay', 'fixed inset-0 bg-black/50 z-40 lg:hidden')"
+            ></div>
+
+            <div v-if="$ai.hasAccess" id="sidebar" :class="$ctx.cls('sidebar', 'z-100 relative flex bg-gray-50 dark:bg-gray-800')">
+                <LeftBar id="left-bar" />
+                <LeftPanel id="left-panel"
+                    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'
+                    ]"
+                />
             </div>
 
             <!-- Main Area -->
-            <div class="flex-1 flex flex-col">
-                <RouterView />
+            <div id="main" :class="$ctx.cls('main', 'flex-1 flex flex-col')">
+                <div id="main-inner" :class="$ctx.cls('main-inner', 'flex flex-col h-full w-full overflow-hidden')">
+                    <div v-if="$ai.hasAccess" id="header" :class="$ctx.cls('header', 'py-1 pr-1 flex items-center justify-between shrink-0')">
+                        <div>
+                            <ModelSelector :models="$state.models" v-model="$state.selectedModel" />
+                        </div>
+                        <TopBar id="top-bar" />
+                    </div>
+                    <TopPanel v-if="$ai.hasAccess" id="top-panel" :class="$ctx.cls('top-panel', 'shrink-0')" />
+                    <div id="page" :class="$ctx.cls('page', 'flex-1 overflow-y-auto min-h-0 flex flex-col')">
+                        <RouterView class="h-full" />
+                    </div>
+                </div>
             </div>
+
+            <component v-if="modal" :is="modal" :class="$ctx.cls('modal', '!z-[200]')" @done="closeModal" />
         </div>
     `,
 }

llms/ui/ai.mjs

@@ -1,36 +1,102 @@
 import { reactive } from "vue"
-import { useThreadStore } from "./threadStore.mjs"
+import { ApiResult } from "@servicestack/client"
 
 const base = ''
 const headers = { 'Accept': 'application/json' }
 const prefsKey = 'llms.prefs'
 
 export const o = {
-    version: '2.0.20',
+    version: '3.0.10',
     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){
+    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
     },
     get(url, options) {
-        return fetch(this.resolveUrl(url), { 
+        return fetch(this.resolveUrl(url), {
             ...options,
             headers: Object.assign({}, this.headers, options?.headers),
         })
     },
-    post(url, options) {
-        return fetch(this.resolveUrl(url), {
+    async getJson(url, options) {
+        const res = await this.get(url, options)
+        return await this.createJsonResult(res, url)
+    },
+    async post(url, options) {
+        return await fetch(this.resolveUrl(url), {
             method: 'POST',
             ...options,
-            headers: Object.assign({'Content-Type': 'application/json'}, this.headers, options?.headers),
+            headers: Object.assign({ 'Content-Type': 'application/json' }, this.headers, options?.headers),
+        })
+    },
+    async postForm(url, options) {
+        return await fetch(this.resolveUrl(url), {
+            method: 'POST',
+            ...options,
+            headers: Object.assign({}, options?.headers),
+        })
+    },
+    async postJson(url, options) {
+        const res = await this.post(url, options)
+        return await this.createJsonResult(res, url)
+    },
+    async createJsonResult(res, msg = null) {
+        let txt = ''
+        try {
+            txt = await res.text()
+            const response = JSON.parse(txt)
+            if (response?.responseStatus?.errorCode) {
+                return new ApiResult({ error: response.responseStatus })
+            }
+            if (!res.ok) {
+                return new ApiResult({ error: { errorCode: 'Error', message: res.statusText } })
+            }
+            return new ApiResult({ response })
+        } catch (e) {
+            console.error('Failed to parse JSON', e, msg, txt)
+            const responseStatus = {
+                errorCode: 'Error',
+                message: `${e.message ?? e}`,
+                stackTrace: msg ? `${msg}\n${txt}` : txt,
+            }
+            return { responseStatus }
+        }
+    },
+    createErrorStatus({ message, errorCode, stackTrace, errors, meta }) {
+        const ret = {
+            errorCode: errorCode || 'Error',
+            message: message,
+        }
+        if (stackTrace) {
+            ret.stackTrace = stackTrace
+        }
+        if (errors && Array.isArray(errors)) {
+            ret.errors = errors
+        }
+        if (meta) {
+            ret.meta = meta
+        }
+        return ret
+    },
+    createErrorResult(e) {
+        return new ApiResult({
+            error: e.errorCode
+                ? this.createErrorStatus(e)
+                : this.createErrorStatus({ message: `${e.message ?? e}` })
         })
     },
-    
     async getConfig() {
         return this.get('/config')
     },
@@ -38,34 +104,57 @@ export const o = {
         return this.get('/models')
     },
     async getAuth() {
-        return this.requiresAuth 
+        return this.requiresAuth
             ? this.get('/auth')
-            : new Promise(resolve => resolve({ json: () => ({ responseStatus: { errorCode: '!requiresAuth' } })}))
+            : new Promise(resolve => resolve({ json: () => ({ responseStatus: { errorCode: '!requiresAuth' } }) }))
     },
     get isAdmin() {
         return !this.requiresAuth || this.auth && this.auth.roles?.includes('Admin')
     },
-    
+
     signIn(auth) {
         this.auth = auth
         if (auth?.apiKey) {
             this.headers.Authorization = `Bearer ${auth.apiKey}`
-        } else if (this.headers.Authorization) {
+        } else {
+            if (this.headers.Authorization) {
+                delete this.headers.Authorization
+            }
+        }
+    },
+    async signOut() {
+        try {
+            await this.post('/auth/logout')
+        } catch (error) {
+            console.error('Logout error:', error)
+        }
+        this.auth = null
+        if (this.headers.Authorization) {
             delete this.headers.Authorization
         }
     },
-    async init() {
+    async init(ctx) {
         // Load models and prompts
-        const { initDB } = useThreadStore()
-        const [_, configRes, modelsRes, authRes] = await Promise.all([
-            initDB(),
+        const [configRes, modelsRes, extensionsRes] = await Promise.all([
             this.getConfig(),
             this.getModels(),
-            this.getAuth(),
+            this.get('/ext'),
         ])
         const config = await configRes.json()
         const models = await modelsRes.json()
-        const auth = this.requiresAuth 
+        const extensions = await extensionsRes.json()
+
+        // Update auth settings from server config
+        if (config.requiresAuth != null) {
+            this.requiresAuth = config.requiresAuth
+        }
+        if (config.authType != null) {
+            this.authType = config.authType
+        }
+
+        // Get auth status
+        const authRes = await this.getAuth()
+        const auth = this.requiresAuth
             ? await authRes.json()
             : null
         if (auth?.responseStatus?.errorCode) {
@@ -73,9 +162,56 @@ export const o = {
         } 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