(feat:prompts) delete after confirmation

frontend/src/locale/en.json

@@ -245,7 +245,8 @@
       "promptName": "Prompt Name",
       "promptText": "Prompt Text",
       "save": "Save",
-      "nameExists": "Name already exists"
+      "nameExists": "Name already exists",
+      "deleteConfirmation": "Are you sure you want to delete the prompt '{{name}}'?"
     },
     "chunk": {
       "add": "Add Chunk",

frontend/src/locale/es.json

@@ -245,7 +245,8 @@
       "promptName": "Nombre del Prompt",
       "promptText": "Texto del Prompt",
       "save": "Guardar",
-      "nameExists": "El nombre ya existe"
+      "nameExists": "El nombre ya existe",
+      "deleteConfirmation": "¿Estás seguro de que deseas eliminar el prompt '{{name}}'?"
     },
     "chunk": {
       "add": "Agregar Fragmento",

frontend/src/locale/jp.json

@@ -245,7 +245,8 @@
       "promptName": "プロンプト名",
       "promptText": "プロンプトテキスト",
       "save": "保存",
-      "nameExists": "名前が既に存在します"
+      "nameExists": "名前が既に存在します",
+      "deleteConfirmation": "プロンプト「{{name}}」を削除してもよろしいですか？"
     },
     "chunk": {
       "add": "チャンクを追加",

frontend/src/locale/ru.json

@@ -245,7 +245,8 @@
       "promptName": "Название подсказки",
       "promptText": "Текст подсказки",
       "save": "Сохранить",
-      "nameExists": "Название уже существует"
+      "nameExists": "Название уже существует",
+      "deleteConfirmation": "Вы уверены, что хотите удалить подсказку «{{name}}»?"
     },
     "chunk": {
       "add": "Добавить фрагмент",

frontend/src/locale/zh-TW.json

@@ -245,7 +245,8 @@
       "promptName": "提示名稱",
       "promptText": "提示文字",
       "save": "儲存",
-      "nameExists": "名稱已存在"
+      "nameExists": "名稱已存在",
+      "deleteConfirmation": "您確定要刪除提示「{{name}}」嗎？"
     },
     "chunk": {
       "add": "新增區塊",

frontend/src/locale/zh.json

@@ -245,7 +245,8 @@
       "promptName": "提示名称",
       "promptText": "提示文本",
       "save": "保存",
-      "nameExists": "名称已存在"
+      "nameExists": "名称已存在",
+      "deleteConfirmation": "您确定要删除提示'{{name}}'吗？"
     },
     "chunk": {
       "add": "添加块",

frontend/src/settings/Prompts.tsx

@@ -7,6 +7,7 @@ import Dropdown from '../components/Dropdown';
 import { ActiveState, PromptProps } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
 import PromptsModal from '../preferences/PromptsModal';
+import ConfirmationModal from '../modals/ConfirmationModal';
 
 export default function Prompts({
   prompts,
@@ -40,6 +41,11 @@ export default function Prompts({
   const [modalState, setModalState] = React.useState<ActiveState>('INACTIVE');
   const { t } = useTranslation();
 
+  const [promptToDelete, setPromptToDelete] = React.useState<{
+    id: string;
+    name: string;
+  } | null>(null);
+
   const handleAddPrompt = async () => {
     try {
       const response = await userService.createPrompt(
@@ -69,20 +75,37 @@ export default function Prompts({
   };
 
   const handleDeletePrompt = (id: string) => {
-    setPrompts(prompts.filter((prompt) => prompt.id !== id));
+    const promptToRemove = prompts.find((prompt) => prompt.id === id);
-    userService
+    if (promptToRemove) {
-      .deletePrompt({ id }, token)
+      setPromptToDelete({ id, name: promptToRemove.name });
-      .then((response) => {
+    }
-        if (!response.ok) {
+  };
-          throw new Error('Failed to delete prompt');
+
-        }
+  const confirmDeletePrompt = () => {
-        if (prompts.length > 0) {
+    if (promptToDelete) {
-          onSelectPrompt(prompts[0].name, prompts[0].id, prompts[0].type);
+      setPrompts(prompts.filter((prompt) => prompt.id !== promptToDelete.id));
-        }
+      userService
-      })
+        .deletePrompt({ id: promptToDelete.id }, token)
-      .catch((error) => {
+        .then((response) => {
-        console.error(error);
+          if (!response.ok) {
-      });
+            throw new Error('Failed to delete prompt');
+          }
+          if (prompts.length > 0) {
+            const firstPrompt = prompts.find((p) => p.id !== promptToDelete.id);
+            if (firstPrompt) {
+              onSelectPrompt(
+                firstPrompt.name,
+                firstPrompt.id,
+                firstPrompt.type,
+              );
+            }
+          }
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+      setPromptToDelete(null);
+    }
   };
 
   const handleFetchPromptContent = async (id: string) => {
@@ -202,6 +225,19 @@ export default function Prompts({
         handleAddPrompt={handleAddPrompt}
         handleEditPrompt={handleSaveChanges}
       />
+      {promptToDelete && (
+        <ConfirmationModal
+          message={t('modals.prompts.deleteConfirmation', {
+            name: promptToDelete.name,
+          })}
+          modalState="ACTIVE"
+          setModalState={() => setPromptToDelete(null)}
+          submitLabel={t('modals.deleteConv.delete')}
+          handleSubmit={confirmDeletePrompt}
+          handleCancel={() => setPromptToDelete(null)}
+          variant="danger"
+        />
+      )}
     </>
   );
 }