[Meru AB] Bold version of assistant usage message (#3911)

Fixes #3865

front/components/assistant/AssistantActions.tsx

@@ -6,8 +6,8 @@ import type {
 import type { WorkspaceType } from "@dust-tt/types";
 import { useContext } from "react";
 
+import { assistantUsageMessage } from "@app/components/assistant/Usage";
 import { SendNotificationsContext } from "@app/components/sparkle/Notification";
-import { assistantUsageMessage } from "@app/lib/assistant";
 import { updateAgentUserListStatus } from "@app/lib/client/dust_api";
 import { useAgentConfiguration, useAgentUsage } from "@app/lib/swr";
 

front/components/assistant/AssistantDetails.tsx

@@ -29,8 +29,8 @@ import type { KeyedMutator } from "swr";
 import AssistantListActions from "@app/components/assistant/AssistantListActions";
 import { AssistantEditionMenu } from "@app/components/assistant/conversation/AssistantEditionMenu";
 import { SharingDropdown } from "@app/components/assistant/Sharing";
+import { assistantUsageMessage } from "@app/components/assistant/Usage";
 import { SendNotificationsContext } from "@app/components/sparkle/Notification";
-import { assistantUsageMessage } from "@app/lib/assistant";
 import { updateAgentScope } from "@app/lib/client/dust_api";
 import { CONNECTOR_CONFIGURATIONS } from "@app/lib/connector_providers";
 import { useAgentConfiguration, useAgentUsage, useApp } from "@app/lib/swr";
@@ -164,7 +164,9 @@ export function AssistantDetails({
               {agentConfiguration.lastAuthors.join(", ")}
             </div>
           )}
-          <div>{editedSentence + ", " + usageSentence}</div>
+          <div>
+            {editedSentence + ", "} {usageSentence}
+          </div>
         </div>
       )}
       <Page.Separator />

front/components/assistant/Sharing.tsx

