This commit is contained in:
Timothy Jaeryang Baek committed 2026-08-10 18:52:18 -06:00
1 parent eeaf1a1df0
commit d4461bd6f3
139 files changed
+470 -470

No files matched your search

+2 -2
View File
@@ -4171,14 +4171,14 @@
{#if suggestedPrompts.length > 0}
<div class="flex flex-1 items-end px-5 pb-8">
<div class="w-full">
<div class="mb-2 text-[12px] text-gray-300 dark:text-gray-700">
<div class="mb-2 text-[0.75rem] text-gray-300 dark:text-gray-700">
{$i18n.t('Suggested prompts')}
</div>
<div class="flex flex-col">
{#each suggestedPrompts as suggestion}
<button
type="button"
class="flex min-h-8 w-full items-center justify-between py-1 text-left text-[13px] leading-5 text-gray-500 transition hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300"
class="flex min-h-8 w-full items-center justify-between py-1 text-left text-[0.8125rem] leading-5 text-gray-500 transition hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300"
on:click={async () => {
await tick();
await submitHandler(withSelectedText(suggestion));
@@ -95,7 +95,7 @@
{#each actions as action}
<button
aria-label={action.label}
class="px-1.5 py-[1px] hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl flex items-center gap-1 min-w-fit transition"
class="px-1.5 py-[0.0625rem] hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl flex items-center gap-1 min-w-fit transition"
on:click={async () => {
selectedText = window.getSelection().toString();
selectedAction = action;
@@ -35,7 +35,7 @@
>
<button
type="button"
class="group flex min-w-0 items-center gap-1 text-[13px] font-normal text-gray-600 transition hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
class="group flex min-w-0 items-center gap-1 text-[0.8125rem] font-normal text-gray-600 transition hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
aria-label={$i18n.t('Chat history')}
>
<span class="min-w-0 truncate">{title}</span>
@@ -92,7 +92,7 @@
/>
{/each}
{:else}
<div class="px-2 py-1.5 text-[13px] text-gray-400 dark:text-gray-500">
<div class="px-2 py-1.5 text-[0.8125rem] text-gray-400 dark:text-gray-500">
{$i18n.t('No chat history')}
</div>
{/if}
@@ -22,7 +22,7 @@
</script>
<div
class="group/item flex h-[1.6875rem] w-full cursor-pointer select-none items-center rounded-xl px-2 text-left text-[13px] font-normal text-gray-700 outline-hidden transition-colors duration-75 hover:bg-gray-50/40 dark:text-gray-100 dark:hover:bg-gray-800/40 [&_button:hover]:bg-transparent! dark:[&_button:hover]:bg-transparent! {selected
class="group/item flex h-[1.6875rem] w-full cursor-pointer select-none items-center rounded-xl px-2 text-left text-[0.8125rem] font-normal text-gray-700 outline-hidden transition-colors duration-75 hover:bg-gray-50/40 dark:text-gray-100 dark:hover:bg-gray-800/40 [&_button:hover]:bg-transparent! dark:[&_button:hover]:bg-transparent! {selected
? 'bg-gray-50/70 dark:bg-gray-800/60'
: ''}"
>
@@ -34,7 +34,7 @@
<div class="min-w-0 truncate">{title}</div>
{#if selected}
<div class="shrink-0 text-[11px] text-gray-400 dark:text-gray-500">
<div class="shrink-0 text-[0.6875rem] text-gray-400 dark:text-gray-500">
{$i18n.t('Current')}
</div>
{/if}
@@ -71,10 +71,10 @@
</Tooltip>
<div slot="content">
<DropdownMenu className="min-w-[160px] z-[9999999]">
<DropdownMenu className="min-w-[10rem] z-[9999999]">
<button
type="button"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
disabled={deleting}
on:click={async (e) => {
e.preventDefault();
+2 -2
View File
@@ -1019,7 +1019,7 @@
<div class="text-xs text-gray-500 dark:text-gray-400 mb-1">
{$i18n.t('No Terminal connection configured.')}
</div>
<div class="text-[10px] text-gray-400 dark:text-gray-500">
<div class="text-[0.625rem] text-gray-400 dark:text-gray-500">
{$i18n.t('Add your Open Terminal URL and API key in Settings → Integrations.')}
</div>
</div>
@@ -1440,7 +1440,7 @@
<div class="text-xs text-gray-400 dark:text-gray-500">
{$i18n.t('This folder is empty')}
</div>
<div class="text-[11px] text-gray-300 dark:text-gray-600">
<div class="text-[0.6875rem] text-gray-300 dark:text-gray-600">
{$i18n.t('Drop files here to upload')}
</div>
</div>
@@ -293,17 +293,17 @@
</span>
{/if}
{#if !writable && !renaming}
<span class="text-[10px] text-gray-400 shrink-0">Read-only</span>
<span class="text-[0.625rem] text-gray-400 shrink-0">Read-only</span>
{/if}
{#if entry.type === 'file' && entry.size !== undefined && !renaming}
{#if showDate && entry.modified}
<span class="text-[10px] text-gray-400 shrink-0"
<span class="text-[0.625rem] text-gray-400 shrink-0"
>{formatRelativeTime(entry.modified)}</span
>
{/if}
<span class="text-xs text-gray-400 shrink-0">{formatFileSize(entry.size)}</span>
{:else if entry.type === 'directory' && showDate && entry.modified && !renaming}
<span class="text-[10px] text-gray-400 shrink-0">{formatRelativeTime(entry.modified)}</span>
<span class="text-[0.625rem] text-gray-400 shrink-0">{formatRelativeTime(entry.modified)}</span>
{/if}
</button>
@@ -318,10 +318,10 @@
</button>
<div slot="content">
<DropdownMenu className="min-w-[150px] z-[9999999]">
<DropdownMenu className="min-w-[9.375rem] z-[9999999]">
<button
type="button"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
on:click={(e) => {
e.stopPropagation();
const path =
@@ -349,7 +349,7 @@
<button
type="button"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
on:click={(e) => {
e.stopPropagation();
const path =
@@ -367,7 +367,7 @@
<button
type="button"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition disabled:opacity-40 disabled:hover:bg-transparent"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition disabled:opacity-40 disabled:hover:bg-transparent"
disabled={!canMutate}
on:click={(e) => {
e.stopPropagation();
@@ -381,7 +381,7 @@
<button
type="button"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition disabled:opacity-40 disabled:hover:bg-transparent"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition disabled:opacity-40 disabled:hover:bg-transparent"
disabled={!canMutate}
on:click={(e) => {
e.stopPropagation();
@@ -149,7 +149,7 @@
{/if}
</div>
{#if !writable}
<span class="text-[10px] text-gray-400 dark:text-gray-500 shrink-0">
<span class="text-[0.625rem] text-gray-400 dark:text-gray-500 shrink-0">
Read-only
</span>
{/if}
@@ -196,10 +196,10 @@
</Tooltip>
<div slot="content">
<DropdownMenu className="min-w-[150px] z-[9999999]">
<DropdownMenu className="min-w-[9.375rem] z-[9999999]">
<button
type="button"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
on:click={() => onSort('name')}
>
<span class="flex-1 text-left">{$i18n.t('Name')}</span>
@@ -222,7 +222,7 @@
</button>
<button
type="button"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
on:click={() => onSort('date')}
>
<span class="flex-1 text-left">{$i18n.t('Date Modified')}</span>
@@ -74,7 +74,7 @@
<span class="ml-auto flex items-center gap-1">
{#if ports.length > 0}
<span
class="text-[10px] px-1.5 py-0.5 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400"
class="text-[0.625rem] px-1.5 py-0.5 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400"
>
{ports.length}
</span>
@@ -103,7 +103,7 @@
</button>
{#if expanded}
<div class="mt-1 space-y-0.5 max-h-[150px] overflow-y-auto">
<div class="mt-1 space-y-0.5 max-h-[9.375rem] overflow-y-auto">
{#if ports.length === 0}
<div class="text-xs text-gray-400 dark:text-gray-500 px-1 py-1">
{$i18n.t('No servers detected')}
@@ -202,7 +202,7 @@
<input
type="text"
bind:value={urlInput}
class="w-full text-[11px] font-mono bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-full px-3 py-1 outline-none focus:border-blue-400 dark:focus:border-blue-500 focus:ring-1 focus:ring-blue-400/20 text-gray-600 dark:text-gray-300 transition"
class="w-full text-[0.6875rem] font-mono bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-full px-3 py-1 outline-none focus:border-blue-400 dark:focus:border-blue-500 focus:ring-1 focus:ring-blue-400/20 text-gray-600 dark:text-gray-300 transition"
placeholder="localhost:{port}"
/>
</form>
+14 -14
View File
@@ -1687,10 +1687,10 @@
{#if atSelectedModel !== undefined}
<div class="px-2.5 pt-2.5 text-left w-full flex flex-col z-10">
<div class="flex items-center justify-between w-full">
<div class="pl-[1px] flex items-center gap-2 text-sm dark:text-gray-500">
<div class="pl-[0.0625rem] flex items-center gap-2 text-sm dark:text-gray-500">
<img
alt="model profile"
class="size-3.5 max-w-[28px] object-cover rounded-full"
class="size-3.5 max-w-[1.75rem] object-cover rounded-full"
src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${$models.find((model) => model.id === atSelectedModel.id).id}&lang=${$i18n.language}`}
/>
<div class="translate-y-[0.5px]">
@@ -2068,7 +2068,7 @@
{#if showWebSearchButton || showImageGenerationButton || showCodeInterpreterButton || showToolsButton || showSkillsButton || (toggleFilters && toggleFilters.length > 0)}
<div
class="flex self-center w-[1px] h-4 mx-1 bg-gray-200/50 dark:bg-gray-800/50 shrink-0"
class="flex self-center w-[0.0625rem] h-4 mx-1 bg-gray-200/50 dark:bg-gray-800/50 shrink-0"
/>
{/if}
@@ -2200,7 +2200,7 @@
}
}}
type="button"
class="group p-[6px] flex gap-1.5 items-center text-sm rounded-full transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden {selectedFilterIds.includes(
class="group p-[0.375rem] flex gap-1.5 items-center text-sm rounded-full transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden {selectedFilterIds.includes(
filterId
)
? 'text-sky-500 dark:text-sky-300 bg-sky-50 hover:bg-sky-100 dark:bg-sky-400/10 dark:hover:bg-sky-600/10 border border-sky-200/40 dark:border-sky-500/20'
@@ -2244,7 +2244,7 @@
<button
on:click|preventDefault={() => (webSearchEnabled = !webSearchEnabled)}
type="button"
class="group p-[6px] flex gap-1.5 items-center text-sm rounded-full transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden {webSearchEnabled ||
class="group p-[0.375rem] flex gap-1.5 items-center text-sm rounded-full transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden {webSearchEnabled ||
($settings?.webSearch ?? false) === 'always'
? ' text-sky-500 dark:text-sky-300 bg-sky-50 hover:bg-sky-100 dark:bg-sky-400/10 dark:hover:bg-sky-600/10 border border-sky-200/40 dark:border-sky-500/20'
: 'bg-transparent text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 '}"
@@ -2263,7 +2263,7 @@
on:click|preventDefault={() =>
(imageGenerationEnabled = !imageGenerationEnabled)}
type="button"
class="group p-[6px] flex gap-1.5 items-center text-sm rounded-full transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden {imageGenerationEnabled
class="group p-[0.375rem] flex gap-1.5 items-center text-sm rounded-full transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden {imageGenerationEnabled
? ' text-sky-500 dark:text-sky-300 bg-sky-50 hover:bg-sky-100 dark:bg-sky-400/10 dark:hover:bg-sky-700/10 border border-sky-200/40 dark:border-sky-500/20'
: 'bg-transparent text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 '}"
>
@@ -2285,7 +2285,7 @@
on:click|preventDefault={() =>
(codeInterpreterEnabled = !codeInterpreterEnabled)}
type="button"
class=" group p-[6px] flex gap-1.5 items-center text-sm transition-colors duration-300 max-w-full overflow-hidden {codeInterpreterEnabled
class=" group p-[0.375rem] flex gap-1.5 items-center text-sm transition-colors duration-300 max-w-full overflow-hidden {codeInterpreterEnabled
? ' text-sky-500 dark:text-sky-300 bg-sky-50 hover:bg-sky-100 dark:bg-sky-400/10 dark:hover:bg-sky-700/10 border border-sky-200/40 dark:border-sky-500/20'
: 'bg-transparent text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 '} {($settings?.highContrastMode ??
false)
@@ -2308,7 +2308,7 @@
initiateOAuthRedirect(pendingTool);
}}
type="button"
class="group px-2 py-[5px] flex gap-1.5 items-center text-xs rounded-full transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden
class="group px-2 py-[0.3125rem] flex gap-1.5 items-center text-xs rounded-full transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden
text-amber-600 dark:text-amber-400 bg-amber-50 hover:bg-amber-100 dark:bg-amber-400/10 dark:hover:bg-amber-600/10 border border-amber-200/40 dark:border-amber-500/20"
>
<Wrench className="size-3.5" strokeWidth="1.75" />
@@ -2330,7 +2330,7 @@
</div>
</div>
<div class="self-end flex space-x-1 mr-1 shrink-0 gap-[0.5px]">
<div class="self-end flex space-x-1 mr-1 shrink-0 gap-[0.03125rem]">
<div class="flex min-w-0 max-w-[10rem] items-center sm:max-w-[13rem]">
<ModelSelector
bind:this={modelSelector}
@@ -2338,7 +2338,7 @@
showSetDefault={!history?.currentId}
placement="auto"
align="end"
triggerClassName="items-center gap-1.5 rounded-lg pl-2 pr-1.5 py-1 text-[13px] font-normal text-gray-600 transition-colors duration-100 hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800/40 dark:hover:text-gray-200"
triggerClassName="items-center gap-1.5 rounded-lg pl-2 pr-1.5 py-1 text-[0.8125rem] font-normal text-gray-600 transition-colors duration-100 hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800/40 dark:hover:text-gray-200"
/>
</div>
@@ -2363,7 +2363,7 @@
<Tooltip content={$i18n.t('Stop')}>
<button
aria-label={$i18n.t('Stop')}
class="bg-white hover:bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-[5px]"
class="bg-white hover:bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-[0.3125rem]"
on:click={() => {
stopResponse();
}}
@@ -2420,7 +2420,7 @@
}}
aria-label="Voice Input"
>
<Mic className="size-[18px]" />
<Mic className="size-[1.125rem]" />
</button>
</Tooltip>
{/if}
@@ -2431,7 +2431,7 @@
<!-- {$i18n.t('Call')} -->
<Tooltip content={$i18n.t('Voice mode')}>
<button
class=" bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full p-[5px] self-center"
class=" bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full p-[0.3125rem] self-center"
type="button"
on:click={async () => {
if (selectedModels.length > 1) {
@@ -2500,7 +2500,7 @@
id="send-message-button"
class="{!(prompt === '' && files.length === 0) || uploadPending
? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
: 'text-white bg-gray-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-[5px] self-center"
: 'text-white bg-gray-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-[0.3125rem] self-center"
type="submit"
disabled={(prompt === '' && files.length === 0) || uploadPending}
>
@@ -26,10 +26,10 @@
<slot />
<div slot="content">
<DropdownMenu className="min-w-[180px] z-[9999] dark:bg-gray-900 shadow-xs">
<DropdownMenu className="min-w-[11.25rem] z-[9999] dark:bg-gray-900 shadow-xs">
{#each devices as device}
<button
class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
on:click={() => {
dispatch('change', device.deviceId);
}}
@@ -168,7 +168,7 @@
{#each knowledgeResults as item, idx}
{@const itemIdx = idx}
{#if idx === 0 || item?.type !== knowledgeResults[idx - 1]?.type}
<div class="px-2 py-1 text-[11px] text-gray-500 dark:text-gray-400">
<div class="px-2 py-1 text-[0.6875rem] text-gray-500 dark:text-gray-400">
{#if item?.type === 'folder'}
{$i18n.t('Folders')}
{:else if item?.type === 'collection'}
@@ -180,7 +180,7 @@
{/if}
<button
class="flex h-[1.6875rem] w-full items-center justify-between rounded-xl px-2 text-left text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {itemIdx ===
class="flex h-[1.6875rem] w-full items-center justify-between rounded-xl px-2 text-left text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {itemIdx ===
selectedIdx
? 'bg-gray-50/40 dark:bg-gray-800/40 dark:text-gray-100 selected-command-option-button'
: ''}"
@@ -232,7 +232,7 @@
{/if}
{#if filteredModels.length > 0}
<div class="px-2 py-1 text-[11px] text-gray-500 dark:text-gray-400">
<div class="px-2 py-1 text-[0.6875rem] text-gray-500 dark:text-gray-400">
{$i18n.t('Models')}
</div>
@@ -240,7 +240,7 @@
{@const itemIdx = knowledgeResults.length + modelIdx}
<Tooltip content={model.id} placement="top-start">
<button
class="flex h-[1.6875rem] w-full items-center rounded-xl px-2 text-left text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {itemIdx ===
class="flex h-[1.6875rem] w-full items-center rounded-xl px-2 text-left text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {itemIdx ===
selectedIdx
? 'bg-gray-50/40 dark:bg-gray-800/40 selected-command-option-button'
: ''}"
@@ -64,13 +64,13 @@
</script>
{#if filteredItems.length > 0}
<div class="px-2 py-1 text-[11px] text-gray-500 dark:text-gray-400">
<div class="px-2 py-1 text-[0.6875rem] text-gray-500 dark:text-gray-400">
{$i18n.t('Emojis')}
</div>
{#each filteredItems as emoji, emojiIdx}
<button
class="flex h-[1.6875rem] w-full items-center rounded-xl px-2 text-left text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {emojiIdx ===
class="flex h-[1.6875rem] w-full items-center rounded-xl px-2 text-left text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {emojiIdx ===
selectedIdx
? 'bg-gray-50/40 dark:bg-gray-800/40 selected-command-option-button'
: ''}"
@@ -91,7 +91,7 @@
class="size-4.5 flex-shrink-0"
loading="lazy"
/>
<div class="truncate text-[13px]">
<div class="truncate text-[0.8125rem]">
:{emoji.shortCodes[0]}:
</div>
</div>
@@ -142,7 +142,7 @@
{#if filteredItems.length > 0 || query.startsWith('http')}
{#each filteredItems as item, idx}
{#if idx === 0 || item?.type !== items[idx - 1]?.type}
<div class="px-2 py-1 text-[11px] text-gray-500 dark:text-gray-400">
<div class="px-2 py-1 text-[0.6875rem] text-gray-500 dark:text-gray-400">
{#if item?.type === 'folder'}
{$i18n.t('Folders')}
{:else if item?.type === 'collection'}
@@ -155,7 +155,7 @@
{#if !['youtube', 'web'].includes(item.type)}
<button
class="flex h-[1.6875rem] w-full items-center justify-between rounded-xl px-2 text-left text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {idx ===
class="flex h-[1.6875rem] w-full items-center justify-between rounded-xl px-2 text-left text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {idx ===
selectedIdx
? 'bg-gray-50/40 dark:bg-gray-800/40 dark:text-gray-100 selected-command-option-button'
: ''}"
@@ -204,7 +204,7 @@
{#if isYoutubeUrl(query)}
<button
class="flex h-[1.6875rem] w-full items-center rounded-xl bg-gray-50/40 px-2 text-left text-[13px] dark:bg-gray-800/40 dark:text-gray-100 selected-command-option-button"
class="flex h-[1.6875rem] w-full items-center rounded-xl bg-gray-50/40 px-2 text-left text-[0.8125rem] dark:bg-gray-800/40 dark:text-gray-100 selected-command-option-button"
type="button"
data-selected={selectedIdx === filteredItems.findIndex((i) => i.type === 'youtube')}
on:click={() => {
@@ -232,7 +232,7 @@
</button>
{:else if query.startsWith('http')}
<button
class="flex h-[1.6875rem] w-full items-center rounded-xl bg-gray-50/40 px-2 text-left text-[13px] dark:bg-gray-800/40 dark:text-gray-100 selected-command-option-button"
class="flex h-[1.6875rem] w-full items-center rounded-xl bg-gray-50/40 px-2 text-left text-[0.8125rem] dark:bg-gray-800/40 dark:text-gray-100 selected-command-option-button"
type="button"
data-selected={selectedIdx === filteredItems.findIndex((i) => i.type === 'web')}
on:click={() => {
@@ -60,7 +60,7 @@
};
</script>
<div class="px-2 py-1 text-[11px] text-gray-500 dark:text-gray-400">
<div class="px-2 py-1 text-[0.6875rem] text-gray-500 dark:text-gray-400">
{$i18n.t('Models')}
</div>
@@ -68,7 +68,7 @@
{#each filteredItems as model, modelIdx}
<Tooltip content={model.id} placement="top-start">
<button
class="flex h-[1.6875rem] w-full items-center rounded-xl px-2 text-left text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {modelIdx ===
class="flex h-[1.6875rem] w-full items-center rounded-xl px-2 text-left text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {modelIdx ===
selectedIdx
? 'bg-gray-50/40 dark:bg-gray-800/40 selected-command-option-button'
: ''}"
@@ -57,7 +57,7 @@
};
</script>
<div class="px-2 py-1 text-[11px] text-gray-500 dark:text-gray-400">
<div class="px-2 py-1 text-[0.6875rem] text-gray-500 dark:text-gray-400">
{$i18n.t('Prompts')}
</div>
@@ -66,7 +66,7 @@
{#each filteredItems as promptItem, promptIdx}
<Tooltip content={promptItem.name} placement="top-start">
<button
class="flex h-[1.6875rem] w-full items-center gap-1.5 rounded-xl px-2 text-left text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {promptIdx ===
class="flex h-[1.6875rem] w-full items-center gap-1.5 rounded-xl px-2 text-left text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {promptIdx ===
selectedPromptIdx
? 'bg-gray-50/40 dark:bg-gray-800/40 selected-command-option-button'
: ''}"
@@ -69,7 +69,7 @@
};
</script>
<div class="px-2 py-1 text-[11px] text-gray-500 dark:text-gray-400">
<div class="px-2 py-1 text-[0.6875rem] text-gray-500 dark:text-gray-400">
{$i18n.t('Skills')}
</div>
@@ -81,7 +81,7 @@
tippyOptions={{ maxWidth: '20rem' }}
>
<button
class="flex h-[1.6875rem] w-full items-center rounded-xl px-2 text-left text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {skillIdx ===
class="flex h-[1.6875rem] w-full items-center rounded-xl px-2 text-left text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {skillIdx ===
selectedIdx
? 'bg-gray-50/40 dark:bg-gray-800/40 selected-command-option-button'
: ''}"
@@ -299,7 +299,7 @@
{/if}
{#if filteredPrompts.length > 0}
<div class="px-2 py-1 text-[11px] text-gray-500 dark:text-gray-400">
<div class="px-2 py-1 text-[0.6875rem] text-gray-500 dark:text-gray-400">
{$i18n.t('Prompts')}
</div>
@@ -307,7 +307,7 @@
{@const itemIdx = commandItems.length + promptIdx}
<Tooltip content={promptItem.name} placement="top-start">
<button
class="flex h-[1.6875rem] w-full items-center gap-1.5 rounded-xl px-2 text-left text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {itemIdx ===
class="flex h-[1.6875rem] w-full items-center gap-1.5 rounded-xl px-2 text-left text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {itemIdx ===
selectedIdx
? 'bg-gray-50/40 dark:bg-gray-800/40 selected-command-option-button'
: ''}"
@@ -334,7 +334,7 @@
{/if}
{#if skills.length > 0}
<div class="px-2 py-1 text-[11px] text-gray-500 dark:text-gray-400">
<div class="px-2 py-1 text-[0.6875rem] text-gray-500 dark:text-gray-400">
{$i18n.t('Skills')}
</div>
@@ -346,7 +346,7 @@
tippyOptions={{ maxWidth: '20rem' }}
>
<button
class="flex h-[1.6875rem] w-full items-center rounded-xl px-2 text-left text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {itemIdx ===
class="flex h-[1.6875rem] w-full items-center rounded-xl px-2 text-left text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 {itemIdx ===
selectedIdx
? 'bg-gray-50/40 dark:bg-gray-800/40 selected-command-option-button'
: ''}"
@@ -138,7 +138,7 @@
className="w-full"
>
<button
class="flex w-full gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal select-none cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl {!fileUploadEnabled
class="flex w-full gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal select-none cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl {!fileUploadEnabled
? 'opacity-50'
: ''}"
type="button"
@@ -164,7 +164,7 @@
className="w-full"
>
<button
class="flex w-full gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal select-none cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl {!fileUploadEnabled
class="flex w-full gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal select-none cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl {!fileUploadEnabled
? 'opacity-50'
: ''}"
type="button"
@@ -195,7 +195,7 @@
className="w-full"
>
<button
class="flex w-full gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal select-none cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl {!webUploadEnabled
class="flex w-full gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal select-none cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl {!webUploadEnabled
? 'opacity-50'
: ''}"
type="button"
@@ -220,7 +220,7 @@
className="w-full"
>
<button
class="flex gap-2 w-full items-center h-[1.6875rem] px-2 text-[13px] font-normal select-none cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl {!fileUploadEnabled
class="flex gap-2 w-full items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal select-none cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl {!fileUploadEnabled
? 'opacity-50'
: ''}"
on:click={() => {
@@ -253,7 +253,7 @@
className="w-full"
>
<button
class="flex gap-2 w-full items-center h-[1.6875rem] px-2 text-[13px] font-normal select-none cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl {!fileUploadEnabled
class="flex gap-2 w-full items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal select-none cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl {!fileUploadEnabled
? 'opacity-50'
: ''}"
on:click={() => {
@@ -284,7 +284,7 @@
className="w-full"
>
<button
class="flex gap-2 w-full items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl {!fileUploadEnabled
class="flex gap-2 w-full items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl {!fileUploadEnabled
? 'opacity-50'
: ''}"
on:click={() => {
@@ -314,7 +314,7 @@
className="w-full"
>
<button
class="flex gap-2 w-full items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl {!fileUploadEnabled
class="flex gap-2 w-full items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl {!fileUploadEnabled
? 'opacity-50'
: ''}"
on:click={() => {
@@ -338,7 +338,7 @@
{#if fileUploadEnabled}
{#if $config?.features?.enable_google_drive_integration}
<button
class="flex w-full gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal select-none cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl"
class="flex w-full gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal select-none cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl"
type="button"
on:click={() => {
uploadGoogleDriveHandler();
@@ -381,7 +381,7 @@
{#if $config?.features?.enable_onedrive_integration && ($config?.features?.enable_onedrive_personal || $config?.features?.enable_onedrive_business)}
<button
class="flex gap-2 w-full items-center h-[1.6875rem] px-2 text-[13px] font-normal select-none cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl {!fileUploadEnabled
class="flex gap-2 w-full items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal select-none cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl {!fileUploadEnabled
? 'opacity-50'
: ''}"
on:click={() => {
@@ -490,7 +490,7 @@
{:else if tab === 'knowledge'}
<div class="flex max-h-72 flex-col overflow-hidden" in:fly={{ x: 20, duration: 150 }}>
<button
class="flex w-full shrink-0 justify-between gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal select-none cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
class="flex w-full shrink-0 justify-between gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal select-none cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
on:click={() => {
tab = '';
}}
@@ -509,7 +509,7 @@
{:else if tab === 'notes'}
<div class="flex max-h-72 flex-col overflow-hidden" in:fly={{ x: 20, duration: 150 }}>
<button
class="flex w-full shrink-0 justify-between gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal select-none cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
class="flex w-full shrink-0 justify-between gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal select-none cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
on:click={() => {
tab = '';
}}
@@ -528,7 +528,7 @@
{:else if tab === 'files'}
<div class="flex max-h-72 flex-col overflow-hidden" in:fly={{ x: 20, duration: 150 }}>
<button
class="flex w-full shrink-0 justify-between gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal select-none cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
class="flex w-full shrink-0 justify-between gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal select-none cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
on:click={() => {
tab = '';
}}
@@ -547,7 +547,7 @@
{:else if tab === 'chats'}
<div class="flex max-h-72 flex-col overflow-hidden" in:fly={{ x: 20, duration: 150 }}>
<button
class="flex w-full shrink-0 justify-between gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal select-none cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
class="flex w-full shrink-0 justify-between gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal select-none cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
on:click={() => {
tab = '';
}}
@@ -566,7 +566,7 @@
{:else if tab === 'microsoft_onedrive'}
<div in:fly={{ x: 20, duration: 150 }}>
<button
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal select-none cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal select-none cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
on:click={() => {
tab = '';
}}
@@ -582,7 +582,7 @@
{#if $config?.features?.enable_onedrive_personal}
<button
class="flex w-full gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal select-none cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl text-left"
class="flex w-full gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal select-none cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl text-left"
type="button"
on:click={() => {
uploadOneDriveHandler('personal');
@@ -597,7 +597,7 @@
{#if $config?.features?.enable_onedrive_business}
<button
class="flex w-full gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal select-none cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl text-left"
class="flex w-full gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal select-none cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl text-left"
type="button"
on:click={() => {
uploadOneDriveHandler('organizations');
@@ -121,7 +121,7 @@
<div class="flex flex-col gap-0.5">
{#each items as item, idx}
<button
class=" h-[1.6875rem] px-2 rounded-xl w-full text-left flex justify-between items-center text-[13px] font-normal {idx ===
class=" h-[1.6875rem] px-2 rounded-xl w-full text-left flex justify-between items-center text-[0.8125rem] font-normal {idx ===
selectedIdx
? ' bg-gray-50/40 dark:bg-gray-800/40 dark:text-gray-100 selected-command-option-button'
: ''}"
@@ -110,7 +110,7 @@
<div class="flex flex-col gap-0.5">
{#each items as item, idx}
<button
class=" h-[1.6875rem] px-2 rounded-xl w-full text-left flex justify-between items-center text-[13px] font-normal {idx ===
class=" h-[1.6875rem] px-2 rounded-xl w-full text-left flex justify-between items-center text-[0.8125rem] font-normal {idx ===
selectedIdx
? ' bg-gray-50/40 dark:bg-gray-800/40 dark:text-gray-100 selected-command-option-button'
: ''}"
@@ -200,7 +200,7 @@
{:else}
{#each items as item, idx (item.id)}
<div
class=" h-[1.6875rem] px-2 rounded-xl w-full text-left flex justify-between items-center text-[13px] font-normal hover:bg-gray-50/40 hover:text-gray-900 dark:hover:bg-gray-800/40 dark:hover:text-gray-100 {idx ===
class=" h-[1.6875rem] px-2 rounded-xl w-full text-left flex justify-between items-center text-[0.8125rem] font-normal hover:bg-gray-50/40 hover:text-gray-900 dark:hover:bg-gray-800/40 dark:hover:text-gray-100 {idx ===
selectedIdx
? ' bg-gray-50/40 dark:bg-gray-800/40 dark:text-gray-100 selected-command-option-button'
: ''}"
@@ -234,7 +234,7 @@
placement="top-start"
className="flex flex-1 min-w-0"
>
<div class="line-clamp-1 flex-1 text-[13px]">
<div class="line-clamp-1 flex-1 text-[0.8125rem]">
{decodeString(item?.name)}
</div>
</Tooltip>
@@ -275,7 +275,7 @@
{:else}
{#each selectedFileItems as file, fileIdx (file.id)}
<button
class=" h-[1.6875rem] px-2 rounded-xl w-full text-left flex justify-between items-center text-[13px] font-normal hover:bg-gray-50/40 hover:text-gray-900 dark:hover:bg-gray-800/40 dark:hover:text-gray-100"
class=" h-[1.6875rem] px-2 rounded-xl w-full text-left flex justify-between items-center text-[0.8125rem] font-normal hover:bg-gray-50/40 hover:text-gray-900 dark:hover:bg-gray-800/40 dark:hover:text-gray-100"
type="button"
on:click={() => {
console.log(file);
@@ -292,7 +292,7 @@
</Tooltip>
<Tooltip content={decodeString(file?.meta?.name)} placement="top-start">
<div class="line-clamp-1 flex-1 text-[13px]">
<div class="line-clamp-1 flex-1 text-[0.8125rem]">
{decodeString(file?.meta?.name)}
</div>
</Tooltip>
@@ -122,7 +122,7 @@
<div class="flex flex-col gap-0.5">
{#each items as item, idx}
<button
class=" h-[1.6875rem] px-2 rounded-xl w-full text-left flex justify-between items-center text-[13px] font-normal {idx ===
class=" h-[1.6875rem] px-2 rounded-xl w-full text-left flex justify-between items-center text-[0.8125rem] font-normal {idx ===
selectedIdx
? ' bg-gray-50/40 dark:bg-gray-800/40 dark:text-gray-100 selected-command-option-button'
: ''}"
@@ -14,7 +14,7 @@
<input
bind:value
class="w-full bg-transparent text-[13px] font-normal outline-hidden placeholder:text-gray-400 dark:placeholder:text-gray-500"
class="w-full bg-transparent text-[0.8125rem] font-normal outline-hidden placeholder:text-gray-400 dark:placeholder:text-gray-500"
{placeholder}
autocomplete="off"
aria-label={placeholder}
@@ -149,7 +149,7 @@
{#if tools}
{#if Object.keys(tools).length > 0}
<button
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
on:click={() => {
tab = 'tools';
}}
@@ -171,7 +171,7 @@
{#if skills && Object.keys(skills).length > 0}
<button
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
on:click={() => {
tab = 'skills';
}}
@@ -200,7 +200,7 @@
{#each toggleFilters.sort( (a, b) => a.name.localeCompare( b.name, undefined, { sensitivity: 'base' } ) ) as filter, filterIdx (filter.id)}
<Tooltip content={filter?.description} placement="top-start">
<button
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
on:click={() => {
if (selectedFilterIds.includes(filter.id)) {
selectedFilterIds = selectedFilterIds.filter((id) => id !== filter.id);
@@ -270,7 +270,7 @@
{#if showWebSearchButton}
<Tooltip content={$i18n.t('Search the internet')} placement="top-start">
<button
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
aria-pressed={webSearchEnabled}
aria-label={webSearchEnabled
? $i18n.t('Disable Web Search')
@@ -306,7 +306,7 @@
{#if showImageGenerationButton}
<Tooltip content={$i18n.t('Generate an image')} placement="top-start">
<button
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
aria-pressed={imageGenerationEnabled}
aria-label={imageGenerationEnabled
? $i18n.t('Disable Image Generation')
@@ -341,7 +341,7 @@
{#if showCodeInterpreterButton}
<Tooltip content={$i18n.t('Execute code for analysis')} placement="top-start">
<button
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
aria-pressed={codeInterpreterEnabled}
aria-label={codeInterpreterEnabled
? $i18n.t('Disable Code Interpreter')
@@ -376,7 +376,7 @@
{:else if tab === 'tools' && tools}
<div in:fly={{ x: 20, duration: 150 }}>
<button
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
on:click={() => {
tab = '';
}}
@@ -393,7 +393,7 @@
{#each Object.keys(tools) as toolId}
<button
class="relative flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
class="relative flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
on:click={async (e) => {
if (!(tools[toolId]?.authenticated ?? true)) {
e.preventDefault();
@@ -499,7 +499,7 @@
{:else if tab === 'skills' && skills}
<div in:fly={{ x: 20, duration: 150 }}>
<button
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
on:click={() => {
tab = '';
}}
@@ -516,7 +516,7 @@
{#each Object.keys(skills) as skillId}
<button
class="relative flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
class="relative flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal cursor-pointer rounded-xl hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
on:click={async () => {
skills[skillId].enabled = !skills[skillId].enabled;
@@ -48,14 +48,14 @@
</div>
{:else}
<div
class="flex h-6 max-w-[9rem] items-center gap-1 rounded-lg border border-gray-100/60 bg-white/60 px-1.5 text-[11px] leading-none text-gray-500 dark:border-white/[0.06] dark:bg-white/[0.025] dark:text-gray-400"
class="flex h-6 max-w-[9rem] items-center gap-1 rounded-lg border border-gray-100/60 bg-white/60 px-1.5 text-[0.6875rem] leading-none text-gray-500 dark:border-white/[0.06] dark:bg-white/[0.025] dark:text-gray-400"
>
{#if file.status === 'uploading'}
<span class="shrink-0 text-gray-400 dark:text-gray-500">
<Spinner className="size-3" />
</span>
{/if}
<span class="max-w-[80px] truncate">{file.name ?? 'file'}</span>
<span class="max-w-[5rem] truncate">{file.name ?? 'file'}</span>
</div>
{/if}
{/each}
@@ -109,7 +109,7 @@
<Tooltip content={$i18n.t('Terminal')} placement="top">
<button
type="button"
class="flex items-center gap-1.5 translate-y-[1px] text-[13px] text-gray-600 hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800/40 dark:hover:text-gray-200 transition rounded-lg cursor-pointer {$selectedTerminalId &&
class="flex items-center gap-1.5 translate-y-[1px] text-[0.8125rem] text-gray-600 hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800/40 dark:hover:text-gray-200 transition rounded-lg cursor-pointer {$selectedTerminalId &&
selectedLabel
? ' p-1 '
: ' p-1 opacity-50'}"
@@ -117,7 +117,7 @@
<Cloud className="size-3.5" strokeWidth="2" />
{#if $selectedTerminalId && selectedLabel}
<span class="truncate text-[13px] max-w-[100px] sm:max-w-[150px]">{selectedLabel}</span>
<span class="truncate text-[0.8125rem] max-w-[6.25rem] sm:max-w-[9.375rem]">{selectedLabel}</span>
{/if}
</button>
</Tooltip>
@@ -130,7 +130,7 @@
{#if directTerminals.length > 0 && ($user?.role === 'admin' || ($user?.permissions?.features?.direct_tool_servers ?? true))}
<div class="flex items-center justify-between px-3 py-1">
<span
class="text-[10px] font-normal text-gray-400 dark:text-gray-500 uppercase tracking-wider"
class="text-[0.625rem] font-normal text-gray-400 dark:text-gray-500 uppercase tracking-wider"
>
{$i18n.t('Direct')}
</span>
@@ -161,7 +161,7 @@
{#each directTerminals as terminal}
<button
type="button"
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer rounded-xl {$selectedTerminalId ===
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal cursor-pointer rounded-xl {$selectedTerminalId ===
terminal.url
? 'bg-gray-50/40 dark:bg-gray-800/40'
: 'hover:bg-gray-50/40 dark:hover:bg-gray-800/40'}"
@@ -197,7 +197,7 @@
{#if systemTerminals.length > 0}
<div class="flex items-center justify-between px-3 py-1">
<span
class="text-[10px] font-normal text-gray-400 dark:text-gray-500 uppercase tracking-wider"
class="text-[0.625rem] font-normal text-gray-400 dark:text-gray-500 uppercase tracking-wider"
>
{$i18n.t('System')}
</span>
@@ -230,7 +230,7 @@
{#each systemTerminals as terminal}
<button
type="button"
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer rounded-xl {$selectedTerminalId ===
class="flex w-full justify-between gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal cursor-pointer rounded-xl {$selectedTerminalId ===
terminal.id
? 'bg-gray-50/40 dark:bg-gray-800/40'
: 'hover:bg-gray-50/40 dark:hover:bg-gray-800/40'}"
@@ -497,7 +497,7 @@
{#each visualizerData.slice().reverse() as rms}
<div class="flex items-center h-full">
<div
class="w-[2px] shrink-0
class="w-[0.125rem] shrink-0
{loading
? ' bg-gray-500 dark:bg-gray-400 '
@@ -188,7 +188,7 @@
{/each}
{#if citations.length > 3}
<div
class="size-4 rounded-full shrink-0 border border-white dark:border-gray-850 bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-[8px] font-normal text-gray-500 dark:text-gray-400 whitespace-nowrap tracking-tighter"
class="size-4 rounded-full shrink-0 border border-white dark:border-gray-850 bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-[0.5rem] font-normal text-gray-500 dark:text-gray-400 whitespace-nowrap tracking-tighter"
aria-hidden="true"
>
+{citations.length - Math.min(urlCitations.length, 3)}
@@ -41,7 +41,7 @@
{#if title !== 'N/A'}
<button
aria-label={$i18n.t('View source: {{title}}', { title: formattedTitle(decodeString(title)) })}
class="text-[10px] w-fit translate-y-[2px] px-2 py-0.5 dark:bg-white/5 dark:text-white/80 dark:hover:text-white bg-gray-50 text-black/80 hover:text-black transition rounded-xl"
class="text-[0.625rem] w-fit translate-y-[2px] px-2 py-0.5 dark:bg-white/5 dark:text-white/80 dark:hover:text-white bg-gray-50 text-black/80 hover:text-black transition rounded-xl"
on:click={() => {
onClick(id);
}}
@@ -49,7 +49,7 @@
<LinkPreview.Trigger>
<button
aria-label={`${getDisplayTitle(formattedTitle(decodeString(sourceIds[token.ids[0] - 1])))} +${(token?.ids ?? []).length - 1} more sources`}
class="text-[10px] w-fit translate-y-[2px] px-2 py-0.5 dark:bg-white/5 dark:text-white/80 dark:hover:text-white bg-gray-50 text-black/80 hover:text-black transition rounded-xl"
class="text-[0.625rem] w-fit translate-y-[2px] px-2 py-0.5 dark:bg-white/5 dark:text-white/80 dark:hover:text-white bg-gray-50 text-black/80 hover:text-black transition rounded-xl"
on:click={() => {
openPreview = !openPreview;
}}
@@ -259,7 +259,7 @@
<!-- Role label -->
<div class="flex items-start pt-1.5">
<div
class="text-[11px] font-normal uppercase tracking-wide min-w-[4.5rem] text-gray-400 dark:text-gray-500"
class="text-[0.6875rem] font-normal uppercase tracking-wide min-w-[4.5rem] text-gray-400 dark:text-gray-500"
>
{getItemLabel(di)}
</div>
@@ -28,12 +28,12 @@
<slot></slot>
<div slot="content">
<DropdownMenu className="max-w-[200px] transition">
<DropdownMenu className="max-w-[12.5rem] transition">
<div class="py-1 px-2 flex dark:text-gray-100">
<input
type="text"
id="floating-message-input"
class="bg-transparent outline-hidden w-full flex-1 text-[13px]"
class="bg-transparent outline-hidden w-full flex-1 text-[0.8125rem]"
placeholder={$i18n.t('Suggest a change')}
bind:value={inputValue}
autocomplete="off"
@@ -73,7 +73,7 @@
</div>
<hr class="border-gray-50/30 dark:border-gray-800/30 my-0.5 mx-1" />
<button
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
on:click={() => {
onRegenerate();
show = false;
@@ -98,7 +98,7 @@
</button>
<button
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
on:click={() => {
onRegenerate($i18n.t('Add Details'));
}}
@@ -108,7 +108,7 @@
</button>
<button
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40"
on:click={() => {
onRegenerate($i18n.t('More Concise'));
}}
@@ -59,7 +59,7 @@
</div>
{#if idx !== history.length - 1}
<div
class="w-[0.5px] ml-[6.5px] h-[calc(100%-14px)] bg-gray-300 dark:bg-gray-700"
class="w-[0.03125rem] ml-[0.40625rem] h-[calc(100%-14px)] bg-gray-300 dark:bg-gray-700"
/>
{/if}
</div>
@@ -52,7 +52,7 @@
role="option"
aria-selected={isSelected}
aria-label={$i18n.t('Select {{modelName}} model', { modelName: item.label })}
class="group/item flex h-8 w-full cursor-pointer select-none items-center rounded-xl px-2 text-left text-[13px] font-normal text-gray-700 outline-hidden transition-colors duration-75 hover:bg-gray-50/40 dark:text-gray-100 dark:hover:bg-gray-800/40 {index ===
class="group/item flex h-8 w-full cursor-pointer select-none items-center rounded-xl px-2 text-left text-[0.8125rem] font-normal text-gray-700 outline-hidden transition-colors duration-75 hover:bg-gray-50/40 dark:text-gray-100 dark:hover:bg-gray-800/40 {index ===
selectedModelIdx && !compareEnabled
? 'bg-gray-50/70 dark:bg-gray-800/60'
: ''} {isSelected ? 'bg-gray-50/70 dark:bg-gray-800/60' : ''}"
@@ -121,7 +121,7 @@
}`}
className="self-end"
>
<span class="line-clamp-1 text-[11px] font-normal text-gray-500 dark:text-gray-400"
<span class="line-clamp-1 text-[0.6875rem] font-normal text-gray-500 dark:text-gray-400"
>{item.model.ollama?.details?.parameter_size ?? ''}</span
>
</Tooltip>
@@ -44,11 +44,11 @@
</Tooltip>
<div slot="content">
<DropdownMenu className="min-w-[210px] z-[9999999]">
<DropdownMenu className="min-w-[13.125rem] z-[9999999]">
{#if model?.preset || model?.info?.base_model_id ? model?.info?.user_id === $user?.id : $user?.role === 'admin'}
<button
type="button"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
on:click={(e) => {
e.stopPropagation();
e.preventDefault();
@@ -69,7 +69,7 @@
{#if $user?.role === 'admin' && model?.owned_by === 'ollama'}
<button
type="button"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
on:click={(e) => {
e.stopPropagation();
e.preventDefault();
@@ -103,7 +103,7 @@
<button
type="button"
aria-pressed={($settings?.pinnedModels ?? []).includes(model?.id)}
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
on:click={(e) => {
e.stopPropagation();
e.preventDefault();
@@ -129,7 +129,7 @@
<button
type="button"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
on:click={(e) => {
e.stopPropagation();
e.preventDefault();
@@ -148,7 +148,7 @@
<button
type="button"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
on:click={(e) => {
e.stopPropagation();
e.preventDefault();
@@ -799,7 +799,7 @@
<input
id="model-search-input"
bind:value={searchValue}
class="w-full bg-transparent text-[13px] font-normal outline-hidden placeholder:text-gray-400 dark:placeholder:text-gray-500"
class="w-full bg-transparent text-[0.8125rem] font-normal outline-hidden placeholder:text-gray-400 dark:placeholder:text-gray-500"
placeholder={searchPlaceholder}
autocomplete="off"
aria-label={$i18n.t('Search In Models')}
@@ -853,8 +853,8 @@
placeholder={$i18n.t('All')}
align="end"
items={modelFilterItems}
triggerClass="relative flex h-[1.375rem] max-w-32 items-center gap-0.5 rounded-xl bg-transparent px-1.5 text-[11px] font-normal text-gray-400 transition-colors duration-100 hover:bg-gray-50/40 hover:text-gray-600 dark:text-gray-500 dark:hover:bg-gray-800/40 dark:hover:text-gray-300"
itemClass="flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-[13px] capitalize hover:bg-gray-50/40 hover:text-gray-900 dark:hover:bg-gray-800/40 dark:hover:text-gray-100"
triggerClass="relative flex h-[1.375rem] max-w-32 items-center gap-0.5 rounded-xl bg-transparent px-1.5 text-[0.6875rem] font-normal text-gray-400 transition-colors duration-100 hover:bg-gray-50/40 hover:text-gray-600 dark:text-gray-500 dark:hover:bg-gray-800/40 dark:hover:text-gray-300"
itemClass="flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-[0.8125rem] capitalize hover:bg-gray-50/40 hover:text-gray-900 dark:hover:bg-gray-800/40 dark:hover:text-gray-100"
contentClass="min-w-36 model-selector-child-menu"
onChange={setModelFilter}
/>
@@ -875,12 +875,12 @@
>
{$i18n.t('No models available')}
</div>
<div class="w-full text-[11px] leading-3.5 text-gray-500 dark:text-gray-400">
<div class="w-full text-[0.6875rem] leading-3.5 text-gray-500 dark:text-gray-400">
{$i18n.t('Connect to an AI provider to start chatting')}
</div>
<button
type="button"
class="mt-3 rounded-lg px-0 py-1 text-[11px] font-normal leading-none text-gray-600 underline-offset-2 transition-colors duration-100 hover:text-gray-800 hover:underline focus:outline-hidden focus:underline dark:text-gray-300 dark:hover:text-gray-100"
class="mt-3 rounded-lg px-0 py-1 text-[0.6875rem] font-normal leading-none text-gray-600 underline-offset-2 transition-colors duration-100 hover:text-gray-800 hover:underline focus:outline-hidden focus:underline dark:text-gray-300 dark:hover:text-gray-100"
on:click={() => {
show = false;
showSettings.set('admin:connections');
@@ -891,7 +891,7 @@
</div>
{:else}
<div class="">
<div class="block px-2 py-1 text-[13px] text-gray-700 dark:text-gray-100">
<div class="block px-2 py-1 text-[0.8125rem] text-gray-700 dark:text-gray-100">
{$i18n.t('No results found')}
</div>
</div>
@@ -940,7 +940,7 @@
placement="top-start"
>
<button
class="flex h-[1.6875rem] w-full cursor-pointer select-none items-center rounded-xl px-2 text-[13px] font-normal text-gray-700 outline-hidden transition-colors duration-75 hover:bg-gray-50/40 dark:text-gray-100 dark:hover:bg-gray-800/40"
class="flex h-[1.6875rem] w-full cursor-pointer select-none items-center rounded-xl px-2 text-[0.8125rem] font-normal text-gray-700 outline-hidden transition-colors duration-75 hover:bg-gray-50/40 dark:text-gray-100 dark:hover:bg-gray-800/40"
on:click={() => {
pullModelHandler();
}}
@@ -956,7 +956,7 @@
{#each selectionOnly ? [] : Object.keys($MODEL_DOWNLOAD_POOL) as model}
<div
class="flex min-h-[1.6875rem] w-full cursor-pointer select-none justify-between rounded-xl px-2 text-[13px] font-normal text-gray-700 outline-hidden transition-colors duration-75 dark:text-gray-100"
class="flex min-h-[1.6875rem] w-full cursor-pointer select-none justify-between rounded-xl px-2 text-[0.8125rem] font-normal text-gray-700 outline-hidden transition-colors duration-75 dark:text-gray-100"
>
<div class="flex">
<div class="mr-2.5 translate-y-0.5">
+3 -3
View File
@@ -118,7 +118,7 @@
{#if chat?.id}
<div class="flex max-w-full min-w-0 items-center gap-2 mr-2">
<div
class="min-w-0 truncate py-1 text-left text-[15px] font-normal text-gray-700 dark:text-gray-300"
class="min-w-0 truncate py-1 text-left text-[0.9375rem] font-normal text-gray-700 dark:text-gray-300"
>
{title || chat?.chat?.title || $i18n.t('New Chat')}
</div>
@@ -153,7 +153,7 @@
{:else}
<div class="pointer-events-none invisible flex max-w-full min-w-0 items-center gap-2">
<div
class="min-w-0 truncate py-1 text-left text-[15px] font-normal text-gray-700 dark:text-gray-300"
class="min-w-0 truncate py-1 text-left text-[0.9375rem] font-normal text-gray-700 dark:text-gray-300"
>
{$i18n.t('New Chat')}
</div>
@@ -162,7 +162,7 @@
</div>
<div class="mr-1 flex flex-none items-center gap-2 self-center">
<!-- <div class="md:hidden flex self-center w-[1px] h-5 mx-2 bg-gray-300 dark:bg-stone-700" /> -->
<!-- <div class="md:hidden flex self-center w-[0.0625rem] h-5 mx-2 bg-gray-300 dark:bg-stone-700" /> -->
{#if $user?.role === 'user' ? ($user?.permissions?.chat?.temporary ?? true) && !($user?.permissions?.chat?.temporary_enforced ?? false) : true}
{#if !chat?.id}
@@ -232,7 +232,7 @@
</Tooltip>
<div slot="content">
<DropdownMenu className="w-[170px] shadow-sm">
<DropdownMenu className="w-[10.625rem] shadow-sm">
<button
class="flex h-[1.6875rem] w-full cursor-pointer select-none items-center gap-2 rounded-lg bg-transparent px-2 text-xs hover:text-gray-900 disabled:cursor-default disabled:opacity-30 dark:hover:text-gray-100"
disabled={loading || chatCount === 0}
@@ -201,7 +201,7 @@
</Tooltip>
<div slot="content">
<DropdownMenu className="w-[170px] shadow-sm">
<DropdownMenu className="w-[10.625rem] shadow-sm">
<button
class="flex h-[1.6875rem] w-full cursor-pointer select-none items-center gap-2 rounded-lg bg-transparent px-2 text-xs hover:text-gray-900 disabled:cursor-default disabled:opacity-30 dark:hover:text-gray-100"
type="button"
@@ -365,7 +365,7 @@
{#if entry}
<Tooltip content={tooltipFor(entry)}>
<div
class="h-full w-full rounded-[2px] {modelPalette(topItem(entry))[
class="h-full w-full rounded-[0.125rem] {modelPalette(topItem(entry))[
intensity(entry)
]}"
aria-label={tooltipFor(entry)}
@@ -395,7 +395,7 @@
>
{#each usage.top_models.slice(0, 6) as model}
<div class="flex min-w-0 items-center gap-1.5">
<span class="size-2 shrink-0 rounded-[2px] {modelPalette(model.model_id)[3]}"
<span class="size-2 shrink-0 rounded-[0.125rem] {modelPalette(model.model_id)[3]}"
></span>
<span class="max-w-28 truncate">{modelName(model.model_id)}</span>
</div>
@@ -69,11 +69,11 @@
{tool?.name}
</div>
{#if status}
<span class="text-[11px] {status.pill} shrink-0">{status.label}</span>
<span class="text-[0.6875rem] {status.pill} shrink-0">{status.label}</span>
{/if}
{#if toolSpecs.length > 0}
<span
class="inline-flex min-w-3 items-center justify-center text-center text-[11px] leading-none text-gray-500 dark:text-gray-400 shrink-0"
class="inline-flex min-w-3 items-center justify-center text-center text-[0.6875rem] leading-none text-gray-500 dark:text-gray-400 shrink-0"
>
{toolSpecs.length}
</span>