Refactor Message types

Author: Veikkosuhonen

src/client/components/ChatV2/ChatV2.tsx

@@ -1,15 +1,14 @@
-import { ArrowDownward, ChevronLeft, MenuBookTwoTone, Tune, WidthFull } from '@mui/icons-material'
+import { ArrowDownward, ChevronLeft, Tune } from '@mui/icons-material'
 import HelpIcon from '@mui/icons-material/Help'
 import RestartAltIcon from '@mui/icons-material/RestartAlt'
 
 import { Alert, Box, Drawer, Fab, FormControlLabel, Paper, Switch, Typography, useMediaQuery, useTheme } from '@mui/material'
-import type { TFunction } from 'i18next'
 import { enqueueSnackbar } from 'notistack'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams, useSearchParams } from 'react-router-dom'
 import { DEFAULT_ASSISTANT_INSTRUCTIONS, DEFAULT_MODEL, DEFAULT_MODEL_TEMPERATURE, FREE_MODEL, inProduction, validModels } from '../../../config'
-import type { ToolCallResultEvent } from '../../../shared/chat'
+import type { ChatMessage, Message, ToolCallResultEvent } from '../../../shared/chat'
 import type { RagIndexAttributes } from '../../../shared/types'
 import { getLanguageValue } from '../../../shared/utils'
 import { useIsEmbedded } from '../../contexts/EmbeddedContext'
@@ -22,7 +21,7 @@ import { useCourseRagIndices } from '../../hooks/useRagIndices'
 import useRetryTimeout from '../../hooks/useRetryTimeout'
 import useUserStatus from '../../hooks/useUserStatus'
 import { useAnalyticsDispatch } from '../../stores/analytics'
-import type { Course, Message, Prompt } from '../../types'
+import type { Course, Prompt } from '../../types'
 import Footer from '../Footer'
 import { ChatBox } from './ChatBox'
 import { Conversation } from './Conversation'
@@ -84,7 +83,7 @@ export const ChatV2 = () => {
     'temperature',
   )
 
-  const [messages, setMessages] = useLocalStorageState(`${localStoragePrefix}-chat-messages`, [] as Message[])
+  const [messages, setMessages] = useLocalStorageState(`${localStoragePrefix}-chat-messages`, [] as ChatMessage[])
   const [saveConsent, setSaveConsent] = useLocalStorageState<boolean>('save-consent', false)
 
   // App States
