nastechai-desktop 18.1.0

package/src/components/assistant-ui/thread-list.tsx

@@ -0,0 +1,307 @@
+import { ThreadPrimitive, useAuiEvent, useAuiState } from '@assistant-ui/react'
+import {
+  type ComponentProps,
+  type FC,
+  memo,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from 'react'
+import { useStickToBottom } from 'use-stick-to-bottom'
+
+import { useI18n } from '@/i18n'
+import { cn } from '@/lib/utils'
+import {
+  onScrollToBottomRequest,
+  onThreadEditClose,
+  onThreadEditOpen,
+  resetThreadScroll,
+  setThreadAtBottom
+} from '@/store/thread-scroll'
+
+import { MessageRenderBoundary } from './message-render-boundary'
+
+type ThreadMessageComponents = ComponentProps<typeof ThreadPrimitive.MessageByIndex>['components']
+
+type MessageGroup = { id: string; weight: number } & (
+  | { index: number; kind: 'standalone' }
+  | { indices: number[]; kind: 'turn' }
+)
+
+// DOM is bounded by a rendered-PART budget, not a message/turn count: a single
+// assistant message folds every tool call into a part, so heavy sessions are
+// ~40 turns / ~100 messages but ~1000 parts — and parts are what drive node
+// count. "Show earlier" prepends another page; whole turns stay intact so the
+// sticky human bubble never loses its turn. This is the long-session perf lever
+// WITHOUT a virtualizer — pure rendering, never touches scrollTop, so it can't
+// fight use-stick-to-bottom (the single scroll owner).
+const RENDER_BUDGET = 300
+
+interface ThreadMessageListProps {
+  clampToComposer: boolean
+  components: ThreadMessageComponents
+  emptyPlaceholder?: ReactNode
+  loadingIndicator?: ReactNode
+  sessionKey?: string | null
+}
+
+// Group each user message with the assistant turn(s) that follow it so the
+// human bubble can `position: sticky` against the scroller across its whole
+// turn (see StickyHumanMessageContainer in thread.tsx).
+function buildGroups(signature: string): MessageGroup[] {
+  if (!signature) {
+    return []
+  }
+
+  const messages = signature.split('\n').map(row => {
+    const [index, id, role, weight] = row.split(':')
+
+    return { id, index: Number(index), role, weight: Number(weight) || 1 }
+  })
+
+  const groups: MessageGroup[] = []
+
+  for (let i = 0; i < messages.length; i++) {
+    const message = messages[i]
+
+    if (message.role !== 'user') {
+      groups.push({ id: message.id, index: message.index, kind: 'standalone', weight: message.weight })
+
+      continue
+    }
+
+    const indices = [message.index]
+    let weight = message.weight
+
+    while (i + 1 < messages.length && messages[i + 1].role !== 'user') {
+      weight += messages[++i].weight
+      indices.push(messages[i].index)
+    }
+
+    groups.push({ id: message.id, indices, kind: 'turn', weight })
+  }
+
+  return groups
+}
+
+const ThreadMessageListInner: FC<ThreadMessageListProps> = ({
+  clampToComposer,
+  components,
+  emptyPlaceholder,
+  loadingIndicator,
+  sessionKey
+}) => {
+  const messageSignature = useAuiState(s =>
+    s.thread.messages
+      .map((message, index) => `${index}:${message.id}:${message.role}:${message.content?.length ?? 1}`)
+      .join('\n')
+  )
+
+  const { t } = useI18n()
+  const groups = buildGroups(messageSignature)
+  const renderEmpty = groups.length === 0 && Boolean(emptyPlaceholder)
+
+  // use-stick-to-bottom owns scrollTop (single writer): follow while locked,
+  // escape on user scroll-up, re-lock at bottom. Snap instantly, not spring — a
+  // spring can't tell live-token growth from a session-switch bulk relayout, and
+  // chasing the latter reads as the view scrolling to random spots before
+  // settling. Its refs hang off our own DOM so the sticky human bubbles survive.
+  const { scrollRef, contentRef, isAtBottom, scrollToBottom, stopScroll } = useStickToBottom({
+    initial: 'instant',
+    resize: 'instant'
+  })
+
+  const [renderBudget, setRenderBudget] = useState(RENDER_BUDGET)
+
+  // Walk turns newest-first, summing their part weights until the budget is met;
+  // everything before that first kept turn is hidden.
+  let firstVisible = groups.length
+
+  for (let i = groups.length - 1, weight = 0; i >= 0; i--) {
+    weight += groups[i].weight
+    firstVisible = i
+
+    if (weight >= renderBudget) {
+      break
+    }
+  }
+
+  const hiddenCount = firstVisible
+  const visibleGroups = hiddenCount > 0 ? groups.slice(hiddenCount) : groups
+  const restoreFromBottomRef = useRef<number | null>(null)
+
+  useEffect(() => setThreadAtBottom(isAtBottom), [isAtBottom])
+  useEffect(() => () => resetThreadScroll(), [])
+
+  // Floating jump button (outside this subtree) → return to the bottom.
+  useEffect(() => onScrollToBottomRequest(() => void scrollToBottom()), [scrollToBottom])
+
+  const endEditHold = useCallback(() => {
+    scrollRef.current?.removeAttribute('data-editing')
+  }, [scrollRef])
+
+  // Inline edit grows a sticky bubble. Escape before focus/layout so the
+  // resize-follow can't snap scrollTop; native anchoring holds the viewport.
+  const beginEditHold = useCallback(() => {
+    const el = scrollRef.current
+
+    if (!el) {
+      return
+    }
+
+    endEditHold()
+    stopScroll()
+    el.setAttribute('data-editing', 'true')
+  }, [endEditHold, scrollRef, stopScroll])
+
+  useEffect(() => onThreadEditOpen(beginEditHold), [beginEditHold])
+  useEffect(() => onThreadEditClose(endEditHold), [endEditHold])
+  useEffect(() => () => endEditHold(), [endEditHold])
+  // New run → snap to the latest turn.
+  useAuiEvent('thread.runStart', () => void scrollToBottom())
+
+  // Reset the cap and pin to bottom on mount + every session switch (messages
+  // swap in place on a long-lived runtime, so sessionKey is the only signal).
+  // The swap is multi-step and lays out over many frames; letting the library
+  // follow re-pins every frame to a moving target — visible as ~10 scroll jumps.
+  // Instead: quiet it, glue to the true bottom until the height holds steady,
+  // then hand back locked. Live streaming afterward uses the normal resize follow.
+  useLayoutEffect(() => {
+    setRenderBudget(RENDER_BUDGET)
+
+    const el = scrollRef.current
+
+    if (!el) {
+      return
+    }
+
+    stopScroll()
+    el.scrollTop = el.scrollHeight
+
+    let frame = 0
+    let stableFrames = 0
+    let lastHeight = el.scrollHeight
+
+    const settle = () => {
+      const node = scrollRef.current
+
+      if (!node) {
+        return
+      }
+
+      const height = node.scrollHeight
+
+      stableFrames = height === lastHeight ? stableFrames + 1 : 0
+      lastHeight = height
+      node.scrollTop = height
+
+      // ~5 steady frames ≈ layout has settled; the frame cap bounds slow loads.
+      if (stableFrames >= 5 || ++frame > 90) {
+        void scrollToBottom('instant')
+
+        return
+      }
+
+      rafId = requestAnimationFrame(settle)
+    }
+
+    let rafId = requestAnimationFrame(settle)
+
+    return () => cancelAnimationFrame(rafId)
+  }, [scrollRef, scrollToBottom, sessionKey, stopScroll])
+
+  // Prepend an older page while preserving the on-screen position. The user is
+  // scrolled up (reading history) so the stick-to-bottom lock is escaped and
+  // won't fight this manual restore.
+  const showEarlier = useCallback(() => {
+    const el = scrollRef.current
+
+    restoreFromBottomRef.current = el ? el.scrollHeight - el.scrollTop : null
+    setRenderBudget(budget => budget + RENDER_BUDGET)
+  }, [scrollRef])
+
+  useLayoutEffect(() => {
+    const el = scrollRef.current
+
+    if (el && restoreFromBottomRef.current != null) {
+      el.scrollTop = el.scrollHeight - restoreFromBottomRef.current
+      restoreFromBottomRef.current = null
+    }
+  }, [scrollRef, renderBudget])
+
+  return (
+    <div
+      className="relative min-h-0 max-w-full overflow-hidden contain-[layout_paint]"
+      style={{ height: clampToComposer ? 'var(--thread-viewport-height)' : '100%' }}
+    >
+      <div
+        className="size-full overflow-x-hidden overflow-y-auto overscroll-contain"
+        data-following={isAtBottom ? 'true' : 'false'}
+        data-slot="aui_thread-viewport"
+        ref={scrollRef as React.RefCallback<HTMLDivElement>}
+      >
+        {renderEmpty ? (
+          <div
+            className="mx-auto grid h-full w-full max-w-(--composer-width) grid-rows-[minmax(0,1fr)_auto] min-w-0 gap-(--conversation-turn-gap) px-6 py-8"
+            data-slot="aui_thread-content"
+          >
+            {emptyPlaceholder}
+          </div>
+        ) : (
+          <div
+            className={cn(
+              'mx-auto flex w-full max-w-(--composer-width) min-w-0 flex-col px-6 pt-[calc(var(--titlebar-height)+1.5rem)]'
+            )}
+            data-slot="aui_thread-content"
+            ref={contentRef as React.RefCallback<HTMLDivElement>}
+          >
+            {hiddenCount > 0 && (
+              <button
+                className="mx-auto mb-(--conversation-turn-gap) rounded-full border border-border/65 bg-(--composer-fill) px-3 py-1 text-xs text-muted-foreground hover:text-foreground"
+                onClick={showEarlier}
+                type="button"
+              >
+                {t.assistant.thread.showEarlier}
+              </button>
+            )}
+            {visibleGroups.map(group => (
+              <div
+                className="flex min-w-0 flex-col gap-(--conversation-turn-gap) pb-(--conversation-turn-gap)"
+                key={group.id}
+              >
+                <MessageRenderBoundary resetKey={messageSignature}>
+                  {group.kind === 'turn' ? (
+                    <div
+                      className="composer-human-ai-pair-container relative flex min-w-0 flex-col gap-(--conversation-turn-gap)"
+                      data-slot="aui_turn-pair"
+                    >
+                      {group.indices.map(index => (
+                        <ThreadPrimitive.MessageByIndex components={components} index={index} key={index} />
+                      ))}
+                    </div>
+                  ) : (
+                    <ThreadPrimitive.MessageByIndex components={components} index={group.index} />
+                  )}
+                </MessageRenderBoundary>
+              </div>
+            ))}
+            {loadingIndicator}
+            {clampToComposer && (
+              <div
+                aria-hidden="true"
+                className="shrink-0"
+                data-slot="aui_composer-clearance"
+                style={{ height: 'var(--thread-last-message-clearance)' }}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export const ThreadMessageList = memo(ThreadMessageListInner)