first pass tailwind edits

README.md

@@ -16,12 +16,18 @@ yarn run build
 
 Navigate to https://localhost:5173
 
----
 
-## TODO:
+## What libraries does this use?
+
+### Vite / React
+
+We've used [Vite](https://vitejs.dev/) to simplify the development and build experience. 
+
+### Tailwind CSS
+
+We use [Tailwind](https://tailwindcss.com/) so the UI is easy to theme quickly, and reduce the number of CSS classes used throughout the project.
+
+### Radix
+
+For interactive components, we make use of [Radix](https://www.radix-ui.com/).
 
-- Compile style modules with media queries
-- Move layout styles to layout.css
-- Use global media query to change common variables (font size, gutter etc)
-- Rename "styles.module.css" to component specific
-- Handle issue where user speaks before mic track is ready

package.json

@@ -13,30 +13,35 @@
     "@daily-co/daily-js": "^0.64.0",
     "@daily-co/daily-react": "^0.19.0",
     "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "framer-motion": "^11.2.10",
     "lucide-react": "^0.378.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-sparklines": "^1.7.0",
-    "recoil": "^0.7.7"
+    "recoil": "^0.7.7",
+    "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {
+    "@types/node": "^20.14.2",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@types/react-sparklines": "^1.7.5",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-simple-import-sort": "^12.1.0",
     "i": "^0.3.7",
     "npm": "^10.8.0",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-webfont-dl": "^3.9.4"
   }
-}
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.tsx

@@ -2,13 +2,21 @@ import { useState } from "react";
 import { useDaily } from "@daily-co/daily-react";
 import { ArrowRight, Loader2 } from "lucide-react";
 
-import { Alert } from "./components/alert";
-import { Button } from "./components/button";
 import { DeviceSelect } from "./components/DeviceSelect";
 import { RoomInput } from "./components/RoomInput";
 import Session from "./components/Session";
 import { SettingList } from "./components/SettingList/SettingList";
 import { Switch } from "./components/switch";
+import { Alert } from "./components/ui/alert";
+import { Button } from "./components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./components/ui/card";
 import { fetch_meeting_token, fetch_start_agent } from "./actions";
 
 type State =
