feat: Allowing for more user provided events in PromptField for analytics tracking

packages/@react-spectrum/ai/exports/index.ts

@@ -53,6 +53,7 @@ export type {
   PromptFieldToolbarProps,
   PromptFieldTokenValue,
   InsertMenuItemProps,
+  AttachFileMenuItemProps,
   PromptFieldVoiceButtonProps,
   InsertTokenMenuItemProps,
   InsertTextMenuItemProps,

packages/@react-spectrum/ai/src/PromptField.tsx

@@ -33,7 +33,7 @@ import {
 } from 'react';
 import {FocusableRef} from '@react-types/shared';
 import {getInteractionModality} from 'react-aria/private/interactions/useFocusVisible';
-import {IconContext} from '@react-spectrum/s2';
+import {IconContext, MenuTriggerProps} from '@react-spectrum/s2';
 import {Image, Text} from '@react-spectrum/s2/Card';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -96,6 +96,7 @@ export interface PromptFieldProps {
   onStop?: () => void;
   onAddAttachments?: (attachments: PromptFieldAttachment[]) => void;
   onRemoveAttachments?: (attachments: PromptFieldAttachment[]) => void;
+  onAITermsPress?: () => void;
   styles?: StyleString;
   variant?: 'balanced' | 'prominent' | 'subtle';
   brandColor?: string;
@@ -363,7 +364,8 @@ export const PromptField = forwardRef(function PromptField(
             <Link
               variant="secondary"
               href="https://www.adobe.com/legal/licenses-terms/adobe-gen-ai-user-guidelines.html"
-              target="_blank">
+              target="_blank"
+              onPress={props.onAITermsPress}>
               {stringFormatter.format('promptfield.aiUserGuidlines')}
             </Link>
           </p>
@@ -951,15 +953,15 @@ function buildVoicePrompt(base: TokenFieldValue, voiceText: string): PromptField
   return base.replaceRange(base.caretPosition, base.caretPosition, voiceText) as PromptFieldValue;
 }
 
-export interface InsertMenuItemProps {
+export interface InsertMenuItemProps extends Pick<MenuTriggerProps, 'onOpenChange'> {
   children: React.ReactNode;
 }
 
 export function InsertMenuButton(props: InsertMenuItemProps) {
-  let {children} = props;
+  let {children, onOpenChange} = props;
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/ai');
   return (
-    <MenuTrigger>
+    <MenuTrigger onOpenChange={onOpenChange}>
       <ActionButton
         isQuiet
         staticColor="auto"
@@ -970,12 +972,29 @@ export function InsertMenuButton(props: InsertMenuItemProps) {
     </MenuTrigger>
   );
 }
+export interface AttachFileMenuItemProps extends Omit<
+  MenuItemProps,
+  | 'children'
+  | 'UNSAFE_className'
+  | 'UNSAFE_style'
+  | 'download'
+  | 'href'
+  | 'hrefLang'
+  | 'ping'
+  | 'referrerPolicy'
+  | 'rel'
+  | 'routerOptions'
+  | 'target'
+> {}
 
-export function AttachFileMenuItem() {
+export function AttachFileMenuItem(props: AttachFileMenuItemProps) {
+  let {onAction, ...otherProps} = props;
   let {acceptedAttachmentTypes, setAttachments, onAddAttachments} = useContext(PromptFieldContext);
   return (
     <MenuItem
+      {...otherProps}
       onAction={() => {
+        onAction?.();
         let input = document.createElement('input');
         input.type = 'file';
         if (acceptedAttachmentTypes) {

packages/@react-spectrum/ai/test/PromptField.test.tsx

@@ -11,14 +11,20 @@
  */
 
 import {act, screen, waitFor} from '@react-spectrum/test-utils-internal';
+import {
+  AttachFileMenuItem,
+  InsertMenuButton,
+  PromptField,
+  PromptFieldToolbar,
+  PromptTokenField
+} from '../src/PromptField';
 import {
   imageAttachment,
   installRangePolyfill,
   PromptFieldValue,
   renderPromptField,
   tokenTexts
 } from './utils/promptFieldTestUtils';
-import {PromptField, PromptTokenField} from '../src/PromptField';
 import React from 'react';
 import {render} from '@react-spectrum/test-utils-internal';
 import userEvent from '@testing-library/user-event';
@@ -444,6 +450,41 @@ describeOrSkip('PromptField', () => {
     });
   });
 
+  describe('InsertMenuButton', () => {
+    it('calls onOpenChange when the menu is opened', async () => {
+      let onOpenChange = jest.fn();
+      let {getByRole} = render(
+        <PromptField>
+          <PromptTokenField />
+          <PromptFieldToolbar>
+            <InsertMenuButton onOpenChange={onOpenChange}>
+              <AttachFileMenuItem />
+            </InsertMenuButton>
+          </PromptFieldToolbar>
+        </PromptField>
+      );
+      await user.click(getByRole('button', {name: 'Add'}));
+      expect(onOpenChange).toHaveBeenCalledWith(true);
+    });
+
+    it('calls AttachFileMenuItem onAction when the item is selected', async () => {
+      let onAction = jest.fn();
+      let {getByRole} = render(
+        <PromptField>
+          <PromptTokenField />
+          <PromptFieldToolbar>
+            <InsertMenuButton>
+              <AttachFileMenuItem onAction={onAction} />
+            </InsertMenuButton>
+          </PromptFieldToolbar>
+        </PromptField>
+      );
+      await user.click(getByRole('button', {name: 'Add'}));
+      await user.click(await findMenuItem('Attach a file'));
+      expect(onAction).toHaveBeenCalled();
+    });
+  });
+
   it('fires onKeyDown when a key is pressed in the token field', async () => {
     let onKeyDown = jest.fn();
     let {getByRole} = render(
@@ -458,4 +499,12 @@ describeOrSkip('PromptField', () => {
 
     expect(onKeyDown).toHaveBeenCalled();
   });
+
+  it('calls onAITermsPress when the AI User Guidelines link is pressed', async () => {
+    let onAITermsPress = jest.fn();
+    let {user} = renderPromptField({onAITermsPress});
+
+    await user.click(screen.getByRole('link', {name: 'AI User Guidelines'}));
+    expect(onAITermsPress).toHaveBeenCalledTimes(1);
+  });
 });

packages/@react-spectrum/ai/test/utils/promptFieldTestUtils.tsx

@@ -196,6 +196,7 @@ export interface HarnessOptions {
   uploadProgress?: number;
   /** Renders every attachment in the invalid state. */
   invalid?: boolean;
+  onAITermsPress?: () => void;
 }
 
 export interface HarnessSpies {
@@ -225,7 +226,8 @@ function ControlledPromptField(props: ControlledPromptFieldProps) {
     valueRef,
     attachmentsRef,
     setValueRef,
-    spies
+    spies,
+    onAITermsPress
   } = props;
   let [value, setValue] = useState<PromptFieldValue>(initialValue);
   let [attachments, setAttachments] = useState<PromptFieldAttachment[]>(initialAttachments);
@@ -249,7 +251,8 @@ function ControlledPromptField(props: ControlledPromptFieldProps) {
       onStop={spies.onStop}
       onSubmit={spies.onSubmit}
       acceptedAttachmentTypes={acceptedAttachmentTypes}
-      onRemoveAttachments={spies.onRemoveAttachments}>
+      onRemoveAttachments={spies.onRemoveAttachments}
+      onAITermsPress={onAITermsPress}>
       <PromptFieldAttachmentList dependencies={[uploadProgress, invalid]}>
         {attachment => (
           <Attachment