biblical-guide.com/temp/ai-chat-improvements-plan.md

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

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

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

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

interface ChatHistorySidebarProps {
  conversations: Conversation[]
  activeConversationId: string | null
  onSelectConversation: (id: string) => void
  onNewConversation: () => void
  onDeleteConversation: (id: string) => void
  language: string
}

3.3 Conversation List Item

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

# 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):

// 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:

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:

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