feat: model registry and capabilities for multi-provider support (#2158)

* feat: Implement model registry and capabilities for multi-provider support - Added ModelRegistry to manage available models and their capabilities. - Introduced ModelProvider enum for different LLM providers. - Created ModelCapabilities dataclass to define model features. - Implemented methods to load models based on API keys and settings. - Added utility functions for model management in model_utils.py. - Updated settings.py to include provider-specific API keys. - Refactored LLM classes (Anthropic, OpenAI, Google, etc.) to utilize new model registry. - Enhanced utility functions to handle token limits and model validation. - Improved code structure and logging for better maintainability. * feat: Add model selection feature with API integration and UI component * feat: Add model selection and default model functionality in agent management * test: Update assertions and formatting in stream processing tests * refactor(llm): Standardize model identifier to model_id * fix tests --------- Co-authored-by: Alex <a@tushynski.me>
2025-12-01 09:33:14 +00:00 · 2025-11-14 16:43:19 +05:30
parent fbf7cf874b
commit 3f7de867cc
54 changed files with 1388 additions and 226 deletions
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -1,6 +1,8 @@
-import DocsGPT3 from './assets/cute_docsgpt3.svg';
 import { useTranslation } from 'react-i18next';

+import DocsGPT3 from './assets/cute_docsgpt3.svg';
+import DropdownModel from './components/DropdownModel';
+
 export default function Hero({
  handleQuestion,
 }: {
@@ -26,6 +28,10 @@ export default function Hero({
          <span className="text-4xl font-semibold">DocsGPT</span>
          <img className="mb-1 inline w-14" src={DocsGPT3} alt="docsgpt" />
        </div>
+        {/* Model Selector */}
+        <div className="relative w-72">
+          <DropdownModel />
+        </div>
      </div>

      {/* Demo Buttons Section */}
@@ -38,7 +44,7 @@ export default function Hero({
                <button
                  key={key}
                  onClick={() => handleQuestion({ question: demo.query })}
-                  className={`border-dark-gray text-just-black hover:bg-cultured dark:border-dim-gray dark:text-chinese-white dark:hover:bg-charleston-green w-full rounded-[66px] border bg-transparent px-6 py-[14px] text-left transition-colors ${key >= 2 ? 'hidden md:block' : ''} // Show only 2 buttons on mobile`}
+                  className={`border-dark-gray text-just-black hover:bg-cultured dark:border-dim-gray dark:text-chinese-white dark:hover:bg-charleston-green w-full rounded-[66px] border bg-transparent px-6 py-[14px] text-left transition-colors ${key >= 2 ? 'hidden md:block' : ''}`}
                >
                  <p className="text-black-1000 dark:text-bright-gray mb-2 font-semibold">
                    {demo.header}
--- a/frontend/src/agents/NewAgent.tsx
+++ b/frontend/src/agents/NewAgent.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate, useParams } from 'react-router-dom';

+import modelService from '../api/services/modelService';
 import userService from '../api/services/userService';
 import ArrowLeft from '../assets/arrow-left.svg';
 import SourceIcon from '../assets/source.svg';
@@ -26,6 +27,7 @@ import { UserToolType } from '../settings/types';
 import AgentPreview from './AgentPreview';
 import { Agent, ToolSummary } from './types';

+import type { Model } from '../models/types';
 const embeddingsName =
  import.meta.env.VITE_EMBEDDINGS_NAME ||
  'huggingface_sentence-transformers/all-mpnet-base-v2';
@@ -59,18 +61,25 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
    token_limit: undefined,
    limited_request_mode: false,
    request_limit: undefined,
+    models: [],
+    default_model_id: '',
  });
  const [imageFile, setImageFile] = useState<File | null>(null);
  const [prompts, setPrompts] = useState<
    { name: string; id: string; type: string }[]
  >([]);
  const [userTools, setUserTools] = useState<OptionType[]>([]);
+  const [availableModels, setAvailableModels] = useState<Model[]>([]);
  const [isSourcePopupOpen, setIsSourcePopupOpen] = useState(false);
  const [isToolsPopupOpen, setIsToolsPopupOpen] = useState(false);
+  const [isModelsPopupOpen, setIsModelsPopupOpen] = useState(false);
  const [selectedSourceIds, setSelectedSourceIds] = useState<
    Set<string | number>
  >(new Set());
  const [selectedTools, setSelectedTools] = useState<ToolSummary[]>([]);
+  const [selectedModelIds, setSelectedModelIds] = useState<Set<string>>(
+    new Set(),
+  );
  const [deleteConfirmation, setDeleteConfirmation] =
    useState<ActiveState>('INACTIVE');
  const [agentDetails, setAgentDetails] = useState<ActiveState>('INACTIVE');
@@ -86,6 +95,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
  const initialAgentRef = useRef<Agent | null>(null);
  const sourceAnchorButtonRef = useRef<HTMLButtonElement>(null);
  const toolAnchorButtonRef = useRef<HTMLButtonElement>(null);
+  const modelAnchorButtonRef = useRef<HTMLButtonElement>(null);

  const modeConfig = {
    new: {
@@ -224,6 +234,13 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
      formData.append('json_schema', JSON.stringify(agent.json_schema));
    }

+    if (agent.models && agent.models.length > 0) {
+      formData.append('models', JSON.stringify(agent.models));
+    }
+    if (agent.default_model_id) {
+      formData.append('default_model_id', agent.default_model_id);
+    }
+
    try {
      setDraftLoading(true);
      const response =
@@ -320,6 +337,13 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
      formData.append('request_limit', '0');
    }

+    if (agent.models && agent.models.length > 0) {
+      formData.append('models', JSON.stringify(agent.models));
+    }
+    if (agent.default_model_id) {
+      formData.append('default_model_id', agent.default_model_id);
+    }
+
    try {
      setPublishLoading(true);
      const response =
@@ -388,8 +412,16 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
      const data = await response.json();
      setPrompts(data);
    };
+    const getModels = async () => {
+      const response = await modelService.getModels(null);
+      if (!response.ok) throw new Error('Failed to fetch models');
+      const data = await response.json();
+      const transformed = modelService.transformModels(data.models || []);
+      setAvailableModels(transformed);
+    };
    getTools();
    getPrompts();
+    getModels();
  }, [token]);

  // Auto-select default source if none selected
@@ -462,6 +494,34 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
    }
  }, [agentId, mode, token]);

+  useEffect(() => {
+    if (agent.models && agent.models.length > 0 && availableModels.length > 0) {
+      const agentModelIds = new Set(agent.models);
+      if (agentModelIds.size > 0 && selectedModelIds.size === 0) {
+        setSelectedModelIds(agentModelIds);
+      }
+    }
+  }, [agent.models, availableModels.length]);
+
+  useEffect(() => {
+    const modelsArray = Array.from(selectedModelIds);
+    if (modelsArray.length > 0) {
+      setAgent((prev) => ({
+        ...prev,
+        models: modelsArray,
+        default_model_id: modelsArray.includes(prev.default_model_id || '')
+          ? prev.default_model_id
+          : modelsArray[0],
+      }));
+    } else {
+      setAgent((prev) => ({
+        ...prev,
+        models: [],
+        default_model_id: '',
+      }));
+    }
+  }, [selectedModelIds]);
+
  useEffect(() => {
    const selectedSources = Array.from(selectedSourceIds)
      .map((id) =>
@@ -882,6 +942,82 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
              />
            </div>
          </div>
+          <div className="dark:bg-raisin-black rounded-[30px] bg-white px-6 py-3 dark:text-[#E0E0E0]">
+            <h2 className="text-lg font-semibold">
+              {t('agents.form.sections.models')}
+            </h2>
+            <div className="mt-3 flex flex-col gap-3">
+              <button
+                ref={modelAnchorButtonRef}
+                onClick={() => setIsModelsPopupOpen(!isModelsPopupOpen)}
+                className={`border-silver dark:bg-raisin-black w-full truncate rounded-3xl border bg-white px-5 py-3 text-left text-sm dark:border-[#7E7E7E] ${
+                  selectedModelIds.size > 0
+                    ? 'text-jet dark:text-bright-gray'
+                    : 'dark:text-silver text-gray-400'
+                }`}
+              >
+                {selectedModelIds.size > 0
+                  ? availableModels
+                      .filter((m) => selectedModelIds.has(m.id))
+                      .map((m) => m.display_name)
+                      .join(', ')
+                  : t('agents.form.placeholders.selectModels')}
+              </button>
+              <MultiSelectPopup
+                isOpen={isModelsPopupOpen}
+                onClose={() => setIsModelsPopupOpen(false)}
+                anchorRef={modelAnchorButtonRef}
+                options={availableModels.map((model) => ({
+                  id: model.id,
+                  label: model.display_name,
+                }))}
+                selectedIds={selectedModelIds}
+                onSelectionChange={(newSelectedIds: Set<string | number>) =>
+                  setSelectedModelIds(
+                    new Set(Array.from(newSelectedIds).map(String)),
+                  )
+                }
+                title={t('agents.form.modelsPopup.title')}
+                searchPlaceholder={t(
+                  'agents.form.modelsPopup.searchPlaceholder',
+                )}
+                noOptionsMessage={t('agents.form.modelsPopup.noOptionsMessage')}
+              />
+              {selectedModelIds.size > 0 && (
+                <div>
+                  <label className="mb-2 block text-sm font-medium">
+                    {t('agents.form.labels.defaultModel')}
+                  </label>
+                  <Dropdown
+                    options={availableModels
+                      .filter((m) => selectedModelIds.has(m.id))
+                      .map((m) => ({
+                        label: m.display_name,
+                        value: m.id,
+                      }))}
+                    selectedValue={
+                      availableModels.find(
+                        (m) => m.id === agent.default_model_id,
+                      )?.display_name || null
+                    }
+                    onSelect={(option: { label: string; value: string }) =>
+                      setAgent({ ...agent, default_model_id: option.value })
+                    }
+                    size="w-full"
+                    rounded="3xl"
+                    border="border"
+                    buttonClassName="bg-white dark:bg-[#222327] border-silver dark:border-[#7E7E7E]"
+                    optionsClassName="bg-white dark:bg-[#383838] border-silver dark:border-[#7E7E7E]"
+                    placeholder={t(
+                      'agents.form.placeholders.selectDefaultModel',
+                    )}
+                    placeholderClassName="text-gray-400 dark:text-silver"
+                    contentSize="text-sm"
+                  />
+                </div>
+              )}
+            </div>
+          </div>
          <div className="dark:bg-raisin-black rounded-[30px] bg-white px-6 py-3 dark:text-[#E0E0E0]">
            <button
              onClick={() =>
--- a/frontend/src/agents/agentPreviewSlice.ts
+++ b/frontend/src/agents/agentPreviewSlice.ts
@@ -52,6 +52,10 @@ export const fetchPreviewAnswer = createAsyncThunk<
    }

    if (state.preference) {
+      const modelId =
+        state.preference.selectedAgent?.default_model_id ||
+        state.preference.selectedModel?.id;
+
      if (API_STREAMING) {
        await handleFetchAnswerSteaming(
          question,
@@ -120,22 +124,23 @@ export const fetchPreviewAnswer = createAsyncThunk<
          indx,
          state.preference.selectedAgent?.id,
          attachmentIds,
-          false, // Don't save preview conversations
+          false,
+          modelId,
        );
      } else {
-        // Non-streaming implementation
        const answer = await handleFetchAnswer(
          question,
          signal,
          state.preference.token,
          state.preference.selectedDocs,
-          null, // No conversation ID for previews
+          null,
          state.preference.prompt.id,
          state.preference.chunks,
          state.preference.token_limit,
          state.preference.selectedAgent?.id,
          attachmentIds,
-          false, // Don't save preview conversations
+          false,
+          modelId,
        );

        if (answer) {
--- a/frontend/src/agents/types/index.ts
+++ b/frontend/src/agents/types/index.ts
@@ -32,4 +32,6 @@ export type Agent = {
  token_limit?: number;
  limited_request_mode?: boolean;
  request_limit?: number;
+  models?: string[];
+  default_model_id?: string;
 };
--- a/frontend/src/api/endpoints.ts
+++ b/frontend/src/api/endpoints.ts
@@ -2,6 +2,7 @@ const endpoints = {
  USER: {
    CONFIG: '/api/config',
    NEW_TOKEN: '/api/generate_token',
+    MODELS: '/api/models',
    DOCS: '/api/sources',
    DOCS_PAGINATED: '/api/sources/paginated',
    API_KEYS: '/api/get_api_keys',
--- a/frontend/src/api/services/modelService.ts
+++ b/frontend/src/api/services/modelService.ts
@@ -0,0 +1,25 @@
+import apiClient from '../client';
+import endpoints from '../endpoints';
+
+import type { AvailableModel, Model } from '../../models/types';
+
+const modelService = {
+  getModels: (token: string | null): Promise<Response> =>
+    apiClient.get(endpoints.USER.MODELS, token, {}),
+
+  transformModels: (models: AvailableModel[]): Model[] =>
+    models.map((model) => ({
+      id: model.id,
+      value: model.id,
+      provider: model.provider,
+      display_name: model.display_name,
+      description: model.description,
+      context_window: model.context_window,
+      supported_attachment_types: model.supported_attachment_types,
+      supports_tools: model.supports_tools,
+      supports_structured_output: model.supports_structured_output,
+      supports_streaming: model.supports_streaming,
+    })),
+};
+
+export default modelService;
--- a/frontend/src/assets/rounded-tick.svg
+++ b/frontend/src/assets/rounded-tick.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0.75C4.62391 0.75 0.25 5.12391 0.25 10.5C0.25 15.8761 4.62391 20.25 10 20.25C15.3761 20.25 19.75 15.8761 19.75 10.5C19.75 5.12391 15.3761 0.75 10 0.75ZM15.0742 7.23234L8.77422 14.7323C8.70511 14.8147 8.61912 14.8812 8.52207 14.9273C8.42502 14.9735 8.31918 14.9983 8.21172 15H8.19906C8.09394 15 7.99 14.9778 7.89398 14.935C7.79797 14.8922 7.71202 14.8297 7.64172 14.7516L4.94172 11.7516C4.87315 11.6788 4.81981 11.5931 4.78483 11.4995C4.74986 11.4059 4.73395 11.3062 4.73805 11.2063C4.74215 11.1064 4.76617 11.0084 4.8087 10.9179C4.85124 10.8275 4.91142 10.7464 4.98572 10.6796C5.06002 10.6127 5.14694 10.5614 5.24136 10.5286C5.33579 10.4958 5.43581 10.4822 5.53556 10.4886C5.63531 10.495 5.73277 10.5213 5.82222 10.5659C5.91166 10.6106 5.99128 10.6726 6.05641 10.7484L8.17938 13.1072L13.9258 6.26766C14.0547 6.11863 14.237 6.02631 14.4335 6.01066C14.6299 5.99501 14.8246 6.05728 14.9754 6.18402C15.1263 6.31075 15.2212 6.49176 15.2397 6.68793C15.2582 6.8841 15.1988 7.07966 15.0742 7.23234Z" fill="#B5B5B5"/>
+</svg>
--- a/frontend/src/components/DropdownModel.tsx
+++ b/frontend/src/components/DropdownModel.tsx
@@ -0,0 +1,138 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import modelService from '../api/services/modelService';
+import Arrow2 from '../assets/dropdown-arrow.svg';
+import RoundedTick from '../assets/rounded-tick.svg';
+import {
+  selectAvailableModels,
+  selectSelectedModel,
+  setAvailableModels,
+  setModelsLoading,
+  setSelectedModel,
+} from '../preferences/preferenceSlice';
+
+import type { Model } from '../models/types';
+
+export default function DropdownModel() {
+  const dispatch = useDispatch();
+  const selectedModel = useSelector(selectSelectedModel);
+  const availableModels = useSelector(selectAvailableModels);
+  const dropdownRef = React.useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  useEffect(() => {
+    const loadModels = async () => {
+      if ((availableModels?.length ?? 0) > 0) {
+        return;
+      }
+      dispatch(setModelsLoading(true));
+      try {
+        const response = await modelService.getModels(null);
+        if (!response.ok) {
+          throw new Error(`API error: ${response.status}`);
+        }
+        const data = await response.json();
+        const models = data.models || [];
+        const transformed = modelService.transformModels(models);
+
+        dispatch(setAvailableModels(transformed));
+        if (!selectedModel && transformed.length > 0) {
+          const defaultModel =
+            transformed.find((m) => m.id === data.default_model_id) ||
+            transformed[0];
+          dispatch(setSelectedModel(defaultModel));
+        } else if (selectedModel && transformed.length > 0) {
+          const isValid = transformed.find((m) => m.id === selectedModel.id);
+          if (!isValid) {
+            const defaultModel =
+              transformed.find((m) => m.id === data.default_model_id) ||
+              transformed[0];
+            dispatch(setSelectedModel(defaultModel));
+          }
+        }
+      } catch (error) {
+        console.error('Failed to load models:', error);
+      } finally {
+        dispatch(setModelsLoading(false));
+      }
+    };
+
+    loadModels();
+  }, [availableModels?.length, dispatch, selectedModel]);
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.target as Node)
+    ) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div ref={dropdownRef}>
+      <div
+        className={`bg-gray-1000 dark:bg-dark-charcoal mx-auto flex w-full cursor-pointer justify-between p-1 dark:text-white ${isOpen ? 'rounded-t-3xl' : 'rounded-3xl'}`}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        {selectedModel?.display_name ? (
+          <p className="mx-4 my-3 truncate overflow-hidden whitespace-nowrap">
+            {selectedModel.display_name}
+          </p>
+        ) : (
+          <p className="mx-4 my-3 truncate overflow-hidden whitespace-nowrap">
+            Select Model
+          </p>
+        )}
+        <img
+          src={Arrow2}
+          alt="arrow"
+          className={`${
+            isOpen ? 'rotate-360' : 'rotate-270'
+          } mr-3 w-3 transition-all select-none`}
+        />
+      </div>
+      {isOpen && (
+        <div className="no-scrollbar dark:bg-dark-charcoal absolute right-0 left-0 z-20 -mt-1 max-h-52 w-full overflow-y-auto rounded-b-3xl bg-white shadow-md">
+          {availableModels && (availableModels?.length ?? 0) > 0 ? (
+            availableModels.map((model: Model) => (
+              <div
+                key={model.id}
+                onClick={() => {
+                  dispatch(setSelectedModel(model));
+                  setIsOpen(false);
+                }}
+                className={`border-gray-3000/75 dark:border-purple-taupe/50 hover:bg-gray-3000/75 dark:hover:bg-purple-taupe flex h-10 w-full cursor-pointer items-center justify-between border-t`}
+              >
+                <div className="flex w-full items-center justify-between">
+                  <p className="overflow-hidden py-3 pr-2 pl-5 overflow-ellipsis whitespace-nowrap">
+                    {model.display_name}
+                  </p>
+                  {model.id === selectedModel?.id ? (
+                    <img
+                      src={RoundedTick}
+                      alt="selected"
+                      className="mr-3.5 h-4 w-4"
+                    />
+                  ) : null}
+                </div>
+              </div>
+            ))
+          ) : (
+            <div className="h-10 w-full border-x-2 border-b-2">
+              <p className="ml-5 py-3 text-gray-500">No models available</p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/conversation/conversationHandlers.ts
+++ b/frontend/src/conversation/conversationHandlers.ts
@@ -15,6 +15,7 @@ export function handleFetchAnswer(
  agentId?: string,
  attachments?: string[],
  save_conversation = true,
+  modelId?: string,
 ): Promise<
  | {
      result: any;
@@ -47,6 +48,10 @@ export function handleFetchAnswer(
    save_conversation: save_conversation,
  };

+  if (modelId) {
+    payload.model_id = modelId;
+  }
+
  // Add attachments to payload if they exist
  if (attachments && attachments.length > 0) {
    payload.attachments = attachments;
@@ -101,6 +106,7 @@ export function handleFetchAnswerSteaming(
  agentId?: string,
  attachments?: string[],
  save_conversation = true,
+  modelId?: string,
 ): Promise<Answer> {
  const payload: RetrievalPayload = {
    question: question,
@@ -114,6 +120,10 @@ export function handleFetchAnswerSteaming(
    save_conversation: save_conversation,
  };

+  if (modelId) {
+    payload.model_id = modelId;
+  }
+
  // Add attachments to payload if they exist
  if (attachments && attachments.length > 0) {
    payload.attachments = attachments;
--- a/frontend/src/conversation/conversationModels.ts
+++ b/frontend/src/conversation/conversationModels.ts
@@ -65,4 +65,5 @@ export interface RetrievalPayload {
  agent_id?: string;
  attachments?: string[];
  save_conversation?: boolean;
+  model_id?: string;
 }
--- a/frontend/src/conversation/conversationSlice.ts
+++ b/frontend/src/conversation/conversationSlice.ts
@@ -49,6 +49,9 @@ export const fetchAnswer = createAsyncThunk<
  }

  const currentConversationId = state.conversation.conversationId;
+  const modelId =
+    state.preference.selectedAgent?.default_model_id ||
+    state.preference.selectedModel?.id;

  if (state.preference) {
    if (API_STREAMING) {
@@ -156,7 +159,8 @@ export const fetchAnswer = createAsyncThunk<
        indx,
        state.preference.selectedAgent?.id,
        attachmentIds,
-        true, // Always save conversation
+        true,
+        modelId,
      );
    } else {
      const answer = await handleFetchAnswer(
@@ -170,7 +174,8 @@ export const fetchAnswer = createAsyncThunk<
        state.preference.token_limit,
        state.preference.selectedAgent?.id,
        attachmentIds,
-        true, // Always save conversation
+        true,
+        modelId,
      );
      if (answer) {
        let sourcesPrepped = [];
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -530,6 +530,7 @@
        "prompt": "Prompt",
        "tools": "Tools",
        "agentType": "Agent type",
+        "models": "Models",
        "advanced": "Advanced",
        "preview": "Preview"
      },
@@ -540,6 +541,8 @@
        "chunksPerQuery": "Chunks per query",
        "selectType": "Select type",
        "selectTools": "Select tools",
+        "selectModels": "Select models for this agent",
+        "selectDefaultModel": "Select default model",
        "enterTokenLimit": "Enter token limit",
        "enterRequestLimit": "Enter request limit"
      },
@@ -553,6 +556,11 @@
        "searchPlaceholder": "Search tools...",
        "noOptionsMessage": "No tools available"
      },
+      "modelsPopup": {
+        "title": "Select Models",
+        "searchPlaceholder": "Search models...",
+        "noOptionsMessage": "No models available"
+      },
      "upload": {
        "clickToUpload": "Click to upload",
        "dragAndDrop": " or drag and drop"
@@ -561,6 +569,9 @@
        "classic": "Classic",
        "react": "ReAct"
      },
+      "labels": {
+        "defaultModel": "Default Model"
+      },
      "advanced": {
        "jsonSchema": "JSON response schema",
        "jsonSchemaDescription": "Define a JSON schema to enforce structured output format",
--- a/frontend/src/locale/es.json
+++ b/frontend/src/locale/es.json
@@ -530,6 +530,7 @@
        "prompt": "Prompt",
        "tools": "Herramientas",
        "agentType": "Tipo de agente",
+        "models": "Modelos",
        "advanced": "Avanzado",
        "preview": "Vista previa"
      },
@@ -540,6 +541,8 @@
        "chunksPerQuery": "Fragmentos por consulta",
        "selectType": "Seleccionar tipo",
        "selectTools": "Seleccionar herramientas",
+        "selectModels": "Seleccionar modelos para este agente",
+        "selectDefaultModel": "Seleccionar modelo predeterminado",
        "enterTokenLimit": "Ingresar límite de tokens",
        "enterRequestLimit": "Ingresar límite de solicitudes"
      },
@@ -553,6 +556,11 @@
        "searchPlaceholder": "Buscar herramientas...",
        "noOptionsMessage": "No hay herramientas disponibles"
      },
+      "modelsPopup": {
+        "title": "Seleccionar Modelos",
+        "searchPlaceholder": "Buscar modelos...",
+        "noOptionsMessage": "No hay modelos disponibles"
+      },
      "upload": {
        "clickToUpload": "Haz clic para subir",
        "dragAndDrop": " o arrastra y suelta"
@@ -561,6 +569,9 @@
        "classic": "Clásico",
        "react": "ReAct"
      },
+      "labels": {
+        "defaultModel": "Modelo Predeterminado"
+      },
      "advanced": {
        "jsonSchema": "Esquema de respuesta JSON",
        "jsonSchemaDescription": "Define un esquema JSON para aplicar formato de salida estructurado",
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -530,6 +530,7 @@
        "prompt": "プロンプト",
        "tools": "ツール",
        "agentType": "エージェントタイプ",
+        "models": "モデル",
        "advanced": "詳細設定",
        "preview": "プレビュー"
      },
@@ -540,6 +541,8 @@
        "chunksPerQuery": "クエリごとのチャンク数",
        "selectType": "タイプを選択",
        "selectTools": "ツールを選択",
+        "selectModels": "このエージェントのモデルを選択",
+        "selectDefaultModel": "デフォルトモデルを選択",
        "enterTokenLimit": "トークン制限を入力",
        "enterRequestLimit": "リクエスト制限を入力"
      },
@@ -553,6 +556,11 @@
        "searchPlaceholder": "ツールを検索...",
        "noOptionsMessage": "利用可能なツールがありません"
      },
+      "modelsPopup": {
+        "title": "モデルを選択",
+        "searchPlaceholder": "モデルを検索...",
+        "noOptionsMessage": "利用可能なモデルがありません"
+      },
      "upload": {
        "clickToUpload": "クリックしてアップロード",
        "dragAndDrop": " またはドラッグ＆ドロップ"
@@ -561,6 +569,9 @@
        "classic": "クラシック",
        "react": "ReAct"
      },
+      "labels": {
+        "defaultModel": "デフォルトモデル"
+      },
      "advanced": {
        "jsonSchema": "JSON応答スキーマ",
        "jsonSchemaDescription": "構造化された出力形式を適用するためのJSONスキーマを定義します",
--- a/frontend/src/locale/ru.json
+++ b/frontend/src/locale/ru.json
@@ -530,6 +530,7 @@
        "prompt": "Промпт",
        "tools": "Инструменты",
        "agentType": "Тип агента",
+        "models": "Модели",
        "advanced": "Расширенные",
        "preview": "Предпросмотр"
      },
@@ -540,6 +541,8 @@
        "chunksPerQuery": "Фрагментов на запрос",
        "selectType": "Выберите тип",
        "selectTools": "Выберите инструменты",
+        "selectModels": "Выберите модели для этого агента",
+        "selectDefaultModel": "Выберите модель по умолчанию",
        "enterTokenLimit": "Введите лимит токенов",
        "enterRequestLimit": "Введите лимит запросов"
      },
@@ -553,6 +556,11 @@
        "searchPlaceholder": "Поиск инструментов...",
        "noOptionsMessage": "Нет доступных инструментов"
      },
+      "modelsPopup": {
+        "title": "Выберите Модели",
+        "searchPlaceholder": "Поиск моделей...",
+        "noOptionsMessage": "Нет доступных моделей"
+      },
      "upload": {
        "clickToUpload": "Нажмите для загрузки",
        "dragAndDrop": " или перетащите"
@@ -561,6 +569,9 @@
        "classic": "Классический",
        "react": "ReAct"
      },
+      "labels": {
+        "defaultModel": "Модель по умолчанию"
+      },
      "advanced": {
        "jsonSchema": "Схема ответа JSON",
        "jsonSchemaDescription": "Определите схему JSON для применения структурированного формата вывода",
--- a/frontend/src/locale/zh-TW.json
+++ b/frontend/src/locale/zh-TW.json
@@ -530,6 +530,7 @@
        "prompt": "提示詞",
        "tools": "工具",
        "agentType": "代理類型",
+        "models": "模型",
        "advanced": "進階",
        "preview": "預覽"
      },
@@ -540,6 +541,8 @@
        "chunksPerQuery": "每次查詢的區塊數",
        "selectType": "選擇類型",
        "selectTools": "選擇工具",
+        "selectModels": "為此代理選擇模型",
+        "selectDefaultModel": "選擇預設模型",
        "enterTokenLimit": "輸入權杖限制",
        "enterRequestLimit": "輸入請求限制"
      },
@@ -553,6 +556,11 @@
        "searchPlaceholder": "搜尋工具...",
        "noOptionsMessage": "沒有可用的工具"
      },
+      "modelsPopup": {
+        "title": "選擇模型",
+        "searchPlaceholder": "搜尋模型...",
+        "noOptionsMessage": "沒有可用的模型"
+      },
      "upload": {
        "clickToUpload": "點擊上傳",
        "dragAndDrop": " 或拖放"
@@ -561,6 +569,9 @@
        "classic": "經典",
        "react": "ReAct"
      },
+      "labels": {
+        "defaultModel": "預設模型"
+      },
      "advanced": {
        "jsonSchema": "JSON回應架構",
        "jsonSchemaDescription": "定義JSON架構以強制執行結構化輸出格式",
--- a/frontend/src/locale/zh.json
+++ b/frontend/src/locale/zh.json
@@ -530,6 +530,7 @@
        "prompt": "提示词",
        "tools": "工具",
        "agentType": "代理类型",
+        "models": "模型",
        "advanced": "高级",
        "preview": "预览"
      },
@@ -540,6 +541,8 @@
        "chunksPerQuery": "每次查询的块数",
        "selectType": "选择类型",
        "selectTools": "选择工具",
+        "selectModels": "为此代理选择模型",
+        "selectDefaultModel": "选择默认模型",
        "enterTokenLimit": "输入令牌限制",
        "enterRequestLimit": "输入请求限制"
      },
@@ -553,6 +556,11 @@
        "searchPlaceholder": "搜索工具...",
        "noOptionsMessage": "没有可用的工具"
      },
+      "modelsPopup": {
+        "title": "选择模型",
+        "searchPlaceholder": "搜索模型...",
+        "noOptionsMessage": "没有可用的模型"
+      },
      "upload": {
        "clickToUpload": "点击上传",
        "dragAndDrop": " 或拖放"
@@ -561,6 +569,9 @@
        "classic": "经典",
        "react": "ReAct"
      },
+      "labels": {
+        "defaultModel": "默认模型"
+      },
      "advanced": {
        "jsonSchema": "JSON响应架构",
        "jsonSchemaDescription": "定义JSON架构以强制执行结构化输出格式",
--- a/frontend/src/models/types.ts
+++ b/frontend/src/models/types.ts
@@ -0,0 +1,25 @@
+export interface AvailableModel {
+  id: string;
+  provider: string;
+  display_name: string;
+  description?: string;
+  context_window: number;
+  supported_attachment_types: string[];
+  supports_tools: boolean;
+  supports_structured_output: boolean;
+  supports_streaming: boolean;
+  enabled: boolean;
+}
+
+export interface Model {
+  id: string;
+  value: string;
+  provider: string;
+  display_name: string;
+  description?: string;
+  context_window: number;
+  supported_attachment_types: string[];
+  supports_tools: boolean;
+  supports_structured_output: boolean;
+  supports_streaming: boolean;
+}
--- a/frontend/src/preferences/preferenceSlice.ts
+++ b/frontend/src/preferences/preferenceSlice.ts
@@ -9,11 +9,12 @@ import { Agent } from '../agents/types';
 import { ActiveState, Doc } from '../models/misc';
 import { RootState } from '../store';
 import {
+  getLocalRecentDocs,
  setLocalApiKey,
  setLocalRecentDocs,
-  getLocalRecentDocs,
 } from './preferenceApi';

+import type { Model } from '../models/types';
 export interface Preference {
  apiKey: string;
  prompt: { name: string; id: string; type: string };
@@ -32,6 +33,9 @@ export interface Preference {
  agents: Agent[] | null;
  sharedAgents: Agent[] | null;
  selectedAgent: Agent | null;
+  selectedModel: Model | null;
+  availableModels: Model[];
+  modelsLoading: boolean;
 }

 const initialState: Preference = {
@@ -61,6 +65,9 @@ const initialState: Preference = {
  agents: null,
  sharedAgents: null,
  selectedAgent: null,
+  selectedModel: null,
+  availableModels: [],
+  modelsLoading: false,
 };

 export const prefSlice = createSlice({
@@ -109,6 +116,15 @@ export const prefSlice = createSlice({
    setSelectedAgent: (state, action) => {
      state.selectedAgent = action.payload;
    },
+    setSelectedModel: (state, action: PayloadAction<Model | null>) => {
+      state.selectedModel = action.payload;
+    },
+    setAvailableModels: (state, action: PayloadAction<Model[]>) => {
+      state.availableModels = action.payload;
+    },
+    setModelsLoading: (state, action: PayloadAction<boolean>) => {
+      state.modelsLoading = action.payload;
+    },
  },
 });

@@ -127,6 +143,9 @@ export const {
  setAgents,
  setSharedAgents,
  setSelectedAgent,
+  setSelectedModel,
+  setAvailableModels,
+  setModelsLoading,
 } = prefSlice.actions;
 export default prefSlice.reducer;

@@ -198,6 +217,19 @@ prefListenerMiddleware.startListening({
  },
 });

+prefListenerMiddleware.startListening({
+  matcher: isAnyOf(setSelectedModel),
+  effect: (action, listenerApi) => {
+    const model = (listenerApi.getState() as RootState).preference
+      .selectedModel;
+    if (model) {
+      localStorage.setItem('DocsGPTSelectedModel', JSON.stringify(model));
+    } else {
+      localStorage.removeItem('DocsGPTSelectedModel');
+    }
+  },
+});
+
 export const selectApiKey = (state: RootState) => state.preference.apiKey;
 export const selectApiKeyStatus = (state: RootState) =>
  !!state.preference.apiKey;
@@ -227,3 +259,9 @@ export const selectSharedAgents = (state: RootState) =>
  state.preference.sharedAgents;
 export const selectSelectedAgent = (state: RootState) =>
  state.preference.selectedAgent;
+export const selectSelectedModel = (state: RootState) =>
+  state.preference.selectedModel;
+export const selectAvailableModels = (state: RootState) =>
+  state.preference.availableModels;
+export const selectModelsLoading = (state: RootState) =>
+  state.preference.modelsLoading;
--- a/frontend/src/store.ts
+++ b/frontend/src/store.ts
@@ -15,6 +15,7 @@ const prompt = localStorage.getItem('DocsGPTPrompt');
 const chunks = localStorage.getItem('DocsGPTChunks');
 const token_limit = localStorage.getItem('DocsGPTTokenLimit');
 const doc = localStorage.getItem('DocsGPTRecentDocs');
+const selectedModel = localStorage.getItem('DocsGPTSelectedModel');

 const preloadedState: { preference: Preference } = {
  preference: {
@@ -47,6 +48,9 @@ const preloadedState: { preference: Preference } = {
    agents: null,
    sharedAgents: null,
    selectedAgent: null,
+    selectedModel: selectedModel ? JSON.parse(selectedModel) : null,
+    availableModels: [],
+    modelsLoading: false,
  },
 };
 const store = configureStore({