From aa79943db5702e57cf977d5b8f225db82bcf3d14 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Thu, 13 Mar 2025 11:39:40 -0600
Subject: [PATCH] confirm modal update

---
 .../ui/modal/ConfirmModal.stories.tsx         | 57 +++++++++++++++++++
 web/src/components/ui/modal/ModalBase.tsx     |  2 +-
 .../ChatLayoutContext/ChatLayoutContext.tsx   |  2 -
 .../useSelectedFileAndLayout.ts               |  2 -
 4 files changed, 58 insertions(+), 5 deletions(-)
 create mode 100644 web/src/components/ui/modal/ConfirmModal.stories.tsx

diff --git a/web/src/components/ui/modal/ConfirmModal.stories.tsx b/web/src/components/ui/modal/ConfirmModal.stories.tsx
new file mode 100644
index 000000000..263abb85d
--- /dev/null
+++ b/web/src/components/ui/modal/ConfirmModal.stories.tsx
@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ConfirmModal, ConfirmProps } from './ConfirmModal';
+import { Button } from '../buttons/Button';
+import React from 'react';
+import { fn } from '@storybook/test';
+import { useBusterNotifications } from '../../../context/BusterNotifications';
+
+const meta: Meta<typeof ConfirmModal> = {
+  title: 'UI/Modal/ConfirmModal',
+  component: ConfirmModal
+};
+
+export default meta;
+type Story = StoryObj<typeof ConfirmModal>;
+
+export const Default: Story = {
+  render: () => {
+    const { openConfirmModal } = useBusterNotifications();
+
+    const props: ConfirmProps = {
+      title: 'Confirm',
+      content: 'Are you sure you want to confirm this action?',
+      onOk: async () => {
+        await new Promise((resolve) => setTimeout(resolve, 1));
+        alert('onOk');
+      },
+      onCancel: async () => {
+        await new Promise((resolve) => setTimeout(resolve, 1));
+        alert('onCancel');
+      }
+    };
+
+    return (
+      <div className="flex gap-2">
+        <Button onClick={() => openConfirmModal(props)}>Open Confirm Modal</Button>
+        <Button
+          onClick={async () => {
+            await openConfirmModal({
+              title: 'Confirm',
+              content: 'Are you sure you want to confirm this action?',
+              onOk: async () => {
+                await new Promise((resolve) => setTimeout(resolve, 1));
+                alert('onOk');
+              },
+              onCancel: async () => {
+                await new Promise((resolve) => setTimeout(resolve, 1));
+                alert('onCancel');
+              }
+            });
+            alert('openConfirmModal promise resolved');
+          }}>
+          Open Confirm Modal with a promise
+        </Button>
+      </div>
+    );
+  }
+};
diff --git a/web/src/components/ui/modal/ModalBase.tsx b/web/src/components/ui/modal/ModalBase.tsx
index 65e9535d8..d9f38957c 100644
--- a/web/src/components/ui/modal/ModalBase.tsx
+++ b/web/src/components/ui/modal/ModalBase.tsx
@@ -50,7 +50,7 @@ const DialogContent = React.memo(
         <DialogPrimitive.Close
           asChild
           className={cn(
-            'absolute top-4 right-4 opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none'
+            'absolute top-6 right-6 opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none'
           )}>
           <Button prefix={<Xmark />} variant="ghost" />
         </DialogPrimitive.Close>
diff --git a/web/src/layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx b/web/src/layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx
index 0d79c6dd1..e0a1f8995 100644
--- a/web/src/layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx
+++ b/web/src/layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx
@@ -26,8 +26,6 @@ export const useChatLayout = ({ appSplitterRef }: UseChatSplitterProps) => {
       } else if (side === 'both') {
         const shouldAnimate = Number(leftSize) < 200 || parseInt(rightSize as string) < 340;
 
-        console.log(shouldAnimate, leftSize, rightSize);
-
         if (!shouldAnimate) return;
 
         animateWidth(DEFAULT_CHAT_OPTION_SIDEBAR_SIZE, 'left');
diff --git a/web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts b/web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts
index 6b4a087aa..54dacda1b 100644
--- a/web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts
+++ b/web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts
@@ -50,8 +50,6 @@ export const useSelectedFileAndLayout = ({
 
     const isSameAsCurrentFile = selectedFile?.id === fileId;
 
-    console.log('onSetSelectedFile', isSameAsCurrentFile, file);
-
     setRenderViewLayoutKey('both');
     setSelectedFile(file);
     await onChangePage(route);