feat: resize chat input #1126
feat: resize chat input #1126
Conversation
WalkthroughAdds a draggable, bounds-enforced resizable height for the chat input variant, wraps editor content in a scrollable container, and replaces manual window/document event listeners with vueuse's useEventListener. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ChatInput
participant Window
note right of ChatInput `#D3E4CD`: Resizable chat input flow
User->>ChatInput: mousedown on resize-handle
ChatInput->>Window: add global mousemove/mouseup handlers (during drag)
Window->>ChatInput: mousemove events -> handleResize (calculate height, apply bounds)
User->>ChatInput: mouseup
Window->>ChatInput: mouseup -> stopResize (remove handlers)
sequenceDiagram
participant System
participant ChatInput
note right of ChatInput `#F0E6D2`: Event registration via useEventListener
System->>ChatInput: register "context-menu-ask-ai" via useEventListener
System->>ChatInput: register "visibilitychange" via useEventListener
ChatInput-->>System: handlers invoked on events (same semantics as before)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
src/renderer/src/components/chat-input/ChatInput.vue (5)
12-15: ClarifyinputHeightstyle condition and null handlingThe ternary mixes a truthy check on
inputHeightwith the variant check, which makes the intent a bit opaque and prevents using a valid0height if ever needed. You can make this more explicit and future‑proof:- :style="inputHeight && variant === 'chat' ? { height: `${inputHeight}px` } : {}" + :style=" + variant === 'chat' && inputHeight !== null + ? { height: `${inputHeight}px` } + : undefined + "This keeps the style applied only when the chat variant is active and a height has actually been set, while avoiding relying on generic truthiness.
22-31: Consider adding basic accessibility metadata to the resize handleThe visual handle is discoverable for mouse users but currently invisible to assistive tech. Consider adding ARIA metadata so screen readers can announce it as a vertical resizer:
- <div + <div v-if="variant === 'chat'" class="absolute -top-1.5 left-0 right-0 h-3 cursor-ns-resize hover:bg-primary/10 z-20 flex justify-center items-center group opacity-0 hover:opacity-100 transition-opacity" @mousedown="startResize" + role="separator" + aria-orientation="horizontal" + :aria-label="t('chat.input.resizeHandle')" >You’d also need to add the
chat.input.resizeHandletranslation key in your i18n messages.
60-66: Verify that resizing actually increases the visible editor areaThe new wrapper
divis scrollable and flex‑grows, but the TipTap editor itself is still capped bymax-h-28 overflow-y-autoineditorProps.attributes.class. That means:
- Increasing
inputHeightcan grow the container, but the actual editable viewport may still be limited tomax-h-28, leaving extra blank space rather than more visible lines.- There are now potentially two scrollable layers (the wrapper and the editor).
It may be worth either relaxing
max-h-28(at least whenvariant === 'chat') or moving the overflow/height constraints from the TipTap root to this new wrapper so the resize handle actually changes how much content is visible, not just the outer box.
417-455: LeverageuseEventListenerfor document listeners and preserve prior body stylesThe resize logic works, but there are a couple of edge cases:
- Document listeners are added/removed manually; if the component ever unmounts mid‑drag, they won’t be cleaned up via lifecycle hooks.
document.body.style.cursorand.userSelectare reset to empty strings, potentially clobbering any existing inline styles.You can simplify and harden this by using
useEventListenerformousemove/mouseupand by storing/restoring previous body styles:-const isResizing = ref(false) -const startY = ref(0) -const startHeight = ref(0) +const isResizing = ref(false) +const startY = ref(0) +const startHeight = ref(0) +const previousBodyCursor = ref<string | null>(null) +const previousBodyUserSelect = ref<string | null>(null) const startResize = (e: MouseEvent) => { if (props.variant !== 'chat') return isResizing.value = true startY.value = e.clientY if (inputContainer.value) { startHeight.value = inputContainer.value.getBoundingClientRect().height } - document.addEventListener('mousemove', handleResize) - document.addEventListener('mouseup', stopResize) - document.body.style.cursor = 'ns-resize' - document.body.style.userSelect = 'none' + previousBodyCursor.value = document.body.style.cursor || null + previousBodyUserSelect.value = document.body.style.userSelect || null + document.body.style.cursor = 'ns-resize' + document.body.style.userSelect = 'none' } const handleResize = (e: MouseEvent) => { if (!isResizing.value) return const deltaY = startY.value - e.clientY const newHeight = startHeight.value + deltaY // Min height 100px, Max height 80% of window height const maxHeight = window.innerHeight * 0.8 - if (newHeight > 100 && newHeight < maxHeight) { + if (newHeight >= 100 && newHeight <= maxHeight) { inputHeight.value = newHeight } } const stopResize = () => { + if (!isResizing.value) return isResizing.value = false - document.removeEventListener('mousemove', handleResize) - document.removeEventListener('mouseup', stopResize) - document.body.style.cursor = '' - document.body.style.userSelect = '' + document.body.style.cursor = previousBodyCursor.value ?? '' + document.body.style.userSelect = previousBodyUserSelect.value ?? '' } + +useEventListener(document, 'mousemove', handleResize) +useEventListener(document, 'mouseup', stopResize)This keeps listeners automatically cleaned up on unmount, avoids clobbering existing inline styles, and slightly improves the min/max height bounds by allowing exactly 100px and the 80% limit.
724-726: Adjustvisibilitychangelistener target and tighten event typingTwo small points here:
- The
visibilitychangeevent is dispatched ondocumentrather thanwindowin the standard DOM API. Listening ondocumentis more idiomatic and avoids relying on any environment‑specific behavior.handleContextMenuAskAIis clearly expecting aCustomEventwithdetailcontent; you can tighten the typing.Suggested changes:
-const handleContextMenuAskAI = (e: any) => { +const handleContextMenuAskAI = (e: CustomEvent<string>) => { editorComposable.inputText.value = e.detail editor.commands.setContent(e.detail) editor.commands.focus() } @@ -useEventListener(window,'context-menu-ask-ai', handleContextMenuAskAI) -useEventListener(window,'visibilitychange', handleVisibilityChange) +useEventListener(window, 'context-menu-ask-ai', handleContextMenuAskAI) +useEventListener(document, 'visibilitychange', handleVisibilityChange)This keeps the custom window event as‑is, but makes
visibilitychangehandling more standard and gives you better type safety for the Ask AI context‑menu event.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/renderer/src/components/chat-input/ChatInput.vue(5 hunks)
🧰 Additional context used
📓 Path-based instructions (14)
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use English for logs and comments (Chinese text exists in legacy code, but new code should use English)
Files:
src/renderer/src/components/chat-input/ChatInput.vue
**/*.vue
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.vue: Use Vue 3 Composition API for all components instead of Options API
Use Tailwind CSS with scoped styles for component styling
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/renderer/**/*.vue
📄 CodeRabbit inference engine (CLAUDE.md)
src/renderer/**/*.vue: All user-facing strings must use i18n keys via vue-i18n for internationalization
Ensure proper error handling and loading states in all UI components
Implement responsive design using Tailwind CSS utilities for all UI components
src/renderer/**/*.vue: Use composition API and declarative programming patterns; avoid options API
Structure files: exported component, composables, helpers, static content, types
Use PascalCase for component names (e.g., AuthWizard.vue)
Use Vue 3 with TypeScript, leveraging defineComponent and PropType
Use template syntax for declarative rendering
Use Shadcn Vue, Radix Vue, and Tailwind for components and styling
Implement responsive design with Tailwind CSS; use a mobile-first approach
Use Suspense for asynchronous components
Use <script setup> syntax for concise component definitions
Prefer 'lucide:' icon family as the primary choice for Iconify icons
Import Icon component from '@iconify/vue' and use with lucide icons following pattern '{collection}:{icon-name}'
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/renderer/src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)
src/renderer/src/**/*.{vue,ts,tsx}: All user-facing strings must use i18n keys with vue-i18n framework in the renderer
Import and use useI18n() composable with the t() function to access translations in Vue components and TypeScript files
Use the dynamic locale.value property to switch languages at runtime
Avoid hardcoding user-facing text and ensure all user-visible text uses the i18n translation system
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/**/*
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
New features should be developed in the
srcdirectory
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/renderer/**/*.{vue,js,ts}
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
Renderer process code should be placed in
src/renderer(Vue 3 application)
Files:
src/renderer/src/components/chat-input/ChatInput.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 in Vue.js applications
Implement proper state management with Pinia in Vue.js applications
Utilize Vue Router for navigation and route management in Vue.js applications
Leverage Vue's built-in reactivity system for efficient data handling
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/renderer/src/**/*.vue
📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)
Use scoped styles to prevent CSS conflicts between Vue components
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/renderer/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,tsx,vue}: Write concise, technical TypeScript code with accurate examples
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
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 statementsVue 3 app code in
src/renderer/srcshould be organized intocomponents/,stores/,views/,i18n/,lib/directories with shell UI insrc/renderer/shell/
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/renderer/**
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
Use lowercase with dashes for directories (e.g., components/auth-wizard)
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/renderer/**/*.{ts,vue}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching
Leverage ref, reactive, and computed for reactive state management
Use provide/inject for dependency injection when appropriate
Use Iconify/Vue for icon implementation
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/renderer/src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
src/renderer/src/**/*.{ts,tsx,vue}: Use TypeScript with Vue 3 Composition API for the renderer application
All user-facing strings must use vue-i18n keys insrc/renderer/src/i18n
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/renderer/src/components/**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
src/renderer/src/components/**/*.vue: Use Tailwind for styles in Vue components
Vue component files must use PascalCase naming (e.g.,ChatInput.vue)
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/**/*.{ts,tsx,vue,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Prettier with single quotes, no semicolons, and 100 character width
Files:
src/renderer/src/components/chat-input/ChatInput.vue
🧠 Learnings (4)
📓 Common learnings
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T05:28:20.500Z
Learning: Applies to src/renderer/src/components/**/*.vue : Vue component files must use PascalCase naming (e.g., `ChatInput.vue`)
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T05:26:11.297Z
Learning: Applies to src/renderer/**/*.vue : Implement responsive design using Tailwind CSS utilities for all UI components
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-best-practices.mdc:0-0
Timestamp: 2025-11-25T05:27:45.535Z
Learning: Applies to src/renderer/src/**/*.{vue,ts,tsx,js,jsx} : Use the Composition API for better code organization and reusability in Vue.js applications
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-11-25T05:28:04.439Z
Learning: Applies to src/renderer/**/*.vue : Implement responsive design with Tailwind CSS; use a mobile-first approach
📚 Learning: 2025-11-25T05:28:20.500Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T05:28:20.500Z
Learning: Applies to src/renderer/src/components/**/*.vue : Vue component files must use PascalCase naming (e.g., `ChatInput.vue`)
Applied to files:
src/renderer/src/components/chat-input/ChatInput.vue
📚 Learning: 2025-11-25T05:28:04.439Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-11-25T05:28:04.439Z
Learning: Applies to src/renderer/**/composables/*.ts : Use VueUse for common composables and utility functions
Applied to files:
src/renderer/src/components/chat-input/ChatInput.vue
📚 Learning: 2025-11-25T05:27:45.535Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-best-practices.mdc:0-0
Timestamp: 2025-11-25T05:27:45.535Z
Learning: Applies to src/renderer/src/**/*.{vue,ts,tsx,js,jsx} : Leverage Vue's built-in reactivity system for efficient data handling
Applied to files:
src/renderer/src/components/chat-input/ChatInput.vue
🔇 Additional comments (1)
src/renderer/src/components/chat-input/ChatInput.vue (1)
394-394: Good use ofuseEventListenerfor window‑level eventsImporting
useEventListeneraligns with the VueUse guideline and simplifies cleanup for global listeners compared to manualaddEventListener/removeEventListener.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
src/renderer/src/components/chat-input/ChatInput.vue (2)
22-31: Consider adding keyboard accessibility for the resize handle.The resize handle only supports mouse interaction. For better accessibility, consider adding keyboard support (e.g., arrow keys when focused) or ARIA attributes to indicate the resize functionality.
Example enhancement:
<div v-if="variant === 'chat'" - class="absolute -top-1.5 left-0 right-0 h-3 cursor-ns-resize hover:bg-primary/10 z-20 flex justify-center items-center group opacity-0 hover:opacity-100 transition-opacity" + role="separator" + tabindex="0" + aria-orientation="horizontal" + aria-label="Resize chat input" + class="absolute -top-1.5 left-0 right-0 h-3 cursor-ns-resize hover:bg-primary/10 focus:bg-primary/10 z-20 flex justify-center items-center group opacity-0 hover:opacity-100 focus:opacity-100 transition-opacity" @mousedown="startResize" + @keydown="handleResizeKeydown" >
22-31: Consider adding touch support for mobile/tablet devices.The resize functionality only handles mouse events. For better cross-device support, consider adding touch event handlers (
touchstart,touchmove,touchend) or using a library like VueUse'suseDraggablewhich handles both pointer types.This could be addressed in a follow-up PR if touch device support is needed.
Also applies to: 424-454
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/renderer/src/components/chat-input/ChatInput.vue(5 hunks)
🧰 Additional context used
📓 Path-based instructions (14)
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use English for logs and comments (Chinese text exists in legacy code, but new code should use English)
Files:
src/renderer/src/components/chat-input/ChatInput.vue
**/*.vue
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.vue: Use Vue 3 Composition API for all components instead of Options API
Use Tailwind CSS with scoped styles for component styling
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/renderer/**/*.vue
📄 CodeRabbit inference engine (CLAUDE.md)
src/renderer/**/*.vue: All user-facing strings must use i18n keys via vue-i18n for internationalization
Ensure proper error handling and loading states in all UI components
Implement responsive design using Tailwind CSS utilities for all UI components
src/renderer/**/*.vue: Use composition API and declarative programming patterns; avoid options API
Structure files: exported component, composables, helpers, static content, types
Use PascalCase for component names (e.g., AuthWizard.vue)
Use Vue 3 with TypeScript, leveraging defineComponent and PropType
Use template syntax for declarative rendering
Use Shadcn Vue, Radix Vue, and Tailwind for components and styling
Implement responsive design with Tailwind CSS; use a mobile-first approach
Use Suspense for asynchronous components
Use <script setup> syntax for concise component definitions
Prefer 'lucide:' icon family as the primary choice for Iconify icons
Import Icon component from '@iconify/vue' and use with lucide icons following pattern '{collection}:{icon-name}'
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/renderer/src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)
src/renderer/src/**/*.{vue,ts,tsx}: All user-facing strings must use i18n keys with vue-i18n framework in the renderer
Import and use useI18n() composable with the t() function to access translations in Vue components and TypeScript files
Use the dynamic locale.value property to switch languages at runtime
Avoid hardcoding user-facing text and ensure all user-visible text uses the i18n translation system
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/**/*
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
New features should be developed in the
srcdirectory
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/renderer/**/*.{vue,js,ts}
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
Renderer process code should be placed in
src/renderer(Vue 3 application)
Files:
src/renderer/src/components/chat-input/ChatInput.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 in Vue.js applications
Implement proper state management with Pinia in Vue.js applications
Utilize Vue Router for navigation and route management in Vue.js applications
Leverage Vue's built-in reactivity system for efficient data handling
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/renderer/src/**/*.vue
📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)
Use scoped styles to prevent CSS conflicts between Vue components
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/renderer/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,tsx,vue}: Write concise, technical TypeScript code with accurate examples
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
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 statementsVue 3 app code in
src/renderer/srcshould be organized intocomponents/,stores/,views/,i18n/,lib/directories with shell UI insrc/renderer/shell/
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/renderer/**
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
Use lowercase with dashes for directories (e.g., components/auth-wizard)
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/renderer/**/*.{ts,vue}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching
Leverage ref, reactive, and computed for reactive state management
Use provide/inject for dependency injection when appropriate
Use Iconify/Vue for icon implementation
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/renderer/src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
src/renderer/src/**/*.{ts,tsx,vue}: Use TypeScript with Vue 3 Composition API for the renderer application
All user-facing strings must use vue-i18n keys insrc/renderer/src/i18n
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/renderer/src/components/**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
src/renderer/src/components/**/*.vue: Use Tailwind for styles in Vue components
Vue component files must use PascalCase naming (e.g.,ChatInput.vue)
Files:
src/renderer/src/components/chat-input/ChatInput.vue
src/**/*.{ts,tsx,vue,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Prettier with single quotes, no semicolons, and 100 character width
Files:
src/renderer/src/components/chat-input/ChatInput.vue
🧠 Learnings (4)
📚 Learning: 2025-11-25T05:28:20.500Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T05:28:20.500Z
Learning: Applies to src/renderer/src/components/**/*.vue : Vue component files must use PascalCase naming (e.g., `ChatInput.vue`)
Applied to files:
src/renderer/src/components/chat-input/ChatInput.vue
📚 Learning: 2025-11-25T05:26:11.297Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T05:26:11.297Z
Learning: Applies to src/renderer/**/*.vue : Implement responsive design using Tailwind CSS utilities for all UI components
Applied to files:
src/renderer/src/components/chat-input/ChatInput.vue
📚 Learning: 2025-11-25T05:28:04.439Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-11-25T05:28:04.439Z
Learning: Applies to src/renderer/**/composables/*.ts : Use VueUse for common composables and utility functions
Applied to files:
src/renderer/src/components/chat-input/ChatInput.vue
📚 Learning: 2025-11-25T05:27:45.535Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-best-practices.mdc:0-0
Timestamp: 2025-11-25T05:27:45.535Z
Learning: Applies to src/renderer/src/**/*.{vue,ts,tsx,js,jsx} : Leverage Vue's built-in reactivity system for efficient data handling
Applied to files:
src/renderer/src/components/chat-input/ChatInput.vue
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-check (x64)
🔇 Additional comments (4)
src/renderer/src/components/chat-input/ChatInput.vue (4)
12-14: LGTM!The conditional inline style binding for dynamic height is correctly implemented, only applying when
inputHeightis set and variant is'chat'.
60-66: LGTM!The wrapper structure with
flex-1 min-h-0 overflow-y-autocorrectly enables the editor to fill available space and scroll independently within the resizable container.
394-394: LGTM!Using
useEventListenerfrom VueUse is the recommended approach for handling global events in Vue 3 Composition API, as it automatically handles cleanup. Based on learnings, VueUse is preferred for common composables.
724-726: LGTM!The migration to
useEventListenerfor global events is clean and idiomatic. VueUse handles automatic cleanup on component unmount.
| // === Resize Logic === | ||
| const inputContainer = ref<HTMLElement | null>(null) | ||
| const inputHeight = ref<number | null>(null) | ||
| const isResizing = ref(false) | ||
| const startY = ref(0) | ||
| const startHeight = ref(0) | ||
| const startResize = (e: MouseEvent) => { | ||
| if (props.variant !== 'chat') return | ||
| isResizing.value = true | ||
| startY.value = e.clientY | ||
| if (inputContainer.value) { | ||
| startHeight.value = inputContainer.value.getBoundingClientRect().height | ||
| } | ||
| document.addEventListener('mousemove', handleResize) | ||
| document.addEventListener('mouseup', stopResize) | ||
| document.body.style.cursor = 'ns-resize' | ||
| document.body.style.userSelect = 'none' | ||
| } | ||
| const handleResize = (e: MouseEvent) => { | ||
| if (!isResizing.value) return | ||
| const deltaY = startY.value - e.clientY | ||
| const newHeight = startHeight.value + deltaY | ||
| // Min height 100px, Max height 80% of window height | ||
| const maxHeight = window.innerHeight * 0.8 | ||
| if (newHeight > 100 && newHeight < maxHeight) { | ||
| inputHeight.value = newHeight | ||
| } | ||
| } | ||
| const stopResize = () => { | ||
| isResizing.value = false | ||
| document.removeEventListener('mousemove', handleResize) | ||
| document.removeEventListener('mouseup', stopResize) | ||
| document.body.style.cursor = '' | ||
| document.body.style.userSelect = '' | ||
| } |
There was a problem hiding this comment.
Event listeners may leak if component unmounts during resize.
The resize handlers use manual document.addEventListener/removeEventListener, which won't be cleaned up if the component unmounts while the user is actively resizing. This is inconsistent with the useEventListener approach used elsewhere in this file.
Consider using VueUse's useEventListener with conditional registration, or ensure cleanup in onUnmounted:
+// Add cleanup in onUnmounted
onUnmounted(() => {
+ // Cleanup resize listeners if component unmounts during resize
+ if (isResizing.value) {
+ document.removeEventListener('mousemove', handleResize)
+ document.removeEventListener('mouseup', stopResize)
+ document.body.style.cursor = ''
+ document.body.style.userSelect = ''
+ }
+
// Cleanup paste handler
editorComposable.cleanupEditorPasteHandler()Alternatively, refactor to use VueUse's useDraggable or useMousePressed for a more robust implementation.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/renderer/src/components/chat-input/ChatInput.vue around lines 417 to 454,
the manual document.addEventListener calls in startResize can leak if the
component unmounts while resizing; replace them with VueUse's useEventListener
(or register listeners via a scoped handler) so they are tied to the component
lifecycle, or add an onUnmounted hook that always calls the same cleanup as
stopResize (removing mousemove/mouseup listeners and restoring document.body
styles) to guarantee removal and state reset on unmount; ensure the handlers
passed to removeEventListener are the same function references used on
addEventListener and make registration conditional on props.variant === 'chat'.
| const handleResize = (e: MouseEvent) => { | ||
| if (!isResizing.value) return | ||
| const deltaY = startY.value - e.clientY | ||
| const newHeight = startHeight.value + deltaY | ||
| // Min height 100px, Max height 80% of window height | ||
| const maxHeight = window.innerHeight * 0.8 | ||
| if (newHeight > 100 && newHeight < maxHeight) { | ||
| inputHeight.value = newHeight | ||
| } | ||
| } |
There was a problem hiding this comment.
Bounds check excludes exact boundary values.
Using strict inequality (> and <) prevents setting the height to exactly 100px or the maximum. Consider using >= and <= for inclusive bounds:
const handleResize = (e: MouseEvent) => {
if (!isResizing.value) return
const deltaY = startY.value - e.clientY
const newHeight = startHeight.value + deltaY
// Min height 100px, Max height 80% of window height
const maxHeight = window.innerHeight * 0.8
- if (newHeight > 100 && newHeight < maxHeight) {
+ if (newHeight >= 100 && newHeight <= maxHeight) {
inputHeight.value = newHeight
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleResize = (e: MouseEvent) => { | |
| if (!isResizing.value) return | |
| const deltaY = startY.value - e.clientY | |
| const newHeight = startHeight.value + deltaY | |
| // Min height 100px, Max height 80% of window height | |
| const maxHeight = window.innerHeight * 0.8 | |
| if (newHeight > 100 && newHeight < maxHeight) { | |
| inputHeight.value = newHeight | |
| } | |
| } | |
| const handleResize = (e: MouseEvent) => { | |
| if (!isResizing.value) return | |
| const deltaY = startY.value - e.clientY | |
| const newHeight = startHeight.value + deltaY | |
| // Min height 100px, Max height 80% of window height | |
| const maxHeight = window.innerHeight * 0.8 | |
| if (newHeight >= 100 && newHeight <= maxHeight) { | |
| inputHeight.value = newHeight | |
| } | |
| } |
🤖 Prompt for AI Agents
In src/renderer/src/components/chat-input/ChatInput.vue around lines 437 to 446,
the bounds check uses strict > and < which disallows exactly 100px or the
computed maxHeight; change the condition to use inclusive comparisons (>= and
<=) or clamp the computed newHeight to the [100, maxHeight] range so
inputHeight.value can be set when newHeight equals the boundaries.
3 participants
20251125_172636.mp4
Summary by CodeRabbit
New Features
Refactor
✏️ Tip: You can customize this high-level summary in your review settings.