AI Assistant: Add disclaimer to image generation input (#40397)

* refactor from first proposal * change guideline links to jetpack redirect * add disclaimer to image modals * add AiModalFooter component * use AiModalFooter component on images modal * use AiModalFooter component on logo generator modal * changelog * remove arrow icon and use character instead
Automattic · Dec 4, 2024 · 4ce0e2b · 4ce0e2b
1 parent 60ece25
commit 4ce0e2b
Show file tree

Hide file tree

Showing 16 changed files with 188 additions and 77 deletions.
diff --git a/projects/js-packages/ai-client/changelog/update-jetpack-ai-image-generator-input-disclaimer b/projects/js-packages/ai-client/changelog/update-jetpack-ai-image-generator-input-disclaimer
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+AI Assistant: Add disclaimer to image generation modals
diff --git a/projects/js-packages/ai-client/src/components/ai-modal-footer/index.tsx b/projects/js-packages/ai-client/src/components/ai-modal-footer/index.tsx
@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon, info } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+/**
+ * Types
+ */
+import type React from 'react';
+
+type AiModalFooterProps = {
+	onGuidelinesClick?: () => void;
+	onFeedbackClick?: () => void;
+};
+
+/**
+ * AiModalFooter component.
+ *
+ * @param {AiModalFooterProps} props - component props.
+ * @return {React.ReactElement} - rendered component.
+ */
+export default function AiModalFooter( {
+	onGuidelinesClick,
+	onFeedbackClick,
+}: AiModalFooterProps ): React.ReactElement {
+	const handleGuidelinesClick = useCallback( () => {
+		onGuidelinesClick?.();
+	}, [ onGuidelinesClick ] );
+
+	const handleFeedbackClick = useCallback( () => {
+		onFeedbackClick?.();
+	}, [ onFeedbackClick ] );
+
+	return (
+		<>
+			<div className="ai-image-modal__footer-disclaimer">
+				<Icon icon={ info } />
+				<span>
+					{ __(
+						'Generated images could be inaccurate, biased or include text.',
+						'jetpack-ai-client'
+					) }
+				</span>
+				<Button
+					variant="link"
+					className="ai-image-modal__guidelines-button"
+					href="https://jetpack.com/redirect/?source=ai-guidelines"
+					target="_blank"
+					onClick={ handleGuidelinesClick }
+				>
+					<span>{ __( 'Guidelines', 'jetpack-ai-client' ) } ↗</span>
+				</Button>
+			</div>
+			<Button
+				variant="link"
+				className="ai-image-modal__feedback-button"
+				href="https://jetpack.com/redirect/?source=jetpack-ai-feedback"
+				target="_blank"
+				onClick={ handleFeedbackClick }
+			>
+				<span>{ __( 'Give feedback', 'jetpack-ai-client' ) } ↗</span>
+			</Button>
+		</>
+	);
+}
diff --git a/projects/js-packages/ai-client/src/components/ai-modal-footer/stories/index.stories.tsx b/projects/js-packages/ai-client/src/components/ai-modal-footer/stories/index.stories.tsx
@@ -0,0 +1,32 @@
+/*
+ * External Dependencies
+ */
+import { action } from '@storybook/addon-actions';
+import React from 'react';
+/*
+ * Internal Dependencies
+ */
+import AiModalFooter from '../index.js';
+
+export default {
+	title: 'JS Packages/AI Client/AiModalFooter',
+	component: AiModalFooter,
+	decorators: [
+		Story => (
+			<div style={ { display: 'flex', justifyContent: 'space-between' } }>
+				<Story />
+			</div>
+		),
+	],
+};
+
+const DefaultTemplate = () => {
+	return (
+		<AiModalFooter
+			onGuidelinesClick={ action( 'onGuidelinesClick' ) }
+			onFeedbackClick={ action( 'onFeedbackClick' ) }
+		/>
+	);
+};
+
+export const Default = DefaultTemplate.bind( {} );
diff --git a/projects/js-packages/ai-client/src/components/ai-modal-footer/style.scss b/projects/js-packages/ai-client/src/components/ai-modal-footer/style.scss
@@ -0,0 +1,15 @@
+.ai-image-modal__footer-disclaimer {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	color: var( --jp-gray-50 );
+	fill: var( --jp-gray-50 );
+
+	.components-button.is-link {
+		color: var( --jp-gray-50 );
+	}
+}
+
+.ai-image-modal__feedback-button.components-button.is-link {
+	text-decoration: none;
+}
diff --git a/projects/js-packages/ai-client/src/components/index.ts b/projects/js-packages/ai-client/src/components/index.ts
@@ -1,6 +1,7 @@
 export { AIControl, BlockAIControl, ExtensionAIControl } from './ai-control/index.js';
 export { default as AiStatusIndicator } from './ai-status-indicator/index.js';
 export { default as AudioDurationDisplay } from './audio-duration-display/index.js';
