(feat:chatbots) confirm before deletion

frontend/src/locale/en.json

@@ -79,7 +79,8 @@
       "key": "API Key",
       "sourceDoc": "Source Document",
       "createNew": "Create New",
-      "noData": "No existing Chatbots"
+      "noData": "No existing Chatbots",
+      "deleteConfirmation": "Are you sure you want to delete the API key '{{name}}'?"
     },
     "analytics": {
       "label": "Analytics",

frontend/src/locale/es.json

@@ -79,7 +79,8 @@
       "key": "Clave de API",
       "sourceDoc": "Documento Fuente",
       "createNew": "Crear Nuevo",
-      "noData": "No hay chatbots existentes"
+      "noData": "No hay chatbots existentes",
+      "deleteConfirmation": "¿Estás seguro de que quieres eliminar la clave API '{{name}}'?"
     },
     "analytics": {
       "label": "Analítica",

frontend/src/locale/jp.json

@@ -73,12 +73,13 @@
       "actions": "アクション"
     },
     "apiKeys": {
-      "label": "APIキー",
+      "label": "チャットボット",
       "name": "名前",
       "key": "APIキー",
       "sourceDoc": "ソースドキュメント",
       "createNew": "新規作成",
-      "noData": "既存のAPIキーがありません"
+      "noData": "既存のチャットボットはありません",
+      "deleteConfirmation": "APIキー '{{name}}' を削除してもよろしいですか？"
     },
     "analytics": {
       "label": "分析",

frontend/src/locale/ru.json

@@ -79,7 +79,8 @@
       "key": "API ключ",
       "sourceDoc": "Источник документа",
       "createNew": "Создать новый",
-      "noData": "Нет существующих API ключей"
+      "noData": "Нет существующих чатботов",
+      "deleteConfirmation": "Вы уверены, что хотите удалить API ключ '{{name}}'?"
     },
     "analytics": {
       "label": "Аналитика",

frontend/src/locale/zh-TW.json

@@ -78,8 +78,9 @@
       "name": "名稱",
       "key": "API 金鑰",
       "sourceDoc": "來源文件",
-      "createNew": "新增",
-      "noData": "沒有現有的聊天機器人"
+      "createNew": "建立新的",
+      "noData": "沒有現有的聊天機器人",
+      "deleteConfirmation": "您確定要刪除 API 金鑰 '{{name}}' 嗎？"
     },
     "analytics": {
       "label": "分析",

frontend/src/locale/zh.json

@@ -79,7 +79,8 @@
       "key": "API 密钥",
       "sourceDoc": "源文档",
       "createNew": "创建新的",
-      "noData": "没有现有的聊天机器人"
+      "noData": "没有现有的聊天机器人",
+      "deleteConfirmation": "您确定要删除 API 密钥 '{{name}}' 吗？"
     },
     "analytics": {
       "label": "分析",

frontend/src/settings/APIKeys.tsx

@@ -5,6 +5,7 @@ import userService from '../api/services/userService';
 import Trash from '../assets/trash.svg';
 import CreateAPIKeyModal from '../modals/CreateAPIKeyModal';
 import SaveAPIKeyModal from '../modals/SaveAPIKeyModal';
+import ConfirmationModal from '../modals/ConfirmationModal';
 import { APIKeyData } from './types';
 import SkeletonLoader from '../components/SkeletonLoader';
 
@@ -15,6 +16,10 @@ export default function APIKeys() {
   const [newKey, setNewKey] = React.useState('');
   const [apiKeys, setApiKeys] = React.useState<APIKeyData[]>([]);
   const [loading, setLoading] = useState(true);
+  const [keyToDelete, setKeyToDelete] = useState<{
+    id: string;
+    name: string;
+  } | null>(null);
 
   const handleFetchKeys = async () => {
     setLoading(true);
@@ -44,6 +49,7 @@ export default function APIKeys() {
       .then((data) => {
         data.success === true &&
           setApiKeys((previous) => previous.filter((elem) => elem.id !== id));
+        setKeyToDelete(null);
       })
       .catch((error) => {
         console.error(error);
@@ -104,6 +110,18 @@ export default function APIKeys() {
             close={() => setSaveKeyModal(false)}
           />
         )}
+        {keyToDelete && (
+          <ConfirmationModal
+            message={t('settings.apiKeys.deleteConfirmation', {
+              name: keyToDelete.name,
+            })}
+            modalState="ACTIVE"
+            setModalState={() => setKeyToDelete(null)}
+            submitLabel={t('modals.deleteConv.delete')}
+            handleSubmit={() => handleDeleteKey(keyToDelete.id)}
+            handleCancel={() => setKeyToDelete(null)}
+          />
+        )}
         <div className="mt-[27px] w-full">
           <div className="w-full overflow-x-auto">
             {loading ? (
@@ -157,7 +175,12 @@ export default function APIKeys() {
                                   alt={`Delete ${element.name}`}
                                   className="h-4 w-4 cursor-pointer hover:opacity-50"
                                   id={`img-${index}`}
-                                  onClick={() => handleDeleteKey(element.id)}
+                                  onClick={() =>
+                                    setKeyToDelete({
+                                      id: element.id,
+                                      name: element.name,
+                                    })
+                                  }
                                 />
                               </td>
                             </tr>