🚀 feat: Use Model Specs + Specific Endpoints, Limit Providers for Agents (#6650)

* 🔧 refactor: Remove modelSpecs prop from ModelSelector and related components

* fix: Update submission.conversationId references in SSE hooks and data types as was incorrectly typed

* feat: Allow showing specific endpoints alongside model specs via `addedEndpoints` field

* feat: allowed agents providers via `agents.allowedProviders` field

* fix: bump dicebear/sharp dependencies to resolve CVE-2024-12905 and improve avatar gen logic

* fix: rename variable for clarity in loadDefaultInterface function

* fix: add keepAddedConvos option to newConversation calls for modular chat support

* fix: include model information in endpoint selection for improved context

* fix: update data-provider version to 0.7.78 and increment config version to 1.2.4

client/src/components/Chat/Header.tsx

@@ -16,7 +16,6 @@ const defaultInterface = getConfigDefaults().interface;
 export default function Header() {
   const { data: startupConfig } = useGetStartupConfig();
   const { navVisible } = useOutletContext<ContextType>();
-  const modelSpecs = useMemo(() => startupConfig?.modelSpecs?.list ?? [], [startupConfig]);
   const interfaceConfig = useMemo(
     () => startupConfig?.interface ?? defaultInterface,
     [startupConfig],
@@ -39,7 +38,7 @@ export default function Header() {
       <div className="hide-scrollbar flex w-full items-center justify-between gap-2 overflow-x-auto">
         <div className="mx-2 flex items-center gap-2">
           {!navVisible && <HeaderNewChat />}
-          {<ModelSelector startupConfig={startupConfig} modelSpecs={modelSpecs} />}
+          {<ModelSelector startupConfig={startupConfig} />}
           {interfaceConfig.presets === true && interfaceConfig.modelSelect && <PresetsMenu />}
           {hasAccessToBookmarks === true && <BookmarkMenu />}
           {hasAccessToMultiConvo === true && <AddMultiConvo />}

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

@@ -98,9 +98,9 @@ function ModelSelectorContent() {
   );
 }
 
-export default function ModelSelector({ startupConfig, modelSpecs }: ModelSelectorProps) {
+export default function ModelSelector({ startupConfig }: ModelSelectorProps) {
   return (
-    <ModelSelectorProvider modelSpecs={modelSpecs} startupConfig={startupConfig}>
+    <ModelSelectorProvider startupConfig={startupConfig}>
       <ModelSelectorContent />
     </ModelSelectorProvider>
   );

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

@@ -44,24 +44,20 @@ export function useModelSelectorContext() {
 
 interface ModelSelectorProviderProps {
   children: React.ReactNode;
-  modelSpecs: t.TModelSpec[];
   startupConfig: t.TStartupConfig | undefined;
 }
 
-export function ModelSelectorProvider({
-  children,
-  modelSpecs,
-  startupConfig,
-}: ModelSelectorProviderProps) {
+export function ModelSelectorProvider({ children, startupConfig }: ModelSelectorProviderProps) {
   const agentsMap = useAgentsMapContext();
   const assistantsMap = useAssistantsMapContext();
   const { data: endpointsConfig } = useGetEndpointsQuery();
   const { conversation, newConversation } = useChatContext();
+  const modelSpecs = useMemo(() => startupConfig?.modelSpecs?.list ?? [], [startupConfig]);
   const { mappedEndpoints, endpointRequiresUserKey } = useEndpoints({
     agentsMap,
     assistantsMap,
-    endpointsConfig,
     startupConfig,
+    endpointsConfig,
   });
   const { onSelectEndpoint, onSelectSpec } = useSelectMention({
     // presets,
@@ -146,6 +142,7 @@ export function ModelSelectorProvider({
     if (isAgentsEndpoint(endpoint.value)) {
       onSelectEndpoint?.(endpoint.value, {
         agent_id: model,
+        model: agentsMap?.[model]?.model ?? '',
       });
     } else if (isAssistantsEndpoint(endpoint.value)) {
       onSelectEndpoint?.(endpoint.value, {
@@ -157,7 +154,7 @@ export function ModelSelectorProvider({
     }
     setSelectedValues({
       endpoint: endpoint.value,
-      model: model,
+      model,
       modelSpec: '',
     });
   };