New: Added the supported llm models for ragas evaluation

Author: kartikpersistent

frontend/src/components/ChatBot/ChatInfoModal.tsx

@@ -29,6 +29,7 @@ import { Relationship } from '@neo4j-nvl/base';
 import { getChatMetrics } from '../../services/GetRagasMetric';
 import MetricsTab from './MetricsTab';
 import { Stack } from '@mui/material';
+import { capitalizeWithUnderscore } from '../../utils/Utils';
 
 const ChatInfoModal: React.FC<chatInfoMessage> = ({
   sources,
@@ -263,14 +264,28 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
           <Stack spacing={2}>
             <Stack spacing={2}>
               {!supportedLLmsForRagas.includes(metricmodel) && (
-                <Banner type='warning'>LLM Model Not Supported ,Please Choose Different Model</Banner>
+                <Banner
+                  type='warning'
+                  title='LLM Model Not Supported ,Please Choose Different Model'
+                  description={
+                    <Typography variant='body-medium'>
+                      Currently ragas evaluation works on{' '}
+                      {supportedLLmsForRagas.map((s, idx) => (
+                        <span className='font-bold'>
+                          {capitalizeWithUnderscore(s) + (idx != supportedLLmsForRagas.length - 1 ? ',' : '')}
+                        </span>
+                      ))}
+                      .
+                    </Typography>
+                  }
+                ></Banner>
               )}
               <Box>
                 <Typography variant='body-large'>
                   We use several key metrics to assess the quality of our chat responses. Click the button below to view
-                  detailed scores for this interaction. These scores help us continuously improve the accuracy and
-                  helpfulness of our chatbots.This usually takes about <span className='font-bold'>20</span> seconds.
-                  You'll see detailed scores shortly.
+                  detailed scores for this interaction using <span className='font-bold'>ragas framework</span>. These
+                  scores help us continuously improve the accuracy and helpfulness of our chatbots.This usually takes
+                  about <span className='font-bold'>20 seconds</span> . You'll see detailed scores shortly.
                 </Typography>
               </Box>
               <Stack>

frontend/src/components/ChatBot/Chatbot.tsx

@@ -406,7 +406,7 @@ const Chatbot: FC<ChatbotProps> = (props) => {
       handleSpeak(chat.modes[chat.currentMode]?.message, chat.id);
     }
   }, []);
-  
+
   const downloadClickHandler = useCallback(function downloadClickHandler<Type>(JsonData: Type) {
     const textFile = new Blob([JSON.stringify(JsonData)], { type: 'application/json' });
     if (downloadLinkRef && downloadLinkRef.current) {

frontend/src/components/Dropdown.tsx

@@ -1,7 +1,7 @@
 import { Dropdown, Tip } from '@neo4j-ndl/react';
 import { OptionType, ReusableDropdownProps } from '../types';
 import { memo, useMemo, useReducer } from 'react';
-import { capitalize } from '../utils/Utils';
+import { capitalize, capitalizeWithUnderscore } from '../utils/Utils';
 
 const DropdownComponent: React.FC<ReusableDropdownProps> = ({
   options,
@@ -31,14 +31,7 @@ const DropdownComponent: React.FC<ReusableDropdownProps> = ({
                 onChange: handleChange,
                 options: allOptions?.map((option) => {
                   const label =
-                    typeof option === 'string'
-                      ? (option.includes('LLM_MODEL_CONFIG_')
-                          ? capitalize(option.split('LLM_MODEL_CONFIG_').at(-1) as string)
-                          : capitalize(option)
-                        )
-                          .split('_')
-                          .join(' ')
-                      : capitalize(option.label);
+                    typeof option === 'string' ? capitalizeWithUnderscore(option) : capitalize(option.label);
                   const value = typeof option === 'string' ? option : option.value;
                   return {
                     label,

frontend/src/components/FileTable.tsx

@@ -29,11 +29,11 @@ import { getSourceNodes } from '../services/GetFiles';
 import { v4 as uuidv4 } from 'uuid';
 import {
   statusCheck,
-  capitalize,
   isFileCompleted,
   calculateProcessedCount,
   getFileSourceStatus,
   isProcessingFileValid,
+  capitalizeWithUnderscore,
 } from '../utils/Utils';
 import { SourceNode, CustomFile, FileTableProps, UserCredentials, statusupdate, ChildRef } from '../types';
 import { useCredentials } from '../context/UserCredentials';
@@ -467,16 +467,7 @@ const FileTable = forwardRef<ChildRef, FileTableProps>((props, ref) => {
         id: 'model',
         cell: (info) => {
           const model = info.getValue();
-          return (
-            <i>
-              {(model.includes('LLM_MODEL_CONFIG_')
-                ? capitalize(model.split('LLM_MODEL_CONFIG_').at(-1) as string)
-                : capitalize(model)
-              )
-                .split('_')
-                .join(' ')}
-            </i>
-          );
+          return <i>{capitalizeWithUnderscore(model)}</i>;
         },
         header: () => <span>Model</span>,
         footer: (info) => info.column.id,

frontend/src/utils/Utils.ts

@@ -411,6 +411,7 @@ export const capitalizeWithPlus = (s: string) => {
     .map((s) => capitalize(s))
     .join('+');
 };
+export const capitalizeWithUnderscore = (s: string) => capitalize(s).split('_').join(' ');
 
 export const getDescriptionForChatMode = (mode: string): string => {
   switch (mode.toLowerCase()) {