Feedbacks for builders

front/components/assistant/AssistantDetails.tsx

@@ -1,23 +1,42 @@
 import {
   Avatar,
+  Button,
   ContentMessage,
   ElementModal,
+  HandThumbDownIcon,
+  HandThumbUpIcon,
   InformationCircleIcon,
   Page,
+  Spinner,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
 } from "@dust-tt/sparkle";
-import type { AgentConfigurationScope, WorkspaceType } from "@dust-tt/types";
-import { useCallback, useState } from "react";
+import type {
+  AgentConfigurationScope,
+  LightAgentConfigurationType,
+  LightWorkspaceType,
+  WorkspaceType,
+} from "@dust-tt/types";
+import { ExternalLinkIcon } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
 
 import { AssistantDetailsButtonBar } from "@app/components/assistant/AssistantDetailsButtonBar";
 import { AssistantActionsSection } from "@app/components/assistant/details/AssistantActionsSection";
 import { AssistantUsageSection } from "@app/components/assistant/details/AssistantUsageSection";
 import { ReadOnlyTextArea } from "@app/components/assistant/ReadOnlyTextArea";
 import { SharingDropdown } from "@app/components/assistant_builder/Sharing";
+import type { AgentMessageFeedbackType } from "@app/lib/api/assistant/feedback";
 import {
   useAgentConfiguration,
+  useAgentConfigurationFeedbacks,
+  useAgentConfigurationHistory,
   useUpdateAgentScope,
 } from "@app/lib/swr/assistants";
