Skip to content

Commit d7398cc

Browse files
Merge branch 'main' into add-teacher-to-chat-instance-manual
2 parents e4efe0e + 8060ef2 commit d7398cc

File tree

30 files changed

+328
-67
lines changed

30 files changed

+328
-67
lines changed

src/client/App.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { AnalyticsProvider } from './stores/analytics'
1818
import useTheme from './theme'
1919
import type { User } from './types'
2020
import { useUpdateUrlLang } from './hooks/useUpdateUrlLang'
21+
import Styles from './GlobalStyles'
2122

2223
const hasAccess = (user: User | null | undefined, courseId?: string) => {
2324
if (!user) return false
@@ -95,6 +96,7 @@ const App = () => {
9596
return (
9697
<ThemeProvider theme={theme}>
9798
<CssBaseline />
99+
<Styles />
98100
<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={fi}>
99101
<SnackbarProvider preventDuplicate autoHideDuration={15_000}>
100102
<EmbeddedProvider>

src/client/GlobalStyles.tsx

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { GlobalStyles } from '@mui/material'
2+
3+
/* Quick scrollbar design using https://scrollbar.app/
4+
5+
body {
6+
--sb-track-color: #e0e0e0;
7+
--sb-thumb-color: #000000;
8+
--sb-size: 6px;
9+
}
10+
11+
body::-webkit-scrollbar {
12+
width: var(--sb-size)
13+
}
14+
15+
body::-webkit-scrollbar-track {
16+
background: var(--sb-track-color);
17+
border-radius: 3px;
18+
}
19+
20+
body::-webkit-scrollbar-thumb {
21+
background: var(--sb-thumb-color);
22+
border-radius: 3px;
23+
24+
}
25+
26+
@supports not selector(::-webkit-scrollbar) {
27+
body {
28+
scrollbar-color: var(--sb-thumb-color)
29+
var(--sb-track-color);
30+
}
31+
}
32+
33+
*/
34+
35+
export default function Styles() {
36+
return (
37+
<GlobalStyles
38+
styles={{
39+
body: {
40+
'--sb-track-color': 'transparent',
41+
'--sb-thumb-color': '#000000',
42+
'--sb-thumb-hover-color': '#333333',
43+
'--sb-size': '6px',
44+
},
45+
'*::-webkit-scrollbar': {
46+
width: 'var(--sb-size)',
47+
},
48+
'*::-webkit-scrollbar-thumb': {
49+
backgroundColor: 'var(--sb-thumb-color)',
50+
borderRadius: 'var(--sb-size)',
51+
},
52+
'*::-webkit-scrollbar-thumb:hover': {
53+
backgroundColor: 'var(--sb-thumb-hover-color)',
54+
},
55+
'*::-webkit-scrollbar-track': {
56+
backgroundColor: 'var(--sb-track-color)',
57+
},
58+
'*': {
59+
scrollbarWidth: 'thin',
60+
scrollbarColor: 'var(--sb-thumb-color) var(--sb-track-color)',
61+
},
62+
}}
63+
/>
64+
)
65+
}

src/client/Router.tsx

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,43 @@
1-
import { RouterProvider, Route, createBrowserRouter, createRoutesFromElements } from 'react-router-dom'
21
import * as Sentry from '@sentry/react'
2+
import { createBrowserRouter, createRoutesFromElements, Navigate, Route, RouterProvider, useParams } from 'react-router-dom'
33

44
import { PUBLIC_URL } from '../config'
55
import App from './App'
66
import Admin from './components/Admin'
77
import Chat from './components/Chat'
8+
import Chats from './components/Chats'
9+
import { ChatV2 } from './components/ChatV2/ChatV2'
810
import Courses from './components/Courses'
911
import Course from './components/Courses/Course'
12+
import { NotFound } from './components/common/NotFound'
13+
import { ErrorPage } from './components/ErrorPage'
1014
import NoAccess from './components/NoAccess'
11-
import Chats from './components/Chats'
12-
import Statistics from './components/Statistics'
1315
import Rag from './components/Rag/Rag'
14-
import { ChatV2 } from './components/ChatV2/ChatV2'
15-
import { RagIndex } from './components/Rag/RagIndex'
1616
import { RagFile } from './components/Rag/RagFile'
17-
import { NotFound } from './components/common/NotFound'
18-
import { ErrorPage } from './components/ErrorPage'
17+
import { RagIndex } from './components/Rag/RagIndex'
18+
import Statistics from './components/Statistics'
19+
import useCurrentUser from './hooks/useCurrentUser'
1920

2021
const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouterV6(createBrowserRouter)
2122

23+
const PreferenceRedirect = () => {
24+
const { user } = useCurrentUser()
25+
const { courseId } = useParams()
26+
const chatVersion = user?.preferences?.chatVersion ?? 1
27+
return <Navigate to={chatVersion === 1 ? '/v1' : '/v2' + (courseId ? `/${courseId}` : '')} replace />
28+
}
29+
2230
const router = sentryCreateBrowserRouter(
2331
createRoutesFromElements(
2432
<Route path="/" element={<App />} ErrorBoundary={ErrorPage}>
25-
<Route index element={<Chat />} />
33+
<Route index element={<PreferenceRedirect />} />
34+
<Route path="/v1" element={<Chat />} />
2635
<Route path="/v2" element={<ChatV2 />} />
36+
37+
<Route path="/:courseId" element={<PreferenceRedirect />} />
2738
<Route path="/v2/:courseId" element={<ChatV2 />} />
28-
<Route path="/:courseId" element={<Chat />} />
39+
<Route path="/v1/:courseId" element={<Chat />} />
40+
2941
<Route path="/courses" element={<Courses />} />
3042
<Route path="/courses/:id/*" element={<Course />} />
3143
<Route path="/admin/*" element={<Admin />} />

src/client/components/Chat/index.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ import useUserStatus from '../../hooks/useUserStatus'
2121
import { handleCompletionStreamError } from './error'
2222
import PromptSelector from './PromptSelector'
2323
import TokenUsageWarning from './TokenUsageWarning'
24+
import { TestUseInfoV1 } from '../ChatV2/TestUseInfo'
25+
import useCurrentUser from '../../hooks/useCurrentUser'
2426

2527
const WAIT_FOR_STREAM_TIMEOUT = 4000
2628
const ALLOWED_FILE_TYPES = ['text/plain', 'text/html', 'text/css', 'text/csv', 'text/markdown', 'text/md', 'application/pdf']
@@ -82,6 +84,7 @@ const Chat = () => {
8284
// Null when in general chat
8385
const { courseId } = useParams()
8486

87+
const { user } = useCurrentUser()
8588
const { data: course } = useCourse(courseId)
8689
const { userStatus, refetch: refetchStatus } = useUserStatus(courseId)
8790

@@ -363,6 +366,7 @@ const Chat = () => {
363366
<Container sx={{ mt: '4rem', mb: '10rem' }} maxWidth="xl">
364367
<Banner disclaimer={disclaimer} />
365368
{course && <CourseInfo course={course} />}
369+
{(user?.preferences?.chatVersion ?? 1) !== 1 && <TestUseInfoV1 />}
366370
<Box sx={{ mb: 3 }} />
367371

368372
{hasPrompts && <PromptSelector prompts={course.prompts} activePrompt={activePromptId} setActivePrompt={handleChangePrompt} />}

src/client/components/ChatV2/Annotations.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,6 @@ const Annotations = ({ fileSearchResult, setShowAnnotations }: { fileSearchResul
206206
display: 'flex',
207207
flexDirection: 'column',
208208
overflowY: 'scroll',
209-
scrollBarWidth: 'none',
210209
}}
211210
>
212211
<Box

src/client/components/ChatV2/ChatV2.tsx

Lines changed: 42 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import { useAnalyticsDispatch } from '../../stores/analytics'
3333
import EmailButton from './EmailButton'
3434
import { MenuBookTwoTone, Tune } from '@mui/icons-material'
3535
import { useChatScroll } from '../../hooks/useChatScroll'
36+
import { TestUseInfoV2 } from './TestUseInfo'
3637

3738
function useLocalStorageStateWithURLDefault(key: string, defaultValue: string, urlKey: string) {
3839
const [value, setValue] = useLocalStorageState(key, defaultValue)
@@ -196,7 +197,6 @@ export const ChatV2 = () => {
196197
setIsStreaming(true)
197198

198199
try {
199-
console.log('instructions are: ' + assistantInstructions)
200200
const { tokenUsageAnalysis, stream } = await getCompletionStream({
201201
assistantInstructions: assistantInstructions,
202202
messages: newMessages,
@@ -399,31 +399,44 @@ export const ChatV2 = () => {
399399
ref={chatContainerRef}
400400
sx={{
401401
flex: 3,
402-
// minWidth: 800,
403402
width: '100%',
404403
display: 'flex',
405404
position: 'relative',
406405
flexDirection: 'column',
407406
height: '100%',
407+
overflowY: 'visible',
408+
// Padding for navbar
409+
paddingTop: !isEmbeddedMode ? '4rem' : '0',
408410
}}
409411
>
410412
<Box
411-
sx={{
412-
// display: 'flex',
413-
// flexDirection: 'column',
413+
sx={(theme) => ({
414414
height: '80vh',
415-
width: '80%',
416-
maxWidth: '80%',
415+
416+
[theme.breakpoints.down('sm')]: {
417+
width: '95%',
418+
maxWidth: '95%',
419+
},
420+
421+
[theme.breakpoints.down('md')]: {
422+
width: '90%',
423+
maxWidth: '90%',
424+
},
425+
426+
[theme.breakpoints.up('md')]: {
427+
width: '80%',
428+
maxWidth: '80%',
429+
},
430+
417431
margin: 'auto',
418-
paddingTop: '5rem',
419-
paddingBottom: '2.5rem',
432+
paddingRight: '1rem',
433+
paddingTop: '1rem',
420434
overflow: 'hidden',
421-
overflowY: 'scroll',
422-
scrollbarWidth: 'none',
423-
}}
435+
overflowY: 'auto',
436+
})}
424437
ref={scrollRef}
425438
>
426-
<Alert severity="info">{t('chat:testUseInfo')}</Alert>
439+
{user?.preferences?.chatVersion !== 2 && <TestUseInfoV2 />}
427440

428441
{course?.saveDiscussions && (
429442
<Paper variant="outlined" sx={{ padding: 2, mt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
@@ -462,8 +475,22 @@ export const ChatV2 = () => {
462475
sx={{
463476
position: 'sticky',
464477
bottom: 0,
465-
width: '80%',
466-
// minWidth: 750,
478+
479+
[theme.breakpoints.down('sm')]: {
480+
width: '95%',
481+
maxWidth: '95%',
482+
},
483+
484+
[theme.breakpoints.down('md')]: {
485+
width: '90%',
486+
maxWidth: '90%',
487+
},
488+
489+
[theme.breakpoints.up('md')]: {
490+
width: '80%',
491+
maxWidth: '80%',
492+
},
493+
467494
margin: 'auto',
468495
}}
469496
>
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Alert, AlertTitle, Box } from '@mui/material'
2+
import { usePreferencesUpdateMutation } from '../../hooks/usePreferencesUpdateMutation'
3+
import { useTranslation } from 'react-i18next'
4+
import { OutlineButtonBlue } from './generics/Buttons'
5+
6+
export const TestUseInfoV2 = () => {
7+
const { t } = useTranslation()
8+
const updatePreferences = usePreferencesUpdateMutation()
9+
10+
return (
11+
<Alert severity="info">
12+
<AlertTitle>{t('testUse:titleV2')}</AlertTitle>
13+
<OutlineButtonBlue onClick={() => updatePreferences.mutate({ chatVersion: 2 })}>{t('testUse:buttonV2')}</OutlineButtonBlue>
14+
</Alert>
15+
)
16+
}
17+
18+
export const TestUseInfoV1 = () => {
19+
const { t } = useTranslation()
20+
const updatePreferences = usePreferencesUpdateMutation()
21+
22+
return (
23+
<Alert severity="info">
24+
<AlertTitle>{t('testUse:titleV1')}</AlertTitle>
25+
<OutlineButtonBlue onClick={() => updatePreferences.mutate({ chatVersion: 1 })}>{t('testUse:buttonV1')}</OutlineButtonBlue>
26+
</Alert>
27+
)
28+
}

src/client/components/Chats/index.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,6 @@ const Chats = () => {
6868
<MuiLink component={RouterLink} to={`/${chat.courseId}`}>
6969
<Typography variant="h6">{getLanguageValue(chat.name, language)}</Typography>
7070
</MuiLink>
71-
<MuiLink component={RouterLink} to={`/v2/${chat.courseId}`}>
72-
<Typography variant="h6">{getLanguageValue(chat.name, language)} (v2 UI)</Typography>
73-
</MuiLink>
7471
</TableCell>
7572
</TableRow>
7673
))}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ const Prompt = ({ prompt, handleDelete, mandatoryPromptId }: { prompt: PromptTyp
8181
{t('course:directPromptLink')}
8282
</Link>
8383
<Tooltip title={t('course:copyDirectPromptLinkInfo')} placement="right">
84-
<IconButton size="small">
84+
<IconButton size="small" onClick={() => navigator.clipboard.writeText(directLink)}>
8585
<ContentCopyOutlined fontSize="small" />
8686
</IconButton>
8787
</Tooltip>

src/client/components/ErrorPage.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@ export const ErrorPage = () => {
1111
const { t } = useTranslation()
1212

1313
React.useEffect(() => {
14+
Sentry.addBreadcrumb({
15+
category: 'errorPage',
16+
message: error.message,
17+
level: 'fatal',
18+
})
1419
Sentry.captureException(error)
1520
}, [error])
1621

0 commit comments

Comments
 (0)