@@ -173,25 +181,22 @@ export default function App() {
   }
 
   return (
-    <div className="card card-appear">
-      <div className="card-inner card-md">
-        <div className="card-header">
-          <h1>Pipecat {import.meta.env.VITE_APP_TITLE}</h1>
-          <p>Check configuration below</p>
-        </div>
-
+    <Card shadow fullWidthMobile className="animate-appear max-w-lg">
+      <CardHeader>
+        <CardTitle>Pipecat {import.meta.env.VITE_APP_TITLE}</CardTitle>
+        <CardDescription>Check configuration below</CardDescription>
+      </CardHeader>
+      <CardContent stack>
         {import.meta.env.DEV &&
-          !import.meta.env.VITE_SERVER_URL &&
-          !import.meta.env.VITE_DAILY_API_KEY && (
-            <Alert title="Missing server URL environment" intent="danger">
+          (!import.meta.env.VITE_SERVER_URL ||
+            !import.meta.env.VITE_DAILY_API_KEY) && (
+            <Alert title="Missing environment settings" intent="danger">
               <p>
                 You have not set a server URL for local development, or a Daily
                 API Key if you're bypassing starting an agent. Please set{" "}
-                <samp>VITE_SERVER_URL</samp> in <samp>.env.local</samp>.
-              </p>
-              <p>
-                Without this, the client will attempt to start the bot by
-                calling localhost on the same port.
+                <samp>VITE_SERVER_URL</samp> in <samp>.env.local</samp>. Without
+                this, the client will attempt to start the bot by calling
+                localhost on the same port.
               </p>
             </Alert>
           )}
@@ -204,16 +209,17 @@ export default function App() {
         {import.meta.env.VITE_MANUAL_ROOM_ENTRY && !roomQs && (
           <RoomInput onChange={(url) => setRoomUrl(url)} error={roomError} />
         )}
-        <div className="card-footer">
-          <Button
-            key="next"
-            disabled={!!(roomQs && !roomError)}
-            onClick={() => handleRoomUrl()}
-          >
-            Next <ArrowRight />
-          </Button>
-        </div>
-      </div>
-    </div>
+      </CardContent>
+      <CardFooter>
+        <Button
+          fullWidthMobile
+          key="next"
+          disabled={!!(roomQs && !roomError)}
+          onClick={() => handleRoomUrl()}
+        >
+          Next <ArrowRight />
+        </Button>
+      </CardFooter>
+    </Card>
   );
 }

src/actions.ts

@@ -30,7 +30,7 @@ export const fetch_start_agent = async (
   roomUrl: string | null,
   serverUrl: string
 ) => {
-  const req = await fetch(`${serverUrl}start_bot`, {
+  const req = await fetch(`${serverUrl}`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

src/components/DeviceSelect/index.tsx

@@ -3,7 +3,7 @@ import { DailyMeetingState } from "@daily-co/daily-js";
 import { useDaily, useDevices } from "@daily-co/daily-react";
 import { Mic, Speaker } from "lucide-react";
 
-import { Alert } from "../alert";
+import { Alert } from "../ui/alert";
 import { AudioIndicatorBar } from "../AudioIndicator";
 
 import styles from "./styles.module.css";

src/components/ExpiryTimer/index.tsx

@@ -1,5 +1,13 @@
 import React, { useEffect, useState } from "react";
 import { useRoom } from "@daily-co/daily-react";
+import { Timer } from "lucide-react";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/utils/tailwind";
 
 import styles from "./styles.module.css";
 
@@ -38,18 +46,21 @@ const ExpiryTimer: React.FC = () => {
   const isExpired = time.minutes <= 0 && time.seconds <= 0;
 
   return (
-    <div className={styles.expiry}>
-      {isExpired ? (
-        <>Session expired</>
-      ) : (
-        <>
-          <span className={styles.header}>Time remaining</span>
-          <span className={styles.time}>
-            {time.minutes}m {time.seconds.toString().padStart(2, "0")}s
+    <Tooltip>
+      <TooltipTrigger>
+        <div className={styles.expiry}>
+          <Timer size={20} />
+          <span className={cn(styles.time, isExpired && styles.expired)}>
+            {isExpired
+              ? "--:--"
+              : `${time.minutes}m ${time.seconds.toString().padStart(2, "0")}s`}
           </span>
-        </>
-      )}
-    </div>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Remaining session time before expiry</p>
+      </TooltipContent>
+    </Tooltip>
   );
 };
 

src/components/ExpiryTimer/styles.module.css

@@ -1,18 +1,24 @@
 .expiry {
   margin-left: auto;
   display: flex;
-  flex-flow: column wrap;
-  font-size: var(--font-size-sm);
+  flex-flow: row nowrap;
+  font-size: theme(fontSize.sm);
+  background-color: theme(colors.primary.100);
+  border-radius: theme(borderRadius.lg);
+  padding: theme(spacing.2) theme(spacing.3);
+  border-top: 1px solid theme(colors.primary.200);
+
+  svg {
+    color: theme(colors.primary.500);
+  }
 }
 
-.header {
-  font-size: var(--font-size-xs);
-  font-family: var(--font-mono);
-  text-transform: uppercase;
-  letter-spacing: 0.7px;
-  color: var(--color-gray-600);
+.expired {
+  color: theme(colors.primary.400);
 }
 
 .time {
-  font-weight: 600;
+  font-weight: theme(fontWeight.semibold);
+  letter-spacing: theme(letterSpacing.wider);
+  width: 60px;
 }

src/components/Session/index.tsx

@@ -10,7 +10,7 @@ import {
 import { LineChart, LogOut, Settings } from "lucide-react";
 
 import StatsAggregator from "../../utils/stats_aggregator";
-import { Button } from "../button";
+import { Button } from "../ui/button";
 import DeviceSelect from "../DeviceSelect";
 import Stats from "../Stats";
 import UserMicBubble from "../UserMicBubble";

src/components/Stats/index.tsx

@@ -8,7 +8,7 @@ import {
 import { DailyEventObjectAppMessage } from "@daily-co/daily-js";
 import { useAppMessage } from "@daily-co/daily-react";
 
-import { Button } from "../button";
+import { Button } from "../ui/button";
 
 import styles from "./styles.module.css";
 

src/components/UserMicBubble/styles.module.css

@@ -37,15 +37,12 @@
 @keyframes pulse {
   0% {
     outline-width: 6px;
-    @apply outline-teal-500/10;
   }
   50% {
     outline-width: 24px;
-    @apply outline-teal-500/50;
   }
   100% {
     outline-width: 6px;
-    @apply outline-teal-500/10;
   }
 }
 

src/components/logo.tsx

@@ -1,22 +1,22 @@
 import React from "react";
 
-const Logo: React.FC = () => {
+const Logo: React.FC<{ className: string }> = ({ className }) => {
   return (
     <svg
       width="332"
       height="192"
       viewBox="0 0 332 192"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className="logo"
+      className={className}
     >
       <path
         d="M45.7718 0.769635C50.4477 -0.990844 55.7252 0.330188 59.0204 4.08595L101.936 53H230.064L272.98 4.08595C276.275 0.330188 281.552 -0.990844 286.228 0.769635C290.904 2.53011 294 7.00367 294 12V120H332V144H270V43.8728L244.52 72.9141C242.242 75.5111 238.955 77 235.5 77H96.5C93.0452 77 89.7581 75.5111 87.4796 72.9141L62 43.8728V144H0V120H38V12C38 7.00367 41.0958 2.53011 45.7718 0.769635Z"
         fill="black"
       />
       <path d="M270 168H332V192H270V168Z" fill="black" />
       <path d="M0 168H62V192H0V168Z" fill="black" />
-      <g id="eyes_1">
+      <g>
         <path
           d="M128 128C128 136.837 120.837 144 112 144C103.163 144 96 136.837 96 128C96 119.164 103.163 112 112 112C120.837 112 128 119.164 128 128Z"
           fill="black"
@@ -27,7 +27,7 @@ const Logo: React.FC = () => {
         />
       </g>
 
-      <g id="eyes_2" visibility="hidden">
+      <g>
         <path
           d="M128 128C128 136.837 120.837 144 112 144C103.163 144 96 136.837 96 128C96 119.163 103.163 112 112 112C120.837 112 128 119.163 128 128Z"
           stroke="black"