Add build and lint CI (#70)

Author: lukasIO

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"]
+  "extends": ["next/core-web-vitals", "next/typescript", "prettier"]
 }

.github/workflows/build-and-test.yaml

@@ -0,0 +1,33 @@
+name: Lint and Build
+permissions:
+  contents: read
+  pull-requests: read
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - name: Use Node.js 22
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: ESLint
+        run: pnpm lint
+
+      - name: Prettier
+        run: pnpm format:check
+
+      - name: Ensure build succeeds
+        run: pnpm build

.prettierignore

@@ -0,0 +1,8 @@
+.github/
+dist/
+docs/
+node_modules/
+.next/
+yarn.lock
+pnpm-lock.yaml
+

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "importOrder": ["<THIRD_PARTY_MODULES>", "^[./]"],
+  "importOrderSeparation": false,
+  "importOrderSortSpecifiers": true,
+  "importOrderParserPlugins": ["typescript", "jsx"],
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
+}

README.md

@@ -36,4 +36,3 @@ You'll also need an agent to speak with. Try our sample voice assistant agent fo
 ## Contributing
 
 This template is open source and we welcome contributions! Please open a PR or issue through GitHub, and don't forget to join us in the [LiveKit Community Slack](https://livekit.io/join-slack)!
-

TEMPLATE.md

