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

llms/ui/{Main.mjs → modules/chat/ChatBody.mjs}

@@ -1,56 +1,13 @@
-import { ref, computed, nextTick, watch, onMounted, provide, inject } from 'vue'
+import { ref, computed, nextTick, watch, onMounted, onUnmounted, 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 { 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()
 
 export default {
-    components: {
-        ModelSelector,
-        SystemPromptSelector,
-        SystemPromptEditor,
-        ChatPrompt,
-        SignIn,
-        OAuthSignIn,
-        Avatar,
-        Welcome,
-    },
     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="!$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 pl-4">
-                        <SystemPromptSelector :prompts="prompts" v-model="selectedPrompt"
-                            :show="showSystemPrompt" @toggle="showSystemPrompt = !showSystemPrompt" />
-                        <Avatar />
-                    </div>
-                </div>
-            </div>
-
-            <SystemPromptEditor v-if="showSystemPrompt && !($ai.requiresAuth && !$ai.auth)"
-                v-model="currentSystemPrompt" :prompts="prompts" :selected="selectedPrompt" />
-
+        <div class="flex flex-col h-full">
             <!-- 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>
@@ -113,6 +70,13 @@ export default {
 
                     <!-- Messages -->
                     <div v-else class="space-y-6">
+                        <div v-if="currentThread.messages.length && currentThread.model" class="absolute -mt-2">
+                            <span @click="$chat.setSelectedModel({ name: currentThread.model})" 
+                                class="flex items-center cursor-pointer px-1.5 py-0.5 text-xs rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 transition-colors border hover:border-gray-300 dark:hover:border-gray-700">
+                                <ProviderIcon class="size-4 mr-1" :provider="$chat.getProviderForModel(currentThread.model)" />
+                                {{currentThread.model}}
+                            </span>
+                        </div>
                         <div
                             v-for="message in currentThread.messages"
                             :key="message.id"
@@ -163,7 +127,7 @@ export default {
 
                                 <div
                                     v-if="message.role === 'assistant'"
-                                    v-html="renderMarkdown(message.content)"
+                                    v-html="$fmt.markdown(message.content)"
                                     class="prose prose-sm max-w-none dark:prose-invert"
                                 ></div>
 
@@ -174,43 +138,53 @@ export default {
                                         <span>{{ isReasoningExpanded(message.id) ? 'Hide reasoning' : 'Show reasoning' }}</span>
                                     </button>
                                     <div v-if="isReasoningExpanded(message.id)" class="mt-2 rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 p-2">
-                                        <div v-if="typeof message.reasoning === 'string'" v-html="renderMarkdown(message.reasoning)" class="prose prose-xs max-w-none dark:prose-invert"></div>
+                                        <div v-if="typeof message.reasoning === 'string'" v-html="$fmt.markdown(message.reasoning)" class="prose prose-xs max-w-none dark:prose-invert"></div>
                                         <pre v-else class="text-xs whitespace-pre-wrap overflow-x-auto text-gray-900 dark:text-gray-100">{{ formatReasoning(message.reasoning) }}</pre>
                                     </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>
+                                <!-- Assistant Images -->
+                                <div v-if="message.images && message.images.length > 0" class="mt-2 flex flex-wrap gap-2">
+                                    <template v-for="(img, i) in message.images" :key="i">
+                                        <div v-if="img.type === 'image_url'" class="group relative cursor-pointer" @click="openLightbox(resolveUrl(img.image_url.url))">
+                                            <img :src="resolveUrl(img.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>
+                                    </template>
+                                </div>
+
+                                <!-- User Message with separate attachments -->
+                                <div v-if="message.role !== 'assistant'">
+                                    <div v-html="$fmt.markdown(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>{{ $fmt.time(message.timestamp) }}</span>
                                     <span v-if="message.usage" :title="tokensTitle(message.usage)">
                                         &#8226;
-                                        {{ humanifyNumber(message.usage.tokens) }} tokens
+                                        {{ $fmt.humanifyNumber(message.usage.tokens) }} tokens
                                         <span v-if="message.usage.cost">&#183; {{ message.usage.cost }}</span>
-                                        <span v-if="message.usage.duration"> in {{ humanifyMs(message.usage.duration) }}</span>
+                                        <span v-if="message.usage.duration"> in {{ $fmt.humanifyMs(message.usage.duration) }}</span>
                                     </span>
                                 </div>
                             </div>
@@ -237,8 +211,8 @@ export default {
                         </div>
 
                         <div v-if="currentThread.stats && currentThread.stats.outputTokens" class="text-center text-gray-500 dark:text-gray-400 text-sm">
-                            <span :title="statsTitle(currentThread.stats)">
-                                {{ currentThread.stats.cost ? formatCost(currentThread.stats.cost) + '  for ' : '' }} {{ humanifyNumber(currentThread.stats.inputTokens) }} → {{ humanifyNumber(currentThread.stats.outputTokens) }} tokens over {{ currentThread.stats.requests }} request{{currentThread.stats.requests===1?'':'s'}} in {{ humanifyMs(currentThread.stats.duration) }}
+                            <span :title="$fmt.statsTitle(currentThread.stats)">
+                                {{ currentThread.stats.cost ? $fmt.costLong(currentThread.stats.cost) + '  for ' : '' }} {{ $fmt.humanifyNumber(currentThread.stats.inputTokens) }} → {{ $fmt.humanifyNumber(currentThread.stats.outputTokens) }} tokens over {{ currentThread.stats.requests }} request{{currentThread.stats.requests===1?'':'s'}} in {{ $fmt.humanifyMs(currentThread.stats.duration) }}
                             </span>
                         </div>
 
@@ -304,64 +278,45 @@ 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="$chat.getSelectedModel()" />
             </div>
             
             <!-- Lightbox -->
-            <div v-if="lightboxUrl" class="fixed inset-0 z-[100] bg-black/90 flex items-center justify-center p-4 cursor-pointer" @click="closeLightbox">
+            <div v-if="lightboxUrl" class="fixed inset-0 z-[100] bg-black/90 flex items-center justify-center p-4 cursor-pointer" 
+                @click="closeLightbox">
+                <button type="button" @click="closeLightbox"
+                    class="absolute top-4 right-4 text-white/70 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors z-[101]"
+                    title="Close">
+                    <svg class="size-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
                 <div class="relative max-w-full max-h-full">
                     <img :src="lightboxUrl" class="max-w-full max-h-[90vh] object-contain rounded-sm shadow-2xl" @click.stop />
-                    <button type="button" @click="closeLightbox"
-                        class="absolute -top-12 right-0 text-white/70 hover:text-white p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors"
-                        title="Close">
-                        <svg class="size-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                        </svg>
-                    </button>
                 </div>
             </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 threads = ctx.threads
+        const chatPrompt = ctx.chat
+        const { currentThread } = threads
+        const { errorStatus, isGenerating } = ctx.chat
+
         const router = useRouter()
         const route = useRoute()
-        const threads = useThreadStore()
-        const { currentThread } = threads
-        const chatPrompt = useChatPrompt()
-        const chatSettings = useSettings()
-        const {
-            errorStatus,
-            isGenerating,
-        } = chatPrompt
-        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)
@@ -376,6 +331,13 @@ export default {
             lightboxUrl.value = null
         }
 
+        const resolveUrl = (url) => {
+            if (url && url.startsWith('~')) {
+                return '/' + url
+            }
+            return ctx.ai.resolveUrl(url)
+        }
+
         // Auto-scroll to bottom when new messages arrive
         const scrollToBottom = async () => {
             await nextTick()
@@ -396,45 +358,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)
+            nextTick(ctx.chat.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() {
@@ -628,14 +561,6 @@ export default {
             }
         }
 
-        // Format timestamp
-        const formatTime = (timestamp) => {
-            return new Date(timestamp).toLocaleTimeString([], {
-                hour: '2-digit',
-                minute: '2-digit'
-            })
-        }
-
         // Reasoning collapse state and helpers
         const expandedReasoning = ref(new Set())
         const isReasoningExpanded = (id) => expandedReasoning.value.has(id)
@@ -727,7 +652,7 @@ export default {
                 text = message.content
             }
 
-            const infos = await fetchCacheInfos(getCacheInfos)
+            const infos = await ctx.ai.fetchCacheInfos(getCacheInfos)
             // replace name with info.name
             for (let i = 0; i < files.length; i++) {
                 const url = files[i]?.url
@@ -807,41 +732,32 @@ export default {
             let title = []
             if (usage.tokens && usage.price) {
                 const msg = parseFloat(usage.price) > 0
-                    ? `${usage.tokens} tokens @ ${usage.price} = ${tokenCost(usage.price, usage.tokens)}`
+                    ? `${usage.tokens} tokens @ ${usage.price} = ${ctx.fmt.tokenCostLong(usage.price, usage.tokens)}`
                     : `${usage.tokens} tokens`
                 const duration = usage.duration ? ` in ${usage.duration}ms` : ''
                 title.push(msg + duration)
             }
             return title.join('\n')
         }
-        const numFmt = new Intl.NumberFormat(undefined, { style: 'currency', currency: 'USD', minimumFractionDigits: 6 })
-        function tokenCost(price, tokens) {
-            if (!price || !tokens) return ''
-            return numFmt.format(parseFloat(price) * tokens)
-        }
 
+        let sub
         onMounted(() => {
-            setTimeout(addCopyButtons, 1)
+            sub = ctx.events.subscribe(`keydown:Escape`, closeLightbox)
+            setTimeout(ctx.chat.addCopyButtons, 1)
         })
+        onUnmounted(() => sub?.unsubscribe())
 
         return {
             config,
             models,
             threads,
-            prompts,
             isGenerating,
-            customPromptValue,
             currentThread,
             selectedModel,
             selectedModelObj,
-            selectedPrompt,
-            currentSystemPrompt,
-            showSystemPrompt,
             messagesContainer,
             errorStatus,
             copying,
-            formatTime,
-            renderMarkdown,
             isReasoningExpanded,
             toggleReasoning,
             formatReasoning,
@@ -858,16 +774,12 @@ export default {
             isImporting,
             fileInput,
             tokensTitle,
-            humanifyMs,
-            humanifyNumber,
-            formatCost,
-            formatCost,
-            statsTitle,
             getAttachments,
             hasAttachments,
             lightboxUrl,
             openLightbox,
             closeLightbox,
+            resolveUrl,
         }
     }
 }

llms/ui/{SettingsDialog.mjs → modules/chat/SettingsDialog.mjs}

@@ -1,5 +1,5 @@
 import { ref, computed, watch, inject } from 'vue'
-import { storageObject } from './utils.mjs'
+import { storageObject } from '../../utils.mjs'
 
 const settingsKey = 'llms.settings'
 
@@ -40,7 +40,7 @@ export function useSettings() {
     ]
 
     let settings = ref(storageObject(settingsKey))
-    
+
     function validSettings(localSettings) {
         const to = {}
         intFields.forEach(f => {
@@ -65,9 +65,9 @@ export function useSettings() {
         })
         listFields.forEach(f => {
             if (localSettings[f] != null && localSettings[f] !== '') {
-                to[f] = Array.isArray(localSettings[f]) 
+                to[f] = Array.isArray(localSettings[f])
                     ? localSettings[f]
-                    : typeof localSettings[f] == 'string' 
+                    : typeof localSettings[f] == 'string'
                         ? localSettings[f].split(',').map(x => x.trim())
                         : []
             }
@@ -88,7 +88,7 @@ export function useSettings() {
     function resetSettings() {
         return saveSettings({})
     }
-    
+
     function saveSettings(localSettings) {
         // console.log('saveSettings', JSON.stringify(localSettings, undefined, 2))
         settings.value = validSettings(localSettings)
@@ -337,9 +337,9 @@ export default {
     },
     emits: ['close'],
     setup(props, { emit }) {
-        const chatSettings = inject('chatSettings')
-        const { settings, saveSettings, resetSettings } = chatSettings
-        
+        const ctx = inject('ctx')
+        const { settings, saveSettings, resetSettings } = ctx.chat.settings
+
         // Local copy for editing
         const localSettings = ref(Object.assign({}, settings.value))