llms-py 3.0.0b6__py3-none-any.whl → 3.0.0b8__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, pick } 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>`,
@@ -112,33 +118,17 @@ export function addCopyButtons() {
 export function useChatPrompt(ctx) {
     const messageText = ref('')
     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
-    // const hasText = () => !hasImage() && !hasAudio() && !hasFile()
 
-    const editingMessageId = ref(null)
+    const editingMessage = ref(null)
 
     function reset() {
         // Ensure initial state is ready to accept input
-        isGenerating.value = false
         attachedFiles.value = []
         messageText.value = ''
-        abortController.value = null
-        editingMessageId.value = null
-    }
-
-    function cancel() {
-        // Cancel the pending request
-        if (abortController.value) {
-            abortController.value.abort()
-        }
-        // Reset UI state
-        isGenerating.value = false
-        abortController.value = null
+        editingMessage.value = null
     }
 
     const settings = useSettings()
@@ -149,7 +139,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,28 +163,244 @@ 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
+                        }
+                    }
+                }
+
+                // 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))
+                    }
+                }
+
+                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,
-        isGenerating,
-        abortController,
-        editingMessageId,
-        get generating() {
-            return isGenerating.value
-        },
+        editingMessage,
         hasImage,
         hasAudio,
         hasFile,
-        // hasText,
         reset,
-        cancel,
         settings,
         addCopyButtons,
         getModel,
         getSelectedModel,
         setSelectedModel,
         getProviderForModel,
+        canGenerateImage,
+        canGenerateAudio,
+        getTextContent,
+        getAnswer,
+        selectAspectRatio,
     }
 }
 
@@ -200,7 +414,7 @@ const ChatPrompt = {
                 <div>
                     <button type="button"
                             @click="triggerFilePicker"
-                            :disabled="isGenerating || !model"
+                            :disabled="$threads.isWatchingThread.value || !model"
                             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">
@@ -214,7 +428,7 @@ const ChatPrompt = {
                 </div>
                 <div>
                     <button type="button" title="Settings" @click="showSettings = true"
-                        :disabled="isGenerating || !model"
+                        :disabled="$threads.watchingThread || !model"
                         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>
@@ -240,16 +454,16 @@ const ChatPrompt = {
                                 ? '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"
+                        :disabled="$threads.watchingThread || !model"
                     ></textarea>
-                    <button v-if="!isGenerating" title="Send (Enter)" type="button"
+                    <button v-if="!$threads.watchingThread" title="Send (Enter)" type="button"
                         @click="sendMessage"
-                        :disabled="!messageText.trim() || isGenerating || !model"
+                        :disabled="!messageText.trim() || $threads.watchingThread || !model"
                         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"
+                        @click="$threads.cancelThread()"
                         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>
@@ -260,7 +474,7 @@ const ChatPrompt = {
                 <!-- Attachments & Image Options -->
                 <div class="mt-2 flex justify-between items-start gap-2">
                     <div class="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 dark:border-gray-600 text-xs text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-800">
+                        <div v-for="(f,i) in $chat.attachedFiles.value" :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 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>
@@ -269,7 +483,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">
@@ -282,6 +496,7 @@ const ChatPrompt = {
                 <div v-if="!model" class="mt-2 text-sm text-red-600 dark:text-red-400">
                     Please select a model
                 </div>
+            </div>
         </div>
     </div>    
     `,
@@ -294,32 +509,17 @@ 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 {
             messageText,
-            attachedFiles,
-            isGenerating,
-            errorStatus,
             hasImage,
             hasAudio,
             hasFile,
-            editingMessageId,
-        } = chatPrompt
-        const threads = ctx.threads
-        const {
-            currentThread,
-        } = ctx.threads
+            getTextContent,
+        } = ctx.chat
 
         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 = () => {
@@ -339,7 +539,7 @@ const ChatPrompt = {
                             type: f.type,
                             width: response.width,
                             height: response.height,
-                            threadId: currentThread.value?.id,
+                            threadId: ctx.threads.currentThread.value?.id,
                             created: Date.now()
                         }
 
@@ -348,22 +548,21 @@ const ChatPrompt = {
                             file: f // Keep original file for preview/fallback if needed
                         }
                     } catch (error) {
-                        console.error('File upload failed:', error)
-                        errorStatus.value = {
+                        ctx.setError({
                             errorCode: 'Upload Failed',
                             message: `Failed to upload ${f.name}: ${error.message}`
-                        }
+                        })
                         return null
                     }
                 }))
 
