llms-py 3.0.0b2__py3-none-any.whl → 3.0.0b4__py3-none-any.whl

llms/ui/App.mjs

@@ -1,42 +1,119 @@
-import { inject, ref, watch, onMounted, onUnmounted } from "vue"
+import { ref, computed, watch, inject, onMounted, onUnmounted } from "vue"
 import { useRouter, useRoute } from "vue-router"
-import Sidebar from "./Sidebar.mjs"
+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,
     },
-    props: ['config', 'models'],
-    setup(props) {
+    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 < 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)
             }
         }
 
@@ -58,61 +135,56 @@ export default {
 
         watch(() => route.query.open, (newVal) => {
             modal.value = ctx.modalComponents[newVal]
-            console.log('open', newVal)
+            console.log('open', newVal, modal.value)
         })
 
-        return { ai, modal, isMobile, toggleSidebar, closeSidebar, closeModal }
+        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" @done="closeModal" />
+            <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.0b2',
+    version: '3.0.0b4',
     base,
     prefsKey,
     welcome: 'Welcome to llms.py',
@@ -15,6 +14,7 @@ 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
@@ -29,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',
@@ -36,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')
@@ -72,18 +94,17 @@ export const o = {
         if (this.headers.Authorization) {
             delete this.headers.Authorization
         }
-        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) {
@@ -100,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

llms/ui/app.css

@@ -21,7 +21,6 @@
     --color-yellow-50: oklch(98.7% 0.026 102.212);
     --color-yellow-200: oklch(94.5% 0.129 101.54);
     --color-yellow-400: oklch(85.2% 0.199 91.936);
-    --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-yellow-700: oklch(55.4% 0.135 66.442);
     --color-green-50: oklch(98.2% 0.018 155.826);
     --color-green-100: oklch(96.2% 0.044 156.743);
@@ -81,6 +80,7 @@
     --color-purple-700: oklch(49.6% 0.265 301.924);
     --color-purple-800: oklch(43.8% 0.218 303.724);
     --color-purple-900: oklch(38.1% 0.176 304.987);
+    --color-fuchsia-600: oklch(59.1% 0.293 322.896);
     --color-slate-50: oklch(98.4% 0.003 247.858);
     --color-slate-200: oklch(92.9% 0.013 255.508);
     --color-slate-400: oklch(70.4% 0.04 256.788);
@@ -344,9 +344,6 @@
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
-  .-top-12 {
-    top: calc(var(--spacing) * -12);
-  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -368,6 +365,9 @@
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
+  .right-4 {
+    right: calc(var(--spacing) * 4);
+  }
   .bottom-2 {
     bottom: calc(var(--spacing) * 2);
   }
@@ -380,9 +380,15 @@
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
+  .left-\[2\.25rem\] {
+    left: 2.25rem;
+  }
   .left-full {
     left: 100%;
   }
+  .\!z-\[200\] {
+    z-index: 200 !important;
+  }
   .z-0 {
     z-index: 0;
   }
@@ -398,9 +404,15 @@
   .z-50 {
     z-index: 50;
   }
+  .z-100 {
+    z-index: 100;
+  }
   .z-\[100\] {
     z-index: 100;
   }
+  .z-\[101\] {
+    z-index: 101;
+  }
   .col-span-2 {
     grid-column: span 2 / span 2;
   }
@@ -500,6 +512,9 @@
   .mr-3 {
     margin-right: calc(var(--spacing) * 3);
   }
+  .mr-4 {
+    margin-right: calc(var(--spacing) * 4);
+  }
   .mr-16 {
     margin-right: calc(var(--spacing) * 16);
   }
@@ -663,9 +678,6 @@
   .max-h-96 {
     max-height: calc(var(--spacing) * 96);
   }
-  .max-h-120 {
-    max-height: calc(var(--spacing) * 120);
-  }
   .max-h-\[90vh\] {
     max-height: 90vh;
   }
@@ -777,9 +789,6 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
-  .min-w-48 {
-    min-width: calc(var(--spacing) * 48);
-  }
   .min-w-\[120px\] {
     min-width: 120px;
   }
@@ -945,6 +954,9 @@
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -967,6 +979,13 @@
       margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-4 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1238,6 +1257,9 @@
   .bg-cyan-600 {
     background-color: var(--color-cyan-600);
   }
+  .bg-fuchsia-600 {
+    background-color: var(--color-fuchsia-600);
+  }
   .bg-gray-50 {
     background-color: var(--color-gray-50);
   }
@@ -1328,18 +1350,9 @@
   .bg-white {
     background-color: var(--color-white);
   }
-  .bg-white\/10 {
-    background-color: color-mix(in srgb, #fff 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-    }
-  }
   .bg-yellow-50 {
     background-color: var(--color-yellow-50);
   }
-  .bg-yellow-500 {
-    background-color: var(--color-yellow-500);
-  }
   .mask-repeat {
     mask-repeat: repeat;
   }
@@ -1442,6 +1455,9 @@
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
+  .pt-2\.5 {
+    padding-top: calc(var(--spacing) * 2.5);
+  }
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
@@ -1496,6 +1512,9 @@
   .pl-1 {
     padding-left: calc(var(--spacing) * 1);
   }
+  .pl-1\.5 {
+    padding-left: calc(var(--spacing) * 1.5);
+  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
@@ -1505,15 +1524,9 @@
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
-  .pl-4 {
-    padding-left: calc(var(--spacing) * 4);
-  }
   .pl-5 {
     padding-left: calc(var(--spacing) * 5);
   }
-  .pl-6 {
-    padding-left: calc(var(--spacing) * 6);
-  }
   .pl-10 {
     padding-left: calc(var(--spacing) * 10);
   }
@@ -2293,12 +2306,12 @@
       }
     }
   }
-  .hover\:bg-white\/20 {
+  .hover\:bg-white\/10 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, #fff 20%, transparent);
+        background-color: color-mix(in srgb, #fff 10%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+          background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
         }
       }
     }
@@ -3037,11 +3050,21 @@
       display: table-cell;
     }
   }
+  .md\:w-auto {
+    @media (width >= 48rem) {
+      width: auto;
+    }
+  }
   .md\:max-w-xl {
     @media (width >= 48rem) {
       max-width: var(--container-xl);
     }
   }
+  .md\:min-w-48 {
+    @media (width >= 48rem) {
+      min-width: calc(var(--spacing) * 48);
+    }
+  }
   .md\:grid-cols-2 {
     @media (width >= 48rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3087,6 +3110,11 @@
       inset-block: calc(var(--spacing) * 0);
     }
   }
+  .lg\:left-0 {
+    @media (width >= 64rem) {
+      left: calc(var(--spacing) * 0);
+    }
+  }
   .lg\:z-10 {
     @media (width >= 64rem) {
       z-index: 10;
@@ -3703,6 +3731,15 @@
       }
     }
   }
+  .dark\:hover\:border-gray-700 {
+    &:where(.dark, .dark *) {
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-gray-700);
+        }
+      }
+    }
+  }
   .dark\:hover\:border-red-600 {
     &:where(.dark, .dark *) {
       &:hover {