llms-py 2.0.25__py3-none-any.whl → 2.0.27__py3-none-any.whl

llms/ui/ChatPrompt.mjs

@@ -50,7 +50,7 @@ export default {
                     <button type="button"
                             @click="triggerFilePicker"
                             :disabled="isGenerating || !model"
-                            class="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"
+                            class="size-8 flex items-center justify-center rounded-md border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:text-gray-400 disabled:cursor-not-allowed"
                             title="Attach image or audio">
                         <svg class="size-5" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256">
                             <path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path>
@@ -64,8 +64,8 @@ export default {
                 <div>
                     <button type="button" title="Settings" @click="showSettings = true"
                         :disabled="isGenerating || !model"
-                        class="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">
-                        <svg class="size-4 text-gray-600 disabled:text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><path d="M40,88H73a32,32,0,0,0,62,0h81a8,8,0,0,0,0-16H135a32,32,0,0,0-62,0H40a8,8,0,0,0,0,16Zm64-24A16,16,0,1,1,88,80,16,16,0,0,1,104,64ZM216,168H199a32,32,0,0,0-62,0H40a8,8,0,0,0,0,16h97a32,32,0,0,0,62,0h17a8,8,0,0,0,0-16Zm-48,24a16,16,0,1,1,16-16A16,16,0,0,1,168,192Z"></path></svg>
+                        class="size-8 flex items-center justify-center rounded-md border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:text-gray-400 disabled:cursor-not-allowed">
+                        <svg class="size-4 text-gray-600 dark:text-gray-400 disabled:text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><path d="M40,88H73a32,32,0,0,0,62,0h81a8,8,0,0,0,0-16H135a32,32,0,0,0-62,0H40a8,8,0,0,0,0,16Zm64-24A16,16,0,1,1,88,80,16,16,0,0,1,104,64ZM216,168H199a32,32,0,0,0-62,0H40a8,8,0,0,0,0,16h97a32,32,0,0,0,62,0h17a8,8,0,0,0,0-16Zm-48,24a16,16,0,1,1,16-16A16,16,0,0,1,168,192Z"></path></svg>
                     </button>
                 </div>
             </div>
@@ -77,15 +77,24 @@ export default {
                         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)"
+                        @paste="onPaste"
+                        @dragover="onDragOver"
+                        @dragleave="onDragLeave"
+                        @drop="onDrop"
+                        placeholder="Type message... (Enter to send, Shift+Enter for new line, drag & drop or paste files)"
                         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"
+                        :class="[
+                            'block w-full rounded-md border px-3 py-2 pr-12 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-900 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-1',
+                            isDragging
+                                ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30 ring-1 ring-blue-500'
+                                : 'border-gray-300 dark:border-gray-600 focus:border-blue-500 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">
+                        class="absolute bottom-2 right-2 size-8 flex items-center justify-center rounded-md border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:text-gray-400 disabled:cursor-not-allowed disabled:border-gray-200 dark:disabled:border-gray-700 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>
@@ -96,15 +105,15 @@ export default {
 
                 <!-- Attached files preview -->
                 <div v-if="attachedFiles.length" class="mt-2 flex flex-wrap gap-2">
-                    <div v-for="(f,i) in attachedFiles" :key="i" class="flex items-center gap-2 px-2 py-1 rounded-md border border-gray-300 text-xs text-gray-700 bg-gray-50">
+                    <div v-for="(f,i) in attachedFiles" :key="i" class="flex items-center gap-2 px-2 py-1 rounded-md border border-gray-300 dark:border-gray-600 text-xs text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-800">
                         <span class="truncate max-w-48" :title="f.name">{{ f.name }}</span>
-                        <button type="button" class="text-gray-500 hover:text-gray-700" @click="removeAttachment(i)" title="Remove Attachment">
+                        <button type="button" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200" @click="removeAttachment(i)" title="Remove Attachment">
                             <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                         </button>
                     </div>
                 </div>
 
-                <div v-if="!model" class="mt-2 text-sm text-red-600">
+                <div v-if="!model" class="mt-2 text-sm text-red-600 dark:text-red-400">
                     Please select a model
                 </div>
             </div>
@@ -169,6 +178,93 @@ export default {
             attachedFiles.value.splice(i, 1)
         }
 
+        // Helper function to add files and set default message
+        const addFilesAndSetMessage = (files) => {
+            if (files.length === 0) return
+
+            attachedFiles.value.push(...files)
+
+            // Set default message text if empty
+            if (!messageText.value.trim()) {
+                if (hasImage()) {
+                    messageText.value = getTextContent(config.defaults.image)
+                } else if (hasAudio()) {
+                    messageText.value = getTextContent(config.defaults.audio)
+                } else {
+                    messageText.value = getTextContent(config.defaults.file)
+                }
+            }
+        }
+
+        // Handle paste events for clipboard images, audio, and files
+        const onPaste = async (e) => {
+            // Use the paste event's clipboardData directly (works best for paste events)
+            const items = e.clipboardData?.items
+            if (!items) return
+
+            const files = []
+
+            // Check all clipboard items
+            for (let i = 0; i < items.length; i++) {
+                const item = items[i]
+
+                // Handle files (images, audio, etc.)
+                if (item.kind === 'file') {
+                    const file = item.getAsFile()
+                    if (file) {
+                        // Generate a better filename based on type
+                        let filename = file.name
+                        if (!filename || filename === 'image.png' || filename === 'blob') {
+                            const ext = file.type.split('/')[1] || 'png'
+                            const timestamp = new Date().getTime()
+                            if (file.type.startsWith('image/')) {
+                                filename = `pasted-image-${timestamp}.${ext}`
+                            } else if (file.type.startsWith('audio/')) {
+                                filename = `pasted-audio-${timestamp}.${ext}`
+                            } else {
+                                filename = `pasted-file-${timestamp}.${ext}`
+                            }
+                            // Create a new File object with the better name
+                            files.push(new File([file], filename, { type: file.type }))
+                        } else {
+                            files.push(file)
+                        }
+                    }
+                }
+            }
+
+            if (files.length > 0) {
+                e.preventDefault()
+                addFilesAndSetMessage(files)
+            }
+        }
+
+        // Handle drag and drop events
+        const isDragging = ref(false)
+
+        const onDragOver = (e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            isDragging.value = true
+        }
+
+        const onDragLeave = (e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            isDragging.value = false
+        }
+
+        const onDrop = (e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            isDragging.value = false
+
+            const files = Array.from(e.dataTransfer?.files || [])
+            if (files.length > 0) {
+                addFilesAndSetMessage(files)
+            }
+        }
+
         function createChatRequest() {
             if (hasImage()) {
                 return deepClone(config.defaults.image)
@@ -433,8 +529,13 @@ export default {
             messageText,
             fileInput,
             showSettings,
+            isDragging,
             triggerFilePicker,
             onFilesSelected,
+            onPaste,
+            onDragOver,
+            onDragLeave,
+            onDrop,
             removeAttachment,
             sendMessage,
             addNewLine,

llms/ui/Main.mjs

@@ -6,6 +6,7 @@ import { storageObject, addCopyButtons, formatCost, statsTitle } from './utils.m
 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'
@@ -22,32 +23,35 @@ export default {
         SystemPromptEditor,
         ChatPrompt,
         SignIn,
+        OAuthSignIn,
         Avatar,
         Welcome,
     },
     template: `
         <div class="flex flex-col h-full w-full">
-            <!-- Header with model and prompt selectors -->
-            <div class="border-b border-gray-200 bg-white px-2 py-2 w-full min-h-16">
+            <!-- Header with model and prompt selectors (hidden when auth required and not authenticated) -->
+            <div v-if="!($ai.requiresAuth && !$ai.auth)" 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 items-center justify-between w-full">
                     <ModelSelector :models="models" v-model="selectedModel" @updated="configUpdated" />
 
                     <div class="flex items-center space-x-2">
-                        <SystemPromptSelector :prompts="prompts" v-model="selectedPrompt" 
+                        <SystemPromptSelector :prompts="prompts" v-model="selectedPrompt"
                             :show="showSystemPrompt" @toggle="showSystemPrompt = !showSystemPrompt" />
                         <Avatar />
+                        <DarkModeToggle />
                     </div>
                 </div>
             </div>
 
-            <SystemPromptEditor v-if="showSystemPrompt" 
+            <SystemPromptEditor v-if="showSystemPrompt && !($ai.requiresAuth && !$ai.auth)"
                 v-model="currentSystemPrompt" :prompts="prompts" :selected="selectedPrompt" />
 
             <!-- 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">
-                        <SignIn @done="$ai.signIn($event)" />
+                        <OAuthSignIn v-if="$ai.authType === 'oauth'" @done="$ai.signIn($event)" />
+                        <SignIn v-else @done="$ai.signIn($event)" />
                     </div>
                     <!-- Welcome message when no thread is selected -->
                     <div v-else-if="!currentThread" class="text-center py-12">
@@ -64,7 +68,7 @@ export default {
                                 @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 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                                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>
@@ -80,7 +84,7 @@ export default {
                                 @click="triggerImport"
                                 :disabled="isImporting"
                                 title="Import conversations from JSON file"
-                                class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                                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"/>
@@ -116,15 +120,15 @@ export default {
                             <div class="flex-shrink-0 flex flex-col justify-center">
                                 <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium"
                                      :class="message.role === 'user'
-                                        ? 'bg-blue-600 text-white'
-                                        : 'bg-gray-600 text-white'"
+                                        ? 'bg-blue-100 dark:bg-blue-900 text-gray-900 dark:text-gray-100 border border-blue-200 dark:border-blue-700'
+                                        : 'bg-gray-600 dark:bg-gray-500 text-white'"
                                 >
                                     {{ message.role === 'user' ? 'U' : 'AI' }}
                                 </div>
 
                                 <!-- Delete button (shown on hover) -->
                                 <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 hover:text-red-600 hover:bg-red-50 transition-all"
+                                    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">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
@@ -136,18 +140,18 @@ export default {
                             <div
                                 class="message rounded-lg px-4 py-3 relative group"
                                 :class="message.role === 'user'
-                                    ? 'bg-blue-600 text-white'
-                                    : 'bg-gray-100 text-gray-900 border border-gray-200'"
+                                    ? 'bg-blue-100 dark:bg-blue-900 text-gray-900 dark:text-gray-100 border border-blue-200 dark:border-blue-700'
+                                    : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700'"
                             >
                                 <!-- Copy button in top right corner -->
                                 <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-0"
-                                    :class="message.role === 'user' ? 'text-white/70 hover:text-white hover:bg-white/20' : 'text-gray-500 hover:text-gray-700'"
+                                    class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-1 rounded hover:bg-black/10 dark:hover:bg-white/10 focus:outline-none focus:ring-0"
+                                    :class="message.role === 'user' ? 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'"
                                     title="Copy message content"
                                 >
-                                    <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-if="copying === message" class="size-4 text-green-500 dark:text-green-400" 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"/>
@@ -157,18 +161,18 @@ export default {
                                 <div
                                     v-if="message.role === 'assistant'"
                                     v-html="renderMarkdown(message.content)"
-                                    class="prose prose-sm max-w-none"
+                                    class="prose prose-sm max-w-none dark:prose-invert"
                                 ></div>
 
                                 <!-- Collapsible reasoning section -->
                                 <div v-if="message.role === 'assistant' && message.reasoning" class="mt-2">
-                                    <button type="button" @click="toggleReasoning(message.id)" class="text-xs text-gray-600 hover:text-gray-800 flex items-center space-x-1">
+                                    <button type="button" @click="toggleReasoning(message.id)" class="text-xs text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 flex items-center space-x-1">
                                         <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" :class="isReasoningExpanded(message.id) ? 'transform rotate-90' : ''"><path fill="currentColor" d="M7 5l6 5l-6 5z"/></svg>
                                         <span>{{ isReasoningExpanded(message.id) ? 'Hide reasoning' : 'Show reasoning' }}</span>
                                     </button>
-                                    <div v-if="isReasoningExpanded(message.id)" class="mt-2 rounded border border-gray-200 bg-gray-50 p-2">
-                                        <div v-if="typeof message.reasoning === 'string'" v-html="renderMarkdown(message.reasoning)" class="prose prose-xs max-w-none"></div>
-                                        <pre v-else class="text-xs whitespace-pre-wrap overflow-x-auto">{{ formatReasoning(message.reasoning) }}</pre>
+                                    <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>
+                                        <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>
 
@@ -187,7 +191,7 @@ export default {
                             <!-- 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"
+                                    class="whitespace-nowrap text-xs px-2 py-1 rounded text-gray-400 dark:text-gray-500 hover:text-green-600 dark:hover:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/30 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>
@@ -195,7 +199,7 @@ export default {
                                     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"
+                                    class="whitespace-nowrap text-xs px-2 py-1 rounded text-gray-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/30 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>
@@ -205,7 +209,7 @@ export default {
                             </div>
                         </div>
 
-                        <div v-if="currentThread.stats && currentThread.stats.outputTokens" class="text-center text-gray-500 text-sm">
+                        <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>
@@ -215,17 +219,17 @@ export default {
                         <div v-if="isGenerating" class="flex items-start space-x-3">
                             <!-- Avatar outside the bubble -->
                             <div class="flex-shrink-0">
-                                <div class="w-8 h-8 rounded-full bg-gray-600 text-white flex items-center justify-center text-sm font-medium">
+                                <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">
                                     AI
                                 </div>
                             </div>
 
                             <!-- Loading bubble -->
-                            <div class="rounded-lg px-4 py-3 bg-gray-100 border border-gray-200">
+                            <div class="rounded-lg px-4 py-3 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
                                 <div class="flex space-x-1">
-                                    <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
-                                    <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
-                                    <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
+                                    <div class="w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce"></div>
+                                    <div class="w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
+                                    <div class="w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
                                 </div>
                             </div>
                         </div>
@@ -234,24 +238,24 @@ export default {
                         <div v-if="errorStatus" class="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 text-white flex items-center justify-center text-sm font-medium">
+                                <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>
                             </div>
 
                             <!-- Error bubble -->
-                            <div class="max-w-[85%] rounded-lg px-4 py-3 bg-red-50 border border-red-200 text-red-800 shadow-sm">
+                            <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">
+                                        <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>
                                     </div>
                                     <button type="button"
                                         @click="errorStatus = null"
-                                        class="text-red-400 hover:text-red-600 flex-shrink-0"
+                                        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>
@@ -265,21 +269,21 @@ export default {
 
                 <!-- 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">
+                    <div class="relative bg-white dark:bg-gray-800 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>
+                        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 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"
+                            class="w-full h-40 px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 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">
+                                class="px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 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">
+                                class="px-4 py-2 rounded-md bg-blue-600 dark:bg-blue-500 text-white hover:bg-blue-700 dark:hover:bg-blue-600 transition-all">
                                 Save
                             </button>
                         </div>
@@ -288,7 +292,7 @@ export default {
             </div>
 
             <!-- Input Area - only show when thread is selected -->
-            <div v-if="currentThread" class="flex-shrink-0 border-t border-gray-200 bg-white px-6 py-4">
+            <div v-if="currentThread" 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="selectedModel" :systemPrompt="currentSystemPrompt" />
             </div>
         </div>

llms/ui/ModelSelector.mjs

@@ -1,6 +1,5 @@
 import ProviderStatus from "./ProviderStatus.mjs"
 import ProviderIcon from "./ProviderIcon.mjs"
-import { useFormatters } from "@servicestack/vue"
 
 export default {
     components: {
@@ -20,15 +19,15 @@ export default {
                         <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 class="text-xs text-gray-500 dark:text-gray-400" title="Free to use">FREE</span>
                             </span>
-                            <span v-else-if="pricing" class="text-xs text-gray-500" 
+                            <span v-else-if="pricing" class="text-xs text-gray-500 dark:text-gray-400"
                                 :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">    
+                            <span :title="provider_model + ' from ' + provider">
                                 <ProviderIcon :provider="provider" />
                             </span>
                         </span>

llms/ui/OAuthSignIn.mjs

@@ -0,0 +1,92 @@
+import { inject, ref, onMounted } from "vue"
+import Welcome from './Welcome.mjs'
+
+export default {
+    components: {
+        Welcome,
+    },
+    template: `
+    <div class="min-h-full -mt-36 flex flex-col justify-center sm:px-6 lg:px-8">
+        <div class="sm:mx-auto sm:w-full sm:max-w-md text-center">
+            <Welcome />
+        </div>
+        <div class="sm:mx-auto sm:w-full sm:max-w-md">
+            <div v-if="errorMessage" class="mb-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 rounded-lg px-4 py-3">
+                <div class="flex items-start space-x-2">
+                    <div class="flex-1">
+                        <div class="text-base font-medium">{{ errorMessage }}</div>
+                    </div>
+                    <button type="button"
+                        @click="errorMessage = 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 class="py-8 px-4 sm:px-10">
+                <div class="space-y-4">
+                    <button
+                        type="button"
+                        @click="signInWithGitHub"
+                        class="w-full inline-flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-base 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-gray-500 transition-colors"
+                    >
+                        <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
+                        </svg>
+                        Sign in with GitHub
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>     
+    `,
+    emits: ['done'],
+    setup(props, { emit }) {
+        const ai = inject('ai')
+        const errorMessage = ref(null)
+        
+        function signInWithGitHub() {
+            // Redirect to GitHub OAuth endpoint
+            window.location.href = '/auth/github'
+        }
+        
+        // Check for session token in URL (after OAuth callback redirect)
+        onMounted(async () => {
+            const urlParams = new URLSearchParams(window.location.search)
+            const sessionToken = urlParams.get('session')
+            
+            if (sessionToken) {
+                try {
+                    // Validate session with server
+                    const response = await ai.get(`/auth/session?session=${sessionToken}`)
+                    
+                    if (response.ok) {
+                        const sessionData = await response.json()
+                        
+                        // Clean up URL
+                        const url = new URL(window.location.href)
+                        url.searchParams.delete('session')
+                        window.history.replaceState({}, '', url.toString())
+                        
+                        // Emit done event with session data
+                        emit('done', sessionData)
+                    } else {
+                        errorMessage.value = 'Failed to validate session'
+                    }
+                } catch (error) {
+                    console.error('Session validation error:', error)
+                    errorMessage.value = 'Failed to validate session'
+                }
+            }
+        })
+        
+        return {
+            signInWithGitHub,
+            errorMessage,
+        }
+    }
+}
+

llms/ui/ProviderStatus.mjs

@@ -3,25 +3,25 @@ import { ref, computed, inject, onMounted, onUnmounted } from "vue"
 export default {
     template:`
         <div v-if="$ai.isAdmin" ref="triggerRef" class="relative" :key="renderKey">
-            <button type="button" @click="togglePopover" 
-                class="mt-1 flex space-x-2 items-center text-sm font-semibold select-none rounded-sm py-2 px-3 border border-transparent hover:bg-gray-50 hover:shadow hover:border-gray-200">
-                <span class="text-gray-600" :title="models.length + ' models from ' + (config.status.enabled||[]).length + ' enabled providers'">{{models.length}}</span>
+            <button type="button" @click="togglePopover"
+                class="mt-1 flex space-x-2 items-center text-sm font-semibold select-none rounded-sm py-2 px-3 border border-transparent hover:bg-gray-50 dark:hover:bg-gray-700 hover:shadow hover:border-gray-200 dark:hover:border-gray-600">
+                <span class="text-gray-600 dark:text-gray-400" :title="models.length + ' models from ' + (config.status.enabled||[]).length + ' enabled providers'">{{models.length}}</span>
                 <div class="cursor-pointer flex items-center" :title="'Enabled:\\n' + (config.status.enabled||[]).map(x => '  ' + x).join('\\n')">
-                    <svg class="size-4 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="currentColor"/></svg>
-                    <span class="text-green-700">{{(config.status.enabled||[]).length}}</span>
+                    <svg class="size-4 text-green-400 dark:text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="currentColor"/></svg>
+                    <span class="text-green-700 dark:text-green-400">{{(config.status.enabled||[]).length}}</span>
                 </div>
                 <div class="cursor-pointer flex items-center" :title="'Disabled:\\n' + (config.status.disabled||[]).map(x => '  ' + x).join('\\n')">
-                    <svg class="size-4 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="currentColor"/></svg>
-                    <span class="text-red-700">{{(config.status.disabled||[]).length}}</span>
+                    <svg class="size-4 text-red-400 dark:text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="currentColor"/></svg>
+                    <span class="text-red-700 dark:text-red-400">{{(config.status.disabled||[]).length}}</span>
                 </div>
             </button>
-            <div v-if="showPopover" ref="popoverRef" class="absolute right-0 mt-2 w-72 max-h-120 overflow-y-auto bg-white border border-gray-200 rounded-md shadow-lg z-10">
-                <div class="divide-y divide-gray-100">
+            <div v-if="showPopover" ref="popoverRef" class="absolute right-0 mt-2 w-72 max-h-120 overflow-y-auto bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg z-10">
+                <div class="divide-y divide-gray-100 dark:divide-gray-700">
                     <div v-for="p in allProviders" :key="p" class="flex items-center justify-between px-3 py-2">
-                        <label :for="'chk_' + p" class="cursor-pointer text-sm text-gray-900 truncate mr-2" :title="p">{{ p }}</label>
+                        <label :for="'chk_' + p" class="cursor-pointer text-sm text-gray-900 dark:text-gray-100 truncate mr-2" :title="p">{{ p }}</label>
                         <div @click="onToggle(p, !isEnabled(p))" class="cursor-pointer group relative inline-flex h-5 w-10 shrink-0 items-center justify-center rounded-full outline-offset-2 outline-green-600 has-focus-visible:outline-2">
-                            <span class="absolute mx-auto h-4 w-9 rounded-full bg-gray-200 inset-ring inset-ring-gray-900/5 transition-colors duration-200 ease-in-out group-has-checked:bg-green-600" />
-                            <span class="absolute left-0 size-5 rounded-full border border-gray-300 bg-white shadow-xs transition-transform duration-200 ease-in-out group-has-checked:translate-x-5" />
+                            <span class="absolute mx-auto h-4 w-9 rounded-full bg-gray-200 dark:bg-gray-700 inset-ring inset-ring-gray-900/5 dark:inset-ring-gray-100/5 transition-colors duration-200 ease-in-out group-has-checked:bg-green-600 dark:group-has-checked:bg-green-500" />
+                            <span class="absolute left-0 size-5 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-200 shadow-xs transition-transform duration-200 ease-in-out group-has-checked:translate-x-5" />
                             <input :id="'chk_' + p" type="checkbox" :checked="isEnabled(p)" class="switch cursor-pointer absolute inset-0 appearance-none focus:outline-hidden" aria-label="Use setting" name="setting" />
                         </div>
                     </div>