course prompt syncing mayhem & expanded test

Author: Veikkosuhonen

e2e/prompts.spec.ts

@@ -2,19 +2,45 @@ import { test } from './fixtures'
 import { expect } from '@playwright/test'
 import { acceptDisclaimer } from './utils/test-helpers'
 
-test.describe('Prompt creation', () => {
-  test('test', async ({ page }) => {
+test.describe('Prompts', () => {
+  test('Prompt creation, chat link with prompt, and deletion', async ({ page }) => {
     await page.goto('/courses/test-course/prompts')
 
     const newPromptName = `testausprompti-${test.info().workerIndex}`
 
     await page.getByRole('textbox', { name: 'Prompt name' }).fill(newPromptName)
     await page.getByRole('textbox', { name: 'e.g. You are a helpful' }).fill('sanot aina "testi onnistui"')
     await page.getByRole('button', { name: 'Save' }).click()
+
+    // Prompt is created and link is visible
     await page.getByText(`Link to chat with the prompt '${newPromptName}' active`).click()
+
+    // Now in chat view
     await acceptDisclaimer(page)
     await page.getByRole('button', { name: 'Chat settings' }).click()
 
+    // The prompt is active.
     expect(page.getByText(newPromptName)).toBeVisible()
+
+    // When prompt selector is opened, it is also visible in the list, so 2 times:
+    await page.locator('#prompt-selector-button').click()
+    expect(await page.getByText(newPromptName).count()).toBe(2)
+
+    // Back to course page, delete the prompt
+    await page.goto('/courses/test-course/prompts')
+
+    page.on('dialog', (dialog) => dialog.accept())
+    await page.getByTestId(`delete-prompt-${newPromptName}`).click()
+
+    // Prompt is not visible anymore
+    expect(page.getByText(newPromptName)).not.toBeVisible()
+
+    // Go to student view from link
+    await page.getByText('To student view').click()
+    await page.getByRole('button', { name: 'Chat settings' }).click()
+    await page.locator('#prompt-selector-button').click()
+
+    // Prompt is not visible anymore in student view.
+    expect(page.getByText(newPromptName)).not.toBeVisible()
   })
 })

src/client/components/ChatV2/SettingsModal.tsx

@@ -13,6 +13,7 @@ import { useSearchParams } from 'react-router-dom'
 import { BlueButton, OutlineButtonBlack } from './general/Buttons'
 import { useAnalyticsDispatch } from '../../stores/analytics'
 import useLocalStorageState from '../../hooks/useLocalStorageState'
+import { isAxiosError } from 'axios'
 
 const useUrlPromptId = () => {
   const [searchParams] = useSearchParams()
@@ -72,9 +73,10 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
       refetch()
     },
   })
-  //local storage prompt prevents the annoying case where the user refreshes the page and the chosen prompt is reset to default, and the textbox displays incorrect prompt information
-  const [localStoragePrompt, setLocalStoragePrompt] = useLocalStorageState<Prompt | undefined>('prompt', undefined)
-  const [activePrompt, setActivePrompt] = useState<Prompt | undefined>(localStoragePrompt)
+
+  // local storage prompt prevents the annoying case where the user refreshes the page and the chosen prompt is reset to default, and the textbox displays incorrect prompt information
+  const [activePrompt, setActivePrompt] = useLocalStorageState<Prompt | undefined>('prompt', undefined)
+
   const [myPromptModalOpen, setMyPromptModalOpen] = useState<boolean>(false)
   const mandatoryPrompt = course?.prompts.find((p) => p.mandatory)
   const urlPrompt = course?.prompts.find((p) => p.id === urlPromptId)
@@ -89,7 +91,29 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
         promptName: activePrompt?.name,
       },
     })
