@automattic/jetpack-ai-client 0.25.6 → 0.26.0

package/build/components/quota-exceeded-message/index.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * External dependencies
+ */
+import getRedirectUrl from '@automattic/jetpack-components/tools/jp-redirect';
+import { useAnalytics, canUserPurchasePlan } from '@automattic/jetpack-shared-extension-utils';
+import { Nudge as StandardNudge } from '@automattic/jetpack-shared-extension-utils/components';
+import { Notice } from '@wordpress/components';
+import { createInterpolateElement, useCallback } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import debugFactory from 'debug';
+/*
+ * Internal dependencies
+ */
+import useAICheckout from '../../hooks/use-ai-checkout/index.js';
+import useAiFeature from '../../hooks/use-ai-feature/index.js';
+import { LightNudge } from './light-nudge.js';
+import './style.scss';
+const debug = debugFactory('jetpack-ai-client:upgrade-prompt');
+/**
+ * The fair usage notice message for the AI Assistant block.
+ * @return {ReactElement} the fair usage notice message, with the proper link and date.
+ */
+const useFairUsageNoticeMessage = () => {
+    const { usagePeriod } = useAiFeature();
+    const getFormattedUsagePeriodStartDate = planUsagePeriod => {
+        if (!planUsagePeriod?.nextStart) {
+            return null;
+        }
+        const nextUsagePeriodStartDate = new Date(planUsagePeriod.nextStart);
+        return (nextUsagePeriodStartDate.toLocaleString('default', { month: 'long' }) +
+            ' ' +
+            nextUsagePeriodStartDate.getDate());
+    };
+    const getFairUsageNoticeMessage = resetDateString => {
+        const fairUsageMessage = __("You've reached this month's request limit, per our <link>fair usage policy</link>.", 'jetpack-ai-client');
+        if (!resetDateString) {
+            return fairUsageMessage;
+        }
+        // Translators: %s is the date when the requests will reset.
+        const dateMessage = __('Requests will reset on %s.', 'jetpack-ai-client');
+        const formattedDateMessage = sprintf(dateMessage, resetDateString);
+        return `${fairUsageMessage} ${formattedDateMessage}`;
+    };
+    const nextUsagePeriodStartDateString = getFormattedUsagePeriodStartDate(usagePeriod);
+    // Get the proper template based on the presence of the next usage period start date.
+    const fairUsageNoticeMessage = getFairUsageNoticeMessage(nextUsagePeriodStartDateString);
+    const fairUsageNoticeMessageElement = createInterpolateElement(fairUsageNoticeMessage, {
+        link: (_jsx("a", { href: "https://jetpack.com/redirect/?source=ai-assistant-fair-usage-policy", target: "_blank", rel: "noreferrer" })),
+    });
+    return fairUsageNoticeMessageElement;
+};
+/**
+ * The default upgrade prompt for the AI Assistant block, containing the Upgrade button and linking
+ * to the checkout page or the Jetpack AI interstitial page.
+ *
+ * @param {QuotaExceededMessageProps} props - Component props.
+ * @return {ReactElement} the Nudge component with the prompt.
+ */
+const DefaultUpgradePrompt = ({ placement = null, description = null, useLightNudge = false, }) => {
+    const Nudge = useLightNudge ? LightNudge : StandardNudge;
+    const { checkoutUrl } = useAICheckout();
+    const canUpgrade = canUserPurchasePlan();
+    const { nextTier, tierPlansEnabled, currentTier, requestsCount } = useAiFeature();
+    const { tracks } = useAnalytics();
+    const handleUpgradeClick = useCallback(() => {
+        debug('upgrade', placement);
+        tracks.recordEvent('jetpack_ai_upgrade_button', {
+            current_tier_slug: currentTier?.slug,
+            requests_count: requestsCount,
+            placement: placement,
+        });
+    }, [currentTier, requestsCount, tracks, placement]);
+    const handleContactUsClick = useCallback(() => {
+        debug('contact us', placement);
+        tracks.recordEvent('jetpack_ai_upgrade_contact_us', {
+            placement: placement,
+        });
+    }, [tracks, placement]);
+    if (!canUpgrade) {
+        const cantUpgradeDescription = createInterpolateElement(__('Congratulations on exploring Jetpack AI and reaching the free requests limit! <strong>Reach out to the site administrator to upgrade and keep using Jetpack AI.</strong>', 'jetpack-ai-client'), {
+            strong: _jsx("strong", {}),
+        });
+        return (_jsx(Nudge, { showButton: false, className: 'jetpack-ai-upgrade-banner', description: description || cantUpgradeDescription, visible: true, align: null, title: null, context: null }));
+    }
+    if (tierPlansEnabled) {
+        if (!nextTier) {
+            const contactHref = getRedirectUrl('jetpack-ai-tiers-more-requests-contact');
+            const contactUsDescription = __('You have reached the request limit for your current plan.', 'jetpack-ai-client');
+            return (_jsx(Nudge, { buttonText: __('Contact Us', 'jetpack-ai-client'), description: description || contactUsDescription, className: 'jetpack-ai-upgrade-banner', checkoutUrl: contactHref, visible: true, align: null, title: null, context: null, goToCheckoutPage: handleContactUsClick, target: "_blank" }));
+        }
+        const upgradeDescription = createInterpolateElement(sprintf(
+        /* Translators: number of requests */
+        __('You have reached the requests limit for your current plan. <strong>Upgrade now to increase your requests limit to %d.</strong>', 'jetpack-ai-client'), nextTier.limit), {
+            strong: _jsx("strong", {}),
+        });
+        return (_jsx(Nudge, { buttonText: sprintf(
+            /* Translators: number of requests */
+            __('Upgrade to %d requests', 'jetpack-ai-client'), nextTier.limit), checkoutUrl: checkoutUrl, className: 'jetpack-ai-upgrade-banner', description: description || upgradeDescription, goToCheckoutPage: handleUpgradeClick, visible: true, align: 'center', title: null, context: null, target: "_blank" }));
+    }
+    return (_jsx(Nudge, { buttonText: __('Upgrade', 'jetpack-ai-client'), checkoutUrl: checkoutUrl, className: 'jetpack-ai-upgrade-banner', description: createInterpolateElement(__('Congratulations on exploring Jetpack AI and reaching the free requests limit! <strong>Upgrade now to keep using it.</strong>', 'jetpack-ai-client'), {
+            strong: _jsx("strong", {}),
+        }), goToCheckoutPage: handleUpgradeClick, visible: true, align: null, title: null, context: null, target: "_blank" }));
+};
+/**
+ * The VIP upgrade prompt, with a single text message recommending that the user reach
+ * out to their VIP account team.
+ *
+ * @param {object}  props               - Component props.
+ * @param {string}  props.description   - The description to display in the prompt.
+ * @param {boolean} props.useLightNudge - Wheter to use the light variant of the nudge, or the standard one.
+ * @return {ReactElement} the Nudge component with the prompt.
+ */
+const VIPUpgradePrompt = ({ description = null, useLightNudge = false, }) => {
+    const Nudge = useLightNudge ? LightNudge : StandardNudge;
+    const vipDescription = createInterpolateElement(__("You've reached the Jetpack AI rate limit. <strong>Please reach out to your VIP account team.</strong>", 'jetpack-ai-client'), {
+        strong: _jsx("strong", {}),
+    });
+    return (_jsx(Nudge, { buttonText: null, checkoutUrl: null, className: 'jetpack-ai-upgrade-banner', description: description || vipDescription, goToCheckoutPage: null, isRedirecting: null, visible: true, align: null, title: null, context: null }));
+};
+/**
+ * The fair usage notice component.
+ * @param {FairUsageNoticeProps}         props         - Fair usage notice component props.
+ * @param {FairUsageNoticeProps.variant} props.variant - The variant of the notice to render.
+ * @return {ReactElement} the Notice component with the fair usage message.
+ */
+export const FairUsageNotice = ({ variant = 'error' }) => {
+    const useFairUsageNoticeMessageElement = useFairUsageNoticeMessage();
+    if (variant === 'muted') {
+        return (_jsx("span", { className: "jetpack-ai-fair-usage-notice-muted-variant", children: useFairUsageNoticeMessageElement }));
+    }
+    if (variant === 'error') {
+        return (_jsx(Notice, { status: "error", isDismissible: false, className: "jetpack-ai-fair-usage-notice", children: useFairUsageNoticeMessageElement }));
+    }
+    return null;
+};
+const QuotaExceededMessage = props => {
+    const { upgradeType, currentTier } = useAiFeature();
+    // Return notice component for the fair usage limit message, on unlimited plans.
+    if (currentTier?.value === 1) {
+        return _jsx(FairUsageNotice, {});
+    }
+    // If the user is on a VIP site, show the VIP upgrade prompt.
+    if (upgradeType === 'vip') {
+        return VIPUpgradePrompt({
+            description: props.description,
+            useLightNudge: props?.useLightNudge,
+        });
+    }
+    return DefaultUpgradePrompt(props);
+};
+export default QuotaExceededMessage;

