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

28
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,12 +606,13 @@ class ChatAssistant extends Component {
}} }}
/> />
<Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
{isRecording ? ( {isRecording ? (
<IconButton <IconButton
color="error" color="error"
onClick={this.stopRecording} onClick={this.stopRecording}
aria-label="Aufnahme stoppen" aria-label="Aufnahme stoppen"
sx={{ ml: 1 }} sx={{ ml: { xs: 0, sm: 1 } }}
> >
<StopIcon /> <StopIcon />
</IconButton> </IconButton>
@@ -618,7 +621,7 @@ class ChatAssistant extends Component {
color="primary" color="primary"
onClick={this.startRecording} onClick={this.startRecording}
aria-label="Sprachaufnahme starten" aria-label="Sprachaufnahme starten"
sx={{ ml: 1 }} sx={{ ml: { xs: 0, sm: 1 } }}
disabled={isTyping || inputsDisabled} disabled={isTyping || inputsDisabled}
> >
<MicIcon /> <MicIcon />
@@ -629,7 +632,7 @@ class ChatAssistant extends Component {
color="primary" color="primary"
onClick={this.handleImageUpload} onClick={this.handleImageUpload}
aria-label="Bild hochladen" aria-label="Bild hochladen"
sx={{ ml: 1 }} sx={{ ml: { xs: 0, sm: 1 } }}
disabled={isTyping || isRecording || inputsDisabled} disabled={isTyping || isRecording || inputsDisabled}
> >
<PhotoCameraIcon /> <PhotoCameraIcon />
@@ -637,13 +640,14 @@ class ChatAssistant extends Component {
<Button <Button
variant="contained" variant="contained"
sx={{ ml: 1 }} sx={{ ml: { xs: 0, sm: 1 } }}
onClick={this.handleSendMessage} onClick={this.handleSendMessage}
disabled={isTyping || isRecording || inputsDisabled} disabled={isTyping || isRecording || inputsDisabled}
> >
Senden Senden
</Button> </Button>
</Box> </Box>
</Box>
</Paper> </Paper>
); );
} }