Add a view for student discussions for research courses

Author: jayzstep

src/client/components/Courses/Course/Discussions.tsx

@@ -1,18 +1,31 @@
-import { useParams, Link as RouterLink } from 'react-router-dom'
+import { useParams, Link as RouterLink, Route, Routes, useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { TableBody, TableCell, TableHead, TableRow, Table, Link, Paper, Typography, Alert } from '@mui/material'
+import { TableBody, TableCell, TableHead, TableRow, Table, Link, Paper, Typography, Alert, Box, Stack } from '@mui/material'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 import useCurrentUser from '../../../hooks/useCurrentUser'
-import useCourse, { useCourseDiscussers } from '../../../hooks/useCourse'
+import useCourse, { useCourseDiscussers, useCourseDiscussion } from '../../../hooks/useCourse'
+import { BlueButton } from '../../ChatV2/general/Buttons'
+import type { Discussion } from '../../../../shared/types'
 
-const Discussion: React.FC = () => {
+const DiscussionView: React.FC = () => {
+  return (
+    <Routes>
+      <Route index element={<DiscussionList />} />
+      <Route path=":userId" element={<DiscussionDetail />} />
+    </Routes>
+  )
+}
+
+const DiscussionList: React.FC = () => {
   const { t, i18n } = useTranslation()
   const { language } = i18n
-  const { courseId } = useParams() as { courseId: string }
+  const { courseId } = useParams<{ courseId: string }>()
   const { user, isLoading: isUserLoading } = useCurrentUser()
-  const { data: course, isSuccess: isCourseSuccess } = useCourse(courseId)
-  const { discussers, isLoading: discussersLoading } = useCourseDiscussers(courseId)
+  const { data: course, isSuccess: isCourseSuccess } = useCourse(courseId ?? '')
+  const { discussers, isLoading: discussersLoading } = useCourseDiscussers(courseId ?? '')
 
-  if (!course || !isCourseSuccess || isUserLoading || !user || discussersLoading) return null
+  if (!courseId || !course || !isCourseSuccess || isUserLoading || !user || discussersLoading) return null
 
   return (
     <div>
@@ -38,16 +51,16 @@ const Discussion: React.FC = () => {
       <Table>
         <TableHead>
           <TableRow>
-            <TableCell>User ID</TableCell>
-            <TableCell>Messages</TableCell>
+            <TableCell>{t('course:student')}</TableCell>
+            <TableCell>{t('course:messages')}</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
-          {discussers.map((d) => (
+          {discussers.map((d, idx) => (
             <TableRow key={d.user_id}>
               <TableCell>
                 <Link to={`${d.user_id}`} component={RouterLink}>
-                  {d.user_id}
+                  {t('course:student')} {idx + 1}
                 </Link>
               </TableCell>
               <TableCell>{d.discussion_count}</TableCell>
@@ -59,4 +72,88 @@ const Discussion: React.FC = () => {
   )
 }
 
-export default Discussion
+const DiscussionDetail: React.FC = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { courseId, userId } = useParams<{ courseId: string; userId: string }>()
+  const { data: discussions, isLoading } = useCourseDiscussion(courseId ?? '', userId ?? '')
+
+  if (!courseId || !userId || isLoading) return null
+
+  if (!discussions || discussions.length === 0) {
+    return (
+      <Box py={3}>
+        <Box sx={{ position: 'sticky', top: 0, zIndex: 1, py: 1 }}>
+          <BlueButton onClick={() => navigate('..', { relative: 'path' })}>← {t('common:back')}</BlueButton>
+        </Box>
+        <Typography mt={2}>{t('course:noDiscussions')}</Typography>
+      </Box>
+    )
+  }
+
+  const sessions: Discussion[] = []
+  for (let i = 0; i < discussions.length; i++) {
+    const curr = discussions[i]
+    const next = discussions[i + 1]
+    if (!next) {
+      sessions.push(curr)
+      continue
+    }
+    const currLen = curr.metadata.chatMessages.length
+    const nextLen = next.metadata.chatMessages.length
+    const nextExtendsThis =
+      nextLen > currLen &&
+      curr.metadata.chatMessages.every((msg, j) => next.metadata.chatMessages[j]?.role === msg.role && next.metadata.chatMessages[j]?.content === msg.content)
+    if (!nextExtendsThis) sessions.push(curr)
+  }
+
+  return (
+    <Box py={3}>
+      <Box sx={{ position: 'sticky', top: 0, zIndex: 1, py: 1 }}>
+        <BlueButton onClick={() => navigate('..', { relative: 'path' })}>← {t('common:back')}</BlueButton>
+      </Box>
+
+      <Stack spacing={4} mt={2} sx={{ maxWidth: '900px', mx: 'auto' }}>
+        {sessions.map((discussion) => {
+          const messages = [...discussion.metadata.chatMessages, { role: 'assistant', content: discussion.response }]
+          return (
+            <Paper key={discussion.id} elevation={3} sx={{ p: 3, borderRadius: 2 }}>
+              <Typography variant="caption" color="text.secondary">
+                {new Date(discussion.createdAt).toLocaleString()}
+              </Typography>
+              <Stack spacing={1} mt={1}>
+                {messages.map((msg, msgIdx) =>
+                  msg.role === 'user' ? (
+                    <Box
+                      key={msgIdx}
+                      sx={{
+                        alignSelf: 'flex-end',
+                        backgroundColor: 'action.hover',
+                        borderRadius: '1rem 0 1rem 1rem',
+                        boxShadow: '0px 2px 2px rgba(0, 0, 0, 0.2)',
+                        px: '1.5rem',
+                        py: '1rem',
+                        maxWidth: { xs: '90vw', sm: '60vw', md: '50vw' },
+                        width: 'fit-content',
+                        wordBreak: 'break-word',
+                        whiteSpace: 'pre-wrap',
+                      }}
+                    >
+                      <Typography variant="body2">{typeof msg.content === 'string' ? msg.content : '[image]'}</Typography>
+                    </Box>
+                  ) : (
+                    <Box key={msgIdx} sx={{ width: '100%', wordBreak: 'break-word' }}>
+                      <ReactMarkdown remarkPlugins={[remarkGfm]}>{typeof msg.content === 'string' ? msg.content : ''}</ReactMarkdown>
+                    </Box>
+                  ),
+                )}
+              </Stack>
+            </Paper>
+          )
+        })}
+      </Stack>
+    </Box>
+  )
+}
+
+export default DiscussionView

src/client/components/common/RouterTabs.tsx

@@ -1,15 +1,25 @@
 import { Tabs } from '@mui/material'
 import React from 'react'
-import { matchPath, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 
 const stripSearch = (path: string) => path.split('?')[0]
 
-export const RouterTabs = ({ children }: { children: (React.ReactElement | false)[] }) => {
+export const RouterTabs = ({ children }: { children: React.ReactNode }) => {
   const { pathname } = useLocation()
 
-  const activeIndex = React.Children.toArray(children)
-    .filter((c) => React.isValidElement(c))
-    .findIndex((c) => !!matchPath(pathname, stripSearch((c.props as { to: string }).to)))
+  const tabs = React.Children.toArray(children).filter((c) => React.isValidElement(c))
 
-  return <Tabs value={activeIndex < 0 ? 0 : activeIndex} slotProps={{ indicator: { style: { backgroundColor: 'black' } } }} textColor='inherit' >{children}</Tabs>
+  const activeIndex = tabs.reduce<number>((best, c, idx) => {
+    const to = stripSearch((c.props as { to: string }).to)
+    const matches = pathname === to || pathname.startsWith(to + '/')
+    if (!matches) return best
+    const bestTo = best >= 0 ? stripSearch((tabs[best].props as { to: string }).to) : ''
+    return to.length > bestTo.length ? idx : best
+  }, -1)
+
+  return (
+    <Tabs value={activeIndex < 0 ? false : activeIndex} slotProps={{ indicator: { style: { backgroundColor: 'black' } } }} textColor="inherit">
+      {children}
+    </Tabs>
+  )
 }

src/client/locales/en.json

@@ -9,6 +9,7 @@
     "edit": "Edit",
     "delete": "Delete",
     "update": "Update",
+    "back": "Back",
     "cancel": "Cancel",
     "continue": "Continue",
     "create": "Create",
@@ -411,6 +412,8 @@
     "tokens": "Tokens",
     "messages": "Messages",
     "noCourses": "No courses",
+    "noDiscussions": "No discussions found for this student.",
+    "student": "Student",
     "showActiveCourses": "Show active courses",
     "isSavedOptOut": "The course discussions will be saved anonymously, if you grant permission to save. Saved discussions can be used for research purposes.",
     "isSavedNotOptOut": "The course discussions will be saved anonymously.\n\nSaved discussions can be used for research purposes",

src/client/locales/fi.json

@@ -9,6 +9,7 @@
     "edit": "Muokkaa",
     "delete": "Poista",
     "update": "Päivitä",
+    "back": "Takaisin",
     "cancel": "Peruuta",
     "continue": "Jatka",
     "create": "Luo",
@@ -414,6 +415,8 @@
     "tokens": "Tokenit",
     "messages": "Viestit",
     "noCourses": "Ei näytettäviä kursseja",
+    "noDiscussions": "Tälle opiskelijalle ei löydy keskusteluja.",
+    "student": "Opiskelija",
     "showActiveCourses": "Näytä aktiiviset kurssit",
     "isSavedOptOut": "Kurssilla käymäsi keskustelut tallennetaan anonyymisti, jos annat tallennusluvan.\nTallennettuja keskusteluja voidaan käyttää tutkimuksessa.",
     "isSavedNotOptOut": "Kurssilla käymäsi keskustelut tallennetaan anonyymisti.\n\nTallennettuja keskusteluja voidaan käyttää tutkimuksessa",

src/client/locales/sv.json

@@ -9,6 +9,7 @@
     "edit": "Redigera",
     "delete": "Redera",
     "update": "Updattera",
+    "back": "Tillbaka",
     "cancel": "Avboka",
     "continue": "Fortsätt",
     "create": "Skapa",
@@ -371,6 +372,8 @@
     "tokens": "Tokens",
     "messages": "Meddelanden",
     "noCourses": "Inga kurser att visa",
+    "noDiscussions": "Inga diskussioner hittades för den här studenten.",
+    "student": "Student",
     "percentageUsed": "Andel använda polletter",
     "howToActive": "Välj de kurser jag undervisar om du vill aktivera kurschatten",
     "coursePage": "Kurssidan",

src/server/routes/course.ts

@@ -314,6 +314,7 @@ courseRouter.get('/:id/discussions/:user_id', checkDiscussionAccess, async (req,
       courseId: id,
       userId,
     },
+    order: [['createdAt', 'ASC']],
   })
 
   res.send(discussions.map((d) => d))

src/shared/types.ts

@@ -56,10 +56,10 @@ export type Discussion = {
   courseId: string
   response: string
   metadata: {
-    model: ValidModelName
-    messages: {
+    generationInfo: { model: ValidModelName }
+    chatMessages: {
       role: string
-      content: string
+      content: string | { type: string; image_url?: unknown }[]
     }[]
   }
   createdAt: string