From acc8fbeebeb561768ac08a0fb675f2a7edf2c687 Mon Sep 17 00:00:00 2001
From: Lucas <lucas@dust.tt>
Date: Tue, 31 Dec 2024 16:43:19 +0100
Subject: [PATCH 01/16] Main code brought in

---
 .../assistant_builder/AssistantBuilder.tsx    |  55 +--
 .../AssistantBuilderPreviewDrawer.tsx         | 324 +++++++++++++++++-
 .../assistant_builder/PrevNextButtons.tsx     |   4 +-
 front/lib/swr/assistants.ts                   |  54 +++
 types/src/front/assistant/builder.ts          |   6 +-
 5 files changed, 401 insertions(+), 42 deletions(-)

diff --git a/front/components/assistant_builder/AssistantBuilder.tsx b/front/components/assistant_builder/AssistantBuilder.tsx
index b52d4be3a214..fdf1bd12a45d 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,41 @@ 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"
+                      disabled={!agentConfigurationId}
+                    />
+                  )}
+                  {/* Template Button */}
+                  {template !== null && (
+                    <Button
+                      icon={MagicIcon}
+                      onClick={() => openRightPanelTab("Template")}
+                      size="sm"
+                      variant="outline"
+                      tooltip="Template instructions"
+                    />
+                  )}
                 </div>
               )}
             </>
