feat: update player view

.github/workflows/build.yml

@@ -20,5 +20,6 @@ jobs:
       - name: Build
         run: yarn build
 
-      - name: Unit Tests
-        run: yarn vitest
+      # enable again when we have unit tests
+      # - name: Unit Tests
+      #   run: yarn vitest

cypress/e2e/analytics/main.cy.ts

@@ -7,7 +7,6 @@ import {
   ANALYTICS_VIEW_CY,
   ANALYTICS_WORDS_CLOUD_MODAL_ID,
   KEYWORD_CHIP_COUNT_ID,
-  PLAYER_VIEW_CY,
   buildCheckWholeMemberChatButtonId,
   buildDataCy,
   buildKeywordChipId,
@@ -72,7 +71,14 @@ describe('Analytics View', () => {
       cy.get(
         `#${buildCheckWholeMemberChatButtonId(actions[0]?.account?.id)}`,
       ).click();
-      cy.get(buildDataCy(PLAYER_VIEW_CY)).should('be.visible');
+
+      // show conversation
+      cy.get('[role="dialog"]')
+        .should('contain', MOCK_APP_SETTING.data.chatbotCue)
+        .should('contain', MOCK_APP_SETTING.data.chatbotName);
+
+      // do not show textbox
+      cy.get('[role="textbox"]').should('not.exist');
     });
   });
 });

cypress/e2e/player/main.cy.ts

@@ -1,7 +1,6 @@
 import { AppDataVisibility, Context, PermissionLevel } from '@graasp/sdk';
 
 import {
-  PLAYER_VIEW_CY,
   buildCommentContainerDataCy,
   buildDataCy,
 } from '../../../src/config/selectors';
