@automattic/jetpack-ai-client 0.1.15 → 0.2.0

package/CHANGELOG.md

@@ -5,6 +5,14 @@ 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.2.0] - 2023-11-20
+### Changed
+- Include built JavaScript code in addition to TypeScript. [#34118]
+
+## [0.1.16] - 2023-11-14
+### Changed
+- Updated package dependencies. [#34093]
+
 ## [0.1.15] - 2023-11-13
 ### Changed
 - Prevented dispatching the `done` event for JETPACK_AI_ERROR. [#34051]
@@ -158,6 +166,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.2.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.16...v0.2.0
+[0.1.16]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.15...v0.1.16
 [0.1.15]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.14...v0.1.15
 [0.1.14]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.13...v0.1.14
 [0.1.13]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.12...v0.1.13

package/build/ask-question/index.d.ts

@@ -0,0 +1,32 @@
+import SuggestionsEventSource from '../suggestions-event-source';
+import type { AiModelTypeProp, PromptProp } from '../types';
+export type AskQuestionOptionsArgProps = {
+    postId?: number;
+    fromCache?: boolean;
+    feature?: 'ai-assistant-experimental' | string | undefined;
+    model?: AiModelTypeProp;
+    functions?: Array<{
+        name?: string;
+        arguments?: string;
+        implementation?: Function;
+    }>;
+};
+/**
+ * An asynchronous function that asks a question
+ * and returns an event source with suggestions.
+ *
+ * @param {PromptProp} question - The question to ask. It can be a simple string or an array of PromptMessageItemProps objects.
+ * @param {AskQuestionOptionsArgProps} options - An optional object for additional configuration:
+ * @returns {Promise<SuggestionsEventSource>}    A promise that resolves to an instance of the SuggestionsEventSource
+ * @example
+ *  const question = "What is the meaning of life?";
+ *  const options = {
+ *      postId: 1,
+ *      fromCache: true,
+ *      feature: 'ai-assistant-experimental'
+ *  }
+ *  askQuestion( question, options ).then( suggestionsEventSource => {
+ *      // handle suggestionsEventSource
+ *  } );
+ */
+export default function askQuestion(question: PromptProp, { postId, fromCache, feature, functions, model }?: AskQuestionOptionsArgProps): Promise<SuggestionsEventSource>;

package/build/ask-question/index.js

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import debugFactory from 'debug';
+import SuggestionsEventSource from '../suggestions-event-source';
+const debug = debugFactory('jetpack-ai-client:ask-question');
+/**
+ * An asynchronous function that asks a question
+ * and returns an event source with suggestions.
+ *
+ * @param {PromptProp} question - The question to ask. It can be a simple string or an array of PromptMessageItemProps objects.
+ * @param {AskQuestionOptionsArgProps} options - An optional object for additional configuration:
+ * @returns {Promise<SuggestionsEventSource>}    A promise that resolves to an instance of the SuggestionsEventSource
+ * @example
+ *  const question = "What is the meaning of life?";
+ *  const options = {
+ *      postId: 1,
+ *      fromCache: true,
+ *      feature: 'ai-assistant-experimental'
+ *  }
+ *  askQuestion( question, options ).then( suggestionsEventSource => {
+ *      // handle suggestionsEventSource
+ *  } );
+ */
+export default async function askQuestion(question, { postId = null, fromCache = false, feature, functions, model } = {}) {
+    debug('Asking question: %o. options: %o', question, {
+        postId,
+        fromCache,
+        feature,
+        functions,
+        model,
+    });
+    return new SuggestionsEventSource({
+        question,
+        options: { postId, feature, fromCache, functions, model },
+    });
+}

package/build/components/ai-control/index.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+/**
+ * Types
+ */
+import type { RequestingStateProp } from '../../types';
+/**
+ * AI Control component.
+ *
+ * @param {AIControlProps} props       - Component props.
+ * @param {React.MutableRefObject} ref - Ref to the component.
+ * @returns {React.ReactElement}         Rendered component.
+ */
+export declare function AIControl({ disabled, value, placeholder, showAccept, acceptLabel, showButtonLabels, isTransparent, state, showClearButton, showGuideLine, onChange, onSend, onStop, onAccept, }: {
+    disabled?: boolean;
+    value: string;
+    placeholder?: string;
+    showAccept?: boolean;
+    acceptLabel?: string;
+    showButtonLabels?: boolean;
+    isTransparent?: boolean;
+    state?: RequestingStateProp;
+    showClearButton?: boolean;
+    showGuideLine?: boolean;
+    onChange?: (newValue: string) => void;
+    onSend?: (currentValue: string) => void;
+    onStop?: () => void;
+    onAccept?: () => void;
+}, ref: React.MutableRefObject<null>): React.ReactElement;
+declare const _default: React.ForwardRefExoticComponent<{
+    disabled?: boolean;
+    value: string;
+    placeholder?: string;
+    showAccept?: boolean;
+    acceptLabel?: string;
+    showButtonLabels?: boolean;
+    isTransparent?: boolean;
+    state?: "init" | "requesting" | "suggesting" | "done" | "error";
+    showClearButton?: boolean;
+    showGuideLine?: boolean;
+    onChange?: (newValue: string) => void;
+    onSend?: (currentValue: string) => void;
+    onStop?: () => void;
+    onAccept?: () => void;
+} & React.RefAttributes<null>>;
+export default _default;

package/build/components/ai-control/index.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { PlainText } from '@wordpress/block-editor';
+import { Button } from '@wordpress/components';
+import { useKeyboardShortcut } from '@wordpress/compose';
+import { forwardRef, useImperativeHandle, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon, closeSmall, check, arrowUp } from '@wordpress/icons';
+import classNames from 'classnames';
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import AiStatusIndicator from '../ai-status-indicator';
+import { GuidelineMessage } from './message';
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => { };
+/**
+ * AI Control component.
+ *
+ * @param {AIControlProps} props       - Component props.
+ * @param {React.MutableRefObject} ref - Ref to the component.
+ * @returns {React.ReactElement}         Rendered component.
+ */
+export function AIControl({ disabled = false, value = '', placeholder = '', showAccept = false, acceptLabel = __('Accept', 'jetpack-ai-client'), showButtonLabels = true, isTransparent = false, state = 'init', showClearButton = true, showGuideLine = false, onChange = noop, onSend = noop, onStop = noop, onAccept = noop, }, ref // eslint-disable-line @typescript-eslint/ban-types
+) {
+    const promptUserInputRef = useRef(null);
+    const loading = state === 'requesting' || state === 'suggesting';
+    // Pass the ref to forwardRef.
+    useImperativeHandle(ref, () => promptUserInputRef.current);
+    useKeyboardShortcut('mod+enter', () => {
+        if (showAccept) {
+            onAccept?.();
+        }
+    }, {
+        target: promptUserInputRef,
+    });
+    useKeyboardShortcut('enter', e => {
+        e.preventDefault();
+        onSend?.(value);
+    }, {
+        target: promptUserInputRef,
+    });
+    const actionButtonClasses = classNames('jetpack-components-ai-control__controls-prompt_button', {
+        'has-label': showButtonLabels,
+    });
+    return (_jsxs("div", { className: "jetpack-components-ai-control__container", children: [_jsxs("div", { className: classNames('jetpack-components-ai-control__wrapper', {
+                    'is-transparent': isTransparent,
+                }), children: [_jsx(AiStatusIndicator, { state: state }), _jsx("div", { className: "jetpack-components-ai-control__input-wrapper", children: _jsx(PlainText, { value: value, onChange: onChange, placeholder: placeholder, className: "jetpack-components-ai-control__input", disabled: loading || disabled, ref: promptUserInputRef }) }), value?.length > 0 && showClearButton && (_jsx(Button, { icon: closeSmall, className: "jetpack-components-ai-control__clear", onClick: () => onChange('') })), _jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: !loading ? (_jsxs(Button, { className: actionButtonClasses, onClick: () => onSend?.(value), isSmall: true, disabled: !value?.length || disabled, label: __('Send request', 'jetpack-ai-client'), children: [_jsx(Icon, { icon: arrowUp }), showButtonLabels && __('Send', 'jetpack-ai-client')] })) : (_jsxs(Button, { className: actionButtonClasses, onClick: onStop, isSmall: true, label: __('Stop request', 'jetpack-ai-client'), children: [_jsx(Icon, { icon: closeSmall }), showButtonLabels && __('Stop (ESC)', 'jetpack-ai-client')] })) }), showAccept && (_jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: _jsxs(Button, { className: actionButtonClasses, onClick: onAccept, isSmall: true, label: acceptLabel, children: [_jsx(Icon, { icon: check }), showButtonLabels && acceptLabel] }) }))] }), showGuideLine && _jsx(GuidelineMessage, {})] }));
+}
+export default forwardRef(AIControl);

