Add unified cBioAgent UI config controls

ForisKuang · ForisKuang · commit 58df744bb218 · 2026-06-03T13:38:46.000-04:00
diff --git a/client/src/components/Chat/Header.tsx b/client/src/components/Chat/Header.tsx
@@ -34,6 +34,10 @@ export default function Header() {
   });
 
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
+  const showModelSelector = useMemo(() => {
+    const modelSpecs = startupConfig?.modelSpecs?.list ?? [];
+    return interfaceConfig.modelSelect === true || modelSpecs.length !== 1;
+  }, [interfaceConfig.modelSelect, startupConfig?.modelSpecs?.list]);
 
   return (
     <div className="sticky top-0 z-10 flex h-14 w-full items-center justify-between bg-white p-2 font-semibold text-text-primary dark:bg-gray-800">
@@ -56,7 +60,7 @@ export default function Header() {
               !isSmallScreen ? 'transition-all duration-200 ease-in-out' : ''
             } ${!navVisible ? 'translate-x-0' : 'translate-x-[-100px]'}`}
           >
-            <ModelSelector startupConfig={startupConfig} />
+            {showModelSelector && <ModelSelector startupConfig={startupConfig} />}
             {interfaceConfig.presets === true && interfaceConfig.modelSelect && <PresetsMenu />}
             {hasAccessToBookmarks === true && <BookmarkMenu />}
             {hasAccessToMultiConvo === true && <AddMultiConvo />}
diff --git a/client/src/components/Chat/Input/ConversationStarters.tsx b/client/src/components/Chat/Input/ConversationStarters.tsx
@@ -1,7 +1,12 @@
-import { useMemo, useCallback } from 'react';
+import { useMemo, useCallback, useState } from 'react';
 import { EModelEndpoint, Constants } from 'librechat-data-provider';
+import type { TModelSpec } from 'librechat-data-provider';
 import { useChatContext, useAgentsMapContext, useAssistantsMapContext } from '~/Providers';
-import { useGetAssistantDocsQuery, useGetEndpointsQuery } from '~/data-provider';
+import {
+  useGetAssistantDocsQuery,
+  useGetEndpointsQuery,
+  useGetStartupConfig,
+} from '~/data-provider';
 import { getIconEndpoint, getEntity } from '~/utils';
 import { useSubmitMessage } from '~/hooks';
 
@@ -10,6 +15,8 @@ const ConversationStarters = () => {
   const agentsMap = useAgentsMapContext();
   const assistantMap = useAssistantsMapContext();
   const { data: endpointsConfig } = useGetEndpointsQuery();
+  const { data: startupConfig } = useGetStartupConfig();
+  const [showExamples, setShowExamples] = useState(false);
 
   const endpointType = useMemo(() => {
     let ep = conversation?.endpoint ?? '';
@@ -41,7 +48,31 @@ const ConversationStarters = () => {
     assistant_id: conversation?.assistant_id,
   });
 
+  const currentSpec = useMemo(() => {
+    const specs = startupConfig?.modelSpecs?.list ?? [];
+    return specs.find(
+      (spec: TModelSpec) =>
+        spec.name === conversation?.spec || spec.preset?.agent_id === conversation?.agent_id,
+    );
+  }, [startupConfig?.modelSpecs?.list, conversation?.spec, conversation?.agent_id]);
+
+  const conversationStarterCategories = useMemo(() => {
+    return (
+      currentSpec?.conversationStarterCategories?.filter(
+        (category) => category.label && category.starters?.length,
+      ) ?? []
+    );
+  }, [currentSpec?.conversationStarterCategories]);
+
   const conversation_starters = useMemo(() => {
+    if (conversationStarterCategories.length) {
+      return [];
+    }
+
+    if (currentSpec?.conversation_starters?.length) {
+      return currentSpec.conversation_starters;
+    }
+
     if (entity?.conversation_starters?.length) {
       return entity.conversation_starters;
     }
@@ -51,18 +82,57 @@ const ConversationStarters = () => {
     }
 
     return documentsMap.get(entity?.id ?? '')?.conversation_starters ?? [];
-  }, [documentsMap, isAgent, entity]);
+  }, [conversationStarterCategories.length, currentSpec, documentsMap, isAgent, entity]);
 
   const { submitMessage } = useSubmitMessage();
   const sendConversationStarter = useCallback(
     (text: string) => submitMessage({ text }),
     [submitMessage],
   );
 
-  if (!conversation_starters.length) {
+  if (!conversation_starters.length && !conversationStarterCategories.length) {
     return null;
   }
 
+  if (conversationStarterCategories.length) {
+    return (
+      <div className="mt-6 flex w-full max-w-5xl flex-col items-center px-4">
+        <button
+          type="button"
+          onClick={() => setShowExamples((value) => !value)}
+          className="rounded-full border border-border-light bg-surface-secondary px-4 py-2 text-sm font-medium text-text-primary transition-colors duration-200 hover:bg-surface-tertiary"
+          aria-expanded={showExamples}
+        >
+          {showExamples ? 'Hide examples' : 'Show examples'}
+        </button>
+        {showExamples && (
+          <div className="mt-5 grid w-full grid-cols-1 gap-4 md:grid-cols-3">
+            {conversationStarterCategories.map((category) => (
+              <section key={category.label} className="flex min-w-0 flex-col gap-3">
+                <h2 className="text-center text-sm font-medium text-text-secondary">
+                  {category.label}
+                </h2>
+                <div className="flex flex-col gap-2">
+                  {category.starters.map((text: string, index: number) => (
+                    <button
+                      key={`${category.label}-${index}`}
+                      onClick={() => sendConversationStarter(text)}
+                      className="relative min-h-20 w-full cursor-pointer rounded-lg border border-border-medium px-3 py-3 text-left text-sm shadow-[0_0_2px_0_rgba(0,0,0,0.05),0_4px_6px_0_rgba(0,0,0,0.02)] transition-colors duration-300 ease-in-out fade-in hover:bg-surface-tertiary"
+                    >
+                      <span className="line-clamp-3 overflow-hidden break-words text-text-secondary">
+                        {text}
+                      </span>
+                    </button>
+                  ))}
+                </div>
+              </section>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
   return (
     <div className="mt-8 flex flex-wrap justify-center gap-3 px-4">
       {conversation_starters
diff --git a/client/src/components/Chat/Landing.tsx b/client/src/components/Chat/Landing.tsx
@@ -74,10 +74,23 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
     assistant_id: conversation?.assistant_id,
   });
 
-  const name = entity?.name ?? '';
-  const description = (conversation?.greeting || entity?.description) ?? '';
+  const currentSpec = useMemo(() => {
+    const specs = startupConfig?.modelSpecs?.list ?? [];
+    return specs.find(
+      (s: TModelSpec) =>
+        s.name === conversation?.spec || s.preset?.agent_id === conversation?.agent_id,
+    );
+  }, [startupConfig?.modelSpecs?.list, conversation?.spec, conversation?.agent_id]);
+
+  const specName = currentSpec?.label?.split(/\s+-\s+/)[0] ?? '';
+  const name = entity?.name ?? specName;
+  const description =
+    (conversation?.greeting || entity?.description || currentSpec?.description) ?? '';
 
   const otherSpec = useMemo(() => {
+    if (startupConfig?.interface?.showSwitchAgent === false) {
+      return undefined;
+    }
     const specs = startupConfig?.modelSpecs?.list ?? [];
     const switchableSpecs = specs.filter(
       (s: TModelSpec) => s.showSwitchAgent && isAgentsEndpoint(s.preset?.endpoint),
@@ -91,7 +104,11 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
     );
     const nextIndex = (currentIndex + 1) % switchableSpecs.length;
     return switchableSpecs[nextIndex];
-  }, [startupConfig?.modelSpecs?.list, conversation?.agent_id]);
+  }, [
+    startupConfig?.interface?.showSwitchAgent,
+    startupConfig?.modelSpecs?.list,
+    conversation?.agent_id,
+  ]);
 
   const handleSwitchAgent = useCallback(() => {
     if (!otherSpec) {
diff --git a/client/src/components/Chat/Menus/Endpoints/ModelSelector.tsx b/client/src/components/Chat/Menus/Endpoints/ModelSelector.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import type { ModelSelectorProps } from '~/common';
+import { TooltipAnchor } from '@librechat/client';
 import { ModelSelectorProvider, useModelSelectorContext } from './ModelSelectorContext';
 import { ModelSelectorChatProvider } from './ModelSelectorChatContext';
 import {
@@ -57,8 +58,19 @@ function ModelSelectorContent() {
       }),
     [localize, agentsMap, modelSpecs, selectedValues, mappedEndpoints],
   );
+  const selectedSpec = useMemo(
+    () => modelSpecs.find((spec) => spec.name === selectedValues.modelSpec),
+    [modelSpecs, selectedValues.modelSpec],
+  );
+  const selectedSpecTooltip = useMemo(() => {
+    if (!selectedSpec?.label) {
+      return '';
+    }
+    const [, description] = selectedSpec.label.split(/\s+-\s+(.+)/);
+    return description || selectedSpec.label;
+  }, [selectedSpec?.label]);
 
-  const trigger = (
+  const triggerButton = (
     <button
       className="my-1 flex h-10 w-full max-w-[70vw] items-center justify-center gap-2 rounded-xl border border-border-light bg-surface-secondary px-3 py-2 text-sm text-text-primary hover:bg-surface-tertiary"
       aria-label={localize('com_ui_select_model')}
@@ -72,6 +84,16 @@ function ModelSelectorContent() {
     </button>
   );
 
+  const trigger = selectedSpecTooltip ? (
+    <TooltipAnchor
+      description={selectedSpecTooltip}
+      side="bottom"
+      render={triggerButton}
+    />
+  ) : (
+    triggerButton
+  );
+
   return (
     <div className="relative flex w-full max-w-md flex-col items-center gap-2">
       <Menu
diff --git a/client/src/components/Chat/Menus/Endpoints/utils.ts b/client/src/components/Chat/Menus/Endpoints/utils.ts
@@ -177,7 +177,7 @@ export const getDisplayValue = ({
 }) => {
   if (selectedValues.modelSpec) {
     const spec = modelSpecs.find((s) => s.name === selectedValues.modelSpec);
-    return spec?.label || spec?.name || localize('com_ui_select_model');
+    return spec?.label?.split(/\s+-\s+/)[0] || spec?.name || localize('com_ui_select_model');
   }
 
   if (selectedValues.model && selectedValues.endpoint) {
diff --git a/client/src/hooks/Input/useTextarea.ts b/client/src/hooks/Input/useTextarea.ts
@@ -14,7 +14,7 @@ import { useAssistantsMapContext } from '~/Providers/AssistantsMapContext';
 import { useAgentsMapContext } from '~/Providers/AgentsMapContext';
 import useGetSender from '~/hooks/Conversations/useGetSender';
 import useFileHandling from '~/hooks/Files/useFileHandling';
-import { useInteractionHealthCheck } from '~/data-provider';
+import { useGetStartupConfig, useInteractionHealthCheck } from '~/data-provider';
 import { useChatContext } from '~/Providers/ChatContext';
 import { globalAudioId } from '~/common';
 import { useLocalize } from '~/hooks';
@@ -37,6 +37,7 @@ export default function useTextarea({
   const getSender = useGetSender();
   const isComposing = useRef(false);
   const agentsMap = useAgentsMapContext();
+  const { data: startupConfig } = useGetStartupConfig();
   const { handleFiles } = useFileHandling();
   const assistantMap = useAssistantsMapContext();
   const checkHealth = useInteractionHealthCheck();
@@ -55,6 +56,10 @@ export default function useTextarea({
     assistant_id: conversation?.assistant_id,
   });
   const entityName = entity?.name ?? '';
+  const modelSpecPlaceholder =
+    startupConfig?.modelSpecs?.list?.find(
+      (spec) => spec.name === conversation?.spec || spec.preset?.agent_id === conversation?.agent_id,
+    )?.placeholder ?? '';
 
   const isNotAppendable =
     (((latestMessage?.unfinished ?? false) && !isSubmitting) || (latestMessage?.error ?? false)) &&
@@ -83,6 +88,9 @@ export default function useTextarea({
       const currentEndpoint = conversation?.endpoint ?? '';
       const currentAgentId = conversation?.agent_id ?? '';
       const currentAssistantId = conversation?.assistant_id ?? '';
+      if (isAgent && modelSpecPlaceholder) {
+        return modelSpecPlaceholder;
+      }
       if (isAgent && (!currentAgentId || !agentsMap?.[currentAgentId])) {
         return localize('com_endpoint_agent_placeholder');
       } else if (
@@ -132,6 +140,7 @@ export default function useTextarea({
     getSender,
     agentsMap,
     entityName,
+    modelSpecPlaceholder,
     textAreaRef,
     isAssistant,
     assistantMap,
diff --git a/packages/data-provider/src/config.ts b/packages/data-provider/src/config.ts
@@ -542,6 +542,7 @@ export const interfaceSchema = z
     presets: z.boolean().optional(),
     prompts: z.boolean().optional(),
     agents: z.boolean().optional(),
+    showSwitchAgent: z.boolean().optional(),
     temporaryChat: z.boolean().optional(),
     temporaryChatRetention: z.number().min(1).max(8760).optional(),
     runCode: z.boolean().optional(),
@@ -572,6 +573,7 @@ export const interfaceSchema = z
     memories: true,
     prompts: true,
     agents: true,
+    showSwitchAgent: true,
     temporaryChat: true,
     runCode: true,
     webSearch: true,
diff --git a/packages/data-provider/src/models.ts b/packages/data-provider/src/models.ts
@@ -15,6 +15,7 @@ export type TModelSpec = {
   order?: number;
   default?: boolean;
   description?: string;
+  placeholder?: string;
   /**
    * Optional group name for organizing specs in the UI selector.
    * - If it matches an endpoint name (e.g., "openAI", "groq"), the spec appears nested under that endpoint
@@ -24,20 +25,35 @@ export type TModelSpec = {
   group?: string;
   showIconInMenu?: boolean;
   showIconInHeader?: boolean;
+  showSwitchAgent?: boolean;
+  conversationStarterCategories?: Array<{
+    label: string;
+    starters: string[];
+  }>;
+  conversation_starters?: string[];
   iconURL?: string | EModelEndpoint; // Allow using project-included icons
   authType?: AuthType;
 };
 
+const tConversationStarterCategorySchema = z.object({
+  label: z.string(),
+  starters: z.array(z.string()),
+});
+
 export const tModelSpecSchema = z.object({
   name: z.string(),
   label: z.string(),
   preset: tPresetSchema,
   order: z.number().optional(),
   default: z.boolean().optional(),
   description: z.string().optional(),
+  placeholder: z.string().optional(),
   group: z.string().optional(),
   showIconInMenu: z.boolean().optional(),
   showIconInHeader: z.boolean().optional(),
+  showSwitchAgent: z.boolean().optional(),
+  conversationStarterCategories: z.array(tConversationStarterCategorySchema).optional(),
+  conversation_starters: z.array(z.string()).optional(),
   iconURL: z.union([z.string(), eModelEndpointSchema]).optional(),
   authType: authTypeSchema.optional(),
 });
diff --git a/packages/data-schemas/src/app/interface.ts b/packages/data-schemas/src/app/interface.ts
@@ -48,6 +48,7 @@ export async function loadDefaultInterface({
     prompts: interfaceConfig?.prompts,
     multiConvo: interfaceConfig?.multiConvo,
     agents: interfaceConfig?.agents,
+    showSwitchAgent: interfaceConfig?.showSwitchAgent,
     temporaryChat: interfaceConfig?.temporaryChat,
     runCode: interfaceConfig?.runCode,
     webSearch: interfaceConfig?.webSearch,

Original file line number	Diff line number	Diff line change
`@@ -177,7 +177,7 @@ export const getDisplayValue = ({`
`177`	`177`	`}) => {`
`178`	`178`	`if (selectedValues.modelSpec) {`
`179`	`179`	`const spec = modelSpecs.find((s) => s.name === selectedValues.modelSpec);`
`180`		`- return spec?.label \|\| spec?.name \|\| localize('com_ui_select_model');`
	`180`	`+ return spec?.label?.split(/\s+-\s+/)[0] \|\| spec?.name \|\| localize('com_ui_select_model');`
`181`	`181`	`}`
`182`	`182`
`183`	`183`	`if (selectedValues.model && selectedValues.endpoint) {`