Skip to content

Commit 8aca05b

Browse files
mythzmythz
committed
move reusable tool fn's to ctx.tools + handle when skill tool is not enabled
1 parent aff1b65 commit 8aca05b

2 files changed

Lines changed: 113 additions & 68 deletions

File tree

‎llms/extensions/skills/ui/index.mjs‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,21 @@ const SkillSelector = {
1111
<div class="flex items-center justify-between mb-4">
1212
<span class="text-xs font-bold uppercase text-gray-500 tracking-wider">Include Skills</span>
1313
<div class="flex items-center gap-2">
14-
<button @click="$ctx.setPrefs({ onlySkills: null })"
14+
<button type="button" v-if="!$ctx.tools?.isToolEnabled('skill')"
15+
class="px-3 py-1 rounded-md text-xs font-medium border transition-colors select-none 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"
16+
@click="$ctx.tools?.enableTool('skill')"
17+
title="'skill' tool needs to be enabled to use Skills"
18+
>
19+
<span class="text-xs font-semibold text-red-700 dark:text-red-300">⚠️ Enable skill tool</span>
20+
</button>
21+
<button type="button" @click="$ctx.setPrefs({ onlySkills: null })"
1522
class="px-3 py-1 rounded-md text-xs font-medium border transition-colors select-none"
1623
:class="$prefs.onlySkills == null
1724
? 'bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300 border-green-300 dark:border-green-800'
1825
: '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'">
1926
All Skills
2027
</button>
21-
<button @click="$ctx.setPrefs({ onlySkills:[] })"
28+
<button type="button" @click="$ctx.setPrefs({ onlySkills:[] })"
2229
class="px-3 py-1 rounded-md text-xs font-medium border transition-colors select-none"
2330
:class="$prefs.onlySkills?.length === 0
2431
? 'bg-fuchsia-100 dark:bg-fuchsia-900/40 text-fuchsia-800 dark:text-fuchsia-300 border-fuchsia-200 dark:border-fuchsia-800'
@@ -264,24 +271,31 @@ export default {
264271
component: {
265272
template: svg([
266273
`@click="$ctx.toggleTop('SkillSelector')"`,
267-
`:class="$prefs.onlySkills == null ? 'text-green-600 dark:text-green-300' : $prefs.onlySkills.length ? 'text-blue-600! dark:text-blue-300!' : ''"`
274+
`:class="!$tools?.isToolEnabled('skill') ? '' : $prefs.onlySkills == null ? 'text-green-600 dark:text-green-300' : $prefs.onlySkills.length ? 'text-blue-600! dark:text-blue-300!' : ''"`
268275
].join(' ')),
269276
},
270277
isActive({ top }) {
271278
return top === 'SkillSelector'
272279
},
273280
get title() {
274-
return ctx.prefs.onlySkills == null
275-
? `All Skills Included`
276-
: ctx.prefs.onlySkills.length
277-
? `${ctx.prefs.onlySkills.length} ${ctx.utils.pluralize('Skill', ctx.prefs.onlySkills.length)} Included`
278-
: 'No Skills Included'
281+
return !ctx.tools?.isToolEnabled('skill')
282+
? `skill tool not enabled`
283+
: ctx.prefs.onlySkills == null
284+
? `All Skills Included`
285+
: ctx.prefs.onlySkills.length
286+
? `${ctx.prefs.onlySkills.length} ${ctx.utils.pluralize('Skill', ctx.prefs.onlySkills.length)} Included`
287+
: 'No Skills Included'
279288
}
280289
}
281290
})
282291

