diff --git a/packages/@react-spectrum/ai/exports/index.ts b/packages/@react-spectrum/ai/exports/index.ts index 3c9f7dd3008..17c2a8408f5 100644 --- a/packages/@react-spectrum/ai/exports/index.ts +++ b/packages/@react-spectrum/ai/exports/index.ts @@ -14,7 +14,8 @@ export { InsertTokenMenuItem, PromptFieldAttachmentList, PromptFieldToolbar, - PromptToken + PromptToken, + PromptFieldVoiceButton } from '../src/PromptField'; export {ResponseStatus, ResponseStatusTitle, ResponseStatusPanel} from '../src/ResponseStatus'; export {Chat, Thread, ThreadItem, ThreadScrollButton, PromptFocusContext} from '../src/Chat'; @@ -31,7 +32,8 @@ export type { PromptFieldAttachmentListProps, PromptTokenFieldPopoverProps, PromptFieldToolbarProps, - InsertMenuItemProps + InsertMenuItemProps, + PromptFieldVoiceButtonProps } from '../src/PromptField'; export type {MessageFeedbackProps} from '../src/MessageFeedback'; export type {MessageSourceProps, SourceListProps, SourceListItemProps} from '../src/MessageSource'; diff --git a/packages/@react-spectrum/ai/src/PromptField.tsx b/packages/@react-spectrum/ai/src/PromptField.tsx index 965eb89dbfe..6ee4204bceb 100644 --- a/packages/@react-spectrum/ai/src/PromptField.tsx +++ b/packages/@react-spectrum/ai/src/PromptField.tsx @@ -28,6 +28,7 @@ import {CenterBaseline} from '@react-spectrum/s2/CenterBaseline'; import { createContext, createRef, + forwardRef, use, useContext, useDeferredValue, @@ -43,6 +44,7 @@ import { TokenFieldValue, TokenSegment } from 'react-stately/useTokenFieldState'; +import {DOMRef} from '@react-types/shared'; import {IconContext} from '@react-spectrum/s2'; import {Image, Text} from '@react-spectrum/s2/Card'; // @ts-ignore @@ -69,6 +71,7 @@ import Stop from '@react-spectrum/s2/icons/StopProcessing'; import {ToggleButton} from '@react-spectrum/s2/ToggleButton'; import {Tooltip, TooltipTrigger} from '@react-spectrum/s2/Tooltip'; import {useControlledState} from 'react-stately/useControlledState'; +import {useDOMRef} from './useDOMRef'; import {useEffectEvent} from 'react-aria/private/utils/useEffectEvent'; import {useFocusWithin} from 'react-aria/useFocusWithin'; import {useKeyboard} from 'react-aria/useKeyboard'; @@ -97,6 +100,7 @@ export interface PromptFieldProps { onRemoveAttachments?: (attachments: PromptFieldAttachment[]) => void; styles?: StyleString; variant?: 'balanced' | 'prominent' | 'subtle'; + hideDisclaimer?: boolean; } interface PromptFieldState { @@ -176,7 +180,10 @@ function matchMimeType(mimeType: string, acceptedMimeTypes: string[]): boolean { }); } -export function PromptField(props: PromptFieldProps) { +export const PromptField = forwardRef(function PromptField( + props: PromptFieldProps, + ref: DOMRef +) { let { children, acceptedAttachmentTypes, @@ -185,8 +192,10 @@ export function PromptField(props: PromptFieldProps) { styles, onAddAttachments, onRemoveAttachments, + hideDisclaimer, variant = 'balanced' } = props; + let domRef = useDOMRef(ref); let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/ai'); let [prompt, setPrompt] = useControlledState( props.value, @@ -263,7 +272,7 @@ export function PromptField(props: PromptFieldProps) { onAddAttachments, onRemoveAttachments }}> -
+
{children} -

- {stringFormatter.format('promptfield.aiDisclaimer')}{' '} - - {stringFormatter.format('promptfield.aiUserGuidlines')} - -

+ {!hideDisclaimer && ( +

+ {stringFormatter.format('promptfield.aiDisclaimer')}{' '} + + {stringFormatter.format('promptfield.aiUserGuidlines')} + +

+ )}
); -} +}); export interface PromptFieldAttachmentListProps extends AttachmentListProps { children?: (attachment: PromptFieldAttachment) => React.ReactNode;