chore: setup AI exports

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

@@ -1 +1,3 @@
 export {Attachment, AttachmentList} from '../src/AttachmentList';
+
+export type {AttachmentProps, AttachmentListProps} from '../src/AttachmentList';

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

@@ -1,2 +1,2 @@
 export {BasicHorizontalCard, HorizontalCard, CardPreview} from '../src/HorizontalCard';
-export type {CardProps, BasicCardProps} from '../src/HorizontalCard';
+export type {HorizontalCardProps, BasicCardProps} from '../src/HorizontalCard';

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

@@ -1 +1,3 @@
 export {MessageFeedback} from '../src/MessageFeedback';
+
+export type {MessageFeedbackProps} from '../src/MessageFeedback';

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

@@ -1 +1,3 @@
 export {MessageSuggestion, MessageSuggestionList} from '../src/MessageSuggestion';
+
+export type {MessageSuggestionProps, MessageSuggestionListProps} from '../src/MessageSuggestion';

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

@@ -0,0 +1,8 @@
+export {Thread, ThreadItem, ThreadList, ThreadScrollButton} from '../src/Thread';
+
+export type {
+  ThreadProps,
+  ThreadItemProps,
+  ThreadListProps,
+  ThreadScrollButtonProps
+} from '../src/Thread';

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

@@ -1 +1,3 @@
 export {UserMessage} from '../src/UserMessage';
+
+export type {UserMessageProps} from '../src/UserMessage';

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

@@ -2,5 +2,23 @@ export {Attachment, AttachmentList} from '../src/AttachmentList';
 export {BasicHorizontalCard, HorizontalCard} from '../src/HorizontalCard';
 export {MessageFeedback} from '../src/MessageFeedback';
 export {MessageSuggestion, MessageSuggestionList} from '../src/MessageSuggestion';
-export {ResponseStatus, ResponseStatusPanel} from '../src/ResponseStatus';
+export {ResponseStatus, ResponseStatusTitle, ResponseStatusPanel} from '../src/ResponseStatus';
+export {Thread, ThreadItem, ThreadList, ThreadScrollButton} from '../src/Thread';
 export {UserMessage} from '../src/UserMessage';
+
+export type {AttachmentProps, AttachmentListProps} from '../src/AttachmentList';
+export type {HorizontalCardProps, BasicCardProps} from '../src/HorizontalCard';
+export type {MessageFeedbackProps} from '../src/MessageFeedback';
+export type {MessageSuggestionProps, MessageSuggestionListProps} from '../src/MessageSuggestion';
+export type {
+  ResponseStatusProps,
+  ResponseStatusTitleProps,
+  ResponseStatusPanelProps
+} from '../src/ResponseStatus';
+export type {
+  ThreadProps,
+  ThreadItemProps,
+  ThreadListProps,
+  ThreadScrollButtonProps
+} from '../src/Thread';
+export type {UserMessageProps} from '../src/UserMessage';

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

@@ -16,13 +16,22 @@ 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 {mergeStyles} from '@react-spectrum/s2/mergeStyles';
 import {pressScale} from '@react-spectrum/s2/pressScale';
-import {Tag, TagGroup, TagList} from 'react-aria-components/TagGroup';
+import type {StyleProps} from '@react-spectrum/s2';
+import {Tag, TagGroup, TagGroupProps, TagList} from 'react-aria-components/TagGroup';
 import {useDOMRef} from './useDOMRef';
 
+export interface AttachmentListProps extends TagGroupProps, StyleProps {
+  children: ReactNode;
+}
+
+export interface AttachmentProps extends CardProps {
+  children: ReactNode;
+}
+
 const controlSizeM = {
   default: 32,
   size: {
@@ -104,7 +113,7 @@ const CloseButton = function CloseButton(props) {
 };
 
 export const AttachmentList = forwardRef(function AttachmentList(
-  props: any,
+  props: AttachmentListProps,
   ref: DOMRef<HTMLDivElement>
 ) {
   let domRef = useDOMRef(ref);

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.
    *
@@ -456,7 +456,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 +669,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 +682,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 +740,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

@@ -28,6 +28,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'

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

@@ -61,7 +61,7 @@ const ThreadScrollButtonContext = createContext<ThreadScrollButtonContextValue>(
 });
 
 // TODO: make this more RAC like (aka default class name and other RAC prop)
-interface ThreadProps {
+export interface ThreadProps {
   className?: string;
   style?: CSSProperties;
   children?: ReactNode;
@@ -157,7 +157,7 @@ export const Thread = /*#__PURE__*/ (forwardRef as forwardRefType)(function Thre
 });
 
 // TODO: update the items/className/children/etc type to reflect a thread specific classname once we finalize API
-interface ThreadListProps<T extends object> extends Pick<
+export interface ThreadListProps<T extends object> extends Pick<
   GridListProps<T>,
   'items' | 'children' | 'focusOnEntry' | 'aria-label' | 'aria-labelledby' | 'className'
 > {}
@@ -249,7 +249,7 @@ export function ThreadList<T extends object>(props: ThreadListProps<T>) {
   );
 }
 
-interface ThreadScrollButtonProps {
+export interface ThreadScrollButtonProps {
   children?: ReactNode;
 }
 
@@ -271,7 +271,10 @@ export function ThreadScrollButton({children}: ThreadScrollButtonProps) {
 }
 
 // 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/stories/AttachmentList.stories.tsx

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {
+  Attachment as AttachmentComponent,
+  AttachmentList,
+  type AttachmentListProps
+} from '@react-spectrum/ai/AttachmentList';
+import {Content} from '@react-spectrum/s2/Content';
+import {Image} from '@react-spectrum/s2/Image';
+import type {Meta, StoryObj} from '@storybook/react';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {Text} from '@react-spectrum/s2/Text';
+
+const meta: Meta<AttachmentListProps> = {
+  component: AttachmentList,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    children: {table: {disable: true}}
+  },
+  title: 'AI/AttachmentList'
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AttachmentList>;
+
+export const AIAttachmentList: Story = {
+  render: args => (
+    <AttachmentList {...args} styles={style({width: 500})}>
+      <AttachmentComponent aria-label="Demo file.pdf">
+        <Image
+          slot="thumbnail"
+          src={new URL('../../s2/stories/assets/placeholder.png', import.meta.url).toString()}
+        />
+      </AttachmentComponent>
+      <AttachmentComponent aria-label="Alligator.pdf">
+        <Image
+          slot="thumbnail"
+          src={new URL('../../s2/stories/assets/placeholder.png', import.meta.url).toString()}
+        />
+      </AttachmentComponent>
+      <AttachmentComponent aria-label="Rules.pdf">
+        <Image
+          slot="thumbnail"
+          src={new URL('../../s2/stories/assets/placeholder.png', import.meta.url).toString()}
+        />
+      </AttachmentComponent>
+      <AttachmentComponent aria-label="Echidna.pdf">
+        <Image
+          slot="thumbnail"
+          src={new URL('../../s2/stories/assets/placeholder.png', import.meta.url).toString()}
+        />
+        <Content>
+          <Text slot="title">Card title</Text>
+          <Text slot="description">Card description.</Text>
+        </Content>
+      </AttachmentComponent>
+    </AttachmentList>
+  )
+};