test: add tests

Author: kim

cypress/e2e/builder/main.cy.ts

@@ -14,6 +14,10 @@ const PROMPT_TEXT_AREA = '[name="Chatbot Prompt"]';
 const CUE_TEXT_AREA = '[name="Conversation Starter"]';
 const CHATBOT_NAME_INPUT = '[name="Chatbot Name"]';
 
+const ADD_STARTER_SUGGESTION_BUTTON = '[title="Add starter suggestion"]';
+const buildStarterSuggestionInput = (idx: number) =>
+  `[name="Starter suggestion number ${idx}"]`;
+
 describe('Builder View', () => {
   it('Results table', () => {
     cy.setUpApi(
@@ -109,4 +113,63 @@ describe('Builder View', () => {
       .should('not.contain', 'The conversation starter is empty')
       .should('contain', cue);
   });
+
+  it('Show starter suggestions and edit', () => {
+    cy.setUpApi(
+      { appSettings: [] },
+      {
+        context: Context.Builder,
+        permission: PermissionLevel.Admin,
+      },
+    );
+    cy.visit('/');
+
+    cy.get(buildDataCy(TAB_SETTINGS_VIEW_CYPRESS)).click();
+
+    cy.get(EDIT_SETTINGS_BUTTON).click();
+
+    // change prompt
+    const prompt = 'my new prompt';
+    cy.get(PROMPT_TEXT_AREA).clear().type(prompt);
+
+    const newSuggestions = ['Hello', 'Hello1', 'Hello2'];
+
+    // add suggestions
+    newSuggestions.forEach((s, idx) => {
+      cy.get(ADD_STARTER_SUGGESTION_BUTTON).click();
+      cy.get(buildStarterSuggestionInput(idx)).type(s);
+    });
+
+    cy.get(SAVE_SETTINGS_BUTTON).click();
+
+    // show starter suggestions
+    for (const s of newSuggestions) {
+      cy.get(`li:contains('${s}')`).should('be.visible');
+    }
+
+    cy.wait(1000);
+    cy.get(EDIT_SETTINGS_BUTTON).click();
+
+    // edit suggestions
+    const editedSuggestions = ['newHello0', 'newHello1', 'newHello2'];
+    editedSuggestions.forEach((s, idx) => {
+      cy.get(buildStarterSuggestionInput(idx)).clear().type(s);
+    });
+
+    // delete second suggestion
+    cy.get(`[title="Delete suggestion number 1"]`).click();
+
+    // expect remaining suggestions
+    const remainingSuggestions = [editedSuggestions[0], editedSuggestions[2]];
+    for (const s of remainingSuggestions) {
+      cy.get(`[value="${s}"]`).should('be.visible');
+    }
+
+    cy.get(SAVE_SETTINGS_BUTTON).click();
+
+    // show starter suggestions
+    for (const s of remainingSuggestions) {
+      cy.get(`li:contains('${s}')`).should('be.visible');
+    }
+  });
 });

cypress/e2e/player/main.cy.ts

@@ -138,4 +138,36 @@ describe('Player View', () => {
     cy.get('#root').should('contain', 'November 18, 2024');
     cy.get('#root').should('contain', 'November 18, 2025');
   });
+
+  it.only('Use a starter suggestion', () => {
+    cy.setUpApi(
+      {
+        appData: [],
+        appSettings: [MOCK_APP_SETTING],
+      },
+      {
+        context: Context.Player,
+        permission: PermissionLevel.Write,
+      },
+    );
+    cy.visit('/');
+
+    const suggestion = MOCK_APP_SETTING.data.starterSuggestions[0];
+    // click suggestion
+    cy.get(`button:contains("${suggestion}")`).click();
+
+    // expect user message
+    cy.get(buildDataCy(buildCommentContainerDataCy('2'))).should(
+      'contain',
+      suggestion,
+    );
+
+    // expect chatbot message
+    cy.get(buildDataCy(buildCommentContainerDataCy('3'))).should(
+      'contain',
+      'i am a bot', // default return value of the mocked chatbot
+    );
+
+    cy.get(`button:contains("${suggestion}")`).should('not.be.visible');
+  });
 });

cypress/fixtures/mockSettings.ts

@@ -12,5 +12,6 @@ export const MOCK_APP_SETTING = {
     chatbotCue: 'cue',
     chatbotName: 'name',
     initialPrompt: 'prompt',
+    starterSuggestions: ['Can you spell it for me?', 'Can you explain this?'],
   },
 };

