feat: support Tab and Enter for delete dialog buttons (#700)

ayangweb · web-flow · commit a431ead22a8b · 2025-06-19T08:59:01.000+08:00
* feat: support `Tab` and `Enter` for delete dialog buttons

* docs: update changelog

* refactor: update
diff --git a/docs/content.en/docs/release-notes/_index.md b/docs/content.en/docs/release-notes/_index.md
@@ -13,6 +13,8 @@ Information about release notes of Coco Server is provided here.
 
 ### 🚀 Features
 
+- feat: support `Tab` and `Enter` for delete dialog buttons #700
+
 ### 🐛 Bug fix
 
 - fix: quick ai state synchronous #693
diff --git a/src/components/Common/HistoryList/DeleteDialog.tsx b/src/components/Common/HistoryList/DeleteDialog.tsx
@@ -1,4 +1,5 @@
 import {
+  Button,
   Description,
   Dialog,
   DialogPanel,
@@ -8,6 +9,7 @@ import { useTranslation } from "react-i18next";
 
 import VisibleKey from "@/components/Common/VisibleKey";
 import { Chat } from "@/types/chat";
+import { KeyboardEvent } from "react";
 
 interface DeleteDialogProps {
   isOpen: boolean;
@@ -24,6 +26,15 @@ const DeleteDialog = ({
 }: DeleteDialogProps) => {
   const { t } = useTranslation();
 
+  const handleEnter = (event: KeyboardEvent, cb: () => void) => {
+    if (event.code !== "Enter") return;
+
+    event.stopPropagation();
+    event.preventDefault();
+
+    cb();
+  };
+
   return (
     <Dialog
       open={isOpen}
@@ -56,25 +67,34 @@ const DeleteDialog = ({
               shortcutClassName="left-[unset] right-0"
               onKeyPress={() => setIsOpen(false)}
             >
-              <button
-                className="h-8 px-4 text-sm text-[#666666] bg-[#F8F9FA] dark:text-white dark:bg-[#202126] border border-[#E6E6E6] dark:border-white/10 rounded-lg"
+              <Button
+                autoFocus
+                className="h-8 px-4 text-sm text-[#666666] bg-[#F8F9FA] dark:text-white dark:bg-[#202126] border border-[#E6E6E6] dark:border-white/10 rounded-lg focus:border-black/30 dark:focus:border-white/50 transition"
                 onClick={() => setIsOpen(false)}
+                onKeyDown={(event) => {
+                  handleEnter(event, () => {
+                    setIsOpen(false);
+                  });
+                }}
               >
                 {t("history_list.delete_modal.button.cancel")}
-              </button>
+              </Button>
             </VisibleKey>
 
             <VisibleKey
               shortcut="Y"
               shortcutClassName="left-[unset] right-0"
               onKeyPress={handleRemove}
             >
-              <button
-                className="h-8 px-4 text-sm text-white bg-[#EF4444] rounded-lg"
+              <Button
+                className="h-8 px-4 text-sm text-white bg-[#EF4444] rounded-lg border border-[#EF4444] focus:border-black/30 dark:focus:border-white/50 transition"
                 onClick={handleRemove}
+                onKeyDown={(event) => {
+                  handleEnter(event, handleRemove);
+                }}
               >
                 {t("history_list.delete_modal.button.delete")}
-              </button>
+              </Button>
             </VisibleKey>
           </div>
         </DialogPanel>
