Skip to content

Commit 4e9360b

Browse files
sutigitsutigit
committed
update layout
1 parent badcc21 commit 4e9360b

File tree

8 files changed

+175
-104
lines changed

8 files changed

+175
-104
lines changed

‎src/client/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { ThemeProvider } from '@mui/material/styles'
66
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
77
import { fi } from 'date-fns/locale'
88
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
9-
import { Box, Button, Container, CssBaseline, Snackbar } from '@mui/material'
9+
import { Box, Button, CssBaseline, Snackbar } from '@mui/material'
1010

1111
import { PUBLIC_URL } from '../config'
1212
import { User } from './types'
@@ -97,7 +97,7 @@ const App = () => {
9797
<SnackbarProvider preventDuplicate>
9898
<Box minHeight="100vh" height="100vh" display="flex" flexDirection="column" ref={appRef}>
9999
<NavBar />
100-
<Box component="main" sx={{ flex: 1 }} width="100%">
100+
<Box component="main" sx={{ flex: 1 }}>
101101
<Outlet />
102102
</Box>
103103
<Footer />

‎src/client/components/ChatV2/ChatBox.tsx‎

Lines changed: 31 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Send } from '@mui/icons-material'
2-
import { Box, Container, IconButton, Paper, TextField, Typography } from '@mui/material'
2+
import { Box, IconButton, TextField, Typography } from '@mui/material'
33
import { useEffect, useState } from 'react'
44
import useUserStatus from '../../hooks/useUserStatus'
55
import { useParams } from 'react-router-dom'
@@ -20,27 +20,18 @@ export const ChatBox = ({ disabled, onSubmit }: { disabled: boolean; onSubmit: (
2020
}
2121
}
2222

23-
// Work in progress from Matias. Commented by Ben
24-
// useEffect(() => {
25-
// console.log('userStatus', userStatus)
26-
// })
27-
2823
if (statusLoading) {
2924
return <p>loading</p>
3025
}
3126
return (
32-
<Container
33-
disableGutters
27+
<Box
3428
sx={{
35-
position: 'fixed',
36-
bottom: '8rem',
29+
width: '60%',
30+
minWidth: 300,
31+
margin: 'auto',
3732
}}
3833
>
39-
<Paper
40-
sx={{
41-
marginBottom: '1rem',
42-
}}
43-
elevation={3}
34+
<Box
4435
component="form"
4536
onSubmit={handleSubmit}
4637
onKeyDown={(e) => {
@@ -50,37 +41,37 @@ export const ChatBox = ({ disabled, onSubmit }: { disabled: boolean; onSubmit: (
5041
}
5142
}}
5243
>
53-
<TextField
54-
value={message}
55-
onChange={(e) => setMessage(e.target.value)}
56-
placeholder="Type your message here..."
57-
fullWidth
58-
multiline
59-
disabled={disabled}
60-
variant="standard"
61-
sx={{ padding: '0.5rem' }}
62-
slotProps={{
63-
input: {
64-
sx: {
65-
padding: '0.5rem',
66-
fontSize: '1.5rem',
67-
// lineHeight: '1.5rem',
44+
<Box sx={{ border: '1px solid rgba(0,0,0,0.4)', borderRadius: '0.2rem' }}>
45+
46+
<TextField
47+
value={message}
48+
onChange={(e) => setMessage(e.target.value)}
49+
placeholder="Kirjoita viestisi tähän..."
50+
fullWidth
51+
multiline
52+
maxRows={8}
53+
disabled={disabled}
54+
variant="standard"
55+
sx={{ padding: '0.5rem 1rem' }}
56+
slotProps={{
57+
input: {
58+
disableUnderline: true,
59+
endAdornment: (
60+
<IconButton disabled={disabled} type="submit">
61+
<Send />
62+
</IconButton>
63+
),
6864
},
69-
endAdornment: (
70-
<IconButton disabled={disabled} type="submit">
71-
<Send />
72-
</IconButton>
73-
),
74-
},
75-
}}
76-
/>
65+
}}
66+
/>
67+
</Box>
7768

7869
<Box>
7970
<Typography variant="body1" style={{ padding: '0.5rem', fontSize: '0.875rem' }}>
8071
{userStatus.usage} / {userStatus.limit} {t('status:tokensUsed')}
8172
</Typography>
8273
</Box>
83-
</Paper>
84-
</Container>
74+
</Box>
75+
</Box>
8576
)
8677
}

‎src/client/components/ChatV2/ChatV2.tsx‎

Lines changed: 62 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,13 @@ import { FileSearchResult, ResponseStreamEventData } from '../../../shared/types
1010
import useRetryTimeout from '../../hooks/useRetryTimeout'
1111
import { useTranslation } from 'react-i18next'
1212
import { handleCompletionStreamError } from './error'
13-
import { Box, Button, IconButton } from '@mui/material'
13+
14+
import { Box, Button, IconButton, Typography } from '@mui/material'
15+
import SettingsIcon from '@mui/icons-material/Settings'
16+
import AddCommentIcon from '@mui/icons-material/AddComment'
17+
import EmailIcon from '@mui/icons-material/Email'
18+
import DeleteIcon from '@mui/icons-material/Delete'
19+
1420
import { Disclaimer } from './Disclaimer'
1521
import { Conversation } from './Conversation'
1622
import { ChatBox } from './ChatBox'
@@ -22,6 +28,9 @@ import { Link } from 'react-router-dom'
2228
// import { useScrollToBottom } from './useScrollToBottom'
2329
import { CitationsBox } from './CitationsBox'
2430
import { useRagIndices } from '../../hooks/useRagIndices'
31+
import CourseOption from './generics/CourseOption'
32+
import SettingsButton from './generics/SettingsButton'
33+
2534

2635
export const ChatV2 = () => {
2736
const { courseId } = useParams()
@@ -84,7 +93,8 @@ export const ChatV2 = () => {
8493
let parsedChunk: ResponseStreamEventData = null
8594
try {
8695
parsedChunk = JSON.parse(chunk)
87-
} catch (_e) {
96+
} catch (e: any) {
97+
console.error('Error', e)
8898
console.error('Could not parse the chunk:', chunk)
8999
}
90100

@@ -196,51 +206,63 @@ export const ChatV2 = () => {
196206
flex: 1,
197207
display: 'flex',
198208
flexDirection: 'row',
199-
p: 0,
209+
height: '100%',
200210
}}
201211
>
202212
{/* Course chats columns */}
203-
<Box sx={{ borderRight: '1px solid lightgray' }}>
204-
<div>Course Chats</div>
213+
<Box sx={{ position: 'relative', flex: 1, borderRight: '1px solid lightgray' }}>
214+
<Box sx={{ position: 'sticky', left: 0, top: 0, padding: '2rem 1.5rem' }}>
215+
<Typography variant="h6" fontWeight="light">
216+
Currechat
217+
</Typography>
218+
<CourseOption link="/v2">Basic</CourseOption>
219+
220+
<Typography variant="h6" fontWeight="light" sx={{ mt: '2rem' }}>
221+
Kurssichatit
222+
</Typography>
223+
<CourseOption link="/v2/sandbox">Ohtu sandbox</CourseOption>
224+
</Box>
205225
</Box>
206226

227+
{/* Chat view */}
207228
<Box
208229
sx={{
209230
flex: 4,
210231
position: 'relative',
211232
display: 'flex',
212233
flexDirection: 'column',
234+
height: '100%',
213235
}}
214236
>
215-
<SettingsModal
216-
open={settingsModalOpen}
217-
setOpen={setSettingsModalOpen}
218-
model={model.name}
219-
setModel={(name) => setModel({ name })}
220-
setRagIndex={setRagIndexId}
221-
ragIndices={ragIndices}
222-
currentRagIndex={ragIndex}
223-
/>
237+
224238
<Box
225239
sx={{
240+
position: 'sticky',
241+
top: 0,
226242
display: 'flex',
227-
justifyContent: 'space-between',
243+
justifyContent: 'center',
228244
alignItems: 'center',
229-
flexShrink: 0,
245+
gap: '1.2rem',
246+
backgroundColor: 'white',
247+
padding: '1.8rem 1rem 0.8rem 1rem',
230248
}}
231249
>
232-
<Box sx={{ display: 'flex', gap: '1rem' }}>
233-
{disclaimerInfo && <Disclaimer disclaimer={disclaimerInfo} />}
250+
{/* {disclaimerInfo && <Disclaimer disclaimer={disclaimerInfo} />}
234251
<SystemPrompt content={system.content} setContent={(content) => setSystem({ content })} />
235252
<Button onClick={handleReset}>Reset</Button>
236253
<IconButton onClick={() => setSettingsModalOpen(true)} title="Settings">
237254
<Settings></Settings>
238-
</IconButton>
239-
</Box>
240-
{courseId ? <Link to={'/v2'}>CurreChat</Link> : <Link to={'/v2/sandbox'}>Ohtu Sandbox</Link>}
255+
</IconButton> */}
256+
<SettingsButton startIcon={<SettingsIcon />}>Keskustelun asetukset</SettingsButton>
257+
{/* <SettingsButton startIcon={<AddCommentIcon />}>Alustus</SettingsButton> */}
258+
<SettingsButton startIcon={<EmailIcon />}>Tallenna sähköpostina</SettingsButton>
259+
<SettingsButton startIcon={<DeleteIcon />}>Tyhjennä</SettingsButton>
260+
{/* {courseId ? <Link to={'/v2'}>CurreChat</Link> : <Link to={'/v2/sandbox'}>Ohtu Sandbox</Link>} */}
241261
</Box>
242-
<Box sx={{ flex: 1, display: 'flex', width: '100%', overflow: 'hidden' }}>
243-
<Conversation messages={messages} completion={completion} fileSearchResult={fileSearchResult} />
262+
263+
<Conversation messages={messages} completion={completion} fileSearchResult={fileSearchResult} />
264+
265+
<Box sx={{ position: 'sticky', bottom: 0, backgroundColor: 'white', paddingBottom: '1.2rem' }}>
244266
<ChatBox
245267
disabled={false}
246268
onSubmit={(message) => {
@@ -254,12 +276,23 @@ export const ChatV2 = () => {
254276
</Box>
255277

256278
{/* Annotations columns */}
257-
{/* <Box sx={{ flex: 1 }}></Box> */}
258-
{ragIndex && (
259-
<Box flex={1}>
260-
<CitationsBox messages={messages} fileSearchResult={fileSearchResult} />
261-
</Box>
262-
)}
279+
<Box sx={{ flex: 1, borderLeft: '1px solid lightgray', position: 'relative' }}>
280+
{ragIndex && (
281+
<Box sx={{ position: 'sticky', top: 0 }}>
282+
<CitationsBox messages={messages} fileSearchResult={fileSearchResult} />
283+
</Box>
284+
)}
285+
</Box>
286+
287+
<SettingsModal
288+
open={settingsModalOpen}
289+
setOpen={setSettingsModalOpen}
290+
model={model.name}
291+
setModel={(name) => setModel({ name })}
292+
setRagIndex={setRagIndexId}
293+
ragIndices={ragIndices}
294+
currentRagIndex={ragIndex}
295+
/>
263296
</Box>
264297
)
265298
}

‎src/client/components/ChatV2/Conversation.tsx‎

Lines changed: 11 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,31 @@
1-
import { Box, Paper } from '@mui/material'
1+
import { Box, Typography } from '@mui/material'
22
import { Message } from '../../types'
33
import ReactMarkdown from 'react-markdown'
44
import remarkGfm from 'remark-gfm'
5-
import { Assistant } from '@mui/icons-material'
65
import { FileSearchResult } from '../../../shared/types'
6+
import { PöhinäLogo } from './generics/PohinaLogo'
77

88
const MessageItem = ({ message }: { message: Message }) => (
9-
<Paper
10-
elevation={message.role === 'assistant' ? 0 : 3}
11-
sx={{
12-
my: '2rem',
13-
ml: message.role === 'assistant' ? '0' : '2rem',
14-
mr: message.role === 'assistant' ? '2rem' : '0',
15-
p: '1rem',
16-
}}
17-
>
18-
<ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
19-
</Paper>
20-
)
21-
22-
const PöhinäLogo = () => (
239
<Box
2410
sx={{
25-
display: 'flex',
26-
justifyContent: 'center',
27-
alignItems: 'center',
28-
height: '40rem',
29-
transition: 'opacity 0.6s, transform 0.6s',
30-
opacity: 1,
31-
transform: 'scale(1)',
32-
animation: 'fadeInScale 0.6s ease',
33-
'@keyframes fadeInScale': {
34-
from: { opacity: 0, transform: 'scale(0.8)' },
35-
to: { opacity: 1, transform: 'scale(1)' },
36-
},
11+
alignSelf: message.role === 'assistant' ? 'flex-start' : 'flex-end',
12+
backgroundColor: message.role === 'assistant' ? 'transparent' : '#efefef',
13+
padding: '0 1.5rem',
14+
borderRadius: '0.6rem',
3715
}}
3816
>
39-
<Assistant sx={{ fontSize: 160, color: 'toskaPrimary.main' }} />
17+
<Typography>
18+
<ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
19+
</Typography>
4020
</Box>
4121
)
4222

4323
export const Conversation = ({ messages, completion, fileSearchResult }: { messages: Message[]; completion: string; fileSearchResult: FileSearchResult }) => (
44-
<Box sx={{ flex: 1, overflowY: 'auto', gap: 2 }}>
24+
<Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 3, width: '70%', minWidth: 600, margin: 'auto', paddingBottom: '5rem' }}>
25+
{messages.length === 0 && <PöhinäLogo />}
4526
{messages.map((message, idx) => (
4627
<MessageItem key={idx} message={message} />
4728
))}
4829
{completion && <MessageItem message={{ role: 'assistant', content: completion, fileSearchResult }} />}
49-
{messages.length === 0 && <PöhinäLogo />}
5030
</Box>
5131
)

‎src/client/components/ChatV2/generics/CourseOption.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import type { ReactNode } from 'react'
2+
import { Button } from '@mui/material'
3+
4+
export default function CourseOption({ children, link }: { children: ReactNode; link: string }) {
5+
return (
6+
<Button
7+
variant="text"
8+
fullWidth
9+
sx={{
10+
justifyContent: 'flex-start',
11+
color: 'black',
12+
cursor: 'pointer',
13+
borderRadius: '0.5rem',
14+
padding: '0.4rem 1rem',
15+
transitionDuration: '200ms',
16+
textTransform: 'none',
17+
}}
18+
href={link}
19+
>
20+
{children}
21+
</Button>
22+
)
23+
}

‎src/client/components/ChatV2/generics/PohinaLogo.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Box, Typography } from '@mui/material'
2+
import { Assistant } from '@mui/icons-material'
3+
4+
export const PöhinäLogo = () => (
5+
<Box
6+
sx={{
7+
display: 'flex',
8+
justifyContent: 'center',
9+
alignItems: 'center',
10+
height: '40rem',
11+
transition: 'opacity 0.6s, transform 0.6s',
12+
opacity: 1,
13+
transform: 'scale(1)',
14+
animation: 'fadeInScale 0.6s ease',
15+
'@keyframes fadeInScale': {
16+
from: { opacity: 0, transform: 'scale(0.8)' },
17+
to: { opacity: 1, transform: 'scale(1)' },
18+
},
19+
}}
20+
>
21+
<Assistant sx={{ fontSize: 160, color: '#efefef', marginBottom: '2rem' }} />
22+
<Typography>Aloite keskustelu läettämällä viesti...</Typography>
23+
</Box>
24+
)

0 commit comments

Comments
 (0)