diff --git a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss index 037efe11ba..8729720798 100644 --- a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss +++ b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss @@ -68,9 +68,18 @@ font-variant-numeric: tabular-nums; line-height: var(--openbitfun-type-flow-meta-line-height); white-space: nowrap; - opacity: 1; + opacity: 0; + visibility: hidden; pointer-events: none; - margin-inline-end: auto; + transition: + opacity var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard), + visibility var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard); +} + +.user-message-item-shell:hover .user-message-item__timestamp, +.user-message-item-shell:focus-within .user-message-item__timestamp { + opacity: 1; + visibility: visible; } .user-message-item__meta { @@ -115,9 +124,15 @@ .user-message-item__actions { @include transcriptLayout.metadata-actions; + opacity: 0; + pointer-events: none; + transition: opacity var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard); +} + +.user-message-item-shell:hover .user-message-item__actions, +.user-message-item-shell:focus-within .user-message-item__actions { opacity: 1; pointer-events: auto; - /* Controls remain available without requiring hover or keyboard focus. */ } .user-message-item__blocks { diff --git a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.test.tsx b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.test.tsx index e0d24bad4a..ae29bb6737 100644 --- a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.test.tsx +++ b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.test.tsx @@ -297,6 +297,7 @@ describe('UserMessageItem steering tag', () => { expect(editLayout?.contains(imageGallery ?? null)).toBe(false); expect(editLayout?.firstElementChild).toBe(editComposer); expect(container.querySelectorAll('.user-message-item__images')).toHaveLength(1); + expect(container.querySelector('[data-testid="chat-user-message-timestamp"]')).toBeNull(); }); it('places sent image attachments above the right-aligned text bubble', () => { diff --git a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.tsx b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.tsx index feb18784f1..d67c00e296 100644 --- a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.tsx +++ b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.tsx @@ -675,7 +675,7 @@ export const UserMessageItem = React.memo(
- {sentTime && sentAtLabel && sentTimestamp !== null && ( + {!isEditing && sentTime && sentAtLabel && sentTimestamp !== null && (