feat(assistant builder) add data source mode dropdown (#1316)

* feat(assistan builder) add data source mode dropdown * use opacity transition
dust-tt · Sep 8, 2023 · e49591e · e49591e
1 parent b0f480c
commit e49591e
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 19 deletions.
diff --git a/front/pages/w/[wId]/builder/assistants/new.tsx b/front/pages/w/[wId]/builder/assistants/new.tsx
@@ -1,16 +1,18 @@
 import {
   Avatar,
   Button,
-  ChevronUpDownIcon,
+  DropdownMenu,
   Icon,
   InformationCircleIcon,
   PageHeader,
   PencilSquareIcon,
   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";
 
 import AppLayout from "@app/components/sparkle/AppLayout";
 import { AppLayoutSimpleCloseTitle } from "@app/components/sparkle/AppLayoutTitle";
@@ -55,12 +57,21 @@ export const getServerSideProps: GetServerSideProps<{
   };
 };
 
+const DATA_SOURCE_MODES = ["GENERIC", "SELECTED"] as const;
+type DataSourceMode = (typeof DATA_SOURCE_MODES)[number];
+const DATA_SOURCE_MODE_TO_LABEL: Record<DataSourceMode, string> = {
+  GENERIC: "Generic model (No data source)",
+  SELECTED: "Selected data sources",
+};
+
 export default function CreateAssistant({
   user,
   owner,
   gaTrackingId,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const router = useRouter();
+  const [dataSourceMode, setDataSourceMode] =
+    useState<DataSourceMode>("GENERIC");
 
   return (
     <AppLayout
@@ -195,18 +206,72 @@ export default function CreateAssistant({
                 </li>
               </ul>
             </div>
-            <div className="pt-6 text-base font-semibold">
-              Select the data sources
-            </div>
-            <div className="flex h-48 items-center justify-center rounded-lg bg-structure-50">
-              <Button
-                labelVisible={true}
-                label="Add a data source"
-                variant="primary"
-                size="md"
-                icon={PlusIcon}
-              />
+            <div className="flex flex-row items-center space-x-2 pt-6">
+              <div className="text-sm font-semibold text-element-900">
+                Data source mode:
+              </div>
+              <DropdownMenu>
+                <DropdownMenu.Button>
+                  <Button
+                    type="select"
+                    labelVisible={true}
+                    label={DATA_SOURCE_MODE_TO_LABEL[dataSourceMode]}
+                    variant="secondary"
+                    size="sm"
+                  />
+                </DropdownMenu.Button>
+                <DropdownMenu.Items origin="topRight">
+                  {Object.entries(DATA_SOURCE_MODE_TO_LABEL).map(
+                    ([key, value]) => (
+                      <DropdownMenu.Item
+                        key={key}
+                        label={value}
+                        onClick={() => {
+                          setDataSourceMode(key as DataSourceMode);
+                        }}
+                      />
+                    )
+                  )}
+                </DropdownMenu.Items>
+              </DropdownMenu>
             </div>
+            <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={classNames(
+                    "flex h-full min-h-48 items-center justify-center rounded-lg bg-structure-50"
+                  )}
+                >
+                  <Button
+                    labelVisible={true}
+                    label="Add a data source"
+                    variant="primary"
+                    size="md"
+                    icon={PlusIcon}
+                  />
+                </div>
+              </div>
+            </Transition>
+
             <div className="pt-6 text-base font-semibold text-element-900">
               Timeframe for the data sources
             </div>
@@ -221,13 +286,21 @@ export default function CreateAssistant({
               <div className="text-sm font-semibold text-element-900">
                 Timeframe:
               </div>
-              <Button
-                labelVisible={true}
-                label="Auto (default)"
-                variant="secondary"
-                size="sm"
-                icon={ChevronUpDownIcon}
-              />
+              <DropdownMenu>
+                <DropdownMenu.Button>
+                  <Button
+                    type="select"
+                    labelVisible={true}
+                    label="Auto (default)"
+                    variant="secondary"
+                    size="sm"
+                  />
+                </DropdownMenu.Button>
+                <DropdownMenu.Items origin="bottomRight">
+                  <DropdownMenu.Item label="item 1" />
+                  <DropdownMenu.Item label="item 2" />
+                </DropdownMenu.Items>
+              </DropdownMenu>
             </div>
           </div>
         </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%": {