-  }, [activePrompt?.id, dispatchAnalytics])
+  }, [activePrompt?.id])
+
+  // Time for a quick sync :D --- really this is what you get when using the local storage to hold some data that is also on the server. basically having to build our own sync engine lol.
+  useEffect(() => {
+    // Dont sync personal prompts for now...
+    if (!isPromptEditable && activePrompt) {
+      const sync = async () => {
+        try {
+          const serverActivePrompt = await apiClient.get<Prompt>(`/prompts/${activePrompt?.id}`)
+          setActivePrompt(serverActivePrompt.data)
+        } catch (error) {
+          if (isAxiosError(error)) {
+            if (error.status === 404) {
+              setActivePrompt(undefined) // The prompt has been deleted on the server.
+            }
+          } else {
+            console.error('Unexpected error syncing prompt:', error)
+          }
+        }
+      }
+      sync()
+    }
+  }, [])
 
   const resetSettings = () => {
     handleChangePrompt(undefined)
@@ -99,14 +123,12 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
   const handleChangePrompt = (newPrompt: Prompt | undefined) => {
     if (!newPrompt) {
       setActivePrompt(undefined)
-      setLocalStoragePrompt(undefined)
       setAssistantInstructions(DEFAULT_ASSISTANT_INSTRUCTIONS)
       return
     }
 
     setAssistantInstructions(newPrompt.systemMessage)
     setActivePrompt(newPrompt)
-    setLocalStoragePrompt(newPrompt)
   }
 
   useEffect(() => {

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

@@ -94,7 +94,7 @@ const Prompt = ({ prompt, handleDelete, mandatoryPromptId }: { prompt: PromptTyp
             )}
           </Box>
           <Box>
-            <Button onClick={() => handleDelete(prompt.id)} color="error">
+            <Button onClick={() => handleDelete(prompt.id)} color="error" data-testId={`delete-prompt-${prompt.name}`}>
               {t('common:delete')}
             </Button>
             <ExpandButton expand={expand} setExpand={setExpand} />

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

@@ -48,7 +48,7 @@ const Course = () => {
 
   if (userLoading || !user || !isCourseSuccess) return null
 
-  const studentLink = `${window.location.origin}${PUBLIC_URL}/${chatInstance.courseId}`
+  const studentLink = `${window.location.origin}${PUBLIC_URL}/v2/${chatInstance.courseId}`
 
   const amongResponsibles = chatInstance.responsibilities ? chatInstance.responsibilities.some((r) => r.user.id === user.id) : false
 
@@ -114,24 +114,23 @@ const Course = () => {
       refetchCourse()
     }
   }
-   const drawActionComponent = (user: User) => {
-      const usersResponsibility: Responsebility | undefined = responsibilities.find((r: Responsebility) => {return r.user.id === user.id})
-       const isResponsible = usersResponsibility != undefined
+  const drawActionComponent = (user: User) => {
+    const usersResponsibility: Responsebility | undefined = responsibilities.find((r: Responsebility) => {
+      return r.user.id === user.id
+    })
+    const isResponsible = usersResponsibility != undefined
     return (
       <>
-      {!isResponsible ? 
-      <Button onClick={() => handleAddResponsible(user)}>
-        {t('course:add')}
-
-      </Button>
-    :
-     <AssignedResponsibilityManagement
-        handleRemove={() => {
-          handleRemoveResponsibility(usersResponsibility)
-        }}
-        responsibility={usersResponsibility}
-      />
-    }
+        {!isResponsible ? (
+          <Button onClick={() => handleAddResponsible(user)}>{t('course:add')}</Button>
+        ) : (
+          <AssignedResponsibilityManagement
+            handleRemove={() => {
+              handleRemoveResponsibility(usersResponsibility)
+            }}
+            responsibility={usersResponsibility}
+          />
+        )}
       </>
     )
   }
@@ -274,10 +273,7 @@ const Course = () => {
             overflowY: 'scroll',
           }}
         >
-          <ActionUserSearch
-            actionText={t('course:add')}
-            drawActionComponent={drawActionComponent}
-          />
+          <ActionUserSearch actionText={t('course:add')} drawActionComponent={drawActionComponent} />
         </Box>
       </Modal>
 
@@ -307,7 +303,11 @@ const Course = () => {
 const AssignedResponsibilityManagement = ({ responsibility, handleRemove }) => {
   const { t } = useTranslation()
   if (!responsibility.createdByUserId) {
-    return <Stack direction={'row'} sx={{ marginLeft: 'auto', alignItems: 'center', height: '1rem' }}>sisu</Stack>
+    return (
+      <Stack direction={'row'} sx={{ marginLeft: 'auto', alignItems: 'center', height: '1rem' }}>
+        sisu
+      </Stack>
+    )
   }
   return (
     <Stack direction={'row'} sx={{ marginLeft: 'auto', alignItems: 'center', height: '1rem' }}>

src/client/hooks/usePrompts.ts

@@ -5,9 +5,9 @@ import apiClient from '../util/apiClient'
 
 export const queryKey = ['prompts']
 
-const usePrompts = (chatInstanceId: string) => {
+const usePrompts = (courseId: string) => {
   const queryFn = async (): Promise<Prompt[]> => {
-    const res = await apiClient.get(`/prompts/${chatInstanceId}`)
+    const res = await apiClient.get(`/prompts/for-course/${courseId}`)
 
     const { data } = res
 

src/server/routes/prompt.ts

@@ -23,9 +23,10 @@ promptRouter.get('/my-prompts', async (req, res) => {
   return
 })
 
-promptRouter.get('/:courseId', async (req, res) => {
+promptRouter.get('/for-course/:courseId', async (req, res) => {
   const { courseId } = req.params
 
+  // Note: we dont have any authorization checks here. Consider?
   const chatInstance = await ChatInstance.findOne({
     where: {
       courseId,
@@ -234,7 +235,6 @@ promptRouter.put('/:id', async (req, res) => {
   const updates = PromptUpdateableParams.parse(req.body)
   const { systemMessage, name, hidden, mandatory } = updates
 
-  console.log(id)
   const prompt = await Prompt.findByPk(id)
 
   if (!prompt) {
@@ -258,4 +258,19 @@ promptRouter.put('/:id', async (req, res) => {
   res.send(prompt)
 })
 
+promptRouter.get('/:id', async (req, res) => {
+  const { id } = req.params
+
+  // Note: we dont have any authorization checks here. Consider?
+  const prompt = await Prompt.findByPk(id)
+
+  if (!prompt) {
+    // We dont throw error here, since this is expected behaviour when the prompt has been deleted but someone still has it in their local storage.
+    res.status(404).send('Prompt not found')
+    return
+  }
+
+  res.send(prompt)
+})
+
 export default promptRouter