open-webui/src/lib/components/workspace/Models/ToolsSelector.svelte
Timothy J. Baek 493fe562ac refac
2024-06-17 14:39:21 -07:00

58 lines
1.4 KiB
Svelte

<script lang="ts">
import Checkbox from '$lib/components/common/Checkbox.svelte';
import { getContext, onMount } from 'svelte';
export let tools = [];
let _tools = {};
export let selectedToolIds = [];
const i18n = getContext('i18n');
onMount(() => {
_tools = tools.reduce((acc, tool) => {
acc[tool.id] = {
...tool,
selected: selectedToolIds.includes(tool.id)
};
return acc;
}, {});
});
</script>
<div>
<div class="flex w-full justify-between mb-1">
<div class=" self-center text-sm font-semibold">{$i18n.t('Tools')}</div>
</div>
<div class=" text-xs dark:text-gray-500">
{$i18n.t('To select toolkits here, add them to the "Tools" workspace first.')}
</div>
<div class="flex flex-col">
{#if tools.length > 0}
<div class=" flex items-center mt-2 flex-wrap">
{#each Object.keys(_tools) as tool, toolIdx}
<div class=" flex items-center gap-2 mr-3">
<div class="self-center flex items-center">
<Checkbox
state={_tools[tool].selected ? 'checked' : 'unchecked'}
on:change={(e) => {
_tools[tool].selected = e.detail === 'checked';
selectedToolIds = Object.keys(_tools).filter((t) => _tools[t].selected);
}}
/>
</div>
<div class=" py-0.5 text-sm w-full capitalize font-medium">
{_tools[tool].name}
</div>
</div>
{/each}
</div>
{/if}
</div>
</div>