Fix scroll to bottom btn appearing always after page load

Author: Veikkosuhonen

e2e/prompts.spec.ts

@@ -48,7 +48,7 @@ test.describe('Prompts', () => {
     await expect(page.getByTestId('assistant-instructions-input')).toContainText('mocktest testi onnistui')
   })
 
-  test.only('Course prompt creation, chat link with prompt, and deletion', async ({ page }) => {
+  test('Course prompt creation, chat link with prompt, and deletion', async ({ page }) => {
     await page.goto('/courses/test-course/prompts')
 
     const newPromptName = `testausprompti-${test.info().workerIndex}`

src/client/components/ChatV2/ChatBox.tsx

@@ -22,12 +22,7 @@ export const ChatBox = ({
   fileName,
   tokenUsageWarning,
   tokenUsageAlertOpen,
-  saveConsent,
-  setSaveConsent,
   setChatLeftSidePanelOpen,
-  chatLeftSidePanelOpen,
-  saveChat,
-  notOptoutSaving,
   setFileName,
   handleCancel,
   handleContinue,
@@ -40,12 +35,7 @@ export const ChatBox = ({
   fileName: string
   tokenUsageWarning: string
   tokenUsageAlertOpen: boolean
-  saveConsent: boolean
-  setSaveConsent: React.Dispatch<boolean>
   setChatLeftSidePanelOpen: (open: boolean) => void
-  chatLeftSidePanelOpen: boolean
-  saveChat: boolean
-  notOptoutSaving: boolean
   setFileName: (name: string) => void
   handleCancel: () => void
   handleContinue: (message: string) => void
@@ -70,12 +60,12 @@ export const ChatBox = ({
 
   const { t } = useTranslation()
 
-  // useKeyboardCommands({
-  //   resetChat: handleReset,
-  //   openModelSelector: () => {
-  //     setIsModelSelectorOpen(true)
-  //   },
-  // }) // @todo what key combination to open model selector
+  useKeyboardCommands({
+    resetChat: handleReset,
+    openModelSelector: () => {
+      // setIsModelSelectorOpen(true) // @todo what key combination to open model selector
+    },
+  })
 
   const isShiftEnterSend = user?.preferences?.sendShortcutMode === 'shift+enter' || !user?.preferences?.sendShortcutMode
 

src/client/components/ChatV2/ChatV2.tsx

@@ -12,7 +12,7 @@ import type { ChatMessage, MessageGenerationInfo, ToolCallResultEvent } from '..
 import type { RagIndexAttributes } from '../../../shared/types'
 import { getLanguageValue } from '../../../shared/utils'
 import { useIsEmbedded } from '../../contexts/EmbeddedContext'
-import { useChatScroll } from '../../hooks/useChatScroll'
+import { useChatScroll } from './useChatScroll'
 import useCourse from '../../hooks/useCourse'
 import useCurrentUser from '../../hooks/useCurrentUser'
 import useInfoTexts from '../../hooks/useInfoTexts'
@@ -503,14 +503,9 @@ export const ChatV2 = () => {
             fileInputRef={fileInputRef}
             fileName={fileName}
             setFileName={setFileName}
-            saveConsent={saveConsent}
-            setSaveConsent={setSaveConsent}
             setChatLeftSidePanelOpen={setChatLeftSidePanelOpen}
-            chatLeftSidePanelOpen={chatLeftSidePanelOpen}
             tokenUsageWarning={tokenUsageWarning}
             tokenUsageAlertOpen={tokenUsageAlertOpen}
-            saveChat={!!course && course.saveDiscussions}
-            notOptoutSaving={!!course && course.notOptoutSaving}
             handleCancel={handleCancel}
             handleContinue={(newMessage) => handleSubmit(newMessage, true)}
             handleSubmit={(newMessage) => {

src/client/components/ChatV2/PromptSelector.tsx

@@ -94,6 +94,7 @@ const PromptSelector = ({
             ))}
           </>
         )}
+        {myPrompts.length === 0 && coursePrompts.length === 0 && <MenuItem disabled>{t('settings:noPrompts')}</MenuItem>}
       </Menu>
     </Box>
   )

src/client/components/ChatV2/SaveMyPromptModal.tsx

@@ -32,7 +32,6 @@ export const SaveMyPromptModal = ({ isOpen, setIsOpen, onSave, systemMessage, ex
     >
       <form
         onSubmit={async (e) => {
-          console.log('Saving', name)
           e.preventDefault()
           await onSave(name, promptToSave)
           setIsOpen(false)

src/client/components/ChatV2/SettingsModal.tsx

@@ -153,7 +153,6 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
   }, [mandatoryPrompt, urlPrompt])
 
   const handleClose = async () => {
-    console.log('handleClose', activePrompt, systemMessage)
     // When no prompt is selected, set the custom system message to the value of the system message textfield
     if (!activePrompt) {
       setCustomSystemMessage(systemMessage)

src/client/hooks/useChatScroll.ts renamed to src/client/components/ChatV2/useChatScroll.ts

@@ -2,9 +2,15 @@ import { useEffect, useRef, useState, useTransition } from 'react'
 
 let isUserDisabled = false
 
+const isAtBottom = () => {
+  const element = document.documentElement
+  const dist = element.scrollHeight - element.clientHeight - element.scrollTop
+  return Math.abs(dist) <= 3
+}
+
 export const useChatScroll = () => {
   // Todo: on long conversations this state update is not optimal. Ideally move it down the component tree.
-  const [isAutoScrolling, setIsAutoScrolling] = useState(false)
+  const [isAutoScrolling, setIsAutoScrolling] = useState(true)
 
   const prevHeight = useRef(0)
 
@@ -40,10 +46,15 @@ export const useChatScroll = () => {
   }
 
   useEffect(() => {
+    // Check scroll status after a delay
+    setTimeout(() => {
+      if (!isAtBottom()) {
+        setIsAutoScrolling(false)
+      }
+    }, 100)
+
     const handleAttachAutoScroll = () => {
-      const element = document.documentElement
-      const isAtBottom = Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) <= 3
-      if (isAtBottom) {
+      if (isAtBottom()) {
         setIsAutoScrolling(true)
         isUserDisabled = false
       }

src/client/components/Rag/RagIndex.tsx

@@ -45,7 +45,6 @@ export const RagIndex: React.FC = () => {
               type="file"
               onChange={async (event) => {
                 const files = event.target.files
-                console.log('Files selected:', files)
                 if (files && files.length > 0) {
                   await uploadMutation.mutateAsync(files)
                   refetch()

src/client/locales/en.json

@@ -137,7 +137,8 @@
     "confirmDeletePrompt": "Are you sure you want to delete the prompt '{{name}}'?",
     "selectedSource": "No selected source",
     "sourceDescription": "Materials specified by the teacher can be used as a source in the course chat. You can select the source below.",
-    "other": "Other settings"
+    "other": "Other settings",
+    "noPrompts": "No prompts"
   },
   "email": {
     "save": "Save as email",
@@ -354,4 +355,4 @@
     "nameLabel": "Collection name",
     "nameHelperText": "Use a descriptive name (for example the full name of the course)"
   }
-}
+}

src/client/locales/fi.json

@@ -137,7 +137,8 @@
     "default": "Oletus",
     "confirmDeletePrompt": "Haluatko varmasti poistaa alustuksen '{{name}}'?",
     "sourceDescription": "Kurssichatissa voidaan käyttää lähteenä opettajan määrittämiä materiaaleja. Voit valita lähteen alta.",
-    "other": "Muut asetukset"
+    "other": "Muut asetukset",
+    "noPrompts": "Ei alustuksia"
   },
   "chats": {
     "header": "Auki olevat kurssichatit",
@@ -354,4 +355,4 @@
     "nameLabel": "Kokoelman nimi",
     "nameHelperText": "Käytä kuvaavaa nimeä (esim. kurssin koko nimi)"
   }
-}
+}