chat v2 work begins...

Author: Veikkosuhonen

src/client/Router.tsx

@@ -17,11 +17,13 @@ import NoAccess from './components/NoAccess'
 import Chats from './components/Chats'
 import Statistics from './components/Statistics'
 import Rag from './components/Rag'
+import { ChatV2 } from './components/ChatV2/ChatV2'
 
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path="/" element={<App />}>
       <Route index element={<Chat />} />
+      <Route path="/v2" element={<ChatV2 />} />
       <Route path="/:courseId" element={<Chat />} />
       <Route path="/courses" element={<Courses />} />
       <Route path="/courses/:id" element={<Course />} />

src/client/components/ChatV2/ChatBox.tsx

@@ -0,0 +1,45 @@
+import { Send } from '@mui/icons-material'
+import { IconButton, TextField } from '@mui/material'
+import { useState } from 'react'
+
+export const ChatBox = ({
+  disabled,
+  onSubmit,
+}: {
+  disabled: boolean
+  onSubmit: (message: string) => void
+}) => {
+  const [message, setMessage] = useState<string>('')
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (message.trim()) {
+      onSubmit(message)
+      setMessage('')
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <TextField
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        placeholder="Type your message here..."
+        fullWidth
+        disabled={disabled}
+        variant="outlined"
+        size="small"
+        sx={{ marginBottom: '1rem' }}
+        slotProps={{
+          input: {
+            endAdornment: (
+              <IconButton type="submit" disabled={disabled}>
+                <Send />
+              </IconButton>
+            ),
+          },
+        }}
+      />
+    </form>
+  )
+}

src/client/components/ChatV2/ChatV2.tsx

@@ -0,0 +1,110 @@
+import { useParams } from 'react-router-dom'
+import useCourse from '../../hooks/useCourse'
+import useUserStatus from '../../hooks/useUserStatus'
+import { useRef, useState } from 'react'
+import useLocalStorageState from '../../hooks/useLocalStorageState'
+import { DEFAULT_MODEL } from '../../../config'
+import useInfoTexts from '../../hooks/useInfoTexts'
+import { Message } from '../../types'
+import useRetryTimeout from '../../hooks/useRetryTimeout'
+import { useTranslation } from 'react-i18next'
+import { handleCompletionStreamError } from './error'
+import { Box } from '@mui/material'
+import { Disclaimer } from './Disclaimer'
+import { Conversation } from './Conversation'
+import { ChatBox } from './ChatBox'
+
+export const ChatV2 = () => {
+  const { courseId } = useParams()
+
+  const { course } = useCourse(courseId)
+  const {
+    userStatus,
+    isLoading: statusLoading,
+    refetch: refetchStatus,
+  } = useUserStatus(courseId)
+  const [model, setModel] = useLocalStorageState(DEFAULT_MODEL, 'model')
+  const { infoTexts, isLoading: infoTextsLoading } = useInfoTexts()
+  const [activePromptId, setActivePromptId] = useState('')
+  const [system, setSystem] = useLocalStorageState('general-chat-system', '')
+  const [message, setMessage] = useLocalStorageState('general-chat-current', '')
+  const [messages, setMessages] = useLocalStorageState<Message[]>(
+    'general-chat-messages',
+    []
+  )
+  const inputFileRef = useRef<HTMLInputElement>(null)
+  const [fileName, setFileName] = useState<string>('')
+  const [completion, setCompletion] = useState('')
+  const [streamController, setStreamController] = useState<AbortController>()
+  const [alertOpen, setAlertOpen] = useState(false)
+  const [disallowedFileType, setDisallowedFileType] = useState('')
+  const [tokenUsageWarning, setTokenUsageWarning] = useState('')
+  const [tokenWarningVisible, setTokenWarningVisible] = useState(false)
+  const [modelTemperature, setModelTemperature] = useState(0.5)
+  const [setRetryTimeout, clearRetryTimeout] = useRetryTimeout()
+  const [saveConsent, setSaveConsent] = useState(true)
+
+  const { t, i18n } = useTranslation()
+  const { language } = i18n
+
+  const disclaimerInfo =
+    infoTexts?.find((infoText) => infoText.name === 'disclaimer')?.text[
+      language
+    ] ?? null
+  const systemMessageInfo =
+    infoTexts?.find((infoText) => infoText.name === 'systemMessage')?.text[
+      language
+    ] ?? null
+
+  const processStream = async (stream: ReadableStream) => {
+    try {
+      const reader = stream.getReader()
+
+      let content = ''
+      const decoder = new TextDecoder()
+
+      while (true) {
+        const { value, done } = await reader.read()
+        if (done) break
+
+        const text = decoder.decode(value)
+        setCompletion((prev) => prev + text)
+        content += text
+      }
+
+      setMessages(messages.concat({ role: 'assistant', content }))
+    } catch (err: any) {
+      handleCompletionStreamError(err, fileName)
+    } finally {
+      setStreamController(undefined)
+      setCompletion('')
+      refetchStatus()
+      inputFileRef.current.value = ''
+      setFileName('')
+      clearRetryTimeout()
+    }
+  }
+
+  return (
+    <Box>
+      {disclaimerInfo && <Disclaimer disclaimer={disclaimerInfo} />}
+      <Conversation messages={messages} />
+      <ChatBox
+        disabled={false}
+        onSubmit={(message) => {
+          if (message.trim()) {
+            setMessages(messages.concat({ role: 'user', content: message }))
+            setMessage('')
+            setCompletion('')
+            setStreamController(new AbortController())
+            setRetryTimeout(() => {
+              if (streamController) {
+                streamController.abort()
+              }
+            }, 5000)
+          }
+        }}
+      />
+    </Box>
+  )
+}

