Add helper text to Classification, Moderation & term cleanup screen

src/js/settings/components/feature-additional-settings/nlu-feature.js

@@ -6,6 +6,7 @@ import {
 	CheckboxControl,
 	SelectControl,
 	__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -14,7 +15,8 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
-import { getFeature } from '../../utils/utils';
+import { getFeature, TooltipPopover } from '../../utils/utils';
+import { thresholdInfo, nluHelperText } from '../../utils/helper-text';
 
 /**
  * Component for render settings fields when IBM Watson NLU is selected as the provider.
@@ -36,18 +38,22 @@ export const NLUFeatureSettings = () => {
 		category: {
 			label: __( 'Category', 'classifai' ),
 			defaultThreshold: 70,
+			helperText: nluHelperText.category,
 		},
 		keyword: {
 			label: __( 'Keyword', 'classifai' ),
 			defaultThreshold: 70,
+			helperText: nluHelperText.keyword,
 		},
 		entity: {
 			label: __( 'Entity', 'classifai' ),
 			defaultThreshold: 70,
+			helperText: nluHelperText.entity,
 		},
 		concept: {
 			label: __( 'Concept', 'classifai' ),
 			defaultThreshold: 70,
+			helperText: nluHelperText.concept,
 		},
 	};
 
@@ -94,12 +100,14 @@ export const NLUFeatureSettings = () => {
 	return (
 		<>
 			{ Object.keys( features ).map( ( feature ) => {
-				const { defaultThreshold, label } = features[ feature ];
+				const { defaultThreshold, label, helperText } =
+					features[ feature ];
 				return (
 					<SettingsRow
 						key={ feature }
 						label={ label }
 						className={ 'nlu-features' }
+						helperText={ helperText }
 					>
 						<CheckboxControl
 							id={ `${ feature }-enabled` }
@@ -115,7 +123,10 @@ export const NLUFeatureSettings = () => {
 						/>
 						<InputControl
 							id={ `${ feature }-threshold` }
-							label={ __( 'Threshold (%)', 'classifai' ) }
+							label={ __(
+								'Confidence Threshold (%)',
+								'classifai'
+							) }
 							type="number"
 							value={
 								featureSettings[ `${ feature }_threshold` ] ||
@@ -126,10 +137,19 @@ export const NLUFeatureSettings = () => {
 									[ `${ feature }_threshold` ]: value,
 								} );
 							} }
+							__unstableInputWidth="8em"
+							suffix={
+								<InputControlSuffixWrapper variant="control">
+									<TooltipPopover
+										tooltipContent={ thresholdInfo.helper }
+									/>
+								</InputControlSuffixWrapper>
+							}
 							min="0"
 							max="100"
 							step="0.01"
 						/>
+
 						{ 'ibm_watson_nlu' === featureSettings.provider && (
 							<SelectControl
 								id={ `${ feature }-taxonomy` }

src/js/settings/components/feature-additional-settings/term-cleanup.js

@@ -5,6 +5,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	CheckboxControl,
 	__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -14,7 +15,8 @@ import { __ } from '@wordpress/i18n';
 import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
 import { useFeatureContext } from '../feature-settings/context';
-import { getFeature } from '../../utils/utils';
+import { getFeature, TooltipPopover } from '../../utils/utils';
+import { thresholdInfo } from '../../utils/helper-text';
 
 /**
  * Component for Term Cleanup feature settings.
@@ -123,7 +125,10 @@ export const TermCleanupSettings = () => {
 							/>
 							<InputControl
 								id={ `${ feature }-threshold` }
-								label={ __( 'Threshold (%)', 'classifai' ) }
+								label={ __(
+									'Confidence Threshold (%)',
+									'classifai'
+								) }
 								type="number"
 								value={
 									featureSettings?.taxonomies?.[
@@ -138,6 +143,16 @@ export const TermCleanupSettings = () => {
 										},
 									} );
 								} }
+								__unstableInputWidth="8em"
+								suffix={
+									<InputControlSuffixWrapper variant="control">
+										<TooltipPopover
+											tooltipContent={
+												thresholdInfo.helper
+											}
+										/>
+									</InputControlSuffixWrapper>
+								}
 								min="0"
 								max="100"
 								step="0.01"

src/js/settings/components/provider-settings/openai-moderation.js

@@ -8,6 +8,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
  */
 import { STORE_NAME } from '../../data/store';
 import { OpenAISettings } from './openai';
+import { moderationHelperText } from '../../utils/helper-text';
 
 /**
  * Component for OpenAI Moderation settings.
@@ -28,14 +29,20 @@ export const OpenAIModerationSettings = ( { isConfigured = false } ) => {
 	const { setProviderSettings } = useDispatch( STORE_NAME );
 	const onChange = ( data ) => setProviderSettings( providerName, data );
 
-	if ( isConfigured ) {
-		return null;
-	}
-
 	return (
-		<OpenAISettings
-			providerSettings={ providerSettings }
-			onChange={ onChange }
-		/>
+		<>
+			{ ! isConfigured && (
+				<OpenAISettings
+					providerSettings={ providerSettings }
+					onChange={ onChange }
+				/>
+			) }
+
+			<div className="display-container-wrapper">
+				<div className="helper-text-content">
+					<div>{ moderationHelperText.content_types }</div>
+				</div>
+			</div>
+		</>
 	);
 };

src/js/settings/components/settings-row/index.js

@@ -3,6 +3,11 @@
  */
 import classNames from 'classnames';
 
+/**
+ * Internal dependencies
+ */
+import { TooltipPopover } from '../../utils/utils';
+
 /**
  * Settings row component.
  *
@@ -13,7 +18,12 @@ import classNames from 'classnames';
 export const SettingsRow = ( props ) => {
 	return (
 		<div className={ classNames( 'settings-row', props?.className ) }>
-			<div className="settings-label">{ props.label }</div>
+			<div className="settings-label">
+				{ props.label }
+				{ props.helperText && (
+					<TooltipPopover tooltipContent={ props.helperText } />
+				) }
+			</div>
 			<div className="settings-control">
 				{ props.children }
 				<div className="settings-description">

src/js/settings/utils/helper-text.js

@@ -0,0 +1,154 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Threshold information.
+ *
+ * @type {Object}
+ */
+export const thresholdInfo = {
+	helper: (
+		<>
+			<p>
+				{ __(
+					'Determines how confident the AI must be before suggesting a term.',
+					'classifai'
+				) }
+			</p>
+			<p>
+				{ __(
+					'Higher % = More precise (fewer, more accurate terms)',
+					'classifai'
+				) }
+			</p>
+			<p>
+				{ __(
+					'Lower % = More verbose (more suggestions, including lower-confidence terms)',
+					'classifai'
+				) }
+			</p>
+		</>
+	),
+};
+
+/**
+ * NLU helper text.
+ *
+ * @type {Object}
+ */
+export const nluHelperText = {
+	category: (
+		<>
+			<p>
+				{ __(
+					'IBM Watson analyzes your content and assigns a broad topic hierarchy that best describes the overall subject.',
+					'classifai'
+				) }
+			</p>
+			<p>
+				{ __(
+					'Example: /technology and computing/software',
+					'classifai'
+				) }
+			</p>
+			<p>
+				{ __(
+					'Categories are useful for general classification and site-wide content grouping.',
+					'classifai'
+				) }
+			</p>
+		</>
+	),
+	keyword: (
+		<>
+			<p>
+				{ __(
+					'Keywords represent important terms in your content that are contextually significant.',
+					'classifai'
+				) }
+			</p>
+			<p>
+				{ __(
+					'Watson extracts these to help identify core concepts, topics, and SEO-friendly tags.',
+					'classifai'
+				) }
+			</p>
+			<p>
+				{ __(
+					'Keywords often map well to WordPress tags.',
+					'classifai'
+				) }
+			</p>
+		</>
+	),
+	entity: (
+		<>
+			<p>
+				{ __(
+					'Entities are named people, places, brands, and other proper nouns mentioned in your content.',
+					'classifai'
+				) }
+			</p>
+			<p>
+				{ __(
+					'Watson identifies and classifies these by type (e.g., Person, Company, Location).',
+					'classifai'
+				) }
+			</p>
+			<p>
+				{ __(
+					'Entities are helpful for structured data and enhancing rich snippets or metadata.',
+					'classifai'
+				) }
+			</p>
+		</>
+	),
+	concept: (
+		<>
+			<p>
+				{ __(
+					"Concepts reflect high-level abstract ideas Watson identifies in your content, even if the term isn't explicitly used.",
+					'classifai'
+				) }
+			</p>
+			<p>
+				{ __(
+					'For example, an article about "the iPhone" might be linked to the concept of "Apple Inc."',
+					'classifai'
+				) }
+			</p>
+			<p>
+				{ __(
+					'Concepts are great for semantic tagging and content recommendation systems.',
+					'classifai'
+				) }
+			</p>
+		</>
+	),
+};
+
+/**
+ * Moderation helper text.
+ *
+ * @type {Object}
+ */
+export const moderationHelperText = {
+	content_types: (
+		<>
+			<p>
+				{ __(
+					'The OpenAI moderation endpoint will check if text is potentially harmful.',
+					'classifai'
+				) }
+			</p>
+			<p>
+				{ __(
+					'Text will be checked against certain categories, like hate, threatening, harassment, self-harm, sexual, violence, and more. Each category is scored on a scale of 0 to 1, with 0 indicating no harm and 1 indicating the highest level of harm. If something is found to be harmful, it will be flagged and blocked.',
+					'classifai'
+				) }
+			</p>
+		</>
+	),
+};