From 21167bd96368923feeea83537ccaed4b95f20df2 Mon Sep 17 00:00:00 2001 From: Flavien David Date: Thu, 14 Dec 2023 18:26:56 +0100 Subject: [PATCH] Flav/new conversation landing page (#2880) * Move GalleryItem to its own file * Handle variant in GalleryItem * Refactor new conversation landing page for member * :art: * Refactor builder/admin conversation landing page * Implement connections and folders as data sources * :sparkles: Move AssistantPreview to components * :book: * :sparkles: * Use Link instead of Button.onClick() and use proper flow --- .../components/assistant/AssistantPreview.tsx | 158 +++++++++ front/pages/w/[wId]/assistant/gallery.tsx | 125 +------ front/pages/w/[wId]/assistant/new.tsx | 335 ++++++++---------- 3 files changed, 302 insertions(+), 316 deletions(-) create mode 100644 front/components/assistant/AssistantPreview.tsx diff --git a/front/components/assistant/AssistantPreview.tsx b/front/components/assistant/AssistantPreview.tsx new file mode 100644 index 000000000000..66541721d3ac --- /dev/null +++ b/front/components/assistant/AssistantPreview.tsx @@ -0,0 +1,158 @@ +import { Avatar, Button, Chip, MoreIcon, PlusIcon } from "@dust-tt/sparkle"; +import { AgentConfigurationType, WorkspaceType } from "@dust-tt/types"; +import { useContext, useState } from "react"; + +import { SendNotificationsContext } from "@app/components/sparkle/Notification"; +import { PostAgentListStatusRequestBody } from "@app/pages/api/w/[wId]/members/me/agent_list_status"; + +type AssistantPreviewVariant = "gallery" | "home"; + +interface AssistantPreviewProps { + owner: WorkspaceType; + agentConfiguration: AgentConfigurationType; + onShowDetails: () => void; + onUpdate: () => void; + variant: AssistantPreviewVariant; +} + +function getDescriptionClassName(variant: AssistantPreviewVariant): string { + switch (variant) { + case "home": + return "text-xs text-element-700"; + default: + return "text-sm text-element-800"; + } +} + +function getNameClassName(variant: AssistantPreviewVariant): string { + switch (variant) { + case "home": + return "text-sm font-medium text-element-900"; + default: + return "text-md font-medium text-element-900"; + } +} + +export function AssistantPreview({ + owner, + agentConfiguration, + onShowDetails, + onUpdate, + variant, +}: AssistantPreviewProps) { + const [isAdding, setIsAdding] = useState(false); + // TODO(flav) Move notification logic to the caller. This maintains the purity of the component by decoupling it from side-effect operations. + const sendNotification = useContext(SendNotificationsContext); + + const addToAgentList = async () => { + setIsAdding(true); + + try { + const body: PostAgentListStatusRequestBody = { + agentId: agentConfiguration.sId, + listStatus: "in-list", + }; + + const response = await fetch( + `/api/w/${owner.sId}/members/me/agent_list_status`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(body), + } + ); + + if (!response.ok) { + const data = await response.json(); + sendNotification({ + title: `Error adding Assistant`, + description: data.error.message, + type: "error", + }); + } else { + sendNotification({ + title: `Assistant added`, + type: "success", + }); + onUpdate(); + } + } catch (error) { + sendNotification({ + title: `Error adding Assistant`, + description: error instanceof Error ? error.message : String(error), + type: "error", + }); + } finally { + setIsAdding(false); + } + }; + + const addButton = agentConfiguration.userListStatus !== "in-list" && ( +