diff --git a/packages/@react-spectrum/ai/src/Chat.tsx b/packages/@react-spectrum/ai/src/Chat.tsx
index 896eb42c226..841ce794d74 100644
--- a/packages/@react-spectrum/ai/src/Chat.tsx
+++ b/packages/@react-spectrum/ai/src/Chat.tsx
@@ -10,15 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
+import {ActionButton} from '@react-spectrum/s2';
 import {announce} from 'react-aria/private/live-announcer/LiveAnnouncer';
 import {ButtonContext} from 'react-aria-components/Button';
+import ChevronDown from '@react-spectrum/s2/icons/ChevronDown';
 import {
   CollectionRendererContext,
   createLeafComponent
 } from 'react-aria-components/CollectionBuilder';
 import {
   createContext,
-  CSSProperties,
   ForwardedRef,
   forwardRef,
   ReactNode,
@@ -34,6 +35,7 @@ import {DEFAULT_SLOT, Provider} from 'react-aria-components/slots';
 import {DOMRef, forwardRefType, Node} from '@react-types/shared';
 import {filterDOMProps} from 'react-aria/filterDOMProps';
 import {focusRing, style, StyleString} from '@react-spectrum/s2/style' with {type: 'macro'};
+// @ts-ignore
 import {
   GridList,
   GridListItem,
@@ -42,12 +44,12 @@ import {
   GridListProps
 } from 'react-aria-components/GridList';
 import {inertValue} from 'react-aria/private/utils/inertValue';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import {ListLayout} from './ListLayout';
 import {ListStateContext} from 'react-aria-components/ListBox';
 import {LoaderNode} from 'react-aria/private/collections/BaseCollection';
 import {mergeStyles} from '@react-spectrum/s2/mergeStyles';
+import {scrollFade} from './tokens.macro' with {type: 'macro'};
 import {useDOMRef} from './useDOMRef';
 import {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';
 import {useFocusWithin} from 'react-aria/useFocusWithin';
@@ -88,12 +90,16 @@ interface InternalChatContextValue {
   announceItem: (text: string) => void;
   setIsNearBottom: (isNear: boolean) => void;
   setScrollElement: (element: HTMLElement | null) => void;
+  promptFieldSize: 'S' | 'M';
+  setPromptFieldSize: (size: 'S' | 'M') => void;
 }
 
-const InternalChatContext = createContext<InternalChatContextValue>({
+export const InternalChatContext = createContext<InternalChatContextValue>({
   announceItem: text => announce(text, 'polite'),
   setIsNearBottom: () => {},
-  setScrollElement: () => {}
+  setScrollElement: () => {},
+  promptFieldSize: 'M',
+  setPromptFieldSize: () => {}
 });
 
 interface ThreadScrollButtonContextValue {
@@ -159,6 +165,7 @@ export const Chat = /*#__PURE__*/ (forwardRef as forwardRefType)(function Chat(
     el.scrollTo({top: el.scrollHeight - el.clientHeight, behavior: 'smooth'});
   }, []);
   let [isNearBottom, setIsNearBottom] = useState(true);
+  let [promptFieldSize, setPromptFieldSize] = useState<'S' | 'M'>('M');
 
   // only announce new items if user is in the prompt field, otherwise if they
   // are outside the field, only announce there are new responses. If not in chat at all, don't announce
@@ -209,7 +216,10 @@ export const Chat = /*#__PURE__*/ (forwardRef as forwardRefType)(function Chat(
   return (
     <Provider
       values={[
-        [InternalChatContext, {announceItem, setIsNearBottom, setScrollElement}],
+        [
+          InternalChatContext,
+          {announceItem, setIsNearBottom, setScrollElement, promptFieldSize, setPromptFieldSize}
+        ],
         [
           ThreadScrollButtonContext,
           {
@@ -227,7 +237,23 @@ export const Chat = /*#__PURE__*/ (forwardRef as forwardRefType)(function Chat(
           }
         ]
       ]}>
-      <div ref={domRef} className={styles} {...focusWithinProps}>
+      <div
+        ref={domRef}
+        className={mergeStyles(
+          style({
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+            flexGrow: 1,
+            paddingX: 16,
+            boxSizing: 'border-box',
+            minWidth: 0,
+            containerType: 'size',
+            height: 'full'
+          }),
+          styles
+        )}
+        {...focusWithinProps}>
         {children}
       </div>
     </Provider>
@@ -265,7 +291,7 @@ export function Thread<T extends object>(props: ThreadProps<T>) {
     'aria-labelledby': ariaLabelledby
   } = props;
 
-  let {setIsNearBottom, setScrollElement} = useContext(InternalChatContext);
+  let {setIsNearBottom, setScrollElement, promptFieldSize} = useContext(InternalChatContext);
   let isNearBottomRef = useRef(true);
   let gridListRef = useRef<HTMLDivElement | null>(null);
   let callbackRef = useCallback(
@@ -288,39 +314,89 @@ export function Thread<T extends object>(props: ThreadProps<T>) {
   }, [setIsNearBottom, scrollEndThreshold]);
 
   return (
-    <Virtualizer
-      layout={ListLayout}
-      layoutOptions={{
-        estimatedRowHeight: 100,
-        padding: 4,
-        gap: 8,
-        anchorTo: 'end',
-        loaderSize: 48,
-        scrollEndThreshold
-      }}
-      shouldObserveItemSize>
-      <GridList
-        ref={callbackRef}
-        disallowTypeAhead
-        onScroll={handleScroll}
-        keyboardNavigationBehavior="tab"
-        UNSTABLE_focusOnEntry="last"
-        items={items}
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledby}
-        // TODO: for now we enforce this, but to be configurable?
-        style={
-          {
+    <div
+      className={mergeStyles(
+        style({
+          position: 'relative',
+          flexGrow: 1,
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          minWidth: 0
+        }),
+        styles
+      )}>
+      <div
+        className={mergeStyles(
+          style({
+            position: 'relative',
+            flexGrow: 1,
+            overflow: 'hidden',
             display: 'flex',
-            boxSizing: 'border-box',
-            minWidth: 0,
-            scrollbarGutter: 'stable'
-          } as CSSProperties
-        }
-        className={styles}>
-        {children}
-      </GridList>
-    </Virtualizer>
+            flexDirection: 'column',
+            minWidth: 0
+          }),
+          styles
+        )}>
+        <div
+          className={style({
+            position: 'absolute',
+            bottom: 16,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            zIndex: 1
+          })}>
+          <ThreadScrollButton>
+            <ActionButton slot="scroll" aria-label="Scroll to bottom">
+              <ChevronDown />
+            </ActionButton>
+          </ThreadScrollButton>
+        </div>
+        <Virtualizer
+          layout={ListLayout}
+          layoutOptions={{
+            estimatedRowHeight: 100,
+            padding: promptFieldSize === 'S' ? 16 : 24,
+            gap: 16,
+            anchorTo: 'end',
+            loaderSize: 48,
+            scrollEndThreshold
+          }}
+          shouldObserveItemSize>
+          <GridList
+            ref={callbackRef}
+            disallowTypeAhead
+            onScroll={handleScroll}
+            keyboardNavigationBehavior="tab"
+            UNSTABLE_focusOnEntry="last"
+            items={items}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledby}
+            // TODO: for now we enforce this, but to be configurable?
+            className={
+              scrollFade({y: 32}) +
+              ' ' +
+              style({
+                display: 'flex',
+                boxSizing: 'border-box',
+                minWidth: 0,
+                scrollbarGutter: 'stable',
+                flexGrow: 1,
+                overflowX: 'hidden',
+                overflowY: 'auto',
+                scrollPadding: {
+                  default: 24,
+                  promptFieldSize: {
+                    S: 16
+                  }
+                }
+              })({promptFieldSize})
+            }>
+            {children}
+          </GridList>
+        </Virtualizer>
+      </div>
+    </div>
   );
 }
 
diff --git a/packages/@react-spectrum/ai/src/PromptField.tsx b/packages/@react-spectrum/ai/src/PromptField.tsx
index cb2ef79305b..39723ea5983 100644
--- a/packages/@react-spectrum/ai/src/PromptField.tsx
+++ b/packages/@react-spectrum/ai/src/PromptField.tsx
@@ -34,6 +34,7 @@ import {
 import {FocusableRef} from '@react-types/shared';
 import {getInteractionModality} from 'react-aria/private/interactions/useFocusVisible';
 import {IconContext, MenuTriggerProps} from '@react-spectrum/s2';
+import {InternalChatContext, PromptFocusContext} from './Chat';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {isFileDropItem, useDrop} from 'react-aria-components/useDrop';
@@ -53,7 +54,6 @@ import {
   TokenSegment
 } from 'react-stately/useTokenFieldState';
 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';
@@ -329,6 +329,10 @@ export const PromptField = forwardRef(function PromptField(
   let [isListening, setListening] = useState(false);
   let {onFocusChange} = useContext(PromptFocusContext);
   let {focusWithinProps} = useFocusWithin({onFocusWithinChange: onFocusChange});
+  let {setPromptFieldSize} = useContext(InternalChatContext);
+  useEffect(() => {
+    setPromptFieldSize(size);
+  }, [setPromptFieldSize, size]);
 
   let isPromptControlled = props.value !== undefined;
   let isAttachmentsControlled = props.attachments !== undefined;
diff --git a/packages/@react-spectrum/ai/stories/Chat.stories.tsx b/packages/@react-spectrum/ai/stories/Chat.stories.tsx
index 25535f6ae81..c94512ae86f 100644
--- a/packages/@react-spectrum/ai/stories/Chat.stories.tsx
+++ b/packages/@react-spectrum/ai/stories/Chat.stories.tsx
@@ -16,7 +16,6 @@ import {ActionMenu} from '@react-spectrum/s2/ActionMenu';
 import {AssetCard, CardPreview} from '@react-spectrum/s2/Card';
 import {Chat} from '../src/Chat';
 import ChatIcon from '@react-spectrum/s2/icons/Chat';
-import ChevronDown from '@react-spectrum/s2/icons/ChevronDown';
 import {Collection} from 'react-aria-components';
 import {Content} from '@react-spectrum/s2/Content';
 import {DialogTrigger, Popover} from '@react-spectrum/s2/Popover';
@@ -40,7 +39,6 @@ import {
   Thread,
   ThreadItem,
   ThreadLoadMoreItem,
-  ThreadScrollButton,
   TokenFieldValue,
   UserMessage
 } from '@react-spectrum/ai';
@@ -483,160 +481,106 @@ export function VirtualizedStreamingChat() {
   }
 
   return (
-    // TODO: these extra div wrappers would need to be implemented by the RAC user, maybe we can internalize some more?
-    // of particular note is the scroll button. Same for the other styles
-    <div
-      className={style({
-        margin: 0,
-        marginX: 'auto',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 32,
-        height: '100%'
-      })}>
-      <Chat
-        styles={style({
-          display: 'flex',
-          flexDirection: 'column',
-          overflow: 'hidden',
-          flexGrow: 1,
-          gap: 16,
-          paddingX: 16,
-          boxSizing: 'border-box',
-          minWidth: 0,
-          containerType: 'size'
-        })}>
-        <div
-          className={style({
-            position: 'relative',
-            flexGrow: 1,
-            overflow: 'hidden',
-            display: 'flex',
-            flexDirection: 'column',
-            minWidth: 0
-          })}>
-          <div
-            className={style({
-              position: 'absolute',
-              bottom: 16,
-              left: '50%',
-              transform: 'translateX(-50%)',
-              zIndex: 1
-            })}>
-            <ThreadScrollButton>
-              <ActionButton slot="scroll" aria-label="Scroll to bottom">
-                <ChevronDown />
-              </ActionButton>
-            </ThreadScrollButton>
-          </div>
-          <Thread
-            items={messages}
-            aria-label="Chat thread"
-            styles={style({
-              flexGrow: 1,
-              overflowX: 'hidden',
-              overflowY: 'auto',
-              scrollPadding: 8,
-              rowGap: 16
-            })}>
-            {(msg: StreamingMessage) => {
-              if (msg.type === 'user') {
-                // TODO: probably want ThreadItem to be a part of UserMessage?
-                return (
-                  <ThreadItem
-                    textValue={msg.content}
-                    styles={style({display: 'flex', justifyContent: 'end'})}>
-                    <UserMessage>{msg.content}</UserMessage>
-                  </ThreadItem>
-                );
-              }
-              if (msg.type === 'status') {
-                return <StatusThreadItem msg={msg} />;
-              }
-              if (msg.type === 'card') {
-                return (
-                  <CardMessage
-                    title={msg.title}
-                    description={msg.description}
-                    imageUrl={msg.imageUrl}
-                  />
-                );
-              }
-              if (msg.type === 'suggestions') {
-                // TODO: probably should have ThreadItem auto wrap MessageSuggestionList as well
-                // but this one I could see perhaps being a standalone component to be used outside of thread
-                return (
-                  <ThreadItem textValue={msg.title}>
-                    <MessageSuggestionList title={msg.title}>
-                      {msg.suggestions.map((s, i) => (
-                        <MessageSuggestion key={i}>{s}</MessageSuggestion>
-                      ))}
-                    </MessageSuggestionList>
-                  </ThreadItem>
-                );
-              }
-              return (
-                <SystemMessage
-                  textValue={msg.content}
-                  isStreaming={msg.isStreaming}
-                  sources={msg.sources}>
-                  <div role="document">
-                    <p className={style({font: 'body'})}>{msg.content || ''}</p>
-                  </div>
-                  {!msg.isStreaming && <MessageFeedback />}
-                </SystemMessage>
-              );
-            }}
-          </Thread>
-        </div>
-        <PromptField
-          value={promptValue}
-          onChange={setPromptValue}
-          onSubmit={prompt => {
-            setPromptValue(new PromptFieldValue([]));
-            handleSend(prompt);
-          }}
-          isGenerating={isGenerating}
-          onStop={handleStop}>
-          <PromptTokenField
-            placeholder={
-              isGenerating
-                ? 'Type to steer (Enter) or queue a follow-up (Option+Enter) · Esc to stop'
-                : undefined
+    <Chat>
+      <Thread items={messages} aria-label="Chat thread">
+        {(msg: StreamingMessage) => {
+          if (msg.type === 'user') {
+            return (
+              <ThreadItem
+                textValue={msg.content}
+                styles={style({display: 'flex', justifyContent: 'end'})}>
+                <UserMessage>{msg.content}</UserMessage>
+              </ThreadItem>
+            );
+          }
+          if (msg.type === 'status') {
+            return <StatusThreadItem msg={msg} />;
+          }
+          if (msg.type === 'card') {
+            return (
+              <CardMessage
+                title={msg.title}
+                description={msg.description}
+                imageUrl={msg.imageUrl}
+              />
+            );
+          }
+          if (msg.type === 'suggestions') {
+            // TODO: probably should have ThreadItem auto wrap MessageSuggestionList as well
+            // but this one I could see perhaps being a standalone component to be used outside of thread
+            // DG: maybe we could auto-wrap if it's inside a Thread?
+            // YL: If we auto-wrap, we would need to move some ThreadItem props (isStreaming, textValue) to the ai component level. Might be strange to have those props when used standalone
+            return (
+              <ThreadItem textValue={msg.title}>
+                <MessageSuggestionList title={msg.title}>
+                  {msg.suggestions.map((s, i) => (
+                    <MessageSuggestion key={i}>{s}</MessageSuggestion>
+                  ))}
+                </MessageSuggestionList>
+              </ThreadItem>
+            );
+          }
+          return (
+            <SystemMessage
+              textValue={msg.content}
+              isStreaming={msg.isStreaming}
+              sources={msg.sources}>
+              {/* TODO: make this a component? Build it into SystemMessage? */}
+              <div role="document" className={prose()}>
+                <p className={style({font: 'body'})}>{msg.content || ''}</p>
+              </div>
+              {!msg.isStreaming && <MessageFeedback styles={style({marginTop: 8})} />}
+            </SystemMessage>
+          );
+        }}
+      </Thread>
+      <PromptField
+        value={promptValue}
+        onChange={setPromptValue}
+        onSubmit={prompt => {
+          setPromptValue(new PromptFieldValue([]));
+          handleSend(prompt);
+        }}
+        isGenerating={isGenerating}
+        onStop={handleStop}>
+        <PromptTokenField
+          placeholder={
+            isGenerating
+              ? 'Type to steer (Enter) or queue a follow-up (Option+Enter) · Esc to stop'
+              : undefined
+          }
+          onKeyDown={e => {
+            if (!isGenerating) {
+              return;
             }
-            onKeyDown={e => {
-              if (!isGenerating) {
-                return;
-              }
 
-              // TODO: we could make this even more realistic but for now just fire storybook event
-              // and add follow up message to queue
-              if (e.key === 'Enter' && !e.altKey) {
-                e.preventDefault();
-                if (promptValue.segments.length > 0) {
-                  action('onSteer')(promptValue.toString());
-                  setPromptValue(new PromptFieldValue([]));
-                }
-              } else if (e.key === 'Enter' && e.altKey) {
-                e.preventDefault();
-                if (promptValue.segments.length > 0) {
-                  action('onFollowUp')(promptValue.toString());
-                  followUpMessage.current = promptValue;
-                  setPromptValue(new PromptFieldValue([]));
-                }
-              } else if (e.key === 'Escape') {
-                e.preventDefault();
-                handleStop();
+            // TODO: we could make this even more realistic but for now just fire storybook event
+            // and add follow up message to queue
+            if (e.key === 'Enter' && !e.altKey) {
+              e.preventDefault();
+              if (promptValue.segments.length > 0) {
+                action('onSteer')(promptValue.toString());
+                setPromptValue(new PromptFieldValue([]));
               }
-            }}
-          />
-          <PromptFieldToolbar>
-            <div />
-            <PromptFieldSubmitButton />
-          </PromptFieldToolbar>
-        </PromptField>
-      </Chat>
-    </div>
+            } else if (e.key === 'Enter' && e.altKey) {
+              e.preventDefault();
+              if (promptValue.segments.length > 0) {
+                action('onFollowUp')(promptValue.toString());
+                followUpMessage.current = promptValue;
+                setPromptValue(new PromptFieldValue([]));
+              }
+            } else if (e.key === 'Escape') {
+              e.preventDefault();
+              handleStop();
+            }
+          }}
+        />
+        <PromptFieldToolbar>
+          <div />
+          <PromptFieldSubmitButton />
+        </PromptFieldToolbar>
+      </PromptField>
+    </Chat>
   );
 }
 
@@ -696,119 +640,65 @@ export function EmptyChat() {
   }
 
   return (
-    <div
-      className={style({
-        margin: 0,
-        marginX: 'auto',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 32,
-        height: '100%'
-      })}>
-      <Chat
-        styles={style({
-          display: 'flex',
-          flexDirection: 'column',
-          overflow: 'hidden',
-          flexGrow: 1,
-          gap: 16,
-          paddingX: 16,
-          boxSizing: 'border-box',
-          minWidth: 0,
-          containerType: 'size'
-        })}>
-        <div
-          className={style({
-            position: 'relative',
-            flexGrow: 1,
-            overflow: 'hidden',
-            display: 'flex',
-            flexDirection: 'column',
-            minWidth: 0
-          })}>
-          <div
-            className={style({
-              position: 'absolute',
-              bottom: 16,
-              left: '50%',
-              transform: 'translateX(-50%)',
-              zIndex: 1
-            })}>
-            <ThreadScrollButton>
-              <ActionButton slot="scroll" aria-label="Scroll to bottom">
-                <ChevronDown />
-              </ActionButton>
-            </ThreadScrollButton>
-          </div>
-          <Thread
-            items={messages}
-            aria-label="Chat thread"
-            styles={style({
-              flexGrow: 1,
-              overflowX: 'hidden',
-              overflowY: 'auto',
-              scrollPadding: 8,
-              rowGap: 16
-            })}>
-            {(msg: StreamingMessage) => {
-              if (msg.type === 'user') {
-                return (
-                  <ThreadItem
-                    textValue={msg.content}
-                    styles={style({display: 'flex', justifyContent: 'end'})}>
-                    <UserMessage>{msg.content}</UserMessage>
-                  </ThreadItem>
-                );
-              }
-              if (msg.type === 'status') {
-                return <StatusThreadItem msg={msg} />;
-              }
-              if (msg.type === 'card') {
-                return (
-                  <CardMessage
-                    title={msg.title}
-                    description={msg.description}
-                    imageUrl={msg.imageUrl}
-                  />
-                );
-              }
-              if (msg.type === 'suggestions') {
-                return (
-                  <ThreadItem textValue={msg.title}>
-                    <MessageSuggestionList title={msg.title}>
-                      {msg.suggestions.map((s, i) => (
-                        <MessageSuggestion key={i}>{s}</MessageSuggestion>
-                      ))}
-                    </MessageSuggestionList>
-                  </ThreadItem>
-                );
-              }
-              return (
-                <SystemMessage textValue={msg.content} isStreaming={msg.isStreaming}>
-                  <div role="document">
-                    <p className={style({font: 'body'})}>{msg.content || ''}</p>
-                  </div>
-                  {!msg.isStreaming && <MessageFeedback />}
-                </SystemMessage>
-              );
-            }}
-          </Thread>
+    <Chat>
+      <Thread items={messages} aria-label="Chat thread">
+        {(msg: StreamingMessage) => {
+          if (msg.type === 'user') {
+            return (
+              <ThreadItem
+                textValue={msg.content}
+                styles={style({display: 'flex', justifyContent: 'end'})}>
+                <UserMessage>{msg.content}</UserMessage>
+              </ThreadItem>
+            );
+          }
+          if (msg.type === 'status') {
+            return <StatusThreadItem msg={msg} />;
+          }
+          if (msg.type === 'card') {
+            return (
+              <CardMessage
+                title={msg.title}
+                description={msg.description}
+                imageUrl={msg.imageUrl}
+              />
+            );
+          }
+          if (msg.type === 'suggestions') {
+            return (
+              <ThreadItem textValue={msg.title}>
+                <MessageSuggestionList title={msg.title}>
+                  {msg.suggestions.map((s, i) => (
+                    <MessageSuggestion key={i}>{s}</MessageSuggestion>
+                  ))}
+                </MessageSuggestionList>
+              </ThreadItem>
+            );
+          }
+          return (
+            <SystemMessage textValue={msg.content} isStreaming={msg.isStreaming}>
+              <div role="document">
+                <p className={style({font: 'body'})}>{msg.content || ''}</p>
+              </div>
+              {!msg.isStreaming && <MessageFeedback />}
+            </SystemMessage>
+          );
+        }}
+      </Thread>
+      <PromptField
+        onSubmit={handleSend}
+        isGenerating={isGenerating}
+        onStop={() => {
+          setGenerating(false);
+          timeouts.current.forEach(clearTimeout);
+          timeouts.current = [];
+        }}>
+        <div className={style({display: 'flex', gap: 16, height: 'full'})}>
+          <PromptTokenField />
+          <PromptFieldSubmitButton />
         </div>
-        <PromptField
-          onSubmit={handleSend}
-          isGenerating={isGenerating}
-          onStop={() => {
-            setGenerating(false);
-            timeouts.current.forEach(clearTimeout);
-            timeouts.current = [];
-          }}>
-          <div className={style({display: 'flex', gap: 16, height: 'full'})}>
-            <PromptTokenField />
-            <PromptFieldSubmitButton />
-          </div>
-        </PromptField>
-      </Chat>
-    </div>
+      </PromptField>
+    </Chat>
   );
 }
 
@@ -875,28 +765,8 @@ export function ChatPopover() {
         <ChatIcon />
       </ActionButton>
       <Popover styles={style({width: 400, height: 520})}>
-        <Chat
-          styles={style({
-            display: 'flex',
-            flexDirection: 'column',
-            overflow: 'hidden',
-            height: 'full',
-            gap: 16,
-            boxSizing: 'border-box',
-            minWidth: 0,
-            containerType: 'size'
-          })}>
-          <Thread
-            items={messages}
-            aria-label="Chat thread"
-            styles={style({
-              flexGrow: 1,
-              overflowX: 'hidden',
-              overflowY: 'auto',
-              padding: 8,
-              scrollPadding: 8,
-              rowGap: 16
-            })}>
+        <Chat>
+          <Thread items={messages} aria-label="Chat thread">
             {(msg: PopoverMessage) => {
               if (msg.type === 'user') {
                 return (
@@ -1236,77 +1106,160 @@ export function AsyncLoadingChat() {
   const {messages, isLoadingMore, handleLoadMore, hasMore} = useAsyncMessages();
 
   return (
-    <div
-      className={style({
-        margin: 0,
-        marginX: 'auto',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 32,
-        height: '100%'
-      })}>
-      <Chat
-        styles={style({
-          display: 'flex',
-          flexDirection: 'column',
-          overflow: 'hidden',
-          flexGrow: 1,
-          gap: 16,
-          paddingX: 16,
-          boxSizing: 'border-box',
-          minWidth: 0,
-          containerType: 'size'
-        })}>
-        <div
-          className={style({
-            position: 'relative',
-            flexGrow: 1,
-            overflow: 'hidden',
-            display: 'flex',
-            flexDirection: 'column',
-            minWidth: 0
-          })}>
-          <div
-            className={style({
-              position: 'absolute',
-              bottom: 16,
-              left: '50%',
-              transform: 'translateX(-50%)',
-              zIndex: 1
-            })}>
-            <ThreadScrollButton>
-              <ActionButton slot="scroll" aria-label="Scroll to bottom">
-                <ChevronDown />
-              </ActionButton>
-            </ThreadScrollButton>
+    <Chat>
+      <Thread aria-label="Chat">
+        <ThreadLoadMoreItem
+          isLoading={isLoadingMore}
+          onLoadMore={hasMore ? handleLoadMore : undefined}>
+          <div className={style({display: 'flex', justifyContent: 'center', padding: 8})}>
+            <ProgressCircle aria-label="Loading older messages" isIndeterminate />
           </div>
-          <Thread
-            aria-label="Chat"
-            styles={style({
-              flexGrow: 1,
-              overflowX: 'hidden',
-              overflowY: 'auto',
-              padding: 8,
-              scrollPadding: 8,
-              rowGap: 16
-            })}>
-            <ThreadLoadMoreItem
-              isLoading={isLoadingMore}
-              onLoadMore={hasMore ? handleLoadMore : undefined}>
-              <div className={style({display: 'flex', justifyContent: 'center', padding: 8})}>
-                <ProgressCircle aria-label="Loading older messages" isIndeterminate />
-              </div>
-            </ThreadLoadMoreItem>
-            <Collection items={messages}>{renderAsyncMessage}</Collection>
-          </Thread>
+        </ThreadLoadMoreItem>
+        <Collection items={messages}>{renderAsyncMessage}</Collection>
+      </Thread>
+      <PromptField>
+        <div className={style({display: 'flex', gap: 16, height: 'full'})}>
+          <PromptTokenField />
+          <PromptFieldSubmitButton />
         </div>
-        <PromptField>
-          <div className={style({display: 'flex', gap: 16, height: 'full'})}>
-            <PromptTokenField />
-            <PromptFieldSubmitButton />
-          </div>
-        </PromptField>
-      </Chat>
-    </div>
+      </PromptField>
+    </Chat>
+  );
+}
+
+let initialMessages: StreamingMessage[] = [
+  {id: 1, type: 'user', content: "What's a good cat breed for a small apartment?"},
+  {
+    id: 2,
+    type: 'system',
+    content:
+      "Russian Blues and British Shorthairs do well in apartments. They're calm, quiet, and don't need a lot of space to stay happy."
+  },
+  {id: 3, type: 'user', content: 'Do they need a lot of grooming?'},
+  {
+    id: 4,
+    type: 'system',
+    content:
+      'Not much. Both have short, dense coats, so a weekly brush is usually enough to keep shedding under control.'
+  },
+  {
+    id: 5,
+    type: 'user',
+    content: 'Good to know. Are they okay to leave alone during a full workday?'
+  },
+  {
+    id: 6,
+    type: 'system',
+    content:
+      "Yes, they're pretty independent. Just make sure they have fresh water, a clean litter box, and a few toys to stay entertained while you're out."
+  }
+];
+
+export function SmallChat() {
+  let [messages, setMessages] = useState<StreamingMessage[]>(initialMessages);
+  let nextId = useRef(0);
+  let [isGenerating, setGenerating] = useState(false);
+  let timeouts = useRef<NodeJS.Timeout[]>([]);
+
+  function handleSend(prompt: TokenFieldValue) {
+    setGenerating(true);
+    setMessages(prev => [
+      ...prev,
+      {id: nextId.current++, type: 'user', content: prompt.toString()}
+    ]);
+
+    let addTimeout = (callback: () => void, delay: number) => {
+      let timeout = setTimeout(callback, delay);
+      timeouts.current.push(timeout);
+      return timeout;
+    };
+
+    let response = DUMMY_RESPONSES[Math.floor(Math.random() * DUMMY_RESPONSES.length)];
+
+    addTimeout(() => {
+      setMessages(prev => [
+        ...prev,
+        {id: nextId.current++, type: 'system', content: '', isStreaming: true}
+      ]);
+      let tokens = response.split(' ');
+      let accumulated = '';
+      tokens.forEach((token, i) => {
+        addTimeout(() => {
+          accumulated += (i === 0 ? '' : ' ') + token;
+          let isLastToken = i === tokens.length - 1;
+          setMessages(prev =>
+            prev.map(m =>
+              m.type === 'system' && m.isStreaming
+                ? {...m, content: accumulated, isStreaming: !isLastToken}
+                : m
+            )
+          );
+          if (isLastToken) {
+            setGenerating(false);
+          }
+        }, i * 60);
+      });
+    }, 600);
+  }
+
+  return (
+    <Chat styles={style({width: 400})}>
+      <Thread items={messages} aria-label="Chat thread">
+        {(msg: StreamingMessage) => {
+          if (msg.type === 'user') {
+            return (
+              <ThreadItem
+                textValue={msg.content}
+                styles={style({display: 'flex', justifyContent: 'end'})}>
+                <UserMessage>{msg.content}</UserMessage>
+              </ThreadItem>
+            );
+          }
+          if (msg.type === 'status') {
+            return <StatusThreadItem msg={msg} />;
+          }
+          if (msg.type === 'card') {
+            return (
+              <CardMessage
+                title={msg.title}
+                description={msg.description}
+                imageUrl={msg.imageUrl}
+              />
+            );
+          }
+          if (msg.type === 'suggestions') {
+            return (
+              <ThreadItem textValue={msg.title}>
+                <MessageSuggestionList title={msg.title}>
+                  {msg.suggestions.map((s, i) => (
+                    <MessageSuggestion key={i}>{s}</MessageSuggestion>
+                  ))}
+                </MessageSuggestionList>
+              </ThreadItem>
+            );
+          }
+          return (
+            <SystemMessage textValue={msg.content} isStreaming={msg.isStreaming}>
+              <div role="document">
+                <p className={style({font: 'body'})}>{msg.content || ''}</p>
+              </div>
+              {!msg.isStreaming && <MessageFeedback />}
+            </SystemMessage>
+          );
+        }}
+      </Thread>
+      <PromptField
+        size="S"
+        onSubmit={handleSend}
+        isGenerating={isGenerating}
+        onStop={() => {
+          setGenerating(false);
+          timeouts.current.forEach(clearTimeout);
+          timeouts.current = [];
+        }}>
+        <PromptTokenField />
+        <PromptFieldSubmitButton />
+      </PromptField>
+    </Chat>
   );
 }
diff --git a/packages/dev/s2-docs/pages/s2/ai-component-helpers/chat.tsx b/packages/dev/s2-docs/pages/s2/ai-component-helpers/chat.tsx
index 0b25d28d6e6..b6d329ff09b 100644
--- a/packages/dev/s2-docs/pages/s2/ai-component-helpers/chat.tsx
+++ b/packages/dev/s2-docs/pages/s2/ai-component-helpers/chat.tsx
@@ -1,6 +1,4 @@
-import {ActionButton} from '@react-spectrum/s2/ActionButton';
 import {CenterBaseline} from '@react-spectrum/s2/CenterBaseline';
-import ChevronDown from '@react-spectrum/s2/icons/ChevronDown';
 import {getIcon} from './promptfield';
 import {
   Chat,
@@ -14,7 +12,6 @@ import {
   ResponseStatusTitle,
   Thread,
   ThreadItem,
-  ThreadScrollButton,
   TokenFieldValue,
   UserMessage
 } from '@react-spectrum/ai';
@@ -229,99 +226,46 @@ export function VirtualizedStreamingChat(props: VirtualizedStreamingChatProps) {
   }, [messages, isGenerating, suggestions]);
 
   return (
-    <div
-      className={style({
-        margin: 0,
-        marginX: 'auto',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 32,
-        height: '100%'
-      })}>
-      <Chat
-        styles={style({
-          display: 'flex',
-          flexDirection: 'column',
-          overflow: 'hidden',
-          flexGrow: 1,
-          gap: 16,
-          paddingX: 16,
-          boxSizing: 'border-box',
-          minWidth: 0,
-          containerType: 'size'
-        })}>
-        <div
-          className={style({
-            position: 'relative',
-            flexGrow: 1,
-            overflow: 'hidden',
-            display: 'flex',
-            flexDirection: 'column',
-            minWidth: 0
-          })}>
-          <div
-            className={style({
-              position: 'absolute',
-              bottom: 16,
-              left: '50%',
-              transform: 'translateX(-50%)',
-              zIndex: 1
-            })}>
-            <ThreadScrollButton>
-              <ActionButton slot="scroll" aria-label="Scroll to bottom">
-                <ChevronDown />
-              </ActionButton>
-            </ThreadScrollButton>
-          </div>
-          <Thread
-            items={items}
-            aria-label="Chat thread"
-            styles={style({
-              flexGrow: 1,
-              overflowX: 'hidden',
-              overflowY: 'auto',
-              scrollPadding: 8
-            })}>
-            {(msg: StreamingMessage) => {
-              if (msg.type === 'user') {
-                return (
-                  <ThreadItem
-                    textValue={msg.content}
-                    styles={style({display: 'flex', justifyContent: 'end'})}>
-                    <UserMessage>{msg.content}</UserMessage>
-                  </ThreadItem>
-                );
-              }
-              if (msg.type === 'status') {
-                return <StatusThreadItem msg={msg} />;
-              }
-              if (msg.type === 'suggestions') {
-                return (
-                  <ThreadItem textValue="Suggestions">
-                    <MessageSuggestionList title="Suggestions" styles={style({marginTop: 40})}>
-                      {msg.suggestions.map((s, i) => (
-                        <MessageSuggestion key={i} onPress={() => onSelectSuggestion?.(s)}>
-                          <SuggestionLabel value={s} />
-                        </MessageSuggestion>
-                      ))}
-                    </MessageSuggestionList>
-                  </ThreadItem>
-                );
-              }
-              return (
-                <ThreadItem textValue={msg.content} isStreaming={msg.isStreaming}>
-                  <div role="document">
-                    <p className={prose()}>{msg.content || ''}</p>
-                  </div>
-                  {!msg.isStreaming && <MessageFeedback />}
-                </ThreadItem>
-              );
-            }}
-          </Thread>
-        </div>
-        {children(handleSend, isGenerating)}
-      </Chat>
-    </div>
+    <Chat>
+      <Thread items={items} aria-label="Chat thread">
+        {(msg: StreamingMessage) => {
+          if (msg.type === 'user') {
+            return (
+              <ThreadItem
+                textValue={msg.content}
+                styles={style({display: 'flex', justifyContent: 'end'})}>
+                <UserMessage>{msg.content}</UserMessage>
+              </ThreadItem>
+            );
+          }
+          if (msg.type === 'status') {
+            return <StatusThreadItem msg={msg} />;
+          }
+          if (msg.type === 'suggestions') {
+            return (
+              <ThreadItem textValue="Suggestions">
+                <MessageSuggestionList title="Suggestions" styles={style({marginTop: 40})}>
+                  {msg.suggestions.map((s, i) => (
+                    <MessageSuggestion key={i} onPress={() => onSelectSuggestion?.(s)}>
+                      <SuggestionLabel value={s} />
+                    </MessageSuggestion>
+                  ))}
+                </MessageSuggestionList>
+              </ThreadItem>
+            );
+          }
+          return (
+            <ThreadItem textValue={msg.content} isStreaming={msg.isStreaming}>
+              <div role="document">
+                <p className={prose()}>{msg.content || ''}</p>
+              </div>
+              {!msg.isStreaming && <MessageFeedback />}
+            </ThreadItem>
+          );
+        }}
+      </Thread>
+      {children(handleSend, isGenerating)}
+    </Chat>
   );
 }
 
diff --git a/packages/dev/s2-docs/pages/s2/ai-components.mdx b/packages/dev/s2-docs/pages/s2/ai-components.mdx
index d6ac0b1e0c4..5390177fb32 100644
--- a/packages/dev/s2-docs/pages/s2/ai-components.mdx
+++ b/packages/dev/s2-docs/pages/s2/ai-components.mdx
@@ -510,67 +510,62 @@ let messages = [
 
 function BasicChat() {
   return (
-    /*- begin highlight -*/
-    <Chat
-      /*- end highlight -*/
-      styles={style({width: 'full'})}>
-      <Thread
-        items={messages}
-        aria-label="Campaign discussion"
-        styles={style({
-          height: 350,
-          overflowX: 'hidden',
-          overflowY: 'auto',
-          scrollPadding: 8
-        })}>
-        {message => {
-          switch (message.type) {
-            case 'user':
-              return (
-                <ThreadItem
-                  textValue={message.text}
-                  styles={style({display: 'flex', justifyContent: 'end'})}>
-                  <UserMessage>{message.text}</UserMessage>
-                </ThreadItem>
-              );
-            case 'assistant':
-              return (
-                <ThreadItem textValue={message.text}>
-                  <div className={prose()}>{message.content}</div>
-                </ThreadItem>
-              );
-            case 'status':
-              return (
-                <ThreadItem textValue={message.text}>
-                  <ResponseStatus status={message.status}>
-                    <ResponseStatusTitle>{message.text}</ResponseStatusTitle>
-                    <ResponseStatusPanel>
-                      <ExecutionTrace>
-                        {message.steps?.map(step => (
-                          <ExecutionTraceItem
-                            key={step.id}
-                            status={step.status}
-                            detail={<p className={style({font: 'body-sm', margin: 0})}>{step.detail}</p>}>
-                            {step.label}
-                          </ExecutionTraceItem>
-                        ))}
-                      </ExecutionTrace>
-                    </ResponseStatusPanel>
-                  </ResponseStatus>
-                </ThreadItem>
-              );
-            case 'alert':
-              return (
-                <ThreadItem textValue={message.text}>
-                  <Alert variant={message.variant} >
-                    {message.text}
-                  </Alert>
-                </ThreadItem>
-              )
-          }
-        }}
-      </Thread>
-    </Chat>
+    <div className={style({height: 450, width: 'full'})}>
+      {/*- begin highlight -*/}
+      <Chat>
+        {/*- end highlight -*/}
+        <Thread
+          items={messages}
+          aria-label="Campaign discussion">
+          {message => {
+            switch (message.type) {
+              case 'user':
+                return (
+                  <ThreadItem
+                    textValue={message.text}
+                    styles={style({display: 'flex', justifyContent: 'end'})}>
+                    <UserMessage>{message.text}</UserMessage>
+                  </ThreadItem>
+                );
+              case 'assistant':
+                return (
+                  <ThreadItem textValue={message.text}>
+                    <div className={prose()}>{message.content}</div>
+                  </ThreadItem>
+                );
+              case 'status':
+                return (
+                  <ThreadItem textValue={message.text}>
+                    <ResponseStatus status={message.status}>
+                      <ResponseStatusTitle>{message.text}</ResponseStatusTitle>
+                      <ResponseStatusPanel>
+                        <ExecutionTrace>
+                          {message.steps?.map(step => (
+                            <ExecutionTraceItem
+                              key={step.id}
+                              status={step.status}
+                              detail={<p className={style({font: 'body-sm', margin: 0})}>{step.detail}</p>}>
+                              {step.label}
+                            </ExecutionTraceItem>
+                          ))}
+                        </ExecutionTrace>
+                      </ResponseStatusPanel>
+                    </ResponseStatus>
+                  </ThreadItem>
+                );
+              case 'alert':
+                return (
+                  <ThreadItem textValue={message.text}>
+                    <Alert variant={message.variant} >
+                      {message.text}
+                    </Alert>
+                  </ThreadItem>
+                )
+            }
+          }}
+        </Thread>
+      </Chat>
+    </div>
   );
 }
 ```