@automattic/jetpack-ai-client 0.1.2 → 0.1.4

package/CHANGELOG.md

@@ -5,15 +5,43 @@ 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.1.4] - 2023-08-14
+### Added
+- AI Client: Add border-box in AIControl. [#32419]
+- AI Client: Export AiStatusIndicator. [#32397]
+- AI Client: Import base styles in the AI status indicator component. [#32396]
+- AI Control: Forward ref to consumer. [#32400]
+- AI Control: Import jetpack-base-styles. [#32376]
+
+### Changed
+- AI Client: Expose stopSuggestion function on useAiSuggestions hook so the consumer can stop a suggestion in the middle. [#32382]
+
+### Removed
+- AI Client: Remove redundant switch case [#32405]
+
+## [0.1.3] - 2023-08-09
+### Added
+- AI Client: Introduce disabled prop in AI Control. [#32326]
+- AI Control: Add guideline message. [#32358]
+
+### Changed
+- AI Client: handle token fetching errors by dispatching an event from the SuggestionsEventSource class. [#32350]
+- AI Client: tweak layout and styles to make AI Control mobile friendly. [#32362]
+- AI Control: clean up props. [#32360]
+- Updated package dependencies. [#32166]
+
+### Fixed
+- AI Client: fix TS type definition issue [#32330]
+
 ## [0.1.2] - 2023-08-07
 ### Added
-- AI Assistant: add options parameter to request function on useAiSuggestions hook [#32198]
+- AI Assistant: Add options parameter to request function on useAiSuggestions hook [#32198]
 - AI Client: add @wordpress/compose dependency [#32228]
-- AI Client: add clear button in AI Control component [#32274]
-- AI Client: add keyboard shortcut to AIControl [#32239]
+- AI Client: Add clear button in AI Control component [#32274]
+- AI Client: Add keyboard shortcut to AIControl [#32239]
 - AI Client: add onError() response support [#32223]
-- AI Client: export types [#32209]
-- AI Client: start supporting request options on requestSuggestion callback. [#32303]
+- AI Client: Export types [#32209]
+- AI Client: Start supporting request options on requestSuggestion callback. [#32303]
 - AI Control: introduce AiStatusIndicator component [#32258]
 
 ### Changed
@@ -54,5 +82,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.1.4]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.3...v0.1.4
+[0.1.3]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.2...v0.1.3
 [0.1.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.1...v0.1.2
 [0.1.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.0...v0.1.1

package/index.ts

@@ -18,7 +18,7 @@ export * from './src/icons';
 /*
  * Components
  */
-export { default as AIControl } from './src/components/ai-control';
+export * from './src/components';
 
 /*
  * Contexts

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.1.2",
+	"version": "0.1.4",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -32,17 +32,18 @@
 		".": "./index.ts"
 	},
 	"dependencies": {
+		"@automattic/jetpack-base-styles": "^0.6.5",
 		"@automattic/jetpack-connection": "workspace:*",
-		"@automattic/jetpack-shared-extension-utils": "^0.11.0",
+		"@automattic/jetpack-shared-extension-utils": "^0.11.1",
 		"@microsoft/fetch-event-source": "2.0.1",
-		"@wordpress/api-fetch": "6.34.0",
-		"@wordpress/block-editor": "12.5.0",
-		"@wordpress/components": "25.3.0",
-		"@wordpress/compose": "6.14.0",
-		"@wordpress/data": "9.7.0",
-		"@wordpress/element": "5.14.0",
-		"@wordpress/i18n": "4.37.0",
-		"@wordpress/icons": "9.28.0",
+		"@wordpress/api-fetch": "6.35.0",
+		"@wordpress/block-editor": "12.6.0",
+		"@wordpress/components": "25.4.0",
+		"@wordpress/compose": "6.15.0",
+		"@wordpress/data": "9.8.0",
+		"@wordpress/element": "5.15.0",
+		"@wordpress/i18n": "4.38.0",
+		"@wordpress/icons": "9.29.0",
 		"classnames": "2.3.2",
 		"debug": "4.3.4",
 		"react": "18.2.0",

package/src/ask-question/index.ts

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import debugFactory from 'debug';
-import requestJwt from '../jwt';
 import SuggestionsEventSource from '../suggestions-event-source';
 /*
  * Types & constants
@@ -62,11 +61,8 @@ export default async function askQuestion(
 ): Promise< SuggestionsEventSource > {
 	debug( 'Asking question: %o. options: %o', question, { postId, fromCache, feature, functions } );
 
-	const { token } = await requestJwt();
-
 	return new SuggestionsEventSource( {
 		question,
-		token,
 		options: { postId, feature, fromCache, functions },
 	} );
 }

package/src/components/ai-control/Readme.md

@@ -2,14 +2,14 @@
 
 #### Properties
 
-- `loading` (**boolean**) (Optional): Determines the loading state. Default value is `false`.
+- `disabled` (**boolean**) (Optional): Disables the ai control. Default value is `false`.
 - `value` (**string**): Current input value. Default value is `''`.
 - `placeholder` (**string**) (Optional): Placeholder text for the input field. Default value is `''`.
 - `showAccept` (**boolean**) (Optional): Determines if the accept button is shown. Default value is `false`.
 - `acceptLabel` (**string**) (Optional): Label text for the accept button. Default value is `'Accept'`.
 - `showButtonsLabel` (**boolean**) (Optional): Determines if button labels are shown. Default value is `true`.
 - `isOpaque` (**boolean**) (Optional): Controls the opacity of the component. Default value is `false`.
-- `requestingState` (**RequestingStateProp**) (Optional): Determines the state of the request. Default value is `'init'`.
+- `state` (**RequestingStateProp**) (Optional): Determines the state of the component. Default value is `'init'`.
 - `onChange` (**Function**) (Optional): Handler for input change. Default action is no operation.
 - `onSend` (**Function**) (Optional): Handler to send a request. Default action is no operation.
 - `onStop` (**Function**) (Optional): Handler to stop a request. Default action is no operation.

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

@@ -4,15 +4,17 @@
 import { PlainText } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import { useKeyboardShortcut } from '@wordpress/compose';
-import { useRef } from '@wordpress/element';
+import { forwardRef, useImperativeHandle, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, closeSmall, check, arrowUp } from '@wordpress/icons';
 import classNames from 'classnames';
+import React from 'react';
 /**
  * Internal dependencies
  */
 import './style.scss';
 import AiStatusIndicator from '../ai-status-indicator';
+import { GuidelineMessage } from './message';
 /**
  * Types
  */
@@ -25,48 +27,57 @@ const noop = () => {};
  * AI Control component.
  *
  * @param {object} props - component props
- * @param {boolean} props.loading - loading state
+ * @param {boolean} props.disabled - is disabled
  * @param {string} props.value - input value
  * @param {string} props.placeholder - input placeholder
  * @param {boolean} props.showAccept - show accept button
  * @param {string} props.acceptLabel - accept button label
  * @param {boolean} props.showButtonsLabel - show buttons label
  * @param {boolean} props.isOpaque - is opaque
+ * @param {string} props.state - requesting state
  * @param {Function} props.onChange - input change handler
  * @param {Function} props.onSend - send request handler
  * @param {Function} props.onStop - stop request handler
  * @param {Function} props.onAccept - accept handler
- * @param {string} props.requestingState - requesting state
+ * @param {object} ref - Auto injected ref from react
  * @returns {object} - AI Control component
  */
-export default function AIControl( {
-	loading = false,
-	value = '',
-	placeholder = '',
-	showAccept = false,
-	acceptLabel = __( 'Accept', 'jetpack-ai-client' ),
-	showButtonsLabel = true,
-	isOpaque = false,
-	requestingState = 'init',
-	onChange = noop,
-	onSend = noop,
-	onStop = noop,
-	onAccept = noop,
-}: {
-	loading?: boolean;
-	value: string;
-	placeholder?: string;
-	showAccept?: boolean;
-	acceptLabel?: string;
-	showButtonsLabel?: boolean;
-	isOpaque?: boolean;
-	requestingState?: RequestingStateProp;
-	onChange?: ( newValue: string ) => void;
-	onSend?: ( currentValue: string ) => void;
-	onStop?: () => void;
-	onAccept?: () => void;
-} ) {
+export function AIControl(
+	{
+		disabled = false,
+		value = '',
+		placeholder = '',
+		showAccept = false,
+		acceptLabel = __( 'Accept', 'jetpack-ai-client' ),
+		showButtonsLabel = true,
+		isOpaque = false,
+		state = 'init',
+		onChange = noop,
+		onSend = noop,
+		onStop = noop,
+		onAccept = noop,
+	}: {
+		disabled?: boolean;
+		value: string;
+		placeholder?: string;
+		showAccept?: boolean;
+		acceptLabel?: string;
+		showButtonsLabel?: boolean;
+		isOpaque?: boolean;
+		state?: RequestingStateProp;
+		onChange?: ( newValue: string ) => void;
+		onSend?: ( currentValue: string ) => void;
+		onStop?: () => void;
+		onAccept?: () => void;
+	},
+	ref
+) {
 	const promptUserInputRef = useRef( null );
+	const loading = state === 'requesting' || state === 'suggesting';
+	const showGuideLine = ! ( loading || disabled || value?.length || isOpaque );
+
+	// Pass the ref to forwardRef.
+	useImperativeHandle( ref, () => promptUserInputRef.current );
 
 	useKeyboardShortcut(
 		'mod+enter',
@@ -91,6 +102,10 @@ export default function AIControl( {
 		}
 	);
 
+	const actionButtonClasses = classNames( 'jetpack-components-ai-control__controls-prompt_button', {
+		'has-label': showButtonsLabel,
+	} );
+
 	return (
 		<div className="jetpack-components-ai-control__container">
 			<div
@@ -98,7 +113,7 @@ export default function AIControl( {
 					'is-opaque': isOpaque,
 				} ) }
 			>
-				<AiStatusIndicator state={ requestingState } />
+				<AiStatusIndicator state={ state } />
 
 				<div className="jetpack-components-ai-control__input-wrapper">
 					<PlainText
@@ -106,60 +121,61 @@ export default function AIControl( {
 						onChange={ onChange }
 						placeholder={ placeholder }
 						className="jetpack-components-ai-control__input"
-						disabled={ loading }
+						disabled={ loading || disabled }
 						ref={ promptUserInputRef }
 					/>
+				</div>
+
+				{ value?.length > 0 && (
+					<Button
+						icon={ closeSmall }
+						className="jetpack-components-ai-control__clear"
+						onClick={ () => onChange( '' ) }
+					/>
+				) }
 
-					{ value?.length > 0 && (
-						<Icon
-							icon={ closeSmall }
-							className="jetpack-components-ai-control__clear"
-							onClick={ () => onChange( '' ) }
-						/>
+				<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
+					{ ! loading ? (
+						<Button
+							className={ actionButtonClasses }
+							onClick={ () => onSend( value ) }
+							isSmall={ true }
+							disabled={ ! value?.length || disabled }
+							label={ __( 'Send request', 'jetpack-ai-client' ) }
+						>
+							<Icon icon={ arrowUp } />
+							{ showButtonsLabel && __( 'Send', 'jetpack-ai-client' ) }
+						</Button>
+					) : (
+						<Button
+							className={ actionButtonClasses }
+							onClick={ onStop }
+							isSmall={ true }
+							label={ __( 'Stop request', 'jetpack-ai-client' ) }
+						>
+							<Icon icon={ closeSmall } />
+							{ showButtonsLabel && __( 'Stop', 'jetpack-ai-client' ) }
+						</Button>
 					) }
 				</div>
 
-				<div className="jetpack-components-ai-control__controls">
+				{ showAccept && (
 					<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
-						{ ! loading ? (
-							<Button
-								className="jetpack-components-ai-control__controls-prompt_button"
-								onClick={ () => onSend( value ) }
-								isSmall={ true }
-								disabled={ ! value?.length }
-								label={ __( 'Send request', 'jetpack-ai-client' ) }
-							>
-								<Icon icon={ arrowUp } />
-								{ showButtonsLabel && __( 'Send', 'jetpack-ai-client' ) }
-							</Button>
-						) : (
-							<Button
-								className="jetpack-components-ai-control__controls-prompt_button"
-								onClick={ onStop }
-								isSmall={ true }
-								label={ __( 'Stop request', 'jetpack-ai-client' ) }
-							>
-								<Icon icon={ closeSmall } />
-								{ showButtonsLabel && __( 'Stop', 'jetpack-ai-client' ) }
-							</Button>
-						) }
+						<Button
+							className={ actionButtonClasses }
+							onClick={ onAccept }
+							isSmall={ true }
+							label={ acceptLabel }
+						>
+							<Icon icon={ check } />
+							{ showButtonsLabel && acceptLabel }
+						</Button>
 					</div>
-
-					{ showAccept && (
-						<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
-							<Button
-								className="jetpack-components-ai-control__controls-prompt_button"
-								onClick={ onAccept }
-								isSmall={ true }
-								label={ acceptLabel }
-							>
-								<Icon icon={ check } />
-								{ acceptLabel }
-							</Button>
-						</div>
-					) }
-				</div>
+				) }
 			</div>
+			{ showGuideLine && <GuidelineMessage /> }
 		</div>
 	);
 }
+
+export default forwardRef( AIControl );

package/src/components/ai-control/message.tsx

@@ -0,0 +1,86 @@
+/**
+ * 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';
+/**
+ * Types
+ */
+import type React from 'react';
+
+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,
+] as const;
+
+export type MessageSeverityProp = ( typeof messageSeverityTypes )[ number ] | null;
+
+export type MessageProps = {
+	icon?: React.ReactNode;
+	children: React.ReactNode;
+	severity: MessageSeverityProp;
+};
+
+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,
+}: MessageProps ): React.ReactElement {
+	return (
+		<div className="jetpack-ai-assistant__message">
+			{ ( severity || icon ) && <Icon icon={ messageIconsMap[ severity ] || icon } /> }
+			<div className="jetpack-ai-assistant__message-content">{ children }</div>
+		</div>
+	);
+}
+
+/**
+ * React component to render a guideline message.
+ *
+ * @returns {React.ReactElement } - Message component.
+ */
+export function GuidelineMessage(): React.ReactElement {
+	return (
+		<Message severity={ MESSAGE_SEVERITY_INFO }>
+			{ createInterpolateElement(
+				__(
+					'AI-generated content could be inaccurate or biased. <link>Learn more</link>',
+					'jetpack-ai-client'
+				),
+				{
+					link: <ExternalLink href="https://automattic.com/ai-guidelines" />,
+				}
+			) }
+		</Message>
+	);
+}

package/src/components/ai-control/style.scss

@@ -1,3 +1,7 @@
+@import '@automattic/jetpack-base-styles/root-variables';
+
+// AI CONTROL
+
 .jetpack-components-ai-control__container {
 	color: var( --jp-gray-80 );
 	background-color: var( --jp-white );
@@ -11,6 +15,7 @@
 	padding: 12px 14px;
 	gap: 8px;
 	align-items: center;
+	box-sizing: border-box;
 
 	&.is-opaque {
 		opacity: 0.4;
@@ -23,26 +28,11 @@
 	flex-grow: 1;
 	width: 100%;
 
-	.jetpack-components-ai-control__clear {
-		position: absolute;
-		right: 8px;
-		top: calc( 50% - 12px );
-		border-radius: 50%;
-		background-color: black;
-		opacity: 0.2;
-		fill: white;
-		cursor: pointer;
-
-		&:hover {
-			opacity: 0.4;
-		}
-	}
-
 	textarea.jetpack-components-ai-control__input {
 		width: 100%;
 		min-height: 20px;
 		border-radius: 2px;
-		padding: 6px 38px 6px 8px;
+		padding: 6px 8px;
 
 		resize: none !important;
 		border: none;
@@ -72,6 +62,21 @@
 	}
 }
 
+.jetpack-components-ai-control__clear.components-button.has-icon {
+	width: 24px;
+	min-width: 24px;
+	height: 24px;
+	padding: 0;
+	border-radius: 50%;
+	background-color: black;
+	opacity: 0.2;
+	color: white;
+
+	&:hover {
+		opacity: 0.4;
+	}
+}
+
 .jetpack-components-ai-controlton__icon {
 	flex-shrink: 0;
 	display: flex;
@@ -94,11 +99,6 @@
 	}
 }
 
-.jetpack-components-ai-control__controls {
-	display: flex;
-	align-items: center;
-}
-
 .jetpack-components-ai-control__controls-prompt_button_wrapper {
 	text-transform: uppercase;
 	font-size: 11px;
@@ -108,16 +108,16 @@
 	white-space: nowrap;
 	display: flex;
 	align-items: center;
+
+	.components-button.is-small:not(.has-label) {
+		padding: 0;
+	}
 }
 
 .jetpack-components-ai-control__controls-prompt_button {
 	color: var( --jp-gray-80 );
 	text-transform: uppercase;
 
-	> SVG {
-		margin-right: 4px;
-	}
-
 	&:hover,
 	&:active {
 		color: var( --wp-components-color-accent, var( --wp-admin-theme-color ) );
@@ -127,4 +127,30 @@
 		opacity: 0.6;
 		cursor: not-allowed;
 	}
-}
+}
+
+// MESSAGE
+
+.jetpack-ai-assistant__message {
+	display: flex;
+    line-height: 28px;
+    font-size: 12px;
+    align-self: center;
+    align-items: center;
+    background-color: var( --jp-white-off );
+    padding: 0 12px;
+
+    > svg {
+        fill: var( --jp-gray-40 );
+    }
+
+    .jetpack-ai-assistant__message-content {
+        flex-grow: 2;
+        margin: 0 8px;
+        color: var( --jp-gray-70 );
+
+        .components-external-link {
+            color: var( --jp-gray-50 );
+        }
+    }
+}

package/src/components/ai-status-indicator/style.scss

@@ -1,3 +1,5 @@
+@import '@automattic/jetpack-base-styles/style';
+
 .jetpack-ai-status-indicator__icon-wrapper {
 	color: var( --jp-green-60 );
 	height: 24px;

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export { default as AIControl } from './ai-control';
+export { default as AiStatusIndicator } from './ai-status-indicator';

package/src/data-flow/context.tsx

@@ -33,6 +33,11 @@ export type AiDataContextProps = {
 	 */
 	requestSuggestion: ( prompt: PromptProp, options?: AskQuestionOptionsArgProps ) => void;
 
+	/*
+	 * Stop suggestion function
+	 */
+	stopSuggestion: () => void;
+
 	/*
 	 * The Suggestions Event Source instance
 	 */

package/src/data-flow/use-ai-context.ts

@@ -5,7 +5,7 @@ import { useCallback, useContext, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { ERROR_RESPONSE } from '../types';
+import { ERROR_RESPONSE, RequestingErrorProps } from '../types';
 import { AiDataContext } from '.';
 /**
  * Types & constants
@@ -32,7 +32,7 @@ export type UseAiContextOptions = {
 	/*
 	 * onError callback.
 	 */
-	onError?: ( error: Error ) => void;
+	onError?: ( error: RequestingErrorProps ) => void;
 };
 
 /**

package/src/data-flow/with-ai-assistant-data.tsx

@@ -25,6 +25,7 @@ const withAiDataProvider = createHigherOrderComponent( ( WrappedComponent: React
 			error: requestingError,
 			requestingState,
 			request: requestSuggestion,
+			stopSuggestion,
 			eventSource,
 		} = useAiSuggestions();
 
@@ -37,8 +38,16 @@ const withAiDataProvider = createHigherOrderComponent( ( WrappedComponent: React
 				eventSource,
 
 				requestSuggestion,
+				stopSuggestion,
 			} ),
-			[ suggestion, requestingError, requestingState, eventSource, requestSuggestion ]
+			[
+				suggestion,
+				requestingError,
+				requestingState,
+				eventSource,
+				requestSuggestion,
+				stopSuggestion,
+			]
 		);
 
 		return (

package/src/hooks/use-ai-suggestions/index.ts

@@ -97,6 +97,11 @@ type useAiSuggestionsProps = {
 	 * The request handler.
 	 */
 	request: ( prompt: PromptProp, options?: AskQuestionOptionsArgProps ) => Promise< void >;
+
+	/*
+	 * The handler to stop a suggestion.
+	 */
+	stopSuggestion: () => void;
 };
 
 const debug = debugFactory( 'jetpack-ai-client:use-suggestion' );
@@ -140,14 +145,6 @@ export function getErrorData( errorCode: SuggestionErrorCode ): RequestingErrorP
 				severity: 'info',
 			};
 		case ERROR_NETWORK:
-			return {
-				code: ERROR_NETWORK,
-				message: __(
-					'It was not possible to process your request. Mind trying again?',
-					'jetpack-ai-client'
-				),
-				severity: 'info',
-			};
 		default:
 			return {
 				code: ERROR_NETWORK,
@@ -234,7 +231,7 @@ export default function useAiSuggestions( {
 
 	const handleModerationError = useCallback( () => handleError( ERROR_MODERATION ), [] );
 
-	const handleNetwotkError = useCallback( () => handleError( ERROR_NETWORK ), [] );
+	const handleNetworkError = useCallback( () => handleError( ERROR_NETWORK ), [] );
 
 	/**
 	 * Request handler.
@@ -278,7 +275,7 @@ export default function useAiSuggestions( {
 				eventSource.addEventListener( ERROR_UNCLEAR_PROMPT, handleUnclearPromptError );
 				eventSource.addEventListener( ERROR_SERVICE_UNAVAILABLE, handleServiceUnavailableError );
 				eventSource.addEventListener( ERROR_MODERATION, handleModerationError );
-				eventSource.addEventListener( ERROR_NETWORK, handleNetwotkError );
+				eventSource.addEventListener( ERROR_NETWORK, handleNetworkError );
 
 				eventSource.addEventListener( 'done', handleDone );
 			} catch ( e ) {
@@ -292,11 +289,51 @@ export default function useAiSuggestions( {
 			handleUnclearPromptError,
 			handleServiceUnavailableError,
 			handleModerationError,
-			handleNetwotkError,
+			handleNetworkError,
 			handleSuggestion,
 		]
 	);
 
+	/**
+	 * Stop suggestion handler.
+	 *
+	 * @returns {void}
+	 */
+	const stopSuggestion = useCallback( () => {
+		if ( ! eventSourceRef?.current ) {
+			return;
+		}
+
+		// Alias
+		const eventSource = eventSourceRef?.current;
+
+		// Close the connection.
+		eventSource.close();
+
+		// Clean up the event listeners.
+		eventSource.removeEventListener( 'suggestion', handleSuggestion );
+
+		eventSource.removeEventListener( ERROR_QUOTA_EXCEEDED, handleErrorQuotaExceededError );
+		eventSource.removeEventListener( ERROR_UNCLEAR_PROMPT, handleUnclearPromptError );
+		eventSource.removeEventListener( ERROR_SERVICE_UNAVAILABLE, handleServiceUnavailableError );
+		eventSource.removeEventListener( ERROR_MODERATION, handleModerationError );
+		eventSource.removeEventListener( ERROR_NETWORK, handleNetworkError );
+
+		eventSource.removeEventListener( 'done', handleDone );
+
+		// Set requesting state to done since the suggestion stopped.
+		setRequestingState( 'done' );
+	}, [
+		eventSourceRef,
+		handleSuggestion,
+		handleErrorQuotaExceededError,
+		handleUnclearPromptError,
+		handleServiceUnavailableError,
+		handleModerationError,
+		handleNetworkError,
+		handleDone,
+	] );
+
 	// Request suggestions automatically when ready.
 	useEffect( () => {
 		// Check if there is a prompt to request.
@@ -310,38 +347,10 @@ export default function useAiSuggestions( {
 		}
 
 		return () => {
-			if ( ! eventSourceRef?.current ) {
-				return;
-			}
-
-			// Alias
-			const eventSource = eventSourceRef.current;
-
-			// Close the connection.
-			eventSource.close();
-
-			// Clean up the event listeners.
-			eventSource.removeEventListener( 'suggestion', handleSuggestion );
-
-			eventSource.removeEventListener( ERROR_QUOTA_EXCEEDED, handleErrorQuotaExceededError );
-			eventSource.removeEventListener( ERROR_UNCLEAR_PROMPT, handleUnclearPromptError );
-			eventSource.removeEventListener( ERROR_SERVICE_UNAVAILABLE, handleServiceUnavailableError );
-			eventSource.removeEventListener( ERROR_MODERATION, handleModerationError );
-			eventSource.removeEventListener( ERROR_NETWORK, handleNetwotkError );
-
-			eventSource.removeEventListener( 'done', handleDone );
+			// Stop the suggestion if the component unmounts.
+			stopSuggestion();
 		};
-	}, [
-		autoRequest,
-		handleDone,
-		handleErrorQuotaExceededError,
-		handleModerationError,
-		handleServiceUnavailableError,
-		handleSuggestion,
-		handleUnclearPromptError,
-		prompt,
-		request,
-	] );
+	}, [ autoRequest, prompt, request, stopSuggestion ] );
 
 	return {
 		// Data
@@ -349,8 +358,9 @@ export default function useAiSuggestions( {
 		error,
 		requestingState,
 
-		// Request handler
+		// Request/stop handlers
 		request,
+		stopSuggestion,
 
 		// SuggestionsEventSource
 		eventSource: eventSourceRef.current,

package/src/suggestions-event-source/index.ts

@@ -3,10 +3,14 @@
  */
 import { EventSourceMessage, fetchEventSource } from '@microsoft/fetch-event-source';
 import debugFactory from 'debug';
+/**
+ * Internal dependencies
+ */
+import { getErrorData } from '../hooks/use-ai-suggestions';
+import requestJwt from '../jwt';
 /*
  * Types & constants
  */
-import { getErrorData } from '../hooks/use-ai-suggestions';
 import {
 	ERROR_MODERATION,
 	ERROR_NETWORK,
@@ -20,7 +24,7 @@ import type { PromptMessagesProp, PromptProp, SuggestionErrorCode } from '../typ
 type SuggestionsEventSourceConstructorArgs = {
 	url?: string;
 	question: PromptProp;
-	token: string;
+	token?: string;
 	options?: {
 		postId?: number;
 		feature?: 'ai-assistant-experimental' | string | undefined;
@@ -81,6 +85,18 @@ export default class SuggestionsEventSource extends EventTarget {
 		token,
 		options = {},
 	}: SuggestionsEventSourceConstructorArgs ) {
+		// If the token is not provided, try to get one
+		if ( ! token ) {
+			try {
+				debug( 'Token was not provided, requesting one...' );
+				token = ( await requestJwt() ).token;
+			} catch ( err ) {
+				this.processErrorEvent( err );
+
+				return;
+			}
+		}
+
 		const bodyData: {
 			post_id?: number;
 			messages?: PromptMessagesProp;