This commit is contained in:
Timothy Jaeryang Baek
2026-08-14 23:50:34 -06:00
parent a5ea732c1e
commit 1b39ff352a
3 changed files with 73 additions and 28 deletions
@@ -78,6 +78,15 @@
const allTools = Object.keys(toolLabels) as Array<keyof typeof toolLabels>;
export let builtinTools: Record<string, boolean> = {};
const setBuiltinTool = (tool: keyof typeof toolLabels, checked: boolean) => {
if (checked) {
delete builtinTools[tool];
} else {
builtinTools[tool] = false;
}
builtinTools = builtinTools;
};
</script>
<div>
@@ -89,19 +98,22 @@
ariaLabel={$i18n.t(toolLabels[tool].label)}
state={builtinTools[tool] !== false ? 'checked' : 'unchecked'}
on:change={(e) => {
if (e.detail === 'checked') {
delete builtinTools[tool];
} else {
builtinTools[tool] = false;
}
builtinTools = builtinTools;
setBuiltinTool(tool, e.detail === 'checked');
}}
/>
<div class="min-w-0 text-xs text-gray-600 dark:text-gray-400">
<Tooltip content={marked.parse(toolLabels[tool].description)}>
<span class="truncate">{$i18n.t(toolLabels[tool].label)}</span>
<button
type="button"
class="min-w-0 cursor-pointer text-left text-xs text-gray-600 dark:text-gray-400"
on:click={() => setBuiltinTool(tool, builtinTools[tool] === false)}
>
<Tooltip
as="span"
className="block min-w-0"
content={marked.parse(toolLabels[tool].description)}
>
<span class="block truncate">{$i18n.t(toolLabels[tool].label)}</span>
</Tooltip>
</div>
</button>
</div>
{/each}
</div>
@@ -1,10 +1,12 @@
<script lang="ts">
import { getContext } from 'svelte';
import type { Writable } from 'svelte/store';
import type { i18n as i18nType } from 'i18next';
import Checkbox from '$lib/components/common/Checkbox.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import { marked } from 'marked';
const i18n = getContext('i18n');
const i18n: Writable<i18nType> = getContext('i18n');
const capabilityLabels = {
vision: {
@@ -67,6 +69,11 @@
export let capabilities: Partial<Record<Capability, boolean>> = {};
const setCapability = (capability: Capability, checked: boolean) => {
capabilities[capability] = checked;
capabilities = capabilities;
};
// Hide file_context when file_upload is disabled
$: visibleCapabilities = (Object.keys(capabilityLabels) as Capability[]).filter((cap) => {
if (cap === 'file_context' && !capabilities.file_upload) {
@@ -85,14 +92,22 @@
ariaLabel={$i18n.t(capabilityLabels[capability].label)}
state={capabilities[capability] ? 'checked' : 'unchecked'}
on:change={(e) => {
capabilities[capability] = e.detail === 'checked';
setCapability(capability, e.detail === 'checked');
}}
/>
<div class="min-w-0 text-xs text-gray-600 dark:text-gray-400">
<Tooltip content={marked.parse(capabilityLabels[capability].description)}>
<span class="truncate">{$i18n.t(capabilityLabels[capability].label)}</span>
<button
type="button"
class="min-w-0 cursor-pointer text-left text-xs text-gray-600 dark:text-gray-400"
on:click={() => setCapability(capability, !capabilities[capability])}
>
<Tooltip
as="span"
className="block min-w-0"
content={marked.parse(capabilityLabels[capability].description)}
>
<span class="block truncate">{$i18n.t(capabilityLabels[capability].label)}</span>
</Tooltip>
</div>
</button>
</div>
{/each}
</div>
@@ -1,10 +1,12 @@
<script lang="ts">
import { getContext } from 'svelte';
import type { Writable } from 'svelte/store';
import type { i18n as i18nType } from 'i18next';
import Checkbox from '$lib/components/common/Checkbox.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import { marked } from 'marked';
const i18n = getContext('i18n');
const i18n: Writable<i18nType> = getContext('i18n');
const featureLabels = {
web_search: {
@@ -21,8 +23,20 @@
}
};
export let availableFeatures = ['web_search', 'image_generation', 'code_interpreter'];
export let featureIds = [];
type Feature = keyof typeof featureLabels;
export let availableFeatures: Feature[] = ['web_search', 'image_generation', 'code_interpreter'];
export let featureIds: Feature[] = [];
const setFeature = (feature: Feature, checked: boolean) => {
if (checked) {
if (!featureIds.includes(feature)) {
featureIds = [...featureIds, feature];
}
} else {
featureIds = featureIds.filter((id) => id !== feature);
}
};
</script>
<div>
@@ -34,18 +48,22 @@
ariaLabel={$i18n.t(featureLabels[feature].label)}
state={featureIds.includes(feature) ? 'checked' : 'unchecked'}
on:change={(e) => {
if (e.detail === 'checked') {
featureIds = [...featureIds, feature];
} else {
featureIds = featureIds.filter((id) => id !== feature);
}
setFeature(feature, e.detail === 'checked');
}}
/>
<div class="min-w-0 text-xs text-gray-600 dark:text-gray-400">
<Tooltip content={marked.parse(featureLabels[feature].description)}>
<span class="truncate">{$i18n.t(featureLabels[feature].label)}</span>
<button
type="button"
class="min-w-0 cursor-pointer text-left text-xs text-gray-600 dark:text-gray-400"
on:click={() => setFeature(feature, !featureIds.includes(feature))}
>
<Tooltip
as="span"
className="block min-w-0"
content={marked.parse(featureLabels[feature].description)}
>
<span class="block truncate">{$i18n.t(featureLabels[feature].label)}</span>
</Tooltip>
</div>
</button>
</div>
{/each}
</div>