Skip to content

feat: AttachmentBadge, disabled AttachmentPreview, and export scrollFade #10594

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DPandyan wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: AttachmentBadge, disabled AttachmentPreview, and export scrollFade #10594

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a40845c
add: AttachmentBadge for large thumnail AttachmentList variant
Sep 10, 2026
f74a2e5
feat: isDisabled + accompanying badge changes
Sep 12, 2026
cd6aac4
chore: export scroll fade from style macro file
Sep 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 117 additions & 36 deletions packages/@react-spectrum/ai/src/AttachmentList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,15 @@ import {
GlobalDOMAttributes
} from '@react-types/shared';
import AudioWave from '@react-spectrum/s2/icons/AudioWave';
import {Badge} from '@react-spectrum/s2/Badge';
import {
baseColor,
css,
focusRing,
iconStyle,
keyframes,
lightDark,
scrollFade,
style
} from '@react-spectrum/s2/style' with {type: 'macro'};
import {Button, ButtonProps} from 'react-aria-components/Button';
Expand All @@ -41,7 +44,7 @@ import {Image, ImageContext, ImageProps} from '@react-spectrum/s2/Image';
import {ImageCoordinator} from '@react-spectrum/s2/ImageCoordinator';
import ImageIcon from '@react-spectrum/s2/icons/Image';
import intlMessages from '../intl/*.json';
import {keyframes, scrollFade} from './tokens.macro' with {type: 'macro'};
import {matchMimeType} from './PromptField';
import {mergeStyles} from '@react-spectrum/s2/mergeStyles';
import Play from '@react-spectrum/s2/icons/Play';
import {pressScale} from '@react-spectrum/s2/pressScale';
Expand Down Expand Up @@ -132,6 +135,7 @@ const attachmentCard = style({
outlineColor: {
default: lightDark('black/3', 'white/3'),
isLoading: lightDark('black/2', 'white/2'),
isDisabled: lightDark('black/2', 'white/2'),
forcedColors: 'ButtonBorder',
isInvalid: {
default: 'negative-900',
Expand Down Expand Up @@ -210,6 +214,13 @@ const attachmentCard = style({
default: '[3px]',
[onlyPreview]: 'lg'
}
},
'--badge-visibility': {
type: 'visibility',
value: {
default: 'hidden',
[onlyPreview]: 'visible'
}
}
});

Expand Down Expand Up @@ -262,6 +273,25 @@ const attachmentContent = style({
}
});

const imageThumbnailStyles = style({
position: 'relative',
alignSelf: 'center',
flexShrink: 0,
pointerEvents: 'none',
userSelect: 'none',
size: '--image-size',
borderRadius: '--image-border-radius',
objectFit: 'cover',
outlineStyle: 'solid',
outlineWidth: 1,
outlineColor: 'gray-800/10',
outlineOffset: -1,
opacity: {
default: 1,
isDisabled: 0.3
}
});

const CloseButton = function CloseButton(props) {
let ref = useRef(null);
// oxlint-disable react/react-compiler
Expand Down Expand Up @@ -512,7 +542,7 @@ export interface AttachmentProps
'styles' | 'UNSAFE_className' | 'UNSAFE_style' | 'allowsArrowNavigation' | 'focusMode'
>,
AriaLabelingProps,
Pick<TagProps, 'id' | 'textValue' | 'render'> {
Pick<TagProps, 'id' | 'textValue' | 'render' | 'isDisabled'> {
/** The children of the Attachment. */
children: ReactNode;
uploadProgress?: number;
Expand All @@ -537,19 +567,22 @@ interface AttachmentCardProps {
size?: 'XS' | 'S' | 'M' | 'L' | 'XL';
isInvalid?: boolean;
isLoading?: boolean;
isDisabled?: boolean;
children: ReactNode;
}

function AttachmentCard({
size = 'M',
isInvalid = false,
isLoading = false,
isDisabled = false,
children
}: AttachmentCardProps) {
return (
<div
aria-invalid={isInvalid || undefined}
className={attachmentCard({size, isInvalid, isLoading})}>
aria-disabled={isDisabled || undefined}
className={attachmentCard({size, isInvalid, isLoading, isDisabled})}>
<Provider
values={[
[
Expand All @@ -558,20 +591,7 @@ function AttachmentCard({
slots: {
thumbnail: {
alt: '',
styles: style({
position: 'relative',
alignSelf: 'center',
flexShrink: 0,
pointerEvents: 'none',
userSelect: 'none',
size: '--image-size',
borderRadius: '--image-border-radius',
objectFit: 'cover',
outlineStyle: 'solid',
outlineWidth: 1,
outlineColor: 'gray-800/10',
outlineOffset: -1
})
styles: imageThumbnailStyles({isDisabled})
}
}
}
Expand Down Expand Up @@ -616,23 +636,35 @@ export const Attachment = forwardRef(function Attachment(
'aria-describedby': ariaDescribedby,
styles,
isInvalid,
isDisabled,
children,
size = 'M'
} = props;
let domRef = useDOMRef(ref);
let isLoading = props.uploadProgress != null && props.uploadProgress < 100;
let isLoading = !isDisabled && props.uploadProgress != null && props.uploadProgress < 100;
isInvalid = isInvalid && !isDisabled;
return (
<Tag
id={id}
textValue={textValue}
isDisabled={isDisabled}
aria-label={ariaLabel}
aria-labelledby={ariaLabelledby}
aria-describedby={ariaDescribedby}
ref={domRef}
className={renderProps => mergeStyles(tagStyles({...renderProps}), styles)}>
<AttachmentCard size={size} isInvalid={isInvalid} isLoading={isLoading}>
<AttachmentCard
size={size}
isInvalid={isInvalid}
isLoading={isLoading}
isDisabled={isDisabled}>
<AttachmentPreviewContext.Provider
value={{isInvalid: !!isInvalid, uploadProgress: props.uploadProgress ?? 100, size}}>
value={{
isInvalid: !!isInvalid,
isDisabled: !!isDisabled,
uploadProgress: isDisabled ? 100 : (props.uploadProgress ?? 100),
size
}}>
{children}
</AttachmentPreviewContext.Provider>
</AttachmentCard>
Expand All @@ -644,7 +676,7 @@ export const Attachment = forwardRef(function Attachment(
insetEnd: 0,
transform: 'translate(30%, -30%)'
})}>
<CloseButton size="XS" />
<CloseButton size="XS" isDisabled={isDisabled} />
</div>
</Tag>
);
Expand All @@ -655,38 +687,47 @@ const attachmentPreviewWrapper = style({
height: 32,
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
justifyContent: 'center',
opacity: {
default: 1,
isDisabled: 0.3
}
});

const AttachmentPreviewContext = createContext({
isInvalid: false,
isDisabled: false,
uploadProgress: 100,
size: 'S' as 'XS' | 'S' | 'M' | 'L' | 'XL'
});

export interface AttachmentPreviewProps extends ImageProps {
mimeType: string;
/**
* The MIME type of the attachment. Determines the fallback icon, and enables the file-type badge
* on the large thumbnail variant.
*/
mimeType?: string;
}

/**
* AttachmentPreview renders a preview of a file attachment.
*/
export function AttachmentPreview(props: AttachmentPreviewProps) {
let {mimeType, ...otherProps} = props;
let {isInvalid, uploadProgress, size} = useContext(AttachmentPreviewContext)!;
let {isInvalid, isDisabled, uploadProgress, size} = useContext(AttachmentPreviewContext)!;
let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/ai');

if (isInvalid) {
return (
<div className={attachmentPreviewWrapper}>
<div className={attachmentPreviewWrapper({isDisabled})}>
<AlertTriangleIcon size={size} />
</div>
);
}

if (uploadProgress < 100) {
return (
<div className={attachmentPreviewWrapper}>
<div className={attachmentPreviewWrapper({isDisabled})}>
<ProgressCircle
aria-label={stringFormatter.format('promptfield.uploading')}
value={uploadProgress}
Expand All @@ -697,48 +738,88 @@ export function AttachmentPreview(props: AttachmentPreviewProps) {
}

if (otherProps.src) {
return <Image {...otherProps} slot="thumbnail" />;
//only the large thumbnail variant should display the MIME type badge, and only if a
//mimeType was provided
return (
<>
<Image {...otherProps} slot="thumbnail" />
{size === 'L' && mimeType && (
<AttachmentBadge mimeType={mimeType} isDisabled={isDisabled} />
)}
</>
);
}

if (mimeType.startsWith('audio/')) {
if (matchMimeType(mimeType, ['audio/*'])) {
return (
<div className={attachmentPreviewWrapper}>
<div className={attachmentPreviewWrapper({isDisabled})}>
<AudioWave />
</div>
);
}

if (mimeType.startsWith('video/')) {
if (matchMimeType(mimeType, ['video/*'])) {
return (
<div className={attachmentPreviewWrapper}>
<div className={attachmentPreviewWrapper({isDisabled})}>
<Play />
</div>
);
}

if (mimeType.startsWith('image/')) {
if (matchMimeType(mimeType, ['image/*'])) {
return (
<div className={attachmentPreviewWrapper}>
<div className={attachmentPreviewWrapper({isDisabled})}>
<ImageIcon />
</div>
);
}

if (mimeType.startsWith('text/')) {
if (matchMimeType(mimeType, ['text/*'])) {
return (
<div className={attachmentPreviewWrapper}>
<div className={attachmentPreviewWrapper({isDisabled})}>
<FileText />
</div>
);
}

return (
<div className={attachmentPreviewWrapper}>
<div className={attachmentPreviewWrapper({isDisabled})}>
<File />
</div>
);
}

const attachmentBadgeStyles = style({
position: 'absolute',
bottom: 4,
insetStart: 4,
maxWidth: 64,
visibility: '--badge-visibility'
});

const attachmentBadgeWrapper = style({
opacity: {
default: 0.9,
isDisabled: 0.7
}
});

function AttachmentBadge({mimeType, isDisabled}: {mimeType: string; isDisabled?: boolean}) {
let label = matchMimeType(mimeType, ['application/pdf']) ? 'PDF' : 'FILE';

@snowystinger snowystinger Sep 16, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we only support two? and really only one since the other is generically "file"?

return (
<div className={attachmentBadgeWrapper({isDisabled})}>
<Badge
size="S"
variant="neutral"
fillStyle="subtle"
overflowMode="truncate"
styles={attachmentBadgeStyles}>
{label}
</Badge>
</div>
);
}

function AlertTriangleIcon({size}) {
switch (size) {
case 'XS':
Expand Down
16 changes: 13 additions & 3 deletions packages/@react-spectrum/ai/src/PromptField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,14 @@ import {Autocomplete} from 'react-aria-components/Autocomplete';
import {Button, ButtonContext} from '@react-spectrum/s2/Button';
import {Cell} from './loader/data';
import {CenterBaseline} from '@react-spectrum/s2/CenterBaseline';
import {color, css, space, style, StyleString} from '@react-spectrum/s2/style' with {type: 'macro'};
import {
color,
css,
scrollFade,
space,
style,
StyleString
} from '@react-spectrum/s2/style' with {type: 'macro'};
import {
createContext,
createRef,
Expand Down Expand Up @@ -55,7 +62,6 @@ import {
import {PromptFieldContainer} from './PromptFieldContainer';
import {PromptFocusContext} from './Chat';
import {Provider} from 'react-aria-components/slots';
import {scrollFade} from './tokens.macro' with {type: 'macro'};
import Send from '@react-spectrum/s2/icons/ArrowUpSend';
import {setTokenFieldSelection} from 'react-aria/useTokenField';
import Stop from '@react-spectrum/s2/icons/StopProcessing';
Expand Down Expand Up @@ -256,7 +262,11 @@ const PromptFieldContext = createContext<PromptFieldState & {size: 'S' | 'M'}>({
// aka the difference between a slash command and using the + menu which won't have filter text
const PromptCompletionAnchorContext = createContext<Position | null>(null);

function matchMimeType(mimeType: string, acceptedMimeTypes: string[]): boolean {
export function matchMimeType(mimeType: string | undefined, acceptedMimeTypes: string[]): boolean {
if (!mimeType) {
return false;
}

return acceptedMimeTypes.some(type => {
if (type === '*/*') {
return true;
Expand Down
9 changes: 7 additions & 2 deletions packages/@react-spectrum/ai/src/PromptFieldContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,17 @@ import {
convertColor,
defaultBrand,
defineProperties,
keyframes,
outerBorderStops,
stops,
token
} from './tokens.macro' with {type: 'macro'};
import {color, css, style, StyleString} from '@react-spectrum/s2/style' with {type: 'macro'};
import {
color,
css,
keyframes,
style,
StyleString
} from '@react-spectrum/s2/style' with {type: 'macro'};
import {getEventTarget, nodeContains} from 'react-aria/private/utils/shadowdom/DOMFunctions';
import {Group, GroupProps} from 'react-aria-components/Group';
import {isFocusable} from 'react-aria/private/utils/isFocusable';
Expand Down
Loading