Feedback inspector in Assistant builder (#9680)

* Main code brought in * Improved design for feedback list. Bug with ordering * Specialized fetch function (renamed), small margin added to feedbacks, more loaded at once * Using pagination inside feedbacks side modal * Renamed batch to page, minor improvements * Update front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx Co-authored-by: Flavien David <[email protected]> * Moved feedback code in its own file, added some props, regular cn usage * UseSWRInfinity and IntersectionObserver * Modified message anchor to be a hash param * linter * Now returning resource in static resource function * Using a query param * Renamed variable * bask to hasMore variable name * useInView hook * Fixed drawer styleing (and icon) --------- Co-authored-by: Flavien David <[email protected]>
dust-tt · Jan 8, 2025 · 6f0be19 · 6f0be19
1 parent 25362ac
commit 6f0be19
Show file tree

Hide file tree

Showing 9 changed files with 420 additions and 63 deletions.
diff --git a/front/components/assistant_builder/AssistantBuilder.tsx b/front/components/assistant_builder/AssistantBuilder.tsx
@@ -1,6 +1,7 @@
 import "react-image-crop/dist/ReactCrop.css";
 
 import {
+  BarChartIcon,
   Button,
   ChatBubbleBottomCenterTextIcon,
   ChevronLeftIcon,
@@ -500,6 +501,7 @@ export default function AssistantBuilder({
           }
           buttonsRightPanel={
             <>
+              {/* Chevron button */}
               <Button
                 size="sm"
                 variant="ghost"
@@ -511,39 +513,40 @@ export default function AssistantBuilder({
                 disabled={isBuilderStateEmpty}
                 onClick={toggleRightPanel}
               />
-              {rightPanelStatus.tab === null && template === null && (
-                <Button
-                  icon={ChatBubbleBottomCenterTextIcon}
-                  onClick={() => openRightPanelTab("Preview")}
-                  size="md"
-                  tooltip={
-                    isBuilderStateEmpty
-                      ? "Add instructions or tools to Preview"
-                      : "Preview"
-                  }
-                  variant="highlight"
-                  disabled={isBuilderStateEmpty}
-                  className={cn(
-                    isPreviewButtonAnimating && "animate-breathing-scale"
-                  )}
-                />
-              )}
-              {rightPanelStatus.tab === null && template !== null && (
+              {rightPanelStatus.tab === null && (
                 <div className="flex flex-col gap-3">
+                  {/* Preview Button */}
                   <Button
                     icon={ChatBubbleBottomCenterTextIcon}
                     onClick={() => openRightPanelTab("Preview")}
                     size="sm"
                     variant="outline"
                     tooltip="Preview your assistant"
+                    className={cn(
+                      isPreviewButtonAnimating && "animate-breathing-scale"
+                    )}
+                    disabled={isBuilderStateEmpty}
                   />
-                  <Button
-                    icon={MagicIcon}
-                    onClick={() => openRightPanelTab("Template")}
-                    size="sm"
-                    variant="outline"
-                    tooltip="Template instructions"
-                  />
+                  {/* Performance Button */}
+                  {!!agentConfigurationId && (
+                    <Button
+                      icon={BarChartIcon}
+                      onClick={() => openRightPanelTab("Performance")}
+                      size="sm"
+                      variant="outline"
+                      tooltip="Inspect feedback and performance"
+                    />
+                  )}
+                  {/* Template Button */}
+                  {template !== null && (
+                    <Button
+                      icon={MagicIcon}
+                      onClick={() => openRightPanelTab("Template")}
+                      size="sm"
+                      variant="outline"
+                      tooltip="Template instructions"
+                    />
+                  )}
                 </div>
               )}
             </>
@@ -565,6 +568,7 @@ export default function AssistantBuilder({
               rightPanelStatus={rightPanelStatus}
               openRightPanelTab={openRightPanelTab}
               builderState={builderState}
+              agentConfigurationId={agentConfigurationId}
               setAction={setAction}
             />
           }

diff --git a/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx b/front/components/assistant_builder/AssistantBuilderPreviewDrawer.tsx
@@ -1,6 +1,8 @@
 import {
+  BarChartIcon,
   Button,
   ChatBubbleBottomCenterTextIcon,
+  classNames,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -27,6 +29,7 @@ import { useContext, useEffect } from "react";
 import ConversationViewer from "@app/components/assistant/conversation/ConversationViewer";
 import { GenerationContextProvider } from "@app/components/assistant/conversation/GenerationContextProvider";
 import { AssistantInputBar } from "@app/components/assistant/conversation/input_bar/InputBar";
+import { FeedbacksSection } from "@app/components/assistant_builder/AssistantBuilderPreviewDrawerFeedbacks";
 import {
   usePreviewAssistant,
   useTryAssistantCore,
@@ -41,7 +44,6 @@ import { getDefaultActionConfiguration } from "@app/components/assistant_builder
 import { ConfirmContext } from "@app/components/Confirm";
 import { ACTION_SPECIFICATIONS } from "@app/lib/api/assistant/actions/utils";
 import { useUser } from "@app/lib/swr/user";
-import { classNames } from "@app/lib/utils";
 import type { FetchAssistantTemplateResponse } from "@app/pages/api/w/[wId]/assistant/builder/templates/[tId]";
 
 interface AssistantBuilderRightPanelProps {
@@ -54,6 +56,7 @@ interface AssistantBuilderRightPanelProps {
   rightPanelStatus: AssistantBuilderRightPanelStatus;
   openRightPanelTab: (tabName: AssistantBuilderRightPanelTab) => void;
   builderState: AssistantBuilderState;
+  agentConfigurationId: string | null;
   setAction: (action: AssistantBuilderSetActionType) => void;
 }
 
@@ -67,6 +70,7 @@ export default function AssistantBuilderRightPanel({
   rightPanelStatus,
   openRightPanelTab,
   builderState,
+  agentConfigurationId,
   setAction,
 }: AssistantBuilderRightPanelProps) {
   const {
@@ -104,39 +108,48 @@ export default function AssistantBuilderRightPanel({
 
   return (
     <div className="flex h-full flex-col">
-      {template && (
-        <div className="shrink-0 bg-white pt-5">
-          <Tabs
-            value={rightPanelStatus.tab ?? "Preview"}
-            onValueChange={(t) =>
-              openRightPanelTab(t as AssistantBuilderRightPanelTab)
-            }
-            className="hidden lg:flex"
-          >
-            <TabsList className="inline-flex h-10 items-center gap-2 border-b border-separator">
+      <div className="shrink-0 bg-white pt-5">
+        <Tabs
+          value={rightPanelStatus.tab ?? "Preview"}
+          onValueChange={(t) =>
+            openRightPanelTab(t as AssistantBuilderRightPanelTab)
+          }
+          className="hidden lg:flex"
+        >
+          <TabsList className="inline-flex items-center gap-2 border-b border-separator">
+            {template && (
               <TabsTrigger value="Template" label="Template" icon={MagicIcon} />
+            )}
+            {/* The agentConfigurationId is truthy iff not a new assistant */}
+            {agentConfigurationId && (
               <TabsTrigger
-                value="Preview"
-                label="Preview"
-                icon={ChatBubbleBottomCenterTextIcon}
+                value="Performance"
+                label="Performance"
+                icon={BarChartIcon}
               />
-            </TabsList>
-          </Tabs>
-        </div>
-      )}
+            )}
+            <TabsTrigger
+              value="Preview"
+              label="Preview"
+              icon={ChatBubbleBottomCenterTextIcon}
+            />
+          </TabsList>
+        </Tabs>
+      </div>
       <div
         className={classNames(
           template !== null
-            ? "grow-1 mb-5 h-full overflow-y-auto rounded-b-xl border-x border-b border-structure-200 bg-structure-50 pt-5"
-            : "grow-1 mb-5 mt-5 h-full overflow-y-auto rounded-xl border border-structure-200 bg-structure-50",
+            ? "grow-1 mb-5 h-full overflow-y-auto rounded-b-xl border-x border-b border-structure-200 pt-5"
+            : "grow-1 mb-5 mt-5 h-full overflow-y-auto rounded-xl border border-structure-200",
           shouldAnimatePreviewDrawer &&
             rightPanelStatus.tab === "Preview" &&
             rightPanelStatus.openedAt != null &&
             // 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") &&
@@ -263,6 +276,15 @@ export default function AssistantBuilderRightPanel({
               </div>
             </div>
           )}
+        {rightPanelStatus.tab === "Performance" && agentConfigurationId && (
+          <div className="ml-4 mt-4">
+            <Page.SectionHeader title="Feedback" />
+            <FeedbacksSection
+              owner={owner}
+              agentConfigurationId={agentConfigurationId}
+            />
+          </div>
+        )}
       </div>
     </div>
   );