-import { classNames } from "@app/lib/utils";
+import { useFeedbackConversation } from "@app/lib/swr/feedbacks";
+import { useUserDetails } from "@app/lib/swr/user";
+import { classNames, timeAgoFrom } from "@app/lib/utils";
 
 type AssistantDetailsProps = {
   owner: WorkspaceType;
@@ -55,7 +74,7 @@ export function AssistantDetails({
     return <></>;
   }
 
-  const DescriptionSection = () => (
+  const TopSection = () => (
     <div className="flex flex-col gap-5">
       <div className="flex flex-col gap-3 sm:flex-row">
         <Avatar
@@ -82,6 +101,30 @@ export function AssistantDetails({
           )}
         </div>
       </div>
+    </div>
+  );
+
+  const TabsSection = () => (
+    <Tabs defaultValue="info">
+      <TabsList>
+        <TabsTrigger value="info" label="Info" icon={InformationCircleIcon} />
+        <TabsTrigger
+          value="performance"
+          label="Performance"
+          icon={HandThumbUpIcon}
+        />
+      </TabsList>
+      <TabsContent value="info">
+        <InfoSection />
+      </TabsContent>
+      <TabsContent value="performance">
+        <FeedbacksSection />
+      </TabsContent>
+    </Tabs>
+  );
+
+  const InfoSection = () => (
+    <div className="mt-2 flex flex-col gap-5">
       {agentConfiguration.status === "active" && (
         <AssistantDetailsButtonBar
           owner={owner}
@@ -108,6 +151,11 @@ export function AssistantDetails({
         owner={owner}
       />
       <Page.Separator />
+      <AssistantActionsSection
+        agentConfiguration={agentConfiguration}
+        owner={owner}
+      />
+      <InstructionsSection />
     </div>
   );
 
@@ -121,6 +169,70 @@ export function AssistantDetails({
       "This assistant has no instructions."
     );
 
+  const FeedbacksSection = () => {
+    const {
+      agentConfigurationFeedbacks,
+      isAgentConfigurationFeedbacksLoading,
+    } = useAgentConfigurationFeedbacks({
+      workspaceId: owner.sId,
+      agentConfigurationId: assistantId ?? "",
+    });
+
+    const sortedFeedbacks = useMemo(() => {
+      if (!agentConfigurationFeedbacks) {
+        return null;
+      }
+      return agentConfigurationFeedbacks.sort(
+        (a, b) =>
+          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+      );
+    }, [agentConfigurationFeedbacks]);
+
+    const { agentConfigurationHistory, isAgentConfigurationHistoryLoading } =
+      useAgentConfigurationHistory({
+        workspaceId: owner.sId,
+        agentConfigurationId: assistantId || "",
+        disabled: !assistantId,
+      });
+
+    return isAgentConfigurationFeedbacksLoading ||
+      isAgentConfigurationHistoryLoading ? (
+      <Spinner />
+    ) : (
+      <div>
+        {!sortedFeedbacks || sortedFeedbacks.length === 0 || !assistantId ? (
+          <div className="mt-3 text-sm text-element-900">No feedbacks.</div>
+        ) : (
+          <div className="mt-3">
+            <AgentConfigurationVersionHeader
+              agentConfiguration={agentConfiguration}
+              agentConfigurationVersion={agentConfiguration.version}
+              isLatestVersion={true}
+            />
+            {sortedFeedbacks.map((feedback, index) => (
+              <div key={feedback.id}>
+                {index > 0 &&
+                  feedback.agentConfigurationVersion !==
+                    sortedFeedbacks[index - 1].agentConfigurationVersion && (
+                    <AgentConfigurationVersionHeader
+                      agentConfiguration={agentConfigurationHistory?.find(
+                        (c) => c.version === feedback.agentConfigurationVersion
+                      )}
+                      agentConfigurationVersion={
+                        feedback.agentConfigurationVersion
+                      }
+                      isLatestVersion={false}
+                    />
+                  )}
+                <FeedbackCard owner={owner} feedback={feedback} />
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
   return (
     <ElementModal
       openOnElement={agentConfiguration}
@@ -130,13 +242,111 @@ export function AssistantDetails({
       variant="side-sm"
     >
       <div className="flex flex-col gap-5 pt-6 text-sm text-foreground">
-        <DescriptionSection />
-        <AssistantActionsSection
-          agentConfiguration={agentConfiguration}
-          owner={owner}
-        />
-        <InstructionsSection />
+        <TopSection />
+        <TabsSection />
       </div>
     </ElementModal>
   );
 }
+
+function AgentConfigurationVersionHeader({
+  agentConfigurationVersion,
+  agentConfiguration,
+  isLatestVersion,
+}: {
+  agentConfigurationVersion: number;
+  agentConfiguration: LightAgentConfigurationType | undefined;
+  isLatestVersion: boolean;
+}) {
+  const getAgentConfigurationVersionString = useCallback(
+    (config: LightAgentConfigurationType) => {
+      return isLatestVersion
+        ? "Latest Version"
+        : !config.versionCreatedAt
+          ? `v${config.version}`
+          : new Date(config.versionCreatedAt).toLocaleDateString("en-US", {
+              year: "numeric",
+              month: "long",
+              day: "numeric",
+            });
+    },
+    [isLatestVersion]
+  );
+
+  return (
+    <div className="flex items-center gap-2">
+      <Page.H variant="h6">
+        {agentConfiguration
+          ? getAgentConfigurationVersionString(agentConfiguration)
+          : `v${agentConfigurationVersion}`}
+      </Page.H>
+    </div>
+  );
+}
+
+function FeedbackCard({
+  owner,
+  feedback,
+}: {
+  owner: LightWorkspaceType;
+  feedback: AgentMessageFeedbackType;
+}) {
+  const { userDetails } = useUserDetails(feedback.userId);
+  const { conversationId } = useFeedbackConversation({
+    workspaceId: owner.sId,
+    feedbackId: feedback.id.toString(),
+  });
+  const conversationUrl = `${process.env.NEXT_PUBLIC_DUST_CLIENT_FACING_URL}/w/${owner.sId}/assistant/${conversationId}`;
+
+  return (
+    <ContentMessage variant="slate" className="my-2">
+      <div className="justify-content-around mb-3 flex items-center gap-2">
+        <div className="flex w-full items-center gap-2">
+          <Avatar
+            size="xs"
+            visual={userDetails?.image || undefined}
+            name={userDetails?.firstName || "?"}
+          />
+          {userDetails?.firstName} {userDetails?.lastName}
+        </div>
+        <div className="flex-shrink-0 text-xs text-muted-foreground">
+          {timeAgoFrom(
+            feedback.createdAt instanceof Date
+              ? feedback.createdAt.getTime()
+              : new Date(feedback.createdAt).getTime(),
+            {
+              useLongFormat: true,
+            }
+          )}{" "}
+          ago
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <div className="flex-grow">{feedback.content}</div>
+        <div className="flex-shrink-0">
+          {feedback.thumbDirection === "up" ? (
+            <button className="rounded bg-sky-200 p-2">
+              <HandThumbUpIcon />
+            </button>
+          ) : (
+            <button className="rounded bg-warning-200 p-2">
+              <HandThumbDownIcon />
+            </button>
+          )}
+        </div>
+      </div>
+      {conversationId && (
+        <div className="mt-2">
+          <Button
+            variant="outline"
+            size="xs"
+            href={conversationUrl}
+            label="Conversation"
+            icon={ExternalLinkIcon}
+            target="_blank"
+          />
+        </div>
+      )}
+    </ContentMessage>
+  );
+}

front/lib/api/assistant/feedback.ts

@@ -26,8 +26,34 @@ export type AgentMessageFeedbackType = {
   userId: number;
   thumbDirection: AgentMessageFeedbackDirection;
   content: string | null;
+  agentConfigurationVersion: number;
+  agentConfigurationId: string;
+  createdAt: Date;
 };
 
+export async function getAgentConfigurationFeedbacks(
+  agentConfigurationId: string
+): Promise<Result<AgentMessageFeedbackType[], ConversationError>> {
+  const feedbacksRes =
+    await AgentMessageFeedbackResource.fetchByAgentConfigurationId(
+      agentConfigurationId
+    );
+
+  const feedbacks = feedbacksRes.map(
+    (feedback) =>
+      ({
+        id: feedback.id,
+        userId: feedback.userId,
+        thumbDirection: feedback.thumbDirection,
+        content: feedback.content,
+        agentConfigurationVersion: feedback.agentConfigurationVersion,
+        agentConfigurationId: feedback.agentConfigurationId,
+        createdAt: feedback.createdAt,
+      }) as AgentMessageFeedbackType
+  );
+  return new Ok(feedbacks);
+}
+
 export async function getConversationFeedbacksForUser(
   auth: Authenticator,
   conversation: ConversationType | ConversationWithoutContentType

front/lib/models/assistant/conversation.ts

@@ -416,6 +416,8 @@ AgentMessage.hasMany(AgentMessageFeedback, {
 User.hasMany(AgentMessageFeedback, {
   onDelete: "SET NULL",
 });
+AgentMessageFeedback.belongsTo(User);
+AgentMessageFeedback.belongsTo(AgentMessage);
 
 export class Message extends Model<
   InferAttributes<Message>,