bugfix: think content scroll issue #1023

zerob13 · 2025-10-17T03:55:50Z

Summary by CodeRabbit

New Features
- Added Message List Simulator to the playground with configurable typing speed, viewport dimensions, and playback controls (Restart, Pause/Resume, Finish, Scroll).
Improvements
- Enhanced message scrolling logic for better auto-scroll behavior.
- Simplified think content styling by removing dynamic shimmer animation.
Documentation
- Updated banner images across README files for consistency.

coderabbitai · 2025-10-17T03:56:01Z

Walkthrough

This PR updates documentation assets across README files, refactors ThinkContent component by removing shimmer styling and simplifying props declaration, reworks MessageList's scroll-to-bottom mechanism from anchor-based to container-based calculation, adds playground infrastructure for wider component display, and introduces a new MessageListDemo component with tick-based streaming simulation.

Changes

Cohort / File(s)	Summary
Documentation Assets `README.md`, `README.jp.md`, `README.zh.md`	Updated banner image URLs and alt text; corrected alt text language consistency (Japanese to English labels where applicable)
ThinkContent Component Refactoring `src/renderer/src/components/think-content/ThinkContent.vue`	Removed conditional shimmer styling from template; eliminated `shimmerStyle` computed property; simplified props declaration by removing local `props` variable binding
MessageList Scroll Logic `src/renderer/src/components/message/MessageList.vue`	Replaced anchor-based scrolling with direct container calculation; computes `targetTop` from `scrollHeight` and `clientHeight`, scrolls via `scrollTo()` method or direct `scrollTop` assignment
Playground Infrastructure `src/renderer/src/views/playground/DemoSection.vue`, `src/renderer/src/views/PlaygroundTabView.vue`	Added optional `fullWidth` prop to DemoSection with dynamic `md:col-span-2` class binding; added explicit `full-width` prop bindings to demo components; integrated new MessageListDemo section
MessageListDemo Component `src/renderer/src/views/playground/demos/MessageListDemo.vue`	New comprehensive demo component featuring tick-based scheduler for streaming simulation, auto-scroll threshold detection, playback controls (Restart, Pause/Resume, Finish, Scroll Bottom), and configurable typing speed and viewport dimensions

Sequence Diagram

sequenceDiagram
    participant User
    participant MessageListDemo
    participant Scheduler
    participant MessageList
    participant Container

    User->>MessageListDemo: Configure (speedMs, dimensions)
    User->>MessageListDemo: Click Restart
    MessageListDemo->>Scheduler: Initialize tick loop
    
    loop Streaming Phases
        Scheduler->>MessageListDemo: scheduleTick()
        MessageListDemo->>MessageListDemo: Advance reasoningChars/responseChars
        MessageListDemo->>MessageList: Update message content
        MessageList->>Container: Render updated content
        Container->>Container: Calculate scrollHeight/clientHeight
        alt aboveThreshold
            Container->>Container: scrollTo(targetTop)
        end
    end
    
    User->>MessageListDemo: Click Finish
    MessageListDemo->>MessageListDemo: Complete all phases instantly
    MessageListDemo->>Container: Scroll to bottom

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

The PR spans multiple components with distinct change patterns: trivial README updates, straightforward component cleanup (ThinkContent), medium-complexity scroll refactoring (MessageList), and a substantial new demo component with state-management logic (MessageListDemo). The changes are moderately heterogeneous but self-contained within their respective modules, requiring focused review of scroll mechanics and the new streaming simulator logic.

Possibly related PRs

feat(ui): new design tokens #969: Directly conflicts with ThinkContent shimmer styling removal; this PR removes the shimmer class while that PR adds conditional loading-shimmer for thinking state.
fix: improve auto scroll behavior for fast AI responses #798: Modifies the same MessageList.vue scroll-to-bottom logic with overlapping changes to smooth scrolling and guard conditions.
fix: improve chat auto-scroll detection with IntersectionObserver #657: Changes auto-scroll detection in MessageList.vue from anchor/IntersectionObserver-based to container-based calculation, directly overlapping with this PR's scroll refactor.

Suggested labels

codex

Poem

