🫸 fix: Right-Align User Message Images

[lia-by-librechat]

Summary

When a user message has both an uploaded image and enough text to widen its bubble, the image sits on the left even though the user turn is right-aligned. The same mismatch affects image content parts and inline steering messages.

User-authored images now align with the right edge of their message bubble. Assistant images, non-image file chips, image preview interactions, and attachment order are unchanged.

How it works

The shared image preview accepts an opt-in right-alignment flag on its outer flex item. Uploaded files request it; content-part images request it only for user authors. Inline steering images stay in their original order inside a right-justified, wrapping group, while other file chips remain at the start.

Type of change

• Bug fix

Testing

Tested environments/configuration: Local client Jest/jsdom, TypeScript, and Chromium with the mock-backed app and isolated ephemeral MongoDB.

Automated tests: Four focused Jest files, 50 tests passed. A Playwright test uploads a real PNG with a wider user message and checks the image's physical right inset in the browser; it fails on the base revision (−319 px) and passes on this PR. cd client && npx tsc --noEmit passed; direct ESLint and Prettier checks on the browser test passed; npm run static-checks and explicit-path import sorting passed on the changed client files. Local Lighthouse was not run; the PR has a Lighthouse CI job.

Screenshots / recordings

A real-app before/after pair was captured using the same synthetic PNG and prompt in a 1280 × 900 Chromium viewport. Each cropped user-turn image is 896 × 538. The image was left-aligned on the base revision (left inset minus right inset: −319 px) and right-aligned on this PR (browser layout assertion passed).

The images cannot be attached to the PR from the Lia GitHub App: the attachment-capable GitHub CLI rejected the upload as unsupported authentication type. No image URLs or mockups are included. Visual inspection by a maintainer is pending.

Risk / compatibility

No API, storage, or configuration changes. Please visually check narrow screens, mixed file/image uploads, and right-to-left prompts before merging.

Checklist

• I reviewed my own changes
• Relevant tests have been added or updated
• Existing relevant tests pass
• The change does not introduce new warnings or errors
• Real-app before-and-after browser captures made and layout verified
• Screenshot upload and local Lighthouse verification not completed
• Required dependency changes: N/A
• Required documentation PR: N/A

[lia-by-librechat]

Review handoff for exact remote head d7ccff44772676a16dc652b3d22362e8b9e2651d: aligns uploaded user images, user image content parts, and inline steering images with the right edge while leaving assistant images and other file chips unchanged. Focused Jest tests, client typecheck, and staged static checks passed. Browser screenshot and Lighthouse verification are pending. A maintainer can trigger the Codex review for this head.

[lia-by-librechat]

Self-review handoff for exact PR head 507bc358a7d19d482c058115b42adf55d15a6987: I traced user-uploaded files, image content parts, inline steers, shared/search readers, and the assistant-image default. The patch changes layout only; URL resolution, file ownership, persistence and authorization are unchanged. The missing browser regression is now in this head: with the same synthetic uploaded PNG and wider user text, the base layout measured −319 px (left) and the PR head passed its right-alignment assertion in the real mock-backed app. Four focused Jest files (50 tests), the browser spec, client tsc --noEmit, focused ESLint/Prettier/import sorting, and staged static checks passed locally. Matching before/after captures were made but cannot be attached with the Lia GitHub App (attachment upload returned unsupported authentication type). Local Lighthouse was not run; CI is in progress. No inline review findings have arrived for this head yet. A maintainer can trigger the Codex review for this exact head.