src/client/components/ChatV2/Conversation.tsx

@@ -0,0 +1,18 @@
+import { Box } from '@mui/material'
+import { Message } from '../../types'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+const MessageItem = ({ message }: { message: Message }) => (
+  <Box>
+    <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
+  </Box>
+)
+
+export const Conversation = ({ messages }: { messages: Message[] }) => (
+  <Box>
+    {messages.map((message, idx) => (
+      <MessageItem key={idx} message={message} />
+    ))}
+  </Box>
+)

src/client/components/ChatV2/Disclaimer.tsx

@@ -0,0 +1,42 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from '@mui/material'
+import useLocalStorageState from '../../hooks/useLocalStorageState'
+import Markdown from '../Banner/Markdown'
+
+export const Disclaimer = ({ disclaimer }: { disclaimer: string }) => {
+  const [disclaimerClosed, setDisclaimerClosed] = useLocalStorageState<boolean>(
+    'disclaimerClosed',
+    false
+  )
+
+  return (
+    <>
+      <Button
+        variant="outlined"
+        onClick={() => setDisclaimerClosed(false)}
+        size="small"
+      >
+        Disclaimer
+      </Button>
+      <Dialog
+        open={!disclaimerClosed}
+        onClose={() => setDisclaimerClosed(true)}
+      >
+        <DialogTitle>Disclaimer</DialogTitle>
+        <DialogContent>
+          <Markdown>{disclaimer}</Markdown>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDisclaimerClosed(true)} color="primary">
+            Close
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}

src/client/components/ChatV2/error.ts

@@ -0,0 +1,22 @@
+import { t } from 'i18next'
+import { enqueueSnackbar } from 'notistack'
+
+/**
+ * Handle error messages related to completion stream creation
+ */
+export const handleCompletionStreamError = (err: any, file: string) => {
+  if (err?.name === 'AbortError' || !err) return
+
+  const error = err?.response?.data || err.message
+
+  if (error === 'Model maximum context reached' && file) {
+    enqueueSnackbar(t('error:tooLargeFile'), { variant: 'error' })
+  } else if (error === 'Error parsing file' && file) {
+    enqueueSnackbar(t('error:fileParsingError'), { variant: 'error' })
+  } else if (error === 'TimeoutError') {
+    enqueueSnackbar(t('error:waitingForResponse'), { variant: 'error' })
+  } else {
+    console.error('Unexpected error in completion stream: ', error)
+    enqueueSnackbar(t('error:unexpected'), { variant: 'error' })
+  }
+}

src/client/components/ChatV2/util.ts

@@ -0,0 +1,82 @@
+import { Message } from '../../types'
+import { postAbortableStream } from '../../util/apiClient'
+
+interface GetCompletoinStreamProps {
+  system: string
+  messages: Message[]
+  model: string
+  formData: FormData
+  userConsent: boolean
+  modelTemperature: number
+  courseId?: string
+  abortController?: AbortController
+  saveConsent: boolean
+}
+export const getCompletionStream = async ({
+  system,
+  messages,
+  model,
+  formData,
+  userConsent,
+  modelTemperature,
+  courseId,
+  abortController,
+  saveConsent,
+}: GetCompletoinStreamProps) => {
+  const data = {
+    courseId,
+    options: {
+      messages: [
+        {
+          role: 'system',
+          content: system,
+        },
+        ...messages,
+      ],
+      model,
+      userConsent,
+      modelTemperature,
+      saveConsent,
+    },
+  }
+
+  formData.set('data', JSON.stringify(data))
+
+  return postAbortableStream('/ai/stream', formData, abortController)
+}
+
+interface GetCourseCompletionStreamProps {
+  id: string
+  system: string
+  messages: Message[]
+  model: string
+  courseId: string
+  abortController?: AbortController
+}
+export const getCourseCompletionStream = async ({
+  id,
+  system,
+  messages,
+  model,
+  courseId,
+  abortController,
+}: GetCourseCompletionStreamProps) => {
+  const data = {
+    id,
+    courseId,
+    options: {
+      messages: [
+        {
+          role: 'system',
+          content: system,
+        },
+        ...messages,
+      ],
+      model,
+    },
+  }
+  const formData = new FormData()
+  formData.set('data', JSON.stringify(data))
+
+  return postAbortableStream(`/ai/stream/`, formData, abortController)
+}

src/client/hooks/useLocalStorageState.ts

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react'
+
+function useLocalStorageState<T>(
+  key: string,
+  defaultValue: T
+): [T, (value: T) => void] {
+  const [state, setState] = useState<T>(() => {
+    const storedValue = localStorage.getItem(key)
+    return storedValue !== null ? JSON.parse(storedValue) : defaultValue
+  })
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(state))
+  }, [key, state])
+
+  return [state, setState]
+}
+
+export default useLocalStorageState