feat: remove default suggestion filters and enhance text highlighting functionality#179
Conversation
|
""" WalkthroughThe changes overhaul the suggestion highlighting system for the Sender component. They introduce a new, extensible suggestion item structure supporting custom highlight logic, update documentation and demos to reflect these features, and refactor component and composable logic for handling suggestions, highlighting, and user interactions. A new utility module centralizes highlight processing. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SenderComponent
participant SuggestionHandler
participant SuggestionList
participant HighlightUtils
User->>SenderComponent: Types input
SenderComponent->>SuggestionHandler: Update input value
SuggestionHandler->>SenderComponent: Provide suggestions & highlight info
SenderComponent->>SuggestionList: Render suggestions (with highlight info)
SuggestionList->>HighlightUtils: processHighlights(item, inputText)
HighlightUtils-->>SuggestionList: Highlighted text parts
User->>SuggestionList: Selects suggestion
SuggestionList->>SenderComponent: Emit selected content
SenderComponent->>SuggestionHandler: Apply suggestion
Estimated code review effort🎯 4 (Complex) | ⏱️ ~40 minutes Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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 (2)
packages/components/src/sender/utils/suggestionHighlight.ts (1)
92-132: LGTM! Correct implementation with good edge case handling.The character marking approach and final consolidation logic are sound. The function properly handles empty highlights and correctly groups consecutive characters with the same highlight state.
For better performance with large texts or many highlights, consider using a more efficient string search algorithm:
// More efficient approach for multiple highlights for (const highlight of highlights) { - let startIndex = 0 - while (true) { - const index = content.indexOf(highlight, startIndex) - if (index === -1) break - - // 标记这段文本为高亮 - for (let i = 0; i < highlight.length; i++) { - markedChars[index + i] = true - } - - startIndex = index + 1 - } + const regex = new RegExp(highlight.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g') + let match + while ((match = regex.exec(content)) !== null) { + for (let i = 0; i < highlight.length; i++) { + markedChars[match.index + i] = true + } + } }docs/src/components/sender.md (1)
353-368: LGTM! Accurate TypeScript type documentation.The type definitions correctly match the implementation and provide clear guidance for developers. The inline comments help explain the purpose of each type.
Consider addressing the markdown linting issue for line 156 by converting the emphasized text to a proper heading:
-**自定义高亮方式** +#### 自定义高亮方式
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
docs/demos/sender/Suggestions.vue(2 hunks)docs/src/components/sender.md(3 hunks)packages/components/src/sender/components/SuggestionList.vue(2 hunks)packages/components/src/sender/composables/useSuggestionHandler.ts(1 hunks)packages/components/src/sender/index.type.ts(2 hunks)packages/components/src/sender/index.vue(6 hunks)packages/components/src/sender/utils/suggestionHighlight.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: gene9831
PR: opentiny/tiny-robot#59
File: packages/components/src/suggestion-popover/index.vue:131-133
Timestamp: 2025-05-27T03:35:11.008Z
Learning: In the SuggestionPopover component (packages/components/src/suggestion-popover/index.vue), the click handler can be bound unconditionally because the `show` computed property has a custom setter that prevents state mutations when `props.trigger === 'manual'`. This design centralizes trigger mode logic in the computed property rather than requiring conditional checks in event handlers.
docs/demos/sender/Suggestions.vue (1)
Learnt from: gene9831
PR: #59
File: packages/components/src/suggestion-popover/index.vue:131-133
Timestamp: 2025-05-27T03:35:11.008Z
Learning: In the SuggestionPopover component (packages/components/src/suggestion-popover/index.vue), the click handler can be bound unconditionally because the show computed property has a custom setter that prevents state mutations when props.trigger === 'manual'. This design centralizes trigger mode logic in the computed property rather than requiring conditional checks in event handlers.
packages/components/src/sender/components/SuggestionList.vue (1)
Learnt from: gene9831
PR: #59
File: packages/components/src/suggestion-popover/index.vue:131-133
Timestamp: 2025-05-27T03:35:11.008Z
Learning: In the SuggestionPopover component (packages/components/src/suggestion-popover/index.vue), the click handler can be bound unconditionally because the show computed property has a custom setter that prevents state mutations when props.trigger === 'manual'. This design centralizes trigger mode logic in the computed property rather than requiring conditional checks in event handlers.
packages/components/src/sender/index.type.ts (1)
Learnt from: gene9831
PR: #59
File: packages/components/src/suggestion-popover/index.vue:131-133
Timestamp: 2025-05-27T03:35:11.008Z
Learning: In the SuggestionPopover component (packages/components/src/suggestion-popover/index.vue), the click handler can be bound unconditionally because the show computed property has a custom setter that prevents state mutations when props.trigger === 'manual'. This design centralizes trigger mode logic in the computed property rather than requiring conditional checks in event handlers.
packages/components/src/sender/index.vue (1)
Learnt from: gene9831
PR: #59
File: packages/components/src/suggestion-popover/index.vue:131-133
Timestamp: 2025-05-27T03:35:11.008Z
Learning: In the SuggestionPopover component (packages/components/src/suggestion-popover/index.vue), the click handler can be bound unconditionally because the show computed property has a custom setter that prevents state mutations when props.trigger === 'manual'. This design centralizes trigger mode logic in the computed property rather than requiring conditional checks in event handlers.
packages/components/src/sender/composables/useSuggestionHandler.ts (1)
Learnt from: gene9831
PR: #59
File: packages/components/src/suggestion-popover/index.vue:131-133
Timestamp: 2025-05-27T03:35:11.008Z
Learning: In the SuggestionPopover component (packages/components/src/suggestion-popover/index.vue), the click handler can be bound unconditionally because the show computed property has a custom setter that prevents state mutations when props.trigger === 'manual'. This design centralizes trigger mode logic in the computed property rather than requiring conditional checks in event handlers.
🪛 markdownlint-cli2 (0.17.2)
docs/src/components/sender.md
156-156: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
🔇 Additional comments (24)
packages/components/src/sender/utils/suggestionHighlight.ts (2)
9-84: LGTM! Well-structured text highlighting function.The implementation correctly handles case-insensitive matching, merges overlapping intervals, and constructs the result array with proper text segmentation. Edge cases like empty inputs and no matches are appropriately handled.
140-155: LGTM! Clean dispatcher pattern with correct type checking.The function properly handles the three highlight modes with the correct priority order (custom function > predefined array > default). Type checking using
typeofandArray.isArrayis appropriate and reliable.packages/components/src/sender/index.type.ts (4)
43-47: LGTM! Clean interface for text highlighting.The
SuggestionTextPartinterface provides a clear structure for representing text segments with highlight state, perfectly suited for the highlighting system.
49-50: LGTM! Accurate type definition for custom highlight functions.The
HighlightFunctiontype correctly defines the signature for custom highlight logic, matching the implementation in the utility functions.
52-60: LGTM! Well-designed interface with clear documentation.The
ISuggestionIteminterface excellently captures the flexible highlighting system with clear inline documentation. The union type forhighlightsproperly supports all three highlight modes while maintaining backward compatibility.
80-80: LGTM! Proper prop type update for enhanced suggestions.The update from
string[]toISuggestionItem[]correctly reflects the new suggestion item structure and maintains type consistency across the component system.docs/demos/sender/Suggestions.vue (3)
41-52: LGTM! Proper conversion to new suggestion item format.The conversion from string arrays to objects with
contentproperties correctly demonstrates the updated API while maintaining the same functionality. The structure aligns with the newISuggestionIteminterface.
55-101: LGTM! Excellent demonstration of custom highlighting features.The
customHighlightSuggestionsarray effectively showcases all three highlight modes:
- Predefined highlights with string arrays
- Custom highlight function with clear implementation
- Default highlighting behavior
The custom function example is particularly educational, showing how to manually parse text and create
SuggestionTextPartobjects.
21-28: LGTM! Proper imports and clear demo structure.The addition of
SuggestionTextPartimport enables proper TypeScript support for the custom highlight function, and the new template section clearly demonstrates the custom highlighting capability.Also applies to: 34-34
docs/src/components/sender.md (2)
156-165: LGTM! Clear and comprehensive documentation.The custom highlight modes documentation is well-structured and informative. The three modes are clearly explained with their priority order, making it easy for developers to understand and implement the feature correctly.
264-264: LGTM! Accurate prop type documentation.The updated
suggestionsprop type correctly reflects the new flexible API that supports both string andSuggestionItemformats, maintaining backward compatibility while enabling enhanced highlighting features.packages/components/src/sender/components/SuggestionList.vue (4)
2-14: LGTM! Proper imports and prop type updates.The component correctly imports the new utility function and types, and the props interface properly reflects the updated suggestion item structure with clear separation between keyboard and mouse active indices.
20-21: LGTM! Improved event naming conventions.The rename from
item-hover/item-leavetomouse-enter/mouse-leavefollows standard DOM event naming patterns and makes the API more intuitive and consistent.Also applies to: 33-33, 37-37
28-30: LGTM! Well-designed internalization of highlighting logic.The component now properly handles highlighting internally using the
processHighlightsutility, and correctly emits thecontentproperty from the selected suggestion item. This reduces coupling and improves maintainability.Also applies to: 72-72, 77-77
44-54: LGTM! Excellent UX improvement for keyboard navigation.The watcher ensures the keyboard-highlighted suggestion item is always visible by scrolling it into view. The implementation includes proper bounds checking and uses
block: 'nearest'for smooth, non-disruptive scrolling behavior.packages/components/src/sender/index.vue (4)
79-101: LGTM! Clean refactoring of the suggestion handler interface.The migration from props/emit to explicit callbacks improves type safety and makes the data flow more explicit. The renamed properties follow clearer naming conventions (e.g.,
isPopupVisibleis more descriptive thanshowSuggestionsPopup).
356-374: Keyboard handler properly integrated with refactored suggestion system.The
useKeyboardHandlerparameters correctly reflect the renamed properties and new callback-based approach from the suggestion handler refactor.
443-453: Good addition of autocomplete synchronization.The
syncAutoComplete()call ensures the autocomplete suffix updates in real-time as the user types, which enhances the tab completion experience mentioned in the PR objectives.
649-660: Template correctly updated to match the refactored suggestion system.The changes properly reflect:
- New prop names that are more descriptive
- Separation of keyboard and mouse indices for better interaction tracking
- Standardized event naming (mouse-enter/mouse-leave)
- Direct passing of suggestions without filtering, aligning with PR objectives
packages/components/src/sender/composables/useSuggestionHandler.ts (5)
1-22: Excellent refactoring of the composable signature.The changes improve:
- Type safety with
ISuggestionItem[]- Explicit data flow through callbacks instead of props/emit
- Proper reactivity with
ComputedReffor suggestions
23-37: Well-structured state management with clear separation of concerns.The improvements include:
- Separate tracking of keyboard and mouse interactions
- Clear
interactionModeto determine active interaction type- Descriptive variable names that better express their purpose
39-64: Solid implementation of the enhanced tab completion logic.The autocomplete logic correctly:
- Performs case-insensitive prefix matching
- Only shows tab indicator when there's a valid suffix
- Clears autocomplete when prefix doesn't match (addressing PR objective #4)
88-143: Clean implementation of selection and navigation logic.The code properly:
- Emits the
suggestion-selectevent for tracking (PR objective #3)- Manages interaction mode switching between keyboard and mouse
- Maintains proper state when switching between interaction modes
145-156: Elegant reactive popup management.The implementation uses a declarative approach with
shouldShowPopupcomputed property and a watcher, making the popup behavior predictable and easy to understand. The conditions properly account for all relevant states.
SonyLeo
changed the title
SonyLeo
changed the title
2 participants
feat: Add support for displaying recommended questions, custom highlighting, event tracking, and enhanced tab completion logic
一、功能需求
二、具体实现
展示内容调整
去除默认筛选逻辑，直接展示传入的建议内容
高亮处理
调整数据结构，可以基于
highlights字段进行自定义高亮逻辑highlights字段指定要高亮的文本片段。highlights字段为函数，可完全自定义高亮逻辑。事件支持
使用
suggestion-select事件，点击触发补全逻辑补充
当输入框前置字符无法匹配选中项时：
不显示占位符+Tab补全
点击后直接覆盖当前输入框文本
Summary by CodeRabbit
New Features
Improvements
Documentation