feat: add short description field to agents, and display it in dropdown

api/models/Agent.js

@@ -627,6 +627,7 @@ const getListAgentsByAccess = async ({
     author: 1,
     projectIds: 1,
     description: 1,
+    short_description: 1,
     updatedAt: 1,
     category: 1,
     support_contact: 1,
@@ -697,6 +698,7 @@ const getListAgents = async (searchParameter) => {
       author: 1,
       projectIds: 1,
       description: 1,
+      short_description: 1,
       // @deprecated - isCollaborative replaced by ACL permissions
       isCollaborative: 1,
       category: 1,

client/src/common/selector.ts

@@ -8,6 +8,7 @@ export interface Endpoint {
   models?: Array<{ name: string; isGlobal?: boolean }>;
   icon: React.ReactNode;
   agentNames?: Record<string, string>;
+  agentDescriptions?: Record<string, string>;
   assistantNames?: Record<string, string>;
   modelIcons?: Record<string, string | undefined>;
 }

client/src/components/Chat/Menus/Endpoints/components/EndpointModelItem.tsx

@@ -15,11 +15,13 @@ export function EndpointModelItem({ modelId, endpoint, isSelected }: EndpointMod
   const { handleSelectModel } = useModelSelectorContext();
   let isGlobal = false;
   let modelName = modelId;
+  let modelDescription = '';
   const avatarUrl = endpoint?.modelIcons?.[modelId ?? ''] || null;
 
   // Use custom names if available
   if (endpoint && modelId && isAgentsEndpoint(endpoint.value) && endpoint.agentNames?.[modelId]) {
     modelName = endpoint.agentNames[modelId];
+    modelDescription = endpoint.agentDescriptions?.[modelId] || '';
 
     const modelInfo = endpoint?.models?.find((m) => m.name === modelId);
     isGlobal = modelInfo?.isGlobal ?? false;
@@ -39,17 +41,26 @@ export function EndpointModelItem({ modelId, endpoint, isSelected }: EndpointMod
       className="flex w-full cursor-pointer items-center justify-between rounded-lg px-2 text-sm"
     >
       <div className="flex w-full min-w-0 items-center gap-2 px-1 py-1">
-        {avatarUrl ? (
+        {avatarUrl && (
           <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-full">
             <img src={avatarUrl} alt={modelName ?? ''} className="h-full w-full object-cover" />
           </div>
-        ) : (isAgentsEndpoint(endpoint.value) || isAssistantsEndpoint(endpoint.value)) &&
-          endpoint.icon ? (
-          <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-full">
-            {endpoint.icon}
-          </div>
-        ) : null}
-        <span className="truncate text-left">{modelName}</span>
+        )}
+        {!avatarUrl &&
+          (isAgentsEndpoint(endpoint.value) || isAssistantsEndpoint(endpoint.value)) &&
+          endpoint.icon && (
+            <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-full">
+              {endpoint.icon}
+            </div>
+          )}
+        <div className="flex min-w-0 flex-1 flex-col">
+          <span className="truncate text-left">{modelName}</span>
+          {modelDescription && (
+            <span className="truncate text-left text-xs text-text-secondary">
+              {modelDescription}
+            </span>
+          )}
+        </div>
         {isGlobal && (
           <EarthIcon className="ml-auto size-4 flex-shrink-0 self-center text-green-400" />
         )}

client/src/components/Chat/Menus/Endpoints/components/SearchResults.tsx

@@ -138,12 +138,14 @@ export function SearchResults({ results, localize, searchValue }: SearchResultsP
 
                   let isGlobal = false;
                   let modelName = modelId;
+                  let modelDescription = '';
                   if (
                     isAgentsEndpoint(endpoint.value) &&
                     endpoint.agentNames &&
                     endpoint.agentNames[modelId]
                   ) {
                     modelName = endpoint.agentNames[modelId];
+                    modelDescription = endpoint.agentDescriptions?.[modelId] || '';
                     const modelInfo = endpoint?.models?.find((m) => m.name === modelId);
                     isGlobal = modelInfo?.isGlobal ?? false;
                   } else if (
@@ -160,19 +162,28 @@ export function SearchResults({ results, localize, searchValue }: SearchResultsP
                       onClick={() => handleSelectModel(endpoint, modelId)}
                       className="flex w-full cursor-pointer items-center justify-start rounded-lg px-3 py-2 pl-6 text-sm"
                     >
-                      <div className="flex items-center gap-2">
+                      <div className="flex min-w-0 flex-1 items-center gap-2">
                         {endpoint.modelIcons?.[modelId] && (
-                          <div className="flex h-5 w-5 items-center justify-center overflow-hidden rounded-full">
+                          <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-full">
                             <img
                               src={endpoint.modelIcons[modelId]}
                               alt={modelName}
                               className="h-full w-full object-cover"
                             />
                           </div>
                         )}
-                        <span>{modelName}</span>
+                        <div className="flex min-w-0 flex-1 flex-col">
+                          <span className="truncate">{modelName}</span>
+                          {modelDescription && (
+                            <span className="truncate text-xs text-text-secondary">
+                              {modelDescription}
+                            </span>
+                          )}
+                        </div>
                       </div>
-                      {isGlobal && <EarthIcon className="ml-auto size-4 text-green-400" />}
+                      {isGlobal && (
+                        <EarthIcon className="ml-auto size-4 flex-shrink-0 text-green-400" />
+                      )}
                       {selectedEndpoint === endpoint.value && selectedModel === modelId && (
                         <svg
                           width="16"

client/src/hooks/Endpoint/useEndpoints.ts

@@ -117,6 +117,10 @@ export const useEndpoints = ({
           acc[agent.id] = agent.name || '';
           return acc;
         }, {});
+        result.agentDescriptions = agents?.reduce((acc, agent) => {
+          acc[agent.id] = agent.short_description || agent.description || '';
+          return acc;
+        }, {});
         result.modelIcons = agents?.reduce((acc, agent) => {
           acc[agent.id] = agent?.avatar?.filepath;
           return acc;

packages/api/src/agents/validation.ts

@@ -55,6 +55,7 @@ export const graphEdgeSchema = z.object({
 export const agentBaseSchema = z.object({
   name: z.string().nullable().optional(),
   description: z.string().nullable().optional(),
+  short_description: z.string().max(50).nullable().optional(),
   instructions: z.string().nullable().optional(),
   avatar: agentAvatarSchema.nullable().optional(),
   model_parameters: z.record(z.unknown()).optional(),

packages/data-provider/src/types/assistants.ts

@@ -214,6 +214,7 @@ export type Agent = {
   endpoint?: string | null;
   authorName?: string | null;
   description: string | null;
+  short_description?: string | null;
   created_at: number;
   avatar: AgentAvatar | null;
   instructions: string | null;

packages/data-schemas/src/schema/agent.ts

@@ -15,6 +15,9 @@ const agentSchema = new Schema<IAgent>(
     description: {
       type: String,
     },
+    short_description: {
+      type: String,
+    },
     instructions: {
       type: String,
     },

packages/data-schemas/src/types/agent.ts

@@ -10,6 +10,7 @@ export interface IAgent extends Omit<Document, 'model'> {
   id: string;
   name?: string;
   description?: string;
+  short_description?: string;
   instructions?: string;
   avatar?: {
     filepath: string;