llms-py 3.0.0b6__py3-none-any.whl → 3.0.0b8__py3-none-any.whl

llms/ui/markdown.mjs

@@ -1,7 +1,7 @@
 import { Marked } from "marked"
 import hljs from "highlight.js"
 
-export const marked = (() => {
+export function createMarked() {
     const aliases = {
         vue: 'html',
     }
@@ -21,7 +21,9 @@ export const marked = (() => {
     ret.use({ extensions: [thinkTag()] })
     //ret.use({ extensions: [divExtension()] })
     return ret
-})();
+}
+
+export const marked = createMarked();
 
 export function renderMarkdown(content) {
     if (Array.isArray(content)) {

llms/ui/modules/chat/ChatBody.mjs

@@ -1,7 +1,29 @@
 import { ref, computed, nextTick, watch, onMounted, onUnmounted, inject } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 
+const MessageUsage = {
+    template: `
+    <div class="mt-2 text-xs opacity-70">                                        
+        <span v-if="message.model" @click="$chat.setSelectedModel({ name: message.model })" title="Select model"><span class="cursor-pointer hover:underline">{{ message.model }}</span> &#8226; </span>
+        <span>{{ $fmt.time(message.timestamp) }}</span>
+        <span v-if="usage" :title="$fmt.tokensTitle(usage)">
+            &#8226;
+            {{ $fmt.humanifyNumber(usage.tokens) }} tokens
+            <span v-if="usage.cost">&#183; {{ $fmt.tokenCostLong(usage.cost) }}</span>
+            <span v-if="usage.duration"> in {{ $fmt.humanifyMs(usage.duration) }}</span>
+        </span>
+    </div>    
+    `,
+    props: {
+        usage: Object,
+        message: Object,
+    }
+}
+
 export default {
+    components: {
+        MessageUsage,
+    },
     template: `
         <div class="flex flex-col h-full">
             <!-- Messages Area -->
@@ -14,62 +36,11 @@ export default {
                     <!-- Welcome message when no thread is selected -->
                     <div v-else-if="!currentThread" class="text-center py-12">
                         <Welcome />
-
-                        <!-- Chat input for new conversation -->
-                        <!-- Moved to bottom input area -->
-                        <div class="h-2"></div>
-
-                        <!-- Export/Import buttons -->
-                        <div class="mt-2 flex space-x-3 justify-center items-center">
-                            <button type="button"
-                                @click="(e) => e.altKey ? exportRequests() : exportThreads()"
-                                :disabled="isExporting"
-                                :title="'Export ' + threads?.threads?.value?.length + ' conversations'"
-                                class="inline-flex items-center px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
-                            >
-                                <svg v-if="!isExporting" class="size-5 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                                    <path fill="currentColor" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"></path>
-                                </svg>
-                                <svg v-else class="size-5 mr-1 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>
-                                {{ isExporting ? 'Exporting...' : 'Export' }}
-                            </button>
-
-                            <button type="button"
-                                @click="triggerImport"
-                                :disabled="isImporting"
-                                title="Import conversations from JSON file"
-                                class="inline-flex items-center px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
-                            >
-                                <svg v-if="!isImporting" class="size-5 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                                    <path fill="currentColor" d="m14 12l-4-4v3H2v2h8v3m10 2V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v3h2V6h12v12H6v-3H4v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2"/>
-                                </svg>
-                                <svg v-else class="size-5 mr-1 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>
-                                {{ isImporting ? 'Importing...' : 'Import' }}
-                            </button>
-
-                            <!-- Hidden file input for import -->
-                            <input
-                                ref="fileInput"
-                                type="file"
-                                accept=".json"
-                                @change="handleFileImport"
-                                class="hidden"
-                            />
-
-                            <DarkModeToggle />
-
-                        </div>
-
+                        <HomeTools />
                     </div>
 
                     <!-- Messages -->
-                    <div v-else class="space-y-2">
+                    <div v-else-if="currentThread?.messages?.length" class="space-y-2">
                         <div v-if="currentThread?.messages.length && currentThread?.model" class="flex items-center justify-center select-none">
                             <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">
@@ -78,7 +49,7 @@ export default {
                             </span>
                         </div>
                         <div
-                            v-for="message in currentThread.messages"
+                            v-for="message in currentThread.messages.filter(x => x.role !== 'system')"
                             :key="message.id"
                             v-show="!(message.role === 'tool' && isToolLinked(message))"
                             class="flex items-start space-x-3 group"
@@ -101,7 +72,7 @@ export default {
                                 </div>
 
                                 <!-- Delete button (shown on hover) -->
-                                <button type="button" @click.stop="threads.deleteMessageFromThread(currentThread.id, message.id)"
+                                <button type="button" @click.stop="$threads.deleteMessageFromThread(currentThread.id, message.id)"
                                     class="mx-auto opacity-0 group-hover:opacity-100 mt-2 rounded text-gray-400 dark:text-gray-500 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 transition-all"
                                     title="Delete message">
                                     <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -228,6 +199,15 @@ export default {
                                     </template>
                                 </div>
 
+                                <!-- Assistant Audios -->
+                                <div v-if="message.audios && message.audios.length > 0" class="mt-2 flex flex-wrap gap-2">
+                                    <template v-for="(audio, i) in message.audios" :key="i">
+                                        <div v-if="audio.type === 'audio_url'" 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">
+                                            <audio controls :src="resolveUrl(audio.audio_url.url)" class="h-8 w-64"></audio>
+                                        </div>
+                                    </template>
+                                </div>
+
                                 <!-- User Message with separate attachments -->
                                 <div v-else-if="message.role !== 'assistant' && message.role !== 'tool'">
                                     <div v-html="$fmt.markdown(message.content)" class="prose prose-sm max-w-none dark:prose-invert break-words"></div>
@@ -254,16 +234,7 @@ export default {
                                     </div>
                                 </div>
 
-                                <div class="mt-2 text-xs opacity-70">                                        
-                                    <span v-if="message.model" @click="$chat.setSelectedModel({ name: message.model })" title="Select model"><span class="cursor-pointer hover:underline">{{ message.model }}</span> &#8226; </span>
-                                    <span>{{ $fmt.time(message.timestamp) }}</span>
-                                    <span v-if="message.usage" :title="tokensTitle(message.usage)">
-                                        &#8226;
-                                        {{ $fmt.humanifyNumber(message.usage.tokens) }} tokens
-                                        <span v-if="message.usage.cost">&#183; {{ message.usage.cost }}</span>
-                                        <span v-if="message.usage.duration"> in {{ $fmt.humanifyMs(message.usage.duration) }}</span>
-                                    </span>
-                                </div>
+                                <MessageUsage :message="message" :usage="getMessageUsage(message)" />
                             </div>
 
                             <!-- Edit and Redo buttons (shown on hover for user messages, outside bubble) -->
@@ -294,7 +265,7 @@ export default {
                         </div>
 
                         <!-- Loading indicator -->
-                        <div v-if="isGenerating" class="flex items-start space-x-3 group">
+                        <div v-if="$threads.watchingThread" class="flex items-start space-x-3 group">
                             <!-- Avatar outside the bubble -->
                             <div class="flex-shrink-0">
                                 <div class="w-8 h-8 rounded-full bg-gray-600 dark:bg-gray-500 text-white flex items-center justify-center text-sm font-medium">
@@ -312,18 +283,36 @@ export default {
                             </div>
 
                             <!-- Cancel button -->
-                            <button type="button" @click="cancelRequest"
+                            <button type="button" @click="$threads.cancelThread()"
                                 class="px-3 py-1 rounded text-sm text-gray-400 dark:text-gray-500 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 border border-transparent hover:border-red-300 dark:hover:border-red-600 transition-all"
                                 title="Cancel request">
                                 cancel
                             </button>
                         </div>
 
+                        <!-- Thread error message bubble -->
+                        <div v-if="currentThread?.error" class="mt-8 flex items-center space-x-3">
+                            <!-- Avatar outside the bubble -->
+                            <div class="flex-shrink-0">
+                                <div class="size-8 rounded-full bg-red-600 dark:bg-red-500 text-white flex items-center justify-center text-lg font-bold">
+                                    !
+                                </div>
+                            </div>
+                            <!-- Error bubble -->
+                            <div class="max-w-[85%] rounded-lg px-3 py-1 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 shadow-sm">
+                                <div class="flex items-start space-x-2">
+                                    <div class="flex-1 min-w-0">
+                                        <div v-if="currentThread.error" class="text-base mb-1">{{ currentThread.error }}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
                         <!-- Error message bubble -->
-                        <div v-if="errorStatus" class="flex items-start space-x-3">
+                        <div v-if="$state.error" class="mt-8 flex items-start space-x-3">
                             <!-- Avatar outside the bubble -->
                             <div class="flex-shrink-0">
-                                <div class="w-8 h-8 rounded-full bg-red-600 dark:bg-red-500 text-white flex items-center justify-center text-sm font-medium">
+                                <div class="size-8 rounded-full bg-red-600 dark:bg-red-500 text-white flex items-center justify-center text-lg font-bold">
                                     !
                                 </div>
                             </div>
@@ -332,20 +321,20 @@ export default {
                             <div class="max-w-[85%] rounded-lg px-4 py-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 shadow-sm">
                                 <div class="flex items-start space-x-2">
                                     <div class="flex-1 min-w-0">
-                                        <div class="text-base font-medium mb-1">{{ errorStatus?.errorCode || 'Error' }}</div>
-                                        <div v-if="errorStatus?.message" class="text-base mb-1">{{ errorStatus.message }}</div>
-                                        <div v-if="errorStatus?.stackTrace" class="text-sm whitespace-pre-wrap break-words max-h-80 overflow-y-auto font-mono p-2 rounded bg-red-100 dark:bg-red-950/50">
-                                            {{ errorStatus.stackTrace }}
+                                        <div class="flex justify-between items-start">
+                                            <div class="text-base font-medium mb-1">{{ $state.error?.errorCode || 'Error' }}</div>
+                                            <button type="button" @click="$ctx.clearError()" title="Clear Error"
+                                                class="text-red-400 dark:text-red-300 hover:text-red-600 dark:hover:text-red-100 flex-shrink-0">
+                                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                                                </svg>
+                                            </button>
+                                        </div>
+                                        <div v-if="$state.error?.message" class="text-base mb-1">{{ $state.error.message }}</div>
+                                        <div v-if="$state.error?.stackTrace" class="mt-2 text-sm whitespace-pre-wrap break-words max-h-80 overflow-y-auto font-mono p-2 border border-red-200/70 dark:border-red-800/70">
+                                            {{ $state.error.stackTrace }}
                                         </div>
                                     </div>
-                                    <button type="button"
-                                        @click="errorStatus = null"
-                                        class="text-red-400 dark:text-red-300 hover:text-red-600 dark:hover:text-red-100 flex-shrink-0"
-                                    >
-                                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                                            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
-                                        </svg>
-                                    </button>
                                 </div>
                             </div>
                         </div>
@@ -355,7 +344,7 @@ export default {
             </div>
 
             <!-- Input Area -->
-            <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">
+            <div v-if="$ai.hasAccess" :class="$ctx.cls('chat-input', '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>
             
@@ -382,7 +371,6 @@ export default {
         const threads = ctx.threads
         const chatPrompt = ctx.chat
         const { currentThread } = threads
-        const { errorStatus, isGenerating } = ctx.chat
 
         const router = useRouter()
         const route = useRoute()
@@ -395,9 +383,6 @@ export default {
             return models.find(m => m.name === selectedModel.value) || models.find(m => m.id === selectedModel.value)
         })
         const messagesContainer = ref(null)
-        const isExporting = ref(false)
-        const isImporting = ref(false)
-        const fileInput = ref(null)
         const copying = ref(null)
         const lightboxUrl = ref(null)
 
@@ -428,12 +413,9 @@ export default {
 
         // Watch for route changes and load the appropriate thread
         watch(() => route.params.id, async (newId) => {
-            const thread = await threads.setCurrentThreadFromRoute(newId, router)
-
-            // If the selected thread specifies a model and it's available, switch to it
-            if (thread?.model && Array.isArray(models) && models.includes(thread.model)) {
-                selectedModel.value = thread.model
-            }
+            // console.debug('watch route.params.id', newId)
+            ctx.clearError()
+            threads.setCurrentThreadFromRoute(newId, router)
 
             if (!newId) {
                 chatPrompt.reset()
@@ -446,191 +428,6 @@ export default {
                 model: selectedModel.value,
             })
         })
-
-        async function exportThreads() {
-            if (isExporting.value) return
-
-            isExporting.value = true
-            try {
-                // Load all threads from IndexedDB
-                await threads.loadThreads()
-                const allThreads = threads.threads.value
-
-                // Create export data with metadata
-                const exportData = {
-                    exportedAt: new Date().toISOString(),
-                    version: '1.0',
-                    source: 'llmspy',
-                    threadCount: allThreads.length,
-                    threads: allThreads
-                }
-
-                // Create and download JSON file
-                const jsonString = JSON.stringify(exportData, null, 2)
-                const blob = new Blob([jsonString], { type: 'application/json' })
-                const url = URL.createObjectURL(blob)
-
-                const link = document.createElement('a')
-                link.href = url
-                link.download = `llmsthreads-export-${new Date().toISOString().split('T')[0]}.json`
-                document.body.appendChild(link)
-                link.click()
-                document.body.removeChild(link)
-                URL.revokeObjectURL(url)
-
-            } catch (error) {
-                console.error('Failed to export threads:', error)
-                alert('Failed to export threads: ' + error.message)
-            } finally {
-                isExporting.value = false
-            }
-        }
-
-        async function exportRequests() {
-            if (isExporting.value) return
-
-            isExporting.value = true
-            try {
-                // Load all threads from IndexedDB
-                const allRequests = await threads.getAllRequests()
-
-                // Create export data with metadata
-                const exportData = {
-                    exportedAt: new Date().toISOString(),
-                    version: '1.0',
-                    source: 'llmspy',
-                    requestsCount: allRequests.length,
-                    requests: allRequests
-                }
-
-                // Create and download JSON file
-                const jsonString = JSON.stringify(exportData, null, 2)
-                const blob = new Blob([jsonString], { type: 'application/json' })
-                const url = URL.createObjectURL(blob)
-
-                const link = document.createElement('a')
-                link.href = url
-                link.download = `llmsrequests-export-${new Date().toISOString().split('T')[0]}.json`
-                document.body.appendChild(link)
-                link.click()
-                document.body.removeChild(link)
-                URL.revokeObjectURL(url)
-
-            } catch (error) {
-                console.error('Failed to export requests:', error)
-                alert('Failed to export requests: ' + error.message)
-            } finally {
-                isExporting.value = false
-            }
-        }
-
-        function triggerImport() {
-            if (isImporting.value) return
-            fileInput.value?.click()
-        }
-
-        async function handleFileImport(event) {
-            const file = event.target.files?.[0]
-            if (!file) return
-
-            isImporting.value = true
-            var importType = 'threads'
-            try {
-                const text = await file.text()
-                const importData = JSON.parse(text)
-                importType = importData.threads
-                    ? 'threads'
-                    : importData.requests
-                        ? 'requests'
-                        : 'unknown'
-
-                // Import threads one by one
-                let importedCount = 0
-                let existingCount = 0
-
-                const db = await threads.initDB()
-
-                if (importData.threads) {
-                    if (!Array.isArray(importData.threads)) {
-                        throw new Error('Invalid import file: missing or invalid threads array')
-                    }
-
-                    const threadIds = new Set(await threads.getAllThreadIds())
-
-                    for (const threadData of importData.threads) {
-                        if (!threadData.id) {
-                            console.warn('Skipping thread without ID:', threadData)
-                            continue
-                        }
-
-                        try {
-                            // Check if thread already exists
-                            const existingThread = threadIds.has(threadData.id)
-                            if (existingThread) {
-                                existingCount++
-                            } else {
-                                // Add new thread directly to IndexedDB
-                                const tx = db.transaction(['threads'], 'readwrite')
-                                await tx.objectStore('threads').add(threadData)
-                                await tx.complete
-                                importedCount++
-                            }
-                        } catch (error) {
-                            console.error('Failed to import thread:', threadData.id, error)
-                        }
-                    }
-
-                    // Reload threads to reflect changes
-                    await threads.loadThreads()
-
-                    alert(`Import completed!\nNew threads: ${importedCount}\nExisting threads: ${existingCount}`)
-                }
-                if (importData.requests) {
-                    if (!Array.isArray(importData.requests)) {
-                        throw new Error('Invalid import file: missing or invalid requests array')
-                    }
-
-                    const requestIds = new Set(await threads.getAllRequestIds())
-
-                    for (const requestData of importData.requests) {
-                        if (!requestData.id) {
-                            console.warn('Skipping request without ID:', requestData)
-                            continue
-                        }
-
-                        try {
-                            // Check if request already exists
-                            const existingRequest = requestIds.has(requestData.id)
-                            if (existingRequest) {
-                                existingCount++
-                            } else {
-                                // Add new request directly to IndexedDB
-                                const db = await threads.initDB()
-                                const tx = db.transaction(['requests'], 'readwrite')
-                                await tx.objectStore('requests').add(requestData)
-                                await tx.complete
-                                importedCount++
-                            }
-                        } catch (error) {
-                            console.error('Failed to import request:', requestData.id, error)
-                        }
-                    }
-
-                    alert(`Import completed!\nNew requests: ${importedCount}\nExisting requests: ${existingCount}`)
-                }
-
-            } catch (error) {
-                console.error('Failed to import ' + importType + ':', error)
-                alert('Failed to import ' + importType + ': ' + error.message)
-            } finally {
-                isImporting.value = false
-                // Clear the file input
-                if (fileInput.value) {
-                    fileInput.value.value = ''
-                }
-            }
-        }
-
         function configUpdated() {
             console.log('configUpdated', selectedModel.value, models.length, models.includes(selectedModel.value))
             if (selectedModel.value && !models.includes(selectedModel.value)) {
@@ -746,37 +543,18 @@ export default {
         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)
+            const threadId = currentThread.value.id
 
-                const state = await extractMessageState(message)
+            // Clear all messages after this one
+            await threads.redoMessageFromThread(threadId, message.timestamp)
 
-                // Set the message text in the chat prompt
-                chatPrompt.messageText.value = state.text
-
-                // Restore attached files
-                chatPrompt.attachedFiles.value = state.files
+            const state = await extractMessageState(message)
 
-                // Trigger send by simulating the send action
-                // We'll use a small delay to ensure the UI updates
-                await nextTick()
+            // Set the message text in the chat prompt
+            chatPrompt.messageText.value = state.text
 
-                // 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
-                }
-            }
+            // Restore attached files
+            chatPrompt.attachedFiles.value = state.files
         }
 
         // Edit a user message
@@ -787,7 +565,7 @@ export default {
             const state = await extractMessageState(message)
             chatPrompt.messageText.value = state.text
             chatPrompt.attachedFiles.value = state.files
-            chatPrompt.editingMessageId.value = message.id
+            chatPrompt.editingMessage.value = message.timestamp
 
             // Focus the textarea
             nextTick(() => {
@@ -800,23 +578,6 @@ export default {
             })
         }
 
-        // Cancel pending request
-        const cancelRequest = () => {
-            chatPrompt.cancel()
-        }
-
-        function tokensTitle(usage) {
-            let title = []
-            if (usage.tokens && usage.price) {
-                const msg = parseFloat(usage.price) > 0
-                    ? `${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')
-        }
-
         let sub
         onMounted(() => {
             sub = ctx.events.subscribe(`keydown:Escape`, closeLightbox)
@@ -828,6 +589,20 @@ export default {
             return currentThread.value?.messages?.find(m => m.role === 'tool' && m.tool_call_id === toolCallId)
         }
 
+        const getMessageUsage = (message) => {
+            if (message.usage) return message.usage
+            if (message.tool_calls?.length) {
+                const toolUsages = message.tool_calls.map(tc => getToolOutput(tc.id)?.usage)
+                const agg = {
+                    tokens: toolUsages.reduce((a, b) => a + (b?.tokens || 0), 0),
+                    cost: toolUsages.reduce((a, b) => a + (b?.cost || 0), 0),
+                    duration: toolUsages.reduce((a, b) => a + (b?.duration || 0), 0)
+                }
+                return agg
+            }
+            return null
+        }
+
         const isToolLinked = (message) => {
             if (message.role !== 'tool') return false
             return currentThread.value?.messages?.some(m => m.role === 'assistant' && m.tool_calls?.some(tc => tc.id === message.tool_call_id))
@@ -855,6 +630,9 @@ export default {
             if (tag == 'th') {
                 cls += ' lowercase'
             }
+            if (tag == 'td') {
+                cls += ' whitespace-pre-wrap'
+            }
             return cls
         }
 
@@ -868,13 +646,10 @@ export default {
             setPrefs,
             config,
             models,
-            threads,
-            isGenerating,
             currentThread,
             selectedModel,
             selectedModelObj,
             messagesContainer,
-            errorStatus,
             copying,
             isReasoningExpanded,
             toggleReasoning,
@@ -882,22 +657,14 @@ export default {
             copyMessageContent,
             redoMessage,
             editMessage,
-            cancelRequest,
             configUpdated,
-            exportThreads,
-            exportRequests,
-            isExporting,
-            triggerImport,
-            handleFileImport,
-            isImporting,
-            fileInput,
-            tokensTitle,
             getAttachments,
             hasAttachments,
             lightboxUrl,
             openLightbox,
             closeLightbox,
             resolveUrl,
+            getMessageUsage,
             getToolOutput,
             isToolLinked,
             tryParseJson,

llms/ui/modules/chat/HomeTools.mjs

@@ -0,0 +1,12 @@
+import { ref, inject } from 'vue'
+
+export default {
+    template: `
+        <div class="mt-4 flex space-x-3 justify-center items-center">
+            <DarkModeToggle />
+        </div>
+
+    `,
+    setup() {
+    }
+}

llms/ui/modules/chat/SettingsDialog.mjs

@@ -107,7 +107,7 @@ export function useSettings() {
 
 export default {
     template: `
-    <div v-if="isOpen" class="fixed inset-0 z-50 overflow-y-auto" @click.self="close">
+    <div v-if="isOpen" class="fixed inset-0 z-100 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>