AI assistant: change guideline component (#34496)

* fix multiple line display on ai control footer message

* export AI control message as FooterMessage

* add changelog entry

projects/js-packages/ai-client/changelog/fix-ai-assistant-guideline-component

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+AI control: fix footer message style issues and add new prop to pass on custom footer messages

projects/js-packages/ai-client/src/components/ai-control/Readme.md

@@ -11,6 +11,8 @@
 - `isTransparent` (**boolean**) (Optional): Controls the opacity of the component. Default value is `false`.
 - `state` (**RequestingStateProp**) (Optional): Determines the state of the component. Default value is `'init'`.
 - `showClearButton` (**boolean**) (Optional): Determines if the clear button is shown when the input has a value. Default value is `true`.
+- `showGuideLine`: (**boolean**) (Optional): Whether to show the usual AI guidelines at the bottom of the input.
+- `customFooter`: (**ReactElement**) (Optional): if provided together with `showGuideLine` it will be rendered at the bottom of the input.
 - `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.
@@ -19,12 +21,16 @@
 #### Example Usage
 
 ```jsx
+import { AIControl, FooterMessage } from '@automattic/jetpack-ai-client';
+
 <AIControl
   value="Type here"
   placeholder="Placeholder text"
   onChange={ handleChange }
   onSend={ handleSend }
   onStop={ handleStop }
   onAccept={ handleAccept }
+  showGuideLine={ true }
+  customFooter={ <FooterMessage severity="info">Remember AI suggestions can be inaccurate</FooterMessage> }
 />
-```
+```

projects/js-packages/ai-client/src/components/ai-control/index.tsx

@@ -33,7 +33,7 @@ import { GuidelineMessage } from './message';
  * Types
  */
 import type { RequestingStateProp } from '../../types';
-type AIControlProps = {
+type AiControlProps = {
 	disabled?: boolean;
 	value: string;
 	placeholder?: string;
@@ -43,10 +43,12 @@ type AIControlProps = {
 	isTransparent?: boolean;
 	state?: RequestingStateProp;
 	showGuideLine?: boolean;
+	customFooter?: React.ReactElement;
 	onChange?: ( newValue: string ) => void;
 	onSend?: ( currentValue: string ) => void;
 	onStop?: () => void;
 	onAccept?: () => void;
+	onDiscard?: () => void;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -55,7 +57,7 @@ const noop = () => {};
 /**
  * AI Control component.
  *
- * @param {AIControlProps} props       - Component props.
+ * @param {AiControlProps} props       - Component props.
  * @param {React.MutableRefObject} ref - Ref to the component.
  * @returns {React.ReactElement}         Rendered component.
  */
@@ -70,28 +72,13 @@ export function AIControl(
 		isTransparent = false,
 		state = 'init',
 		showGuideLine = false,
+		customFooter = null,
 		onChange = noop,
 		onSend = noop,
 		onStop = noop,
 		onAccept = noop,
 		onDiscard = noop,
-	}: {
-		disabled?: boolean;
-		value: string;
-		placeholder?: string;
-		showAccept?: boolean;
-		acceptLabel?: string;
-		showButtonLabels?: boolean;
-		isTransparent?: boolean;
-		state?: RequestingStateProp;
-		showClearButton?: boolean;
-		showGuideLine?: boolean;
-		onChange?: ( newValue: string ) => void;
-		onSend?: ( currentValue: string ) => void;
-		onStop?: () => void;
-		onAccept?: () => void;
-		onDiscard?: () => void;
-	},
+	}: AiControlProps,
 	ref: React.MutableRefObject< null > // eslint-disable-line @typescript-eslint/ban-types
 ): React.ReactElement {
 	const promptUserInputRef = useRef( null );
@@ -264,7 +251,7 @@ export function AIControl(
 						</div>
 					) }
 				</div>
-				{ showGuideLine && ! loading && ! editRequest && <GuidelineMessage /> }
+				{ showGuideLine && ! loading && ! editRequest && ( customFooter || <GuidelineMessage /> ) }
 			</div>
 		</div>
 	);

projects/js-packages/ai-client/src/components/ai-control/style.scss

@@ -121,6 +121,7 @@
 		flex-grow: 2;
 		margin: 0 8px;
 		color: var( --jp-gray-50 );
+		line-height: 1.4em;
 
 		.components-external-link {
 			color: var( --jp-gray-50 );

projects/js-packages/ai-client/src/components/index.ts

@@ -1,4 +1,4 @@
 export { default as AIControl } from './ai-control';
 export { default as AiStatusIndicator } from './ai-status-indicator';
 export { default as AudioDurationDisplay } from './audio-duration-display';
-export { GuidelineMessage } from './ai-control/message';
+export { GuidelineMessage, default as FooterMessage } from './ai-control/message';