feat: optimize chat page scroll area

2026-07-29 20:25:22 +08:00
parent a0534b7b8a
commit a4602b959e
22 changed files with 358 additions and 76 deletions
@@ -15,6 +15,7 @@ import type { IConversation } from './service.ts'
 import { InputHub } from './input/hub.ts'
 import { InputBar } from './skeleton/InputBar.tsx'
 import { ChatView } from './chat/ChatView.tsx'
+import { StatsLine } from './chat/StatsLine.tsx'
 import { bashToolviewSample } from './toolviews/bash-sample.tsx'
 import { ApprovalPanel } from './skeleton/ApprovalPanel.tsx'
 import { todoToolview } from './toolviews/todo-row.tsx'
@@ -208,6 +209,9 @@ export function apply(ctx: Context): void {
    },
  }, ChatView)

+  // Session stats stick with the composer (composer.dock = stats-line family).
+  slots.register({ name: 'conversation.composer.dock', id: 'stats', order: 0 }, StatsLine)
+
  // Class-plugin mount (packages/AGENTS.md service form): the service
  // registers itself as `conversation` and lives on its own child fiber.
  // Mounted AFTER the chat entry register above — construction guarantee for
@@ -1,6 +1,8 @@
 /* Chat flow: one 16px rhythm everywhere — between blocks (prose <-> tool
   runs) via the column gap and between consecutive tool rows via the group
-   gap. Input padding cap rides the skeleton. */
+   gap. Input padding cap rides the skeleton. Under
+   `[data-conversation-scroll]` the column host owns overflow and this view
+   is ordinary flow (see ConversationRoot active-phase rules). */

 .root {
  position: relative;
@@ -17,6 +19,18 @@
  padding: 16px 24px;
 }

+:global([data-conversation-scroll]) .root {
+  flex: 0 0 auto;
+  min-height: auto;
+  height: auto;
+}
+
+:global([data-conversation-scroll]) .scroll {
+  overflow: visible;
+  flex: 0 0 auto;
+  min-height: auto;
+}
+
 /* Message column: 736px fixed width, centered on the same axis as the
   input box; the scroller itself stays full-bleed. */
 .column {
@@ -113,16 +127,34 @@
  opacity: 0.6;
 }

