feat: add MessageFeedback + UserMessage

[DPandyan]

Closes

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

## API Changes

@react-spectrum/s2

/@react-spectrum/s2:DisclosureTitle

 DisclosureTitle {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   children: React.ReactNode
   id?: string
   level?: number = 3
+  styles?: StylesPropWithFont
 }

---

@react-spectrum/s2-ai

/@react-spectrum/s2-ai:Asset

+Asset {
+
+}

/@react-spectrum/s2-ai:AssetList

+AssetList {
+
+}

/@react-spectrum/s2-ai:BasicHorizontalCard

+BasicHorizontalCard {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  children: ReactNode | (CardRenderProps) => ReactNode
+  density?: 'compact' | 'regular' | 'spacious' = 'regular'
+  download?: boolean | string
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  onPress?: (PressEvent) => void
+  onPressChange?: (boolean) => void
+  onPressEnd?: (PressEvent) => void
+  onPressStart?: (PressEvent) => void
+  onPressUp?: (PressEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
+  styles?: StylesProp
+  target?: HTMLAttributeAnchorTarget
+  textValue?: string
+  value?: T
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
+}

/@react-spectrum/s2-ai:HorizontalCard

+HorizontalCard {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  children: ReactNode | (CardRenderProps) => ReactNode
+  density?: 'compact' | 'regular' | 'spacious' = 'regular'
+  download?: boolean | string
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  onPress?: (PressEvent) => void
+  onPressChange?: (boolean) => void
+  onPressEnd?: (PressEvent) => void
+  onPressStart?: (PressEvent) => void
+  onPressUp?: (PressEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
+  styles?: StylesProp
+  target?: HTMLAttributeAnchorTarget
+  textValue?: string
+  value?: T
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
+}

/@react-spectrum/s2-ai:MessageFeedback

+MessageFeedback {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  defaultValue?: MessageFeedbackValue
+  id?: string
+  isDisabled?: boolean
+  onChange?: (MessageFeedbackValue) => void
+  onFeedback?: (Exclude<MessageFeedbackValue, null>) => void
+  slot?: string | null
+  styles?: StylesProp
+  thumbDownLabel?: string
+  thumbUpLabel?: string
+  value?: MessageFeedbackValue
+}

/@react-spectrum/s2-ai:UserMessage

+UserMessage {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children: ReactNode
+  id?: string
+  modality?: UserMessageModality = 'fullscreen'
+  slot?: string | null
+  styles?: StylesProp
+}

---

[rspbot]

Agent Skills Changes

Modified (22)

• react-aria/skills/react-aria/references/components/ColorArea.md $\color{red}{-15}$
• react-aria/skills/react-aria/references/components/ColorField.md $\color{red}{-15}$
• react-aria/skills/react-aria/references/components/ColorPicker.md $\color{red}{-15}$
• react-aria/skills/react-aria/references/components/ColorSlider.md $\color{red}{-15}$
• react-aria/skills/react-aria/references/components/ColorSwatchPicker.md $\color{red}{-15}$
• react-aria/skills/react-aria/references/components/ColorWheel.md $\color{red}{-15}$
• react-aria/skills/react-aria/references/llms.txt $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/ColorArea.md $\color{red}{-15}$
• s2/skills/react-spectrum-s2/references/components/ColorField.md $\color{red}{-15}$
• s2/skills/react-spectrum-s2/references/components/ColorSlider.md $\color{red}{-15}$
• s2/skills/react-spectrum-s2/references/components/ColorSwatch.md $\color{red}{-15}$
• s2/skills/react-spectrum-s2/references/components/ColorSwatchPicker.md $\color{red}{-15}$
• s2/skills/react-spectrum-s2/references/components/ColorWheel.md $\color{red}{-15}$
• s2/skills/react-spectrum-s2/references/components/Disclosure.md $\color{green}{+1}$
• s2/skills/react-spectrum-s2/references/llms.txt $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/react-aria/components/ColorArea.md $\color{red}{-15}$
• s2/skills/react-spectrum-s2/references/react-aria/components/ColorField.md $\color{red}{-15}$
• s2/skills/react-spectrum-s2/references/react-aria/components/ColorPicker.md $\color{red}{-15}$
• s2/skills/react-spectrum-s2/references/react-aria/components/ColorSlider.md $\color{red}{-15}$
• s2/skills/react-spectrum-s2/references/react-aria/components/ColorSwatchPicker.md $\color{red}{-15}$
• s2/skills/react-spectrum-s2/references/react-aria/components/ColorWheel.md $\color{red}{-15}$
• s2/skills/react-spectrum-s2/references/react-aria/llms.txt $\color{red}{-1}$

Install

React Spectrum S2:

npx skills add https://d1pzu54gtk2aed.cloudfront.net/pr/e4cbadb652b01ed4b1ae8c7341ab538421d3c2b9/

React Aria:

npx skills add https://d5iwopk28bdhl.cloudfront.net/pr/e4cbadb652b01ed4b1ae8c7341ab538421d3c2b9/