package/build/components/ai-control/message.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Types
+ */
+import type React from 'react';
+import './style.scss';
+export declare const MESSAGE_SEVERITY_WARNING = "warning";
+export declare const MESSAGE_SEVERITY_ERROR = "error";
+export declare const MESSAGE_SEVERITY_SUCCESS = "success";
+export declare const MESSAGE_SEVERITY_INFO = "info";
+declare const messageSeverityTypes: readonly ["warning", "error", "success", "info"];
+export type MessageSeverityProp = (typeof messageSeverityTypes)[number] | null;
+export type MessageProps = {
+    icon?: React.ReactNode;
+    children: React.ReactNode;
+    severity: MessageSeverityProp;
+};
+/**
+ * React component to render a block message.
+ *
+ * @param {MessageProps} props - Component props.
+ * @returns {React.ReactElement }    Banner component.
+ */
+export default function Message({ severity, icon, children, }: MessageProps): React.ReactElement;
+/**
+ * React component to render a guideline message.
+ *
+ * @returns {React.ReactElement } - Message component.
+ */
+export declare function GuidelineMessage(): React.ReactElement;
+export {};

package/build/components/ai-control/message.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { ExternalLink } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon, warning, info, cancelCircleFilled as error, check as success, } from '@wordpress/icons';
+import './style.scss';
+export const MESSAGE_SEVERITY_WARNING = 'warning';
+export const MESSAGE_SEVERITY_ERROR = 'error';
+export const MESSAGE_SEVERITY_SUCCESS = 'success';
+export const MESSAGE_SEVERITY_INFO = 'info';
+const messageSeverityTypes = [
+    MESSAGE_SEVERITY_WARNING,
+    MESSAGE_SEVERITY_ERROR,
+    MESSAGE_SEVERITY_SUCCESS,
+    MESSAGE_SEVERITY_INFO,
+];
+const messageIconsMap = {
+    [MESSAGE_SEVERITY_WARNING]: warning,
+    [MESSAGE_SEVERITY_ERROR]: error,
+    [MESSAGE_SEVERITY_SUCCESS]: success,
+    [MESSAGE_SEVERITY_INFO]: info,
+};
+/**
+ * React component to render a block message.
+ *
+ * @param {MessageProps} props - Component props.
+ * @returns {React.ReactElement }    Banner component.
+ */
+export default function Message({ severity = null, icon = null, children, }) {
+    return (_jsxs("div", { className: "jetpack-ai-assistant__message", children: [(severity || icon) && _jsx(Icon, { icon: messageIconsMap[severity] || icon }), _jsx("div", { className: "jetpack-ai-assistant__message-content", children: children })] }));
+}
+/**
+ * React component to render a guideline message.
+ *
+ * @returns {React.ReactElement } - Message component.
+ */
+export function GuidelineMessage() {
+    return (_jsx(Message, { severity: MESSAGE_SEVERITY_INFO, children: createInterpolateElement(__('AI-generated content could be inaccurate or biased. <link>Learn more</link>', 'jetpack-ai-client'), {
+            link: _jsx(ExternalLink, { href: "https://automattic.com/ai-guidelines" }),
+        }) }));
+}