-/* Back-to-bottom: 34px circular icon button at the column's right edge. */
-.toBottom {
-  position: absolute;
-  right: max(24px, calc((100% - 736px) / 2));
+/* Back-to-bottom: zero-height sticky slot so the control does not extend
+   scrollHeight; the button translates up into the viewport. Under the
+   conversation host, clearance sits above the sticky composer stack. */
+.toBottomSlot {
+  position: sticky;
  bottom: 16px;
-  width: 34px;
-  height: 34px;
+  /* Above the sticky composer (z-index 7) so the control stays clickable and
+     visible over the input card. */
+  z-index: 8;
+  height: 0;
+  display: flex;
+  justify-content: flex-end;
+  padding-right: max(0px, calc((100% - 736px) / 2));
+  pointer-events: none;
+}
+
+:global([data-conversation-scroll]) .toBottomSlot {
+  /* Clears the sticky composer stack (stats + docks + input card). */
+  bottom: 168px;
+}
+
+.toBottom {
  display: flex;
  align-items: center;
  justify-content: center;
+  width: 34px;
+  height: 34px;
+  margin-top: -34px;
  padding: 0;
  border: 1px solid var(--dsw-alias-border-l2);
  border-radius: 100px;
@@ -130,6 +162,7 @@
  background: var(--dsw-alias-button-floating-fill);
  box-shadow: var(--dsw-shadow-lv2);
  cursor: pointer;
+  pointer-events: auto;
 }

 .toBottom:hover {
@@ -1,11 +1,16 @@
 // ChatView: the default conversation view — message flow with user bubbles,
 // assistant narration, tool summary rows grouped into step runs, pending
-// cards, paging, bottom-follow, and the session stats line under the flow
-// (chrome dissolved into the view: the footer is part of what a chat view
-// IS, not registration metadata). Pure component registered directly; its
-// registration declares the keyed 'conversation.chat.toolview' hole, so tool
-// rows render through the props renderSlot share (entryKey = tool name,
-// GenericToolCard as the render-site fallback).
+// cards, paging, and bottom-follow. Session stats live on
+// 'conversation.composer.dock' (sticky with the composer). Pure component
+// registered directly; its registration declares the keyed
+// 'conversation.chat.toolview' hole, so tool rows render through the props
+// renderSlot share (entryKey = tool name, GenericToolCard as the render-site
+// fallback).
+//
+// Scroll: when nested under `[data-conversation-scroll]` (active conversation
+// column), that host is the scrollport and this view is flow content; when
+// mounted alone (unit tests), `.scroll` owns overflow. Bottom-follow and
+// prepend anchoring always target the resolved scrollport.
 //
 // Render economics (architecture RFC performance model): the list parent
 // subscribes to snapshot segments that do NOT change per streaming chunk
@@ -17,7 +22,7 @@
 // memoized rows never churns them.

 import {
-  memo, useLayoutEffect, useMemo, useRef, useState, type ReactNode,
+  memo, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode,
 } from 'react'
 import type {
  CodeSubCall, CommandNode, ConversationNode, ConversationSnapshot, RunningToolCall, ToolResultNode,
@@ -30,11 +35,15 @@ import { AssistantMarkdown } from './AssistantMarkdown.tsx'
 import { GenericCommandCard } from './GenericCommandCard.tsx'
 import { GenericToolCard } from './GenericToolCard.tsx'
 import { MessageItem } from './MessageItem.tsx'
-import { StatsLine } from './StatsLine.tsx'
 import css from './ChatView.module.css'

 const FOLLOW_THRESHOLD = 24

+/** Active column host when present; otherwise the view-local scroller. */
+function scrollerOf(from: HTMLElement): HTMLElement {
+  return (from.closest('[data-conversation-scroll]')) ?? from
+}
+
 type OpenFile = (path: string) => void

 /** The declared toolview hole's render share (stable framework binding, passed through memoized rows). */
@@ -248,16 +257,17 @@ export function ChatView({ useSession, useSessions, useStore, renderSlot, sessio
  const firstSeq = nodes[0]?.seq ?? null
  const lastItem = items[items.length - 1]

-  const toBottom = (el: HTMLDivElement): void => {
+  const toBottom = (el: HTMLElement): void => {
    el.scrollTop = el.scrollHeight
    atBottomRef.current = true
    setAtBottom(true)
  }

  useLayoutEffect(() => {
-    const el = listRef.current
+    const local = listRef.current
    /* v8 ignore next -- ref-null guard: React attaches the ref before layout effects run. */
-    if (el === null) return
+    if (local === null) return
+    const el = scrollerOf(local)
    // Open completed: jump to the bottom once.
    if (openState === 'open' && !openedRef.current) {
      openedRef.current = true
@@ -285,29 +295,48 @@ export function ChatView({ useSession, useSessions, useStore, renderSlot, sessio
    if (appendedUser || atBottomRef.current) toBottom(el)
  })

-  const onScroll = (): void => {
-    const el = listRef.current
-    /* v8 ignore next -- ref-null guard: the handler only fires on the mounted element. */
-    if (el === null) return
+  const onScrollRef = useRef(() => {})
+  onScrollRef.current = () => {
+    const local = listRef.current
+    /* v8 ignore next -- ref-null guard: the handler only fires while mounted. */
+    if (local === null) return
+    const el = scrollerOf(local)
    const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= FOLLOW_THRESHOLD + 1
    atBottomRef.current = isAtBottom
    setAtBottom(isAtBottom)
  }

+  // Bind scroll to the resolved scrollport (host or local) once per mount.
+  useEffect(() => {
+    const local = listRef.current
+    /* v8 ignore next -- ref-null guard: effect runs after the list node commits. */
+    if (local === null) return
+    const el = scrollerOf(local)
+    const onScroll = (): void => { onScrollRef.current() }
+    el.addEventListener('scroll', onScroll, { passive: true })
+    return () => { el.removeEventListener('scroll', onScroll) }
+  }, [])
+
  // Follow streaming growth the parent never re-renders for (stable ref).
  // The ref starts null and is assigned every render, so the placeholder
  // initializer a function initial value would need never exists.
  const followRef = useRef<(() => void) | null>(null)
  followRef.current = () => {
-    const el = listRef.current
-    if (el !== null && atBottomRef.current) el.scrollTop = el.scrollHeight
+    const local = listRef.current
+    if (local !== null && atBottomRef.current) {
+      const el = scrollerOf(local)
+      el.scrollTop = el.scrollHeight
+    }
  }
  const onGrow = useRef(() => followRef.current?.()).current

  const loadOlderAnchored = (): void => {
-    const el = listRef.current
+    const local = listRef.current
    /* v8 ignore next -- ref-null guard: the paging button renders inside the list tree. */
-    if (el !== null) anchorRef.current = { h: el.scrollHeight, t: el.scrollTop }
+    if (local !== null) {
+      const el = scrollerOf(local)
+      anchorRef.current = { h: el.scrollHeight, t: el.scrollTop }
+    }
    loadOlder()
  }

@@ -350,7 +379,7 @@ export function ChatView({ useSession, useSessions, useStore, renderSlot, sessio

  return (
    <div className={css.root}>
-      <div ref={listRef} className={css.scroll} onScroll={onScroll}>
+      <div ref={listRef} className={css.scroll}>
        <div className={css.column}>
          {openState === 'loading' && <div className={css.hint}>载入历史…</div>}
          {openState === 'error' && <div className={css.openError}>历史加载失败：{openErrorMessage}</div>}
@@ -388,22 +417,23 @@ export function ChatView({ useSession, useSessions, useStore, renderSlot, sessio
              wait, tool execution, streaming) so it never flickers per step. */}
          {running && <TurnDots />}
        </div>
+        {!atBottom && (
+          <div className={css.toBottomSlot}>
+            <button
+              type="button"
+              className={css.toBottom}
+              aria-label="回到底部"
+              onClick={() => {
+                const local = listRef.current
+                /* v8 ignore next -- ref-null guard: the button only renders alongside the mounted list. */
+                if (local !== null) toBottom(scrollerOf(local))
+              }}
+            >
+              <IconChevronDownOutline14 />
+            </button>
+          </div>
+        )}
      </div>
-      <StatsLine useSession={useSession} />
-      {!atBottom && (
-        <button
-          type="button"
-          className={css.toBottom}
-          aria-label="回到底部"
-          onClick={() => {
-            const el = listRef.current
-            /* v8 ignore next -- ref-null guard: the button only renders alongside the mounted list. */
-            if (el !== null) toBottom(el)
-          }}
-        >
-          <IconChevronDownOutline14 />
-        </button>
-      )}
    </div>
  )
 }
@@ -1,4 +1,6 @@
 // Settled-node identity prevents stream-delta updates from rerendering this row.
+// Mounted on 'conversation.composer.dock' so it sticks with the composer in the
+// active conversation scrollport (see ConversationRoot data-conversation-scroll).

 import { memo, useMemo } from 'react'
 import type { ConversationSnapshot } from '@deepseek-ai/dsh-client-runtime/client'
@@ -49,7 +51,7 @@ export function deriveStats(nodes: ConversationSnapshot['nodes']): UsageTotals {
  }
 }

-/** Props: the conversation-snapshot selector hook (handed down by ChatView). */
+/** Props: the conversation-snapshot selector (dock registration or unit mount). */
 export interface StatsLineProps { useSession: SnapshotSelectorHook<ConversationSnapshot> }

 export const StatsLine = memo(function StatsLine({ useSession }: StatsLineProps) {
@@ -117,6 +117,15 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {

 /** Owner share of the strict session content seat. */
 export interface ConversationSessionOwnerProps {
+  /**
+   * Active phase only: wrap the view ring in the transcript scrollport that
+   * also hosts the sticky composer. The header stays outside that wrapper as
+   * ordinary column chrome (`flex: none`), while the composer sticks to the
+   * bottom of the same scrollport so wheel over the footer scrolls the flow.
+   * @param view - the session view-ring content.
+   * @returns the scrollport containing `view` and the sticky composer.
+   */
+  wrapActiveBody?: (view: ReactNode) => ReactNode
 }

 /**
@@ -127,6 +127,40 @@
  flex-direction: column;
 }

+/* Active phase: header is ordinary column chrome above the scrollport (not
+   sticky). The scroll body holds the transcript and the sticky composer so
+   wheel over the footer moves the flow. */
+.root[data-phase='active'] {
+  overflow: hidden;
+}
+
+.root[data-phase='active'] .header {
+  flex: none;
+}
+
+.scrollBody {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.root[data-phase='active'] .viewArea {
+  flex: 1 0 auto;
+  min-height: auto;
+}
+
+.root[data-phase='active'] .composerStack {
+  position: sticky;
+  bottom: 0;
+  /* Above markdown CodeBlock sticky banners (z-index 6) so the footer never
+     paints under a sticking code header while scrolling. */
+  z-index: 7;
+  flex: none;
+  background: var(--dsw-alias-bg-base);
+}
+
 /* Hero phase: the composer stack (hero chrome + workspace row + card) is
   flex-centered in the column; composer phase docks it at the bottom. Flex,
   NOT absolute+transform: a transform would make this box the containing
@@ -2,7 +2,7 @@
 // chain stay mounted across no-session/session transitions. Only the inert
 // input body swaps for the strict session InputBar.

-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
 import clsx from 'clsx'
 import type { WorkspaceId } from '@deepseek-ai/dsh-client-runtime/client'
 import type { ConversationSlotProps, InputZone } from '../contract/slots.ts'
@@ -113,24 +113,42 @@ export function ConversationRoot({
      {hero && <HeroGlow className={css.heroGlow} />}
      {hero && <HeroShell />}
      {hero && heroWorkspaceRow}
-      {!hero && zone !== undefined && renderSlot('conversation.input.dock', zone)}
+      {/* Stats band above the input-dock strips so the prior ChatView footer
+          order (stats → todo/queue → card) is preserved under the sticky stack. */}
      {!hero && zone !== undefined && renderSlot('conversation.composer.dock', zone)}
+      {!hero && zone !== undefined && renderSlot('conversation.input.dock', zone)}
      {inputBar}
    </div>
  )

+  const phase = settling ? 'settling' : hero ? 'hero' : 'active'
+  const composer = renderSlotChain(
+    'conversation.composer',
+    { interactions: pending },
+    { fallback: composerBar, overlay: true },
+  )
+
+  // Active: header is column chrome above the scrollport; the sticky composer
+  // lives inside the same scrollport as the transcript (wheel over the footer
+  // scrolls the flow). Hero/settling keep the composer as a Root child.
+  const wrapActiveBody = (view: ReactNode): ReactNode => (
+    <div className={css.scrollBody} data-conversation-scroll="">
+      {view}
+      {composer}
+    </div>
+  )
+
  return (
-    <div className={css.root} data-phase={settling ? 'settling' : hero ? 'hero' : 'active'}>
+    <div className={css.root} data-phase={phase}>
      {/* Mounted for every real session, hero included: ConversationSession
          renders no chrome while blank but owns the draft-persistence mirror
          bind — unmounting it in the hero would lose pre-first-send text on
          a refresh or scope rebuild. */}
-      {sessionId !== undefined && renderSlot('conversation.session', {})}
-      {renderSlotChain(
-        'conversation.composer',
-        { interactions: pending },
-        { fallback: composerBar, overlay: true },
+      {sessionId !== undefined && renderSlot(
+        'conversation.session',
+        phase === 'active' ? { wrapActiveBody } : {},
      )}
+      {phase !== 'active' ? composer : null}
    </div>
  )
 }
@@ -1,6 +1,6 @@
 /** Strict per-session conversation content: header, view ring, and chat store bindings. */

-import { useEffect, useSyncExternalStore } from 'react'
+import { useEffect, useSyncExternalStore, type ReactNode } from 'react'
 import clsx from 'clsx'
 import { shallowEqual } from '@deepseek-ai/dsh-client-runtime/client'
 import type { SessionId, SessionListState, SessionSummary } from '@deepseek-ai/dsh-client-runtime/client'
@@ -24,7 +24,7 @@ function deriveAncestry(list: SessionListState, id: SessionId): readonly Session

 export function ConversationSession({
  sessionId, useSession, useSessions, useInput, inputActions, useStore, actions,
-  renderSlot, views, bindDraftMirror, open,
+  renderSlot, views, bindDraftMirror, open, wrapActiveBody,
 }: ConversationSessionProps) {
  useSyncExternalStore(views.subscribe, views.version)
  const tabs = views.list()
@@ -46,6 +46,12 @@ export function ConversationSession({

  if (blank && composerPhase === 'blank') return null

+  const view: ReactNode = (
+    <div className={css.viewArea}>
+      {active !== undefined && renderSlot('conversation.view', {}, { only: active.id })}
+    </div>
+  )
+
  return (
    <>
      <header className={css.header}>
@@ -72,24 +78,22 @@ export function ConversationSession({
        </div>
        {tabs.length > 1 && (
          <div className={css.tabs} role="tablist">
-            {tabs.map(view => (
+            {tabs.map(viewTab => (
              <button
-                key={view.id}
+                key={viewTab.id}
                type="button"
                role="tab"
-                aria-selected={view.id === active?.id}
-                className={clsx(css.tab, view.id === active?.id && css.tabActive)}
-                onClick={() => { actions.setView(view.id) }}
+                aria-selected={viewTab.id === active?.id}
+                className={clsx(css.tab, viewTab.id === active?.id && css.tabActive)}
+                onClick={() => { actions.setView(viewTab.id) }}
              >
-                {view.label}
+                {viewTab.label}
              </button>
            ))}
          </div>
        )}
      </header>
-      <div className={css.viewArea}>
-        {active !== undefined && renderSlot('conversation.view', {}, { only: active.id })}
-      </div>
+      {wrapActiveBody !== undefined ? wrapActiveBody(view) : view}
    </>
  )
 }
@@ -75,6 +75,22 @@ export function InputBar({
    if (!locked) inputRef.current?.focus()
  }, [locked])

+  // Active conversation scrollport: never let the textarea become a nested
+  // wheel target; forward delta to `[data-conversation-scroll]` instead.
+  // Hero mounts have no host, so the textarea keeps native wheel scrolling.
+  useEffect(() => {
+    const el = inputRef.current
+    if (el === null) return
+    const onWheel = (e: WheelEvent): void => {
+      const host = el.closest('[data-conversation-scroll]')
+      if (!(host instanceof HTMLElement)) return
+      e.preventDefault()
+      host.scrollTop += e.deltaY
+    }
+    el.addEventListener('wheel', onWheel, { passive: false })
+    return () => { el.removeEventListener('wheel', onWheel) }
+  }, [])
+
  const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>): void => {
    // Shift+Enter is the native newline UNCONDITIONALLY — decided before the
    // IME guard so a composition-closing Shift+Enter still breaks the line.