@@ -19,7 +19,7 @@ import type {
 import { isBuilder } from "@dust-tt/types";
 import { useState } from "react";
 
-import { assistantUsageMessage } from "@app/lib/assistant";
+import { assistantUsageMessage } from "@app/components/assistant/Usage";
 import { useAgentConfiguration, useAgentUsage } from "@app/lib/swr";
 
 type ConfirmationModalDataType = {
@@ -122,6 +122,7 @@ export function SharingButton({
         usage: agentUsage,
         isLoading: isAgentUsageLoading,
         isError: isAgentUsageError,
+        boldVersion: true,
       })
     : "";
 
@@ -195,6 +196,7 @@ export function SharingDropdown({
         usage: agentUsage.agentUsage,
         isLoading: agentUsage.isAgentUsageLoading,
         isError: agentUsage.isAgentUsageError,
+        boldVersion: true,
       })
     : "";
 
@@ -317,7 +319,7 @@ function ScopeChangeModal({
 }: {
   show: boolean;
   confirmationModalData: ConfirmationModalDataType;
-  usageText?: string;
+  usageText?: React.ReactNode;
   onClose: () => void;
   setSharingScope: () => void;
 }) {

front/components/assistant/Usage.tsx

@@ -0,0 +1,69 @@
+import type { AgentUsageType } from "@dust-tt/types";
+import { pluralize } from "@dust-tt/types";
+import type { ReactNode } from "react";
+
+export function assistantUsageMessage({
+  assistantName,
+  usage,
+  isLoading,
+  isError,
+  shortVersion,
+  boldVersion,
+}: {
+  assistantName: string | null;
+  usage: AgentUsageType | null;
+  isLoading: boolean;
+  isError: boolean;
+  shortVersion?: boolean;
+  boldVersion?: boolean;
+}): ReactNode {
+  if (isError) {
+    return "Error loading usage data.";
+  }
+
+  if (isLoading) {
+    return "Loading usage data...";
+  }
+
+  function boldIfRequested(text: string) {
+    return boldVersion ? <span className="font-bold">{text}</span> : text;
+  }
+
+  if (usage) {
+    const days = usage.timePeriodSec / (60 * 60 * 24);
+
+    if (shortVersion) {
+      const messageCount = boldIfRequested(
+        `${usage.messageCount} message${pluralize(usage.messageCount)}`
+      );
+
+      return (
+        <>
+          {messageCount} over the last {days} days
+        </>
+      );
+    }
+
+    const usersWithAgentInListCount = boldIfRequested(
+      `${usage.usersWithAgentInListCount} member${pluralize(
+        usage.usersWithAgentInListCount
+      )}`
+    );
+    const messageCount = boldIfRequested(
+      `${usage.messageCount} time${pluralize(usage.messageCount)}`
+    );
+    const userCount = boldIfRequested(
+      `${usage.userCount} member${pluralize(usage.userCount)}`
+    );
+
+    return (
+      <>
+        {`${
+          assistantName ? "@" + assistantName : "This assistant"
+        } is active for`}{" "}
+        {usersWithAgentInListCount} and has been used {messageCount} by{" "}
+        {userCount} in the last {usage.timePeriodSec / (60 * 60 * 24)} days.
+      </>
+    );
+  }
+}

front/lib/assistant.ts

@@ -1,10 +1,9 @@
 import type {
-  AgentUsageType,
   DataSourceType,
   LightAgentConfigurationType,
 } from "@dust-tt/types";
 import type { SupportedModel } from "@dust-tt/types";
-import { pluralize, SUPPORTED_MODEL_CONFIGS } from "@dust-tt/types";
+import { SUPPORTED_MODEL_CONFIGS } from "@dust-tt/types";
 
 import { CONNECTOR_CONFIGURATIONS } from "@app/lib/connector_providers";
 
@@ -106,54 +105,6 @@ export function compareAgentsForSort(
   return 0; // Default: keep the original order
 }
 
-export function assistantUsageMessage({
-  assistantName,
-  usage,
-  isLoading,
-  isError,
-  shortVersion,
-}: {
-  assistantName: string | null;
-  usage: AgentUsageType | null;
-  isLoading: boolean;
-  isError: boolean;
-  shortVersion?: boolean;
-}) {
-  if (isError) {
-    return "Error loading usage data.";
-  }
-
-  if (isLoading) {
-    return "Loading usage data...";
-  }
-
-  if (usage) {
-    const days = usage.timePeriodSec / (60 * 60 * 24);
-
-    if (shortVersion) {
-      const messageCount = `${usage.messageCount} message${pluralize(
-        usage.messageCount
-      )}`;
-
-      return `${messageCount} over the last ${days} days`;
-    }
-
-    const usersWithAgentInListCount = `${
-      usage.usersWithAgentInListCount
-    } member${pluralize(usage.usersWithAgentInListCount)}`;
-    const messageCount = `${usage.messageCount} time${pluralize(
-      usage.messageCount
-    )}`;
-    const userCount = `${usage.userCount} member${pluralize(usage.userCount)}`;
-
-    return `${
-      assistantName ? "@" + assistantName : "This assistant"
-    } is active for ${usersWithAgentInListCount} and has been used ${messageCount} by ${userCount} in the last ${
-      usage.timePeriodSec / (60 * 60 * 24)
-    } days.`;
-  }
-}
-
 // Order in the following format : connectorProvider > empty > webcrawler
 export function orderDatasourceByImportance(dataSources: DataSourceType[]) {
   return dataSources.sort((a, b) => {

front/pages/w/[wId]/builder/assistants/index.tsx

@@ -26,13 +26,11 @@ import { useState } from "react";
 
 import { AssistantDetails } from "@app/components/assistant/AssistantDetails";
 import { SCOPE_INFO } from "@app/components/assistant/Sharing";
+import { assistantUsageMessage } from "@app/components/assistant/Usage";
 import { EmptyCallToAction } from "@app/components/EmptyCallToAction";
 import AppLayout from "@app/components/sparkle/AppLayout";
 import { subNavigationBuild } from "@app/components/sparkle/navigation";
-import {
-  assistantUsageMessage,
-  compareAgentsForSort,
-} from "@app/lib/assistant";
+import { compareAgentsForSort } from "@app/lib/assistant";
 import { Authenticator, getSession } from "@app/lib/auth";
 import { useAgentConfigurations } from "@app/lib/swr";
 import { classNames, subFilter } from "@app/lib/utils";