feat: encrich home screen info (#628)

clients/tabby-playground/app/page.tsx

@@ -1,14 +1,102 @@
-import { Button, buttonVariants } from "@/components/ui/button"
+"use client";
+
+import { buttonVariants } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { IconSlack } from "@/components/ui/icons"
+import { Separator } from "@/components/ui/separator";
+import { PropsWithChildren, useEffect, useState } from "react";
+
+const COMMUNITY_DIALOG_SHOWN_KEY = "community-dialog-shown";
 
 export default function IndexPage() {
+  const [healthInfo, setHealthInfo] = useState<HealthInfo | undefined>();
+  useEffect(() => {
+    fetchHealth().then(setHealthInfo);
+  }, []);
+
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    if (!localStorage.getItem(COMMUNITY_DIALOG_SHOWN_KEY)) {
+      setOpen(true);
+      localStorage.setItem(COMMUNITY_DIALOG_SHOWN_KEY, "true");
+    }
+  }, []);
+
+  const gettingStartedMarkDown = `
+  You can find our documentation [here](https://tabby.tabbyml.com/docs/getting-started).
+  - 💻 [IDE/Editor Extensions](https://tabby.tabbyml.com/docs/extensions/)
+  - ⚙️ [Configuration](https://tabby.tabbyml.com/docs/configuration)`;
   return <div className="grow flex justify-center items-center">
     <div className="w-2/3 lg:w-1/3 flex flex-col gap-3">
-      <h1 className="text-xl font-bold">Join the Tabby community</h1>
-      <p>Connect with other contributors building Tabby. Share knowledge, get help, and contribute to the open-source project.</p>
-      <p>
-        <a target="_blank" href="https://join.slack.com/t/tabbycommunity/shared_invite/zt-1xeiddizp-bciR2RtFTaJ37RBxr8VxpA" className={buttonVariants()}><IconSlack className="-ml-2 h-8 w-8" />Join us on Slack</a>
-      </p>
+      {healthInfo && <>
+        <h1><span className="font-bold">Congratulations</span>, your tabby instance is running!</h1>
+        <span className="flex gap-1">
+          <a target="_blank" href={`https://github.com/TabbyML/tabby/releases/tag/${healthInfo.version.git_describe}`}><img src={`https://img.shields.io/badge/version-${toBadgeString(healthInfo.version.git_describe)}-green`} /></a>
+          <img src={`https://img.shields.io/badge/device-${healthInfo.device}-blue`} />
+          <img src={`https://img.shields.io/badge/model-${toBadgeString(healthInfo.model)}-red`} />
+        </span>
+        <Separator />
+
+        <p>
+          You can find our documentation <Link href="https://tabby.tabbyml.com/docs/getting-started">here</Link>.
+          <ul className="mt-2">
+            <li>💻 <Link href="https://tabby.tabbyml.com/docs/extensions/">IDE/Editor Extensions</Link></li>
+            <li>⚙️ <Link href="https://tabby.tabbyml.com/docs/configuration">Configuration</Link></li>
+          </ul>
+        </p>
+      </>
+      }
     </div>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader className="gap-3">
+          <DialogTitle>Join the Tabby community</DialogTitle>
+          <DialogDescription>
+            Connect with other contributors building Tabby. Share knowledge, get help, and contribute to the open-source project.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter className="sm:justify-start">
+          <a target="_blank" href="https://join.slack.com/t/tabbycommunity/shared_invite/zt-1xeiddizp-bciR2RtFTaJ37RBxr8VxpA" className={buttonVariants()}><IconSlack className="-ml-2 h-8 w-8" />Join us on Slack</a>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   </div>
+}
+
+interface HealthInfo {
+  device: string,
+  model: string,
+  version: {
+    build_date: string,
+    git_describe: string,
+  }
+}
+
+async function fetchHealth(): Promise<HealthInfo> {
+  if (process.env.NODE_ENV === "production") {
+    const resp = await fetch("/v1/health");
+    return await resp.json() as HealthInfo;
+  } else {
+    return {
+      "device": "metal",
+      "model": "TabbyML/StarCoder-1B",
+      "version": {
+        "build_date": "2023-10-21",
+        "git_describe": "v0.3.1",
+        "git_sha": "d5fdcf3a2cbe0f6b45d6e8ef3255e6a18f840132"
+      }
+    } as HealthInfo
+  }
+}
+
+interface LinkProps {
+  href: string
+}
+
+function Link({ href, children }: PropsWithChildren<LinkProps>) {
+  return <a target="_blank" href={href} className="underline">{children}</a>
+}
+
+function toBadgeString(str: string) {
+  return encodeURIComponent(str.replaceAll("-", "--"));
 }

clients/tabby-playground/components/header.tsx

@@ -54,7 +54,11 @@ export function Header() {
 }
 
 async function fetchIsChatEnabled() {
-  const resp = await fetch("/v1/health");
-  const json = await resp.json();
-  return !!json.chat_model;
+  if (process.env.NODE_ENV === "production") {
+    const resp = await fetch("/v1/health");
+    const json = await resp.json();
+    return !!json.chat_model;
+  } else {
+    return true;
+  }
 }