Skip to content

Commit baaaa0f

Browse files
sutigitsutigit
committed
mockup annotations attachement
1 parent e84d776 commit baaaa0f

File tree

2 files changed

+53
-34
lines changed

2 files changed

+53
-34
lines changed

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

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -260,6 +260,7 @@ export const ChatV2 = () => {
260260
flexDirection: 'row',
261261
height: '100%',
262262
minWidth: 1400,
263+
overflowX: 'clip',
263264
}}
264265
>
265266
{/* Chat selection column -------------------------------------------------------------------------------------------*/}
@@ -370,29 +371,34 @@ export const ChatV2 = () => {
370371
</Box>
371372

372373
{/* Annotations columns ----------------------------------------------------------------------------------------------------- */}
373-
<Box sx={{ position: 'relative', flex: 1 }}>
374+
<Box
375+
sx={{
376+
position: 'relative',
377+
flex: 1,
378+
transform: course ? 'translateX(0%)' : 'translateX(100%)',
379+
transition: 'transform 200ms ease-in-out 200ms', // 0.2s duration, no delay
380+
}}
381+
>
374382
<Box sx={{ position: 'sticky', top: 80, padding: '4rem 2rem 2rem 0' }}>
375383
{/* {ragIndex && ( */}
376384
{course && (
377385
<Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
378386
<Typography variant="h6">Lähteet</Typography>
379-
<Box sx={{ flex: 1, borderRadius: '1rem', backgroundColor: 'rgba(0,0,0,0.0)', display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
380-
{/* <CitationsBox messages={messages} fileSearchResult={fileSearchResult} /> */}
381-
<Box sx={{ borderLeft: '4px solid #3f51b5', paddingLeft: '1rem', backgroundColor: 'white', borderRadius: '4px' }}>
382-
<Typography variant="body2" color="textSecondary">
383-
Make sure your ref is attached to a real DOM element (component="div" for MUI Box). Only access .current.clientHeight after the DOM is rendered...
384-
</Typography>
385-
</Box>
386-
<Box sx={{ borderLeft: '4px solid #3f51b5', paddingLeft: '1rem', backgroundColor: 'white', borderRadius: '4px' }}>
387-
<Typography variant="body2" color="textSecondary">
388-
Make sure your ref is attached to a real DOM element (component="div" for MUI Box). Only access .current.clientHeight after the DOM is rendered...
389-
</Typography>
390-
</Box>
391-
<Box sx={{ borderLeft: '4px solid #3f51b5', paddingLeft: '1rem', backgroundColor: 'white', borderRadius: '4px' }}>
392-
<Typography variant="body2" color="textSecondary">
393-
Make sure your ref is attached to a real DOM element (component="div" for MUI Box). Only access .current.clientHeight after the DOM is rendered...
394-
</Typography>
395-
</Box>
387+
{/* <CitationsBox messages={messages} fileSearchResult={fileSearchResult} /> */}
388+
<Box sx={{ borderLeft: '4px solid #3f51b5', paddingLeft: '1rem', backgroundColor: 'white', borderRadius: '4px' }}>
389+
<Typography variant="body2" color="rgba(0,0,0,0.4)">
390+
Make sure your ref is attached to a real DOM element (component="div" for MUI Box). Only access .current.clientHeight after the DOM is rendered...
391+
</Typography>
392+
</Box>
393+
<Box sx={{ borderLeft: '4px solid #3f51b5', paddingLeft: '1rem', backgroundColor: 'white', borderRadius: '4px' }}>
394+
<Typography variant="body2" color="rgba(0,0,0,0.4)">
395+
Make sure your ref is attached to a real DOM element (component="div" for MUI Box). Only access .current.clientHeight after the DOM is rendered...
396+
</Typography>
397+
</Box>
398+
<Box sx={{ borderLeft: '4px solid #3f51b5', paddingLeft: '1rem', backgroundColor: 'white', borderRadius: '4px' }}>
399+
<Typography variant="body2" color="rgba(0,0,0,0.4)">
400+
Make sure your ref is attached to a real DOM element (component="div" for MUI Box). Only access .current.clientHeight after the DOM is rendered...
401+
</Typography>
396402
</Box>
397403
</Box>
398404
)}

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

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Box, Typography } from '@mui/material'
2+
import { useParams } from 'react-router-dom'
23
import { Message } from '../../types'
34
import ReactMarkdown from 'react-markdown'
45
import remarkGfm from 'remark-gfm'
@@ -42,21 +43,33 @@ export const LoadingMessage = ({ expandedNodeHeight }: { expandedNodeHeight: num
4243
</div>
4344
)
4445

45-
const MessageItem = ({ message, isLastAssistantNode, expandedNodeHeight }: { message: Message; isLastAssistantNode: boolean; expandedNodeHeight: number }) => (
46-
<Box
47-
className={`message-role-${message.role}`}
48-
sx={{
49-
alignSelf: message.role === 'assistant' ? 'flex-start' : 'flex-end',
50-
backgroundColor: message.role === 'assistant' ? 'transparent' : '#efefef',
51-
padding: '0 1.5rem',
52-
borderRadius: '0.6rem',
53-
minHeight: isLastAssistantNode ? expandedNodeHeight : 'auto',
54-
boxShadow: message.role === 'assistant' ? 'none' : '0px 2px 2px rgba(0, 0, 0, 0.2)',
55-
}}
56-
>
57-
<ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
58-
</Box>
59-
)
46+
const MessageItem = ({ message, isLastAssistantNode, expandedNodeHeight }: { message: Message; isLastAssistantNode: boolean; expandedNodeHeight: number }) => {
47+
// TÄMÄ on kaikki hämäystä demonstroidakseen lähdeviittaukset kurssichatissa
48+
const { courseId } = useParams()
49+
const hasAnnotations_Leikisti = isLastAssistantNode && courseId
50+
51+
return (
52+
<Box
53+
className={`message-role-${message.role}`}
54+
sx={{
55+
minHeight: isLastAssistantNode ? expandedNodeHeight : 'auto',
56+
alignSelf: message.role === 'assistant' ? 'flex-start' : 'flex-end',
57+
}}
58+
>
59+
<Box
60+
sx={{
61+
backgroundColor: message.role === 'assistant' ? 'transparent' : '#efefef',
62+
padding: message.role === 'assistant' ? '0 1.5rem' : '0.175rem 1.5rem',
63+
borderRadius: message.role === 'assistant' ? '5px' : '0.6rem',
64+
boxShadow: message.role === 'assistant' ? 'none' : '0px 2px 2px rgba(0, 0, 0, 0.2)',
65+
borderLeft: hasAnnotations_Leikisti ? '5px solid #3f51b5' : 'none',
66+
}}
67+
>
68+
<ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
69+
</Box>
70+
</Box>
71+
)
72+
}
6073

6174
export const Conversation = ({
6275
conversationRef,
@@ -73,7 +86,7 @@ export const Conversation = ({
7386
isCompletionDone: boolean
7487
fileSearchResult: FileSearchResult
7588
}) => (
76-
<Box style={{ height: '100%', display: 'flex', flexDirection: 'column', gap: '2rem' }} ref={conversationRef}>
89+
<Box style={{ height: '100%', display: 'flex', flexDirection: 'column', gap: '2.5rem' }} ref={conversationRef}>
7790
{messages.length === 0 && <ConversationSplash />}
7891
{messages.map((message, idx) => {
7992
const isLastAssistantNode = idx === messages.length - 1 && message.role === 'assistant'

0 commit comments

Comments
 (0)