feat: implement AI chat with vector search and random loading messages
Major Features: - ✅ AI chat with Azure OpenAI GPT-4o integration - ✅ Vector search across Bible versions (ASV English, RVA 1909 Spanish) - ✅ Multi-language support with automatic English fallback - ✅ Bible version citations in responses [ASV] [RVA 1909] - ✅ Random Bible-themed loading messages (5 variants) - ✅ Safe build script with memory guardrails - ✅ 8GB swap memory for build safety - ✅ Stripe donation integration (multiple payment methods) AI Chat Improvements: - Implement vector search with 1536-dim embeddings (Azure text-embedding-ada-002) - Search all Bible versions in user's language, fallback to English - Cite Bible versions properly in AI responses - Add 5 random loading messages: "Searching the Scriptures...", etc. - Fix Ollama conflict (disabled to use Azure OpenAI exclusively) - Optimize hybrid search queries for actual table schema Build & Infrastructure: - Create safe-build.sh script with memory monitoring (prevents server crashes) - Add 8GB swap memory for emergency relief - Document build process in BUILD_GUIDE.md - Set Node.js memory limits (4GB max during builds) Database: - Clean up 115 old vector tables with wrong dimensions - Keep only 2 tables with correct 1536-dim embeddings - Add Stripe schema for donations and subscriptions Documentation: - AI_CHAT_FINAL_STATUS.md - Complete implementation status - AI_CHAT_IMPLEMENTATION_COMPLETE.md - Technical details - BUILD_GUIDE.md - Safe building guide with guardrails - CHAT_LOADING_MESSAGES.md - Loading messages implementation - STRIPE_IMPLEMENTATION_COMPLETE.md - Stripe integration docs - STRIPE_SETUP_GUIDE.md - Stripe configuration guide 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
303
CHAT_LOADING_MESSAGES.md
Normal file
303
CHAT_LOADING_MESSAGES.md
Normal file
@@ -0,0 +1,303 @@
|
||||
# Random Bible Loading Messages - Implementation ✅
|
||||
|
||||
**Date:** 2025-10-12
|
||||
**Status:** ✅ Deployed
|
||||
|
||||
---
|
||||
|
||||
## What Was Implemented
|
||||
|
||||
Added **5 random Bible/religion-related loading messages** that display while the AI chat is searching for answers. Each time a user sends a message, one of these messages is randomly selected and displayed.
|
||||
|
||||
### Loading Messages
|
||||
|
||||
```javascript
|
||||
const LOADING_MESSAGES = [
|
||||
"Searching the Scriptures...",
|
||||
"Seeking wisdom from God's Word...",
|
||||
"Consulting the Holy Scriptures...",
|
||||
"Finding relevant Bible verses...",
|
||||
"Exploring God's eternal truth..."
|
||||
]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Visual Changes
|
||||
|
||||
### Before
|
||||
```
|
||||
●●● Loading...
|
||||
```
|
||||
Just three dots and generic "Loading..." text
|
||||
|
||||
### After
|
||||
```
|
||||
●●● Searching the Scriptures...
|
||||
●●● Seeking wisdom from God's Word...
|
||||
●●● Consulting the Holy Scriptures...
|
||||
●●● Finding relevant Bible verses...
|
||||
●●● Exploring God's eternal truth...
|
||||
```
|
||||
Three animated dots + random Bible-themed message
|
||||
|
||||
---
|
||||
|
||||
## Files Modified
|
||||
|
||||
### 1. `components/chat/chat-interface.tsx`
|
||||
**Simple chat interface (used on standalone chat page)**
|
||||
|
||||
Changes:
|
||||
- Added `LOADING_MESSAGES` array at top
|
||||
- Added `loadingMessage` state
|
||||
- Pick random message when loading starts
|
||||
- Display message next to loading dots
|
||||
|
||||
**Code:**
|
||||
```tsx
|
||||
// Lines 8-14: Added loading messages array
|
||||
const LOADING_MESSAGES = [
|
||||
"Searching the Scriptures...",
|
||||
"Seeking wisdom from God's Word...",
|
||||
"Consulting the Holy Scriptures...",
|
||||
"Finding relevant Bible verses...",
|
||||
"Exploring God's eternal truth..."
|
||||
]
|
||||
|
||||
// Line 20: Added state
|
||||
const [loadingMessage, setLoadingMessage] = useState('')
|
||||
|
||||
// Lines 56-58: Pick random message before loading
|
||||
const randomMessage = LOADING_MESSAGES[Math.floor(Math.random() * LOADING_MESSAGES.length)]
|
||||
setLoadingMessage(randomMessage)
|
||||
setLoading(true)
|
||||
|
||||
// Lines 150-162: Display loading message
|
||||
{loading && (
|
||||
<div className="flex justify-start">
|
||||
<div className="bg-gray-100 p-4 rounded-lg">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="flex space-x-2">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" />
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce delay-100" />
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce delay-200" />
|
||||
</div>
|
||||
<span className="text-sm text-gray-600 italic">{loadingMessage}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
```
|
||||
|
||||
### 2. `components/chat/floating-chat.tsx`
|
||||
**Floating chat widget (appears on all pages)**
|
||||
|
||||
Changes:
|
||||
- Added `LOADING_MESSAGES` array at top
|
||||
- Added `loadingMessage` state
|
||||
- Pick random message when loading starts
|
||||
- Display message with Material-UI styled loading dots
|
||||
|
||||
**Code:**
|
||||
```tsx
|
||||
// Lines 51-57: Added loading messages array
|
||||
const LOADING_MESSAGES = [
|
||||
"Searching the Scriptures...",
|
||||
"Seeking wisdom from God's Word...",
|
||||
"Consulting the Holy Scriptures...",
|
||||
"Finding relevant Bible verses...",
|
||||
"Exploring God's eternal truth..."
|
||||
]
|
||||
|
||||
// Line 96: Added state
|
||||
const [loadingMessage, setLoadingMessage] = useState('')
|
||||
|
||||
// Lines 361-363: Pick random message before loading
|
||||
const randomMessage = LOADING_MESSAGES[Math.floor(Math.random() * LOADING_MESSAGES.length)]
|
||||
setLoadingMessage(randomMessage)
|
||||
setIsLoading(true)
|
||||
|
||||
// Lines 896-948: Display loading message with animated dots
|
||||
{isLoading && (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'flex-start', mb: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>
|
||||
<Avatar sx={{ width: 32, height: 32, bgcolor: 'secondary.main' }}>
|
||||
<SmartToy fontSize="small" />
|
||||
</Avatar>
|
||||
<Paper elevation={1} sx={{ p: 1.5, borderRadius: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
||||
{/* Three animated dots */}
|
||||
</Box>
|
||||
<Typography variant="body2" sx={{ fontStyle: 'italic', color: 'text.secondary' }}>
|
||||
{loadingMessage}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## How It Works
|
||||
|
||||
### Flow
|
||||
|
||||
```
|
||||
User sends message
|
||||
↓
|
||||
Component picks random message from array
|
||||
↓
|
||||
Math.floor(Math.random() * 5) → 0-4 index
|
||||
↓
|
||||
setLoadingMessage(LOADING_MESSAGES[randomIndex])
|
||||
↓
|
||||
setLoading(true)
|
||||
↓
|
||||
Display: ●●● "Random message"
|
||||
↓
|
||||
API call to /api/chat
|
||||
↓
|
||||
Response received
|
||||
↓
|
||||
setLoading(false) → Message disappears
|
||||
↓
|
||||
Display AI response
|
||||
```
|
||||
|
||||
### Randomization
|
||||
|
||||
```javascript
|
||||
// Random number between 0-4
|
||||
const randomIndex = Math.floor(Math.random() * LOADING_MESSAGES.length)
|
||||
|
||||
// Pick message
|
||||
const randomMessage = LOADING_MESSAGES[randomIndex]
|
||||
|
||||
// Examples:
|
||||
Math.random() = 0.12345 → Math.floor(0.12345 * 5) = 0 → "Searching the Scriptures..."
|
||||
Math.random() = 0.67890 → Math.floor(0.67890 * 5) = 3 → "Finding relevant Bible verses..."
|
||||
Math.random() = 0.98765 → Math.floor(0.98765 * 5) = 4 → "Exploring God's eternal truth..."
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Testing
|
||||
|
||||
### Test Scenarios
|
||||
|
||||
1. **Simple Chat Interface**
|
||||
- Go to `/chat` page
|
||||
- Send a message
|
||||
- Should see one of 5 random messages
|
||||
|
||||
2. **Floating Chat Widget**
|
||||
- Open floating chat from any page
|
||||
- Send a message
|
||||
- Should see one of 5 random messages
|
||||
|
||||
3. **Multiple Messages**
|
||||
- Send 5 different messages
|
||||
- Should see different loading messages (statistically)
|
||||
|
||||
### Expected Behavior
|
||||
|
||||
✅ Each message send picks a NEW random message
|
||||
✅ Messages change between consecutive sends (usually)
|
||||
✅ All 5 messages appear with equal probability (~20% each)
|
||||
✅ Loading dots animate while message displays
|
||||
✅ Message disappears when response arrives
|
||||
|
||||
---
|
||||
|
||||
## Adding More Messages
|
||||
|
||||
To add more messages in the future:
|
||||
|
||||
```tsx
|
||||
// components/chat/chat-interface.tsx
|
||||
// components/chat/floating-chat.tsx
|
||||
|
||||
const LOADING_MESSAGES = [
|
||||
"Searching the Scriptures...",
|
||||
"Seeking wisdom from God's Word...",
|
||||
"Consulting the Holy Scriptures...",
|
||||
"Finding relevant Bible verses...",
|
||||
"Exploring God's eternal truth...",
|
||||
// ADD NEW MESSAGES HERE:
|
||||
"Meditating on God's promises...",
|
||||
"Uncovering biblical wisdom...",
|
||||
"Discovering scriptural insights...",
|
||||
]
|
||||
```
|
||||
|
||||
No other code changes needed - the random selection automatically adjusts to array length!
|
||||
|
||||
---
|
||||
|
||||
## Multi-Language Support (Future)
|
||||
|
||||
For multi-language support, you could create language-specific arrays:
|
||||
|
||||
```tsx
|
||||
const LOADING_MESSAGES = {
|
||||
en: [
|
||||
"Searching the Scriptures...",
|
||||
"Seeking wisdom from God's Word...",
|
||||
"Consulting the Holy Scriptures...",
|
||||
"Finding relevant Bible verses...",
|
||||
"Exploring God's eternal truth..."
|
||||
],
|
||||
ro: [
|
||||
"Căutând în Scripturi...",
|
||||
"Căutând înțelepciunea din Cuvântul lui Dumnezeu...",
|
||||
"Consultând Sfintele Scripturi...",
|
||||
"Găsind versete biblice relevante...",
|
||||
"Explorând adevărul veșnic al lui Dumnezeu..."
|
||||
],
|
||||
es: [
|
||||
"Buscando en las Escrituras...",
|
||||
"Buscando sabiduría en la Palabra de Dios...",
|
||||
"Consultando las Sagradas Escrituras...",
|
||||
"Encontrando versículos bíblicos relevantes...",
|
||||
"Explorando la verdad eterna de Dios..."
|
||||
]
|
||||
}
|
||||
|
||||
// Then use:
|
||||
const messages = LOADING_MESSAGES[locale] || LOADING_MESSAGES.en
|
||||
const randomMessage = messages[Math.floor(Math.random() * messages.length)]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Performance Impact
|
||||
|
||||
**None** - The random selection happens in milliseconds:
|
||||
|
||||
- Array access: O(1)
|
||||
- Math.random(): ~0.001ms
|
||||
- Math.floor(): ~0.001ms
|
||||
- Total overhead: <0.01ms
|
||||
|
||||
**Zero impact** on chat response time!
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
✅ **5 random Bible-related loading messages**
|
||||
✅ **Both chat interfaces updated**
|
||||
✅ **Smooth animations with loading dots**
|
||||
✅ **Easy to add more messages**
|
||||
✅ **Zero performance impact**
|
||||
✅ **Deployed to production**
|
||||
|
||||
Users now see inspirational Bible-related messages while waiting for AI responses! 🎉
|
||||
|
||||
---
|
||||
|
||||
**Status:** ✅ **COMPLETE AND DEPLOYED**
|
||||
Reference in New Issue
Block a user