Follow up fixes for GEN AI Playground UI (opendatahub-io#5184)

* Deal better with unavailable models

* Update view code modal to show MCP, Vector store and files information

Author: DaoDaoNoCode

packages/gen-ai/frontend/src/__mocks__/mockVectorStores.ts

@@ -21,6 +21,7 @@ export const mockVectorStores: VectorStore[] = [
     metadata: {
       description: 'Test vector store for unit tests',
       category: 'test',
+      provider_id: 'test-provider-id',
     },
   },
   {
@@ -40,6 +41,7 @@ export const mockVectorStores: VectorStore[] = [
     },
     metadata: {
       description: 'Another test vector store',
+      provider_id: 'test-provider-id',
     },
   },
 ];

packages/gen-ai/frontend/src/app/AIAssets/components/AIModelTableRow.tsx

@@ -74,6 +74,7 @@ const AIModelTableRow: React.FC<AIModelTableRowProps> = ({
                   },
                 })
               }
+              isDisabled={model.status !== 'Running'}
             >
               Try in playground
             </Button>

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

@@ -13,6 +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 { DEFAULT_SYSTEM_INSTRUCTIONS, FILE_UPLOAD_CONFIG, ERROR_MESSAGES } from './const';
 import { ChatbotSourceSettingsModal } from './sourceUpload/ChatbotSourceSettingsModal';
 import useSourceManagement from './hooks/useSourceManagement';
@@ -65,7 +66,12 @@ const ChatbotPlayground: React.FC<ChatbotPlaygroundProps> = ({
         // so that when refreshing the page, the selected model is not passed again
         window.history.replaceState({}, '');
       } else {
-        setSelectedModel(models[0].id);
+        const availableModels = models.filter(
+          (model) => getLlamaModelStatus(model.id, aiModels) === 'Running',
+        );
+        if (availableModels.length > 0) {
+          setSelectedModel(availableModels[0].id);
+        }
       }
     }
   }, [modelsLoaded, models, selectedModel, setSelectedModel, aiModels, selectedAAModel]);
