From 7263e916e23b96221f656f5f1a045be849f537c3 Mon Sep 17 00:00:00 2001
From: ForisKuang <ForisKuang@users.noreply.github.com>
Date: Tue, 2 Jun 2026 16:55:43 -0400
Subject: [PATCH] Add unified cBioAgent UI config controls

---
 client/src/components/Chat/ChatView.tsx       |   2 +
 client/src/components/Chat/Header.tsx         |   6 +-
 .../Chat/Input/ConversationStarters.tsx       | 144 +++++++++++++++++-
 .../src/components/Chat/Input/LimitBadge.tsx  |  46 ++++++
 client/src/components/Chat/Landing.tsx        |  57 ++++---
 .../Chat/Menus/Endpoints/ModelSelector.tsx    |  20 ++-
 .../components/Chat/Menus/Endpoints/utils.ts  |   2 +-
 client/src/hooks/Input/useTextarea.ts         |  12 +-
 packages/data-provider/src/config.ts          |   2 +
 packages/data-provider/src/models.ts          |  30 ++++
 packages/data-schemas/src/app/interface.ts    |   1 +
 11 files changed, 295 insertions(+), 27 deletions(-)
 create mode 100644 client/src/components/Chat/Input/LimitBadge.tsx

diff --git a/client/src/components/Chat/ChatView.tsx b/client/src/components/Chat/ChatView.tsx
index 9c760e44001d..255ffdc76d38 100644
--- a/client/src/components/Chat/ChatView.tsx
+++ b/client/src/components/Chat/ChatView.tsx
@@ -9,6 +9,7 @@ import type { ChatFormValues } from '~/common';
 import { ChatContext, AddedChatContext, useFileMapContext, ChatFormProvider } from '~/Providers';
 import { useChatHelpers, useAddedResponse, useSSE } from '~/hooks';
 import ConversationStarters from './Input/ConversationStarters';
+import LimitBadge from './Input/LimitBadge';
 import { useGetMessagesByConvoId } from '~/data-provider';
 import MessagesView from './Messages/MessagesView';
 import Presentation from './Presentation';
@@ -98,6 +99,7 @@ function ChatView({ index = 0 }: { index?: number }) {
                     )}
                   >
                     <ChatForm index={index} />
+                    {isLandingPage && <LimitBadge />}
                     {isLandingPage ? <ConversationStarters /> : <Footer />}
                   </div>
                 </div>
