From a431ead22a8b4e6dd1a3fcea680ae8dd72ec4442 Mon Sep 17 00:00:00 2001
From: ayangweb <75017711+ayangweb@users.noreply.github.com>
Date: Thu, 19 Jun 2025 08:59:01 +0800
Subject: [PATCH] feat: support `Tab` and `Enter` for delete dialog buttons
 (#700)

* feat: support `Tab` and `Enter` for delete dialog buttons

* docs: update changelog

* refactor: update
---
 docs/content.en/docs/release-notes/_index.md  |  2 ++
 .../Common/HistoryList/DeleteDialog.tsx       | 32 +++++++++++++++----
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/docs/content.en/docs/release-notes/_index.md b/docs/content.en/docs/release-notes/_index.md
index cb61fda8..fc7e9d23 100644
--- 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
index b7ba2538..08534127 100644
--- 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,12 +67,18 @@ 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
@@ -69,12 +86,15 @@ const DeleteDialog = ({
               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>