From 6f0be19c36d0ccc7ee3940ba7a932d37764a5970 Mon Sep 17 00:00:00 2001
From: Lucas Massemin <lucasmassemin@gmail.com>
Date: Wed, 8 Jan 2025 15:07:02 +0100
Subject: [PATCH] Feedback inspector in Assistant builder (#9680)

* Main code brought in

* Improved design for feedback list. Bug with ordering

* Specialized fetch function (renamed), small margin added to feedbacks, more loaded at once

* Using pagination inside feedbacks side modal

* Renamed batch to page, minor improvements

* Update front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx

Co-authored-by: Flavien David <flavien.david74@gmail.com>

* Moved feedback code in its own file, added some props, regular cn usage

* UseSWRInfinity and IntersectionObserver

* Modified message anchor to be a hash param

* linter

* Now returning resource in static resource function

* Using a query param

* Renamed variable

* bask to hasMore variable name

* useInView hook

* Fixed drawer styleing (and icon)

---------

Co-authored-by: Flavien David <flavien.david74@gmail.com>
---
 .../assistant_builder/AssistantBuilder.tsx    |  54 ++--
 .../AssistantBuilderPreviewDrawer.tsx         |  64 +++--
 ...AssistantBuilderPreviewDrawerFeedbacks.tsx | 244 ++++++++++++++++++
 .../assistant_builder/PrevNextButtons.tsx     |   4 +-
 front/lib/api/assistant/feedback.ts           |  15 +-
 .../agent_message_feedback_resource.ts        |  12 +-
 front/lib/swr/assistants.ts                   |  76 ++++++
 .../agent_configurations/[aId]/feedbacks.ts   |   8 +-
 types/src/front/assistant/builder.ts          |   6 +-
 9 files changed, 420 insertions(+), 63 deletions(-)
 create mode 100644 front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx

diff --git a/front/components/assistant_builder/AssistantBuilder.tsx b/front/components/assistant_builder/AssistantBuilder.tsx
index b52d4be3a214..01ec5f353917 100644
--- a/front/components/assistant_builder/AssistantBuilder.tsx
+++ b/front/components/assistant_builder/AssistantBuilder.tsx
@@ -1,6 +1,7 @@
 import "react-image-crop/dist/ReactCrop.css";
 
 import {
+  BarChartIcon,
   Button,
   ChatBubbleBottomCenterTextIcon,
   ChevronLeftIcon,
@@ -500,6 +501,7 @@ export default function AssistantBuilder({
           }
           buttonsRightPanel={
             <>
+              {/* Chevron button */}
               <Button
                 size="sm"
                 variant="ghost"
@@ -511,39 +513,40 @@ export default function AssistantBuilder({
                 disabled={isBuilderStateEmpty}
                 onClick={toggleRightPanel}
               />
-              {rightPanelStatus.tab === null && template === null && (
-                <Button
-                  icon={ChatBubbleBottomCenterTextIcon}
-                  onClick={() => openRightPanelTab("Preview")}
-                  size="md"
-                  tooltip={
-                    isBuilderStateEmpty
-                      ? "Add instructions or tools to Preview"
-                      : "Preview"
-                  }
-                  variant="highlight"
-                  disabled={isBuilderStateEmpty}
-                  className={cn(
-                    isPreviewButtonAnimating && "animate-breathing-scale"
-                  )}
-                />
-              )}
-              {rightPanelStatus.tab === null && template !== null && (
+              {rightPanelStatus.tab === null && (
                 <div className="flex flex-col gap-3">
+                  {/* Preview Button */}
                   <Button
                     icon={ChatBubbleBottomCenterTextIcon}
                     onClick={() => openRightPanelTab("Preview")}
                     size="sm"
                     variant="outline"
                     tooltip="Preview your assistant"
+                    className={cn(
+                      isPreviewButtonAnimating && "animate-breathing-scale"
+                    )}
+                    disabled={isBuilderStateEmpty}
                   />
-                  <Button
-                    icon={MagicIcon}
-                    onClick={() => openRightPanelTab("Template")}
-                    size="sm"
-                    variant="outline"
-                    tooltip="Template instructions"
-                  />
+                  {/* Performance Button */}
+                  {!!agentConfigurationId && (
+                    <Button
+                      icon={BarChartIcon}
+                      onClick={() => openRightPanelTab("Performance")}
+                      size="sm"
+                      variant="outline"
+                      tooltip="Inspect feedback and performance"
+                    />
+                  )}
+                  {/* Template Button */}
+                  {template !== null && (
+                    <Button
+                      icon={MagicIcon}
+                      onClick={() => openRightPanelTab("Template")}
+                      size="sm"
+                      variant="outline"
+                      tooltip="Template instructions"
+                    />
+                  )}
                 </div>
               )}
             </>
@@ -565,6 +568,7 @@ export default function AssistantBuilder({
               rightPanelStatus={rightPanelStatus}
               openRightPanelTab={openRightPanelTab}
               builderState={builderState}
+              agentConfigurationId={agentConfigurationId}
               setAction={setAction}
             />
           }
diff --git a/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx b/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
index 9bf4519e16de..614b62524b59 100644
--- a/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
+++ b/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
@@ -1,6 +1,8 @@
 import {
+  BarChartIcon,
   Button,
   ChatBubbleBottomCenterTextIcon,
+  classNames,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -27,6 +29,7 @@ import { useContext, useEffect } from "react";
 import ConversationViewer from "@app/components/assistant/conversation/ConversationViewer";
 import { GenerationContextProvider } from "@app/components/assistant/conversation/GenerationContextProvider";
 import { AssistantInputBar } from "@app/components/assistant/conversation/input_bar/InputBar";
+import { FeedbacksSection } from "@app/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks";
 import {
   usePreviewAssistant,
   useTryAssistantCore,
@@ -41,7 +44,6 @@ import { getDefaultActionConfiguration } from "@app/components/assistant_builder
 import { ConfirmContext } from "@app/components/Confirm";
 import { ACTION_SPECIFICATIONS } from "@app/lib/api/assistant/actions/utils";
 import { useUser } from "@app/lib/swr/user";
-import { classNames } from "@app/lib/utils";
 import type { FetchAssistantTemplateResponse } from "@app/pages/api/w/[wId]/assistant/builder/templates/[tId]";
 
 interface AssistantBuilderRightPanelProps {
@@ -54,6 +56,7 @@ interface AssistantBuilderRightPanelProps {
   rightPanelStatus: AssistantBuilderRightPanelStatus;
   openRightPanelTab: (tabName: AssistantBuilderRightPanelTab) => void;
   builderState: AssistantBuilderState;
+  agentConfigurationId: string | null;
   setAction: (action: AssistantBuilderSetActionType) => void;
 }
 
@@ -67,6 +70,7 @@ export default function AssistantBuilderRightPanel({
   rightPanelStatus,
   openRightPanelTab,
   builderState,
+  agentConfigurationId,
   setAction,
 }: AssistantBuilderRightPanelProps) {
   const {
@@ -104,31 +108,39 @@ export default function AssistantBuilderRightPanel({
 
   return (
     <div className="flex h-full flex-col">
-      {template && (
-        <div className="shrink-0 bg-white pt-5">
-          <Tabs
-            value={rightPanelStatus.tab ?? "Preview"}
-            onValueChange={(t) =>
-              openRightPanelTab(t as AssistantBuilderRightPanelTab)
-            }
-            className="hidden lg:flex"
-          >
-            <TabsList className="inline-flex h-10 items-center gap-2 border-b border-separator">
+      <div className="shrink-0 bg-white pt-5">
+        <Tabs
+          value={rightPanelStatus.tab ?? "Preview"}
+          onValueChange={(t) =>
+            openRightPanelTab(t as AssistantBuilderRightPanelTab)
+          }
+          className="hidden lg:flex"
+        >
+          <TabsList className="inline-flex items-center gap-2 border-b border-separator">
+            {template && (
               <TabsTrigger value="Template" label="Template" icon={MagicIcon} />
+            )}
+            {/* The agentConfigurationId is truthy iff not a new assistant */}
+            {agentConfigurationId && (
               <TabsTrigger
-                value="Preview"
-                label="Preview"
-                icon={ChatBubbleBottomCenterTextIcon}
+                value="Performance"
+                label="Performance"
+                icon={BarChartIcon}
               />
-            </TabsList>
-          </Tabs>
-        </div>
-      )}
+            )}
+            <TabsTrigger
+              value="Preview"
+              label="Preview"
+              icon={ChatBubbleBottomCenterTextIcon}
+            />
+          </TabsList>
+        </Tabs>
+      </div>
       <div
         className={classNames(
           template !== null
-            ? "grow-1 mb-5 h-full overflow-y-auto rounded-b-xl border-x border-b border-structure-200 bg-structure-50 pt-5"
-            : "grow-1 mb-5 mt-5 h-full overflow-y-auto rounded-xl border border-structure-200 bg-structure-50",
+            ? "grow-1 mb-5 h-full overflow-y-auto rounded-b-xl border-x border-b border-structure-200 pt-5"
+            : "grow-1 mb-5 mt-5 h-full overflow-y-auto rounded-xl border border-structure-200",
           shouldAnimatePreviewDrawer &&
             rightPanelStatus.tab === "Preview" &&
             rightPanelStatus.openedAt != null &&
@@ -136,7 +148,8 @@ export default function AssistantBuilderRightPanel({
             // This is to prevent the animation from triggering right after the drawer is opened.
             Date.now() - rightPanelStatus.openedAt > 1000
             ? "animate-reload"
-            : ""
+            : "",
+          rightPanelStatus.tab !== "Performance" ? "bg-structure-50" : ""
         )}
       >
         {(rightPanelStatus.tab === "Preview" || screen === "naming") &&
@@ -263,6 +276,15 @@ export default function AssistantBuilderRightPanel({
               </div>
             </div>
           )}
+        {rightPanelStatus.tab === "Performance" && agentConfigurationId && (
+          <div className="ml-4 mt-4">
+            <Page.SectionHeader title="Feedback" />
+            <FeedbacksSection
+              owner={owner}
+              agentConfigurationId={agentConfigurationId}
+            />
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx b/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
new file mode 100644
index 000000000000..1d6bfccc01ab
--- /dev/null
+++ b/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
@@ -0,0 +1,244 @@
+import {
+  Avatar,
+  Button,
+  ExternalLinkIcon,
+  HandThumbDownIcon,
+  HandThumbUpIcon,
+  Page,
+  Spinner,
+} from "@dust-tt/sparkle";
+import type {
+  LightAgentConfigurationType,
+  LightWorkspaceType,
+} from "@dust-tt/types";
+import { memo, useCallback, useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+
+import type { AgentMessageFeedbackWithMetadataType } from "@app/lib/api/assistant/feedback";
+import {
+  useAgentConfigurationFeedbacksByDescVersion,
+  useAgentConfigurationHistory,
+} from "@app/lib/swr/assistants";
+import { formatTimestampToFriendlyDate, timeAgoFrom } from "@app/lib/utils";
+
+const FEEDBACKS_PAGE_SIZE = 50;
+
+interface FeedbacksSectionProps {
+  owner: LightWorkspaceType;
+  agentConfigurationId: string;
+}
+export const FeedbacksSection = ({
+  owner,
+  agentConfigurationId,
+}: FeedbacksSectionProps) => {
+  const {
+    isAgentConfigurationFeedbacksLoading,
+    isValidating,
+    agentConfigurationFeedbacks,
+    hasMore,
+    setSize,
+    size,
+  } = useAgentConfigurationFeedbacksByDescVersion({
+    workspaceId: owner.sId,
+    agentConfigurationId: agentConfigurationId,
+    limit: FEEDBACKS_PAGE_SIZE,
+  });
+
+  // Intersection observer to detect when the user has scrolled to the bottom of the list.
+  const { ref: bottomRef, inView: isBottomOfListVisible } = useInView();
+  useEffect(() => {
+    if (
+      isBottomOfListVisible &&
+      hasMore &&
+      !isValidating &&
+      !isAgentConfigurationFeedbacksLoading
+    ) {
+      void setSize(size + 1);
+    }
+  }, [
+    isBottomOfListVisible,
+    hasMore,
+    isValidating,
+    isAgentConfigurationFeedbacksLoading,
+    setSize,
+    size,
+  ]);
+
+  const { agentConfigurationHistory, isAgentConfigurationHistoryLoading } =
+    useAgentConfigurationHistory({
+      workspaceId: owner.sId,
+      agentConfigurationId: agentConfigurationId,
+      disabled: !agentConfigurationId,
+    });
+
+  if (
+    isAgentConfigurationFeedbacksLoading ||
+    isAgentConfigurationHistoryLoading
+  ) {
+    return <Spinner />;
+  }
+
+  if (
+    !isAgentConfigurationFeedbacksLoading &&
+    (!agentConfigurationFeedbacks || agentConfigurationFeedbacks.length === 0)
+  ) {
+    return <div className="mt-3 text-sm text-element-900">No feedbacks.</div>;
+  }
+
+  if (!agentConfigurationHistory) {
+    return (
+      <div className="mt-3 text-sm text-element-900">
+        Error loading the previous agent versions.
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="mb-2 flex flex-col">
+        <AgentConfigurationVersionHeader
+          agentConfiguration={agentConfigurationHistory[0]}
+          agentConfigurationVersion={agentConfigurationHistory[0].version}
+          isLatestVersion
+        />
+        {agentConfigurationFeedbacks?.map((feedback, index) => {
+          const isFirstFeedback = index === 0;
+          const previousFeedbackHasDifferentVersion =
+            !isFirstFeedback &&
+            feedback.agentConfigurationVersion !==
+              agentConfigurationFeedbacks[index - 1].agentConfigurationVersion;
+          return (
+            <div key={feedback.id} className="animate-fadeIn">
+              {previousFeedbackHasDifferentVersion && (
+                <AgentConfigurationVersionHeader
+                  agentConfiguration={agentConfigurationHistory?.find(
+                    (c) => c.version === feedback.agentConfigurationVersion
+                  )}
+                  agentConfigurationVersion={feedback.agentConfigurationVersion}
+                  isLatestVersion={false}
+                />
+              )}
+              {!previousFeedbackHasDifferentVersion && !isFirstFeedback && (
+                <div className="mx-4 my-1">
+                  <Page.Separator />
+                </div>
+              )}
+              <div className="mr-2">
+                <MemoizedFeedbackCard
+                  owner={owner}
+                  feedback={feedback as AgentMessageFeedbackWithMetadataType}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      {/* Invisible div to act as a scroll anchor for detecting when the user has scrolled to the bottom */}
+      <div ref={bottomRef} className="h-1.5" />
+    </div>
+  );
+};
+
+interface AgentConfigurationVersionHeaderProps {
+  agentConfigurationVersion: number;
+  agentConfiguration: LightAgentConfigurationType | undefined;
+  isLatestVersion: boolean;
+}
+function AgentConfigurationVersionHeader({
+  agentConfigurationVersion,
+  agentConfiguration,
+  isLatestVersion,
+}: AgentConfigurationVersionHeaderProps) {
+  const getAgentConfigurationVersionString = useCallback(
+    (config: LightAgentConfigurationType) => {
+      if (isLatestVersion) {
+        return "Latest version";
+      }
+      if (!config.versionCreatedAt) {
+        return `v${config.version}`;
+      }
+      const versionDate = new Date(config.versionCreatedAt);
+      return formatTimestampToFriendlyDate(versionDate.getTime(), "long");
+    },
+    [isLatestVersion]
+  );
+
+  return (
+    <div className="mb-2 mt-4 text-sm font-medium">
+      {agentConfiguration
+        ? getAgentConfigurationVersionString(agentConfiguration)
+        : `v${agentConfigurationVersion}`}
+    </div>
+  );
+}
+
+interface FeedbackCardProps {
+  owner: LightWorkspaceType;
+  feedback: AgentMessageFeedbackWithMetadataType;
+}
+const MemoizedFeedbackCard = memo(FeedbackCard);
+function FeedbackCard({ owner, feedback }: FeedbackCardProps) {
+  const conversationUrl =
+    feedback.conversationId &&
+    feedback.messageId &&
+    // IMPORTANT: We need to check if the conversation is shared before displaying it.
+    // This check is redundant: the conversationId is null if the conversation is not shared.
+    feedback.isConversationShared
+      ? `${process.env.NEXT_PUBLIC_DUST_CLIENT_FACING_URL}/w/${owner.sId}/assistant/${feedback.conversationId}?messageId=${feedback.messageId}`
+      : null;
+
+  const timeSinceFeedback = timeAgoFrom(
+    new Date(feedback.createdAt).getTime(),
+    {
+      useLongFormat: true,
+    }
+  );
+
+  return (
+    <div className="rounded-lg p-2">
+      <div className="justify-content-around flex items-center">
+        <div className="flex w-full items-center gap-2">
+          {feedback.userImageUrl ? (
+            <Avatar
+              size="xs"
+              visual={feedback.userImageUrl}
+              name={feedback.userName}
+            />
+          ) : (
+            <Spinner size="xs" />
+          )}
+          <div className="flex-grow text-sm font-medium text-element-900">
+            {feedback.userName}
+          </div>
+        </div>
+
+        <div className="flex flex-shrink-0 flex-row items-center text-xs text-muted-foreground">
+          {timeSinceFeedback} ago
+          <div className="flex h-8 w-8 items-center justify-center rounded">
+            {feedback.thumbDirection === "up" ? (
+              <HandThumbUpIcon />
+            ) : (
+              <HandThumbDownIcon />
+            )}
+          </div>
+        </div>
+
+        <Button
+          variant="ghost"
+          size="xs"
+          href={conversationUrl ?? ""}
+          icon={ExternalLinkIcon}
+          disabled={!conversationUrl}
+          target="_blank"
+        />
+      </div>
+      {feedback.content && (
+        <div className="my-2 ml-4 flex items-center">
+          <div className="flex-grow text-sm leading-relaxed text-gray-700">
+            {feedback.content}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/front/components/assistant_builder/PrevNextButtons.tsx b/front/components/assistant_builder/PrevNextButtons.tsx
index 9eb27518a9c8..79715a446303 100644
--- a/front/components/assistant_builder/PrevNextButtons.tsx
+++ b/front/components/assistant_builder/PrevNextButtons.tsx
@@ -20,7 +20,7 @@ export function PrevNextButtons({
         <Button
           label="Previous"
           size="md"
-          variant="highlight"
+          variant="primary"
           onClick={() => {
             const newScreen = screen === "actions" ? "instructions" : "actions";
             setScreen(newScreen);
@@ -33,7 +33,7 @@ export function PrevNextButtons({
         <Button
           label="Next"
           size="md"
-          variant="highlight"
+          variant="primary"
           onClick={() => {
             const newScreen = screen === "instructions" ? "actions" : "naming";
             setScreen(newScreen);
diff --git a/front/lib/api/assistant/feedback.ts b/front/lib/api/assistant/feedback.ts
index 00e4dcfd6b03..9686022ed1ee 100644
--- a/front/lib/api/assistant/feedback.ts
+++ b/front/lib/api/assistant/feedback.ts
@@ -209,11 +209,14 @@ export async function getAgentFeedbacks({
     return new Err(new Error("agent_configuration_not_found"));
   }
 
-  const feedbacksRes = await AgentMessageFeedbackResource.fetch({
-    workspace: owner,
-    agentConfiguration,
-    paginationParams,
-  });
+  const feedbacksRes =
+    await AgentMessageFeedbackResource.getAgentConfigurationFeedbacksByDescVersion(
+      {
+        workspace: owner,
+        agentConfiguration,
+        paginationParams,
+      }
+    );
 
   const feedbacks = feedbacksRes.map((feedback) => feedback.toJSON());
 
@@ -223,7 +226,7 @@ export async function getAgentFeedbacks({
 
   const feedbacksWithHiddenConversationId = feedbacks.map((feedback) => ({
     ...feedback,
-    // Only display conversationId if the feedback was shared
+    // Redact the conversationId if user did not share the conversation.
     conversationId: feedback.isConversationShared
       ? feedback.conversationId
       : null,
diff --git a/front/lib/resources/agent_message_feedback_resource.ts b/front/lib/resources/agent_message_feedback_resource.ts
index 7e1e5dbf0197..e8bb69e48754 100644
--- a/front/lib/resources/agent_message_feedback_resource.ts
+++ b/front/lib/resources/agent_message_feedback_resource.ts
@@ -120,18 +120,19 @@ export class AgentMessageFeedbackResource extends BaseResource<AgentMessageFeedb
     });
   }
 
-  static async fetch({
+  static async getAgentConfigurationFeedbacksByDescVersion({
     workspace,
     agentConfiguration,
     paginationParams,
   }: {
     workspace: WorkspaceType;
-    agentConfiguration?: LightAgentConfigurationType;
+    agentConfiguration: LightAgentConfigurationType;
     paginationParams: PaginationParams;
   }) {
     const where: WhereOptions<AgentMessageFeedback> = {
-      // IMPORTANT: Necessary for global models who share ids across workspaces.
+      // Safety check: global models share ids across workspaces and some have had feedbacks.
       workspaceId: workspace.id,
+      agentConfigurationId: agentConfiguration.sId,
     };
 
     if (paginationParams.lastValue) {
@@ -140,9 +141,6 @@ export class AgentMessageFeedbackResource extends BaseResource<AgentMessageFeedb
         [op]: paginationParams.lastValue,
       };
     }
-    if (agentConfiguration) {
-      where.agentConfigurationId = agentConfiguration.sId.toString();
-    }
 
     const agentMessageFeedback = await AgentMessageFeedback.findAll({
       where,
@@ -173,6 +171,8 @@ export class AgentMessageFeedbackResource extends BaseResource<AgentMessageFeedb
         },
       ],
       order: [
+        // Necessary because a feedback can be given at any time on a  message linked to an old version.
+        ["agentConfigurationVersion", "DESC"],
         [
           paginationParams.orderColumn,
           paginationParams.orderDirection === "desc" ? "DESC" : "ASC",
diff --git a/front/lib/swr/assistants.ts b/front/lib/swr/assistants.ts
index e2d9b527dabb..89fd81548d55 100644
--- a/front/lib/swr/assistants.ts
+++ b/front/lib/swr/assistants.ts
@@ -11,9 +11,14 @@ import { useCallback, useMemo, useState } from "react";
 import type { Fetcher } from "swr";
 import { useSWRConfig } from "swr";
 
+import type {
+  AgentMessageFeedbackType,
+  AgentMessageFeedbackWithMetadataType,
+} from "@app/lib/api/assistant/feedback";
 import {
   fetcher,
   getErrorFromResponse,
+  useSWRInfiniteWithDefaults,
   useSWRWithDefaults,
 } from "@app/lib/swr/swr";
 import type { GetAgentConfigurationsResponseBody } from "@app/pages/api/w/[wId]/assistant/agent_configurations";
@@ -230,6 +235,77 @@ export function useAgentConfiguration({
   };
 }
 
+interface AgentConfigurationFeedbacksByDescVersionProps {
+  workspaceId: string;
+  agentConfigurationId: string | null;
+  limit: number;
+}
+export function useAgentConfigurationFeedbacksByDescVersion({
+  workspaceId,
+  agentConfigurationId,
+  limit,
+}: AgentConfigurationFeedbacksByDescVersionProps) {
+  const agentConfigurationFeedbacksFetcher: Fetcher<{
+    feedbacks: (
+      | AgentMessageFeedbackType
+      | AgentMessageFeedbackWithMetadataType
+    )[];
+  }> = fetcher;
+
+  const urlParams = new URLSearchParams({
+    limit: limit.toString(),
+    orderColumn: "id",
+    orderDirection: "desc",
+    withMetadata: "true",
+  });
+
+  const [hasMore, setHasMore] = useState(true);
+
+  const { data, error, mutate, size, setSize, isLoading, isValidating } =
+    useSWRInfiniteWithDefaults(
+      (pageIndex: number, previousPageData) => {
+        if (!agentConfigurationId) {
+          return null;
+        }
+
+        // If we have reached the last page and there are no more
+        // messages or the previous page has no messages, return null.
+        if (previousPageData && previousPageData.feedbacks.length < limit) {
+          setHasMore(false);
+          return null;
+        }
+
+        if (previousPageData !== null) {
+          const lastIdValue =
+            previousPageData.feedbacks[previousPageData.feedbacks.length - 1]
+              .id;
+          urlParams.append("lastValue", lastIdValue.toString());
+        }
+        return `/api/w/${workspaceId}/assistant/agent_configurations/${agentConfigurationId}/feedbacks?${urlParams.toString()}`;
+      },
+      agentConfigurationFeedbacksFetcher,
+      {
+        revalidateAll: false,
+        revalidateOnFocus: false,
+      }
+    );
+
+  return {
+    isLoadingInitialData: !error && !data,
+    isAgentConfigurationFeedbacksError: error,
+    isAgentConfigurationFeedbacksLoading: isLoading,
+    isValidating,
+    agentConfigurationFeedbacks: useMemo(
+      () => (data ? data.flatMap((d) => (d ? d.feedbacks : [])) : []),
+      [data]
+    ),
+    hasMore,
+    mutateAgentConfigurationFeedbacks: mutate,
+    setSize,
+    size,
+  };
+}
+
 export function useAgentConfigurationHistory({
   workspaceId,
   agentConfigurationId,
diff --git a/front/pages/api/w/[wId]/assistant/agent_configurations/[aId]/feedbacks.ts b/front/pages/api/w/[wId]/assistant/agent_configurations/[aId]/feedbacks.ts
index 332f812296ee..ee5315167db2 100644
--- a/front/pages/api/w/[wId]/assistant/agent_configurations/[aId]/feedbacks.ts
+++ b/front/pages/api/w/[wId]/assistant/agent_configurations/[aId]/feedbacks.ts
@@ -13,7 +13,9 @@ import { apiError } from "@app/logger/withlogging";
 async function handler(
   req: NextApiRequest,
   res: NextApiResponse<
-    WithAPIErrorResponse<{ feedbacks: AgentMessageFeedbackType[] }>
+    WithAPIErrorResponse<{
+      feedbacks: AgentMessageFeedbackType[];
+    }>
   >,
   auth: Authenticator
 ): Promise<void> {
@@ -77,7 +79,9 @@ async function handler(
 
       const feedbacks = feedbacksRes.value;
 
-      res.status(200).json({ feedbacks });
+      res.status(200).json({
+        feedbacks: feedbacks,
+      });
       return;
 
     default:
diff --git a/types/src/front/assistant/builder.ts b/types/src/front/assistant/builder.ts
index 29eec535d415..ce14c312294e 100644
--- a/types/src/front/assistant/builder.ts
+++ b/types/src/front/assistant/builder.ts
@@ -28,7 +28,11 @@ export const ASSISTANT_CREATIVITY_LEVEL_TEMPERATURES: Record<
   creative: 1.0,
 };
 
-export const ASSISTANT_BUILDER_DRAWER_TABS = ["Template", "Preview"] as const;
+export const ASSISTANT_BUILDER_DRAWER_TABS = [
+  "Template",
+  "Preview",
+  "Performance",
+] as const;
 
 export type AssistantBuilderRightPanelTab =
   (typeof ASSISTANT_BUILDER_DRAWER_TABS)[number];