Fix Next.js 15 Suspense boundary errors and remove Docker files
- Add Suspense boundaries for useSearchParams in bible and search pages - Extract search page content to separate component for proper client-side rendering - Remove all Docker configuration files and temp documentation - Build now passes successfully without TypeScript or Suspense errors 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude Assistant
@@ -1,364 +0,0 @@
|
||||
# AI Chat Improvements Plan
|
||||
|
||||
## Overview
|
||||
Enhance the AI chat system with persistent chat history and conversation memory to provide a more engaging and contextual user experience.
|
||||
|
||||
## Current State Analysis
|
||||
- ✅ Basic AI chat with Azure OpenAI integration
|
||||
- ✅ ReactMarkdown rendering for formatted responses
|
||||
- ✅ Floating chat component with fullscreen mode
|
||||
- ✅ Language-specific responses (Romanian/English)
|
||||
- ❌ No chat persistence between sessions
|
||||
- ❌ Limited conversation memory (only last 3 messages)
|
||||
- ❌ No user-specific chat history
|
||||
- ❌ No chat management UI
|
||||
|
||||
## Goals
|
||||
1. **Persistent Chat History**: Store chat conversations in database per user and language
|
||||
2. **Enhanced Memory**: Maintain longer conversation context for better AI responses
|
||||
3. **Chat Management**: Allow users to view, organize, and manage their chat history
|
||||
4. **Multi-language Support**: Separate chat histories for Romanian and English
|
||||
|
||||
## Technical Implementation Plan
|
||||
|
||||
### 1. Database Schema Extensions
|
||||
|
||||
#### 1.1 Chat Conversations Table
|
||||
```prisma
|
||||
model ChatConversation {
|
||||
id String @id @default(cuid())
|
||||
userId String? // Optional for anonymous users
|
||||
title String // Auto-generated from first message
|
||||
language String // 'ro' or 'en'
|
||||
isActive Boolean @default(true)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
lastMessageAt DateTime @default(now())
|
||||
|
||||
user User? @relation(fields: [userId], references: [id], onDelete: Cascade)
|
||||
messages ChatMessage[]
|
||||
|
||||
@@index([userId, language, lastMessageAt])
|
||||
@@index([isActive, lastMessageAt])
|
||||
}
|
||||
|
||||
model ChatMessage {
|
||||
id String @id @default(cuid())
|
||||
conversationId String
|
||||
role ChatMessageRole
|
||||
content String @db.Text
|
||||
timestamp DateTime @default(now())
|
||||
metadata Json? // For storing additional context
|
||||
|
||||
conversation ChatConversation @relation(fields: [conversationId], references: [id], onDelete: Cascade)
|
||||
|
||||
@@index([conversationId, timestamp])
|
||||
}
|
||||
|
||||
enum ChatMessageRole {
|
||||
USER
|
||||
ASSISTANT
|
||||
SYSTEM
|
||||
}
|
||||
```
|
||||
|
||||
#### 1.2 Update User Model
|
||||
```prisma
|
||||
model User {
|
||||
// ... existing fields
|
||||
chatConversations ChatConversation[]
|
||||
}
|
||||
```
|
||||
|
||||
### 2. API Endpoints
|
||||
|
||||
#### 2.1 Chat Conversations API (`/api/chat/conversations`)
|
||||
- **GET**: List user's conversations (paginated, filtered by language)
|
||||
- **POST**: Create new conversation
|
||||
- **DELETE /:id**: Delete conversation
|
||||
|
||||
#### 2.2 Enhanced Chat API (`/api/chat`)
|
||||
- **Modify existing POST**: Include conversation management
|
||||
- **GET /:conversationId**: Get conversation history
|
||||
- **PUT /:conversationId**: Update conversation (rename, etc.)
|
||||
|
||||
#### 2.3 Chat Messages API (`/api/chat/:conversationId/messages`)
|
||||
- **GET**: Get all messages in conversation (paginated)
|
||||
- **POST**: Add message to conversation
|
||||
|
||||
### 3. Frontend Components
|
||||
|
||||
#### 3.1 Enhanced Floating Chat Component
|
||||
```typescript
|
||||
interface FloatingChatProps {
|
||||
conversationId?: string
|
||||
initialMessage?: string
|
||||
}
|
||||
|
||||
// New state management
|
||||
const [conversations, setConversations] = useState<Conversation[]>([])
|
||||
const [activeConversationId, setActiveConversationId] = useState<string | null>(null)
|
||||
const [messages, setMessages] = useState<ChatMessage[]>([])
|
||||
const [isHistoryOpen, setIsHistoryOpen] = useState(false)
|
||||
```
|
||||
|
||||
#### 3.2 Chat History Sidebar
|
||||
```typescript
|
||||
interface ChatHistorySidebarProps {
|
||||
conversations: Conversation[]
|
||||
activeConversationId: string | null
|
||||
onSelectConversation: (id: string) => void
|
||||
onNewConversation: () => void
|
||||
onDeleteConversation: (id: string) => void
|
||||
language: string
|
||||
}
|
||||
```
|
||||
|
||||
#### 3.3 Conversation List Item
|
||||
```typescript
|
||||
interface ConversationListItemProps {
|
||||
conversation: Conversation
|
||||
isActive: boolean
|
||||
onClick: () => void
|
||||
onDelete: () => void
|
||||
onRename: (newTitle: string) => void
|
||||
}
|
||||
```
|
||||
|
||||
### 4. Implementation Phases
|
||||
|
||||
#### Phase 1: Database Schema & Basic API
|
||||
1. **Create Prisma migrations** for new tables
|
||||
2. **Implement conversation CRUD APIs**
|
||||
3. **Add database seed scripts** for testing
|
||||
4. **Update existing chat API** to work with conversations
|
||||
|
||||
#### Phase 2: Enhanced Memory System
|
||||
1. **Modify chat API** to include more conversation context
|
||||
2. **Implement intelligent context selection** (last 10-15 messages)
|
||||
3. **Add conversation summarization** for very long chats
|
||||
4. **Optimize token usage** with smart context management
|
||||
|
||||
#### Phase 3: Frontend Chat Management
|
||||
1. **Add conversation state management** to floating chat
|
||||
2. **Implement chat history sidebar**
|
||||
3. **Add conversation creation/deletion** functionality
|
||||
4. **Implement conversation switching** within chat
|
||||
|
||||
#### Phase 4: Advanced Features
|
||||
1. **Auto-generate conversation titles** from first message
|
||||
2. **Add conversation search/filtering**
|
||||
3. **Implement conversation sharing** (optional)
|
||||
4. **Add conversation export** functionality
|
||||
|
||||
### 5. Detailed Implementation Steps
|
||||
|
||||
#### 5.1 Database Setup
|
||||
```bash
|
||||
# Create migration
|
||||
npx prisma migrate dev --name add-chat-conversations
|
||||
|
||||
# Update database
|
||||
npx prisma db push
|
||||
|
||||
# Generate client
|
||||
npx prisma generate
|
||||
```
|
||||
|
||||
#### 5.2 API Implementation Strategy
|
||||
|
||||
**Chat API Enhancement (`/api/chat/route.ts`)**:
|
||||
```typescript
|
||||
// Modified request schema
|
||||
const chatRequestSchema = z.object({
|
||||
message: z.string().min(1),
|
||||
conversationId: z.string().optional(),
|
||||
locale: z.string().default('ro'),
|
||||
userId: z.string().optional()
|
||||
})
|
||||
|
||||
// Enhanced response
|
||||
interface ChatResponse {
|
||||
success: boolean
|
||||
response: string
|
||||
conversationId: string
|
||||
messageId: string
|
||||
}
|
||||
```
|
||||
|
||||
**Conversation Management Logic**:
|
||||
```typescript
|
||||
async function handleChatMessage(
|
||||
message: string,
|
||||
conversationId?: string,
|
||||
locale: string = 'ro',
|
||||
userId?: string
|
||||
) {
|
||||
// 1. Get or create conversation
|
||||
const conversation = conversationId
|
||||
? await getConversation(conversationId)
|
||||
: await createConversation(userId, locale, message)
|
||||
|
||||
// 2. Get conversation history (last 15 messages)
|
||||
const history = await getConversationHistory(conversation.id, 15)
|
||||
|
||||
// 3. Generate AI response with full context
|
||||
const aiResponse = await generateBiblicalResponse(message, locale, history)
|
||||
|
||||
// 4. Save both user message and AI response
|
||||
await saveMessages(conversation.id, [
|
||||
{ role: 'user', content: message },
|
||||
{ role: 'assistant', content: aiResponse }
|
||||
])
|
||||
|
||||
// 5. Update conversation metadata
|
||||
await updateConversationActivity(conversation.id)
|
||||
|
||||
return { response: aiResponse, conversationId: conversation.id }
|
||||
}
|
||||
```
|
||||
|
||||
#### 5.3 Frontend State Management
|
||||
|
||||
**Enhanced Floating Chat Hook**:
|
||||
```typescript
|
||||
function useFloatingChat() {
|
||||
const [conversations, setConversations] = useState<Conversation[]>([])
|
||||
const [activeConversation, setActiveConversation] = useState<Conversation | null>(null)
|
||||
const [messages, setMessages] = useState<ChatMessage[]>([])
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
const loadConversations = useCallback(async () => {
|
||||
// Fetch user's conversations
|
||||
}, [])
|
||||
|
||||
const switchConversation = useCallback(async (conversationId: string) => {
|
||||
// Load conversation messages
|
||||
}, [])
|
||||
|
||||
const startNewConversation = useCallback(() => {
|
||||
// Reset state for new conversation
|
||||
}, [])
|
||||
|
||||
const sendMessage = useCallback(async (message: string) => {
|
||||
// Send message with conversation context
|
||||
}, [activeConversation])
|
||||
|
||||
return {
|
||||
conversations,
|
||||
activeConversation,
|
||||
messages,
|
||||
isLoading,
|
||||
loadConversations,
|
||||
switchConversation,
|
||||
startNewConversation,
|
||||
sendMessage
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 6. UI/UX Enhancements
|
||||
|
||||
#### 6.1 Chat History Sidebar Layout
|
||||
```
|
||||
┌─────────────────┬──────────────────────┐
|
||||
│ Chat History │ Active Chat │
|
||||
│ │ │
|
||||
│ ○ New Chat │ ┌─ Messages ─────┐ │
|
||||
│ │ │ │ │
|
||||
│ ╔═ Today ═══ │ │ User: Question │ │
|
||||
│ ║ ○ Bible Q&A │ │ AI: Response │ │
|
||||
│ ║ ○ Prayer Help │ │ ... │ │
|
||||
│ ╚═══════════ │ │ │ │
|
||||
│ │ └────────────────┘ │
|
||||
│ ╔═ Yesterday ═ │ ┌─ Input ──────────┐ │
|
||||
│ ║ ○ Verse Study │ │ [Type message... ]│ │
|
||||
│ ╚═══════════ │ └──────────────────┘ │
|
||||
└─────────────────┴──────────────────────┘
|
||||
```
|
||||
|
||||
#### 6.2 Mobile-Responsive Design
|
||||
- **Mobile**: Stack history as overlay/drawer
|
||||
- **Tablet**: Side-by-side with collapsed history
|
||||
- **Desktop**: Full side-by-side layout
|
||||
|
||||
### 7. Performance Considerations
|
||||
|
||||
#### 7.1 Database Optimization
|
||||
- **Indexes**: conversation lookups, message pagination
|
||||
- **Pagination**: Limit conversation and message queries
|
||||
- **Cleanup**: Archive old conversations after 6 months
|
||||
|
||||
#### 7.2 Frontend Optimization
|
||||
- **Lazy loading**: Load conversations on demand
|
||||
- **Virtualization**: For large message lists
|
||||
- **Caching**: Cache conversation metadata
|
||||
|
||||
#### 7.3 AI Context Management
|
||||
- **Smart truncation**: Summarize old messages if context too long
|
||||
- **Relevance scoring**: Prioritize recent and relevant messages
|
||||
- **Token optimization**: Balance context richness vs cost
|
||||
|
||||
### 8. Security & Privacy
|
||||
|
||||
#### 8.1 Data Protection
|
||||
- **User isolation**: Strict user-based access control
|
||||
- **Encryption**: Sensitive conversation content
|
||||
- **Retention policy**: Auto-delete after configurable period
|
||||
|
||||
#### 8.2 Anonymous Users
|
||||
- **Session-based storage**: For non-authenticated users
|
||||
- **Migration path**: Convert anonymous chats to user accounts
|
||||
|
||||
### 9. Testing Strategy
|
||||
|
||||
#### 9.1 Unit Tests
|
||||
- Conversation CRUD operations
|
||||
- Message history management
|
||||
- AI context generation
|
||||
|
||||
#### 9.2 Integration Tests
|
||||
- Full chat flow with persistence
|
||||
- Conversation switching
|
||||
- Multi-language handling
|
||||
|
||||
#### 9.3 User Testing
|
||||
- Chat history navigation
|
||||
- Conversation management
|
||||
- Mobile responsiveness
|
||||
|
||||
### 10. Deployment Considerations
|
||||
|
||||
#### 10.1 Migration Strategy
|
||||
- **Backward compatibility**: Existing chat continues to work
|
||||
- **Data migration**: Convert existing session data if applicable
|
||||
- **Feature flags**: Gradual rollout of new features
|
||||
|
||||
#### 10.2 Monitoring
|
||||
- **Conversation metrics**: Creation, length, engagement
|
||||
- **Performance monitoring**: API response times
|
||||
- **Error tracking**: Failed chat operations
|
||||
|
||||
## Success Metrics
|
||||
|
||||
1. **User Engagement**: Longer chat sessions, return conversations
|
||||
2. **Conversation Quality**: Better AI responses with context
|
||||
3. **User Satisfaction**: Positive feedback on chat experience
|
||||
4. **Technical Performance**: Fast conversation loading, reliable persistence
|
||||
|
||||
## Timeline Estimate
|
||||
|
||||
- **Phase 1** (Database & API): 3-4 days
|
||||
- **Phase 2** (Enhanced Memory): 2-3 days
|
||||
- **Phase 3** (Frontend Management): 4-5 days
|
||||
- **Phase 4** (Advanced Features): 3-4 days
|
||||
|
||||
**Total**: ~2-3 weeks for complete implementation
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. Review and approve this plan
|
||||
2. Begin with Phase 1: Database schema and basic API
|
||||
3. Implement incremental improvements
|
||||
4. Test thoroughly at each phase
|
||||
5. Gather user feedback and iterate
|
||||
Reference in New Issue
Block a user