@@ -161,6 +167,7 @@ const ChatbotPlayground: React.FC<ChatbotPlaygroundProps> = ({
         input={lastInput}
         model={selectedModel}
         systemInstruction={systemInstruction}
+        files={fileManagement.files}
       />
       <Drawer isExpanded isInline position="right">
         <Divider />

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

@@ -3,11 +3,14 @@ import {
   Dropdown,
   DropdownItem,
   DropdownList,
+  Icon,
   MenuToggle,
   MenuToggleElement,
+  Tooltip,
 } from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { ChatbotContext } from '~/app/context/ChatbotContext';
-import { getLlamaModelDisplayName } from '~/app/utilities';
+import { getLlamaModelDisplayName, getLlamaModelStatus } from '~/app/utilities';
 
 interface ModelDetailsDropdownProps {
   selectedModel: string;
@@ -26,6 +29,7 @@ const ModelDetailsDropdown: React.FunctionComponent<ModelDetailsDropdownProps> =
     setIsOpen(false);
     onModelChange(value);
   };
+
   return (
     <Dropdown
       isOpen={isOpen}
@@ -53,11 +57,31 @@ const ModelDetailsDropdown: React.FunctionComponent<ModelDetailsDropdownProps> =
       shouldFocusToggleOnSelect
     >
       <DropdownList style={{ maxHeight: '300px', overflowY: 'auto' }}>
-        {models.map((option) => (
-          <DropdownItem value={option.id} key={option.id}>
-            {getLlamaModelDisplayName(option.id, aiModels)}
-          </DropdownItem>
-        ))}
+        {models.map((option) => {
+          const isDisabled = getLlamaModelStatus(option.id, aiModels) !== 'Running';
+          return (
+            <DropdownItem
+              value={option.id}
+              key={option.id}
+              actions={
+                isDisabled ? (
+                  <Tooltip content="This model is unavailable. Check the model's deployment status and resolve any issues. Update the playground's configuration to refresh the list.">
+                    <Icon
+                      status="danger"
+                      iconSize="md"
+                      style={{ marginRight: 'var(--pf-t--global--spacer--md)' }}
+                    >
+                      <ExclamationCircleIcon />
+                    </Icon>
+                  </Tooltip>
+                ) : null
+              }
+              isAriaDisabled={isDisabled}
+            >
+              {getLlamaModelDisplayName(option.id, aiModels)}
+            </DropdownItem>
+          );
+        })}
       </DropdownList>
     </Dropdown>
   );

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

@@ -11,15 +11,21 @@ import {
 } from '@patternfly/react-core';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
 import { exportCode } from '~/app/services/llamaStackService';
-import { CodeExportRequest } from '~/app/types';
+import { CodeExportRequest, FileModel } from '~/app/types';
 import { GenAiContext } from '~/app/context/GenAiContext';
+import { useMCPServers } from '~/app/hooks/useMCPServers';
+import { useMCPTokenContext } from '~/app/context/MCPTokenContext';
+import { generateMCPServerConfig } from '~/app/utilities';
+import { useMCPSelectionContext } from '~/app/context/MCPSelectionContext';
+import useFetchVectorStores from '~/app/hooks/useFetchVectorStores';
 
 interface ViewCodeModalProps {
   isOpen: boolean;
   onToggle: () => void;
   input: string;
   model: string;
   systemInstruction?: string;
+  files: FileModel[];
 }
 
 const ViewCodeModal: React.FunctionComponent<ViewCodeModalProps> = ({
@@ -28,11 +34,21 @@ const ViewCodeModal: React.FunctionComponent<ViewCodeModalProps> = ({
   input,
   model,
   systemInstruction,
+  files,
 }) => {
   const [code, setCode] = React.useState<string>('');
   const [isLoading, setIsLoading] = React.useState<boolean>(false);
   const [error, setError] = React.useState<string>('');
   const { namespace } = React.useContext(GenAiContext);
+  const { servers: mcpServers } = useMCPServers(namespace?.name || '');
+  const { serverTokens } = useMCPTokenContext();
+  const { playgroundSelectedServerIds } = useMCPSelectionContext();
+  const [vectorStores, vectorStoresLoaded] = useFetchVectorStores(namespace?.name);
+
+  const mcpServersToUse = React.useMemo(
+    () => mcpServers.filter((server) => playgroundSelectedServerIds.includes(server.url)),
+    [mcpServers, playgroundSelectedServerIds],
+  );
 
   const handleExportCode = React.useCallback(async () => {
     setIsLoading(true);
@@ -45,13 +61,30 @@ const ViewCodeModal: React.FunctionComponent<ViewCodeModalProps> = ({
       return;
     }
 
+    if (!vectorStoresLoaded || vectorStores.length === 0) {
+      setError('Vector stores not loaded');
+      setIsLoading(false);
+      return;
+    }
+
     try {
+      /* eslint-disable camelcase */
       const request: CodeExportRequest = {
         input,
         model,
         instructions: systemInstruction,
         stream: false,
+        mcp_servers: mcpServersToUse.map((server) => generateMCPServerConfig(server, serverTokens)),
+        vector_store: {
+          name: vectorStores[0].name,
+          // TODO: Get embedding model and dimension from vector store, it's optional
+          // embedding_model: 'all-minilm:l6-v2',
+          // embedding_dimension: 768,
+          provider_id: vectorStores[0].metadata.provider_id,
+        },
+        files: files.map((file) => ({ file: file.filename, purpose: file.purpose })),
       };
+      /* eslint-enable camelcase */
 
       const response = await exportCode(request, namespace.name);
       setCode(response.data.code);
@@ -60,7 +93,17 @@ const ViewCodeModal: React.FunctionComponent<ViewCodeModalProps> = ({
     } finally {
       setIsLoading(false);
     }
-  }, [input, model, namespace?.name, systemInstruction]);
+  }, [
+    files,
+    input,
+    model,
+    namespace?.name,
+    systemInstruction,
+    mcpServersToUse,
+    serverTokens,
+    vectorStores,
+    vectorStoresLoaded,
+  ]);
 
   React.useEffect(() => {
     if (isOpen) {

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

@@ -183,7 +183,7 @@ const ChatbotConfigurationModal: React.FC<ChatbotConfigurationModalProps> = ({
       {!configuringPlayground && (
         <ModalFooter>
           <DashboardModalFooter
-            submitLabel={existingModels ? 'Update configuration' : 'Configure'}
+            submitLabel={lsdStatus ? 'Update configuration' : 'Configure'}
             onSubmit={onSubmit}
             onCancel={() => onBeforeClose()}
             error={error}

packages/gen-ai/frontend/src/app/types.ts

@@ -41,6 +41,7 @@ export type VectorStore = {
   /** Key-value metadata (max 16 pairs, keys ≤64 chars, values ≤512 chars) */
   metadata: {
     description?: string;
+    provider_id: string;
     [key: string]: string | undefined;
   };
   /** Human-readable name (max 256 characters) */
@@ -226,6 +227,14 @@ export type CodeExportRequest = {
   stream?: boolean;
   temperature?: number;
   tools?: CodeExportTool[];
+  mcp_servers?: MCPServerConfig[];
+  vector_store?: {
+    name: string;
+    embedding_model?: string;
+    embedding_dimension?: number;
+    provider_id: string;
+  };
+  files?: { file: string; purpose: string }[];
 };
 
 export type CodeExportData = {

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

@@ -8,6 +8,7 @@ import {
   MCPToolCallData,
 } from '~/app/types';
 import { ServerStatusInfo } from '~/app/hooks/useMCPServers';
+import { generateMCPServerConfig } from './utils';
 
 /**
  * Transform MCP server data from API to table format
@@ -189,21 +190,9 @@ export const getSelectedServersForAPI = (
     const isConnected = statusInfo?.status === 'connected' || tokenInfo?.authenticated === true;
 
     if (isConnected && isValidated) {
-      const serverTokenInfo = serverTokens.get(server.url);
-      const headers: Record<string, string> = {};
-
-      if (serverTokenInfo?.token) {
-        const raw = serverTokenInfo.token.trim();
-        headers.Authorization = raw.toLowerCase().startsWith('bearer ') ? raw : `Bearer ${raw}`;
-      }
-
-      validServers.push({
-        // eslint-disable-next-line camelcase
-        server_label: server.name,
-        // eslint-disable-next-line camelcase
-        server_url: server.url,
-        headers,
-      });
+      const serverConfig = generateMCPServerConfig(server, serverTokens);
+
+      validServers.push(serverConfig);
     } else {
       excludedCount++;
     }

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

@@ -1,5 +1,5 @@
 import { K8sResourceCommon } from 'mod-arch-shared';
-import { AIModel } from '~/app/types';
+import { AIModel, TokenInfo, MCPServerFromAPI, MCPServerConfig } from '~/app/types';
 
 export const getId = (): `${string}-${string}-${string}-${string}-${string}` => crypto.randomUUID();
 
@@ -30,3 +30,33 @@ export const getLlamaModelDisplayName = (modelId: string, aiModels: AIModel[]):
   }
   return `${providerId}/${enabledModel.display_name}`;
 };
+
+export const getLlamaModelStatus = (
+  modelId: string,
+  aiModels: AIModel[],
+): AIModel['status'] | undefined => {
+  const { id } = splitLlamaModelId(modelId);
+  const enabledModel = aiModels.find((aiModel) => aiModel.model_id === id);
+  return enabledModel?.status;
+};
+
+export const generateMCPServerConfig = (
+  server: MCPServerFromAPI,
+  serverTokens: Map<string, TokenInfo>,
+): MCPServerConfig => {
+  const serverTokenInfo = serverTokens.get(server.url);
+  const headers: Record<string, string> = {};
+
+  if (serverTokenInfo?.token) {
+    const raw = serverTokenInfo.token.trim();
+    headers.Authorization = raw.toLowerCase().startsWith('bearer ') ? raw : `Bearer ${raw}`;
+  }
+
+  /* eslint-disable camelcase */
+  return {
+    server_label: server.name,
+    server_url: server.url,
+    headers,
+  };
+  /* eslint-enable camelcase */
+};