From 65674cabb8a09c801ee8e4ce08f3b4c400ae28a0 Mon Sep 17 00:00:00 2001 From: Lucas Date: Sat, 14 Dec 2024 00:54:50 +0100 Subject: [PATCH] First functional UI for feedback in assistant builder --- .../components/assistant/AssistantDetails.tsx | 201 +------------ .../assistant_builder/AssistantBuilder.tsx | 76 +++-- .../AssistantBuilderPreviewDrawer.tsx | 264 +++++++++++++++++- .../assistant_builder/PrevNextButtons.tsx | 4 +- types/src/front/assistant/builder.ts | 6 +- 5 files changed, 321 insertions(+), 230 deletions(-) diff --git a/front/components/assistant/AssistantDetails.tsx b/front/components/assistant/AssistantDetails.tsx index 5985ba77ae62..1cbb0a154417 100644 --- a/front/components/assistant/AssistantDetails.tsx +++ b/front/components/assistant/AssistantDetails.tsx @@ -1,40 +1,27 @@ import { Avatar, - Button, ContentMessage, ElementModal, - HandThumbDownIcon, - HandThumbUpIcon, InformationCircleIcon, Page, - Spinner, Tabs, TabsContent, TabsList, TabsTrigger, } from "@dust-tt/sparkle"; -import type { - AgentConfigurationScope, - LightAgentConfigurationType, - LightWorkspaceType, - WorkspaceType, -} from "@dust-tt/types"; -import { ExternalLinkIcon } from "lucide-react"; -import { useCallback, useMemo, useState } from "react"; +import type { AgentConfigurationScope, WorkspaceType } from "@dust-tt/types"; +import { useCallback, useState } from "react"; import { AssistantDetailsButtonBar } from "@app/components/assistant/AssistantDetailsButtonBar"; import { AssistantActionsSection } from "@app/components/assistant/details/AssistantActionsSection"; import { AssistantUsageSection } from "@app/components/assistant/details/AssistantUsageSection"; import { ReadOnlyTextArea } from "@app/components/assistant/ReadOnlyTextArea"; import { SharingDropdown } from "@app/components/assistant_builder/Sharing"; -import type { AgentMessageFeedbackWithMetadataType } from "@app/lib/api/assistant/feedback"; import { useAgentConfiguration, - useAgentConfigurationFeedbacks, - useAgentConfigurationHistory, useUpdateAgentScope, } from "@app/lib/swr/assistants"; -import { classNames, timeAgoFrom } from "@app/lib/utils"; +import { classNames } from "@app/lib/utils"; type AssistantDetailsProps = { owner: WorkspaceType; @@ -107,18 +94,10 @@ export function AssistantDetails({ - - - - ); @@ -168,74 +147,6 @@ export function AssistantDetails({ "This assistant has no instructions." ); - const FeedbacksSection = () => { - const { - agentConfigurationFeedbacks, - isAgentConfigurationFeedbacksLoading, - } = useAgentConfigurationFeedbacks({ - workspaceId: owner.sId, - agentConfigurationId: assistantId ?? "", - withMetadata: true, - }); - - const sortedFeedbacks = useMemo(() => { - if (!agentConfigurationFeedbacks) { - return null; - } - return agentConfigurationFeedbacks.sort( - (a, b) => - new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() - ); - }, [agentConfigurationFeedbacks]); - - const { agentConfigurationHistory, isAgentConfigurationHistoryLoading } = - useAgentConfigurationHistory({ - workspaceId: owner.sId, - agentConfigurationId: assistantId || "", - disabled: !assistantId, - }); - - return isAgentConfigurationFeedbacksLoading || - isAgentConfigurationHistoryLoading ? ( - - ) : ( -
- {!sortedFeedbacks || sortedFeedbacks.length === 0 || !assistantId ? ( -
No feedbacks.
- ) : ( -
- - {sortedFeedbacks.map((feedback, index) => ( -
- {index > 0 && - feedback.agentConfigurationVersion !== - sortedFeedbacks[index - 1].agentConfigurationVersion && ( - c.version === feedback.agentConfigurationVersion - )} - agentConfigurationVersion={ - feedback.agentConfigurationVersion - } - isLatestVersion={false} - /> - )} - -
- ))} -
- )} -
- ); - }; - return ( ); } - -function AgentConfigurationVersionHeader({ - agentConfigurationVersion, - agentConfiguration, - isLatestVersion, -}: { - agentConfigurationVersion: number; - agentConfiguration: LightAgentConfigurationType | undefined; - isLatestVersion: boolean; -}) { - const getAgentConfigurationVersionString = useCallback( - (config: LightAgentConfigurationType) => { - return isLatestVersion - ? "Latest Version" - : !config.versionCreatedAt - ? `v${config.version}` - : new Date(config.versionCreatedAt).toLocaleDateString("en-US", { - year: "numeric", - month: "long", - day: "numeric", - }); - }, - [isLatestVersion] - ); - - return ( -
- - {agentConfiguration - ? getAgentConfigurationVersionString(agentConfiguration) - : `v${agentConfigurationVersion}`} - -
- ); -} - -function FeedbackCard({ - owner, - feedback, -}: { - owner: LightWorkspaceType; - feedback: AgentMessageFeedbackWithMetadataType; -}) { - const conversationUrl = - feedback.conversationId && feedback.messageId - ? `${process.env.NEXT_PUBLIC_DUST_CLIENT_FACING_URL}/w/${owner.sId}/assistant/${feedback.conversationId}#${feedback.messageId}` - : null; - - return ( - -
-
- {feedback.userImageUrl ? ( - - ) : ( - - )} -
- {feedback.userName} -
-
-
- {timeAgoFrom( - feedback.createdAt instanceof Date - ? feedback.createdAt.getTime() - : new Date(feedback.createdAt).getTime(), - { - useLongFormat: true, - } - )}{" "} - ago -
-
-
-
{feedback.content}
-
- {feedback.thumbDirection === "up" ? ( - - ) : ( - - )} -
-
- {conversationUrl && ( -
-
- )} -
- ); -} diff --git a/front/components/assistant_builder/AssistantBuilder.tsx b/front/components/assistant_builder/AssistantBuilder.tsx index bda114636a67..9338a0615848 100644 --- a/front/components/assistant_builder/AssistantBuilder.tsx +++ b/front/components/assistant_builder/AssistantBuilder.tsx @@ -6,6 +6,7 @@ import { ChevronLeftIcon, ChevronRightIcon, cn, + FilterIcon, MagicIcon, Tabs, TabsList, @@ -489,7 +490,7 @@ export default function AssistantBuilder({ } buttonsRightPanel={ - <> + rightPanelStatus.tab !== null ? (