From 78f9b5a703b0a7b75a92d6c700e8cf74b160680b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daphn=C3=A9=20Popin?= <daphne.popin@gmail.com>
Date: Tue, 2 Jan 2024 22:20:54 +0100
Subject: [PATCH] Assistant Builder: Rework action dropdown

---
 .../assistant_builder/AssistantBuilder.tsx    | 80 ++++++++++++-------
 front/package-lock.json                       |  8 +-
 front/package.json                            |  2 +-
 3 files changed, 54 insertions(+), 36 deletions(-)

diff --git a/front/components/assistant_builder/AssistantBuilder.tsx b/front/components/assistant_builder/AssistantBuilder.tsx
index 5b068293acfc4..47c0bfc2f11d3 100644
--- a/front/components/assistant_builder/AssistantBuilder.tsx
+++ b/front/components/assistant_builder/AssistantBuilder.tsx
@@ -99,20 +99,23 @@ const SPIRIT_AVATAR_URLS = SPIRIT_AVATAR_FILES.map((f) =>
 
 // Actions
 
-const ACTION_MODES = [
-  "GENERIC",
-  "RETRIEVAL_SEARCH",
+const BASIC_ACTION_MODES = ["GENERIC", "RETRIEVAL_SEARCH"] as const;
+const ADVANCED_ACTION_MODES = [
   "RETRIEVAL_EXHAUSTIVE",
   "DUST_APP_RUN",
   "DATABASE_QUERY",
 ] as const;
-type ActionMode = (typeof ACTION_MODES)[number];
+
+type ActionMode =
+  | (typeof BASIC_ACTION_MODES)[number]
+  | (typeof ADVANCED_ACTION_MODES)[number];
+
 const ACTION_MODE_TO_LABEL: Record<ActionMode, string> = {
   GENERIC: "No action",
-  RETRIEVAL_SEARCH: "Search Data Sources",
-  RETRIEVAL_EXHAUSTIVE: "Process Data Sources",
-  DUST_APP_RUN: "Run Dust App",
-  DATABASE_QUERY: "Query Database",
+  RETRIEVAL_SEARCH: "Search data sources",
+  RETRIEVAL_EXHAUSTIVE: "Retrieve most recent content from data sources",
+  DUST_APP_RUN: "Run a Dust application and retrieve the output",
+  DATABASE_QUERY: "Query a Database",
 };
 
 // Retrieval Action
@@ -678,15 +681,6 @@ export default function AssistantBuilder({
     return newAgentConfiguration;
   };
 
-  // Hack to keep DATABASE_QUERY disabled if not Dust workspace
-  const actions = isActivatedStructuredDB(owner)
-    ? ACTION_MODE_TO_LABEL
-    : Object.fromEntries(
-        Object.entries(ACTION_MODE_TO_LABEL).filter(
-          ([key]) => key !== "DATABASE_QUERY"
-        )
-      );
-
   return (
     <>
       <AssistantBuilderDataSourceModal
@@ -960,9 +954,7 @@ export default function AssistantBuilder({
           </div>
 
           <div className="flex flex-col gap-6 text-sm text-element-700">
-            <div className="text-2xl font-bold text-element-900">
-              Data Sources & Actions
-            </div>
+            <div className="text-2xl font-bold text-element-900">Action</div>
             {configurableDataSources.length === 0 &&
               Object.keys(builderState.dataSourceConfigurations).length ===
                 0 && (
@@ -1021,13 +1013,8 @@ export default function AssistantBuilder({
                 </ContentMessage>
               )}
             <div>
-              You can ask the assistant to perform actions before answering,
-              like{" "}
-              <span className="font-bold text-element-800">
-                searching in your data sources
-              </span>
-              , or use a Dust Application you have built for your specific
-              needs.
+              Choose the action the assistant will perform and take into account
+              before answering:
             </div>
             <div className="flex flex-row items-center space-x-2">
               <div className="text-sm font-semibold text-element-900">
@@ -1044,23 +1031,54 @@ export default function AssistantBuilder({
                     size="sm"
                   />
                 </DropdownMenu.Button>
-                <DropdownMenu.Items origin="bottomRight" width={260}>
-                  {Object.entries(actions).map(([key, value]) => (
+                <DropdownMenu.Items origin="bottomLeft" width={200}>
+                  {BASIC_ACTION_MODES.map((key) => (
                     <DropdownMenu.Item
                       key={key}
-                      label={value}
+                      label={ACTION_MODE_TO_LABEL[key]}
                       onClick={() => {
                         setEdited(true);
                         setBuilderState((state) => ({
                           ...state,
-                          actionMode: key as ActionMode,
+                          actionMode: key,
                         }));
                       }}
                     />
                   ))}
+                  <DropdownMenu.Item
+                    label="Advanced actions"
+                    hasChildren={true}
+                  >
+                    <DropdownMenu.Items origin="topLeft" width={360}>
+                      {ADVANCED_ACTION_MODES.filter((key) => {
+                        return (
+                          key !== "DATABASE_QUERY" ||
+                          isActivatedStructuredDB(owner)
+                        );
+                      }).map((key) => (
+                        <DropdownMenu.Item
+                          key={key}
+                          label={ACTION_MODE_TO_LABEL[key]}
+                          onClick={() => {
+                            setEdited(true);
+                            setBuilderState((state) => ({
+                              ...state,
+                              actionMode: key,
+                            }));
+                          }}
+                        />
+                      ))}
+                    </DropdownMenu.Items>
+                  </DropdownMenu.Item>
                 </DropdownMenu.Items>
               </DropdownMenu>
             </div>
+            <ActionModeSection show={builderState.actionMode === "GENERIC"}>
+              <div className="text-sm text-element-700">
+                No action is set. Your assistant will use the instructions only
+                to answer.
+              </div>
+            </ActionModeSection>
             <ActionModeSection
               show={builderState.actionMode === "RETRIEVAL_EXHAUSTIVE"}
             >
diff --git a/front/package-lock.json b/front/package-lock.json
index 5b8652553bb85..ca02912a0173f 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -5,7 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
-        "@dust-tt/sparkle": "^0.2.55",
+        "@dust-tt/sparkle": "^0.2.57",
         "@dust-tt/types": "file:../types",
         "@emoji-mart/data": "^1.1.2",
         "@emoji-mart/react": "^1.1.1",
@@ -895,9 +895,9 @@
       "integrity": "sha512-smLocSfrt3s53H/XSVP3/1kP42oqvrkjUPtyaFd1F79ux24oE31BKt+q0c6lsa6hOYrFzsIwyc5GXAI5JmfOew=="
     },
     "node_modules/@dust-tt/sparkle": {
-      "version": "0.2.55",
-      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.55.tgz",
-      "integrity": "sha512-DC49NJ7T9e9O3HSN6k3FmBYSufYt18xI1JMv0Nfdq4xYsz7FI7lf7Hx5KObgN8OAJikii3pZnSl3OGyGJr+okA==",
+      "version": "0.2.57",
+      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.57.tgz",
+      "integrity": "sha512-1vL7Hq8s1hrwnVCpbKuPGaM6aRcPFdSEMExSZlmaxpnopgi+V4tDP0UnTe+qYXOBgrGGAJO1Sjj1XOd4zeRjgQ==",
       "dependencies": {
         "@headlessui/react": "^1.7.17"
       },
diff --git a/front/package.json b/front/package.json
index 5b10f1187c294..7bc15b90e16f4 100644
--- a/front/package.json
+++ b/front/package.json
@@ -13,7 +13,7 @@
     "initdb": "npx tsx admin/db.ts"
   },
   "dependencies": {
-    "@dust-tt/sparkle": "^0.2.55",
+    "@dust-tt/sparkle": "^0.2.57",
     "@dust-tt/types": "file:../types",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",