refactor away ConversationV1

Author: Veikkosuhonen

src/client/components/ChatV2/ChatV2.tsx

@@ -38,6 +38,7 @@ import { getCompletionStreamV3 } from './util'
 import PromptSelector from './PromptSelector'
 import { useQuery } from '@tanstack/react-query'
 import ModelSelector from './ModelSelector'
+import { ConversationSplash } from './general/ConversationSplash'
 
 function useLocalStorageStateWithURLDefault(key: string, defaultValue: string, urlKey: string) {
   const [value, setValue] = useLocalStorageState(key, defaultValue)
@@ -115,7 +116,6 @@ export const ChatV2 = () => {
 
   // Refs
   const chatContainerRef = useRef<HTMLDivElement | null>(null)
-  const conversationRef = useRef<HTMLElement | null>(null)
   const inputFieldRef = useRef<HTMLElement | null>(null)
   const fileInputRef = useRef<HTMLInputElement | null>(null)
   const scrollRef = useRef<HTMLDivElement | null>(null)
@@ -472,9 +472,7 @@ export const ChatV2 = () => {
           )}
 
           <Conversation
-            courseName={course && getLanguageValue(course.name, i18n.language)}
-            courseDate={course?.activityPeriod}
-            conversationRef={conversationRef}
+            initial={<ConversationSplash courseName={course && getLanguageValue(course.name, i18n.language)} courseDate={course?.activityPeriod} />}
             messages={messages}
             completion={completion}
             isStreaming={isStreaming}

src/client/components/ChatV2/Conversation.tsx

@@ -6,8 +6,6 @@ import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'
 import rehypeKatex from 'rehype-katex'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
-import type { ActivityPeriod } from '../../types'
-import { ConversationSplash } from './general/ConversationSplash'
 import { LoadingMessage } from './general/LoadingMessage'
 import { preprocessMath } from './util'
 import 'katex/dist/katex.min.css'
@@ -17,7 +15,7 @@ import { t } from 'i18next'
 import FormatQuoteIcon from '@mui/icons-material/FormatQuote'
 import useLocalStorageState from '../../hooks/useLocalStorageState'
 import { BlueButton } from './general/Buttons'
-import type { ChatMessage, Message, ToolCallResultEvent, ToolCallStatusEvent } from '../../../shared/chat'
+import type { ChatMessage, ToolCallResultEvent, ToolCallStatusEvent } from '../../../shared/chat'
 import { useId, useMemo } from 'react'
 
 const UserMessage = ({ content, attachments }: { content: string; attachments?: string }) => (
@@ -269,7 +267,7 @@ const AssistantMessage = ({
   )
 }
 
-const MessageItem = ({ message, setActiveToolResult }: { message: ChatMessage; setActiveToolResult: (data: ToolCallResultEvent) => void }) => {
+export const MessageItem = ({ message, setActiveToolResult }: { message: ChatMessage; setActiveToolResult: (data: ToolCallResultEvent) => void }) => {
   if (message.role === 'assistant') {
     return (
       <Box
@@ -291,23 +289,19 @@ const MessageItem = ({ message, setActiveToolResult }: { message: ChatMessage; s
 }
 
 export const Conversation = ({
-  courseName,
-  courseDate,
-  conversationRef,
   messages,
   completion,
   toolCalls,
   isStreaming,
   setActiveToolResult,
+  initial,
 }: {
-  courseName?: string
-  courseDate?: ActivityPeriod
-  conversationRef: React.RefObject<HTMLElement>
   messages: ChatMessage[]
   completion: string
   toolCalls: { [callId: string]: ToolCallStatusEvent }
   isStreaming: boolean
   setActiveToolResult: (data: ToolCallResultEvent) => void
+  initial?: React.ReactElement
 }) => {
   const [reminderSeen, setReminderSeen] = useLocalStorageState<boolean>('reminderSeen', false)
 
@@ -323,9 +317,8 @@ export const Conversation = ({
           padding: '1rem 0',
           justifyContent: messages.length === 0 ? 'center' : 'flex-start',
         }}
-        ref={conversationRef}
       >
-        {messages.length === 0 && <ConversationSplash courseName={courseName} courseDate={courseDate} />}
+        {messages.length === 0 && initial}
         {messages.map((message, idx) => {
           return <MessageItem key={idx} message={message} setActiveToolResult={setActiveToolResult} />
         })}

src/client/components/ChatV2/ConversationV1.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 
 import { enqueueSnackbar } from 'notistack'
 import { Prompt as PromptType, SetState } from '../../../types'
-import { Response } from '../../ChatV2/ConversationV1'
+import { MessageItem } from '../../ChatV2/Conversation'
 import SystemMessage from '../../ChatV2/SystemMessage'
 import { useEditPromptMutation } from '../../../hooks/usePromptMutation'
 import { useParams, Link as RouterLink } from 'react-router-dom'
@@ -110,8 +110,8 @@ const Prompt = ({ prompt, handleDelete, mandatoryPromptId }: { prompt: PromptTyp
                   <SystemMessage system={systemMessage} setSystem={() => {}} showInfo={false} disabled />
                 </Box>
                 <Box>
-                  {messages.map(({ role, content }, index) => (
-                    <Response key={content} role={role} content={content} id={`message-${index}`} />
+                  {messages.map((msg) => (
+                    <MessageItem key={msg.content} message={msg} setActiveToolResult={(_d) => {}} />
                   ))}
                 </Box>
               </>

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

@@ -11,7 +11,7 @@ import useCurrentUser from '../../../hooks/useCurrentUser'
 import { useCreatePromptMutation, useDeletePromptMutation } from '../../../hooks/usePromptMutation'
 import usePrompts from '../../../hooks/usePrompts'
 import type { Responsebility, User } from '../../../types'
-import Conversation from '../../ChatV2/ConversationV1'
+import { Conversation } from '../../ChatV2/Conversation'
 import SystemMessage from '../../ChatV2/SystemMessage'
 import Rag from '../../Rag/Rag'
 import { formatDate, getCurTypeLabel } from '../util'
@@ -25,7 +25,7 @@ import apiClient from '../../../util/apiClient'
 import { ActionUserSearch } from '../../Admin/UserSearch'
 import { useCourseRagIndices } from '../../../hooks/useRagIndices'
 import RagSelector, { RagSelectorDescription } from '../../ChatV2/RagSelector'
-import { ChatMessage } from '../../../../shared/chat'
+import type { ChatMessage } from '../../../../shared/chat'
 
 const Course = () => {
   const [showTeachers, setShowTeachers] = useState(false)
@@ -401,7 +401,7 @@ const Prompts = ({ courseId, chatInstanceId }: { courseId: string; chatInstanceI
 
         <SystemMessage system={system} setSystem={setSystem} disabled={false} creation />
 
-        <Conversation messages={messages} completion="" />
+        <Conversation messages={messages} completion="" toolCalls={{}} isStreaming={false} setActiveToolResult={(_d) => {}} />
 
         <Box sx={{ py: 2, display: 'flex', alignItems: 'start' }}>
           {!mandatoryPromptId ? (