frontend/src/lib/components/chat/Settings/About.svelte

<script lang="ts">
	import { getVersionUpdates } from "$lib/apis";
	import { getOllamaVersion } from "$lib/apis/ollama";
	import { REXPRO_BUILD_HASH, REXPRO_VERSION } from "$lib/constants";
	import { REXPRO_NAME, config, showChangelog } from "$lib/stores";
	import { compareVersion } from "$lib/utils";
	import { onMount, getContext } from "svelte";

	import Tooltip from "$lib/components/common/Tooltip.svelte";

	const i18n = getContext("i18n");

	let ollamaVersion = "";

	let updateAvailable = null;
	let version = {
		current: "",
		latest: "",
	};

	const checkForVersionUpdates = async () => {
		updateAvailable = null;
		version = await getVersionUpdates(localStorage.token).catch((error) => {
			return {
				current: REXPRO_VERSION,
				latest: REXPRO_VERSION,
			};
		});

		console.log(version);

		updateAvailable = compareVersion(version.latest, version.current);
		console.log(updateAvailable);
	};

	onMount(async () => {
		ollamaVersion = await getOllamaVersion(localStorage.token).catch(
			(error) => {
				return "";
			},
		);

		if ($config?.features?.enable_version_update_check) {
			checkForVersionUpdates();
		}
	});
</script>

<div
	id="tab-about"
	class="flex flex-col h-full justify-between space-y-3 text-sm mb-6"
>
	<div class=" space-y-3 overflow-y-scroll max-h-[28rem] md:max-h-full">
		<div>
			<div
				class=" mb-2.5 text-sm font-medium flex space-x-2 items-center"
			>
				<div>
					{$REXPRO_NAME}
					{$i18n.t("Version")}
				</div>
			</div>
			<div class="flex w-full justify-between items-center">
				<div
					class="flex flex-col text-xs text-gray-700 dark:text-gray-200"
				>
					<div class="flex gap-1">
						<Tooltip content={REXPRO_BUILD_HASH}>
							v{REXPRO_VERSION}
						</Tooltip>

						{#if $config?.features?.enable_version_update_check}
							<a
								href="https://github.com/rexpro-ai/rexpro-ai/releases/tag/v{version.latest}"
								target="_blank"
							>
								{updateAvailable === null
									? $i18n.t("Checking for updates...")
									: updateAvailable
										? `(v${version.latest} ${$i18n.t("available!")})`
										: $i18n.t("(latest)")}
							</a>
						{/if}
					</div>
				</div>

				{#if $config?.features?.enable_version_update_check}
					<button
						class=" text-xs px-3 py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-lg font-medium"
						on:click={() => {
							checkForVersionUpdates();
						}}
					>
						{$i18n.t("Check for updates")}
					</button>
				{/if}
			</div>
		</div>

		{#if ollamaVersion}
			<hr class=" border-gray-100/30 dark:border-gray-850/30" />

			<div>
				<div class=" mb-2.5 text-sm font-medium">
					{$i18n.t("Ollama Version")}
				</div>
				<div class="flex w-full">
					<div
						class="flex-1 text-xs text-gray-700 dark:text-gray-200"
					>
						{ollamaVersion ?? "N/A"}
					</div>
				</div>
			</div>
		{/if}

		<hr class=" border-gray-100/30 dark:border-gray-850/30" />

		{#if $config?.license_metadata}
			<div class="mb-2 text-xs">
				{#if !$REXPRO_NAME.includes("rexpro-ai")}
					<span class=" text-gray-500 dark:text-gray-300 font-medium"
						>{$REXPRO_NAME}</span
					> -
				{/if}

				<span class=" capitalize"
					>{$config?.license_metadata?.type}</span
				>
				license purchased by
				<span class=" capitalize"
					>{$config?.license_metadata?.organization_name}</span
				>
			</div>
		{/if}

		<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
			Emoji graphics provided by
			<a href="https://github.com/jdecked/twemoji" target="_blank"
				>Twemoji</a
			>, licensed under
			<a
				href="https://creativecommons.org/licenses/by/4.0/"
				target="_blank">CC-BY 4.0</a
			>.
		</div>

		<div>
			<pre
				class="text-xs text-gray-400 dark:text-gray-500">Copyright (c) {new Date().getFullYear()} <a
					href="https://rexpro-ai.rexpro.com"
					target="_blank"
					class="underline">REXCorp.</a
				> <a
					href="https://github.com/rexpro-ai/rexpro-ai/blob/main/LICENSE"
					target="_blank">All rights reserved.</a
				>
</pre>
		</div>

		<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
			{$i18n.t("Created by")}
			<a
				class=" text-gray-500 dark:text-gray-300 font-medium"
				href="https://github.com/rexcorp1"
				target="_blank">-fdrm-</a
			>
		</div>
	</div>
</div>