-                attachedFiles.value.push(...uploadedFiles.filter(f => f))
+                ctx.chat.attachedFiles.value.push(...uploadedFiles.filter(f => f))
             }
 
             // allow re-selecting the same file
             if (fileInput.value) fileInput.value.value = ''
 
-            if (!messageText.value.trim()) {
+            if (!messageText.value?.trim()) {
                 if (hasImage()) {
                     messageText.value = getTextContent(config.defaults.image)
                 } else if (hasAudio()) {
@@ -374,7 +573,7 @@ const ChatPrompt = {
             }
         }
         const removeAttachment = (i) => {
-            attachedFiles.value.splice(i, 1)
+            ctx.chat.attachedFiles.value.splice(i, 1)
         }
 
         // Handle paste events for clipboard images, audio, and files
@@ -450,279 +649,112 @@ 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
-            if (isGenerating.value || !props.model) return
+            if (!messageText.value?.trim() && !hasImage() && !hasAudio() && !hasFile()) return
+            if (ctx.threads.isWatchingThread.value || !props.model) return
 
-            // Clear any existing error message
-            errorStatus.value = null
+            ctx.clearError()
 
             // 1. Construct Structured Content (Text + Attachments)
             let text = messageText.value.trim()
-            let content = []
-
 
             messageText.value = ''
+            let content = ctx.chat.createContent({ text, files: ctx.chat.attachedFiles.value })
 
-            // Add Text Block
-            content.push({ type: 'text', text: text })
+            let thread
 
-            // 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 } })
-                }
+            // Create thread if none exists
+            if (!ctx.threads.currentThread.value) {
+                thread = await ctx.threads.startNewThread({ model: props.model })
+            } else {
+                thread = ctx.threads.currentThread.value
             }
 
-            // Create AbortController for this request
-            const controller = new AbortController()
-            chatPrompt.abortController.value = controller
-            const model = props.model.name
-
-            try {
-                let threadId
+            let threadId = thread.id
+            let messages = thread.messages || []
+            if (!threadId) {
+                console.error('No thread ID found', thread, ctx.threads.currentThread.value)
+                return
+            }
 
-                // 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}`)
-                } else {
-                    threadId = currentThread.value.id
-                    // Update the existing thread's model to match current selection
-                    await threads.updateThread(threadId, {
-                        model,
-                        info: toModelInfo(props.model),
-                    })
+            // Handle Editing / Redo Logic
+            const editingMessage = ctx.chat.editingMessage.value
+            if (editingMessage) {
+                let messageIndex = messages.findIndex(m => m.timestamp === editingMessage)
+                if (messageIndex == -1) {
+                    messageIndex = messages.findLastIndex(m => m.role === 'user')
                 }
+                console.log('Editing message', editingMessage, messageIndex, messages)
 
-                // Get the thread to check for duplicates
-                let thread = await threads.getThread(threadId)
-
-                // Handle Editing / Redo Logic
-                if (editingMessageId.value) {
-                    // Check if message still exists
-                    const messageExists = thread.messages.find(m => m.id === editingMessageId.value)
-                    if (messageExists) {
-                        // Update the message content
-                        await threads.updateMessageInThread(threadId, editingMessageId.value, { content: content })
-                        // Redo from this message (clears subsequent)
-                        await threads.redoMessageFromThread(threadId, editingMessageId.value)
-
-                        // Clear editing state
-                        editingMessageId.value = null
-                    } else {
-                        // Fallback if message was deleted
-                        editingMessageId.value = null
-                    }
-                    // Refresh thread state
-                    thread = await threads.getThread(threadId)
+                if (messageIndex >= 0) {
+                    messages[messageIndex].content = content
+                    // Truncate messages to only include up to the edited message
+                    messages.length = messageIndex + 1
                 } else {
-                    // Regular Send Logic
-                    const lastMessage = thread.messages[thread.messages.length - 1]
-
-                    // Check duplicate based on text content extracted from potential array
-                    const getLastText = (msgContent) => {
-                        if (typeof msgContent === 'string') return msgContent
-                        if (Array.isArray(msgContent)) return msgContent.find(c => c.type === 'text')?.text || ''
-                        return ''
-                    }
-                    const newText = text // content[0].text
-                    const lastText = lastMessage && lastMessage.role === 'user' ? getLastText(lastMessage.content) : null
-
-                    const isDuplicate = lastText === newText
-
-                    // Add user message only if it's not a duplicate
-                    // Note: We are saving the FULL STRUCTURED CONTENT array here
-                    if (!isDuplicate) {
-                        await threads.addMessageToThread(threadId, {
-                            role: 'user',
-                            content: content,
-                            model: props.model.name,
-                        })
-                        // Reload thread after adding message
-                        thread = await threads.getThread(threadId)
-                    }
-                }
-
-                isGenerating.value = true
-
-                // Construct API Request from History
-                const request = {
-                    model,
-                    messages: [],
-                    metadata: {}
-                }
-
-                // Add History
-                thread.messages.forEach(m => {
-                    request.messages.push({
-                        role: m.role,
-                        content: m.content
+                    messages.push({
+                        timestamp: new Date().valueOf(),
+                        role: 'user',
+                        content,
                     })
-                })
-
-                // 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,
+            } else {
+                // Regular Send Logic
+                const lastMessage = messages[messages.length - 1]
+
+                // Check duplicate based on text content extracted from potential array
+                const getLastText = (msgContent) => {
+                    if (typeof msgContent === 'string') return msgContent
+                    if (Array.isArray(msgContent)) return msgContent.find(c => c.type === 'text')?.text || ''
+                    return ''
                 }
-                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
+                const newText = text // content[0].text
+                const lastText = lastMessage && lastMessage.role === 'user' ? getLastText(lastMessage.content) : null
+                const isDuplicate = lastText === newText
+
+                // Add user message only if it's not a duplicate
+                // Note: We are saving the FULL STRUCTURED CONTENT array here
+                if (!isDuplicate) {
+                    messages.push({
+                        timestamp: new Date().valueOf(),
+                        role: 'user',
+                        content,
+                    })
                 }
+            }
 
-                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 request = ctx.chat.createRequest({ model: props.model })
+
+            // Add Thread History
+            messages.forEach(m => {
+                request.messages.push(m)
+            })
+
+            // Update Thread Title if not set or is default
+            if (!thread.title || thread.title === 'New Chat' || request.title === 'New Chat') {
+                request.title = text.length > 100
+                    ? text.slice(0, 100) + '...'
+                    : text
+                console.debug(`changing thread title from '${thread.title}' to '${request.title}'`)
+            } else {
+                console.debug(`thread title is '${thread.title}'`, request.title)
+            }
 
-                    attachedFiles.value = []
-                    // Error will be cleared when user sends next message (no auto-timeout)
-                } else {
-                    ctx.chatErrorFilters.forEach(f => f(errorStatus.value))
-                }
-            } 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 api = await ctx.threads.queueChat(threadId, request)
+            if (api.response) {
+                // success
+                ctx.chat.editingMessage.value = null
+                ctx.chat.attachedFiles.value = []
+                thread = api.response
+                ctx.threads.replaceThread(thread)
+            } else {
+                ctx.setError(api.error)
             }
-        }
 
-        const cancelRequest = () => {
-            chatPrompt.cancel()
+            // Restore focus to the textarea
+            nextTick(() => {
+                refMessage.value?.focus()
+            })
         }
 
         const addNewLine = () => {
@@ -734,9 +766,15 @@ const ChatPrompt = {
             ctx.setPrefs({ aspectRatio: newValue })
         })
 
+        watch(() => ctx.layout.path, newValue => {
+            if (newValue === '/' || newValue.startsWith('/c/')) {
+                nextTick(() => {
+                    refMessage.value?.focus()
+                })
+            }
+        })
+
         return {
-            isGenerating,
-            attachedFiles,
             messageText,
             fileInput,
             refMessage,
@@ -750,10 +788,8 @@ const ChatPrompt = {
             onDrop,
             removeAttachment,
             sendMessage,
-            cancelRequest,
             addNewLine,
             imageAspectRatios,
-            canGenerateImages,
         }
     }
 }
@@ -766,6 +802,7 @@ export default {
             SettingsDialog,
             ChatPrompt,
             ChatBody,
+            HomeTools,
             Home,
         })
         ctx.setGlobals({