llms-py 2.0.18__py3-none-any.whl → 2.0.33__py3-none-any.whl

llms/ui/Avatar.mjs

@@ -1,13 +1,40 @@
-import { computed, inject } from "vue"
+import { computed, inject, ref, onMounted, onUnmounted } from "vue"
 
 export default {
     template:`
-        <div v-if="$ai.auth?.profileUrl" :title="authTitle">
-            <img :src="$ai.auth.profileUrl" class="size-8 rounded-full" />
+        <div v-if="$ai.auth?.profileUrl" class="relative" ref="avatarContainer">
+            <img
+                @click.stop="toggleMenu"
+                :src="$ai.auth.profileUrl"
+                :title="authTitle"
+                class="size-8 rounded-full cursor-pointer hover:ring-2 hover:ring-gray-300"
+            />
+            <div
+                v-if="showMenu"
+                @click.stop
+                class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700"
+            >
+                <div class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">
+                    <div class="font-medium whitespace-nowrap overflow-hidden text-ellipsis">{{ $ai.auth.displayName || $ai.auth.userName }}</div>
+                    <div class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap overflow-hidden text-ellipsis">{{ $ai.auth.email }}</div>
+                </div>
+                <button type="button"
+                    @click="handleLogout"
+                    class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center whitespace-nowrap"
+                >
+                    <svg class="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
+                    </svg>
+                    Sign Out
+                </button>
+            </div>
         </div>
     `,
     setup() {
         const ai = inject('ai')
+        const showMenu = ref(false)
+        const avatarContainer = ref(null)
+
         const authTitle = computed(() => {
             if (!ai.auth) return ''
             const { userId, userName, displayName, bearerToken, roles } = ai.auth
@@ -20,9 +47,39 @@ export default {
             ]
             return sb.filter(x => x).join('\n')
         })
-        
+
+        function toggleMenu() {
+            showMenu.value = !showMenu.value
+        }
+
+        async function handleLogout() {
+            showMenu.value = false
+            await ai.signOut()
+            // Reload the page to show sign-in screen
+            window.location.reload()
+        }
+
+        // Close menu when clicking outside
+        const handleClickOutside = (event) => {
+            if (showMenu.value && avatarContainer.value && !avatarContainer.value.contains(event.target)) {
+                showMenu.value = false
+            }
+        }
+
+        onMounted(() => {
+            document.addEventListener('click', handleClickOutside)
+        })
+
+        onUnmounted(() => {
+            document.removeEventListener('click', handleClickOutside)
+        })
+
         return {
             authTitle,
+            handleLogout,
+            showMenu,
+            toggleMenu,
+            avatarContainer,
         }
     }
 }

llms/ui/Brand.mjs

@@ -1,19 +1,37 @@
 export default {
     template:`
-    <div class="flex-shrink-0 px-4 py-4 border-b border-gray-200 bg-white min-h-16 select-none">
+    <div class="flex-shrink-0 pl-2 pr-4 py-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 min-h-16 select-none">
         <div class="flex items-center justify-between">
-            <button type="button"
-                @click="$emit('home')"
-                class="text-lg font-semibold text-gray-900 hover:text-blue-600 focus:outline-none transition-colors"
-                title="Go back to initial state"
-            >
-                History
-            </button>
+            <div class="flex items-center space-x-2">
+                <button type="button"
+                    @click="$emit('toggle-sidebar')"
+                    class="group relative text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors"
+                    title="Collapse sidebar"
+                >
+                    <div class="relative size-5">
+                        <!-- Default sidebar icon -->
+                        <svg class="absolute inset-0 group-hover:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                            <line x1="9" y1="3" x2="9" y2="21"></line>
+                        </svg>
+                        <!-- Hover state: |← icon -->
+                        <svg class="absolute inset-0 hidden group-hover:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m10.071 4.929l1.414 1.414L6.828 11H16v2H6.828l4.657 4.657l-1.414 1.414L3 12zM18.001 19V5h2v14z"/></svg>
+                    </div>
+                </button>
+
+                <button type="button"
+                    @click="$emit('home')"
+                    class="text-lg font-semibold text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors"
+                    title="Go back to initial state"
+                >
+                    History
+                </button>
+            </div>
 
             <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"
+                    class="text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 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>
@@ -21,7 +39,7 @@ export default {
 
                 <button type="button"
                     @click="$emit('new')"
-                    class="text-gray-900 hover:text-blue-600 focus:outline-none transition-colors"
+                    class="text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 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>
@@ -30,5 +48,5 @@ export default {
         </div>
     </div>
     `,
-    emits:['home','new','analytics'],
+    emits:['home','new','analytics','toggle-sidebar'],
 }