🐰 Hop along, dear readers, as we scroll anew,
From anchors past to math we construe,
The shimmer fades, the demos take flight,
MessageLists streaming through day and through night! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title Check	⚠️ Warning	The PR title states "bugfix: think content scroll issue," which suggests that think content has scroll-related problems being fixed. However, examining the actual changes reveals a mismatch: the ThinkContent.vue component changes involve removing shimmer styling and dynamic class bindings—not scroll-related fixes. The scroll-to-bottom logic refactoring occurs in MessageList.vue, a separate component not directly tied to think content. Additionally, the source branch name is "bugfix/think-content-shimmer," indicating the primary think content fix is shimmer-related, contradicting the PR title's claim about a scroll issue. The title bundles "think content" and "scroll" together in a way that doesn't accurately reflect the actual changes made.	The title should be revised to accurately represent the primary changes. Consider a title like "bugfix: remove think content shimmer styling" or, if the scroll refactoring is equally important, "refactor: improve message list scroll and think content styling." This would align the title with the actual changes and match the branch intent. Alternatively, if the scroll improvements are the primary focus, the title should reference MessageList rather than think content.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch bugfix/think-content-shimmer

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (5)

src/renderer/src/components/message/MessageList.vue (1)

392-406: Container-based bottom scroll fix is solid

Correct targetTop calc and smooth/instant handling; guard for missing container is good. Optionally, defer updateScrollInfo for smooth case (post-scroll) to avoid brief stale state; scroll handler will update anyway.
-    updateScrollInfo()
+    if (smooth) {
+      // rely on @scroll; optionally schedule a late update
+      requestAnimationFrame(() => updateScrollInfo())
+    } else {
+      updateScrollInfo()
+    }

src/renderer/src/views/playground/DemoSection.vue (1)

25-31: Avoid any for demo prop

Type as a Vue Component to keep TS strict.

