Add title generation button and improve auto-title generation (#2708)

* refactor(title-generation): switch to text streaming for title generation

* feat(ui): add reveal animation for generated session titles

* feat(sessions): add title generation button and improve auto-title generation

Author: ComputelessComputer

apps/desktop/src/components/main/body/sessions/index.tsx

@@ -7,6 +7,7 @@ import { commands as miscCommands } from "@hypr/plugin-misc";
 
 import AudioPlayer from "../../../../contexts/audio-player";
 import { useListener } from "../../../../contexts/listener";
+import { useAutoTitle } from "../../../../hooks/useAutoTitle";
 import { useIsSessionEnhancing } from "../../../../hooks/useEnhancedNotes";
 import { useStartListening } from "../../../../hooks/useStartListening";
 import { useSTTConnection } from "../../../../hooks/useSTTConnection";
@@ -146,6 +147,8 @@ function TabContentNoteInner({
     editor: import("@hypr/tiptap/editor").TiptapEditor | null;
   }>(null);
 
+  const { generateTitle } = useAutoTitle(tab);
+
   const focusTitle = React.useCallback(() => {
     titleInputRef.current?.focus();
   }, []);
@@ -168,6 +171,7 @@ function TabContentNoteInner({
             ref={titleInputRef}
             tab={tab}
             onNavigateToEditor={focusEditor}
+            onGenerateTitle={generateTitle}
           />
         </div>
         <div className="mt-2 px-2 flex-1 min-h-0">

apps/desktop/src/components/main/body/sessions/title-input.tsx

@@ -1,4 +1,5 @@
 import { usePrevious } from "@uidotdev/usehooks";
+import { SparklesIcon } from "lucide-react";
 import { forwardRef, useEffect, useRef, useState } from "react";
 
 import { cn } from "@hypr/utils";
@@ -12,8 +13,9 @@ export const TitleInput = forwardRef<
   {
     tab: Extract<Tab, { type: "sessions" }>;
     onNavigateToEditor?: () => void;
+    onGenerateTitle?: () => void;
   }
->(({ tab, onNavigateToEditor }, ref) => {
+>(({ tab, onNavigateToEditor, onGenerateTitle }, ref) => {
   const {
     id: sessionId,
     state: { view },
@@ -23,15 +25,19 @@ export const TitleInput = forwardRef<
   const wasGenerating = usePrevious(isGenerating);
   const [showRevealAnimation, setShowRevealAnimation] = useState(false);
 
+  const editorId = view ? "active" : "inactive";
+  const internalRef = useRef<HTMLInputElement>(null);
+  const inputRef = (ref as React.RefObject<HTMLInputElement>) || internalRef;
+
   useEffect(() => {
-    if (wasGenerating && !isGenerating && title) {
+    if (wasGenerating && !isGenerating) {
       setShowRevealAnimation(true);
       const timer = setTimeout(() => {
         setShowRevealAnimation(false);
       }, 1000);
       return () => clearTimeout(timer);
     }
-  }, [wasGenerating, isGenerating, title]);
+  }, [wasGenerating, isGenerating]);
 
   const handleEditTitle = main.UI.useSetPartialRowCallback(
     "sessions",
@@ -41,10 +47,6 @@ export const TitleInput = forwardRef<
     main.STORE_ID,
   );
 
-  const editorId = view ? "active" : "inactive";
-  const internalRef = useRef<HTMLInputElement>(null);
-  const inputRef = (ref as React.RefObject<HTMLInputElement>) || internalRef;
-
   useEffect(() => {
     const handleMoveToTitlePosition = (e: Event) => {
       const customEvent = e as CustomEvent<{ pixelWidth: number }>;
@@ -172,20 +174,42 @@ export const TitleInput = forwardRef<
     );
   }
 
+  const hasTitle = Boolean(title?.trim());
+  const showButton = hasTitle && onGenerateTitle;
+
   return (
-    <input
-      ref={inputRef}
-      id={`title-input-${sessionId}-${editorId}`}
-      placeholder="Untitled"
-      type="text"
-      onChange={(e) => handleEditTitle(e.target.value)}
-      onKeyDown={handleKeyDown}
-      value={title ?? ""}
-      className={cn([
-        "w-full transition-opacity duration-200",
-        "border-none bg-transparent focus:outline-none",
-        "text-xl font-semibold placeholder:text-muted-foreground",
-      ])}
-    />
+    <div className="flex items-center gap-2 w-full">
+      <input
+        ref={inputRef}
+        id={`title-input-${sessionId}-${editorId}`}
+        placeholder="Untitled"
+        type="text"
+        onChange={(e) => handleEditTitle(e.target.value)}
+        onKeyDown={handleKeyDown}
+        value={title ?? ""}
+        className={cn([
+          "flex-1 min-w-0 transition-opacity duration-200",
+          "border-none bg-transparent focus:outline-none",
+          "text-xl font-semibold placeholder:text-muted-foreground",
+        ])}
+      />
+      {showButton && (
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onGenerateTitle?.();
+          }}
+          onMouseDown={(e) => e.preventDefault()}
+          className={cn([
+            "shrink-0 p-1",
+            "text-muted-foreground hover:text-foreground",
+            "opacity-50 hover:opacity-100 transition-opacity",
+          ])}
+        >
+          <SparklesIcon className="w-4 h-4" />
+        </button>
+      )}
+    </div>
   );
 });

apps/desktop/src/hooks/useAutoTitle.ts

@@ -46,12 +46,7 @@ export function useAutoTitle(tab: Extract<Tab, { type: "sessions" }>) {
     },
   });
 
-  const attemptGenerateTitle = useCallback(() => {
-    const trimmedTitle = title?.trim();
-    if (trimmedTitle) {
-      return;
-    }
-
+  const generateTitle = useCallback(() => {
     if (!model) {
       return;
     }
@@ -60,7 +55,16 @@ export function useAutoTitle(tab: Extract<Tab, { type: "sessions" }>) {
       model,
       args: { sessionId },
     });
-  }, [title, model, titleTask, sessionId]);
+  }, [model, titleTask, sessionId]);
+
+  const attemptGenerateTitle = useCallback(() => {
+    const trimmedTitle = title?.trim();
+    if (trimmedTitle) {
+      return;
+    }
+
+    generateTitle();
+  }, [title, generateTitle]);
 
   const hasGeneratedForContentRef = useRef<string | null>(null);
 
@@ -86,5 +90,6 @@ export function useAutoTitle(tab: Extract<Tab, { type: "sessions" }>) {
 
   return {
     isGenerating: titleTask.isGenerating,
+    generateTitle,
   };
 }