From 43b4eaaf8f79d9942b8ad7f7c94e65ec53d5ea1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20R=C3=B6ssner?= <jakob.roessner@outlook.de>
Date: Fri, 25 Oct 2024 18:08:06 +1100
Subject: [PATCH] fix: improved error handling on sign in on /plaground page

---
 app/playground/page.tsx  | 505 +++++++++++++++++++++------------------
 components/ui/dialog.tsx | 122 ++++++++++
 convex/users.ts          |   8 +-
 package.json             |   1 +
 4 files changed, 395 insertions(+), 241 deletions(-)
 create mode 100644 components/ui/dialog.tsx

diff --git a/app/playground/page.tsx b/app/playground/page.tsx
index 483c1ec..aa1f15c 100644
--- a/app/playground/page.tsx
+++ b/app/playground/page.tsx
@@ -9,6 +9,7 @@ import {
   ChevronUp,
   UploadIcon,
 } from "lucide-react";
+import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { Map } from "@/components/Map";
 import { MapStatus } from "@/components/MapStatus";
@@ -16,9 +17,17 @@ import { ModelSelector } from "@/components/ModelSelector";
 import { Visualizer } from "@/components/Visualizer";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { useToast } from "@/components/ui/use-toast";
 import { api } from "@/convex/_generated/api";
 import { Id } from "@/convex/_generated/dataModel";
+import { SIGN_IN_ERROR_MESSAGE } from "@/convex/users";
 import { errorMessage } from "@/lib/utils";
 import { ZombieSurvival } from "@/simulators/zombie-survival";
 
