feat: add ai summary to publish doc modal (#756)

Author: stevenle

.changeset/rude-pumpkins-fetch.md

@@ -0,0 +1,5 @@
+---
+'@blinkk/root-cms': patch
+---
+
+feat: add ai summary to publish doc modal (#756)

packages/root-cms/core/ai.ts

@@ -27,6 +27,73 @@ export type RootAiModel =
 
 const DEFAULT_MODEL: RootAiModel = 'vertexai/gemini-2.5-flash';
 
+export interface SummarizeDiffOptions {
+  before: Record<string, any> | null;
+  after: Record<string, any> | null;
+}
+
+/**
+ * Generates a natural language summary of the differences between two JSON
+ * payloads.
+ */
+export async function summarizeDiff(
+  cmsClient: RootCMSClient,
+  options: SummarizeDiffOptions
+): Promise<string> {
+  const cmsPluginOptions = cmsClient.cmsPlugin.getConfig();
+  const firebaseConfig = cmsPluginOptions.firebaseConfig;
+  const model: RootAiModel =
+    (typeof cmsPluginOptions.experiments?.ai === 'object'
+      ? cmsPluginOptions.experiments.ai.model
+      : undefined) || DEFAULT_MODEL;
+
+  const ai = genkit({
+    plugins: [
+      vertexAI({
+        projectId: firebaseConfig.projectId,
+        location: firebaseConfig.location || 'us-central1',
+      }),
+    ],
+  });
+
+  const beforeJson = JSON.stringify(options.before ?? null, null, 2);
+  const afterJson = JSON.stringify(options.after ?? null, null, 2);
+
+  const systemPrompt = [
+    'You are an assistant that summarizes changes made to CMS documents stored as JSON.',
+    'Provide a concise description of the most important updates using short bullet points.',
+    'If there are no meaningful differences, respond with "No significant changes."',
+    'Focus on just the content changes, ignore insignificant changes to richtext blocks and structure, such as updates to the richtext block\'s "timestamp" and "version" fields.',
+  ].join('\n');
+
+  const diffPrompt = [
+    'Previous version JSON:',
+    '```json',
+    beforeJson,
+    '```',
+    '',
+    'Updated version JSON:',
+    '```json',
+    afterJson,
+    '```',
+    '',
+    'Summarize the differences between the two payloads.',
+  ].join('\n');
+
+  const res = await ai.generate({
+    model,
+    messages: [
+      {
+        role: 'system',
+        content: [{text: systemPrompt}],
+      },
+    ],
+    prompt: [{text: diffPrompt}],
+  });
+
+  return res.text?.trim() || '';
+}
+
 export class Chat {
   chatClient: ChatClient;
   cmsClient: RootCMSClient;

packages/root-cms/core/api.ts

@@ -7,7 +7,7 @@ import {
   AiResponse,
   SendPromptOptions,
 } from '../shared/ai/prompts.js';
-import {ChatClient, RootAiModel} from './ai.js';
+import {ChatClient, RootAiModel, summarizeDiff} from './ai.js';
 import {RootCMSClient} from './client.js';
 import {runCronJobs} from './cron.js';
 import {arrayToCsv, csvToArray} from './csv.js';
@@ -323,6 +323,43 @@ export function api(server: Server, options: ApiOptions) {
     }
   });
 
+  server.use('/cms/api/ai.diff', async (req: Request, res: Response) => {
+    if (
+      req.method !== 'POST' ||
+      !String(req.get('content-type')).startsWith('application/json')
+    ) {
+      res.status(400).json({success: false, error: 'BAD_REQUEST'});
+      return;
+    }
+
+    if (!req.user?.email) {
+      res.status(401).json({success: false, error: 'UNAUTHORIZED'});
+      return;
+    }
+
+    const reqBody = req.body || {};
+    if (!Object.prototype.hasOwnProperty.call(reqBody, 'after')) {
+      res.status(400).json({
+        success: false,
+        error: 'MISSING_REQUIRED_FIELD',
+        field: 'after',
+      });
+      return;
+    }
+
+    try {
+      const cmsClient = new RootCMSClient(req.rootConfig!);
+      const summary = await summarizeDiff(cmsClient, {
+        before: reqBody.before ?? null,
+        after: reqBody.after ?? null,
+      });
+      res.status(200).json({success: true, summary});
+    } catch (err: any) {
+      console.error(err.stack || err);
+      res.status(500).json({success: false, error: 'UNKNOWN'});
+    }
+  });
+
   server.use('/cms/api/ai.list_chats', async (req: Request, res: Response) => {
     if (
       req.method !== 'POST' ||

packages/root-cms/ui/components/PublishDocModal/PublishDocModal.css

@@ -88,6 +88,14 @@
   margin-top: 24px;
 }
 
+.PublishDocModal__ShowChanges + .PublishDocModal__ShowChanges {
+  margin-top: 12px;
+}
+
+.PublishDocModal__ShowChanges__loading {
+  padding: 12px 16px 24px;
+}
+
 .PublishDocModal__ShowChanges .mantine-Accordion-control[aria-expanded="true"] {
   background: #fff;
 }
@@ -100,3 +108,10 @@
 .PublishDocModal__ShowChanges .mantine-Accordion-contentInner {
   padding: 0;
 }
+
+.PublishDocModal__ShowChanges__aiSummary {
+  padding: 12px 16px 24px;
+  white-space: pre-wrap;
+  font-family: var(--font-family-mono);
+  color: black;
+}

packages/root-cms/ui/components/PublishDocModal/PublishDocModal.tsx

@@ -4,7 +4,11 @@ import {showNotification} from '@mantine/notifications';
 import {useState, useRef} from 'preact/hooks';
 import {useModalTheme} from '../../hooks/useModalTheme.js';
 import {joinClassNames} from '../../utils/classes.js';
-import {cmsPublishDoc, cmsScheduleDoc} from '../../utils/doc.js';
+import {
+  cmsGetDocDiffSummary,
+  cmsPublishDoc,
+  cmsScheduleDoc,
+} from '../../utils/doc.js';
 import {getLocalISOString} from '../../utils/time.js';
 import {DocDiffViewer} from '../DocDiffViewer/DocDiffViewer.js';
 import {Text} from '../Text/Text.js';
@@ -45,6 +49,7 @@ export function PublishDocModal(
   const dateTimeRef = useRef<HTMLInputElement>(null);
   const modals = useModals();
   const modalTheme = useModalTheme();
+  const experiments = window.__ROOT_CTX.experiments || {};
 
   const buttonLabel = publishType === 'scheduled' ? 'Schedule' : 'Publish';
 
@@ -228,12 +233,98 @@ export function PublishDocModal(
           </div>
         </form>
 
+        {experiments.ai && <AiSummary docId={props.docId} />}
         <ShowChanges docId={props.docId} />
       </div>
     </div>
   );
 }
 
+function AiSummary(props: {docId: string}) {
+  const docId = props.docId;
+  const [status, setStatus] = useState<
+    'idle' | 'loading' | 'success' | 'error'
+  >('idle');
+  const [summary, setSummary] = useState('');
+  const [error, setError] = useState('');
+  const hasRequestedRef = useRef(false);
+
+  async function loadSummary() {
+    setStatus('loading');
+    try {
+      const res = await cmsGetDocDiffSummary(docId);
+      setSummary(res);
+      setStatus('success');
+    } catch (err) {
+      console.error(err);
+      setError(err instanceof Error ? err.message : 'Unknown error');
+      setStatus('error');
+    }
+  }
+
+  function handleToggle() {
+    if (!hasRequestedRef.current) {
+      hasRequestedRef.current = true;
+      loadSummary();
+    }
+  }
+
+  let content = null;
+  if (status === 'idle' || status === 'loading') {
+    content = (
+      <div className="PublishDocModal__ShowChanges__loading">
+        <Loader size="md" color="gray" />
+      </div>
+    );
+  } else if (status === 'error') {
+    content = (
+      <Text
+        className="PublishDocModal__ShowChanges__aiSummary"
+        size="body-sm"
+        color="gray"
+      >
+        Failed to load AI summary.
+        {error && (
+          <>
+            <br />
+            {error}
+          </>
+        )}
+      </Text>
+    );
+  } else if (!summary) {
+    content = (
+      <Text
+        className="PublishDocModal__ShowChanges__aiSummary"
+        size="body-sm"
+        color="gray"
+      >
+        No AI summary available for this draft yet.
+      </Text>
+    );
+  } else {
+    content = (
+      <Text
+        className="PublishDocModal__ShowChanges__aiSummary"
+        as="pre"
+        size="body-sm"
+      >
+        {summary}
+      </Text>
+    );
+  }
+
+  return (
+    <div className="PublishDocModal__ShowChanges">
+      <Accordion iconPosition="right" onChange={() => handleToggle()}>
+        <Accordion.Item label="Summarize changes (AI)">
+          {content}
+        </Accordion.Item>
+      </Accordion>
+    </div>
+  );
+}
+
 function ShowChanges(props: {docId: string}) {
   const docId = props.docId;
   const [toggled, setToggled] = useState(false);
@@ -245,15 +336,17 @@ function ShowChanges(props: {docId: string}) {
   return (
     <div className="PublishDocModal__ShowChanges">
       <Accordion iconPosition="right" onChange={() => toggle()}>
-        <Accordion.Item label="Show changes">
+        <Accordion.Item label="Show changes (JSON)">
           {toggled ? (
             <DocDiffViewer
               left={{docId, versionId: 'published'}}
               right={{docId, versionId: 'draft'}}
               showExpandButton={true}
             />
           ) : (
-            <Loader />
+            <div className="PublishDocModal__ShowChanges__loading">
+              <Loader size="md" color="gray" />
+            </div>
           )}
         </Accordion.Item>
       </Accordion>

packages/root-cms/ui/utils/doc.ts

@@ -904,6 +904,57 @@ export function unmarshalArray(arrObject: ArrayObject): any[] {
   return arr;
 }
 
+export async function cmsGetDocDiffSummary(docId: string): Promise<string> {
+  const [publishedDoc, draftDoc] = await Promise.all([
+    cmsReadDocVersion(docId, 'published'),
+    cmsReadDocVersion(docId, 'draft'),
+  ]);
+
+  if (!draftDoc && !publishedDoc) {
+    return '';
+  }
+
+  const payload = {
+    before: publishedDoc
+      ? unmarshalData(publishedDoc.fields || {}, {removeArrayKey: true})
+      : null,
+    after: draftDoc
+      ? unmarshalData(draftDoc.fields || {}, {removeArrayKey: true})
+      : null,
+  };
+
+  const res = await window.fetch('/cms/api/ai.diff', {
+    method: 'POST',
+    headers: {'content-type': 'application/json'},
+    body: JSON.stringify(payload),
+  });
+
+  const responseText = await res.text();
+  let resData: any = null;
+  try {
+    resData = JSON.parse(responseText);
+  } catch (err) {
+    // Ignore JSON parsing errors and fall back to the response text below.
+  }
+
+  if (!res.ok || resData?.success === false) {
+    const errorMessage =
+      (resData && (resData.error || resData.message)) || responseText;
+    throw new Error(errorMessage || 'Failed to fetch AI summary');
+  }
+
+  if (typeof resData?.summary === 'string') {
+    return resData.summary;
+  }
+  if (typeof resData?.data?.summary === 'string') {
+    return resData.data.summary;
+  }
+  if (!resData && responseText) {
+    return responseText;
+  }
+  return '';
+}
+
 function isObject(data: any): boolean {
   return typeof data === 'object' && !Array.isArray(data) && data !== null;
 }