feat: results view and SFERA and GI ratings(#167)

preparation for SFERA and GI experiments

build: use SENTRY_ENV to control sentry config
feat: ratings global issue
feat: show summary of ratings for responses GI
feat: implement SFERA rating
fix: hook automatic response generation on next steps
refactor: split prompts and main translations
fix: missing assistant id when generating responses with chatbot
fix(langs): es translations
fix: show correct value for activity switch in settings

Author: swouf

package.json

@@ -36,6 +36,7 @@
     "@mui/lab": "5.0.0-alpha.169",
     "@mui/material": "5.15.14",
     "@mui/x-data-grid": "^6.19.4",
+    "@nivo/boxplot": "^0.85.1",
     "@sentry/react": "7.107.0",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.36.1",

src/config/i18n.ts

@@ -2,25 +2,22 @@ import { initReactI18next } from 'react-i18next';
 
 import i18n from 'i18next';
 
-import en from '../langs/en/main.json';
-import fr from '../langs/fr/main.json';
-import { DEFAULT_LANG } from './constants';
+import mainEn from '../langs/en/main.json';
+import promptsEn from '../langs/en/prompts.json';
+
+import mainFr from '../langs/fr/main.json';
+import promptsFr from '../langs/fr/prompts.json';
 
-export const defaultNS = 'translations';
-export const resources = {
-  en,
-  fr,
-} as const;
+import mainEs from '../langs/es/main.json';
+import promptsEs from '../langs/es/prompts.json';
 
-declare module 'react-i18next' {
-  interface CustomTypeOptions {
-    defaultNS: typeof defaultNS;
-    resources: (typeof resources)['en'];
-  }
-}
+import { DEFAULT_LANG } from './constants';
+
+export const TRANSLATIONS_NS = 'translations';
+export const PROMPTS_NS = 'prompts';
+export const defaultNS = TRANSLATIONS_NS;
 
 i18n.use(initReactI18next).init({
-  resources,
   lng: DEFAULT_LANG,
   // debug only when not in production
   debug: import.meta.env.DEV,
@@ -34,4 +31,11 @@ i18n.use(initReactI18next).init({
   fallbackLng: 'en',
 });
 
+i18n.addResourceBundle('en', TRANSLATIONS_NS, mainEn);
+i18n.addResourceBundle('en', PROMPTS_NS, promptsEn);
+i18n.addResourceBundle('fr', TRANSLATIONS_NS, mainFr);
+i18n.addResourceBundle('fr', PROMPTS_NS, promptsFr);
+i18n.addResourceBundle('es', TRANSLATIONS_NS, mainEs);
+i18n.addResourceBundle('es', PROMPTS_NS, promptsEs);
+
 export default i18n;

src/config/prompts.ts

@@ -12,22 +12,22 @@ export const getSingleResponsePrompt = (prompt: string): string =>
 
 export const promptForSingleResponse = (
   problemStatement: string,
-  t: TFunction,
+  t: TFunction<'prompts', undefined>,
 ): string =>
-  t('PROMPTS.SINGLE_RESPONSE', {
+  t('SINGLE_RESPONSE', {
     problemStatement,
     maxChars: RESPONSE_MAXIMUM_LENGTH,
   });
 
 export const promptForSingleResponseAndProvideResponses = (
   problemStatement: string,
   responses: string[],
-  t: TFunction,
+  t: TFunction<'prompts', undefined>,
 ): string => {
   const responsesString = responses.map(
     (r) => `<solution>\n${r}\n</solution>\n`,
   );
-  return t('PROMPTS.SINGLE_RESPONSE_AND_PROVIDE_RESPONSES', {
+  return t('SINGLE_RESPONSE_AND_PROVIDE_RESPONSES', {
     problemStatement,
     responses: responsesString,
     maxChars: RESPONSE_MAXIMUM_LENGTH,

src/config/selectors.ts

@@ -34,3 +34,5 @@ export const NEXT_STEP_BTN_CY = 'next-step-btn';
 
 export const buildDataCy = (selector: string): string =>
   `[data-cy=${selector}]`;
+
+export const RESULTS_VIEW_CY = 'results-view';

src/config/sentry.ts

@@ -10,7 +10,7 @@ type SentryConfigType = {
 };
 
 export const generateSentryConfig = (): SentryConfigType => {
-  let SENTRY_ENVIRONMENT = 'development';
+  let SENTRY_ENVIRONMENT = SENTRY_ENV || 'development';
   let SENTRY_TRACE_SAMPLE_RATE = 1.0;
   // This sets the sample rate to be 10%. You may want this to be 100% while
   // in development and sample at a lower rate in production

src/hooks/useAssistants.ts

@@ -1,16 +1,21 @@
 import { ChatbotRole } from '@graasp/sdk';
 
-import { ChatbotResponseAppData } from '@/config/appDataTypes';
+import { ChatbotResponseAppData, ResponseAppData } from '@/config/appDataTypes';
 import {
   DEFAULT_CHATBOT_RESPONSE_APP_DATA,
   RESPONSE_MAXIMUM_LENGTH,
 } from '@/config/constants';
-import { getSingleResponsePrompt } from '@/config/prompts';
+import {
+  getSingleResponsePrompt,
+  promptForSingleResponse,
+  promptForSingleResponseAndProvideResponses,
+} from '@/config/prompts';
 import { mutations } from '@/config/queryClient';
 import { AssistantPersona } from '@/interfaces/assistant';
 import { useAppDataContext } from '@/modules/context/AppDataContext';
 import { useSettings } from '@/modules/context/SettingsContext';
 import { useTranslation } from 'react-i18next';
+import { useActivityContext } from '@/modules/context/ActivityContext';
 
 interface UseAssistantsValues {
   generateSingleResponse: () => Promise<ChatbotResponseAppData | undefined>;
@@ -24,13 +29,25 @@ interface UseAssistantsValues {
   reformulateResponse: (
     response: string,
   ) => Promise<ChatbotResponseAppData | undefined>;
+  generateResponsesWithEachAssistant: () => Promise<
+    Promise<ResponseAppData | undefined>[]
+  >;
 }
 
 const useAssistants = (): UseAssistantsValues => {
-  const { t } = useTranslation('translations', { keyPrefix: 'PROMPTS' });
+  const { t } = useTranslation('prompts');
   const { mutateAsync: postChatBot } = mutations.usePostChatBot();
-  const { chatbot, instructions: generalPrompt, assistants } = useSettings();
+  const {
+    chatbot,
+    instructions: generalPrompt,
+    assistants,
+    instructions,
+  } = useSettings();
   const { postAppDataAsync } = useAppDataContext();
+
+  const { assistantsResponsesSets, round, allResponses, postResponse } =
+    useActivityContext();
+
   const reformulateResponse = (
     response: string,
   ): Promise<ChatbotResponseAppData | undefined> =>
@@ -86,7 +103,9 @@ const useAssistants = (): UseAssistantsValues => {
     ]).then((ans) => {
       const a = postAppDataAsync({
         ...DEFAULT_CHATBOT_RESPONSE_APP_DATA,
-        data: ans,
+        data: {
+          ...ans,
+        },
       }) as Promise<ChatbotResponseAppData>;
       return a;
     });
@@ -104,7 +123,10 @@ const useAssistants = (): UseAssistantsValues => {
     ]).then((ans) => {
       const a = postAppDataAsync({
         ...DEFAULT_CHATBOT_RESPONSE_APP_DATA,
-        data: ans,
+        data: {
+          ans,
+          assistantId: assistant.id,
+        },
       }) as Promise<ChatbotResponseAppData>;
       return a;
     });
@@ -114,11 +136,58 @@ const useAssistants = (): UseAssistantsValues => {
   ): Promise<Promise<ChatbotResponseAppData | undefined>[]> =>
     assistants.assistants.map((p) => promptAssistant(p, prompt));
 
+  const generateResponsesWithEachAssistant = async (): Promise<
+    Promise<ResponseAppData | undefined>[]
+  > => {
+    const responsesAssistants = assistants.assistants
+      .map((persona) => {
+        const assistantSet = assistantsResponsesSets.find(
+          (set) =>
+            set.data.assistant === persona.id && set.data.round === round - 1,
+        );
+        if (assistantSet) {
+          const responses = assistantSet.data.responses.map(
+            (r) => allResponses.find(({ id }) => r === id)?.data.response || '',
+          );
+          return promptAssistant(
+            persona,
+            promptForSingleResponseAndProvideResponses(
+              instructions.title.content,
+              responses,
+              t,
+            ),
+          );
+        }
+        return promptAssistant(
+          persona,
+          promptForSingleResponse(instructions.title.content, t),
+        );
+      })
+      .map((promise) =>
+        promise.then((assistantResponseAppData) => {
+          if (assistantResponseAppData) {
+            const { completion: response, assistantId } =
+              assistantResponseAppData.data;
+            return postResponse({
+              response,
+              round,
+              bot: true,
+              assistantId,
+            });
+          }
+          return assistantResponseAppData;
+        }),
+      );
+
+    return responsesAssistants;
+  };
+
   return {
     generateSingleResponse,
     promptAssistant,
     promptAllAssistants,
     reformulateResponse,
+    generateResponsesWithEachAssistant,
   };
 };
 

src/hooks/useRatings.ts

@@ -0,0 +1,46 @@
+import { AppDataTypes, RatingsAppData } from '@/config/appDataTypes';
+import { EvaluationType } from '@/interfaces/evaluationType';
+import {
+  DimensionsOfGIRatings,
+  SFERARating,
+  UsefulnessNoveltyRatings,
+} from '@/interfaces/ratings';
+import { useAppDataContext } from '@/modules/context/AppDataContext';
+import { useCallback, useMemo } from 'react';
+
+interface UseRatingsValue<T> {
+  allRatings: RatingsAppData<T>[];
+  getRatingsForResponse: (id: string) => RatingsAppData<T>[];
+}
+
+type ReturnRating<T> = T extends EvaluationType.DimensionsOfGIRating
+  ? DimensionsOfGIRatings
+  : T extends EvaluationType.UsefulnessNoveltyRating
+    ? UsefulnessNoveltyRatings
+    : T extends EvaluationType.SFERARating
+      ? SFERARating
+      : null;
+
+const useRatings = (
+  evaluationType: EvaluationType,
+): UseRatingsValue<ReturnRating<typeof evaluationType>> => {
+  type R = ReturnRating<typeof evaluationType>;
+  const { appData } = useAppDataContext();
+  const allRatings = useMemo(
+    () =>
+      appData.filter(
+        ({ type, data }) =>
+          type === AppDataTypes.Ratings && data?.type === evaluationType,
+      ) as RatingsAppData<R>[],
+    [appData, evaluationType],
+  );
+
+  const getRatingsForResponse = useCallback(
+    (id: string) => allRatings.filter(({ data }) => data?.ideaRef === id),
+    [allRatings],
+  );
+
+  return { allRatings, getRatingsForResponse };
+};
+
+export default useRatings;

src/hooks/useSteps.ts

@@ -3,6 +3,7 @@ import { useActivityContext } from '@/modules/context/ActivityContext';
 import { useSettings } from '@/modules/context/SettingsContext';
 import { useMemo } from 'react';
 import useActions from './useActions';
+import useAssistants from './useAssistants';
 
 interface UseStepsValues {
   changeStep: (newStep: ActivityStep, index: number) => void;
@@ -24,6 +25,8 @@ const useSteps = (): UseStepsValues => {
     deleteResponsesSetsForRound,
   } = useActivityContext();
 
+  const { generateResponsesWithEachAssistant } = useAssistants();
+
   const { postNextStepAction, postPreviousStepAction } = useActions();
   const { activity } = useSettings();
   const { steps } = activity;
@@ -75,9 +78,12 @@ const useSteps = (): UseStepsValues => {
     const nextStepIndex = (stepIndex ?? 0) + 1;
 
     if ((nextStep?.round || 0) > round) {
-      await createAllResponsesSet().then(() => {
-        changeStep(nextStep, nextStepIndex);
-      });
+      // TODO: Insane amount of work here. REFACTOR!
+      await generateResponsesWithEachAssistant().then(() =>
+        createAllResponsesSet().then(() => {
+          changeStep(nextStep, nextStepIndex);
+        }),
+      );
     } else {
       changeStep(nextStep, nextStepIndex);
     }

src/interfaces/chatbot.ts

@@ -1,3 +1,6 @@
 import { ChatBotCompletion } from '@graasp/apps-query-client';
+import { AssistantId } from './assistant';
 
-export type ChatbotResponseData = ChatBotCompletion;
+export type ChatbotResponseData = ChatBotCompletion & {
+  assistantId?: AssistantId;
+};

src/interfaces/evaluationType.ts

@@ -1,5 +1,7 @@
 export enum EvaluationType {
   UsefulnessNoveltyRating = 'usefulness-novelty-rating',
+  DimensionsOfGIRating = 'dimensions-gi-rating',
+  SFERARating = 'sfera-rating',
   Vote = 'vote',
   None = 'none',
 }