feat: add instruction mode and enable use of instruction details (#272)

feat(langs): add fr translation for prompts
feat: add circular progress when changing step

Author: swouf

src/config/appSettingsType.ts

@@ -1,6 +1,6 @@
 import { Member } from '@graasp/sdk';
 
-import { AssistantPersona } from '@/interfaces/assistant';
+import { AssistantPersona, PromptMode } from '@/interfaces/assistant';
 import { EvaluationType } from '@/interfaces/evaluationType';
 import {
   ActivityStep,
@@ -44,6 +44,8 @@ export type ActivitySetting = {
 
 export type AssistantsSetting = {
   assistants: AssistantPersona[];
+  promptMode?: PromptMode;
+  includeDetails?: boolean;
 };
 
 export type NotParticipatingSetting = { ids: Member['id'][] };
@@ -124,5 +126,7 @@ export const defaultSettingsValues: AllSettingsType = {
   },
   assistants: {
     assistants: [],
+    promptMode: PromptMode.Problem,
+    includeDetails: false,
   },
 };

src/config/prompts.ts

@@ -1,6 +1,7 @@
 import { TFunction } from 'i18next';
 
-import { RESPONSE_MAXIMUM_LENGTH } from './constants';
+import { RESPONSE_MAXIMUM_LENGTH } from '@/config/constants';
+import { PromptMode } from '@/interfaces/assistant';
 
 export const DEFAULT_SYSTEM_PROMPT =
   'You are part of a group of designers trying to solve a wicked problem. Help your group by proposing new ideas';
@@ -13,23 +14,69 @@ export const getSingleResponsePrompt = (prompt: string): string =>
 export const promptForSingleResponse = (
   problemStatement: string,
   t: TFunction<'prompts', undefined>,
-): string =>
-  t('SINGLE_RESPONSE', {
-    problemStatement,
-    maxChars: RESPONSE_MAXIMUM_LENGTH,
-  });
+  details?: string,
+  promptMode?: PromptMode,
+): string => {
+  if (promptMode === PromptMode.Instructions) {
+    return typeof details === 'undefined'
+      ? t('INSTRUCTIONS.SINGLE_RESPONSE', {
+          instructions: problemStatement,
+          maxChars: RESPONSE_MAXIMUM_LENGTH,
+        })
+      : t('INSTRUCTIONS.SINGLE_RESPONSE_WITH_DETAILS', {
+          // TODO: Put this in translations
+          instructions: problemStatement,
+          details,
+          maxChars: RESPONSE_MAXIMUM_LENGTH,
+        });
+  }
+  return typeof details === 'undefined'
+    ? t('PROBLEM.SINGLE_RESPONSE', {
+        problemStatement,
+        maxChars: RESPONSE_MAXIMUM_LENGTH,
+      })
+    : t('PROBLEM.SINGLE_RESPONSE_WITH_DETAILS', {
+        // TODO: Put this in translations
+        problemStatement,
+        details,
+        maxChars: RESPONSE_MAXIMUM_LENGTH,
+      });
+};
 
 export const promptForSingleResponseAndProvideResponses = (
   problemStatement: string,
   responses: string[],
   t: TFunction<'prompts', undefined>,
+  details?: string,
+  promptMode?: PromptMode,
 ): string => {
   const responsesString = responses.map(
     (r) => `<solution>\n${r}\n</solution>\n`,
   );
-  return t('SINGLE_RESPONSE_AND_PROVIDE_RESPONSES', {
-    problemStatement,
-    responses: responsesString,
-    maxChars: RESPONSE_MAXIMUM_LENGTH,
-  });
+  if (promptMode === PromptMode.Instructions) {
+    return typeof details === 'undefined'
+      ? t('INSTRUCTIONS.SINGLE_RESPONSE_AND_PROVIDE_RESPONSES', {
+          instructions: problemStatement,
+          responses: responsesString,
+          maxChars: RESPONSE_MAXIMUM_LENGTH,
+        })
+      : t('INSTRUCTIONS.SINGLE_RESPONSE_WITH_DETAILS_AND_PROVIDE_RESPONSES', {
+          instructions: problemStatement,
+          details,
+          responses: responsesString,
+          maxChars: RESPONSE_MAXIMUM_LENGTH,
+        });
+  }
+  return typeof details === 'undefined'
+    ? t('PROBLEM.SINGLE_RESPONSE_AND_PROVIDE_RESPONSES', {
+        instructions: problemStatement,
+        responses: responsesString,
+        maxChars: RESPONSE_MAXIMUM_LENGTH,
+      })
+    : t('PROBLEM.SINGLE_RESPONSE_WITH_DETAILS_AND_PROVIDE_RESPONSES', {
+        instructions: problemStatement,
+        details,
+        responses: responsesString,
+        maxChars: RESPONSE_MAXIMUM_LENGTH,
+      });
 };

src/hooks/useAssistants.ts

@@ -43,6 +43,8 @@ const useAssistants = (): UseAssistantsValues => {
     assistants,
     instructions,
   } = useSettings();
+
+  const { includeDetails, promptMode } = assistants;
   const { postAppDataAsync } = useAppDataContext();
 
   const { assistantsResponsesSets, round, allResponses, postResponse } =
@@ -157,12 +159,19 @@ const useAssistants = (): UseAssistantsValues => {
               instructions.title.content,
               responses,
               t,
+              includeDetails ? instructions.details?.content : undefined,
+              promptMode,
             ),
           );
         }
         return promptAssistant(
           persona,
-          promptForSingleResponse(instructions.title.content, t),
+          promptForSingleResponse(
+            instructions.title.content,
+            t,
+            includeDetails ? instructions.details?.content : undefined,
+            promptMode,
+          ),
         );
       })
       .map((promise) =>

src/interfaces/assistant.ts

@@ -23,3 +23,8 @@ export const makeEmptyAssistant = (id?: AssistantId): AssistantPersona => ({
   description: '',
   message: [],
 });
+
+export enum PromptMode {
+  Problem = 'problem',
+  Instructions = 'instructions',
+}

src/langs/en/main.json

@@ -95,6 +95,12 @@
     },
     "ASSISTANT": {
       "TITLE": "Assistants",
+      "USE_DETAILS": "Use instructions details when prompting assistants.",
+      "PROMPT_MODE_LABEL": "Select the prompting mode",
+      "PROMPT_MODE_ITEMS": {
+        "INSTRUCTIONS": "Instructions",
+        "PROBLEM": "Problem"
+      },
       "ADD": "Add an assistant",
       "EDIT_DIALOG": {
         "CHATBOT_NAME_LABEL": "Chatbot Name",

src/langs/en/prompts.json

@@ -1,6 +1,16 @@
 {
-  "SINGLE_RESPONSE": "We are given the following wicked problem:\n<problem>\n{{problemStatement}}\n</problem>\n\nGenerate a single solution to this challenge. Provide only the solution and limit it to {{maxChars}} characters.",
-  "SINGLE_RESPONSE_AND_PROVIDE_RESPONSES": "We are given the following problem:\n<problem>\n{{problemStatement}}\n</problem>\n\nSo far, your teammates have proposed the following solutions to this problem:\n{{responses}}\nGenerate a single, disruptive and out-of-the-box solution for this challenge. Your solution should challenge conventional thinking and differ from the solutions proposed by the other participants. Try to match the tone and style of the given solutions.\nProvide only the solution. Do not enclose it in XML tags or any other format. Limit it to {{maxChars}} characters.",
+  "PROBLEM": {
+    "SINGLE_RESPONSE": "We are given the following wicked problem:\n<problem>\n{{problemStatement}}\n</problem>\n\nGenerate a single solution to this challenge. Provide only the solution and limit it to {{maxChars}} characters.",
+    "SINGLE_RESPONSE_WITH_DETAILS": "We are given the following wicked problem:\n<problem>\n{{problemStatement}}\n</problem>\nAlong with it, the following details are provided:\n<details>\n{{details}}\n</details>\n\nGenerate a single solution to this challenge. Provide only the solution and limit it to {{maxChars}} characters.",
+    "SINGLE_RESPONSE_AND_PROVIDE_RESPONSES": "We are given the following problem:\n<problem>\n{{problemStatement}}\n</problem>\n\nSo far, your teammates have proposed the following solutions to this problem:\n{{responses}}\nGenerate a single, disruptive and out-of-the-box solution for this challenge. Your solution should challenge conventional thinking and differ from the solutions proposed by the other participants. Try to match the tone and style of the given solutions.\nProvide only the solution. Do not enclose it in XML tags or any other format. Limit it to {{maxChars}} characters.",
+    "SINGLE_RESPONSE_WITH_DETAILS_AND_PROVIDE_RESPONSES": "We are given the following problem:\n<problem>\n{{problemStatement}}\n</problem>\nAlong with it, the following details are provided:\n<details>{{details}}</details>\n\nSo far, your teammates have proposed the following solutions to this problem:\n{{responses}}\nGenerate a single, disruptive and out-of-the-box solution for this challenge. Your solution should challenge conventional thinking and differ from the solutions proposed by the other participants. Try to match the tone and style of the given solutions.\nProvide only the solution. Do not enclose it in XML tags or any other format. Limit it to {{maxChars}} characters."
+  },
+  "INSTRUCTIONS": {
+    "SINGLE_RESPONSE": "We are given the following instructions:\n{{instructions}}\n\nFollow these instructions and provide an answer. Provide only a single answer and limit it to {{maxChars}} characters.",
+    "SINGLE_RESPONSE_WITH_DETAILS": "We are given the following instructions:\n<instructions>\n{{instructions}}\n{{details}}\n</instructions>\n\nFollow these instructions and provide an answer. Provide only a single answer and limit it to {{maxChars}} characters.",
+    "SINGLE_RESPONSE_AND_PROVIDE_RESPONSES": "We are given the following instructions:\n<instructions>\n{{instructions}}\n</instructions>\n\nFollow these instructions and provide an answer. So far, your teammates have proposed the following answers to this problem:\n{{responses}}\nYour answer should differ from the answers proposed by the other participants. Try to match the tone and style of the given answers.\nProvide only a single answer. Do not enclose it in XML tags or any other format. Limit it to {{maxChars}} characters.",
+    "SINGLE_RESPONSE_WITH_DETAILS_AND_PROVIDE_RESPONSES": "We are given the following instructions:\n<instructions>\n{{instructions}}\n{{details}}\n</instructions>\n\nFollow these instructions and provide an answer. So far, your teammates have proposed the following answers to this problem:\n{{responses}}\nYour answer should differ from the answers proposed by the other participants. Try to match the tone and style of the given answers.\nProvide only a single answer. Do not enclose it in XML tags or any other format. Limit it to {{maxChars}} characters."
+  },
   "REFORMULATE": {
     "SYSTEM": "You are an helpful assistant. You will help in reformulating short text that the user will give you.",
     "USER_1": "I will give you a response. You need to reformulate it so that it has a neutral tone, is clearer and match the following problem:\n{{ problem }}\n\n{{ details }}The reformulated response must not exceed {{ maxChars }} characters. When answering, give me only the reformulated idea.",

src/langs/fr/prompts.json

@@ -1,6 +1,16 @@
 {
-  "SINGLE_RESPONSE": "We are given the following wicked problem:\n<problem>\n{{problemStatement}}\n</problem>\n\nGenerate a single solution to this challenge. Provide only the solution and limit it to {{maxChars}} characters.",
-  "SINGLE_RESPONSE_AND_PROVIDE_RESPONSES": "We are given the following problem:\n<problem>\n{{problemStatement}}\n</problem>\n\nSo far, your teammates have proposed the following solutions to this problem:\n{{responses}}\nGenerate a single, disruptive and out-of-the-box solution for this challenge. Your solution should challenge conventional thinking and differ from the solutions proposed by the other participants. Try to match the tone and style of the given solutions.\nProvide only the solution, not enclosed in any format (no XML tags), and limit it to {{maxChars}} characters.",
+  "PROBLEM": {
+    "SINGLE_RESPONSE": "Nous avons reçu le problème complexe suivant :\n<problem>\n{{problemStatement}}\n</problem>\n\nGénère une seule solution à ce défi. Fourni une seule solution et limite-toi à {{maxChars}} charactères.",
+    "SINGLE_RESPONSE_WITH_DETAILS": "Nous avons reçu le problème complexe suivant :\n<problem>\n{{problemStatement}}\n</problem>\nAvec ce problème, les détails suivants sont donnés :\n<details>\n{{details}}\n</details>\n\nGénère une seule solution à ce défi. Fourni une seule solution et limite-toi à {{maxChars}} charactères.",
+    "SINGLE_RESPONSE_AND_PROVIDE_RESPONSES": "Nous avons reçu le problème complexe suivant :\n<problem>\n{{problemStatement}}\n</problem>\n\nJusqu'à maintenant, vos co-équipiers ont proposé les solutions suivantes à ce problème :\n{{responses}}\nGénère une seule réponse disruptive et originale pour ce défi. Ta solution doit défier les modes de pensée conventionnels et être différente des solutions proposées par les autres participants. Essaie d'imiter le ton et le style des solutions déjà proposées.\n Fourni uniquement une seule solution. N'encapsule pas ta réponse dans des tags XML ou aucun autre format. Limite-toi à {{maxChars}} charactères.",
+    "SINGLE_RESPONSE_WITH_DETAILS_AND_PROVIDE_RESPONSES": "Nous avons reçu le problème complexe suivant :\n<problem>\n{{problemStatement}}\n</problem>\nAvec ce problème, les détails suivants sont donnés :\n<details>{{details}}</details>\n\nJusqu'à maintenant, vos co-équipiers ont proposé les solutions suivantes à ce problème :\n{{responses}}\nGénère une seule réponse disruptive et originale pour ce défi. Ta solution doit défier les modes de pensée conventionnels et être différente des solutions proposées par les autres participants. Essaie d'imiter le ton et le style des solutions déjà proposées.\n Fourni uniquement une seule solution. N'encapsule pas ta réponse dans des tags XML ou aucun autre format. Limite-toi à {{maxChars}} charactères."
+  },
+  "INSTRUCTIONS": {
+    "SINGLE_RESPONSE": "Nous avons reçu les instructions suivantes :\n{{instructions}}\n\nSuis ces instructions et fourni une réponse. Fourni une seule réponse et limite-toi à {{maxChars}} charactères.",
+    "SINGLE_RESPONSE_WITH_DETAILS": "Nous avons reçu les instructions suivantes :\n<instructions>\n{{instructions}}\n{{details}}\n</instructions>\n\nSuis ces instructions et fourni une réponse. Fourni une seule réponse et limite-toi à {{maxChars}} charactères.",
+    "SINGLE_RESPONSE_AND_PROVIDE_RESPONSES": "Nous avons reçu les instructions suivantes :\n<instructions>\n{{instructions}}\n</instructions>\n\nSuis ces instructions et fourni une réponse. Jusqu'à maintenant, vos co-équipiers ont proposé les réponses suivantes :\n{{responses}}\nTa réponse doit être différente des réponses des autres participants. Essaie d'imiter le ton et le style des solutions déjà proposées.\n Fourni uniquement une seule solution. N'encapsule pas ta réponse dans des tags XML ou aucun autre format. Limite-toi à {{maxChars}} charactères.",
+    "SINGLE_RESPONSE_WITH_DETAILS_AND_PROVIDE_RESPONSES": "Nous avons reçu les instructions suivantes :\n<instructions>\n{{instructions}}\n{{details}}\n</instructions>\n\nSuis ces instructions et fourni une réponse. Jusqu'à maintenant, vos co-équipiers ont proposé les réponses suivantes :\n{{responses}}\nTa réponse doit être différente des réponses des autres participants. Essaie d'imiter le ton et le style des solutions déjà proposées.\n Fourni uniquement une seule solution. N'encapsule pas ta réponse dans des tags XML ou aucun autre format. Limite-toi à {{maxChars}} charactères."
+  },
   "REFORMULATE": {
     "SYSTEM": "Tu es un assistant serviable. Tu vas aider à reformuler de court textes que l'utilisateur va te donner.",
     "USER_1": "Je vais te donner une réponse. Tu dois la reformuler pour que cette dernière aie un ton neutre, soit plus clair et corresponde au problème suivant:\n{{ problem }}\n\n{{ details }}\nLa réponse reformulée ne dois pas dépasser {{ maxChars }} charactères. Donne moi uniquement la réponse reformulée.",

src/modules/orchestration/StepsButton.tsx

@@ -10,6 +10,8 @@ import LinearProgress from '@mui/material/LinearProgress';
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 import useSteps from '@/hooks/useSteps';
+import Collapse from '@mui/material/Collapse';
+import CircularProgress from '@mui/material/CircularProgress';
 import CommandButton from './CommandButton';
 import WarningPreviousStepDialog from './WarningPreviousStepDialog';
 import useStepTimer from '../common/stepTimer/useStepTimer';
@@ -127,6 +129,9 @@ const StepsButton: FC<StepsButtonProps> = ({ enable }) => {
           {t('NEXT_STEP')}
         </CommandButton>
       </Tooltip>
+      <Collapse in={isChangingStep}>
+        <CircularProgress />
+      </Collapse>
       <WarningPreviousStepDialog
         open={openWarningPreviousStepDialog}
         onConfirm={goToPreviousStep}

src/modules/settings/assistant/Assistant.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { ChangeEvent, FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Button from '@mui/material/Button';
@@ -8,11 +8,22 @@ import cloneDeep from 'lodash.clonedeep';
 import { v4 as uuidv4 } from 'uuid';
 
 import { AssistantsSetting } from '@/config/appSettingsType';
-import { AssistantPersona, makeEmptyAssistant } from '@/interfaces/assistant';
+import {
+  AssistantPersona,
+  PromptMode,
+  makeEmptyAssistant,
+} from '@/interfaces/assistant';
 import SectionTitle from '@/modules/adminPanel/SectionTitle';
 
-import AssistantCard from './AssistantCard';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
 import AssistantDialog from './AssistantDialog';
+import AssistantCard from './AssistantCard';
 
 interface AssistantProps {
   assistants: AssistantsSetting;
@@ -27,7 +38,24 @@ const Assistant: FC<AssistantProps> = ({
     keyPrefix: 'SETTINGS.ASSISTANT',
   });
   const [editedAssistant, setEditedAssistant] = useState<AssistantPersona>();
-  const { assistants } = assistantsSetting;
+  const { assistants, includeDetails, promptMode } = assistantsSetting;
+
+  const handleIncludeDetailsChange = (
+    _e: ChangeEvent<HTMLInputElement>,
+    checked: boolean,
+  ): void => {
+    onChange({
+      ...assistantsSetting,
+      includeDetails: checked,
+    });
+  };
+
+  const handlePromptModeChange = (e: SelectChangeEvent): void => {
+    onChange({
+      ...assistantsSetting,
+      promptMode: e.target.value as PromptMode,
+    });
+  };
 
   const handleSave = (newAssistant: AssistantPersona): void => {
     const newAssistants = cloneDeep(assistants);
@@ -38,6 +66,7 @@ const Assistant: FC<AssistantProps> = ({
       newAssistants[index] = newAssistant;
     }
     onChange({
+      ...assistantsSetting,
       assistants: newAssistants,
     });
     setEditedAssistant(undefined);
@@ -58,6 +87,34 @@ const Assistant: FC<AssistantProps> = ({
   return (
     <>
       <SectionTitle>{t('TITLE')}</SectionTitle>
+      <FormGroup>
+        <FormControlLabel
+          control={
+            <Switch
+              checked={includeDetails}
+              onChange={handleIncludeDetailsChange}
+            />
+          }
+          label={t('USE_DETAILS')}
+        />
+      </FormGroup>
+      <FormControl>
+        <InputLabel id="prompt-mode-label">{t('PROMPT_MODE_LABEL')}</InputLabel>
+        <Select
+          labelId="demo-simple-select-label"
+          id="demo-simple-select"
+          value={promptMode}
+          label={t('PROMPT_MODE_LABEL')}
+          onChange={handlePromptModeChange}
+        >
+          <MenuItem value={PromptMode.Instructions}>
+            {t('PROMPT_MODE_ITEMS.INSTRUCTIONS')}
+          </MenuItem>
+          <MenuItem value={PromptMode.Problem}>
+            {t('PROMPT_MODE_ITEMS.PROBLEM')}
+          </MenuItem>
+        </Select>
+      </FormControl>
       <Grid container spacing={1}>
         {assistants.map((persona) => (
           <Grid key={persona.id} item>