bhetherman/open-webui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek committed 2026-07-14 02:11:38 -04:00
1 parent 251ef952bf
commit b9d5462ed0
7 files changed
+321 -137
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/lib/components/chat/Messages.svelte
+2 -8
View File
@@ -1,12 +1,6 @@
<script lang="ts"> <script lang="ts">
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import { import { config, settings, user as _user, mobile, temporaryChatEnabled } from '$lib/stores';
config,
settings,
user as _user,
mobile,
temporaryChatEnabled
} from '$lib/stores';
import { refreshChatList } from '$lib/stores/chat-list'; import { refreshChatList } from '$lib/stores/chat-list';
import { tick, getContext, onMount, onDestroy, createEventDispatcher } from 'svelte'; import { tick, getContext, onMount, onDestroy, createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@@ -23,7 +17,7 @@
const i18n = getContext('i18n'); const i18n = getContext('i18n');
export let className = 'h-full flex pt-8'; export let className = 'h-full flex pt-12';
export let chatId = ''; export let chatId = '';
export let user = $_user; export let user = $_user;
src/lib/components/chat/ModelSelector.svelte
+30 -88
View File
@@ -1,9 +1,8 @@
<script lang="ts"> <script lang="ts">
import { models, showSettings, settings, user, mobile, config } from '$lib/stores'; import { models, settings, user } from '$lib/stores';
import { onMount, tick, getContext } from 'svelte'; import { getContext } from 'svelte';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import Selector from './ModelSelector/Selector.svelte'; import Selector from './ModelSelector/Selector.svelte';
import Tooltip from '../common/Tooltip.svelte';
import { updateUserSettings } from '$lib/apis/users'; import { updateUserSettings } from '$lib/apis/users';
import equal from 'fast-deep-equal'; import equal from 'fast-deep-equal';
@@ -15,6 +14,8 @@
export let showSetDefault = true; export let showSetDefault = true;
export let triggerClassName = 'text-lg'; export let triggerClassName = 'text-lg';
let compareModels = selectedModels.length > 1;
const saveDefaultModel = async () => { const saveDefaultModel = async () => {
const hasEmptyModel = selectedModels.filter((it) => it === ''); const hasEmptyModel = selectedModels.filter((it) => it === '');
if (hasEmptyModel.length) { if (hasEmptyModel.length) {
@@ -49,94 +50,35 @@
selectedModels = _selectedModels; selectedModels = _selectedModels;
} }
} }
$: if (selectedModels.length > 1 && !compareModels) {
compareModels = true;
}
</script> </script>
<div class="flex flex-col w-full items-start"> <div class="flex flex-col w-full items-start">
{#each selectedModels as selectedModel, selectedModelIdx} <div class="flex w-full max-w-fit">
<div class="flex w-full max-w-fit"> <div class="overflow-hidden w-full">
<div class="overflow-hidden w-full"> <div class="max-w-full {($settings?.highContrastMode ?? false) ? 'm-1' : 'mr-1'}">
<div class="max-w-full {($settings?.highContrastMode ?? false) ? 'm-1' : 'mr-1'}"> <Selector
<Selector id="model"
id={`${selectedModelIdx}`} placeholder={$i18n.t('Select a model')}
placeholder={$i18n.t('Select a model')} items={$models.map((model) => ({
items={$models.map((model) => ({ value: model.id,
value: model.id, label: model.name,
label: model.name, model: model
model: model }))}
}))} {pinModelHandler}
{pinModelHandler} {triggerClassName}
{triggerClassName} {showSetDefault}
bind:value={selectedModel} onSetDefault={saveDefaultModel}
/> multipleEnabled={$user?.role === 'admin' ||
</div> ($user?.permissions?.chat?.multiple_models ?? true)}
{disabled}
bind:compareEnabled={compareModels}
bind:values={selectedModels}
/>
</div> </div>
{#if $user?.role === 'admin' || ($user?.permissions?.chat?.multiple_models ?? true)}
{#if selectedModelIdx === 0}
<div
class=" self-center mx-1 disabled:text-gray-600 disabled:hover:text-gray-600 -translate-y-[0.5px]"
>
<Tooltip content={$i18n.t('Add Model')}>
<button
class=" "
{disabled}
on:click={() => {
selectedModels = [
...selectedModels,
selectedModels[selectedModels.length - 1] || ''
];
}}
aria-label="Add Model"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="size-3.5"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
</svg>
</button>
</Tooltip>
</div>
{:else}
<div
class=" self-center mx-1 disabled:text-gray-600 disabled:hover:text-gray-600 -translate-y-[0.5px]"
>
<Tooltip content={$i18n.t('Remove Model')}>
<button
{disabled}
on:click={() => {
selectedModels.splice(selectedModelIdx, 1);
selectedModels = selectedModels;
}}
aria-label="Remove Model"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="size-3"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
</svg>
</button>
</Tooltip>
</div>
{/if}
{/if}
</div> </div>
{/each}
</div>
{#if showSetDefault}
<div
class="relative text-left mt-[1px] ml-1 text-[0.7rem] text-gray-600 dark:text-gray-400 font-primary"
>
<button on:click={saveDefaultModel}> {$i18n.t('Set as default')}</button>
</div> </div>
{/if} </div>
src/lib/components/chat/ModelSelector/ModelItem.svelte
+7 -4
View File
@@ -23,6 +23,8 @@
export let item: any = {}; export let item: any = {};
export let index: number = -1; export let index: number = -1;
export let value: string | null = ''; export let value: string | null = '';
export let selectedValues: string[] = [];
export let compareEnabled = false;
export let unloadModelHandler: (modelValue: string) => void = () => {}; export let unloadModelHandler: (modelValue: string) => void = () => {};
export let pinModelHandler: (modelId: string) => void = () => {}; export let pinModelHandler: (modelId: string) => void = () => {};
@@ -43,16 +45,17 @@
}; };
let showMenu = false; let showMenu = false;
$: isSelected = compareEnabled ? selectedValues.includes(item.value) : value === item.value;
</script> </script>
<button <button
role="option" role="option"
aria-selected={value === item.value} aria-selected={isSelected}
aria-label={$i18n.t('Select {{modelName}} model', { modelName: item.label })} aria-label={$i18n.t('Select {{modelName}} model', { modelName: item.label })}
class="flex group/item w-full text-left font-medium line-clamp-1 select-none items-center rounded-button py-[7px] pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl cursor-pointer data-highlighted:bg-muted {index === class="flex group/item w-full text-left font-medium line-clamp-1 select-none items-center rounded-button py-[7px] pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl cursor-pointer data-highlighted:bg-muted {index ===
selectedModelIdx selectedModelIdx && !compareEnabled
? 'bg-gray-100 dark:bg-gray-800 group-hover:bg-transparent' ? 'bg-gray-100 dark:bg-gray-800 group-hover:bg-transparent'
: ''}" : ''} {isSelected ? 'bg-gray-100 dark:bg-gray-800 group-hover:bg-transparent' : ''}"
data-arrow-selected={index === selectedModelIdx} data-arrow-selected={index === selectedModelIdx}
data-value={item.value} data-value={item.value}
on:click={() => { on:click={() => {
@@ -281,7 +284,7 @@
</ModelItemMenu> </ModelItemMenu>
{/if} {/if}
{#if value === item.value} {#if isSelected}
<div> <div>
<Check className="size-3" /> <Check className="size-3" />
</div> </div>
src/lib/components/chat/ModelSelector/Selector.svelte
+91 -16
View File
@@ -43,6 +43,10 @@
export let id = ''; export let id = '';
export let value: string | null = ''; export let value: string | null = '';
export let values: string[] | null = null;
export let compareEnabled = false;
export let multipleEnabled = false;
export let disabled = false;
export let placeholder = $i18n.t('Select a model'); export let placeholder = $i18n.t('Select a model');
export let searchEnabled = true; export let searchEnabled = true;
export let searchPlaceholder = $i18n.t('Search a model'); export let searchPlaceholder = $i18n.t('Search a model');
@@ -59,6 +63,8 @@
export let className = 'w-[32rem]'; export let className = 'w-[32rem]';
export let triggerClassName = 'text-lg'; export let triggerClassName = 'text-lg';
export let showSetDefault = false;
export let onSetDefault: () => Promise<void> | void = () => {};
export let pinModelHandler: (modelId: string) => void = () => {}; export let pinModelHandler: (modelId: string) => void = () => {};
@@ -126,7 +132,15 @@
let tags = []; let tags = [];
let selectedModel = ''; let selectedModel = '';
$: selectedModel = items.find((item) => item.value === value) ?? ''; $: selectedValues = values ?? (value ? [value] : []);
$: primaryValue = selectedValues[0] ?? value ?? '';
$: selectedModel = items.find((item) => item.value === primaryValue) ?? '';
$: selectedCount = selectedValues.filter(Boolean).length;
$: triggerLabel = selectedModel
? compareEnabled && selectedCount > 1
? `${selectedModel.label} +${selectedCount - 1}`
: selectedModel.label
: placeholder;
let searchValue = ''; let searchValue = '';
@@ -232,7 +246,7 @@
const resetView = async () => { const resetView = async () => {
await tick(); await tick();
const selectedInFiltered = filteredItems.findIndex((item) => item.value === value); const selectedInFiltered = filteredItems.findIndex((item) => item.value === primaryValue);
if (selectedInFiltered >= 0) { if (selectedInFiltered >= 0) {
// The selected model is visible in the current filter // The selected model is visible in the current filter
@@ -257,6 +271,45 @@
item?.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' }); item?.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' });
}; };
const setCompareEnabled = (enabled: boolean) => {
compareEnabled = enabled;
if (!enabled && values) {
values = [primaryValue || selectedValues[0] || ''];
value = values[0];
}
};
const selectItem = (item, index: number) => {
selectedModelIdx = index;
if (values) {
if (compareEnabled) {
const nextValues = selectedValues.includes(item.value)
? selectedValues.length > 1
? selectedValues.filter((selectedValue) => selectedValue !== item.value)
: selectedValues
: [...selectedValues.filter(Boolean), item.value];
values = nextValues.length ? nextValues : [item.value];
value = values[0];
return;
}
values = [item.value];
value = item.value;
show = false;
return;
}
value = item.value;
show = false;
};
const setDefaultHandler = async () => {
await onSetDefault();
};
const pullModelHandler = async () => { const pullModelHandler = async () => {
const sanitizedModelTag = searchValue.trim().replace(/^ollama\s+(run|pull)\s+/, ''); const sanitizedModelTag = searchValue.trim().replace(/^ollama\s+(run|pull)\s+/, '');
@@ -511,12 +564,13 @@
? '' ? ''
: 'outline-hidden focus:outline-hidden'}" : 'outline-hidden focus:outline-hidden'}"
aria-label={selectedModel aria-label={selectedModel
? $i18n.t('Selected model: {{modelName}}', { modelName: selectedModel.label }) ? $i18n.t('Selected model: {{modelName}}', { modelName: triggerLabel })
: placeholder} : placeholder}
aria-haspopup="listbox" aria-haspopup="listbox"
aria-expanded={show} aria-expanded={show}
id="model-selector-{id}-button" id="model-selector-{id}-button"
type="button" type="button"
{disabled}
on:click={toggleOpen} on:click={toggleOpen}
> >
<div <div
@@ -533,11 +587,7 @@
); );
}} }}
> >
{#if selectedModel} {triggerLabel}
{selectedModel.label}
{:else}
{placeholder}
{/if}
<ChevronDown className=" self-center ml-2 size-3" strokeWidth="2.5" /> <ChevronDown className=" self-center ml-2 size-3" strokeWidth="2.5" />
</div> </div>
</button> </button>
@@ -570,8 +620,7 @@
aria-label={$i18n.t('Search In Models')} aria-label={$i18n.t('Search In Models')}
on:keydown={(e) => { on:keydown={(e) => {
if (e.code === 'Enter' && filteredItems.length > 0) { if (e.code === 'Enter' && filteredItems.length > 0) {
value = filteredItems[selectedModelIdx].value; selectItem(filteredItems[selectedModelIdx], selectedModelIdx);
show = false;
return; // dont need to scroll on selection return; // dont need to scroll on selection
} else if (e.code === 'ArrowDown') { } else if (e.code === 'ArrowDown') {
e.stopPropagation(); e.stopPropagation();
@@ -592,6 +641,21 @@
}); });
}} }}
/> />
{#if multipleEnabled}
<button
type="button"
class="shrink-0 rounded-full px-2 py-1 text-[11px] font-medium leading-none transition-colors duration-100 {compareEnabled
? 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200'
: 'text-gray-400 hover:bg-gray-50 hover:text-gray-600 dark:text-gray-500 dark:hover:bg-gray-800/40 dark:hover:text-gray-300'}"
aria-pressed={compareEnabled}
on:click={() => {
setCompareEnabled(!compareEnabled);
}}
>
{$i18n.t('Compare')}
</button>
{/if}
</div> </div>
{/if} {/if}
@@ -740,16 +804,15 @@
{selectedModelIdx} {selectedModelIdx}
{item} {item}
{index} {index}
{value} value={primaryValue}
{pinModelHandler} {pinModelHandler}
{unloadModelHandler} {unloadModelHandler}
{deleteModelHandler} {deleteModelHandler}
{selectionOnly} {selectionOnly}
{compareEnabled}
{selectedValues}
onClick={() => { onClick={() => {
value = item.value; selectItem(item, index);
selectedModelIdx = index;
show = false;
}} }}
/> />
{/each} {/each}
@@ -842,7 +905,19 @@
{/each} {/each}
</div> </div>
<div class="pb-2"></div> {#if showSetDefault}
<div class="px-3 pb-2 pt-1 text-left">
<button
type="button"
class="text-[0.7rem] font-normal text-gray-500 underline-offset-2 transition-colors duration-100 hover:text-gray-700 hover:underline dark:text-gray-500 dark:hover:text-gray-300"
on:click|stopPropagation={setDefaultHandler}
>
{$i18n.t('Set as default')}
</button>
</div>
{:else}
<div class="pb-2"></div>
{/if}
<div class="hidden w-[42rem]" /> <div class="hidden w-[42rem]" />
<div class="hidden w-[32rem]" /> <div class="hidden w-[32rem]" />
src/lib/components/chat/Placeholder/FolderTitle.svelte
+1 -1
View File
@@ -229,7 +229,7 @@
> >
<button <button
aria-label={$i18n.t('Change folder icon')} aria-label={$i18n.t('Change folder icon')}
class=" rounded-full bg-gray-50 dark:bg-gray-800 size-11 flex justify-center items-center" class="rounded-full bg-gray-50 dark:bg-gray-800 size-11 flex justify-center items-center outline-hidden focus:outline-hidden"
> >
{#if folder?.meta?.icon} {#if folder?.meta?.icon}
<Emoji className="size-6" shortCode={folder.meta.icon} /> <Emoji className="size-6" shortCode={folder.meta.icon} />
src/lib/components/layout/Sidebar.svelte
+16 -20
View File
@@ -63,6 +63,7 @@
import Spinner from '../common/Spinner.svelte'; import Spinner from '../common/Spinner.svelte';
import Loader from '../common/Loader.svelte'; import Loader from '../common/Loader.svelte';
import Folder from '../common/Folder.svelte'; import Folder from '../common/Folder.svelte';
import SidebarSection from './Sidebar/Section.svelte';
import Tooltip from '../common/Tooltip.svelte'; import Tooltip from '../common/Tooltip.svelte';
import Folders from './Sidebar/Folders.svelte'; import Folders from './Sidebar/Folders.svelte';
import SharedFolderItem from './Sidebar/SharedFolderItem.svelte'; import SharedFolderItem from './Sidebar/SharedFolderItem.svelte';
@@ -1213,25 +1214,23 @@
</div> </div>
{#if ($models ?? []).length > 0 && (($settings?.pinnedModels ?? []).length > 0 || $config?.default_pinned_models)} {#if ($models ?? []).length > 0 && (($settings?.pinnedModels ?? []).length > 0 || $config?.default_pinned_models)}
<Folder <SidebarSection
id="sidebar-models" id="sidebar-models"
bind:open={showPinnedModels} bind:open={showPinnedModels}
className="px-2 mt-0.5" className="mt-0.5"
name={$i18n.t('Models')} name={$i18n.t('Models')}
chevron={false}
dragAndDrop={false} dragAndDrop={false}
> >
<PinnedModelList bind:selectedChatId {shiftKey} /> <PinnedModelList bind:selectedChatId {shiftKey} />
</Folder> </SidebarSection>
{/if} {/if}
{#if ($config?.features?.enable_notes ?? false) && ($user?.role === 'admin' || ($user?.permissions?.features?.notes ?? true)) && $pinnedNotes.length > 0} {#if ($config?.features?.enable_notes ?? false) && ($user?.role === 'admin' || ($user?.permissions?.features?.notes ?? true)) && $pinnedNotes.length > 0}
<Folder <SidebarSection
id="sidebar-pinned-notes" id="sidebar-pinned-notes"
bind:open={showPinnedNotes} bind:open={showPinnedNotes}
className="px-2 mt-0.5" className="mt-0.5"
name={$i18n.t('Notes')} name={$i18n.t('Notes')}
chevron={false}
dragAndDrop={false} dragAndDrop={false}
onAdd={async () => { onAdd={async () => {
const note = await createNoteHandler('New Note'); const note = await createNoteHandler('New Note');
@@ -1242,16 +1241,15 @@
onAddLabel={$i18n.t('New Note')} onAddLabel={$i18n.t('New Note')}
> >
<PinnedNoteList bind:selectedChatId /> <PinnedNoteList bind:selectedChatId />
</Folder> </SidebarSection>
{/if} {/if}
{#if $config?.features?.enable_channels && ($user?.role === 'admin' || ($user?.permissions?.features?.channels ?? true))} {#if $config?.features?.enable_channels && ($user?.role === 'admin' || ($user?.permissions?.features?.channels ?? true))}
<Folder <SidebarSection
id="sidebar-channels" id="sidebar-channels"
bind:open={showChannels} bind:open={showChannels}
className="px-2 mt-0.5" className="mt-0.5"
name={$i18n.t('Channels')} name={$i18n.t('Channels')}
chevron={false}
dragAndDrop={false} dragAndDrop={false}
onAdd={$user?.role === 'admin' || ($user?.permissions?.features?.channels ?? true) onAdd={$user?.role === 'admin' || ($user?.permissions?.features?.channels ?? true)
? async () => { ? async () => {
@@ -1277,16 +1275,15 @@
/> />
{/if} {/if}
{/each} {/each}
</Folder> </SidebarSection>
{/if} {/if}
{#if $config?.features?.enable_folders && ($user?.role === 'admin' || ($user?.permissions?.features?.folders ?? true))} {#if $config?.features?.enable_folders && ($user?.role === 'admin' || ($user?.permissions?.features?.folders ?? true))}
<Folder <SidebarSection
id="sidebar-folders" id="sidebar-folders"
bind:open={showFolders} bind:open={showFolders}
className="px-2 mt-0.5" className="mt-0.5"
name={$i18n.t('Folders')} name={$i18n.t('Folders')}
chevron={false}
onAdd={() => { onAdd={() => {
showCreateFolderModal = true; showCreateFolderModal = true;
}} }}
@@ -1331,14 +1328,13 @@
initChatList(); initChatList();
}} }}
/> />
</Folder> </SidebarSection>
{/if} {/if}
<Folder <SidebarSection
id="sidebar-chats" id="sidebar-chats"
className="px-2 mt-0.5" className="mt-0.5"
name={$i18n.t('Chats')} name={$i18n.t('Chats')}
chevron={false}
on:change={async (e) => { on:change={async (e) => {
selectedFolder.set(null); selectedFolder.set(null);
}} }}
@@ -1582,7 +1578,7 @@
{/if} {/if}
</div> </div>
</div> </div>
</Folder> </SidebarSection>
</div> </div>
<div class="px-1.5 pt-1 pb-1.5 sticky bottom-0 z-10 -mt-2 sidebar"> <div class="px-1.5 pt-1 pb-1.5 sticky bottom-0 z-10 -mt-2 sidebar">
src/lib/components/layout/Sidebar/Section.svelte
+174
View File
@@ -0,0 +1,174 @@
<script lang="ts">
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
import Collapsible from '$lib/components/common/Collapsible.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
import Plus from '$lib/components/icons/Plus.svelte';
const dispatch = createEventDispatcher();
type AddHandler = () => void | Promise<void>;
export let open = true;
export let id = '';
export let name = '';
export let collapsible = true;
export let className = '';
export let buttonClassName = '';
export let contentClassName = 'px-1.5';
export let onAddLabel = '';
export let onAdd: null | AddHandler = null;
export let dragAndDrop = true;
let sectionElement: HTMLDivElement;
let loaded = false;
let draggedOver = false;
const onDragOver = (e: DragEvent) => {
e.preventDefault();
e.stopPropagation();
draggedOver = true;
};
const onDrop = (e: DragEvent) => {
e.preventDefault();
e.stopPropagation();
if (!sectionElement.contains(e.target as Node)) {
return;
}
if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) {
for (const item of Array.from(e.dataTransfer.items)) {
if (item.kind === 'file') {
const file = item.getAsFile();
if (file && file.type === 'application/json') {
const reader = new FileReader();
reader.onload = async function (event) {
try {
const fileContent = JSON.parse(event.target?.result as string);
open = true;
dispatch('import', fileContent);
} catch (error) {
console.error('Error parsing JSON file:', error);
}
};
reader.readAsText(file);
}
} else {
open = true;
try {
const dataTransfer = e.dataTransfer.getData('text/plain');
if (dataTransfer) {
dispatch('drop', JSON.parse(dataTransfer));
}
} catch {
// Ignore drops that are not sidebar JSON payloads.
} finally {
draggedOver = false;
}
break;
}
}
}
draggedOver = false;
};
const onDragLeave = (e: DragEvent) => {
e.preventDefault();
e.stopPropagation();
draggedOver = false;
};
onMount(() => {
const state = localStorage.getItem(`${id}-folder-state`);
if (state !== null) {
open = state === 'true';
}
loaded = true;
if (!dragAndDrop) {
return;
}
sectionElement.addEventListener('dragover', onDragOver);
sectionElement.addEventListener('drop', onDrop);
sectionElement.addEventListener('dragleave', onDragLeave);
});
onDestroy(() => {
if (!dragAndDrop) {
return;
}
sectionElement.removeEventListener('dragover', onDragOver);
sectionElement.removeEventListener('drop', onDrop);
sectionElement.removeEventListener('dragleave', onDragLeave);
});
</script>
<div bind:this={sectionElement} class="relative {className}">
{#if loaded}
{#if draggedOver}
<div
class="absolute inset-0 z-50 rounded-md bg-gray-100/50 pointer-events-none touch-none dark:bg-gray-700/20"
></div>
{/if}
{#if collapsible}
<Collapsible
bind:open
className="w-full"
buttonClassName="w-full"
onChange={(state: boolean) => {
dispatch('change', state);
localStorage.setItem(`${id}-folder-state`, `${state}`);
}}
>
<div class="flex items-center justify-between h-8 w-full pl-3.5 pr-1.5 shrink-0">
<button
type="button"
class="group flex flex-1 h-full items-center gap-1 text-left text-xs text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 transition-colors duration-100 {buttonClassName}"
aria-expanded={open}
aria-controls="{id}-content"
>
<span>{name}</span>
<span
class="flex opacity-0 group-hover:opacity-100 transition-all duration-100"
style="transform: rotate({open ? '90deg' : '0deg'})"
>
<ChevronRight className="size-[11px]" />
</span>
</button>
{#if onAdd}
<button
type="button"
class="flex items-center justify-center w-7 h-7 rounded-lg text-gray-300 hover:text-gray-500 dark:text-gray-600 dark:hover:text-gray-400 transition-colors duration-100"
aria-label={onAddLabel}
on:pointerup={(e) => {
e.stopPropagation();
}}
on:click={(e) => {
e.stopPropagation();
onAdd();
}}
>
<Tooltip content={onAddLabel}>
<Plus className="size-3.5" />
</Tooltip>
</button>
{/if}
</div>
<div id="{id}-content" slot="content" class="w-full {contentClassName}">
<slot></slot>
</div>
</Collapsible>
{:else}
<slot></slot>
{/if}
{/if}
</div>