103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
import { getOllamaURL } from "~/services/ollama"
|
|
import { useTranslation } from "react-i18next"
|
|
import { useQuery } from "@tanstack/react-query"
|
|
import { Skeleton } from "antd"
|
|
import { cleanUrl } from "@/libs/clean-url"
|
|
|
|
export const AboutApp = () => {
|
|
const { t } = useTranslation("settings")
|
|
|
|
const { data, status } = useQuery({
|
|
queryKey: ["fetchOllamURL"],
|
|
queryFn: async () => {
|
|
const chromeVersion = chrome.runtime.getManifest().version
|
|
try {
|
|
const url = await getOllamaURL()
|
|
const req = await fetch(`${cleanUrl(url)}/api/version`)
|
|
|
|
if (!req.ok) {
|
|
return {
|
|
ollama: "N/A",
|
|
chromeVersion
|
|
}
|
|
}
|
|
|
|
const res = (await req.json()) as { version: string }
|
|
return {
|
|
ollama: res.version,
|
|
chromeVersion
|
|
}
|
|
} catch {
|
|
return {
|
|
ollama: "N/A",
|
|
chromeVersion
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
return (
|
|
<div className="flex flex-col space-y-3">
|
|
{status === "pending" && <Skeleton paragraph={{ rows: 4 }} active />}
|
|
{status === "success" && (
|
|
<div className="flex flex-col space-y-4">
|
|
<div>
|
|
<div>
|
|
<h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
|
|
{t("about.heading")}
|
|
</h2>
|
|
<div className="border border-b border-gray-200 dark:border-gray-600 mt-3 mb-6"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex flex-col space-y-6">
|
|
<div className="flex gap-6">
|
|
<span className="text-sm text-gray-500 dark:text-gray-400">
|
|
{t("about.chromeVersion")}
|
|
</span>
|
|
<span className="text-sm text-gray-900 dark:text-white">
|
|
{data.chromeVersion}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex gap-6">
|
|
<span className="text-sm text-gray-500 dark:text-gray-400">
|
|
{t("about.ollamaVersion")}
|
|
</span>
|
|
<span className="text-sm text-gray-900 dark:text-white">
|
|
{data.ollama}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
|
{t("about.support")}
|
|
</p>
|
|
|
|
<div className="flex gap-2">
|
|
<a
|
|
href="https://ko-fi.com/n4ze3m"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-blue-500 dark:text-blue-400 border dark:border-gray-600 px-2.5 py-2 rounded-md">
|
|
{t("about.koFi")}
|
|
</a>
|
|
|
|
<a
|
|
href="https://github.com/sponsors/n4ze3m"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-blue-500 dark:text-blue-400 border dark:border-gray-600 px-2.5 py-2 rounded-md">
|
|
{t("about.githubSponsor")}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|