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,66 @@ describe('Builder View', () => {
       .should('not.contain', 'The cue 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();
+
+    // show no starter suggestions
+    // TODO
+
+    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(buildDataCy(CHATBOT_SETTINGS_SUMMARY_CY)).should('contain', s);
+    // }
+
+    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(buildDataCy(CHATBOT_SETTINGS_SUMMARY_CY)).should('contain', s);
+    // }
+  });
 });

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

@@ -14,5 +14,6 @@ export const MOCK_APP_SETTING = {
     chatbotCue: 'cue',
     chatbotName: 'name',
     initialPrompt: [{ role: ChatbotRole.Assistant, content: '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

@@ -66,6 +66,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/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/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>