Add AI chat feature for verse explanations and fix login redirect handling

Bible Reader Enhancements:
- Add chat icon to each verse for AI explanations
- Implement handleVerseChat function with pre-filled contextual messages
- Chat opens with message: "Explain in depth this verse [text] from [version], [book] [chapter:verse] and its meaning"
- Visible to all users, redirects to login for unauthenticated users
- Fix copy message translation from 'bible.copied' to 'copied'

Login System Improvements:
- Fix redirect parameter handling in login pages
- Users are now properly redirected to /bible page after successful login
- Preserve redirect URL parameters through login flow
- Add Suspense boundaries for useSearchParams compliance
- Ensure verse/chapter context is maintained after login

Technical Changes:
- Add Chat icon import from Material-UI
- Implement floating chat event dispatch system
- Fix Next.js 15 build warnings with proper Suspense wrapping
- Maintain existing UX patterns (visible to all, functional for authenticated users)

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-09-24 20:11:35 +00:00
parent 6913206560
commit 68528eec73
3 changed files with 88 additions and 13 deletions

View File

@@ -68,7 +68,8 @@ import {
ExpandMore,
MenuBook,
Visibility,
Speed
Speed,
Chat
} from '@mui/icons-material'
interface BibleVerse {
@@ -664,11 +665,32 @@ export default function BibleReaderNew() {
navigator.clipboard.writeText(text).then(() => {
setCopyFeedback({
open: true,
message: t('bible.copied')
message: t('copied')
})
})
}
const handleVerseChat = (verse: BibleVerse) => {
// If user is not authenticated, redirect to login
if (!user) {
router.push(`/${locale}/login?redirect=${encodeURIComponent(`/${locale}/bible?version=${selectedVersion}&book=${selectedBook}&chapter=${selectedChapter}&verse=${verse.verseNum}`)}`)
return
}
const versionName = versions.find(v => v.id === selectedVersion)?.name || selectedVersion
const bookName = currentBook?.name || 'Unknown Book'
const initialMessage = `Explain in depth this verse "${verse.text}" from ${versionName}, ${bookName} ${selectedChapter}:${verse.verseNum} and its meaning`
// Dispatch event to open floating chat with the pre-filled message
window.dispatchEvent(new CustomEvent('floating-chat:open', {
detail: {
initialMessage: initialMessage,
fullscreen: false
}
}))
}
const getThemeStyles = () => {
switch (preferences.theme) {
case 'dark':
@@ -765,6 +787,13 @@ export default function BibleReaderNew() {
>
<ContentCopy fontSize="small" />
</IconButton>
<IconButton
size="small"
onClick={() => handleVerseChat(verse)}
sx={{ color: 'action.active' }}
>
<Chat fontSize="small" />
</IconButton>
</Box>
)}
</Box>