Files

75 lines
2.1 KiB
TypeScript

/*
* External dependencies
*/
import { AI_MODEL_GPT_3_5_Turbo_16K, AI_MODEL_GPT_4 } from '@automattic/jetpack-ai-client';
import {
RadioControl,
__experimentalToggleGroupControl as ToggleGroupControl, // eslint-disable-line wpcalypso/no-unsafe-wp-apis
__experimentalToggleGroupControlOption as ToggleGroupControlOption, // eslint-disable-line wpcalypso/no-unsafe-wp-apis
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
/**
* Types and constants
*/
type AiExcerptControlProps = {
disabled: boolean;
model: AiModelTypeProp;
onModelChange?: ( model: AiModelTypeProp ) => void;
};
import type { AiModelTypeProp } from '@automattic/jetpack-ai-client';
import './style.scss';
export default function AiModelSelectorControl( {
model,
onModelChange,
disabled,
}: AiExcerptControlProps ) {
const help =
model === AI_MODEL_GPT_4
? __(
'The most capable model, great for tasks that require creativity and advanced reasoning',
'jetpack'
)
: __( 'The fastest model, great for most everyday tasks.', 'jetpack' );
/*
* Add a fallback for the ToggleGroupControlOption component,
* since it is experimental and might not be available in all versions of Gutenberg.
*/
if ( ! ToggleGroupControlOption || ! ToggleGroupControl ) {
return (
<RadioControl
label={ __( 'Model', 'jetpack' ) }
className="ai-model-selector-control__radio-control"
selected={ model }
options={ [
{ label: __( 'GPT-3.5 Turbo', 'jetpack' ), value: AI_MODEL_GPT_3_5_Turbo_16K },
{ label: __( 'GPT-4', 'jetpack' ), value: AI_MODEL_GPT_4 },
] }
onChange={ onModelChange }
help={ help }
disabled={ disabled }
/>
);
}
return (
<ToggleGroupControl
isBlock
label={ __( 'Model', 'jetpack' ) }
onChange={ onModelChange }
value={ model }
disabled={ disabled }
help={ help }
>
<ToggleGroupControlOption
label={ __( 'GTP-3.5 Turbo', 'jetpack' ) }
value={ AI_MODEL_GPT_3_5_Turbo_16K }
disabled={ disabled }
/>
<ToggleGroupControlOption label={ __( 'GPT-4', 'jetpack' ) } value={ AI_MODEL_GPT_4 } />
</ToggleGroupControl>
);
}