src/config/appActions.ts

@@ -6,4 +6,5 @@ export const AppActionsType = {
   Reply: 'reply_comment',
   // chatbot actions
   AskChatbot: 'ask_chatbot',
+  UseStarter: 'use_starter',
 } as const;

src/langs/en.json

@@ -29,12 +29,14 @@
     "CHATBOT_PROMPT_HELPER_LABEL": "In-depth technical description",
     "CHATBOT_PROMPT_HELPER": "This defines the chatbot's personality and how it should behave.",
     "CHATBOT_PROMPT_FORMAT_HELPER": "To describe the initial situation, create an object at the start of the array with 2 keys: 'role' and 'content'. For the initial description the role must be 'system'. Place your description of the initial situation in the 'content' key. Add interaction examples after that. Add one object per message with the role corresponding to either 'assistant' or 'user'.",
+    "CHATBOT_STARTER_SUGGESTIONS_LABEL": "Starter Suggestions",
+    "CHATBOT_STARTER_SUGGESTIONS_EMPTY_MESSAGE": "-",
     "CHATBOT_PROMPT_FORMAT_EXAMPLE": "Here is an example",
     "CHATBOT_PROMPT_API_REFERENCE": "See the API reference",
     "CHATBOT_CUE_LABEL": "Conversation Starter",
     "CHATBOT_STARTER_SUGGESTION_LABEL": "Starter Suggestions",
     "CHATBOT_CUE_HELPER": "This defines the content of the first message of the chatbot. You can change it to better orient the conversation.",
-    "CHATBOT_CUE_EMPTY_MESSAGE": "The conversation starter is empty.",
+    "CHATBOT_CUE_EMPTY_MESSAGE": "-",
     "SAVE_LABEL": "Save",
     "SAVED_LABEL": "Saved",
     "GENERAL_SETTING_TITLE": "General",
@@ -66,6 +68,12 @@
     "CLOSE": "Close",
     "SIGN_OUT_ALERT": "You should be signed in to interact with the chatbot",
     "ANALYTICS_CONVERSATION_MEMBER": "Conversation",
-    "CHATBOT_STARTER_SUGGESTION_HELPER": "This defines suggested messages the user can send at the beginning of the conversation to the chatbot. You can change it to give ideas of interactions."
+    "CHATBOT_STARTER_SUGGESTION_HELPER": "This defines suggested messages the user can send at the beginning of the conversation to the chatbot. You can change it to give ideas of interactions.",
+    "ADD_STARTER_SUGGESTION_BUTTON": "Add",
+    "ADD_STARTER_SUGGESTION_BUTTON_TITLE": "Add starter suggestion",
+    "STARTER_SUGGESTION_NAME": "Starter suggestion number {{nb}}",
+    "DELETE_STARTER_SUGGESTION_BUTTON_TITLE": "Delete suggestion number {{nb}}",
+    "STARTER_SUGGESTION_PLACEHOLDER": "Write a suggestion here",
+    "STARTER_SUGGESTION_PLAYER_BUTTON_ARIA_LABEL": "Ask {{suggestion}}"
   }
 }

src/modules/common/CommentEditor.tsx