+export { default as AiModalFooter } from './ai-modal-footer/index.js';
 export {
 	GuidelineMessage,
 	UpgradeMessage,

diff --git a/projects/js-packages/ai-client/src/components/message/index.tsx b/projects/js-packages/ai-client/src/components/message/index.tsx
@@ -66,7 +66,7 @@ const messageIconsMap = {
  * React component to render a block message.
  *
  * @param {MessageProps} props - Component props.
- * @return {React.ReactElement }    Banner component.
+ * @return {React.ReactElement}    Banner component.
  */
 export default function Message( {
 	severity = MESSAGE_SEVERITY_INFO,
@@ -95,28 +95,39 @@ export default function Message( {
 	);
 }
 
+/**
+ * React component to render a learn more link.
+ *
+ * @return {React.ReactElement} - Learn more link component.
+ */
+function LearnMoreLink(): React.ReactElement {
+	return (
+		<ExternalLink href="https://jetpack.com/redirect/?source=ai-guidelines">
+			{ __( 'Learn more', 'jetpack-ai-client' ) }
+		</ExternalLink>
+	);
+}
+
 /**
  * React component to render a guideline message.
  *
- * @return {React.ReactElement } - Message component.
+ * @return {React.ReactElement} - Message component.
  */
 export function GuidelineMessage(): React.ReactElement {
 	return (
 		<Message>
 			<span>
 				{ __( 'AI-generated content could be inaccurate or biased.', 'jetpack-ai-client' ) }
 			</span>
-			<ExternalLink href="https://automattic.com/ai-guidelines">
-				{ __( 'Learn more', 'jetpack-ai-client' ) }
-			</ExternalLink>
+			<LearnMoreLink />
 		</Message>
 	);
 }
 
 /**
  * React component to render a fair usage limit message.
  *
- * @return {React.ReactElement } - Message component.
+ * @return {React.ReactElement} - Message component.
  */
 export function FairUsageLimitMessage(): React.ReactElement {
 	const message = __(
@@ -136,7 +147,7 @@ export function FairUsageLimitMessage(): React.ReactElement {
  * React component to render an upgrade message for free tier users
  *
  * @param {number} requestsRemaining - Number of requests remaining.
- * @return {React.ReactElement } - Message component.
+ * @return {React.ReactElement} - Message component.
  */
 export function UpgradeMessage( {
 	requestsRemaining,
@@ -175,7 +186,7 @@ export function UpgradeMessage( {
  * React component to render an error message
  *
  * @param {number} requestsRemaining - Number of requests remaining.
- * @return {React.ReactElement } - Message component.
+ * @return {React.ReactElement} - Message component.
  */
 export function ErrorMessage( {
 	error,

diff --git a/projects/js-packages/ai-client/src/logo-generator/components/generator-modal.scss b/projects/js-packages/ai-client/src/logo-generator/components/generator-modal.scss
@@ -18,19 +18,6 @@
 			height: 100%;
 		}
 	}
-
-	.components-button {
-		&:focus:not(:disabled):not(.is-primary) {
-			box-shadow: 0 0 0 2px var(--color-link, #3858e9);
-		}
-
-		&.is-link {
-			text-decoration: none;
-			&:not(:disabled) {
-				color: var(--color-link, #3858e9);
-			}
-		}
-	}
 }
 
 .jetpack-ai-logo-generator-modal__body {
@@ -52,17 +39,7 @@
 
 .jetpack-ai-logo-generator__footer {
 	display: flex;
-
-	.jetpack-ai-logo-generator__feedback-button {
-		display: flex;
-		gap: 4px;
-		align-items: center;
-		margin-top: 8px;
-
-		.icon {
-			color: var(--studio-gray-20);
-		}
-	}
+	justify-content: space-between;
 }
 
 .jetpack-ai-logo-generator-modal__notice-message-wrapper {

diff --git a/projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx b/projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx
@@ -5,13 +5,13 @@ import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { Modal, Button } from '@wordpress/components';
 import { useDispatch, select } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { external, Icon } from '@wordpress/icons';
 import clsx from 'clsx';
 import debugFactory from 'debug';
 import { useState, useEffect, useCallback, useRef } from 'react';
 /**
  * Internal dependencies
  */
+import AiModalFooter from '../../components/ai-modal-footer/index.js';
 import {
 	DEFAULT_LOGO_COST,
 	EVENT_MODAL_OPEN,
@@ -24,7 +24,6 @@ import useLogoGenerator from '../hooks/use-logo-generator.js';
 import useRequestErrors from '../hooks/use-request-errors.js';
 import { isLogoHistoryEmpty, clearDeletedMedia } from '../lib/logo-storage.js';
 import { STORE_NAME } from '../store/index.js';
-// import { FairUsageNotice } from './fair-usage-notice.js';
 import { FeatureFetchFailureScreen } from './feature-fetch-failure-screen.js';
 import { FirstLoadScreen } from './first-load-screen.js';
 import { HistoryCarousel } from './history-carousel.js';
@@ -303,16 +302,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 					<>
 						<HistoryCarousel />
 						<div className="jetpack-ai-logo-generator__footer">
-							<Button
-								variant="link"
-								className="jetpack-ai-logo-generator__feedback-button"
-								href="https://jetpack.com/redirect/?source=jetpack-ai-feedback"
-								target="_blank"
-								onClick={ handleFeedbackClick }
-							>
-								<span>{ __( 'Provide feedback', 'jetpack-ai-client' ) }</span>
-								<Icon icon={ external } className="icon" />
-							</Button>
+							<AiModalFooter onFeedbackClick={ handleFeedbackClick } />
 						</div>
 					</>
 				) }

diff --git a/projects/js-packages/ai-client/src/logo-generator/components/logo-presenter.scss b/projects/js-packages/ai-client/src/logo-generator/components/logo-presenter.scss
@@ -4,6 +4,20 @@
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
+
+	.components-button {
+		&:focus:not(:disabled):not(.is-primary) {
+			box-shadow: 0 0 0 2px var(--color-link, #3858e9);
+		}
+
+		&.is-link {
+			text-decoration: none;
+
+			&:not(:disabled) {
+				color: var(--color-link, #3858e9);
+			}
+		}
+	}
 }
 
 .jetpack-ai-logo-generator-modal-presenter {

diff --git a/projects/js-packages/ai-client/src/logo-generator/components/prompt.scss b/projects/js-packages/ai-client/src/logo-generator/components/prompt.scss
@@ -5,6 +5,20 @@
 	flex-direction: column;
 	gap: 8px;
 	font-size: var(--font-body-small);
+
+	.components-button {
+		&:focus:not(:disabled):not(.is-primary) {
+			box-shadow: 0 0 0 2px var(--color-link, #3858e9);
+		}
+
+		&.is-link {
+			text-decoration: none;
+
+			&:not(:disabled) {
+				color: var(--color-link, #3858e9);
+			}
+		}
+	}
 }
 
 .jetpack-ai-logo-generator__prompt-header {
@@ -30,7 +44,7 @@
 	}
 }
 
-.jetpack-ai-logo-generator__prompt-query {
+.jetpack-ai-image-generator__prompt-query {
 	display: flex;
 	padding: 8px 8px 8px var(--grid-unit-15, 16px);
 	justify-content: space-between;

diff --git a/projects/js-packages/ai-client/src/logo-generator/components/prompt.tsx b/projects/js-packages/ai-client/src/logo-generator/components/prompt.tsx
@@ -104,7 +104,7 @@ export const AiModalPromptInput = ( {
 	};
 
 	return (
-		<div className="jetpack-ai-logo-generator__prompt-query">
+		<div className="jetpack-ai-image-generator__prompt-query">
 			<div
 				role="textbox"
 				tabIndex={ 0 }
@@ -121,7 +121,7 @@ export const AiModalPromptInput = ( {
 			></div>
 			<Button
 				variant="primary"
-				className="jetpack-ai-logo-generator__prompt-submit"
+				className="jetpack-ai-image-generator__prompt-submit"
 				onClick={ generateHandler }
 				disabled={ actionDisabled }
 			>

diff --git a/projects/plugins/jetpack/changelog/update-jetpack-ai-image-generator-input-disclaimer b/projects/plugins/jetpack/changelog/update-jetpack-ai-image-generator-input-disclaimer
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+AI Assistant: Add disclaimer to image generation modals
diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/message/block-message.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/message/block-message.tsx
@@ -73,7 +73,7 @@ export default function BlockMessage( props: BlockMessageProps ): React.ReactEle
 					'jetpack'
 				),
 				{
-					link: <ExternalLink href="https://automattic.com/ai-guidelines" />,
+					link: <ExternalLink href="https://jetpack.com/redirect/?source=ai-guidelines" />,
 				}
 			);
 			break;

diff --git a/...k/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx b/...k/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx
@@ -147,7 +147,7 @@ const JetpackAndSettingsContent = ( {
 			</PanelRow>
 
 			<PanelRow>
-				<ExternalLink href="https://automattic.com/ai-guidelines">
+				<ExternalLink href="https://jetpack.com/redirect/?source=ai-guidelines">
 					{ __( 'AI Guidelines', 'jetpack' ) }
 				</ExternalLink>
 			</PanelRow>
-Original file line number
+Diff line change
@@ Expand Up @@
     					'jetpack'
     				),
     				{
-    					link: <ExternalLink href="https://automattic.com/ai-guidelines" />,
+    					link: <ExternalLink href="https://jetpack.com/redirect/?source=ai-guidelines" />,
     				}
     			);
     			break;
@@ Expand Down @@