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

This introduces animated AI-generated session titles to the chat UI, enhancing user feedback and visibility when session titles are being generated or updated. The changes add animation effects to session titles, provide an "AI Rename" option in the session list, and refactor the handling of session naming to be more responsive and visually engaging.

Author: amir-ghasemi

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

@@ -204,16 +204,11 @@ const MessageContent = React.memo<{ message: MessageFE; isStreaming?: boolean }>
         // Sanitize the HTML to prevent XSS
         // Allow mention chips and their data attributes
         const cleanHtml = DOMPurify.sanitize(message.displayHtml, {
-            ALLOWED_TAGS: ['span', 'br'],
-            ALLOWED_ATTR: ['class', 'contenteditable', 'data-internal', 'data-person-id', 'data-person-name', 'data-display']
+            ALLOWED_TAGS: ["span", "br"],
+            ALLOWED_ATTR: ["class", "contenteditable", "data-internal", "data-person-id", "data-person-name", "data-display"],
         });
 
-        return (
-            <div
-                className="message-with-mentions whitespace-pre-wrap break-words"
-                dangerouslySetInnerHTML={{ __html: cleanHtml }}
-            />
-        );
+        return <div className="message-with-mentions break-words whitespace-pre-wrap" dangerouslySetInnerHTML={{ __html: cleanHtml }} />;
     }
 
     const renderContent = () => {

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

@@ -46,8 +46,8 @@ export const MessageHoverButtons: React.FC<MessageHoverButtonsProps> = ({ messag
             // For user messages with displayHtml, copy both HTML and plain text (only if mentions enabled)
             if (message.isUser && message.displayHtml && mentionsEnabled) {
                 const clipboardItem = new ClipboardItem({
-                    'text/html': new Blob([message.displayHtml], { type: 'text/html' }),
-                    'text/plain': new Blob([text.trim()], { type: 'text/plain' })
+                    "text/html": new Blob([message.displayHtml], { type: "text/html" }),
+                    "text/plain": new Blob([text.trim()], { type: "text/plain" }),
                 });
 
                 navigator.clipboard

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>