Skip to content

Conversation

@yyhhyyyyyy
Copy link
Collaborator

@yyhhyyyyyy yyhhyyyyyy commented Aug 9, 2025

old:
image

new:
image

Summary by CodeRabbit

  • New Features

    • Settings panels now use a scrollable popover component, allowing users to open settings with the same controls while supporting vertical scrolling when content is long.
    • Scrollable popovers added to thread and title settings for consistent behavior.
  • Style

    • Popovers have a capped height and vertical scrolling to keep content accessible and visually tidy without changing existing settings or interactions.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Aug 9, 2025

Walkthrough

Replaced the previous Popover+PopoverContent wrapping of settings with a new dedicated ScrollablePopover component, and updated NewThread.vue and TitleView.vue to use it (trigger via #trigger slot, ChatConfig moved inside). Added ScrollablePopover.vue; PopoverContent.vue only had a formatting change.

Changes

Cohort / File(s) Change Summary
New scrollable popover usage
src/renderer/src/components/NewThread.vue, src/renderer/src/components/TitleView.vue
Replaced prior Popover/PopoverContent wrapper with ScrollablePopover (uses #trigger slot). Moved ChatConfig into ScrollablePopover while preserving all v-models, props, and event handling. Added align, content-class, and :enable-scrollable="true" configuration.
New component
src/renderer/src/components/ScrollablePopover.vue
Added ScrollablePopover Vue component. Props: align ('start'
Minor formatting change
src/renderer/src/components/ui/popover/PopoverContent.vue
Rewrote defineProps generic type across multiple lines (no semantic or runtime change to props or behavior).

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant NewThread/TitleView
    participant ScrollablePopover
    participant Popover
    participant PopoverContent
    participant ChatConfig

    User->>NewThread/TitleView: click settings trigger
    NewThread/TitleView->>ScrollablePopover: emit open via trigger slot
    ScrollablePopover->>Popover: render Popover with attrs/align
    Popover->>PopoverContent: render content (class includes p-0 + contentClass)
    ScrollablePopover->>PopoverContent: if enableScrollable true, wrap slot in scroll container
    PopoverContent->>ChatConfig: render ChatConfig inside content (v-models/props forwarded)
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~15 minutes

Poem

I hopped into code with a curious nose,
Built a popover where the scrollbar grows.
Trigger snug in a slot, content tucked tight,
Settings scroll smoothly, day or night.
A rabbit-approved nibble of UI delight. 🐇✨

Note

🔌 MCP (Model Context Protocol) integration is now available in Early Access!

Pro users can now connect to remote MCP servers under the Integrations page to get reviews and chat conversations that understand additional development context.

✨ Finishing Touches
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (4)
src/renderer/src/components/ui/popover/PopoverContent.vue (4)

13-16: Consider renaming prop to align with naming guidelines (use auxiliary verbs).

Team guideline suggests booleans like isLoading/hasError. Prefer isScrollable over enableScrollable for consistency.

-  defineProps<PopoverContentProps & {
-    class?: HTMLAttributes['class']
-    enableScrollable?: boolean
-  }>(),
+  defineProps<PopoverContentProps & {
+    class?: HTMLAttributes['class']
+    isScrollable?: boolean
+  }>(),

Follow-up diffs provided below for other occurrences if you choose to rename.


19-21: Defaults look fine; sideOffset 4 matches common shadcn defaults.

If you adopt the rename suggestion, update the default key accordingly.

   {
     align: 'center',
     sideOffset: 4,
-    enableScrollable: false
+    isScrollable: false
   }

41-41: Make max height responsive to viewport to avoid overflow on small screens.

Using a fixed max-h-96 can still overflow on short viewports. Consider a viewport-based cap with a desktop override.

-          props.enableScrollable && 'max-h-96 overflow-hidden',
+          props.isScrollable && 'max-h-[80vh] md:max-h-96 overflow-hidden',

If you keep the original prop name:

-          props.enableScrollable && 'max-h-[80vh] md:max-h-96 overflow-hidden',
+          props.enableScrollable && 'max-h-[80vh] md:max-h-96 overflow-hidden',

46-49: Simplify scroll wrapper and improve scroll UX.

  • Inner max-h duplicates the parent constraint; you can drop it.
  • Add overscroll-contain to prevent scroll chaining.
  • Optional: small right padding to avoid content under scrollbar on some platforms.

If you adopt the rename:

-      <div v-if="props.enableScrollable" class="max-h-96 overflow-y-auto">
+      <div v-if="props.isScrollable" class="overflow-y-auto overscroll-contain pr-2">
         <slot />
       </div>
-      <slot v-else />
+      <slot v-else />

If you keep the current prop name:

-      <div v-if="props.enableScrollable" class="max-h-96 overflow-y-auto">
+      <div v-if="props.enableScrollable" class="overflow-y-auto overscroll-contain pr-2">
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d78c05c and 27c26b0.

📒 Files selected for processing (3)
  • src/renderer/src/components/NewThread.vue (1 hunks)
  • src/renderer/src/components/TitleView.vue (1 hunks)
  • src/renderer/src/components/ui/popover/PopoverContent.vue (2 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
**/*.{ts,tsx,js,jsx,vue}

📄 CodeRabbit Inference Engine (CLAUDE.md)

Use English for logs and comments

Files:

  • src/renderer/src/components/TitleView.vue
  • src/renderer/src/components/NewThread.vue
  • src/renderer/src/components/ui/popover/PopoverContent.vue
src/renderer/src/**/*.vue

📄 CodeRabbit Inference Engine (CLAUDE.md)

src/renderer/src/**/*.vue: Use Composition API for all Vue 3 components
Use Tailwind CSS with scoped styles for styling
Organize components by feature in src/renderer/src/
Follow existing component patterns in src/renderer/src/ when creating new UI components
Use Composition API with proper TypeScript typing for new UI components
Implement responsive design with Tailwind CSS for new UI components
Add proper error handling and loading states for new UI components

Use scoped styles to prevent CSS conflicts between components

Files:

  • src/renderer/src/components/TitleView.vue
  • src/renderer/src/components/NewThread.vue
  • src/renderer/src/components/ui/popover/PopoverContent.vue
src/renderer/src/**/*.{ts,tsx,vue}

📄 CodeRabbit Inference Engine (CLAUDE.md)

src/renderer/src/**/*.{ts,tsx,vue}: Use Pinia for frontend state management
Renderer to Main: Use usePresenter.ts composable for direct presenter method calls

Files:

  • src/renderer/src/components/TitleView.vue
  • src/renderer/src/components/NewThread.vue
  • src/renderer/src/components/ui/popover/PopoverContent.vue
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/TitleView.vue
  • src/renderer/src/components/NewThread.vue
  • src/renderer/src/components/ui/popover/PopoverContent.vue
src/renderer/**/*.{vue,ts,js,tsx,jsx}

📄 CodeRabbit Inference Engine (.cursor/rules/project-structure.mdc)

渲染进程代码放在 src/renderer

Files:

  • src/renderer/src/components/TitleView.vue
  • src/renderer/src/components/NewThread.vue
  • src/renderer/src/components/ui/popover/PopoverContent.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/TitleView.vue
  • src/renderer/src/components/NewThread.vue
  • src/renderer/src/components/ui/popover/PopoverContent.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/TitleView.vue
  • src/renderer/src/components/NewThread.vue
  • src/renderer/src/components/ui/popover/PopoverContent.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/TitleView.vue
  • src/renderer/src/components/NewThread.vue
  • src/renderer/src/components/ui/popover/PopoverContent.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.

Files:

  • src/renderer/src/components/TitleView.vue
  • src/renderer/src/components/NewThread.vue
  • src/renderer/src/components/ui/popover/PopoverContent.vue
🧠 Learnings (12)
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use <script setup> syntax for concise component definitions.

Applied to files:

  • src/renderer/src/components/TitleView.vue
  • src/renderer/src/components/NewThread.vue
📚 Learning: 2025-07-21T01:47:28.817Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-best-practices.mdc:0-0
Timestamp: 2025-07-21T01:47:28.817Z
Learning: Applies to src/renderer/src/**/*.{vue,ts,tsx,js,jsx} : Use the Composition API for better code organization and reusability

Applied to files:

  • src/renderer/src/components/TitleView.vue
  • src/renderer/src/components/NewThread.vue
  • src/renderer/src/components/ui/popover/PopoverContent.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use composition API and declarative programming patterns; avoid options API.

Applied to files:

  • src/renderer/src/components/TitleView.vue
  • src/renderer/src/components/NewThread.vue
  • src/renderer/src/components/ui/popover/PopoverContent.vue
📚 Learning: 2025-07-21T01:47:28.817Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-best-practices.mdc:0-0
Timestamp: 2025-07-21T01:47:28.817Z
Learning: Applies to src/renderer/src/**/*.vue : Use scoped styles to prevent CSS conflicts between components

Applied to files:

  • src/renderer/src/components/TitleView.vue
  • src/renderer/src/components/NewThread.vue
  • src/renderer/src/components/ui/popover/PopoverContent.vue
📚 Learning: 2025-07-21T01:45:33.790Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-21T01:45:33.790Z
Learning: Applies to src/renderer/src/**/*.vue : Use Composition API with proper TypeScript typing for new UI components

Applied to files:

  • src/renderer/src/components/TitleView.vue
  • src/renderer/src/components/NewThread.vue
  • src/renderer/src/components/ui/popover/PopoverContent.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use Iconify/Vue for icon implementation.

Applied to files:

  • src/renderer/src/components/TitleView.vue
📚 Learning: 2025-07-21T01:45:33.790Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-21T01:45:33.790Z
Learning: Applies to src/renderer/src/**/*.vue : Implement responsive design with Tailwind CSS for new UI components

Applied to files:

  • src/renderer/src/components/TitleView.vue
  • src/renderer/src/components/NewThread.vue
  • src/renderer/src/components/ui/popover/PopoverContent.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use Shadcn Vue, Radix Vue, and Tailwind for components and styling.

Applied to files:

  • src/renderer/src/components/TitleView.vue
  • src/renderer/src/components/NewThread.vue
📚 Learning: 2025-07-21T01:45:33.790Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-21T01:45:33.790Z
Learning: Applies to src/renderer/src/**/*.vue : Use Tailwind CSS with scoped styles for styling

Applied to files:

  • src/renderer/src/components/TitleView.vue
  • src/renderer/src/components/NewThread.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Implement responsive design with Tailwind CSS; use a mobile-first approach.

Applied to files:

  • src/renderer/src/components/TitleView.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use Vue 3 with TypeScript, leveraging defineComponent and PropType.

Applied to files:

  • src/renderer/src/components/NewThread.vue
  • src/renderer/src/components/ui/popover/PopoverContent.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use template syntax for declarative rendering.

Applied to files:

  • src/renderer/src/components/NewThread.vue
🔇 Additional comments (3)
src/renderer/src/components/ui/popover/PopoverContent.vue (1)

26-26: Good: exclude non-Radix props from forwarding.

Filtering out class and enableScrollable prevents leaking unknown attributes to DOM/Radix.

If you adopt the rename suggestion:

-  const { class: _, enableScrollable: __, ...delegated } = props
+  const { class: _, isScrollable: __, ...delegated } = props
src/renderer/src/components/NewThread.vue (1)

81-81: Enabling scroll is appropriate here.

This is the right place to cap height and allow vertical scroll for ChatConfig. LGTM.

If you adopt the prop rename in PopoverContent, update here too:

-              <PopoverContent align="start" class="p-0 w-80" :enable-scrollable="true">
+              <PopoverContent align="start" class="p-0 w-80" :is-scrollable="true">
src/renderer/src/components/TitleView.vue (1)

52-52: LGTM: Scrollable settings popover improves usability.

Consistent with NewThread.vue; helps prevent overflow.

If you adopt the prop rename:

-        <PopoverContent align="end" class="p-0 w-80" :enable-scrollable="true">
+        <PopoverContent align="end" class="p-0 w-80" :is-scrollable="true">

align: 'center',
sideOffset: 4
sideOffset: 4,
enableScrollable: false
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不要对 ui/ 目录下的 shadcn的原始文件进行修改,会导致后续无法维护,如果要对控件进行改动,在 components 下面额外套一层来解决

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

已回滚,并在 components 下套层解决

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (4)
src/renderer/src/components/NewThread.vue (1)

74-86: Add accessible label to the settings trigger (use i18n)

Provide an aria-label/title for screen readers. Keep strings via i18n per guidelines.

 <template #trigger>
   <Button
     class="w-7 h-full rounded-none border-none shadow-none transition-all duration-300"
     :class="{
       'w-0 opacity-0 p-0 overflow-hidden': !showSettingsButton && !isHovering,
       'w-7 opacity-100': showSettingsButton || isHovering
     }"
     size="icon"
     variant="outline"
+    :aria-label="t('common.settings')"
+    :title="t('common.settings')"
   >
     <Icon icon="lucide:settings-2" class="w-4 h-4" />
   </Button>
 </template>
src/renderer/src/components/ScrollablePopover.vue (3)

6-14: Refine overflow handling to avoid clipping and improve scroll chaining

Applying overflow-hidden to PopoverContent can clip internal shadows or nested overlays. Rely on the inner scroll container and add overscroll-contain to prevent scroll chaining.

 <PopoverContent
   :align="align"
-  :class="cn('p-0', contentClass, enableScrollable && 'max-h-96 overflow-hidden')"
+  :class="cn('p-0', contentClass, enableScrollable && 'max-h-96')"
 >
-  <div v-if="enableScrollable" class="max-h-96 overflow-y-auto">
+  <div v-if="enableScrollable" class="max-h-96 overflow-y-auto overscroll-contain">
     <slot />
   </div>
   <slot v-else />
 </PopoverContent>

18-33: Minor nit: add a component name for better devtools traces

Name helps debugging and telemetry; zero runtime cost.

 <script setup lang="ts">
+defineOptions({ name: 'ScrollablePopover' })

6-14: Optional: expose a content wrapper slot for custom scroll containers

If future use-cases need sticky headers/footers inside the popover, a dedicated wrapper slot (e.g., #content) can avoid another component. Not required now.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 27c26b0 and 45b1661.

📒 Files selected for processing (4)
  • src/renderer/src/components/NewThread.vue (3 hunks)
  • src/renderer/src/components/ScrollablePopover.vue (1 hunks)
  • src/renderer/src/components/TitleView.vue (2 hunks)
  • src/renderer/src/components/ui/popover/PopoverContent.vue (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • src/renderer/src/components/TitleView.vue
  • src/renderer/src/components/ui/popover/PopoverContent.vue
🧰 Additional context used
📓 Path-based instructions (9)
**/*.{ts,tsx,js,jsx,vue}

📄 CodeRabbit Inference Engine (CLAUDE.md)

Use English for logs and comments

Files:

  • src/renderer/src/components/ScrollablePopover.vue
  • src/renderer/src/components/NewThread.vue
src/renderer/src/**/*.vue

📄 CodeRabbit Inference Engine (CLAUDE.md)

src/renderer/src/**/*.vue: Use Composition API for all Vue 3 components
Use Tailwind CSS with scoped styles for styling
Organize components by feature in src/renderer/src/
Follow existing component patterns in src/renderer/src/ when creating new UI components
Use Composition API with proper TypeScript typing for new UI components
Implement responsive design with Tailwind CSS for new UI components
Add proper error handling and loading states for new UI components

Use scoped styles to prevent CSS conflicts between components

Files:

  • src/renderer/src/components/ScrollablePopover.vue
  • src/renderer/src/components/NewThread.vue
src/renderer/src/**/*.{ts,tsx,vue}

📄 CodeRabbit Inference Engine (CLAUDE.md)

src/renderer/src/**/*.{ts,tsx,vue}: Use Pinia for frontend state management
Renderer to Main: Use usePresenter.ts composable for direct presenter method calls

Files:

  • src/renderer/src/components/ScrollablePopover.vue
  • src/renderer/src/components/NewThread.vue
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/ScrollablePopover.vue
  • src/renderer/src/components/NewThread.vue
src/renderer/**/*.{vue,ts,js,tsx,jsx}

📄 CodeRabbit Inference Engine (.cursor/rules/project-structure.mdc)

渲染进程代码放在 src/renderer

Files:

  • src/renderer/src/components/ScrollablePopover.vue
  • src/renderer/src/components/NewThread.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/ScrollablePopover.vue
  • src/renderer/src/components/NewThread.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/ScrollablePopover.vue
  • src/renderer/src/components/NewThread.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/ScrollablePopover.vue
  • src/renderer/src/components/NewThread.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.

Files:

  • src/renderer/src/components/ScrollablePopover.vue
  • src/renderer/src/components/NewThread.vue
🧠 Learnings (1)
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Import Icon component from Iconify/Vue.

Applied to files:

  • src/renderer/src/components/NewThread.vue
🔇 Additional comments (4)
src/renderer/src/components/NewThread.vue (3)

67-73: Good swap to ScrollablePopover; v-model pass-through looks correct

The replacement preserves open-state binding and aligns="start" with a clean content-class. No functional issues spotted here.


87-97: LGTM: ChatConfig now benefits from scrollable popover

Bindings and limits are preserved. This resolves overflow without altering config semantics.


111-111: Import looks correct and localized to this component

ScrollablePopover is correctly imported relative to current directory; existing Popover imports remain for the model selector above.

src/renderer/src/components/ScrollablePopover.vue (1)

2-5: Pass-through with $attrs is clean and keeps API surface small

Forwarding unknown attrs and listeners to Popover works well for reusability. Good use of the trigger slot with as-child.

Comment on lines +23 to +33
interface ScrollablePopoverProps {
align?: 'start' | 'center' | 'end'
enableScrollable?: boolean
contentClass?: HTMLAttributes['class']
}
withDefaults(defineProps<ScrollablePopoverProps>(), {
align: 'center',
enableScrollable: false,
contentClass: ''
})
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Type the v-model:open API and prefer type alias over interface (per guidelines)

For better DX with Volar and to satisfy “Use TypeScript types over interfaces,” explicitly type the open prop and update:open emit. Also forward them to the underlying Popover, so v-model:open is fully typed and not just passed via $attrs.

-interface ScrollablePopoverProps {
-  align?: 'start' | 'center' | 'end'
-  enableScrollable?: boolean
-  contentClass?: HTMLAttributes['class']
-}
+type ScrollablePopoverProps = {
+  align?: 'start' | 'center' | 'end'
+  enableScrollable?: boolean
+  contentClass?: HTMLAttributes['class']
+  // expose v-model:open for proper typing
+  open?: boolean
+}
 
-withDefaults(defineProps<ScrollablePopoverProps>(), {
+withDefaults(defineProps<ScrollablePopoverProps>(), {
   align: 'center',
   enableScrollable: false,
   contentClass: ''
 })

Additionally update the template to explicitly forward the open state and emit updates:

<script setup lang="ts">
const emit = defineEmits<{ (e: 'update:open', value: boolean): void }>()
// (keep the existing defineProps above)
</script>

<template>
  <Popover
-   v-bind="$attrs"
+   :open="open"
+   @update:open="emit('update:open', $event)"
+   v-bind="$attrs"
  >
    ...
  </Popover>
</template>

Optional naming consistency with guidelines: consider renaming enableScrollable to isScrollable (and aliasing the old name for backward compatibility).

🤖 Prompt for AI Agents
In src/renderer/src/components/ScrollablePopover.vue around lines 23–33, replace
the interface with a TypeScript type alias that includes an explicit open?:
boolean prop (so v-model:open is typed), keep withDefaults for defaults, and add
a typed defineEmits signature for update:open; then update the template Popover
usage to explicitly pass :open="open" and forward @update:open by calling
emit('update:open', $event) before v-bind="$attrs". Optionally rename
enableScrollable to isScrollable and provide a backward-compatible alias to
preserve existing usage.

@zerob13 zerob13 merged commit 181430d into ThinkInAIXYZ:dev Aug 11, 2025
2 checks passed
zerob13 added a commit that referenced this pull request Aug 11, 2025
* wip: add modelscope provider

* feat: add mcp sync to modelscope

* fix: add scrollable support to PopoverContent to prevent overflow (#720)

* feat: implement floating chat window system with performance optimization (#724)

* chore: i18n and format

* feat: better style

* fix: mcp tool display

---------

Co-authored-by: yyhhyyyyyy <yyhhyyyyyy8@gmail.com>
zerob13 added a commit that referenced this pull request Aug 13, 2025
* fix: add AlertDialogDescription to resolve accessibility warning (#706)

* fix: resolve focus flicker when creating new windows with Ctrl+Shift+N (#707)

* feat: enhance window management by implementing main window ID handling (#709)

* docs: update zhipu developer doc website link (#715)

Co-authored-by: gongchao <chao.gong@aminer.cn>

* refactor: better translate (#716)

* chore: en-us i18n

* chore(i18n): polish ja-JP translations across UI; keep chat.input.placeholder unchanged

* chore(i18n): polish fr-FR translations; keep chat.input.placeholder unchanged

* chore(i18n): refine fr-FR MCP & Settings copy; idiomatic, concise, brand-consistent

* chore(i18n): polish ru-RU translations across UI; keep chat.input.placeholder unchanged

* chore(i18n): polish fa-IR translations across UI; keep chat.input.placeholder unchanged

* chore: fix format

* chore: fix i18n

* chore: lock rolldown-vite version

* feat: add GPT-5 series model support (#717)

* ci(vite): Bundle the main file into a single file to speed up loading. (#718)

* fix(math): parser by upgrade vue-renderer-markdown (#722)

* chore: bump deps (#721)

* chore: bump deps

* fix: rolldown-vite 7.1.0 and duckdb bundle issue

* chore: back to vite

* chore: update electron

* chore: update versions

* fix(math): parser by upgrade vue-renderer-markdown (#722)

* chore: bump deps

---------

Co-authored-by: Simon He <57086651+Simon-He95@users.noreply.github.com>

* fix: add scrollable support to PopoverContent to prevent overflow (#720)

* feat: implement floating chat window system with performance optimization (#724)

* feat: add mcp sync and modelscope provider #615 (#723)

* wip: add modelscope provider

* feat: add mcp sync to modelscope

* fix: add scrollable support to PopoverContent to prevent overflow (#720)

* feat: implement floating chat window system with performance optimization (#724)

* chore: i18n and format

* feat: better style

* fix: mcp tool display

---------

Co-authored-by: yyhhyyyyyy <yyhhyyyyyy8@gmail.com>

* fix: move_files newPath parse issue (#725)

* fix: move_files newPath 参数计算规则

* fix: move_files 移动前需要判断dest是目录还是文件

* feat: add Claude Opus 4.1 to anthropic default model list (#726)

* feat: Add mcprouter's MCP marketplace api support (#727)

* wip: add mcp market

* feat: mcp market install

* wip: mcp install status sync

* feat: mcp server config mask

* chore: remove working doc

* chore: add translate

* feat: add ESC key to close floating chat window (#728)

* feat: add floating button position persistence with boundary validation (#729)

* feat: add floating button position persistence with boundary validation

* feat: refactor floating button to use electron-window-state

* chore: bump to 0.3.0

* feat: add reasoning_effort parameter support for gpt-oss models (#731)

* feat: add reasoning_effort parameter support for gpt-oss models

- add reasoning effort UI support across all components

* fix: preserve user reasoning effort settings and improve display logic

* fix: artifacts code not streaming (#732)

* fix: artifact react load failed

* chore: remove log

* fix: artifacts code not stream

* fix: format

---------

Co-authored-by: yyhhyyyyyy <yyhhyyyyyy8@gmail.com>
Co-authored-by: hllshiro <40970081+hllshiro@users.noreply.github.com>
Co-authored-by: tomsun28 <tomsun28@outlook.com>
Co-authored-by: gongchao <chao.gong@aminer.cn>
Co-authored-by: Simon He <57086651+Simon-He95@users.noreply.github.com>
Co-authored-by: wanna <wanna.w@binarywalk.com>
zerob13 added a commit that referenced this pull request Aug 13, 2025
* fix: add AlertDialogDescription to resolve accessibility warning (#706)

* fix: resolve focus flicker when creating new windows with Ctrl+Shift+N (#707)

* feat: enhance window management by implementing main window ID handling (#709)

* docs: update zhipu developer doc website link (#715)

Co-authored-by: gongchao <chao.gong@aminer.cn>

* refactor: better translate (#716)

* chore: en-us i18n

* chore(i18n): polish ja-JP translations across UI; keep chat.input.placeholder unchanged

* chore(i18n): polish fr-FR translations; keep chat.input.placeholder unchanged

* chore(i18n): refine fr-FR MCP & Settings copy; idiomatic, concise, brand-consistent

* chore(i18n): polish ru-RU translations across UI; keep chat.input.placeholder unchanged

* chore(i18n): polish fa-IR translations across UI; keep chat.input.placeholder unchanged

* chore: fix format

* chore: fix i18n

* chore: lock rolldown-vite version

* feat: add GPT-5 series model support (#717)

* ci(vite): Bundle the main file into a single file to speed up loading. (#718)

* fix(math): parser by upgrade vue-renderer-markdown (#722)

* chore: bump deps (#721)

* chore: bump deps

* fix: rolldown-vite 7.1.0 and duckdb bundle issue

* chore: back to vite

* chore: update electron

* chore: update versions

* fix(math): parser by upgrade vue-renderer-markdown (#722)

* chore: bump deps

---------

Co-authored-by: Simon He <57086651+Simon-He95@users.noreply.github.com>

* fix: add scrollable support to PopoverContent to prevent overflow (#720)

* feat: implement floating chat window system with performance optimization (#724)

* feat: add mcp sync and modelscope provider #615 (#723)

* wip: add modelscope provider

* feat: add mcp sync to modelscope

* fix: add scrollable support to PopoverContent to prevent overflow (#720)

* feat: implement floating chat window system with performance optimization (#724)

* chore: i18n and format

* feat: better style

* fix: mcp tool display

---------

Co-authored-by: yyhhyyyyyy <yyhhyyyyyy8@gmail.com>

* fix: move_files newPath parse issue (#725)

* fix: move_files newPath 参数计算规则

* fix: move_files 移动前需要判断dest是目录还是文件

* feat: add Claude Opus 4.1 to anthropic default model list (#726)

* feat: Add mcprouter's MCP marketplace api support (#727)

* wip: add mcp market

* feat: mcp market install

* wip: mcp install status sync

* feat: mcp server config mask

* chore: remove working doc

* chore: add translate

* feat: add ESC key to close floating chat window (#728)

* feat: add floating button position persistence with boundary validation (#729)

* feat: add floating button position persistence with boundary validation

* feat: refactor floating button to use electron-window-state

* chore: bump to 0.3.0

* feat: add reasoning_effort parameter support for gpt-oss models (#731)

* feat: add reasoning_effort parameter support for gpt-oss models

- add reasoning effort UI support across all components

* fix: preserve user reasoning effort settings and improve display logic

* fix: artifacts code not streaming (#732)

* fix: artifact react load failed

* chore: remove log

* fix: artifacts code not stream

* fix: format

* feat: disable automatic model enabling for better UX (#734)

* feat: sync provider sorting from settings to model selection (#736)

* feat: sync provider sorting from settings to model selection

* feat: refactor ModelSelect to use computed providers for better reactivity

---------

Co-authored-by: yyhhyyyyyy <yyhhyyyyyy8@gmail.com>
Co-authored-by: hllshiro <40970081+hllshiro@users.noreply.github.com>
Co-authored-by: tomsun28 <tomsun28@outlook.com>
Co-authored-by: gongchao <chao.gong@aminer.cn>
Co-authored-by: Simon He <57086651+Simon-He95@users.noreply.github.com>
Co-authored-by: wanna <wanna.w@binarywalk.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants