Add MaaS model to check the llama model enabled status (opendatahub-io#5244)

Author: DaoDaoNoCode

packages/gen-ai/frontend/src/app/Chatbot/ChatbotPlayground.tsx

@@ -13,7 +13,7 @@ import {
 import { useLocation } from 'react-router-dom';
 import { useUserContext } from '~/app/context/UserContext';
 import { ChatbotContext } from '~/app/context/ChatbotContext';
-import { getLlamaModelStatus } from '~/app/utilities';
+import { isLlamaModelEnabled } from '~/app/utilities';
 import { DEFAULT_SYSTEM_INSTRUCTIONS, FILE_UPLOAD_CONFIG, ERROR_MESSAGES } from './const';
 import { ChatbotSourceSettingsModal } from './sourceUpload/ChatbotSourceSettingsModal';
 import useSourceManagement from './hooks/useSourceManagement';
@@ -42,6 +42,7 @@ const ChatbotPlayground: React.FC<ChatbotPlaygroundProps> = ({
     models,
     modelsLoaded,
     aiModels,
+    maasModels,
     selectedModel,
     setSelectedModel,
     lastInput,
@@ -66,15 +67,23 @@ const ChatbotPlayground: React.FC<ChatbotPlaygroundProps> = ({
         // so that when refreshing the page, the selected model is not passed again
         window.history.replaceState({}, '');
       } else {
-        const availableModels = models.filter(
-          (model) => getLlamaModelStatus(model.id, aiModels) === 'Running',
+        const availableModels = models.filter((model) =>
+          isLlamaModelEnabled(model.id, aiModels, maasModels),
         );
         if (availableModels.length > 0) {
           setSelectedModel(availableModels[0].id);
         }
       }
     }
-  }, [modelsLoaded, models, selectedModel, setSelectedModel, aiModels, selectedAAModel]);
+  }, [
+    modelsLoaded,
+    models,
+    selectedModel,
+    setSelectedModel,
+    aiModels,
+    maasModels,
+    selectedAAModel,
+  ]);
 
   // Custom hooks for managing different aspects of the chatbot
   const alertManagement = useAlertManagement();

packages/gen-ai/frontend/src/app/Chatbot/components/ModelDetailsDropdown.tsx

@@ -11,7 +11,7 @@ import {
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { fireMiscTrackingEvent } from '@odh-dashboard/internal/concepts/analyticsTracking/segmentIOUtils';
 import { ChatbotContext } from '~/app/context/ChatbotContext';
-import { getLlamaModelDisplayName, getLlamaModelStatus } from '~/app/utilities';
+import { getLlamaModelDisplayName, isLlamaModelEnabled } from '~/app/utilities';
 
 interface ModelDetailsDropdownProps {
   selectedModel: string;
@@ -22,7 +22,7 @@ const ModelDetailsDropdown: React.FunctionComponent<ModelDetailsDropdownProps> =
   selectedModel,
   onModelChange,
 }) => {
-  const { models, aiModels } = React.useContext(ChatbotContext);
+  const { models, aiModels, maasModels } = React.useContext(ChatbotContext);
   const [isOpen, setIsOpen] = React.useState(false);
 
   const placeholder = models.length === 0 ? 'No models available' : 'Select a model';
@@ -62,7 +62,7 @@ const ModelDetailsDropdown: React.FunctionComponent<ModelDetailsDropdownProps> =
     >
       <DropdownList style={{ maxHeight: '300px', overflowY: 'auto' }}>
         {models.map((option) => {
-          const isDisabled = getLlamaModelStatus(option.id, aiModels) !== 'Running';
+          const isDisabled = !isLlamaModelEnabled(option.id, aiModels, maasModels);
           return (
             <DropdownItem
               value={option.id}

packages/gen-ai/frontend/src/app/utilities/utils.ts

@@ -37,13 +37,25 @@ export const getLlamaModelDisplayName = (modelId: string, aiModels: AIModel[]):
   return `${providerId}/${enabledModel.display_name}`;
 };
 
-export const getLlamaModelStatus = (
+export const isLlamaModelEnabled = (
   modelId: string,
   aiModels: AIModel[],
-): AIModel['status'] | undefined => {
+  maasModels: MaaSModel[],
+): boolean => {
   const { id } = splitLlamaModelId(modelId);
+
   const enabledModel = aiModels.find((aiModel) => aiModel.model_id === id);
-  return enabledModel?.status;
+
+  if (enabledModel) {
+    return enabledModel.status === 'Running';
+  }
+
+  const maasModel = maasModels.find((m) => m.id === id);
+  if (maasModel) {
+    return maasModel.ready;
+  }
+
+  return false;
 };
 
 export const generateMCPServerConfig = (