refac

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

@@ -26,7 +26,7 @@
 	export let selectedValues: string[] = [];
 	export let compareEnabled = false;
 
-	export let unloadModelHandler: (modelValue: string) => void = () => {};
+	export let unloadModelHandler: (model: any) => void = () => {};
 	export let pinModelHandler: (modelId: string) => void = () => {};
 	export let deleteModelHandler: (model: any) => void = () => {};
 	export let selectionOnly = false;
@@ -44,6 +44,8 @@
 		}
 	};
 
+	const formatSize = (size?: number) => (size ? `(${(size / 1024 ** 3).toFixed(1)}GB)` : '');
+
 	let showMenu = false;
 	$: isSelected = compareEnabled ? selectedValues.includes(item.value) : value === item.value;
 </script>
@@ -128,6 +130,23 @@
 							</Tooltip>
 						</div>
 					{/if}
+				{:else if item.model.provider === 'lmstudio' || item.model.provider === 'llama.cpp'}
+					{@const parameterSize = item.model.params_string ?? item.model.details?.parameter_size ?? ''}
+					{@const quantization =
+						item.model.quantization?.name ?? item.model.details?.quantization_level ?? ''}
+					{@const size = item.model.size_bytes ?? item.model.size}
+					{#if parameterSize || quantization || size}
+						<div class="flex items-center translate-y-[0.5px]">
+							<Tooltip
+								content={`${quantization ? `${quantization} ` : ''}${formatSize(size)}`}
+								className="self-end"
+							>
+								<span class="line-clamp-1 text-[0.6875rem] font-normal text-gray-500 dark:text-gray-400">
+									{parameterSize || quantization || formatSize(size)}
+								</span>
+							</Tooltip>
+						</div>
+					{/if}
 				{/if}
 
 				{#if item.model.loaded}
@@ -256,7 +275,7 @@
 					on:click={(e) => {
 						e.preventDefault();
 						e.stopPropagation();
-						unloadModelHandler(item.value);
+						unloadModelHandler(item.model);
 					}}
 				>
 					<ArrowUpTray className="size-3" />