@@ -7,12 +7,11 @@ A Next.js frontend for a simple AI voice assistant using LiveKit's official [Jav
 When deployed in a sandbox, LiveKit will host an instance of this application for you, providing a unique, shareable URL through which you can access it. Any agents running with the same LiveKit project credentials will join, meaning that you can rapidly iterate on your agent prototypes, and share the results instantly with friends and colleagues. To begin testing your agent, deploy this app in sandbox then set up an agent on your local machine using the [LiveKit CLI](https://docs.livekit.io/home/cli/cli-setup/):
 
 ```console
-lk app create --template voice-pipeline-agent-python 
+lk app create --template voice-pipeline-agent-python
 ```
 
 **NOTE:** For a list of all available templates, run `lk app list-templates`.
 
-
 ## Installation
 
 To run this application locally, clone the repo or use the [LiveKit CLI](https://docs.livekit.io/home/cli/cli-setup/):

app/api/connection-details/route.ts

@@ -1,8 +1,4 @@
-import {
-  AccessToken,
-  AccessTokenOptions,
-  VideoGrant,
-} from "livekit-server-sdk";
+import { AccessToken, AccessTokenOptions, VideoGrant } from "livekit-server-sdk";
 import { NextResponse } from "next/server";
 
 // NOTE: you are expected to define the following environment variables in `.env.local`:
@@ -37,7 +33,7 @@ export async function GET() {
     const roomName = `voice_assistant_room_${Math.floor(Math.random() * 10_000)}`;
     const participantToken = await createParticipantToken(
       { identity: participantIdentity },
-      roomName,
+      roomName
     );
 
     // Return connection details
@@ -59,10 +55,7 @@ export async function GET() {
   }
 }
 
-function createParticipantToken(
-  userInfo: AccessTokenOptions,
-  roomName: string
-) {
+function createParticipantToken(userInfo: AccessTokenOptions, roomName: string) {
   const at = new AccessToken(API_KEY, API_SECRET, {
     ...userInfo,
     ttl: "15m",

app/layout.tsx

@@ -1,6 +1,6 @@
 import "@livekit/components-styles";
-import "./globals.css";
 import { Public_Sans } from "next/font/google";
+import "./globals.css";
 
 const publicSans400 = Public_Sans({
   weight: "400",

app/page.tsx

@@ -1,26 +1,26 @@
 "use client";
 
-import { AnimatePresence, motion } from "framer-motion";
+import { CloseIcon } from "@/components/CloseIcon";
+import { NoAgentNotification } from "@/components/NoAgentNotification";
 import {
-  LiveKitRoom,
-  useVoiceAssistant,
+  AgentState,
   BarVisualizer,
+  DisconnectButton,
+  LiveKitRoom,
   RoomAudioRenderer,
   VoiceAssistantControlBar,
-  AgentState,
-  DisconnectButton,
+  useVoiceAssistant,
 } from "@livekit/components-react";
-import { useCallback, useEffect, useState } from "react";
+import { useKrispNoiseFilter } from "@livekit/components-react/krisp";
+import { AnimatePresence, motion } from "framer-motion";
 import { MediaDeviceFailure } from "livekit-client";
+import { useCallback, useEffect, useState } from "react";
 import type { ConnectionDetails } from "./api/connection-details/route";
-import { NoAgentNotification } from "@/components/NoAgentNotification";
-import { CloseIcon } from "@/components/CloseIcon";
-import { useKrispNoiseFilter } from "@livekit/components-react/krisp";
 
 export default function Page() {
-  const [connectionDetails, updateConnectionDetails] = useState<
-    ConnectionDetails | undefined
-  >(undefined);
+  const [connectionDetails, updateConnectionDetails] = useState<ConnectionDetails | undefined>(
+    undefined
+  );
   const [agentState, setAgentState] = useState<AgentState>("disconnected");
 
   const onConnectButtonClicked = useCallback(async () => {
@@ -34,8 +34,7 @@ export default function Page() {
     // own participant name, and possibly to choose from existing rooms to join.
 
     const url = new URL(
-      process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT ??
-      "/api/connection-details",
+      process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT ?? "/api/connection-details",
       window.location.origin
     );
     const response = await fetch(url.toString());
@@ -44,10 +43,7 @@ export default function Page() {
   }, []);
 
   return (
-    <main
-      data-lk-theme="default"
-      className="h-full grid content-center bg-[var(--lk-bg)]"
-    >
+    <main data-lk-theme="default" className="h-full grid content-center bg-[var(--lk-bg)]">
       <LiveKitRoom
         token={connectionDetails?.participantToken}
         serverUrl={connectionDetails?.serverUrl}
@@ -61,20 +57,15 @@ export default function Page() {
         className="grid grid-rows-[2fr_1fr] items-center"
       >
         <SimpleVoiceAssistant onStateChange={setAgentState} />
-        <ControlBar
-          onConnectButtonClicked={onConnectButtonClicked}
-          agentState={agentState}
-        />
+        <ControlBar onConnectButtonClicked={onConnectButtonClicked} agentState={agentState} />
         <RoomAudioRenderer />
         <NoAgentNotification state={agentState} />
       </LiveKitRoom>
     </main>
   );
 }
 
-function SimpleVoiceAssistant(props: {
-  onStateChange: (state: AgentState) => void;
-}) {
+function SimpleVoiceAssistant(props: { onStateChange: (state: AgentState) => void }) {
   const { state, audioTrack } = useVoiceAssistant();
   useEffect(() => {
     props.onStateChange(state);
@@ -92,10 +83,7 @@ function SimpleVoiceAssistant(props: {
   );
 }
 
-function ControlBar(props: {
-  onConnectButtonClicked: () => void;
-  agentState: AgentState;
-}) {
+function ControlBar(props: { onConnectButtonClicked: () => void; agentState: AgentState }) {
   /**
    * Use Krisp background noise reduction when available.
    * Note: This is only available on Scale plan, see {@link https://livekit.io/pricing | LiveKit Pricing} for more details.
@@ -122,21 +110,20 @@ function ControlBar(props: {
         )}
       </AnimatePresence>
       <AnimatePresence>
-        {props.agentState !== "disconnected" &&
-          props.agentState !== "connecting" && (
-            <motion.div
-              initial={{ opacity: 0, top: "10px" }}
-              animate={{ opacity: 1, top: 0 }}
-              exit={{ opacity: 0, top: "-10px" }}
-              transition={{ duration: 0.4, ease: [0.09, 1.04, 0.245, 1.055] }}
-              className="flex h-8 absolute left-1/2 -translate-x-1/2  justify-center"
-            >
-              <VoiceAssistantControlBar controls={{ leave: false }} />
-              <DisconnectButton>
-                <CloseIcon />
-              </DisconnectButton>
-            </motion.div>
-          )}
+        {props.agentState !== "disconnected" && props.agentState !== "connecting" && (
+          <motion.div
+            initial={{ opacity: 0, top: "10px" }}
+            animate={{ opacity: 1, top: 0 }}
+            exit={{ opacity: 0, top: "-10px" }}
+            transition={{ duration: 0.4, ease: [0.09, 1.04, 0.245, 1.055] }}
+            className="flex h-8 absolute left-1/2 -translate-x-1/2  justify-center"
+          >
+            <VoiceAssistantControlBar controls={{ leave: false }} />
+            <DisconnectButton>
+              <CloseIcon />
+            </DisconnectButton>
+          </motion.div>
+        )}
       </AnimatePresence>
     </div>
   );

components/CloseIcon.tsx

@@ -1,12 +1,6 @@
 export function CloseIcon() {
   return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M3.33398 3.33334L12.6673 12.6667M12.6673 3.33334L3.33398 12.6667"
         stroke="currentColor"

components/NoAgentNotification.tsx

@@ -1,5 +1,6 @@
 import type { AgentState } from "@livekit/components-react";
 import { useEffect, useRef, useState } from "react";
+
 interface NoAgentNotificationProps extends React.PropsWithChildren<object> {
   state: AgentState;
 }
@@ -24,10 +25,7 @@ export function NoAgentNotification(props: NoAgentNotificationProps) {
   useEffect(() => {
     if (props.state === "connecting") {
       timeoutRef.current = window.setTimeout(() => {
-        if (
-          props.state === "connecting" &&
-          agentHasConnected.current === false
-        ) {
+        if (props.state === "connecting" && agentHasConnected.current === false) {
           setShowNotification(true);
         }
       }, timeToWaitMs);
@@ -67,8 +65,8 @@ export function NoAgentNotification(props: NoAgentNotificationProps) {
             </svg>
           </div>
           <p className="text-pretty w-max">
-            It&apos;s quiet... too quiet. Is your agent lost? Ensure your agent
-            is properly configured and running on your machine.
+            It&apos;s quiet... too quiet. Is your agent lost? Ensure your agent is properly
+            configured and running on your machine.
           </p>
           <a
             href="https://docs.livekit.io/agents/quickstarts/s2s/"

package.json

@@ -6,7 +6,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format:check": "prettier --check .",
+    "format:write": "prettier --write ."
   },
   "dependencies": {
     "@livekit/components-react": "^2.7.0",
@@ -15,18 +17,22 @@
     "framer-motion": "^11.18.0",
     "livekit-client": "^2.8.0",
     "livekit-server-sdk": "^2.9.7",
-    "next": "14.2.24",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/node": "^20.17.13",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "eslint": "^8.57.1",
     "eslint-config-next": "14.2.24",
+    "eslint-config-prettier": "9.1.0",
+    "next": "14",
     "postcss": "^8.5.1",
+    "prettier": "^3.4.2",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.7.3"
-  }
+  },
+  "packageManager": "[email protected]"
 }