package/build/components/ai-status-indicator/index.d.ts

@@ -0,0 +1,15 @@
+import type { RequestingStateProp } from '../../types';
+export type AiStatusIndicatorIconSize = 24 | 32 | 48 | 64;
+import type React from 'react';
+import './style.scss';
+export type AiStatusIndicatorProps = {
+    state?: RequestingStateProp;
+    size?: AiStatusIndicatorIconSize;
+};
+/**
+ * AiStatusIndicator component.
+ *
+ * @param {AiStatusIndicatorProps} props - component props.
+ * @returns {React.ReactElement} - rendered component.
+ */
+export default function AiStatusIndicator({ state, size, }: AiStatusIndicatorProps): React.ReactElement;

package/build/components/ai-status-indicator/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { Icon } from '@wordpress/components';
+import classNames from 'classnames';
+/*
+ * Internal dependencies
+ */
+import { aiAssistantIcon } from '../../icons';
+import './style.scss';
+/**
+ * AiStatusIndicator component.
+ *
+ * @param {AiStatusIndicatorProps} props - component props.
+ * @returns {React.ReactElement} - rendered component.
+ */
+export default function AiStatusIndicator({ state, size = 24, }) {
+    return (_jsx("div", { className: classNames('jetpack-ai-status-indicator__icon-wrapper', {
+            [`is-${state}`]: true,
+        }), children: _jsx(Icon, { icon: aiAssistantIcon, size: size }) }));
+}

