show them citations better on the side

Author: Veikkosuhonen

src/client/components/ChatV2/ChatV2.tsx

@@ -22,6 +22,7 @@ import { SettingsModal } from './SettingsModal'
 import { Link } from 'react-router-dom'
 import { useScrollToBottom } from './useScrollToBottom'
 import { set } from 'lodash'
+import { CitationsBox } from './CitationsBox'
 
 export const ChatV2 = () => {
   const { courseId } = useParams()
@@ -112,6 +113,7 @@ export const ChatV2 = () => {
       }
 
       setMessages((prev: Message[]) => prev.concat({ role: 'assistant', content, citations }))
+      setCitations([])
     } catch (err: any) {
       handleCompletionStreamError(err, fileName)
     } finally {
@@ -203,17 +205,20 @@ export const ChatV2 = () => {
         </Box>
         {courseId ? <Link to={'/v2'}>CurreChat</Link> : <Link to={'/v2/sandbox'}>Ohtu Sandbox</Link>}
       </Box>
-      <Box ref={chatContainerRef}>
-        <Conversation messages={messages} completion={completion} citations={citations} />
-        <ChatBox
-          disabled={false}
-          onSubmit={(message) => {
-            if (message.trim()) {
-              handleSubmit(message)
-              setMessage({ content: '' })
-            }
-          }}
-        />
+      <Box sx={{ display: 'flex' }}>
+        <Box ref={chatContainerRef}>
+          <Conversation messages={messages} completion={completion} citations={citations} />
+          <ChatBox
+            disabled={false}
+            onSubmit={(message) => {
+              if (message.trim()) {
+                handleSubmit(message)
+                setMessage({ content: '' })
+              }
+            }}
+          />
+        </Box>
+        <CitationsBox messages={messages} citations={citations} />
       </Box>
     </Box>
   )

src/client/components/ChatV2/CitationsBox.tsx

@@ -0,0 +1,40 @@
+import { Box, Paper, Typography } from '@mui/material'
+import { FileCitation } from '../../../shared/types'
+import { Message } from '../../types'
+
+const Citation = ({ citation }: { citation: FileCitation }) => {
+  return (
+    <Box>
+      <Typography variant="body2" color="textSecondary">
+        {citation.filename} (Index: {citation.index})
+      </Typography>
+    </Box>
+  )
+}
+
+const MessageCitations = ({ citations }: { citations: FileCitation[] }) => {
+  return (
+    <Box sx={{ mt: 1, fontSize: '0.875rem', color: 'gray' }}>
+      Citations:
+      {citations.map((citation, index) => (
+        <Citation key={index} citation={citation} />
+      ))}
+    </Box>
+  )
+}
+
+export const CitationsBox = ({ messages, citations }: { messages: Message[]; citations: FileCitation[] }) => {
+  const messageCitations = [...messages.map((message) => (Array.isArray(message.citations) ? message.citations : [])), citations]
+
+  console.log('CitationsBox messageCitations', messageCitations)
+
+  return (
+    <Paper>
+      <Box sx={{ width: 300, padding: 2 }}>
+        {messageCitations.map((c, index) => (
+          <MessageCitations key={index} citations={c} />
+        ))}
+      </Box>
+    </Paper>
+  )
+}