frontend/src/lib/components/workspace/Models.svelte

<script lang="ts">
	import { marked } from "marked";

	import { toast } from "svelte-sonner";
	import Sortable from "sortablejs";

	import fileSaver from "file-saver";
	const { saveAs } = fileSaver;

	import { onMount, getContext, tick } from "svelte";
	import { goto } from "$app/navigation";
	const i18n = getContext("i18n");

	import {
		REXPRO_NAME,
		config,
		mobile,
		models as _models,
		settings,
		user,
	} from "$lib/stores";
	import { REXPRO_API_BASE_URL, REXPRO_BASE_URL } from "$lib/constants";
	import {
		createNewModel,
		deleteModelById,
		getModelItems as getWorkspaceModels,
		getModelTags,
		toggleModelById,
		updateModelById,
	} from "$lib/apis/models";

	import { getModels } from "$lib/apis";
	import { getGroups } from "$lib/apis/groups";
	import { updateUserSettings } from "$lib/apis/users";

	import { capitalizeFirstLetter, copyToClipboard } from "$lib/utils";

	import EllipsisHorizontal from "../icons/EllipsisHorizontal.svelte";
	import CheckCircle from "../icons/CheckCircle.svelte";
	import Minus from "../icons/Minus.svelte";
	import ModelMenu from "./Models/ModelMenu.svelte";
	import ModelDeleteConfirmDialog from "../common/ConfirmDialog.svelte";
	import Tooltip from "../common/Tooltip.svelte";
	import GarbageBin from "../icons/GarbageBin.svelte";
	import Search from "../icons/Search.svelte";
	import Plus from "../icons/Plus.svelte";
	import ChevronRight from "../icons/ChevronRight.svelte";
	import Switch from "../common/Switch.svelte";
	import Spinner from "../common/Spinner.svelte";
	import XMark from "../icons/XMark.svelte";
	import EyeSlash from "../icons/EyeSlash.svelte";
	import Eye from "../icons/Eye.svelte";

	import Dropdown from "$lib/components/common/Dropdown.svelte";
	import ViewSelector from "./common/ViewSelector.svelte";
	import TagSelector from "./common/TagSelector.svelte";
	import Pagination from "../common/Pagination.svelte";
	import Badge from "$lib/components/common/Badge.svelte";

	let shiftKey = false;

	let importFiles;
	let modelsImportInputElement: HTMLInputElement;
	let tagsContainerElement: HTMLDivElement;

	let loaded = false;

	let showModelDeleteConfirm = false;

	let selectedModel = null;

	let groupIds = [];

	let tags = [];
	let selectedTag = "";

	let query = "";
	let viewOption = "";

	let page = 1;
	let models = null;
	let total = null;

	let searchDebounceTimer;

	$: if (
		loaded &&
		page !== undefined &&
		selectedTag !== undefined &&
		viewOption !== undefined
	) {
		getModelList();
	}

	const getModelList = async () => {
		if (!loaded) return;

		try {
			const res = await getWorkspaceModels(
				localStorage.token,
				query,
				viewOption,
				selectedTag,
				null,
				null,
				page,
			).catch((error) => {
				toast.error(`${error}`);
				return null;
			});

			if (res) {
				models = res.items;
				total = res.total;

				// get tags
				tags = await getModelTags(localStorage.token).catch((error) => {
					toast.error(`${error}`);
					return [];
				});
			}
		} catch (err) {
			console.error(err);
		}
	};

	const deleteModelHandler = async (model) => {
		const res = await deleteModelById(localStorage.token, model.id).catch(
			(e) => {
				toast.error(`${e}`);
				return null;
			},
		);

		if (res) {
			toast.success($i18n.t(`Deleted {{name}}`, { name: model.id }));

			page = 1;
			getModelList();
		}

		await _models.set(
			await getModels(
				localStorage.token,
				$config?.features?.enable_direct_connections &&
					($settings?.directConnections ?? null),
			),
		);
	};

	const cloneModelHandler = async (model) => {
		sessionStorage.model = JSON.stringify({
			...model,
			id: `${model.id}-clone`,
			name: `${model.name} (Clone)`,
		});
		goto("/workspace/models/create");
	};

	const shareModelHandler = async (model) => {
		toast.success($i18n.t("Redirecting you to rexpro-ai Community"));

		const url = "https://rexpro-ai.rexpro.com";

		const tab = await window.open(`${url}/models/create`, "_blank");

		const messageHandler = (event) => {
			if (event.origin !== url) return;
			if (event.data === "loaded") {
				tab.postMessage(JSON.stringify(model), "*");
				window.removeEventListener("message", messageHandler);
			}
		};

		window.addEventListener("message", messageHandler, false);
	};

	const hideModelHandler = async (model) => {
		model.meta = {
			...model.meta,
			hidden: !(model?.meta?.hidden ?? false),
		};

		console.log(model);

		const res = await updateModelById(localStorage.token, model.id, model);

		if (res) {
			toast.success(
				$i18n.t(`Model {{name}} is now {{status}}`, {
					name: model.id,
					status: model.meta.hidden ? "hidden" : "visible",
				}),
			);

			page = 1;
			getModelList();
		}

		await _models.set(
			await getModels(
				localStorage.token,
				$config?.features?.enable_direct_connections &&
					($settings?.directConnections ?? null),
			),
		);
	};

	const copyLinkHandler = async (model) => {
		const baseUrl = window.location.origin;
		const res = await copyToClipboard(
			`${baseUrl}/?model=${encodeURIComponent(model.id)}`,
		);

		if (res) {
			toast.success($i18n.t("Copied link to clipboard"));
		} else {
			toast.error($i18n.t("Failed to copy link"));
		}
	};

	const downloadModels = async (models) => {
		let blob = new Blob([JSON.stringify(models)], {
			type: "application/json",
		});
		saveAs(blob, `models-export-${Date.now()}.json`);
	};

	const exportModelHandler = async (model) => {
		let blob = new Blob([JSON.stringify([model])], {
			type: "application/json",
		});
		saveAs(blob, `${model.id}-${Date.now()}.json`);
	};

	const pinModelHandler = async (modelId) => {
		let pinnedModels = $settings?.pinnedModels ?? [];

		if (pinnedModels.includes(modelId)) {
			pinnedModels = pinnedModels.filter((id) => id !== modelId);
		} else {
			pinnedModels = [...new Set([...pinnedModels, modelId])];
		}

		settings.set({ ...$settings, pinnedModels: pinnedModels });
		await updateUserSettings(localStorage.token, { ui: $settings });
	};

	const enableAllHandler = async () => {
		const modelsToEnable = (models ?? []).filter(
			(m) => !(m.is_active ?? true),
		);
		// Optimistic UI update
		modelsToEnable.forEach((m) => (m.is_active = true));
		models = models;
		// Sync with server
		await Promise.all(
			modelsToEnable.map((model) =>
				toggleModelById(localStorage.token, model.id),
			),
		);
	};

	const disableAllHandler = async () => {
		const modelsToDisable = (models ?? []).filter(
			(m) => m.is_active ?? true,
		);
		// Optimistic UI update
		modelsToDisable.forEach((m) => (m.is_active = false));
		models = models;
		// Sync with server
		await Promise.all(
			modelsToDisable.map((model) =>
				toggleModelById(localStorage.token, model.id),
			),
		);
	};

	const showAllHandler = async () => {
		const modelsToShow = (models ?? []).filter(
			(m) => m?.meta?.hidden === true,
		);
		// Optimistic UI update
		modelsToShow.forEach((m) => {
			m.meta = { ...m.meta, hidden: false };
		});
		models = models;
		// Sync with server
		await Promise.all(
			modelsToShow.map((model) =>
				updateModelById(localStorage.token, model.id, model),
			),
		);
		toast.success($i18n.t("All models are now visible"));
	};

	const hideAllHandler = async () => {
		const modelsToHide = (models ?? []).filter(
			(m) => !(m?.meta?.hidden ?? false),
		);
		// Optimistic UI update
		modelsToHide.forEach((m) => {
			m.meta = { ...m.meta, hidden: true };
		});
		models = models;
		// Sync with server
		await Promise.all(
			modelsToHide.map((model) =>
				updateModelById(localStorage.token, model.id, model),
			),
		);
		toast.success($i18n.t("All models are now hidden"));
	};

	onMount(async () => {
		viewOption = localStorage.workspaceViewOption ?? "";
		page = 1;

		let groups = await getGroups(localStorage.token);
		groupIds = groups.map((group) => group.id);

		await tick();
		loaded = true;

		const onKeyDown = (event) => {
			if (event.key === "Shift") {
				shiftKey = true;
			}
		};

		const onKeyUp = (event) => {
			if (event.key === "Shift") {
				shiftKey = false;
			}
		};

		const onBlur = () => {
			shiftKey = false;
		};

		window.addEventListener("keydown", onKeyDown);
		window.addEventListener("keyup", onKeyUp);
		window.addEventListener("blur", onBlur);

		return () => {
			window.removeEventListener("keydown", onKeyDown);
			window.removeEventListener("keyup", onKeyUp);
			window.removeEventListener("blur", onBlur);
		};
	});
