feat: add JSON and video error toasters

This commit ensures that users are aware if there has been an error trying
to get their camara devices or parsing of the workflow json.

Author: rickstaa

ui/package-lock.json

@@ -15,6 +15,7 @@
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-toast": "^1.2.6",
     "@radix-ui/react-tooltip": "^1.1.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

ui/package.json

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
-import { Toaster } from "@/components/ui/sonner";
+import { Toaster } from "@/components/ui/toaster";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",

ui/src/app/layout.tsx

@@ -33,6 +33,7 @@ import {
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { Select } from "./ui/select";
+import { toast } from "sonner";
 
 export interface StreamConfig {
   streamUrl: string;
@@ -156,8 +157,11 @@ function ConfigForm({ config, onSubmit }: ConfigFormProps) {
       if (videoDevices.length > 0) {
         setSelectedDevice((curr) => curr || videoDevices[0].deviceId);
       }
-    } catch (err) {
-      console.error("Failed to get video devices");
+    } catch (error){
+      console.log(`Failed to get video devices: ${error}`);
+      toast.error("Failed to get video devices", {
+        description: "Please make sure your camera is connected and enabled.",
+      });
     }
   }, []);
 
@@ -193,8 +197,11 @@ function ConfigForm({ config, onSubmit }: ConfigFormProps) {
       const parsedPrompt = JSON.parse(text);
       setPrompt(parsedPrompt);
       setOriginalPrompt(parsedPrompt);
-    } catch (err) {
-      console.error(err);
+    } catch (error) {
+      console.error(`Failed to parse prompt: ${error}`);
+      toast.error("Failed to Parse Workflow", {
+        description: "Please upload a valid JSON file.",
+      });
     }
   };
 

ui/src/components/settings.tsx

@@ -0,0 +1,42 @@
+/**
+ * @file Contains a Toaster component that can be used to trigger toast notifications
+ * from anywhere in the app.
+ */
+"use client";
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+/**
+ * Toaster component for displaying toast notifications using the `sonner` library.
+ *
+ * Add to the layout to trigger notifications anywhere in the app using the `toast`
+ * method.
+ *
+ * @param props - The props for the Toaster component.
+ */
+const Toaster = ({ ...props }: ToasterProps): JSX.Element => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };