# 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([]) const [activeConversationId, setActiveConversationId] = useState(null) const [messages, setMessages] = useState([]) 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([]) const [activeConversation, setActiveConversation] = useState(null) const [messages, setMessages] = useState([]) 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