Feat/threadui #1004

deepinfect · 2025-10-14T10:53:56Z

Summary by CodeRabbit

Refactor
- Reworked thread sidebar to slide in/out horizontally and simplified layout while preserving click-outside-to-close.
- Consolidated top-left controls into a single back button; creating a new thread from this area is no longer available.
- Removed automatic scroll-to-bottom trigger in chat view to prevent forced scrolling on certain events.
Style
- Updated thread sidebar visuals (consistent width, shadow, borders) aligned with the new transition.

coderabbitai · 2025-10-14T10:54:32Z

Walkthrough

Removes ChatView’s MessageList scroll-bottom event binding. Refactors ThreadView transitions to a horizontal slide, simplifies alignment, removes nested Transition, and adjusts sidebar container with click handling. In ThreadsView, replaces the top-left two-button group with a single close button and removes the createNewThread method and its flow.

Changes

Cohort / File(s)	Summary
Chat auto-scroll binding `src/renderer/src/components/ChatView.vue`	Removed binding to MessageList's scroll-bottom event; no automatic scroll-to-bottom on that event.
Thread overlay transition/layout `src/renderer/src/components/ThreadView.vue`	Switched to horizontal slide Transition; always justify-end; removed inner Transition; added direct sidebar container with stop-propagation; preserved click.self overlay close behavior.
Threads sidebar header/button + flow `src/renderer/src/components/ThreadsView.vue`	Replaced two-button header with single chevron-left close button; removed createNewThread method and related logic; top button now only closes sidebar.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant U as User
  participant TV as ThreadsView
  participant ST as Store/ThreadService

  rect rgba(230,240,255,0.5)
  note over U,TV: Previous flow
  U->>TV: Click "New Chat" button
  TV->>ST: createNewThread()
  ST-->>TV: new thread id
  TV->>TV: Close sidebar
  end

  rect rgba(230,255,230,0.5)
  note over U,TV: New flow
  U->>TV: Click single chevron-left button
  TV->>TV: Close sidebar
  end

sequenceDiagram
  autonumber
  participant U as User
  participant OV as ThreadView Overlay
  participant SB as Sidebar Container

  U->>OV: Click on overlay (outside sidebar)
  OV->>OV: Close panel

  U->>SB: Click inside sidebar
  SB->>SB: stopPropagation (panel remains open)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

fix: prevent automatic scroll to bottom after message generation #783: Also modifies ChatView.vue to remove automatic scroll-to-bottom behavior.
feat(history): move history btn to appbar #975: Adjusts ThreadView/ThreadsView layout and sidebar behavior, overlapping with transition and header changes.
feat(MessageToolbar、i18n): 点击切换版本始终在最底部和添加 disabled 属性 & 添加国际化类型生成脚本及插件，用户开发体验 #654: Involves scroll-to-bottom event wiring relevant to the removed binding in ChatView.

Suggested reviewers

zerob13

Poem

A rabbit taps the sidebar door—slide, don’t fade, we soar.
One button now, a tidy brow; no sudden threads to store.
The chat won’t auto-dive below, it listens as we scroll.
Hop-hop, click-pop, neat control—
Carrots aligned with UI soul. 🥕✨

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title Check	❓ Inconclusive	The provided title “Feat/threadui” is too generic and lacks clarity about the specific UI changes, making it difficult to understand the primary changeset at a glance.	Consider renaming the title to clearly describe the main change, for example “Update thread sidebar UI and remove new-thread creation shortcut” to concisely convey the primary modifications.

✅ 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 feat/threadui

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7983dbd and bfc4a5b.

📒 Files selected for processing (3)

src/renderer/src/components/ChatView.vue (0 hunks)
src/renderer/src/components/ThreadView.vue (1 hunks)
src/renderer/src/components/ThreadsView.vue (1 hunks)

💤 Files with no reviewable changes (1)

src/renderer/src/components/ChatView.vue

🧰 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/components/ThreadView.vue
src/renderer/src/components/ThreadsView.vue

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

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

渲染进程代码放在 src/renderer

Files:

src/renderer/src/components/ThreadView.vue
src/renderer/src/components/ThreadsView.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/components/ThreadView.vue
src/renderer/src/components/ThreadsView.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/components/ThreadView.vue
src/renderer/src/components/ThreadsView.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/components/ThreadView.vue
src/renderer/src/components/ThreadsView.vue

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

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

Implement lazy loading for routes and components.

Files:

src/renderer/src/components/ThreadView.vue
src/renderer/src/components/ThreadsView.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/components/ThreadView.vue
src/renderer/src/components/ThreadsView.vue

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

📄 CodeRabbit inference engine (CLAUDE.md)

Use English for all logs and comments

Files:

src/renderer/src/components/ThreadView.vue
src/renderer/src/components/ThreadsView.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/components/ThreadView.vue
src/renderer/src/components/ThreadsView.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/components/ThreadView.vue
src/renderer/src/components/ThreadsView.vue

src/renderer/src/components/**/*

📄 CodeRabbit inference engine (CLAUDE.md)

Organize UI components by feature within src/renderer/src/

Files:

src/renderer/src/components/ThreadView.vue
src/renderer/src/components/ThreadsView.vue

src/renderer/src/**