Merge pull request #327 from UniversityOfHelsinkiCS/add-teacher-to-chat-instance-manual

Add teacher to chat instance manual

Author: MatiasSinisalo

package.json

@@ -9,6 +9,7 @@
     "dev": "concurrently \"npm run dev:server\" \"vite\"",
     "dev:server": "NODE_ENV=development tsx watch --clear-screen=false src/server/index.ts",
     "tsc": "tsc",
+    "tsc:on": "tsc --watch",
     "lint": "eslint 'src/**/*.{ts,tsx}'",
     "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix",
     "format": "prettier --write 'src/**/*.{ts,tsx}'",

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

@@ -1,16 +1,16 @@
 import { Edit, OpenInNew } from '@mui/icons-material'
-import { Alert, Box, Button, Checkbox, Container, FormControlLabel, Input, Modal, Paper, Skeleton, Tab, Tooltip, Typography } from '@mui/material'
+import { Alert, Box, Button, Checkbox, Container, FormControlLabel, Input, Modal, Paper, Skeleton, Stack, Tab, TextField, Tooltip, Typography } from '@mui/material'
 import { enqueueSnackbar } from 'notistack'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Link, Route, Routes, useParams } from 'react-router-dom'
+import { Form, Link, Route, Routes, useParams } from 'react-router-dom'
 
 import { PUBLIC_URL } from '../../../../config'
 import useCourse from '../../../hooks/useCourse'
 import useCurrentUser from '../../../hooks/useCurrentUser'
 import { useCreatePromptMutation, useDeletePromptMutation } from '../../../hooks/usePromptMutation'
 import usePrompts from '../../../hooks/usePrompts'
-import type { Message as MessageType } from '../../../types'
+import type { Message as MessageType, Responsebility } from '../../../types'
 import Conversation from '../../Chat/Conversation'
 import SystemMessage from '../../Chat/SystemMessage'
 import Rag from '../../Rag/Rag'
@@ -21,23 +21,30 @@ import Stats from './Stats'
 import { RouterTabs } from '../../common/RouterTabs'
 import Discussion from './Discussions'
 import { ApiErrorView } from '../../common/ApiErrorView'
+import apiClient from '../../../util/apiClient'
+import { t } from 'i18next'
 
 const Course = () => {
   const [showTeachers, setShowTeachers] = useState(false)
 
   const [activityPeriodFormOpen, setActivityPeriodFormOpen] = useState(false)
-
+  const [responsibilities, setResponsibilities] = useState<Responsebility[]>([])
   const { id } = useParams() as { id: string }
   const { t, i18n } = useTranslation()
 
   const { language } = i18n
 
   const { user, isLoading: userLoading } = useCurrentUser()
-
-  const { data: course, isSuccess: isCourseSuccess, error } = useCourse(id)
+  const { data: course, isSuccess: isCourseSuccess, error, refetch: refetchCourse } = useCourse(id)
+  console.log(course)
   if (error) {
     return <ApiErrorView error={error} />
   }
+  useEffect(() => {
+    if(isCourseSuccess){
+      setResponsibilities(course?.responsibilities)
+    }
+  }, [isCourseSuccess])
 
   if (userLoading || !user || !isCourseSuccess) return null
 
@@ -97,7 +104,24 @@ const Course = () => {
     boxSizing: 'borderBox',
     height: '40px',
   }
+  const handleAddResponsible = async (e) => {
+    e.preventDefault()
+    const username = e.target.username.value
+    const result = await apiClient.post(`/courses/${course.id}/responsibilities/assign`, { username: username })
+    if(result.status === 200){
+      const responsibility = result.data
+      setResponsibilities([...responsibilities, responsibility])
+      refetchCourse()
+    }
 
+  }
+  const handleRemoveResponsibility = async (responsibility) => {
+    const result = await apiClient.post(`/courses/${course.id}/responsibilities/remove`, { username: responsibility.user?.username })
+    if(result.status === 200){
+      const filteredResponsibilities = responsibilities.filter((r) => r.id !== responsibility.id)
+      setResponsibilities(filteredResponsibilities)
+    }
+  }
   return (
     <Container sx={{ mt: '4rem', mb: '10rem' }} maxWidth="xl">
       <Alert severity={getInfoSeverity()}>
@@ -182,13 +206,20 @@ const Course = () => {
                 {showTeachers ? t('admin:hideTeachers') : t('admin:showTeachers')}
               </Button>
               {showTeachers && (
-                <ul>
-                  {course.responsibilities.map((responsibility) => (
-                    <li key={responsibility.id}>
-                      {responsibility.user.last_name} {responsibility.user.first_names}
-                    </li>
-                  ))}
-                </ul>
+                <Box>
+                  <Form onSubmit={handleAddResponsible}>
+                    <TextField name="username" placeholder={'käyttäjänimi: '}></TextField>
+                    <Button type={'submit'}>Lisää</Button>
+                  </Form>
+                  <Stack sx={{margin: 1, padding: 1, borderColor: 'gray', borderWidth: 1, borderStyle: 'solid'}}>
+                    {responsibilities.map((responsibility) => (
+                      <Box  key={responsibility.id} sx={{display: 'flex', alignItems: 'center', padding: 1}}>
+                        <Typography>{responsibility.user.last_name} {responsibility.user.first_names}</Typography>
+                        <AssignedResponsibilityManagement handleRemove={() => {handleRemoveResponsibility(responsibility)}} responsibility={responsibility}/>
+                      </Box>
+                    ))}
+                  </Stack>
+                </Box>
               )}
             </>
           )}
@@ -218,6 +249,21 @@ const Course = () => {
   )
 }
 
