llms-py 3.0.0b3__py3-none-any.whl → 3.0.0b5__py3-none-any.whl

llms/ui/modules/analytics.mjs

@@ -1,4 +1,4 @@
-import { ref, onMounted, watch, nextTick, computed, inject } from 'vue'
+import { ref, watch, nextTick, computed, inject, onMounted, onUnmounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { leftPart } from '@servicestack/client'
 import { Chart, registerables } from "chart.js"
@@ -106,7 +106,7 @@ const MonthSelector = {
 
 export const Analytics = {
     template: `
-        <div class="flex flex-col h-full w-full">
+        <div class="flex flex-col w-full">
             <!-- Header -->
             <div class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-2 sm:px-4 py-3">
                 <div
@@ -150,9 +150,9 @@ export const Analytics = {
             </div>
 
             <!-- Content -->
-            <div class="flex-1 overflow-auto bg-gray-50 dark:bg-gray-900" :class="activeTab === 'activity' ? 'p-0' : 'p-4'">
+            <div class="flex-1 bg-gray-50 dark:bg-gray-900" :class="activeTab === 'activity' ? 'p-0' : 'p-4'">
 
-                <div :class="activeTab === 'activity' ? 'h-full' : 'max-w-6xl mx-auto'">
+                <div :class="activeTab === 'activity' ? '' : 'max-w-6xl mx-auto'">
                     <!-- Stats Summary (hidden for Activity tab) -->
                     <div v-if="activeTab !== 'activity'" class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                         <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
@@ -283,7 +283,7 @@ export const Analytics = {
                     </div>
 
                     <!-- Activity Tab - Full Page Layout -->
-                    <div v-if="activeTab === 'activity'" class="h-full flex flex-col bg-white dark:bg-gray-800">
+                    <div v-if="activeTab === 'activity'" class="flex flex-col bg-white dark:bg-gray-800">
                         <!-- Filters Bar -->
                         <div class="flex-shrink-0 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 sm:px-6 py-4">
                             <div class="flex flex-wrap gap-2 sm:gap-4 items-end">
@@ -321,7 +321,7 @@ export const Analytics = {
                         </div>
 
                         <!-- Requests List with Infinite Scroll -->
-                        <div class="flex-1 overflow-y-auto" @scroll="onActivityScroll" ref="activityScrollContainer">
+                        <div class="flex-1">
                             <div v-if="isActivityLoading && activityRequests.length === 0" class="flex items-center justify-center h-full">
                                 <div class="text-center">
                                     <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
@@ -393,6 +393,7 @@ export const Analytics = {
                                     No more requests to load
                                 </div>
                             </div>
+                            <div ref="scrollSentinel" class="h-4 w-full"></div>
                         </div>
                     </div>
                 </div>
@@ -527,7 +528,8 @@ export const Analytics = {
         const selectedProvider = ref('')
         const sortBy = ref('created')
         const filterOptions = ref({ models: [], providers: [] })
-        const activityScrollContainer = ref(null)
+        const scrollSentinel = ref(null)
+        let observer = null
 
         const hasActiveFilters = computed(() => selectedModel.value || selectedProvider.value)
 
@@ -1312,14 +1314,17 @@ export const Analytics = {
             }
         }
 
-        const onActivityScroll = async () => {
-            if (!activityScrollContainer.value) return
+        const setupObserver = () => {
+            if (observer) observer.disconnect()
 
-            const { scrollTop, scrollHeight, clientHeight } = activityScrollContainer.value
-            const isNearBottom = scrollHeight - scrollTop - clientHeight < 200
+            observer = new IntersectionObserver((entries) => {
+                if (entries[0].isIntersecting && activityHasMore.value && !isActivityLoadingMore.value && !isActivityLoading.value) {
+                    loadActivityRequests(false)
+                }
+            }, { rootMargin: '200px' })
 
-            if (isNearBottom && activityHasMore.value && !isActivityLoadingMore.value && !isActivityLoading.value) {
-                await loadActivityRequests(false)
+            if (scrollSentinel.value) {
+                observer.observe(scrollSentinel.value)
             }
         }
 
@@ -1435,6 +1440,8 @@ export const Analytics = {
             } else if (newTab === 'activity') {
                 await loadActivityFilterOptions()
                 await loadActivityRequests(true)
+                await nextTick()
+                setupObserver()
             }
         })
 
@@ -1467,9 +1474,15 @@ export const Analytics = {
             if (activeTab.value === 'activity') {
                 await loadActivityFilterOptions()
                 await loadActivityRequests(true)
+                await nextTick()
+                setupObserver()
             }
         })
 
+        onUnmounted(() => {
+            if (observer) observer.disconnect()
+        })
+
         return {
             activeTab,
             costChartType,
@@ -1504,8 +1517,8 @@ export const Analytics = {
             sortBy,
             filterOptions,
             hasActiveFilters,
-            activityScrollContainer,
-            onActivityScroll,
+            hasActiveFilters,
+            scrollSentinel,
             clearActivityFilters,
             formatActivityDate,
             threadExists,

llms/ui/modules/chat/ChatBody.mjs

@@ -69,8 +69,8 @@ export default {
                     </div>
 
                     <!-- Messages -->
-                    <div v-else class="space-y-6">
-                        <div v-if="currentThread.messages.length && currentThread.model" class="absolute -mt-2">
+                    <div v-else class="space-y-2">
+                        <div v-if="currentThread?.messages.length && currentThread?.model" class="flex items-center justify-center select-none">
                             <span @click="$chat.setSelectedModel({ name: currentThread.model})" 
                                 class="flex items-center cursor-pointer px-1.5 py-0.5 text-xs rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 transition-colors border hover:border-gray-300 dark:hover:border-gray-700">
                                 <ProviderIcon class="size-4 mr-1" :provider="$chat.getProviderForModel(currentThread.model)" />
@@ -80,6 +80,7 @@ export default {
                         <div
                             v-for="message in currentThread.messages"
                             :key="message.id"
+                            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' : ''"
                         >
@@ -88,9 +89,15 @@ export default {
                                 <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium"
                                      :class="message.role === 'user'
                                         ? 'bg-blue-100 dark:bg-blue-900 text-gray-900 dark:text-gray-100 border border-blue-200 dark:border-blue-700'
-                                        : 'bg-gray-600 dark:bg-gray-500 text-white'"
+                                        : message.role === 'tool'
+                                            ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border border-purple-200 dark:border-purple-800'
+                                            : 'bg-gray-600 dark:bg-gray-500 text-white'"
                                 >
-                                    {{ message.role === 'user' ? 'U' : 'AI' }}
+                                    <span v-if="message.role === 'user'">U</span>
+                                    <svg v-else-if="message.role === 'tool'" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
+                                    </svg>
+                                    <span v-else>AI</span>
                                 </div>
 
                                 <!-- Delete button (shown on hover) -->
@@ -132,14 +139,83 @@ export default {
                                 ></div>
 
                                 <!-- Collapsible reasoning section -->
-                                <div v-if="message.role === 'assistant' && message.reasoning" class="mt-2">
+                                <div v-if="message.role === 'assistant' && message.reasoning" 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>
-                                    <div v-if="isReasoningExpanded(message.id)" class="mt-2 rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 p-2">
+                                    <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="typeof message.reasoning === 'string'" v-html="$fmt.markdown(message.reasoning)" class="prose prose-xs max-w-none dark:prose-invert"></div>
-                                        <pre v-else class="text-xs whitespace-pre-wrap overflow-x-auto text-gray-900 dark:text-gray-100">{{ formatReasoning(message.reasoning) }}</pre>
+                                        <pre v-else class="text-xs whitespace-pre-wrap overflow-x-auto">{{ formatReasoning(message.reasoning) }}</pre>
+                                    </div>
+                                </div>
+
+                                <!-- Tool Calls & Outputs -->
+                                <div v-if="message.tool_calls && message.tool_calls.length > 0" class="mb-3 space-y-4">
+                                    <div v-for="(tool, i) in message.tool_calls" :key="i" class="rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 overflow-hidden">
+                                        <!-- Tool Call Header -->
+                                        <div class="px-3 py-2 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between bg-gray-50/30 dark:bg-gray-800 space-x-4">
+                                            <div class="flex items-center gap-2">
+                                                <svg class="size-3.5 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>
+                                                <span class="font-mono text-xs font-bold text-gray-700 dark:text-gray-300">{{ tool.function.name }}</span>
+                                            </div>
+                                            <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>
+
+                                        <!-- Tool Output (Nested) -->
+                                        <div v-if="getToolOutput(tool.id)" class="border-t border-gray-200 dark:border-gray-700">
+                                            <div class="px-3 py-1.5 flex justify-between items-center border-b border-gray-200 dark:border-gray-800 bg-gray-50/30 dark:bg-gray-800">
+                                                <div class="flex items-center gap-2 ">
+                                                    <svg class="size-3.5 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+                                                    <span class="text-[10px] uppercase tracking-wider text-gray-400 font-medium">Output</span>
+                                                </div>    
+                                                <div v-if="hasJsonStructure(getToolOutput(tool.id).content)" class="flex items-center gap-2 text-[10px] uppercase tracking-wider font-medium select-none">
+                                                    <span @click="setPrefs({ toolFormat: 'text' })" 
+                                                          class="cursor-pointer transition-colors"
+                                                          :class="prefs.toolFormat !== 'preview' ? 'text-gray-600 dark:text-gray-300' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'">
+                                                        text
+                                                    </span>
+                                                    <span class="text-gray-300 dark:text-gray-700">|</span>
+                                                    <span @click="setPrefs({ toolFormat: 'preview' })" 
+                                                          class="cursor-pointer transition-colors"
+                                                          :class="prefs.toolFormat == 'preview' ? 'text-gray-600 dark:text-gray-300' : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'">
+                                                        preview
+                                                    </span>
+                                                </div>
+                                            </div>
+                                            <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" />
+                                                    <div v-else class="text-gray-500 italic p-2">Invalid JSON content</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Tool Output (Orphaned) -->
+                                <div v-if="message.role === 'tool' && !isToolLinked(message)" class="text-sm">
+                                    <div class="flex items-center gap-2 mb-1 opacity-70">
+                                        <div class="flex items-center text-xs font-mono font-medium text-gray-500 uppercase tracking-wider">
+                                            <svg class="size-3 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+                                            Tool Output
+                                        </div>
+                                        <div v-if="message.name" class="text-xs font-mono bg-gray-200 dark:bg-gray-700 px-1.5 rounded text-gray-700 dark:text-gray-300">
+                                            {{ message.name }}
+                                        </div>
+                                        <div v-if="message.tool_call_id" class="text-[10px] font-mono text-gray-400">
+                                            {{ message.tool_call_id.slice(0,8) }}
+                                        </div>
+                                    </div>
+                                    <div class="not-prose bg-white dark:bg-gray-900 rounded border border-gray-200 dark:border-gray-800 p-2 overflow-x-auto">
+                                        <pre class="tool-output">{{ message.content }}</pre>
                                     </div>
                                 </div>
 
@@ -153,7 +229,7 @@ export default {
                                 </div>
 
                                 <!-- User Message with separate attachments -->
-                                <div v-if="message.role !== 'assistant'">
+                                <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 -->
@@ -178,7 +254,8 @@ export default {
                                     </div>
                                 </div>
 
-                                <div class="mt-2 text-xs opacity-70">
+                                <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>
                                     <span>{{ $fmt.time(message.timestamp) }}</span>
                                     <span v-if="message.usage" :title="tokensTitle(message.usage)">
                                         &#8226;
@@ -310,9 +387,9 @@ export default {
         const router = useRouter()
         const route = useRoute()
 
-        const prefs = ctx.getPrefs()
+        const prefs = ref(ctx.getPrefs())
 
-        const selectedModel = ref(prefs.model || config.defaults.text.model || '')
+        const selectedModel = ref(prefs.value.model || config.defaults.text.model || '')
         const selectedModelObj = computed(() => {
             if (!selectedModel.value || !models) return null
             return models.find(m => m.name === selectedModel.value) || models.find(m => m.id === selectedModel.value)
@@ -747,7 +824,48 @@ export default {
         })
         onUnmounted(() => sub?.unsubscribe())
 
+        const getToolOutput = (toolCallId) => {
+            return currentThread.value?.messages?.find(m => m.role === 'tool' && m.tool_call_id === toolCallId)
+        }
+
+        const isToolLinked = (message) => {
+            if (message.role !== 'tool') return false
+            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'
+            }
+            return cls
+        }
+
+        function setPrefs(o) {
+            Object.assign(prefs.value, o)
+            ctx.setPrefs(prefs.value)
+        }
+
         return {
+            prefs,
+            setPrefs,
             config,
             models,
             threads,
@@ -780,6 +898,11 @@ export default {
             openLightbox,
             closeLightbox,
             resolveUrl,
+            getToolOutput,
+            isToolLinked,
+            tryParseJson,
+            hasJsonStructure,
+            customHtmlClasses,
         }
     }
 }

llms/ui/modules/chat/index.mjs

@@ -560,7 +560,8 @@ const ChatPrompt = {
                     if (!isDuplicate) {
                         await threads.addMessageToThread(threadId, {
                             role: 'user',
-                            content: content
+                            content: content,
+                            model: props.model.name,
                         })
                         // Reload thread after adding message
                         thread = await threads.getThread(threadId)
@@ -665,6 +666,16 @@ const ChatPrompt = {
                 }
 
                 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
 
@@ -681,6 +692,7 @@ const ChatPrompt = {
                         }
                         await threads.logRequest(threadId, props.model, request, response)
                     }
+                    assistantMessage.model = props.model.name
                     await threads.addMessageToThread(threadId, assistantMessage, usage)
 
                     nextTick(addCopyButtons)

llms/ui/modules/tools.mjs

@@ -0,0 +1,202 @@
+import { ref, inject, computed } from "vue"
+
+const Tools = {
+    template: `
+    <div class="p-4 md:p-6 max-w-7xl mx-auto w-full">
+        <div class="mb-6">
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Tools</h1>
+            <p class="text-gray-600 dark:text-gray-400 mt-1">
+                {{ ($state.tools || []).length }} tools available
+            </p>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+            <div v-for="tool in ($state.tools || [])" :key="tool.function.name"
+                class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden flex flex-col">
+                
+                <div class="p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
+                    <div class="font-bold text-lg text-gray-900 dark:text-gray-100 font-mono break-all">
+                        {{ tool.function.name }}
+                    </div>
+                </div>
+
+                <div class="p-4 flex-1 flex flex-col">
+                     <p v-if="tool.function.description" class="text-sm text-gray-600 dark:text-gray-300 mb-4 flex-1">
+                        {{ tool.function.description }}
+                     </p>
+                     <p v-else class="text-sm text-gray-400 italic mb-4 flex-1">
+                        No description provided
+                     </p>
+
+                     <div v-if="tool.function.parameters?.properties && Object.keys(tool.function.parameters.properties).length > 0">
+                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Parameters</div>
+                        <div class="space-y-3">
+                            <div v-for="(prop, name) in tool.function.parameters.properties" :key="name" class="text-sm bg-gray-50 dark:bg-gray-700/30 rounded p-2">
+                                <div class="flex flex-wrap items-baseline gap-2 mb-1">
+                                    <span class="font-mono font-medium text-blue-600 dark:text-blue-400">{{ name }}</span>
+                                    <span class="text-gray-500 text-xs">({{ prop.type }})</span>
+                                    <span v-if="tool.function.parameters.required?.includes(name)" 
+                                        class="px-1.5 py-0.5 text-[10px] rounded bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 font-medium">
+                                        REQUIRED
+                                    </span>
+                                </div>
+                                <div v-if="prop.description" class="text-gray-600 dark:text-gray-400 text-xs">
+                                    {{ prop.description }}
+                                </div>
+                            </div>
+                        </div>
+                     </div>
+                     <div v-else class="text-sm text-gray-400 italic border-t border-gray-100 dark:border-gray-700 pt-2 mt-auto">
+                        No parameters
+                     </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    `,
+    setup() {
+
+    }
+}
+
+const ToolSelector = {
+    template: `
+        <div class="px-4 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+            <div class="flex flex-wrap items-center gap-2 text-sm">
+                
+                <!-- All -->
+                <button @click="$ctx.setPrefs({ onlyTools: null })"
+                    class="px-2.5 py-1 rounded-full text-xs font-medium border transition-colors select-none"
+                    :class="$prefs.onlyTools == null
+                        ? 'bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300 border-green-200 dark:border-green-800' 
+                        : 'cursor-pointer bg-white dark:bg-gray-800 text-gray-600 dark:border-gray-700 dark:text-gray-400 border-gray-200 dark:hover:border-gray-600 hover:border-gray-300'">
+                    All
+                </button>
+
+                <!-- None -->
+                <button @click="$ctx.setPrefs({ onlyTools:[] })"
+                    class="px-2.5 py-1 rounded-full text-xs font-medium border transition-colors select-none"
+                    :class="$prefs.onlyTools?.length === 0
+                        ? 'bg-fuchsia-100 dark:bg-fuchsia-900/40 text-fuchsia-800 dark:text-fuchsia-300 border-fuchsia-200 dark:border-fuchsia-800' 
+                        : 'cursor-pointer bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'">
+                    None
+                </button>
+
+                <div class="border-l h-4"></div>
+
+                <!-- Tools -->
+                <button v-for="tool in availableTools" :key="tool.function.name" type="button"
+                    @click="toggleTool(tool.function.name)"
+                    :title="tool.function.description"
+                    class="px-2.5 py-1 rounded-full text-xs font-medium border transition-colors select-none"
+                    :class="isToolActive(tool.function.name)
+                        ? 'bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300 border-blue-200 dark:border-blue-800' 
+                        : 'bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'">
+                    {{ tool.function.name }}
+                </button>
+            </div>
+        </div>
+    `,
+    setup() {
+        const ctx = inject('ctx')
+
+        const availableTools = computed(() => ctx.state.tools || [])
+
+        function isToolActive(name) {
+            const only = ctx.prefs.onlyTools
+            if (only == null) return true
+            if (Array.isArray(only)) return only.includes(name)
+            return false
+        }
+
+        function toggleTool(name) {
+            let onlyTools = ctx.prefs.onlyTools
+
+            // If currently 'All', clicking a tool means we enter custom mode with all OTHER tools selected (deselecting clicked)
+            if (onlyTools == null) {
+                onlyTools = availableTools.value.map(t => t.function.name).filter(t => t !== name)
+            } else {
+                // Currently Custom or None
+                if (onlyTools.includes(name)) {
+                    onlyTools = onlyTools.filter(t => t !== name)
+                } else {
+                    onlyTools = [...onlyTools, name]
+                }
+            }
+
+            ctx.setPrefs({ onlyTools })
+        }
+
+        return {
+            availableTools,
+            isToolActive,
+            toggleTool
+        }
+    }
+}
+
+export default {
+    install(ctx) {
+
+        ctx.components({
+            Tools,
+            ToolSelector,
+        })
+
+        const svg = (attrs, title) => `<svg ${attrs} xmlns="http://www.w4.org/2000/svg" viewBox="0 0 24 24">${title ? "<title>" + title + "</title>" : ''}<path fill="currentColor" d="M5.33 3.272a3.5 3.5 0 0 1 4.472 4.473L20.647 18.59l-2.122 2.122L7.68 9.867a3.5 3.5 0 0 1-4.472-4.474L5.444 7.63a1.5 1.5 0 0 0 2.121-2.121zm10.367 1.883l3.182-1.768l1.414 1.415l-1.768 3.182l-1.768.353l-2.12 2.121l-1.415-1.414l2.121-2.121zm-7.071 7.778l2.121 2.122l-4.95 4.95A1.5 1.5 0 0 1 3.58 17.99l.097-.107z"/></svg>`
+
+        ctx.setLeftIcons({
+            tools: {
+                component: {
+                    template: svg('@click=$ctx.togglePath("/tools")'),
+                },
+                isActive({ path }) {
+                    return path === '/tools'
+                }
+            }
+        })
+
+        ctx.setTopIcons({
+            tools: {
+                component: {
+                    template: svg([
+                        `@click=$ctx.toggleTop("ToolSelector")`,
+                        `:class="$prefs.onlyTools == null ? 'text-green-600 dark:text-green-300' : $prefs.onlyTools.length ? 'text-blue-600! dark:text-blue-300!' : ''"`
+                    ].join(' ')),
+                    // , "{{$prefs.onlyTools == null ? 'Include All Tools' : $prefs.onlyTools.length ? 'Include Selected Tools' : 'All Tools Excluded'}}"
+                },
+                isActive({ top }) {
+                    return top === 'ToolSelector'
+                },
+                get title() {
+                    return ctx.prefs.onlyTools == null
+                        ? `All Tools Included`
+                        : ctx.prefs.onlyTools.length
+                            ? `${ctx.prefs.onlyTools.length} ${ctx.utils.pluralize('Tool', ctx.prefs.onlyTools.length)} Included`
+                            : 'No Tools Included'
+                }
+            }
+        })
+
+        ctx.chatRequestFilters.push(({ request, thread }) => {
+            // Tool Preferences
+            const prefs = ctx.prefs
+            if (prefs.onlyTools != null) {
+                if (Array.isArray(prefs.onlyTools)) {
+                    request.metadata.only_tools = prefs.onlyTools.length > 0
+                        ? prefs.onlyTools.join(',')
+                        : 'none'
+                }
+            } else {
+                request.metadata.only_tools = 'all'
+            }
+        })
+
+        ctx.routes.push({ path: '/tools', component: Tools, meta: { title: 'View Tools' } })
+    },
+
+    async load(ctx) {
+        const ext = ctx.scope('tools')
+        ctx.state.tools = await ext.getJson('/')
+    }
+}

llms/ui/tailwind.input.css

@@ -30,6 +30,11 @@
     ::file-selector-button {
         border-color: hsl(var(--border));
     }
+
+    .reasoning .prose-xs p,
+    .reasoning .prose-xs li {
+        font-size: 13px;
+    }
 }
 
 @theme {
@@ -144,6 +149,21 @@
         font-weight: 600;
     }
 
+    /* Tool specific styles to override global prose */
+    .tool-arguments,
+    .tool-output {
+        margin: 0 !important;
+        padding: 0 !important;
+        background-color: transparent !important;
+        color: inherit !important;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
+        font-size: 0.75rem !important;
+        white-space: pre-wrap !important;
+        word-break: break-all !important;
+        border: none !important;
+        border-radius: 0 !important;
+    }
+
     /* highlight.js - vs.css */
     .hljs {
         background: white;

llms/ui/utils.mjs

@@ -81,6 +81,10 @@ export function deepClone(o) {
     return serializedClone(o)
 }
 
+export function pluralize(word, count) {
+    return count === 1 ? word : word + 's'
+}
+
 const currFmt2 = new Intl.NumberFormat(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
 const currFmt6 = new Intl.NumberFormat(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 6 })
 
@@ -156,6 +160,7 @@ export function utilsFormatters() {
         statsTitle,
         relativeTime,
         time,
+        pluralize,
     }
 }
 
@@ -183,6 +188,7 @@ export function utilsFunctions() {
         fileToDataUri,
         serializedClone,
         deepClone,
+        pluralize,
     }
 }
 

{llms_py-3.0.0b3.dist-info → llms_py-3.0.0b5.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: llms-py
-Version: 3.0.0b3
+Version: 3.0.0b5
 Summary: A lightweight CLI tool and OpenAI-compatible server for querying multiple Large Language Model (LLM) providers
 Home-page: https://github.com/ServiceStack/llms
 Author: ServiceStack