package/build/components/audio-duration-display/index.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+type AudioDurationDisplayProps = {
+    url: string;
+};
+/**
+ * AudioDurationDisplay component.
+ *
+ * @param {AudioDurationDisplayProps} props - Component props.
+ * @returns {React.ReactElement}              Rendered component.
+ */
+export default function AudioDurationDisplay({ url, }: AudioDurationDisplayProps): React.ReactElement;
+export {};

package/build/components/audio-duration-display/index.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * External dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+/*
+ * Internal dependencies
+ */
+import { formatTime, getDuration } from './lib/media';
+/**
+ * AudioDurationDisplay component.
+ *
+ * @param {AudioDurationDisplayProps} props - Component props.
+ * @returns {React.ReactElement}              Rendered component.
+ */
+export default function AudioDurationDisplay({ url, }) {
+    const [duration, setDuration] = useState(0);
+    useEffect(() => {
+        if (!url) {
+            return;
+        }
+        getDuration(url).then(setDuration);
+    }, [url]);
+    return _jsx("span", { children: formatTime(duration, { addDecimalPart: false }) });
+}

package/build/components/audio-duration-display/lib/media.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Function to get duration of audio file
+ *
+ * @param {string} url - The url of the audio file
+ * @returns {Promise<number>} The duration of the audio file
+ * @see https://stackoverflow.com/questions/21522036/html-audio-tag-duration-always-infinity
+ */
+export declare function getDuration(url: string): Promise<number>;
+type FormatTimeOptions = {
+    /**
+     * Whether to add the decimal part to the formatted time.
+     *
+     */
+    addDecimalPart?: boolean;
+};
+/**
+ * Formats the given time in milliseconds into a string with the format HH:MM:SS.DD,
+ * adding hours and minutes only when needed.
+ *
+ * @param {number} time               - The time in seconds to format.
+ * @param {FormatTimeOptions} options - The arguments.
+ * @returns {string}                    The formatted time string.
+ * @example
+ * const formattedTime1 = formatTime( 1234567 );                       // Returns "20:34.56"
+ * const formattedTime2 = formatTime( 45123 );                         // Returns "45.12"
+ * const formattedTime3 = formatTime( 64, { addDecimalPart: false } ); // Returns "01:04"
+ */
+export declare function formatTime(time: number, { addDecimalPart }?: FormatTimeOptions): string;
+export {};

package/build/components/audio-duration-display/lib/media.js

@@ -0,0 +1,52 @@
+/**
+ * Function to get duration of audio file
+ *
+ * @param {string} url - The url of the audio file
+ * @returns {Promise<number>} The duration of the audio file
+ * @see https://stackoverflow.com/questions/21522036/html-audio-tag-duration-always-infinity
+ */
+export function getDuration(url) {
+    return new Promise(next => {
+        const tmpAudioInstance = new Audio(url);
+        tmpAudioInstance.addEventListener('durationchange', function () {
+            if (this.duration === Infinity) {
+                return;
+            }
+            const duration = this.duration;
+            tmpAudioInstance.remove(); // remove instance from memory
+            next(duration);
+        }, false);
+        tmpAudioInstance.load();
+        tmpAudioInstance.currentTime = 24 * 60 * 60; // Fake big time
+        tmpAudioInstance.volume = 0;
+        tmpAudioInstance.play(); // This will call `durationchange` event
+    });
+}
+/**
+ * Formats the given time in milliseconds into a string with the format HH:MM:SS.DD,
+ * adding hours and minutes only when needed.
+ *
+ * @param {number} time               - The time in seconds to format.
+ * @param {FormatTimeOptions} options - The arguments.
+ * @returns {string}                    The formatted time string.
+ * @example
+ * const formattedTime1 = formatTime( 1234567 );                       // Returns "20:34.56"
+ * const formattedTime2 = formatTime( 45123 );                         // Returns "45.12"
+ * const formattedTime3 = formatTime( 64, { addDecimalPart: false } ); // Returns "01:04"
+ */
+export function formatTime(time, { addDecimalPart = true } = {}) {
+    time = time * 1000;
+    const hours = Math.floor(time / 3600000);
+    const minutes = Math.floor(time / 60000) % 60;
+    const seconds = Math.floor(time / 1000) % 60;
+    const deciseconds = Math.floor(time / 10) % 100;
+    const parts = [
+        hours > 0 ? hours.toString().padStart(2, '0') + ':' : '',
+        hours > 0 || minutes > 0 ? minutes.toString().padStart(2, '0') + ':' : '',
+        seconds.toString().padStart(2, '0'),
+    ];
+    if (addDecimalPart) {
+        parts.push('.' + deciseconds.toString().padStart(2, '0'));
+    }
+    return parts.join('');
+}