llms/ui/ChatPrompt.mjs

@@ -11,6 +11,7 @@ export function useChatPrompt() {
     const attachedFiles = ref([])
     const isGenerating = ref(false)
     const errorStatus = ref(null)
+    const abortController = ref(null)
     const hasImage = () => attachedFiles.value.some(f => imageExts.includes(lastRightPart(f.name, '.')))
     const hasAudio = () => attachedFiles.value.some(f => audioExts.includes(lastRightPart(f.name, '.')))
     const hasFile = () => attachedFiles.value.length > 0
@@ -21,6 +22,17 @@ export function useChatPrompt() {
         isGenerating.value = false
         attachedFiles.value = []
         messageText.value = ''
+        abortController.value = null
+    }
+
+    function cancel() {
+        // Cancel the pending request
+        if (abortController.value) {
+            abortController.value.abort()
+        }
+        // Reset UI state
+        isGenerating.value = false
+        abortController.value = null
     }
 
     return {
@@ -28,6 +40,7 @@ export function useChatPrompt() {
         attachedFiles,
         errorStatus,
         isGenerating,
+        abortController,
         get generating() {
             return isGenerating.value
         },
@@ -36,6 +49,7 @@ export function useChatPrompt() {
         hasFile,
         // hasText,
         reset,
+        cancel,
     }
 }
 
@@ -50,7 +64,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 +78,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>
@@ -73,38 +87,50 @@ export default {
             <div class="flex-1">
                 <div class="relative">
                     <textarea
-                        ref="messageInput"
+                        ref="refMessage"
                         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"
+                    <button v-if="!isGenerating" 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>
+                        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 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>
+                    <button v-else title="Cancel request" type="button"
+                        @click="cancelRequest"
+                        class="absolute bottom-2 right-2 size-8 flex items-center justify-center rounded-md border border-red-300 dark:border-red-600 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 transition-colors">
+                        <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                         </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">
-                    <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>
@@ -142,6 +168,7 @@ export default {
         } = threads
 
         const fileInput = ref(null)
+        const refMessage = ref(null)
         const showSettings = ref(false)
         const { applySettings } = chatSettings
 
@@ -169,6 +196,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)
@@ -208,6 +322,10 @@ export default {
             }
             messageText.value = ''
 
+            // Create AbortController for this request
+            const controller = new AbortController()
+            chatPrompt.abortController.value = controller
+
             try {
                 let threadId
 
@@ -338,11 +456,15 @@ export default {
                     }))
                 }
 
+                chatRequest.metadata ??= {}
+                chatRequest.metadata.threadId = threadId
+
                 // Send to API
                 console.debug('chatRequest', chatRequest)
                 const startTime = Date.now()
                 const response = await ai.post('/v1/chat/completions', {
-                    body: JSON.stringify(chatRequest)
+                    body: JSON.stringify(chatRequest),
+                    signal: controller.signal
                 })
 
                 let result = null
@@ -417,11 +539,29 @@ export default {
                     attachedFiles.value = []
                     // Error will be cleared when user sends next message (no auto-timeout)
                 }
+            } catch (error) {
+                // Check if the error is due to abort
+                if (error.name === 'AbortError') {
+                    console.log('Request was cancelled by user')
+                    // Don't show error for cancelled requests
+                } else {
+                    // Re-throw other errors to be handled by outer catch
+                    throw error
+                }
             } finally {
                 isGenerating.value = false
+                chatPrompt.abortController.value = null
+                // Restore focus to the textarea
+                nextTick(() => {
+                    refMessage.value?.focus()
+                })
             }
         }
 
+        const cancelRequest = () => {
+            chatPrompt.cancel()
+        }
+
         const addNewLine = () => {
             // Enter key already adds new line
             //messageText.value += '\n'
@@ -432,11 +572,18 @@ export default {
             attachedFiles,
             messageText,
             fileInput,
+            refMessage,
             showSettings,
+            isDragging,
             triggerFilePicker,
             onFilesSelected,
+            onPaste,
+            onDragOver,
+            onDragLeave,
+            onDrop,
             removeAttachment,
             sendMessage,
+            cancelRequest,
             addNewLine,
         }
     }