llms-py 2.0.15__py3-none-any.whl → 2.0.17__py3-none-any.whl

llms/ui/Brand.mjs

@@ -9,15 +9,26 @@ export default {
             >
                 History
             </button>
-            <button type="button"
-                @click="$emit('new')"
-                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 class="flex items-center space-x-2">
+                <button type="button"
+                    @click="$emit('analytics')"
+                    class="text-gray-900 hover:text-blue-600 focus:outline-none transition-colors"
+                    title="Analytics"
+                >
+                    <svg class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M5 22a1 1 0 0 1-1-1v-8a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1m5 0a1 1 0 0 1-1-1V3a1 1 0 0 1 2 0v18a1 1 0 0 1-1 1m5 0a1 1 0 0 1-1-1V9a1 1 0 0 1 2 0v12a1 1 0 0 1-1 1m5 0a1 1 0 0 1-1-1v-4a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1"/></svg>
+                </button>
+
+                <button type="button"
+                    @click="$emit('new')"
+                    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>
     </div>
     `,
-    emits:['home','new'],
+    emits:['home','new','analytics'],
 }

llms/ui/ChatPrompt.mjs

@@ -1,7 +1,7 @@
-import { ref, nextTick, inject } from 'vue'
+import { ref, nextTick, inject, unref } from 'vue'
 import { useRouter } from 'vue-router'
 import { lastRightPart } from '@servicestack/client'
-import { deepClone, fileToDataUri, fileToBase64, addCopyButtons } from './utils.mjs'
+import { deepClone, fileToDataUri, fileToBase64, addCopyButtons, toModelInfo, tokenCost } from './utils.mjs'
 
 const imageExts = 'png,webp,jpg,jpeg,gif,bmp,svg,tiff,ico'.split(',')
 const audioExts = 'mp3,wav,ogg,flac,m4a,opus,webm'.split(',')
@@ -71,16 +71,28 @@ export default {
             </div>
 
             <div class="flex-1">
-                <textarea
-                    ref="messageInput"
-                    v-model="messageText"
-                    @keydown.enter.exact.prevent="sendMessage"
-                    @keydown.enter.shift.exact="addNewLine"
-                    placeholder="Type your message... (Enter to send, Shift+Enter for new line)"
-                    rows="3"
-                    class="block w-full 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"
-                    :disabled="isGenerating || !model"
-                ></textarea>
+                <div class="relative">
+                    <textarea
+                        ref="messageInput"
+                        v-model="messageText"
+                        @keydown.enter.exact.prevent="sendMessage"
+                        @keydown.enter.shift.exact="addNewLine"
+                        placeholder="Type your message... (Enter to send, Shift+Enter for new line)"
+                        rows="3"
+                        class="block w-full rounded-md border border-gray-300 px-3 py-2 pr-12 text-sm placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                        :disabled="isGenerating || !model"
+                    ></textarea>
+                    <button title="Send (Enter)" type="button"
+                        @click="sendMessage"
+                        :disabled="!messageText.trim() || isGenerating || !model"
+                        class="absolute bottom-2 right-2 size-8 flex items-center justify-center rounded-md border border-gray-300 text-gray-600 hover:bg-gray-50 disabled:text-gray-400 disabled:cursor-not-allowed disabled:border-gray-200 transition-colors">
+                        <svg v-if="isGenerating" class="size-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                        <svg v-else class="size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="20" stroke-dashoffset="20" d="M12 21l0 -17.5"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="20;0"/></path><path stroke-dasharray="12" stroke-dashoffset="12" d="M12 3l7 7M12 3l-7 7"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.2s" values="12;0"/></path></g></svg>
+                    </button>
+                </div>
 
                 <!-- Attached files preview -->
                 <div v-if="attachedFiles.length" class="mt-2 flex flex-wrap gap-2">
@@ -96,19 +108,6 @@ export default {
                     Please select a model
                 </div>
             </div>
-
-            <div class="pt-3">
-                <button title="Send (Enter)" type="button"
-                    @click="sendMessage"
-                    :disabled="!messageText.trim() || isGenerating || !model"
-                    class="p-2 flex items-center justify-center rounded-full bg-gray-700 text-white transition-colors hover:opacity-70 focus-visible:outline-none focus-visible:outline-black disabled:bg-[#D7D7D7] disabled:text-[#f4f4f4] disabled:hover:opacity-100 dark:bg-white dark:text-black dark:focus-visible:outline-white disabled:dark:bg-token-text-quaternary dark:disabled:text-token-main-surface-secondary">
-                    <svg v-if="isGenerating" class="size-8 animate-spin" fill="none" viewBox="0 0 24 24">
-                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                    </svg>
-                    <svg v-else class="size-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="20" stroke-dashoffset="20" d="M12 21l0 -17.5"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="20;0"/></path><path stroke-dasharray="12" stroke-dashoffset="12" d="M12 3l7 7M12 3l-7 7"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.2s" values="12;0"/></path></g></svg>
-                </button>
-            </div>
         </div>
     </div>    
     `,
@@ -222,21 +221,28 @@ export default {
                     threadId = currentThread.value.id
                     // Update the existing thread's model and systemPrompt to match current selection
                     await threads.updateThread(threadId, {
-                        model: props.model,
+                        model: props.model.id,
+                        info: toModelInfo(props.model),
                         systemPrompt: props.systemPrompt
                     })
                 }
 
-                // Add user message
-                await threads.addMessageToThread(threadId, {
-                    role: 'user',
-                    content: message
-                })
+                // Get the thread to check for duplicates
+                let thread = await threads.getThread(threadId)
+                const lastMessage = thread.messages[thread.messages.length - 1]
+                const isDuplicate = lastMessage && lastMessage.role === 'user' && lastMessage.content === message
 
-                isGenerating.value = true
+                // Add user message only if it's not a duplicate
+                if (!isDuplicate) {
+                    await threads.addMessageToThread(threadId, {
+                        role: 'user',
+                        content: message
+                    })
+                    // Reload thread after adding message
+                    thread = await threads.getThread(threadId)
+                }
 
-                // Get the updated thread to prepare chat request
-                const thread = await threads.getThread(threadId)
+                isGenerating.value = true
                 const messages = [...thread.messages]
 
                 // Add system prompt if present
@@ -250,7 +256,7 @@ export default {
                 }
 
                 const chatRequest = createChatRequest()
-                chatRequest.model = props.model
+                chatRequest.model = props.model.id
 
                 // Apply user settings
                 applySettings(chatRequest)
@@ -334,6 +340,7 @@ export default {
 
                 // Send to API
                 console.debug('chatRequest', chatRequest)
+                const startTime = Date.now()
                 const response = await ai.post('/v1/chat/completions', {
                     body: JSON.stringify(chatRequest)
                 })
@@ -369,6 +376,7 @@ export default {
                 } else {
                     try {
                         result = await response.json()
+                        console.debug('chatResponse', JSON.stringify(result, null, 2))
                     } catch (e) {
                         errorStatus.value = {
                             errorCode: 'Error',
@@ -388,7 +396,21 @@ export default {
                 if (!errorStatus.value) {
                     // Add assistant response (save entire message including reasoning)
                     const assistantMessage = result.choices?.[0]?.message
-                    await threads.addMessageToThread(threadId, assistantMessage)
+
+                    const usage = result.usage
+                    if (usage) {
+                        if (result.metadata?.pricing) {
+                            const [ input, output ] = result.metadata.pricing.split('/')
+                            usage.duration = result.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 * parseFloat(input) + usage.completion_tokens * parseFloat(output))
+                        }
+                        await threads.logRequest(threadId, props.model, chatRequest, result)
+                    }
+                    await threads.addMessageToThread(threadId, assistantMessage, usage)
 
                     nextTick(addCopyButtons)
 

llms/ui/Main.mjs

@@ -1,7 +1,8 @@
 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 } from './utils.mjs'
+import { storageObject, addCopyButtons, formatCost, statsTitle } from './utils.mjs'
 import { renderMarkdown } from './markdown.mjs'
 import ChatPrompt, { useChatPrompt } from './ChatPrompt.mjs'
 import SignIn from './SignIn.mjs'
@@ -12,6 +13,8 @@ import SystemPromptEditor from './SystemPromptEditor.mjs'
 import { useSettings } from "./SettingsDialog.mjs"
 import Welcome from './Welcome.mjs'
 
+const { humanifyMs, humanifyNumber } = useFormatters()
+
 export default {
     components: {
         ModelSelector,
@@ -140,11 +143,12 @@ export default {
                                 <button
                                     type="button"
                                     @click="copyMessageContent(message)"
-                                    class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-1 rounded hover:bg-black/10 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                    class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-1 rounded hover:bg-black/10 focus:outline-none focus:ring-0"
                                     :class="message.role === 'user' ? 'text-white/70 hover:text-white hover:bg-white/20' : 'text-gray-500 hover:text-gray-700'"
                                     title="Copy message content"
                                 >
-                                    <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <svg v-if="copying === message" class="size-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                                    <svg v-else class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                         <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
                                         <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
                                     </svg>
@@ -170,9 +174,41 @@ export default {
 
                                 <div v-if="message.role !== 'assistant'" class="whitespace-pre-wrap">{{ message.content }}</div>
                                 <div class="mt-2 text-xs opacity-70">
-                                    {{ formatTime(message.timestamp) }}
+                                    <span>{{ formatTime(message.timestamp) }}</span>
+                                    <span v-if="message.usage" :title="tokensTitle(message.usage)">
+                                        &#8226;
+                                        {{ 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>
                                 </div>
                             </div>
+
+                            <!-- Edit and Redo buttons (shown on hover for user messages, outside bubble) -->
+                            <div v-if="message.role === 'user'" class="flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity mt-1">
+                                <button type="button" @click.stop="editMessage(message)"
+                                    class="whitespace-nowrap text-xs px-2 py-1 rounded text-gray-400 hover:text-green-600 hover:bg-green-50 transition-all"
+                                    title="Edit message">
+                                    <svg class="size-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+                                    </svg>
+                                    Edit
+                                </button>
+                                <button type="button" @click.stop="redoMessage(message)"
+                                    class="whitespace-nowrap text-xs px-2 py-1 rounded text-gray-400 hover:text-blue-600 hover:bg-blue-50 transition-all"
+                                    title="Redo message (clears all responses after this message and re-runs it)">
+                                    <svg class="size-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                                    </svg>
+                                    Redo
+                                </button>
+                            </div>
+                        </div>
+
+                        <div v-if="currentThread.stats && currentThread.stats.outputTokens" class="text-center text-gray-500 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>
                         </div>
 
                         <!-- Loading indicator -->
@@ -226,6 +262,29 @@ export default {
                         </div>
                     </div>
                 </div>
+
+                <!-- Edit message modal -->
+                <div v-if="editingMessageId" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+                    <div class="relative bg-white rounded-lg shadow-lg p-6 max-w-2xl w-full mx-4">
+                        <CloseButton @click="cancelEdit" class="" />
+                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Edit Message</h3>
+                        <textarea
+                            v-model="editingMessageContent"
+                            class="w-full h-40 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+                            placeholder="Edit your message..."
+                        ></textarea>
+                        <div class="mt-4 flex gap-2 justify-end">
+                            <button type="button" @click="cancelEdit"
+                                class="px-4 py-2 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50 transition-all">
+                                Cancel
+                            </button>
+                            <button type="button" @click="saveEditedMessage"
+                                class="px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700 transition-all">
+                                Save
+                            </button>
+                        </div>
+                    </div>
+                </div>
             </div>
 
             <!-- Input Area - only show when thread is selected -->
@@ -273,6 +332,10 @@ export default {
         const isExporting = ref(false)
         const isImporting = ref(false)
         const fileInput = ref(null)
+        const copying = ref(null)
+        const editingMessageId = ref(null)
+        const editingMessageContent = ref('')
+        const editingMessage = ref(null)
 
         // Auto-scroll to bottom when new messages arrive
         const scrollToBottom = async () => {
@@ -421,7 +484,7 @@ export default {
                             updatedCount++
                         } else {
                             // Add new thread directly to IndexedDB
-                            await threads.initDB()
+                            //await threads.initDB()
                             const db = await threads.initDB()
                             const tx = db.transaction(['threads'], 'readwrite')
                             await tx.objectStore('threads').add({
@@ -490,6 +553,7 @@ export default {
         // Copy message content to clipboard
         const copyMessageContent = async (message) => {
             try {
+                copying.value = message
                 await navigator.clipboard.writeText(message.content)
                 // Could add a toast notification here if desired
             } catch (err) {
@@ -502,6 +566,129 @@ export default {
                 document.execCommand('copy')
                 document.body.removeChild(textArea)
             }
+            setTimeout(() => { copying.value = null }, 2000)
+        }
+
+        // Redo a user message (clear all messages after it and re-run)
+        const redoMessage = async (message) => {
+            if (!currentThread.value || message.role !== 'user') return
+
+            try {
+                const threadId = currentThread.value.id
+
+                // Clear all messages after this one
+                await threads.redoMessageFromThread(threadId, message.id)
+
+                // Extract the actual message content (remove media indicators if present)
+                let messageContent = message.content
+                // Remove media indicators like [🖼️ filename] or [🔉 filename] or [📎 filename]
+                messageContent = messageContent.replace(/\n\n\[[🖼️🔉📎] [^\]]+\]$/, '')
+
+                // Set the message text in the chat prompt
+                chatPrompt.messageText.value = messageContent
+
+                // Clear any attached files since we're re-running
+                chatPrompt.attachedFiles.value = []
+
+                // Trigger send by simulating the send action
+                // We'll use a small delay to ensure the UI updates
+                await nextTick()
+
+                // Find the send button and click it
+                const sendButton = document.querySelector('button[title*="Send"]')
+                if (sendButton && !sendButton.disabled) {
+                    sendButton.click()
+                }
+            } catch (error) {
+                console.error('Failed to redo message:', error)
+                errorStatus.value = {
+                    errorCode: 'Error',
+                    message: 'Failed to redo message: ' + error.message,
+                    stackTrace: null
+                }
+            }
+        }
+
+        // Edit a user message
+        const editMessage = (message) => {
+            if (!currentThread.value || message.role !== 'user') return
+
+            editingMessage.value = message
+            editingMessageId.value = message.id
+            // Extract the actual message content (remove media indicators if present)
+            let messageContent = message.content
+            messageContent = messageContent.replace(/\n\n\[[🖼️🔉📎] [^\]]+\]$/, '')
+            editingMessageContent.value = messageContent
+        }
+
+        // Save edited message
+        const saveEditedMessage = async () => {
+            if (!currentThread.value || !editingMessage.value || !editingMessageContent.value.trim()) return
+
+            try {
+                const threadId = currentThread.value.id
+                const messageId = editingMessage.value.id
+                const updatedContent = editingMessageContent.value
+
+                // Update the message content
+                editingMessage.value.content = updatedContent
+                await threads.updateMessageInThread(threadId, messageId, { content: updatedContent })
+
+                // Clear editing state
+                editingMessageId.value = null
+                editingMessageContent.value = ''
+                editingMessage.value = null
+
+                // Now redo the message (clear all responses after it and re-run)
+                await nextTick()
+                await threads.redoMessageFromThread(threadId, messageId)
+
+                // Set the message text in the chat prompt
+                chatPrompt.messageText.value = updatedContent
+
+                // Clear any attached files since we're re-running
+                chatPrompt.attachedFiles.value = []
+
+                // Trigger send by simulating the send action
+                await nextTick()
+
+                // Find the send button and click it
+                const sendButton = document.querySelector('button[title*="Send"]')
+                if (sendButton && !sendButton.disabled) {
+                    sendButton.click()
+                }
+            } catch (error) {
+                console.error('Failed to save edited message:', error)
+                errorStatus.value = {
+                    errorCode: 'Error',
+                    message: 'Failed to save edited message: ' + error.message,
+                    stackTrace: null
+                }
+            }
+        }
+
+        // Cancel editing
+        const cancelEdit = () => {
+            editingMessageId.value = null
+            editingMessageContent.value = ''
+            editingMessage.value = null
+        }
+
+        function tokensTitle(usage) {
+            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`
+                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)
         }
 
         onMounted(() => {
@@ -522,12 +709,20 @@ export default {
             showSystemPrompt,
             messagesContainer,
             errorStatus,
+            copying,
+            editingMessageId,
+            editingMessageContent,
+            editingMessage,
             formatTime,
             renderMarkdown,
             isReasoningExpanded,
             toggleReasoning,
             formatReasoning,
             copyMessageContent,
+            redoMessage,
+            editMessage,
+            saveEditedMessage,
+            cancelEdit,
             configUpdated,
             exportThreads,
             isExporting,
@@ -535,6 +730,11 @@ export default {
             handleFileImport,
             isImporting,
             fileInput,
+            tokensTitle,
+            humanifyMs,
+            humanifyNumber,
+            formatCost,
+            statsTitle,
         }
     }
 }

llms/ui/ModelSelector.mjs

@@ -1,8 +1,11 @@
-import ProviderStatus from "./ProviderStatus.mjs";
+import ProviderStatus from "./ProviderStatus.mjs"
+import ProviderIcon from "./ProviderIcon.mjs"
+import { useFormatters } from "@servicestack/vue"
 
 export default {
     components: {
         ProviderStatus,
+        ProviderIcon,
     },
     template:`
         <!-- Model Selector -->
@@ -10,10 +13,26 @@ export default {
             <Autocomplete id="model" :options="models" label=""
                 :modelValue="modelValue" @update:modelValue="$emit('update:modelValue', $event)"
                 class="w-72 xl:w-84"
-                :match="(x, value) => x.toLowerCase().includes(value.toLowerCase())"
+                :match="(x, value) => x.id.toLowerCase().includes(value.toLowerCase())"
                 placeholder="Select Model...">
-                <template #item="{ value }">
-                    <div class="truncate max-w-72" :title="value">{{value}}</div>
+                <template #item="{ id, provider, provider_model, pricing }">
+                    <div :key="id + provider + provider_model" class="group truncate max-w-72 flex justify-between">
+                        <span :title="id">{{id}}</span>
+                        <span class="flex items-center space-x-1">
+                            <span v-if="pricing && (parseFloat(pricing.input) == 0 && parseFloat(pricing.input) == 0)">
+                                <span class="text-xs text-gray-500" title="Free to use">FREE</span>                            
+                            </span>
+                            <span v-else-if="pricing" class="text-xs text-gray-500" 
+                                :title="'Estimated Cost per token: ' + pricing.input + ' input | ' + pricing.output + ' output'">
+                              {{tokenPrice(pricing.input)}}
+                              &#183;
+                              {{tokenPrice(pricing.output)}} M
+                            </span>
+                            <span :title="provider_model + ' from ' + provider">    
+                                <ProviderIcon :provider="provider" />
+                            </span>
+                        </span>
+                    </div>
                 </template>
             </Autocomplete>
             <ProviderStatus @updated="$emit('updated', $event)" />
@@ -25,5 +44,17 @@ export default {
         modelValue: String,
     },
     setup() {
+
+        const numFmt = new Intl.NumberFormat(undefined,{style:'currency',currency:'USD'})
+        
+        function tokenPrice(price) {
+            if (!price) return ''
+            var ret = numFmt.format(parseFloat(price) * 1_000_000)
+            return ret.endsWith('.00') ? ret.slice(0, -3) : ret
+        }
+
+        return {
+            tokenPrice
+        }
     }
 }

llms/ui/ProviderIcon.mjs

@@ -0,0 +1,29 @@
+export default {
+    template:`
+        <svg v-if="matches(['openrouter'])" class="size-5" xmlns="http://www.w3.org/2000/svg" fill="#71717A" fill-rule="evenodd" viewBox="0 0 24 24"><path d="M16.804 1.957l7.22 4.105v.087L16.73 10.21l.017-2.117-.821-.03c-1.059-.028-1.611.002-2.268.11-1.064.175-2.038.577-3.147 1.352L8.345 11.03c-.284.195-.495.336-.68.455l-.515.322-.397.234.385.23.53.338c.476.314 1.17.796 2.701 1.866 1.11.775 2.083 1.177 3.147 1.352l.3.045c.694.091 1.375.094 2.825.033l.022-2.159 7.22 4.105v.087L16.589 22l.014-1.862-.635.022c-1.386.042-2.137.002-3.138-.162-1.694-.28-3.26-.926-4.881-2.059l-2.158-1.5a21.997 21.997 0 00-.755-.498l-.467-.28a55.927 55.927 0 00-.76-.43C2.908 14.73.563 14.116 0 14.116V9.888l.14.004c.564-.007 2.91-.622 3.809-1.124l1.016-.58.438-.274c.428-.28 1.072-.726 2.686-1.853 1.621-1.133 3.186-1.78 4.881-2.059 1.152-.19 1.974-.213 3.814-.138l.02-1.907z"></path></svg>
+        <svg v-else-if="matches(['anthropic','claude','haiku'])" class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M16.765 5h-3.308l5.923 15h3.23zM7.226 5L1.38 20h3.308l1.307-3.154h6.154l1.23 3.077h3.309L10.688 5zm-.308 9.077l2-5.308l2.077 5.308z"/></svg>
+        <svg v-else-if="matches(['google','gemini'])" class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="M3 12a9 9 0 0 0 9-9a9 9 0 0 0 9 9a9 9 0 0 0-9 9a9 9 0 0 0-9-9Z"/></svg>
+        <svg v-else-if="matches(['grok','xai'])" class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" fill-rule="evenodd"><path d="M6.469 8.776L16.512 23h-4.464L2.005 8.776H6.47zm-.004 7.9l2.233 3.164L6.467 23H2l4.465-6.324zM22 2.582V23h-3.659V7.764L22 2.582zM22 1l-9.952 14.095-2.233-3.163L17.533 1H22z"></path></svg>
+        <svg v-else-if="matches(['zai','glm'])" class="size-5" xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" viewBox="0 0 24 24"><title>Z.ai</title><path d="M12.105 2L9.927 4.953H.653L2.83 2h9.276zM23.254 19.048L21.078 22h-9.242l2.174-2.952h9.244zM24 2L9.264 22H0L14.736 2H24z"></path></svg>
+        <svg v-else-if="matches(['qwen'])" class="size-5" 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="1.5"><path d="M9 2h3.5L14 4.5h5.13L20.5 7m1.5 7.5l-1.645 2.663h-2.477L15 22h-3.217M5 20l-1.5-2.5l1-3l-2.5-5L4 7"/><path d="m19.19 9.662l1.31-2.661H10l1-2l-2-3l-2.251 5H4l5 10H6l-1 3h5.5l1.252 2l5.65-9.935L18.94 14.5H22z"/><path d="M12 15.5L9 10h6z"/></g></svg>
+        <svg v-else-if="matches(['mistral','codestral'])" class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 233"><path d="M186.182 0h46.545v46.545h-46.545z"/><path fill="#f7d046" d="M209.455 0H256v46.545h-46.545z"/><path d="M0 0h46.545v46.545H0zm0 46.545h46.545V93.09H0zm0 46.546h46.545v46.545H0zm0 46.545h46.545v46.545H0zm0 46.546h46.545v46.545H0z"/><path fill="#f7d046" d="M23.273 0h46.545v46.545H23.273z"/><path fill="#f2a73b" d="M209.455 46.545H256V93.09h-46.545zm-186.182 0h46.545V93.09H23.273z"/><path d="M139.636 46.545h46.545V93.09h-46.545z"/><path fill="#f2a73b" d="M162.909 46.545h46.545V93.09h-46.545zm-93.091 0h46.545V93.09H69.818z"/><path fill="#ee792f" d="M116.364 93.091h46.545v46.545h-46.545zm46.545 0h46.545v46.545h-46.545zm-93.091 0h46.545v46.545H69.818z"/><path d="M93.091 139.636h46.545v46.545H93.091z"/><path fill="#eb5829" d="M116.364 139.636h46.545v46.545h-46.545z"/><path fill="#ee792f" d="M209.455 93.091H256v46.545h-46.545zm-186.182 0h46.545v46.545H23.273z"/><path d="M186.182 139.636h46.545v46.545h-46.545z"/><path fill="#eb5829" d="M209.455 139.636H256v46.545h-46.545z"/><path d="M186.182 186.182h46.545v46.545h-46.545z"/><path fill="#eb5829" d="M23.273 139.636h46.545v46.545H23.273z"/><path fill="#ea3326" d="M209.455 186.182H256v46.545h-46.545zm-186.182 0h46.545v46.545H23.273z"/></svg>
+        <svg v-else-if="matches(['groq'])" class="size-5" xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" viewBox="0 0 24 24"><path d="M12.036 2c-3.853-.035-7 3-7.036 6.781-.035 3.782 3.055 6.872 6.908 6.907h2.42v-2.566h-2.292c-2.407.028-4.38-1.866-4.408-4.23-.029-2.362 1.901-4.298 4.308-4.326h.1c2.407 0 4.358 1.915 4.365 4.278v6.305c0 2.342-1.944 4.25-4.323 4.279a4.375 4.375 0 01-3.033-1.252l-1.851 1.818A7 7 0 0012.029 22h.092c3.803-.056 6.858-3.083 6.879-6.816v-6.5C18.907 4.963 15.817 2 12.036 2z"></path></svg>
+        <svg v-else-if="matches(['llama'])" class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" fill-rule="evenodd">
+            <path d="M7.905 1.09c.216.085.411.225.588.41.295.306.544.744.734 1.263.191.522.315 1.1.362 1.68a5.054 5.054 0 012.049-.636l.051-.004c.87-.07 1.73.087 2.48.474.101.053.2.11.297.17.05-.569.172-1.134.36-1.644.19-.52.439-.957.733-1.264a1.67 1.67 0 01.589-.41c.257-.1.53-.118.796-.042.401.114.745.368 1.016.737.248.337.434.769.561 1.287.23.934.27 2.163.115 3.645l.053.04.026.019c.757.576 1.284 1.397 1.563 2.35.435 1.487.216 3.155-.534 4.088l-.018.021.002.003c.417.762.67 1.567.724 2.4l.002.03c.064 1.065-.2 2.137-.814 3.19l-.007.01.01.024c.472 1.157.62 2.322.438 3.486l-.006.039a.651.651 0 01-.747.536.648.648 0 01-.54-.742c.167-1.033.01-2.069-.48-3.123a.643.643 0 01.04-.617l.004-.006c.604-.924.854-1.83.8-2.72-.046-.779-.325-1.544-.8-2.273a.644.644 0 01.18-.886l.009-.006c.243-.159.467-.565.58-1.12a4.229 4.229 0 00-.095-1.974c-.205-.7-.58-1.284-1.105-1.683-.595-.454-1.383-.673-2.38-.61a.653.653 0 01-.632-.371c-.314-.665-.772-1.141-1.343-1.436a3.288 3.288 0 00-1.772-.332c-1.245.099-2.343.801-2.67 1.686a.652.652 0 01-.61.425c-1.067.002-1.893.252-2.497.703-.522.39-.878.935-1.066 1.588a4.07 4.07 0 00-.068 1.886c.112.558.331 1.02.582 1.269l.008.007c.212.207.257.53.109.785-.36.622-.629 1.549-.673 2.44-.05 1.018.186 1.902.719 2.536l.016.019a.643.643 0 01.095.69c-.576 1.236-.753 2.252-.562 3.052a.652.652 0 01-1.269.298c-.243-1.018-.078-2.184.473-3.498l.014-.035-.008-.012a4.339 4.339 0 01-.598-1.309l-.005-.019a5.764 5.764 0 01-.177-1.785c.044-.91.278-1.842.622-2.59l.012-.026-.002-.002c-.293-.418-.51-.953-.63-1.545l-.005-.024a5.352 5.352 0 01.093-2.49c.262-.915.777-1.701 1.536-2.269.06-.045.123-.09.186-.132-.159-1.493-.119-2.73.112-3.67.127-.518.314-.95.562-1.287.27-.368.614-.622 1.015-.737.266-.076.54-.059.797.042zm4.116 9.09c.936 0 1.8.313 2.446.855.63.527 1.005 1.235 1.005 1.94 0 .888-.406 1.58-1.133 2.022-.62.375-1.451.557-2.403.557-1.009 0-1.871-.259-2.493-.734-.617-.47-.963-1.13-.963-1.845 0-.707.398-1.417 1.056-1.946.668-.537 1.55-.849 2.485-.849zm0 .896a3.07 3.07 0 00-1.916.65c-.461.37-.722.835-.722 1.25 0 .428.21.829.61 1.134.455.347 1.124.548 1.943.548.799 0 1.473-.147 1.932-.426.463-.28.7-.686.7-1.257 0-.423-.246-.89-.683-1.256-.484-.405-1.14-.643-1.864-.643zm.662 1.21l.004.004c.12.151.095.37-.056.49l-.292.23v.446a.375.375 0 01-.376.373.375.375 0 01-.376-.373v-.46l-.271-.218a.347.347 0 01-.052-.49.353.353 0 01.494-.051l.215.172.22-.174a.353.353 0 01.49.051zm-5.04-1.919c.478 0 .867.39.867.871a.87.87 0 01-.868.871.87.87 0 01-.867-.87.87.87 0 01.867-.872zm8.706 0c.48 0 .868.39.868.871a.87.87 0 01-.868.871.87.87 0 01-.867-.87.87.87 0 01.867-.872zM7.44 2.3l-.003.002a.659.659 0 00-.285.238l-.005.006c-.138.189-.258.467-.348.832-.17.692-.216 1.631-.124 2.782.43-.128.899-.208 1.404-.237l.01-.001.019-.034c.046-.082.095-.161.148-.239.123-.771.022-1.692-.253-2.444-.134-.364-.297-.65-.453-.813a.628.628 0 00-.107-.09L7.44 2.3zm9.174.04l-.002.001a.628.628 0 00-.107.09c-.156.163-.32.45-.453.814-.29.794-.387 1.776-.23 2.572l.058.097.008.014h.03a5.184 5.184 0 011.466.212c.086-1.124.038-2.043-.128-2.722-.09-.365-.21-.643-.349-.832l-.004-.006a.659.659 0 00-.285-.239h-.004z"></path>
+        </svg>
+        <svg v-else class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linejoin="round" d="M12.019 16.225L8.35 14.13m3.669 2.096l3.65-2.129m-3.65 2.13L9.183 17.88l-5.196-3a5 5 0 0 1-.714-.498m5.077-.252L5.5 12.5v-6q0-.444.075-.867m2.775 8.496l-.018-4.225m5.97-6.652a5.001 5.001 0 0 0-8.727 2.38m8.727-2.38a5 5 0 0 0-.789.369l-5.196 3l.015 3.283m5.97-6.652a5.001 5.001 0 0 1 6.425 6.367M5.575 5.633a5.001 5.001 0 0 0-2.302 8.748m8.708-6.606l3.669 2.096m-3.67-2.096L8.33 9.904m3.65-2.129l2.836-1.654l5.196 3q.384.223.714.498m-5.077.252L18.5 11.5v6q0 .444-.075.867M15.65 9.871l.018 4.225m-5.97 6.652a5.001 5.001 0 0 0 8.727-2.38m-8.727 2.38a5 5 0 0 0 .789-.369l5.196-3l-.015-3.283m-5.97 6.652a5.001 5.001 0 0 1-6.425-6.367m15.152 3.986a5.001 5.001 0 0 0 2.302-8.748" stroke-width="1"/></svg>
+    `,
+    props: {
+        provider: String,
+    },
+    setup(props) {
+        function matches(providers) {
+            if (!props.provider) return false
+            const providerLower = props.provider.toLowerCase().replace(/[\s-.]+/g, '')
+            return providers.some(provider => providerLower.includes(provider))
+        }
+        return {
+            matches
+        }
+    }
+}