@@ -565,6 +569,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..ad25e22656ac 100644
--- a/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
+++ b/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
@@ -1,10 +1,16 @@
 import {
+  Avatar,
   Button,
   ChatBubbleBottomCenterTextIcon,
+  cn,
+  ContentMessage,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  ExternalLinkIcon,
+  HandThumbDownIcon,
+  HandThumbUpIcon,
   LightbulbIcon,
   MagicIcon,
   Markdown,
@@ -19,10 +25,12 @@ import {
 import type {
   AssistantBuilderRightPanelStatus,
   AssistantBuilderRightPanelTab,
+  LightAgentConfigurationType,
+  LightWorkspaceType,
   WorkspaceType,
 } from "@dust-tt/types";
 import { Separator } from "@radix-ui/react-select";
-import { useContext, useEffect } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 
 import ConversationViewer from "@app/components/assistant/conversation/ConversationViewer";
 import { GenerationContextProvider } from "@app/components/assistant/conversation/GenerationContextProvider";
@@ -40,10 +48,18 @@ import type {
 import { getDefaultActionConfiguration } from "@app/components/assistant_builder/types";
 import { ConfirmContext } from "@app/components/Confirm";
 import { ACTION_SPECIFICATIONS } from "@app/lib/api/assistant/actions/utils";
+import type { AgentMessageFeedbackWithMetadataType } from "@app/lib/api/assistant/feedback";
+import {
+  useAgentConfigurationFeedbacks,
+  useAgentConfigurationHistory,
+} from "@app/lib/swr/assistants";
 import { useUser } from "@app/lib/swr/user";
-import { classNames } from "@app/lib/utils";
+import { timeAgoFrom } from "@app/lib/utils";
 import type { FetchAssistantTemplateResponse } from "@app/pages/api/w/[wId]/assistant/builder/templates/[tId]";
 
+const MAX_FEEDBACKS_TO_DISPLAY = 500;
+const FEEDBACKS_BATCH_SIZE = 50;
+
 interface AssistantBuilderRightPanelProps {
   screen: BuilderScreen;
   template: FetchAssistantTemplateResponse | null;
@@ -54,6 +70,7 @@ interface AssistantBuilderRightPanelProps {
   rightPanelStatus: AssistantBuilderRightPanelStatus;
   openRightPanelTab: (tabName: AssistantBuilderRightPanelTab) => void;
   builderState: AssistantBuilderState;
+  agentConfigurationId: string | null;
   setAction: (action: AssistantBuilderSetActionType) => void;
 }
 
@@ -67,6 +84,7 @@ export default function AssistantBuilderRightPanel({
   rightPanelStatus,
   openRightPanelTab,
   builderState,
+  agentConfigurationId,
   setAction,
 }: AssistantBuilderRightPanelProps) {
   const {
@@ -104,7 +122,8 @@ export default function AssistantBuilderRightPanel({
 
   return (
     <div className="flex h-full flex-col">
-      {template && (
+      {/* The agentConfigurationId is truthy iff not a new assistant */}
+      {(template || agentConfigurationId) && (
         <div className="shrink-0 bg-white pt-5">
           <Tabs
             value={rightPanelStatus.tab ?? "Preview"}
@@ -114,7 +133,20 @@ export default function AssistantBuilderRightPanel({
             className="hidden lg:flex"
           >
             <TabsList className="inline-flex h-10 items-center gap-2 border-b border-separator">
-              <TabsTrigger value="Template" label="Template" icon={MagicIcon} />
+              {template && (
+                <TabsTrigger
+                  value="Template"
+                  label="Template"
+                  icon={MagicIcon}
+                />
+              )}
+              {agentConfigurationId && (
+                <TabsTrigger
+                  value="Performance"
+                  label="Performance"
+                  icon={LightbulbIcon}
+                />
+              )}
               <TabsTrigger
                 value="Preview"
                 label="Preview"
@@ -125,18 +157,20 @@ export default function AssistantBuilderRightPanel({
         </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",
-          shouldAnimatePreviewDrawer &&
-            rightPanelStatus.tab === "Preview" &&
-            rightPanelStatus.openedAt != null &&
+        className={cn(
+          "grow-1 mb-5 h-full overflow-y-auto border-structure-200",
+          {
+            "rounded-b-xl border-x border-b pt-5": !!template,
+            "mt-5 rounded-xl border border-structure-200": !template,
+            "bg-structure-50": rightPanelStatus.tab !== "Performance",
             // Only animate the reload if the drawer has been open for at least 1 second.
             // This is to prevent the animation from triggering right after the drawer is opened.
-            Date.now() - rightPanelStatus.openedAt > 1000
-            ? "animate-reload"
-            : ""
+            "animate-reload":
+              shouldAnimatePreviewDrawer &&
+              rightPanelStatus.tab === "Preview" &&
+              rightPanelStatus.openedAt != null &&
+              Date.now() - rightPanelStatus.openedAt > 1000,
+          }
         )}
       >
         {(rightPanelStatus.tab === "Preview" || screen === "naming") &&
@@ -263,6 +297,15 @@ export default function AssistantBuilderRightPanel({
               </div>
             </div>
           )}
+        {rightPanelStatus.tab === "Performance" && agentConfigurationId && (
+          <div className="ml-4 mt-4">
+            <Page.SectionHeader title="Feedback" />
+            <FeedbacksSection
+              owner={owner}
+              assistantId={agentConfigurationId}
+            />
+          </div>
+        )}
       </div>
     </div>
   );
@@ -372,3 +415,256 @@ const TemplateDropDownMenu = ({
     </DropdownMenu>
   );
 };
+
+const FeedbacksSection = ({
+  owner,
+  assistantId,
+}: {
+  owner: LightWorkspaceType;
+  assistantId: string;
+}) => {
+  // Used for pagination
+  const [feedbacksExhausted, setFeedbacksExhausted] = useState(false);
+  const [currentOldestFeedbackId, setCurrentOldestFeedbackId] = useState<
+    number | undefined
+  >(undefined);
+
+  // All retrieved Feedbacks
+  const [feedbacks, setFeedbacks] = useState<
+    AgentMessageFeedbackWithMetadataType[]
+  >([]);
+  const { agentConfigurationFeedbacks, isAgentConfigurationFeedbacksLoading } =
+    useAgentConfigurationFeedbacks({
+      workspaceId: owner.sId,
+      agentConfigurationId: assistantId ?? "",
+      withMetadata: true,
+      paginationParams: {
+        limit: FEEDBACKS_BATCH_SIZE,
+        lastValue: currentOldestFeedbackId,
+        orderColumn: "id",
+        orderDirection: "asc",
+      },
+    });
+
+  // Handle pagination updates.
+  useEffect(() => {
+    if (
+      !!agentConfigurationFeedbacks &&
+      agentConfigurationFeedbacks.length > 0
+    ) {
+      setFeedbacks((prevFeedbacks) => {
+        const newFeedbacks = agentConfigurationFeedbacks.filter(
+          (f) => !prevFeedbacks.some((pf) => pf.id === f.id)
+        ) as AgentMessageFeedbackWithMetadataType[];
+        return [...prevFeedbacks, ...newFeedbacks];
+      });
+    }
+  }, [agentConfigurationFeedbacks]);
+
+  // Determine when feedback is exhausted
+  useEffect(() => {
+    if (!agentConfigurationFeedbacks) {
+      return;
+    }
+    setFeedbacksExhausted(
+      agentConfigurationFeedbacks.length === 0 ||
+        // We limit the number of feedbacks to prevent the page from becoming too slow.
+        feedbacks.length + FEEDBACKS_BATCH_SIZE > MAX_FEEDBACKS_TO_DISPLAY
+    );
+  }, [agentConfigurationFeedbacks, feedbacks]);
+
+  const { agentConfigurationHistory, isAgentConfigurationHistoryLoading } =
+    useAgentConfigurationHistory({
+      workspaceId: owner.sId,
+      agentConfigurationId: assistantId,
+    });
+
+  const handleLoadMoreFeedbacks = useCallback(() => {
+    if (agentConfigurationFeedbacks && agentConfigurationFeedbacks.length > 0) {
+      // This triggers a re-fetch of the feedbacks.
+      setCurrentOldestFeedbackId(
+        agentConfigurationFeedbacks[agentConfigurationFeedbacks.length - 1].id
+      );
+    }
+  }, [agentConfigurationFeedbacks]);
+
+  if (
+    isAgentConfigurationFeedbacksLoading ||
+    isAgentConfigurationHistoryLoading
+  ) {
+    return <Spinner />;
+  }
+
+  if (
+    !isAgentConfigurationFeedbacksLoading &&
+    (!feedbacks || feedbacks.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 gap-2">
+        <AgentConfigurationVersionHeader
+          agentConfiguration={agentConfigurationHistory[0]}
+          agentConfigurationVersion={agentConfigurationHistory[0].version}
+          isLatestVersion={true}
+        />
+        {feedbacks.map((feedback, index) => (
+          <div key={feedback.id} className="animate-fadeIn">
+            {index > 0 &&
+              feedback.agentConfigurationVersion !==
+                feedbacks[index - 1].agentConfigurationVersion && (
+                <AgentConfigurationVersionHeader
+                  agentConfiguration={agentConfigurationHistory?.find(
+                    (c) => c.version === feedback.agentConfigurationVersion
+                  )}
+                  agentConfigurationVersion={feedback.agentConfigurationVersion}
+                  isLatestVersion={false}
+                />
+              )}
+            <div className="mr-2">
+              <FeedbackCard
+                owner={owner}
+                feedback={feedback as AgentMessageFeedbackWithMetadataType}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+      {feedbacks && !feedbacksExhausted && (
+        <div className="mb-2 flex justify-center">
+          <Button
+            size="sm"
+            variant="outline"
+            label="Load more feedbacks"
+            onClick={handleLoadMoreFeedbacks}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+function AgentConfigurationVersionHeader({
+  agentConfigurationVersion,
+  agentConfiguration,
+  isLatestVersion,
+}: {
+  agentConfigurationVersion: number;
+  agentConfiguration: LightAgentConfigurationType | undefined;
+  isLatestVersion: boolean;
+}) {
+  const getAgentConfigurationVersionString = useCallback(
+    (config: LightAgentConfigurationType) => {
+      if (isLatestVersion) {
+        return "Latest version";
+      }
+      if (!config.versionCreatedAt) {
+        return `v${config.version}`;
+      }
+      return new Date(config.versionCreatedAt).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: "numeric",
+        minute: "numeric",
+      });
+    },
+    [isLatestVersion]
+  );
+
+  return (
+    <div className="mb-2 mt-4 text-sm font-medium">
+      {agentConfiguration
+        ? getAgentConfigurationVersionString(agentConfiguration)
+        : `v${agentConfigurationVersion}`}
+    </div>
+  );
+}
+
+function FeedbackCard({
+  owner,
+  feedback,
+}: {
+  owner: LightWorkspaceType;
+  feedback: AgentMessageFeedbackWithMetadataType;
+}) {
+  const conversationUrl =
+    feedback.conversationId &&
+    feedback.messageId &&
+    feedback.isConversationShared
+      ? `${process.env.NEXT_PUBLIC_DUST_CLIENT_FACING_URL}/w/${owner.sId}/assistant/${feedback.conversationId}#${feedback.messageId}`
+      : null;
+
+  const timeSinceFeedback = timeAgoFrom(
+    new Date(feedback.createdAt).getTime(),
+    {
+      useLongFormat: true,
+    }
+  );
+
+  return (
+    <ContentMessage
+      variant="slate"
+      className="rounded-lg border border-gray-200 p-2"
+    >
+      <div className="justify-content-around flex items-center gap-2">
+        <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="text-md flex-grow font-medium text-element-900">
+            {feedback.userName}
+          </div>
+        </div>
+
+        <div className="flex flex-shrink-0 flex-row items-center gap-2 text-xs text-muted-foreground">
+          {timeSinceFeedback} ago
+          <div
+            className={cn("flex h-8 w-8 items-center justify-center rounded", {
+              "bg-sky-100": feedback.thumbDirection === "up",
+              "bg-pink-100": feedback.thumbDirection === "down",
+            })}
+          >
+            {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>
+      )}
+    </ContentMessage>
+  );
+}
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/swr/assistants.ts b/front/lib/swr/assistants.ts
index 98db30541682..2a9018eabd60 100644
--- a/front/lib/swr/assistants.ts
+++ b/front/lib/swr/assistants.ts
@@ -11,6 +11,11 @@ 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 type { PaginationParams } from "@app/lib/api/pagination";
 import {
   fetcher,
   getErrorFromResponse,
@@ -227,6 +232,55 @@ export function useAgentConfiguration({
   };
 }
 
+export function useAgentConfigurationFeedbacks({
+  workspaceId,
+  agentConfigurationId,
+  withMetadata,
+  paginationParams,
+  disabled,
+}: {
+  workspaceId: string;
+  agentConfigurationId: string | null;
+  paginationParams: PaginationParams;
+  withMetadata?: boolean;
+  disabled?: boolean;
+}) {
+  const agentConfigurationFeedbacksFetcher: Fetcher<{
+    feedbacks: (
+      | AgentMessageFeedbackType
+      | AgentMessageFeedbackWithMetadataType
+    )[];
+  }> = fetcher;
+
+  const urlParams = new URLSearchParams({
+    limit: paginationParams.limit.toString(),
+    orderColumn: paginationParams.orderColumn,
+    orderDirection: paginationParams.orderDirection,
+  });
+  if (withMetadata) {
+    urlParams.append("withMetadata", "true");
+  }
+  if (paginationParams.lastValue) {
+    urlParams.append("lastValue", paginationParams.lastValue.toString());
+  }
+
+  const { data, error, mutate } = useSWRWithDefaults(
+    agentConfigurationId
+      ? `/api/w/${workspaceId}/assistant/agent_configurations/${agentConfigurationId}/feedbacks?${urlParams.toString()}`
+      : null,
+    agentConfigurationFeedbacksFetcher,
+    // If agentConfigurationId is null, we don't want to fetch
+    { disabled: disabled || !agentConfigurationId }
+  );
+
+  return {
+    agentConfigurationFeedbacks: data ? data.feedbacks : null,
+    isAgentConfigurationFeedbacksLoading: !error && !data,
+    isAgentConfigurationFeedbacksError: error,
+    mutateAgentConfigurationFeedbacks: mutate,
+  };
+}
+
 export function useAgentConfigurationHistory({
   workspaceId,
   agentConfigurationId,
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];

From c29d5045cf18d760167efc825f376d6f03a2ec87 Mon Sep 17 00:00:00 2001
From: Lucas <lucas@dust.tt>
Date: Tue, 31 Dec 2024 17:47:29 +0100
Subject: [PATCH 02/16] Improved design for feedback list. Bug with ordering

---
 .../AssistantBuilderPreviewDrawer.tsx         | 58 ++++++++++---------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx b/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
index ad25e22656ac..3dc9ee42c2eb 100644
--- a/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
+++ b/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
@@ -442,7 +442,7 @@ const FeedbacksSection = ({
         limit: FEEDBACKS_BATCH_SIZE,
         lastValue: currentOldestFeedbackId,
         orderColumn: "id",
-        orderDirection: "asc",
+        orderDirection: "desc",
       },
     });
 
@@ -512,17 +512,21 @@ const FeedbacksSection = ({
 
   return (
     <div>
-      <div className="mb-2 flex flex-col gap-2">
+      <div className="mb-2 flex flex-col">
         <AgentConfigurationVersionHeader
           agentConfiguration={agentConfigurationHistory[0]}
           agentConfigurationVersion={agentConfigurationHistory[0].version}
           isLatestVersion={true}
         />
-        {feedbacks.map((feedback, index) => (
-          <div key={feedback.id} className="animate-fadeIn">
-            {index > 0 &&
-              feedback.agentConfigurationVersion !==
-                feedbacks[index - 1].agentConfigurationVersion && (
+        {feedbacks.map((feedback, index) => {
+          const isFirstFeedback = index === 0;
+          const isNewVersion =
+            !isFirstFeedback &&
+            feedback.agentConfigurationVersion !==
+              feedbacks[index - 1].agentConfigurationVersion;
+          return (
+            <div key={feedback.id} className="animate-fadeIn">
+              {isNewVersion && (
                 <AgentConfigurationVersionHeader
                   agentConfiguration={agentConfigurationHistory?.find(
                     (c) => c.version === feedback.agentConfigurationVersion
@@ -531,14 +535,20 @@ const FeedbacksSection = ({
                   isLatestVersion={false}
                 />
               )}
-            <div className="mr-2">
-              <FeedbackCard
-                owner={owner}
-                feedback={feedback as AgentMessageFeedbackWithMetadataType}
-              />
+              {!isNewVersion && !isFirstFeedback && (
+                <div className="mx-4">
+                  <Page.Separator />
+                </div>
+              )}
+              <div className="mr-2">
+                <FeedbackCard
+                  owner={owner}
+                  feedback={feedback as AgentMessageFeedbackWithMetadataType}
+                />
+              </div>
             </div>
-          </div>
-        ))}
+          );
+        })}
       </div>
       {feedbacks && !feedbacksExhausted && (
         <div className="mb-2 flex justify-center">
@@ -613,11 +623,8 @@ function FeedbackCard({
   );
 
   return (
-    <ContentMessage
-      variant="slate"
-      className="rounded-lg border border-gray-200 p-2"
-    >
-      <div className="justify-content-around flex items-center gap-2">
+    <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
@@ -628,19 +635,14 @@ function FeedbackCard({
           ) : (
             <Spinner size="xs" />
           )}
-          <div className="text-md flex-grow font-medium text-element-900">
+          <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 gap-2 text-xs text-muted-foreground">
+        <div className="flex flex-shrink-0 flex-row items-center text-xs text-muted-foreground">
           {timeSinceFeedback} ago
-          <div
-            className={cn("flex h-8 w-8 items-center justify-center rounded", {
-              "bg-sky-100": feedback.thumbDirection === "up",
-              "bg-pink-100": feedback.thumbDirection === "down",
-            })}
-          >
+          <div className="flex h-8 w-8 items-center justify-center rounded">
             {feedback.thumbDirection === "up" ? (
               <HandThumbUpIcon />
             ) : (
@@ -665,6 +667,6 @@ function FeedbackCard({
           </div>
         </div>
       )}
-    </ContentMessage>
+    </div>
   );
 }

From 6ff05c260d64fd3835e14f92ac9e77cddb88c24e Mon Sep 17 00:00:00 2001
From: Lucas <lucas@dust.tt>
Date: Thu, 2 Jan 2025 11:11:43 +0100
Subject: [PATCH 03/16] Specialized fetch function (renamed), small margin
 added to feedbacks, more loaded at once

---
 .../AssistantBuilderPreviewDrawer.tsx               | 10 +++++-----
 front/lib/api/assistant/feedback.ts                 | 13 ++++++++-----
 .../resources/agent_message_feedback_resource.ts    |  9 ++++-----
 front/lib/swr/assistants.ts                         |  2 +-
 4 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx b/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
index 3dc9ee42c2eb..90ce4b28f1b5 100644
--- a/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
+++ b/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
@@ -3,7 +3,6 @@ import {
   Button,
   ChatBubbleBottomCenterTextIcon,
   cn,
-  ContentMessage,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -50,7 +49,7 @@ import { ConfirmContext } from "@app/components/Confirm";
 import { ACTION_SPECIFICATIONS } from "@app/lib/api/assistant/actions/utils";
 import type { AgentMessageFeedbackWithMetadataType } from "@app/lib/api/assistant/feedback";
 import {
-  useAgentConfigurationFeedbacks,
+  useAgentConfigurationFeedbacksByDescVersion,
   useAgentConfigurationHistory,
 } from "@app/lib/swr/assistants";
 import { useUser } from "@app/lib/swr/user";
@@ -58,7 +57,7 @@ import { timeAgoFrom } from "@app/lib/utils";
 import type { FetchAssistantTemplateResponse } from "@app/pages/api/w/[wId]/assistant/builder/templates/[tId]";
 
 const MAX_FEEDBACKS_TO_DISPLAY = 500;
-const FEEDBACKS_BATCH_SIZE = 50;
+const FEEDBACKS_BATCH_SIZE = 100;
 
 interface AssistantBuilderRightPanelProps {
   screen: BuilderScreen;
@@ -433,8 +432,9 @@ const FeedbacksSection = ({
   const [feedbacks, setFeedbacks] = useState<
     AgentMessageFeedbackWithMetadataType[]
   >([]);
+  // Decreasing version, paginated decreasing id.
   const { agentConfigurationFeedbacks, isAgentConfigurationFeedbacksLoading } =
-    useAgentConfigurationFeedbacks({
+    useAgentConfigurationFeedbacksByDescVersion({
       workspaceId: owner.sId,
       agentConfigurationId: assistantId ?? "",
       withMetadata: true,
@@ -536,7 +536,7 @@ const FeedbacksSection = ({
                 />
               )}
               {!isNewVersion && !isFirstFeedback && (
-                <div className="mx-4">
+                <div className="mx-4 my-1">
                   <Page.Separator />
                 </div>
               )}
diff --git a/front/lib/api/assistant/feedback.ts b/front/lib/api/assistant/feedback.ts
index 00e4dcfd6b03..8ca76e70c0b4 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());
 
diff --git a/front/lib/resources/agent_message_feedback_resource.ts b/front/lib/resources/agent_message_feedback_resource.ts
index b53448983ae0..7b710f5b3856 100644
--- a/front/lib/resources/agent_message_feedback_resource.ts
+++ b/front/lib/resources/agent_message_feedback_resource.ts
@@ -115,18 +115,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.
       workspaceId: workspace.id,
+      agentConfigurationId: agentConfiguration.sId.toString(),
     };
 
     if (paginationParams.lastValue) {
@@ -135,9 +136,6 @@ export class AgentMessageFeedbackResource extends BaseResource<AgentMessageFeedb
         [op]: paginationParams.lastValue,
       };
     }
-    if (agentConfiguration) {
-      where.agentConfigurationId = agentConfiguration.sId.toString();
-    }
 
     const agentMessageFeedback = await AgentMessageFeedback.findAll({
       where,
@@ -168,6 +166,7 @@ export class AgentMessageFeedbackResource extends BaseResource<AgentMessageFeedb
         },
       ],
       order: [
+        ["agentConfigurationVersion", "DESC"],
         [
           paginationParams.orderColumn,
           paginationParams.orderDirection === "desc" ? "DESC" : "ASC",
diff --git a/front/lib/swr/assistants.ts b/front/lib/swr/assistants.ts
index 2a9018eabd60..1f93cc2213a2 100644
--- a/front/lib/swr/assistants.ts
+++ b/front/lib/swr/assistants.ts
@@ -232,7 +232,7 @@ export function useAgentConfiguration({
   };
 }
 
-export function useAgentConfigurationFeedbacks({
+export function useAgentConfigurationFeedbacksByDescVersion({
   workspaceId,
   agentConfigurationId,
   withMetadata,

From 937ac1965621a9b62a20b217ba8739811c619858 Mon Sep 17 00:00:00 2001
From: Lucas <lucas@dust.tt>
Date: Thu, 2 Jan 2025 13:59:42 +0100
Subject: [PATCH 04/16] Using pagination inside feedbacks side modal

---
 .../AssistantBuilderPreviewDrawer.tsx         | 140 ++++++++++--------
 front/lib/api/assistant/feedback.ts           |  10 +-
 .../agent_message_feedback_resource.ts        |   7 +-
 front/lib/swr/assistants.ts                   |   3 +-
 .../agent_configurations/[aId]/feedbacks.ts   |  10 +-
 5 files changed, 99 insertions(+), 71 deletions(-)

diff --git a/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx b/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
index 90ce4b28f1b5..5257b538921a 100644
--- a/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
+++ b/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
@@ -15,6 +15,7 @@ import {
   Markdown,
   MoreIcon,
   Page,
+  Pagination,
   Spinner,
   Tabs,
   TabsList,
@@ -29,7 +30,8 @@ import type {
   WorkspaceType,
 } from "@dust-tt/types";
 import { Separator } from "@radix-ui/react-select";
-import { useCallback, useContext, useEffect, useState } from "react";
+import type { PaginationState } from "@tanstack/react-table";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 
 import ConversationViewer from "@app/components/assistant/conversation/ConversationViewer";
 import { GenerationContextProvider } from "@app/components/assistant/conversation/GenerationContextProvider";
@@ -56,8 +58,7 @@ import { useUser } from "@app/lib/swr/user";
 import { timeAgoFrom } from "@app/lib/utils";
 import type { FetchAssistantTemplateResponse } from "@app/pages/api/w/[wId]/assistant/builder/templates/[tId]";
 
-const MAX_FEEDBACKS_TO_DISPLAY = 500;
-const FEEDBACKS_BATCH_SIZE = 100;
+const FEEDBACKS_BATCH_SIZE = 50;
 
 interface AssistantBuilderRightPanelProps {
   screen: BuilderScreen;
@@ -422,16 +423,16 @@ const FeedbacksSection = ({
   owner: LightWorkspaceType;
   assistantId: string;
 }) => {
-  // Used for pagination
-  const [feedbacksExhausted, setFeedbacksExhausted] = useState(false);
-  const [currentOldestFeedbackId, setCurrentOldestFeedbackId] = useState<
-    number | undefined
-  >(undefined);
+  // Used for pagination's lastValue: BatchId -> LastFeedbackId
+  const [lastIdForBatches, setLastIdForBatches] = useState<
+    Record<number, number>
+  >({});
+
+  const [paginationState, setPaginationState] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: FEEDBACKS_BATCH_SIZE,
+  });
 
-  // All retrieved Feedbacks
-  const [feedbacks, setFeedbacks] = useState<
-    AgentMessageFeedbackWithMetadataType[]
-  >([]);
   // Decreasing version, paginated decreasing id.
   const { agentConfigurationFeedbacks, isAgentConfigurationFeedbacksLoading } =
     useAgentConfigurationFeedbacksByDescVersion({
@@ -440,53 +441,53 @@ const FeedbacksSection = ({
       withMetadata: true,
       paginationParams: {
         limit: FEEDBACKS_BATCH_SIZE,
-        lastValue: currentOldestFeedbackId,
+        lastValue:
+          paginationState.pageIndex === 0
+            ? undefined
+            : lastIdForBatches[paginationState.pageIndex - 1],
         orderColumn: "id",
         orderDirection: "desc",
       },
     });
 
-  // Handle pagination updates.
-  useEffect(() => {
-    if (
-      !!agentConfigurationFeedbacks &&
-      agentConfigurationFeedbacks.length > 0
-    ) {
-      setFeedbacks((prevFeedbacks) => {
-        const newFeedbacks = agentConfigurationFeedbacks.filter(
-          (f) => !prevFeedbacks.some((pf) => pf.id === f.id)
-        ) as AgentMessageFeedbackWithMetadataType[];
-        return [...prevFeedbacks, ...newFeedbacks];
-      });
-    }
-  }, [agentConfigurationFeedbacks]);
-
-  // Determine when feedback is exhausted
-  useEffect(() => {
-    if (!agentConfigurationFeedbacks) {
-      return;
-    }
-    setFeedbacksExhausted(
-      agentConfigurationFeedbacks.length === 0 ||
-        // We limit the number of feedbacks to prevent the page from becoming too slow.
-        feedbacks.length + FEEDBACKS_BATCH_SIZE > MAX_FEEDBACKS_TO_DISPLAY
-    );
-  }, [agentConfigurationFeedbacks, feedbacks]);
-
   const { agentConfigurationHistory, isAgentConfigurationHistoryLoading } =
     useAgentConfigurationHistory({
       workspaceId: owner.sId,
       agentConfigurationId: assistantId,
     });
 
-  const handleLoadMoreFeedbacks = useCallback(() => {
-    if (agentConfigurationFeedbacks && agentConfigurationFeedbacks.length > 0) {
-      // This triggers a re-fetch of the feedbacks.
-      setCurrentOldestFeedbackId(
-        agentConfigurationFeedbacks[agentConfigurationFeedbacks.length - 1].id
-      );
-    }
-  }, [agentConfigurationFeedbacks]);
+  const handleSetPagination = useCallback(
+    (pagination: PaginationState) => {
+      // Pagination is not displayed if there are no feedbacks.
+      if (
+        !agentConfigurationFeedbacks ||
+        agentConfigurationFeedbacks.feedbacks.length === 0
+      ) {
+        return;
+      }
+      setLastIdForBatches((prev) => ({
+        ...prev,
+        ...{
+          [paginationState.pageIndex]:
+            agentConfigurationFeedbacks.feedbacks[
+              agentConfigurationFeedbacks.feedbacks.length - 1
+            ].id,
+        },
+      }));
+      setPaginationState(pagination);
+    },
+    [agentConfigurationFeedbacks, paginationState.pageIndex]
+  );
+
+  const firstAgentConfigurationInBatch = useMemo(
+    () =>
+      agentConfigurationHistory?.find(
+        (c) =>
+          c.version ===
+          agentConfigurationFeedbacks?.feedbacks[0].agentConfigurationVersion
+      ),
+    [agentConfigurationHistory, agentConfigurationFeedbacks]
+  );
 
   if (
     isAgentConfigurationFeedbacksLoading ||
@@ -497,12 +498,13 @@ const FeedbacksSection = ({
 
   if (
     !isAgentConfigurationFeedbacksLoading &&
-    (!feedbacks || feedbacks.length === 0)
+    (!agentConfigurationFeedbacks ||
+      agentConfigurationFeedbacks.feedbacks.length === 0)
   ) {
     return <div className="mt-3 text-sm text-element-900">No feedbacks.</div>;
   }
 
-  if (!agentConfigurationHistory) {
+  if (!agentConfigurationHistory || !firstAgentConfigurationInBatch) {
     return (
       <div className="mt-3 text-sm text-element-900">
         Error loading the previous agent versions.
@@ -514,16 +516,20 @@ const FeedbacksSection = ({
     <div>
       <div className="mb-2 flex flex-col">
         <AgentConfigurationVersionHeader
-          agentConfiguration={agentConfigurationHistory[0]}
-          agentConfigurationVersion={agentConfigurationHistory[0].version}
-          isLatestVersion={true}
+          agentConfiguration={firstAgentConfigurationInBatch}
+          agentConfigurationVersion={firstAgentConfigurationInBatch?.version}
+          isLatestVersion={
+            firstAgentConfigurationInBatch?.version ===
+            agentConfigurationHistory[0].version
+          }
         />
-        {feedbacks.map((feedback, index) => {
+        {agentConfigurationFeedbacks?.feedbacks.map((feedback, index) => {
           const isFirstFeedback = index === 0;
           const isNewVersion =
             !isFirstFeedback &&
             feedback.agentConfigurationVersion !==
-              feedbacks[index - 1].agentConfigurationVersion;
+              agentConfigurationFeedbacks.feedbacks[index - 1]
+                .agentConfigurationVersion;
           return (
             <div key={feedback.id} className="animate-fadeIn">
               {isNewVersion && (
@@ -550,16 +556,20 @@ const FeedbacksSection = ({
           );
         })}
       </div>
-      {feedbacks && !feedbacksExhausted && (
-        <div className="mb-2 flex justify-center">
-          <Button
-            size="sm"
-            variant="outline"
-            label="Load more feedbacks"
-            onClick={handleLoadMoreFeedbacks}
-          />
-        </div>
-      )}
+      {agentConfigurationFeedbacks &&
+        agentConfigurationFeedbacks.totalFeedbackCount > 0 && (
+          <div className="my-2 mr-2">
+            <Pagination
+              rowCount={agentConfigurationFeedbacks.totalFeedbackCount}
+              pagination={paginationState}
+              setPagination={handleSetPagination}
+              size="xs"
+              showDetails={true}
+              // Important: We need to go page by page to keep track of last cursor id.
+              showPageButtons={false}
+            />
+          </div>
+        )}
     </div>
   );
 };
diff --git a/front/lib/api/assistant/feedback.ts b/front/lib/api/assistant/feedback.ts
index 8ca76e70c0b4..666b589daa4b 100644
--- a/front/lib/api/assistant/feedback.ts
+++ b/front/lib/api/assistant/feedback.ts
@@ -194,7 +194,13 @@ export async function getAgentFeedbacks({
   paginationParams: PaginationParams;
 }): Promise<
   Result<
-    (AgentMessageFeedbackType | AgentMessageFeedbackWithMetadataType)[],
+    {
+      feedbacks: (
+        | AgentMessageFeedbackType
+        | AgentMessageFeedbackWithMetadataType
+      )[];
+      totalFeedbackCount: number;
+    },
     Error
   >
 > {
@@ -226,7 +232,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 7b710f5b3856..bf5602782c20 100644
--- a/front/lib/resources/agent_message_feedback_resource.ts
+++ b/front/lib/resources/agent_message_feedback_resource.ts
@@ -130,6 +130,11 @@ export class AgentMessageFeedbackResource extends BaseResource<AgentMessageFeedb
       agentConfigurationId: agentConfiguration.sId.toString(),
     };
 
+    // Get the total feedback count, because needed for pagination
+    const totalFeedbackCountPromise = AgentMessageFeedback.count({
+      where,
+    });
+
     if (paginationParams.lastValue) {
       const op = paginationParams.orderDirection === "desc" ? Op.lt : Op.gt;
       where[paginationParams.orderColumn as any] = {
@@ -137,7 +142,7 @@ export class AgentMessageFeedbackResource extends BaseResource<AgentMessageFeedb
       };
     }
 
-    const agentMessageFeedback = await AgentMessageFeedback.findAll({
+    const agentMessageFeedbackPromise = AgentMessageFeedback.findAll({
       where,
       include: [
         {
diff --git a/front/lib/swr/assistants.ts b/front/lib/swr/assistants.ts
index 1f93cc2213a2..20b0c24e0dc4 100644
--- a/front/lib/swr/assistants.ts
+++ b/front/lib/swr/assistants.ts
@@ -250,6 +250,7 @@ export function useAgentConfigurationFeedbacksByDescVersion({
       | AgentMessageFeedbackType
       | AgentMessageFeedbackWithMetadataType
     )[];
+    totalFeedbackCount: number;
   }> = fetcher;
 
   const urlParams = new URLSearchParams({
@@ -274,7 +275,7 @@ export function useAgentConfigurationFeedbacksByDescVersion({
   );
 
   return {
-    agentConfigurationFeedbacks: data ? data.feedbacks : null,
+    agentConfigurationFeedbacks: data ? data : null,
     isAgentConfigurationFeedbacksLoading: !error && !data,
     isAgentConfigurationFeedbacksError: error,
     mutateAgentConfigurationFeedbacks: mutate,
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..7cc2e3ef7301 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,10 @@ import { apiError } from "@app/logger/withlogging";
 async function handler(
   req: NextApiRequest,
   res: NextApiResponse<
-    WithAPIErrorResponse<{ feedbacks: AgentMessageFeedbackType[] }>
+    WithAPIErrorResponse<{
+      feedbacks: AgentMessageFeedbackType[];
+      totalFeedbackCount: number;
+    }>
   >,
   auth: Authenticator
 ): Promise<void> {
@@ -77,7 +80,10 @@ async function handler(
 
       const feedbacks = feedbacksRes.value;
 
-      res.status(200).json({ feedbacks });
+      res.status(200).json({
+        feedbacks: feedbacks.feedbacks,
+        totalFeedbackCount: feedbacks.totalFeedbackCount,
+      });
       return;
 
     default:

From f850b2e6009830b6358a24a614094fda602c09aa Mon Sep 17 00:00:00 2001
From: Lucas <lucas@dust.tt>
Date: Thu, 2 Jan 2025 16:14:49 +0100
Subject: [PATCH 05/16] Renamed batch to page, minor improvements

---
 .../assistant_builder/AssistantBuilder.tsx    |   1 -
 .../AssistantBuilderPreviewDrawer.tsx         | 112 +++++++++---------
 .../agent_message_feedback_resource.ts        |   1 +
 3 files changed, 54 insertions(+), 60 deletions(-)

diff --git a/front/components/assistant_builder/AssistantBuilder.tsx b/front/components/assistant_builder/AssistantBuilder.tsx
index fdf1bd12a45d..01ec5f353917 100644
--- a/front/components/assistant_builder/AssistantBuilder.tsx
+++ b/front/components/assistant_builder/AssistantBuilder.tsx
@@ -535,7 +535,6 @@ export default function AssistantBuilder({
                       size="sm"
                       variant="outline"
                       tooltip="Inspect feedback and performance"
-                      disabled={!agentConfigurationId}
                     />
                   )}
                   {/* Template Button */}
diff --git a/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx b/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
index 5257b538921a..6a142d92b9b7 100644
--- a/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
+++ b/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
@@ -55,10 +55,10 @@ import {
   useAgentConfigurationHistory,
 } from "@app/lib/swr/assistants";
 import { useUser } from "@app/lib/swr/user";
-import { timeAgoFrom } from "@app/lib/utils";
+import { formatTimestampToFriendlyDate, timeAgoFrom } from "@app/lib/utils";
 import type { FetchAssistantTemplateResponse } from "@app/pages/api/w/[wId]/assistant/builder/templates/[tId]";
 
-const FEEDBACKS_BATCH_SIZE = 50;
+const FEEDBACKS_PAGE_SIZE = 50;
 
 interface AssistantBuilderRightPanelProps {
   screen: BuilderScreen;
@@ -122,40 +122,35 @@ export default function AssistantBuilderRightPanel({
 
   return (
     <div className="flex h-full flex-col">
-      {/* The agentConfigurationId is truthy iff not a new assistant */}
-      {(template || agentConfigurationId) && (
-        <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">
-              {template && (
-                <TabsTrigger
-                  value="Template"
-                  label="Template"
-                  icon={MagicIcon}
-                />
-              )}
-              {agentConfigurationId && (
-                <TabsTrigger
-                  value="Performance"
-                  label="Performance"
-                  icon={LightbulbIcon}
-                />
-              )}
+      <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={LightbulbIcon}
               />
-            </TabsList>
-          </Tabs>
-        </div>
-      )}
+            )}
+            <TabsTrigger
+              value="Preview"
+              label="Preview"
+              icon={ChatBubbleBottomCenterTextIcon}
+            />
+          </TabsList>
+        </Tabs>
+      </div>
+
       <div
         className={cn(
           "grow-1 mb-5 h-full overflow-y-auto border-structure-200",
@@ -302,7 +297,7 @@ export default function AssistantBuilderRightPanel({
             <Page.SectionHeader title="Feedback" />
             <FeedbacksSection
               owner={owner}
-              assistantId={agentConfigurationId}
+              agentConfigurationId={agentConfigurationId}
             />
           </div>
         )}
@@ -418,42 +413,44 @@ const TemplateDropDownMenu = ({
 
 const FeedbacksSection = ({
   owner,
-  assistantId,
+  agentConfigurationId,
 }: {
   owner: LightWorkspaceType;
-  assistantId: string;
+  agentConfigurationId: string;
 }) => {
-  // Used for pagination's lastValue: BatchId -> LastFeedbackId
-  const [lastIdForBatches, setLastIdForBatches] = useState<
-    Record<number, number>
-  >({});
+  // Used for pagination's lastValue: page index -> last feedback id in page
+  const [lastIdForPage, setLastIdForPage] = useState<Record<number, number>>(
+    {}
+  );
 
   const [paginationState, setPaginationState] = useState<PaginationState>({
     pageIndex: 0,
-    pageSize: FEEDBACKS_BATCH_SIZE,
+    pageSize: FEEDBACKS_PAGE_SIZE,
   });
 
   // Decreasing version, paginated decreasing id.
   const { agentConfigurationFeedbacks, isAgentConfigurationFeedbacksLoading } =
     useAgentConfigurationFeedbacksByDescVersion({
       workspaceId: owner.sId,
-      agentConfigurationId: assistantId ?? "",
+      agentConfigurationId: agentConfigurationId ?? "",
       withMetadata: true,
       paginationParams: {
-        limit: FEEDBACKS_BATCH_SIZE,
+        limit: FEEDBACKS_PAGE_SIZE,
         lastValue:
           paginationState.pageIndex === 0
             ? undefined
-            : lastIdForBatches[paginationState.pageIndex - 1],
+            : lastIdForPage[paginationState.pageIndex - 1],
         orderColumn: "id",
         orderDirection: "desc",
       },
+      disabled: !agentConfigurationId,
     });
 
   const { agentConfigurationHistory, isAgentConfigurationHistoryLoading } =
     useAgentConfigurationHistory({
       workspaceId: owner.sId,
-      agentConfigurationId: assistantId,
+      agentConfigurationId: agentConfigurationId,
+      disabled: !agentConfigurationId,
     });
 
   const handleSetPagination = useCallback(
@@ -465,7 +462,7 @@ const FeedbacksSection = ({
       ) {
         return;
       }
-      setLastIdForBatches((prev) => ({
+      setLastIdForPage((prev) => ({
         ...prev,
         ...{
           [paginationState.pageIndex]:
@@ -479,7 +476,7 @@ const FeedbacksSection = ({
     [agentConfigurationFeedbacks, paginationState.pageIndex]
   );
 
-  const firstAgentConfigurationInBatch = useMemo(
+  const firstAgentConfigurationInPage = useMemo(
     () =>
       agentConfigurationHistory?.find(
         (c) =>
@@ -504,7 +501,7 @@ const FeedbacksSection = ({
     return <div className="mt-3 text-sm text-element-900">No feedbacks.</div>;
   }
 
-  if (!agentConfigurationHistory || !firstAgentConfigurationInBatch) {
+  if (!agentConfigurationHistory || !firstAgentConfigurationInPage) {
     return (
       <div className="mt-3 text-sm text-element-900">
         Error loading the previous agent versions.
@@ -516,10 +513,10 @@ const FeedbacksSection = ({
     <div>
       <div className="mb-2 flex flex-col">
         <AgentConfigurationVersionHeader
-          agentConfiguration={firstAgentConfigurationInBatch}
-          agentConfigurationVersion={firstAgentConfigurationInBatch?.version}
+          agentConfiguration={firstAgentConfigurationInPage}
+          agentConfigurationVersion={firstAgentConfigurationInPage?.version}
           isLatestVersion={
-            firstAgentConfigurationInBatch?.version ===
+            firstAgentConfigurationInPage?.version ===
             agentConfigurationHistory[0].version
           }
         />
@@ -591,13 +588,8 @@ function AgentConfigurationVersionHeader({
       if (!config.versionCreatedAt) {
         return `v${config.version}`;
       }
-      return new Date(config.versionCreatedAt).toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-        hour: "numeric",
-        minute: "numeric",
-      });
+      const versionDate = new Date(config.versionCreatedAt);
+      return formatTimestampToFriendlyDate(versionDate.getTime(), "long");
     },
     [isLatestVersion]
   );
@@ -621,6 +613,8 @@ function FeedbackCard({
   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}#${feedback.messageId}`
       : null;
diff --git a/front/lib/resources/agent_message_feedback_resource.ts b/front/lib/resources/agent_message_feedback_resource.ts
index bf5602782c20..34d88a204989 100644
--- a/front/lib/resources/agent_message_feedback_resource.ts
+++ b/front/lib/resources/agent_message_feedback_resource.ts
@@ -171,6 +171,7 @@ 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,

From 8187de568c43ef57ac38e68a71ad6bcd9d2c5845 Mon Sep 17 00:00:00 2001
From: Lucas Massemin <lucasmassemin@gmail.com>
Date: Thu, 2 Jan 2025 17:33:01 +0100
Subject: [PATCH 06/16] Update
 front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx

Co-authored-by: Flavien David <flavien.david74@gmail.com>
---
 .../assistant_builder/AssistantBuilderPreviewDrawer.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx b/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
index 6a142d92b9b7..901f3f7464aa 100644
--- a/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
+++ b/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
@@ -163,7 +163,7 @@ export default function AssistantBuilderRightPanel({
             "animate-reload":
               shouldAnimatePreviewDrawer &&
               rightPanelStatus.tab === "Preview" &&
-              rightPanelStatus.openedAt != null &&
+              rightPanelStatus.openedAt !== null &&
               Date.now() - rightPanelStatus.openedAt > 1000,
           }
         )}

From a4f195f1dbb8236e28fc59db38d133e4a9c5ed3b Mon Sep 17 00:00:00 2001
From: Lucas <lucas@dust.tt>
Date: Thu, 2 Jan 2025 18:41:17 +0100
Subject: [PATCH 07/16] Moved feedback code in its own file, added some props,
 regular cn usage

---
 .../AssistantBuilderPreviewDrawer.tsx         | 306 +-----------------
 ...AssistantBuilderPreviewDrawerFeedbacks.tsx | 289 +++++++++++++++++
 .../agent_message_feedback_resource.ts        |   4 +-
 front/lib/swr/assistants.ts                   |  17 +-
 4 files changed, 313 insertions(+), 303 deletions(-)
 create mode 100644 front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx

diff --git a/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx b/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
index 901f3f7464aa..1f5907c28e86 100644
--- a/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
+++ b/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
@@ -1,5 +1,4 @@
 import {
-  Avatar,
   Button,
   ChatBubbleBottomCenterTextIcon,
   cn,
@@ -7,15 +6,11 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  ExternalLinkIcon,
-  HandThumbDownIcon,
-  HandThumbUpIcon,
   LightbulbIcon,
   MagicIcon,
   Markdown,
   MoreIcon,
   Page,
-  Pagination,
   Spinner,
   Tabs,
   TabsList,
@@ -25,17 +20,15 @@ import {
 import type {
   AssistantBuilderRightPanelStatus,
   AssistantBuilderRightPanelTab,
-  LightAgentConfigurationType,
-  LightWorkspaceType,
   WorkspaceType,
 } from "@dust-tt/types";
 import { Separator } from "@radix-ui/react-select";
-import type { PaginationState } from "@tanstack/react-table";
-import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+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,
@@ -49,17 +42,9 @@ import type {
 import { getDefaultActionConfiguration } from "@app/components/assistant_builder/types";
 import { ConfirmContext } from "@app/components/Confirm";
 import { ACTION_SPECIFICATIONS } from "@app/lib/api/assistant/actions/utils";
-import type { AgentMessageFeedbackWithMetadataType } from "@app/lib/api/assistant/feedback";
-import {
-  useAgentConfigurationFeedbacksByDescVersion,
-  useAgentConfigurationHistory,
-} from "@app/lib/swr/assistants";
 import { useUser } from "@app/lib/swr/user";
-import { formatTimestampToFriendlyDate, timeAgoFrom } from "@app/lib/utils";
 import type { FetchAssistantTemplateResponse } from "@app/pages/api/w/[wId]/assistant/builder/templates/[tId]";
 
-const FEEDBACKS_PAGE_SIZE = 50;
-
 interface AssistantBuilderRightPanelProps {
   screen: BuilderScreen;
   template: FetchAssistantTemplateResponse | null;
@@ -154,18 +139,17 @@ export default function AssistantBuilderRightPanel({
       <div
         className={cn(
           "grow-1 mb-5 h-full overflow-y-auto border-structure-200",
-          {
-            "rounded-b-xl border-x border-b pt-5": !!template,
-            "mt-5 rounded-xl border border-structure-200": !template,
-            "bg-structure-50": rightPanelStatus.tab !== "Performance",
-            // Only animate the reload if the drawer has been open for at least 1 second.
-            // This is to prevent the animation from triggering right after the drawer is opened.
-            "animate-reload":
-              shouldAnimatePreviewDrawer &&
-              rightPanelStatus.tab === "Preview" &&
-              rightPanelStatus.openedAt !== null &&
-              Date.now() - rightPanelStatus.openedAt > 1000,
-          }
+
+          "rounded-b-xl border-x border-b pt-5" && !!template,
+          "mt-5 rounded-xl border border-structure-200" && !template,
+          "bg-structure-50" && rightPanelStatus.tab !== "Performance",
+          // Only animate the reload if the drawer has been open for at least 1 second.
+          // This is to prevent the animation from triggering right after the drawer is opened.
+          shouldAnimatePreviewDrawer &&
+            rightPanelStatus.tab === "Preview" &&
+            rightPanelStatus.openedAt != null &&
+            Date.now() - rightPanelStatus.openedAt > 1000 &&
+            "animate-reload"
         )}
       >
         {(rightPanelStatus.tab === "Preview" || screen === "naming") &&
@@ -410,267 +394,3 @@ const TemplateDropDownMenu = ({
     </DropdownMenu>
   );
 };
-
-const FeedbacksSection = ({
-  owner,
-  agentConfigurationId,
-}: {
-  owner: LightWorkspaceType;
-  agentConfigurationId: string;
-}) => {
-  // Used for pagination's lastValue: page index -> last feedback id in page
-  const [lastIdForPage, setLastIdForPage] = useState<Record<number, number>>(
-    {}
-  );
-
-  const [paginationState, setPaginationState] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: FEEDBACKS_PAGE_SIZE,
-  });
-
-  // Decreasing version, paginated decreasing id.
-  const { agentConfigurationFeedbacks, isAgentConfigurationFeedbacksLoading } =
-    useAgentConfigurationFeedbacksByDescVersion({
-      workspaceId: owner.sId,
-      agentConfigurationId: agentConfigurationId ?? "",
-      withMetadata: true,
-      paginationParams: {
-        limit: FEEDBACKS_PAGE_SIZE,
-        lastValue:
-          paginationState.pageIndex === 0
-            ? undefined
-            : lastIdForPage[paginationState.pageIndex - 1],
-        orderColumn: "id",
-        orderDirection: "desc",
-      },
-      disabled: !agentConfigurationId,
-    });
-
-  const { agentConfigurationHistory, isAgentConfigurationHistoryLoading } =
-    useAgentConfigurationHistory({
-      workspaceId: owner.sId,
-      agentConfigurationId: agentConfigurationId,
-      disabled: !agentConfigurationId,
-    });
-
-  const handleSetPagination = useCallback(
-    (pagination: PaginationState) => {
-      // Pagination is not displayed if there are no feedbacks.
-      if (
-        !agentConfigurationFeedbacks ||
-        agentConfigurationFeedbacks.feedbacks.length === 0
-      ) {
-        return;
-      }
-      setLastIdForPage((prev) => ({
-        ...prev,
-        ...{
-          [paginationState.pageIndex]:
-            agentConfigurationFeedbacks.feedbacks[
-              agentConfigurationFeedbacks.feedbacks.length - 1
-            ].id,
-        },
-      }));
-      setPaginationState(pagination);
-    },
-    [agentConfigurationFeedbacks, paginationState.pageIndex]
-  );
-
-  const firstAgentConfigurationInPage = useMemo(
-    () =>
-      agentConfigurationHistory?.find(
-        (c) =>
-          c.version ===
-          agentConfigurationFeedbacks?.feedbacks[0].agentConfigurationVersion
-      ),
-    [agentConfigurationHistory, agentConfigurationFeedbacks]
-  );
-
-  if (
-    isAgentConfigurationFeedbacksLoading ||
-    isAgentConfigurationHistoryLoading
-  ) {
-    return <Spinner />;
-  }
-
-  if (
-    !isAgentConfigurationFeedbacksLoading &&
-    (!agentConfigurationFeedbacks ||
-      agentConfigurationFeedbacks.feedbacks.length === 0)
-  ) {
-    return <div className="mt-3 text-sm text-element-900">No feedbacks.</div>;
-  }
-
-  if (!agentConfigurationHistory || !firstAgentConfigurationInPage) {
-    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={firstAgentConfigurationInPage}
-          agentConfigurationVersion={firstAgentConfigurationInPage?.version}
-          isLatestVersion={
-            firstAgentConfigurationInPage?.version ===
-            agentConfigurationHistory[0].version
-          }
-        />
-        {agentConfigurationFeedbacks?.feedbacks.map((feedback, index) => {
-          const isFirstFeedback = index === 0;
-          const isNewVersion =
-            !isFirstFeedback &&
-            feedback.agentConfigurationVersion !==
-              agentConfigurationFeedbacks.feedbacks[index - 1]
-                .agentConfigurationVersion;
-          return (
-            <div key={feedback.id} className="animate-fadeIn">
-              {isNewVersion && (
-                <AgentConfigurationVersionHeader
-                  agentConfiguration={agentConfigurationHistory?.find(
-                    (c) => c.version === feedback.agentConfigurationVersion
-                  )}
-                  agentConfigurationVersion={feedback.agentConfigurationVersion}
-                  isLatestVersion={false}
-                />
-              )}
-              {!isNewVersion && !isFirstFeedback && (
-                <div className="mx-4 my-1">
-                  <Page.Separator />
-                </div>
-              )}
-              <div className="mr-2">
-                <FeedbackCard
-                  owner={owner}
-                  feedback={feedback as AgentMessageFeedbackWithMetadataType}
-                />
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      {agentConfigurationFeedbacks &&
-        agentConfigurationFeedbacks.totalFeedbackCount > 0 && (
-          <div className="my-2 mr-2">
-            <Pagination
-              rowCount={agentConfigurationFeedbacks.totalFeedbackCount}
-              pagination={paginationState}
-              setPagination={handleSetPagination}
-              size="xs"
-              showDetails={true}
-              // Important: We need to go page by page to keep track of last cursor id.
-              showPageButtons={false}
-            />
-          </div>
-        )}
-    </div>
-  );
-};
-
-function AgentConfigurationVersionHeader({
-  agentConfigurationVersion,
-  agentConfiguration,
-  isLatestVersion,
-}: {
-  agentConfigurationVersion: number;
-  agentConfiguration: LightAgentConfigurationType | undefined;
-  isLatestVersion: boolean;
-}) {
-  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>
-  );
-}
-
-function FeedbackCard({
-  owner,
-  feedback,
-}: {
-  owner: LightWorkspaceType;
-  feedback: AgentMessageFeedbackWithMetadataType;
-}) {
-  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}#${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/AssistantBuilderPreviewDrawerFeedbacks.tsx b/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
new file mode 100644
index 000000000000..e8a7ca4c2dcf
--- /dev/null
+++ b/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
@@ -0,0 +1,289 @@
+import {
+  Avatar,
+  Button,
+  ExternalLinkIcon,
+  HandThumbDownIcon,
+  HandThumbUpIcon,
+  Page,
+  Pagination,
+  Spinner,
+} from "@dust-tt/sparkle";
+import type {
+  LightAgentConfigurationType,
+  LightWorkspaceType,
+} from "@dust-tt/types";
+import type { PaginationState } from "@tanstack/react-table";
+import { useCallback, useMemo, useState } from "react";
+
+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) => {
+  // Used for pagination's lastValue: page index -> last feedback id in page
+  const [lastIdForPage, setLastIdForPage] = useState<Record<number, number>>(
+    {}
+  );
+
+  const [paginationState, setPaginationState] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: FEEDBACKS_PAGE_SIZE,
+  });
+
+  // Decreasing version, paginated decreasing id.
+  const { agentConfigurationFeedbacks, isAgentConfigurationFeedbacksLoading } =
+    useAgentConfigurationFeedbacksByDescVersion({
+      workspaceId: owner.sId,
+      agentConfigurationId: agentConfigurationId ?? "",
+      withMetadata: true,
+      paginationParams: {
+        limit: FEEDBACKS_PAGE_SIZE,
+        lastValue:
+          paginationState.pageIndex === 0
+            ? undefined
+            : lastIdForPage[paginationState.pageIndex - 1],
+        orderColumn: "id",
+        orderDirection: "desc",
+      },
+      disabled: !agentConfigurationId,
+    });
+
+  const { agentConfigurationHistory, isAgentConfigurationHistoryLoading } =
+    useAgentConfigurationHistory({
+      workspaceId: owner.sId,
+      agentConfigurationId: agentConfigurationId,
+      disabled: !agentConfigurationId,
+    });
+
+  const handleSetPagination = useCallback(
+    (pagination: PaginationState) => {
+      // Pagination is not displayed if there are no feedbacks.
+      if (
+        !agentConfigurationFeedbacks ||
+        agentConfigurationFeedbacks.feedbacks.length === 0
+      ) {
+        return;
+      }
+      setLastIdForPage((prev) => ({
+        ...prev,
+        ...{
+          [paginationState.pageIndex]:
+            agentConfigurationFeedbacks.feedbacks[
+              agentConfigurationFeedbacks.feedbacks.length - 1
+            ].id,
+        },
+      }));
+      setPaginationState(pagination);
+    },
+    [agentConfigurationFeedbacks, paginationState.pageIndex]
+  );
+
+  const firstAgentConfigurationInPage = useMemo(
+    () =>
+      agentConfigurationHistory?.find(
+        (c) =>
+          c.version ===
+          agentConfigurationFeedbacks?.feedbacks[0].agentConfigurationVersion
+      ),
+    [agentConfigurationHistory, agentConfigurationFeedbacks]
+  );
+
+  if (
+    isAgentConfigurationFeedbacksLoading ||
+    isAgentConfigurationHistoryLoading
+  ) {
+    return <Spinner />;
+  }
+
+  if (
+    !isAgentConfigurationFeedbacksLoading &&
+    (!agentConfigurationFeedbacks ||
+      agentConfigurationFeedbacks.feedbacks.length === 0)
+  ) {
+    return <div className="mt-3 text-sm text-element-900">No feedbacks.</div>;
+  }
+
+  if (!agentConfigurationHistory || !firstAgentConfigurationInPage) {
+    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={firstAgentConfigurationInPage}
+          agentConfigurationVersion={firstAgentConfigurationInPage?.version}
+          isLatestVersion={
+            firstAgentConfigurationInPage?.version ===
+            agentConfigurationHistory[0].version
+          }
+        />
+        {agentConfigurationFeedbacks?.feedbacks.map((feedback, index) => {
+          const isFirstFeedback = index === 0;
+          const isNewVersion =
+            !isFirstFeedback &&
+            feedback.agentConfigurationVersion !==
+              agentConfigurationFeedbacks.feedbacks[index - 1]
+                .agentConfigurationVersion;
+          return (
+            <div key={feedback.id} className="animate-fadeIn">
+              {isNewVersion && (
+                <AgentConfigurationVersionHeader
+                  agentConfiguration={agentConfigurationHistory?.find(
+                    (c) => c.version === feedback.agentConfigurationVersion
+                  )}
+                  agentConfigurationVersion={feedback.agentConfigurationVersion}
+                  isLatestVersion={false}
+                />
+              )}
+              {!isNewVersion && !isFirstFeedback && (
+                <div className="mx-4 my-1">
+                  <Page.Separator />
+                </div>
+              )}
+              <div className="mr-2">
+                <FeedbackCard
+                  owner={owner}
+                  feedback={feedback as AgentMessageFeedbackWithMetadataType}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      {agentConfigurationFeedbacks &&
+        agentConfigurationFeedbacks.totalFeedbackCount > 0 && (
+          <div className="my-2 mr-2">
+            <Pagination
+              rowCount={agentConfigurationFeedbacks.totalFeedbackCount}
+              pagination={paginationState}
+              setPagination={handleSetPagination}
+              size="xs"
+              showDetails={true}
+              // Important: We need to go page by page to keep track of last cursor id.
+              showPageButtons={false}
+            />
+          </div>
+        )}
+    </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;
+}
+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}#${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/lib/resources/agent_message_feedback_resource.ts b/front/lib/resources/agent_message_feedback_resource.ts
index 34d88a204989..acfcb1df4648 100644
--- a/front/lib/resources/agent_message_feedback_resource.ts
+++ b/front/lib/resources/agent_message_feedback_resource.ts
@@ -125,9 +125,9 @@ export class AgentMessageFeedbackResource extends BaseResource<AgentMessageFeedb
     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.toString(),
+      agentConfigurationId: agentConfiguration.sId,
     };
 
     // Get the total feedback count, because needed for pagination
diff --git a/front/lib/swr/assistants.ts b/front/lib/swr/assistants.ts
index 20b0c24e0dc4..c73bd466e42a 100644
--- a/front/lib/swr/assistants.ts
+++ b/front/lib/swr/assistants.ts
@@ -232,19 +232,20 @@ export function useAgentConfiguration({
   };
 }
 
-export function useAgentConfigurationFeedbacksByDescVersion({
-  workspaceId,
-  agentConfigurationId,
-  withMetadata,
-  paginationParams,
-  disabled,
-}: {
+interface AgentConfigurationFeedbacksByDescVersionProps {
   workspaceId: string;
   agentConfigurationId: string | null;
   paginationParams: PaginationParams;
   withMetadata?: boolean;
   disabled?: boolean;
-}) {
+}
+export function useAgentConfigurationFeedbacksByDescVersion({
+  workspaceId,
+  agentConfigurationId,
+  paginationParams,
+  withMetadata,
+  disabled,
+}: AgentConfigurationFeedbacksByDescVersionProps) {
   const agentConfigurationFeedbacksFetcher: Fetcher<{
     feedbacks: (
       | AgentMessageFeedbackType

From 858e989b8a4737baeb91ef857561fb89dfad5010 Mon Sep 17 00:00:00 2001
From: Lucas <lucas@dust.tt>
Date: Fri, 3 Jan 2025 16:25:35 +0100
Subject: [PATCH 08/16] UseSWRInfinity and IntersectionObserver

---
 ...AssistantBuilderPreviewDrawerFeedbacks.tsx | 143 +++++++-----------
 front/lib/api/assistant/feedback.ts           |   8 +-
 .../agent_message_feedback_resource.ts        |   7 +-
 front/lib/swr/assistants.ts                   |  75 +++++----
 .../agent_configurations/[aId]/feedbacks.ts   |   4 +-
 5 files changed, 107 insertions(+), 130 deletions(-)

diff --git a/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx b/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
index e8a7ca4c2dcf..f41574e557b0 100644
--- a/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
+++ b/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
@@ -5,15 +5,13 @@ import {
   HandThumbDownIcon,
   HandThumbUpIcon,
   Page,
-  Pagination,
   Spinner,
 } from "@dust-tt/sparkle";
 import type {
   LightAgentConfigurationType,
   LightWorkspaceType,
 } from "@dust-tt/types";
-import type { PaginationState } from "@tanstack/react-table";
-import { useCallback, useMemo, useState } from "react";
+import { memo, useCallback, useEffect, useRef } from "react";
 
 import type { AgentMessageFeedbackWithMetadataType } from "@app/lib/api/assistant/feedback";
 import {
@@ -32,33 +30,53 @@ export const FeedbacksSection = ({
   owner,
   agentConfigurationId,
 }: FeedbacksSectionProps) => {
-  // Used for pagination's lastValue: page index -> last feedback id in page
-  const [lastIdForPage, setLastIdForPage] = useState<Record<number, number>>(
-    {}
-  );
-
-  const [paginationState, setPaginationState] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: FEEDBACKS_PAGE_SIZE,
+  const {
+    isAgentConfigurationFeedbacksLoading,
+    isValidating,
+    agentConfigurationFeedbacks,
+    hasMore: feedbacksNotExhausted,
+    setSize,
+    size,
+  } = useAgentConfigurationFeedbacksByDescVersion({
+    workspaceId: owner.sId,
+    agentConfigurationId: agentConfigurationId,
+    limit: FEEDBACKS_PAGE_SIZE,
   });
 
-  // Decreasing version, paginated decreasing id.
-  const { agentConfigurationFeedbacks, isAgentConfigurationFeedbacksLoading } =
-    useAgentConfigurationFeedbacksByDescVersion({
-      workspaceId: owner.sId,
-      agentConfigurationId: agentConfigurationId ?? "",
-      withMetadata: true,
-      paginationParams: {
-        limit: FEEDBACKS_PAGE_SIZE,
-        lastValue:
-          paginationState.pageIndex === 0
-            ? undefined
-            : lastIdForPage[paginationState.pageIndex - 1],
-        orderColumn: "id",
-        orderDirection: "desc",
+  // Intersection observer to detect when the user has scrolled to the bottom of the list.
+  const bottomRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const target = entries[0];
+        if (
+          target.isIntersecting &&
+          !isValidating &&
+          !isAgentConfigurationFeedbacksLoading &&
+          feedbacksNotExhausted
+        ) {
+          setSize(size + 1);
+        }
       },
-      disabled: !agentConfigurationId,
-    });
+      {
+        threshold: 0.25,
+      }
+    );
+
+    if (bottomRef.current) {
+      observer.observe(bottomRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, [
+    bottomRef,
+    isValidating,
+    isAgentConfigurationFeedbacksLoading,
+    agentConfigurationFeedbacks,
+    setSize,
+    size,
+    feedbacksNotExhausted,
+  ]);
 
   const { agentConfigurationHistory, isAgentConfigurationHistoryLoading } =
     useAgentConfigurationHistory({
@@ -67,39 +85,6 @@ export const FeedbacksSection = ({
       disabled: !agentConfigurationId,
     });
 
-  const handleSetPagination = useCallback(
-    (pagination: PaginationState) => {
-      // Pagination is not displayed if there are no feedbacks.
-      if (
-        !agentConfigurationFeedbacks ||
-        agentConfigurationFeedbacks.feedbacks.length === 0
-      ) {
-        return;
-      }
-      setLastIdForPage((prev) => ({
-        ...prev,
-        ...{
-          [paginationState.pageIndex]:
-            agentConfigurationFeedbacks.feedbacks[
-              agentConfigurationFeedbacks.feedbacks.length - 1
-            ].id,
-        },
-      }));
-      setPaginationState(pagination);
-    },
-    [agentConfigurationFeedbacks, paginationState.pageIndex]
-  );
-
-  const firstAgentConfigurationInPage = useMemo(
-    () =>
-      agentConfigurationHistory?.find(
-        (c) =>
-          c.version ===
-          agentConfigurationFeedbacks?.feedbacks[0].agentConfigurationVersion
-      ),
-    [agentConfigurationHistory, agentConfigurationFeedbacks]
-  );
-
   if (
     isAgentConfigurationFeedbacksLoading ||
     isAgentConfigurationHistoryLoading
@@ -109,13 +94,12 @@ export const FeedbacksSection = ({
 
   if (
     !isAgentConfigurationFeedbacksLoading &&
-    (!agentConfigurationFeedbacks ||
-      agentConfigurationFeedbacks.feedbacks.length === 0)
+    (!agentConfigurationFeedbacks || agentConfigurationFeedbacks.length === 0)
   ) {
     return <div className="mt-3 text-sm text-element-900">No feedbacks.</div>;
   }
 
-  if (!agentConfigurationHistory || !firstAgentConfigurationInPage) {
+  if (!agentConfigurationHistory) {
     return (
       <div className="mt-3 text-sm text-element-900">
         Error loading the previous agent versions.
@@ -127,20 +111,16 @@ export const FeedbacksSection = ({
     <div>
       <div className="mb-2 flex flex-col">
         <AgentConfigurationVersionHeader
-          agentConfiguration={firstAgentConfigurationInPage}
-          agentConfigurationVersion={firstAgentConfigurationInPage?.version}
-          isLatestVersion={
-            firstAgentConfigurationInPage?.version ===
-            agentConfigurationHistory[0].version
-          }
+          agentConfiguration={agentConfigurationHistory[0]}
+          agentConfigurationVersion={agentConfigurationHistory[0].version}
+          isLatestVersion={true}
         />
-        {agentConfigurationFeedbacks?.feedbacks.map((feedback, index) => {
+        {agentConfigurationFeedbacks?.map((feedback, index) => {
           const isFirstFeedback = index === 0;
           const isNewVersion =
             !isFirstFeedback &&
             feedback.agentConfigurationVersion !==
-              agentConfigurationFeedbacks.feedbacks[index - 1]
-                .agentConfigurationVersion;
+              agentConfigurationFeedbacks[index - 1].agentConfigurationVersion;
           return (
             <div key={feedback.id} className="animate-fadeIn">
               {isNewVersion && (
@@ -158,7 +138,7 @@ export const FeedbacksSection = ({
                 </div>
               )}
               <div className="mr-2">
-                <FeedbackCard
+                <MemoizedFeedbackCard
                   owner={owner}
                   feedback={feedback as AgentMessageFeedbackWithMetadataType}
                 />
@@ -167,20 +147,8 @@ export const FeedbacksSection = ({
           );
         })}
       </div>
-      {agentConfigurationFeedbacks &&
-        agentConfigurationFeedbacks.totalFeedbackCount > 0 && (
-          <div className="my-2 mr-2">
-            <Pagination
-              rowCount={agentConfigurationFeedbacks.totalFeedbackCount}
-              pagination={paginationState}
-              setPagination={handleSetPagination}
-              size="xs"
-              showDetails={true}
-              // Important: We need to go page by page to keep track of last cursor id.
-              showPageButtons={false}
-            />
-          </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>
   );
 };
@@ -222,6 +190,7 @@ interface FeedbackCardProps {
   owner: LightWorkspaceType;
   feedback: AgentMessageFeedbackWithMetadataType;
 }
+const MemoizedFeedbackCard = memo(FeedbackCard);
 function FeedbackCard({ owner, feedback }: FeedbackCardProps) {
   const conversationUrl =
     feedback.conversationId &&
diff --git a/front/lib/api/assistant/feedback.ts b/front/lib/api/assistant/feedback.ts
index 666b589daa4b..9686022ed1ee 100644
--- a/front/lib/api/assistant/feedback.ts
+++ b/front/lib/api/assistant/feedback.ts
@@ -194,13 +194,7 @@ export async function getAgentFeedbacks({
   paginationParams: PaginationParams;
 }): Promise<
   Result<
-    {
-      feedbacks: (
-        | AgentMessageFeedbackType
-        | AgentMessageFeedbackWithMetadataType
-      )[];
-      totalFeedbackCount: number;
-    },
+    (AgentMessageFeedbackType | AgentMessageFeedbackWithMetadataType)[],
     Error
   >
 > {
diff --git a/front/lib/resources/agent_message_feedback_resource.ts b/front/lib/resources/agent_message_feedback_resource.ts
index acfcb1df4648..43905312f2f9 100644
--- a/front/lib/resources/agent_message_feedback_resource.ts
+++ b/front/lib/resources/agent_message_feedback_resource.ts
@@ -130,11 +130,6 @@ export class AgentMessageFeedbackResource extends BaseResource<AgentMessageFeedb
       agentConfigurationId: agentConfiguration.sId,
     };
 
-    // Get the total feedback count, because needed for pagination
-    const totalFeedbackCountPromise = AgentMessageFeedback.count({
-      where,
-    });
-
     if (paginationParams.lastValue) {
       const op = paginationParams.orderDirection === "desc" ? Op.lt : Op.gt;
       where[paginationParams.orderColumn as any] = {
@@ -142,7 +137,7 @@ export class AgentMessageFeedbackResource extends BaseResource<AgentMessageFeedb
       };
     }
 
-    const agentMessageFeedbackPromise = AgentMessageFeedback.findAll({
+    const agentMessageFeedback = await AgentMessageFeedback.findAll({
       where,
       include: [
         {
diff --git a/front/lib/swr/assistants.ts b/front/lib/swr/assistants.ts
index c73bd466e42a..59db17025c24 100644
--- a/front/lib/swr/assistants.ts
+++ b/front/lib/swr/assistants.ts
@@ -15,11 +15,11 @@ import type {
   AgentMessageFeedbackType,
   AgentMessageFeedbackWithMetadataType,
 } from "@app/lib/api/assistant/feedback";
-import type { PaginationParams } from "@app/lib/api/pagination";
 import {
   fetcher,
   getErrorFromResponse,
   useSWRWithDefaults,
+  useSWRInfiniteWithDefaults,
 } from "@app/lib/swr/swr";
 import type { GetAgentConfigurationsResponseBody } from "@app/pages/api/w/[wId]/assistant/agent_configurations";
 import type { PostAgentScopeRequestBody } from "@app/pages/api/w/[wId]/assistant/agent_configurations/[aId]/scope";
@@ -235,51 +235,72 @@ export function useAgentConfiguration({
 interface AgentConfigurationFeedbacksByDescVersionProps {
   workspaceId: string;
   agentConfigurationId: string | null;
-  paginationParams: PaginationParams;
-  withMetadata?: boolean;
-  disabled?: boolean;
+  limit: number;
 }
 export function useAgentConfigurationFeedbacksByDescVersion({
   workspaceId,
   agentConfigurationId,
-  paginationParams,
-  withMetadata,
-  disabled,
+  limit,
 }: AgentConfigurationFeedbacksByDescVersionProps) {
   const agentConfigurationFeedbacksFetcher: Fetcher<{
     feedbacks: (
       | AgentMessageFeedbackType
       | AgentMessageFeedbackWithMetadataType
     )[];
-    totalFeedbackCount: number;
   }> = fetcher;
 
   const urlParams = new URLSearchParams({
-    limit: paginationParams.limit.toString(),
-    orderColumn: paginationParams.orderColumn,
-    orderDirection: paginationParams.orderDirection,
+    limit: limit.toString(),
+    orderColumn: "id",
+    orderDirection: "desc",
+    withMetadata: "true",
   });
-  if (withMetadata) {
-    urlParams.append("withMetadata", "true");
-  }
-  if (paginationParams.lastValue) {
-    urlParams.append("lastValue", paginationParams.lastValue.toString());
-  }
 
-  const { data, error, mutate } = useSWRWithDefaults(
-    agentConfigurationId
-      ? `/api/w/${workspaceId}/assistant/agent_configurations/${agentConfigurationId}/feedbacks?${urlParams.toString()}`
-      : null,
-    agentConfigurationFeedbacksFetcher,
-    // If agentConfigurationId is null, we don't want to fetch
-    { disabled: disabled || !agentConfigurationId }
-  );
+  const [hasMore, setHasMore] = useState(true);
+
+  const { data, error, mutate, size, setSize, isLoading, isValidating } =
+    useSWRInfiniteWithDefaults(
+      (pageIndex: number, previousPageData) => {
+        console.log("previousPageData", 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 {
-    agentConfigurationFeedbacks: data ? data : null,
-    isAgentConfigurationFeedbacksLoading: !error && !data,
+    isLoadingInitialData: !error && !data,
     isAgentConfigurationFeedbacksError: error,
+    isAgentConfigurationFeedbacksLoading: isLoading,
+    isValidating,
+    agentConfigurationFeedbacks: useMemo(
+      () => (data ? data.flatMap((d) => (d ? d.feedbacks : [])) : []),
+      [data]
+    ),
+    hasMore,
     mutateAgentConfigurationFeedbacks: mutate,
+    setSize,
+    size,
   };
 }
 
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 7cc2e3ef7301..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
@@ -15,7 +15,6 @@ async function handler(
   res: NextApiResponse<
     WithAPIErrorResponse<{
       feedbacks: AgentMessageFeedbackType[];
-      totalFeedbackCount: number;
     }>
   >,
   auth: Authenticator
@@ -81,8 +80,7 @@ async function handler(
       const feedbacks = feedbacksRes.value;
 
       res.status(200).json({
-        feedbacks: feedbacks.feedbacks,
-        totalFeedbackCount: feedbacks.totalFeedbackCount,
+        feedbacks: feedbacks,
       });
       return;
 

From 6f1dee6a9b2b989f38c11e7fd796a21ebcf6d6c2 Mon Sep 17 00:00:00 2001
From: Lucas <lucas@dust.tt>
Date: Fri, 3 Jan 2025 17:01:40 +0100
Subject: [PATCH 09/16] Modified message anchor to be a hash param

---
 .../AssistantBuilderPreviewDrawerFeedbacks.tsx                  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx b/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
index f41574e557b0..eba44e8e40fd 100644
--- a/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
+++ b/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
@@ -198,7 +198,7 @@ function FeedbackCard({ owner, feedback }: FeedbackCardProps) {
     // 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}#${feedback.messageId}`
+      ? `${process.env.NEXT_PUBLIC_DUST_CLIENT_FACING_URL}/w/${owner.sId}/assistant/${feedback.conversationId}#?messageId=${feedback.messageId}`
       : null;
 
   const timeSinceFeedback = timeAgoFrom(

From d3c7e343d953b486a1b42298d1b5534375b17266 Mon Sep 17 00:00:00 2001
From: Lucas <lucas@dust.tt>
Date: Fri, 3 Jan 2025 17:32:36 +0100
Subject: [PATCH 10/16] linter

---
 .../AssistantBuilderPreviewDrawerFeedbacks.tsx                  | 2 +-
 front/lib/swr/assistants.ts                                     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx b/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
index eba44e8e40fd..32b525f44b5f 100644
--- a/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
+++ b/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
@@ -55,7 +55,7 @@ export const FeedbacksSection = ({
           !isAgentConfigurationFeedbacksLoading &&
           feedbacksNotExhausted
         ) {
-          setSize(size + 1);
+          void setSize(size + 1);
         }
       },
       {
diff --git a/front/lib/swr/assistants.ts b/front/lib/swr/assistants.ts
index 59db17025c24..3365c2c0fdda 100644
--- a/front/lib/swr/assistants.ts
+++ b/front/lib/swr/assistants.ts
@@ -18,8 +18,8 @@ import type {
 import {
   fetcher,
   getErrorFromResponse,
-  useSWRWithDefaults,
   useSWRInfiniteWithDefaults,
+  useSWRWithDefaults,
 } from "@app/lib/swr/swr";
 import type { GetAgentConfigurationsResponseBody } from "@app/pages/api/w/[wId]/assistant/agent_configurations";
 import type { PostAgentScopeRequestBody } from "@app/pages/api/w/[wId]/assistant/agent_configurations/[aId]/scope";

From fa7baf81d6ff4d05076ce7180f4df3040ba0b98f Mon Sep 17 00:00:00 2001
From: Lucas <lucas@dust.tt>
Date: Tue, 7 Jan 2025 13:32:11 +0100
Subject: [PATCH 11/16] Now returning resource in static resource function

---
 front/lib/swr/assistants.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/front/lib/swr/assistants.ts b/front/lib/swr/assistants.ts
index 3365c2c0fdda..efacf2dbf46d 100644
--- a/front/lib/swr/assistants.ts
+++ b/front/lib/swr/assistants.ts
@@ -261,7 +261,6 @@ export function useAgentConfigurationFeedbacksByDescVersion({
   const { data, error, mutate, size, setSize, isLoading, isValidating } =
     useSWRInfiniteWithDefaults(
       (pageIndex: number, previousPageData) => {
-        console.log("previousPageData", previousPageData);
         if (!agentConfigurationId) {
           return null;
         }

From 74a826df5b71540c57b2a41ff78464be3eb00a1d Mon Sep 17 00:00:00 2001
From: Lucas <lucas@dust.tt>
Date: Tue, 7 Jan 2025 16:01:33 +0100
Subject: [PATCH 12/16] Using a query param

---
 .../AssistantBuilderPreviewDrawerFeedbacks.tsx                  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx b/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
index 32b525f44b5f..b9aec0fb7c86 100644
--- a/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
+++ b/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
@@ -198,7 +198,7 @@ function FeedbackCard({ owner, feedback }: FeedbackCardProps) {
     // 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}`
+      ? `${process.env.NEXT_PUBLIC_DUST_CLIENT_FACING_URL}/w/${owner.sId}/assistant/${feedback.conversationId}?messageId=${feedback.messageId}`
       : null;
 
   const timeSinceFeedback = timeAgoFrom(

From 117157bdc805a17fd8b57e31ab8971c96c309462 Mon Sep 17 00:00:00 2001
From: Lucas <lucas@dust.tt>
Date: Tue, 7 Jan 2025 16:30:29 +0100
Subject: [PATCH 13/16] Renamed variable

---
 .../AssistantBuilderPreviewDrawerFeedbacks.tsx              | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx b/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
index b9aec0fb7c86..d1f04ebf6238 100644
--- a/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
+++ b/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
@@ -117,13 +117,13 @@ export const FeedbacksSection = ({
         />
         {agentConfigurationFeedbacks?.map((feedback, index) => {
           const isFirstFeedback = index === 0;
-          const isNewVersion =
+          const previousFeedbackHasDifferentVersion =
             !isFirstFeedback &&
             feedback.agentConfigurationVersion !==
               agentConfigurationFeedbacks[index - 1].agentConfigurationVersion;
           return (
             <div key={feedback.id} className="animate-fadeIn">
-              {isNewVersion && (
+              {previousFeedbackHasDifferentVersion && (
                 <AgentConfigurationVersionHeader
                   agentConfiguration={agentConfigurationHistory?.find(
                     (c) => c.version === feedback.agentConfigurationVersion
@@ -132,7 +132,7 @@ export const FeedbacksSection = ({
                   isLatestVersion={false}
                 />
               )}
-              {!isNewVersion && !isFirstFeedback && (
+              {!previousFeedbackHasDifferentVersion && !isFirstFeedback && (
                 <div className="mx-4 my-1">
                   <Page.Separator />
                 </div>

From ae1c980ecfe279f5427d1993c8c4892cd66115df Mon Sep 17 00:00:00 2001
From: Lucas <lucas@dust.tt>
Date: Wed, 8 Jan 2025 10:49:07 +0100
Subject: [PATCH 14/16] bask to hasMore variable name

---
 .../AssistantBuilderPreviewDrawerFeedbacks.tsx            | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx b/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
index d1f04ebf6238..e9b7a5d043d7 100644
--- a/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
+++ b/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
@@ -34,7 +34,7 @@ export const FeedbacksSection = ({
     isAgentConfigurationFeedbacksLoading,
     isValidating,
     agentConfigurationFeedbacks,
-    hasMore: feedbacksNotExhausted,
+    hasMore,
     setSize,
     size,
   } = useAgentConfigurationFeedbacksByDescVersion({
@@ -53,7 +53,7 @@ export const FeedbacksSection = ({
           target.isIntersecting &&
           !isValidating &&
           !isAgentConfigurationFeedbacksLoading &&
-          feedbacksNotExhausted
+          hasMore
         ) {
           void setSize(size + 1);
         }
@@ -75,7 +75,7 @@ export const FeedbacksSection = ({
     agentConfigurationFeedbacks,
     setSize,
     size,
-    feedbacksNotExhausted,
+    hasMore,
   ]);
 
   const { agentConfigurationHistory, isAgentConfigurationHistoryLoading } =
@@ -113,7 +113,7 @@ export const FeedbacksSection = ({
         <AgentConfigurationVersionHeader
           agentConfiguration={agentConfigurationHistory[0]}
           agentConfigurationVersion={agentConfigurationHistory[0].version}
-          isLatestVersion={true}
+          isLatestVersion
         />
         {agentConfigurationFeedbacks?.map((feedback, index) => {
           const isFirstFeedback = index === 0;

From 42138027970bc8cd0bf15be4b883f3223cf47860 Mon Sep 17 00:00:00 2001
From: Lucas <lucas@dust.tt>
Date: Wed, 8 Jan 2025 11:06:58 +0100
Subject: [PATCH 15/16] useInView hook

---
 ...AssistantBuilderPreviewDrawerFeedbacks.tsx | 38 ++++++-------------
 1 file changed, 12 insertions(+), 26 deletions(-)

diff --git a/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx b/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
index e9b7a5d043d7..1d6bfccc01ab 100644
--- a/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
+++ b/front/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks.tsx
@@ -11,7 +11,8 @@ import type {
   LightAgentConfigurationType,
   LightWorkspaceType,
 } from "@dust-tt/types";
-import { memo, useCallback, useEffect, useRef } from "react";
+import { memo, useCallback, useEffect } from "react";
+import { useInView } from "react-intersection-observer";
 
 import type { AgentMessageFeedbackWithMetadataType } from "@app/lib/api/assistant/feedback";
 import {
@@ -44,38 +45,23 @@ export const FeedbacksSection = ({
   });
 
   // Intersection observer to detect when the user has scrolled to the bottom of the list.
-  const bottomRef = useRef<HTMLDivElement>(null);
+  const { ref: bottomRef, inView: isBottomOfListVisible } = useInView();
   useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const target = entries[0];
-        if (
-          target.isIntersecting &&
-          !isValidating &&
-          !isAgentConfigurationFeedbacksLoading &&
-          hasMore
-        ) {
-          void setSize(size + 1);
-        }
-      },
-      {
-        threshold: 0.25,
-      }
-    );
-
-    if (bottomRef.current) {
-      observer.observe(bottomRef.current);
+    if (
+      isBottomOfListVisible &&
+      hasMore &&
+      !isValidating &&
+      !isAgentConfigurationFeedbacksLoading
+    ) {
+      void setSize(size + 1);
     }
-
-    return () => observer.disconnect();
   }, [
-    bottomRef,
+    isBottomOfListVisible,
+    hasMore,
     isValidating,
     isAgentConfigurationFeedbacksLoading,
-    agentConfigurationFeedbacks,
     setSize,
     size,
-    hasMore,
   ]);
 
   const { agentConfigurationHistory, isAgentConfigurationHistoryLoading } =

From e693865a06b32fd918f6d16cfbbcbb834cb3360a Mon Sep 17 00:00:00 2001
From: Lucas <lucas@dust.tt>
Date: Wed, 8 Jan 2025 12:39:00 +0100
Subject: [PATCH 16/16] Fixed drawer styleing (and icon)

---
 .../AssistantBuilderPreviewDrawer.tsx         | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx b/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
index 1f5907c28e86..614b62524b59 100644
--- a/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
+++ b/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
@@ -1,7 +1,8 @@
 import {
+  BarChartIcon,
   Button,
   ChatBubbleBottomCenterTextIcon,
-  cn,
+  classNames,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -124,7 +125,7 @@ export default function AssistantBuilderRightPanel({
               <TabsTrigger
                 value="Performance"
                 label="Performance"
-                icon={LightbulbIcon}
+                icon={BarChartIcon}
               />
             )}
             <TabsTrigger
@@ -135,21 +136,20 @@ export default function AssistantBuilderRightPanel({
           </TabsList>
         </Tabs>
       </div>
-
       <div
-        className={cn(
-          "grow-1 mb-5 h-full overflow-y-auto border-structure-200",
-
-          "rounded-b-xl border-x border-b pt-5" && !!template,
-          "mt-5 rounded-xl border border-structure-200" && !template,
-          "bg-structure-50" && rightPanelStatus.tab !== "Performance",
-          // Only animate the reload if the drawer has been open for at least 1 second.
-          // This is to prevent the animation from triggering right after the drawer is opened.
+        className={classNames(
+          template !== null
+            ? "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 &&
-            Date.now() - rightPanelStatus.openedAt > 1000 &&
-            "animate-reload"
+            // Only animate the reload if the drawer has been open for at least 1 second.
+            // 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") &&