@@ -24,7 +23,7 @@ const defaultAppData = [
 ];
 
 describe('Player View', () => {
-  beforeEach(() => {
+  it('Show messages and write a new one', () => {
     cy.setUpApi(
       {
         appData: defaultAppData,
@@ -36,10 +35,6 @@ describe('Player View', () => {
       },
     );
     cy.visit('/');
-  });
-
-  it('Show messages and write a new one', () => {
-    cy.get(buildDataCy(PLAYER_VIEW_CY)).should('be.visible');
 
     // expect previously saved app data
     const previousAppData = defaultAppData[0];
@@ -65,4 +60,82 @@ describe('Player View', () => {
       'i am a bot', // default return value of the mocked chatbot
     );
   });
+
+  it('Show cue and write a message', () => {
+    cy.setUpApi(
+      {
+        appData: [],
+        appSettings: [MOCK_APP_SETTING],
+      },
+      {
+        context: Context.Player,
+        permission: PermissionLevel.Write,
+      },
+    );
+    cy.visit('/');
+
+    // expect cue
+    cy.get(buildDataCy(buildCommentContainerDataCy('cue'))).should(
+      'contain',
+      MOCK_APP_SETTING.data.chatbotCue,
+    );
+
+    // type and send message
+    const message = 'My message';
+    cy.get('[role="textbox"]').type(message);
+    cy.get('[name="send"]').click();
+
+    // expect user message
+    cy.get(buildDataCy(buildCommentContainerDataCy('2'))).should(
+      'contain',
+      message,
+    );
+
+    // expect chatbot message
+    cy.get(buildDataCy(buildCommentContainerDataCy('3'))).should(
+      'contain',
+      'i am a bot', // default return value of the mocked chatbot
+    );
+  });
+
+  it('Show dates', () => {
+    cy.setUpApi(
+      {
+        appData: [
+          {
+            account: CURRENT_MEMBER,
+            createdAt: '2025-11-18T16:35:22.010Z',
+            creator: CURRENT_MEMBER,
+            data: { content: 'A previously saved message' },
+            id: '0',
+            item: MOCK_SERVER_ITEM,
+            type: 'comment',
+            updatedAt: '2025-11-18T16:35:22.010Z',
+            visibility: AppDataVisibility.Member,
+          },
+          {
+            account: CURRENT_MEMBER,
+            createdAt: '2024-11-18T16:35:22.010Z',
+            creator: CURRENT_MEMBER,
+            data: { content: 'A previously saved message' },
+            id: '1',
+            item: MOCK_SERVER_ITEM,
+            type: 'comment',
+            updatedAt: '2025-11-18T16:35:22.010Z',
+            visibility: AppDataVisibility.Member,
+          },
+        ],
+        appSettings: [MOCK_APP_SETTING],
+      },
+      {
+        context: Context.Player,
+        permission: PermissionLevel.Write,
+      },
+    );
+    cy.visit('/');
+
+    // expect dates
+    cy.get('#root').should('contain', 'November 18, 2024');
+    cy.get('#root').should('contain', 'November 18, 2025');
+  });
 });

src/config/selectors.ts

@@ -3,7 +3,6 @@ export const TABLE_VIEW_TABLE_CYPRESS = 'table_view_table';
 export const TABLE_VIEW_PANE_CYPRESS = 'table_view_pane';
 export const SETTINGS_VIEW_PANE_CYPRESS = 'settings_view_pane';
 export const ABOUT_VIEW_PANE_CYPRESS = 'about_view_pane';
-export const PLAYER_VIEW_CY = 'player-view';
 export const BUILDER_VIEW_CY = 'builder-view';
 export const ANALYTICS_VIEW_CY = 'analytics_view';
 export const TAB_PRESET_VIEW_CYPRESS = 'tab_preset_view';
@@ -102,7 +101,6 @@ export const buildChatbotPromptContainerDataCy = (id: string): string =>
 export const buildCommentResponseBoxDataCy = (id: string): string =>
   `${COMMENT_RESPONSE_BOX_CY}-${id}`;
 
-export const COMMENT_THREAD_CONTAINER_CYPRESS = 'comment_thread_container';
 export const ORPHAN_BUTTON_CYPRESS = 'orphan_button';
 export const CODE_EXECUTION_CONTAINER_CYPRESS = 'code_execution_container';
 export const CODE_EDITOR_ID_CY = 'code_editor';

src/langs/en.json

@@ -61,6 +61,9 @@
     "FILTER_BY_COMMON_KEYWORDS": "Filter by most frequent keywords",
     "SEARCH_BY_OTHER_KEYWORDS": "Search by other keywords or regex",
     "CHECK_WHOLE_CHAT": "Check the whole chat",
-    "CONFIGURE_BUTTON": "Configure"
+    "CONFIGURE_BUTTON": "Configure",
+    "CLOSE": "Close",
+    "SIGN_OUT_ALERT": "You should be signed in to interact with the chatbot",
+    "ANALYTICS_CONVERSATION_MEMBER": "Conversation"
   }
 }

src/modules/analytics/FrequentWords.tsx

@@ -4,7 +4,10 @@ import { useTranslation } from 'react-i18next';
 import {
   Button,
   Chip,
-  Grid2,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
   Stack,
   TextField,
   Typography,
@@ -19,9 +22,9 @@ import {
   buildKeywordChipId,
 } from '@/config/selectors';
 
+import { ConversationForUser } from '../comment/ConversationForUser';
 import KeywordChip from '../common/KeywordChip';
 import TextWithHighlightedKeywords from '../common/TextWithHighlightedKeywords';
-import PlayerView from '../main/PlayerView';
 import { createRegexFromString, getTopFrequentWords } from './utils';
 
 type Props = {
@@ -126,43 +129,41 @@ function FrequentWords({
           ))}
         </Stack>
       </Stack>
-      <Grid2 container sx={{ height: '500px' }}>
-        <Grid2
-          size={{ xs: 12, md: 6 }}
-          sx={{ height: '100%', overflowY: 'auto' }}
-        >
-          <Stack spacing={2} p={1}>
-            {commentsMatchSelectedWords.map((ele) => (
-              <TextWithHighlightedKeywords
-                key={ele.id}
-                sentence={ele.data.content}
-                memberName={ele.account.name}
-                words={[...selectedFrequentWords, ...selectedCustomWords]}
-                onClick={() => setChatMemberID(ele.account.id)}
-                buttonId={buildCheckWholeMemberChatButtonId(ele.account.id)}
-              />
-            ))}
+      <Stack spacing={2} p={1}>
+        {commentsMatchSelectedWords.map((ele) => (
+          <TextWithHighlightedKeywords
+            key={ele.id}
+            sentence={ele.data.content}
+            memberName={ele.account.name}
+            words={[...selectedFrequentWords, ...selectedCustomWords]}
+            onClick={() => setChatMemberID(ele.account.id)}
+            buttonId={buildCheckWholeMemberChatButtonId(ele.account.id)}
+          />
+        ))}
 
-            {
-              // oxlint-disable-next-line eslint/yoda
-              commentsMatchSelectedWords.length === 0 && (
-                <Typography mt={2}>{t('NO_RESULTS_MATCH_WORDS')}</Typography>
-              )
-            }
-          </Stack>
-        </Grid2>
-        {chatMemberID && (
-          <Grid2
-            size={{ xs: 12, md: 6 }}
-            sx={{ height: '100%', overflow: 'hidden' }}
-          >
-            <PlayerView
-              id={chatMemberID}
-              threadSx={{ overflow: 'auto', height: '100%' }}
-            />
-          </Grid2>
-        )}
-      </Grid2>
+        {
+          // oxlint-disable-next-line eslint/yoda
+          commentsMatchSelectedWords.length === 0 && (
+            <Typography mt={2}>{t('NO_RESULTS_MATCH_WORDS')}</Typography>
+          )
+        }
+      </Stack>
+      {chatMemberID && (
+        <Dialog
+          open
+          onClose={() => {
+            setChatMemberID('');
+          }}
+        >
+          <DialogTitle>{t('ANALYTICS_CONVERSATION_MEMBER')}</DialogTitle>
+          <DialogContent>
+            <ConversationForUser userId={chatMemberID} />
+          </DialogContent>
+          <DialogActions>
+            <Button>{t('CLOSE')}</Button>
+          </DialogActions>
+        </Dialog>
+      )}
     </Stack>
   );
 }

src/modules/comment/ChatbotHeader.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Stack, Typography } from '@mui/material';
+
+import ChatbotAvatar from '../common/ChatbotAvatar';
+
+function ChatbotHeader({ name }: Readonly<{ name: string }>) {
+  return (
+    <Stack alignItems="center" width="100%" gap={1}>
+      <ChatbotAvatar />
+      <Typography variant="h4" component="h1">
+        {name}
+      </Typography>
+    </Stack>
+  );
+}
+
+export default ChatbotHeader;

src/modules/comment/CommentContainer.tsx

@@ -5,7 +5,7 @@ import { BIG_BORDER_RADIUS } from '../../constants';
 const CommentContainer = styled('div')(({ theme }) => ({
   backgroundColor: 'white',
   border: 'solid silver 1px',
-  padding: theme.spacing(1, 0),
+  padding: theme.spacing(3, 0),
   borderRadius: BIG_BORDER_RADIUS,
 }));
 export default CommentContainer;

src/modules/comment/Conversation.tsx

@@ -0,0 +1,69 @@
+import { useTranslation } from 'react-i18next';
+
+import {
+  Alert,
+  Box,
+  CircularProgress,
+  Divider,
+  Stack,
+  SxProps,
+  Theme,
+} from '@mui/material';
+
+import { ChatbotPromptSettings } from '@/config/appSetting';
+
+import CommentEditor from '../common/CommentEditor';
+import CommentThread from '../common/CommentThread';
+import { Comment } from '../common/useConversation';
+import ChatbotHeader from './ChatbotHeader';
+import CommentContainer from './CommentContainer';
+
+function Conversation({
+  threadSx,
+  comments,
+  chatbotPrompt,
+  isLoading,
+  mode = 'read',
+}: Readonly<{
+  chatbotPrompt?: ChatbotPromptSettings;
+  threadSx?: SxProps<Theme>;
+  isLoading?: boolean;
+  comments: Comment[];
+  mode?: 'read' | 'write';
+}>) {
+  const { t } = useTranslation();
+
+  if (chatbotPrompt) {
+    const { chatbotName } = chatbotPrompt;
+
+    return (
+      <Box
+        sx={{
+          px: { xs: 2, sm: 10 },
+          maxWidth: '100ch',
+          m: 'auto',
+          height: '100%',
+        }}
+      >
+        <CommentContainer>
+          <Stack gap={3} px={2}>
+            <ChatbotHeader name={chatbotName} />
+            <Divider />
+            <CommentThread threadSx={threadSx} comments={comments} />
+            {'write' === mode && (
+              <CommentEditor chatbotPrompt={chatbotPrompt} />
+            )}
+          </Stack>
+        </CommentContainer>
+      </Box>
+    );
+  }
+
+  if (isLoading) {
+    return <CircularProgress />;
+  }
+
+  return <Alert severity="warning">{t('CHATBOT_CONFIGURATION_MISSING')}</Alert>;
+}
+
+export default Conversation;

src/modules/comment/ConversationForUser.tsx

@@ -0,0 +1,17 @@
+import { useConversation } from '../common/useConversation';
+import Conversation from './Conversation';
+
+export const ConversationForUser = ({
+  userId,
+}: Readonly<{ userId: string }>) => {
+  const { comments, isLoading, chatbotPrompt } = useConversation(userId);
+
+  return (
+    <Conversation
+      isLoading={isLoading}
+      comments={comments ?? []}
+      threadSx={{ overflow: 'auto', height: '100%' }}
+      chatbotPrompt={chatbotPrompt}
+    />
+  );
+};