[pull] main from adobe:main

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

@@ -1,6 +1,45 @@
 export {Attachment, AttachmentList} from '../src/AttachmentList';
-export {BasicHorizontalCard, HorizontalCard} from '../src/HorizontalCard';
+export {BasicHorizontalCard, CardPreview, HorizontalCard} from '../src/HorizontalCard';
 export {MessageFeedback} from '../src/MessageFeedback';
+export {MessageSource, SourceList, SourceListItem} from '../src/MessageSource';
 export {MessageSuggestion, MessageSuggestionList} from '../src/MessageSuggestion';
-export {ResponseStatus, ResponseStatusPanel} from '../src/ResponseStatus';
+export {
+  PromptField,
+  PromptFieldSubmitButton,
+  PromptTokenField,
+  AttachFileMenuItem,
+  InsertMenuButton,
+  InsertTokenMenuItem,
+  PromptFieldAttachmentList,
+  PromptFieldToolbar,
+  PromptToken
+} from '../src/PromptField';
+export {ResponseStatus, ResponseStatusTitle, ResponseStatusPanel} from '../src/ResponseStatus';
+export {Chat, Thread, ThreadItem, ThreadScrollButton} from '../src/Chat';
+export {TokenSegmentList} from '../src/TokenSegmentList';
 export {UserMessage} from '../src/UserMessage';
+
+export type {AttachmentProps, AttachmentListProps} from '../src/AttachmentList';
+export type {HorizontalCardProps, BasicCardProps} from '../src/HorizontalCard';
+export type {
+  PromptFieldProps,
+  PromptFieldSubmitButtonProps,
+  PromptTokenFieldProps,
+  PromptTokenProps,
+  PromptFieldAttachment,
+  PromptFieldAttachmentListProps,
+  PromptTokenFieldPopoverProps,
+  PromptFieldToolbarProps,
+  InsertMenuItemProps
+} from '../src/PromptField';
+export type {MessageFeedbackProps} from '../src/MessageFeedback';
+export type {MessageSourceProps, SourceListProps, SourceListItemProps} from '../src/MessageSource';
+export type {MessageSuggestionProps, MessageSuggestionListProps} from '../src/MessageSuggestion';
+export type {
+  ResponseStatusProps,
+  ResponseStatusTitleProps,
+  ResponseStatusPanelProps
+} from '../src/ResponseStatus';
+export type {ChatProps, ThreadProps, ThreadItemProps, ThreadScrollButtonProps} from '../src/Chat';
+export type {TokenSegmentListOptions} from '../src/TokenSegmentList';
+export type {UserMessageProps} from '../src/UserMessage';

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

