Skip to content

Commit a81a68a

Browse files
MichaelTeidaMichaelTeida
committed
fixed: hints
1 parent 5e86985 commit a81a68a

File tree

1 file changed

+70
-50
lines changed

1 file changed

+70
-50
lines changed

‎src/components/Chat.jsx

+70-50
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Box, Button, Card, FormControl, Input as JoyInput, Sheet, Stack, Typography, Avatar} from "@mui/joy";
1+
import {Box, Button, Card, FormControl, Input as JoyInput, Sheet, Stack, Typography, Avatar, Tooltip} from "@mui/joy";
22
import EditIcon from "@mui/icons-material/Edit";
33
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
44
import {useEffect, useState, useRef} from "react";
@@ -62,58 +62,78 @@ function Chat() {
6262
overflowY: 'scroll',
6363
backgroundColor: 'background.level1',
6464
pl: {xs: 1, md: 2},
65-
justifyContent: "space-between"
65+
justifyContent: "space-between",
66+
gap: 0
6667
}}>
67-
<Stack spacing={1.5}>
68-
{messages.map((el, index) => {
69-
return (
70-
<Box key={index} display="flex" alignItems="flex-start">
71-
{el.isHuman ? null : <Avatar alt="NeuraChat Avatar" src={NeuraChatLogoSquare}
72-
sx={{marginRight: {xs: 0.5, md: 1}, mt: 0.4, pl: 0}}/>}
73-
<Stack display="flex" direction="row" flexDirection={el.isHuman ? 'row-reverse' : 'row'}
74-
width="100%"
75-
onMouseEnter={() => (el.isHuman ? null : setHoveredIndex(index))}
76-
onMouseLeave={() => (el.isHuman ? null : setHoveredIndex(null))}>
77-
<Box sx={{width: {xs: 'auto', sm: "60%"}, minWidth: '60%'}}>
78-
<Stack direction="row" justifyContent="space-between" spacing={2}>
79-
<Typography level="body-xs">
80-
{el.isHuman ? "You" : "NeuraChat"}
81-
</Typography>
82-
<Typography level="body-xs">
83-
{el.timestamp}
84-
</Typography>
68+
<Stack display="flex" height="100%" spacing={2}>
69+
<Stack spacing={1.5} sx={{flex: 1}}>
70+
{messages.map((el, index) => {
71+
return (
72+
<Box key={index} display="flex" alignItems="flex-start">
73+
{el.isHuman ? null : <Avatar alt="NeuraChat Avatar" src={NeuraChatLogoSquare}
74+
sx={{marginRight: {xs: 0.5, md: 1}, mt: 0.4, pl: 0}}/>}
75+
<Stack display="flex" direction="row"
76+
flexDirection={el.isHuman ? 'row-reverse' : 'row'}
77+
width="100%"
78+
onMouseEnter={() => (el.isHuman ? null : setHoveredIndex(index))}
79+
onMouseLeave={() => (el.isHuman ? null : setHoveredIndex(null))}>
80+
<Box sx={{width: {xs: 'auto', sm: "60%"}, minWidth: '60%'}}>
81+
<Stack direction="row" justifyContent="space-between" spacing={2}>
82+
<Typography level="body-xs">
83+
{el.isHuman ? "You" : "NeuraChat"}
84+
</Typography>
85+
<Typography level="body-xs">
86+
{el.timestamp}
87+
</Typography>
88+
</Stack>
89+
<Sheet variant="outlined"
90+
sx={{
91+
p: 1,
92+
borderRadius: "lg",
93+
borderTopRightRadius: el.isHuman ? 0 : "lg",
94+
borderTopLeftRadius: el.isHuman ? "lg" : 0,
95+
backgroundColor: el.isHuman ? "primary.500" : "background.body",
96+
"&:hover": {filter: "brightness(97%)"}
97+
}}>
98+
<Typography component="p" className="selectMessageContent"
99+
fontSize={{xs: "sm", sm: "md"}}
100+
sx={{
101+
color: el.isHuman ? "neutral.50" : "text.primary",
102+
wordBreak: "break-word",
103+
whiteSpace: "pre-wrap"
104+
}}>
105+
{el.content}
106+
</Typography>
107+
</Sheet>
108+
</Box>
109+
{(el.isHuman || hoveredIndex !== index) ? null :
110+
<CopyToClipboardBtn content={el.content}
111+
snackbarMessage={handleSnackbarMessage}/>}
85112
</Stack>
86-
<Sheet variant="outlined"
87-
sx={{
88-
p: 1,
89-
borderRadius: "lg",
90-
borderTopRightRadius: el.isHuman ? 0 : "lg",
91-
borderTopLeftRadius: el.isHuman ? "lg" : 0,
92-
backgroundColor: el.isHuman ? "primary.500" : "background.body",
93-
"&:hover": {filter: "brightness(97%)"}
94-
}}>
95-
<Typography component="p" className="selectMessageContent"
96-
fontSize={{xs: "sm", sm: "md"}}
97-
sx={{
98-
color: el.isHuman ? "neutral.50" : "text.primary",
99-
wordBreak: "break-word",
100-
whiteSpace: "pre-wrap"
101-
}}>
102-
{el.content}
103-
</Typography>
104-
</Sheet>
105113
</Box>
106-
{(el.isHuman || hoveredIndex !== index) ? null :
107-
<CopyToClipboardBtn content={el.content} snackbarMessage={handleSnackbarMessage}/>}
108-
</Stack>
109-
</Box>
110-
)
111-
})}
112-
</Stack>
113-
<Stack direction={{xs: "column", md: "row"}} spacing={2} justifyContent="center">
114-
<Button variant="solid">Test</Button>
115-
<Button variant="solid">Test</Button>
116-
<Button variant="solid">Test</Button>
114+
)
115+
})}
116+
</Stack>
117+
<Stack direction={{xs: "column", md: "row"}} spacing={2} justifyContent="center">
118+
<Tooltip title="Test" arrow placement="top" sx={{flex: 1}}>
119+
<Card onClick={() => console.log("1")}>
120+
<Typography level="title-sm">Brainstorm ideas</Typography>
121+
<Typography level="body-sm">for a unique and memorable marriage proposal</Typography>
122+
</Card>
123+
</Tooltip>
124+
<Tooltip title="Test" arrow placement="top" sx={{flex: 1}}>
125+
<Card onClick={() => console.log("2")}>
126+
<Typography level="title-sm">Test</Typography>
127+
<Typography level="body-sm">Test</Typography>
128+
</Card>
129+
</Tooltip>
130+
<Tooltip title="Test" arrow placement="top" sx={{flex: 1}}>
131+
<Card onClick={() => console.log("3")}>
132+
<Typography level="title-sm">Test</Typography>
133+
<Typography level="body-sm">Test</Typography>
134+
</Card>
135+
</Tooltip>
136+
</Stack>
117137
</Stack>
118138
<Box ref={messagesEndRef}/>
119139
</Card>

0 commit comments

Comments
 (0)