From 7de167259989bb642928ac3f0ec4d9a78ebca835 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Fri, 2 Aug 2024 15:12:09 +0200
Subject: [PATCH] move ai input under create button in card modal

---
 .../DashboardList/NewDashModal/CreateCard.tsx         |  2 ++
 .../Dashboard/components/DashboardView/AiQuery.tsx    | 11 +++++------
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CreateCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CreateCard.tsx
index c0caf656c..ef685eceb 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CreateCard.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CreateCard.tsx
@@ -22,6 +22,7 @@ interface Props {
     // cardType: string,
     onBack?: () => void
     onAdded?: () => void
+    extra?: React.ReactNode
 }
 
 function CreateCard(props: Props) {
@@ -96,6 +97,7 @@ function CreateCard(props: Props) {
                     </Space>
                 </Button>
             </div>
+            {props.extra}
             {/*<CardBuilder siteId={siteId}/>*/}
             <WidgetFormNew/>
             <WidgetPreview className="" name={metric.name} isEditing={true}/>
diff --git a/frontend/app/components/Dashboard/components/DashboardView/AiQuery.tsx b/frontend/app/components/Dashboard/components/DashboardView/AiQuery.tsx
index 2d3576cfc..58f35eac5 100644
--- a/frontend/app/components/Dashboard/components/DashboardView/AiQuery.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardView/AiQuery.tsx
@@ -39,10 +39,10 @@ const InputBox = observer(({ inModal }: { inModal?: boolean }) => {
   };
   return (
     <>
-      <div className={'flex items-center mb-2 gap-2'}>
-        <Icon name={'sparkles'} size={16} />
-        <div className={'font-semibold'}>What would you like to visualize?</div>
-      </div>
+      {!inModal ? <div className={"flex items-center mb-2 gap-2"}>
+        <Icon name={"sparkles"} size={16} />
+        <div className={"font-semibold"}>What would you like to visualize?</div>
+      </div> : null}
       <div style={gradientBox}>
         <Input
           wrapperClassName={'w-full pr-2'}
@@ -100,11 +100,10 @@ const QueryModal = observer(() => {
       centered={true}
     >
       <div className={'flex flex-col gap-2'}>
-        <InputBox inModal />
         {aiFiltersStore.isLoading ? (
           <Loader />
         ) : (
-          <CreateCard onAdded={onClose} />
+          <CreateCard extra={<InputBox inModal />} onAdded={onClose} />
         )}
       </div>
     </Modal>