Skip to content

Commit 0095149

Browse files
dkotterdkotter
authored
Merge pull request #957 from 10up/feature/919-add-helper-text-to-watson-settings
Add helper text to Classification, Moderation & term cleanup screen
2 parents 5a721c8 + 9931e3d commit 0095149

File tree

9 files changed

+277
-14
lines changed

9 files changed

+277
-14
lines changed

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

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
CheckboxControl,
77
SelectControl,
88
__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
9+
__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper, // eslint-disable-line @wordpress/no-unsafe-wp-apis
910
} from '@wordpress/components';
1011
import { __, sprintf } from '@wordpress/i18n';
1112

@@ -14,7 +15,8 @@ import { __, sprintf } from '@wordpress/i18n';
1415
*/
1516
import { SettingsRow } from '../settings-row';
1617
import { STORE_NAME } from '../../data/store';
17-
import { getFeature } from '../../utils/utils';
18+
import { getFeature, TooltipPopover } from '../../utils/utils';
19+
import { thresholdInfo, nluHelperText } from '../../utils/helper-text';
1820

1921
/**
2022
* Component for render settings fields when IBM Watson NLU is selected as the provider.
@@ -36,18 +38,22 @@ export const NLUFeatureSettings = () => {
3638
category: {
3739
label: __( 'Category', 'classifai' ),
3840
defaultThreshold: 70,
41+
helperText: nluHelperText.category,
3942
},
4043
keyword: {
4144
label: __( 'Keyword', 'classifai' ),
4245
defaultThreshold: 70,
46+
helperText: nluHelperText.keyword,
4347
},
4448
entity: {
4549
label: __( 'Entity', 'classifai' ),
4650
defaultThreshold: 70,
51+
helperText: nluHelperText.entity,
4752
},
4853
concept: {
4954
label: __( 'Concept', 'classifai' ),
5055
defaultThreshold: 70,
56+
helperText: nluHelperText.concept,
5157
},
5258
};
5359

@@ -94,12 +100,14 @@ export const NLUFeatureSettings = () => {
94100
return (
95101
<>
96102
{ Object.keys( features ).map( ( feature ) => {
97-
const { defaultThreshold, label } = features[ feature ];
103+
const { defaultThreshold, label, helperText } =
104+
features[ feature ];
98105
return (
99106
<SettingsRow
100107
key={ feature }
101108
label={ label }
102109
className={ 'nlu-features' }
110+
helperText={ helperText }
103111
>
104112
<CheckboxControl
105113
id={ `${ feature }-enabled` }
@@ -115,7 +123,10 @@ export const NLUFeatureSettings = () => {
115123
/>
116124
<InputControl
117125
id={ `${ feature }-threshold` }
118-
label={ __( 'Threshold (%)', 'classifai' ) }
126+
label={ __(
127+
'Confidence Threshold (%)',
128+
'classifai'
129+
) }
119130
type="number"
120131
value={
121132
featureSettings[ `${ feature }_threshold` ] ||
@@ -126,10 +137,19 @@ export const NLUFeatureSettings = () => {
126137
[ `${ feature }_threshold` ]: value,
127138
} );
128139
} }
140+
__unstableInputWidth="8em"
141+
suffix={
142+
<InputControlSuffixWrapper variant="control">
143+
<TooltipPopover
144+
tooltipContent={ thresholdInfo.helper }
145+
/>
146+
</InputControlSuffixWrapper>
147+
}
129148
min="0"
130149
max="100"
131150
step="0.01"
132151
/>
152+
133153
{ 'ibm_watson_nlu' === featureSettings.provider && (
134154
<SelectControl
135155
id={ `${ feature }-taxonomy` }

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

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
55
import {
66
CheckboxControl,
77
__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
8+
__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper, // eslint-disable-line @wordpress/no-unsafe-wp-apis
89
} from '@wordpress/components';
910
import { __ } from '@wordpress/i18n';
1011

@@ -14,7 +15,8 @@ import { __ } from '@wordpress/i18n';
1415
import { SettingsRow } from '../settings-row';
1516
import { STORE_NAME } from '../../data/store';
1617
import { useFeatureContext } from '../feature-settings/context';
17-
import { getFeature } from '../../utils/utils';
18+
import { getFeature, TooltipPopover } from '../../utils/utils';
19+
import { thresholdInfo } from '../../utils/helper-text';
1820

1921
/**
2022
* Component for Term Cleanup feature settings.
@@ -123,7 +125,10 @@ export const TermCleanupSettings = () => {
123125
/>
124126
<InputControl
125127
id={ `${ feature }-threshold` }
126-
label={ __( 'Threshold (%)', 'classifai' ) }
128+
label={ __(
129+
'Confidence Threshold (%)',
130+
'classifai'
131+
) }
127132
type="number"
128133
value={
129134
featureSettings?.taxonomies?.[
@@ -138,6 +143,16 @@ export const TermCleanupSettings = () => {
138143
},
139144
} );
140145
} }
146+
__unstableInputWidth="8em"
147+
suffix={
148+
<InputControlSuffixWrapper variant="control">
149+
<TooltipPopover
150+
tooltipContent={
151+
thresholdInfo.helper
152+
}
153+
/>
154+
</InputControlSuffixWrapper>
155+
}
141156
min="0"
142157
max="100"
143158
step="0.01"

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

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
88
*/
99
import { STORE_NAME } from '../../data/store';
1010
import { OpenAISettings } from './openai';
11+
import { moderationHelperText } from '../../utils/helper-text';
1112