@@ -53,6 +62,7 @@ export default function PlaygroundPage() {
   const [userPlaying, setUserPlaying] = useState(false);
   const [userSolution, setUserSolution] = useState<string[][]>([]);
   const [visualizingUserSolution, setVisualizingUserSolution] = useState(false);
+  const [openSignInModal, setOpenSignInModal] = useState(false);
 
   async function handlePublish() {
     if (!ZombieSurvival.mapHasZombies(map)) {
@@ -73,10 +83,14 @@ export default function PlaygroundPage() {
         description: "Map submitted successfully!",
       });
     } catch (error) {
-      toast({
-        description: errorMessage(error),
-        variant: "destructive",
-      });
+      if (errorMessage(error).includes(SIGN_IN_ERROR_MESSAGE)) {
+        setOpenSignInModal(true);
+      } else {
+        toast({
+          description: errorMessage(error),
+          variant: "destructive",
+        });
+      }
     } finally {
       setPublishing(false);
     }
@@ -137,18 +151,6 @@ export default function PlaygroundPage() {
     window.localStorage.setItem(STORAGE_MAP_KEY, JSON.stringify(cleanedMap));
   }
 
-  function handleReset() {
-    handleChangeMap([]);
-
-    setSolution(null);
-    setReasoning(null);
-    setPublishing(false);
-    setSimulating(false);
-    setUserPlaying(false);
-    setUserSolution([]);
-    setVisualizingUserSolution(false);
-  }
-
   function handleUserPlay() {
     if (!ZombieSurvival.mapHasZombies(map)) {
       alert("Add player to the map first");
@@ -238,248 +240,275 @@ export default function PlaygroundPage() {
   const visualizing = solution !== null || visualizingUserSolution;
 
   return (
-    <div className="container mx-auto min-h-screen py-12 pb-24">
-      <h1 className="mb-6 text-center text-3xl font-bold">Playground</h1>
-
-      <div className="flex gap-8">
-        {/* Left side: Grid */}
-        <div className="flex-1">
-          <Card className="p-8">
-            {!visualizing && !userPlaying && (
-              <p className="mb-12 text-sm">
-                Click on the board to place or remove units. Use the buttons
-                below to switch between unit types.
-              </p>
-            )}
-            {!visualizing && userPlaying && (
-              <p className="mb-6 text-sm text-gray-600">
-                Place a player (P) and blocks (B) on the board to create your
-                escape route. Click to toggle between empty, player, and block.
-              </p>
-            )}
-            <div
-              className={`flex justify-center ${visualizing ? "pt-[28px]" : ""} relative`}
-            >
-              {visualizing && (
-                <Visualizer
-                  autoReplay
-                  autoStart
-                  controls={false}
-                  map={visualizingUserSolution ? userSolution : solution!}
-                />
+    <>
+      <Dialog
+        open={openSignInModal}
+        onOpenChange={(open) => setOpenSignInModal(open)}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>For this action you need to be signed in!</DialogTitle>
+            <DialogDescription>
+              In order to submit a map you need to be signed in.
+            </DialogDescription>
+            <div className="flex w-full justify-center">
+              <Link href="/auth">
+                <Button variant="outline" type="button">
+                  Sign In
+                </Button>
+              </Link>
+            </div>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+      <div className="container mx-auto min-h-screen py-12 pb-24">
+        <h1 className="mb-6 text-center text-3xl font-bold">Playground</h1>
+
+        <div className="flex gap-8">
+          {/* Left side: Grid */}
+          <div className="flex-1">
+            <Card className="p-8">
+              {!visualizing && !userPlaying && (
+                <p className="mb-12 text-sm">
+                  Click on the board to place or remove units. Use the buttons
+                  below to switch between unit types.
+                </p>
               )}
-              {!visualizing && (
-                <div className="relative">
-                  <Map map={userPlaying ? userSolution : map} />
-                  <div
-                    className="absolute inset-0 grid"
-                    style={{
-                      gridTemplateColumns: `repeat(${map[0]?.length || 0}, minmax(0, 1fr))`,
-                      gridTemplateRows: `repeat(${map.length || 0}, minmax(0, 1fr))`,
-                    }}
-                  >
-                    {(userPlaying ? userSolution : map).map((row, y) =>
-                      row.map((cell, x) => (
-                        <div
-                          key={`${x}-${y}`}
-                          className={`${
-                            cell === " " ||
-                            cell === "Z" ||
-                            cell === "R" ||
-                            cell === "P" ||
-                            cell === "B"
-                              ? "z-10 cursor-pointer hover:border-2 hover:border-dashed hover:border-slate-300"
-                              : ""
-                          } border border-transparent`}
-                          onClick={() => {
-                            const newMap = userPlaying
-                              ? [...userSolution]
-                              : [...map];
-                            if (userPlaying) {
-                              // Count existing players and blocks
-                              const playerCount = newMap
-                                .flat()
-                                .filter((c) => c === "P").length;
-                              const blockCount = newMap
-                                .flat()
-                                .filter((c) => c === "B").length;
-
-                              // Toggle logic for play mode
-                              if (cell === " ") {
-                                if (playerCount === 0) {
-                                  newMap[y][x] = "P";
-                                } else if (blockCount < 2) {
-                                  newMap[y][x] = "B";
+              {!visualizing && userPlaying && (
+                <p className="mb-6 text-sm text-gray-600">
+                  Place a player (P) and blocks (B) on the board to create your
+                  escape route. Click to toggle between empty, player, and
+                  block.
+                </p>
+              )}
+              <div
+                className={`flex justify-center ${visualizing ? "pt-[28px]" : ""} relative`}
+              >
+                {visualizing && (
+                  <Visualizer
+                    autoReplay
+                    autoStart
+                    controls={false}
+                    map={visualizingUserSolution ? userSolution : solution!}
+                  />
+                )}
+                {!visualizing && (
+                  <div className="relative">
+                    <Map map={userPlaying ? userSolution : map} />
+                    <div
+                      className="absolute inset-0 grid"
+                      style={{
+                        gridTemplateColumns: `repeat(${map[0]?.length || 0}, minmax(0, 1fr))`,
+                        gridTemplateRows: `repeat(${map.length || 0}, minmax(0, 1fr))`,
+                      }}
+                    >
+                      {(userPlaying ? userSolution : map).map((row, y) =>
+                        row.map((cell, x) => (
+                          <div
+                            key={`${x}-${y}`}
+                            className={`${
+                              cell === " " ||
+                              cell === "Z" ||
+                              cell === "R" ||
+                              cell === "P" ||
+                              cell === "B"
+                                ? "z-10 cursor-pointer hover:border-2 hover:border-dashed hover:border-slate-300"
+                                : ""
+                            } border border-transparent`}
+                            onClick={() => {
+                              const newMap = userPlaying
+                                ? [...userSolution]
+                                : [...map];
+                              if (userPlaying) {
+                                // Count existing players and blocks
+                                const playerCount = newMap
+                                  .flat()
+                                  .filter((c) => c === "P").length;
+                                const blockCount = newMap
+                                  .flat()
+                                  .filter((c) => c === "B").length;
+
+                                // Toggle logic for play mode
+                                if (cell === " ") {
+                                  if (playerCount === 0) {
+                                    newMap[y][x] = "P";
+                                  } else if (blockCount < 2) {
+                                    newMap[y][x] = "B";
+                                  }
+                                } else if (cell === "P") {
+                                  newMap[y][x] = " ";
+                                } else if (cell === "B") {
+                                  newMap[y][x] = " ";
                                 }
-                              } else if (cell === "P") {
-                                newMap[y][x] = " ";
-                              } else if (cell === "B") {
-                                newMap[y][x] = " ";
+                                userPlaying
+                                  ? setUserSolution(newMap)
+                                  : handleChangeMap(newMap);
+                              } else {
+                                // Toggle between empty, zombie, and rock for edit mode
+                                if (cell === " ") newMap[y][x] = "Z";
+                                else if (cell === "Z") newMap[y][x] = "R";
+                                else newMap[y][x] = " ";
                               }
                               userPlaying
                                 ? setUserSolution(newMap)
                                 : handleChangeMap(newMap);
-                            } else {
-                              // Toggle between empty, zombie, and rock for edit mode
-                              if (cell === " ") newMap[y][x] = "Z";
-                              else if (cell === "Z") newMap[y][x] = "R";
-                              else newMap[y][x] = " ";
-                            }
-                            userPlaying
-                              ? setUserSolution(newMap)
-                              : handleChangeMap(newMap);
-                          }}
-                        />
-                      )),
+                            }}
+                          />
+                        )),
+                      )}
+                    </div>
+
+                    {/* Grid expansion controls */}
+                    {!userPlaying && !visualizing && (
+                      <>
+                        <div className="absolute left-1/2 top-0 flex -translate-x-1/2 -translate-y-full gap-4">
+                          <button
+                            onClick={handleIncreaseUp}
+                            aria-label="One more row on top"
+                          >
+                            <ChevronUp />
+                          </button>
+                          <button
+                            onClick={handleDecreaseUp}
+                            aria-label="One less row on top"
+                          >
+                            <ChevronDown />
+                          </button>
+                        </div>
+                        <div className="absolute left-0 top-1/2 flex -translate-x-full -translate-y-1/2 flex-col gap-4">
+                          <button
+                            onClick={handleIncreaseLeft}
+                            aria-label="One more column on left side"
+                          >
+                            <ChevronLeft />
+                          </button>
+                          <button
+                            onClick={handleDecreaseLeft}
+                            aria-label="One less column on left side"
+                          >
+                            <ChevronRight />
+                          </button>
+                        </div>
+                        <div className="absolute right-0 top-1/2 flex -translate-y-1/2 translate-x-full flex-col gap-4">
+                          <button
+                            onClick={handleIncreaseRight}
+                            aria-label="One more column on right side"
+                          >
+                            <ChevronRight />
+                          </button>
+                          <button
+                            onClick={handleDecreaseRight}
+                            aria-label="One less column on right side"
+                          >
+                            <ChevronLeft />
+                          </button>
+                        </div>
+                        <div className="absolute bottom-0 left-1/2 flex -translate-x-1/2 translate-y-full gap-4">
+                          <button
+                            onClick={handleIncreaseDown}
+                            aria-label="One more row on bottom"
+                          >
+                            <ChevronDown />
+                          </button>
+                          <button
+                            onClick={handleDecreaseDown}
+                            aria-label="One less row on bottom"
+                          >
+                            <ChevronUp />
+                          </button>
+                        </div>
+                      </>
                     )}
                   </div>
+                )}
+              </div>
+            </Card>
+          </div>
 
-                  {/* Grid expansion controls */}
-                  {!userPlaying && !visualizing && (
-                    <>
-                      <div className="absolute left-1/2 top-0 flex -translate-x-1/2 -translate-y-full gap-4">
-                        <button
-                          onClick={handleIncreaseUp}
-                          aria-label="One more row on top"
-                        >
-                          <ChevronUp />
-                        </button>
-                        <button
-                          onClick={handleDecreaseUp}
-                          aria-label="One less row on top"
-                        >
-                          <ChevronDown />
-                        </button>
-                      </div>
-                      <div className="absolute left-0 top-1/2 flex -translate-x-full -translate-y-1/2 flex-col gap-4">
-                        <button
-                          onClick={handleIncreaseLeft}
-                          aria-label="One more column on left side"
-                        >
-                          <ChevronLeft />
-                        </button>
-                        <button
-                          onClick={handleDecreaseLeft}
-                          aria-label="One less column on left side"
-                        >
-                          <ChevronRight />
-                        </button>
-                      </div>
-                      <div className="absolute right-0 top-1/2 flex -translate-y-1/2 translate-x-full flex-col gap-4">
-                        <button
-                          onClick={handleIncreaseRight}
-                          aria-label="One more column on right side"
-                        >
-                          <ChevronRight />
-                        </button>
-                        <button
-                          onClick={handleDecreaseRight}
-                          aria-label="One less column on right side"
-                        >
-                          <ChevronLeft />
-                        </button>
-                      </div>
-                      <div className="absolute bottom-0 left-1/2 flex -translate-x-1/2 translate-y-full gap-4">
-                        <button
-                          onClick={handleIncreaseDown}
-                          aria-label="One more row on bottom"
-                        >
-                          <ChevronDown />
-                        </button>
-                        <button
-                          onClick={handleDecreaseDown}
-                          aria-label="One less row on bottom"
-                        >
-                          <ChevronUp />
-                        </button>
-                      </div>
-                    </>
+          {/* Right side: Action Panel */}
+          <Card className="w-[400px] p-8">
+            <div className="flex flex-col gap-4">
+              {userPlaying || solution !== null ? (
+                <>
+                  <Button
+                    variant="link"
+                    className="self-start p-0 text-sm"
+                    onClick={handleEdit}
+                  >
+                    <ChevronLeft className="mr-1 h-4 w-4" />
+                    Back to Edit
+                  </Button>
+                  {userPlaying && (
+                    <Button
+                      className="w-full"
+                      onClick={
+                        visualizingUserSolution
+                          ? handleStopVisualization
+                          : handleVisualize
+                      }
+                      type="button"
+                    >
+                      {visualizingUserSolution ? "Stop" : "Run Simulation"}
+                    </Button>
                   )}
-                </div>
-              )}
-            </div>
-          </Card>
-        </div>
-
-        {/* Right side: Action Panel */}
-        <Card className="w-[400px] p-8">
-          <div className="flex flex-col gap-4">
-            {userPlaying || solution !== null ? (
-              <>
-                <Button
-                  variant="link"
-                  className="self-start p-0 text-sm"
-                  onClick={handleEdit}
-                >
-                  <ChevronLeft className="mr-1 h-4 w-4" />
-                  Back to Edit
-                </Button>
-                {userPlaying && (
+                </>
+              ) : (
+                <>
                   <Button
-                    className="w-full"
-                    onClick={
-                      visualizingUserSolution
-                        ? handleStopVisualization
-                        : handleVisualize
-                    }
+                    className="gap-1"
+                    disabled={publishing}
+                    onClick={handlePublish}
                     type="button"
+                    variant="secondary"
                   >
-                    {visualizingUserSolution ? "Stop" : "Run Simulation"}
+                    <UploadIcon size={16} />
+                    <span>{publishing ? "Submitting..." : "Submit Map"}</span>
                   </Button>
-                )}
-              </>
-            ) : (
-              <>
-                <Button
-                  className="gap-1"
-                  disabled={publishing}
-                  onClick={handlePublish}
-                  type="button"
-                  variant="secondary"
-                >
-                  <UploadIcon size={16} />
-                  <span>{publishing ? "Submitting..." : "Submit Map"}</span>
-                </Button>
 
-                <Button
-                  disabled={!(solution === null && !simulating && !userPlaying)}
-                  onClick={handleUserPlay}
-                  type="button"
-                >
-                  Play Map
-                </Button>
-              </>
-            )}
-
-            {error !== null && <p className="text-sm text-red-500">{error}</p>}
-            {visualizingUserSolution && <MapStatus map={userSolution} />}
-            {reasoning !== null && (
-              <div className="flex flex-col gap-0">
-                <MapStatus map={solution!} />
-                <p className="text-sm">{reasoning}</p>
-              </div>
-            )}
-
-            {isAdmin && !userPlaying && solution === null && (
-              <>
-                <hr className="my-4 border-gray-200" />
-                <div className="flex flex-col gap-4">
-                  <p>Model (~$0.002)</p>
-                  <ModelSelector onChange={handleChangeModel} value={model} />
                   <Button
-                    className="w-full"
-                    disabled={model === "" || simulating}
-                    onClick={handleSimulate}
+                    disabled={
+                      !(solution === null && !simulating && !userPlaying)
+                    }
+                    onClick={handleUserPlay}
                     type="button"
                   >
-                    {simulating ? "Simulating..." : "Play With AI"}
+                    Play Map
                   </Button>
+                </>
+              )}
+
+              {error !== null && (
+                <p className="text-sm text-red-500">{error}</p>
+              )}
+              {visualizingUserSolution && <MapStatus map={userSolution} />}
+              {reasoning !== null && (
+                <div className="flex flex-col gap-0">
+                  <MapStatus map={solution!} />
+                  <p className="text-sm">{reasoning}</p>
                 </div>
-              </>
-            )}
-          </div>
-        </Card>
+              )}
+
+              {isAdmin && !userPlaying && solution === null && (
+                <>
+                  <hr className="my-4 border-gray-200" />
+                  <div className="flex flex-col gap-4">
+                    <p>Model (~$0.002)</p>
+                    <ModelSelector onChange={handleChangeModel} value={model} />
+                    <Button
+                      className="w-full"
+                      disabled={model === "" || simulating}
+                      onClick={handleSimulate}
+                      type="button"
+                    >
+                      {simulating ? "Simulating..." : "Play With AI"}
+                    </Button>
+                  </div>
+                </>
+              )}
+            </div>
+          </Card>
+        </div>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
new file mode 100644
index 0000000..95b0d38
--- /dev/null
+++ b/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { Cross2Icon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/convex/users.ts b/convex/users.ts
index 30dbeb7..396a284 100644
--- a/convex/users.ts
+++ b/convex/users.ts
@@ -4,8 +4,8 @@ import {
   customMutation,
   customQuery,
 } from "convex-helpers/server/customFunctions";
-import { mutation, query } from "./_generated/server";
 import { ConvexError } from "convex/values";
+import { mutation, query } from "./_generated/server";
 
 export const viewer = query({
   args: {},
@@ -101,6 +101,8 @@ export const adminMutationBuilder = customMutation(
   }),
 );
 
+export const SIGN_IN_ERROR_MESSAGE =
+  "You must be signed in to perform this action";
 
 export const authenticatedMutation = customMutation(
   mutation,
@@ -108,11 +110,11 @@ export const authenticatedMutation = customMutation(
     const userId = await getAuthUserId(ctx);
 
     if (userId === null) {
-      throw new ConvexError("You must be signed in to perform this action");
+      throw new ConvexError(SIGN_IN_ERROR_MESSAGE);
     }
 
     return {
       userId,
     };
   }),
-);        
+);
diff --git a/package.json b/package.json
index 50b2a2a..670db83 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@google/generative-ai": "^0.21.0",
     "@icons-pack/react-simple-icons": "^10.1.0",
     "@mistralai/mistralai": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-select": "^2.1.2",