🪡 style: Separate Attachments from Message Bubbles

client/src/components/Chat/Input/Files/FileContainer.tsx

@@ -80,7 +80,7 @@ const FileContainer = ({
     'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-text-primary';
 
   const details = (
-    <div className="w-56 p-1.5">
+    <div className="w-56 max-w-full p-1.5">
       <div className="flex flex-row items-center gap-2">
         <FilePreview file={file} fileType={fileType} className="relative" />
         <div className="overflow-hidden">

client/src/components/Chat/Messages/Content/Container.tsx

@@ -1,18 +1,8 @@
-import { TMessage } from 'librechat-data-provider';
+import type { TMessage } from 'librechat-data-provider';
 import MessageQuotes from './MessageQuotes';
 import SkillPills from './SkillPills';
-import Files from './Files';
 
-const Container = ({
-  children,
-  message,
-  hideFiles = false,
-}: {
-  children: React.ReactNode;
-  message?: TMessage;
-  /** The message editor renders the files itself, as chips that can be removed. */
-  hideFiles?: boolean;
-}) => (
+const Container = ({ children, message }: { children: React.ReactNode; message?: TMessage }) => (
   <div
     data-message-text
     className="flex min-h-[1.25rem] flex-col items-start gap-3 overflow-visible [[data-message-text]+&]:mt-5"
@@ -21,7 +11,6 @@ const Container = ({
     {message?.isCreatedByUser === true && (
       <>
         <MessageQuotes quotes={message.quotes} />
-        {!hideFiles && <Files message={message} />}
         <SkillPills skills={message.alwaysAppliedSkills} source="always-apply" />
         <SkillPills skills={message.manualSkills} source="manual" />
       </>

client/src/components/Chat/Messages/Content/EditMessage.tsx

@@ -250,7 +250,7 @@ const EditMessage = ({
   );
 
   return (
-    <Container message={message} hideFiles={isUserTurn}>
+    <Container message={message}>
       <section
         aria-label={localize('com_ui_edit_message')}
         className="mt-2 flex w-full flex-col gap-2"

client/src/components/Chat/Messages/Content/Files.tsx

@@ -36,6 +36,8 @@ const Files = ({ message }: { message?: TMessage }) => {
           <FileContainer
             key={file.file_id}
             file={file as TFile}
+            buttonClassName="border-surface-user-message max-w-full bg-transparent"
+            containerClassName="max-w-full"
             onClick={() => setSelectedFile(file)}
           />
         ))}
@@ -44,6 +46,7 @@ const Files = ({ message }: { message?: TMessage }) => {
           <Image
             key={file.file_id}
             alignRight
+            className="border-surface-user-message mt-0 shadow-none"
             imagePath={file.preview ?? file.filepath ?? ''}
             height={file.height ?? 1920}
             width={file.width ?? 1080}

client/src/components/Chat/Messages/Content/Parts/PendingSteers.tsx

@@ -5,7 +5,7 @@ import { Button, TooltipAnchor } from '@librechat/client';
 import { QueryKeys, type TMessage } from 'librechat-data-provider';
 import type { SteerReceiptState } from '~/components/Chat/Steering/Receipt';
 import useSteerCancel, { useSteerMoveToQueue, useSteerRehome } from '~/hooks/Chat/useSteerCancel';
-import { getMessageRowWidthClass } from '~/components/Chat/Messages/ui/MessageRow';
+import { getMessageRowWidthClass } from '~/components/Chat/Messages/ui/width';
 import EscalateNowButton from '~/components/Chat/Input/EscalateNowButton';
 import { useMessagePartsHost } from '~/Providers/MessagePartsHostContext';
 import useSteerEscalate from '~/hooks/Chat/useSteerEscalate';

client/src/components/Chat/Messages/Content/__tests__/Files.test.tsx

@@ -11,13 +11,25 @@ jest.mock('~/Providers', () => ({
 jest.mock(
   '~/components/Chat/Input/Files/FileContainer',
   () =>
-    ({ onClick }: { onClick: () => void }) => <button onClick={onClick}>file action</button>,
+    ({ onClick, buttonClassName }: { onClick: () => void; buttonClassName?: string }) => (
+      <button className={buttonClassName} onClick={onClick}>
+        file action
+      </button>
+    ),
+);
+jest.mock(
+  '../Image',
+  () =>
+    ({ alignRight, className }: { alignRight?: boolean; className?: string }) => (
+      <div
+        data-testid="image-preview"
+        data-aligned-right={String(alignRight)}
+        className={className}
+      >
+        image preview
+      </div>
+    ),
 );
-jest.mock('../Image', () => ({ alignRight }: { alignRight?: boolean }) => (
-  <div data-testid="image-preview" data-aligned-right={String(alignRight)}>
-    image preview
-  </div>
-));
 jest.mock(
   '../FilePreviewDialog',
   () =>
@@ -40,6 +52,16 @@ it('exposes extracted image text without changing ordinary image previews', () =
   );
   expect(screen.getAllByText('image preview')).toHaveLength(1);
   expect(screen.getByTestId('image-preview')).toHaveAttribute('data-aligned-right', 'true');
+  expect(screen.getByText('file action')).toHaveClass(
+    'border-surface-user-message',
+    'max-w-full',
+    'bg-transparent',
+  );
+  expect(screen.getByTestId('image-preview')).toHaveClass(
+    'border-surface-user-message',
+    'mt-0',
+    'shadow-none',
+  );
   fireEvent.click(screen.getByText('file action'));
   expect(screen.getByText('preview: text')).toBeInTheDocument();
 });

client/src/components/Chat/Messages/MessageParts.tsx

@@ -116,6 +116,7 @@ function MessageParts(props: TMessageProps) {
     >
       <div className="m-auto justify-center px-4 py-3 sm:px-0">
         <MessageRow
+          message={message}
           id={messageId ?? ''}
           icon={author.icon}
           label={author.label}

client/src/components/Chat/Messages/PendingTurn.tsx

@@ -113,6 +113,7 @@ export default function PendingTurn({
     >
       <div className="m-auto justify-center px-4 py-3 sm:px-0">
         <MessageRow
+          message={message}
           icon={<MessageIcon iconData={iconData} />}
           label={label}
           timestamp={reveal.revealedAt}

client/src/components/Chat/Messages/SearchMessage.tsx

@@ -2,12 +2,13 @@ import { memo, useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 import type { TMessage } from 'librechat-data-provider';
 import type { TMessageProps, TMessageIcon } from '~/common';
-import MessageRow, { getMessageRowWidthClass } from '~/components/Chat/Messages/ui/MessageRow';
 import AuthorHeader from '~/components/Chat/Messages/Content/Parts/AuthorHeader';
 import MinimalHoverButtons from '~/components/Chat/Messages/MinimalHoverButtons';
 import { getHeaderModelName } from '~/components/Chat/Messages/ui/HeaderLabel';
+import { getMessageRowWidthClass } from '~/components/Chat/Messages/ui/width';
 import { getHeaderPrefixForScreenReader, getMessageAriaLabel } from '~/utils';
 import SearchContent, { rendersMarkdownLite } from './Content/SearchContent';
+import MessageRow from '~/components/Chat/Messages/ui/MessageRow';
 import Icon from '~/components/Chat/Messages/MessageIcon';
 import { useAuthContext, useLocalize } from '~/hooks';
 import SearchButtons from './SearchButtons';
@@ -121,6 +122,7 @@ function SearchMessage({ message }: Pick<TMessageProps, 'message'>) {
         className={cn('border-border-light mx-auto border-b px-4 py-4', getMessageRowWidthClass())}
       >
         <MessageRow
+          message={message}
           id={message.messageId}
           icon={<Icon iconData={iconData} />}
           label={messageLabel}

client/src/components/Chat/Messages/ui/MessageRender.tsx

@@ -168,6 +168,7 @@ const MessageRender = memo(function MessageRender({
     <Row
       task={subagentWakeup}
       conversationId={msg.conversationId ?? conversation?.conversationId ?? ''}
+      message={wakeupDisplay != null ? undefined : msg}
       id={msg.messageId}
       icon={<MessageIcon iconData={iconData} assistant={assistant} agent={agent} />}
       label={messageLabel ?? ''}

client/src/components/Chat/Messages/ui/MessageRow.tsx

@@ -1,11 +1,16 @@
 import { Zap } from 'lucide-react';
+import { ContentTypes } from 'librechat-data-provider';
+import type { TMessage } from 'librechat-data-provider';
 import type { ReactNode } from 'react';
 import MessageTimestamp from './MessageTimestamp';
+import { getMessageRowWidthClass } from './width';
 import HeaderLabel from './HeaderLabel';
+import Files from '../Content/Files';
 import { cn } from '~/utils';
 
 type MessageRowProps = {
   id?: string;
+  message?: TMessage;
   label: string;
   hoverLabel?: string | null;
   icon: ReactNode;
@@ -74,20 +79,9 @@ function renderAuthorHeader({
   );
 }
 
-export function getMessageRowWidthClass({
-  fullWidth = false,
-  hasParallelContent = false,
-}: {
-  fullWidth?: boolean;
-  hasParallelContent?: boolean;
-} = {}) {
-  if (fullWidth) return 'w-full max-w-full sm:px-2';
-  if (hasParallelContent) return 'w-full sm:px-2 md:max-w-[58rem] xl:max-w-[70rem]';
-  return 'w-full sm:px-2 md:max-w-3xl xl:max-w-4xl';
-}
-
 export default function MessageRow({
   id,
+  message,
   icon,
   label,
   hoverLabel,
@@ -110,6 +104,24 @@ export default function MessageRow({
   const widthClass = getMessageRowWidthClass({ fullWidth, hasParallelContent });
   const isSystem = systemLabel != null && systemLabel !== '';
   const isUserSide = isCreatedByUser && !isSystem;
+  const hasFiles = isUserSide && !isEditing && (message?.files?.length ?? 0) > 0;
+  const hasBody =
+    !hasFiles ||
+    Boolean(
+      message?.text?.trim() ||
+        message?.content?.some(
+          (part) =>
+            part != null &&
+            (part.type !== ContentTypes.TEXT ||
+              (typeof part.text === 'string' ? part.text : part.text?.value)?.trim()),
+        ) ||
+        message?.privacyRevision ||
+        message?.error ||
+        message?.unfinished ||
+        message?.quotes?.length ||
+        message?.alwaysAppliedSkills?.length ||
+        message?.manualSkills?.length,
+    );
 
   return (
     <div
@@ -166,22 +178,32 @@ export default function MessageRow({
           })}
 
         <div className={cn('flex w-full flex-col gap-1', isUserSide && 'items-end')}>
-          <div
-            className={cn(
-              'flex min-h-[1.25rem] max-w-full grow flex-col gap-0',
-              isUserSide && !isEditing
-                ? cn(
-                    'rounded-theme-surface rounded-br-theme-control px-theme-normal w-fit',
-                    isSystem || outlined
-                      ? 'border-border-medium border py-1.5'
-                      : 'bg-surface-user-message py-2.5',
-                  )
-                : 'w-full',
-            )}
-            data-testid="message-body"
-          >
-            {children}
-          </div>
+          {hasFiles && (
+            <div
+              data-testid="message-attachments"
+              className="flex max-w-full flex-col items-end gap-3 pb-2"
+            >
+              <Files message={message} />
+            </div>
+          )}
+          {hasBody && (
+            <div
+              className={cn(
+                'flex min-h-[1.25rem] max-w-full grow flex-col gap-0',
+                isUserSide && !isEditing
+                  ? cn(
+                      'rounded-theme-surface rounded-br-theme-control px-theme-normal w-fit',
+                      isSystem || outlined
+                        ? 'border-border-medium border py-1.5'
+                        : 'bg-surface-user-message py-2.5',
+                    )
+                  : 'w-full',
+              )}
+              data-testid="message-body"
+            >
+              {children}
+            </div>
+          )}
           <div className={cn('w-full', isUserSide && 'flex justify-end')}>{footer}</div>
         </div>
       </div>

client/src/components/Chat/Messages/ui/__tests__/MessageRow.spec.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import type { TMessage } from 'librechat-data-provider';
 import MessageRow from '../MessageRow';
 
 jest.mock('../MessageTimestamp', () => ({
@@ -8,10 +9,24 @@ jest.mock('../MessageTimestamp', () => ({
   ),
 }));
 
+jest.mock('../../Content/Files', () => ({
+  __esModule: true,
+  default: () => <button data-testid="attached-file" />,
+}));
+
 const MESSAGE_BODY = 'Message body';
+const attachedMessage = (overrides: Partial<TMessage> = {}) =>
+  ({
+    messageId: 'message-1',
+    isCreatedByUser: true,
+    text: MESSAGE_BODY,
+    files: [{ file_id: 'file-1', filename: 'notes.txt', type: 'text/plain' }],
+    ...overrides,
+  }) as TMessage;
 
 const renderRow = ({
   isCreatedByUser,
+  message,
   hasParallelContent = false,
   fullWidth = false,
   isEditing = false,
@@ -20,6 +35,7 @@ const renderRow = ({
   outlined,
 }: {
   isCreatedByUser: boolean;
+  message?: TMessage;
   hasParallelContent?: boolean;
   fullWidth?: boolean;
   isEditing?: boolean;
@@ -30,6 +46,7 @@ const renderRow = ({
   render(
     <MessageRow
       id="message-1"
+      message={message}
       label={isCreatedByUser ? 'You' : 'Assistant'}
       hoverLabel={isCreatedByUser ? undefined : 'gpt-5.6'}
       icon={<span data-testid="message-icon" />}
@@ -49,6 +66,56 @@ const renderRow = ({
   );
 
 describe('MessageRow', () => {
+  it('places right-aligned attachments before and outside the text bubble', () => {
+    renderRow({ isCreatedByUser: true, message: attachedMessage() });
+
+    const attachments = screen.getByTestId('message-attachments');
+    const body = screen.getByTestId('message-body');
+    expect(attachments).toHaveClass('items-end', 'max-w-full');
+    expect(attachments).toContainElement(screen.getByTestId('attached-file'));
+    expect(body).not.toContainElement(attachments);
+    expect(attachments.nextElementSibling).toBe(body);
+    expect(body).toHaveClass('bg-surface-user-message');
+    expect(screen.getByTestId('message-actions')).toBeInTheDocument();
+  });
+
+  it.each([
+    { text: '' },
+    { text: '  ', content: [{ type: 'text', text: '' }] },
+    { text: '', content: [{ type: 'text', text: { value: '', annotations: [] } }] },
+  ] as Partial<TMessage>[])(
+    'does not leave an empty bubble for attachments-only messages: %j',
+    (overrides) => {
+      renderRow({ isCreatedByUser: true, message: attachedMessage(overrides) });
+
+      expect(screen.getByTestId('attached-file')).toBeInTheDocument();
+      expect(screen.queryByTestId('message-body')).not.toBeInTheDocument();
+      expect(screen.getByTestId('message-actions')).toBeInTheDocument();
+    },
+  );
+
+  it.each([
+    { content: [{ type: 'text', text: { value: 'Assistant prompt', annotations: [] } }] },
+    { quotes: ['Excerpt'] },
+    { manualSkills: ['review'] },
+    { alwaysAppliedSkills: ['review'] },
+    { error: true },
+    { unfinished: true },
+  ] as Partial<TMessage>[])('keeps the bubble for non-text message content: %j', (overrides) => {
+    renderRow({ isCreatedByUser: true, message: attachedMessage({ text: '', ...overrides }) });
+    expect(screen.getByTestId('message-body')).toHaveClass('bg-surface-user-message');
+  });
+
+  it.each([
+    { isCreatedByUser: true, isEditing: true },
+    { isCreatedByUser: false },
+    { isCreatedByUser: true, systemLabel: 'System' },
+  ])('does not add an attachment strip to editors, assistant or system rows: %j', (props) => {
+    renderRow({ ...props, message: attachedMessage() });
+    expect(screen.queryByTestId('attached-file')).not.toBeInTheDocument();
+    expect(screen.getByTestId('message-body')).toBeInTheDocument();
+  });
+
   it('renders a system row in the transcript under a visible heading', () => {
     renderRow({ isCreatedByUser: true, systemLabel: 'System' });