@@ -131,7 +130,7 @@ export const ChatV2 = () => {
   const { processStream, completion, isStreaming, setIsStreaming, toolCalls, streamController } = useChatStream({
     onComplete: ({ message }) => {
       if (message.content.length > 0) {
-        setMessages((prev: Message[]) => prev.concat(message))
+        setMessages((prev: ChatMessage[]) => prev.concat(message))
         refetchStatus()
       }
       chatScroll.autoScroll()
@@ -172,7 +171,7 @@ export const ChatV2 = () => {
     const newMessages = messages.concat({
       role: 'user',
       content: message,
-      attachements: file && fileName ? fileName : undefined,
+      attachments: file && fileName ? fileName : undefined,
     })
 
     setMessages(newMessages)
@@ -618,7 +617,7 @@ const LeftMenu = ({
   ragIndex?: RagIndexAttributes
   setRagIndexId: React.Dispatch<React.SetStateAction<number | undefined>>
   ragIndices?: RagIndexAttributes[]
-  messages: Message[]
+  messages: ChatMessage[]
   activePrompt: Prompt | undefined
   setActivePrompt: (prompt: Prompt | undefined) => void
   currentModel: string

src/client/components/ChatV2/Conversation.tsx

@@ -6,7 +6,7 @@ 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, Message } from '../../types'
+import type { ActivityPeriod } from '../../types'
 import { ConversationSplash } from './general/ConversationSplash'
 import { LoadingMessage } from './general/LoadingMessage'
 import { preprocessMath } from './util'
@@ -17,10 +17,10 @@ import { t } from 'i18next'
 import FormatQuoteIcon from '@mui/icons-material/FormatQuote'
 import useLocalStorageState from '../../hooks/useLocalStorageState'
 import { BlueButton } from './general/Buttons'
-import type { ToolCallResultEvent, ToolCallStatusEvent } from '../../../shared/chat'
+import type { ChatMessage, Message, ToolCallResultEvent, ToolCallStatusEvent } from '../../../shared/chat'
 import { useId, useMemo } from 'react'
 
-const UserMessage = ({ content, attachements }: { content: string; attachements?: string }) => (
+const UserMessage = ({ content, attachments }: { content: string; attachments?: string }) => (
   <Box
     sx={{
       backgroundColor: '#efefef',
@@ -37,7 +37,7 @@ const UserMessage = ({ content, attachements }: { content: string; attachements?
   >
     {content}
 
-    {attachements && (
+    {attachments && (
       <Typography
         variant="body2"
         sx={{
@@ -49,7 +49,7 @@ const UserMessage = ({ content, attachements }: { content: string; attachements?
         }}
       >
         <AttachFileIcon fontSize="small" />
-        {attachements}
+        {attachments}
       </Typography>
     )}
   </Box>
@@ -269,7 +269,7 @@ const AssistantMessage = ({
   )
 }
 
-const MessageItem = ({ message, setActiveToolResult }: { message: Message; setActiveToolResult: (data: ToolCallResultEvent) => void }) => {
+const MessageItem = ({ message, setActiveToolResult }: { message: ChatMessage; setActiveToolResult: (data: ToolCallResultEvent) => void }) => {
   if (message.role === 'assistant') {
     return (
       <Box
@@ -284,7 +284,7 @@ const MessageItem = ({ message, setActiveToolResult }: { message: Message; setAc
   } else {
     return (
       <Box data-sentry-mask data-testid="user-message" sx={{ alignSelf: 'flex-end' }}>
-        <UserMessage content={message.content} attachements={message.attachements ?? ''} />
+        <UserMessage content={message.content} attachments={message.attachments ?? ''} />
       </Box>
     )
   }
@@ -303,7 +303,7 @@ export const Conversation = ({
   courseName?: string
   courseDate?: ActivityPeriod
   conversationRef: React.RefObject<HTMLElement>
-  messages: Message[]
+  messages: ChatMessage[]
   completion: string
   toolCalls: { [callId: string]: ToolCallStatusEvent }
   isStreaming: boolean

src/client/components/ChatV2/ConversationV1.tsx

@@ -3,10 +3,10 @@ import { Box, Button, Paper, Stack, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import type { Message, Role } from '../../types'
 import CopyToClipboardButton from './CopyToClipboardButton'
+import { ChatMessage, ChatRole } from '../../../shared/chat'
 
-export const Response = ({ role, content, setMessage, id }: { role: Role; content: string; setMessage?: any; id: string }) => {
+export const Response = ({ role, content, setMessage, id }: { role: ChatRole; content: string; setMessage?: any; id: string }) => {
   const isUser = role === 'user'
 
   //Formats input string to have correctly formatted spaces and linebreaks.
@@ -57,7 +57,7 @@ const Conversation = ({
   handleStop = () => {},
   setMessage,
 }: {
-  messages: Message[]
+  messages: ChatMessage[]
   completion: string
   handleStop?: () => void
   setMessage?: any

src/client/components/ChatV2/EmailButton.tsx

@@ -6,7 +6,7 @@ import { renderToStaticMarkup } from 'react-dom/server'
 import { enqueueSnackbar } from 'notistack'
 import { useTranslation } from 'react-i18next'
 import useCurrentUser from '../../hooks/useCurrentUser'
-import type { Message } from '../../types'
+import type { ChatMessage } from '../../../shared/chat'
 import { sendEmail } from '../../util/email'
 import { OutlineButtonBlack } from './general/Buttons'
 
@@ -135,16 +135,17 @@ const formatEmailContent = (content: string): string => {
   }
 }
 
-const formatEmail = (messages: Message[], t: any): string => {
+const formatEmail = (messages: ChatMessage[], t: any): string => {
   const emailContent = messages
     .map(({ role, content }) => {
       const formattedContent = role === 'assistant' ? formatEmailContent(content) : escapeHtml(content)
 
       return `
-      <div style="padding: 2rem; ${role === 'user'
+      <div style="padding: 2rem; ${
+        role === 'user'
           ? 'background: #efefef; margin-left: 100px; border-radius: 0.6rem; box-shadow: 0px 2px 2px rgba(0,0,0,0.2); white-space: pre-wrap; word-break: break-word; '
           : 'margin-right: 2rem;'
-        }">
+      }">
         <h3 style="font-style: italic; margin: 0; ${role === 'user' ? 'color: rgba(0, 0, 0, 0.8)' : 'color: #107eab'}">${t(`email:${role}`)}:</h3>
         ${formattedContent}
       </div>
@@ -171,7 +172,7 @@ const formatEmail = (messages: Message[], t: any): string => {
 `
 }
 
-const EmailButton = ({ messages, disabled }: { messages: Message[]; disabled: boolean }) => {
+const EmailButton = ({ messages, disabled }: { messages: ChatMessage[]; disabled: boolean }) => {
   const { t } = useTranslation()
   const { user, isLoading } = useCurrentUser()
 

src/client/components/ChatV2/useChatStream.ts

@@ -1,6 +1,5 @@
 import { useState } from 'react'
-import type { Message } from '../../types'
-import type { ChatEvent, ToolCallResultEvent, ToolCallStatusEvent } from '../../../shared/chat'
+import type { AssistantMessage, ChatEvent, ToolCallResultEvent, ToolCallStatusEvent } from '../../../shared/chat'
 
 type ToolCallState = ToolCallStatusEvent
 
@@ -10,7 +9,7 @@ export const useChatStream = ({
   onError,
   onText,
 }: {
-  onComplete: ({ previousResponseId, message }: { previousResponseId: string | undefined; message: Message }) => void
+  onComplete: ({ previousResponseId, message }: { previousResponseId: string | undefined; message: AssistantMessage }) => void
   onToolCallComplete: (toolResult: ToolCallResultEvent) => void
   onError: (error: unknown) => void
   onText: () => void

src/client/components/ChatV2/util.ts

@@ -1,10 +1,10 @@
-import type { Message } from '../../types'
+import type { ChatMessage } from '../../../shared/chat'
 import { postAbortableStream } from '../../util/apiClient'
 
 interface GetCompletionStreamProps {
   courseId?: string
   assistantInstructions: string
-  messages: Message[]
+  messages: ChatMessage[]
   model: string
   formData: FormData
   ragIndexId?: number
@@ -55,7 +55,7 @@ export const getCompletionStream = async ({
 interface GetCompletionStreamPropsV3 {
   courseId?: string
   systemMessage: string
-  messages: Message[]
+  messages: ChatMessage[]
   model: string
   formData: FormData
   ragIndexId?: number

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

@@ -10,7 +10,7 @@ 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, Responsebility, User } from '../../../types'
+import type { Responsebility, User } from '../../../types'
 import Conversation from '../../ChatV2/ConversationV1'
 import SystemMessage from '../../ChatV2/SystemMessage'
 import Rag from '../../Rag/Rag'
@@ -25,6 +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'
 
 const Course = () => {
   const [showTeachers, setShowTeachers] = useState(false)
@@ -325,7 +326,7 @@ const Prompts = ({ courseId, chatInstanceId }: { courseId: string; chatInstanceI
   const { ragIndices } = useCourseRagIndices(courseId)
   const [name, setName] = useState('')
   const [system, setSystem] = useState('')
-  const [messages, setMessages] = useState<MessageType[]>([])
+  const [messages, setMessages] = useState<ChatMessage[]>([])
   const [hidden, setHidden] = useState(false)
   const [mandatory, setMandatory] = useState(false)
   const [ragIndexId, setRagIndexId] = useState<number | undefined>(undefined)

src/client/hooks/usePromptMutation.ts

@@ -1,16 +1,17 @@
 import { useMutation } from '@tanstack/react-query'
 
-import { Message, Prompt } from '../types'
+import type { Prompt } from '../types'
 import queryClient from '../util/queryClient'
 import { queryKey } from './usePrompts'
 import apiClient from '../util/apiClient'
+import type { ChatMessage } from '../../shared/chat'
 
 interface NewPromptData {
   chatInstanceId: string
   type: 'CHAT_INSTANCE' | 'PERSONAL' | 'RAG_INDEX'
   name: string
   systemMessage: string
-  messages: Message[]
+  messages: ChatMessage[]
   hidden: boolean
   mandatory: boolean
   ragIndexId: number | undefined

src/client/types.ts

@@ -1,18 +1,12 @@
-import type { ToolCallResultEvent, ToolCallStatusEvent } from '../shared/chat'
-import { ChatToolDef } from '../shared/tools'
+import type { ChatMessage } from '../shared/chat'
 import type { UserPreferences } from '../shared/user'
 
-export type SetState<T> = React.Dispatch<React.SetStateAction<T>>
-
-export type Role = 'system' | 'assistant' | 'user'
+/*
+ * Important: This file contains types used in the client, but we should consider moving them to shared.
+ * Before adding new types, consider whether they are already defined in shared or if they should be moved there.
+ */
 
-export interface Message {
-  role: Role
-  content: string
-  error?: string
-  attachements?: string
-  toolCalls?: Record<string, ToolCallResultEvent>
-}
+export type SetState<T> = React.Dispatch<React.SetStateAction<T>>
 
 interface Term {
   label: Locales[]
@@ -65,10 +59,10 @@ export type Prompt = {
   name: string
   chatInstanceId: string
   systemMessage: string
-  messages: Message[]
+  messages: ChatMessage[]
   hidden: boolean
   mandatory: boolean
-  type: 'CHAT_INSTANCE' | 'PERSONAL' | 'RAG_INDEX'
+  type: 'CHAT_INSTANCE' | 'PERSONAL'
   createdAt: string
 }
 

src/server/routes/ai/fileParsing.ts

@@ -1,7 +1,7 @@
-import { Message } from '../../../shared/llmTypes'
+import type { ChatMessage } from '../../../shared/chat'
 import { pdfToText } from '../../util/pdfToText'
 
-export const parseFileAndAddToLastMessage = async (messages: Message[], file: Express.Multer.File) => {
+export const parseFileAndAddToLastMessage = async (messages: ChatMessage[], file: Express.Multer.File) => {
   let fileContent = ''
 
   const textFileTypes = ['text/plain', 'text/html', 'text/css', 'text/csv', 'text/markdown', 'text/md']