llms-py 2.0.28__py3-none-any.whl → 2.0.30__py3-none-any.whl

llms/ui/Main.mjs

@@ -30,11 +30,13 @@ export default {
     template: `
         <div class="flex flex-col h-full w-full">
             <!-- Header with model and prompt selectors (hidden when auth required and not authenticated) -->
-            <div v-if="!($ai.requiresAuth && !$ai.auth)" class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-2 py-2 w-full min-h-16">
-                <div class="flex items-center justify-between w-full">
+            <div v-if="!($ai.requiresAuth && !$ai.auth)" 
+                :class="!$ai.isSidebarOpen ? 'pl-6' : ''"
+                class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-2 py-2 w-full min-h-16">
+                <div class="flex flex-wrap items-center justify-between w-full">
                     <ModelSelector :models="models" v-model="selectedModel" @updated="configUpdated" />
 
-                    <div class="flex items-center space-x-2">
+                    <div class="flex items-center space-x-2 pl-4">
                         <SystemPromptSelector :prompts="prompts" v-model="selectedPrompt"
                             :show="showSystemPrompt" @toggle="showSystemPrompt = !showSystemPrompt" />
                         <Avatar />
@@ -218,7 +220,7 @@ export default {
                         </div>
 
                         <!-- Loading indicator -->
-                        <div v-if="isGenerating" class="flex items-start space-x-3">
+                        <div v-if="isGenerating" class="flex items-start space-x-3 group">
                             <!-- Avatar outside the bubble -->
                             <div class="flex-shrink-0">
                                 <div class="w-8 h-8 rounded-full bg-gray-600 dark:bg-gray-500 text-white flex items-center justify-center text-sm font-medium">
@@ -234,6 +236,13 @@ export default {
                                     <div class="w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
                                 </div>
                             </div>
+
+                            <!-- Cancel button -->
+                            <button type="button" @click="cancelRequest"
+                                class="px-3 py-1 rounded text-sm 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 border border-transparent hover:border-red-300 dark:hover:border-red-600 transition-all"
+                                title="Cancel request">
+                                cancel
+                            </button>
                         </div>
 
                         <!-- Error message bubble -->
@@ -741,6 +750,11 @@ export default {
             editingMessage.value = null
         }
 
+        // Cancel pending request
+        const cancelRequest = () => {
+            chatPrompt.cancel()
+        }
+
         function tokensTitle(usage) {
             let title = []
             if (usage.tokens && usage.price) {
@@ -790,6 +804,7 @@ export default {
             editMessage,
             saveEditedMessage,
             cancelEdit,
+            cancelRequest,
             configUpdated,
             exportThreads,
             exportRequests,

llms/ui/ModelSelector.mjs

@@ -1,3 +1,4 @@
+import { ref, onMounted, onUnmounted } from "vue"
 import ProviderStatus from "./ProviderStatus.mjs"
 import ProviderIcon from "./ProviderIcon.mjs"
 
@@ -9,15 +10,16 @@ export default {
     template:`
         <!-- Model Selector -->
         <div class="pl-1 flex space-x-2">
-            <Autocomplete id="model" :options="models" label=""
+            <Autocomplete ref="refSelector" id="model" :options="models" label=""
                 :modelValue="modelValue" @update:modelValue="$emit('update:modelValue', $event)"
                 class="w-72 xl:w-84"
                 :match="(x, value) => x.id.toLowerCase().includes(value.toLowerCase())"
                 placeholder="Select Model...">
                 <template #item="{ id, provider, provider_model, pricing }">
-                    <div :key="id + provider + provider_model" class="group truncate max-w-72 flex justify-between">
+                    <div :key="id + provider + provider_model" 
+                        class="group truncate max-w-68 xl:max-w-72 flex justify-between">
                         <span :title="id">{{id}}</span>
-                        <span class="flex items-center space-x-1">
+                        <div class="hidden md:flex items-center space-x-1">
                             <span v-if="pricing && (parseFloat(pricing.input) == 0 && parseFloat(pricing.input) == 0)">
                                 <span class="text-xs text-gray-500 dark:text-gray-400" title="Free to use">FREE</span>
                             </span>
@@ -27,10 +29,10 @@ export default {
                               &#183;
                               {{tokenPrice(pricing.output)}} M
                             </span>
-                            <span :title="provider_model + ' from ' + provider">
-                                <ProviderIcon :provider="provider" />
+                            <span class="min-w-6" :title="provider_model + ' from ' + provider">
+                                <ProviderIcon class="hidden xl:inline" :provider="provider" />
                             </span>
-                        </span>
+                        </div>
                     </div>
                 </template>
             </Autocomplete>
@@ -52,8 +54,25 @@ export default {
             return ret.endsWith('.00') ? ret.slice(0, -3) : ret
         }
 
+        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 {
-            tokenPrice
+            refSelector,
+            tokenPrice,
         }
     }
 }

llms/ui/Sidebar.mjs

@@ -164,7 +164,7 @@ const Sidebar = {
     },
     template: `
         <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" />
+            <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 dark:text-gray-400">
@@ -187,7 +187,8 @@ const Sidebar = {
             </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/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 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 }">
@@ -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/ai.mjs

@@ -6,7 +6,7 @@ const headers = { 'Accept': 'application/json' }
 const prefsKey = 'llms.prefs'
 
 export const o = {
-    version: '2.0.28',
+    version: '2.0.30',
     base,
     prefsKey,
     welcome: 'Welcome to llms.py',
@@ -14,6 +14,7 @@ export const o = {
     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