-defineProps<{
+import type { Component } from 'vue'
+defineProps<{
   title: string
   description?: string
   componentName?: string
-  demo: any
+  demo: Component
   fullWidth?: boolean
 }>()

As per coding guidelines

src/renderer/src/views/PlaygroundTabView.vue (1)

150-157: Internationalize new UI strings

Wrap title/description with vue‑i18n keys instead of literals.

+import { useI18n } from 'vue-i18n'
 ...
-const sections = computed(() => [
+const { t } = useI18n()
+const sections = computed(() => [
 ...
-  {
-    title: 'Message List Simulator',
-    description:
-      'Stream long reasoning output with adjustable typing speed and viewport to study auto-scroll.',
+  {
+    title: t('playground.messageListSimulator.title'),
+    description: t('playground.messageListSimulator.description'),
     componentName: '@/components/message/MessageList.vue',
     render: MessageListDemo,
     fullWidth: true
   },

As per coding guidelines

src/renderer/src/views/playground/demos/MessageListDemo.vue (2)

5-21: Internationalize all visible strings

Replace hardcoded UI text with vue‑i18n keys (labels, buttons, status).

+import { useI18n } from 'vue-i18n'
 ...
+const { t } = useI18n()
 ...
-<Label ...>Typing Speed (ms / char)</Label>
+<Label ...>{{ t('playground.messageListDemo.typingSpeed') }}</Label>
 ...
-<Label ...>Width (px)</Label>
+<Label ...>{{ t('playground.messageListDemo.widthPx') }}</Label>
 ...
-<Label ...>Height (px)</Label>
+<Label ...>{{ t('playground.messageListDemo.heightPx') }}</Label>
 ...
-<Button ...>Restart</Button>
+<Button ...>{{ t('common.restart') }}</Button>
 ...
-{{ streamingPaused ? 'Resume' : 'Pause' }}
+{{ streamingPaused ? t('common.resume') : t('common.pause') }}
 ...
-<Button ...>Finish</Button>
+<Button ...>{{ t('common.finish') }}</Button>
 ...
-<Button ...>Scroll Bottom</Button>
+<Button ...>{{ t('playground.messageListDemo.scrollBottom') }}</Button>
 ...
-<div>Phase: {{ phaseLabel }}</div>
+<div>{{ t('playground.messageListDemo.phase') }}: {{ phaseLabel }}</div>

Also localize Yes/No strings and other labels accordingly. As per coding guidelines

Also applies to: 23-47, 49-64, 76-85

100-101: Remove // @ts-ignore by typing the component expose

Define a local instance type for MessageList’s exposed API.

-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import type { Ref } from 'vue'
 ...
-const messageListRef = ref<InstanceType<typeof MessageList>>()
+type MessageListExpose = {
+  scrollToBottom: (smooth?: boolean) => void
+  scrollToMessage: (messageId: string) => void
+  aboveThreshold: Ref<boolean>
+}
+const messageListRef = ref<MessageListExpose>()
 ...
-// @ts-ignore
-const aboveThreshold = computed(() => messageListRef.value?.aboveThreshold?.value ?? false)
+const aboveThreshold = computed(() => messageListRef.value?.aboveThreshold.value ?? false)

Keeps TS strict and avoids ignores. As per coding guidelines

Also applies to: 182-184

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0302f2d and 9cc96f2.

📒 Files selected for processing (8)

README.jp.md (1 hunks)
README.md (1 hunks)
README.zh.md (1 hunks)
src/renderer/src/components/message/MessageList.vue (1 hunks)
src/renderer/src/components/think-content/ThinkContent.vue (2 hunks)
src/renderer/src/views/PlaygroundTabView.vue (3 hunks)
src/renderer/src/views/playground/DemoSection.vue (2 hunks)
src/renderer/src/views/playground/demos/MessageListDemo.vue (1 hunks)

🧰 Additional context used

📓 Path-based instructions (16)

src/renderer/src/**/*

📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)

src/renderer/src/**/*: All user-facing strings must use i18n keys (avoid hardcoded user-visible text in code)
Use the 'vue-i18n' framework for all internationalization in the renderer
Ensure all user-visible text in the renderer uses the translation system

Files:

src/renderer/src/views/playground/DemoSection.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/views/PlaygroundTabView.vue
src/renderer/src/views/playground/demos/MessageListDemo.vue
src/renderer/src/components/think-content/ThinkContent.vue

src/renderer/**/*.{vue,ts,js,tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)

渲染进程代码放在 src/renderer

Files:

src/renderer/src/views/playground/DemoSection.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/views/PlaygroundTabView.vue
src/renderer/src/views/playground/demos/MessageListDemo.vue
src/renderer/src/components/think-content/ThinkContent.vue

src/renderer/src/**/*.{vue,ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)

src/renderer/src/**/*.{vue,ts,tsx,js,jsx}: Use the Composition API for better code organization and reusability
Implement proper state management with Pinia
Utilize Vue Router for navigation and route management
Leverage Vue's built-in reactivity system for efficient data handling

Files:

src/renderer/src/views/playground/DemoSection.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/views/PlaygroundTabView.vue
src/renderer/src/views/playground/demos/MessageListDemo.vue
src/renderer/src/components/think-content/ThinkContent.vue

src/renderer/src/**/*.vue

📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)

Use scoped styles to prevent CSS conflicts between components

Files:

src/renderer/src/views/playground/DemoSection.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/views/PlaygroundTabView.vue
src/renderer/src/views/playground/demos/MessageListDemo.vue
src/renderer/src/components/think-content/ThinkContent.vue

src/renderer/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

src/renderer/**/*.{ts,tsx,vue}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer types over interfaces.
Avoid enums; use const objects instead.
Use arrow functions for methods and computed properties.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.

Files:

src/renderer/src/views/playground/DemoSection.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/views/PlaygroundTabView.vue
src/renderer/src/views/playground/demos/MessageListDemo.vue
src/renderer/src/components/think-content/ThinkContent.vue

src/renderer/**/*.{vue,ts}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

Implement lazy loading for routes and components.

Files:

src/renderer/src/views/playground/DemoSection.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/views/PlaygroundTabView.vue
src/renderer/src/views/playground/demos/MessageListDemo.vue
src/renderer/src/components/think-content/ThinkContent.vue

src/renderer/**/*.{ts,vue}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching.
Implement SEO best practices using Nuxt's useHead and useSeoMeta.

Use Pinia for frontend state management (do not introduce alternative state libraries)

Files:

src/renderer/src/views/playground/DemoSection.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/views/PlaygroundTabView.vue
src/renderer/src/views/playground/demos/MessageListDemo.vue
src/renderer/src/components/think-content/ThinkContent.vue

**/*.{ts,tsx,js,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Use English for all logs and comments

Files:

src/renderer/src/views/playground/DemoSection.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/views/PlaygroundTabView.vue
src/renderer/src/views/playground/demos/MessageListDemo.vue
src/renderer/src/components/think-content/ThinkContent.vue

**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Enable and adhere to strict TypeScript typing (avoid implicit any, prefer precise types)

Use PascalCase for TypeScript types and classes

Files:

src/renderer/src/views/playground/DemoSection.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/views/PlaygroundTabView.vue
src/renderer/src/views/playground/demos/MessageListDemo.vue
src/renderer/src/components/think-content/ThinkContent.vue

src/renderer/{src,shell,floating}/**/*.vue

📄 CodeRabbit inference engine (CLAUDE.md)

src/renderer/{src,shell,floating}/**/*.vue: Use Vue 3 Composition API for all components
All user-facing strings must use i18n keys via vue-i18n (no hard-coded UI strings)
Use Tailwind CSS utilities and ensure styles are scoped in Vue components

Files:

src/renderer/src/views/playground/DemoSection.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/views/PlaygroundTabView.vue
src/renderer/src/views/playground/demos/MessageListDemo.vue
src/renderer/src/components/think-content/ThinkContent.vue

src/renderer/src/**