🎨 Palette: Add confirmation dialog for chat deletion#150
🎨 Palette: Add confirmation dialog for chat deletion#150Dexploarer wants to merge 1 commit intomainfrom
Conversation
- Replace instant delete button in sidebar with ConfirmDeleteControl - Add title tooltip to delete trigger - Prevents accidental deletion of chat history
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ 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 |
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the user experience by introducing a confirmation step for deleting chat conversations. This change mitigates the risk of accidental data deletion, a common user frustration, by requiring explicit confirmation before a conversation is removed. Additionally, it improves accessibility by allowing for more descriptive tooltips on the delete action, making the interface more user-friendly and robust. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![codereviewbot-ai[bot]](https://avatars.githubusercontent.com/in/309638?s=60&v=4){kind=small}
| <ConfirmDeleteControl | ||
| onConfirm={() => void handleDeleteConversation(conv.id)} | ||
| triggerLabel="×" | ||
| triggerTitle="Delete conversation" | ||
| triggerClassName="border-none bg-transparent text-muted hover:text-danger hover:bg-destructive-subtle cursor-pointer text-sm px-1 py-0.5 rounded flex-shrink-0" | ||
| promptText="Delete?" | ||
| confirmLabel="Yes" | ||
| cancelLabel="No" | ||
| confirmClassName="px-1.5 py-0.5 text-[10px] bg-danger text-white rounded cursor-pointer hover:bg-danger-hover border-none mr-1" | ||
| cancelClassName="px-1.5 py-0.5 text-[10px] bg-bg border border-border text-muted rounded cursor-pointer hover:text-txt" | ||
| promptClassName="text-[10px] text-danger mr-1" | ||
| /> |
There was a problem hiding this comment.
Lack of error handling for conversation deletion
The onConfirm handler for ConfirmDeleteControl calls handleDeleteConversation(conv.id) without handling potential errors. If the deletion fails (e.g., due to a network or server error), the user receives no feedback, and the UI may become inconsistent.
Recommended solution:
Add error handling and user feedback for failed deletions. For example:
onConfirm={async () => {
try {
await handleDeleteConversation(conv.id);
} catch (err) {
// Show error notification or feedback to the user
}
}}| title={triggerTitle} | ||
| > |
There was a problem hiding this comment.
Accessibility Issue:
The title attribute of the trigger button is set to {triggerTitle} regardless of whether it is defined. If triggerTitle is undefined, the attribute will be set to undefined, which may cause accessibility issues or unexpected behavior in some browsers.
Recommended Solution:
Conditionally set the title attribute only if triggerTitle is defined:
{triggerTitle ? <button title={triggerTitle} ... /> : <button ... />}Or use:
<button
...
{...(triggerTitle ? { title: triggerTitle } : {})}
>| act(() => { | ||
| // Simulate click which triggers onConfirm in our mock | ||
| deleteBtns[0].props.onClick({ stopPropagation: vi.fn() }); | ||
| }); |
There was a problem hiding this comment.
Direct invocation of the onClick handler with a synthetic event:
The test simulates a click by directly calling deleteBtns[0].props.onClick({ stopPropagation: vi.fn() }). This approach bypasses React's event system and may not accurately reflect user interaction, potentially leading to brittle tests if the component implementation changes.
Recommended solution:
Use a test utility that simulates user events, such as fireEvent from @testing-library/react, to trigger the click. This ensures the test more closely mirrors real user behavior and increases reliability.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a confirmation step for deleting conversations, which is a great UX improvement to prevent accidental data loss. The implementation correctly uses a new ConfirmDeleteControl component and adds a new test file to cover this new behavior. The changes are well-structured. I have one suggestion to improve performance and maintainability by extracting repeated string literals into constants.
| <ConfirmDeleteControl | ||
| onConfirm={() => void handleDeleteConversation(conv.id)} | ||
| triggerLabel="×" | ||
| triggerTitle="Delete conversation" | ||
| triggerClassName="border-none bg-transparent text-muted hover:text-danger hover:bg-destructive-subtle cursor-pointer text-sm px-1 py-0.5 rounded flex-shrink-0" | ||
| promptText="Delete?" | ||
| confirmLabel="Yes" | ||
| cancelLabel="No" | ||
| confirmClassName="px-1.5 py-0.5 text-[10px] bg-danger text-white rounded cursor-pointer hover:bg-danger-hover border-none mr-1" | ||
| cancelClassName="px-1.5 py-0.5 text-[10px] bg-bg border border-border text-muted rounded cursor-pointer hover:text-txt" | ||
| promptClassName="text-[10px] text-danger mr-1" | ||
| /> |
There was a problem hiding this comment.
For better performance and maintainability, these long Tailwind class strings should be extracted into constants. Defining them inside the map function causes them to be recreated for every conversation on every render.
Consider defining these constants outside the map loop, for example, at the top of the ConversationsSidebar component function:
const triggerClassName = "border-none bg-transparent text-muted hover:text-danger hover:bg-destructive-subtle cursor-pointer text-sm px-1 py-0.5 rounded flex-shrink-0";
const confirmClassName = "px-1.5 py-0.5 text-[10px] bg-danger text-white rounded cursor-pointer hover:bg-danger-hover border-none mr-1";
const cancelClassName = "px-1.5 py-0.5 text-[10px] bg-bg border border-border text-muted rounded cursor-pointer hover:text-txt";
const promptClassName = "text-[10px] text-danger mr-1";Then use these constants in the ConfirmDeleteControl props.
1 participant
This change replaces the instant delete button in the Conversations Sidebar with a two-step confirmation control (
ConfirmDeleteControl). This prevents users from accidentally deleting their chat history with a single misclick.Changes:
ConfirmDeleteControlto accept an optionaltriggerTitleprop for better accessibility/tooltips.ConversationsSidebarto useConfirmDeleteControlinstead of a raw button.UX Improvements:
PR created automatically by Jules for task 12076588310527794192 started by @Dexploarer