feat: update main chat and system chat UI

src/app/main/AutomationContextManagementPage.tsx

@@ -1,6 +1,6 @@
 import { DeleteOutlined, EditOutlined, PlusOutlined, SaveOutlined, UnorderedListOutlined } from '@ant-design/icons';
-import { Alert, Button, Card, Empty, Form, Input, List, Space, Switch, Typography } from 'antd';
-import { useEffect, useMemo, useState } from 'react';
+import { Alert, Button, Card, Empty, Form, Input, List, Modal, Space, Switch, Typography } from 'antd';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { MarkdownPreviewContent } from '../../components/markdownPreview';
 import {
   deleteAutomationContext,
@@ -8,6 +8,7 @@ import {
   upsertAutomationContext,
   useAutomationContextRegistry,
 } from './automationContextAccess';
+import { confirmWithKeyboard } from './modalKeyboard';
 import { useTokenAccess } from './tokenAccess';
 import './AutomationContextManagementPage.css';
 
@@ -51,6 +52,8 @@ export function AutomationContextManagementPage() {
   const [isSaving, setIsSaving] = useState(false);
   const [saveErrorMessage, setSaveErrorMessage] = useState('');
   const [form] = Form.useForm<AutomationContextFormValue>();
+  const [modalApi, modalContextHolder] = Modal.useModal();
+  const lastHydratedFormKeyRef = useRef('');
 
   const selectedAutomationContext = useMemo(
     () => automationContexts.find((item) => item.id === selectedAutomationContextId) ?? null,
@@ -67,12 +70,20 @@ export function AutomationContextManagementPage() {
 
   useEffect(() => {
     if (detailMode !== 'detail') {
+      lastHydratedFormKeyRef.current = '';
       return;
     }
 
+    const nextFormKey = isCreating ? '__create__' : selectedAutomationContext?.id ?? '__empty__';
+
+    if (lastHydratedFormKeyRef.current === nextFormKey) {
+      return;
+    }
+
+    lastHydratedFormKeyRef.current = nextFormKey;
     form.resetFields();
     form.setFieldsValue(toFormValue(isCreating ? null : selectedAutomationContext));
-  }, [detailMode, form, isCreating, selectedAutomationContext]);
+  }, [detailMode, form, isCreating, selectedAutomationContext?.id]);
 
   const openCreateForm = () => {
     setIsCreating(true);
@@ -98,7 +109,14 @@ export function AutomationContextManagementPage() {
       return;
     }
 
-    if (!window.confirm(`"${selectedAutomationContext.title}" Context를 삭제할까요?`)) {
+    const confirmed = await confirmWithKeyboard(modalApi, {
+      title: `"${selectedAutomationContext.title}" Context를 삭제할까요?`,
+      okText: '삭제',
+      cancelText: '취소',
+      okButtonProps: { danger: true },
+    });
+
+    if (!confirmed) {
       return;
     }
 
@@ -122,19 +140,23 @@ export function AutomationContextManagementPage() {
 
   if (!hasAccess) {
     return (
-      <Card title="Context 관리" className="chat-type-management-page">
-        <Alert
-          showIcon
-          type="warning"
-          message="관리 페이지는 토큰 등록 사용자만 사용할 수 있습니다."
-          description="설정 > 토큰 관리에서 권한 토큰을 등록한 뒤 Context를 관리하세요."
-        />
-      </Card>
+      <>
+        {modalContextHolder}
+        <Card title="Context 관리" className="chat-type-management-page">
+          <Alert
+            showIcon
+            type="warning"
+            message="관리 페이지는 토큰 등록 사용자만 사용할 수 있습니다."
+            description="설정 > 토큰 관리에서 권한 토큰을 등록한 뒤 Context를 관리하세요."
+          />
+        </Card>
+      </>
     );
   }
 
   return (
     <div className={`chat-type-management-page${detailMode === 'detail' ? ' chat-type-management-page--detail' : ''}`}>
+      {modalContextHolder}
       {detailMode === 'list' ? (
         <Card
           title="Context 관리"