refac

src/lib/components/chat/Messages.svelte

@@ -1,12 +1,6 @@
 <script lang="ts">
 	import { v4 as uuidv4 } from 'uuid';
-	import {
-		config,
-		settings,
-		user as _user,
-		mobile,
-		temporaryChatEnabled
-	} from '$lib/stores';
+	import { config, settings, user as _user, mobile, temporaryChatEnabled } from '$lib/stores';
 	import { refreshChatList } from '$lib/stores/chat-list';
 	import { tick, getContext, onMount, onDestroy, createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher();
@@ -23,7 +17,7 @@
 
 	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 user = $_user;

src/lib/components/chat/ModelSelector.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { models, showSettings, settings, user, mobile, config } from '$lib/stores';
-	import { onMount, tick, getContext } from 'svelte';
+	import { models, settings, user } from '$lib/stores';
+	import { getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 	import Selector from './ModelSelector/Selector.svelte';
-	import Tooltip from '../common/Tooltip.svelte';
 
 	import { updateUserSettings } from '$lib/apis/users';
 	import equal from 'fast-deep-equal';
@@ -15,6 +14,8 @@
 	export let showSetDefault = true;
 	export let triggerClassName = 'text-lg';
 
+	let compareModels = selectedModels.length > 1;
+
 	const saveDefaultModel = async () => {
 		const hasEmptyModel = selectedModels.filter((it) => it === '');
 		if (hasEmptyModel.length) {
@@ -49,94 +50,35 @@
 			selectedModels = _selectedModels;
 		}
 	}
+
+	$: if (selectedModels.length > 1 && !compareModels) {
+		compareModels = true;
+	}
 </script>
 
 <div class="flex flex-col w-full items-start">
-	{#each selectedModels as selectedModel, selectedModelIdx}
-		<div class="flex w-full max-w-fit">
-			<div class="overflow-hidden w-full">
-				<div class="max-w-full {($settings?.highContrastMode ?? false) ? 'm-1' : 'mr-1'}">
-					<Selector
-						id={`${selectedModelIdx}`}
-						placeholder={$i18n.t('Select a model')}
-						items={$models.map((model) => ({
-							value: model.id,
-							label: model.name,
-							model: model
-						}))}
-						{pinModelHandler}
-						{triggerClassName}
-						bind:value={selectedModel}
-					/>
-				</div>
+	<div class="flex w-full max-w-fit">
+		<div class="overflow-hidden w-full">
+			<div class="max-w-full {($settings?.highContrastMode ?? false) ? 'm-1' : 'mr-1'}">
+				<Selector
+					id="model"
+					placeholder={$i18n.t('Select a model')}
+					items={$models.map((model) => ({
+						value: model.id,
+						label: model.name,
+						model: model
+					}))}
+					{pinModelHandler}
+					{triggerClassName}
+					{showSetDefault}
+					onSetDefault={saveDefaultModel}
+					multipleEnabled={$user?.role === 'admin' ||
+						($user?.permissions?.chat?.multiple_models ?? true)}
+					{disabled}
+					bind:compareEnabled={compareModels}
+					bind:values={selectedModels}
+				/>
 			</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>
-	{/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>
-{/if}
+</div>

src/lib/components/chat/ModelSelector/ModelItem.svelte

@@ -23,6 +23,8 @@
 	export let item: any = {};
 	export let index: number = -1;
 	export let value: string | null = '';
+	export let selectedValues: string[] = [];
+	export let compareEnabled = false;
 
 	export let unloadModelHandler: (modelValue: string) => void = () => {};
 	export let pinModelHandler: (modelId: string) => void = () => {};
@@ -43,16 +45,17 @@
 	};
 
 	let showMenu = false;
+	$: isSelected = compareEnabled ? selectedValues.includes(item.value) : value === item.value;
 </script>
 
 <button
 	role="option"
-	aria-selected={value === item.value}
+	aria-selected={isSelected}
 	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 ===
-	selectedModelIdx
+		selectedModelIdx && !compareEnabled
 		? '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-value={item.value}
 	on:click={() => {
@@ -281,7 +284,7 @@
 			</ModelItemMenu>
 		{/if}
 
-		{#if value === item.value}
+		{#if isSelected}
 			<div>
 				<Check className="size-3" />
 			</div>

src/lib/components/chat/ModelSelector/Selector.svelte

@@ -43,6 +43,10 @@
 
 	export let id = '';
 	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 searchEnabled = true;
 	export let searchPlaceholder = $i18n.t('Search a model');
@@ -59,6 +63,8 @@
 
 	export let className = 'w-[32rem]';
 	export let triggerClassName = 'text-lg';
+	export let showSetDefault = false;
+	export let onSetDefault: () => Promise<void> | void = () => {};
 
 	export let pinModelHandler: (modelId: string) => void = () => {};
 
@@ -126,7 +132,15 @@
 	let tags = [];
 
 	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 = '';
 
@@ -232,7 +246,7 @@
 	const resetView = async () => {
 		await tick();
 
-		const selectedInFiltered = filteredItems.findIndex((item) => item.value === value);
+		const selectedInFiltered = filteredItems.findIndex((item) => item.value === primaryValue);
 
 		if (selectedInFiltered >= 0) {
 			// The selected model is visible in the current filter
@@ -257,6 +271,45 @@
 		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 sanitizedModelTag = searchValue.trim().replace(/^ollama\s+(run|pull)\s+/, '');
 
@@ -511,12 +564,13 @@
 			? ''
 			: 'outline-hidden focus:outline-hidden'}"
 		aria-label={selectedModel
-			? $i18n.t('Selected model: {{modelName}}', { modelName: selectedModel.label })
+			? $i18n.t('Selected model: {{modelName}}', { modelName: triggerLabel })
 			: placeholder}
 		aria-haspopup="listbox"
 		aria-expanded={show}
 		id="model-selector-{id}-button"
 		type="button"
+		{disabled}
 		on:click={toggleOpen}
 	>
 		<div
@@ -533,11 +587,7 @@
 				);
 			}}
 		>
-			{#if selectedModel}
-				{selectedModel.label}
-			{:else}
-				{placeholder}
-			{/if}
+			{triggerLabel}
 			<ChevronDown className=" self-center ml-2 size-3" strokeWidth="2.5" />
 		</div>
 	</button>
@@ -570,8 +620,7 @@
 								aria-label={$i18n.t('Search In Models')}
 								on:keydown={(e) => {
 									if (e.code === 'Enter' && filteredItems.length > 0) {
-										value = filteredItems[selectedModelIdx].value;
-										show = false;
+										selectItem(filteredItems[selectedModelIdx], selectedModelIdx);
 										return; // dont need to scroll on selection
 									} else if (e.code === 'ArrowDown') {
 										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>
 					{/if}
 
@@ -740,16 +804,15 @@
 										{selectedModelIdx}
 										{item}
 										{index}
-										{value}
+										value={primaryValue}
 										{pinModelHandler}
 										{unloadModelHandler}
 										{deleteModelHandler}
 										{selectionOnly}
+										{compareEnabled}
+										{selectedValues}
 										onClick={() => {
-											value = item.value;
-											selectedModelIdx = index;
-
-											show = false;
+											selectItem(item, index);
 										}}
 									/>
 								{/each}
@@ -842,7 +905,19 @@
 						{/each}
 					</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-[32rem]" />

src/lib/components/chat/Placeholder/FolderTitle.svelte

@@ -229,7 +229,7 @@
 				>
 					<button
 						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}
 							<Emoji className="size-6" shortCode={folder.meta.icon} />

src/lib/components/layout/Sidebar.svelte

@@ -63,6 +63,7 @@
 	import Spinner from '../common/Spinner.svelte';
 	import Loader from '../common/Loader.svelte';
 	import Folder from '../common/Folder.svelte';
+	import SidebarSection from './Sidebar/Section.svelte';
 	import Tooltip from '../common/Tooltip.svelte';
 	import Folders from './Sidebar/Folders.svelte';
 	import SharedFolderItem from './Sidebar/SharedFolderItem.svelte';
@@ -1213,25 +1214,23 @@
 				</div>
 
 				{#if ($models ?? []).length > 0 && (($settings?.pinnedModels ?? []).length > 0 || $config?.default_pinned_models)}
-					<Folder
+					<SidebarSection
 						id="sidebar-models"
 						bind:open={showPinnedModels}
-						className="px-2 mt-0.5"
+						className="mt-0.5"
 						name={$i18n.t('Models')}
-						chevron={false}
 						dragAndDrop={false}
 					>
 						<PinnedModelList bind:selectedChatId {shiftKey} />
-					</Folder>
+					</SidebarSection>
 				{/if}
 
 				{#if ($config?.features?.enable_notes ?? false) && ($user?.role === 'admin' || ($user?.permissions?.features?.notes ?? true)) && $pinnedNotes.length > 0}
-					<Folder
+					<SidebarSection
 						id="sidebar-pinned-notes"
 						bind:open={showPinnedNotes}
-						className="px-2 mt-0.5"
+						className="mt-0.5"
 						name={$i18n.t('Notes')}
-						chevron={false}
 						dragAndDrop={false}
 						onAdd={async () => {
 							const note = await createNoteHandler('New Note');
@@ -1242,16 +1241,15 @@
 						onAddLabel={$i18n.t('New Note')}
 					>
 						<PinnedNoteList bind:selectedChatId />
-					</Folder>
+					</SidebarSection>
 				{/if}
 
 				{#if $config?.features?.enable_channels && ($user?.role === 'admin' || ($user?.permissions?.features?.channels ?? true))}
-					<Folder
+					<SidebarSection
 						id="sidebar-channels"
 						bind:open={showChannels}
-						className="px-2 mt-0.5"
+						className="mt-0.5"
 						name={$i18n.t('Channels')}
-						chevron={false}
 						dragAndDrop={false}
 						onAdd={$user?.role === 'admin' || ($user?.permissions?.features?.channels ?? true)
 							? async () => {
@@ -1277,16 +1275,15 @@
 								/>
 							{/if}
 						{/each}
-					</Folder>
+					</SidebarSection>
 				{/if}
 
 				{#if $config?.features?.enable_folders && ($user?.role === 'admin' || ($user?.permissions?.features?.folders ?? true))}
-					<Folder
+					<SidebarSection
 						id="sidebar-folders"
 						bind:open={showFolders}
-						className="px-2 mt-0.5"
+						className="mt-0.5"
 						name={$i18n.t('Folders')}
-						chevron={false}
 						onAdd={() => {
 							showCreateFolderModal = true;
 						}}
@@ -1331,14 +1328,13 @@
 								initChatList();
 							}}
 						/>
-					</Folder>
+					</SidebarSection>
 				{/if}
 
-				<Folder
+				<SidebarSection
 					id="sidebar-chats"
-					className="px-2 mt-0.5"
+					className="mt-0.5"
 					name={$i18n.t('Chats')}
-					chevron={false}
 					on:change={async (e) => {
 						selectedFolder.set(null);
 					}}
@@ -1582,7 +1578,7 @@
 							{/if}
 						</div>
 					</div>
-				</Folder>
+				</SidebarSection>
 			</div>
 
 			<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

@@ -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>