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;
return (
<Paper
elevation={4}
<Paper
elevation={4}
sx={{
position: 'fixed',
bottom: { xs: 16, sm: 80 },
right: { xs: 16, sm: 16 },
left: { xs: 16, sm: 'auto' },
top: { xs: 16, sm: 'auto' },
width: { xs: 'calc(100vw - 32px)', sm: 450, md: 600, lg: 750 },
height: { xs: 'calc(100vh - 32px)', sm: 600, md: 650, lg: 700 },
bottom: { xs: 0, sm: 80 },
right: { xs: 0, sm: 16 },
left: { xs: 0, sm: 'auto' },
top: { xs: 0, sm: 'auto' },
width: { xs: '100vw', sm: 450, md: 600, lg: 750 },
height: { xs: '100vh', sm: 600, md: 650, lg: 700 },
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',
borderRadius: 2,
borderRadius: { xs: 0, sm: 2 },
display: 'flex',
flexDirection: 'column',
zIndex: 1300,
@@ -563,11 +563,13 @@ class ChatAssistant extends Component {
)}
<div ref={this.messagesEndRef} />
</Box>
<Box
sx={{
display: 'flex',
p: 1,
borderTop: 1,
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
gap: { xs: 1, sm: 0 },
p: 1,
borderTop: 1,
borderColor: 'divider',
flexShrink: 0,
}}
@@ -579,22 +581,22 @@ class ChatAssistant extends Component {
onChange={this.handleFileChange}
style={{ display: 'none' }}
/>
<TextField
fullWidth
variant="outlined"
<TextField
fullWidth
variant="outlined"
size="small"
autoComplete="off"
autoFocus
autoCapitalize="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}
onChange={this.handleInputChange}
onKeyDown={this.handleKeyDown}
disabled={isRecording || inputsDisabled}
slotProps={{
input: {
maxLength: 300,
input: {
maxLength: 300,
endAdornment: isRecording && (
<Typography variant="caption" color="primary" sx={{ mr: 1 }}>
{this.formatTime(recordingTime)}
@@ -604,45 +606,47 @@ class ChatAssistant extends Component {
}}
/>
{isRecording ? (
<IconButton
color="error"
onClick={this.stopRecording}
aria-label="Aufnahme stoppen"
sx={{ ml: 1 }}
>
<StopIcon />
</IconButton>
) : (
<IconButton
<Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
{isRecording ? (
<IconButton
color="error"
onClick={this.stopRecording}
aria-label="Aufnahme stoppen"
sx={{ ml: { xs: 0, sm: 1 } }}
>
<StopIcon />
</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"
onClick={this.startRecording}
aria-label="Sprachaufnahme starten"
sx={{ ml: 1 }}
disabled={isTyping || inputsDisabled}
onClick={this.handleImageUpload}
aria-label="Bild hochladen"
sx={{ ml: { xs: 0, sm: 1 } }}
disabled={isTyping || isRecording || inputsDisabled}
>
<MicIcon />
<PhotoCameraIcon />
</IconButton>
)}
<IconButton
color="primary"
onClick={this.handleImageUpload}
aria-label="Bild hochladen"
sx={{ ml: 1 }}
disabled={isTyping || isRecording || inputsDisabled}
>
<PhotoCameraIcon />
</IconButton>
<Button
variant="contained"
sx={{ ml: 1 }}
onClick={this.handleSendMessage}
disabled={isTyping || isRecording || inputsDisabled}
>
Senden
</Button>
<Button
variant="contained"
sx={{ ml: { xs: 0, sm: 1 } }}
onClick={this.handleSendMessage}
disabled={isTyping || isRecording || inputsDisabled}
>
Senden
</Button>
</Box>
</Box>
</Paper>
);