Add ellipsis to assistant picker + link fixes (#3410)

* Assistant picker wording and link fix * Add ellipsis visual to Item.Avatar * Add ellipsis onclick handling * Fix missing ellipsis props * Spacing changes * Make prettier happy * Flow link on create * Move ellipsis to action in storybook * Add ellipsis in assistantsPicker directly * Make AssistantPicker able to show assistant details + fix links * Get ellipsis iconbutton out of the main link in assistantsPicker * Linter check pass * Remove unused storybook story * Cleanup stories * Add mutateAgentConfigurations to assistantpicker * Move mutateAgentConfigurations to AssistantDetails * Fix conflicts * Fix conflicts with Ed's PR * Use @app based import * Put back from query param * Linter --------- Co-authored-by: Alban Dumouilla <[email protected]>
dust-tt · Jan 24, 2024 · 0a76a1e · 0a76a1e
1 parent e7062f2
commit 0a76a1e
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 30 deletions.
diff --git a/front/components/assistant/AssistantDetails.tsx b/front/components/assistant/AssistantDetails.tsx
@@ -37,6 +37,7 @@ import { SendNotificationsContext } from "@app/components/sparkle/Notification";
 import { assistantUsageMessage } from "@app/lib/assistant";
 import { CONNECTOR_CONFIGURATIONS } from "@app/lib/connector_providers";
 import { useAgentConfiguration, useAgentUsage, useApp } from "@app/lib/swr";
+import { useAgentConfigurations } from "@app/lib/swr";
 import type { PostAgentListStatusRequestBody } from "@app/pages/api/w/[wId]/members/me/agent_list_status";
 
 type AssistantDetailsFlow = "personal" | "workspace";
@@ -46,14 +47,12 @@ export function AssistantDetails({
   assistant,
   show,
   onClose,
-  onUpdate,
   flow,
 }: {
   owner: WorkspaceType;
   assistant: LightAgentConfigurationType;
   show: boolean;
   onClose: () => void;
-  onUpdate: () => void;
   flow: AssistantDetailsFlow;
 }) {
   const agentUsage = useAgentUsage({
@@ -126,6 +125,12 @@ export function AssistantDetails({
       ) : null
     ) : null;
 
+  const { mutateAgentConfigurations } = useAgentConfigurations({
+    workspaceId: owner.sId,
+    agentsGetView: "list",
+    includes: ["authors"],
+  });
+
   return (
     <Modal
       isOpen={show}
@@ -139,7 +144,7 @@ export function AssistantDetails({
           owner={owner}
           agentConfiguration={assistant}
           detailsModalClose={onClose}
-          onUpdate={onUpdate}
+          onUpdate={mutateAgentConfigurations}
           onClose={onClose}
           flow={flow}
         />

diff --git a/front/components/assistant/AssistantPicker.tsx b/front/components/assistant/AssistantPicker.tsx
@@ -1,8 +1,10 @@
 import {
   Button,
   DropdownMenu,
+  IconButton,
   Item,
   ListIcon,
+  MoreIcon,
   PlusIcon,
   RobotIcon,
   Searchbar,
@@ -14,6 +16,7 @@ import type {
 import Link from "next/link";
 import { useEffect, useState } from "react";
 
+import { AssistantDetails } from "@app/components/assistant/AssistantDetails";
 import { filterAndSortAgents } from "@app/lib/utils";
 
 export function AssistantPicker({
@@ -32,13 +35,27 @@ export function AssistantPicker({
 }) {
   const [searchText, setSearchText] = useState("");
   const [searchedAssistants, setSearchedAssistants] = useState(assistants);
+  const [showDetails, setShowDetails] =
+    useState<LightAgentConfigurationType | null>(null);
 
   useEffect(() => {
     setSearchedAssistants(filterAndSortAgents(assistants, searchText));
   }, [searchText, assistants]);
 
   return (
     <DropdownMenu>
+      {showDetails && (
+        <AssistantDetails
+          owner={owner}
+          assistant={showDetails}
+          show={showDetails !== null}
+          onClose={() => {
+            setShowDetails(null);
+          }}
+          flow="personal"
+        />
+      )}
+
       <div onClick={() => setSearchText("")} className="flex">
         {pickerButton ? (
           <DropdownMenu.Button size={size}>{pickerButton}</DropdownMenu.Button>
@@ -53,7 +70,7 @@ export function AssistantPicker({
       </div>
       <DropdownMenu.Items
         origin="auto"
-        width={240}
+        width={280}
         topBar={
           <>
             {assistants.length > 7 && (
@@ -77,18 +94,21 @@ export function AssistantPicker({
         }
         bottomBar={
           <div className="flex border-t border-structure-50 p-2">
-            <Link href={`/w/${owner.sId}/builder/assistants/new`}>
+            <Link
+              href={`/w/${owner.sId}/builder/assistants/new?flow=personal_assistants`}
+            >
               <Button
                 label="Create"
                 size="xs"
                 variant="primary"
                 icon={PlusIcon}
+                className="mr-2"
               />
             </Link>
             <div className="s-flex-grow" />
             <Link href={`/w/${owner.sId}/assistant/assistants`}>
               <Button
-                label="My Assistant"
+                label="My Assistants"
                 size="xs"
                 variant="tertiary"
                 icon={ListIcon}
@@ -98,16 +118,29 @@ export function AssistantPicker({
         }
       >
         {searchedAssistants.map((c) => (
-          <Item.Avatar
-            key={`assistant-picker-${c.sId}`}
-            label={"@" + c.name}
-            visual={c.pictureUrl}
-            hasAction={false}
-            onClick={() => {
-              onItemClick(c);
-              setSearchText("");
-            }}
-          />
+          <div
+            key={`assistant-picker-container-${c.sId}`}
+            className="flex flex-row items-center justify-between pr-2"
+          >
+            <Item.Avatar
+              key={`assistant-picker-${c.sId}`}
+              label={"@" + c.name}
+              visual={c.pictureUrl}
+              hasAction={false}
+              onClick={() => {
+                onItemClick(c);
+                setSearchText("");
+              }}
+            />
+            <IconButton
+              icon={MoreIcon}
+              onClick={() => {
+                setShowDetails(c);
+              }}
+              variant="tertiary"
+              size="sm"
+            />
+          </div>
         ))}
       </DropdownMenu.Items>
     </DropdownMenu>

diff --git a/front/pages/w/[wId]/assistant/assistants.tsx b/front/pages/w/[wId]/assistant/assistants.tsx
@@ -191,9 +191,6 @@ export default function PersonalAssistants({
           onClose={() => {
             setShowDetails(null);
           }}
-          onUpdate={() => {
-            void mutateAgentConfigurations();
-          }}
           flow="personal"
         />
       )}

diff --git a/front/pages/w/[wId]/assistant/gallery.tsx b/front/pages/w/[wId]/assistant/gallery.tsx
@@ -211,9 +211,6 @@ export default function AssistantsGallery({
           onClose={() => {
             setShowDetails(null);
           }}
-          onUpdate={() => {
-            void mutateAgentConfigurations();
-          }}
           flow={flow === "workspace_add" ? "workspace" : "personal"}
         />
       )}

diff --git a/front/pages/w/[wId]/assistant/new.tsx b/front/pages/w/[wId]/assistant/new.tsx
@@ -93,11 +93,10 @@ export default function AssistantNew({
   const [conversation, setConversation] = useState<ConversationType | null>(
     null
   );
-  const { agentConfigurations, mutateAgentConfigurations } =
-    useAgentConfigurations({
-      workspaceId: owner.sId,
-      agentsGetView: "list",
-    });
+  const { agentConfigurations } = useAgentConfigurations({
+    workspaceId: owner.sId,
+    agentsGetView: "list",
+  });
 
   const activeAgents = agentConfigurations.filter((a) => a.status === "active");
   activeAgents.sort(compareAgentsForSort);
@@ -193,9 +192,6 @@ export default function AssistantNew({
               onClose={() => {
                 setShowDetails(null);
               }}
-              onUpdate={async () => {
-                await mutateAgentConfigurations();
-              }}
               flow="personal"
             />
           )}