package/build/components/index.d.ts

@@ -0,0 +1,4 @@
+export { default as AIControl } from './ai-control';
+export { default as AiStatusIndicator } from './ai-status-indicator';
+export { default as AudioDurationDisplay } from './audio-duration-display';
+export { GuidelineMessage } from './ai-control/message';

package/build/components/index.js

@@ -0,0 +1,4 @@
+export { default as AIControl } from './ai-control';
+export { default as AiStatusIndicator } from './ai-status-indicator';
+export { default as AudioDurationDisplay } from './audio-duration-display';
+export { GuidelineMessage } from './ai-control/message';

package/build/data-flow/context.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+/**
+ * Types & Constants
+ */
+import SuggestionsEventSource from '../suggestions-event-source';
+import type { AskQuestionOptionsArgProps } from '../ask-question';
+import type { RequestingErrorProps } from '../hooks/use-ai-suggestions';
+import type { PromptProp } from '../types';
+import type { RequestingStateProp } from '../types';
+export type AiDataContextProps = {
+    suggestion: string;
+    requestingError: RequestingErrorProps;
+    requestingState: RequestingStateProp;
+    requestSuggestion: (prompt: PromptProp, options?: AskQuestionOptionsArgProps) => void;
+    stopSuggestion: () => void;
+    eventSource: SuggestionsEventSource | null;
+};
+type AiDataContextProviderProps = {
+    value: AiDataContextProps;
+    children: React.ReactElement;
+};
+/**
+ * AI Data Context
+ *
+ * @returns {AiDataContextProps} Context.
+ */
+export declare const AiDataContext: React.Context<AiDataContextProps>;
+/**
+ * AI Data Context Provider
+ *
+ * @param {AiDataContextProviderProps} props - Component props.
+ * @returns {React.ReactElement}                           Context provider.
+ * @example
+ * <AiDataContextProvider value={ value }>
+ * 	{ children }
+ * </AiDataContextProvider>
+ */
+export declare const AiDataContextProvider: ({ value, children, }: AiDataContextProviderProps) => React.ReactElement;
+export {};

package/build/data-flow/context.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { createContext } from '@wordpress/element';
+/**
+ * AI Data Context
+ *
+ * @returns {AiDataContextProps} Context.
+ */
+export const AiDataContext = createContext({});
+/**
+ * AI Data Context Provider
+ *
+ * @param {AiDataContextProviderProps} props - Component props.
+ * @returns {React.ReactElement}                           Context provider.
+ * @example
+ * <AiDataContextProvider value={ value }>
+ * 	{ children }
+ * </AiDataContextProvider>
+ */
+export const AiDataContextProvider = ({ value, children, }) => (_jsx(AiDataContext.Provider, { value: value, children: children }));

package/build/data-flow/index.d.ts

@@ -0,0 +1,3 @@
+export { AiDataContext, AiDataContextProvider } from './context';
+export { default as withAiDataProvider } from './with-ai-assistant-data';
+export { default as useAiContext } from './use-ai-context';

package/build/data-flow/index.js

@@ -0,0 +1,3 @@
+export { AiDataContext, AiDataContextProvider } from './context';
+export { default as withAiDataProvider } from './with-ai-assistant-data';
+export { default as useAiContext } from './use-ai-context';

package/build/data-flow/use-ai-context.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import { RequestingErrorProps } from '../types';
+/**
+ * Types & constants
+ */
+import type { AiDataContextProps } from './context';
+import type { AskQuestionOptionsArgProps } from '../ask-question';
+export type UseAiContextOptions = {
+    askQuestionOptions?: AskQuestionOptionsArgProps;
+    onDone?: (content: string) => void;
+    onSuggestion?: (suggestion: string) => void;
+    onError?: (error: RequestingErrorProps) => void;
+};
+/**
+ * useAiContext hook to provide access to
+ * the AI Assistant data (from context),
+ * and to subscribe to the request events (onDone, onSuggestion).
+ *
+ * @param {UseAiContextOptions} options - the hook options.
+ * @returns {AiDataContextProps}          the AI Assistant data context.
+ */
+export default function useAiContext({ onDone, onSuggestion, onError, }?: UseAiContextOptions): AiDataContextProps;

package/build/data-flow/use-ai-context.js

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { useCallback, useContext, useEffect } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import { ERROR_RESPONSE } from '../types';
+import { AiDataContext } from '.';
+/**
+ * useAiContext hook to provide access to
+ * the AI Assistant data (from context),
+ * and to subscribe to the request events (onDone, onSuggestion).
+ *
+ * @param {UseAiContextOptions} options - the hook options.
+ * @returns {AiDataContextProps}          the AI Assistant data context.
+ */
+export default function useAiContext({ onDone, onSuggestion, onError, } = {}) {
+    const context = useContext(AiDataContext);
+    const { eventSource } = context;
+    const done = useCallback((event) => onDone?.(event?.detail), [onDone]);
+    const suggestion = useCallback((event) => onSuggestion?.(event?.detail), [onSuggestion]);
+    const error = useCallback((event) => {
+        onError?.(event?.detail);
+    }, []);
+    useEffect(() => {
+        if (!eventSource) {
+            return;
+        }
+        if (onDone) {
+            eventSource.addEventListener('done', done);
+        }
+        if (onSuggestion) {
+            eventSource.addEventListener('suggestion', suggestion);
+        }
+        if (onError) {
+            eventSource.addEventListener(ERROR_RESPONSE, error);
+        }
+        return () => {
+            eventSource.removeEventListener('done', done);
+            eventSource.removeEventListener('suggestion', suggestion);
+            eventSource.removeEventListener(ERROR_RESPONSE, error);
+        };
+    }, [eventSource]);
+    return context;
+}

package/build/data-flow/with-ai-assistant-data.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * High Order Component that provides the
+ * AI Assistant Data context to the wrapped component.
+ *
+ * @param {React.ReactElement} WrappedComponent - component to wrap.
+ * @returns {React.ReactElement}          		  Wrapped component, with the AI Assistant Data context.
+ */
+declare const withAiDataProvider: (Inner: React.ComponentType<{}>) => (props: any) => import("react/jsx-runtime").JSX.Element;
+export default withAiDataProvider;

package/build/data-flow/with-ai-assistant-data.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * External Dependencies
+ */
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useMemo } from '@wordpress/element';
+/**
+ * Internal Dependencies
+ */
+import useAiSuggestions from '../hooks/use-ai-suggestions';
+import { AiDataContextProvider } from '.';
+/**
+ * High Order Component that provides the
+ * AI Assistant Data context to the wrapped component.
+ *
+ * @param {React.ReactElement} WrappedComponent - component to wrap.
+ * @returns {React.ReactElement}          		  Wrapped component, with the AI Assistant Data context.
+ */
+const withAiDataProvider = createHigherOrderComponent((WrappedComponent) => {
+    return props => {
+        // Connect with the AI Assistant communication layer.
+        const { suggestion, error: requestingError, requestingState, request: requestSuggestion, stopSuggestion, eventSource, } = useAiSuggestions();
+        // Build the context value to pass to the ai assistant data provider.
+        const dataContextValue = useMemo(() => ({
+            suggestion,
+            requestingError,
+            requestingState,
+            eventSource,
+            requestSuggestion,
+            stopSuggestion,
+        }), [
+            suggestion,
+            requestingError,
+            requestingState,
+            eventSource,
+            requestSuggestion,
+            stopSuggestion,
+        ]);
+        return (_jsx(AiDataContextProvider, { value: dataContextValue, children: _jsx(WrappedComponent, { ...props }) }));
+    };
+}, 'withAiDataProvider');
+export default withAiDataProvider;