llms-py 3.0.6__py3-none-any.whl → 3.0.8__py3-none-any.whl

llms/ui/modules/chat/ChatBody.mjs

@@ -1,7 +1,252 @@
 import { ref, computed, nextTick, watch, onMounted, onUnmounted, inject } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 
-const MessageUsage = {
+function tryParseJson(str) {
+    try {
+        return JSON.parse(str)
+    } catch (e) {
+        return null
+    }
+}
+function hasJsonStructure(str) {
+    return tryParseJson(str) != null
+}
+
+export const TypeText = {
+    template: `
+        <div v-if="text.type === 'text'">
+            <div v-html="html"></div>
+        </div>
+    `,
+    props: {
+        text: {
+            type: Object,
+            required: true
+        }
+    },
+    setup(props) {
+        const ctx = inject('ctx')
+        const html = computed(() => {
+            try {
+                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 { html }
+    }
+}
+
+export const LightboxImage = {
+    template: `
+    <div>
+      <!-- Thumbnail -->
+      <div
+        class="cursor-zoom-in hover:opacity-90 transition-opacity"
+        @click="isOpen = true"
+      >
+        <img
+          :src="src"
+          :alt="alt"
+          :width="width"
+          :height="height"
+          :class="imageClass"
+        />
+      </div>
+
+      <!-- Lightbox Modal -->
+      <div v-if="isOpen"
+        class="fixed inset-0 z-100 flex items-center justify-center bg-black/90 p-4"
+        @click="isOpen = false"
+      >
+        <button type="button"
+          class="absolute top-4 right-4 p-2 text-white hover:bg-white/10 rounded-lg transition-colors"
+          @click="isOpen = false"
+          aria-label="Close lightbox"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+        </button>
+        <div class="relative max-w-7xl max-h-[90vh] w-full h-full flex items-center justify-center">
+          <img
+            :src="src"
+            :alt="alt"
+            :width="width"
+            :height="height"
+            class="max-w-full max-h-full w-auto h-auto object-contain rounded"
+            @click.stop
+          />
+        </div>
+      </div>
+    </div>
+    `,
+    props: {
+        src: {
+            type: String,
+            required: true
+        },
+        alt: {
+            type: String,
+            default: ''
+        },
+        width: {
+            type: [Number, String],
+            default: undefined
+        },
+        height: {
+            type: [Number, String],
+            default: undefined
+        },
+        imageClass: {
+            type: String,
+            default: 'max-w-[400px] max-h-96 rounded-lg border border-gray-200 dark:border-gray-700 object-contain bg-gray-50 dark:bg-gray-900 shadow-sm transition-transform hover:scale-[1.02]'
+        }
+    },
+    setup(props) {
+        const ctx = inject('ctx')
+        const isOpen = ref(false)
+
+        let sub
+        onMounted(() => {
+            sub = ctx.events.subscribe(`keydown:Escape`, () => isOpen.value = false)
+        })
+        onUnmounted(() => sub?.unsubscribe())
+
+        return {
+            isOpen
+        }
+    }
+}
+
+export const TypeImage = {
+    template: `
+        <div v-if="image.type === 'image_url'">
+            <LightboxImage :src="$ctx.resolveUrl(image.image_url.url)" />
+        </div>
+    `,
+    props: {
+        image: {
+            type: Object,
+            required: true
+        }
+    }
+}
+
+export const TypeAudio = {
+    template: `
+        <div v-if="audio.type === 'audio_url'">
+            <slot></slot>
+            <audio controls :src="$ctx.resolveUrl(audio.audio_url.url)" class="h-8 w-64"></audio>
+        </div>
+    `,
+    props: {
+        audio: {
+            type: Object,
+            required: true
+        }
+    }
+}
+
+export const TypeFile = {
+    template: `
+        <a 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>
+        </a>
+    `,
+    props: {
+        file: {
+            type: Object,
+            required: true
+        }
+    }
+}
+
+export const ViewType = {
+    template: `
+    <div class="flex items-center gap-2 p-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+        <TypeText v-if="result.type === 'text'" :text="result" />
+        <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>
+            <HtmlFormat :value="result" :classes="$utils.htmlFormatClasses" />
+        </div>
+    </div>
+    `,
+    props: {
+        result: {
+            type: Object,
+            required: true
+        }
+    }
+}
+export const ViewTypes = {
+    template: `
+    <div v-if="results?.length" class="flex flex-col gap-2">
+        <div v-if="texts.length > 0" :class="cls">
+            <div v-if="hasResources" v-for="(text, i) in texts" :key="'raw-' + i" class="text-xs whitespace-pre-wrap">{{text.text}}</div>
+            <TypeText v-else v-for="(text, i) in texts" :key="'text-' + i" :text="text" />
+        </div>
+        <div v-if="images.length > 0" :class="cls">
+            <TypeImage v-for="(image, i) in images" :key="'image-' + i" :image="image" />
+        </div>
+        <div v-if="audios.length > 0" :class="cls">
+            <TypeAudio v-for="(audio, i) in audios" :key="'audio-' + i" :audio="audio" />
+        </div>
+        <div v-if="files.length > 0" :class="cls">
+            <TypeFile v-for="(file, i) in files" :key="'file-' + i" :file="file" />
+        </div>
+        <div v-if="others.length > 0" :class="cls">
+            <HtmlFormat v-for="(other, i) in others" :key="'other-' + i" :value="other" :classes="$utils.htmlFormatClasses" />
+        </div>
+    </div>
+    `,
+    props: {
+        results: {
+            type: Array,
+            required: true
+        }
+    },
+    setup(props) {
+        const cls = "flex items-center gap-2 p-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800"
+        const texts = computed(() => props.results.filter(r => r.type === 'text'))
+        const images = computed(() => props.results.filter(r => r.type === 'image_url'))
+        const audios = computed(() => props.results.filter(r => r.type === 'audio_url'))
+        const files = computed(() => props.results.filter(r => r.type === 'file'))
+        const others = computed(() => props.results.filter(r => r.type !== 'text' && r.type !== 'image_url' && r.type !== 'audio_url' && r.type !== 'file'))
+        // If has resources, render as plain-text to avoid rendering resources multiple times
+        const hasResources = computed(() => images.value.length > 0 || audios.value.length > 0 || files.value.length > 0 || others.value.length > 0)
+        return { cls, texts, images, audios, files, others, hasResources }
+    }
+}
+export const ViewToolTypes = {
+    template: `<ViewTypes v-if="results?.length" :results="results" />`,
+    props: {
+        output: Object,
+    },
+    setup(props) {
+        const results = computed(() => {
+            const ret = []
+            if (!props.output) return ret
+            if (props.output.images) {
+                ret.push(...props.output.images)
+            }
+            if (props.output.audios) {
+                ret.push(...props.output.audios)
+            }
+            if (props.output.files) {
+                ret.push(...props.output.files)
+            }
+            return ret
+        })
+        return { results }
+    }
+}
+
+
+export const MessageUsage = {
     template: `
     <div class="mt-2 text-xs opacity-70">                                        
         <span v-if="message.model" @click="$chat.setSelectedModel({ name: message.model })" title="Select model"><span class="cursor-pointer hover:underline">{{ message.model }}</span> &#8226; </span>
@@ -10,7 +255,7 @@ const MessageUsage = {
             &#8226;
             {{ $fmt.humanifyNumber(usage.tokens) }} tokens
             <span v-if="usage.cost">&#183; {{ $fmt.tokenCostLong(usage.cost) }}</span>
-            <span v-if="usage.duration"> in {{ $fmt.humanifyMs(usage.duration) }}</span>
+            <span v-if="usage.duration"> in {{ $fmt.humanifyMs(usage.duration * 1000) }}</span>
         </span>
     </div>    
     `,
@@ -20,14 +265,14 @@ const MessageUsage = {
     }
 }
 
-const MessageReasoning = {
+export const MessageReasoning = {
     template: `
     <div class="mt-2 mb-2">
-        <button type="button" @click="toggleReasoning(message.id)" class="text-xs text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 flex items-center space-x-1">
-            <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" :class="isReasoningExpanded(message.id) ? 'transform rotate-90' : ''"><path fill="currentColor" d="M7 5l6 5l-6 5z"/></svg>
-            <span>{{ isReasoningExpanded(message.id) ? 'Hide reasoning' : 'Show reasoning' }}</span>
+        <button type="button" @click="toggleReasoning(message.timestamp)" class="text-xs text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 flex items-center space-x-1">
+            <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" :class="isReasoningExpanded(message.timestamp) ? 'transform rotate-90' : ''"><path fill="currentColor" d="M7 5l6 5l-6 5z"/></svg>
+            <span>{{ isReasoningExpanded(message.timestamp) ? 'Hide reasoning' : 'Show reasoning' }}</span>
         </button>
-        <div v-if="isReasoningExpanded(message.id)" class="reasoning mt-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 p-2">
+        <div v-if="isReasoningExpanded(message.timestamp)" class="reasoning mt-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 p-2">
             <div v-if="typeof reasoning === 'string'" v-html="$fmt.markdown(reasoning)" class="prose prose-xs max-w-none dark:prose-invert"></div>
             <pre v-else class="text-xs whitespace-pre-wrap overflow-x-auto">{{ formatReasoning(reasoning) }}</pre>
         </div>
@@ -60,11 +305,125 @@ const MessageReasoning = {
     }
 }
 
-export default {
-    components: {
-        MessageUsage,
-        MessageReasoning,
+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%">
+                            <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">
+                            <HtmlFormat :value="v" :classes="$utils.htmlFormatClasses" />
+                        </td>
+                    </tr>
+                </table>            
+            </div>
+        </div>
+        <div v-else-if="list" class="not-prose px-3 py-2">
+            <HtmlFormat :value="list" :classes="$utils.htmlFormatClasses" />
+        </div>
+        <pre v-else-if="!isEmpty(value)" class="tool-arguments">{{ value }}</pre>
+    `,
+    props: {
+        value: String,
     },
+    setup(props) {
+        const refArgs = ref()
+        function isEmpty(v) {
+            return !v || v === '{}' || v === '[]' || v === 'null' || v === 'undefined' || v === '""' || v === "''" || v === "``"
+        }
+        function embedHtml(html) {
+            const resizeScript = `<script>
+                let lastH = 0;
+                const sendHeight = () => {
+                    const body = document.body;
+                    if (!body) return;
+                    // Force re-calc
+                    const h = document.documentElement.getBoundingClientRect().height;
+                    if (Math.abs(h - lastH) > 2) {
+                        lastH = h;
+                        window.parent.postMessage({ type: 'iframe-resize', height: h }, '*');
+                    }
+                }
+                const ro = new ResizeObserver(sendHeight);
+                window.addEventListener('load', () => {
+                    // Inject styles to prevent infinite loops
+                    const style = document.createElement('style');
+                    style.textContent = 'html, body { height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; }';
+                    document.head.appendChild(style);
+                    
+                    const body = document.body;
+                    if (body) {
+                        ro.observe(body);
+                        ro.observe(document.documentElement);
+                        sendHeight();
+                    }
+                });
+            <\/script>`
+
+            const escaped = (html + resizeScript)
+                .replace(/&/g, '&amp;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+                .replace(/"/g, '&quot;')
+                .replace(/'/g, '&#39;')
+            return `<iframe srcdoc="${escaped}" sandbox="allow-scripts" style="width:100%;height:auto;border:none;"></iframe>`
+        }
+        const dict = computed(() => {
+            if (isEmpty(props.value)) return null
+            const ret = tryParseJson(props.value)
+            return typeof ret === 'object' && !Array.isArray(ret) ? ret : null
+        })
+        const list = computed(() => {
+            if (isEmpty(props.value)) return null
+            const ret = tryParseJson(props.value)
+            return Array.isArray(ret) && ret.length > 0 ? ret : null
+        })
+
+        const 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'
+                    }
+                })
+            }
+        }
+
+        onMounted(() => {
+            window.addEventListener('message', handleMessage)
+            const hasIframes = refArgs.value?.querySelector('iframe')
+            if (hasIframes) {
+                refArgs.value.classList.add('has-iframes')
+            }
+        })
+
+        onUnmounted(() => {
+            window.removeEventListener('message', handleMessage)
+        })
+
+        return {
+            refArgs,
+            dict,
+            list,
+            isEmpty,
+            embedHtml,
+        }
+    }
+}
+
+export const ToolOutput = {
+    template: ``,
+    setup(props) {
+
+    }
+}
+
+export const ChatBody = {
     template: `
         <div class="flex flex-col h-full">
             <!-- Messages Area -->
@@ -87,7 +446,7 @@ export default {
                         <div class="space-y-2" v-if="currentThread?.messages?.length">
                             <div
                                 v-for="message in currentThread.messages.filter(x => x.role !== 'system')"
-                                :key="message.id"
+                                :key="message.timestamp"
                                 v-show="!(message.role === 'tool' && isToolLinked(message))"
                                 class="flex items-start space-x-3 group"
                                 :class="message.role === 'user' ? 'flex-row-reverse space-x-reverse' : ''"
@@ -109,7 +468,7 @@ export default {
                                     </div>
 
                                     <!-- Delete button (shown on hover) -->
-                                    <button type="button" @click.stop="$threads.deleteMessageFromThread(currentThread.id, message.id)"
+                                    <button type="button" @click.stop="$threads.deleteMessageFromThread(currentThread.id, message.timestamp)"
                                         class="mx-auto opacity-0 group-hover:opacity-100 mt-2 rounded text-gray-400 dark:text-gray-500 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 transition-all"
                                         title="Delete message">
                                         <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -162,11 +521,7 @@ export default {
                                                 <span class="text-[10px] uppercase tracking-wider text-gray-400 font-medium">Tool Call</span>
                                             </div>
                                             
-                                            <!-- Arguments -->
-                                            <div v-if="tool.function.arguments && tool.function.arguments != '{}'" class="not-prose px-3 py-2">
-                                                <HtmlFormat v-if="hasJsonStructure(tool.function.arguments)" :value="tryParseJson(tool.function.arguments)" :classes="customHtmlClasses" />
-                                                <pre v-else class="tool-arguments">{{ tool.function.arguments }}</pre>
-                                            </div>
+                                            <ToolArguments :value="tool.function.arguments" />
 
                                             <!-- Tool Output (Nested) -->
                                             <div v-if="getToolOutput(tool.id)" class="border-t border-gray-200 dark:border-gray-700">
@@ -192,10 +547,11 @@ export default {
                                                 <div class="not-prose px-3 py-2">
                                                     <pre v-if="prefs.toolFormat !== 'preview' || !hasJsonStructure(getToolOutput(tool.id).content)" class="tool-output">{{ getToolOutput(tool.id).content }}</pre>
                                                     <div v-else class="text-xs">
-                                                        <HtmlFormat v-if="tryParseJson(getToolOutput(tool.id).content)" :value="tryParseJson(getToolOutput(tool.id).content)" :classes="customHtmlClasses" />
+                                                        <HtmlFormat v-if="tryParseJson(getToolOutput(tool.id).content)" :value="tryParseJson(getToolOutput(tool.id).content)" :classes="$utils.htmlFormatClasses" />
                                                         <div v-else class="text-gray-500 italic p-2">Invalid JSON content</div>
                                                     </div>
                                                 </div>
+                                                <ViewToolTypes :output="getToolOutput(tool.id)" />
                                             </div>
                                         </div>
                                     </div>
@@ -222,45 +578,24 @@ export default {
                                     <!-- Assistant Images -->
                                     <div v-if="message.images && message.images.length > 0" class="mt-2 flex flex-wrap gap-2">
                                         <template v-for="(img, i) in message.images" :key="i">
-                                            <div v-if="img.type === 'image_url'" class="group relative cursor-pointer" @click="openLightbox(resolveUrl(img.image_url.url))">
-                                                <img :src="resolveUrl(img.image_url.url)" class="max-w-[400px] max-h-96 rounded-lg border border-gray-200 dark:border-gray-700 object-contain bg-gray-50 dark:bg-gray-900 shadow-sm transition-transform hover:scale-[1.02]" />
-                                            </div>
+                                            <TypeImage v-if="img.type === 'image_url'" :image="img" />
                                         </template>
                                     </div>
 
                                     <!-- Assistant Audios -->
                                     <div v-if="message.audios && message.audios.length > 0" class="mt-2 flex flex-wrap gap-2">
                                         <template v-for="(audio, i) in message.audios" :key="i">
-                                            <div v-if="audio.type === 'audio_url'" class="flex items-center gap-2 p-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
-                                                <audio controls :src="resolveUrl(audio.audio_url.url)" class="h-8 w-64"></audio>
-                                            </div>
+                                            <TypeAudio v-if="audio.type === 'audio_url'" :audio="audio" 
+                                               class="flex items-center gap-2 p-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+                                                <svg class="w-5 h-5 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
+                                            </TypeAudio>
                                         </template>
                                     </div>
 
                                     <!-- User Message with separate attachments -->
                                     <div v-else-if="message.role !== 'assistant' && message.role !== 'tool'">
-                                        <div v-html="$fmt.markdown(message.content)" class="prose prose-sm max-w-none dark:prose-invert break-words"></div>
-                                        
-                                        <!-- Attachments Grid -->
-                                        <div v-if="hasAttachments(message)" class="mt-2 flex flex-wrap gap-2">
-                                            <template v-for="(part, i) in getAttachments(message)" :key="i">
-                                                <!-- Image -->
-                                                <div v-if="part.type === 'image_url'" class="group relative cursor-pointer" @click="openLightbox(part.image_url.url)">
-                                                    <img :src="part.image_url.url" class="max-w-[400px] max-h-96 rounded-lg border border-gray-200 dark:border-gray-700 object-contain bg-gray-50 dark:bg-gray-900 shadow-sm transition-transform hover:scale-[1.02]" />
-                                                </div>
-                                                <!-- Audio -->
-                                                <div v-else-if="part.type === 'input_audio'" class="flex items-center gap-2 p-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
-                                                    <svg class="w-5 h-5 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
-                                                    <audio controls :src="part.input_audio.data" class="h-8 w-48"></audio>
-                                                </div>
-                                                <!-- File -->
-                                                <a v-else-if="part.type === 'file'" :href="part.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">{{ part.file.filename || 'Attachment' }}</span>
-                                                </a>
-                                            </template>
-                                        </div>
+                                        <div v-html="$fmt.content(message.content)" class="prose prose-sm max-w-none dark:prose-invert break-words"></div>
+                                        <ViewTypes :results="getAttachments(message)" />
                                     </div>
 
                                     <MessageUsage :message="message" :usage="getMessageUsage(message)" />
@@ -289,7 +624,7 @@ export default {
 
                             <div v-if="currentThread.stats && currentThread.stats.outputTokens" class="text-center text-gray-500 dark:text-gray-400 text-sm">
                                 <span :title="$fmt.statsTitle(currentThread.stats)">
-                                    {{ currentThread.stats.cost ? $fmt.costLong(currentThread.stats.cost) + '  for ' : '' }} {{ $fmt.humanifyNumber(currentThread.stats.inputTokens) }} → {{ $fmt.humanifyNumber(currentThread.stats.outputTokens) }} tokens over {{ currentThread.stats.requests }} request{{currentThread.stats.requests===1?'':'s'}} in {{ $fmt.humanifyMs(currentThread.stats.duration) }}
+                                    {{ currentThread.stats.cost ? $fmt.costLong(currentThread.stats.cost) + '  for ' : '' }} {{ $fmt.humanifyNumber(currentThread.stats.inputTokens) }} → {{ $fmt.humanifyNumber(currentThread.stats.outputTokens) }} tokens over {{ currentThread.stats.requests }} request{{currentThread.stats.requests===1?'':'s'}} in {{ $fmt.humanifyMs(currentThread.stats.duration * 1000) }}
                                 </span>
                             </div>
 
@@ -377,21 +712,6 @@ export default {
             <div v-if="$ai.hasAccess" :class="$ctx.cls('chat-input', 'flex-shrink-0 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-6 py-4')">
                 <ChatPrompt :model="$chat.getSelectedModel()" />
             </div>
-            
-            <!-- Lightbox -->
-            <div v-if="lightboxUrl" class="fixed inset-0 z-[100] bg-black/90 flex items-center justify-center p-4 cursor-pointer" 
-                @click="closeLightbox">
-                <button type="button" @click="closeLightbox"
-                    class="absolute top-4 right-4 text-white/70 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors z-[101]"
-                    title="Close">
-                    <svg class="size-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                </button>
-                <div class="relative max-w-full max-h-full">
-                    <img :src="lightboxUrl" class="max-w-full max-h-[90vh] object-contain rounded-sm shadow-2xl" @click.stop />
-                </div>
-            </div>
         </div>
     `,
     setup() {
@@ -414,14 +734,6 @@ export default {
         })
         const messagesContainer = ref(null)
         const copying = ref(null)
-        const lightboxUrl = ref(null)
-
-        const openLightbox = (url) => {
-            lightboxUrl.value = url
-        }
-        const closeLightbox = () => {
-            lightboxUrl.value = null
-        }
 
         const resolveUrl = (url) => {
             if (url && url.startsWith('~')) {
@@ -595,10 +907,7 @@ export default {
         }
 
         let sub
-        onMounted(() => {
-            sub = ctx.events.subscribe(`keydown:Escape`, closeLightbox)
-            setTimeout(ctx.chat.addCopyButtons, 1)
-        })
+        onMounted(() => setTimeout(ctx.chat.addCopyButtons, 1))
         onUnmounted(() => sub?.unsubscribe())
 
         const getToolOutput = (toolCallId) => {
@@ -624,34 +933,6 @@ export default {
             return currentThread.value?.messages?.some(m => m.role === 'assistant' && m.tool_calls?.some(tc => tc.id === message.tool_call_id))
         }
 
-        const tryParseJson = (str) => {
-            try {
-                return JSON.parse(str)
-            } catch (e) {
-                return null
-            }
-        }
-        const hasJsonStructure = (str) => {
-            return tryParseJson(str) != null
-        }
-        /**
-         * @param {object|array} type 
-         * @param {'div'|'table'|'thead'|'th'|'tr'|'td'} tag 
-         * @param {number} depth 
-         * @param {string} cls 
-         * @param {number} index 
-        */
-        const customHtmlClasses = (type, tag, depth, cls, index) => {
-            cls = cls.replace('shadow ring-1 ring-black/5 md:rounded-lg', '')
-            if (tag == 'th') {
-                cls += ' lowercase'
-            }
-            if (tag == 'td') {
-                cls += ' whitespace-pre-wrap'
-            }
-            return cls
-        }
-
         function setPrefs(o) {
             Object.assign(prefs.value, o)
             ctx.setPrefs(prefs.value)
@@ -673,16 +954,12 @@ export default {
             configUpdated,
             getAttachments,
             hasAttachments,
-            lightboxUrl,
-            openLightbox,
-            closeLightbox,
             resolveUrl,
             getMessageUsage,
             getToolOutput,
             isToolLinked,
             tryParseJson,
             hasJsonStructure,
-            customHtmlClasses,
         }
     }
 }

llms/ui/modules/chat/index.mjs

@@ -1,8 +1,8 @@
 
 import { ref, watch, computed, nextTick, inject } from 'vue'
-import { $$, createElement, lastRightPart, ApiResult, createErrorStatus, pick } from "@servicestack/client"
+import { $$, createElement, lastRightPart, ApiResult, createErrorStatus } from "@servicestack/client"
 import SettingsDialog, { useSettings } from './SettingsDialog.mjs'
-import ChatBody from './ChatBody.mjs'
+import { ChatBody, LightboxImage, TypeText, TypeImage, TypeAudio, TypeFile, ViewType, ViewTypes, ViewToolTypes, ToolArguments, ToolOutput, MessageUsage, MessageReasoning } from './ChatBody.mjs'
 import { AppContext } from '../../ctx.mjs'
 
 const imageExts = 'png,webp,jpg,jpeg,gif,bmp,svg,tiff,ico'.split(',')
@@ -466,11 +466,11 @@ const ChatPrompt = {
                     </div>
 
                     <!-- Image Aspect Ratio Selector -->
-                    <div v-if="$chat.canGenerateImage(model)" class="min-w-[120px]">
+                    <div v-if="$chat.canGenerateImage(model)">
                         <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">
-                                {{ size }} ({{ ratio }})
+                                {{ ratio }}
                             </option>
                         </select>
                     </div>
@@ -923,7 +923,21 @@ export default {
         ctx.components({
             SettingsDialog,
             ChatPrompt,
+
             ChatBody,
+            MessageUsage,
+            MessageReasoning,
+            LightboxImage,
+            TypeText,
+            TypeImage,
+            TypeAudio,
+            TypeFile,
+            ViewType,
+            ViewTypes,
+            ViewToolTypes,
+            ToolArguments,
+            ToolOutput,
+
             HomeTools,
             Home,
             ThreadHeader,