1213
/**
1314
* Component for OpenAI Moderation settings.
@@ -28,14 +29,20 @@ export const OpenAIModerationSettings = ( { isConfigured = false } ) => {
2829
const { setProviderSettings } = useDispatch( STORE_NAME );
2930
const onChange = ( data ) => setProviderSettings( providerName, data );
3031

31-
if ( isConfigured ) {
32-
return null;
33-
}
34-
3532
return (
36-
<OpenAISettings
37-
providerSettings={ providerSettings }
38-
onChange={ onChange }
39-
/>
33+
<>
34+
{ ! isConfigured && (
35+
<OpenAISettings
36+
providerSettings={ providerSettings }
37+
onChange={ onChange }
38+
/>
39+
) }
40+
41+
<div className="display-container-wrapper">
42+
<div className="helper-text-content">
43+
<div>{ moderationHelperText.content_types }</div>
44+
</div>
45+
</div>
46+
</>
4047
);
4148
};

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
*/
44
import classNames from 'classnames';
55

6+
/**
7+
* Internal dependencies
8+
*/
9+
import { TooltipPopover } from '../../utils/utils';
10+
611
/**
712
* Settings row component.
813
*
@@ -13,7 +18,12 @@ import classNames from 'classnames';
1318
export const SettingsRow = ( props ) => {
1419
return (
1520
<div className={ classNames( 'settings-row', props?.className ) }>
16-
<div className="settings-label">{ props.label }</div>
21+
<div className="settings-label">
22+
{ props.label }
23+
{ props.helperText && (
24+
<TooltipPopover tooltipContent={ props.helperText } />
25+
) }
26+
</div>
1727
<div className="settings-control">
1828
{ props.children }
1929
<div className="settings-description">

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

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { __ } from '@wordpress/i18n';
5+
6+
/**
7+
* Threshold information.
8+
*
9+
* @type {Object}
10+
*/
11+
export const thresholdInfo = {
12+
helper: (
13+
<>
14+
<p>
15+
{ __(
16+
'Determines how confident the AI must be before suggesting a term.',
17+
'classifai'
18+
) }
19+
</p>
20+
<p>
21+
{ __(
22+
'Higher % = More precise (fewer, more accurate terms)',
23+
'classifai'
24+
) }
25+
</p>
26+
<p>
27+
{ __(
28+
'Lower % = More verbose (more suggestions, including lower-confidence terms)',
29+
'classifai'
30+
) }
31+
</p>
32+
</>
33+
),
34+
};
35+
36+
/**
37+
* NLU helper text.
38+
*
39+
* @type {Object}
40+
*/
41+
export const nluHelperText = {
42+
category: (
43+
<>
44+
<p>
45+
{ __(
46+
'IBM Watson analyzes your content and assigns a broad topic hierarchy that best describes the overall subject.',
47+
'classifai'
48+
) }
49+
</p>
50+
<p>
51+
{ __(
52+
'Example: /technology and computing/software',
53+
'classifai'
54+
) }
55+
</p>
56+
<p>
57+
{ __(
58+
'Categories are useful for general classification and site-wide content grouping.',
59+
'classifai'
60+
) }
61+
</p>
62+
</>
63+
),
64+
keyword: (
65+
<>
66+
<p>
67+
{ __(
68+
'Keywords represent important terms in your content that are contextually significant.',
69+
'classifai'
70+
) }
71+
</p>
72+
<p>
73+
{ __(
74+
'Watson extracts these to help identify core concepts, topics, and SEO-friendly tags.',
75+
'classifai'
76+
) }
77+
</p>
78+
<p>
79+
{ __(
80+
'Keywords often map well to WordPress tags.',
81+
'classifai'
82+
) }
83+
</p>
84+
</>
85+
),
86+
entity: (
87+
<>
88+
<p>
89+
{ __(
90+
'Entities are named people, places, brands, and other proper nouns mentioned in your content.',
91+
'classifai'
92+
) }
93+
</p>
94+
<p>
95+
{ __(
96+
'Watson identifies and classifies these by type (e.g., Person, Company, Location).',
97+
'classifai'
98+
) }
99+
</p>
100+
<p>
101+
{ __(
102+
'Entities are helpful for structured data and enhancing rich snippets or metadata.',
103+
'classifai'
104+
) }
105+
</p>
106+
</>
107+
),
108+
concept: (
109+
<>
110+
<p>
111+
{ __(
112+
"Concepts reflect high-level abstract ideas Watson identifies in your content, even if the term isn't explicitly used.",
113+
'classifai'
114+
) }
115+
</p>
116+
<p>
117+
{ __(
118+
'For example, an article about "the iPhone" might be linked to the concept of "Apple Inc."',
119+
'classifai'
120+
) }
121+
</p>
122+
<p>
123+
{ __(
124+
'Concepts are great for semantic tagging and content recommendation systems.',
125+
'classifai'
126+
) }
127+
</p>
128+
</>
129+
),
130+
};
131+
132+
/**
133+
* Moderation helper text.
134+
*
135+
* @type {Object}
136+
*/
137+
export const moderationHelperText = {
138+
content_types: (
139+
<>
140+
<p>
141+
{ __(
142+
'The OpenAI moderation endpoint will check if text is potentially harmful.',
143+
'classifai'
144+
) }
145+
</p>
146+
<p>
147+
{ __(
148+
'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.',
149+
'classifai'
150+
) }
151+
</p>
152+
</>
153+
),
154+
};

0 commit comments

Comments
 (0)