Merge pull request 'feat(ai): generate page title from content (#199)' (#210) from feat/199-ai-generate-title into develop

Reviewed-on: #210

apps/client/src/features/ai-chat/services/ai-chat-service.ts

@@ -68,6 +68,19 @@ export async function exportAiChat(
   return req.data.markdown;
 }
 
+/**
+ * Generate a page title from note content (markdown). One-shot, non-streaming
+ * (#199): the server only summarizes the supplied text and returns a suggestion;
+ * it never writes the page. The caller applies the title via /pages/update.
+ */
+export async function generatePageTitle(content: string): Promise<string> {
+  const req = await api.post<{ title: string }>(
+    "/ai-chat/generate-page-title",
+    { content },
+  );
+  return req.data.title;
+}
+
 /**
  * Agent roles API (`/ai-chat/roles`). `list` is available to any workspace
  * member (for the chat-creation picker); create/update/delete are admin-only

apps/client/src/features/editor/components/fixed-toolbar/groups/generate-title-group.tsx

@@ -0,0 +1,39 @@
+import { FC } from "react";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { IconSparkles } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { useGeneratePageTitle } from "@/features/editor/hooks/use-generate-page-title.ts";
+
+interface Props {
+  pageId: string;
+  color?: string;
+  iconSize?: number;
+}
+
+/**
+ * AI "generate title" button (#199). Reads the live editor content and applies a
+ * model-suggested title immediately. Rendered in the page byline, only in edit
+ * mode and when the workspace's generative AI flag is on.
+ */
+export const GenerateTitleGroup: FC<Props> = ({
+  pageId,
+  color = "gray",
+  iconSize = 20,
+}) => {
+  const { t } = useTranslation();
+  const gen = useGeneratePageTitle(pageId);
+
+  return (
+    <Tooltip label={t("Generate title with AI")} withArrow openDelay={250}>
+      <ActionIcon
+        variant="subtle"
+        color={color}
+        aria-label={t("Generate title with AI")}
+        loading={gen.isPending}
+        onClick={() => gen.mutate()}
+      >
+        <IconSparkles size={iconSize} stroke={1.5} />
+      </ActionIcon>
+    </Tooltip>
+  );
+};

apps/client/src/features/editor/full-editor.tsx

@@ -33,6 +33,7 @@ import {
   pageEditorAtom,
 } from "@/features/editor/atoms/editor-atoms.ts";
 import { DictationGroup } from "@/features/editor/components/fixed-toolbar/groups/dictation-group";
+import { GenerateTitleGroup } from "@/features/editor/components/fixed-toolbar/groups/generate-title-group";
 
 const MemoizedTitleEditor = React.memo(TitleEditor);
 const MemoizedPageEditor = React.memo(PageEditor);
@@ -76,6 +77,9 @@ export function FullEditor({
   const [user] = useAtom(userAtom);
   const workspace = useAtomValue(workspaceAtom);
   const isDictationEnabled = workspace?.settings?.ai?.dictation === true;
+  // AI title generation reuses the generative AI flag (same gate as the on-page
+  // generative menu); the server enforces it too (#199).
+  const isTitleGenEnabled = workspace?.settings?.ai?.generative === true;
   const fullPageWidth = user.settings?.preferences?.fullPageWidth;
   const editorToolbarEnabled =
     user.settings?.preferences?.editorToolbar ?? false;
@@ -114,11 +118,13 @@ export function FullEditor({
         editable={editable}
       />
       <PageByline
+        pageId={pageId}
         creator={creator}
         contributors={contributors}
         editable={editable}
         isEditMode={isEditMode}
         isDictationEnabled={isDictationEnabled}
+        isTitleGenEnabled={isTitleGenEnabled}
       />
       <MemoizedPageEditor
         pageId={pageId}
@@ -131,19 +137,23 @@ export function FullEditor({
 }
 
 type PageBylineProps = {
+  pageId: string;
   creator?: PageUser;
   contributors?: IContributor[];
   editable?: boolean;
   isEditMode?: boolean;
   isDictationEnabled?: boolean;
+  isTitleGenEnabled?: boolean;
 };
 
 function PageByline({
+  pageId,
   creator,
   contributors,
   editable,
   isEditMode,
   isDictationEnabled,
+  isTitleGenEnabled,
 }: PageBylineProps) {
   const { t } = useTranslation();
   const detailsTriggerProps = useAsideTriggerProps("details");
@@ -151,6 +161,9 @@ function PageByline({
   const showDictation = Boolean(
     isDictationEnabled && editable && isEditMode && editor,
   );
+  const showTitleGen = Boolean(
+    isTitleGenEnabled && editable && isEditMode && editor,
+  );
 
   const otherContributors = (contributors ?? []).filter(
     (c) => c.id !== creator?.id,
@@ -241,6 +254,11 @@ function PageByline({
         {showDictation && editor && (
           <DictationGroup editor={editor} color="gray" iconSize={20} />
         )}
+        {/* Shown only in edit mode when the workspace's generative AI flag is on,
+            so AI title generation stays reachable from the byline (#199). */}
+        {showTitleGen && (
+          <GenerateTitleGroup pageId={pageId} color="gray" iconSize={20} />
+        )}
       </Group>
     </Group>
   );

apps/client/src/features/editor/hooks/use-generate-page-title.test.tsx

@@ -0,0 +1,294 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Provider, createStore } from "jotai";
+import type { Editor } from "@tiptap/core";
+import {
+  pageEditorAtom,
+  titleEditorAtom,
+} from "@/features/editor/atoms/editor-atoms.ts";
+
+// --- Mocks for the hook's collaborators ---------------------------------------
+
+const generatePageTitleMock = vi.fn();
+vi.mock("@/features/ai-chat/services/ai-chat-service.ts", () => ({
+  generatePageTitle: (content: string) => generatePageTitleMock(content),
+}));
+
+const updateTitleMock = vi.fn();
+const updatePageDataMock = vi.fn();
+vi.mock("@/features/page/queries/page-query.ts", () => ({
+  useUpdateTitlePageMutation: () => ({ mutateAsync: updateTitleMock }),
+  updatePageData: (page: unknown) => updatePageDataMock(page),
+}));
+
+const emitMock = vi.fn();
+vi.mock("@/features/websocket/use-query-emit.ts", () => ({
+  useQueryEmit: () => emitMock,
+}));
+
+const localEmitMock = vi.fn();
+vi.mock("@/lib/local-emitter.ts", () => ({
+  default: { emit: (...args: unknown[]) => localEmitMock(...args) },
+}));
+
+// htmlToMarkdown just echoes the editor HTML so each test controls the markdown
+// purely via the fake page editor's getHTML().
+vi.mock("@docmost/editor-ext", () => ({
+  htmlToMarkdown: (html: string) => html,
+}));
+
+const notificationsShowMock = vi.fn();
+vi.mock("@mantine/notifications", () => ({
+  notifications: { show: (opts: unknown) => notificationsShowMock(opts) },
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+// Import after mocks are registered.
+import { useGeneratePageTitle } from "./use-generate-page-title.ts";
+
+// --- Test helpers -------------------------------------------------------------
+
+function makePageEditor(pageId: string, html = "<p>content</p>"): Editor {
+  return {
+    isDestroyed: false,
+    getHTML: () => html,
+    storage: { pageId },
+  } as unknown as Editor;
+}
+
+function makeTitleEditor(): Editor & {
+  commands: { setContent: ReturnType<typeof vi.fn> };
+} {
+  return {
+    isDestroyed: false,
+    isFocused: false,
+    commands: { setContent: vi.fn() },
+  } as unknown as Editor & {
+    commands: { setContent: ReturnType<typeof vi.fn> };
+  };
+}
+
+function setup(pageId: string, store = createStore()) {
+  const queryClient = new QueryClient({
+    defaultOptions: { mutations: { retry: false } },
+  });
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <Provider store={store}>{children}</Provider>
+    </QueryClientProvider>
+  );
+  const { result } = renderHook(() => useGeneratePageTitle(pageId), {
+    wrapper,
+  });
+  return { result, store };
+}
+
+const PAGE_A = {
+  id: "pageA",
+  title: "Generated Title",
+  spaceId: "space1",
+  slugId: "slugA",
+  parentPageId: null,
+  icon: null,
+} as any;
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("useGeneratePageTitle", () => {
+  it("shows a notice and bails when the editor content is empty", async () => {
+    const store = createStore();
+    store.set(pageEditorAtom as never, makePageEditor("pageA", "   "));
+    store.set(titleEditorAtom as never, makeTitleEditor());
+    const { result } = setup("pageA", store);
+
+    await act(async () => {
+      await result.current.mutateAsync();
+    });
+
+    expect(notificationsShowMock).toHaveBeenCalledWith(
+      expect.objectContaining({ message: "The note is empty", color: "yellow" }),
+    );
+    expect(generatePageTitleMock).not.toHaveBeenCalled();
+    expect(updateTitleMock).not.toHaveBeenCalled();
+  });
+
+  it("leaves the title untouched when the model returns nothing usable", async () => {
+    const store = createStore();
+    store.set(pageEditorAtom as never, makePageEditor("pageA"));
+    store.set(titleEditorAtom as never, makeTitleEditor());
+    generatePageTitleMock.mockResolvedValue("   ");
+    const { result } = setup("pageA", store);
+
+    await act(async () => {
+      await result.current.mutateAsync();
+    });
+
+    expect(updateTitleMock).not.toHaveBeenCalled();
+    expect(notificationsShowMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        message: "Could not generate a title",
+        color: "yellow",
+      }),
+    );
+  });
+
+  it("happy path: applies the title, refreshes cache, writes the field, broadcasts", async () => {
+    const store = createStore();
+    const titleEditor = makeTitleEditor();
+    store.set(pageEditorAtom as never, makePageEditor("pageA"));
+    store.set(titleEditorAtom as never, titleEditor);
+    generatePageTitleMock.mockResolvedValue("Generated Title");
+    updateTitleMock.mockResolvedValue(PAGE_A);
+    const { result } = setup("pageA", store);
+
+    await act(async () => {
+      await result.current.mutateAsync();
+    });
+
+    expect(updateTitleMock).toHaveBeenCalledWith({
+      pageId: "pageA",
+      title: "Generated Title",
+    });
+    expect(updatePageDataMock).toHaveBeenCalledWith(PAGE_A);
+    expect(titleEditor.commands.setContent).toHaveBeenCalledWith(
+      "Generated Title",
+    );
+    expect(localEmitMock).toHaveBeenCalled();
+    expect(emitMock).toHaveBeenCalled();
+    expect(notificationsShowMock).toHaveBeenCalledWith(
+      expect.objectContaining({ message: "Title generated" }),
+    );
+  });
+
+  it("does NOT write the visible title field when the user navigated away during generation", async () => {
+    const store = createStore();
+    const titleEditor = makeTitleEditor(); // persistent across navigation
+    store.set(pageEditorAtom as never, makePageEditor("pageA"));
+    store.set(titleEditorAtom as never, titleEditor);
+
+    // Control when generation resolves so we can navigate mid-flight.
+    let resolveTitle!: (t: string) => void;
+    generatePageTitleMock.mockReturnValue(
+      new Promise<string>((res) => {
+        resolveTitle = res;
+      }),
+    );
+    updateTitleMock.mockResolvedValue(PAGE_A);
+    const { result } = setup("pageA", store);
+
+    let pending!: Promise<void>;
+    act(() => {
+      pending = result.current.mutateAsync();
+    });
+
+    // User navigates to page B: the live page editor now belongs to pageB.
+    act(() => {
+      store.set(pageEditorAtom as never, makePageEditor("pageB"));
+    });
+
+    await act(async () => {
+      resolveTitle("Generated Title");
+      await pending;
+    });
+
+    // DB write is still correct (keyed by the captured pageId)...
+    expect(updateTitleMock).toHaveBeenCalledWith({
+      pageId: "pageA",
+      title: "Generated Title",
+    });
+    // ...but we must NOT stamp page A's title into page B's visible field.
+    expect(titleEditor.commands.setContent).not.toHaveBeenCalled();
+    // The change is still broadcast to other clients.
+    expect(emitMock).toHaveBeenCalled();
+  });
+
+  it("does NOT write the visible title field when the title editor is focused", async () => {
+    const store = createStore();
+    const titleEditor = makeTitleEditor();
+    store.set(pageEditorAtom as never, makePageEditor("pageA"));
+    store.set(titleEditorAtom as never, titleEditor);
+
+    // Resolve generation under our control so we can mark the live title editor
+    // as focused before the post-generation write runs.
+    let resolveTitle!: (t: string) => void;
+    generatePageTitleMock.mockReturnValue(
+      new Promise<string>((res) => {
+        resolveTitle = res;
+      }),
+    );
+    updateTitleMock.mockResolvedValue(PAGE_A);
+    const { result } = setup("pageA", store);
+
+    let pending!: Promise<void>;
+    act(() => {
+      pending = result.current.mutateAsync();
+    });
+
+    // The user clicked into the title field while the model ran — overwriting it
+    // now would clobber what they are actively typing.
+    act(() => {
+      (titleEditor as { isFocused: boolean }).isFocused = true;
+    });
+
+    await act(async () => {
+      resolveTitle("Generated Title");
+      await pending;
+    });
+
+    // The DB write still persists the value...
+    expect(updateTitleMock).toHaveBeenCalledWith({
+      pageId: "pageA",
+      title: "Generated Title",
+    });
+    expect(updatePageDataMock).toHaveBeenCalledWith(PAGE_A);
+    // ...but the visible field is left alone while it is focused.
+    expect(titleEditor.commands.setContent).not.toHaveBeenCalled();
+    // The change is still broadcast to other clients.
+    expect(localEmitMock).toHaveBeenCalled();
+    expect(emitMock).toHaveBeenCalled();
+  });
+
+  it("bails before calling the model when the page editor is destroyed", async () => {
+    const store = createStore();
+    const pageEditor = makePageEditor("pageA");
+    (pageEditor as { isDestroyed: boolean }).isDestroyed = true;
+    store.set(pageEditorAtom as never, pageEditor);
+    store.set(titleEditorAtom as never, makeTitleEditor());
+    const { result } = setup("pageA", store);
+
+    await act(async () => {
+      await result.current.mutateAsync();
+    });
+
+    expect(generatePageTitleMock).not.toHaveBeenCalled();
+    expect(updateTitleMock).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    [403, "AI title generation is disabled"],
+    [503, "AI is not configured"],
+    [429, "Too many requests, please try again later"],
+    [500, "Failed to generate title"],
+  ])("maps HTTP %s onError to a friendly message", async (status, message) => {
+    const store = createStore();
+    store.set(pageEditorAtom as never, makePageEditor("pageA"));
+    store.set(titleEditorAtom as never, makeTitleEditor());
+    generatePageTitleMock.mockRejectedValue({ response: { status } });
+    const { result } = setup("pageA", store);
+
+    await act(async () => {
+      await expect(result.current.mutateAsync()).rejects.toBeTruthy();
+    });
+
+    expect(notificationsShowMock).toHaveBeenCalledWith(
+      expect.objectContaining({ message, color: "red" }),
+    );
+  });
+});

apps/client/src/features/editor/hooks/use-generate-page-title.ts

@@ -0,0 +1,134 @@
+import { useRef } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { useAtomValue } from "jotai";
+import { notifications } from "@mantine/notifications";
+import { useTranslation } from "react-i18next";
+import { htmlToMarkdown } from "@docmost/editor-ext";
+import {
+  pageEditorAtom,
+  titleEditorAtom,
+} from "@/features/editor/atoms/editor-atoms.ts";
+import {
+  updatePageData,
+  useUpdateTitlePageMutation,
+} from "@/features/page/queries/page-query.ts";
+import { generatePageTitle } from "@/features/ai-chat/services/ai-chat-service.ts";
+import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
+import { UpdateEvent } from "@/features/websocket/types";
+import localEmitter from "@/lib/local-emitter.ts";
+
+// Maximum length we send to the model. The server truncates again; this is a
+// cheap client-side bound so we never ship a huge body over the wire.
+const MAX_CONTENT_CHARS = 20000;
+
+/**
+ * Generate a title for the given page from the LIVE editor content (#199),
+ * including unsaved edits, then apply it IMMEDIATELY (per product decision). The
+ * server endpoint only summarizes the supplied markdown — it never writes the
+ * page; the actual title write goes through the existing /pages/update mutation
+ * (which enforces edit permission), and is mirrored to the title field + other
+ * clients exactly like TitleEditor.saveTitle. Returns a mutation-like API so the
+ * button can show a loading state via `isPending`.
+ */
+export function useGeneratePageTitle(pageId: string) {
+  const { t } = useTranslation();
+  const pageEditor = useAtomValue(pageEditorAtom);
+  const titleEditor = useAtomValue(titleEditorAtom);
+  const { mutateAsync: updateTitle } = useUpdateTitlePageMutation();
+  const emit = useQueryEmit();
+
+  // The page/title editors come from GLOBAL atoms that re-point when the user
+  // navigates to another page. The mutation below awaits the model for 1-3s, and
+  // its closure captures the editors from the render that started it. Keep a live
+  // reference so the post-generation write targets whatever page is on screen
+  // *now*, not the page the generation was started from.
+  const editorsRef = useRef({ pageEditor, titleEditor });
+  editorsRef.current = { pageEditor, titleEditor };
+
+  return useMutation<void, Error, void>({
+    mutationFn: async () => {
+      if (!pageEditor || pageEditor.isDestroyed) return;
+
+      const markdown = htmlToMarkdown(pageEditor.getHTML()).trim();
+      if (!markdown) {
+        notifications.show({ message: t("The note is empty"), color: "yellow" });
+        return;
+      }
+
+      const title = (
+        await generatePageTitle(markdown.slice(0, MAX_CONTENT_CHARS))
+      ).trim();
+      if (!title) {
+        // The model returned nothing usable — keep the existing title untouched.
+        notifications.show({
+          message: t("Could not generate a title"),
+          color: "yellow",
+        });
+        return;
+      }
+
+      const page = await updateTitle({ pageId, title }); // POST /pages/update
+      updatePageData(page); // refresh the react-query cache
+
+      // Reflect the new title in the field immediately. The button lives in the
+      // byline, so the title editor is not focused — setContent is safe and stays
+      // undoable through its History extension (Ctrl/Cmd+Z reverts the change).
+      //
+      // Guard against navigation during generation: if the user switched pages
+      // while the model ran, the (persistent) title editor now shows ANOTHER
+      // page, so writing here would drop page A's title into page B's visible
+      // field. page-editor.tsx stamps the live page editor with its pageId
+      // (`editor.storage.pageId`), mirroring TitleEditor's `activePageId !==
+      // pageId` guard — bail the visible write unless that live editor still
+      // belongs to the page this title was generated for. The DB write above is
+      // already correct (keyed by the captured `pageId`), and the broadcast below
+      // still propagates page A's change to other clients.
+      const livePageEditor = editorsRef.current.pageEditor;
+      const liveTitleEditor = editorsRef.current.titleEditor;
+      // `storage.pageId` is stamped untyped in page-editor.tsx's onCreate.
+      const livePageId = (livePageEditor?.storage as { pageId?: string })
+        ?.pageId;
+      const stillOnPage = livePageId === pageId;
+      if (
+        stillOnPage &&
+        liveTitleEditor &&
+        !liveTitleEditor.isDestroyed &&
+        !liveTitleEditor.isFocused
+      ) {
+        liveTitleEditor.commands.setContent(page.title);
+      }
+
+      // Broadcast to other clients, mirroring TitleEditor.saveTitle's event shape.
+      const event: UpdateEvent = {
+        operation: "updateOne",
+        spaceId: page.spaceId,
+        entity: ["pages"],
+        id: page.id,
+        payload: {
+          title: page.title,
+          slugId: page.slugId,
+          parentPageId: page.parentPageId,
+          icon: page.icon,
+        },
+      };
+      localEmitter.emit("message", event);
+      emit(event);
+
+      notifications.show({ message: t("Title generated") });
+    },
+    onError: (err) => {
+      // Map known HTTP statuses to friendly messages, falling back to generic.
+      const status = (err as { response?: { status?: number } })?.response
+        ?.status;
+      const message =
+        status === 403
+          ? t("AI title generation is disabled")
+          : status === 503
+            ? t("AI is not configured")
+            : status === 429
+              ? t("Too many requests, please try again later")
+              : t("Failed to generate title");
+      notifications.show({ message, color: "red" });
+    },
+  });
+}