From 13d111aecb96c29d10db03289736c2889d5e02c0 Mon Sep 17 00:00:00 2001
From: Jules Belveze <32683010+JulesBelveze@users.noreply.github.com>
Date: Fri, 17 Jan 2025 10:42:22 +0100
Subject: [PATCH] [front] - refacto: `NewDialog` final wave (#10049)

* [front/components/spaces] - refactor: improve data source deletion confirmation UI

 - Modify the UI layout to include a list with bullet points showing which data sources are in use
 - Enhance the confirmation prompt with bold text for emphasis

[front/hooks] - feature: update useAwaitableDialog to use new dialog components

 - Implement updated dialog infrastructure with improved UI and accessibility support
 - Add customization options for dialog buttons including labels and variants
 - Ensure proper handling of dismiss dialog actions by treating them as a cancel event

* [misc] - refactor: update dialog components with new design system

 - Replaced custom dialog components with new design system dialogs across various components
 - Removed old dialog components from the codebase as they are no longer used
 - Updated dialog components to use new `NewDialog` patterns including headers, footers, and content for improved consistency
 - Migrated to using updated icons and spinner components from `@dust-tt/sparkle` library to align with the new design system
---
 .../poke/plugins/RunPluginDialog.tsx          | 132 +++++++++---------
 front/components/poke/shadcn/ui/command.tsx   |  18 +--
 front/components/poke/shadcn/ui/dialog.tsx    | 120 ----------------
 .../subscriptions/EnterpriseUpgradeDialog.tsx |  46 +++---
 .../EditSpaceManagedDatasourcesViews.tsx      |  38 ++---
 front/hooks/useAwaitableDialog.tsx            |  92 +++++++++---
 front/pages/poke/templates/[tId].tsx          |  34 +++--
 7 files changed, 211 insertions(+), 269 deletions(-)
 delete mode 100644 front/components/poke/shadcn/ui/dialog.tsx

diff --git a/front/components/poke/plugins/RunPluginDialog.tsx b/front/components/poke/plugins/RunPluginDialog.tsx
index c308bc09d8ee..6896e5d8f91a 100644
--- a/front/components/poke/plugins/RunPluginDialog.tsx
+++ b/front/components/poke/plugins/RunPluginDialog.tsx
@@ -1,4 +1,12 @@
-import { Spinner } from "@dust-tt/sparkle";
+import {
+  NewDialog,
+  NewDialogContainer,
+  NewDialogContent,
+  NewDialogDescription,
+  NewDialogHeader,
+  NewDialogTitle,
+  Spinner,
+} from "@dust-tt/sparkle";
 import type { PluginWorkspaceResource } from "@dust-tt/types";
 import { AlertCircle } from "lucide-react";
 import { useCallback, useState } from "react";
@@ -9,10 +17,6 @@ import {
   PokeAlertDescription,
   PokeAlertTitle,
 } from "@app/components/poke/shadcn/ui/alert";
-import {
-  PokeDialog,
-  PokeDialogContent,
-} from "@app/components/poke/shadcn/ui/dialog";
 import type { PluginListItem, PluginResponse } from "@app/lib/api/poke/types";
 import { usePokePluginManifest, useRunPokePlugin } from "@app/poke/swr/plugins";
 
@@ -63,64 +67,66 @@ export function RunPluginDialog({
   );
 
   return (
-    <PokeDialog open={true} onOpenChange={handleClose}>
-      <PokeDialogContent className="w-auto bg-structure-50 sm:min-w-[600px] sm:max-w-[1000px]">
-        <div className="flex flex-col gap-1">
-          <h2>Run {plugin.name} plugin</h2>
-          <p className="text-wrap w-auto text-xs text-slate-400">
-            {plugin.description}
-          </p>
-        </div>
-        {isLoading ? (
-          <Spinner />
-        ) : !manifest ? (
-          <PokeAlert variant="destructive">
-            <AlertCircle className="h-4 w-4" />
-            <PokeAlertTitle>Error</PokeAlertTitle>
-            <PokeAlertDescription>
-              Plugin could not be loaded.
-            </PokeAlertDescription>
-          </PokeAlert>
-        ) : (
-          <>
-            {error && (
-              <PokeAlert variant="destructive">
-                <PokeAlertTitle>Error</PokeAlertTitle>
-                <PokeAlertDescription>{error}</PokeAlertDescription>
-              </PokeAlert>
-            )}
-            {result && result.display === "text" && (
-              <PokeAlert variant="success">
-                <PokeAlertTitle>Success</PokeAlertTitle>
-                <PokeAlertDescription>
-                  {result.value} - Make sure to reload.
-                </PokeAlertDescription>
-              </PokeAlert>
-            )}
-            {result && result.display === "json" && (
-              <div className="mb-4 mt-4">
-                <div className="mb-2 font-medium">Result:</div>
-                <div className="max-h-[400px] overflow-auto rounded-lg bg-slate-800 p-4">
-                  <pre className="font-mono whitespace-pre-wrap break-words text-sm text-slate-200">
-                    {JSON.stringify(result.value, null, 2)}
-                  </pre>
+    <NewDialog open={true} onOpenChange={handleClose}>
+      <NewDialogContent className="w-auto bg-structure-50 sm:min-w-[600px] sm:max-w-[1000px]">
+        <NewDialogHeader>
+          <NewDialogTitle>Run {plugin.name} plugin</NewDialogTitle>
+          <NewDialogDescription>{plugin.description}</NewDialogDescription>
+        </NewDialogHeader>
+        <NewDialogContainer>
+          {isLoading ? (
+            <Spinner />
+          ) : !manifest ? (
+            <PokeAlert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <PokeAlertTitle>Error</PokeAlertTitle>
+              <PokeAlertDescription>
+                Plugin could not be loaded.
+              </PokeAlertDescription>
+            </PokeAlert>
+          ) : (
+            <>
+              {error && (
+                <PokeAlert variant="destructive">
+                  <PokeAlertTitle>Error</PokeAlertTitle>
+                  <PokeAlertDescription>{error}</PokeAlertDescription>
+                </PokeAlert>
+              )}
+              {result && result.display === "text" && (
+                <PokeAlert variant="success">
+                  <PokeAlertTitle>Success</PokeAlertTitle>
+                  <PokeAlertDescription>
+                    {result.value} - Make sure to reload.
+                  </PokeAlertDescription>
+                </PokeAlert>
+              )}
+              {result && result.display === "json" && (
+                <div className="mb-4 mt-4">
+                  <div className="mb-2 font-medium">Result:</div>
+                  <div className="max-h-[400px] overflow-auto rounded-lg bg-slate-800 p-4">
+                    <pre className="font-mono whitespace-pre-wrap break-words text-sm text-slate-200">
+                      {JSON.stringify(result.value, null, 2)}
+                    </pre>
+                  </div>
                 </div>
-              </div>
-            )}
-            <PluginForm
-              disabled={result !== null}
-              manifest={manifest}
-              onSubmit={onSubmit}
-            />
-            {manifest.warning && (
-              <PokeAlert variant="destructive">
-                <PokeAlertTitle>Warning</PokeAlertTitle>
-                <PokeAlertDescription>{manifest.warning}</PokeAlertDescription>
-              </PokeAlert>
-            )}
-          </>
-        )}
-      </PokeDialogContent>
-    </PokeDialog>
+              )}
+              <PluginForm
+                disabled={result !== null}
+                manifest={manifest}
+                onSubmit={onSubmit}
+              />
+              {manifest.warning && (
+                <PokeAlert variant="destructive">
+                  <PokeAlertTitle>Warning</PokeAlertTitle>
+                  <PokeAlertDescription>
+                    {manifest.warning}
+                  </PokeAlertDescription>
+                </PokeAlert>
+              )}
+            </>
+          )}
+        </NewDialogContainer>
+      </NewDialogContent>
+    </NewDialog>
   );
 }
diff --git a/front/components/poke/shadcn/ui/command.tsx b/front/components/poke/shadcn/ui/command.tsx
index 5f131d058fe4..423d95773334 100644
--- a/front/components/poke/shadcn/ui/command.tsx
+++ b/front/components/poke/shadcn/ui/command.tsx
@@ -1,16 +1,16 @@
 "use client";
 
-import { MagnifyingGlassIcon } from "@dust-tt/sparkle";
+import {
+  MagnifyingGlassIcon,
+  NewDialog,
+  NewDialogContent,
+} from "@dust-tt/sparkle";
 import type { DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import Link from "next/link";
 import * as React from "react";
 
 import { cn } from "@app/components/poke/shadcn/lib/utils";
-import {
-  PokeDialog,
-  PokeDialogContent,
-} from "@app/components/poke/shadcn/ui/dialog";
 
 const CommandContext = React.createContext<{
   selectedIndex: number;
@@ -117,16 +117,16 @@ const CommandDialog = ({
 
   return (
     <CommandContext.Provider value={commandContext}>
-      <PokeDialog onOpenChange={onOpenChange} open={open} {...props}>
-        <PokeDialogContent className={cn("overflow-hidden p-0", className)}>
+      <NewDialog onOpenChange={onOpenChange} open={open} {...props}>
+        <NewDialogContent className={cn("overflow-hidden p-0", className)}>
           <Command
             shouldFilter={shouldFilter}
             className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
           >
             {children}
           </Command>
-        </PokeDialogContent>
-      </PokeDialog>
+        </NewDialogContent>
+      </NewDialog>
     </CommandContext.Provider>
   );
 };
diff --git a/front/components/poke/shadcn/ui/dialog.tsx b/front/components/poke/shadcn/ui/dialog.tsx
deleted file mode 100644
index 2bf3974be804..000000000000
--- a/front/components/poke/shadcn/ui/dialog.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "@app/components/poke/shadcn/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="data-[state=open]:bg-accent 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]:text-muted-foreground">
-        <XIcon 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 as PokeDialog,
-  DialogClose as PokeDialogClose,
-  DialogContent as PokeDialogContent,
-  DialogDescription as PokeDialogDescription,
-  DialogFooter as PokeDialogFooter,
-  DialogHeader as PokeDialogHeader,
-  DialogOverlay as PokeDialogOverlay,
-  DialogPortal as PokeDialogPortal,
-  DialogTitle as PokeDialogTitle,
-  DialogTrigger as PokeDialogTrigger,
-};
diff --git a/front/components/poke/subscriptions/EnterpriseUpgradeDialog.tsx b/front/components/poke/subscriptions/EnterpriseUpgradeDialog.tsx
index a861171b3ca3..acde59fb5d3a 100644
--- a/front/components/poke/subscriptions/EnterpriseUpgradeDialog.tsx
+++ b/front/components/poke/subscriptions/EnterpriseUpgradeDialog.tsx
@@ -1,4 +1,13 @@
-import { Spinner } from "@dust-tt/sparkle";
+import {
+  NewDialog,
+  NewDialogContent,
+  NewDialogDescription,
+  NewDialogFooter,
+  NewDialogHeader,
+  NewDialogTitle,
+  NewDialogTrigger,
+  Spinner,
+} from "@dust-tt/sparkle";
 import type { EnterpriseUpgradeFormType, WorkspaceType } from "@dust-tt/types";
 import { EnterpriseUpgradeFormSchema, removeNulls } from "@dust-tt/types";
 import { ioTsResolver } from "@hookform/resolvers/io-ts";
@@ -7,15 +16,6 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { PokeButton } from "@app/components/poke/shadcn/ui/button";
-import {
-  PokeDialog,
-  PokeDialogContent,
-  PokeDialogDescription,
-  PokeDialogFooter,
-  PokeDialogHeader,
-  PokeDialogTitle,
-  PokeDialogTrigger,
-} from "@app/components/poke/shadcn/ui/dialog";
 import { PokeForm } from "@app/components/poke/shadcn/ui/form";
 import {
   InputField,
@@ -95,18 +95,18 @@ export default function EnterpriseUpgradeDialog({
   };
 
   return (
-    <PokeDialog open={open} onOpenChange={setOpen}>
-      <PokeDialogTrigger asChild>
+    <NewDialog open={open} onOpenChange={setOpen}>
+      <NewDialogTrigger asChild>
         <PokeButton variant="outline">🏢 Upgrade to Enterprise</PokeButton>
-      </PokeDialogTrigger>
-      <PokeDialogContent className="bg-structure-50 sm:max-w-[600px]">
-        <PokeDialogHeader>
-          <PokeDialogTitle>Upgrade {owner.name} to Enterprise.</PokeDialogTitle>
-          <PokeDialogDescription>
+      </NewDialogTrigger>
+      <NewDialogContent className="bg-structure-50 sm:max-w-[600px]">
+        <NewDialogHeader>
+          <NewDialogTitle>Upgrade {owner.name} to Enterprise.</NewDialogTitle>
+          <NewDialogDescription>
             Select the enterprise plan and provide the Stripe subscription id of
             the customer.
-          </PokeDialogDescription>
-        </PokeDialogHeader>
+          </NewDialogDescription>
+        </NewDialogHeader>
         {error && <div className="text-red-500">{error}</div>}
         {isSubmitting && <Spinner />}
         {!isSubmitting && (
@@ -135,18 +135,18 @@ export default function EnterpriseUpgradeDialog({
                   />
                 </div>
               </div>
-              <PokeDialogFooter>
+              <NewDialogFooter>
                 <PokeButton
                   type="submit"
                   className="border-warning-600 bg-warning-500 text-white"
                 >
                   Upgrade
                 </PokeButton>
-              </PokeDialogFooter>
+              </NewDialogFooter>
             </form>
           </PokeForm>
         )}
-      </PokeDialogContent>
-    </PokeDialog>
+      </NewDialogContent>
+    </NewDialog>
   );
 }
diff --git a/front/components/spaces/EditSpaceManagedDatasourcesViews.tsx b/front/components/spaces/EditSpaceManagedDatasourcesViews.tsx
index 27f86566d660..56ba4ae219a7 100644
--- a/front/components/spaces/EditSpaceManagedDatasourcesViews.tsx
+++ b/front/components/spaces/EditSpaceManagedDatasourcesViews.tsx
@@ -125,32 +125,34 @@ export function EditSpaceManagedDataSourcesViews({
         alertDialog: true,
         children: (
           <div className="space-y-4 text-foreground">
-            <p>The following data sources are currently in use:</p>
-
-            {deletedViewsWithUsage.map((view) => (
-              <p key={view.sId} className="font-medium">
-                {getDisplayNameForDataSource(view.dataSource)}{" "}
-                <span className="italic text-muted-foreground">
-                  (used by {view.usage.count} assistant
-                  {view.usage.count > 1 ? "s" : ""})
-                </span>
-              </p>
-            ))}
-
             <ContentMessage
               size="md"
               variant="warning"
               title="Warning"
               icon={InformationCircleIcon}
             >
-              <p>
-                Deleting these data sources will affect the assistants using
-                them. These assistants will no longer have access to this data
-                and may not work as expected.
-              </p>
+              Deleting these data sources will affect the assistants using them.
+              These assistants will no longer have access to this data and may
+              not work as expected.
             </ContentMessage>
 
-            <p>Are you sure you want to remove them?</p>
+            <div>
+              The following data sources are currently in use:
+              <ul className="ml-6 list-disc">
+                {deletedViewsWithUsage.map((view) => (
+                  <li key={view.sId} className="font-medium">
+                    {getDisplayNameForDataSource(view.dataSource)}{" "}
+                    <span className="italic text-muted-foreground">
+                      (used by {view.usage.count} assistant
+                      {view.usage.count > 1 ? "s" : ""})
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div className="font-semibold">
+              Are you sure you want to remove them?
+            </div>
           </div>
         ),
       });
diff --git a/front/hooks/useAwaitableDialog.tsx b/front/hooks/useAwaitableDialog.tsx
index df3355f6aacb..e927f84897c3 100644
--- a/front/hooks/useAwaitableDialog.tsx
+++ b/front/hooks/useAwaitableDialog.tsx
@@ -1,11 +1,23 @@
-import { Dialog } from "@dust-tt/sparkle";
-import type { ComponentProps } from "react";
-import { useState } from "react";
-
-type ShowDialogProps = Omit<
-  ComponentProps<typeof Dialog>,
-  "isOpen" | "onCancel" | "onValidate"
->;
+import type { Button } from "@dust-tt/sparkle";
+import {
+  NewDialog,
+  NewDialogContainer,
+  NewDialogContent,
+  NewDialogFooter,
+  NewDialogHeader,
+  NewDialogTitle,
+} from "@dust-tt/sparkle";
+import React, { useState } from "react";
+
+type ShowDialogProps = {
+  title: string;
+  children: React.ReactNode;
+  alertDialog?: boolean;
+  validateLabel?: string;
+  validateVariant?: React.ComponentProps<typeof Button>["variant"];
+  cancelLabel?: string;
+};
+
 interface DialogState {
   isOpen: boolean;
   props: ShowDialogProps | null;
@@ -38,18 +50,62 @@ export function useAwaitableDialog() {
     setDialogState({ isOpen: false, props: null });
   };
 
-  const DialogRenderer = () =>
-    dialogState.props ? (
-      <Dialog
-        {...dialogState.props}
-        isOpen={dialogState.isOpen}
-        onCancel={handleCancel}
-        onValidate={handleConfirm}
-      />
-    ) : null;
+  const AwaitableDialog = () => {
+    if (!dialogState.props) {
+      return null;
+    }
+
+    const {
+      title,
+      children,
+      alertDialog,
+      validateLabel,
+      validateVariant,
+      cancelLabel,
+    } = dialogState.props;
+
+    return (
+      <NewDialog
+        open={dialogState.isOpen}
+        // If user dismisses the dialog some other way (e.g. clicking outside when not alert), treat it as cancel:
+        onOpenChange={(open) => {
+          if (!open) {
+            handleCancel();
+          }
+        }}
+      >
+        <NewDialogContent
+          isAlertDialog={alertDialog}
+          trapFocusScope={!!alertDialog}
+        >
+          <NewDialogHeader hideButton={true}>
+            <NewDialogTitle>{title}</NewDialogTitle>
+          </NewDialogHeader>
+          <NewDialogContainer>{children}</NewDialogContainer>
+
+          <NewDialogFooter
+            leftButtonProps={
+              cancelLabel
+                ? {
+                    label: cancelLabel,
+                    variant: "outline",
+                    onClick: handleCancel,
+                  }
+                : undefined
+            }
+            rightButtonProps={{
+              label: validateLabel ?? "Ok",
+              variant: validateVariant ?? "primary",
+              onClick: handleConfirm,
+            }}
+          />
+        </NewDialogContent>
+      </NewDialog>
+    );
+  };
 
   return {
-    AwaitableDialog: DialogRenderer,
+    AwaitableDialog,
     showDialog,
   };
 }
diff --git a/front/pages/poke/templates/[tId].tsx b/front/pages/poke/templates/[tId].tsx
index eff1f3bec603..5ae583b0eb83 100644
--- a/front/pages/poke/templates/[tId].tsx
+++ b/front/pages/poke/templates/[tId].tsx
@@ -5,11 +5,16 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
   EmojiPicker,
+  Input,
   Markdown,
+  NewDialog,
+  NewDialogContent,
+  NewDialogHeader,
+  NewDialogTitle,
+  NewDialogTrigger,
   TextArea,
+  useSendNotification,
 } from "@dust-tt/sparkle";
-import { Input } from "@dust-tt/sparkle";
-import { useSendNotification } from "@dust-tt/sparkle";
 import type {
   CreateTemplateFormType,
   TemplateTagCodeType,
@@ -36,13 +41,6 @@ import { MultiSelect } from "react-multi-select-component";
 import { makeUrlForEmojiAndBackgroud } from "@app/components/assistant_builder/avatar_picker/utils";
 import PokeNavbar from "@app/components/poke/PokeNavbar";
 import { PokeButton } from "@app/components/poke/shadcn/ui/button";
-import {
-  PokeDialog,
-  PokeDialogContent,
-  PokeDialogHeader,
-  PokeDialogTitle,
-  PokeDialogTrigger,
-} from "@app/components/poke/shadcn/ui/dialog";
 import {
   PokeForm,
   PokeFormControl,
@@ -428,22 +426,22 @@ function PreviewDialog({ form }: { form: any }) {
   );
 
   return (
-    <PokeDialog open={open} onOpenChange={setOpen}>
-      <PokeDialogTrigger asChild>
+    <NewDialog open={open} onOpenChange={setOpen}>
+      <NewDialogTrigger asChild>
         <PokeButton variant="secondary">✨ Preview Template Card</PokeButton>
-      </PokeDialogTrigger>
-      <PokeDialogContent className="bg-structure-50 sm:max-w-[600px]">
-        <PokeDialogHeader>
-          <PokeDialogTitle>Preview</PokeDialogTitle>
-        </PokeDialogHeader>
+      </NewDialogTrigger>
+      <NewDialogContent className="bg-structure-50 sm:max-w-[600px]">
+        <NewDialogHeader>
+          <NewDialogTitle>Preview</NewDialogTitle>
+        </NewDialogHeader>
         <AssistantCard
           title={form.getValues("handle")}
           pictureUrl={avatarVisual}
           description={form.getValues("description") ?? ""}
           onClick={() => console.log("clicked")}
         />
-      </PokeDialogContent>
-    </PokeDialog>
+      </NewDialogContent>
+    </NewDialog>
   );
 }