+const AssignedResponsibilityManagement = ({responsibility, handleRemove}) => {
+  const { t, i18n } = useTranslation()
+  if(!responsibility.createdByUserId){
+   return (
+    <Stack direction={'row'} sx={{marginLeft: 'auto', alignItems: 'center', height: '1rem'}} >
+    </Stack>
+  )}
+  return (
+    <Stack direction={'row'} sx={{marginLeft: 'auto', alignItems: 'center', height: '1rem'}} >
+      <Typography>{t('course:customResponsibility')}</Typography>
+      <Button onClick={handleRemove}>{t('course:remove')}</Button>
+    </Stack>
+  )
+}
+
 const Prompts = ({ courseId }: { courseId: string }) => {
   const { t } = useTranslation()
   const [name, setName] = useState('')

src/client/hooks/useChatScroll.ts

@@ -83,8 +83,7 @@ export const useChatScroll = (appContainerRef, endOfConversationRef) => {
   }
 
   const smoothScrollTo = (duration: number) => {
-    if(!shouldScroll.current)
-    {
+    if (!shouldScroll.current) {
       return
     }
     //should scroll but there might be another scroll frame going so first it should be cancelled

src/client/hooks/useUpdateUrlLang.tsx

@@ -10,7 +10,7 @@ export const useUpdateUrlLang = () => {
   const { user } = useCurrentUser()
   const [params, setParams] = useSearchParams()
   const langParam = params.get('lang')
- const [lang, setStorageLang] = useLocalStorageState('lang', 'en')
+  const [lang, setStorageLang] = useLocalStorageState('lang', 'en')
   useEffect(() => {
     const updatedLangFromLocal = localStorage.getItem('lang')
 

src/client/locales/en.json

@@ -282,7 +282,9 @@
     "stats": "Statistics",
     "discussions": "Discussions",
     "prompts": "Prompts",
-    "rag": "RAG"
+    "rag": "RAG",
+    "remove": "remove",
+    "customResponsibility": "manually added"
   },
   "tooltip": {
     "copied": "Copied!"

src/client/locales/fi.json

@@ -282,7 +282,9 @@
     "stats": "Statistiikka",
     "discussions": "Keskustelut",
     "prompts": "Alustukset",
-    "rag": "RAG"
+    "rag": "RAG",
+    "remove": "poista",
+    "customResponsibility": "manuaalisesti lisätty"
   },
   "tooltip": {
     "copied": "Kopioitu!"

src/client/types.ts

@@ -107,8 +107,9 @@ export interface Enrolment {
   }
 }
 
-interface Responsebility {
+export interface Responsebility {
   id: string
+  createdByUserId: string | null
   user: {
     id: string
     username: string

src/server/db/migrations/20250804_00_add_created_by_user_id_column.ts

@@ -0,0 +1,15 @@
+import { DataTypes } from 'sequelize'
+
+import { Migration } from '../connection'
+
+export const up: Migration = async ({ context: queryInterface }) => {
+  await queryInterface.addColumn('responsibilities', 'created_by_user_id', {
+    type: DataTypes.STRING,
+    allowNull: true,
+    defaultValue: null,
+  })
+}
+
+export const down: Migration = async ({ context: queryInterface }) => {
+  await queryInterface.removeColumn('responsibilities', 'created_by_user_id')
+}

src/server/db/models/responsibilities.ts

@@ -11,6 +11,8 @@ class Responsibility extends Model<InferAttributes<Responsibility>, InferCreatio
   declare user?: NonAttribute<User>
 
   declare chatInstanceId: string
+
+  declare createdByUserId: CreationOptional<string>
 }
 
 Responsibility.init(
@@ -29,6 +31,11 @@ Responsibility.init(
       type: DataTypes.STRING,
       allowNull: false,
     },
+    createdByUserId: {
+      // tells who manually created the responsibility, (null = created by updater)
+      type: DataTypes.STRING,
+      allowNull: true,
+    },
   },
   {
     underscored: true,