@automattic/jetpack-ai-client 0.26.3 → 0.27.0

package/CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.27.0] - 2025-03-03
+### Added
+- AI Client: Move openBlockSidebar utility function. [#42016]
+
+### Changed
+- AI Assistant: Add experimental functionality to test Chrome's built-in AI API with the AI excerpt. [#41922]
+- AI Client: Move showAiAssistantSection function to AI Client. [#42158]
+- AI Client: Refactor usePostContent hook to expose isEditedPostEmpty. [#42149]
+- Update package dependencies. [#42163]
+
 ## [0.26.3] - 2025-02-24
 ### Changed
 - Update package dependencies. [#41955]
@@ -532,6 +542,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - AI Client: stop using smart document visibility handling on the fetchEventSource library, so it does not restart the completion when changing tabs. [#32004]
 - Updated package dependencies. [#31468] [#31659] [#31785]
 
+[0.27.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.26.3...v0.27.0
 [0.26.3]: https://github.com/Automattic/jetpack-ai-client/compare/v0.26.2...v0.26.3
 [0.26.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.26.1...v0.26.2
 [0.26.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.26.0...v0.26.1

package/build/chrome-ai/factory.js

@@ -1,7 +1,5 @@
 import { getJetpackExtensionAvailability } from '@automattic/jetpack-shared-extension-utils';
-import { PROMPT_TYPE_CHANGE_LANGUAGE,
-//PROMPT_TYPE_SUMMARIZE,
- } from '../constants.js';
+import { PROMPT_TYPE_CHANGE_LANGUAGE, PROMPT_TYPE_SUMMARIZE } from '../constants.js';
 import ChromeAISuggestionsEventSource from './suggestions.js';
 /**
  * Check for the feature flag.
@@ -26,6 +24,8 @@ export default async function ChromeAIFactory(promptArg) {
         language: '',
     };
     let promptType = '';
+    let tone = null;
+    let wordCount = null;
     if (Array.isArray(promptArg)) {
         for (let i = 0; i < promptArg.length; i++) {
             const prompt = promptArg[i];
@@ -45,6 +45,12 @@ export default async function ChromeAIFactory(promptArg) {
             if (promptContext.content) {
                 context.content = promptContext.content;
             }
+            if (promptContext.tone) {
+                tone = promptContext.tone;
+            }
+            if (promptContext.words) {
+                wordCount = promptContext.words;
+            }
         }
     }
     if (promptType.startsWith('ai-assistant-change-language')) {
@@ -84,16 +90,18 @@ export default async function ChromeAIFactory(promptArg) {
         });
         return chromeAI;
     }
-    // TODO
-    if (promptType.startsWith('ai-assistant-summarize')) {
-        /*
+    // TODO: consider also using ChromeAI for ai-assistant-summarize
+    if (promptType.startsWith('ai-content-lens')) {
+        const summaryOpts = {
+            tone: tone,
+            wordCount: wordCount,
+        };
+        // TODO: detect if the content is in English and fallback if it's not
         return new ChromeAISuggestionsEventSource({
-            content: "",
+            content: context.content,
             promptType: PROMPT_TYPE_SUMMARIZE,
-            options: {},
-        } );
-        */
-        return false;
+            options: summaryOpts,
+        });
     }
     return false;
 }

package/build/chrome-ai/suggestions.d.ts

@@ -8,6 +8,8 @@ type ChromeAISuggestionsEventSourceConstructorArgs = {
         feature?: 'ai-assistant-experimental' | string | undefined;
         sourceLanguage?: string;
         targetLanguage?: string;
+        tone?: string;
+        wordCount?: number;
         functions?: Array<object>;
         model?: AiModelTypeProp;
     };
@@ -30,6 +32,7 @@ export default class ChromeAISuggestionsEventSource extends EventTarget {
     processEvent(e: EventSourceMessage): void;
     processErrorEvent(e: any): void;
     translate(text: string, target: string, source?: string): Promise<void>;
-    summarize(text: string): Promise<string>;
+    private getSummarizerOptions;
+    summarize(text: string, tone?: string, wordCount?: number): Promise<void>;
 }
 export {};

package/build/chrome-ai/suggestions.js

@@ -24,7 +24,7 @@ export default class ChromeAISuggestionsEventSource extends EventTarget {
             this.translate(content, options.targetLanguage, options.sourceLanguage);
         }
         if (promptType === PROMPT_TYPE_SUMMARIZE) {
-            this.summarize(content);
+            this.summarize(content, options.tone, options.wordCount);
         }
     }
     async initEventSource() { }
@@ -39,7 +39,7 @@ export default class ChromeAISuggestionsEventSource extends EventTarget {
             this.processErrorEvent(err);
             return;
         }
-        if (e.event === 'translation') {
+        if (e.event === 'translation' || e.event === 'summary') {
             this.dispatchEvent(new CustomEvent('suggestion', { detail: data.message }));
         }
         if (data.complete) {
@@ -80,8 +80,48 @@ export default class ChromeAISuggestionsEventSource extends EventTarget {
             this.processErrorEvent(error);
         }
     }
-    // TODO
-    async summarize(text) {
-        return text;
+    // Helper function to format summarizer options
+    getSummarizerOptions(tone, wordCount) {
+        let sharedContext = `The summary you write should contain approximately ${wordCount ?? 50} words long. Strive for precision in word count without compromising clarity and significance`;
+        if (tone) {
+            sharedContext += `\n - Write with a ${tone} tone.\n`;
+        }
+        const options = {
+            sharedContext: sharedContext,
+            type: 'teaser',
+            format: 'plain-text',
+            length: 'medium',
+        };
+        return options;
+    }
+    // use the Chrome AI summarizer
+    async summarize(text, tone, wordCount) {
+        if (!('ai' in self) || !('summarizer' in self.ai)) {
+            return;
+        }
+        const available = (await self.ai.summarizer.capabilities()).available;
+        if (available === 'no') {
+            return;
+        }
+        const options = this.getSummarizerOptions(tone, wordCount);
+        const summarizer = await self.ai.summarizer.create(options);
+        if (available === 'after-download') {
+            await summarizer.ready;
+        }
+        try {
+            const context = `Write with a ${tone} tone.`;
+            const summary = await summarizer.summarize(text, { context: context });
+            this.processEvent({
+                id: '',
+                event: 'summary',
+                data: JSON.stringify({
+                    message: summary,
+                    complete: true,
+                }),
+            });
+        }
+        catch (error) {
+            this.processErrorEvent(error);
+        }
     }
 }

package/build/components/ai-image/components/ai-image-modal.d.ts

@@ -29,7 +29,6 @@ type AiImageModalProps = {
     isUnlimited: boolean;
     upgradeDescription: string;
     hasError: boolean;
-    postContent?: string | boolean | null;
     handlePreviousImage: () => void;
     handleNextImage: () => void;
     acceptButton: React.JSX.Element;

package/build/components/ai-image/featured-image.js

@@ -30,7 +30,7 @@ const debug = debugFactory('jetpack-ai-client:featured-image');
 export default function FeaturedImage({ busy, disabled, placement, onClose = () => { }, }) {
     const [isFeaturedImageModalVisible, setIsFeaturedImageModalVisible] = useState(placement === PLACEMENT_MEDIA_SOURCE_DROPDOWN);
     const siteType = useSiteType();
-    const postContent = usePostContent();
+    const { getPostContent, isEditedPostEmpty } = usePostContent();
     const { postTitle, postFeaturedMediaId, isEditorPanelOpened } = useSelect(select => {
         return {
             postTitle: select(editorStore).getEditedPostAttribute('title'),
@@ -80,9 +80,9 @@ export default function FeaturedImage({ busy, disabled, placement, onClose = ()
      * Handle the guess style for the image. It is reworked here to include the post content.
      */
     const handleGuessStyle = useCallback(userPrompt => {
-        const content = postTitle + '\n\n' + postContent;
+        const content = postTitle + '\n\n' + getPostContent();
         return guessStyle(userPrompt, 'featured-image-guess-style', content);
-    }, [postContent, postTitle, guessStyle]);
+    }, [postTitle, getPostContent, guessStyle]);
     const handleGenerate = useCallback(({ userPrompt, style, }) => {
         // track the generate image event
         recordEvent('jetpack_ai_featured_image_generation_generate_image', {
@@ -95,7 +95,7 @@ export default function FeaturedImage({ busy, disabled, placement, onClose = ()
         setIsFeaturedImageModalVisible(true);
         return processImageGeneration({
             userPrompt,
-            postContent: postTitle + '\n\n' + postContent,
+            postContent: postTitle + '\n\n' + getPostContent(),
             notEnoughRequests,
             style,
         }).catch(error => {
@@ -113,7 +113,7 @@ export default function FeaturedImage({ busy, disabled, placement, onClose = ()
         featuredImageActiveModel,
         siteType,
         processImageGeneration,
-        postContent,
+        getPostContent,
         notEnoughRequests,
         postTitle,
     ]);
@@ -138,7 +138,7 @@ export default function FeaturedImage({ busy, disabled, placement, onClose = ()
         setCurrent(() => images.length);
         processImageGeneration({
             userPrompt,
-            postContent: postTitle + '\n\n' + postContent,
+            postContent: postTitle + '\n\n' + getPostContent(),
             notEnoughRequests,
             style,
         }).catch(error => {
@@ -159,7 +159,7 @@ export default function FeaturedImage({ busy, disabled, placement, onClose = ()
         setCurrent,
         processImageGeneration,
         postTitle,
-        postContent,
+        getPostContent,
         notEnoughRequests,
         images,
     ]);
@@ -173,7 +173,7 @@ export default function FeaturedImage({ busy, disabled, placement, onClose = ()
         });
         processImageGeneration({
             userPrompt,
-            postContent: postTitle + '\n\n' + postContent,
+            postContent: postTitle + '\n\n' + getPostContent(),
             notEnoughRequests,
             style,
         }).catch(error => {
@@ -191,7 +191,7 @@ export default function FeaturedImage({ busy, disabled, placement, onClose = ()
         featuredImageActiveModel,
         siteType,
         processImageGeneration,
-        postContent,
+        getPostContent,
         notEnoughRequests,
         postTitle,
     ]);
@@ -261,7 +261,7 @@ export default function FeaturedImage({ busy, disabled, placement, onClose = ()
     ]);
     const generateAgainText = __('Generate another image', 'jetpack-ai-client');
     const generateText = __('Generate', 'jetpack-ai-client');
-    const hasContent = postContent.trim?.() || postTitle.trim?.() ? true : false;
+    const hasContent = !isEditedPostEmpty() || postTitle.trim?.() ? true : false;
     const hasPrompt = hasContent ? prompt.length >= 0 : prompt.length >= 3;
     const disableInput = notEnoughRequests || currentPointer?.generating || requireUpgrade;
     const disableAction = disableInput || (!hasContent && !hasPrompt);
@@ -274,5 +274,5 @@ export default function FeaturedImage({ busy, disabled, placement, onClose = ()
             currentImage?.generating ||
             currentImage?.libraryId === postFeaturedMediaId, children: __('Set as featured image', 'jetpack-ai-client') }));
     return (_jsxs(_Fragment, { children: [(placement === PLACEMENT_JETPACK_SIDEBAR ||
-                placement === PLACEMENT_DOCUMENT_SETTINGS) && (_jsxs(_Fragment, { children: [_jsx("p", { className: "jetpack-ai-assistant__help-text", children: __('Based on your post content.', 'jetpack-ai-client') }), _jsx(Button, { onClick: handleModalOpen, isBusy: busy, disabled: disabled || notEnoughRequests, variant: "secondary", __next40pxDefaultSize: true, children: __('Generate image', 'jetpack-ai-client') })] })), _jsx(AiImageModal, { postContent: hasContent, autoStart: hasContent && !postFeaturedMediaId, autoStartAction: handleFirstGenerate, images: images, currentIndex: current, title: __('Generate a featured image with AI', 'jetpack-ai-client'), cost: featuredImageCost, open: isFeaturedImageModalVisible, placement: placement, onClose: handleModalClose, onTryAgain: handleTryAgain, onGenerate: pointer?.current > 0 || postFeaturedMediaId ? handleRegenerate : handleGenerate, generating: currentPointer?.generating, notEnoughRequests: notEnoughRequests, requireUpgrade: requireUpgrade, upgradeDescription: upgradeDescription, currentLimit: requestsLimit, currentUsage: requestsCount, isUnlimited: isUnlimited, hasError: Boolean(currentPointer?.error), handlePreviousImage: handlePreviousImage, handleNextImage: handleNextImage, acceptButton: acceptButton, generateButtonLabel: pointer?.current > 0 ? generateAgainText : generateText, instructionsPlaceholder: __("Describe the featured image you'd like to create and select a style.", 'jetpack-ai-client'), imageStyles: imageStyles, onGuessStyle: handleGuessStyle, prompt: prompt, setPrompt: setPrompt, initialStyle: requestStyle, inputDisabled: disableInput, actionDisabled: disableAction })] }));
+                placement === PLACEMENT_DOCUMENT_SETTINGS) && (_jsxs(_Fragment, { children: [_jsx("p", { className: "jetpack-ai-assistant__help-text", children: __('Based on your post content.', 'jetpack-ai-client') }), _jsx(Button, { onClick: handleModalOpen, isBusy: busy, disabled: disabled || notEnoughRequests, variant: "secondary", __next40pxDefaultSize: true, children: __('Generate image', 'jetpack-ai-client') })] })), _jsx(AiImageModal, { autoStart: hasContent && !postFeaturedMediaId, autoStartAction: handleFirstGenerate, images: images, currentIndex: current, title: __('Generate a featured image with AI', 'jetpack-ai-client'), cost: featuredImageCost, open: isFeaturedImageModalVisible, placement: placement, onClose: handleModalClose, onTryAgain: handleTryAgain, onGenerate: pointer?.current > 0 || postFeaturedMediaId ? handleRegenerate : handleGenerate, generating: currentPointer?.generating, notEnoughRequests: notEnoughRequests, requireUpgrade: requireUpgrade, upgradeDescription: upgradeDescription, currentLimit: requestsLimit, currentUsage: requestsCount, isUnlimited: isUnlimited, hasError: Boolean(currentPointer?.error), handlePreviousImage: handlePreviousImage, handleNextImage: handleNextImage, acceptButton: acceptButton, generateButtonLabel: pointer?.current > 0 ? generateAgainText : generateText, instructionsPlaceholder: __("Describe the featured image you'd like to create and select a style.", 'jetpack-ai-client'), imageStyles: imageStyles, onGuessStyle: handleGuessStyle, prompt: prompt, setPrompt: setPrompt, initialStyle: requestStyle, inputDisabled: disableInput, actionDisabled: disableAction })] }));
 }

package/build/components/ai-image/general-purpose-image.js

@@ -27,7 +27,7 @@ const debug = debugFactory('jetpack-ai:general-purpose-image');
 export default function GeneralPurposeImage({ placement, onClose = () => { }, onSetImage = () => { }, }) {
     const [isFeaturedImageModalVisible, setIsFeaturedImageModalVisible] = useState(true);
     const siteType = useSiteType();
-    const postContent = usePostContent();
+    const { getPostContent } = usePostContent();
     const { saveToMediaLibrary } = useSaveToMediaLibrary();
     const { tracks } = useAnalytics();
     const { recordEvent } = tracks;
@@ -64,7 +64,12 @@ export default function GeneralPurposeImage({ placement, onClose = () => { }, on
             site_type: siteType,
             style,
         });
-        processImageGeneration({ userPrompt, postContent, notEnoughRequests, style }).catch(error => {
+        processImageGeneration({
+            userPrompt,
+            postContent: getPostContent(),
+            notEnoughRequests,
+            style,
+        }).catch(error => {
             recordEvent('jetpack_ai_general_image_generation_error', {
                 placement,
                 error: error?.message,
@@ -79,7 +84,7 @@ export default function GeneralPurposeImage({ placement, onClose = () => { }, on
         generalImageActiveModel,
         siteType,
         processImageGeneration,
-        postContent,
+        getPostContent,
         notEnoughRequests,
     ]);
     const handleRegenerate = useCallback(({ userPrompt, style }) => {
@@ -92,7 +97,12 @@ export default function GeneralPurposeImage({ placement, onClose = () => { }, on
             style,
         });
         setCurrent(crrt => crrt + 1);
-        processImageGeneration({ userPrompt, postContent, notEnoughRequests, style }).catch(error => {
+        processImageGeneration({
+            userPrompt,
+            postContent: getPostContent(),
+            notEnoughRequests,
+            style,
+        }).catch(error => {
             recordEvent('jetpack_ai_general_image_generation_error', {
                 placement,
                 error: error?.message,
@@ -106,7 +116,7 @@ export default function GeneralPurposeImage({ placement, onClose = () => { }, on
         generalImageActiveModel,
         siteType,
         processImageGeneration,
-        postContent,
+        getPostContent,
         notEnoughRequests,
         setCurrent,
     ]);
@@ -119,7 +129,12 @@ export default function GeneralPurposeImage({ placement, onClose = () => { }, on
             site_type: siteType,
             style,
         });
-        processImageGeneration({ userPrompt, postContent, notEnoughRequests, style }).catch(error => {
+        processImageGeneration({
+            userPrompt,
+            postContent: getPostContent(),
+            notEnoughRequests,
+            style,
+        }).catch(error => {
             recordEvent('jetpack_ai_general_image_generation_error', {
                 placement,
                 error: error?.message,
@@ -133,7 +148,7 @@ export default function GeneralPurposeImage({ placement, onClose = () => { }, on
         generalImageActiveModel,
         siteType,
         processImageGeneration,
-        postContent,
+        getPostContent,
         notEnoughRequests,
     ]);
     const handleAccept = useCallback(() => {
@@ -180,5 +195,5 @@ export default function GeneralPurposeImage({ placement, onClose = () => { }, on
         __("Image generation costs %d requests per image. You don't have enough requests to generate another image.", 'jetpack-ai-client'), generalImageCost)
         : null;
     const acceptButton = (_jsx(Button, { onClick: handleAccept, variant: "primary", disabled: !currentImage?.image || currentImage?.generating, children: __('Insert image', 'jetpack-ai-client') }));
-    return (_jsx(AiImageModal, { postContent: true, images: images, currentIndex: current, title: __('Generate an image with AI', 'jetpack-ai-client'), cost: generalImageCost, open: isFeaturedImageModalVisible, placement: placement, onClose: handleModalClose, onTryAgain: handleTryAgain, onGenerate: pointer?.current > 0 ? handleRegenerate : handleGenerate, generating: currentPointer?.generating, notEnoughRequests: notEnoughRequests, requireUpgrade: requireUpgrade, upgradeDescription: upgradeDescription, currentLimit: requestsLimit, currentUsage: requestsCount, isUnlimited: isUnlimited, hasError: Boolean(currentPointer?.error), handlePreviousImage: handlePreviousImage, handleNextImage: handleNextImage, acceptButton: acceptButton, generateButtonLabel: pointer?.current > 0 ? generateAgainText : generateText, instructionsPlaceholder: __("Describe the image you'd like to create and select a style.", 'jetpack-ai-client'), imageStyles: imageStyles, onGuessStyle: guessStyle, prompt: prompt, setPrompt: setPrompt, inputDisabled: disableInput, actionDisabled: disableAction }));
+    return (_jsx(AiImageModal, { images: images, currentIndex: current, title: __('Generate an image with AI', 'jetpack-ai-client'), cost: generalImageCost, open: isFeaturedImageModalVisible, placement: placement, onClose: handleModalClose, onTryAgain: handleTryAgain, onGenerate: pointer?.current > 0 ? handleRegenerate : handleGenerate, generating: currentPointer?.generating, notEnoughRequests: notEnoughRequests, requireUpgrade: requireUpgrade, upgradeDescription: upgradeDescription, currentLimit: requestsLimit, currentUsage: requestsCount, isUnlimited: isUnlimited, hasError: Boolean(currentPointer?.error), handlePreviousImage: handlePreviousImage, handleNextImage: handleNextImage, acceptButton: acceptButton, generateButtonLabel: pointer?.current > 0 ? generateAgainText : generateText, instructionsPlaceholder: __("Describe the image you'd like to create and select a style.", 'jetpack-ai-client'), imageStyles: imageStyles, onGuessStyle: guessStyle, prompt: prompt, setPrompt: setPrompt, inputDisabled: disableInput, actionDisabled: disableAction }));
 }

package/build/hooks/use-post-content.d.ts

@@ -1,5 +1,5 @@
-/**
- * Internal dependencies
- */
-declare const usePostContent: () => string;
+declare const usePostContent: () => {
+    getPostContent: () => string;
+    isEditedPostEmpty: () => boolean;
+};
 export default usePostContent;

package/build/hooks/use-post-content.js

@@ -3,18 +3,28 @@
  */
 import { serialize } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-/**
- * Types
- */
-import { renderMarkdownFromHTML } from '../libs/markdown/index.js';
+import { store as editorStore } from '@wordpress/editor';
+import { useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { renderMarkdownFromHTML } from '../libs/markdown/index.js';
 /*
  * Simple helper to get the post content as markdown
  */
 const usePostContent = () => {
-    const blocks = useSelect(select => select('core/block-editor').getBlocks(), []);
-    return blocks?.length ? renderMarkdownFromHTML({ content: serialize(blocks) }) : '';
+    const { getBlocks, isEditedPostEmpty } = useSelect(select => {
+        const blockEditorSelect = select('core/block-editor');
+        const coreEditorSelect = select(editorStore);
+        return {
+            getBlocks: blockEditorSelect.getBlocks,
+            isEditedPostEmpty: coreEditorSelect.isEditedPostEmpty,
+        };
+    }, []);
+    const getPostContent = useCallback(() => {
+        const blocks = getBlocks();
+        return blocks?.length ? renderMarkdownFromHTML({ content: serialize(blocks) }) : '';
+    }, [getBlocks]);
+    return { getPostContent, isEditedPostEmpty };
 };
 export default usePostContent;

package/build/libs/index.d.ts

@@ -1,3 +1,5 @@
 export { MarkdownToHTML, HTMLToMarkdown, renderHTMLFromMarkdown, renderMarkdownFromHTML, fixes, } from './markdown/index.js';
 export type { RenderHTMLRules } from './markdown/index.js';
 export { mapActionToHumanText } from './map-action-to-human-text.js';
+export { openBlockSidebar } from './open-block-sidebar.js';
+export { showAiAssistantSection } from './show-ai-assistant-section.js';

package/build/libs/index.js

@@ -1,2 +1,4 @@
 export { MarkdownToHTML, HTMLToMarkdown, renderHTMLFromMarkdown, renderMarkdownFromHTML, fixes, } from './markdown/index.js';
 export { mapActionToHumanText } from './map-action-to-human-text.js';
+export { openBlockSidebar } from './open-block-sidebar.js';
+export { showAiAssistantSection } from './show-ai-assistant-section.js';

package/build/libs/open-block-sidebar.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Open the block sidebar for the given client ID.
+ *
+ * @param {string} clientId - The client ID of the block to open the sidebar for.
+ */
+export declare function openBlockSidebar(clientId: string): void;

package/build/libs/open-block-sidebar.js

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { dispatch } from '@wordpress/data';
+/**
+ * Open the block sidebar for the given client ID.
+ *
+ * @param {string} clientId - The client ID of the block to open the sidebar for.
+ */
+export function openBlockSidebar(clientId) {
+    if (!clientId) {
+        return;
+    }
+    const { selectBlock } = dispatch(blockEditorStore);
+    const { enableComplementaryArea } = dispatch('core/interface');
+    selectBlock(clientId);
+    // This only works for the post editor, as the SEO Assistant is only available there
+    enableComplementaryArea('core/edit-post', 'edit-post/block');
+}

package/build/libs/show-ai-assistant-section.d.ts

@@ -0,0 +1 @@
+export declare const showAiAssistantSection: () => Promise<void>;

package/build/libs/show-ai-assistant-section.js

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { dispatch } from '@wordpress/data';
+export const showAiAssistantSection = async () => {
+    const { clearSelectedBlock } = dispatch('core/block-editor');
+    const { enableComplementaryArea } = dispatch('core/interface');
+    // Clear any block selection, because selected blocks have precedence on settings sidebar
+    clearSelectedBlock();
+    await enableComplementaryArea('core/edit-post', 'jetpack-sidebar/jetpack');
+    const panel = document.querySelector('.jetpack-ai-assistant-panel');
+    const isAlreadyOpen = panel?.classList.contains('is-opened');
+    const button = panel?.querySelector('h2 button');
+    if (isAlreadyOpen) {
+        // Close it before opening it to ensure the content is scrolled to view
+        button?.click();
+    }
+    setTimeout(() => {
+        button?.click();
+    }, 50);
+};

package/build/types.d.ts

@@ -74,6 +74,22 @@ declare global {
                     }[]>;
                 }>;
             };
+            summarizer?: {
+                capabilities: () => Promise<{
+                    available: 'no' | 'yes' | 'after-download';
+                }>;
+                create: (options: {
+                    sharedContext?: string;
+                    type?: string;
+                    format?: string;
+                    length?: string;
+                }) => Promise<{
+                    ready: Promise<void>;
+                    summarize: (text: string, summarizeOptions?: {
+                        context?: string;
+                    }) => Promise<string>;
+                }>;
+            };
         };
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.26.3",
+	"version": "0.27.0",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -44,28 +44,28 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.43",
-		"@automattic/jetpack-components": "^0.67.1",
-		"@automattic/jetpack-connection": "^0.37.0",
-		"@automattic/jetpack-shared-extension-utils": "^0.17.3",
+		"@automattic/jetpack-base-styles": "^0.6.44",
+		"@automattic/jetpack-components": "^0.68.0",
+		"@automattic/jetpack-connection": "^0.38.0",
+		"@automattic/jetpack-shared-extension-utils": "^0.17.4",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/jest": "29.5.14",
 		"@types/react": "18.3.18",
 		"@types/wordpress__block-editor": "11.5.16",
-		"@wordpress/api-fetch": "7.17.0",
-		"@wordpress/base-styles": "5.17.0",
-		"@wordpress/blob": "4.17.0",
-		"@wordpress/blocks": "14.6.0",
-		"@wordpress/block-editor": "14.12.0",
-		"@wordpress/components": "29.3.0",
-		"@wordpress/compose": "7.17.0",
-		"@wordpress/data": "10.17.0",
-		"@wordpress/editor": "14.17.0",
-		"@wordpress/element": "6.17.0",
-		"@wordpress/i18n": "5.17.0",
-		"@wordpress/icons": "10.17.0",
-		"@wordpress/primitives": "4.17.0",
-		"@wordpress/url": "4.17.0",
+		"@wordpress/api-fetch": "7.19.0",
+		"@wordpress/base-styles": "5.19.0",
+		"@wordpress/blob": "4.19.0",
+		"@wordpress/blocks": "14.8.0",
+		"@wordpress/block-editor": "14.14.0",
+		"@wordpress/components": "29.5.0",
+		"@wordpress/compose": "7.19.0",
+		"@wordpress/data": "10.19.0",
+		"@wordpress/editor": "14.19.0",
+		"@wordpress/element": "6.19.0",
+		"@wordpress/i18n": "5.19.0",
+		"@wordpress/icons": "10.19.0",
+		"@wordpress/primitives": "4.19.0",
+		"@wordpress/url": "4.19.0",
 		"clsx": "2.1.1",
 		"debug": "4.4.0",
 		"markdown-it": "14.1.0",

package/src/chrome-ai/factory.ts

@@ -1,8 +1,5 @@
 import { getJetpackExtensionAvailability } from '@automattic/jetpack-shared-extension-utils';
-import {
-	PROMPT_TYPE_CHANGE_LANGUAGE,
-	//PROMPT_TYPE_SUMMARIZE,
-} from '../constants.js';
+import { PROMPT_TYPE_CHANGE_LANGUAGE, PROMPT_TYPE_SUMMARIZE } from '../constants.js';
 import { PromptProp, PromptItemProps } from '../types.js';
 import ChromeAISuggestionsEventSource from './suggestions.js';
 
@@ -19,6 +16,8 @@ interface PromptContext {
 	type?: string;
 	content?: string;
 	language?: string;
+	tone?: string;
+	words?: number;
 }
 
 /**
@@ -36,7 +35,11 @@ export default async function ChromeAIFactory( promptArg: PromptProp ) {
 		content: '',
 		language: '',
 	};
+
 	let promptType = '';
+	let tone = null;
+	let wordCount = null;
+
 	if ( Array.isArray( promptArg ) ) {
 		for ( let i = 0; i < promptArg.length; i++ ) {
 			const prompt: PromptItemProps = promptArg[ i ];
@@ -61,6 +64,14 @@ export default async function ChromeAIFactory( promptArg: PromptProp ) {
 			if ( promptContext.content ) {
 				context.content = promptContext.content;
 			}
+
+			if ( promptContext.tone ) {
+				tone = promptContext.tone;
+			}
+
+			if ( promptContext.words ) {
+				wordCount = promptContext.words;
+			}
 		}
 	}
 
@@ -112,17 +123,19 @@ export default async function ChromeAIFactory( promptArg: PromptProp ) {
 		return chromeAI;
 	}
 
-	// TODO
-	if ( promptType.startsWith( 'ai-assistant-summarize' ) ) {
-		/*
-		return new ChromeAISuggestionsEventSource({
-			content: "",
+	// TODO: consider also using ChromeAI for ai-assistant-summarize
+	if ( promptType.startsWith( 'ai-content-lens' ) ) {
+		const summaryOpts = {
+			tone: tone,
+			wordCount: wordCount,
+		};
+
+		// TODO: detect if the content is in English and fallback if it's not
+		return new ChromeAISuggestionsEventSource( {
+			content: context.content,
 			promptType: PROMPT_TYPE_SUMMARIZE,
-			options: {},
+			options: summaryOpts,
 		} );
-		*/
-
-		return false;
 	}
 
 	return false;

package/src/chrome-ai/suggestions.ts

@@ -15,6 +15,10 @@ type ChromeAISuggestionsEventSourceConstructorArgs = {
 		sourceLanguage?: string;
 		targetLanguage?: string;
 
+		// summarization
+		tone?: string;
+		wordCount?: number;
+
 		// not sure if we need these
 		functions?: Array< object >;
 		model?: AiModelTypeProp;
@@ -64,7 +68,7 @@ export default class ChromeAISuggestionsEventSource extends EventTarget {
 		}
 
 		if ( promptType === PROMPT_TYPE_SUMMARIZE ) {
-			this.summarize( content );
+			this.summarize( content, options.tone, options.wordCount );
 		}
 	}
 
@@ -83,7 +87,7 @@ export default class ChromeAISuggestionsEventSource extends EventTarget {
 			return;
 		}
 
-		if ( e.event === 'translation' ) {
+		if ( e.event === 'translation' || e.event === 'summary' ) {
 			this.dispatchEvent( new CustomEvent( 'suggestion', { detail: data.message } ) );
 		}
 
@@ -134,8 +138,58 @@ export default class ChromeAISuggestionsEventSource extends EventTarget {
 		}
 	}
 
-	// TODO
-	async summarize( text: string ) {
-		return text;
+	// Helper function to format summarizer options
+	private getSummarizerOptions( tone?: string, wordCount?: number ) {
+		let sharedContext = `The summary you write should contain approximately ${
+			wordCount ?? 50
+		} words long. Strive for precision in word count without compromising clarity and significance`;
+
+		if ( tone ) {
+			sharedContext += `\n - Write with a ${ tone } tone.\n`;
+		}
+
+		const options = {
+			sharedContext: sharedContext,
+			type: 'teaser',
+			format: 'plain-text',
+			length: 'medium',
+		};
+
+		return options;
+	}
+
+	// use the Chrome AI summarizer
+	async summarize( text: string, tone?: string, wordCount?: number ) {
+		if ( ! ( 'ai' in self ) || ! ( 'summarizer' in self.ai ) ) {
+			return;
+		}
+		const available = ( await self.ai.summarizer.capabilities() ).available;
+
+		if ( available === 'no' ) {
+			return;
+		}
+
+		const options = this.getSummarizerOptions( tone, wordCount );
+
+		const summarizer = await self.ai.summarizer.create( options );
+
+		if ( available === 'after-download' ) {
+			await summarizer.ready;
+		}
+
+		try {
+			const context = `Write with a ${ tone } tone.`;
+			const summary = await summarizer.summarize( text, { context: context } );
+			this.processEvent( {
+				id: '',
+				event: 'summary',
+				data: JSON.stringify( {
+					message: summary,
+					complete: true,
+				} ),
+			} );
+		} catch ( error ) {
+			this.processErrorEvent( error );
+		}
 	}
 }

package/src/components/ai-image/components/ai-image-modal.tsx

@@ -41,7 +41,6 @@ type AiImageModalProps = {
 	isUnlimited: boolean;
 	upgradeDescription: string;
 	hasError: boolean;
-	postContent?: string | boolean | null;
 	handlePreviousImage: () => void;
 	handleNextImage: () => void;
 	acceptButton: React.JSX.Element;

package/src/components/ai-image/featured-image.tsx

@@ -57,7 +57,7 @@ export default function FeaturedImage( {
 		placement === PLACEMENT_MEDIA_SOURCE_DROPDOWN
 	);
 	const siteType = useSiteType();
-	const postContent = usePostContent();
+	const { getPostContent, isEditedPostEmpty } = usePostContent();
 	const { postTitle, postFeaturedMediaId, isEditorPanelOpened } = useSelect( select => {
 		return {
 			postTitle: select( editorStore ).getEditedPostAttribute( 'title' ),
@@ -133,10 +133,10 @@ export default function FeaturedImage( {
 	 */
 	const handleGuessStyle = useCallback(
 		userPrompt => {
-			const content = postTitle + '\n\n' + postContent;
+			const content = postTitle + '\n\n' + getPostContent();
 			return guessStyle( userPrompt, 'featured-image-guess-style', content );
 		},
-		[ postContent, postTitle, guessStyle ]
+		[ postTitle, getPostContent, guessStyle ]
 	);
 
 	const handleGenerate = useCallback(
@@ -159,7 +159,7 @@ export default function FeaturedImage( {
 			setIsFeaturedImageModalVisible( true );
 			return processImageGeneration( {
 				userPrompt,
-				postContent: postTitle + '\n\n' + postContent,
+				postContent: postTitle + '\n\n' + getPostContent(),
 				notEnoughRequests,
 				style,
 			} ).catch( error => {
@@ -178,7 +178,7 @@ export default function FeaturedImage( {
 			featuredImageActiveModel,
 			siteType,
 			processImageGeneration,
-			postContent,
+			getPostContent,
 			notEnoughRequests,
 			postTitle,
 		]
@@ -209,7 +209,7 @@ export default function FeaturedImage( {
 			setCurrent( () => images.length );
 			processImageGeneration( {
 				userPrompt,
-				postContent: postTitle + '\n\n' + postContent,
+				postContent: postTitle + '\n\n' + getPostContent(),
 				notEnoughRequests,
 				style,
 			} ).catch( error => {
@@ -231,7 +231,7 @@ export default function FeaturedImage( {
 			setCurrent,
 			processImageGeneration,
 			postTitle,
-			postContent,
+			getPostContent,
 			notEnoughRequests,
 			images,
 		]
@@ -249,7 +249,7 @@ export default function FeaturedImage( {
 
 			processImageGeneration( {
 				userPrompt,
-				postContent: postTitle + '\n\n' + postContent,
+				postContent: postTitle + '\n\n' + getPostContent(),
 				notEnoughRequests,
 				style,
 			} ).catch( error => {
@@ -268,7 +268,7 @@ export default function FeaturedImage( {
 			featuredImageActiveModel,
 			siteType,
 			processImageGeneration,
-			postContent,
+			getPostContent,
 			notEnoughRequests,
 			postTitle,
 		]
@@ -346,7 +346,7 @@ export default function FeaturedImage( {
 	const generateAgainText = __( 'Generate another image', 'jetpack-ai-client' );
 	const generateText = __( 'Generate', 'jetpack-ai-client' );
 
-	const hasContent = postContent.trim?.() || postTitle.trim?.() ? true : false;
+	const hasContent = ! isEditedPostEmpty() || postTitle.trim?.() ? true : false;
 	const hasPrompt = hasContent ? prompt.length >= 0 : prompt.length >= 3;
 	const disableInput = notEnoughRequests || currentPointer?.generating || requireUpgrade;
 	const disableAction = disableInput || ( ! hasContent && ! hasPrompt );
@@ -396,7 +396,6 @@ export default function FeaturedImage( {
 				</>
 			) }
 			<AiImageModal
-				postContent={ hasContent }
 				autoStart={ hasContent && ! postFeaturedMediaId }
 				autoStartAction={ handleFirstGenerate }
 				images={ images }

package/src/components/ai-image/general-purpose-image.tsx

@@ -54,7 +54,7 @@ export default function GeneralPurposeImage( {
 }: GeneralPurposeImageProps ) {
 	const [ isFeaturedImageModalVisible, setIsFeaturedImageModalVisible ] = useState( true );
 	const siteType = useSiteType();
-	const postContent = usePostContent();
+	const { getPostContent } = usePostContent();
 	const { saveToMediaLibrary } = useSaveToMediaLibrary();
 	const { tracks } = useAnalytics();
 	const { recordEvent } = tracks;
@@ -111,17 +111,20 @@ export default function GeneralPurposeImage( {
 				site_type: siteType,
 				style,
 			} );
-			processImageGeneration( { userPrompt, postContent, notEnoughRequests, style } ).catch(
-				error => {
-					recordEvent( 'jetpack_ai_general_image_generation_error', {
-						placement,
-						error: error?.message,
-						model: generalImageActiveModel,
-						site_type: siteType,
-						style,
-					} );
-				}
-			);
+			processImageGeneration( {
+				userPrompt,
+				postContent: getPostContent(),
+				notEnoughRequests,
+				style,
+			} ).catch( error => {
+				recordEvent( 'jetpack_ai_general_image_generation_error', {
+					placement,
+					error: error?.message,
+					model: generalImageActiveModel,
+					site_type: siteType,
+					style,
+				} );
+			} );
 		},
 		[
 			recordEvent,
@@ -129,7 +132,7 @@ export default function GeneralPurposeImage( {
 			generalImageActiveModel,
 			siteType,
 			processImageGeneration,
-			postContent,
+			getPostContent,
 			notEnoughRequests,
 		]
 	);
@@ -146,16 +149,19 @@ export default function GeneralPurposeImage( {
 			} );
 
 			setCurrent( crrt => crrt + 1 );
-			processImageGeneration( { userPrompt, postContent, notEnoughRequests, style } ).catch(
-				error => {
-					recordEvent( 'jetpack_ai_general_image_generation_error', {
-						placement,
-						error: error?.message,
-						model: generalImageActiveModel,
-						site_type: siteType,
-					} );
-				}
-			);
+			processImageGeneration( {
+				userPrompt,
+				postContent: getPostContent(),
+				notEnoughRequests,
+				style,
+			} ).catch( error => {
+				recordEvent( 'jetpack_ai_general_image_generation_error', {
+					placement,
+					error: error?.message,
+					model: generalImageActiveModel,
+					site_type: siteType,
+				} );
+			} );
 		},
 		[
 			recordEvent,
@@ -163,7 +169,7 @@ export default function GeneralPurposeImage( {
 			generalImageActiveModel,
 			siteType,
 			processImageGeneration,
-			postContent,
+			getPostContent,
 			notEnoughRequests,
 			setCurrent,
 		]
@@ -180,16 +186,19 @@ export default function GeneralPurposeImage( {
 				style,
 			} );
 
-			processImageGeneration( { userPrompt, postContent, notEnoughRequests, style } ).catch(
-				error => {
-					recordEvent( 'jetpack_ai_general_image_generation_error', {
-						placement,
-						error: error?.message,
-						model: generalImageActiveModel,
-						site_type: siteType,
-					} );
-				}
-			);
+			processImageGeneration( {
+				userPrompt,
+				postContent: getPostContent(),
+				notEnoughRequests,
+				style,
+			} ).catch( error => {
+				recordEvent( 'jetpack_ai_general_image_generation_error', {
+					placement,
+					error: error?.message,
+					model: generalImageActiveModel,
+					site_type: siteType,
+				} );
+			} );
 		},
 		[
 			recordEvent,
@@ -197,7 +206,7 @@ export default function GeneralPurposeImage( {
 			generalImageActiveModel,
 			siteType,
 			processImageGeneration,
-			postContent,
+			getPostContent,
 			notEnoughRequests,
 		]
 	);
@@ -266,7 +275,6 @@ export default function GeneralPurposeImage( {
 
 	return (
 		<AiImageModal
-			postContent={ true }
 			images={ images }
 			currentIndex={ current }
 			title={ __( 'Generate an image with AI', 'jetpack-ai-client' ) }

package/src/hooks/use-post-content.ts

@@ -3,25 +3,38 @@
  */
 import { serialize } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { useCallback } from '@wordpress/element';
 /**
- * Types
+ * Internal dependencies
  */
 import { renderMarkdownFromHTML } from '../libs/markdown/index.js';
-import type * as BlockEditorSelectors from '@wordpress/block-editor/store/selectors.js';
 /**
- * Internal dependencies
+ * Types
  */
+import type * as BlockEditorSelectors from '@wordpress/block-editor/store/selectors.js';
 
 /*
  * Simple helper to get the post content as markdown
  */
 const usePostContent = () => {
-	const blocks = useSelect(
-		select => ( select( 'core/block-editor' ) as typeof BlockEditorSelectors ).getBlocks(),
-		[]
-	);
+	const { getBlocks, isEditedPostEmpty } = useSelect( select => {
+		const blockEditorSelect = select( 'core/block-editor' ) as typeof BlockEditorSelectors;
+		const coreEditorSelect = select( editorStore );
+
+		return {
+			getBlocks: blockEditorSelect.getBlocks,
+			isEditedPostEmpty: coreEditorSelect.isEditedPostEmpty,
+		};
+	}, [] );
+
+	const getPostContent = useCallback( () => {
+		const blocks = getBlocks();
+
+		return blocks?.length ? renderMarkdownFromHTML( { content: serialize( blocks ) } ) : '';
+	}, [ getBlocks ] );
 
-	return blocks?.length ? renderMarkdownFromHTML( { content: serialize( blocks ) } ) : '';
+	return { getPostContent, isEditedPostEmpty };
 };
 
 export default usePostContent;

package/src/libs/index.ts

@@ -9,3 +9,7 @@ export {
 export type { RenderHTMLRules } from './markdown/index.js';
 
 export { mapActionToHumanText } from './map-action-to-human-text.js';
+
+export { openBlockSidebar } from './open-block-sidebar.js';
+
+export { showAiAssistantSection } from './show-ai-assistant-section.js';

package/src/libs/open-block-sidebar.ts

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { dispatch } from '@wordpress/data';
+
+type CoreInterfaceDispatch = {
+	enableComplementaryArea: ( area: string, slot: string ) => Promise< void >;
+};
+
+/**
+ * Open the block sidebar for the given client ID.
+ *
+ * @param {string} clientId - The client ID of the block to open the sidebar for.
+ */
+export function openBlockSidebar( clientId: string ) {
+	if ( ! clientId ) {
+		return;
+	}
+
+	const { selectBlock } = dispatch( blockEditorStore );
+	const { enableComplementaryArea } = dispatch( 'core/interface' ) as CoreInterfaceDispatch;
+
+	selectBlock( clientId );
+	// This only works for the post editor, as the SEO Assistant is only available there
+	enableComplementaryArea( 'core/edit-post', 'edit-post/block' );
+}

package/src/libs/show-ai-assistant-section.ts

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { dispatch } from '@wordpress/data';
+
+export const showAiAssistantSection = async () => {
+	const { clearSelectedBlock } = dispatch( 'core/block-editor' );
+	const { enableComplementaryArea } = dispatch( 'core/interface' ) as {
+		enableComplementaryArea: ( area: string, slot: string ) => Promise< void >;
+	};
+
+	// Clear any block selection, because selected blocks have precedence on settings sidebar
+	clearSelectedBlock();
+	await enableComplementaryArea( 'core/edit-post', 'jetpack-sidebar/jetpack' );
+
+	const panel = document.querySelector( '.jetpack-ai-assistant-panel' );
+	const isAlreadyOpen = panel?.classList.contains( 'is-opened' );
+	const button: HTMLElement | null | undefined = panel?.querySelector( 'h2 button' );
+
+	if ( isAlreadyOpen ) {
+		// Close it before opening it to ensure the content is scrolled to view
+		button?.click();
+	}
+
+	setTimeout( () => {
+		button?.click();
+	}, 50 );
+};

package/src/types.ts

@@ -158,6 +158,20 @@ declare global {
 					>;
 				} >;
 			};
+			summarizer?: {
+				capabilities: () => Promise< {
+					available: 'no' | 'yes' | 'after-download';
+				} >;
+				create: ( options: {
+					sharedContext?: string;
+					type?: string;
+					format?: string;
+					length?: string;
+				} ) => Promise< {
+					ready: Promise< void >;
+					summarize: ( text: string, summarizeOptions?: { context?: string } ) => Promise< string >;
+				} >;
+			};
 		};
 	}
 }