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

llms/ui/{ModelSelector.mjs → model-selector.mjs}

@@ -1,7 +1,7 @@
-import { ref, computed, watch, onMounted, onUnmounted } from "vue"
-import { useRouter, useRoute } from "vue-router"
+import { ref, computed, watch, inject, onMounted } from "vue"
 import ProviderStatus from "./ProviderStatus.mjs"
 import ProviderIcon from "./ProviderIcon.mjs"
+import { storageObject } from "./utils.mjs"
 
 const SORT_OPTIONS = [
     { id: 'name', label: 'Name' },
@@ -13,90 +13,62 @@ const SORT_OPTIONS = [
     { id: 'context', label: 'Context Limit' },
 ]
 
-const MODALITY_ICONS = {
-    text: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4,7 4,4 20,4 20,7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg>`,
-    image: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg>`,
-    audio: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="m19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>`,
-    video: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 8-6 4 6 4V8Z"></path><rect width="14" height="12" x="2" y="6" rx="2" ry="2"></rect></svg>`,
-    pdf: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14,2 14,8 20,8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10,9 9,9 8,9"></polyline></svg>`,
+const I = x => `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${x}</svg>`
+const modalityIcons = {
+    text: I(`<polyline points="4,7 4,4 20,4 20,7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line>`),
+    image: I(`<rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>`),
+    audio: I(`<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="m19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>`),
+    video: I(`<path d="m22 8-6 4 6 4V8Z"></path><rect width="14" height="12" x="2" y="6" rx="2" ry="2"></rect>`),
+    pdf: I(`<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14,2 14,8 20,8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10,9 9,9 8,9"></polyline>`),
 }
 
 const STORAGE_KEY = 'llms.modelSelector'
 const FAVORITES_KEY = 'llms.favorites'
 
-function loadPrefs() {
-    try {
-        return JSON.parse(localStorage.getItem(STORAGE_KEY)) || {}
-    } catch {
-        return {}
-    }
+// Formatting helpers
+const numFmt = new Intl.NumberFormat()
+const currFmt = new Intl.NumberFormat(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
+
+function formatCost(cost) {
+    if (cost == null) return '-'
+    const val = parseFloat(cost)
+    if (val === 0) return 'Free'
+    return currFmt.format(val)
 }
 
-function savePrefs(prefs) {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs))
+function formatNumber(num) {
+    if (num == null) return '-'
+    return numFmt.format(num)
 }
 
-export default {
+function formatShortNumber(num) {
+    if (num == null) return '-'
+    if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M'
+    if (num >= 1000) return (num / 1000).toFixed(0) + 'K'
+    return numFmt.format(num)
+}
+
+function getModelModalities(model) {
+    const mods = new Set()
+    const input = model.modalities?.input || []
+    const output = model.modalities?.output || []
+
+    // Collect all modalities
+    input.forEach(m => mods.add(m))
+    output.forEach(m => mods.add(m))
+
+    // Filter out text and ensure we only show known icons
+    const allowed = ['image', 'audio', 'video', 'pdf']
+    return Array.from(mods).filter(m => m !== 'text' && allowed.includes(m)).sort()
+}
+
+const ModelSelectorModal = {
     components: {
-        ProviderStatus,
         ProviderIcon,
     },
     template: `
-        <!-- Model Selector Button -->
-        <div class="pl-1 flex space-x-2">
-            <button type="button" @click="openDialog"
-                class="flex items-center space-x-2 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 text-sm text-gray-700 dark:text-gray-300 transition-colors min-w-48 max-w-96"
-                @mouseenter="showTooltip = true"
-                @mouseleave="showTooltip = false">
-                <ProviderIcon v-if="selectedModelObj?.provider" :provider="selectedModelObj.provider" class="size-5 flex-shrink-0" />
-                <span class="truncate flex-1 text-left">{{ selectedModelObj?.name || 'Select Model...' }}</span>
-                <svg class="size-4 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                    <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
-                </svg>
-            </button>
-
-            <!-- Info Tooltip (on hover) -->
-            <div v-if="showTooltip && selectedModelObj" 
-                class="absolute z-50 mt-12 ml-0 p-3 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 text-sm w-72">
-                <div class="font-semibold text-gray-900 dark:text-gray-100 mb-2">{{ selectedModelObj.name }}</div>
-                <div class="text-xs text-gray-500 dark:text-gray-400 mb-2">{{ selectedModelObj.provider }}</div>
-                
-                <div v-if="selectedModelObj.cost" class="mb-2">
-                    <div class="text-xs font-medium text-gray-700 dark:text-gray-300">Cost per 1M tokens:</div>
-                    <div class="text-xs text-gray-600 dark:text-gray-400 ml-2">
-                        Input: {{ formatCost(selectedModelObj.cost.input) }} · Output: {{ formatCost(selectedModelObj.cost.output) }}
-                    </div>
-                </div>
-                
-                <div v-if="selectedModelObj.limit" class="mb-2">
-                    <div class="text-xs font-medium text-gray-700 dark:text-gray-300">Limits:</div>
-                    <div class="text-xs text-gray-600 dark:text-gray-400 ml-2">
-                        Context: {{ formatNumber(selectedModelObj.limit.context) }} · Output: {{ formatNumber(selectedModelObj.limit.output) }}
-                    </div>
-                </div>
-                
-                <div v-if="selectedModelObj.knowledge" class="text-xs text-gray-600 dark:text-gray-400">
-                    Knowledge: {{ selectedModelObj.knowledge }}
-                </div>
-                
-                <div class="flex flex-wrap gap-1 mt-2">
-                    <span v-if="selectedModelObj.reasoning" class="px-1.5 py-0.5 text-xs rounded bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300">reasoning</span>
-                    <span v-if="selectedModelObj.tool_call" class="px-1.5 py-0.5 text-xs rounded bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300">tools</span>
-                    
-                    <!-- Modality Icons -->
-                    <span v-for="mod in getModelModalities(selectedModelObj)" :key="mod" 
-                        class="inline-flex items-center justify-center p-0.5 text-gray-400 dark:text-gray-500"
-                        :title="mod"
-                        v-html="modalityIcons[mod]">
-                    </span>
-                </div>
-            </div>
-
-            <ProviderStatus @updated="$emit('updated', $event)" />
-        </div>
-
         <!-- Dialog Overlay -->
-        <div v-if="isOpen" class="fixed inset-0 z-50 overflow-hidden" @keydown.escape="closeDialog">
+        <div class="fixed inset-0 z-50 overflow-hidden" @keydown.escape="closeDialog">
             <!-- Backdrop -->
             <div class="fixed inset-0 bg-black/50 transition-opacity" @click="closeDialog"></div>
             
@@ -311,29 +283,21 @@ export default {
                     </div>
                 </div>
             </div>
-        </div>
+        </div>    
     `,
-    emits: ['updated', 'update:modelValue'],
-    props: {
-        models: Array,
-        modelValue: String,
-    },
+    emits: ['done'],
     setup(props, { emit }) {
-        const router = useRouter()
-        const route = useRoute()
-
-        const isOpen = ref(false)
-        const showTooltip = ref(false)
+        const ctx = inject('ctx')
         const searchQuery = ref('')
         const searchInput = ref(null)
 
         // Load preferences
-        const prefs = loadPrefs()
+        const prefs = storageObject(STORAGE_KEY)
         const sortBy = ref(prefs.sortBy || 'name')
         const sortAsc = ref(prefs.sortAsc !== false)
         const selectedProviders = ref(new Set())
         const selectedModalities = ref(new Set())
-        const modalityIcons = MODALITY_ICONS
+        const models = computed(() => ctx.state.models || [])
 
         // Favorites State
         const favorites = ref([])
@@ -347,24 +311,18 @@ export default {
 
         const sortOptions = SORT_OPTIONS
 
-        // Get selected model object
-        const selectedModelObj = computed(() => {
-            if (!props.modelValue || !props.models) return null
-            return props.models.find(m => m.name === props.modelValue) || props.models.find(m => m.id === props.modelValue)
-        })
-
         // Get unique providers
         const uniqueProviders = computed(() => {
-            if (!props.models) return []
-            const providers = [...new Set(props.models.map(m => m.provider))].filter(Boolean)
+            if (!models.value) return []
+            const providers = [...new Set(models.value.map(m => m.provider))].filter(Boolean)
             return providers.sort()
         })
 
         // Provider counts
         const providerCounts = computed(() => {
-            if (!props.models) return {}
+            if (!models.value) return {}
             const counts = {}
-            props.models.forEach(m => {
+            models.value.forEach(m => {
                 if (m.provider) {
                     counts[m.provider] = (counts[m.provider] || 0) + 1
                 }
@@ -384,8 +342,8 @@ export default {
 
         // Unavailable favorites (provider disabled or model removed)
         const unavailableFavorites = computed(() => {
-            if (!props.models) return []
-            const availableKeys = new Set(props.models.map(getModelKey))
+            if (!models.value) return []
+            const availableKeys = new Set(models.value.map(getModelKey))
             const missingKeys = favorites.value.filter(key => !availableKeys.has(key))
 
             return missingKeys.map(key => {
@@ -403,9 +361,9 @@ export default {
 
         // Filter and sort models
         const filteredModels = computed(() => {
-            if (!props.models) return []
+            if (!models.value) return []
 
-            let result = [...props.models]
+            let result = [...models.value]
 
             // Filter by Tab
             if (activeTab.value === 'favorites') {
@@ -492,63 +450,17 @@ export default {
             return result
         })
 
-        // Formatting helpers
-        const numFmt = new Intl.NumberFormat()
-        const currFmt = new Intl.NumberFormat(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
-
-        function formatCost(cost) {
-            if (cost == null) return '-'
-            const val = parseFloat(cost)
-            if (val === 0) return 'Free'
-            return currFmt.format(val)
-        }
-
-        function formatNumber(num) {
-            if (num == null) return '-'
-            return numFmt.format(num)
-        }
-
-        function formatShortNumber(num) {
-            if (num == null) return '-'
-            if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M'
-            if (num >= 1000) return (num / 1000).toFixed(0) + 'K'
-            return numFmt.format(num)
-        }
-
         function isFreeModel(model) {
             return model.cost && parseFloat(model.cost.input) === 0 && parseFloat(model.cost.output) === 0
         }
 
-        function getModelModalities(model) {
-            const mods = new Set()
-            const input = model.modalities?.input || []
-            const output = model.modalities?.output || []
-
-            // Collect all modalities
-            input.forEach(m => mods.add(m))
-            output.forEach(m => mods.add(m))
-
-            // Filter out text and ensure we only show known icons
-            const allowed = ['image', 'audio', 'video', 'pdf']
-            return Array.from(mods).filter(m => m !== 'text' && allowed.includes(m)).sort()
-        }
-
-        // Actions
-        function openDialog() {
-            isOpen.value = true
-            searchQuery.value = ''
-            setTimeout(() => {
-                searchInput.value?.focus()
-            }, 100)
+        function selectModel(model) {
+            ctx.setState({ selectedModel: model.name })
+            closeDialog()
         }
 
         function closeDialog() {
-            isOpen.value = false
-        }
-
-        function selectModel(model) {
-            emit('update:modelValue', model.name)
-            closeDialog()
+            emit('done')
         }
 
         function setActiveTab(tab, provider) {
@@ -590,11 +502,7 @@ export default {
             } else {
                 favorites.value.splice(idx, 1)
             }
-            saveFavorites()
-        }
-
-        function saveFavorites() {
-            localStorage.setItem(FAVORITES_KEY, JSON.stringify(favorites.value))
+            storageObject(FAVORITES_KEY, favorites.value)
         }
 
         function toggleSortDirection() {
@@ -603,67 +511,28 @@ export default {
 
         // Save preferences when sort changes
         watch([sortBy, sortAsc], () => {
-            savePrefs({
+            storageObject(STORAGE_KEY, {
                 sortBy: sortBy.value,
                 sortAsc: sortAsc.value
             })
         })
 
-        // Handle escape key
-        function handleKeydown(e) {
-            if (e.key === 'Escape' && isOpen.value) {
-                closeDialog()
-            }
-        }
-
         // Deep link logic with Vue Router
         onMounted(() => {
-            document.addEventListener('keydown', handleKeydown)
-
-            // Initial check
-            if (route.query.show === 'models') {
-                isOpen.value = true
-            }
-        })
-
-        // Watch route to open/close
-        watch(() => route.query.show, (newVal) => {
-            if (newVal === 'models') {
-                isOpen.value = true
-            } else if (isOpen.value) {
-                isOpen.value = false
-            }
-        })
-
-        // Sync state to URL
-        watch(isOpen, (newVal) => {
-            if (newVal) {
-                if (route.query.show !== 'models') {
-                    router.push({ query: { ...route.query, show: 'models' } })
-                }
-            } else {
-                if (route.query.show === 'models') {
-                    const newQuery = { ...route.query }
-                    delete newQuery.show
-                    router.push({ query: newQuery })
-                }
-            }
-        })
-
-        onUnmounted(() => {
-            document.removeEventListener('keydown', handleKeydown)
+            searchQuery.value = ''
+            setTimeout(() => {
+                searchInput.value?.focus()
+            }, 100)
         })
 
         return {
-            isOpen,
-            showTooltip,
+            models,
             searchQuery,
             searchInput,
             sortBy,
             sortAsc,
             sortOptions,
             selectedProviders,
-            selectedModelObj,
             uniqueProviders,
             providerCounts,
             filteredModels,
@@ -672,7 +541,6 @@ export default {
             formatShortNumber,
             isFreeModel,
 
-            openDialog,
             closeDialog,
             selectModel,
             toggleProvider,
@@ -691,3 +559,128 @@ export default {
         }
     }
 }
+
+const ModelTooltip = {
+    template: `
+        <div v-if="model" 
+            class="absolute z-50 mt-10 ml-0 p-3 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 text-sm w-72">
+            <div class="font-semibold text-gray-900 dark:text-gray-100 mb-2">{{ model.name }}</div>
+            <div class="text-xs text-gray-500 dark:text-gray-400 mb-2">{{ model.provider }}</div>
+            
+            <div v-if="model.cost" class="mb-2">
+                <div class="text-xs font-medium text-gray-700 dark:text-gray-300">Cost per 1M tokens:</div>
+                <div class="text-xs text-gray-600 dark:text-gray-400 ml-2">
+                    Input: {{ formatCost(model.cost.input) }} · Output: {{ formatCost(model.cost.output) }}
+                </div>
+            </div>
+            
+            <div v-if="model.limit" class="mb-2">
+                <div class="text-xs font-medium text-gray-700 dark:text-gray-300">Limits:</div>
+                <div class="text-xs text-gray-600 dark:text-gray-400 ml-2">
+                    Context: {{ formatNumber(model.limit.context) }} · Output: {{ formatNumber(model.limit.output) }}
+                </div>
+            </div>
+            
+            <div v-if="model.knowledge" class="text-xs text-gray-600 dark:text-gray-400">
+                Knowledge: {{ model.knowledge }}
+            </div>
+            
+            <div class="flex flex-wrap gap-1 mt-2">
+                <span v-if="model.reasoning" class="px-1.5 py-0.5 text-xs rounded bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300">reasoning</span>
+                <span v-if="model.tool_call" class="px-1.5 py-0.5 text-xs rounded bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300">tools</span>
+                
+                <!-- Modality Icons -->
+                <span v-for="mod in getModelModalities(model)" :key="mod" 
+                    class="inline-flex items-center justify-center p-0.5 text-gray-400 dark:text-gray-500"
+                    :title="mod"
+                    v-html="modalityIcons[mod]">
+                </span>
+            </div>
+        </div>
+    `,
+    props: {
+        model: Object,
+    },
+    setup(props) {
+        return {
+            formatCost,
+            formatNumber,
+            getModelModalities,
+            modalityIcons,
+        }
+    }
+}
+
+const ModelSelector = {
+    components: {
+        ProviderStatus,
+        ProviderIcon,
+        ModelSelectorModal,
+        ModelTooltip,
+    },
+    template: `
+        <!-- Model Selector Button -->
+        <div class="pl-1 flex space-x-2">
+            <button type="button" @click="openDialog"
+                class="flex items-center space-x-2 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 text-sm text-gray-700 dark:text-gray-300 transition-colors min-w-48 max-w-96"
+                @mouseenter="showTooltip = true"
+                @mouseleave="showTooltip = false">
+                <ProviderIcon v-if="selectedModel?.provider" :provider="selectedModel.provider" class="size-5 flex-shrink-0" />
+                <span class="truncate flex-1 text-left">{{ selectedModel?.name || 'Select Model...' }}</span>
+                <svg class="size-4 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
+                </svg>
+            </button>
+
+            <!-- Info Tooltip (on hover) -->
+            <ModelTooltip v-if="showTooltip" :model="selectedModel" />
+
+            <ProviderStatus @updated="$emit('updated', $event)" />
+        </div>
+    `,
+    emits: ['updated', 'update:modelValue'],
+    props: {
+        models: Array,
+        modelValue: String,
+    },
+    setup(props, { emit }) {
+        const ctx = inject('ctx')
+        const showTooltip = ref(false)
+
+        // Get selected model object
+        const selectedModel = computed(() => {
+            if (!props.modelValue || !props.models) return null
+            return props.models.find(m => m.name === props.modelValue) || props.models.find(m => m.id === props.modelValue)
+        })
+
+        function openDialog() {
+            ctx.state.models = props.models
+            ctx.openModal('models')
+        }
+
+        watch(() => ctx.state.selectedModel, (newVal) => {
+            emit('update:modelValue', newVal)
+        })
+
+        onMounted(() => {
+            ctx.state.models = props.models
+        })
+
+        return {
+            showTooltip,
+            openDialog,
+            selectedModel,
+        }
+    }
+}
+
+export default {
+    install(ctx) {
+        ctx.components({
+            ModelSelector,
+        })
+        ctx.modals({
+            'models': ModelSelectorModal,
+        })
+    }
+}