feat(DATAGO-118394): Implement automatic chat title generation using LLM

client/webui/frontend/src/lib/components/chat/SessionList.tsx

@@ -2,11 +2,62 @@ import React, { useEffect, useState, useRef, useCallback, useMemo } from "react"
 import { useInView } from "react-intersection-observer";
 import { useNavigate } from "react-router-dom";
 
-import { Trash2, Check, X, Pencil, MessageCircle, FolderInput, MoreHorizontal, PanelsTopLeft, Loader2 } from "lucide-react";
+import { Trash2, Check, X, Pencil, MessageCircle, FolderInput, MoreHorizontal, PanelsTopLeft, Sparkles, Loader2 } from "lucide-react";
 
 import { api } from "@/lib/api";
-import { useChatContext, useConfigContext } from "@/lib/hooks";
+import { useChatContext, useConfigContext, useTitleGeneration, useTitleAnimation } from "@/lib/hooks";
 import type { Project, Session } from "@/lib/types";
+
+interface SessionNameProps {
+    session: Session;
+    isCurrentSession: boolean;
+    isResponding: boolean;
+}
+
+const SessionName: React.FC<SessionNameProps> = ({ session, isCurrentSession, isResponding }) => {
+    const { autoTitleGenerationEnabled } = useConfigContext();
+
+    const displayName = useMemo(() => {
+        if (session.name && session.name.trim()) {
+            return session.name;
+        }
+        // Fallback to "New Chat" if no name
+        return "New Chat";
+    }, [session.name]);
+
+    // Pass session ID to useTitleAnimation so it can listen for title generation events
+    const { text: animatedName, isAnimating, isGenerating } = useTitleAnimation(displayName, session.id);
+
+    const isWaitingForTitle = useMemo(() => {
+        // Always show pulse when isGenerating (manual "Rename with AI")
+        if (isGenerating) {
+            return true;
+        }
+
+        if (!autoTitleGenerationEnabled) {
+            return false; // No pulse when auto title generation is disabled
+        }
+        const isNewChat = !session.name || session.name === "New Chat";
+        return isCurrentSession && isNewChat && isResponding;
+    }, [session.name, isCurrentSession, isResponding, isGenerating, autoTitleGenerationEnabled]);
+
+    // Show slow pulse while waiting for title, faster pulse during transition animation
+    const animationClass = useMemo(() => {
+        if (isGenerating || isAnimating) {
+            if (isWaitingForTitle) {
+                return "animate-pulse-slow";
+            }
+            return "animate-pulse opacity-50";
+        }
+        // For automatic title generation waiting state
+        if (isWaitingForTitle) {
+            return "animate-pulse-slow";
+        }
+        return "opacity-100";
+    }, [isWaitingForTitle, isAnimating, isGenerating]);
+
+    return <span className={`truncate font-semibold transition-opacity duration-300 ${animationClass}`}>{animatedName}</span>;
+};
 import { formatTimestamp, getErrorMessage } from "@/lib/utils";
 import { MoveSessionDialog, ProjectBadge, SessionSearch } from "@/lib/components/chat";
 import {
@@ -46,8 +97,9 @@ interface SessionListProps {
 
 export const SessionList: React.FC<SessionListProps> = ({ projects = [] }) => {
     const navigate = useNavigate();
-    const { sessionId, handleSwitchSession, updateSessionName, openSessionDeleteModal, addNotification, displayError } = useChatContext();
+    const { sessionId, handleSwitchSession, updateSessionName, openSessionDeleteModal, addNotification, displayError, isResponding } = useChatContext();
     const { persistenceEnabled } = useConfigContext();
+    const { generateTitle } = useTitleGeneration();
     const inputRef = useRef<HTMLInputElement>(null);
 
     const [sessions, setSessions] = useState<Session[]>([]);
@@ -59,6 +111,7 @@ export const SessionList: React.FC<SessionListProps> = ({ projects = [] }) => {
     const [selectedProject, setSelectedProject] = useState<string>("all");
     const [isMoveDialogOpen, setIsMoveDialogOpen] = useState(false);
     const [sessionToMove, setSessionToMove] = useState<Session | null>(null);
+    const [regeneratingTitleForSession, setRegeneratingTitleForSession] = useState<string | null>(null);
 
     const { ref: loadMoreRef, inView } = useInView({
         threshold: 0,
@@ -103,16 +156,38 @@ export const SessionList: React.FC<SessionListProps> = ({ projects = [] }) => {
                 return prevSessions;
             });
         };
+        const handleTitleUpdated = async (event: Event) => {
+            const customEvent = event as CustomEvent;
+            const { sessionId: updatedSessionId } = customEvent.detail;
+
+            // Fetch the updated session from backend to get the new title
+            try {
+                const sessionData = await api.webui.get(`/api/v1/sessions/${updatedSessionId}`);
+                const updatedSession = sessionData?.data;
+
+                if (updatedSession) {
+                    setSessions(prevSessions => {
+                        return prevSessions.map(s => (s.id === updatedSessionId ? { ...s, name: updatedSession.name } : s));
+                    });
+                }
+            } catch (error) {
+                console.error("[SessionList] Error fetching updated session:", error);
+                // Fallback: just refresh the entire list
+                fetchSessions(1, false);
+            }
+        };
         const handleBackgroundTaskCompleted = () => {
             // Refresh session list when background task completes to update indicators
             fetchSessions(1, false);
         };
         window.addEventListener("new-chat-session", handleNewSession);
         window.addEventListener("session-updated", handleSessionUpdated as EventListener);
+        window.addEventListener("session-title-updated", handleTitleUpdated);
         window.addEventListener("background-task-completed", handleBackgroundTaskCompleted);
         return () => {
             window.removeEventListener("new-chat-session", handleNewSession);
             window.removeEventListener("session-updated", handleSessionUpdated as EventListener);
+            window.removeEventListener("session-title-updated", handleTitleUpdated);
             window.removeEventListener("background-task-completed", handleBackgroundTaskCompleted);
         };
     }, [fetchSessions]);
@@ -186,6 +261,70 @@ export const SessionList: React.FC<SessionListProps> = ({ projects = [] }) => {
         navigate(`/projects/${session.projectId}`);
     };
 
+    const handleRenameWithAI = useCallback(
+        async (session: Session) => {
+            if (regeneratingTitleForSession) {
+                addNotification?.("AI rename already in progress", "info");
+                return;
+            }
+
+            setRegeneratingTitleForSession(session.id);
+            addNotification?.("Generating AI name...", "info");
+
+            try {
+                // Fetch all tasks/messages for this session
+                const data = await api.webui.get(`/api/v1/sessions/${session.id}/chat-tasks`);
+                const tasks = data.tasks || [];
+
+                if (tasks.length === 0) {
+                    addNotification?.("No messages found in this session", "warning");
+                    setRegeneratingTitleForSession(null);
+                    return;
+                }
+
+                // Parse and extract all messages from all tasks
+                const allMessages: string[] = [];
+
+                for (const task of tasks) {
+                    const messageBubbles = JSON.parse(task.messageBubbles);
+                    for (const bubble of messageBubbles) {
+                        const text = bubble.text || "";
+                        if (text.trim()) {
+                            allMessages.push(text.trim());
+                        }
+                    }
+                }
+
+                if (allMessages.length === 0) {
+                    addNotification?.("No text content found in session", "warning");
+                    setRegeneratingTitleForSession(null);
+                    return;
+                }
+
+                // Create a summary of the conversation for better context
+                // Use LAST 3 messages of each type to capture recent conversation
+                const userMessages = allMessages.filter((_, idx) => idx % 2 === 0); // Assuming alternating user/agent
+                const agentMessages = allMessages.filter((_, idx) => idx % 2 === 1);
+
+                const userSummary = userMessages.slice(-3).join(" | ");
+                const agentSummary = agentMessages.slice(-3).join(" | ");
+
+                // Call the title generation service with the full context
+                // Pass current title so polling can detect the change
+                // Pass force=true to bypass the "already has title" check
+                await generateTitle(session.id, userSummary, agentSummary, session.name || "New Chat", true);
+
+                addNotification?.("Title regenerated successfully", "success");
+            } catch (error) {
+                console.error("Error regenerating title:", error);
+                addNotification?.(`Failed to regenerate title: ${error instanceof Error ? error.message : "Unknown error"}`, "warning");
+            } finally {
+                setRegeneratingTitleForSession(null);
+            }
+        },
+        [generateTitle, addNotification, regeneratingTitleForSession]
+    );
+
     const handleMoveConfirm = async (targetProjectId: string | null) => {
         if (!sessionToMove) return;
 
@@ -229,22 +368,6 @@ export const SessionList: React.FC<SessionListProps> = ({ projects = [] }) => {
         return formatTimestamp(dateString);
     };
 
-    const getSessionDisplayName = (session: Session) => {
-        if (session.name && session.name.trim()) {
-            return session.name;
-        }
-        // Generate a short, readable identifier from the session ID
-        const sessionId = session.id;
-        if (sessionId.startsWith("web-session-")) {
-            // Extract the UUID part and create a short identifier
-            const uuid = sessionId.replace("web-session-", "");
-            const shortId = uuid.substring(0, 8);
-            return `Chat ${shortId}`;
-        }
-        // Fallback for other ID formats
-        return `Session ${sessionId.substring(0, 8)}`;
-    };
-
     // Get unique project names from sessions, sorted alphabetically
     const projectNames = useMemo(() => {
         const uniqueProjectNames = new Set<string>();
@@ -339,7 +462,7 @@ export const SessionList: React.FC<SessionListProps> = ({ projects = [] }) => {
                                             <div className="flex items-center gap-2">
                                                 <div className="flex min-w-0 flex-1 flex-col gap-1">
                                                     <div className="flex items-center gap-2">
-                                                        <span className="truncate font-semibold">{getSessionDisplayName(session)}</span>
+                                                        <SessionName session={session} isCurrentSession={session.id === sessionId} isResponding={isResponding} />
                                                         {session.hasRunningBackgroundTask && (
                                                             <Tooltip>
                                                                 <TooltipTrigger asChild>
@@ -396,6 +519,16 @@ export const SessionList: React.FC<SessionListProps> = ({ projects = [] }) => {
                                                         <Pencil size={16} className="mr-2" />
                                                         Rename
                                                     </DropdownMenuItem>
+                                                    <DropdownMenuItem
+                                                        onClick={e => {
+                                                            e.stopPropagation();
+                                                            handleRenameWithAI(session);
+                                                        }}
+                                                        disabled={regeneratingTitleForSession === session.id}
+                                                    >
+                                                        <Sparkles size={16} className={`mr-2 ${regeneratingTitleForSession === session.id ? "animate-pulse" : ""}`} />
+                                                        Rename with AI
+                                                    </DropdownMenuItem>
                                                     <DropdownMenuItem
                                                         onClick={e => {
                                                             e.stopPropagation();

client/webui/frontend/src/lib/components/pages/ChatPage.tsx

@@ -4,7 +4,7 @@ import { PanelLeftIcon } from "lucide-react";
 import type { ImperativePanelHandle } from "react-resizable-panels";
 
 import { Header } from "@/lib/components/header";
-import { useChatContext, useTaskContext, useThemeContext } from "@/lib/hooks";
+import { useChatContext, useTaskContext, useThemeContext, useTitleAnimation, useConfigContext } from "@/lib/hooks";
 import { useProjectContext } from "@/lib/providers";
 import type { TextPart } from "@/lib/types";
 import { ChatInputArea, ChatMessage, ChatSessionDialog, ChatSessionDeleteDialog, ChatSidePanel, LoadingMessageRow, ProjectBadge, SessionSidePanel } from "@/lib/components/chat";
@@ -33,8 +33,10 @@ const PANEL_SIZES_OPEN = {
 export function ChatPage() {
     const { activeProject } = useProjectContext();
     const { currentTheme } = useThemeContext();
+    const { autoTitleGenerationEnabled } = useConfigContext();
     const {
         agents,
+        sessionId,
         sessionName,
         messages,
         isSidePanelCollapsed,
@@ -99,11 +101,35 @@ export function ChatPage() {
 
     const breadcrumbs = undefined;
 
-    // Determine the page title
-    const pageTitle = useMemo(() => {
+    // Determine the page title with pulse/fade effect
+    const rawPageTitle = useMemo(() => {
         return sessionName || "New Chat";
     }, [sessionName]);
 
+    const { text: pageTitle, isAnimating: isTitleAnimating, isGenerating: isTitleGenerating } = useTitleAnimation(rawPageTitle, sessionId);
+
+    const isWaitingForTitle = useMemo(() => {
+        if (!autoTitleGenerationEnabled) {
+            return false;
+        }
+        const isNewChat = !sessionName || sessionName === "New Chat";
+        return (isNewChat && isResponding) || isTitleGenerating;
+    }, [sessionName, isResponding, isTitleGenerating, autoTitleGenerationEnabled]);
+
+    // Determine the appropriate animation class
+    const titleAnimationClass = useMemo(() => {
+        if (!autoTitleGenerationEnabled) {
+            return "opacity-100"; // No animation when disabled
+        }
+        if (isWaitingForTitle) {
+            return "animate-pulse-slow";
+        }
+        if (isTitleAnimating) {
+            return "animate-pulse opacity-50";
+        }
+        return "opacity-100";
+    }, [isWaitingForTitle, isTitleAnimating, autoTitleGenerationEnabled]);
+
     useEffect(() => {
         if (chatSidePanelRef.current && isSidePanelCollapsed) {
             chatSidePanelRef.current.resize(COLLAPSED_SIZE);
@@ -188,7 +214,9 @@ export function ChatPage() {
                     title={
                         <div className="flex items-center gap-3">
                             <Tooltip delayDuration={300}>
-                                <TooltipTrigger className="font-inherit max-w-[400px] cursor-default truncate border-0 bg-transparent p-0 text-left text-inherit hover:bg-transparent">{pageTitle}</TooltipTrigger>
+                                <TooltipTrigger className={`font-inherit max-w-[400px] cursor-default truncate border-0 bg-transparent p-0 text-left text-inherit transition-opacity duration-300 hover:bg-transparent ${titleAnimationClass}`}>
+                                    {pageTitle}
+                                </TooltipTrigger>
                                 <TooltipContent side="bottom">
                                     <p>{pageTitle}</p>
                                 </TooltipContent>

client/webui/frontend/src/lib/contexts/ConfigContext.ts

@@ -58,6 +58,13 @@ export interface ConfigContextValue {
      * When false, platform-dependent features (agent builder, connectors, etc.) are unavailable.
      */
     platformConfigured: boolean;
+
+    /**
+     * Whether automatic title generation is enabled for new chat sessions.
+     * When true, the first message exchange will trigger AI-powered title generation.
+     * Requires persistence to be enabled.
+     */
+    autoTitleGenerationEnabled?: boolean;
 }
 
 export const ConfigContext = createContext<ConfigContextValue | null>(null);

client/webui/frontend/src/lib/hooks/index.ts

@@ -30,3 +30,5 @@ export * from "./useSessionStorage";
 export * from "./useMap";
 export * from "./useLocalStorage";
 export * from "./useToggle";
+export * from "./useTitleGeneration";
+export * from "./useTitleAnimation";

client/webui/frontend/src/lib/hooks/useBackgroundTaskMonitor.ts

@@ -193,8 +193,25 @@ export function useBackgroundTaskMonitor({ userId, onTaskCompleted, onTaskFailed
         checkForRunningTasks();
     }, [userId, fetchActiveBackgroundTasks]);
 
-    // Periodic checking removed - tasks are unregistered immediately on completion
-    // via SSE final_response event in ChatProvider
+    // Periodic checking to detect background task completion when not connected to SSE
+    // This handles the case where a task completes while the user is on a different session
+    useEffect(() => {
+        if (backgroundTasks.length === 0) {
+            return;
+        }
+
+        // Check immediately on mount/change
+        checkAllBackgroundTasks();
+
+        // Then check periodically (every 5 seconds)
+        const intervalId = setInterval(() => {
+            checkAllBackgroundTasks();
+        }, 5000);
+
+        return () => {
+            clearInterval(intervalId);
+        };
+    }, [backgroundTasks.length, checkAllBackgroundTasks]);
 
     // Dismiss a notification
     const dismissNotification = useCallback((taskId: string) => {

client/webui/frontend/src/lib/hooks/useStreamingAnimation.ts

@@ -5,10 +5,7 @@ import type { StreamingState } from "./useStreamingSpeed";
  * Hook that runs an animation loop to smoothly advance through streaming content.
  * Uses the speed calculated by useStreamingSpeed to determine render pace.
  */
-export function useStreamingAnimation(
-    state: MutableRefObject<StreamingState>,
-    contentRef: MutableRefObject<string>
-): string {
+export function useStreamingAnimation(state: MutableRefObject<StreamingState>, contentRef: MutableRefObject<string>): string {
     const [displayedContent, setDisplayedContent] = useState("");
 
     useEffect(() => {
@@ -41,7 +38,7 @@ export function useStreamingAnimation(
                 setDisplayedContent(target.slice(0, Math.floor(s.cursor)));
             } else if (target.length > 0) {
                 // Ensure final content is displayed
-                setDisplayedContent(prev => prev !== target ? target : prev);
+                setDisplayedContent(prev => (prev !== target ? target : prev));
             }
 
             animationFrameId = requestAnimationFrame(animate);