Fix copy button visibility and add copied text #113
Conversation
Related to #109 --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/Royal-lobster/Syncia/issues/109?shareId=XXXX-XXXX-XXXX-XXXX).
|
|
|
WalkthroughThis change introduces a new state variable in the ChatList component to control the visibility of a "Copied!" message when a message is copied. It uses a state hook and an effect hook to display the feedback for 3 seconds. The copy button now toggles between two icons based on this state, and certain CSS classes have been removed from buttons to adjust their visibility. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant C as ChatList Component
participant T as Timer (useEffect)
U->>C: Clicks copy button
C->>C: set showCopiedText = true
C->>U: Renders check icon & "Copied!" message
T->>C: After 3s, set showCopiedText = false
C->>U: Renders copy icon & hides "Copied!" message
Possibly related PRs
Poem
✨ Finishing Touches
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:
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 (1)
src/components/Sidebar/chat/ChatList.tsx (1)
148-152: Suggest positioning improvement for the copied notification.The fixed positioning with transform works, but it might overlap with other UI elements in some cases.
Consider using a toast notification system or positioning the element relative to the copy button for a more contextual user experience:
- {showCopiedText && ( - <div className="cdx-fixed cdx-bottom-4 cdx-left-1/2 cdx-transform cdx--translate-x-1/2 cdx-bg-black cdx-text-white cdx-px-4 cdx-py-2 cdx-rounded"> - Copied! - </div> - )} + {showCopiedText && ( + <div className="cdx-fixed cdx-bottom-16 cdx-right-4 cdx-bg-black cdx-text-white cdx-px-4 cdx-py-2 cdx-rounded cdx-shadow-md cdx-z-50 cdx-transition-opacity"> + Copied! + </div> + )}Additionally, consider adding a fade transition to make the appearance and disappearance smoother:
/* Add to the className */ cdx-animate-fade cdx-duration-300
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Sidebar/chat/ChatList.tsx(6 hunks)
🔇 Additional comments (6)
src/components/Sidebar/chat/ChatList.tsx (6)
1-1: Appropriate icon import added for the copy feedback.Adding the
RiCheckLineicon is a good choice for providing visual feedback when content is copied.Also applies to: 7-7
32-33: Good state management for copied text feedback.The new state variable effectively tracks when to show the "Copied!" notification to users.
34-41: Well-implemented auto-dismissal of the copied notification.The useEffect correctly sets up a timeout to hide the copied confirmation after 3 seconds and properly cleans up the timeout when the component unmounts or when the state changes again.
64-64: Good integration of copy feedback with existing functionality.Setting the copied text state within the existing copy function is the right approach and ensures user feedback is triggered at the appropriate time.
101-101: Button visibility improved.Removing the conditional visibility classes ensures users can always see and access the delete button functionality without having to hover first.
110-112: Enhanced user feedback for copy operations.The button now provides clear visual feedback by toggling between copy and check icons based on state. Making the button consistently visible also improves usability.
|
Fixed this in migrate-wxt branch |
Related to #109
For more details, open the Copilot Workspace session.
Summary by CodeRabbit