diff --git a/ui/src/e2e/chat-composer-redesign.e2e.test.ts b/ui/src/e2e/chat-composer-redesign.e2e.test.ts index 3c7aedfb02de..c7a6df6f57d6 100644 --- a/ui/src/e2e/chat-composer-redesign.e2e.test.ts +++ b/ui/src/e2e/chat-composer-redesign.e2e.test.ts @@ -13,6 +13,55 @@ const suite = createControlUiE2eSuite({ // Browser contexts preserve test isolation; keep one process warm for this file. suite.define(() => { + it("keeps mobile picker panels above an attachment-expanded composer", async () => { + await suite.withPage({ viewport: { width: 667, height: 375 } }, async ({ page }) => { + const gateway = await installMockGateway(page); + await page.goto(`${suite.server.baseUrl}chat`); + await gateway.waitForRequest("chat.startup"); + + const composer = page.locator(".agent-chat__input"); + await composer.waitFor({ state: "visible" }); + await composer.locator(".agent-chat__file-input").setInputFiles({ + name: "mobile-composer-proof.txt", + mimeType: "text/plain", + buffer: Buffer.from("mobile composer attachment"), + }); + await composer.locator(".chat-attachments-preview").waitFor({ state: "visible" }); + + for (const picker of [ + { + menu: ".chat-controls__model-menu", + trigger: '[data-chat-model-select="true"]', + }, + { + menu: ".chat-controls__effort-menu", + trigger: '[data-chat-thinking-select="true"]', + }, + ]) { + await composer.locator(picker.trigger).click(); + await page.waitForTimeout(100); + const [composerBox, footerBox, menuBox, triggerBox] = await Promise.all([ + composer.boundingBox(), + composer.locator(".agent-chat__composer-footer").boundingBox(), + page.locator(picker.menu).boundingBox(), + composer.locator(picker.trigger).boundingBox(), + ]); + expect(composerBox).not.toBeNull(); + expect(footerBox).not.toBeNull(); + expect(menuBox).not.toBeNull(); + expect(triggerBox).not.toBeNull(); + if (!composerBox || !footerBox || !menuBox || !triggerBox) { + throw new Error(`expected mobile layout boxes for ${picker.menu}`); + } + expect(menuBox.y).toBeGreaterThanOrEqual(0); + expect(menuBox.y + menuBox.height).toBeLessThanOrEqual(composerBox.y + 1); + expect(triggerBox.y + triggerBox.height).toBeLessThanOrEqual(376); + expect(footerBox.y + footerBox.height).toBeLessThanOrEqual(376); + await composer.locator(picker.trigger).click(); + } + }); + }); + it("keeps the model in the bottom bar, session settings in the header, and switches the primary action with input state", async () => { await suite.withPage({ viewport: { width: 1920, height: 1080 } }, async ({ page }) => { const gateway = await installMockGateway(page, { diff --git a/ui/src/pages/chat/chat-responsive.browser.test.ts b/ui/src/pages/chat/chat-responsive.browser.test.ts index 08e94d658b54..63296de7303b 100644 --- a/ui/src/pages/chat/chat-responsive.browser.test.ts +++ b/ui/src/pages/chat/chat-responsive.browser.test.ts @@ -120,6 +120,8 @@ type ControlRect = { y: number; width: number; height: number; + clientWidth?: number; + scrollWidth?: number; clientHeight?: number; scrollHeight?: number; scrollTop?: number; @@ -129,6 +131,7 @@ type ControlRect = { type ChatFixtureOptions = { composerAttachment?: boolean; + crowdedComposerFooter?: boolean; direct?: boolean; sessionRailBody?: string; sessionRailDocked?: boolean; @@ -269,14 +272,27 @@ function chatControlsHtml(opts: { agent?: boolean } = {}) { `; } -function composerControlsHtml() { +function composerControlsHtml(crowded = false) { return `
+ ${ + crowded + ? `
+ + ${iconSvg()}Interrupted + +
+ + + + ` + : "" + }
- - GPT-5.6 + + GPT-5.6 Luna
@@ -284,11 +300,14 @@ function composerControlsHtml() { + + +
- + High
@@ -462,7 +481,19 @@ function chatHtml(opts: ChatFixtureOptions = {}, mobileNavLayout = false) {
- ${composerControlsHtml()} + ${composerControlsHtml(opts.crowdedComposerFooter)} + ${ + opts.crowdedComposerFooter + ? `
+ + Alexandria, Bartholomew, and Cassandra are typing +
` + : "" + }
@@ -503,12 +534,30 @@ function chatHtml(opts: ChatFixtureOptions = {}, mobileNavLayout = false) { `; } +async function syncFixtureComposerPopoverAnchor(page: Page) { + await page.locator(".agent-chat__input").evaluate((node) => { + const viewport = window.visualViewport; + const viewportTop = viewport?.offsetTop ?? 0; + const layoutViewportHeight = document.documentElement.clientHeight || window.innerHeight; + const composerTop = node.getBoundingClientRect().top; + node.style.setProperty( + "--chat-composer-popover-bottom", + `${layoutViewportHeight - composerTop + 6}px`, + ); + node.style.setProperty( + "--chat-composer-popover-max-height", + `${Math.max(0, composerTop - viewportTop - 28)}px`, + ); + }); +} + async function openFixture(width: number, height: number, opts: ChatFixtureOptions = {}) { const page = await openBrowserPage(width, height); try { await page.setContent( `${chatHtml(opts, width <= 1100)}`, ); + await syncFixtureComposerPopoverAnchor(page); return page; } catch (error) { await closeBrowserPage(page); @@ -2171,27 +2220,161 @@ describeBrowserLayout.concurrent("chat responsive browser layout", () => { }); it.each([ - [320, 568], - [375, 812], - [667, 375], - [768, 500], + [320, 568, false], + [375, 812, false], + [667, 375, false], + [768, 500, false], + [320, 568, true], + [667, 375, true], ] as const)( - "keeps the composer model menu inside the mobile viewport at %sx%s", - async (width, height) => { - const page = await openFixture(width, height); + "keeps the composer popovers inside the mobile viewport and clear of the input at %sx%s (attachment: %s)", + async (width, height, composerAttachment) => { + const page = await openFixture(width, height, { composerAttachment }); try { - await page.locator('[data-chat-composer-model="true"]').evaluate((node) => { - node.parentElement?.setAttribute("open", ""); - }); - const menu = await getBoundingBox(page, ".chat-controls__model-menu"); - expect(menu.x).toBeGreaterThanOrEqual(0); - expect(menu.x + menu.width).toBeLessThanOrEqual(width + 1); + const composer = await getBoundingBox(page, ".agent-chat__input"); + for (const picker of [ + { + menu: ".chat-controls__model-menu", + trigger: '[data-chat-composer-model="true"]', + }, + { + menu: ".chat-controls__effort-menu", + trigger: '[data-chat-composer-effort="true"]', + }, + { + menu: ".context-usage__popover", + trigger: ".context-ring", + }, + ]) { + await page.locator(picker.trigger).evaluate((node) => { + node.parentElement?.setAttribute("open", ""); + }); + await waitForLayoutSettled(page); + await syncFixtureComposerPopoverAnchor(page); + await waitForLayoutSettled(page); + const menu = await getBoundingBox(page, picker.menu); + const trigger = await getBoundingBox(page, picker.trigger); + const footer = await getBoundingBox(page, ".agent-chat__composer-footer"); + const menuPosition = await page.locator(picker.menu).evaluate((node) => ({ + bottom: getComputedStyle(node).bottom, + boxSizing: getComputedStyle(node).boxSizing, + maxHeight: getComputedStyle(node).maxHeight, + })); + const menuLabel = `${picker.menu} ${JSON.stringify(menuPosition)}`; + expect(menu.x, picker.menu).toBeGreaterThanOrEqual(0); + expect(menu.x + menu.width, picker.menu).toBeLessThanOrEqual(width + 1); + expect(menu.y, menuLabel).toBeGreaterThanOrEqual(0); + expect(menu.y + menu.height, picker.menu).toBeLessThanOrEqual(composer.y + 1); + expect(trigger.y + trigger.height, picker.trigger).toBeLessThanOrEqual(height + 1); + expect(footer.y + footer.height, picker.menu).toBeLessThanOrEqual(height + 1); + await page.locator(picker.trigger).evaluate((node) => { + node.parentElement?.removeAttribute("open"); + }); + } } finally { await closeBrowserPage(page); } }, ); + it("anchors mobile composer popovers when the iPhone visual viewport is panned", async () => { + const page = await openFixture(375, 812); + try { + await page.locator(".card.chat").evaluate(async (node) => { + await Promise.all(node.getAnimations().map((animation) => animation.finished)); + }); + await page.evaluate(() => { + Object.defineProperty(window, "visualViewport", { + configurable: true, + value: { height: 400, offsetTop: 300 }, + }); + }); + await syncFixtureComposerPopoverAnchor(page); + await page.locator('[data-chat-composer-model="true"]').evaluate((node) => { + node.parentElement?.setAttribute("open", ""); + }); + await waitForLayoutSettled(page); + await syncFixtureComposerPopoverAnchor(page); + await waitForLayoutSettled(page); + const composer = await getBoundingBox(page, ".agent-chat__input"); + const menu = await getBoundingBox(page, ".chat-controls__model-menu"); + const anchorEvidence = await page.locator(".agent-chat__input").evaluate((node) => ({ + anchorBottom: getComputedStyle(node).getPropertyValue("--chat-composer-popover-bottom"), + layoutHeight: document.documentElement.clientHeight, + })); + + expect(menu.y).toBeGreaterThanOrEqual(300); + expect( + Math.abs(menu.y + menu.height - (composer.y - 6)), + JSON.stringify({ anchorEvidence, composer, menu }), + ).toBeLessThanOrEqual(1); + } finally { + await closeBrowserPage(page); + } + }); + + it("keeps transient footer controls from crushing the mobile model pickers", async () => { + const page = await openFixture(320, 568, { crowdedComposerFooter: true }); + try { + await expectNoHorizontalOverflow(page); + const layout = await page.evaluate(() => { + const rectFor = (selector: string) => { + const node = document.querySelector(selector)!; + const rect = node.getBoundingClientRect(); + return { + x: rect.x, + y: rect.y, + width: rect.width, + height: rect.height, + clientWidth: node.clientWidth, + scrollWidth: node.scrollWidth, + }; + }; + return { + controls: rectFor(".agent-chat__composer-controls"), + effort: rectFor(".chat-controls__effort-trigger"), + footer: rectFor(".agent-chat__composer-footer"), + meta: rectFor(".agent-chat__composer-meta"), + model: rectFor(".chat-controls__model-trigger"), + modelLabel: rectFor(".chat-controls__model-trigger .chat-controls__inline-select-label"), + overrides: rectFor(".agent-chat__session-overrides-pill"), + status: rectFor(".agent-chat__composer-run-status"), + typing: rectFor(".agent-chat__typing-indicator"), + }; + }); + + expect(layout.controls.scrollWidth).toBeLessThanOrEqual(layout.controls.clientWidth + 1); + for (const control of [ + layout.status, + layout.overrides, + layout.model, + layout.effort, + layout.typing, + ]) { + expect(control.x).toBeGreaterThanOrEqual(layout.footer.x - 1); + expect(control.x + control.width).toBeLessThanOrEqual( + layout.footer.x + layout.footer.width + 1, + ); + } + for (const trigger of [layout.model, layout.effort]) { + expect(trigger.width).toBeGreaterThanOrEqual(TOUCH_TARGET_MIN_PX); + expect(trigger.height).toBeGreaterThanOrEqual(TOUCH_TARGET_MIN_PX); + } + expect(layout.modelLabel.scrollWidth).toBeLessThanOrEqual(layout.modelLabel.clientWidth + 1); + for (const [left, right] of [ + [layout.status, layout.overrides], + [layout.overrides, layout.model], + [layout.model, layout.effort], + [layout.effort, layout.typing], + [layout.typing, layout.meta], + ] as const) { + expect(rectsOverlap(left, right)).toBe(false); + } + } finally { + await closeBrowserPage(page); + } + }); + it.each([ [320, 568], [393, 852], @@ -2218,6 +2401,8 @@ describeBrowserLayout.concurrent("chat responsive browser layout", () => { y: rect.y, width: rect.width, height: rect.height, + clientWidth: node.clientWidth, + scrollWidth: node.scrollWidth, display: getComputedStyle(node).display, }; }; @@ -2230,6 +2415,14 @@ describeBrowserLayout.concurrent("chat responsive browser layout", () => { textarea: rectFor(".agent-chat__composer-combobox > textarea"), meta: rectFor(".agent-chat__composer-meta"), model: rectFor(".chat-composer-model-control"), + modelTrigger: rectFor(".chat-controls__model-trigger"), + modelLabel: rectFor( + ".chat-controls__model-trigger .chat-controls__inline-select-label", + ), + effortTrigger: rectFor(".chat-controls__effort-trigger"), + effortLabel: rectFor( + ".chat-controls__effort-trigger .chat-controls__inline-select-label", + ), context: rectFor(".context-ring"), attach: rectFor('.agent-chat__input-btn[aria-label="Add attachment"]'), send: rectFor(".chat-send-btn"), @@ -2244,11 +2437,28 @@ describeBrowserLayout.concurrent("chat responsive browser layout", () => { const textarea = expectControlRect(controls.textarea, "composer textarea"); const meta = expectControlRect(controls.meta, "composer metadata"); const model = expectControlRect(controls.model, "composer model control"); + const modelTrigger = expectControlRect(controls.modelTrigger, "composer model trigger"); + const modelLabel = expectControlRect(controls.modelLabel, "composer model label"); + const effortTrigger = expectControlRect( + controls.effortTrigger, + "composer thinking trigger", + ); + const effortLabel = expectControlRect(controls.effortLabel, "composer thinking label"); const context = expectControlRect(controls.context, "composer context control"); const attach = expectControlRect(controls.attach, "composer attach control"); const send = expectControlRect(controls.send, "composer send control"); - for (const control of [footer, textarea, meta, model, context, attach, send]) { + for (const control of [ + footer, + textarea, + meta, + model, + modelTrigger, + effortTrigger, + context, + attach, + send, + ]) { expect(control.x).toBeGreaterThanOrEqual(input.x - 1); expect(control.x + control.width).toBeLessThanOrEqual(input.x + input.width + 1); } @@ -2267,6 +2477,9 @@ describeBrowserLayout.concurrent("chat responsive browser layout", () => { expect(send.x).toBeGreaterThanOrEqual(textarea.x + textarea.width - 1); expect(send.x + send.width).toBeLessThanOrEqual(input.x + input.width + 1); expect(rectsOverlap(model, send)).toBe(false); + const effortContextGap = context.x - (effortTrigger.x + effortTrigger.width); + expect(effortContextGap).toBeGreaterThanOrEqual(-1); + expect(effortContextGap).toBeLessThanOrEqual(9); const composerFontSize = await page .locator(".agent-chat__composer-combobox > textarea") .evaluate((textareaNode) => Number.parseFloat(getComputedStyle(textareaNode).fontSize)); @@ -2274,6 +2487,15 @@ describeBrowserLayout.concurrent("chat responsive browser layout", () => { expect(composerFontSize).toBe(16); expect(model.width).toBeGreaterThanOrEqual(40); expect(model.width).toBeLessThanOrEqual(footer.width); + for (const trigger of [modelTrigger, effortTrigger]) { + expect(trigger.width).toBeGreaterThanOrEqual(TOUCH_TARGET_MIN_PX); + expect(trigger.height).toBeGreaterThanOrEqual(TOUCH_TARGET_MIN_PX); + } + for (const label of [modelLabel, effortLabel]) { + expect(label.clientWidth).toBeDefined(); + expect(label.scrollWidth).toBeDefined(); + expect(label.scrollWidth ?? 0).toBeLessThanOrEqual((label.clientWidth ?? 0) + 1); + } expect(send.width).toBeGreaterThanOrEqual(TOUCH_TARGET_MIN_PX); expect(send.height).toBeGreaterThanOrEqual(TOUCH_TARGET_MIN_PX); for (const control of [model, context]) { diff --git a/ui/src/pages/chat/components/chat-composer-dom.ts b/ui/src/pages/chat/components/chat-composer-dom.ts index 13413704ed43..143e14bc495d 100644 --- a/ui/src/pages/chat/components/chat-composer-dom.ts +++ b/ui/src/pages/chat/components/chat-composer-dom.ts @@ -17,10 +17,109 @@ type ComposerTextareaResizeObserverState = { adjustmentFrame: number | null; }; +type ComposerPopoverAnchorObserverState = { + resizeObserver: ResizeObserver | null; + toggleObserver: MutationObserver | null; + viewport: VisualViewport | null; + updateFrame: number | null; + scheduleUpdate: () => void; +}; + const composerTextareaResizeObservers = new WeakMap< HTMLTextAreaElement, ComposerTextareaResizeObserverState >(); +const composerPopoverAnchorObservers = new WeakMap< + HTMLElement, + ComposerPopoverAnchorObserverState +>(); + +const COMPOSER_POPOVER_GAP_PX = 6; +// max-height constrains the menu's scrollable box before its border/padding; +// include that chrome so the outer panel retains a viewport gutter. +const COMPOSER_POPOVER_VIEWPORT_INSET_PX = 28; + +function updateComposerPopoverAnchor(el: HTMLElement) { + const viewport = window.visualViewport; + const viewportTop = viewport?.offsetTop ?? 0; + const layoutViewportHeight = document.documentElement.clientHeight || window.innerHeight; + const composerTop = el.getBoundingClientRect().top; + const bottom = layoutViewportHeight - composerTop + COMPOSER_POPOVER_GAP_PX; + const maxHeight = composerTop - viewportTop - COMPOSER_POPOVER_VIEWPORT_INSET_PX; + el.style.setProperty("--chat-composer-popover-bottom", `${Math.max(0, bottom)}px`); + el.style.setProperty("--chat-composer-popover-max-height", `${Math.max(0, maxHeight)}px`); +} + +function observeComposerPopoverAnchor(el: HTMLElement) { + if (composerPopoverAnchorObservers.has(el)) { + return; + } + const viewport = window.visualViewport; + const state: ComposerPopoverAnchorObserverState = { + resizeObserver: null, + toggleObserver: null, + viewport, + updateFrame: null, + scheduleUpdate: () => { + if (state.updateFrame !== null) { + return; + } + state.updateFrame = requestAnimationFrame(() => { + state.updateFrame = null; + if (composerPopoverAnchorObservers.get(el) === state) { + updateComposerPopoverAnchor(el); + } + }); + }, + }; + if (typeof ResizeObserver === "function") { + state.resizeObserver = new ResizeObserver(state.scheduleUpdate); + state.resizeObserver.observe(el); + } + if (typeof MutationObserver === "function") { + state.toggleObserver = new MutationObserver(state.scheduleUpdate); + state.toggleObserver.observe(el, { + attributes: true, + attributeFilter: ["open"], + subtree: true, + }); + } + window.addEventListener("resize", state.scheduleUpdate); + viewport?.addEventListener("resize", state.scheduleUpdate); + viewport?.addEventListener("scroll", state.scheduleUpdate); + composerPopoverAnchorObservers.set(el, state); + updateComposerPopoverAnchor(el); +} + +export function disconnectComposerPopoverAnchorObserver(el: HTMLElement) { + const state = composerPopoverAnchorObservers.get(el); + composerPopoverAnchorObservers.delete(el); + if (!state) { + return; + } + state.resizeObserver?.disconnect(); + state.toggleObserver?.disconnect(); + window.removeEventListener("resize", state.scheduleUpdate); + state.viewport?.removeEventListener("resize", state.scheduleUpdate); + state.viewport?.removeEventListener("scroll", state.scheduleUpdate); + if (state.updateFrame !== null) { + cancelAnimationFrame(state.updateFrame); + } +} + +export function replaceComposerPopoverAnchor( + previous: HTMLElement | null, + element?: Element, +): HTMLElement | null { + const next = element instanceof HTMLElement ? element : null; + if (previous && previous !== next) { + disconnectComposerPopoverAnchorObserver(previous); + } + if (next) { + observeComposerPopoverAnchor(next); + } + return next; +} function updateTextareaOverflow(el: HTMLTextAreaElement) { el.style.overflowY = el.scrollHeight > el.clientHeight ? "auto" : "hidden"; diff --git a/ui/src/pages/chat/components/chat-composer-state.ts b/ui/src/pages/chat/components/chat-composer-state.ts index 71b19c4587b6..4843f893f379 100644 --- a/ui/src/pages/chat/components/chat-composer-state.ts +++ b/ui/src/pages/chat/components/chat-composer-state.ts @@ -1,6 +1,9 @@ import type { ChatQueueItem } from "../../../lib/chat/chat-types.ts"; import type { ChatRunUiStatus } from "../run-lifecycle.ts"; -import { adjustTextareaHeight } from "./chat-composer-dom.ts"; +import { + adjustTextareaHeight, + disconnectComposerPopoverAnchorObserver, +} from "./chat-composer-dom.ts"; import { clearGoalElapsedTimers } from "./chat-composer-goal.ts"; import type { ChatComposerProps, ChatComposerState } from "./chat-composer-types.ts"; @@ -30,6 +33,7 @@ function createChatComposerState(): ChatComposerState { gatewayQuestionCollapsed: false, questionTakeoverActive: false, restoreComposerFocus: false, + composerInput: null, composerTextarea: null, microphonePickerOpen: false, microphonePickerLoading: false, @@ -40,6 +44,7 @@ function createChatComposerState(): ChatComposerState { capabilityMenuOpen: false, capabilityMenuView: "root", textareaRef: null, + composerInputRef: null, dictation: null, dictationDraftKey: null, dictationSelection: null, @@ -158,6 +163,9 @@ export function resetChatComposerState(paneId?: string) { const paneState = composerStates.get(paneId); paneState?.dictation?.dispose(); if (paneState) { + if (paneState.composerInput) { + disconnectComposerPopoverAnchorObserver(paneState.composerInput); + } releaseMicrophoneDeviceWatch(paneState); } composerStates.delete(paneId); @@ -165,6 +173,9 @@ export function resetChatComposerState(paneId?: string) { } for (const state of composerStates.values()) { state.dictation?.dispose(); + if (state.composerInput) { + disconnectComposerPopoverAnchorObserver(state.composerInput); + } releaseMicrophoneDeviceWatch(state); } composerStates.clear(); diff --git a/ui/src/pages/chat/components/chat-composer-types.ts b/ui/src/pages/chat/components/chat-composer-types.ts index 5624049f5a8b..2c765ba7a90a 100644 --- a/ui/src/pages/chat/components/chat-composer-types.ts +++ b/ui/src/pages/chat/components/chat-composer-types.ts @@ -182,6 +182,7 @@ export type ChatComposerState = { gatewayQuestionCollapsed: boolean; questionTakeoverActive: boolean; restoreComposerFocus: boolean; + composerInput: HTMLElement | null; composerTextarea: HTMLTextAreaElement | null; microphonePickerOpen: boolean; microphonePickerLoading: boolean; @@ -192,8 +193,9 @@ export type ChatComposerState = { microphoneDiscoveryRequest: number; capabilityMenuOpen: boolean; capabilityMenuView: ChatComposerPlusMenuView; - // Stable Lit ref: an inline arrow would change identity per render and force - // a layout re-measure of the textarea on every chat render, not just attach. + // Stable Lit refs: inline arrows would change identity per render and force + // layout observers to detach and reconnect on every chat update. + composerInputRef: ((element?: Element) => void) | null; textareaRef: ((element?: Element) => void) | null; dictation: ComposerDictationController | null; dictationDraftKey: string | null; diff --git a/ui/src/pages/chat/components/chat-composer-view.ts b/ui/src/pages/chat/components/chat-composer-view.ts index ff1901b289d9..7a30c2bdfa61 100644 --- a/ui/src/pages/chat/components/chat-composer-view.ts +++ b/ui/src/pages/chat/components/chat-composer-view.ts @@ -170,6 +170,7 @@ export function renderChatComposerView(context: ChatComposerViewContext) { ? html`
focusComposerFromChrome(event, canCompose)} + ${ref(state.composerInputRef ?? undefined)} > ${props.offline ? html`
diff --git a/ui/src/pages/chat/components/chat-composer.ts b/ui/src/pages/chat/components/chat-composer.ts index 7205ff7ec9c0..fcb3dba26699 100644 --- a/ui/src/pages/chat/components/chat-composer.ts +++ b/ui/src/pages/chat/components/chat-composer.ts @@ -14,6 +14,7 @@ import { disconnectTextareaOverflowObserver, observeTextareaOverflow, preserveComposerFocusOnPrimaryAction, + replaceComposerPopoverAnchor, restoreHistoryCaret, scheduleTextareaHeightAdjustment, } from "./chat-composer-dom.ts"; @@ -140,6 +141,9 @@ export function renderChatComposer(props: ChatComposerProps) { state.dictationDraftKey = draftKey; const visibleDraft = state.composingDraft?.key === draftKey ? state.composingDraft.value : props.draft; + state.composerInputRef ??= (element?: Element) => { + state.composerInput = replaceComposerPopoverAnchor(state.composerInput, element); + }; state.textareaRef ??= (element?: Element) => { const nextTextarea = element instanceof HTMLTextAreaElement ? element : null; const prevTextarea = state.composerTextarea; diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css index e667d44d2479..e8fb480050e4 100644 --- a/ui/src/styles/chat/layout.css +++ b/ui/src/styles/chat/layout.css @@ -3629,16 +3629,48 @@ openclaw-chat-video-player { .agent-chat__composer-controls { order: 0; - display: grid; - /* Three columns: settings, the transient interrupted toast (absent in - the normal state, so its column collapses), and the model picker. */ - grid-template-columns: 40px minmax(0, max-content) minmax(0, max-content); + display: flex; + justify-content: flex-end; flex: 1 1 0; width: auto; margin-left: 0; gap: 0; } + .agent-chat__input .agent-chat__composer-controls { + min-width: 187px; + } + + .agent-chat__input .agent-chat__composer-run-status, + .agent-chat__input .agent-chat__session-overrides-pill { + flex: 1 1 auto; + } + + .agent-chat__input .agent-chat__composer-run-status { + min-width: 23px; + overflow: hidden; + } + + .agent-chat__input .agent-chat__session-overrides-pill { + min-width: 26px; + } + + .agent-chat__input .agent-chat__composer-run-status .agent-chat__run-status { + min-width: 0; + flex-shrink: 1; + } + + .agent-chat__input .agent-chat__session-overrides-open { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .agent-chat__input .agent-chat__session-overrides-clear { + flex: 0 0 26px; + } + .agent-chat__composer-meta { margin-left: 0; } @@ -3651,25 +3683,49 @@ openclaw-chat-video-player { margin-left: 0; } - /* The borderless trigger is 30px on desktop; keep a >=40px touch target - inside the mobile composer grid. */ - .agent-chat__composer-controls .chat-controls__inline-select-trigger { + /* Reserve the readable model trigger, 44px effort target, and their gap; + keep the picker cluster right-aligned like desktop while transient status + text yields before either picker does. */ + .agent-chat__input .agent-chat__composer-controls .chat-composer-model-control { + flex: 0 1 auto; + min-width: 138px; + } + + .agent-chat__input .agent-chat__composer-controls .chat-controls__model-picker { + flex: 1 1 auto; + } + + .agent-chat__input .agent-chat__composer-controls .chat-controls__effort-picker { + flex: 0 0 auto; + min-width: 44px; + } + + .agent-chat__input .agent-chat__typing-indicator { + flex: 1 1 auto; + overflow: hidden; + } + + /* The borderless trigger is 30px on desktop; keep a >=44px touch target + inside the mobile composer row. */ + .agent-chat__input .agent-chat__composer-controls .chat-controls__inline-select-trigger { width: fit-content; max-width: 100%; - height: 40px; - min-height: 40px; + min-width: 44px; + height: 44px; + min-height: 44px; gap: 4px; padding: 0 2px 0 4px; } .agent-chat__input .chat-controls__model-menu, .agent-chat__input .chat-controls__effort-menu { + box-sizing: border-box; position: fixed; - left: auto; + left: max(12px, var(--safe-area-left)); right: max(12px, var(--safe-area-right)); - bottom: calc(96px + var(--safe-area-bottom)); - width: min(392px, calc(100vw - 24px)); - max-height: min(440px, calc(100vh - 116px - var(--safe-area-bottom))); + bottom: var(--chat-composer-popover-bottom, calc(96px + var(--safe-area-bottom))); + width: auto; + max-height: min(440px, var(--chat-composer-popover-max-height, calc(100dvh - 116px))); } .agent-chat__composer-shell { @@ -3690,16 +3746,10 @@ openclaw-chat-video-player { overscroll-behavior: contain; } - .agent-chat__input:has(.chat-controls__inline-select[open]), .agent-chat__input:has(.agent-chat__attach-menu[open]) { overflow: visible; } - .agent-chat__input .chat-controls__model-menu, - .agent-chat__input .chat-controls__effort-menu { - max-height: calc(100vh - 148px); - } - .agent-chat__composer-footer { position: sticky; bottom: 0; @@ -3724,22 +3774,22 @@ openclaw-chat-video-player { } @media (max-width: 640px), (max-width: 932px) and (max-height: 500px) and (orientation: landscape) { - /* Backdrop-filter contains fixed descendants; lift it and the landscape scroll clip while open. */ + /* Backdrop filtering contains fixed descendants, so lift it while the + viewport-anchored panels are open. */ .agent-chat__input:has(.chat-controls__inline-select[open]), - .agent-chat__input:has(.context-usage details[open]), - .agent-chat__input:has(.agent-chat__attach-menu[open]) { - overflow: visible; + .agent-chat__input:has(.context-usage details[open]) { backdrop-filter: none; -webkit-backdrop-filter: none; } .context-usage__popover { + box-sizing: border-box; position: fixed; left: max(12px, var(--safe-area-left)); right: max(12px, var(--safe-area-right)); - bottom: calc(96px + var(--safe-area-bottom)); + bottom: var(--chat-composer-popover-bottom, calc(96px + var(--safe-area-bottom))); width: auto; - max-height: calc(100vh - 116px - var(--safe-area-bottom)); + max-height: var(--chat-composer-popover-max-height, calc(100dvh - 116px)); overflow-y: auto; } } diff --git a/ui/src/styles/new-session.css b/ui/src/styles/new-session.css index 0cfb5f1890e1..6f04019282bb 100644 --- a/ui/src/styles/new-session.css +++ b/ui/src/styles/new-session.css @@ -628,17 +628,17 @@ wa-dropdown.new-session-page__start-menu { gap: 4px 2px; } - /* The shared chat footer becomes a three-column grid on mobile, but a new - session has visibility pills instead of the chat settings slot. Keep - those pills intrinsic and let the model picker use the remaining width. */ + /* A new session has visibility pills instead of the chat settings cluster. + Keep those pills intrinsic and let the model picker use the remaining width. */ .new-session-page__composer .agent-chat__composer-controls { display: flex; - gap: 4px; + gap: 2px; } - .new-session-page__composer .chat-composer-model-control { + .new-session-page__composer .agent-chat__input .chat-composer-model-control { flex: 1 1 auto; width: auto; + min-width: 0; max-width: 100%; margin-left: auto; }