package/build/components/quota-exceeded-message/light-nudge.d.ts

@@ -0,0 +1,11 @@
+import './style.scss';
+export declare const LightNudge: ({ title, description, buttonText, checkoutUrl, goToCheckoutPage, isRedirecting, showButton, target, }: {
+    title: any;
+    description: any;
+    buttonText?: any;
+    checkoutUrl?: any;
+    goToCheckoutPage?: any;
+    isRedirecting?: boolean;
+    showButton?: boolean;
+    target?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/build/components/quota-exceeded-message/light-nudge.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import './style.scss';
+export const LightNudge = ({ title, description, buttonText = null, checkoutUrl = null, goToCheckoutPage = null, isRedirecting = false, showButton = true, target = '_top', }) => {
+    const redirectingText = __('Redirecting…', 'jetpack-ai-client');
+    return (_jsx("div", { className: "jetpack-upgrade-plan-banner-light", children: _jsx(Notice, { status: "error", isDismissible: false, children: _jsxs("p", { children: [title && _jsx("strong", { children: title }), description, ' ', showButton && (_jsx(Button, { href: isRedirecting ? null : checkoutUrl, onClick: goToCheckoutPage, variant: "link", target: target, children: isRedirecting ? redirectingText : buttonText }))] }) }) }));
+};

package/build/{ai-client/src/constants.d.ts → constants.d.ts}

@@ -104,3 +104,6 @@ export declare const WRITE_POST_FROM_LIST_LABEL: string;
 export declare const GENERATE_TITLE_LABEL: string;
 export declare const SUMMARY_BASED_ON_TITLE_LABEL: string;
 export declare const CONTINUE_LABEL: string;
+export declare const PLACEMENT_JETPACK_SIDEBAR: "jetpack-sidebar";
+export declare const PLACEMENT_DOCUMENT_SETTINGS: "document-settings";
+export declare const PLACEMENT_PRE_PUBLISH: "pre-publish";

package/build/{ai-client/src/constants.js → constants.js}

@@ -111,3 +111,7 @@ export const WRITE_POST_FROM_LIST_LABEL = __('Write a post from this list', 'jet
 export const GENERATE_TITLE_LABEL = __('Generate a post title', 'jetpack-ai-client');
 export const SUMMARY_BASED_ON_TITLE_LABEL = __('Summary based on title', 'jetpack-ai-client');
 export const CONTINUE_LABEL = __('Continue writing', 'jetpack-ai-client');
+// Jetpack Sidebar
+export const PLACEMENT_JETPACK_SIDEBAR = 'jetpack-sidebar';
+export const PLACEMENT_DOCUMENT_SETTINGS = 'document-settings';
+export const PLACEMENT_PRE_PUBLISH = 'pre-publish';

package/build/hooks/use-ai-checkout/index.d.ts

@@ -0,0 +1,13 @@
+import type { MouseEvent } from 'react';
+type UseAICheckoutReturn = {
+    checkoutUrl: string;
+    autosaveAndRedirect: (event: MouseEvent<HTMLButtonElement>) => void;
+    isRedirecting: boolean;
+};
+/**
+ * The hook to get properties for AICheckout
+ *
+ * @return {UseAICheckoutReturn} - Object containing properties for AICheckout.
+ */
+export default function useAICheckout(): UseAICheckoutReturn;
+export {};

package/build/hooks/use-ai-checkout/index.js

@@ -0,0 +1,41 @@
+/*
+ * External dependencies
+ */
+import getRedirectUrl from '@automattic/jetpack-components/tools/jp-redirect';
+import { isAtomicSite, isSimpleSite, getSiteFragment, useAutosaveAndRedirect, } from '@automattic/jetpack-shared-extension-utils';
+import useAiFeature from '../use-ai-feature/index.js';
+const getWPComRedirectToURL = () => {
+    const searchParams = new URLSearchParams(window.location.search);
+    const site = getSiteFragment();
+    if (isSimpleSite() && searchParams.has('post')) {
+        // When there is an explicit post, use it as the destination
+        return `https://wordpress.com/post/${site}/${searchParams.get('post')}`;
+    }
+    // When there is no explicit post, or the site is not Simple, use the home page as the destination
+    return `https://wordpress.com/home/${site}`;
+};
+/**
+ * The hook to get properties for AICheckout
+ *
+ * @return {UseAICheckoutReturn} - Object containing properties for AICheckout.
+ */
+export default function useAICheckout() {
+    const { nextTier, tierPlansEnabled } = useAiFeature();
+    const wpcomRedirectToURL = getWPComRedirectToURL();
+    const wpcomCheckoutUrl = getRedirectUrl('jetpack-ai-yearly-tier-upgrade-nudge', {
+        site: getSiteFragment(),
+        path: tierPlansEnabled ? `jetpack_ai_yearly:-q-${nextTier?.limit}` : 'jetpack_ai_yearly',
+        query: `redirect_to=${encodeURIComponent(wpcomRedirectToURL)}`,
+    });
+    const jetpackCheckoutUrl = getRedirectUrl('jetpack-ai-upgrade-url-for-jetpack-sites', {
+        site: getSiteFragment(),
+        path: 'jetpack_ai_yearly',
+    });
+    const checkoutUrl = isAtomicSite() || isSimpleSite() ? wpcomCheckoutUrl : jetpackCheckoutUrl;
+    const { autosaveAndRedirect, isRedirecting } = useAutosaveAndRedirect(checkoutUrl);
+    return {
+        checkoutUrl,
+        autosaveAndRedirect,
+        isRedirecting,
+    };
+}

package/build/hooks/use-ai-feature/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Hook to get properties for AiFeature
+ * @return {object} - Object containing properties for AiFeature.
+ */
+export default function useAiFeature(): {
+    requestsCount: number;
+    requestsLimit: number;
+    loading: boolean;
+    error: any;
+    refresh: any;
+    increaseRequestsCount: any;
+    dequeueAsyncRequest: any;
+    hasFeature: boolean;
+    isOverLimit: boolean;
+    requireUpgrade: boolean;
+    errorMessage?: string;
+    errorCode?: string;
+    upgradeType: import("@automattic/jetpack-shared-extension-utils/store/wordpress-com/types").UpgradeTypeProp;
+    currentTier?: import("@automattic/jetpack-shared-extension-utils/store/wordpress-com/types").TierProp;
+    usagePeriod?: {
+        currentStart: string;
+        nextStart: string;
+        requestsCount: number;
+    };
+    nextTier?: import("@automattic/jetpack-shared-extension-utils/store/wordpress-com/types").TierProp;
+    tierPlansEnabled?: boolean;
+    costs?: {
+        [key: string]: {
+            [key: string]: number;
+        };
+    };
+    featuresControl?: import("@automattic/jetpack-shared-extension-utils/store/wordpress-com/types").FeaturesControl;
+};

package/build/hooks/use-ai-feature/index.js

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { PLAN_TYPE_FREE, usePlanType as getPlanType, } from '@automattic/jetpack-shared-extension-utils';
+import { useDispatch, useSelect } from '@wordpress/data';
+/**
+ * Hook to get properties for AiFeature
+ * @return {object} - Object containing properties for AiFeature.
+ */
+export default function useAiFeature() {
+    const { data, loading, requestsLimit, requestsCount } = useSelect(select => {
+        const { getAiAssistantFeature, getIsRequestingAiAssistantFeature } = select('wordpress-com/plans');
+        const featureData = getAiAssistantFeature();
+        const { currentTier, usagePeriod, requestsCount: allTimeRequestsCount, requestsLimit: freeRequestsLimit, } = featureData;
+        const planType = getPlanType(currentTier);
+        const currentTierLimit = currentTier?.limit || freeRequestsLimit;
+        const actualRequestsCount = planType === PLAN_TYPE_FREE ? allTimeRequestsCount : usagePeriod?.requestsCount;
+        const actualRequestsLimit = planType === PLAN_TYPE_FREE ? freeRequestsLimit : currentTierLimit;
+        return {
+            data: featureData,
+            loading: getIsRequestingAiAssistantFeature(),
+            requestsCount: actualRequestsCount,
+            requestsLimit: actualRequestsLimit,
+        };
+    }, []);
+    const { fetchAiAssistantFeature: loadFeatures, increaseAiAssistantRequestsCount: increaseRequestsCount, dequeueAiAssistantFeatureAsyncRequest: dequeueAsyncRequest, } = useDispatch('wordpress-com/plans');
+    return {
+        ...data,
+        requestsCount,
+        requestsLimit,
+        loading,
+        error: null,
+        refresh: loadFeatures,
+        increaseRequestsCount,
+        dequeueAsyncRequest,
+    };
+}

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

@@ -0,0 +1,5 @@
+/**
+ * Internal dependencies
+ */
+declare const usePostContent: () => string;
+export default usePostContent;

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

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { serialize } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+/**
+ * Types
+ */
+import { renderMarkdownFromHTML } from '../libs/markdown/index.js';
+/**
+ * Internal dependencies
+ */
+/*
+ * 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) }) : '';
+};
+export default usePostContent;

package/build/hooks/use-save-to-media-library.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Hook to save data to media library
+ *
+ * @return {UseSaveToMediaLibraryReturn} - Object containing properties to save data to media library.
+ */
+export default function useSaveToMediaLibrary(): {
+    isLoading: boolean;
+    saveToMediaLibrary: (url: string, name?: string) => Promise<{
+        id: string;
+        url: string;
+    }>;
+};

package/build/hooks/use-save-to-media-library.js

@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import { isBlobURL } from '@wordpress/blob';
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import debugFactory from 'debug';
+const debug = debugFactory('jetpack-ai-client:save-to-media-library');
+/**
+ * Hook to save data to media library
+ *
+ * @return {UseSaveToMediaLibraryReturn} - Object containing properties to save data to media library.
+ */
+export default function useSaveToMediaLibrary() {
+    const [isLoading, setIsLoading] = useState(false);
+    const { getSettings } = useSelect(select => select('core/block-editor'), []);
+    const saveToMediaLibrary = (url, name = null) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const settings = getSettings();
+        return new Promise((resolve, reject) => {
+            setIsLoading(true);
+            debug('Fetching image from URL');
+            fetch(url)
+                .then(response => {
+                debug('Transforming response to blob');
+                response
+                    .blob()
+                    .then((blob) => {
+                    debug('Uploading blob to media library');
+                    const filesList = [];
+                    if (name) {
+                        filesList.push(new File([blob], name));
+                    }
+                    else {
+                        filesList.push(blob);
+                    }
+                    settings.mediaUpload({
+                        allowedTypes: ['image'],
+                        filesList,
+                        onFileChange([image]) {
+                            if (isBlobURL(image?.url)) {
+                                return;
+                            }
+                            if (image) {
+                                debug('Image uploaded to media library', image);
+                                resolve(image);
+                            }
+                            setIsLoading(false);
+                        },
+                        onError(message) {
+                            debug('Error uploading image to media library:', message);
+                            reject(message);
+                            setIsLoading(false);
+                        },
+                    });
+                })
+                    .catch(e => {
+                    debug('Error transforming response to blob:', e?.message);
+                    reject(e?.message);
+                    setIsLoading(false);
+                });
+            })
+                .catch(e => {
+                debug('Error fetching image from URL:', e?.message);
+                reject(e?.message);
+                setIsLoading(false);
+            });
+        });
+    };
+    return {
+        isLoading,
+        saveToMediaLibrary,
+    };
+}

package/build/{ai-client/src/index.d.ts → index.d.ts}

@@ -3,12 +3,15 @@ export { default as SuggestionsEventSource } from './suggestions-event-source/in
 export { default as askQuestion } from './ask-question/index.js';
 export { default as askQuestionSync } from './ask-question/sync.js';
 export { default as transcribeAudio } from './audio-transcription/index.js';
+export { default as useAICheckout } from './hooks/use-ai-checkout/index.js';
+export { default as useAiFeature } from './hooks/use-ai-feature/index.js';
 export { default as useAiSuggestions, getErrorData } from './hooks/use-ai-suggestions/index.js';
 export { default as useMediaRecording } from './hooks/use-media-recording/index.js';
 export { default as useAudioTranscription } from './hooks/use-audio-transcription/index.js';
 export { default as useTranscriptionPostProcessing } from './hooks/use-transcription-post-processing/index.js';
 export { default as useAudioValidation } from './hooks/use-audio-validation/index.js';
 export { default as useImageGenerator } from './hooks/use-image-generator/index.js';
+export { default as usePostContent } from './hooks/use-post-content.js';
 export * from './hooks/use-image-generator/constants.js';
 export * from './icons/index.js';
 export * from './components/index.js';

package/build/{ai-client/src/index.js → index.js}

@@ -9,12 +9,15 @@ export { default as transcribeAudio } from './audio-transcription/index.js';
 /*
  * Hooks
  */
+export { default as useAICheckout } from './hooks/use-ai-checkout/index.js';
+export { default as useAiFeature } from './hooks/use-ai-feature/index.js';
 export { default as useAiSuggestions, getErrorData } from './hooks/use-ai-suggestions/index.js';
 export { default as useMediaRecording } from './hooks/use-media-recording/index.js';
 export { default as useAudioTranscription } from './hooks/use-audio-transcription/index.js';
 export { default as useTranscriptionPostProcessing } from './hooks/use-transcription-post-processing/index.js';
 export { default as useAudioValidation } from './hooks/use-audio-validation/index.js';
 export { default as useImageGenerator } from './hooks/use-image-generator/index.js';
+export { default as usePostContent } from './hooks/use-post-content.js';
 export * from './hooks/use-image-generator/constants.js';
 /*
  * Components: Icons

package/build/{ai-client/src/logo-generator → logo-generator}/components/upgrade-screen.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * External dependencies
  */
+import getRedirectUrl from '@automattic/jetpack-components/tools/jp-redirect';
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import getRedirectUrl from '../../../../components/tools/jp-redirect/index.js';
 import { EVENT_PLACEMENT_FREE_USER_SCREEN, EVENT_UPGRADE } from '../constants.js';
 import useLogoGenerator from '../hooks/use-logo-generator.js';
 export const UpgradeScreen = ({ onCancel, upgradeURL, reason }) => {

package/build/{ai-client/src/logo-generator → logo-generator}/hooks/use-fair-usage-notice-message.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import getRedirectUrl from '@automattic/jetpack-components/tools/jp-redirect';
 import { useSelect } from '@wordpress/data';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import getRedirectUrl from '../../../../components/tools/jp-redirect/index.js';
 /**
  * Internal dependencies
  */

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.25.6",
+	"version": "0.26.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,22 +44,28 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.40",
-		"@automattic/jetpack-connection": "^0.36.4",
-		"@automattic/jetpack-shared-extension-utils": "^0.16.4",
+		"@automattic/jetpack-base-styles": "^0.6.42",
+		"@automattic/jetpack-components": "^0.66.0",
+		"@automattic/jetpack-connection": "^0.36.5",
+		"@automattic/jetpack-shared-extension-utils": "^0.17.0",
 		"@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.16.0",
-		"@wordpress/base-styles": "5.16.0",
-		"@wordpress/blob": "4.16.0",
-		"@wordpress/block-editor": "14.11.0",
-		"@wordpress/components": "29.2.0",
-		"@wordpress/compose": "7.16.0",
-		"@wordpress/data": "10.16.0",
-		"@wordpress/element": "6.16.0",
-		"@wordpress/i18n": "5.16.0",
-		"@wordpress/icons": "10.16.0",
+		"@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",
 		"clsx": "2.1.1",
 		"debug": "4.4.0",
 		"markdown-it": "14.1.0",

package/src/components/ai-icon/index.tsx

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { G, Path, SVG, Rect } from '@wordpress/components';
+import { Icon } from '@wordpress/icons';
+import { Defs } from '@wordpress/primitives';
+
+export const AiSVG = (
+	<SVG width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<G clipPath="url(#clip0_4479_1006)">
+			<Path
+				d="M7.87488 0L10.1022 5.64753L15.7498 7.87488L10.1022 10.1022L7.87488 15.7498L5.64753 10.1022L0 7.87488L5.64753 5.64753L7.87488 0Z"
+				fill="#A7AAAD"
+			/>
+			<Path
+				d="M31.4998 0L34.4696 7.53004L41.9997 10.4998L34.4696 13.4696L31.4998 20.9997L28.53 13.4696L21 10.4998L28.53 7.53004L31.4998 0Z"
+				fill="#A7AAAD"
+			/>
+			<Path
+				d="M18.3748 15.7496L22.0871 25.1621L31.4996 28.8744L22.0871 32.5866L18.3748 41.9992L14.6625 32.5866L5.25 28.8744L14.6625 25.1621L18.3748 15.7496Z"
+				fill="#A7AAAD"
+			/>
+		</G>
+		<Defs>
+			<clipPath id="clip0_4479_1006">
+				<Rect width="41.9997" height="41.9992" fill="white" />
+			</clipPath>
+		</Defs>
+	</SVG>
+);
+
+/**
+ * AiIcon component
+ * @param {string} className - The wrapper class name.
+ * @return {React.ReactElement} The `AiIcon` component.
+ */
+export default function AiIcon( { className, size = 42 }: { className?: string; size?: number } ) {
+	return <Icon icon={ AiSVG } width={ size } height={ size } className={ className } />;
+}