feat: add confirm for unsaved content in creating agent (#7965)

src/renderer/src/i18n/locales/en-us.json

@@ -13,6 +13,7 @@
         "title": "Available variables"
       },
       "add.title": "Create Agent",
+      "add.unsaved_changes_warning": "You have unsaved changes. Are you sure you want to close?",
       "delete.popup.content": "Are you sure you want to delete this agent?",
       "edit.model.select.title": "Select Model",
       "edit.title": "Edit Agent",

src/renderer/src/i18n/locales/ja-jp.json

@@ -13,6 +13,7 @@
         "title": "利用可能な変数"
       },
       "add.title": "エージェントを作成",
+      "add.unsaved_changes_warning": "未保存の変更があります。続行しますか？",
       "delete.popup.content": "このエージェントを削除してもよろしいですか？",
       "edit.model.select.title": "モデルを選択",
       "edit.title": "エージェントを編集",

src/renderer/src/i18n/locales/ru-ru.json

@@ -13,6 +13,7 @@
         "title": "Доступные переменные"
       },
       "add.title": "Создать агента",
+      "add.unsaved_changes_warning": "У вас есть несохраненные изменения. Вы уверены, что хотите закрыть?",
       "delete.popup.content": "Вы уверены, что хотите удалить этого агента?",
       "edit.model.select.title": "Выбрать модель",
       "edit.title": "Редактировать агента",

src/renderer/src/i18n/locales/zh-cn.json

@@ -13,6 +13,7 @@
         "title": "可用的变量"
       },
       "add.title": "创建智能体",
+      "add.unsaved_changes_warning": "你有未保存的内容，确定要关闭吗？",
       "delete.popup.content": "确定要删除此智能体吗？",
       "edit.model.select.title": "选择模型",
       "edit.title": "编辑智能体",

src/renderer/src/i18n/locales/zh-tw.json

@@ -13,6 +13,7 @@
         "title": "可用的變數"
       },
       "add.title": "建立智慧代理人",
+      "add.unsaved_changes_warning": "有未保存的變更，確定要關閉嗎？",
       "delete.popup.content": "確定要刪除此智慧代理人嗎？",
       "edit.model.select.title": "選擇模型",
       "edit.title": "編輯智慧代理人",

src/renderer/src/pages/agents/components/AddAgentPopup.tsx

@@ -41,6 +41,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
   const [showUndoButton, setShowUndoButton] = useState(false)
   const [originalPrompt, setOriginalPrompt] = useState('')
   const [tokenCount, setTokenCount] = useState(0)
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)
   const knowledgeState = useAppSelector((state) => state.knowledge)
   const showKnowledgeIcon = useSidebarIconShow('knowledge')
   const knowledgeOptions: SelectProps['options'] = []
@@ -92,8 +93,21 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
     setOpen(false)
   }
 
-  const onCancel = () => {
-    setOpen(false)
+  const handleCancel = () => {
+    if (hasUnsavedChanges) {
+      window.modal.confirm({
+        title: t('common.confirm'),
+        content: t('agents.add.unsaved_changes_warning'),
+        okText: t('common.confirm'),
+        cancelText: t('common.cancel'),
+        centered: true,
+        onOk: () => {
+          setOpen(false)
+        }
+      })
+    } else {
+      setOpen(false)
+    }
   }
 
   const onClose = () => {
@@ -124,6 +138,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       form.setFieldsValue({ prompt: generatedText })
       setShowUndoButton(true)
       setOriginalPrompt(content)
+      setHasUnsavedChanges(true)
     } catch (error) {
       console.error('Error fetching data:', error)
     }
@@ -146,7 +161,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       title={t('agents.add.title')}
       open={open}
       onOk={() => formRef.current?.submit()}
-      onCancel={onCancel}
+      onCancel={handleCancel}
       maskClosable={false}
       afterClose={onClose}
       okText={t('agents.add.title')}
@@ -167,9 +182,21 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
             setTokenCount(count)
             setShowUndoButton(false)
           }
+
+          const currentValues = form.getFieldsValue()
+          setHasUnsavedChanges(currentValues.name?.trim() || currentValues.prompt?.trim() || emoji)
         }}>
         <Form.Item name="name" label="Emoji">
-          <Popover content={<EmojiPicker onEmojiClick={setEmoji} />} arrow>
+          <Popover
+            content={
+              <EmojiPicker
+                onEmojiClick={(selectedEmoji) => {
+                  setEmoji(selectedEmoji)
+                  setHasUnsavedChanges(true)
+                }}
+              />
+            }
+            arrow>
             <Button icon={emoji && <span style={{ fontSize: 20 }}>{emoji}</span>}>{t('common.select')}</Button>
           </Popover>
         </Form.Item>