llms-py 3.0.10__py3-none-any.whl → 3.0.18__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');
@@ -55,8 +60,8 @@ function embedHtml(html) {
 
 export const TypeText = {
     template: `
-        <div v-if="text.type === 'text'">
-            <div v-html="html"></div>
+        <div data-type="text" v-if="text.type === 'text'">
+            <div v-html="html?.trim()" class="whitespace-pre-wrap"></div>
         </div>
     `,
     props: {
@@ -72,7 +77,7 @@ export const TypeText = {
                 return ctx.fmt.markdown(props.text.text)
             } catch (e) {
                 console.error('TypeText: markdown', e)
-                return `<div class="whitespace-pre-wrap">${props.text.text}</div>`
+                return `<div>${props.text.text}</div>`
             }
         })
         return { html }
@@ -161,7 +166,7 @@ export const LightboxImage = {
 
 export const TypeImage = {
     template: `
-        <div v-if="image.type === 'image_url'">
+        <div data-type="image" v-if="image.type === 'image_url'">
             <LightboxImage :src="$ctx.resolveUrl(image.image_url.url)" />
         </div>
     `,
@@ -175,7 +180,7 @@ export const TypeImage = {
 
 export const TypeAudio = {
     template: `
-        <div v-if="audio.type === 'audio_url'">
+        <div data-type="audio" v-if="audio.type === 'audio_url'">
             <slot></slot>
             <audio controls :src="$ctx.resolveUrl(audio.audio_url.url)" class="h-8 w-64"></audio>
         </div>
@@ -190,7 +195,7 @@ export const TypeAudio = {
 
 export const TypeFile = {
     template: `
-        <a v-if="file.type === 'file'" :href="$ctx.resolveUrl(file.file.file_data)" target="_blank" 
+        <a data-type="file" v-if="file.type === 'file'" :href="$ctx.resolveUrl(file.file.file_data)" target="_blank" 
             class="flex items-center gap-2 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-sm text-blue-600 dark:text-blue-400 hover:underline">
             <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
             <span class="max-w-xs truncate">{{ file.file.filename || 'Attachment' }}</span>
@@ -211,7 +216,7 @@ export const ViewType = {
         <TypeImage v-else-if="result.type === 'image_url'" :image="result" />
         <TypeAudio v-else-if="result.type === 'audio_url'" :audio="result" />
         <TypeFile v-else-if="result.type === 'file'" :file="result" />
-        <div v-else>
+        <div data-type="other" v-else>
             <HtmlFormat :value="result" :classes="$utils.htmlFormatClasses" />
         </div>
     </div>
@@ -346,17 +351,167 @@ 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">
             <div class="prose html-format">
                 <table class="table-object border-none">
                     <tr v-for="(v, k) in dict" :key="k">
-                        <td class="align-top py-2 px-4 text-left text-sm font-medium tracking-wider whitespace-nowrap lowercase">{{ k }}</td>
-                        <td v-if="$utils.isHtml(v)" style="margin:0;padding:0;width:100%">
+                        <td data-arg="name" class="align-top py-2 px-4 text-left text-sm font-medium tracking-wider whitespace-nowrap lowercase">{{ k }}</td>
+                        <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 v-else class="align-top py-2 px-4 text-sm whitespace-pre-wrap">
+                        <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" />
                         </td>
                     </tr>
@@ -373,6 +528,7 @@ export const ToolArguments = {
     },
     setup(props) {
         const refArgs = ref()
+        const maximized = ref({})
         const dict = computed(() => {
             if (isEmpty(props.value)) return null
             const ret = tryParseJson(props.value)
@@ -385,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' }, '*')
+                        }
                     }
                 })
             }
@@ -409,6 +577,7 @@ export const ToolArguments = {
 
         return {
             refArgs,
+            maximized,
             dict,
             list,
             isEmpty,
@@ -439,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>
@@ -466,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">
@@ -484,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"
@@ -524,7 +695,7 @@ export const ChatBody = {
                                         : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700'"
                                 >
                                     <!-- Copy button in top right corner -->
-                                    <button
+                                    <button v-if="message.content"
                                         type="button"
                                         @click="copyMessageContent(message)"
                                         class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-1 rounded hover:bg-black/10 dark:hover:bg-white/10 focus:outline-none focus:ring-0"
@@ -666,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">
@@ -674,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 -->
@@ -714,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>
@@ -949,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,