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

llms/ui/modules/chat/index.mjs

@@ -1,9 +1,10 @@
 
 import { ref, computed, watch, nextTick, inject } from 'vue'
 import { useRouter } from 'vue-router'
-import { $$, createElement, lastRightPart } from "@servicestack/client"
+import { $$, createElement, lastRightPart, ApiResult, createErrorStatus } from "@servicestack/client"
 import SettingsDialog, { useSettings } from './SettingsDialog.mjs'
 import ChatBody from './ChatBody.mjs'
+import HomeTools from './HomeTools.mjs'
 import { AppContext } from '../../ctx.mjs'
 
 const imageExts = 'png,webp,jpg,jpeg,gif,bmp,svg,tiff,ico'.split(',')
@@ -55,6 +56,11 @@ const imageAspectRatios = {
     '1344×768': '16:9',
     '1536×672': '21:9',
 }
+// Reverse lookup
+const imageRatioSizes = Object.entries(imageAspectRatios).reduce((acc, [key, value]) => {
+    acc[value] = key
+    return acc
+}, {})
 
 const svg = {
     clipboard: `<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><path d="M8 5H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1M8 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M8 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m0 0h2a2 2 0 0 1 2 2v3m2 4H10m0 0l3-3m-3 3l3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>`,
@@ -149,7 +155,15 @@ export function useChatPrompt(ctx) {
 
     function getSelectedModel() {
         const candidates = [ctx.state.selectedModel, ctx.state.config.defaults.text.model]
-        return candidates.map(name => name && getModel(name)).find(x => !!x)
+        const ret = candidates.map(name => name && getModel(name)).find(x => !!x)
+        if (!ret) {
+            // Try to find a model in the latest threads
+            for (const thread in ctx.threads.threads) {
+                const model = thread.model && getModel(thread.model)
+                if (model) return model
+            }
+        }
+        return ret
     }
 
     function setSelectedModel(model) {
@@ -165,7 +179,234 @@ export function useChatPrompt(ctx) {
         return getModel(model)?.provider
     }
 
+    const canGenerateImage = model => {
+        return model?.modalities?.output?.includes('image')
+    }
+    const canGenerateAudio = model => {
+        return model?.modalities?.output?.includes('audio')
+    }
+
+    function applySettings(request) {
+        settings.applySettings(request)
+    }
+
+    function createContent({ text, files }) {
+        let content = []
+
+        // Add Text Block
+        if (text) {
+            content.push({ type: 'text', text })
+        }
+
+        // Add Attachment Blocks
+        if (Array.isArray(files)) {
+            for (const f of files) {
+                const ext = lastRightPart(f.name, '.')
+                if (imageExts.includes(ext)) {
+                    content.push({ type: 'image_url', image_url: { url: f.url } })
+                } else if (audioExts.includes(ext)) {
+                    content.push({ type: 'input_audio', input_audio: { data: f.url, format: ext } })
+                } else {
+                    content.push({ type: 'file', file: { file_data: f.url, filename: f.name } })
+                }
+            }
+        }
+        return content
+    }
+
+    function createRequest({ model, text, files, systemPrompt, aspectRatio }) {
+        // Construct API Request from History
+        const request = {
+            model: model.name,
+            messages: [],
+            metadata: {}
+        }
+
+        // Apply user settings
+        applySettings(request)
+
+        if (systemPrompt) {
+            request.messages = request.messages.filter(m => m.role !== 'system')
+            request.messages.unshift({
+                role: 'system',
+                content: systemPrompt
+            })
+        }
+
+        if (canGenerateImage(model)) {
+            request.image_config = {
+                aspect_ratio: aspectRatio || imageAspectRatios[ctx.state.selectedAspectRatio] || '1:1'
+            }
+            request.modalities = ["image", "text"]
+        }
+        else if (canGenerateAudio(model)) {
+            request.modalities = ["audio", "text"]
+        }
+
+        if (text) {
+            const content = createContent({ text, files })
+            request.messages.push({
+                role: 'user',
+                content
+            })
+        }
+
+        return request
+    }
+
+    async function completion({ request, model, thread, controller, store }) {
+        try {
+            let error
+            if (!model) {
+                if (request.model) {
+                    model = getModel(request.model)
+                } else {
+                    model = getModel(request.model) ?? getSelectedModel()
+                }
+            }
+
+            if (!model) {
+                return new ApiResult({
+                    error: createErrorStatus(`Model ${request.model || ''} not found`, 'NotFound')
+                })
+            }
+
+            if (!request.messages) request.messages = []
+            if (!request.metadata) request.metadata = {}
+
+            if (store && !thread) {
+                const title = getTextContent(request) || 'New Chat'
+                thread = await ctx.threads.startNewThread({ title, model })
+            }
+
+            const threadId = thread?.id || ctx.threads.generateThreadId()
+
+            const ctxRequest = {
+                request,
+                thread,
+            }
+            ctx.chatRequestFilters.forEach(f => f(ctxRequest))
+
+            console.debug('completion.request', request)
+
+            // Send to API
+            const startTime = Date.now()
+            const res = await ctx.post('/v1/chat/completions', {
+                body: JSON.stringify(request),
+                signal: controller?.signal
+            })
+
+            let response = null
+            if (!res.ok) {
+                error = createErrorStatus('', `HTTP ${res.status} ${res.statusText}`)
+                let errorBody = null
+                try {
+                    errorBody = await res.text()
+                    if (errorBody) {
+                        // Try to parse as JSON for better formatting
+                        try {
+                            const errorJson = JSON.parse(errorBody)
+                            const status = errorJson?.responseStatus
+                            if (status) {
+                                error.errorCode += ` ${status.errorCode}`
+                                error.message = status.message
+                                error.stackTrace = status.stackTrace
+                            } else {
+                                error.stackTrace = JSON.stringify(errorJson, null, 2)
+                            }
+                        } catch (e) {
+                        }
+                    }
+                } catch (e) {
+                    // If we can't read the response body, just use the status
+                }
+            } else {
+                try {
+                    response = await res.json()
+                    const ctxResponse = {
+                        response,
+                        thread,
+                    }
+                    ctx.chatResponseFilters.forEach(f => f(ctxResponse))
+                    console.debug('completion.response', JSON.stringify(response, null, 2))
+                } catch (e) {
+                    error = createErrorStatus(e.message)
+                }
+            }
+
+            if (response?.error) {
+                error ??= createErrorStatus()
+                error.message = response.error
+            }
+
+            if (error) {
+                ctx.chatErrorFilters.forEach(f => f(error))
+                return new ApiResult({ error })
+            }
+
+            if (!error) {
+                // Add tool history messages if any
+                if (response.tool_history && Array.isArray(response.tool_history)) {
+                    for (const msg of response.tool_history) {
+                        if (msg.role === 'assistant') {
+                            msg.model = model.name // tag with model
+                        }
+                        if (store) {
+                            await ctx.threads.addMessageToThread(threadId, msg)
+                        }
+                    }
+                }
+
+                // Add assistant response (save entire message including reasoning)
+                const assistantMessage = response.choices?.[0]?.message
+
+                const usage = response.usage
+                if (usage) {
+                    if (response.metadata?.pricing) {
+                        const [input, output] = response.metadata.pricing.split('/')
+                        usage.duration = response.metadata.duration ?? (Date.now() - startTime)
+                        usage.input = input
+                        usage.output = output
+                        usage.tokens = usage.completion_tokens
+                        usage.price = usage.output
+                        usage.cost = ctx.fmt.tokenCost(usage.prompt_tokens / 1_000_000 * parseFloat(input) + usage.completion_tokens / 1_000_000 * parseFloat(output))
+                    }
+                    await ctx.threads.logRequest(threadId, model, request, response)
+                }
+                if (store) {
+                    assistantMessage.model = model.name
+                    await ctx.threads.addMessageToThread(threadId, assistantMessage, usage)
+                }
+
+                nextTick(addCopyButtons)
+
+                return new ApiResult({ response })
+            }
+        } catch (e) {
+            console.log('completion.error', e)
+            return new ApiResult({ error: createErrorStatus(e.message, 'ChatFailed') })
+        }
+    }
+    function getTextContent(chat) {
+        const textMessage = chat.messages.find(m =>
+            m.role === 'user' && Array.isArray(m.content) && m.content.some(c => c.type === 'text'))
+        return textMessage?.content.find(c => c.type === 'text')?.text || ''
+    }
+    function getAnswer(response) {
+        const textMessage = response.choices?.[0]?.message
+        return textMessage?.content || ''
+    }
+    function selectAspectRatio(ratio) {
+        const selectedAspectRatio = imageRatioSizes[ratio] || '1024×1024'
+        console.log(`selectAspectRatio(${ratio})`, selectedAspectRatio)
+        ctx.setState({ selectedAspectRatio })
+    }
+
     return {
+        completion,
+        createContent,
+        createRequest,
+        applySettings,
         messageText,
         attachedFiles,
         errorStatus,
@@ -187,6 +428,11 @@ export function useChatPrompt(ctx) {
         getSelectedModel,
         setSelectedModel,
         getProviderForModel,
+        canGenerateImage,
+        canGenerateAudio,
+        getTextContent,
+        getAnswer,
+        selectAspectRatio,
     }
 }
 
@@ -269,7 +515,7 @@ const ChatPrompt = {
                     </div>
 
                     <!-- Image Aspect Ratio Selector -->
-                    <div v-if="canGenerateImages" class="min-w-[120px]">
+                    <div v-if="$chat.canGenerateImage(model)" class="min-w-[120px]">
                         <select name="aspect_ratio" v-model="$state.selectedAspectRatio" 
                                 class="block w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-xs text-gray-700 dark:text-gray-300 pl-2 pr-6 py-1 focus:ring-blue-500 focus:border-blue-500">
                             <option v-for="(ratio, size) in imageAspectRatios" :key="size" :value="size">
@@ -294,7 +540,6 @@ const ChatPrompt = {
     setup(props) {
         const ctx = inject('ctx')
         const config = ctx.state.config
-        const ai = ctx.ai
         const router = useRouter()
         const chatPrompt = ctx.chat
         const {
@@ -306,6 +551,7 @@ const ChatPrompt = {
             hasAudio,
             hasFile,
             editingMessageId,
+            getTextContent,
         } = chatPrompt
         const threads = ctx.threads
         const {
@@ -315,11 +561,6 @@ const ChatPrompt = {
         const fileInput = ref(null)
         const refMessage = ref(null)
         const showSettings = ref(false)
-        const { applySettings } = ctx.chat.settings
-
-        const canGenerateImages = computed(() => {
-            return props.model?.modalities?.output?.includes('image')
-        })
 
         // File attachments (+) handlers
         const triggerFilePicker = () => {
@@ -450,18 +691,6 @@ const ChatPrompt = {
             }
         }
 
-        function getTextContent(chat) {
-            const textMessage = chat.messages.find(m =>
-                m.role === 'user' && Array.isArray(m.content) && m.content.some(c => c.type === 'text'))
-            return textMessage?.content.find(c => c.type === 'text')?.text || ''
-        }
-
-        function toModelInfo(model) {
-            if (!model) return undefined
-            const { id, name, provider, cost, modalities } = model
-            return ctx.utils.deepClone({ id, name, provider, cost, modalities })
-        }
-
         // Send message
         const sendMessage = async () => {
             if (!messageText.value.trim() && !hasImage() && !hasAudio() && !hasFile()) return
@@ -472,55 +701,35 @@ const ChatPrompt = {
 
             // 1. Construct Structured Content (Text + Attachments)
             let text = messageText.value.trim()
-            let content = []
 
 
             messageText.value = ''
-
-            // Add Text Block
-            content.push({ type: 'text', text: text })
-
-            // Add Attachment Blocks
-            for (const f of attachedFiles.value) {
-                const ext = lastRightPart(f.name, '.')
-                if (imageExts.includes(ext)) {
-                    content.push({ type: 'image_url', image_url: { url: f.url } })
-                } else if (audioExts.includes(ext)) {
-                    content.push({ type: 'input_audio', input_audio: { data: f.url, format: ext } })
-                } else {
-                    content.push({ type: 'file', file: { file_data: f.url, filename: f.name } })
-                }
-            }
+            let content = ctx.chat.createContent({ text, files: attachedFiles.value })
 
             // Create AbortController for this request
             const controller = new AbortController()
             chatPrompt.abortController.value = controller
             const model = props.model.name
 
-            try {
-                let threadId
+            let thread
 
+            try {
                 // Create thread if none exists
                 if (!currentThread.value) {
-                    const newThread = await threads.createThread({
-                        title: 'New Chat',
-                        model,
-                        info: toModelInfo(props.model),
-                    })
-                    threadId = newThread.id
-                    // Navigate to the new thread URL
-                    router.push(`${ai.base}/c/${newThread.id}`)
+                    thread = await ctx.threads.startNewThread({ model: props.model })
                 } else {
-                    threadId = currentThread.value.id
+                    let threadId = currentThread.value.id
                     // Update the existing thread's model to match current selection
                     await threads.updateThread(threadId, {
                         model,
-                        info: toModelInfo(props.model),
+                        info: ctx.utils.toModelInfo(props.model),
                     })
+
+                    // Get the thread to check for duplicates
+                    thread = await threads.getThread(threadId)
                 }
 
-                // Get the thread to check for duplicates
-                let thread = await threads.getThread(threadId)
+                let threadId = thread.id
 
                 // Handle Editing / Redo Logic
                 if (editingMessageId.value) {
@@ -528,7 +737,7 @@ const ChatPrompt = {
                     const messageExists = thread.messages.find(m => m.id === editingMessageId.value)
                     if (messageExists) {
                         // Update the message content
-                        await threads.updateMessageInThread(threadId, editingMessageId.value, { content: content })
+                        await threads.updateMessageInThread(threadId, editingMessageId.value, { content })
                         // Redo from this message (clears subsequent)
                         await threads.redoMessageFromThread(threadId, editingMessageId.value)
 
@@ -570,138 +779,25 @@ const ChatPrompt = {
 
                 isGenerating.value = true
 
-                // Construct API Request from History
-                const request = {
-                    model,
-                    messages: [],
-                    metadata: {}
-                }
+                const request = ctx.chat.createRequest({ model: props.model })
 
                 // Add History
-                thread.messages.forEach(m => {
+                thread?.messages.forEach(m => {
                     request.messages.push({
                         role: m.role,
                         content: m.content
                     })
                 })
+                request.metadata.threadId = thread.id
 
-                // Apply user settings
-                applySettings(request)
-
-                if (canGenerateImages.value) {
-                    request.image_config = {
-                        aspect_ratio: imageAspectRatios[ctx.state.selectedAspectRatio] || '1:1'
-                    }
-                    request.modalities = ["image", "text"]
-                }
-
-                request.metadata.threadId = threadId
-
-                const ctxRequest = {
-                    request,
-                    thread,
-                }
-                ctx.chatRequestFilters.forEach(f => f(ctxRequest))
-
-                console.debug('chatRequest', request)
-
-                // Send to API
-                const startTime = Date.now()
-                const res = await ai.post('/v1/chat/completions', {
-                    body: JSON.stringify(request),
-                    signal: controller.signal
-                })
-
-                let response = null
-                if (!res.ok) {
-                    errorStatus.value = {
-                        errorCode: `HTTP ${res.status} ${res.statusText}`,
-                        message: null,
-                        stackTrace: null
-                    }
-                    let errorBody = null
-                    try {
-                        errorBody = await res.text()
-                        if (errorBody) {
-                            // Try to parse as JSON for better formatting
-                            try {
-                                const errorJson = JSON.parse(errorBody)
-                                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
-                    }
-                } else {
-                    try {
-                        response = await res.json()
-                        const ctxResponse = {
-                            response,
-                            thread,
-                        }
-                        ctx.chatResponseFilters.forEach(f => f(ctxResponse))
-                        console.debug('chatResponse', JSON.stringify(response, null, 2))
-                    } catch (e) {
-                        errorStatus.value = {
-                            errorCode: 'Error',
-                            message: e.message,
-                            stackTrace: null
-                        }
-                    }
-                }
-
-                if (response?.error) {
-                    errorStatus.value ??= {
-                        errorCode: 'Error',
-                    }
-                    errorStatus.value.message = response.error
-                }
-
-                if (!errorStatus.value) {
-                    // Add tool history messages if any
-                    if (response.tool_history && Array.isArray(response.tool_history)) {
-                        for (const msg of response.tool_history) {
-                            if (msg.role === 'assistant') {
-                                msg.model = props.model.name // tag with model
-                            }
-                            await threads.addMessageToThread(threadId, msg)
-                        }
-                    }
-
-                    // Add assistant response (save entire message including reasoning)
-                    const assistantMessage = response.choices?.[0]?.message
-
-                    const usage = response.usage
-                    if (usage) {
-                        if (response.metadata?.pricing) {
-                            const [input, output] = response.metadata.pricing.split('/')
-                            usage.duration = response.metadata.duration ?? (Date.now() - startTime)
-                            usage.input = input
-                            usage.output = output
-                            usage.tokens = usage.completion_tokens
-                            usage.price = usage.output
-                            usage.cost = ctx.fmt.tokenCost(usage.prompt_tokens / 1_000_000 * parseFloat(input) + usage.completion_tokens / 1_000_000 * parseFloat(output))
-                        }
-                        await threads.logRequest(threadId, props.model, request, response)
-                    }
-                    assistantMessage.model = props.model.name
-                    await threads.addMessageToThread(threadId, assistantMessage, usage)
-
-                    nextTick(addCopyButtons)
-
+                const api = await ctx.chat.completion({ request, thread, controller, store: true })
+                if (api.response) {
+                    // success
                     attachedFiles.value = []
-                    // Error will be cleared when user sends next message (no auto-timeout)
                 } else {
-                    ctx.chatErrorFilters.forEach(f => f(errorStatus.value))
+                    errorStatus.value = api.error
                 }
+
             } catch (error) {
                 // Check if the error is due to abort
                 if (error.name === 'AbortError') {
@@ -734,6 +830,14 @@ const ChatPrompt = {
             ctx.setPrefs({ aspectRatio: newValue })
         })
 
+        watch(() => ctx.layout.path, newValue => {
+            if (newValue === '/' || newValue.startsWith('/c/')) {
+                nextTick(() => {
+                    refMessage.value?.focus()
+                })
+            }
+        })
+
         return {
             isGenerating,
             attachedFiles,
@@ -753,7 +857,6 @@ const ChatPrompt = {
             cancelRequest,
             addNewLine,
             imageAspectRatios,
-            canGenerateImages,
         }
     }
 }
@@ -766,6 +869,7 @@ export default {
             SettingsDialog,
             ChatPrompt,
             ChatBody,
+            HomeTools,
             Home,
         })
         ctx.setGlobals({

llms/ui/modules/layout.mjs

@@ -1,44 +1,21 @@
 import { computed, inject, ref, onMounted, onUnmounted } from "vue"
 import { toJsonObject } from "../utils.mjs"
 
-const ToggleSidebarButton = {
-    template: `
-    <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>
-    `,
-    emits: ['toggle-sidebar'],
-}
-
 const Brand = {
     template: `
     <div class="flex-shrink-0 p-2 border-b border-gray-200 dark:border-gray-700 select-none">
         <div class="flex items-center justify-between">
             <div class="flex items-center space-x-2">
                 <button type="button"
-                    @click="$router.push('/')"
+                    @click="$ctx.to('/')"
                     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 home"
-                >
+                    title="Go back home">
                     {{ $state.title }}
                 </button>
             </div>
         </div>
     </div>
     `,
-    emits: ['home', 'toggle-sidebar'],
 }
 
 const Welcome = {
@@ -256,7 +233,6 @@ const SignIn = {
 export default {
     install(ctx) {
         ctx.components({
-            ToggleSidebarButton,
             Brand,
             Welcome,
             Avatar,

llms/ui/modules/model-selector.mjs

@@ -148,7 +148,7 @@ const ProviderStatus = {
         const onToggle = async (provider, enable) => {
             pending.value = { ...pending.value, [provider]: true }
             try {
-                const res = await ai.post(`/providers/${encodeURIComponent(provider)}`, {
+                const res = await ctx.post(`/providers/${encodeURIComponent(provider)}`, {
                     body: JSON.stringify(enable ? { enable: true } : { disable: true })
                 })
                 if (!res.ok) throw new Error(`HTTP ${res.status} ${res.statusText}`)