llms-py 3.0.10__py3-none-any.whl → 3.0.18__py3-none-any.whl

llms/extensions/tools/ui/index.mjs

@@ -2,6 +2,86 @@ import { inject, computed, ref, onMounted } from "vue"
 
 let ext
 
+function useTools(ctx) {
+
+    const availableTools = computed(() => ctx.state.tool.definitions.filter(x => x.function))
+    const toolPageHeaders = {}
+
+    function setToolPageHeaders(components) {
+        Object.assign(toolPageHeaders, components)
+    }
+
+    function selectTool({ group, tool }) {
+        ext.setPrefs({ selectedGroup: group, selectedTool: tool })
+    }
+
+    function getToolDefinition(name) {
+        return ctx.state.tool.definitions.find(d => d.function?.name === name)
+    }
+
+    function isToolEnabled(name) {
+        const toolDef = getToolDefinition(name)
+        if (!toolDef) return false
+        const onlyTools = ctx.prefs.onlyTools
+        if (onlyTools == null) return true
+        return Array.isArray(onlyTools) && onlyTools.includes(name)
+    }
+
+    function enableTool(name) {
+        let onlyTools = ctx.prefs.onlyTools
+        if (onlyTools == null) return // All tools are enabled
+
+        if (!Array.isArray(onlyTools)) {
+            onlyTools = [onlyTools]
+        }
+        else if (!onlyTools.includes(name)) {
+            onlyTools.push(name)
+        } else {
+            return // Already enabled
+        }
+        ctx.setPrefs({ onlyTools })
+    }
+
+    function disableTool(name) {
+        let onlyTools = ctx.prefs.onlyTools
+        if (onlyTools == null) {
+            // If currently 'All', clicking a tool means we enter custom mode with all OTHER tools selected
+            onlyTools = availableTools.value.map(t => t.function.name).filter(t => t !== name)
+        } else if (!Array.isArray(onlyTools)) {
+            onlyTools = []
+        } else {
+            onlyTools = onlyTools.filter(t => t !== name)
+        }
+        ctx.setPrefs({ onlyTools })
+    }
+
+    function toggleTool(name, enable = null) {
+        if (enable == null) {
+            enable = !isToolEnabled(name)
+        }
+        if (enable) {
+            enableTool(name)
+        } else {
+            disableTool(name)
+        }
+    }
+
+    return {
+        availableTools,
+        toolPageHeaders,
+        setToolPageHeaders,
+        selectTool,
+        getToolDefinition,
+        isToolEnabled,
+        enableTool,
+        disableTool,
+        toggleTool,
+        get selectedGroup() { return ext.prefs.selectedGroup },
+        get selectedTool() { return ext.prefs.selectedTool },
+    }
+}
+
+
 const ToolResult = {
     template: `
     <div>
@@ -18,10 +98,10 @@ const ToolResult = {
                 preview
             </span>
         </div>
-        <div class="not-prose px-3 py-2">
+        <div class="not-prose py-2">
             <pre v-if="ext.prefs.toolFormat !== 'preview'" class="tool-output">{{ origResult }}</pre>
             <div v-else>
-                <ViewTypes v-if="Array.isArray(result)" :results="result" />
+                <ViewTypes v-if="Array.isArray(result) && result[0]?.type" :results="result" />
                 <ViewType v-else :result="result" />
             </div>
         </div>
@@ -76,10 +156,92 @@ const ToolResult = {
     }
 }
 
-const Tools = {
-    components: {
-        ToolResult
+const JsonInput = {
+    template: `
+    <div class="flex flex-col gap-1">
+        <div class="relative">
+            <textarea 
+                v-model="localJson" 
+                @input="validate"
+                rows="5"
+                class="w-full p-2 font-mono text-xs border rounded-md resize-y focus:outline-none focus:ring-2 transition-colors"
+                :class="error 
+                    ? 'border-red-300 dark:border-red-700 bg-red-50 dark:bg-red-900/10 focus:ring-red-500' 
+                    : 'border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 focus:ring-blue-500'"
+                spellcheck="false"
+            ></textarea>
+            <div v-if="isValid" class="absolute bottom-2 right-2 text-green-500 bg-white dark:bg-gray-800 rounded-full p-1 shadow-sm">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                </svg>
+            </div>
+        </div>
+        <div v-if="error" class="text-xs text-red-600 dark:text-red-400 font-medium px-1">
+            {{ error }}
+        </div>
+    </div>
+    `,
+    props: {
+        modelValue: {
+            required: true
+        }
     },
+    emits: ['update:modelValue'],
+    setup(props, { emit }) {
+        // Initialize with formatted JSON
+        const localJson = ref(
+            props.modelValue !== undefined
+                ? JSON.stringify(props.modelValue, null, 4)
+                : ''
+        )
+        const error = ref(null)
+        const isValid = ref(true)
+
+        function validate() {
+            try {
+                if (!localJson.value.trim()) {
+                    // Decide if empty string is valid object/array or undefined
+                    // For now, let's say empty is NOT valid if the prop expects object
+                    // But maybe we can treat it as valid undefined/null?
+                    // Let's enforce valid JSON.
+                    if (localJson.value === '') {
+                        error.value = null
+                        isValid.value = true
+                        emit('update:modelValue', undefined)
+                        return
+                    }
+                }
+
+                const parsed = JSON.parse(localJson.value)
+                error.value = null
+                isValid.value = true
+                emit('update:modelValue', parsed)
+            } catch (e) {
+                error.value = e.message
+                isValid.value = false
+                // Do not emit invalid values
+            }
+        }
+
+        // Watch external changes only if they differ significantly from local
+        /* 
+           Note: two-way binding with text representation is tricky.
+           If we watch props.modelValue, we might re-format user's in-progress typing if we aren't careful.
+           Usually better to only update localJson if the prop changes "from outside".
+           For this simple tool, initial value is likely enough, or we can watch with a deep compare check.
+           For now, let's stick to initial + internal validation. 
+        */
+
+        return {
+            localJson,
+            error,
+            isValid,
+            validate
+        }
+    }
+}
+
+const Tools = {
     template: `
     <div class="p-4 md:p-6 max-w-7xl mx-auto w-full relative">
         <div v-if="Object.keys($ctx.tools.toolPageHeaders).length">
@@ -153,6 +315,10 @@ const Tools = {
                                 </select>
                             </div>
 
+                            <div v-else-if="prop.type === 'object' || prop.type === 'array'">
+                                <JsonInput v-model="execForm[name]" />
+                            </div>
+
                             <div v-else>
                                 <input :type="prop.type === 'integer' || prop.type === 'number' ? 'number' : 'text'" 
                                        v-model="execForm[name]" 
@@ -191,7 +357,7 @@ const Tools = {
         </div>
 
         <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-            <div v-for="tool in filteredTools" :key="tool.function.name"
+            <div v-for="tool in filteredTools" :key="tool.function.name" :id="'tool-' + tool.function.name"
                 class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 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 flex justify-between items-center">
@@ -262,7 +428,6 @@ const Tools = {
         const ctx = inject('ctx')
 
         // Execution State
-        const executingTool = ref(null)
         const execForm = ref({})
         const execResult = ref(null)
         const execError = ref(null)
@@ -270,6 +435,12 @@ const Tools = {
         const refForm = ref()
         const refTop = ref()
 
+        const executingTool = computed(() => {
+            const tool = ext.prefs.selectedTool
+            if (!tool) return null
+            return ctx.state.tool.definitions.find(x => x.function.name === tool)
+        })
+
         // UI State
         const expandedDescriptions = ref({})
 
@@ -284,7 +455,7 @@ const Tools = {
         })
 
         function startExec(tool) {
-            executingTool.value = tool
+            ext.setPrefs({ selectedTool: tool.function.name })
             execForm.value = {}
             execResult.value = null
             execError.value = null
@@ -309,7 +480,7 @@ const Tools = {
         }
 
         function closeExec() {
-            executingTool.value = null
+            ext.setPrefs({ selectedTool: null })
             execForm.value = {}
             execResult.value = null
             execError.value = null
@@ -396,14 +567,14 @@ const ToolSelector = {
                 <div class="flex items-center gap-2">
                     <button @click="$ctx.setPrefs({ onlyTools: null })"
                         class="px-3 py-1 rounded-md text-xs font-medium border transition-colors select-none"
-                        :class="$prefs.onlyTools == null
+                        :class="prefs.onlyTools == null
                             ? 'bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300 border-green-300 dark:border-green-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'">
                         All Tools
                     </button>
                     <button @click="$ctx.setPrefs({ onlyTools:[] })"
                         class="px-3 py-1 rounded-md text-xs font-medium border transition-colors select-none"
-                        :class="$prefs.onlyTools?.length === 0
+                        :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'">
                         No Tools
@@ -456,10 +627,10 @@ const ToolSelector = {
                      <div v-show="!isCollapsed(group.name)" class="p-3 bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800">
                          <div class="flex flex-wrap gap-2">
                             <button v-for="tool in group.tools" :key="tool.function.name" type="button"
-                                @click="toggleTool(tool.function.name)"
+                                @click="$tools.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 text-left truncate max-w-[200px]"
-                                :class="isToolActive(tool.function.name)
+                                :class="$tools.isToolEnabled(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-gray-50 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 }}
@@ -474,10 +645,10 @@ const ToolSelector = {
         const ctx = inject('ctx')
         const collapsedState = ref({})
 
-        const availableTools = computed(() => ctx.state.tool.definitions.filter(x => x.function))
+        const prefs = computed(() => ctx.prefs)
 
         const toolGroups = computed(() => {
-            const defs = availableTools.value
+            const defs = ctx.tools.availableTools.value
             const groups = ctx.state.tool.groups || {}
 
             const definedGroups = []
@@ -500,33 +671,6 @@ const ToolSelector = {
             return definedGroups
         })
 
-        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 })
-        }
-
         function toggleCollapse(groupName) {
             const key = groupName || '_other_'
             collapsedState.value[key] = !collapsedState.value[key]
@@ -539,19 +683,19 @@ const ToolSelector = {
 
         function setGroupTools(group, enable) {
             const groupToolNames = group.tools.map(t => t.function.name)
-            let onlyTools = ctx.prefs.onlyTools
+            let onlyTools = prefs.value.onlyTools
 
             if (enable) {
                 if (onlyTools == null) return
                 const newSet = new Set(onlyTools)
                 groupToolNames.forEach(n => newSet.add(n))
                 onlyTools = Array.from(newSet)
-                if (onlyTools.length === availableTools.value.length) {
+                if (onlyTools.length === ctx.tools.availableTools.value.length) {
                     onlyTools = null
                 }
             } else {
                 if (onlyTools == null) {
-                    onlyTools = availableTools.value
+                    onlyTools = ctx.tools.availableTools.value
                         .map(t => t.function.name)
                         .filter(n => !groupToolNames.includes(n))
                 } else {
@@ -563,16 +707,14 @@ const ToolSelector = {
         }
 
         function getActiveCount(group) {
-            const onlyTools = ctx.prefs.onlyTools
+            const onlyTools = prefs.value.onlyTools
             if (onlyTools == null) return group.tools.length
             return group.tools.filter(t => onlyTools.includes(t.function.name)).length
         }
 
         return {
-            availableTools,
+            prefs,
             toolGroups,
-            isToolActive,
-            toggleTool,
             toggleCollapse,
             isCollapsed,
             setGroupTools,
@@ -581,19 +723,6 @@ const ToolSelector = {
     }
 }
 
-function useTools(ctx) {
-    const toolPageHeaders = {}
-
-    function setToolPageHeaders(components) {
-        Object.assign(toolPageHeaders, components)
-    }
-
-    return {
-        toolPageHeaders,
-        setToolPageHeaders,
-    }
-}
-
 export default {
     order: 10 - 100,
 
@@ -603,6 +732,8 @@ export default {
         ctx.components({
             Tools,
             ToolSelector,
+            ToolResult,
+            JsonInput,
         })
 
         ctx.setGlobals({
@@ -644,7 +775,7 @@ export default {
             }
         })
 
-        ctx.chatRequestFilters.push(({ request, thread }) => {
+        ctx.chatRequestFilters.push(({ request, thread, context }) => {
             // Tool Preferences
             const prefs = ctx.prefs
             if (prefs.onlyTools != null) {