90 lines
2.5 KiB
TypeScript
90 lines
2.5 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"
|
|
import { Descriptions } from "antd"
|
|
|
|
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">
|
|
<Descriptions
|
|
title={t("about.heading")}
|
|
column={1}
|
|
size="middle"
|
|
items={[
|
|
{
|
|
key: 1,
|
|
label: t("about.chromeVersion"),
|
|
children: data.chromeVersion
|
|
},
|
|
{
|
|
key: 1,
|
|
label: t("about.ollamaVersion"),
|
|
children: data.ollama
|
|
}
|
|
]}
|
|
/>
|
|
<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>
|
|
)
|
|
}
|