Assistant Builder: Rework action dropdown

dust-tt · Jan 2, 2024 · 78f9b5a · 78f9b5a
1 parent 3c1b95d
commit 78f9b5a
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 36 deletions.
diff --git 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
diff --git 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",