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

118
src/components/ChatAssistant.js
View File

@@ -461,20 +461,20 @@ class ChatAssistant extends Component {
const inputsDisabled = isGuest && !privacyConfirmed; const inputsDisabled = isGuest && !privacyConfirmed;
return ( return (
<Paper <Paper
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,
@@ -563,11 +563,13 @@ class ChatAssistant extends Component {
)} )}
<div ref={this.messagesEndRef} /> <div ref={this.messagesEndRef} />
</Box> </Box>
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
p: 1, flexDirection: { xs: 'column', sm: 'row' },
borderTop: 1, gap: { xs: 1, sm: 0 },
p: 1,
borderTop: 1,
borderColor: 'divider', borderColor: 'divider',
flexShrink: 0, flexShrink: 0,
}} }}
@@ -579,22 +581,22 @@ class ChatAssistant extends Component {
onChange={this.handleFileChange} onChange={this.handleFileChange}
style={{ display: 'none' }} style={{ display: 'none' }}
/> />
<TextField <TextField
fullWidth fullWidth
variant="outlined" variant="outlined"
size="small" size="small"
autoComplete="off" autoComplete="off"
autoFocus autoFocus
autoCapitalize="off" autoCapitalize="off"
autoCorrect="off" autoCorrect="off"
placeholder={isRecording ? "Aufnahme läuft..." : "Du kannst mich nach Cannabissorten fragen..."} placeholder={isRecording ? "Aufnahme läuft..." : "Du kannst mich nach Cannabissorten fragen..."}
value={inputValue} value={inputValue}
onChange={this.handleInputChange} onChange={this.handleInputChange}
onKeyDown={this.handleKeyDown} onKeyDown={this.handleKeyDown}
disabled={isRecording || inputsDisabled} disabled={isRecording || inputsDisabled}
slotProps={{ slotProps={{
input: { input: {
maxLength: 300, maxLength: 300,
endAdornment: isRecording && ( endAdornment: isRecording && (
<Typography variant="caption" color="primary" sx={{ mr: 1 }}> <Typography variant="caption" color="primary" sx={{ mr: 1 }}>
{this.formatTime(recordingTime)} {this.formatTime(recordingTime)}
@@ -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 ) : (
<IconButton
color="primary"
onClick={this.startRecording}
aria-label="Sprachaufnahme starten"
sx={{ ml: { xs: 0, sm: 1 } }}
disabled={isTyping || inputsDisabled}
>
<MicIcon />
</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>
)}
<Button
<IconButton variant="contained"
color="primary" sx={{ ml: { xs: 0, sm: 1 } }}
onClick={this.handleImageUpload} onClick={this.handleSendMessage}
aria-label="Bild hochladen" disabled={isTyping || isRecording || inputsDisabled}
sx={{ ml: 1 }} >
disabled={isTyping || isRecording || inputsDisabled} Senden
> </Button>
<PhotoCameraIcon /> </Box>
</IconButton>
<Button
variant="contained"
sx={{ ml: 1 }}
onClick={this.handleSendMessage}
disabled={isTyping || isRecording || inputsDisabled}
>
Senden
</Button>
</Box> </Box>
</Paper> </Paper>
); );