283292
ctx.chatRequestFilters.push(({ request, thread, context }) => {
284293

294+
if (!ctx.tools?.isToolEnabled('skill')) {
295+
console.log(`skills.chatRequestFilters: 'skill' tool is not enabled`)
296+
return
297+
}
298+
285299
const prefs = ctx.prefs
286300
if (prefs.onlySkills != null) {
287301
if (Array.isArray(prefs.onlySkills)) {

‎llms/extensions/tools/ui/index.mjs‎

Lines changed: 91 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,86 @@ import { inject, computed, ref, onMounted } from "vue"
22

33
let ext
44

5+
function useTools(ctx) {
6+
7+
const availableTools = computed(() => ctx.state.tool.definitions.filter(x => x.function))
8+
const toolPageHeaders = {}
9+
10+
function setToolPageHeaders(components) {
11+
Object.assign(toolPageHeaders, components)
12+
}
13+
14+
function selectTool({ group, tool }) {
15+
ext.setPrefs({ selectedGroup: group, selectedTool: tool })
16+
}
17+
18+
function getToolDefinition(name) {
19+
return ctx.state.tool.definitions.find(d => d.function?.name === name)
20+
}
21+
22+
function isToolEnabled(name) {
23+
const toolDef = getToolDefinition(name)
24+
if (!toolDef) return false
25+
const onlyTools = ctx.prefs.onlyTools
26+
if (onlyTools == null) return true
27+
return Array.isArray(onlyTools) && onlyTools.includes(name)
28+
}
29+
30+
function enableTool(name) {
31+
let onlyTools = ctx.prefs.onlyTools
32+
if (onlyTools == null) return // All tools are enabled
33+
34+
if (!Array.isArray(onlyTools)) {
35+
onlyTools = [onlyTools]
36+
}
37+
else if (!onlyTools.includes(name)) {
38+
onlyTools.push(name)
39+
} else {
40+
return // Already enabled
41+
}
42+
ctx.setPrefs({ onlyTools })
43+
}
44+
45+
function disableTool(name) {
46+
let onlyTools = ctx.prefs.onlyTools
47+
if (onlyTools == null) {
48+
// If currently 'All', clicking a tool means we enter custom mode with all OTHER tools selected
49+
onlyTools = availableTools.value.map(t => t.function.name).filter(t => t !== name)
50+
} else if (!Array.isArray(onlyTools)) {
51+
onlyTools = []
52+
} else {
53+
onlyTools = onlyTools.filter(t => t !== name)
54+
}
55+
ctx.setPrefs({ onlyTools })
56+
}
57+
58+
function toggleTool(name, enable = null) {
59+
if (enable == null) {
60+
enable = !isToolEnabled(name)
61+
}
62+
if (enable) {
63+
enableTool(name)
64+
} else {
65+
disableTool(name)
66+
}
67+
}
68+
69+
return {
70+
availableTools,
71+
toolPageHeaders,
72+
setToolPageHeaders,
73+
selectTool,
74+
getToolDefinition,
75+
isToolEnabled,
76+
enableTool,
77+
disableTool,
78+
toggleTool,
79+
get selectedGroup() { return ext.prefs.selectedGroup },
80+
get selectedTool() { return ext.prefs.selectedTool },
81+
}
82+
}
83+
84+
585
const ToolResult = {
686
template: `
787
<div>
@@ -487,14 +567,14 @@ const ToolSelector = {
487567
<div class="flex items-center gap-2">
488568
<button @click="$ctx.setPrefs({ onlyTools: null })"
489569
class="px-3 py-1 rounded-md text-xs font-medium border transition-colors select-none"
490-
:class="$prefs.onlyTools == null
570+
:class="prefs.onlyTools == null
491571
? 'bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300 border-green-300 dark:border-green-800'
492572
: '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'">
493573
All Tools
494574
</button>
495575
<button @click="$ctx.setPrefs({ onlyTools:[] })"
496576
class="px-3 py-1 rounded-md text-xs font-medium border transition-colors select-none"
497-
:class="$prefs.onlyTools?.length === 0
577+
:class="prefs.onlyTools?.length === 0
498578
? 'bg-fuchsia-100 dark:bg-fuchsia-900/40 text-fuchsia-800 dark:text-fuchsia-300 border-fuchsia-200 dark:border-fuchsia-800'
499579
: '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'">
500580
No Tools
@@ -547,10 +627,10 @@ const ToolSelector = {
547627
<div v-show="!isCollapsed(group.name)" class="p-3 bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800">
548628
<div class="flex flex-wrap gap-2">
549629
<button v-for="tool in group.tools" :key="tool.function.name" type="button"
550-
@click="toggleTool(tool.function.name)"
630+
@click="$tools.toggleTool(tool.function.name)"
551631
:title="tool.function.description"
552632
class="px-2.5 py-1 rounded-full text-xs font-medium border transition-colors select-none text-left truncate max-w-[200px]"
553-
:class="isToolActive(tool.function.name)
633+
:class="$tools.isToolEnabled(tool.function.name)
554634
? 'bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300 border-blue-200 dark:border-blue-800'
555635
: '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'">
556636
{{ tool.function.name }}
@@ -565,10 +645,10 @@ const ToolSelector = {
565645
const ctx = inject('ctx')
566646
const collapsedState = ref({})
567647

568-
const availableTools = computed(() => ctx.state.tool.definitions.filter(x => x.function))
648+
const prefs = computed(() => ctx.prefs)
569649

570650
const toolGroups = computed(() => {
571-
const defs = availableTools.value
651+
const defs = ctx.tools.availableTools.value
572652
const groups = ctx.state.tool.groups || {}
573653

574654
const definedGroups = []
@@ -591,33 +671,6 @@ const ToolSelector = {
591671
return definedGroups
592672
})
593673

594-
function isToolActive(name) {
595-
const only = ctx.prefs.onlyTools
596-
if (only == null) return true
597-
if (Array.isArray(only)) {
598-
return only.includes(name)
599-
}
600-
return false
601-
}
602-
603-
function toggleTool(name) {
604-
let onlyTools = ctx.prefs.onlyTools
605-
606-
// If currently 'All', clicking a tool means we enter custom mode with all OTHER tools selected (deselecting clicked)
607-
if (onlyTools == null) {
608-
onlyTools = availableTools.value.map(t => t.function.name).filter(t => t !== name)
609-
} else {
610-
// Currently Custom or None
611-
if (onlyTools.includes(name)) {
612-
onlyTools = onlyTools.filter(t => t !== name)
613-
} else {
614-
onlyTools = [...onlyTools, name]
615-
}
616-
}
617-
618-
ctx.setPrefs({ onlyTools })
619-
}
620-
621674
function toggleCollapse(groupName) {
622675
const key = groupName || '_other_'
623676
collapsedState.value[key] = !collapsedState.value[key]
@@ -630,19 +683,19 @@ const ToolSelector = {
630683

631684
function setGroupTools(group, enable) {
632685
const groupToolNames = group.tools.map(t => t.function.name)
633-
let onlyTools = ctx.prefs.onlyTools
686+
let onlyTools = prefs.value.onlyTools
634687

635688
if (enable) {
636689
if (onlyTools == null) return
637690
const newSet = new Set(onlyTools)
638691
groupToolNames.forEach(n => newSet.add(n))
639692
onlyTools = Array.from(newSet)
640-
if (onlyTools.length === availableTools.value.length) {
693+
if (onlyTools.length === ctx.tools.availableTools.value.length) {
641694
onlyTools = null
642695
}
643696
} else {
644697
if (onlyTools == null) {
645-
onlyTools = availableTools.value
698+
onlyTools = ctx.tools.availableTools.value
646699
.map(t => t.function.name)
647700
.filter(n => !groupToolNames.includes(n))
648701
} else {
@@ -654,16 +707,14 @@ const ToolSelector = {
654707
}
655708

656709
function getActiveCount(group) {
657-
const onlyTools = ctx.prefs.onlyTools
710+
const onlyTools = prefs.value.onlyTools
658711
if (onlyTools == null) return group.tools.length
659712
return group.tools.filter(t => onlyTools.includes(t.function.name)).length
660713
}
661714

662715
return {
663-
availableTools,
716+
prefs,
664717
toolGroups,
665-
isToolActive,
666-
toggleTool,
667718
toggleCollapse,
668719
isCollapsed,
669720
setGroupTools,
@@ -672,26 +723,6 @@ const ToolSelector = {
672723
}
673724
}
674725

675-
function useTools(ctx) {
676-
const toolPageHeaders = {}
677-
678-
function setToolPageHeaders(components) {
679-
Object.assign(toolPageHeaders, components)
680-
}
681-
682-
function selectTool({ group, tool }) {
683-
ext.setPrefs({ selectedGroup: group, selectedTool: tool })
684-
}
685-
686-
return {
687-
toolPageHeaders,
688-
setToolPageHeaders,
689-
selectTool,
690-
get selectedGroup() { return ext.prefs.selectedGroup },
691-
get selectedTool() { return ext.prefs.selectedTool },
692-
}
693-
}
694-
695726
export default {
696727
order: 10 - 100,
697728

0 commit comments

Comments
 (0)