Add unified cBioAgent UI config controls

ForisKuang · ForisKuang · commit d5a3a99ee2e2 · 2026-06-03T15:55:08.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,15 +1,35 @@
-import { useMemo, useCallback } from 'react';
+import { useMemo, useCallback, useState } from 'react';
+import { ChevronDown, HeartPulse, MapPin, Search } from 'lucide-react';
+import type { LucideIcon } from 'lucide-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 { cn } from '~/utils/';
 import { useSubmitMessage } from '~/hooks';
 
+const categoryIcons: Record<string, LucideIcon> = {
+  analyze: HeartPulse,
+  heartbeat: HeartPulse,
+  map: MapPin,
+  navigate: MapPin,
+  search: Search,
+  explore: Search,
+};
+
 const ConversationStarters = () => {
   const { conversation } = useChatContext();
   const agentsMap = useAgentsMapContext();
   const assistantMap = useAssistantsMapContext();
   const { data: endpointsConfig } = useGetEndpointsQuery();
+  const { data: startupConfig } = useGetStartupConfig();
+  const [showExamples, setShowExamples] = useState(false);
+  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set());
 
   const endpointType = useMemo(() => {
     let ep = conversation?.endpoint ?? '';
@@ -41,7 +61,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 +95,110 @@ 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],
   );
+  const toggleCategory = useCallback((label: string) => {
+    setExpandedCategories((current) => {
+      const next = new Set(current);
+      if (next.has(label)) {
+        next.delete(label);
+      } else {
+        next.add(label);
+      }
+      return next;
+    });
+  }, []);
 
-  if (!conversation_starters.length) {
+  if (!conversation_starters.length && !conversationStarterCategories.length) {
     return null;
   }
 
+  if (conversationStarterCategories.length) {
+    return (
+      <div className="mt-6 flex w-full 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 flex w-full flex-col gap-3 sm:w-11/12 lg:w-4/5 xl:w-2/3">
+            {conversationStarterCategories.map((category) => {
+              const isExpanded = expandedCategories.has(category.label);
+              const Icon =
+                categoryIcons[category.icon?.toLowerCase() ?? ''] ??
+                categoryIcons[category.label.split(' ')[0]?.toLowerCase() ?? ''] ??
+                Search;
+
+              return (
+                <section
+                  key={category.label}
+                  className={cn(
+                    'min-w-0 rounded-lg border border-border-medium bg-surface-primary shadow-[0_0_2px_0_rgba(0,0,0,0.05),0_4px_6px_0_rgba(0,0,0,0.02)] transition-colors duration-200',
+                    isExpanded && 'bg-surface-secondary',
+                  )}
+                >
+                  <button
+                    type="button"
+                    onClick={() => toggleCategory(category.label)}
+                    className="flex min-h-16 w-full items-center justify-between gap-3 rounded-lg px-4 py-4 text-left transition-colors duration-200 hover:bg-surface-tertiary"
+                    aria-expanded={isExpanded}
+                  >
+                    <span className="flex min-w-0 items-center gap-3">
+                      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border-light bg-surface-secondary">
+                        <Icon className="h-4 w-4 text-text-secondary" aria-hidden="true" />
+                      </span>
+                      <span className="flex min-w-0 flex-col gap-1">
+                        <span className="text-sm font-semibold text-text-primary">
+                          {category.label}
+                        </span>
+                        {category.description && (
+                          <span className="text-xs leading-5 text-text-secondary">
+                            {category.description}
+                          </span>
+                        )}
+                      </span>
+                    </span>
+                    <ChevronDown
+                      className={cn(
+                        'h-4 w-4 shrink-0 text-text-secondary transition-transform duration-200',
+                        isExpanded && 'rotate-180',
+                      )}
+                      aria-hidden="true"
+                    />
+                  </button>
+                  {isExpanded && (
+                    <div className="scrollbar-thin flex max-h-72 flex-col gap-2 overflow-y-auto border-t border-border-light px-3 py-3 fade-in">
+                      {category.starters.map((text: string, index: number) => (
+                        <button
+                          key={`${category.label}-${index}`}
+                          onClick={() => sendConversationStarter(text)}
+                          className="relative min-h-16 w-full cursor-pointer rounded-md border border-border-light bg-transparent px-3 py-2 text-left text-sm transition-colors duration-200 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,12 @@ 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,11 @@ 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 +89,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 +141,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
diff --git a/packages/data-schemas/src/app/interface.ts b/packages/data-schemas/src/app/interface.ts

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) {`