</script>

<svelte:head>
	<title>
		{$i18n.t("Models")} • {$REXPRO_NAME}
	</title>
</svelte:head>

{#if loaded}
	<ModelDeleteConfirmDialog
		bind:show={showModelDeleteConfirm}
		on:confirm={() => {
			deleteModelHandler(selectedModel);
		}}
	/>

	<div class="flex flex-col gap-1 px-1 mt-1.5 mb-3">
		<input
			id="models-import-input"
			bind:this={modelsImportInputElement}
			bind:files={importFiles}
			type="file"
			accept=".json"
			hidden
			on:change={() => {
				console.log(importFiles);

				let reader = new FileReader();
				reader.onload = async (event) => {
					let savedModels = [];
					try {
						savedModels = JSON.parse(event.target.result);
						console.log(savedModels);
					} catch (e) {
						toast.error($i18n.t("Invalid JSON file"));
						return;
					}

					for (const model of savedModels) {
						if (model?.info ?? false) {
							if ($_models.find((m) => m.id === model.id)) {
								await updateModelById(
									localStorage.token,
									model.id,
									model.info,
								).catch((error) => {
									toast.error(`${error}`);
									return null;
								});
							} else {
								await createNewModel(
									localStorage.token,
									model.info,
								).catch((error) => {
									toast.error(`${error}`);
									return null;
								});
							}
						} else {
							if (model?.id && model?.name) {
								await createNewModel(
									localStorage.token,
									model,
								).catch((error) => {
									toast.error(`${error}`);
									return null;
								});
							}
						}
					}

					await _models.set(
						await getModels(
							localStorage.token,
							$config?.features?.enable_direct_connections &&
								($settings?.directConnections ?? null),
						),
					);

					page = 1;
					getModelList();
				};

				reader.readAsText(importFiles[0]);
			}}
		/>
		<div class="flex justify-between items-center">
			<div
				class="flex items-center md:self-center text-xl font-medium px-0.5 gap-2 shrink-0"
			>
				<div>
					{$i18n.t("Models")}
				</div>

				<div
					class="text-lg font-medium text-gray-500 dark:text-gray-500"
				>
					{total}
				</div>
			</div>

			<div class="flex w-full justify-end gap-1.5">
				{#if $user?.role === "admin" || $user?.permissions?.workspace?.models_import}
					<button
						class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition"
						on:click={() => {
							modelsImportInputElement.click();
						}}
					>
						<div class=" self-center font-medium line-clamp-1">
							{$i18n.t("Import")}
						</div>
					</button>
				{/if}

				{#if total && ($user?.role === "admin" || $user?.permissions?.workspace?.models_export)}
					<button
						class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition"
						on:click={async () => {
							downloadModels(models);
						}}
					>
						<div class=" self-center font-medium line-clamp-1">
							{$i18n.t("Export")}
						</div>
					</button>
				{/if}
				<a
					class=" px-2 py-1.5 rounded-xl bg-black text-white dark:bg-white dark:text-black transition font-medium text-sm flex items-center"
					href="/workspace/models/create"
				>
					<Plus className="size-3" strokeWidth="2.5" />

					<div class=" hidden md:block md:ml-1 text-xs">
						{$i18n.t("New Model")}
					</div>
				</a>
			</div>
		</div>
	</div>

	<div
		class="py-2 bg-white dark:bg-gray-900 rounded-3xl border border-gray-100/30 dark:border-gray-850/30"
	>
		<div
			class="px-3.5 flex flex-1 items-center w-full space-x-2 py-0.5 pb-2"
		>
			<div class="flex flex-1 items-center">
				<div class=" self-center ml-1 mr-3">
					<Search className="size-3.5" />
				</div>
				<input
					class=" w-full text-sm py-1 rounded-r-xl outline-hidden bg-transparent"
					bind:value={query}
					aria-label={$i18n.t("Search Models")}
					placeholder={$i18n.t("Search Models")}
					maxlength="500"
					on:input={() => {
						clearTimeout(searchDebounceTimer);
						searchDebounceTimer = setTimeout(() => {
							getModelList();
						}, 300);
					}}
				/>

				{#if query}
					<div
						class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent"
					>
						<button
							class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
							aria-label={$i18n.t("Clear search")}
							on:click={() => {
								query = "";
								getModelList();
							}}
						>
							<XMark className="size-3" strokeWidth="2" />
						</button>
					</div>
				{/if}
			</div>
		</div>

		<div
			class="px-3 flex w-full bg-transparent overflow-x-auto scrollbar-none"
			on:wheel={(e) => {
				if (e.deltaY !== 0) {
					e.preventDefault();
					e.currentTarget.scrollLeft += e.deltaY;
				}
			}}
		>
			<div
				class="flex gap-0.5 w-fit text-center text-sm rounded-full bg-transparent px-0.5 whitespace-nowrap"
				bind:this={tagsContainerElement}
			>
				<ViewSelector
					bind:value={viewOption}
					onChange={async (value) => {
						localStorage.workspaceViewOption = value;
						await tick();
					}}
				/>

				{#if (tags ?? []).length > 0}
					<TagSelector
						bind:value={selectedTag}
						items={tags.map((tag) => {
							return { value: tag, label: tag };
						})}
					/>
				{/if}
			</div>

			<div class="flex-1"></div>

			<Dropdown>
				<Tooltip content={$i18n.t("Actions")}>
					<button
						class="p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition"
						type="button"
					>
						<EllipsisHorizontal className="size-4" />
					</button>
				</Tooltip>

				<div slot="content">
					<div
						class="w-[170px] rounded-xl p-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
					>
						<button
							class="select-none flex w-full gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
							type="button"
							on:click={() => {
								enableAllHandler();
							}}
						>
							<CheckCircle className="size-4" />
							<div class="flex items-center">
								{$i18n.t("Enable All")}
							</div>
						</button>

						<button
							class="select-none flex w-full gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
							type="button"
							on:click={() => {
								disableAllHandler();
							}}
						>
							<Minus className="size-4" />
							<div class="flex items-center">
								{$i18n.t("Disable All")}
							</div>
						</button>

						<hr class="border-gray-100 dark:border-gray-800 my-1" />

						<button
							class="select-none flex w-full gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
							type="button"
							on:click={() => {
								showAllHandler();
							}}
						>
							<Eye className="size-4" />
							<div class="flex items-center">
								{$i18n.t("Show All")}
							</div>
						</button>

						<button
							class="select-none flex w-full gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
							type="button"
							on:click={() => {
								hideAllHandler();
							}}
						>
							<EyeSlash className="size-4" />
							<div class="flex items-center">
								{$i18n.t("Hide All")}
							</div>
						</button>
					</div>
				</div>
			</Dropdown>
		</div>

		{#if models !== null}
			{#if (models ?? []).length !== 0}
				<div
					class=" px-3 my-2 gap-1 lg:gap-2 grid lg:grid-cols-2"
					id="model-list"
				>
					{#each models as model (model.id)}
						<!-- svelte-ignore a11y_no_static_element_interactions -->
						<!-- svelte-ignore a11y_click_events_have_key_events -->
						<div
							class="flex transition rounded-2xl w-full p-2.5 {model.write_access
								? 'cursor-pointer dark:hover:bg-gray-850/50 hover:bg-gray-50'
								: 'dark:hover:bg-gray-850/50 hover:bg-gray-50'}"
							id="model-item-{model.id}"
							on:click={() => {
								if (model.write_access) {
									goto(
										`/workspace/models/edit?id=${encodeURIComponent(model.id)}`,
									);
								}
							}}
						>
							<div class="flex group/item gap-3.5 w-full">
								<div class="self-center pl-0.5">
									<div class="flex bg-white rounded-2xl">
										<div
											class="{model.is_active
												? ''
												: 'opacity-50 dark:opacity-50'} bg-transparent rounded-2xl"
										>
											<img
												src={`${REXPRO_API_BASE_URL}/models/model/profile/image?id=${model.id}&lang=${$i18n.language}`}
												alt="modelfile profile"
												class=" rounded-2xl size-12 object-cover"
												loading="lazy"
												decoding="async"
												on:error={(e) => {
													e.target.src =
														"/favicon.png";
												}}
											/>
										</div>
									</div>
								</div>

								<div
									class=" shrink-0 flex w-full min-w-0 flex-1 pr-1 self-center"
								>
									<div
										class="flex h-full w-full flex-1 flex-col justify-start self-center group"
									>
										<div class="flex-1 w-full">
											<div
												class="flex items-center justify-between w-full"
											>
												<Tooltip
													content={model.name}
													className=" w-fit"
													placement="top-start"
												>
													<a
														class=" font-medium line-clamp-1 hover:underline capitalize"
														href={`/?models=${encodeURIComponent(model.id)}`}
													>
														{model.name}
													</a>
												</Tooltip>

												<div
													class="flex items-center gap-1"
												>
													{#if !model.write_access}
														<div>
															<Badge
																type="muted"
																content={$i18n.t(
																	"Read Only",
																)}
															/>
														</div>
													{/if}

													<div
														class="flex {model.is_active
															? ''
															: 'text-gray-500'}"
													>
														<div
															class="flex items-center gap-0.5"
														>
															{#if shiftKey && model.write_access}
																<Tooltip
																	content={model
																		?.meta
																		?.hidden
																		? $i18n.t(
																				"Show",
																			)
																		: $i18n.t(
																				"Hide",
																			)}
																>
																	<button
																		class="self-center w-fit text-sm p-1.5 dark:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
																		type="button"
																		aria-label={model
																			?.meta
																			?.hidden
																			? $i18n.t(
																					"Show",
																				)
																			: $i18n.t(
																					"Hide",
																				)}
																		on:click={(
																			e,
																		) => {
																			e.stopPropagation();
																			hideModelHandler(
																				model,
																			);
																		}}
																	>
																		{#if model?.meta?.hidden}
																			<EyeSlash
																			/>
																		{:else}
																			<Eye
																			/>
																		{/if}
																	</button>
																</Tooltip>

																<Tooltip
																	content={$i18n.t(
																		"Delete",
																	)}
																>
																	<button
																		class="self-center w-fit text-sm p-1.5 dark:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
																		type="button"
																		aria-label={$i18n.t(
																			"Delete",
																		)}
																		on:click={(
																			e,
																		) => {
																			e.stopPropagation();
																			deleteModelHandler(
																				model,
																			);
																		}}
																	>
																		<GarbageBin
																		/>
																	</button>
																</Tooltip>
															{:else}
																<ModelMenu
																	user={$user}
																	{model}
																	writeAccess={model.write_access}
																	editHandler={() => {
																		goto(
																			`/workspace/models/edit?id=${encodeURIComponent(model.id)}`,
																		);
																	}}
																	shareHandler={() => {
																		shareModelHandler(
																			model,
																		);
																	}}
																	cloneHandler={() => {
																		cloneModelHandler(
																			model,
																		);
																	}}
																	exportHandler={() => {
																		exportModelHandler(
																			model,
																		);
																	}}
																	hideHandler={() => {
																		hideModelHandler(
																			model,
																		);
																	}}
																	pinModelHandler={() => {
																		pinModelHandler(
																			model.id,
																		);
																	}}
																	copyLinkHandler={() => {
																		copyLinkHandler(
																			model,
																		);
																	}}
																	deleteHandler={() => {
																		selectedModel =
																			model;
																		showModelDeleteConfirm = true;
																	}}
																	onClose={() => {}}
																>
																	<div
																		class="self-center w-fit p-1 text-sm dark:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
																	>
																		<EllipsisHorizontal
																			className="size-5"
																		/>
																	</div>
																</ModelMenu>
															{/if}
														</div>
													</div>

													{#if model.write_access}
														<button
															on:click={(e) => {
																e.stopPropagation();
															}}
														>
															<Tooltip
																content={model.is_active
																	? $i18n.t(
																			"Enabled",
																		)
																	: $i18n.t(
																			"Disabled",
																		)}
															>
																<Switch
																	bind:state={
																		model.is_active
																	}
																	on:change={async () => {
																		toggleModelById(
																			localStorage.token,
																			model.id,
																		);
																		_models.set(
																			await getModels(
																				localStorage.token,
																				$config
																					?.features
																					?.enable_direct_connections &&
																					($settings?.directConnections ??
																						null),
																			),
																		);
																	}}
																/>
															</Tooltip>
														</button>
													{/if}
												</div>
											</div>

											<div
												class=" flex gap-1 pr-2 -mt-1 items-center"
											>
												<Tooltip
													content={model?.user
														?.email ??
														$i18n.t("Deleted User")}
													className="flex shrink-0"
													placement="top-start"
												>
													<div
														class="shrink-0 text-gray-500 text-xs"
													>
														{$i18n.t(
															"By {{name}}",
															{
																name: capitalizeFirstLetter(
																	model?.user
																		?.name ??
																		model
																			?.user
																			?.email ??
																		$i18n.t(
																			"Deleted User",
																		),
																),
															},
														)}
													</div>
												</Tooltip>

												<div>·</div>

												<Tooltip
													content={marked.parse(
														model?.meta
															?.description ??
															model.id,
													)}
													className=" w-fit text-left"
													placement="top-start"
												>
													<div
														class="flex gap-1 text-xs overflow-hidden"
													>
														<div
															class="line-clamp-1"
														>
															{#if (model?.meta?.description ?? "").trim()}
																{model?.meta
																	?.description}
															{:else}
																{model.id}
															{/if}
														</div>
													</div>
												</Tooltip>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					{/each}
				</div>

				{#if total > 30}
					<Pagination bind:page count={total} perPage={30} />
				{/if}
			{:else}
				<div
					class=" w-full h-full flex flex-col justify-center items-center my-16 mb-24"
				>
					<div class="max-w-md text-center flex flex-col items-center">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8 text-gray-300 dark:text-gray-600 mb-3">
							<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
						</svg>
						<div class=" text-lg font-medium mb-1">

							{$i18n.t("No models found")}
						</div>
						<div class=" text-gray-500 text-center text-xs">
							{$i18n.t(
								"Try adjusting your search or filter to find what you are looking for.",
							)}
						</div>
					</div>
				</div>
			{/if}
		{:else}
			<div class="w-full h-full flex justify-center items-center py-10">
				<Spinner className="size-4" />
			</div>
		{/if}
	</div>

	{#if $config?.features.enable_community_sharing}
		<div class=" my-16">
			<div class=" text-xl font-medium mb-1 line-clamp-1">
				{$i18n.t("Made by rexpro-ai Community")}
			</div>

			<a
				class=" flex cursor-pointer items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-850 w-full mb-2 px-3.5 py-1.5 rounded-xl transition"
				href="https://rexpro-ai.rexpro.com/models"
				target="_blank"
			>
				<div class=" self-center">
					<div class=" font-medium line-clamp-1">
						{$i18n.t("Discover a model")}
					</div>
					<div class=" text-sm line-clamp-1">
						{$i18n.t(
							"Discover, download, and explore model presets",
						)}
					</div>
				</div>

				<div>
					<div>
						<ChevronRight />
					</div>
				</div>
			</a>
		</div>
	{/if}
{:else}
	<div class="w-full h-full flex justify-center items-center">
		<Spinner className="size-5" />
	</div>
{/if}