chore: add ci for tabby-ui

.github/workflows/tabby-ui-test.yml

@@ -0,0 +1,43 @@
+name: Test tabby-ui
+
+on:
+  push:
+    branches: [ main ]
+    paths:
+      - '.github/workflows/tabby-ui-test.yml'
+      - 'package.json'
+      - 'yarn.lock'
+      - 'clients/tabby-ui/**'
+  pull_request:
+    branches: [ main ]
+    paths:
+      - '.github/workflows/tabby-ui-test.yml'
+      - 'package.json'
+      - 'yarn.lock'
+      - 'clients/tabby-ui/**'
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          cache: yarn
+          cache-dependency-path: 'yarn.lock'
+      - name: Install dependencies
+        working-directory: ./clients/tabby-ui
+        run: yarn install
+      - name: Format
+        working-directory: ./clients/tabby-ui
+        run: yarn format:check
+      - name: Lint
+        working-directory: ./clients/tabby-ui
+        run: yarn lint
+      - name: Test build
+        working-directory: ./clients/tabby-ui
+        run: yarn build
+

Makefile

@@ -8,6 +8,9 @@ endif
 fix:
 	cargo clippy --fix --allow-dirty --allow-staged && cargo +nightly fmt
 
+fix-ui:
+	cd clients/tabby-ui && yarn format:write && yarn lint:fix
+
 update-ui:
 	cd clients/tabby-ui && yarn build
 	rm -rf crates/tabby/ui && cp -R clients/tabby-ui/out crates/tabby/ui

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

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

clients/tabby-ui/app/layout.tsx

@@ -18,7 +18,7 @@ export const metadata: Metadata = {
   themeColor: [
     { media: '(prefers-color-scheme: light)', color: 'white' },
     { media: '(prefers-color-scheme: dark)', color: 'black' }
-  ],
+  ]
 }
 
 interface RootLayoutProps {
@@ -38,10 +38,10 @@ export default function RootLayout({ children }: RootLayoutProps) {
       >
         <Toaster />
         <Providers attribute="class" defaultTheme="system" enableSystem>
-          <div className="flex flex-col min-h-screen">
+          <div className="flex min-h-screen flex-col">
             {/* @ts-ignore */}
             <Header />
-            <main className="flex flex-col flex-1 bg-muted/50">{children}</main>
+            <main className="flex flex-1 flex-col bg-muted/50">{children}</main>
           </div>
           <TailwindIndicator />
         </Providers>

clients/tabby-ui/app/page.tsx

@@ -1,77 +1,134 @@
-"use client"
+'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 { useHealth } from "@/lib/hooks/use-health";
-import { PropsWithChildren, useEffect, useState } from "react";
+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 { useHealth } from '@/lib/hooks/use-health'
+import { PropsWithChildren, useEffect, useState } from 'react'
 
-const COMMUNITY_DIALOG_SHOWN_KEY = "community-dialog-shown";
+const COMMUNITY_DIALOG_SHOWN_KEY = 'community-dialog-shown'
 
 export default function IndexPage() {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(false)
   useEffect(() => {
     if (!localStorage.getItem(COMMUNITY_DIALOG_SHOWN_KEY)) {
-      setOpen(true);
-      localStorage.setItem(COMMUNITY_DIALOG_SHOWN_KEY, "true");
+      setOpen(true)
+      localStorage.setItem(COMMUNITY_DIALOG_SHOWN_KEY, 'true')
     }
-  }, []);
+  }, [])
 
-  return <div className="grow flex justify-center items-center" >
-    <MainPanel />
-    <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>
+  return (
+    <div className="flex grow items-center justify-center">
+      <MainPanel />
+      <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 LinkProps {
   href: string
 }
 
 function Link({ href, children }: PropsWithChildren<LinkProps>) {
-  return <a target="_blank" href={href} className="underline">{children}</a>
+  return (
+    <a target="_blank" href={href} className="underline">
+      {children}
+    </a>
+  )
 }
 
 function toBadgeString(str: string) {
-  return encodeURIComponent(str.replaceAll("-", "--"));
+  return encodeURIComponent(str.replaceAll('-', '--'))
 }
 
 function MainPanel() {
-  const { data: healthInfo } = useHealth();
+  const { data: healthInfo } = useHealth()
 
   if (!healthInfo) return
 
-  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 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>
+  return (
+    <div className="flex w-2/3 flex-col gap-3 lg:w-1/3">
+      <h1>
+        <span className="font-bold">Congratulations</span>, your tabby instance
+        is running!
+      </h1>
+      <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 />
+      <Separator />
 
-    <span>
-      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>
-    </span>
-  </div>
-}
+      <span>
+        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>
+      </span>
+    </div>
+  )
+}

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

@@ -1,9 +1,9 @@
 import { nanoid } from '@/lib/utils'
 import { Chat } from '@/components/chat'
 import { Metadata } from 'next'
- 
+
 export const metadata: Metadata = {
-  title: 'Playground',
+  title: 'Playground'
 }
 
 export default function IndexPage() {

clients/tabby-ui/components/chat-message.tsx

@@ -32,7 +32,7 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
       >
         {message.role === 'user' ? <IconUser /> : <IconTabby />}
       </div>
-      <div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
+      <div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
         <MemoizedReactMarkdown
           className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0"
           remarkPlugins={[remarkGfm, remarkMath]}
@@ -44,7 +44,7 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
               if (children.length) {
                 if (children[0] == '▍') {
                   return (
-                    <span className="mt-1 cursor-default animate-pulse">▍</span>
+                    <span className="mt-1 animate-pulse cursor-default">▍</span>
                   )
                 }
 

clients/tabby-ui/components/empty-screen.tsx

@@ -6,7 +6,7 @@ import { IconArrowRight } from '@/components/ui/icons'
 const exampleMessages = [
   {
     heading: 'Convert list of string to numbers',
-    message: `How to convert a list of string to numbers in python`,
+    message: `How to convert a list of string to numbers in python`
   },
   {
     heading: 'How to parse email address',
@@ -18,9 +18,7 @@ export function EmptyScreen({ setInput }: Pick<UseChatHelpers, 'setInput'>) {
   return (
     <div className="mx-auto max-w-2xl px-4">
       <div className="rounded-lg border bg-background p-8">
-        <h1 className="mb-2 text-lg font-semibold">
-          Welcome to Playground!
-        </h1>
+        <h1 className="mb-2 text-lg font-semibold">Welcome to Playground!</h1>
         <p className="leading-normal text-muted-foreground">
           You can start a conversation here or try the following examples:
         </p>