@@ -87,7 +87,7 @@ function CommentEditor({
           value={text}
           onChange={handleTextChange}
           role="textbox"
-          disabled={sendMessageLoading || askChatbotLoading}
+          disabled={isLoading}
           // use default font instead of textarea's monospace font
           style={{ fontFamily: 'unset' }}
         />

src/modules/common/Suggestions.tsx

@@ -1,28 +1,56 @@
+import { useTranslation } from 'react-i18next';
+
 import { Button, Stack, styled } from '@mui/material';
 
+import { AppActionsType } from '@/config/appActions';
 import { ChatbotPromptSettings } from '@/config/appSetting';
+import { mutations } from '@/config/queryClient';
+import { showErrorToast } from '@/utils/toast';
 
 import { useSendMessageAndAskChatbot } from './useSendMessageAndAskChatbot';
 
-const StyledButton = styled(Button)(({ theme }) => ({
+const StyledButton = styled(Button)({
   borderRadius: 100,
   textTransform: 'unset',
-}));
+});
 
 export function Suggestions({
   suggestions,
   chatbotPrompt,
-}: {
+}: Readonly<{
   chatbotPrompt: ChatbotPromptSettings;
   suggestions: string[];
-}) {
+}>) {
+  const { t } = useTranslation();
+  const { mutateAsync: postAction } = mutations.usePostAppAction();
   const { send } = useSendMessageAndAskChatbot({ chatbotPrompt });
 
+  const onClick = async (suggestion: string) => {
+    try {
+      await send(suggestion);
+      await postAction({
+        type: AppActionsType.UseStarter,
+        data: { value: suggestion },
+      });
+    } catch (e: unknown) {
+      if (e instanceof Error) {
+        showErrorToast(e.message);
+      }
+      console.error(e);
+    }
+  };
+
   return (
     <Stack direction="row" gap={2} justifyContent="right">
       {suggestions.map((s) => (
         <span key={s}>
-          <StyledButton onClick={() => send(s)} variant="contained">
+          <StyledButton
+            aria-label={t('STARTER_SUGGESTION_PLAYER_BUTTON_ARIA_LABEL', {
+              suggestion: s,
+            })}
+            onClick={() => onClick(s)}
+            variant="contained"
+          >
             {s}
           </StyledButton>
         </span>

src/modules/settings/ChatbotSettings.tsx

@@ -10,6 +10,7 @@ import {
   Grid2,
   Stack,
   Typography,
+  useTheme,
 } from '@mui/material';
 
 import { Edit, Undo2 } from 'lucide-react';
@@ -69,6 +70,7 @@ const useChatbotSetting = () => {
 };
 
 function ChatbotSettings() {
+  const theme = useTheme();
   const { t } = useTranslation();
 
   const {
@@ -196,6 +198,29 @@ function ChatbotSettings() {
                   </Typography>
                 )}
               </Grid2>
+
+              <Grid2 size={{ xs: 12, sm: 4 }}>
+                <FormLabel sx={{ fontWeight: 'bold' }}>
+                  {t('CHATBOT_STARTER_SUGGESTIONS_LABEL')}
+                </FormLabel>
+              </Grid2>
+              <Grid2 size={{ xs: 12, sm: 8 }}>
+                {starterSuggestions.length ? (
+                  <ul
+                    style={{ marginBlock: 0, paddingInline: theme.spacing(2) }}
+                  >
+                    {starterSuggestions.map((s) => (
+                      <Typography key={s} variant="body1" component="li">
+                        {s}
+                      </Typography>
+                    ))}
+                  </ul>
+                ) : (
+                  <Typography color="text.disabled" fontStyle="italic">
+                    {t('CHATBOT_STARTER_SUGGESTIONS_EMPTY_MESSAGE')}
+                  </Typography>
+                )}
+              </Grid2>
             </Grid2>
           </CardContent>
         </Card>

src/modules/settings/chatbot/StarterSuggestions.tsx

@@ -1,3 +1,5 @@
+import { useTranslation } from 'react-i18next';
+
 import { Button, IconButton, Stack, TextField } from '@mui/material';
 
 import { PlusIcon, TrashIcon } from 'lucide-react';
@@ -11,10 +13,12 @@ function StarterSuggestions({
   starterSuggestions: InternalSuggestion[];
   onChange: (args: InternalSuggestion[]) => void;
 }>) {
+  const { t } = useTranslation();
+
   const add = () => {
     // increase id based on last one
     // this works as long as we don't reorder
-    const lastId = starterSuggestions.at(-1)?.id ?? 0;
+    const lastId = starterSuggestions.at(-1)?.id ?? -1;
     onChange([
       ...starterSuggestions,
       {
@@ -43,18 +47,28 @@ function StarterSuggestions({
           <TextField
             size="small"
             fullWidth
-            placeholder="Write a suggestion here"
+            placeholder={t('STARTER_SUGGESTION_PLACEHOLDER')}
             defaultValue={value}
             onChange={(e) => edit(e.target.value, id)}
+            name={t('STARTER_SUGGESTION_NAME', { nb: id })}
           />
-          <IconButton color="error" onClick={() => remove(id)}>
+          <IconButton
+            title={t('DELETE_STARTER_SUGGESTION_BUTTON_TITLE', { nb: id })}
+            color="error"
+            onClick={() => remove(id)}
+          >
             <TrashIcon />
           </IconButton>
         </Stack>
       ))}
       <span>
-        <Button startIcon={<PlusIcon />} color="primary" onClick={add}>
-          Add
+        <Button
+          startIcon={<PlusIcon />}
+          color="primary"
+          onClick={add}
+          title={t('ADD_STARTER_SUGGESTION_BUTTON_TITLE')}
+        >
+          {t('ADD_STARTER_SUGGESTION_BUTTON')}
         </Button>
       </span>
     </Stack>