llms-py 3.0.14__py3-none-any.whl → 3.0.16__py3-none-any.whl

llms/ui/ctx.mjs

@@ -392,12 +392,11 @@ export class AppContext {
         if (Array.isArray(content)) {
             content = content.filter(c => c.type === 'text').map(c => c.text).join('\n')
         }
-        // Handled by katex
-        // if (content) {
-        //     content = content
-        //         .replaceAll(`\\[ \\boxed{`, '\n<span class="inline-block text-xl text-blue-500 bg-blue-50 dark:text-blue-400 dark:bg-blue-950 px-3 py-1 rounded">')
-        //         .replaceAll('} \\]', '</span>\n')
-        // }
+        if (content && content.startsWith('---')) {
+            const headerEnd = content.indexOf('---', 3)
+            const header = content.substring(3, headerEnd).trim()
+            content = '<div class="frontmatter">' + header + '</div>\n' + content.substring(headerEnd + 3)
+        }
         return this.marked.parse(content || '')
     }
 
@@ -409,4 +408,52 @@ export class AppContext {
         }
         return this.renderMarkdown(content)
     }
+
+    createChatContext({ request, thread, context }) {
+        if (!request.messages) request.messages = []
+        if (!request.metadata) request.metadata = {}
+        if (!context) context = {}
+        Object.assign(context, {
+            systemPrompt: '',
+            requiredSystemPrompts: [],
+        }, context)
+        return {
+            request,
+            thread,
+            context,
+        }
+    }
+
+    completeChatContext({ request, thread, context }) {
+
+        let existingSystemPrompt = request.messages.find(m => m.role === 'system')?.content
+
+        let existingMessages = request.messages.filter(m => m.role == 'assistant' || m.role == 'tool')
+        if (existingMessages.length) {
+            const messageTypes = {}
+            request.messages.forEach(m => {
+                messageTypes[m.role] = (messageTypes[m.role] || 0) + 1
+            })
+            const summary = JSON.stringify(messageTypes).replace(/"/g, '')
+            console.debug(`completeChatContext(${summary})`, request)
+            return
+        }
+
+        let newSystemPrompts = context.requiredSystemPrompts ?? []
+        if (context.systemPrompt) {
+            newSystemPrompts.push(context.systemPrompt)
+        }
+        if (existingSystemPrompt) {
+            newSystemPrompts.push(existingSystemPrompt)
+        }
+
+        let newSystemPrompt = newSystemPrompts.join('\n\n')
+        if (newSystemPrompt) {
+            // add or replace system prompt
+            request.messages = request.messages.filter(m => m.role !== 'system')
+            request.messages.unshift({ role: 'system', content: newSystemPrompt })
+        }
+
+        console.debug(`completeChatContext()`, request)
+    }
 }

llms/ui/modules/chat/ChatBody.mjs

@@ -29,6 +29,11 @@ function embedHtml(html) {
             }
         }
         const ro = new ResizeObserver(sendHeight);
