enhance conversation mechanics

Author: sutigit

src/client/components/ChatV2/ChatBox.tsx

@@ -1,6 +1,7 @@
 import { Send } from '@mui/icons-material'
+import StopIcon from '@mui/icons-material/Stop';
 import { Box, IconButton, TextField, Typography } from '@mui/material'
-import { useEffect, useState } from 'react'
+import { useState, useRef } from 'react'
 import useUserStatus from '../../hooks/useUserStatus'
 import { useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
@@ -10,14 +11,25 @@ export const ChatBox = ({ disabled, onSubmit }: { disabled: boolean; onSubmit: (
   const { userStatus, isLoading: statusLoading, refetch: refetchStatus } = useUserStatus(courseId)
   const [message, setMessage] = useState<string>('')
 
+  const textFieldRef = useRef<HTMLInputElement>(null)
+
   const { t, i18n } = useTranslation()
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
+
+    // This is here to prevent the form from submitting but because disabling it in the component breaks re-focusing on the text field
+    if (disabled) return
+
+
     if (message.trim()) {
       onSubmit(message)
       setMessage('')
       refetchStatus()
     }
+
+    if (textFieldRef.current) {
+      textFieldRef.current.focus()
+    }
   }
 
   if (statusLoading) {
@@ -44,19 +56,25 @@ export const ChatBox = ({ disabled, onSubmit }: { disabled: boolean; onSubmit: (
         <Box sx={{ border: '1px solid rgba(0,0,0,0.4)', borderRadius: '0.2rem' }}>
 
           <TextField
+            ref={textFieldRef}
+            autoFocus
             value={message}
             onChange={(e) => setMessage(e.target.value)}
             placeholder="Kirjoita viestisi tähän..."
             fullWidth
             multiline
             maxRows={8}
-            disabled={disabled}
             variant="standard"
             sx={{ padding: '0.5rem 1rem' }}
             slotProps={{
               input: {
                 disableUnderline: true,
-                endAdornment: (
+                endAdornment: disabled ? (
+                  // TODO: finish the stop signal API
+                  <IconButton disabled={!disabled}>
+                    <StopIcon />
+                  </IconButton>
+                ) : (
                   <IconButton disabled={disabled} type="submit">
                     <Send />
                   </IconButton>

src/client/components/ChatV2/ChatV2.tsx

@@ -208,19 +208,33 @@ export const ChatV2 = () => {
   }
 
   useEffect(() => {
-    // Keep this useEffect for autoscroll effect
+    // Scrolls to bottom on initial load only
+    if (!appContainerRef.current || !conversationRef.current || !settingsRef.current || messages.length === 0) return
+    if (isCompletionDone) {
+      const container = appContainerRef.current
+      if (container) {
+        container.scrollTo({
+          top: container.scrollHeight,
+          behavior: 'instant',
+        })
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    // Scrolls to last assistant message on text generation
     if (!appContainerRef.current || !conversationRef.current || !settingsRef.current || messages.length === 0) return
 
     const lastNode = conversationRef.current.lastElementChild as HTMLElement
 
-    if (lastNode.classList.contains('message-role-assistant')) {
+    if (lastNode.classList.contains('message-role-assistant') && !isCompletionDone) {
       const container = appContainerRef.current
       const settingsHeight = settingsRef.current.clientHeight
 
       const containerRect = container.getBoundingClientRect()
       const lastNodeRect = lastNode.getBoundingClientRect()
 
-      const scrollTopPadding = 180
+      const scrollTopPadding = 200
       const scrollOffset = lastNodeRect.top - containerRect.top + container.scrollTop - settingsHeight - scrollTopPadding
 
       container.scrollTo({
@@ -276,14 +290,10 @@ export const ChatV2 = () => {
             gap: '1.2rem',
             backgroundColor: 'white',
             padding: '1.8rem 1rem 0.8rem 1rem',
+            zIndex: 10,
           }}
         >
           {/* {disclaimerInfo && <Disclaimer disclaimer={disclaimerInfo} />}
-            <SystemPrompt content={system.content} setContent={(content) => setSystem({ content })} />
-            <Button onClick={handleReset}>Reset</Button>
-            <IconButton onClick={() => setSettingsModalOpen(true)} title="Settings">
-              <Settings></Settings>
-            </IconButton> */}
           {/* <SettingsButton startIcon={<AddCommentIcon />}>Alustus</SettingsButton> */}
           <SettingsButton startIcon={<SettingsIcon />} onClick={() => setSettingsModalOpen(true)}>
             Keskustelun asetukset
@@ -298,18 +308,18 @@ export const ChatV2 = () => {
 
         <Box
           sx={{
-            height: '100%',
             display: 'flex',
             flexDirection: 'column',
+            height: '100%',
             width: '70%',
             margin: 'auto',
-            paddingBottom: '5rem',
             paddingTop: '1rem',
+            paddingBottom: '8rem',
           }}
         >
           <Conversation
             conversationRef={conversationRef}
-            lastNodeHeight={window.innerHeight - settingsRef.current?.clientHeight - inputFieldRef.current?.clientHeight}
+            expandedNodeHeight={window.innerHeight - settingsRef.current?.clientHeight - inputFieldRef.current?.clientHeight}
             messages={messages}
             completion={completion}
             isCompletionDone={isCompletionDone}
@@ -319,7 +329,7 @@ export const ChatV2 = () => {
 
         <Box ref={inputFieldRef} sx={{ position: 'sticky', bottom: 0, backgroundColor: 'white', paddingBottom: '1.5rem' }}>
           <ChatBox
-            disabled={false}
+            disabled={!isCompletionDone}
             onSubmit={(message) => {
               if (message.trim()) {
                 handleSubmit(message)

src/client/components/ChatV2/Conversation.tsx

@@ -15,11 +15,11 @@ const dotStyle = (delay: number) => ({
   animationDelay: `${delay}s`,
 })
 
-export const MessageLoading = ({ lastNodeHeight }: { lastNodeHeight: number }) => (
+export const LoadingMessage = ({ expandedNodeHeight }: { expandedNodeHeight: number }) => (
   <div
     className="message-role-assistant"
     style={{
-      height: lastNodeHeight,
+      height: expandedNodeHeight,
       display: 'flex',
       padding: '2rem',
     }}
@@ -42,15 +42,16 @@ export const MessageLoading = ({ lastNodeHeight }: { lastNodeHeight: number }) =
   </div>
 )
 
-const MessageItem = ({ message, isLastAssistantNode, lastNodeHeight }: { message: Message; isLastAssistantNode: boolean; lastNodeHeight: number }) => (
+const MessageItem = ({ message, isLastAssistantNode, expandedNodeHeight }: { message: Message; isLastAssistantNode: boolean; expandedNodeHeight: number }) => (
   <Box
     className={`message-role-${message.role}`}
     sx={{
       alignSelf: message.role === 'assistant' ? 'flex-start' : 'flex-end',
       backgroundColor: message.role === 'assistant' ? 'transparent' : '#efefef',
       padding: '0 1.5rem',
       borderRadius: '0.6rem',
-      height: isLastAssistantNode ? lastNodeHeight : 'auto',
+      minHeight: isLastAssistantNode ? expandedNodeHeight : 'auto',
+      boxShadow: message.role === 'assistant' ? 'none' : '0px 2px 2px rgba(0, 0, 0, 0.2)',
     }}
   >
     <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
@@ -59,14 +60,14 @@ const MessageItem = ({ message, isLastAssistantNode, lastNodeHeight }: { message
 
 export const Conversation = ({
   conversationRef,
-  lastNodeHeight,
+  expandedNodeHeight,
   messages,
   completion,
   isCompletionDone,
   fileSearchResult,
 }: {
   conversationRef: React.RefObject<HTMLElement>
-  lastNodeHeight: number
+  expandedNodeHeight: number
   messages: Message[]
   completion: string
   isCompletionDone: boolean
@@ -77,14 +78,14 @@ export const Conversation = ({
     {messages.map((message, idx) => {
       const isLastAssistantNode = idx === messages.length - 1 && message.role === 'assistant'
 
-      return <MessageItem key={idx} message={message} isLastAssistantNode={isLastAssistantNode} lastNodeHeight={lastNodeHeight} />
+      return <MessageItem key={idx} message={message} isLastAssistantNode={isLastAssistantNode} expandedNodeHeight={expandedNodeHeight} />
     })}
     {!isCompletionDone &&
       messages.length > 0 &&
       (completion.length > 0 ? (
-        <MessageItem message={{ role: 'assistant', content: completion, fileSearchResult }} isLastAssistantNode={true} lastNodeHeight={lastNodeHeight} />
+        <MessageItem message={{ role: 'assistant', content: completion, fileSearchResult }} isLastAssistantNode={true} expandedNodeHeight={expandedNodeHeight} />
       ) : (
-        <MessageLoading lastNodeHeight={lastNodeHeight} />
+        <LoadingMessage expandedNodeHeight={expandedNodeHeight} />
       ))}
   </Box>
 )

src/client/components/ChatV2/generics/ConversationSplash.tsx

@@ -1,15 +1,14 @@
 import { Box, Typography } from '@mui/material'
 import hyLogo from '../../../assets/hy_logo.svg'
 
-
 export const ConversationSplash = () => (
   <Box
     sx={{
+      height: '100%',
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'center',
       alignItems: 'center',
-      height: '100%',
       transition: 'opacity 0.6s, transform 0.6s',
       opacity: 1,
       transform: 'scale(1)',
@@ -25,4 +24,4 @@ export const ConversationSplash = () => (
       Aloita keskustelu läettämällä viesti...
     </Typography>
   </Box>
-)
+)