Sign up
View stargazersSign up

feat(web): images and videos sent with text sit above the bubble as their own shape#27306

open
t3/group-consecutive-user-messages
t3/user-message-attachments
opened3d agobyMmaria
View on GitHubTwo-way sync enabledPR last imported 3d ago

Stacked on #27305.

Images and videos sent with words were squeezed into the text bubble as small 4:3 thumbnails, while the same media sent alone now shows as its own rounded shape (https://git.cafe/pingdotgg/t3code/pulls/26769). Media with text now matches, chat-app style:

  • Images and videos sit above the text bubble as their own shape: a lone image at a fixed 192px height in its own aspect ratio, several images as one rounded collage split by hairlines, a lone video at 320px wide.
  • The text bubble's top-right corner tightens to 6px where it meets the media above.
  • Videos use the same 16px corners and inner edge as images, alone or with text.
  • Files are unchanged: they already show as inline chips inside the text.

Verified in the web dev app by sending image + text, two images + text, video + text, file + text, and an image alone through the real composer (before left, after right). check:changed passes.

Not covered: mobile still shows media inside the bubble when the message has text.

Reviewed with sol-loop: 3 rounds, gpt-6.1-sol at xhigh plus Opus 5.5 at high (sol hit a rate limit). Verdicts: merge-ready, merge-ready.

Opus 5.5 via Claude Code in T3 Code

An image with text, before (left) and after (right)

Two images with text, before (left) and after (right)

A video with text, before (left) and after (right)

Checks

26 successful · 7 skipped
All checks passed
c829cb1
MmacroscopeappBot3d ago
Synced from GitHub

Approvability

Verdict: Approved at aaae62d

Macroscope's review found this PR approvable — Images and videos accompanying user messages now appear as separate shapes above the text bubble. The change is confined to presentation and preserves existing attachment loading and preview actions.

You can add or adjust custom eligibility rules. Learn more.

Ggithub-actionsBot3d ago
Synced from GitHub

Thread transfer impact

⚠️ The latest CI run did not produce a thread transfer result for c829cb1.

This comment will update automatically after the next completed run.

CcoderabbitaiBot3d ago
Synced from GitHub

Review in Change Stack →

No actionable comments were generated in the recent review.

External image Recent review info
External image Run configuration
External image Commits

Reviewing files that changed from the base of the PR and between f012fa210dbf464a5ea68fe9071ee377682f8d66 and c829cb1b9d8760258cd6d98d7ccd515216653890.

External image Files selected for processing: 4
  • apps/web/src/components/chat/MessagesTimeline.logic.test.ts
  • apps/web/src/components/chat/MessagesTimeline.logic.ts
  • apps/web/src/components/chat/MessagesTimeline.tsx
  • apps/web/src/components/chat/TimelineUserMessageRow.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 0 remain after this review.

Walkthrough

The timeline now groups adjacent own user messages and identifies continued steer bursts. User message rendering changes how media, bubbles, and metadata appear for grouped messages and messages with media alongside text.

Changes: Timeline user messages

Layer / File(s)Summary
User message grouping
apps/web/src/components/chat/MessagesTimeline.logic.ts, apps/web/src/components/chat/MessagesTimeline.logic.test.ts		Rows now include grouping and steer-continuation metadata for adjacent own user messages. Stable row comparison checks the new fields. A regression test covers two consecutive steers.
Grouped messages and media presentation
apps/web/src/components/chat/TimelineUserMessageRow.tsx, apps/web/src/components/chat/MessagesTimeline.tsx		Messages with text and media render media above the bubble. Grouped messages use adjusted bubble and metadata layouts, and continued steers omit the steer marker. Standalone video attachments use different framing. The row-padding conditional was reformatted without changing its conditions or values.

Priority: External image Low

Estimated code review effort: 3 (Moderate) | ~25 minutes

Change: Feature

Suggested reviewers: juliusmarminge

Merge Risk: External image Minimal · up to c829c

No identified issue prevents merging after normal checks.

Pre-merge checks: Passed 4
Check nameStatusExplanation
Title checkPassedThe title clearly and concisely describes the primary change: images and videos sent with text now appear above the text bubble as separate shapes.
Description checkPassedThe description clearly covers the problem, implemented behavior, verification steps, screenshots, and known mobile limitations. It does not use the template headings and does not explicitly document …
Linked Issues checkPassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes checkPassedCheck skipped because no linked issues were found for this pull request.
Full details: Description check

Explanation

The description clearly covers the problem, implemented behavior, verification steps, screenshots, and known mobile limitations. It does not use the template headings and does not explicitly document maintainer approval, but the core required information is present.

Finishing Touches: 💡 2
⚔️ Resolve merge conflicts: 💡
  • Resolve merge conflict in branch t3/user-message-attachments
🛠️ Fix failing CI checks: 💡
  • Commit to this branch
  • Create a new PR
📝 Generate docstrings
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Comment @coderabbitai help to get the list of available commands.