seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

chat windows full screen in mobileVertical

Browse Source
This commit is contained in:
sebseb7
2025-10-05 22:21:03 +02:00
parent c82cd5ea78
commit f8f2658653
1 changed files with 61 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/ChatAssistant.js
View File

@@ -465,16 +465,16 @@ class ChatAssistant extends Component {
elevation={4} elevation={4}
sx={{ sx={{
position: 'fixed', position: 'fixed',
bottom: { xs: 16, sm: 80 }, bottom: { xs: 0, sm: 80 },
right: { xs: 16, sm: 16 }, right: { xs: 0, sm: 16 },
left: { xs: 16, sm: 'auto' }, left: { xs: 0, sm: 'auto' },
top: { xs: 16, sm: 'auto' }, top: { xs: 0, sm: 'auto' },
width: { xs: 'calc(100vw - 32px)', sm: 450, md: 600, lg: 750 }, width: { xs: '100vw', sm: 450, md: 600, lg: 750 },
height: { xs: 'calc(100vh - 32px)', sm: 600, md: 650, lg: 700 }, height: { xs: '100vh', sm: 600, md: 650, lg: 700 },
maxWidth: { xs: 'none', sm: 450, md: 600, lg: 750 }, maxWidth: { xs: 'none', sm: 450, md: 600, lg: 750 },
maxHeight: { xs: 'calc(100vh - 72px)', sm: 600, md: 650, lg: 700 }, maxHeight: { xs: '100vh', sm: 600, md: 650, lg: 700 },
bgcolor: 'background.paper', bgcolor: 'background.paper',
borderRadius: 2, borderRadius: { xs: 0, sm: 2 },
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
zIndex: 1300, zIndex: 1300,
@@ -566,6 +566,8 @@ class ChatAssistant extends Component {
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
gap: { xs: 1, sm: 0 },
p: 1, p: 1,
borderTop: 1, borderTop: 1,
borderColor: 'divider', borderColor: 'divider',
@@ -604,45 +606,47 @@ class ChatAssistant extends Component {
}} }}
/> />
{isRecording ? ( <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
<IconButton {isRecording ? (
color="error" <IconButton
onClick={this.stopRecording} color="error"
aria-label="Aufnahme stoppen" onClick={this.stopRecording}
sx={{ ml: 1 }} aria-label="Aufnahme stoppen"
> sx={{ ml: { xs: 0, sm: 1 } }}
<StopIcon /> >
</IconButton> <StopIcon />
) : ( </IconButton>
) : (
<IconButton
color="primary"
onClick={this.startRecording}
aria-label="Sprachaufnahme starten"
sx={{ ml: { xs: 0, sm: 1 } }}
disabled={isTyping || inputsDisabled}
>
<MicIcon />
</IconButton>
)}
<IconButton <IconButton
color="primary" color="primary"
onClick={this.startRecording} onClick={this.handleImageUpload}
aria-label="Sprachaufnahme starten" aria-label="Bild hochladen"
sx={{ ml: 1 }} sx={{ ml: { xs: 0, sm: 1 } }}
disabled={isTyping || inputsDisabled} disabled={isTyping || isRecording || inputsDisabled}
> >
<MicIcon /> <PhotoCameraIcon />
</IconButton> </IconButton>
)}
<IconButton <Button
color="primary" variant="contained"
onClick={this.handleImageUpload} sx={{ ml: { xs: 0, sm: 1 } }}
aria-label="Bild hochladen" onClick={this.handleSendMessage}
sx={{ ml: 1 }} disabled={isTyping || isRecording || inputsDisabled}
disabled={isTyping || isRecording || inputsDisabled} >
> Senden
<PhotoCameraIcon /> </Button>
</IconButton> </Box>
<Button
variant="contained"
sx={{ ml: 1 }}
onClick={this.handleSendMessage}
disabled={isTyping || isRecording || inputsDisabled}
>
Senden
</Button>
</Box> </Box>
</Paper> </Paper>
); );