andrei/biblical-guide.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restructure chat interface to display history side-by-side with live chat

Browse Source 
- Change chat layout from vertical stacking to horizontal side-by-side layout
- History panel (300px width) displays on left with conversation list
- Main chat area takes remaining space on right with messages and input
- Improves UX by making chat history visible alongside active conversation
- Fix JSX structure and nesting for proper component rendering

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
andupetcu
2025-09-22 12:57:09 +03:00
parent 24c0577f44
commit c82b3007fd
1 changed files with 276 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
components/chat/floating-chat.tsx
View File

@@ -536,17 +536,24 @@ export default function FloatingChat() {
{!isMinimized && (
<>
{/* Chat History Panel */}
{/* Main Content Area - Side by Side Layout */}
<Box sx={{
display: 'flex',
flexGrow: 1,
overflow: 'hidden'
}}>
{/* Chat History Panel - Left Side */}
{showHistory && (
<Box sx={{
p: 2,
borderBottom: 1,
width: '300px',
borderRight: 1,
borderColor: 'divider',
bgcolor: 'grey.50',
maxHeight: '300px',
overflowY: 'auto'
display: 'flex',
flexDirection: 'column',
}}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
<Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider' }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Typography variant="h6">
Chat History
</Typography>
@@ -568,6 +575,9 @@ export default function FloatingChat() {
</IconButton>
</Box>
</Box>
</Box>
<Box sx={{ flexGrow: 1, overflowY: 'auto', p: 2 }}>
{!isAuthenticated ? (
<Box sx={{ textAlign: 'center', py: 3 }}>
@@ -639,77 +649,16 @@ export default function FloatingChat() {
</Box>
)}
</Box>
</Box>
)}
{/* Conversation Menu */}
<Menu
anchorEl={menuAnchorEl}
open={Boolean(menuAnchorEl)}
onClose={handleMenuClose}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
>
<MenuItem onClick={handleRenameClick}>
<Edit fontSize="small" sx={{ mr: 1 }} />
Rename
</MenuItem>
<MenuItem onClick={handleDeleteClick} sx={{ color: 'error.main' }}>
<Delete fontSize="small" sx={{ mr: 1 }} />
Delete
</MenuItem>
</Menu>
{/* Rename Dialog */}
<Dialog open={showRenameDialog} onClose={() => setShowRenameDialog(false)} maxWidth="sm" fullWidth>
<DialogTitle>Rename Conversation</DialogTitle>
<DialogContent>
<TextField
autoFocus
margin="dense"
label="Conversation Title"
fullWidth
variant="outlined"
value={newTitle}
onChange={(e) => setNewTitle(e.target.value)}
onKeyPress={(e) => {
if (e.key === 'Enter') {
handleRenameSubmit()
}
}}
/>
</DialogContent>
<DialogActions>
<Button onClick={() => setShowRenameDialog(false)}>Cancel</Button>
<Button
onClick={handleRenameSubmit}
variant="contained"
disabled={!newTitle.trim()}
>
Rename
</Button>
</DialogActions>
</Dialog>
{/* Delete Confirmation Dialog */}
<Dialog open={showDeleteDialog} onClose={() => setShowDeleteDialog(false)}>
<DialogTitle>Delete Conversation</DialogTitle>
<DialogContent>
<Typography>
Are you sure you want to delete this conversation? This action cannot be undone.
</Typography>
</DialogContent>
<DialogActions>
<Button onClick={() => setShowDeleteDialog(false)}>Cancel</Button>
<Button
onClick={handleDeleteConfirm}
variant="contained"
color="error"
>
Delete
</Button>
</DialogActions>
</Dialog>
{/* Main Chat Area - Right Side */}
<Box sx={{
flexGrow: 1,
display: 'flex',
flexDirection: 'column',
overflow: 'hidden'
}}>
{/* Suggested Questions */}
<Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider' }}>
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
@@ -933,6 +882,77 @@ export default function FloatingChat() {
{t('enterToSend')}
</Typography>
</Box>
</Box>
</Box>
{/* Conversation Menu */}
<Menu
anchorEl={menuAnchorEl}
open={Boolean(menuAnchorEl)}
onClose={handleMenuClose}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
>
<MenuItem onClick={handleRenameClick}>
<Edit fontSize="small" sx={{ mr: 1 }} />
Rename
</MenuItem>
<MenuItem onClick={handleDeleteClick} sx={{ color: 'error.main' }}>
<Delete fontSize="small" sx={{ mr: 1 }} />
Delete
</MenuItem>
</Menu>
{/* Rename Dialog */}
<Dialog open={showRenameDialog} onClose={() => setShowRenameDialog(false)} maxWidth="sm" fullWidth>
<DialogTitle>Rename Conversation</DialogTitle>
<DialogContent>
<TextField
autoFocus
margin="dense"
label="Conversation Title"
fullWidth
variant="outlined"
value={newTitle}
onChange={(e) => setNewTitle(e.target.value)}
onKeyPress={(e) => {
if (e.key === 'Enter') {
handleRenameSubmit()
}
}}
/>
</DialogContent>
<DialogActions>
<Button onClick={() => setShowRenameDialog(false)}>Cancel</Button>
<Button
onClick={handleRenameSubmit}
variant="contained"
disabled={!newTitle.trim()}
>
Rename
</Button>
</DialogActions>
</Dialog>
{/* Delete Confirmation Dialog */}
<Dialog open={showDeleteDialog} onClose={() => setShowDeleteDialog(false)}>
<DialogTitle>Delete Conversation</DialogTitle>
<DialogContent>
<Typography>
Are you sure you want to delete this conversation? This action cannot be undone.
</Typography>
</DialogContent>
<DialogActions>
<Button onClick={() => setShowDeleteDialog(false)}>Cancel</Button>
<Button
onClick={handleDeleteConfirm}
variant="contained"
color="error"
>
Delete
</Button>
</DialogActions>
</Dialog>
</>
)}
</Paper>