⚡ Better error toast when previewing bot

Closes #475

apps/builder/src/hooks/useToast.ts

@@ -1,22 +0,0 @@
-import { useToast as useChakraToast, UseToastOptions } from '@chakra-ui/react'
-import { useCallback } from 'react'
-
-export const useToast = () => {
-  const toast = useChakraToast()
-
-  const showToast = useCallback(
-    ({ title, description, status = 'error', ...props }: UseToastOptions) => {
-      toast({
-        position: 'top-right',
-        description,
-        title,
-        status,
-        isClosable: true,
-        ...props,
-      })
-    },
-    [toast]
-  )
-
-  return { showToast }
-}

apps/builder/src/hooks/useToast.tsx

@@ -0,0 +1,39 @@
+import { Toast, ToastProps } from '@/components/Toast'
+import { useToast as useChakraToast } from '@chakra-ui/react'
+import { useCallback } from 'react'
+
+export const useToast = () => {
+  const toast = useChakraToast()
+
+  const showToast = useCallback(
+    ({
+      title,
+      description,
+      status = 'error',
+      icon,
+      details,
+      primaryButton,
+      secondaryButton,
+    }: Omit<ToastProps, 'onClose'>) => {
+      toast({
+        position: 'top-right',
+        duration: details ? null : undefined,
+        render: ({ onClose }) => (
+          <Toast
+            title={title}
+            description={description}
+            status={status}
+            icon={icon}
+            details={details}
+            onClose={onClose}
+            primaryButton={primaryButton}
+            secondaryButton={secondaryButton}
+          />
+        ),
+      })
+    },
+    [toast]
+  )
+
+  return { showToast }
+}