feat: conserve text keyword case in keyword or chatbot views (#114)

* test: add tests to validate the keywords
- checks that only complete words are matched
- checks that matching keywords is case insensitive
- checks that the clicked keyword conserve its case in keyword info view

Author: ReidyT

cypress/e2e/builder/enterSettings.cy.ts

@@ -16,6 +16,7 @@ import {
   TITLE_INPUT_FIELD_CY,
   USE_CHATBOT_DATA_CY,
   buildDataCy,
+  buildKeywordNotExistWarningCy,
 } from '../../../src/config/selectors';
 import {
   MOCK_APP_SETTINGS,
@@ -102,6 +103,55 @@ describe('Enter Settings', () => {
     cy.get(buildDataCy(KEYWORD_LIST_ITEM_CY)).should('not.exist');
   });
 
+  // Detected incomplete keywords in the text.
+  // 'wef' was found incomplete in 'wefwef hello'.
+  // Check that only complete words are detected in text.
+  it('only detect complete keywords', () => {
+    const PRBLEMATIC_TEXT = 'wefwef hello';
+    const PROBLEMATIC_KEYWORDS = ['wef', 'he'];
+
+    cy.get(buildDataCy(TEXT_INPUT_FIELD_CY))
+      .should('be.visible')
+      .type(PRBLEMATIC_TEXT);
+
+    PROBLEMATIC_KEYWORDS.forEach((k) => {
+      cy.get(buildDataCy(ENTER_KEYWORD_FIELD_CY)).should('be.visible').type(k);
+
+      cy.get(buildDataCy(ADD_KEYWORD_BUTTON_CY))
+        .should('be.visible')
+        .should('not.be.disabled')
+        .click()
+        .should('be.disabled');
+
+      cy.get(buildDataCy(buildKeywordNotExistWarningCy(k))).should(
+        'be.visible',
+      );
+    });
+
+    cy.get(buildDataCy(SETTINGS_SAVE_BUTTON_CY)).should('be.disabled');
+  });
+
+  it('detect keywords case insensitive', () => {
+    const TEXT = 'hello this is a Test';
+    const KEYWORDS = ['Hello', 'test'];
+
+    cy.get(buildDataCy(TEXT_INPUT_FIELD_CY)).should('be.visible').type(TEXT);
+
+    KEYWORDS.forEach((k) => {
+      cy.get(buildDataCy(ENTER_KEYWORD_FIELD_CY)).should('be.visible').type(k);
+
+      cy.get(buildDataCy(ADD_KEYWORD_BUTTON_CY))
+        .should('be.visible')
+        .should('not.be.disabled')
+        .click()
+        .should('be.disabled');
+
+      cy.get(buildDataCy(buildKeywordNotExistWarningCy(k))).should('not.exist');
+    });
+
+    cy.get(buildDataCy(SETTINGS_SAVE_BUTTON_CY)).should('be.disabled');
+  });
+
   it('does not use chatbot (by default)', () => {
     cy.get(buildDataCy(USE_CHATBOT_DATA_CY)).should('not.be.checked');
     cy.get(buildDataCy(CHATBOT_CONTAINER_CY)).should('not.exist');

cypress/e2e/player/read/showApp.cy.ts

@@ -3,15 +3,19 @@ import { Context, PermissionLevel } from '@graasp/sdk';
 import { DEFAULT_TEXT_RESOURCE_SETTING } from '../../../../src/config/appSettings';
 import {
   BANNER_CY,
+  CHATBOT_MODE_CY,
+  DICTIONNARY_MODE_CY,
   PLAYER_VIEW_CY,
   SHOW_KEYWORDS_BUTTON_CY,
   TEXT_DISPLAY_FIELD_CY,
   buildAllKeywordsButtonDataCy,
   buildDataCy,
+  keywordDataCy,
 } from '../../../../src/config/selectors';
 import {
   MOCK_APP_SETTINGS,
   MOCK_TEXT_RESOURCE,
+  buildMock,
 } from '../../../fixtures/appSettings';
 
 describe('Empty App Settings', () => {
@@ -88,3 +92,128 @@ describe('With App Setting', () => {
     );
   });
 });
+
+describe('Check incomplete keywords and case insensitive', () => {
+  const TEXT = 'wefwef hello Test';
+  const KEYWORD_INSENSITIVE = { word: 'test', def: '' };
+  const INCOMPLETE_KEYWORDS = [
+    { word: 'wef', def: '' },
+    { word: 'he', def: '' },
+  ];
+  const KEYWORDS = [KEYWORD_INSENSITIVE, ...INCOMPLETE_KEYWORDS];
+
+  beforeEach(() => {
+    cy.setUpApi({
+      database: {
+        appData: [],
+        appSettings: buildMock(TEXT, KEYWORDS),
+      },
+      appContext: {
+        context: Context.Player,
+        permission: PermissionLevel.Read,
+      },
+    });
+    cy.visit('/');
+  });
+
+  it('show keywords case insensitive', () => {
+    // check that the show keywords button is visible and active
+    cy.get(buildDataCy(SHOW_KEYWORDS_BUTTON_CY))
+      .should('be.visible')
+      .and('not.be.disabled')
+      .click();
+
+    cy.get(buildDataCy(keywordDataCy(KEYWORD_INSENSITIVE.word))).should(
+      'be.visible',
+    );
+  });
+
+  it('incomplete words should not match as prefix in the text', () => {
+    // check that the show keywords button is visible and active
+    cy.get(buildDataCy(SHOW_KEYWORDS_BUTTON_CY))
+      .should('be.visible')
+      .and('not.be.disabled')
+      .click();
+
+    INCOMPLETE_KEYWORDS.forEach((k) => {
+      cy.get(buildDataCy(keywordDataCy(k.word))).should('not.exist');
+    });
+  });
+});
+
+describe('Keywords should keep same case as in the text', () => {
+  const WORD_CAPITALIZE = 'Test';
+  const WORD_LOWER = 'docker';
+  const TEXT = `${WORD_CAPITALIZE} ${WORD_LOWER}`;
+  const KEYWORDS = [
+    { word: WORD_CAPITALIZE.toLowerCase(), def: '' },
+    { word: WORD_LOWER, def: '' },
+  ];
+
+  const capitalize = (word: string): string =>
+    word.slice(0, 1).toUpperCase() + word.slice(1);
+
+  const validateKeywordCase = (
+    dataCy: string,
+    textWord: string,
+    isLowerCase: boolean,
+  ): void => {
+    // Because we use the word displayed in the text, it should be lowercase for keywordDataCy.
+    cy.get(buildDataCy(keywordDataCy(textWord.toLowerCase()))).click();
+    cy.get(buildDataCy(dataCy)).should(
+      'contain',
+      isLowerCase ? textWord.toLowerCase() : textWord,
+    );
+    // This one is just to check that contain is case sensitive.
+    cy.get(buildDataCy(dataCy)).should(
+      'not.contain',
+      isLowerCase ? capitalize(textWord) : textWord.toLowerCase(),
+    );
+  };
+
+  it('display keyword case as in text in keyword mode', () => {
+    cy.setUpApi({
+      database: {
+        appData: [],
+        appSettings: buildMock(TEXT, KEYWORDS),
+      },
+      appContext: {
+        context: Context.Player,
+        permission: PermissionLevel.Read,
+      },
+    });
+    cy.visit('/');
+
+    // check that the show keywords button is visible and active
+    cy.get(buildDataCy(SHOW_KEYWORDS_BUTTON_CY))
+      .should('be.visible')
+      .and('not.be.disabled')
+      .click();
+
+    validateKeywordCase(DICTIONNARY_MODE_CY, WORD_CAPITALIZE, false);
+    validateKeywordCase(DICTIONNARY_MODE_CY, WORD_LOWER, true);
+  });
+
+  it('display keyword case as in text in chatbot mode', () => {
+    cy.setUpApi({
+      database: {
+        appData: [],
+        appSettings: buildMock(TEXT, KEYWORDS, true),
+      },
+      appContext: {
+        context: Context.Player,
+        permission: PermissionLevel.Read,
+      },
+    });
+    cy.visit('/');
+
+    // check that the show keywords button is visible and active
+    cy.get(buildDataCy(SHOW_KEYWORDS_BUTTON_CY))
+      .should('be.visible')
+      .and('not.be.disabled')
+      .click();
+
+    validateKeywordCase(CHATBOT_MODE_CY, WORD_CAPITALIZE, false);
+    validateKeywordCase(CHATBOT_MODE_CY, WORD_LOWER, true);
+  });
+});

cypress/fixtures/appSettings.ts

@@ -89,3 +89,13 @@ export const MOCK_APP_SETTINGS_USING_CHATBOT = [
   ...MOCK_APP_SETTINGS,
   MOCK_USE_CHATBOT_SETTING,
 ];
+
+export const buildMock = (
+  text: string,
+  keywords: Keyword[],
+  useChatbot = false,
+): AppSetting[] => [
+  { ...MOCK_TEXT_RESOURCE_SETTING, data: { text } },
+  { ...MOCK_KEYWORDS_SETTING, data: { keywords } },
+  ...(useChatbot ? [MOCK_USE_CHATBOT_SETTING] : []),
+];

src/components/common/chat/ChatBox.tsx

@@ -13,10 +13,12 @@ import {
 import { Alert, Box, Stack, styled } from '@mui/material';
 
 import { TEXT_ANALYSIS } from '@/langs/constants';
+import { replaceWordCaseInsensitive } from '@/utils/keywords';
 
 import { APP_DATA_TYPES, ChatAppData } from '../../../config/appDataTypes';
 import {
   INITIAL_PROMPT_SETTING_KEY,
+  KeywordWithLabel,
   TextResourceData,
 } from '../../../config/appSettingTypes';
 import { DEFAULT_INITIAL_PROMPT } from '../../../config/appSettings';
@@ -71,7 +73,7 @@ const StyledReactMarkdown = styled(ReactMarkdown)(({ theme }) => ({
   },
 }));
 
-type Prop = { focusWord: string; isOpen: boolean };
+type Prop = { focusWord: KeywordWithLabel; isOpen: boolean };
 
 const ChatBox: FC<Prop> = ({ focusWord, isOpen }) => {
   const { t } = useTranslation();
@@ -87,21 +89,21 @@ const ChatBox: FC<Prop> = ({ focusWord, isOpen }) => {
   const initialPrompt = (
     (appSettingArray.find((s) => s.name === INITIAL_PROMPT_SETTING_KEY)?.data ||
       DEFAULT_INITIAL_PROMPT) as TextResourceData
-  ).text.replaceAll('{{keyword}}', focusWord);
+  ).text.replaceAll('{{keyword}}', focusWord.label);
 
   const chatAppData = appDataArray
     .filter(
       (data) =>
         (data.type === APP_DATA_TYPES.BOT_COMMENT ||
           data.type === APP_DATA_TYPES.STUDENT_COMMENT) &&
-        data.data.keyword === focusWord,
+        data.data.keyword === focusWord.word,
     )
     .sort((a, b) => (a.createdAt > b.createdAt ? 1 : -1)) as ChatAppData[];
 
   const onSend = (input: string): void => {
     if (input.trim() !== '') {
       postAppDataAsync({
-        data: { message: input, keyword: focusWord },
+        data: { message: input, keyword: focusWord.word },
         type: APP_DATA_TYPES.STUDENT_COMMENT,
       })?.then(() => {
         const thread: ChatbotThreadMessage[] = chatAppData.map((data) => ({
@@ -116,7 +118,7 @@ const ChatBox: FC<Prop> = ({ focusWord, isOpen }) => {
 
         const appData = {
           message: t(TEXT_ANALYSIS.CHAT_BOT_ERROR_MESSAGE),
-          keyword: focusWord,
+          keyword: focusWord.word,
         };
 
         postChatBot(prompt)
@@ -143,7 +145,7 @@ const ChatBox: FC<Prop> = ({ focusWord, isOpen }) => {
       <InputBar onSend={(input) => onSend(input)} />
     );
 
-  const renderedMesssages = chatAppData.map((msg) =>
+  const renderedMesssages = chatAppData.map((msg, idx) =>
     msg.type === APP_DATA_TYPES.STUDENT_COMMENT ? (
       <UserBox data-cy={messagesDataCy(msg.id)} key={msg.id} initial={initial}>
         <StyledUserMessage key={msg.id} alignSelf="flex-end">
@@ -155,9 +157,19 @@ const ChatBox: FC<Prop> = ({ focusWord, isOpen }) => {
         <StyledBotMessage
           key={msg.id}
           alignSelf="flex-start"
-          wordLowerCase={focusWord.toLowerCase()}
+          wordLowerCase={focusWord.word.toLowerCase()}
         >
-          <StyledReactMarkdown>{msg.data.message}</StyledReactMarkdown>
+          <StyledReactMarkdown>
+            {/* If it is the first chatbot message, replace all keywords by the label, to keep case as in the text. */}
+            {/* It is replaced here too, to handle AppData with keyword in lower case. */}
+            {idx === 0
+              ? replaceWordCaseInsensitive(
+                  msg.data.message,
+                  focusWord.word,
+                  focusWord.label,
+                )
+              : msg.data.message}
+          </StyledReactMarkdown>
         </StyledBotMessage>
       </ChatbotBox>
     ),
@@ -192,7 +204,7 @@ const ChatBox: FC<Prop> = ({ focusWord, isOpen }) => {
           <ChatbotBox>
             <StyledBotMessage
               alignSelf="flex-start"
-              wordLowerCase={focusWord.toLowerCase()}
+              wordLowerCase={focusWord.word.toLowerCase()}
             >
               ...
             </StyledBotMessage>

src/components/common/chat/ChatbotWindow.tsx

@@ -4,7 +4,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { Box, IconButton, Tooltip, Typography } from '@mui/material';
 
-import { Keyword } from '../../../config/appSettingTypes';
+import { KeywordWithLabel } from '../../../config/appSettingTypes';
 import { CHAT_WINDOW_CY, DICTIONNARY_MODE_CY } from '../../../config/selectors';
 import {
   DEFAULT_BORDER_RADIUS,
@@ -16,7 +16,7 @@ import ChatBox from './ChatBox';
 
 type Prop = {
   closeChatbot: () => void;
-  focusWord: Keyword;
+  focusWord: KeywordWithLabel;
   useChatbot: boolean;
   isOpen: boolean;
   onDelete: () => void;
@@ -30,15 +30,15 @@ const ChatbotWindow: FC<Prop> = ({
   onDelete,
 }) => {
   const renderWindow = useChatbot ? (
-    <ChatBox focusWord={focusWord.word} isOpen={isOpen} />
+    <ChatBox focusWord={focusWord} isOpen={isOpen} />
   ) : (
     <Typography
       data-cy={DICTIONNARY_MODE_CY}
       margin={DEFAULT_MARGIN}
       marginTop="0px"
       sx={{ flex: 2 }}
     >
-      <strong>{focusWord.word}: </strong>
+      <strong>{focusWord.label}: </strong>
       {focusWord.def}
     </Typography>
   );

src/components/common/display/Highlighted.tsx

@@ -7,15 +7,15 @@ import { styled } from '@mui/material';
 
 import { isKeywordPresent } from '@/utils/keywords';
 
-import { Keyword } from '../../../config/appSettingTypes';
+import { Keyword, KeywordWithLabel } from '../../../config/appSettingTypes';
 import { DEFAULT_KEYWORD } from '../../../config/appSettings';
 import KeywordButton from './KeywordButton';
 
 type Prop = {
   text: string;
   words: Keyword[];
   highlight: boolean;
-  openChatbot: (word: Keyword) => void;
+  openChatbot: (word: KeywordWithLabel) => void;
 };
 
 const StyledReactMarkdown = styled(ReactMarkdown)(({ theme }) => ({