AI Featured Image: add feedback link on footer (#36831)

* Include footer with provide feedback link on modal

* Fix top margin to follow the margin pattern of 32px

* changelog

projects/plugins/jetpack/changelog/update-featured-image-add-provide-feedback-link-on-footer

@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+AI Featured Image: include link to provide feedback on the footer of the modal.

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/index.tsx

@@ -7,6 +7,7 @@ import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback, useRef, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
+import { Icon, external } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
@@ -301,6 +302,17 @@ export default function FeaturedImage( { busy, disabled }: { busy: boolean; disa
 							</div>
 						</div>
 					</div>
+					<div className="ai-assistant-featured-image__footer">
+						<Button
+							variant="link"
+							className="ai-assistant-featured-image__feedback-button"
+							href="https://jetpack.com/redirect/?source=jetpack-ai-feedback"
+							target="_blank"
+						>
+							<span>{ __( 'Provide feedback', 'jetpack' ) }</span>
+							<Icon icon={ external } className="icon" />
+						</Button>
+					</div>
 				</AiAssistantModal>
 			) }
 		</div>

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/style.scss

@@ -1,7 +1,7 @@
 .ai-assistant-featured-image {
 	&__content {
 		display: flex;
-		margin-top: 8px;
+		margin-top: 32px;
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
@@ -38,4 +38,31 @@
 			margin-bottom: 8px;
 		}
 	}
+
+	&__footer {
+		display: flex;
+		justify-content: flex-start;
+		margin-right: -32px;
+		margin-left: -32px;
+		margin-top: 32px;
+		margin-bottom: -32px;
+		padding: 8px 32px;
+		border-top: solid 1px #DCDCDE;
+		height: 60px;
+
+		&__feedback-button {
+			display: inline-block;
+
+			a {
+				text-decoration: none;
+			}
+		}
+
+		.icon {
+			width: 20px;
+			height: 20px;
+			color: var(--studio-gray-20);
+			margin-left: 4px;
+		}
+	}
 }