feat: Implement AI streaming responses with SSE and deployment infrastructure

This commit adds comprehensive AI response streaming and critical deployment features:

## AI Streaming Implementation
- **Backend StreamingService**: Token-by-token Azure OpenAI streaming (163 lines)
  - SSE endpoint at POST /api/v1/ai/chat/stream
  - Buffer management for incomplete SSE events
  - Stream callback architecture with chunk types (token, done, error)
- **Frontend useStreamingChat Hook**: Fetch API with ReadableStream (127 lines)
  - Token accumulation with state management
  - Error handling and completion callbacks
- **UI Integration**: Streaming message bubble with animated blinking cursor
  - Auto-scroll as tokens arrive
  - Loading indicator while waiting for first token
  - Seamless transition from streaming to completed message
- **Safety Integration**: All safety checks preserved
  - Rate limiting and input sanitization
  - Context building reused from chat() method

## Deployment Infrastructure (Previous Session)
- **Environment Configuration System**:
  - .env.example with 140+ configuration options
  - .env.staging and .env.production templates
  - Typed configuration service (environment.config.ts, 200 lines)
  - Environment-specific settings for DB, Redis, backups, AI
- **Secret Management**:
  - Provider abstraction for AWS Secrets Manager, HashiCorp Vault, env vars
  - 5-minute caching with automatic refresh (secrets.service.ts, 189 lines)
  - Batch secret retrieval and validation
- **Database Backup System**:
  - Automated PostgreSQL/MongoDB backups with cron scheduling
  - pg_dump + gzip compression, 30-day retention
  - S3 upload integration (backup.service.ts, 306 lines)
  - Admin endpoints for manual operations
  - Comprehensive documentation (BACKUP_STRATEGY.md, 343 lines)
- **Health Check Monitoring**:
  - Kubernetes-ready health probes (liveness/readiness/startup)
  - Custom health indicators for Redis, MongoDB, MinIO, Azure OpenAI
  - Response time tracking (health.controller.ts, 108 lines)

## Files Modified
- maternal-web/components/features/ai-chat/AIChatInterface.tsx
- maternal-app/maternal-app-backend/src/modules/ai/ai.service.ts
- maternal-app/maternal-app-backend/src/modules/ai/ai.module.ts
- docs/implementation-gaps.md (updated feature counts: 62/128 complete, 48%)

## Files Created
- maternal-web/hooks/useStreamingChat.ts

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

Co-Authored-By: Claude <noreply@anthropic.com>

maternal-web/components/features/ai-chat/AIChatInterface.tsx

