use opacity transition

dust-tt · Sep 8, 2023 · 23c208e · 23c208e
1 parent e05ec7f
commit 23c208e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git a/front/pages/w/[wId]/builder/assistants/new.tsx b/front/pages/w/[wId]/builder/assistants/new.tsx
@@ -9,6 +9,7 @@ import {
   PlusIcon,
   RobotIcon,
 } from "@dust-tt/sparkle";
+import { Transition } from "@headlessui/react";
 import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
 import { useState } from "react";
@@ -234,12 +235,32 @@ export default function CreateAssistant({
                 </DropdownMenu.Items>
               </DropdownMenu>
             </div>
-            {dataSourceMode === "SELECTED" ? (
-              <>
+            <Transition
+              show={dataSourceMode === "SELECTED"}
+              enterFrom="opacity-0 -mt-72"
+              enterTo="opacity-100 mt-0"
+              leave="transition-all duration-1000"
+              enter="transition-all duration-1000"
+              leaveFrom="opacity-100 mt-0"
+              leaveTo="opacity-0 -mt-72"
+              className="overflow-hidden"
+              afterEnter={() => {
+                window.scrollBy({
+                  left: 0,
+                  top: 140,
+                  behavior: "smooth",
+                });
+              }}
+            >
+              <div>
                 <div className="text-base font-semibold">
                   Select the data sources
                 </div>
-                <div className="flex h-48 items-center justify-center rounded-lg bg-structure-50">
+                <div
+                  className={classNames(
+                    "flex h-full min-h-48 items-center justify-center rounded-lg bg-structure-50"
+                  )}
+                >
                   <Button
                     labelVisible={true}
                     label="Add a data source"
@@ -248,8 +269,9 @@ export default function CreateAssistant({
                     icon={PlusIcon}
                   />
                 </div>
-              </>
-            ) : null}
+              </div>
+            </Transition>
+
             <div className="pt-6 text-base font-semibold text-element-900">
               Timeframe for the data sources
             </div>

diff --git a/front/tailwind.config.js b/front/tailwind.config.js
@@ -8,6 +8,9 @@ module.exports = {
       objektiv: ["'objektiv-mk1'", "sans-serif"],
     },
     extend: {
+      minHeight: (theme) => ({
+        ...theme("spacing"),
+      }),
       keyframes: {
         "move-square": {
           "0%": {