diff --git a/client/src/components/Chat/Header.tsx b/client/src/components/Chat/Header.tsx
index bf04a2e4f3d9..06cfd80bba5d 100644
--- 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
index 12408b55a6e8..8324a2a8323c 100644
--- 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/Input/LimitBadge.tsx b/client/src/components/Chat/Input/LimitBadge.tsx
new file mode 100644
index 000000000000..eda3e35dd50a
--- /dev/null
+++ b/client/src/components/Chat/Input/LimitBadge.tsx
@@ -0,0 +1,46 @@
+import { BarChart3, Timer } from 'lucide-react';
+import type { TModelSpec } from 'librechat-data-provider';
+import { useChatContext } from '~/Providers';
+import { useGetStartupConfig } from '~/data-provider';
+
+export default function LimitBadge() {
+  const { conversation } = useChatContext();
+  const { data: startupConfig } = useGetStartupConfig();
+
+  const currentSpec = startupConfig?.modelSpecs?.list?.find(
+    (spec: TModelSpec) =>
+      spec.name === conversation?.spec || spec.preset?.agent_id === conversation?.agent_id,
+  );
+  const limitBadge = currentSpec?.limitBadge;
+
+  if (!limitBadge?.messages && !limitBadge?.tokens) {
+    return null;
+  }
+
+  return (
+    <div className="mt-3 flex w-full justify-center px-4">
+      <div
+        className="inline-flex max-w-full items-center gap-3 rounded-full border border-border-light bg-surface-secondary px-4 py-2 text-sm font-medium text-text-secondary"
+        aria-label={[limitBadge.messages, limitBadge.tokens].filter(Boolean).join(', ')}
+      >
+        {limitBadge.messages && (
+          <span className="inline-flex min-w-0 items-center gap-1.5">
+            <Timer className="h-4 w-4 shrink-0" aria-hidden="true" />
+            <span className="truncate">{limitBadge.messages}</span>
+          </span>
+        )}
+        {limitBadge.messages && limitBadge.tokens && (
+          <span className="text-text-secondary" aria-hidden="true">
+            &middot;
+          </span>
+        )}
+        {limitBadge.tokens && (
+          <span className="inline-flex min-w-0 items-center gap-1.5">
+            <BarChart3 className="h-4 w-4 shrink-0" aria-hidden="true" />
+            <span className="truncate">{limitBadge.tokens}</span>
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/components/Chat/Landing.tsx b/client/src/components/Chat/Landing.tsx
index 4bfe60f20cec..612a05528bb7 100644
--- 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) {
@@ -298,30 +315,32 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
             );
             return (
               <>
-                <div
-                  className="animate-fadeIn mt-4 max-w-md text-center text-sm font-normal text-text-primary"
-                  dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(cleanDesc) }}
-                />
-                <div className="animate-fadeIn mt-4 flex flex-row items-center gap-3">
+                <div className="animate-fadeIn mt-4 max-w-md text-left text-sm font-normal text-text-primary">
+                  <span dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(cleanDesc) }} />
                   {learnMoreUrl && (
-                    <a
-                      href={learnMoreUrl}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="rounded-full bg-gray-600 px-4 py-2 text-sm font-medium text-gray-50 transition-colors duration-200 hover:bg-gray-700"
-                    >
-                      {learnMoreText || 'Learn more'}
-                    </a>
+                    <>
+                      {' '}
+                      <a
+                        href={learnMoreUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="font-medium text-blue-500 underline-offset-2 hover:underline dark:text-blue-400"
+                      >
+                        {learnMoreText || 'Learn more'}
+                      </a>
+                    </>
                   )}
-                  {otherSpec && (
+                </div>
+                {otherSpec && (
+                  <div className="animate-fadeIn mt-4 flex flex-row items-center gap-3">
                     <button
                       onClick={handleSwitchAgent}
                       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"
                     >
                       {localize('com_ui_switch_agent')}
                     </button>
-                  )}
-                </div>
+                  </div>
+                )}
               </>
             );
           })()}
diff --git a/client/src/components/Chat/Menus/Endpoints/ModelSelector.tsx b/client/src/components/Chat/Menus/Endpoints/ModelSelector.tsx
index d9464182b9fc..d060c7cb843c 100644
--- 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
index 1681ed7f1d63..df0b15385512 100644
--- 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
index 7d32cbbe02d7..9606249fff1a 100644
--- 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
index c3f872eaecce..a1ffbad8b879 100644
--- 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
index 78ba1237fcd7..f15e47f259f1 100644
--- 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,10 +25,29 @@ export type TModelSpec = {
   group?: string;
   showIconInMenu?: boolean;
   showIconInHeader?: boolean;
+  showSwitchAgent?: boolean;
+  limitBadge?: {
+    messages?: string;
+    tokens?: string;
+  };
+  conversationStarterCategories?: Array<{
+    label: string;
+    description?: string;
+    icon?: string;
+    starters: string[];
+  }>;
+  conversation_starters?: string[];
   iconURL?: string | EModelEndpoint; // Allow using project-included icons
   authType?: AuthType;
 };
 
+const tConversationStarterCategorySchema = z.object({
+  label: z.string(),
+  description: z.string().optional(),
+  icon: z.string().optional(),
+  starters: z.array(z.string()),
+});
+
 export const tModelSpecSchema = z.object({
   name: z.string(),
   label: z.string(),
@@ -35,9 +55,19 @@ export const tModelSpecSchema = z.object({
   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(),
+  limitBadge: z
+    .object({
+      messages: z.string().optional(),
+      tokens: z.string().optional(),
+    })
+    .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
index f8afdefd339a..9d734fa93713 100644
--- 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,