feat(ui): add /api page (#665)

* refactor(tabby-ui): extract tabby-fetcher

* feat(tabby-ui): add /api page

* feat(tabby-ui): add chat model badge

* fix: add components.json for shadcn

* chore: release tabby-ui

clients/tabby-ui/app/api/page.tsx

@@ -0,0 +1,11 @@
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'API',
+}
+
+const serverUrl = process.env.NEXT_PUBLIC_TABBY_SERVER_URL || '';
+
+export default function IndexPage() {
+  return <iframe className='flex-grow' src={`${serverUrl}/swagger-ui`} />
+}

clients/tabby-ui/app/page.tsx

@@ -55,10 +55,13 @@ function MainPanel() {
 
   return <div className="w-2/3 lg:w-1/3 flex flex-col gap-3">
     <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>
+    <span className="flex flex-wrap 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`} />
+      {healthInfo.chat_model && <img src={`https://img.shields.io/badge/chat%20model-${toBadgeString(healthInfo.chat_model)}-orange`} />}
     </span>
 
     <Separator />

clients/tabby-ui/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

clients/tabby-ui/components/header.tsx

@@ -30,6 +30,9 @@ export function Header() {
         <Link href="/" className={cn(buttonVariants({ variant: 'link' }))}>
           Home
         </Link>
+        <Link href="/api" className={cn(buttonVariants({ variant: 'link' }))}>
+          API
+        </Link>
         {isChatEnabled && <Link href="/playground" className={cn(buttonVariants({ variant: 'link' }))}>
           Playground
         </Link>}
@@ -53,15 +56,6 @@ export function Header() {
           <IconGitHub />
           <span className="hidden ml-2 md:flex">GitHub</span>
         </a>
-        <a
-          target="_blank"
-          href="/swagger-ui"
-          rel="noopener noreferrer"
-          className={cn(buttonVariants({ variant: 'outline' }))}
-        >
-          <IconExternalLink />
-          <span className="hidden ml-2 md:flex">OpenAPI</span>
-        </a>
       </div>
     </header>
   )

clients/tabby-ui/lib/hooks/use-health.tsx

@@ -1,7 +1,8 @@
 "use client"
 
-import useSWRImmutable from 'swr/immutable';
+import useSWRImmutable from 'swr/immutable'
 import { SWRResponse } from 'swr'
+import fetcher from '@/lib/tabby-fetcher'
 
 export interface HealthInfo {
     device: string,
@@ -14,17 +15,5 @@ export interface HealthInfo {
 }
 
 export function useHealth(): SWRResponse<HealthInfo> {
-    let fetcher = (url: string) => fetch(url).then(x => x.json());
-    if (process.env.NODE_ENV !== "production") {
-        fetcher = async (url: string) => ({
-            "device": "metal",
-            "model": "TabbyML/StarCoder-1B",
-            "version": {
-                "build_date": "2023-10-21",
-                "git_describe": "v0.3.1",
-                "git_sha": "d5fdcf3a2cbe0f6b45d6e8ef3255e6a18f840132"
-            }
-        });
-    }
     return useSWRImmutable('/v1/health', fetcher);
 }

clients/tabby-ui/lib/tabby-fetcher.ts

@@ -0,0 +1,8 @@
+
+export default function fetcher(url: string): Promise<any> {
+    if (process.env.NODE_ENV === "production") {
+        return fetch(url).then(x => x.json());
+    } else {
+        return fetch(`${process.env.NEXT_PUBLIC_TABBY_SERVER_URL}${url}`).then(x => x.json());
+    }
+}

crates/tabby/src/serve/mod.rs

@@ -35,7 +35,7 @@ use crate::fatal;
     info(title="Tabby Server",
         description = "
 [![tabby stars](https://img.shields.io/github/stars/TabbyML/tabby)](https://github.com/TabbyML/tabby)
-[![Join Slack](https://shields.io/badge/Tabby-Join%20Slack-red?logo=slack)](https://join.slack.com/t/tabbycommunity/shared_invite/zt-1xeiddizp-bciR2RtFTaJ37RBxr8VxpA)
+[![Join Slack](https://shields.io/badge/Join-Tabby%20Slack-red?logo=slack)](https://join.slack.com/t/tabbycommunity/shared_invite/zt-1xeiddizp-bciR2RtFTaJ37RBxr8VxpA)
 
 Install following IDE / Editor extensions to get started with [Tabby](https://github.com/TabbyML/tabby).
 * [VSCode Extension](https://github.com/TabbyML/tabby/tree/main/clients/vscode) – Install from the [marketplace](https://marketplace.visualstudio.com/items?itemName=TabbyML.vscode-tabby), or [open-vsx.org](https://open-vsx.org/extension/TabbyML/vscode-tabby)
@@ -145,6 +145,8 @@ pub async fn main(config: &Config, args: &ServeArgs) {
     let app = Router::new()
         .route("/", routing::get(ui::handler))
         .route("/index.txt", routing::get(ui::handler))
+        .route("/api", routing::get(ui::handler))
+        .route("/api.txt", routing::get(ui::handler))
         .route("/_next/*path", routing::get(ui::handler))
         .merge(api_router(args, config))
         .merge(SwaggerUi::new("/swagger-ui").url("/api-docs/openapi.json", doc))