llms-py 2.0.8__py3-none-any.whl → 2.0.10__py3-none-any.whl

{llms_py-2.0.8.data → llms_py-2.0.10.data}/data/ui/ChatPrompt.mjs

@@ -11,7 +11,6 @@ export function useChatPrompt() {
     const attachedFiles = ref([])
     const isGenerating = ref(false)
     const errorStatus = ref(null)
-    const errorMessage = 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
@@ -28,7 +27,6 @@ export function useChatPrompt() {
         messageText,
         attachedFiles,
         errorStatus,
-        errorMessage,
         isGenerating,
         get generating() {
             return isGenerating.value
@@ -44,23 +42,32 @@ export function useChatPrompt() {
 export default {
     template:`
     <div class="mx-auto max-w-3xl">
-        <div class="flex space-x-3">
-            <!-- Attach (+) button -->
-            <div>
-                <button type="button"
-                        @click="triggerFilePicker"
+        <SettingsDialog :isOpen="showSettings" @close="showSettings = false" />
+        <div class="flex space-x-2">
+            <!-- Attach (+) button and Settings button -->
+            <div class="mt-1.5 flex flex-col space-y-1 items-center">
+                <div>
+                    <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"
+                            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>
+                        </svg>
+                    </button>
+                    <!-- Hidden file input -->
+                    <input ref="fileInput" type="file" multiple @change="onFilesSelected"
+                        class="hidden" accept="image/*,audio/*,.pdf,.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                        />
+                </div>
+                <div>
+                    <button type="button" title="Settings" @click="showSettings = true"
                         :disabled="isGenerating || !model"
-                        class="mt-2 h-10 w-10 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"
-                        title="Attach image or audio">
-                    <svg class="w-5 h-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">
-                        <line x1="12" y1="5" x2="12" y2="19"></line>
-                        <line x1="5" y1="12" x2="19" y2="12"></line>
-                    </svg>
-                </button>
-                <!-- Hidden file input -->
-                <input ref="fileInput" type="file" multiple @change="onFilesSelected" 
-                    class="hidden" accept="image/*,audio/*,.pdf,.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                    />
+                        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>
+                    </button>
+                </div>
             </div>
 
             <div class="flex-1">
@@ -70,7 +77,7 @@ export default {
                     @keydown.enter.exact.prevent="sendMessage"
                     @keydown.enter.shift.exact="addNewLine"
                     placeholder="Type your message... (Enter to send, Shift+Enter for new line)"
-                    rows="2"
+                    rows="3"
                     class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
                     :disabled="isGenerating || !model"
                 ></textarea>
@@ -90,16 +97,16 @@ export default {
                 </div>
             </div>
 
-            <div>
+            <div class="pt-3">
                 <button title="Send (Enter)" type="button"
                     @click="sendMessage"
                     :disabled="!messageText.trim() || isGenerating || !model"
-                    class="mt-2 p-2 flex items-center justify-center rounded-full bg-gray-700 text-white transition-colors hover:opacity-70 focus-visible:outline-none focus-visible:outline-black disabled:bg-[#D7D7D7] disabled:text-[#f4f4f4] disabled:hover:opacity-100 dark:bg-white dark:text-black dark:focus-visible:outline-white disabled:dark:bg-token-text-quaternary dark:disabled:text-token-main-surface-secondary">
-                    <svg v-if="isGenerating" class="size-6 animate-spin" fill="none" viewBox="0 0 24 24">
+                    class="p-2 flex items-center justify-center rounded-full bg-gray-700 text-white transition-colors hover:opacity-70 focus-visible:outline-none focus-visible:outline-black disabled:bg-[#D7D7D7] disabled:text-[#f4f4f4] disabled:hover:opacity-100 dark:bg-white dark:text-black dark:focus-visible:outline-white disabled:dark:bg-token-text-quaternary dark:disabled:text-token-main-surface-secondary">
+                    <svg v-if="isGenerating" class="size-8 animate-spin" fill="none" viewBox="0 0 24 24">
                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                         <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                     </svg>
-                    <svg v-else class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m3.165 19.503l7.362-16.51c.59-1.324 2.355-1.324 2.946 0l7.362 16.51c.667 1.495-.814 3.047-2.202 2.306l-5.904-3.152c-.459-.245-1-.245-1.458 0l-5.904 3.152c-1.388.74-2.87-.81-2.202-2.306"></path></svg>
+                    <svg v-else class="size-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="20" stroke-dashoffset="20" d="M12 21l0 -17.5"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="20;0"/></path><path stroke-dasharray="12" stroke-dashoffset="12" d="M12 3l7 7M12 3l-7 7"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.2s" values="12;0"/></path></g></svg>
                 </button>
             </div>
         </div>
@@ -116,18 +123,19 @@ export default {
         }
     },
     setup(props) {
+        const ai = inject('ai')
+        const chatSettings = inject('chatSettings')
         const router = useRouter()
         const config = inject('config')
         const chatPrompt = inject('chatPrompt')
-        const { 
-            messageText, 
-            attachedFiles, 
-            isGenerating, 
+        const {
+            messageText,
+            attachedFiles,
+            isGenerating,
             errorStatus,
-            errorMessage,
-            hasImage, 
-            hasAudio, 
-            hasFile 
+            hasImage,
+            hasAudio,
+            hasFile
         } = chatPrompt
         const threads = inject('threads')
         const {
@@ -135,6 +143,8 @@ export default {
         } = threads
 
         const fileInput = ref(null)
+        const showSettings = ref(false)
+        const { applySettings } = chatSettings
 
         // File attachments (+) handlers
         const triggerFilePicker = () => {
@@ -185,7 +195,7 @@ export default {
             if (!messageText.value.trim() || isGenerating.value || !props.model) return
 
             // Clear any existing error message
-            errorStatus.value = errorMessage.value = null
+            errorStatus.value = null
 
             let message = messageText.value.trim()
             if (attachedFiles.value.length) {
@@ -207,7 +217,7 @@ export default {
                     const newThread = await threads.createThread('New Chat', props.model, props.systemPrompt)
                     threadId = newThread.id
                     // Navigate to the new thread URL
-                    router.push(`/c/${newThread.id}`)
+                    router.push(`${ai.base}/c/${newThread.id}`)
                 } else {
                     threadId = currentThread.value.id
                     // Update the existing thread's model and systemPrompt to match current selection
@@ -233,14 +243,19 @@ export default {
                 if (props.systemPrompt?.trim()) {
                     messages.unshift({
                         role: 'system',
-                        content: props.systemPrompt.trim()
+                        content: [
+                            { type: 'text', text: props.systemPrompt }
+                        ]
                     })
                 }
 
                 const chatRequest = createChatRequest()
                 chatRequest.model = props.model
 
-                console.log('chatRequest', chatRequest, hasImage(), hasAudio(), attachedFiles.value.length, attachedFiles.value)
+                // Apply user settings
+                applySettings(chatRequest)
+
+                console.debug('chatRequest', chatRequest, hasImage(), hasAudio(), attachedFiles.value.length, attachedFiles.value)
 
                 function setContentText(chatRequest, text) {
                     // Replace text message
@@ -256,7 +271,7 @@ export default {
                 if (hasImage()) {
                     const imageMessage = chatRequest.messages.find(m =>
                         m.role === 'user' && Array.isArray(m.content) && m.content.some(c => c.type === 'image_url'))
-                    console.log('hasImage', chatRequest, imageMessage)
+                    console.debug('hasImage', chatRequest, imageMessage)
                     if (imageMessage) {
                         const imgs = []
                         let imagePart = deepClone(imageMessage.content.find(c => c.type === 'image_url'))
@@ -272,7 +287,7 @@ export default {
                     }
 
                 } else if (hasAudio()) {
-                    console.log('hasAudio', chatRequest)
+                    console.debug('hasAudio', chatRequest)
                     const audioMessage = chatRequest.messages.find(m =>
                         m.role === 'user' && Array.isArray(m.content) && m.content.some(c => c.type === 'input_audio'))
                     if (audioMessage) {
@@ -289,7 +304,7 @@ export default {
                         setContentText(chatRequest, message)
                     }
                 } else if (attachedFiles.value.length) {
-                    console.log('hasFile', chatRequest)
+                    console.debug('hasFile', chatRequest)
                     const fileMessage = chatRequest.messages.find(m =>
                         m.role === 'user' && Array.isArray(m.content) && m.content.some(c => c.type === 'file'))
                     if (fileMessage) {
@@ -306,62 +321,80 @@ export default {
                     }
 
                 } else {
-                    console.log('hasText', chatRequest)
+                    console.debug('hasText', chatRequest)
                     // Chat template message needs to be empty
                     chatRequest.messages = []
                     messages.forEach(m => chatRequest.messages.push({
                         role: m.role,
-                        content: m.content
+                        content: typeof m.content === 'string'
+                            ? [{ type: 'text', text: m.content }]
+                            : m.content
                     }))
                 }
 
                 // Send to API
-                const response = await fetch('/v1/chat/completions', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
+                console.debug('chatRequest', chatRequest)
+                const response = await ai.post('/v1/chat/completions', {
                     body: JSON.stringify(chatRequest)
                 })
 
+                let result = null
                 if (!response.ok) {
-                    errorStatus.value = `HTTP ${response.status} ${response.statusText}`
-                    let errorBody = ''
+                    errorStatus.value = {
+                        errorCode: `HTTP ${response.status} ${response.statusText}`,
+                        message: null,
+                        stackTrace: null
+                    }
+                    let errorBody = null
                     try {
                         errorBody = await response.text()
                         if (errorBody) {
                             // Try to parse as JSON for better formatting
                             try {
                                 const errorJson = JSON.parse(errorBody)
-                                errorBody = JSON.stringify(errorJson, null, 2)
+                                const status = errorJson?.responseStatus
+                                if (status) {
+                                    errorStatus.value.errorCode += ` ${status.errorCode}`
+                                    errorStatus.value.message = status.message
+                                    errorStatus.value.stackTrace = status.stackTrace
+                                } else {
+                                    errorStatus.value.stackTrace = JSON.stringify(errorJson, null, 2)
+                                }
                             } catch (e) {
                             }
                         }
                     } catch (e) {
                         // If we can't read the response body, just use the status
                     }
-                    throw new Error(errorBody || '')
+                } else {
+                    try {
+                        result = await response.json()
+                    } catch (e) {
+                        errorStatus.value = {
+                            errorCode: 'Error',
+                            message: e.message,
+                            stackTrace: null
+                        }
+                    }
                 }
 
-                const result = await response.json()
-
-                if (result.error) {
-                    throw new Error(result.error)
+                if (result?.error) {
+                    errorStatus.value ??= {
+                        errorCode: 'Error',
+                    }
+                    errorStatus.value.message = result.error
+                } 
+                
+                if (!errorStatus.value) {
+                    // Add assistant response (save entire message including reasoning)
+                    const assistantMessage = result.choices?.[0]?.message
+                    await threads.addMessageToThread(threadId, assistantMessage)
+
+                    nextTick(addCopyButtons)
+
+                    attachedFiles.value = []
+                    // Error will be cleared when user sends next message (no auto-timeout)
                 }
-
-                // Add assistant response (save entire message including reasoning)
-                const assistantMessage = result.choices?.[0]?.message
-                await threads.addMessageToThread(threadId, assistantMessage)
-
-                nextTick(addCopyButtons)
-
-                attachedFiles.value = []
-
-            } catch (error) {
-                console.error('Error sending message:', error)
-                errorMessage.value = error.message
-
-                // Error will be cleared when user sends next message (no auto-timeout)
             } finally {
                 isGenerating.value = false
             }
@@ -375,10 +408,9 @@ export default {
         return {
             isGenerating,
             attachedFiles,
-            errorStatus,
-            errorMessage,
             messageText,
             fileInput,
+            showSettings,
             triggerFilePicker,
             onFilesSelected,
             removeAttachment,