+        window.addEventListener('message', (e) => {
+            if (e.data && e.data.type === 'stop-resize') {
+                ro.disconnect();
+            }
+        });
         window.addEventListener('load', () => {
             // Inject styles to prevent infinite loops
             const style = document.createElement('style');
@@ -346,6 +351,153 @@ export const MessageReasoning = {
     }
 }
 
+export const TextViewer = {
+    template: `
+        <div v-if="text.length > 200" class="relative group">
+            <div class="absolute top-0 right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center space-x-2 bg-gray-50/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-md px-2 py-1 z-10 border border-gray-200 dark:border-gray-700 shadow-sm">
+                <!-- Style Selector -->
+                <div class="relative flex items-center">
+                    <button type="button" @click="toggleDropdown" class="text-[10px] uppercase font-bold tracking-wider text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none flex items-center select-none">
+                        <span>{{ prefs || 'pre' }}</span>
+                        <svg class="mb-0.5 size-3 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg>
+                    </button>
+                    <!-- Popover -->
+                    <div v-if="dropdownOpen" class="absolute right-0 top-full w-28 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 py-1 z-20 overflow-hidden">
+                        <button 
+                            v-for="style in textStyles" 
+                            :key="style"
+                            @click="setStyle(style)"
+                            class="block w-full text-left px-3 py-1.5 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors uppercase tracking-wider font-medium"
+                            :class="{ 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20': prefs === style }"
+                        >
+                            {{ style }}
+                        </button>
+                    </div>
+                </div>
+
+                <div class="w-px h-3 bg-gray-300 dark:bg-gray-600"></div>
+
+                <!-- Text Length -->
+                <span class="text-xs text-gray-500 dark:text-gray-400 tabular-nums" :title="text.length + ' characters'">
+                    {{ $fmt.humanifyNumber(text.length) }}
+                </span>
+
+                <!-- Copy Button -->
+                <button type="button" @click="copyToClipboard" class="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 focus:outline-none p-0.5 rounded transition-colors" title="Copy to clipboard">
+                    <svg v-if="copied" class="size-4 text-green-600 dark:text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"/></svg>
+                    <svg v-else xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24"><path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"/></svg>
+                </button>
+
+                <!-- Maximize Toggle -->
+                <button type="button" @click="toggleMaximized" class="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 focus:outline-none p-0.5 rounded transition-colors" :title="isMaximized ? 'Minimize' : 'Maximize'">
+                    <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                        <path v-if="isMaximized" fill="currentColor" d="M9 9H3V7h4V3h2zm0 6H3v2h4v4h2zm12 0h-6v6h2v-4h4zm-6-6h6V7h-4V3h-2z"/>
+                        <path v-else fill="currentColor" d="M3 3h6v2H5v4H3zm0 18h6v-2H5v-4H3zm12 0h6v-6h-2v4h-4zm6-18h-6v2h4v4h2z"/>
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Content -->
+            <div :class="containerClass">
+                <div v-if="prefs === 'markdown'" class="prose prose-sm max-w-none dark:prose-invert">
+                    <div v-html="$fmt.markdown(text)"></div>
+                </div>
+                <div v-else-if="prefs === 'preview' && jsonValue">
+                    <HtmlFormat :value="jsonValue" />
+                </div>
+                <div v-else :class="['p-0.5', contentClass]">{{ text }}</div>
+            </div>
+        </div>
+        <div v-else class="whitespace-pre-wrap">{{ text }}</div>    
+    `,
+    props: {
+        prefsName: String,
+        text: String,
+    },
+    setup(props) {
+        const ctx = inject('ctx')
+        const prefs = ref('pre')
+        const maximized = ref({})
+        const dropdownOpen = ref(false)
+        const hash = computed(() => ctx.utils.hashString(props.text))
+        const jsonValue = computed(() => ctx.utils.toJsonObject(props.text))
+        const textStyles = computed(() => {
+            const ret = ['pre', 'normal', 'markdown']
+            if (jsonValue.value) {
+                ret.push('preview')
+            }
+            return ret
+        })
+
+        const toggleDropdown = () => {
+            dropdownOpen.value = !dropdownOpen.value
+        }
+
+        const copied = ref(false)
+        const copyToClipboard = () => {
+            navigator.clipboard.writeText(props.text)
+            copied.value = true
+            setTimeout(() => {
+                copied.value = false
+            }, 2000)
+        }
+
+        const setStyle = (style) => {
+            prefs.value = style
+            dropdownOpen.value = false
+            const key = props.prefsName || 'default'
+            const currentPrefs = ctx.getPrefs().textStyle || {}
+            ctx.setPrefs({
+                textStyle: {
+                    ...currentPrefs,
+                    [key]: style
+                }
+            })
+        }
+
+        onMounted(() => {
+            const current = ctx.getPrefs()
+            const key = props.prefsName || 'default'
+            if (current.textStyle && current.textStyle[key]) {
+                prefs.value = current.textStyle[key]
+            }
+        })
+
+        const isMaximized = computed(() => maximized.value[hash.value])
+
+        const toggleMaximized = () => {
+            maximized.value[hash.value] = !maximized.value[hash.value]
+        }
+
+        const containerClass = computed(() => {
+            return isMaximized.value ? 'w-full h-full' : 'max-h-60 overflow-y-auto'
+        })
+
+        const contentClass = computed(() => {
+            if (prefs.value === 'pre') return 'whitespace-pre-wrap font-mono text-xs'
+            if (prefs.value === 'normal') return 'font-sans text-sm'
+            return ''
+        })
+
+        return {
+            hash,
+            textStyles,
+            prefs,
+            jsonValue,
+            dropdownOpen,
+            toggleDropdown,
+            setStyle,
+            isMaximized,
+            toggleMaximized,
+
+            containerClass,
+            contentClass,
+            copied,
+            copyToClipboard
+        }
+    }
+}
+
 export const ToolArguments = {
     template: `
         <div ref="refArgs" v-if="dict" class="not-prose">
@@ -356,21 +508,8 @@ export const ToolArguments = {
                         <td data-arg="html" v-if="$utils.isHtml(v)" style="margin:0;padding:0;width:100%">
                             <div v-html="embedHtml(v)" class="w-full h-full"></div>
                         </td>
-                        <td data-arg="string" v-else-if="typeof v === 'string'" class="align-top py-2 px-4 text-sm whitespace-pre-wrap">
-                            <div v-if="v.length > 200" class="relative">
-                                <button type="button" @click="maximized[k] = !maximized[k]" class="absolute top-0 right-3 opacity-0 group-hover:opacity-50 transition-opacity duration-200 rounded focus:outline-none focus:ring-0">
-                                    <div class="flex items-center space-x-1">
-                                        <span class="text-xs text-gray-600 dark:text-gray-400" :title="v.length + ' characters'">{{ $fmt.humanifyNumber(v.length) }}</span>
-                                        <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                                            <path v-if="maximized[k]" fill="currentColor" d="M9 9H3V7h4V3h2zm0 6H3v2h4v4h2zm12 0h-6v6h2v-4h4zm-6-6h6V7h-4V3h-2z"/>
-                                            <path v-else fill="currentColor" d="M3 3h6v2H5v4H3zm0 18h6v-2H5v-4H3zm12 0h6v-6h-2v4h-4zm6-18h-6v2h4v4h2z"/>
-                                        </svg>
-                                    </div>
-                                </button>
-                                <div v-if="!maximized[k]" class="max-h-60 overflow-y-auto">{{ v }}</div>
-                                <div v-else class="w-full h-full">{{ v }}</div>
-                            </div>
-                            <div v-else>{{ v }}</div>
+                        <td data-arg="string" v-else-if="typeof v === 'string'" class="align-top py-2 px-4 text-sm">
+                            <TextViewer prefsName="toolArgs" :text="v" />
                         </td>
                         <td data-arg="value" v-else class="align-top py-2 px-4 text-sm whitespace-pre-wrap">
                             <HtmlFormat :value="v" :classes="$utils.htmlFormatClasses" />
@@ -402,11 +541,23 @@ export const ToolArguments = {
         })
 
         const handleMessage = (event) => {
+            console.log('handleMessage', event)
             if (event.data?.type === 'iframe-resize' && typeof event.data.height === 'number') {
                 const iframes = refArgs.value?.querySelectorAll('iframe')
                 iframes?.forEach(iframe => {
                     if (iframe.contentWindow === event.source) {
-                        iframe.style.height = (event.data.height + 30) + 'px'
+                        const messages = document.getElementById('messages')
+                        const maxHeight = messages ? messages.clientHeight : window.innerHeight
+                        const calculatedHeight = event.data.height + 30
+                        const targetHeight = Math.min(calculatedHeight, maxHeight)
+
+                        if (iframe.style.height !== targetHeight + 'px') {
+                            iframe.style.height = targetHeight + 'px'
+                        }
+
+                        if (calculatedHeight > maxHeight) {
+                            event.source.postMessage({ type: 'stop-resize' }, '*')
+                        }
                     }
                 })
             }
@@ -457,9 +608,11 @@ export const ToolOutput = {
                     </span>
                 </div>
             </div>
-            <div class="not-prose px-3 py-2">
-                <pre v-if="$ctx.prefs.toolFormat !== 'preview' || !hasJsonStructure(output.content)" class="tool-output">{{ output.content }}</pre>
-                <div v-else class="text-xs">
+            <div class="px-3 py-2">
+                <div v-if="$ctx.prefs.toolFormat !== 'preview' || !hasJsonStructure(output.content)">
+                    <TextViewer prefsName="toolOutput" :text="output.content" />
+                </div>
+                <div v-else class="not-prose text-xs">
                     <HtmlFormat v-if="tryParseJson(output.content)" :value="tryParseJson(output.content)" :classes="$utils.htmlFormatClasses" />
                     <div v-else class="text-gray-500 italic p-2">Invalid JSON content</div>
                 </div>
@@ -484,7 +637,7 @@ export const ChatBody = {
     template: `
         <div class="flex flex-col h-full">
             <!-- Messages Area -->
-            <div class="flex-1 overflow-y-auto" ref="messagesContainer">
+            <div id="messages" class="flex-1 overflow-y-auto" ref="messagesContainer">
                 <div class="mx-auto max-w-6xl px-4 py-6">
 
                     <div v-if="!$ai.hasAccess">
@@ -502,7 +655,7 @@ export const ChatBody = {
                         <ThreadHeader v-if="currentThread" :thread="currentThread" class="mb-2" />
                         <div class="space-y-2" v-if="currentThread?.messages?.length">
                             <div
-                                v-for="message in currentThread.messages.filter(x => x.role !== 'system')"
+                                v-for="message in currentThreadMessages"
                                 :key="message.timestamp"
                                 v-show="!(message.role === 'tool' && isToolLinked(message))"
                                 class="flex items-start space-x-3 group"
@@ -684,7 +837,7 @@ export const ChatBody = {
                             </div>
 
                             <!-- Thread error message bubble -->
-                            <div v-if="currentThread?.error" class="mt-8 flex items-center space-x-3">
+                            <div v-if="currentThread?.error" class="mt-8 flex items-center">
                                 <!-- Avatar outside the bubble -->
                                 <div class="flex-shrink-0">
                                     <div class="size-8 rounded-full bg-red-600 dark:bg-red-500 text-white flex items-center justify-center text-lg font-bold">
@@ -692,13 +845,17 @@ export const ChatBody = {
                                     </div>
                                 </div>
                                 <!-- Error bubble -->
-                                <div class="max-w-[85%] rounded-lg px-3 py-1 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 shadow-sm">
+                                <div class="ml-3 max-w-[85%] rounded-lg px-3 py-1 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 shadow-sm">
                                     <div class="flex items-start space-x-2">
                                         <div class="flex-1 min-w-0">
                                             <div v-if="currentThread.error" class="text-base mb-1">{{ currentThread.error }}</div>
                                         </div>
                                     </div>
                                 </div>
+                                <button type="button" @click="$chat.sendUserMessage('retry')" title="Retry request"
+                                    class="ml-1 px-3 py-1 rounded text-sm text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-900/30 border border-transparent hover:border-gray-300 dark:hover:border-gray-600 transition-all">
+                                    retry
+                                </button>
                             </div>
 
                             <!-- Error message bubble -->
@@ -732,7 +889,7 @@ export const ChatBody = {
                                 </div>
                             </div>
                         </div>
-                        <ThreadFooter v-if="$threads.threadDetails.value[currentThread.id]" :thread="$threads.threadDetails.value[currentThread.id]" />
+                        <ThreadFooter v-if="!$threads.watchingThread && $threads.threadDetails.value[currentThread.id]" :thread="$threads.threadDetails.value[currentThread.id]" />
                     </div>
                 </div>
             </div>
@@ -967,12 +1124,17 @@ export const ChatBody = {
             ctx.setPrefs(prefs.value)
         }
 
+        const ignoreUserMessages = ['proceed', 'retry']
+        const currentThreadMessages = computed(() =>
+            currentThread.value?.messages?.filter(x => x.role !== 'system' && !(x.role === 'user' && Array.isArray(x.content) && ignoreUserMessages.includes(x.content[0]?.text))))
+
         return {
             prefs,
             setPrefs,
             config,
             models,
             currentThread,
+            currentThreadMessages,
             selectedModel,
             selectedModelObj,
             messagesContainer,

llms/ui/modules/chat/index.mjs

@@ -2,7 +2,7 @@
 import { ref, watch, computed, nextTick, inject } from 'vue'
 import { $$, createElement, lastRightPart, ApiResult, createErrorStatus } from "@servicestack/client"
 import SettingsDialog, { useSettings } from './SettingsDialog.mjs'
-import { ChatBody, LightboxImage, TypeText, TypeImage, TypeAudio, TypeFile, ViewType, ViewTypes, ViewToolTypes, ToolArguments, ToolOutput, MessageUsage, MessageReasoning } from './ChatBody.mjs'
+import { ChatBody, LightboxImage, TypeText, TypeImage, TypeAudio, TypeFile, ViewType, ViewTypes, ViewToolTypes, TextViewer, ToolArguments, ToolOutput, MessageUsage, MessageReasoning } from './ChatBody.mjs'
 import { AppContext } from '../../ctx.mjs'
 
 const imageExts = 'png,webp,jpg,jpeg,gif,bmp,svg,tiff,ico'.split(',')
@@ -252,23 +252,14 @@ export function useChatPrompt(ctx) {
                 return ctx.createErrorResult({ message: `Model ${request.model || ''} not found`, errorCode: 'NotFound' })
             }
 
-            if (!request.messages) request.messages = []
-            if (!request.metadata) request.metadata = {}
-
             if (!thread) {
                 const title = getTextContent(request) || 'New Chat'
                 thread = await ctx.threads.startNewThread({ title, model, redirect })
             }
 
-            const threadId = thread?.id
-
-            const ctxRequest = {
-                request,
-                thread,
-            }
+            const ctxRequest = ctx.createChatContext({ request, thread })
             ctx.chatRequestFilters.forEach(f => f(ctxRequest))
-
-            console.debug('completion.request', request)
+            ctx.completeChatContext(ctxRequest)
 
             // Send to API
             const startTime = Date.now()
@@ -359,6 +350,105 @@ export function useChatPrompt(ctx) {
         ctx.setState({ selectedAspectRatio })
     }
 
+    async function sendUserMessage(text, { model, redirect = true } = {}) {
+        ctx.clearError()
+
+        if (!model) {
+            model = getSelectedModel()
+        }
+
+        let content = createContent({ text, files: attachedFiles.value })
+
+        let thread
+
+        // Create thread if none exists
+        if (!ctx.threads.currentThread.value) {
+            thread = await ctx.threads.startNewThread({ model, redirect })
+        } else {
+            thread = ctx.threads.currentThread.value
+        }
+
+        let threadId = thread.id
+        let messages = thread.messages || []
+        if (!threadId) {
+            console.error('No thread ID found', thread, ctx.threads.currentThread.value)
+            return
+        }
+
+        // Handle Editing / Redo Logic
+        const editingMsg = editingMessage.value
+        if (editingMsg) {
+            let messageIndex = messages.findIndex(m => m.timestamp === editingMsg)
+            if (messageIndex == -1) {
+                messageIndex = messages.findLastIndex(m => m.role === 'user')
+            }
+            console.log('Editing message', editingMsg, messageIndex, messages)
+
+            if (messageIndex >= 0) {
+                messages[messageIndex].content = content
+                // Truncate messages to only include up to the edited message
+                messages.length = messageIndex + 1
+            } else {
+                messages.push({
+                    timestamp: new Date().valueOf(),
+                    role: 'user',
+                    content,
+                })
+            }
+        } 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 ''
+            }
+            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,
+                })
+            }
+        }
+
+        const request = createRequest({ 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)
+        }
+
+        const api = await ctx.threads.queueChat({ request, thread })
+        if (api.response) {
+            // success
+            editingMessage.value = null
+            attachedFiles.value = []
+            thread = api.response
+            ctx.threads.replaceThread(thread)
+        } else {
+            ctx.setError(api.error)
+        }
+    }
+
     return {
         completion,
         createContent,
@@ -383,6 +473,7 @@ export function useChatPrompt(ctx) {
         getTextContent,
         getAnswer,
         selectAspectRatio,
+        sendUserMessage,
     }
 }
 
@@ -499,6 +590,7 @@ const ChatPrompt = {
             hasAudio,
             hasFile,
             getTextContent,
+            sendUserMessage,
         } = ctx.chat
 
         const fileInput = ref(null)
@@ -640,8 +732,6 @@ const ChatPrompt = {
             if (!messageText.value?.trim() && !hasImage() && !hasAudio() && !hasFile()) return
             if (ctx.threads.isWatchingThread.value || !props.model) return
 
-            ctx.clearError()
-
             // 1. Construct Structured Content (Text + Attachments)
             let text = messageText.value.trim()
 
@@ -654,96 +744,8 @@ const ChatPrompt = {
             }
 
             messageText.value = ''
-            let content = ctx.chat.createContent({ text, files: ctx.chat.attachedFiles.value })
-
-            let thread
-
-            // Create thread if none exists
-            if (!ctx.threads.currentThread.value) {
-                thread = await ctx.threads.startNewThread({ model: props.model, redirect: true })
-            } else {
-                thread = ctx.threads.currentThread.value
-            }
-
-            let threadId = thread.id
-            let messages = thread.messages || []
-            if (!threadId) {
-                console.error('No thread ID found', thread, ctx.threads.currentThread.value)
-                return
-            }
-
-            // 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)
-
-                if (messageIndex >= 0) {
-                    messages[messageIndex].content = content
-                    // Truncate messages to only include up to the edited message
-                    messages.length = messageIndex + 1
-                } else {
-                    messages.push({
-                        timestamp: new Date().valueOf(),
-                        role: 'user',
-                        content,
-                    })
-                }
-            } 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 ''
-                }
-                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,
-                    })
-                }
-            }
-
-            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)
-            }
-
-            const api = await ctx.threads.queueChat({ request, thread })
-            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)
-            }
+            await sendUserMessage(text, { model: props.model })
 
             // Restore focus to the textarea
             nextTick(() => {
@@ -828,6 +830,7 @@ const ChatPrompt = {
             addNewLine,
             onKeyDown,
             imageAspectRatios,
+            sendUserMessage,
         }
     }
 }
@@ -935,6 +938,7 @@ export default {
             ViewType,
             ViewTypes,
             ViewToolTypes,
+            TextViewer,
             ToolArguments,
             ToolOutput,
 

llms/ui/tailwind.input.css

@@ -166,6 +166,16 @@
         overflow: auto !important;
     }
 
+    .prose .frontmatter {
+        white-space: pre-wrap;
+        word-break: break-all;
+        margin-bottom: 1em;
+        padding: 0.5rem;
+        font-size: 0.8rem !important;
+        background: #f9fafb;
+        border: 1px solid #e5e7eb;
+    }
+
     /* highlight.js - vs.css */
     .hljs {
         background: white;