@djangocfg/layouts 2.0.6 → 2.0.7

package/src/snippets/McpChat/hooks/useAIChat.ts

@@ -0,0 +1,487 @@
+'use client';
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { mcpEndpoints, type AIChatMessage, type AIChatSource, type UseAIChatOptions, type UseAIChatReturn } from '../types';
+
+function generateId(): string {
+  return `msg_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+}
+
+function generateThreadId(): string {
+  return `thread_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+}
+
+function generateUserId(): string {
+  return `user_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+}
+
+const STORAGE_KEY = 'djangocfg_chat';
+
+/**
+ * Get or create persistent chat IDs from localStorage
+ */
+function getPersistedIds(): { threadId: string; userId: string } {
+  if (typeof window === 'undefined') {
+    return { threadId: generateThreadId(), userId: generateUserId() };
+  }
+
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      const data = JSON.parse(stored);
+      if (data.threadId && data.userId) {
+        return data;
+      }
+    }
+  } catch {
+    // Ignore parse errors
+  }
+
+  // Generate new IDs and persist
+  const ids = { threadId: generateThreadId(), userId: generateUserId() };
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(ids));
+  } catch {
+    // Ignore storage errors
+  }
+  return ids;
+}
+
+/**
+ * Update persisted thread ID (after clear)
+ */
+function persistThreadId(threadId: string, userId: string): void {
+  if (typeof window === 'undefined') return;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({ threadId, userId }));
+  } catch {
+    // Ignore storage errors
+  }
+}
+
+/**
+ * Save message to server
+ */
+async function saveMessageToServer(threadId: string, userId: string, message: AIChatMessage): Promise<void> {
+  try {
+    await fetch(`${mcpEndpoints.conversations}/${threadId}/messages`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        userId,
+        message: {
+          id: message.id,
+          role: message.role,
+          content: message.content,
+          timestamp: message.timestamp.getTime(),
+          sources: message.sources,
+        },
+      }),
+    });
+  } catch (error) {
+    console.warn('[Chat] Failed to save message to server:', error);
+  }
+}
+
+/**
+ * Load conversation from server
+ */
+async function loadConversationFromServer(threadId: string): Promise<AIChatMessage[]> {
+  try {
+    const response = await fetch(`${mcpEndpoints.conversations}/${threadId}`);
+    if (!response.ok) return [];
+
+    const data = await response.json();
+    if (!data.messages || !Array.isArray(data.messages)) return [];
+
+    return data.messages.map((m: {
+      id: string;
+      role: 'user' | 'assistant';
+      content: string;
+      timestamp: number;
+      sources?: AIChatSource[];
+    }) => ({
+      id: m.id,
+      role: m.role,
+      content: m.content,
+      timestamp: new Date(m.timestamp),
+      sources: m.sources,
+    }));
+  } catch (error) {
+    console.warn('[Chat] Failed to load conversation from server:', error);
+    return [];
+  }
+}
+
+/**
+ * Delete conversation from server
+ */
+async function deleteConversationFromServer(threadId: string): Promise<void> {
+  try {
+    await fetch(`${mcpEndpoints.conversations}/${threadId}`, {
+      method: 'DELETE',
+    });
+  } catch (error) {
+    console.warn('[Chat] Failed to delete conversation from server:', error);
+  }
+}
+
+/**
+ * AI Chat hook with streaming support and server-side history
+ * All persistence is handled through API endpoints - no localStorage
+ */
+export function useAIChat(options: UseAIChatOptions): UseAIChatReturn {
+  const {
+    apiEndpoint = mcpEndpoints.chat,
+    initialMessages = [],
+    onError,
+    enableStreaming = true,
+    threadId: initialThreadId,
+    userId: initialUserId,
+  } = options;
+
+  const [messages, setMessages] = useState<AIChatMessage[]>(initialMessages);
+  const [isLoadingHistory, setIsLoadingHistory] = useState(true);
+
+  // Get persisted IDs from localStorage (or generate new ones)
+  const persistedIds = useRef<{ threadId: string; userId: string } | null>(null);
+  if (persistedIds.current === null && typeof window !== 'undefined') {
+    persistedIds.current = getPersistedIds();
+  }
+
+  const [threadId, setThreadId] = useState<string>(() =>
+    initialThreadId || persistedIds.current?.threadId || generateThreadId()
+  );
+  const [userId] = useState<string>(() =>
+    initialUserId || persistedIds.current?.userId || generateUserId()
+  );
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  // Load conversation from server on mount (always try to restore from persisted threadId)
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      setIsLoadingHistory(false);
+      return;
+    }
+
+    const loadHistory = async () => {
+      const serverMessages = await loadConversationFromServer(threadId);
+      if (serverMessages.length > 0) {
+        setMessages(serverMessages);
+      }
+      setIsLoadingHistory(false);
+    };
+    loadHistory();
+  }, [threadId]);
+
+  /**
+   * Send message with streaming support
+   */
+  const sendMessage = useCallback(
+    async (content: string) => {
+      if (!content.trim() || isLoading) return;
+
+      // Abort any previous request
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      abortControllerRef.current = new AbortController();
+
+      // Add user message
+      const userMessage: AIChatMessage = {
+        id: generateId(),
+        role: 'user',
+        content: content.trim(),
+        timestamp: new Date(),
+      };
+
+      // Add placeholder for assistant message
+      const assistantMessageId = generateId();
+      const assistantMessage: AIChatMessage = {
+        id: assistantMessageId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        isStreaming: true,
+      };
+
+      setMessages((prev) => [...prev, userMessage, assistantMessage]);
+      setIsLoading(true);
+      setError(null);
+
+      // Save user message to server
+      saveMessageToServer(threadId, userId, userMessage);
+
+      try {
+        // Build messages array from history + current message (for OpenAI format)
+        const chatMessages = [
+          ...messages
+            .filter((m) => m.role !== 'system')
+            .slice(-10) // Keep last 10 messages for context
+            .map((m) => ({
+              role: m.role as 'user' | 'assistant',
+              content: m.content,
+            })),
+          { role: 'user' as const, content },
+        ];
+
+        const response = await fetch(apiEndpoint, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            messages: chatMessages,
+            stream: enableStreaming,
+          }),
+          signal: abortControllerRef.current.signal,
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error: ${response.status}`);
+        }
+
+        if (enableStreaming && response.headers.get('content-type')?.includes('text/event-stream')) {
+          // Handle streaming response
+          await handleStreamingResponse(response, assistantMessageId);
+        } else {
+          // Handle non-streaming response
+          const data = await response.json();
+
+          if (!data.success) {
+            throw new Error(data.error || 'Failed to get response');
+          }
+
+          // Update thread ID if returned
+          if (data.threadId && data.threadId !== threadId) {
+            setThreadId(data.threadId);
+          }
+
+          // Extract sources
+          const sources: AIChatSource[] =
+            data.sources?.map((s: { title: string; path: string; url?: string; section?: string; score?: number }) => ({
+              title: s.title,
+              path: s.path,
+              url: s.url,
+              section: s.section,
+              score: s.score,
+            })) || [];
+
+          const finalContent = data.content || 'I found some relevant documentation.';
+
+          // Update assistant message
+          setMessages((prev) =>
+            prev.map((m) =>
+              m.id === assistantMessageId
+                ? {
+                    ...m,
+                    content: finalContent,
+                    sources,
+                    isStreaming: false,
+                  }
+                : m
+            )
+          );
+
+          // Save assistant message to server
+          saveMessageToServer(threadId, userId, {
+            id: assistantMessageId,
+            role: 'assistant',
+            content: finalContent,
+            timestamp: new Date(),
+            sources,
+          });
+        }
+      } catch (err) {
+        if (err instanceof Error && err.name === 'AbortError') {
+          // Request was aborted, remove the assistant message
+          setMessages((prev) => prev.filter((m) => m.id !== assistantMessageId));
+          return;
+        }
+
+        const error = err instanceof Error ? err : new Error('Unknown error');
+        setError(error);
+        onError?.(error);
+
+        // Update assistant message with error
+        setMessages((prev) =>
+          prev.map((m) =>
+            m.id === assistantMessageId
+              ? {
+                  ...m,
+                  content: `Sorry, I encountered an error: ${error.message}. Please try again.`,
+                  isStreaming: false,
+                }
+              : m
+          )
+        );
+      } finally {
+        setIsLoading(false);
+        abortControllerRef.current = null;
+      }
+    },
+    [apiEndpoint, isLoading, messages, threadId, userId, enableStreaming, onError]
+  );
+
+  /**
+   * Handle streaming SSE response
+   */
+  const handleStreamingResponse = async (response: Response, messageId: string) => {
+    const reader = response.body?.getReader();
+    if (!reader) {
+      throw new Error('No response body');
+    }
+
+    const decoder = new TextDecoder();
+    let buffer = '';
+    let fullContent = '';
+    const sources: AIChatSource[] = [];
+
+    try {
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+
+        // Process complete events
+        const lines = buffer.split('\n');
+        buffer = lines.pop() || ''; // Keep incomplete line in buffer
+
+        for (const line of lines) {
+          if (line.startsWith('data: ')) {
+            const data = line.slice(6);
+
+            if (data === '[DONE]') {
+              // Stream complete
+              setMessages((prev) =>
+                prev.map((m) =>
+                  m.id === messageId
+                    ? {
+                        ...m,
+                        content: fullContent,
+                        sources,
+                        isStreaming: false,
+                      }
+                    : m
+                )
+              );
+
+              // Save final assistant message to server
+              saveMessageToServer(threadId, userId, {
+                id: messageId,
+                role: 'assistant',
+                content: fullContent,
+                timestamp: new Date(),
+                sources,
+              });
+              return;
+            }
+
+            try {
+              const parsed = JSON.parse(data);
+
+              if (parsed.type === 'text' && parsed.content) {
+                fullContent += parsed.content;
+                // Update message with current content
+                setMessages((prev) =>
+                  prev.map((m) =>
+                    m.id === messageId
+                      ? {
+                          ...m,
+                          content: fullContent,
+                          isStreaming: true,
+                        }
+                      : m
+                  )
+                );
+              } else if (parsed.type === 'source' && parsed.source) {
+                sources.push({
+                  title: parsed.source.title,
+                  path: parsed.source.path,
+                  url: parsed.source.url,
+                  section: parsed.source.section,
+                  score: parsed.source.score,
+                });
+              } else if (parsed.type === 'done') {
+                // Update with final usage info if needed
+                setMessages((prev) =>
+                  prev.map((m) =>
+                    m.id === messageId
+                      ? {
+                          ...m,
+                          content: fullContent,
+                          sources,
+                          isStreaming: false,
+                        }
+                      : m
+                  )
+                );
+
+                // Save final assistant message to server
+                saveMessageToServer(threadId, userId, {
+                  id: messageId,
+                  role: 'assistant',
+                  content: fullContent,
+                  timestamp: new Date(),
+                  sources,
+                });
+              } else if (parsed.type === 'error') {
+                throw new Error(parsed.error || 'Stream error');
+              }
+            } catch {
+              // Ignore parse errors for individual events
+            }
+          }
+        }
+      }
+    } finally {
+      reader.releaseLock();
+    }
+  };
+
+  /**
+   * Clear all messages and start new conversation
+   */
+  const clearMessages = useCallback(async () => {
+    // Abort any ongoing request
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+
+    // Delete conversation from server
+    await deleteConversationFromServer(threadId);
+
+    setMessages([]);
+    setError(null);
+
+    // Generate new thread ID for fresh conversation and persist it
+    const newThreadId = generateThreadId();
+    setThreadId(newThreadId);
+    persistThreadId(newThreadId, userId);
+  }, [threadId, userId]);
+
+  /**
+   * Stop current streaming response
+   */
+  const stopStreaming = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+  }, []);
+
+  return {
+    messages,
+    isLoading: isLoading || isLoadingHistory,
+    error,
+    threadId,
+    userId,
+    sendMessage,
+    clearMessages,
+    stopStreaming,
+  };
+}