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

llms/ui/App.mjs

@@ -1,13 +1,20 @@
-import { inject, ref, onMounted, onUnmounted } from "vue"
+import { inject, ref, watch, onMounted, onUnmounted } from "vue"
+import { useRouter, useRoute } from "vue-router"
 import Sidebar from "./Sidebar.mjs"
 
 export default {
     components: {
         Sidebar,
     },
-    setup() {
-        const ai = inject('ai')
+    props: ['config', 'models'],
+    setup(props) {
+        const router = useRouter()
+        const route = useRoute()
+
+        const ctx = inject('ctx')
+        const ai = ctx.ai
         const isMobile = ref(false)
+        const modal = ref()
 
         const checkMobile = () => {
             const wasMobile = isMobile.value
@@ -36,13 +43,25 @@ export default {
         onMounted(() => {
             checkMobile()
             window.addEventListener('resize', checkMobile)
+            if (route.query.open) {
+                modal.value = ctx.openModal(route.query.open)
+            }
         })
 
         onUnmounted(() => {
             window.removeEventListener('resize', checkMobile)
         })
 
-        return { ai, isMobile, toggleSidebar, closeSidebar }
+        function closeModal() {
+            ctx.closeModal(route.query.open)
+        }
+
+        watch(() => route.query.open, (newVal) => {
+            modal.value = ctx.modalComponents[newVal]
+            console.log('open', newVal)
+        })
+
+        return { ai, modal, isMobile, toggleSidebar, closeSidebar, closeModal }
     },
     template: `
         <div class="flex h-screen bg-white dark:bg-gray-900">
@@ -92,6 +111,8 @@ export default {
 
                 <RouterView />
             </div>
+
+            <component v-if="modal" :is="modal" @done="closeModal" />
         </div>
     `,
 }

llms/ui/Avatar.mjs

@@ -1,7 +1,7 @@
 import { computed, inject, ref, onMounted, onUnmounted } from "vue"
 
 export default {
-    template:`
+    template: `
         <div v-if="$ai.auth?.profileUrl" class="relative" ref="avatarContainer">
             <img
                 @click.stop="toggleMenu"
@@ -31,7 +31,8 @@ export default {
         </div>
     `,
     setup() {
-        const ai = inject('ai')
+        const ctx = inject('ctx')
+        const ai = ctx.ai
         const showMenu = ref(false)
         const avatarContainer = ref(null)
 

llms/ui/ChatPrompt.mjs

@@ -146,17 +146,14 @@ export default {
         model: {
             type: Object,
             default: null
-        },
-        systemPrompt: {
-            type: String,
-            default: ''
         }
     },
     setup(props) {
-        const ai = inject('ai')
+        const ctx = inject('ctx')
+        const config = ctx.state.config
+        const ai = ctx.ai
         const chatSettings = inject('chatSettings')
         const router = useRouter()
-        const config = inject('config')
         const chatPrompt = inject('chatPrompt')
         const {
             messageText,
@@ -325,20 +322,6 @@ export default {
             }
         }
 
-        function createChatRequest() {
-            if (hasImage()) {
-                return deepClone(config.defaults.image)
-            }
-            if (hasAudio()) {
-                return deepClone(config.defaults.audio)
-            }
-            if (attachedFiles.value.length) {
-                return deepClone(config.defaults.file)
-            }
-            const text = deepClone(config.defaults.text)
-            return text
-        }
-
         function getTextContent(chat) {
             const textMessage = chat.messages.find(m =>
                 m.role === 'user' && Array.isArray(m.content) && m.content.some(c => c.type === 'text'))
@@ -383,17 +366,20 @@ export default {
 
                 // Create thread if none exists
                 if (!currentThread.value) {
-                    const newThread = await threads.createThread('New Chat', props.model, props.systemPrompt)
+                    const newThread = await threads.createThread({
+                        title: 'New Chat',
+                        model: props.model.id,
+                        info: toModelInfo(props.model),
+                    })
                     threadId = newThread.id
                     // Navigate to the new thread URL
                     router.push(`${ai.base}/c/${newThread.id}`)
                 } else {
                     threadId = currentThread.value.id
-                    // Update the existing thread's model and systemPrompt to match current selection
+                    // Update the existing thread's model to match current selection
                     await threads.updateThread(threadId, {
                         model: props.model.name,
                         info: toModelInfo(props.model),
-                        systemPrompt: props.systemPrompt
                     })
                 }
 
@@ -448,51 +434,49 @@ export default {
                 isGenerating.value = true
 
                 // Construct API Request from History
-                const chatRequest = {
+                const request = {
                     model: props.model.name,
                     messages: [],
                     metadata: {}
                 }
 
-                // Add system prompt if present
-                if (props.systemPrompt?.trim()) {
-                    chatRequest.messages.push({
-                        role: 'system',
-                        content: props.systemPrompt // assuming system prompt is just string
-                    })
-                }
-
                 // Add History
                 thread.messages.forEach(m => {
-                    chatRequest.messages.push({
+                    request.messages.push({
                         role: m.role,
                         content: m.content
                     })
                 })
 
                 // Apply user settings
-                applySettings(chatRequest)
-                chatRequest.metadata.threadId = threadId
+                applySettings(request)
+                request.metadata.threadId = threadId
 
-                console.debug('chatRequest', chatRequest)
+                const ctxRequest = {
+                    request,
+                    thread,
+                }
+                ctx.chatRequestFilters.forEach(f => f(ctxRequest))
+
+                console.debug('chatRequest', request)
 
                 // Send to API
                 const startTime = Date.now()
-                const response = await ai.post('/v1/chat/completions', {
-                    body: JSON.stringify(chatRequest),
+                const res = await ai.post('/v1/chat/completions', {
+                    body: JSON.stringify(request),
                     signal: controller.signal
                 })
 
-                let result = null
-                if (!response.ok) {
+                let response = null
+                if (!res.ok) {
                     errorStatus.value = {
-                        errorCode: `HTTP ${response.status} ${response.statusText}`,
+                        errorCode: `HTTP ${res.status} ${res.statusText}`,
                         message: null,
                         stackTrace: null
                     }
                     let errorBody = null
                     try {
-                        errorBody = await response.text()
+                        errorBody = await res.text()
                         if (errorBody) {
                             // Try to parse as JSON for better formatting
                             try {
@@ -513,8 +497,13 @@ export default {
                     }
                 } else {
                     try {
-                        result = await response.json()
-                        console.debug('chatResponse', JSON.stringify(result, null, 2))
+                        response = await res.json()
+                        const ctxResponse = {
+                            response,
+                            thread,
+                        }
+                        ctx.chatResponseFilters.forEach(f => f(ctxResponse))
+                        console.debug('chatResponse', JSON.stringify(response, null, 2))
                     } catch (e) {
                         errorStatus.value = {
                             errorCode: 'Error',
@@ -524,29 +513,29 @@ export default {
                     }
                 }
 
-                if (result?.error) {
+                if (response?.error) {
                     errorStatus.value ??= {
                         errorCode: 'Error',
                     }
-                    errorStatus.value.message = result.error
+                    errorStatus.value.message = response.error
                 }
 
                 if (!errorStatus.value) {
                     // Add assistant response (save entire message including reasoning)
-                    const assistantMessage = result.choices?.[0]?.message
+                    const assistantMessage = response.choices?.[0]?.message
 
-                    const usage = result.usage
+                    const usage = response.usage
                     if (usage) {
-                        if (result.metadata?.pricing) {
-                            const [input, output] = result.metadata.pricing.split('/')
-                            usage.duration = result.metadata.duration ?? (Date.now() - startTime)
+                        if (response.metadata?.pricing) {
+                            const [input, output] = response.metadata.pricing.split('/')
+                            usage.duration = response.metadata.duration ?? (Date.now() - startTime)
                             usage.input = input
                             usage.output = output
                             usage.tokens = usage.completion_tokens
                             usage.price = usage.output
                             usage.cost = tokenCost(usage.prompt_tokens / 1_000_000 * parseFloat(input) + usage.completion_tokens / 1_000_000 * parseFloat(output))
                         }
-                        await threads.logRequest(threadId, props.model, chatRequest, result)
+                        await threads.logRequest(threadId, props.model, request, response)
                     }
                     await threads.addMessageToThread(threadId, assistantMessage, usage)
 
@@ -554,6 +543,8 @@ export default {
 
                     attachedFiles.value = []
                     // Error will be cleared when user sends next message (no auto-timeout)
+                } else {
+                    ctx.chatErrorFilters.forEach(f => f(errorStatus.value))
                 }
             } catch (error) {
                 // Check if the error is due to abort

llms/ui/Main.mjs

@@ -2,25 +2,63 @@ import { ref, computed, nextTick, watch, onMounted, provide, inject } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useFormatters } from '@servicestack/vue'
 import { useThreadStore } from './threadStore.mjs'
-import { storageObject, addCopyButtons, formatCost, statsTitle, fetchCacheInfos } from './utils.mjs'
+import { addCopyButtons, formatCost, statsTitle, fetchCacheInfos } from './utils.mjs'
 import { renderMarkdown } from './markdown.mjs'
 import ChatPrompt, { useChatPrompt } from './ChatPrompt.mjs'
 import SignIn from './SignIn.mjs'
 import OAuthSignIn from './OAuthSignIn.mjs'
 import Avatar from './Avatar.mjs'
-import ModelSelector from './ModelSelector.mjs'
-import SystemPromptSelector from './SystemPromptSelector.mjs'
-import SystemPromptEditor from './SystemPromptEditor.mjs'
 import { useSettings } from "./SettingsDialog.mjs"
 import Welcome from './Welcome.mjs'
 
 const { humanifyMs, humanifyNumber } = useFormatters()
 
+const TopBar = {
+    template: `
+        <div class="flex space-x-2">
+            <div v-for="(ext, index) in extensions" :key="ext.id" class="relative flex items-center justify-center">
+                <component :is="ext.topBarIcon" 
+                    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' : ext.isActive($layout.top) }" 
+                    @mouseenter="tooltip = ext.name"
+                    @mouseleave="tooltip = ''"
+                    />
+                <div v-if="tooltip === ext.name" 
+                    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="index <= extensions.length - 1 ? 'right-0' : 'left-1/2 -translate-x-1/2'">
+                    {{ext.name}}
+                </div>    
+            </div>
+        </div>
+    `,
+    setup() {
+        const ctx = inject('ctx')
+        const tooltip = ref('')
+        const extensions = computed(() => ctx.extensions.filter(x => x.topBarIcon))
+        return {
+            extensions,
+            tooltip,
+        }
+    }
+}
+
+const TopPanel = {
+    template: `
+        <component v-if="component" :is="component" />
+    `,
+    setup() {
+        const ctx = inject('ctx')
+        const component = computed(() => ctx.component(ctx.layout.top))
+        return {
+            component,
+        }
+    }
+}
+
 export default {
     components: {
-        ModelSelector,
-        SystemPromptSelector,
-        SystemPromptEditor,
+        TopBar,
+        TopPanel,
         ChatPrompt,
         SignIn,
         OAuthSignIn,
@@ -29,28 +67,26 @@ 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)" 
+            <!-- Header with model selectors -->
+            <div v-if="$ai.hasAccess" 
                 :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">
+                class="flex items-center border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-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 pl-4">
-                        <SystemPromptSelector :prompts="prompts" v-model="selectedPrompt"
-                            :show="showSystemPrompt" @toggle="showSystemPrompt = !showSystemPrompt" />
+                        <TopBar />
                         <Avatar />
                     </div>
                 </div>
             </div>
 
-            <SystemPromptEditor v-if="showSystemPrompt && !($ai.requiresAuth && !$ai.auth)"
-                v-model="currentSystemPrompt" :prompts="prompts" :selected="selectedPrompt" />
+            <TopPanel />
 
             <!-- Messages Area -->
             <div class="flex-1 overflow-y-auto" ref="messagesContainer">
                 <div class="mx-auto max-w-6xl px-4 py-6">
-                    <div v-if="$ai.requiresAuth && !$ai.auth">
+                    <div v-if="!$ai.hasAccess">
                         <OAuthSignIn v-if="$ai.authType === 'oauth'" @done="$ai.signIn($event)" />
                         <SignIn v-else @done="$ai.signIn($event)" />
                     </div>
@@ -179,31 +215,32 @@ export default {
                                     </div>
                                 </div>
 
-            <!-- User Message with separate attachments -->
-            <div v-if="message.role !== 'assistant'">
-                <div v-html="renderMarkdown(message.content)" class="prose prose-sm max-w-none dark:prose-invert break-words"></div>
-                
-                <!-- Attachments Grid -->
-                <div v-if="hasAttachments(message)" class="mt-2 flex flex-wrap gap-2">
-                    <template v-for="(part, i) in getAttachments(message)" :key="i">
-                        <!-- Image -->
-                        <div v-if="part.type === 'image_url'" class="group relative cursor-pointer" @click="openLightbox(part.image_url.url)">
-                            <img :src="part.image_url.url" class="max-w-[400px] max-h-96 rounded-lg border border-gray-200 dark:border-gray-700 object-contain bg-gray-50 dark:bg-gray-900 shadow-sm transition-transform hover:scale-[1.02]" />
-                        </div>
-                        <!-- Audio -->
-                        <div v-else-if="part.type === 'input_audio'" class="flex items-center gap-2 p-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
-                            <svg class="w-5 h-5 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
-                            <audio controls :src="part.input_audio.data" class="h-8 w-48"></audio>
-                        </div>
-                        <!-- File -->
-                        <a v-else-if="part.type === 'file'" :href="part.file.file_data" target="_blank" 
-                           class="flex items-center gap-2 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-sm text-blue-600 dark:text-blue-400 hover:underline">
-                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
-                            <span class="max-w-xs truncate">{{ part.file.filename || 'Attachment' }}</span>
-                        </a>
-                    </template>
-                </div>
-            </div>
+                                <!-- User Message with separate attachments -->
+                                <div v-if="message.role !== 'assistant'">
+                                    <div v-html="renderMarkdown(message.content)" class="prose prose-sm max-w-none dark:prose-invert break-words"></div>
+                                    
+                                    <!-- Attachments Grid -->
+                                    <div v-if="hasAttachments(message)" class="mt-2 flex flex-wrap gap-2">
+                                        <template v-for="(part, i) in getAttachments(message)" :key="i">
+                                            <!-- Image -->
+                                            <div v-if="part.type === 'image_url'" class="group relative cursor-pointer" @click="openLightbox(part.image_url.url)">
+                                                <img :src="part.image_url.url" class="max-w-[400px] max-h-96 rounded-lg border border-gray-200 dark:border-gray-700 object-contain bg-gray-50 dark:bg-gray-900 shadow-sm transition-transform hover:scale-[1.02]" />
+                                            </div>
+                                            <!-- Audio -->
+                                            <div v-else-if="part.type === 'input_audio'" class="flex items-center gap-2 p-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+                                                <svg class="w-5 h-5 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
+                                                <audio controls :src="part.input_audio.data" class="h-8 w-48"></audio>
+                                            </div>
+                                            <!-- File -->
+                                            <a v-else-if="part.type === 'file'" :href="part.file.file_data" target="_blank" 
+                                            class="flex items-center gap-2 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-sm text-blue-600 dark:text-blue-400 hover:underline">
+                                                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
+                                                <span class="max-w-xs truncate">{{ part.file.filename || 'Attachment' }}</span>
+                                            </a>
+                                        </template>
+                                    </div>
+                                </div>
+
                                 <div class="mt-2 text-xs opacity-70">
                                     <span>{{ formatTime(message.timestamp) }}</span>
                                     <span v-if="message.usage" :title="tokensTitle(message.usage)">
@@ -304,8 +341,8 @@ export default {
             </div>
 
             <!-- Input Area -->
-            <div class="flex-shrink-0 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-6 py-4">
-                <ChatPrompt :model="selectedModelObj" :systemPrompt="currentSystemPrompt" />
+            <div v-if="$ai.hasAccess" class="flex-shrink-0 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-6 py-4">
+                <ChatPrompt :model="selectedModelObj" />
             </div>
             
             <!-- Lightbox -->
@@ -323,10 +360,10 @@ export default {
             </div>
         </div>
     `,
-    props: {
-    },
-    setup(props) {
-        const ai = inject('ai')
+    setup() {
+        const ctx = inject('ctx')
+        const models = ctx.state.models
+        const config = ctx.state.config
         const router = useRouter()
         const route = useRoute()
         const threads = useThreadStore()
@@ -340,28 +377,14 @@ export default {
         provide('threads', threads)
         provide('chatPrompt', chatPrompt)
         provide('chatSettings', chatSettings)
-        const models = inject('models')
-        const config = inject('config')
 
-        const prefs = storageObject(ai.prefsKey)
-
-        const customPromptValue = ref('')
-        const customPrompt = {
-            id: '_custom_',
-            name: 'Custom...',
-            value: ''
-        }
-
-        const prompts = computed(() => [customPrompt, ...config.prompts])
+        const prefs = ctx.getPrefs()
 
         const selectedModel = ref(prefs.model || config.defaults.text.model || '')
         const selectedModelObj = computed(() => {
             if (!selectedModel.value || !models) return null
             return models.find(m => m.name === selectedModel.value) || models.find(m => m.id === selectedModel.value)
         })
-        const selectedPrompt = ref(prefs.systemPrompt || null)
-        const currentSystemPrompt = ref('')
-        const showSystemPrompt = ref(false)
         const messagesContainer = ref(null)
         const isExporting = ref(false)
         const isImporting = ref(false)
@@ -396,45 +419,16 @@ export default {
                 selectedModel.value = thread.model
             }
 
-            // Sync System Prompt selection from thread
-            if (thread) {
-                const norm = s => (s || '').replace(/\s+/g, ' ').trim()
-                const tsp = norm(thread.systemPrompt || '')
-                if (tsp) {
-                    const match = config.prompts.find(p => norm(p.value) === tsp)
-                    if (match) {
-                        selectedPrompt.value = match
-                        currentSystemPrompt.value = match.value.replace(/\n/g, ' ')
-                    } else {
-                        selectedPrompt.value = customPrompt
-                        currentSystemPrompt.value = thread.systemPrompt
-                    }
-                } else {
-                    // Preserve existing selected prompt
-                    // selectedPrompt.value = null
-                    // currentSystemPrompt.value = ''
-                }
-            }
-
             if (!newId) {
                 chatPrompt.reset()
             }
             nextTick(addCopyButtons)
         }, { immediate: true })
 
-        // Watch selectedPrompt and update currentSystemPrompt
-        watch(selectedPrompt, (newPrompt) => {
-            // If using a custom prompt, keep whatever is already in currentSystemPrompt
-            if (newPrompt && newPrompt.id === '_custom_') return
-            const prompt = newPrompt && config.prompts.find(p => p.id === newPrompt.id)
-            currentSystemPrompt.value = prompt ? prompt.value.replace(/\n/g, ' ') : ''
-        }, { immediate: true })
-
-        watch(() => [selectedModel.value, selectedPrompt.value], () => {
-            localStorage.setItem(ai.prefsKey, JSON.stringify({
+        watch(() => [selectedModel.value], () => {
+            ctx.setPrefs({
                 model: selectedModel.value,
-                systemPrompt: selectedPrompt.value
-            }))
+            })
         })
 
         async function exportThreads() {
@@ -828,15 +822,10 @@ export default {
             config,
             models,
             threads,
-            prompts,
             isGenerating,
-            customPromptValue,
             currentThread,
             selectedModel,
             selectedModelObj,
-            selectedPrompt,
-            currentSystemPrompt,
-            showSystemPrompt,
             messagesContainer,
             errorStatus,
             copying,

llms/ui/OAuthSignIn.mjs

@@ -45,44 +45,13 @@ export default {
     `,
     emits: ['done'],
     setup(props, { emit }) {
-        const ai = inject('ai')
         const errorMessage = ref(null)
-        
+
         function signInWithGitHub() {
             // Redirect to GitHub OAuth endpoint
             window.location.href = '/auth/github'
         }
-        
-        // Check for session token in URL (after OAuth callback redirect)
-        onMounted(async () => {
-            const urlParams = new URLSearchParams(window.location.search)
-            const sessionToken = urlParams.get('session')
-            
-            if (sessionToken) {
-                try {
-                    // Validate session with server
-                    const response = await ai.get(`/auth/session?session=${sessionToken}`)
-                    
-                    if (response.ok) {
-                        const sessionData = await response.json()
-                        
-                        // Clean up URL
-                        const url = new URL(window.location.href)
-                        url.searchParams.delete('session')
-                        window.history.replaceState({}, '', url.toString())
-                        
-                        // Emit done event with session data
-                        emit('done', sessionData)
-                    } else {
-                        errorMessage.value = 'Failed to validate session'
-                    }
-                } catch (error) {
-                    console.error('Session validation error:', error)
-                    errorMessage.value = 'Failed to validate session'
-                }
-            }
-        })
-        
+
         return {
             signInWithGitHub,
             errorMessage,

llms/ui/ProviderStatus.mjs

@@ -31,9 +31,10 @@ export default {
     `,
     emits: ['updated'],
     setup(props, { emit }) {
-        const ai = inject('ai')
-        const config = inject('config')
-        const models = inject('models')
+        const ctx = inject('ctx')
+        const ai = ctx.ai
+        const config = ctx.state.config
+        const models = ctx.state.models
         const showPopover = ref(false)
         const triggerRef = ref(null)
         const popoverRef = ref(null)
@@ -62,11 +63,9 @@ export default {
                         ai.getConfig(),
                         ai.getModels(),
                     ])
-                    const newConfig = await configRes.json()
-                    const newModels = await modelsRes.json()
-                    Object.assign(config, newConfig)
-                    models.length = 0
-                    newModels.forEach(m => models.push(m))
+                    const config = await configRes.json()
+                    const models = await modelsRes.json()
+                    Object.assign(ctx.state, { config, models })
                     emit('updated')
                     renderKey.value++
                 } catch (e) {