feat: make typing smoother, inspired by yetone’s Alma. #1194
Conversation
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
WalkthroughImplements a custom fake caret feature in the ChatInput component that visually synchronizes with ProseMirror/TipTap editor cursor position. Adds state management for caret positioning, event listeners for editor state changes, computed styling, focus/blur handling, and CSS-based blinking animation. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 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 |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/renderer/src/components/chat-input/ChatInput.vue (3)
493-500: Extract magic number to a named constant.The default caret height value
18appears here and again at line 580. Extract this to a named constant for better maintainability.🔎 Apply this diff to extract the magic number:
+const DEFAULT_CARET_HEIGHT = 18 const editorContainer = ref<HTMLElement | null>(null) -const caretPosition = ref({ x: 0, y: 0, height: 18 }) +const caretPosition = ref({ x: 0, y: 0, height: DEFAULT_CARET_HEIGHT }) const caretVisible = ref(false)And at line 580:
- const caretHeight = Math.max(coords.bottom - coords.top, 18) + const caretHeight = Math.max(coords.bottom - coords.top, DEFAULT_CARET_HEIGHT)
557-598: Consider using a ref for the animation frame ID.The
caretAnimationFramevariable at line 557 is declared as a module-level variable rather than a Vue ref. While this works, using a ref would be more consistent with Vue 3 Composition API patterns and improve testability.🔎 Apply this diff to use a ref:
-let caretAnimationFrame: number | null = null +const caretAnimationFrame = ref<number | null>(null) const updateFakeCaretPosition = () => { if (!editorContainer.value) return - if (caretAnimationFrame) { - cancelAnimationFrame(caretAnimationFrame) + if (caretAnimationFrame.value) { + cancelAnimationFrame(caretAnimationFrame.value) } - caretAnimationFrame = requestAnimationFrame(() => { + caretAnimationFrame.value = requestAnimationFrame(() => {And in the cleanup:
- if (caretAnimationFrame) { - cancelAnimationFrame(caretAnimationFrame) + if (caretAnimationFrame.value) { + cancelAnimationFrame(caretAnimationFrame.value) }
557-598: Add documentation explaining the custom caret implementation.The code introduces significant complexity to replace the native browser caret but lacks comments explaining the purpose, benefits, or the inspiration from Alma's approach. Future maintainers would benefit from understanding why this implementation exists.
🔎 Apply this diff to add documentation:
+// Custom fake caret implementation for smoother typing animation +// Inspired by Alma's approach: https://x.com/yetone/status/1999358442847535218 +// Benefits: Smoother visual feedback with controlled animation timing let caretAnimationFrame: number | null = null const updateFakeCaretPosition = () => { + // Calculate and update the fake caret position based on ProseMirror cursor if (!editorContainer.value) return
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/renderer/src/components/chat-input/ChatInput.vue(8 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 (1)
📚 Learning: 2025-11-25T05:28:04.454Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-11-25T05:28:04.454Z
Learning: Applies to src/renderer/**/*.{ts,vue} : Leverage ref, reactive, and computed for reactive state management
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 (6)
src/renderer/src/components/chat-input/ChatInput.vue (6)
60-66: LGTM! Template structure is well-implemented.The addition of the
editorContainerref and the conditionally rendered fake caret element are correctly structured. The relative positioning on the container allows the absolutely positioned caret to be positioned correctly.
619-622: LGTM! Editor event listeners properly registered.The registration of editor events (
selectionUpdate,transaction,focus,blur) ensures the fake caret stays synchronized with the editor state. The dedicated focus/blur handlers appropriately manage caret visibility.
790-791: LGTM! Window and scroll listeners properly attached.The window resize and container scroll listeners ensure the fake caret position updates when layout changes occur. Using
useEventListenerfrom vueuse provides automatic cleanup.
811-811: LGTM! Proper initialization timing.Using
nextTickto update the caret position after mount ensures the DOM elements are fully rendered before calculating coordinates.
823-826: LGTM! Complete cleanup in unmount hook.All editor event listeners are properly removed and the pending animation frame is canceled, preventing memory leaks.
Also applies to: 831-833
884-911: LGTM! Well-optimized fake caret styling.The CSS implementation includes appropriate performance optimizations (
will-change,pointer-events: none), smooth transitions with cubic-bezier timing functions, and a standard blink animation. The use of CSS custom properties (--primary) ensures theme compatibility.
Yetone shared an optimization approach for Alma’s input field on X, which was very inspiring. I implemented a version based on his approach.
https://x.com/yetone/status/1999358442847535218
bbd1f9aae6b9a45c5632c443405631ad.mp4
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.