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

llms/ui/App.mjs

@@ -1,119 +1,42 @@
-import { ref, computed, watch, inject, onMounted, onUnmounted } from "vue"
+import { inject, ref, watch, 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" 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,
-        }
-    }
-}
+import Sidebar from "./Sidebar.mjs"
 
 export default {
     components: {
-        LeftBar,
-        LeftPanel,
-        TopBar,
-        TopPanel,
+        Sidebar,
     },
-    setup() {
+    props: ['config', 'models'],
+    setup(props) {
         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
+            const wasMobile = isMobile.value
+            isMobile.value = window.innerWidth < 1024 // lg 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) {
-                ctx.toggleLayout('left', false)
+                ai.isSidebarOpen = false
             }
         }
 
@@ -135,54 +58,61 @@ export default {
 
         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))
+            console.log('open', newVal)
         })
 
-        return { ai, modal, isMobile, closeModal }
+        return { ai, modal, isMobile, toggleSidebar, closeSidebar, closeModal }
     },
     template: `
-        <div class="flex h-screen">
+        <div class="flex h-screen bg-white dark:bg-gray-900">
             <!-- 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
+                v-if="isMobile && ai.isSidebarOpen && !(ai.requiresAuth && !ai.auth)"
+                @click="closeSidebar"
+                class="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'
-                    ]"
-                />
+            <!-- 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>
 
             <!-- Main Area -->
-            <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 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>
-                        <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>
+                    </button>
                 </div>
+
+                <RouterView />
             </div>
 
-            <component v-if="modal" :is="modal" :class="$ctx.cls('modal', '!z-[200]')" @done="closeModal" />
+            <component v-if="modal" :is="modal" @done="closeModal" />
         </div>
     `,
 }

llms/ui/Avatar.mjs

@@ -0,0 +1,86 @@
+import { computed, inject, ref, onMounted, onUnmounted } from "vue"
+
+export default {
+    template: `
+        <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 ctx = inject('ctx')
+        const ai = ctx.ai
+        const showMenu = ref(false)
+        const avatarContainer = ref(null)
+
+        const authTitle = computed(() => {
+            if (!ai.auth) return ''
+            const { userId, userName, displayName, bearerToken, roles } = ai.auth
+            const name = userName || displayName
+            const prefix = roles && roles.includes('Admin') ? 'Admin' : 'Name'
+            const sb = [
+                name ? `${prefix}: ${name}` : '',
+                `API Key: ${bearerToken}`,
+                `${userId}`,
+            ]
+            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/Brand.mjs

@@ -0,0 +1,52 @@
+export default {
+    template:`
+    <div class="flex-shrink-0 pl-2 pr-4 py-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 min-h-16 select-none">
+        <div class="flex items-center justify-between">
+            <div class="flex items-center space-x-2">
+                <button type="button"
+                    @click="$emit('toggle-sidebar')"
+                    class="group relative text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors"
+                    title="Collapse sidebar"
+                >
+                    <div class="relative size-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="m10.071 4.929l1.414 1.414L6.828 11H16v2H6.828l4.657 4.657l-1.414 1.414L3 12zM18.001 19V5h2v14z"/></svg>
+                    </div>
+                </button>
+
+                <button type="button"
+                    @click="$emit('home')"
+                    class="text-lg font-semibold text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors"
+                    title="Go back to initial state"
+                >
+                    History
+                </button>
+            </div>
+
+            <div class="flex items-center space-x-2">
+                <button type="button"
+                    @click="$emit('analytics')"
+                    class="text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors"
+                    title="Analytics"
+                >
+                    <svg class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M5 22a1 1 0 0 1-1-1v-8a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1m5 0a1 1 0 0 1-1-1V3a1 1 0 0 1 2 0v18a1 1 0 0 1-1 1m5 0a1 1 0 0 1-1-1V9a1 1 0 0 1 2 0v12a1 1 0 0 1-1 1m5 0a1 1 0 0 1-1-1v-4a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1"/></svg>
+                </button>
+
+                <button type="button"
+                    @click="$emit('new')"
+                    class="text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors"
+                    title="New Chat"
+                >
+                    <svg class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></g></svg>
+                </button>
+            </div>
+        </div>
+    </div>
+    `,
+    emits:['home','new','analytics','toggle-sidebar'],
+}