Display the assistants last author picture and name in the feedback p…

…opover (#9032)

* Display the assistants last author picture and name in the feedback popover

* Update sparkle

* lint

front/components/assistant/conversation/AgentMessage.tsx

@@ -1,6 +1,6 @@
 import type {
-  ConversationMessageFeedbackSelectorProps,
   ConversationMessageSizeType,
+  FeedbackSelectorProps,
 } from "@dust-tt/sparkle";
 import {
   ArrowPathIcon,
@@ -15,6 +15,7 @@ import {
   EyeIcon,
   FeedbackSelector,
   Markdown,
+  Page,
   Popover,
 } from "@dust-tt/sparkle";
 import type {
@@ -73,6 +74,7 @@ import {
 } from "@app/components/markdown/VisualizationBlock";
 import { useEventSource } from "@app/hooks/useEventSource";
 import { useSubmitFunction } from "@app/lib/client/utils";
+import { useAgentConfigurationLastAuthor } from "@app/lib/swr/assistants";
 
 function cleanUpCitations(message: string): string {
   const regex = / ?:cite\[[a-zA-Z0-9, ]+\]/g;
@@ -84,7 +86,7 @@ interface AgentMessageProps {
   isInModal: boolean;
   isLastMessage: boolean;
   message: AgentMessageType;
-  messageFeedback: ConversationMessageFeedbackSelectorProps;
+  messageFeedback: FeedbackSelectorProps;
   owner: WorkspaceType;
   user: UserType;
   size: ConversationMessageSizeType;
@@ -358,6 +360,32 @@ export function AgentMessage({
     conversationId,
   ]);
 
+  const { agentLastAuthor } = useAgentConfigurationLastAuthor({
+    workspaceId: owner.sId,
+    agentConfigurationId: agentMessageToRender.configuration.sId,
+  });
+
+  const PopoverContent = useCallback(
+    () =>
+      agentLastAuthor && (
+        <div className="itemcenter mt-4 flex gap-2">
+          {agentLastAuthor?.image && (
+            <img
+              src={agentLastAuthor?.image}
+              alt={agentLastAuthor?.firstName}
+              className="h-8 w-8 rounded-full"
+            />
+          )}
+          <Page.P variant="secondary">
+            Your feedback will be sent to:
+            <br />
+            {agentLastAuthor?.firstName} {agentLastAuthor?.lastName}
+          </Page.P>
+        </div>
+      ),
+    [agentLastAuthor]
+  );
+
   const buttons =
     message.status === "failed"
       ? []
@@ -385,7 +413,11 @@ export function AgentMessage({
             icon={ArrowPathIcon}
             disabled={isRetryHandlerProcessing || shouldStream}
           />,
-          <FeedbackSelector key="feedback-selector" {...messageFeedback} />,
+          <FeedbackSelector
+            key="feedback-selector"
+            {...messageFeedback}
+            getPopoverInfo={PopoverContent}
+          />,
         ];
 
   // References logic.

front/components/assistant/conversation/MessageItem.tsx

@@ -1,7 +1,4 @@
-import type {
-  CitationType,
-  ConversationMessageFeedbackSelectorProps,
-} from "@dust-tt/sparkle";
+import type { CitationType, FeedbackSelectorProps } from "@dust-tt/sparkle";
 import { Citation, ZoomableImageCitationWrapper } from "@dust-tt/sparkle";
 import { useSendNotification } from "@dust-tt/sparkle";
 import type {
@@ -89,17 +86,16 @@ const MessageItem = React.forwardRef<HTMLDivElement, MessageItemProps>(
       return null;
     }
 
-    const messageFeedbackWithSubmit: ConversationMessageFeedbackSelectorProps =
-      {
-        feedback: messageFeedback
-          ? {
-              thumb: messageFeedback.thumbDirection,
-              feedbackContent: messageFeedback.content,
-            }
-          : null,
-        onSubmitThumb,
-        isSubmittingThumb,
-      };
+    const messageFeedbackWithSubmit: FeedbackSelectorProps = {
+      feedback: messageFeedback
+        ? {
+            thumb: messageFeedback.thumbDirection,
+            feedbackContent: messageFeedback.content,
+          }
+        : null,
+      onSubmitThumb,
+      isSubmittingThumb,
+    };
 
     switch (type) {
       case "user_message":

front/lib/swr/assistants.ts

@@ -5,6 +5,7 @@ import type {
   AgentsGetViewType,
   LightAgentConfigurationType,
   LightWorkspaceType,
+  UserType,
 } from "@dust-tt/types";
 import { useCallback, useMemo, useState } from "react";
 import type { Fetcher } from "swr";
@@ -241,6 +242,29 @@ export function useAgentConfiguration({
   };
 }
 
+export function useAgentConfigurationLastAuthor({
+  workspaceId,
+  agentConfigurationId,
+}: {
+  workspaceId: string;
+  agentConfigurationId: string | null;
+}) {
+  const userFetcher: Fetcher<{
+    user: UserType;
+  }> = fetcher;
+
+  const { data, error } = useSWRWithDefaults(
+    `/api/w/${workspaceId}/assistant/agent_configurations/${agentConfigurationId}/last_author`,
+    userFetcher
+  );
+
+  return {
+    agentLastAuthor: data ? data.user : null,
+    isLoading: !error && !data,
+    isError: error,
+  };
+}
+
 export function useAgentUsage({
   workspaceId,
   agentConfigurationId,

front/package.json

@@ -20,7 +20,7 @@
   "dependencies": {
     "@auth0/nextjs-auth0": "^3.5.0",
     "@dust-tt/client": "file:../sdks/js",
-    "@dust-tt/sparkle": "^0.2.326",
+    "@dust-tt/sparkle": "^0.2.330",
     "@dust-tt/types": "file:../types",
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "^2.0.11",
@@ -79,9 +79,9 @@
     "jszip": "^3.10.1",
     "jwks-rsa": "^3.1.0",
     "lodash": "^4.17.21",
+    "lru-memoizer": "^2.2.0",
     "lucide-react": "^0.363.0",
     "luxon": "^3.4.4",
-    "lru-memoizer": "^2.2.0",
     "marked": "^14.1.3",
     "mermaid": "^10.9.0",
     "minimist": "^1.2.8",

front/pages/api/w/[wId]/assistant/agent_configurations/[aId]/last_author.ts

@@ -0,0 +1,64 @@
+import type { UserType, WithAPIErrorResponse } from "@dust-tt/types";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import { getAgentConfiguration } from "@app/lib/api/assistant/configuration";
+import { withSessionAuthenticationForWorkspace } from "@app/lib/api/auth_wrappers";
+import type { Authenticator } from "@app/lib/auth";
+import { UserResource } from "@app/lib/resources/user_resource";
+import { apiError } from "@app/logger/withlogging";
+
+export type GetAgentLastAuthorResponseBody = {
+  user: UserType | null;
+};
+
+async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<WithAPIErrorResponse<GetAgentLastAuthorResponseBody>>,
+  auth: Authenticator
+): Promise<void> {
+  switch (req.method) {
+    case "GET":
+      const agentConfiguration = await getAgentConfiguration(
+        auth,
+        req.query.aId as string
+      );
+      if (!agentConfiguration) {
+        return apiError(req, res, {
+          status_code: 404,
+          api_error: {
+            type: "agent_configuration_not_found",
+            message: "The Assistant you're trying to access was not found.",
+          },
+        });
+      }
+
+      if (!agentConfiguration.versionAuthorId) {
+        return apiError(req, res, {
+          status_code: 404,
+          api_error: {
+            type: "agent_last_author_not_found",
+            message: "The last author of this assistant was not found.",
+          },
+        });
+      }
+
+      const agentLastAuthor = await UserResource.fetchByModelIds([
+        agentConfiguration.versionAuthorId,
+      ]);
+
+      return res.status(200).json({
+        user: agentLastAuthor[0] ? agentLastAuthor[0].toJSON() : null,
+      });
+
+    default:
+      return apiError(req, res, {
+        status_code: 405,
+        api_error: {
+          type: "method_not_supported_error",
+          message: "The method passed is not supported, POST is expected.",
+        },
+      });
+  }
+}
+
+export default withSessionAuthenticationForWorkspace(handler);

types/src/front/lib/error.ts

@@ -52,6 +52,7 @@ export type APIErrorType =
   | "connector_provider_not_supported"
   | "connector_credentials_error"
   | "agent_configuration_not_found"
+  | "agent_last_author_not_found"
   | "agent_message_error"
   | "message_not_found"
   | "plan_message_limit_exceeded"