@@ -10,22 +10,34 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMRef, forwardRefType} from '@react-types/shared';
+import {AriaLabelingProps, DOMRef, forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import {baseColor, focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {BasicHorizontalCard} from './HorizontalCard';
 import {Button} from 'react-aria-components/Button';
 import {CardProps} from '@react-spectrum/s2/Card';
 import Close from '@react-spectrum/s2/icons/Close';
-import {forwardRef, useRef} from 'react';
+import {forwardRef, ReactNode, useRef} from 'react';
 import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {ImageContext} from '@react-spectrum/s2/Image';
 import {mergeStyles} from '@react-spectrum/s2/mergeStyles';
 import {pressScale} from '@react-spectrum/s2/pressScale';
 import {ProgressCircle} from '@react-spectrum/s2/ProgressCircle';
-import {StyleProps, TagProps} from '@react-spectrum/s2';
-import {Tag, TagGroup, TagGroupProps, TagList, TagListProps} from 'react-aria-components/TagGroup';
+import {StyleString} from './types';
+import {
+  Tag,
+  TagGroup,
+  TagGroupProps,
+  TagList,
+  TagListProps,
+  TagProps
+} from 'react-aria-components/TagGroup';
 import {useDOMRef} from './useDOMRef';
 
+interface AttachmentRenderProps {
+  /** The size of the Card. */
+  size: 'XS' | 'S' | 'M' | 'L' | 'XL';
+}
+
 const controlSizeM = {
   default: 32,
   size: {
@@ -108,9 +120,29 @@ const CloseButton = function CloseButton(props) {
 
 export interface AttachmentListProps<T>
   extends
-    Omit<TagGroupProps, 'children'>,
-    StyleProps,
-    Pick<TagListProps<T>, 'items' | 'children' | 'dependencies'> {}
+    Omit<
+      TagGroupProps,
+      | 'children'
+      | 'selectionMode'
+      | 'defaultSelectedKeys'
+      | 'selectionBehavior'
+      | 'selectedKeys'
+      | 'disallowEmptySelection'
+      | 'escapeKeyBehavior'
+      | 'onSelectionChange'
+      | 'shouldSelectOnPressUp'
+      | 'onAction'
+      | 'render'
+      | 'style'
+      | 'className'
+      | keyof GlobalDOMAttributes
+    >,
+    Pick<TagListProps<T>, 'items' | 'children' | 'dependencies'> {
+  /**
+   * Spectrum-defined styles, returned by the `style()` macro.
+   */
+  styles?: StyleString;
+}
 
 export const AttachmentList = (forwardRef as forwardRefType)(function AttachmentList<T>(
   props: AttachmentListProps<T>,
@@ -137,10 +169,27 @@ export const AttachmentList = (forwardRef as forwardRefType)(function Attachment
 });
 
 export interface AttachmentProps
-  extends CardProps, AriaLabelingProps, Pick<TagProps, 'id' | 'textValue'> {
+  extends
+    Omit<CardProps, 'styles' | 'UNSAFE_className' | 'UNSAFE_style'>,
+    AriaLabelingProps,
+    Pick<TagProps, 'id' | 'textValue'> {
+  /** The children of the Attachment. */
+  children: ReactNode | ((renderProps: AttachmentRenderProps) => ReactNode);
   uploadProgress?: number;
+  /**
+   * Spectrum-defined styles, returned by the `style()` macro.
+   */
+  styles?: StyleString;
 }
 
+const tagStyles = style({
+  flexShrink: 0,
+  flexGrow: 0,
+  position: 'relative',
+  ...focusRing(),
+  borderRadius: 'default'
+});
+
 export const Attachment = forwardRef(function Attachment(
   props: AttachmentProps,
   ref: DOMRef<HTMLDivElement>
@@ -162,13 +211,7 @@ export const Attachment = forwardRef(function Attachment(
       aria-labelledby={ariaLabelledby}
       aria-describedby={ariaDescribedby}
       ref={domRef}
-      className={style({
-        flexShrink: 0,
-        flexGrow: 0,
-        position: 'relative',
-        ...focusRing(),
-        borderRadius: 'default'
-      })}>
+      className={renderProps => mergeStyles(tagStyles({...renderProps}), props.styles)}>
       <BasicHorizontalCard {...otherProps}>
         {props.uploadProgress != null && props.uploadProgress < 100 && (
           <div

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

@@ -91,7 +91,7 @@ const ThreadScrollButtonContext = createContext<ThreadScrollButtonContextValue>(
 });
 
 // TODO: make this more RAC like (aka default class name and other RAC prop)
-interface ChatProps {
+export interface ChatProps {
   className?: string;
   style?: CSSProperties;
   children?: ReactNode;
@@ -198,7 +198,7 @@ export const Chat = /*#__PURE__*/ (forwardRef as forwardRefType)(function Chat(
 });
 
 // TODO: update the items/className/children/etc type to reflect a thread specific classname once we finalize API
-interface ThreadProps<T extends object> extends Pick<
+export interface ThreadProps<T extends object> extends Pick<
   GridListProps<T>,
   'items' | 'children' | 'UNSTABLE_focusOnEntry' | 'aria-label' | 'aria-labelledby' | 'className'
 > {}
@@ -261,14 +261,19 @@ export function Thread<T extends object>(props: ThreadProps<T>) {
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledby}
       // TODO: for now we enforce this, but to be configurable?
-      style={{display: 'flex', flexDirection: 'column-reverse'}}
+      style={{
+        display: 'flex',
+        flexDirection: 'column-reverse',
+        boxSizing: 'border-box',
+        minWidth: 0
+      }}
       className={className}>
       {children}
     </GridList>
   );
 }
 
-interface ThreadScrollButtonProps {
+export interface ThreadScrollButtonProps {
   children?: ReactNode;
 }
 
@@ -310,7 +315,10 @@ function ThreadScrollButtonInner({domRef, isExiting, children}: ThreadScrollButt
 }
 
 // TODO: update the className type to reflect a thread specific classname once we finalize API
-interface ThreadItemProps extends Pick<GridListItemProps, 'className' | 'children' | 'textValue'> {
+export interface ThreadItemProps extends Pick<
+  GridListItemProps,
+  'className' | 'children' | 'textValue'
+> {
   /** Whether or not the item's content is currently being streamed in. */
   isStreaming?: boolean;
   /** Announce textValue on mount even when isStreaming is provided. */

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

@@ -39,12 +39,12 @@ import {SkeletonContext, useIsSkeleton} from '@react-spectrum/s2/Skeleton';
 import {StyleString} from './types';
 import {TextContext} from '@react-spectrum/s2/Text';
 import {useDOMRef} from './useDOMRef';
-interface CardRenderProps {
+interface HorizontalCardRenderProps {
   /** The size of the Card. */
   size: 'XS' | 'S' | 'M' | 'L' | 'XL';
 }
 
-export interface CardProps extends Omit<
+export interface HorizontalCardProps extends Omit<
   GridListItemProps,
   | 'className'
   | 'style'
@@ -57,7 +57,7 @@ export interface CardProps extends Omit<
   | keyof GlobalDOMAttributes
 > {
   /** The children of the Card. */
-  children: ReactNode | ((renderProps: CardRenderProps) => ReactNode);
+  children: ReactNode | ((renderProps: HorizontalCardRenderProps) => ReactNode);
   /**
    * The size of the Card.
    *
@@ -82,7 +82,7 @@ export interface CardProps extends Omit<
   styles?: StyleString;
 }
 
-export interface BasicCardProps extends Omit<CardProps, 'variant'> {
+export interface BasicCardProps extends Omit<HorizontalCardProps, 'variant'> {
   /**
    * The visual style of the Card.
    *
@@ -193,8 +193,7 @@ let card = style({
         XL: 80
       }
     },
-    isCardView: 'full',
-    [onlyPreview]: 68
+    isCardView: 'full'
   },
   width: {
     default: 'full',
@@ -456,7 +455,7 @@ const actionButtonSize = {
 } as const;
 
 const Card = forwardRef(function Card(
-  props: Omit<CardProps, 'variant'> & {
+  props: Omit<HorizontalCardProps, 'variant'> & {
     isBasic?: boolean;
     variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet';
   },
@@ -669,6 +668,7 @@ export interface CardPreviewProps extends DOMProps {
   styles?: StyleString;
 }
 
+// TODO: this should be the same component as the one in @react-spectrum/s2/Card
 export const CardPreview = forwardRef(function CardPreview(
   props: CardPreviewProps,
   ref: DOMRef<HTMLDivElement>
@@ -681,10 +681,7 @@ export const CardPreview = forwardRef(function CardPreview(
       {...filterDOMProps(props)}
       slot="preview"
       ref={domRef}
-      className={mergeStyles(
-        preview({size, isQuiet, isHovered, isFocusVisible, isSelected}),
-        props.styles
-      )}
+      className={preview({size, isQuiet, isHovered, isFocusVisible, isSelected})}
       style={isQuiet ? pressScale(domRef)({isPressed}) : undefined}>
       {isQuiet && <SelectionIndicator />}
       {isQuiet && isCheckboxSelection && <CardCheckbox />}
@@ -742,7 +739,7 @@ const buttonSize = {
 } as const;
 
 export const HorizontalCard = forwardRef(function HorizontalCard(
-  props: CardProps,
+  props: HorizontalCardProps,
   ref: DOMRef<HTMLDivElement>
 ) {
   let {size = 'M'} = props;

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

@@ -10,7 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMProps, DOMRef, forwardRefType} from '@react-types/shared';
+import {
+  AriaLabelingProps,
+  DOMProps,
+  DOMRef,
+  forwardRefType,
+  GlobalDOMAttributes
+} from '@react-types/shared';
 import {baseColor, focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {
   Disclosure,
@@ -28,6 +34,7 @@ import {SlotProps} from 'react-aria-components/slots';
 import {StyleString} from './types';
 import {useDOMRef} from './useDOMRef';
 import {useLocale} from 'react-aria/I18nProvider';
+
 export interface MessageSourceProps extends Omit<
   DisclosureProps,
   'isQuiet' | 'styles' | 'UNSAFE_className' | 'UNSAFE_style'
@@ -139,7 +146,8 @@ const linkStyles = style({
   disableTapHighlight: true
 });
 
-export interface SourceListItemProps extends Omit<LinkProps, 'className' | 'style'>, DOMProps {
+export interface SourceListItemProps
+  extends Omit<LinkProps, 'className' | 'style' | keyof GlobalDOMAttributes>, DOMProps {
   /** The content of the source list item. */
   children: React.ReactNode;
   /**

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

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMProps, DOMRef} from '@react-types/shared';
+import {AriaLabelingProps, DOMProps, DOMRef, GlobalDOMAttributes} from '@react-types/shared';
 import ArrowCurved from '@react-spectrum/s2/icons/ArrowCurved';
 import {
   baseColor,
@@ -42,7 +42,7 @@ const controlSizeM = {
 
 export interface MessageSuggestionProps extends Omit<
   ButtonProps,
-  'style' | 'className' | 'isPending' | 'isDisabled'
+  'style' | 'className' | 'isPending' | 'isDisabled' | keyof GlobalDOMAttributes
 > {
   /** The text content of the suggestion. */
   children: ReactNode;