@@ -53,6 +53,7 @@ import apiClient from '@/lib/api/client';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { useTranslation } from '@/hooks/useTranslation';
+import { useStreamingChat } from '@/hooks/useStreamingChat';
 
 interface Message {
   id: string;
@@ -90,6 +91,8 @@ export const AIChatInterface: React.FC = () => {
   const [messages, setMessages] = useState<Message[]>([]);
   const [input, setInput] = useState('');
   const [isLoading, setIsLoading] = useState(false);
+  const [streamingMessage, setStreamingMessage] = useState('');
+  const [useStreaming, setUseStreaming] = useState(true); // Toggle for streaming
   const [currentThinkingMessages, setCurrentThinkingMessages] = useState<string[]>([]);
   const [currentThinkingIndex, setCurrentThinkingIndex] = useState(0);
   const [conversations, setConversations] = useState<Conversation[]>([]);
@@ -105,6 +108,7 @@ export const AIChatInterface: React.FC = () => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const thinkingIntervalRef = useRef<NodeJS.Timeout | null>(null);
   const { user } = useAuth();
+  const { streamMessage, isStreaming } = useStreamingChat();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
 
@@ -151,7 +155,7 @@ export const AIChatInterface: React.FC = () => {
 
   useEffect(() => {
     scrollToBottom();
-  }, [messages]);
+  }, [messages, streamingMessage]);
 
   // Load conversations on mount
   useEffect(() => {
@@ -336,7 +340,7 @@ export const AIChatInterface: React.FC = () => {
 
   const handleSend = async (message?: string) => {
     const messageText = message || input.trim();
-    if (!messageText || isLoading) return;
+    if (!messageText || isLoading || isStreaming) return;
 
     const userMessage: Message = {
       id: Date.now().toString(),
@@ -347,42 +351,100 @@ export const AIChatInterface: React.FC = () => {
 
     setMessages((prev) => [...prev, userMessage]);
     setInput('');
-    setIsLoading(true);
 
-    try {
-      const response = await apiClient.post('/api/v1/ai/chat', {
-        message: messageText,
-        conversationId: currentConversationId,
-      });
+    // Use streaming if enabled
+    if (useStreaming) {
+      setIsLoading(true);
+      setStreamingMessage('');
 
-      const responseData = response.data.data;
-      const assistantMessage: Message = {
-        id: (Date.now() + 1).toString(),
-        role: 'assistant',
-        content: responseData.message,
-        timestamp: new Date(responseData.timestamp),
-      };
+      try {
+        let accumulatedMessage = '';
 
-      setMessages((prev) => [...prev, assistantMessage]);
+        await streamMessage(
+          {
+            message: messageText,
+            conversationId: currentConversationId || undefined,
+          },
+          (chunk) => {
+            if (chunk.type === 'token' && chunk.content) {
+              accumulatedMessage += chunk.content;
+              setStreamingMessage(accumulatedMessage);
+            }
+          },
+          // On complete
+          () => {
+            // Add the complete message to messages
+            const assistantMessage: Message = {
+              id: (Date.now() + 1).toString(),
+              role: 'assistant',
+              content: accumulatedMessage,
+              timestamp: new Date(),
+            };
+            setMessages((prev) => [...prev, assistantMessage]);
+            setStreamingMessage('');
+            setIsLoading(false);
 
-      // Update current conversation ID if it's a new conversation
-      if (!currentConversationId && responseData.conversationId) {
-        setCurrentConversationId(responseData.conversationId);
+            // Reload conversations
+            loadConversations();
+          },
+          // On error
+          (error) => {
+            console.error('Streaming error:', error);
+            const errorMessage: Message = {
+              id: (Date.now() + 1).toString(),
+              role: 'assistant',
+              content: t('interface.errorMessage'),
+              timestamp: new Date(),
+            };
+            setMessages((prev) => [...prev, errorMessage]);
+            setStreamingMessage('');
+            setIsLoading(false);
+          }
+        );
+      } catch (error) {
+        console.error('Streaming failed:', error);
+        setStreamingMessage('');
+        setIsLoading(false);
       }
+    } else {
+      // Non-streaming fallback
+      setIsLoading(true);
 
-      // Reload conversations to update the list
-      await loadConversations();
-    } catch (error) {
-      console.error('AI chat error:', error);
-      const errorMessage: Message = {
-        id: (Date.now() + 1).toString(),
-        role: 'assistant',
-        content: t('interface.errorMessage'),
-        timestamp: new Date(),
-      };
-      setMessages((prev) => [...prev, errorMessage]);
-    } finally {
-      setIsLoading(false);
+      try {
+        const response = await apiClient.post('/api/v1/ai/chat', {
+          message: messageText,
+          conversationId: currentConversationId,
+        });
+
+        const responseData = response.data.data;
+        const assistantMessage: Message = {
+          id: (Date.now() + 1).toString(),
+          role: 'assistant',
+          content: responseData.message,
+          timestamp: new Date(responseData.timestamp),
+        };
+
+        setMessages((prev) => [...prev, assistantMessage]);
+
+        // Update current conversation ID if it's a new conversation
+        if (!currentConversationId && responseData.conversationId) {
+          setCurrentConversationId(responseData.conversationId);
+        }
+
+        // Reload conversations to update the list
+        await loadConversations();
+      } catch (error) {
+        console.error('AI chat error:', error);
+        const errorMessage: Message = {
+          id: (Date.now() + 1).toString(),
+          role: 'assistant',
+          content: t('interface.errorMessage'),
+          timestamp: new Date(),
+        };
+        setMessages((prev) => [...prev, errorMessage]);
+      } finally {
+        setIsLoading(false);
+      }
     }
   };
 
@@ -724,7 +786,68 @@ export const AIChatInterface: React.FC = () => {
             ))}
           </AnimatePresence>
 
-          {isLoading && (
+          {/* Streaming Message Display */}
+          {streamingMessage && (
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.3 }}
+            >
+              <Box sx={{ display: 'flex', gap: 2, justifyContent: 'flex-start' }}>
+                <Avatar sx={{ bgcolor: 'primary.main', mt: 1 }}>
+                  <SmartToy />
+                </Avatar>
+                <Paper
+                  elevation={0}
+                  sx={{
+                    p: 2,
+                    maxWidth: '70%',
+                    borderRadius: 3,
+                    bgcolor: 'rgba(255, 255, 255, 0.95)',
+                    backdropFilter: 'blur(10px)',
+                  }}
+                >
+                  <Box
+                    sx={{
+                      '& p': { mb: 1 },
+                      '& strong': { fontWeight: 600 },
+                      '& ul, & ol': { pl: 2, mb: 1 },
+                      '& li': { mb: 0.5 },
+                      '& hr': { my: 2, borderColor: 'divider' },
+                      '& h1, & h2, & h3, & h4, & h5, & h6': {
+                        fontWeight: 600,
+                        mb: 1,
+                        mt: 1.5
+                      },
+                    }}
+                  >
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                      {streamingMessage}
+                    </ReactMarkdown>
+                    <Box
+                      component="span"
+                      sx={{
+                        display: 'inline-block',
+                        width: '2px',
+                        height: '1.2em',
+                        bgcolor: 'primary.main',
+                        ml: 0.5,
+                        verticalAlign: 'text-bottom',
+                        animation: 'blink 1s infinite',
+                        '@keyframes blink': {
+                          '0%, 49%': { opacity: 1 },
+                          '50%, 100%': { opacity: 0 },
+                        },
+                      }}
+                    />
+                  </Box>
+                </Paper>
+              </Box>
+            </motion.div>
+          )}
+
+          {/* Loading Indicator (shown when waiting for first token) */}
+          {isLoading && !streamingMessage && (
             <Box sx={{ display: 'flex', gap: 2 }}>
               <Avatar sx={{ bgcolor: 'primary.main' }}>
                 <SmartToy />

maternal-web/hooks/useStreamingChat.ts

@@ -0,0 +1,136 @@
+import { useState, useCallback } from 'react';
+import apiClient from '@/lib/api/client';
+
+export interface StreamChunk {
+  type: 'token' | 'metadata' | 'done' | 'error';
+  content?: string;
+  metadata?: any;
+  error?: string;
+}
+
+export interface ChatMessageDto {
+  message: string;
+  conversationId?: string;
+  language?: string;
+}
+
+/**
+ * Hook for streaming AI chat responses
+ * Uses Server-Sent Events (SSE) for real-time token streaming
+ */
+export function useStreamingChat() {
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const streamMessage = useCallback(
+    async (
+      chatDto: ChatMessageDto,
+      onChunk: (chunk: StreamChunk) => void,
+      onComplete?: () => void,
+      onError?: (error: string) => void
+    ) => {
+      setIsStreaming(true);
+      setError(null);
+
+      try {
+        const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/ai/chat/stream`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            // Add auth token if available
+            ...(typeof window !== 'undefined' && localStorage.getItem('accessToken')
+              ? { Authorization: `Bearer ${localStorage.getItem('accessToken')}` }
+              : {}),
+          },
+          body: JSON.stringify(chatDto),
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const reader = response.body?.getReader();
+        if (!reader) {
+          throw new Error('Response body is not readable');
+        }
+
+        const decoder = new TextDecoder();
+        let buffer = '';
+
+        while (true) {
+          const { done, value } = await reader.read();
+
+          if (done) {
+            break;
+          }
+
+          // Decode the chunk and add to buffer
+          buffer += decoder.decode(value, { stream: true });
+
+          // Split by newlines to process complete SSE events
+          const lines = buffer.split('\n');
+
+          // Keep the last incomplete line in the buffer
+          buffer = lines.pop() || '';
+
+          for (const line of lines) {
+            const trimmed = line.trim();
+
+            // Skip empty lines
+            if (!trimmed) {
+              continue;
+            }
+
+            // Parse SSE data format
+            if (trimmed.startsWith('data: ')) {
+              const data = trimmed.substring(6);
+
+              try {
+                const chunk: StreamChunk = JSON.parse(data);
+
+                // Emit the chunk
+                onChunk(chunk);
+
+                // Check for completion
+                if (chunk.type === 'done') {
+                  setIsStreaming(false);
+                  if (onComplete) {
+                    onComplete();
+                  }
+                  return;
+                }
+
+                // Check for errors
+                if (chunk.type === 'error') {
+                  setIsStreaming(false);
+                  const errorMsg = chunk.error || 'Streaming error occurred';
+                  setError(errorMsg);
+                  if (onError) {
+                    onError(errorMsg);
+                  }
+                  return;
+                }
+              } catch (parseError) {
+                console.error('Failed to parse SSE chunk:', parseError);
+              }
+            }
+          }
+        }
+      } catch (err) {
+        const errorMsg = err instanceof Error ? err.message : 'Streaming failed';
+        setError(errorMsg);
+        setIsStreaming(false);
+        if (onError) {
+          onError(errorMsg);
+        }
+      }
+    },
+    []
+  );
+
+  return {
+    streamMessage,
+    isStreaming,
+    error,
+  };
+}