llms-py 2.0.9__py3-none-any.whl → 2.0.10__py3-none-any.whl

llms_py-2.0.10.data/data/ui/SettingsDialog.mjs

@@ -0,0 +1,374 @@
+import { ref, computed, watch, inject } from 'vue'
+import { storageObject } from './utils.mjs'
+
+const settingsKey = 'llms.settings'
+
+export function useSettings() {
+    const intFields = [
+        'max_completion_tokens',
+        'n',
+        'seed',
+        'top_logprobs',
+    ]
+    const floatFields = [
+        'frequency_penalty',
+        'presence_penalty',
+        'temperature',
+        'top_p',
+    ]
+    const boolFields = [
+        'enable_thinking',
+        'parallel_tool_calls',
+        'store',
+    ]
+    const strFields = [
+        'prompt_cache_key',
+        'reasoning_effort',
+        'safety_identifier',
+        'service_tier',
+        'verbosity',
+    ]
+    const listFields = [
+        'stop',
+    ]
+    const allFields = [
+        ...intFields,
+        ...floatFields,
+        ...boolFields,
+        ...strFields,
+        ...listFields,
+    ]
+
+    let settings = ref(storageObject(settingsKey))
+    
+    function validSettings(localSettings) {
+        const to = {}
+        intFields.forEach(f => {
+            if (localSettings[f] != null && localSettings[f] !== '' && !isNaN(parseInt(localSettings[f]))) {
+                to[f] = parseInt(localSettings[f])
+            }
+        })
+        floatFields.forEach(f => {
+            if (localSettings[f] != null && localSettings[f] !== '' && !isNaN(parseFloat(localSettings[f]))) {
+                to[f] = parseFloat(localSettings[f])
+            }
+        })
+        boolFields.forEach(f => {
+            if (localSettings[f] != null && localSettings[f] !== '' && !!localSettings[f]) {
+                to[f] = !!localSettings[f]
+            }
+        })
+        strFields.forEach(f => {
+            if (localSettings[f] != null && localSettings[f] !== '') {
+                to[f] = localSettings[f]
+            }
+        })
+        listFields.forEach(f => {
+            if (localSettings[f] != null && localSettings[f] !== '') {
+                to[f] = Array.isArray(localSettings[f]) 
+                    ? localSettings[f]
+                    : typeof localSettings[f] == 'string' 
+                        ? localSettings[f].split(',').map(x => x.trim())
+                        : []
+            }
+        })
+        return to
+    }
+
+    function applySettings(chatRequest) {
+        console.log('applySettings', JSON.stringify(settings.value, undefined, 2))
+        const removeFields = allFields.filter(f => !(f in settings.value))
+        removeFields.forEach(f => delete chatRequest[f])
+        Object.keys(settings.value).forEach(k => {
+            chatRequest[k] = settings.value[k]
+        })
+        console.log('applySettings.chatRequest', JSON.stringify(chatRequest, undefined, 2))
+    }
+
+    function resetSettings() {
+        return saveSettings({})
+    }
+    
+    function saveSettings(localSettings) {
+        // console.log('saveSettings', JSON.stringify(localSettings, undefined, 2))
+        settings.value = validSettings(localSettings)
+        console.log('saveSettings.settings', JSON.stringify(settings.value, undefined, 2))
+        return storageObject(settingsKey, settings.value)
+    }
+
+    return {
+        allFields,
+        settings,
+        applySettings,
+        saveSettings,
+        resetSettings,
+    }
+}
+
+export default {
+    template: `
+    <div v-if="isOpen" class="fixed inset-0 z-50 overflow-y-auto" @click.self="close">
+        <div class="flex min-h-screen items-center justify-center p-4">
+            <!-- Backdrop -->
+            <div class="fixed inset-0 bg-black/40 transition-opacity" @click="close"></div>
+            
+            <!-- Dialog -->
+            <div class="relative bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-hidden">
+                <!-- Header -->
+                <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200">
+                    <h2 class="text-xl font-semibold text-gray-900">Chat Request Settings</h2>
+                    <button type="button" @click="close" class="text-gray-400 hover:text-gray-600">
+                        <svg class="size-6" 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>
+                </div>
+
+                <!-- Content -->
+                <form class="px-6 py-4 overflow-y-auto max-h-[calc(90vh-140px)]" @submit.prevent="save">
+                    <p class="text-sm text-gray-600 mb-4">
+                        Configure default values for chat request options. Leave empty to use model defaults.
+                    </p>
+
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <!-- Temperature -->
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">
+                                Temperature
+                                <span class="text-gray-500 font-normal">(0-2)</span>
+                            </label>
+                            <input type="number" v-model="localSettings.temperature" 
+                                step="0.1" min="0" max="2"
+                                placeholder="e.g., 0.7"
+                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" />
+                            <p class="mt-1 text-xs text-gray-500">Higher values more random, lower for more focus</p>
+                        </div>
+
+                        <!-- Max Completion Tokens -->
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">
+                                Max Completion Tokens
+                            </label>
+                            <input type="number" v-model="localSettings.max_completion_tokens" 
+                                step="1" min="1"
+                                placeholder="e.g., 2048"
+                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" />
+                            <p class="mt-1 text-xs text-gray-500">Max tokens for completion (inc. reasoning tokens)</p>
+                        </div>
+
+                        <!-- Seed -->
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">
+                                Seed
+                            </label>
+                            <input type="number" v-model="localSettings.seed" 
+                                step="1"
+                                placeholder="e.g., 42"
+                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" />
+                            <p class="mt-1 text-xs text-gray-500">For deterministic sampling (Beta feature)</p>
+                        </div>
+
+                        <!-- Top P -->
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">
+                                Top P
+                                <span class="text-gray-500 font-normal">(0-1)</span>
+                            </label>
+                            <input type="number" v-model="localSettings.top_p" 
+                                step="0.1" min="0" max="1"
+                                placeholder="e.g., 0.9"
+                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" />
+                            <p class="mt-1 text-xs text-gray-500">Nucleus sampling - alternative to temperature</p>
+                        </div>
+
+                        <!-- Frequency Penalty -->
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">
+                                Frequency Penalty
+                                <span class="text-gray-500 font-normal">(-2.0 to 2.0)</span>
+                            </label>
+                            <input type="number" v-model="localSettings.frequency_penalty" 
+                                step="0.1" min="-2" max="2"
+                                placeholder="e.g., 0.5"
+                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" />
+                            <p class="mt-1 text-xs text-gray-500">Penalize tokens based on frequency in text</p>
+                        </div>
+
+                        <!-- Presence Penalty -->
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">
+                                Presence Penalty
+                                <span class="text-gray-500 font-normal">(-2.0 to 2.0)</span>
+                            </label>
+                            <input type="number" v-model="localSettings.presence_penalty" 
+                                step="0.1" min="-2" max="2"
+                                placeholder="e.g., 0.5"
+                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" />
+                            <p class="mt-1 text-xs text-gray-500">Penalize tokens based on presence in text</p>
+                        </div>
+
+                        <!-- Stop Sequences -->
+                        <div>
+                            <label for="stop" class="block text-sm font-medium text-gray-700 mb-1">
+                                Stop Sequences
+                            </label>
+                            <TagInput id="stop" inputClass="h-[37px] !shadow-none"
+                                v-model="localSettings.stop"
+                                placeholder="" 
+                                label=""
+                                />
+                            <p class="mt-1 text-xs text-gray-500">Up to 4 sequences where API stops generating</p>
+                        </div>
+
+                        <!-- Reasoning Effort -->
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">
+                                Reasoning Effort
+                            </label>
+                            <select v-model="localSettings.reasoning_effort"
+                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
+                                <option value="">Default</option>
+                                <option value="minimal">Minimal</option>
+                                <option value="low">Low</option>
+                                <option value="medium">Medium</option>
+                                <option value="high">High</option>
+                            </select>
+                            <p class="mt-1 text-xs text-gray-500">Constrains effort on reasoning for reasoning models</p>
+                        </div>
+
+                        <!-- Verbosity -->
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">
+                                Verbosity
+                            </label>
+                            <select v-model="localSettings.verbosity"
+                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
+                                <option value="">Default</option>
+                                <option value="low">Low</option>
+                                <option value="medium">Medium</option>
+                                <option value="high">High</option>
+                            </select>
+                            <p class="mt-1 text-xs text-gray-500">Constrains verbosity of model's response</p>
+                        </div>
+
+                        <!-- Service Tier -->
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">
+                                Service Tier
+                            </label>
+                            <input type="text" v-model="localSettings.service_tier" 
+                                placeholder="e.g., auto, default"
+                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" />
+                            <p class="mt-1 text-xs text-gray-500">Processing type for serving the request</p>
+                        </div>
+
+                        <!-- Top Logprobs -->
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">
+                                Top Logprobs
+                                <span class="text-gray-500 font-normal">(0-20)</span>
+                            </label>
+                            <input type="number" v-model="localSettings.top_logprobs" 
+                                step="1" min="0" max="20"
+                                placeholder="e.g., 5"
+                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" />
+                            <p class="mt-1 text-xs text-gray-500">Number of most likely tokens to return with log probs</p>
+                        </div>
+
+                        <!-- Safety Identifier -->
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">
+                                Safety Identifier
+                            </label>
+                            <input type="text" v-model="localSettings.safety_identifier" 
+                                placeholder="Unique user identifier"
+                                class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" />
+                            <p class="mt-1 text-xs text-gray-500">Identifier to help detect policy violations</p>
+                        </div>
+
+                        <!-- Store -->
+                        <div>
+                            <label class="flex items-center">
+                                <input type="checkbox" v-model="localSettings.store"
+                                    class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" />
+                                <span class="ml-2 text-sm font-medium text-gray-700">Store Output</span>
+                            </label>
+                            <p class="mt-1 text-xs text-gray-500">Store output for model distillation or evals</p>
+                        </div>
+
+                        <!-- Enable Thinking -->
+                        <div>
+                            <label class="flex items-center">
+                                <input type="checkbox" v-model="localSettings.enable_thinking"
+                                    class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" />
+                                <span class="ml-2 text-sm font-medium text-gray-700">Enable Thinking</span>
+                            </label>
+                            <p class="mt-1 text-xs text-gray-500">Enable thinking mode for supported models (Qwen)</p>
+                        </div>
+                    </div>
+                </form>
+
+                <!-- Footer -->
+                <div class="flex items-center justify-between px-6 py-4 border-t border-gray-200 bg-gray-50">
+                    <button type="button" @click="reset"
+                        class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900">
+                        Reset to Defaults
+                    </button>
+                    <div class="flex space-x-3">
+                        <button type="button" @click="close"
+                            class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
+                            Cancel
+                        </button>
+                        <button type="submit" @click="save"
+                            class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">
+                            Save Settings
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    `,
+    props: {
+        isOpen: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['close'],
+    setup(props, { emit }) {
+        const chatSettings = inject('chatSettings')
+        const { settings, saveSettings, resetSettings } = chatSettings
+        
+        // Local copy for editing
+        const localSettings = ref(Object.assign({}, settings.value))
+
+        // Watch for dialog open to sync local settings
+        watch(() => props.isOpen, (isOpen) => {
+            if (isOpen) {
+                localSettings.value = Object.assign({}, settings.value)
+            }
+        })
+
+        function close() {
+            emit('close')
+        }
+
+        function save() {
+            saveSettings(localSettings.value)
+            close()
+        }
+
+        function reset() {
+            localSettings.value = resetSettings()
+        }
+
+        return {
+            localSettings,
+            close,
+            save,
+            reset,
+        }
+    }
+}
+

{llms_py-2.0.9.data → llms_py-2.0.10.data}/data/ui/Sidebar.mjs

@@ -1,6 +1,7 @@
-import { onMounted } from 'vue'
+import { onMounted, inject } from 'vue'
 import { useRouter } from 'vue-router'
 import { useThreadStore } from './threadStore.mjs'
+import Brand from './Brand.mjs'
 
 // Thread Item Component
 const ThreadItem = {
@@ -127,7 +128,7 @@ const GroupedThreads = {
         />
     </div>
     <div class="mb-4 flex w-full justify-center">
-        <button @click="$router.push('/recents')" type="button"
+        <button @click="$router.push($ai.base + '/recents')" type="button"
             class="flex text-sm space-x-1 font-semibold text-gray-900 hover:text-blue-600 focus:outline-none transition-colors">
             <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8 2.19c3.13 0 5.68 2.25 5.68 5s-2.55 5-5.68 5a5.7 5.7 0 0 1-1.89-.29l-.75-.26l-.56.56a14 14 0 0 1-2 1.55a.13.13 0 0 1-.07 0v-.06a6.58 6.58 0 0 0 .15-4.29a5.25 5.25 0 0 1-.55-2.16c0-2.77 2.55-5 5.68-5M8 .94c-3.83 0-6.93 2.81-6.93 6.27a6.4 6.4 0 0 0 .64 2.64a5.53 5.53 0 0 1-.18 3.48a1.32 1.32 0 0 0 2 1.5a15 15 0 0 0 2.16-1.71a6.8 6.8 0 0 0 2.31.36c3.83 0 6.93-2.81 6.93-6.27S11.83.94 8 .94"></path><ellipse cx="5.2" cy="7.7" fill="currentColor" rx=".8" ry=".75"></ellipse><ellipse cx="8" cy="7.7" fill="currentColor" rx=".8" ry=".75"></ellipse><ellipse cx="10.8" cy="7.7" fill="currentColor" rx=".8" ry=".75"></ellipse></svg>
             <span>All Chats</span>
@@ -146,31 +147,13 @@ const GroupedThreads = {
 
 const Sidebar = {
     components: {
+        Brand,
         GroupedThreads,
         ThreadItem,
     },
     template: `
         <div class="flex flex-col h-full bg-gray-50 border-r border-gray-200">
-            <!-- Header -->
-            <div class="flex-shrink-0 px-4 py-4 border-b border-gray-200 bg-white min-h-16 select-none">
-                <div class="flex items-center justify-between">
-                    <button type="button"
-                        @click="goToInitialState"
-                        class="text-lg font-semibold text-gray-900 hover:text-blue-600 focus:outline-none transition-colors"
-                        title="Go back to initial state"
-                    >
-                        History
-                    </button>
-                    <button type="button"
-                        @click="createNewThread"
-                        class="text-gray-900 hover:text-blue-600 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>
-
+            <Brand @home="goToInitialState" @new="createNewThread" />
             <!-- Thread List -->
             <div class="flex-1 overflow-y-auto">
                 <div v-if="isLoading" class="p-4 text-center text-gray-500">
@@ -187,13 +170,14 @@ const Sidebar = {
                 </div>
 
                 <div v-else class="py-2">
-                    <GroupedThreads :currentThread="currentThread" :groupedThreads="threadStore.getGroupedThreads(19)" 
+                    <GroupedThreads :currentThread="currentThread" :groupedThreads="threadStore.getGroupedThreads(18)" 
                         @select="selectThread" @delete="deleteThread" />        
                 </div>
             </div>
         </div>
     `,
     setup() {
+        const ai = inject('ai')
         const router = useRouter()
         const threadStore = useThreadStore()
         const {
@@ -212,7 +196,7 @@ const Sidebar = {
         })
 
         const selectThread = async (threadId) => {
-            router.push(`/c/${threadId}`)
+            router.push(`${ai.base}/c/${threadId}`)
         }
 
         const deleteThread = async (threadId) => {
@@ -220,19 +204,19 @@ const Sidebar = {
                 const wasCurrent = currentThread?.value?.id === threadId
                 await deleteThreadFromStore(threadId)
                 if (wasCurrent) {
-                    router.push('/')
+                    router.push(`${ai.base}/`)
                 }
             }
         }
 
         const createNewThread = async () => {
             const newThread = await createThread()
-            router.push(`/c/${newThread.id}`)
+            router.push(`${ai.base}/c/${newThread.id}`)
         }
 
         const goToInitialState = () => {
             clearCurrentThread()
-            router.push('/')
+            router.push(`${ai.base}/`)
         }
 
         return {

llms_py-2.0.10.data/data/ui/SignIn.mjs

@@ -0,0 +1,64 @@
+import { inject, ref } from "vue"
+import { toJsonObject } from "./utils.mjs"
+
+export default {
+    template: `
+    <div class="min-h-full -mt-12 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+        <div class="sm:mx-auto sm:w-full sm:max-w-md">
+            <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-gray-50">
+                Sign In
+            </h2>
+        </div>
+        <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+            <ErrorSummary v-if="errorSummary" class="mb-3" :status="errorSummary" />
+            <div class="bg-white dark:bg-black py-8 px-4 shadow sm:rounded-lg sm:px-10">
+                <form @submit.prevent="submit">
+                    <div class="flex flex-1 flex-col justify-between">
+                        <div class="space-y-6">
+                            <fieldset class="grid grid-cols-12 gap-6">
+                                <div class="w-full col-span-12">
+                                    <TextInput id="apiKey" name="apiKey" label="API Key" v-model="apiKey" />
+                                </div>
+                            </fieldset>
+                        </div>
+                    </div>
+                    <div class="mt-8">
+                        <PrimaryButton class="w-full">Sign In</PrimaryButton>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>     
+    `,
+    emits: ['done'],
+    setup(props, { emit }) {
+        const ai = inject('ai')
+        const apiKey = ref('')
+        const errorSummary = ref()
+        async function submit() {
+            const r = await ai.get('/auth', {
+                headers: { 
+                    'Authorization': `Bearer ${apiKey.value}`
+                },
+            })
+            const txt = await r.text()
+            const json = toJsonObject(txt)
+            // console.log('json', json)
+            if (r.ok) {
+                json.apiKey = apiKey.value
+                emit('done', json)
+            } else {
+                errorSummary.value = json.responseStatus || { 
+                    errorCode: "Unauthorized", 
+                    message: 'Invalid API Key' 
+                }
+            }
+        }
+        
+        return {
+            apiKey,
+            submit,
+            errorSummary,
+        }
+    }
+}

llms_py-2.0.10.data/data/ui/SystemPromptEditor.mjs

@@ -0,0 +1,31 @@
+export default {
+    template:`
+    <div class="border-b border-gray-200 bg-gray-50 px-6 py-4">
+        <div class="max-w-6xl mx-auto">
+            <label class="block text-sm font-medium text-gray-700 mb-2">
+                System Prompt
+                <span v-if="selected" class="text-gray-500 font-normal">
+                    ({{ prompts.find(p => p.id === selected.id)?.name || 'Custom' }})
+                </span>
+            </label>
+            <textarea
+                :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"
+                placeholder="Enter a system prompt to guide AI's behavior..."
+                rows="6"
+                class="block w-full resize-vertical rounded-md border border-gray-300 px-3 py-2 text-sm placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+            ></textarea>
+            <div class="mt-2 text-xs text-gray-500">
+                You can modify this system prompt before sending messages. Changes will only apply to new conversations.
+            </div>
+        </div>
+    </div>
+    `,
+    emits: ['update:modelValue'],
+    props: {
+        prompts: Array,
+        selected: Object,
+        modelValue: String,
+    },
+    setup() {
+    }
+}

llms_py-2.0.10.data/data/ui/SystemPromptSelector.mjs

@@ -0,0 +1,36 @@
+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" 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=""
+            :modelValue="modelValue" @update:modelValue="$emit('update:modelValue', $event)"
+            class="w-72 xl:w-84"
+            :match="(x, value) => x.name.toLowerCase().includes(value.toLowerCase())"
+            placeholder="Select a System Prompt...">
+            <template #item="{ value }">
+                <div class="truncate max-w-72" :title="value">{{value}}</div>
+            </template>
+        </Autocomplete>
+
+        <!-- Toggle System Prompt Visibility -->
+        <button type="button"
+            @click="$emit('toggle')"
+            :class="show ? 'text-blue-700' : 'text-gray-600'"
+            class="p-1 rounded-md hover:bg-blue-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+            :title="show ? 'Hide system prompt' : 'Show system prompt'"
+        >
+            <svg v-if="!show" class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="currentColor" d="M33.62 17.53c-3.37-6.23-9.28-10-15.82-10S5.34 11.3 2 17.53l-.28.47l.26.48c3.37 6.23 9.28 10 15.82 10s12.46-3.72 15.82-10l.26-.48Zm-15.82 8.9C12.17 26.43 7 23.29 4 18c3-5.29 8.17-8.43 13.8-8.43S28.54 12.72 31.59 18c-3.05 5.29-8.17 8.43-13.79 8.43"/><path fill="currentColor" d="M18.09 11.17A6.86 6.86 0 1 0 25 18a6.86 6.86 0 0 0-6.91-6.83m0 11.72A4.86 4.86 0 1 1 23 18a4.87 4.87 0 0 1-4.91 4.89"/><path fill="none" d="M0 0h36v36H0z"/></svg>
+            <svg v-else class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="currentColor" d="M25.19 20.4a6.8 6.8 0 0 0 .43-2.4a6.86 6.86 0 0 0-6.86-6.86a6.8 6.8 0 0 0-2.37.43L18 13.23a5 5 0 0 1 .74-.06A4.87 4.87 0 0 1 23.62 18a5 5 0 0 1-.06.74Z" class="clr-i-outline clr-i-outline-path-1"/><path fill="currentColor" d="M34.29 17.53c-3.37-6.23-9.28-10-15.82-10a16.8 16.8 0 0 0-5.24.85L14.84 10a14.8 14.8 0 0 1 3.63-.47c5.63 0 10.75 3.14 13.8 8.43a17.8 17.8 0 0 1-4.37 5.1l1.42 1.42a19.9 19.9 0 0 0 5-6l.26-.48Z"/><path fill="currentColor" d="m4.87 5.78l4.46 4.46a19.5 19.5 0 0 0-6.69 7.29l-.26.47l.26.48c3.37 6.23 9.28 10 15.82 10a16.9 16.9 0 0 0 7.37-1.69l5 5l1.75-1.5l-26-26Zm9.75 9.75l6.65 6.65a4.8 4.8 0 0 1-2.5.72A4.87 4.87 0 0 1 13.9 18a4.8 4.8 0 0 1 .72-2.47m-1.45-1.45a6.85 6.85 0 0 0 9.55 9.55l1.6 1.6a14.9 14.9 0 0 1-5.86 1.2c-5.63 0-10.75-3.14-13.8-8.43a17.3 17.3 0 0 1 6.12-6.3Z"/><path fill="none" d="M0 0h36v36H0z"/></svg>
+        </button>
+    `,
+    emits: ['updated', 'update:modelValue', 'toggle'],
+    props: {
+        prompts: Array,
+        modelValue: Object,
+        show: Boolean,
+    },
+    setup() {
+    }
+}

llms_py-2.0.10.data/data/ui/Welcome.mjs

@@ -0,0 +1,8 @@
+export default {
+    template: `
+        <div class="mb-2 flex justify-center">
+            <svg class="size-20 text-gray-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8 2.19c3.13 0 5.68 2.25 5.68 5s-2.55 5-5.68 5a5.7 5.7 0 0 1-1.89-.29l-.75-.26l-.56.56a14 14 0 0 1-2 1.55a.13.13 0 0 1-.07 0v-.06a6.58 6.58 0 0 0 .15-4.29a5.25 5.25 0 0 1-.55-2.16c0-2.77 2.55-5 5.68-5M8 .94c-3.83 0-6.93 2.81-6.93 6.27a6.4 6.4 0 0 0 .64 2.64a5.53 5.53 0 0 1-.18 3.48a1.32 1.32 0 0 0 2 1.5a15 15 0 0 0 2.16-1.71a6.8 6.8 0 0 0 2.31.36c3.83 0 6.93-2.81 6.93-6.27S11.83.94 8 .94"/><ellipse cx="5.2" cy="7.7" fill="currentColor" rx=".8" ry=".75"/><ellipse cx="8" cy="7.7" fill="currentColor" rx=".8" ry=".75"/><ellipse cx="10.8" cy="7.7" fill="currentColor" rx=".8" ry=".75"/></svg>
+        </div>
+        <h2 class="text-2xl font-semibold text-gray-900 mb-2">{{ $ai.welcome }}</h2>
+    `
+}