feat: add transition animations to various popups and dialogs for improved user experience

src/renderer/src/components/ObsidianExportDialog.tsx

@@ -312,6 +312,7 @@ const ObsidianExportDialog: React.FC<ObsidianExportDialogProps> = ({
       closable
       maskClosable
       centered
+      transitionName="animation-move-down"
       okButtonProps={{
         type: 'primary',
         disabled: vaults.length === 0 || loading || !!error

src/renderer/src/components/Popups/AddAssistantPopup.tsx

@@ -150,7 +150,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       open={open}
       onCancel={onCancel}
       afterClose={onClose}
-      transitionName="ant-move-up"
+      transitionName="animation-move-down"
       styles={{
         content: {
           borderRadius: 20,

src/renderer/src/components/Popups/BackupPopup.tsx

@@ -70,6 +70,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       cancelButtonProps={{ disabled: isDisabled }}
       okText={t('backup.confirm.button')}
       maskClosable={false}
+      transitionName="animation-move-down"
       centered>
       {!progressData && <div>{t('backup.content')}</div>}
       {progressData && (

src/renderer/src/components/Popups/PromptPopup.tsx

@@ -63,6 +63,7 @@ const PromptPopupContainer: React.FC<Props> = ({
       onCancel={onCancel}
       afterClose={onClose}
       afterOpenChange={handleAfterOpenChange}
+      transitionName="animation-move-down"
       centered>
       <Box mb={8}>{message}</Box>
       <Input.TextArea

src/renderer/src/components/Popups/RestorePopup.tsx

@@ -70,6 +70,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       okButtonProps={{ disabled: isDisabled }}
       cancelButtonProps={{ disabled: isDisabled }}
       maskClosable={false}
+      transitionName="animation-move-down"
       centered>
       {!progressData && <div>{t('restore.content')}</div>}
       {progressData && (

src/renderer/src/components/Popups/SelectModelPopup/popup.tsx

@@ -20,7 +20,7 @@ import styled from 'styled-components'
 import { useScrollState } from './hook'
 import { FlatListItem } from './types'
 
-const PAGE_SIZE = 9
+const PAGE_SIZE = 10
 const ITEM_HEIGHT = 36
 
 interface PopupParams {

src/renderer/src/components/WebdavBackupManager.tsx

@@ -255,6 +255,7 @@ export function WebdavBackupManager({ visible, onClose, webdavConfig, restoreMet
       onCancel={onClose}
       width={800}
       centered
+      transitionName="animation-move-down"
       footer={[
         <Button key="refresh" icon={<ReloadOutlined />} onClick={fetchBackupFiles} disabled={loading}>
           {t('settings.data.webdav.backup.manager.refresh')}

src/renderer/src/components/WebdavModals.tsx

@@ -77,6 +77,7 @@ export function WebdavBackupModal({
       onOk={handleBackup}
       onCancel={handleCancel}
       okButtonProps={{ loading: backuping }}
+      transitionName="animation-move-down"
       centered>
       <Input
         value={customFileName}
@@ -208,6 +209,7 @@ export function WebdavRestoreModal({
       onCancel={handleCancel}
       okButtonProps={{ loading: restoring }}
       width={600}
+      transitionName="animation-move-down"
       centered>
       <div style={{ position: 'relative' }}>
         <Select

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

@@ -141,6 +141,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       afterClose={onClose}
       okText={t('agents.add.title')}
       width={800}
+      transitionName="animation-move-down"
       centered>
       <Form
         ref={formRef}

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

@@ -94,7 +94,13 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
   }
 
   return (
-    <Modal title={t('agents.import.title')} open={open} onCancel={onCancel} footer={null} centered>
+    <Modal
+      title={t('agents.import.title')}
+      open={open}
+      onCancel={onCancel}
+      footer={null}
+      transitionName="animation-move-down"
+      centered>
       <Form form={form} onFinish={onFinish} layout="vertical">
         <Form.Item>
           <Radio.Group value={importType} onChange={(e) => setImportType(e.target.value)}>

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

@@ -39,6 +39,7 @@ const PopupContainer: React.FC = () => {
       onCancel={onCancel}
       afterClose={onClose}
       footer={null}
+      transitionName="animation-move-down"
       centered>
       <Container>
         {agents.length > 0 && (

src/renderer/src/pages/apps/App.tsx

@@ -178,6 +178,7 @@ const App: FC<Props> = ({ app, onClick, size = 60, isLast }) => {
           setFileList([])
         }}
         footer={null}
+        transitionName="animation-move-down"
         centered>
         <Form form={form} onFinish={handleAddCustomApp} layout="vertical">
           <Form.Item

src/renderer/src/pages/home/Inputbar/QuickPhrasesButton.tsx

@@ -163,6 +163,7 @@ const QuickPhrasesButton = ({ ref, setInputValue, resizeTextArea, ToolbarButton,
           setFormData({ title: '', content: '', location: 'global' })
         }}
         width={520}
+        transitionName="animation-move-down"
         centered>
         <Space direction="vertical" style={{ width: '100%' }} size="middle">
           <div>

src/renderer/src/pages/home/Markdown/MermaidPopup.tsx

@@ -199,6 +199,7 @@ const PopupContainer: React.FC<Props> = ({ resolve, chart }) => {
       onCancel={onCancel}
       afterClose={onClose}
       width={1000}
+      transitionName="animation-move-down"
       centered
       footer={[
         <Space key="download-buttons">

src/renderer/src/pages/home/Markdown/PlantUML.tsx

@@ -224,6 +224,7 @@ const PlantUMLPopupCantaier: React.FC<PlantUMLPopupProps> = ({ resolve, diagram
       onCancel={onCancel}
       afterClose={onClose}
       width={1000}
+      transitionName="animation-move-down"
       centered
       footer={[
         <Space key="download-buttons">

src/renderer/src/pages/home/Messages/MessageTools.tsx

@@ -170,6 +170,7 @@ const MessageTools: FC<Props> = ({ blocks }) => {
         footer={null}
         width="80%"
         centered
+        transitionName="animation-move-down"
         styles={{ body: { maxHeight: '80vh', overflow: 'auto' } }}>
         {expandedResponse && (
           <ExpandedResponseContainer style={{ fontFamily, fontSize }}>

src/renderer/src/pages/knowledge/components/KnowledgeSettingsPopup.tsx

@@ -125,6 +125,7 @@ const PopupContainer: React.FC<Props> = ({ base: _base, resolve }) => {
       afterClose={onClose}
       destroyOnClose
       maskClosable={false}
+      transitionName="animation-move-down"
       centered>
       <Form form={form} layout="vertical" className="compact-form">
         <Form.Item

src/renderer/src/pages/settings/AssistantSettings/AssistantRegularPromptsSettings.tsx

@@ -136,6 +136,7 @@ const AssistantRegularPromptsSettings: FC<AssistantRegularPromptsSettingsProps>
         onOk={handleModalOk}
         onCancel={() => setIsModalOpen(false)}
         width={520}
+        transitionName="animation-move-down"
         centered>
         <Space direction="vertical" style={{ width: '100%' }} size="middle">
           <div>

src/renderer/src/pages/settings/ModelSettings/DefaultAssistantSettings.tsx

@@ -305,6 +305,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       onOk={onOk}
       onCancel={onCancel}
       afterClose={onClose}
+      transitionName="animation-move-down"
       centered
       width={800}
       footer={null}>

src/renderer/src/pages/settings/ProviderSettings/AddModelPopup.tsx

@@ -85,6 +85,7 @@ const PopupContainer: React.FC<Props> = ({ title, provider, resolve }) => {
       maskClosable={false}
       afterClose={onClose}
       footer={null}
+      transitionName="animation-move-down"
       centered>
       <Form
         form={form}

src/renderer/src/pages/settings/ProviderSettings/AddProviderPopup.tsx

@@ -152,6 +152,7 @@ const PopupContainer: React.FC<Props> = ({ provider, resolve }) => {
       afterClose={onClose}
       width={360}
       closable={false}
+      transitionName="animation-move-down"
       centered
       title={t('settings.provider.add.title')}
       okButtonProps={{ disabled: buttonDisabled }}>

src/renderer/src/pages/settings/ProviderSettings/ApiCheckPopup.tsx

@@ -141,6 +141,7 @@ const PopupContainer: React.FC<Props> = ({ title, provider, model, apiKeys, type
       onOk={onOk}
       onCancel={onCancel}
       afterClose={onClose}
+      transitionName="animation-move-down"
       centered
       maskClosable={false}
       footer={

src/renderer/src/pages/settings/ProviderSettings/EditModelsPopup.tsx

@@ -232,6 +232,7 @@ const PopupContainer: React.FC<Props> = ({ provider: _provider, resolve }) => {
         content: { padding: 0 },
         header: { padding: '16px 22px 30px 22px' }
       }}
+      transitionName="animation-move-down"
       centered>
       <SearchContainer>
         <TopToolsWrapper>

src/renderer/src/pages/settings/ProviderSettings/HealthCheckPopup.tsx

@@ -132,6 +132,7 @@ const PopupContainer: React.FC<Props> = ({ title, apiKeys, resolve }) => {
       centered
       maskClosable={false}
       width={500}
+      transitionName="animation-move-down"
       footer={
         <Space style={{ display: 'flex', justifyContent: 'space-between' }}>
           <Space>

src/renderer/src/pages/settings/ProviderSettings/ModelEditContent.tsx

@@ -46,6 +46,7 @@ const ModelEditContent: FC<ModelEditContentProps> = ({ model, onUpdateModel, ope
       onCancel={handleClose}
       footer={null}
       maskClosable={false}
+      transitionName="animation-move-down"
       centered
       afterOpenChange={(visible) => {
         if (visible) {

src/renderer/src/pages/settings/ProviderSettings/ModelNotesPopup.tsx

@@ -45,6 +45,7 @@ const PopupContainer: FC<Props> = ({ provider: _provider, resolve }) => {
       onCancel={onCancel}
       afterClose={onClose}
       width={800}
+      transitionName="animation-move-down"
       centered>
       <EditorContainer>
         <MarkdownEditor

src/renderer/src/pages/settings/QuickPhraseSettings/index.tsx

@@ -118,6 +118,7 @@ const QuickPhraseSettings: FC = () => {
         onOk={handleModalOk}
         onCancel={() => setIsModalOpen(false)}
         width={520}
+        transitionName="animation-move-down"
         centered>
         <Space direction="vertical" style={{ width: '100%' }} size="middle">
           <div>

src/renderer/src/pages/settings/WebSearchSettings/AddSubscribePopup.tsx

@@ -62,6 +62,7 @@ const PopupContainer: React.FC<Props> = ({ title, resolve }) => {
       maskClosable={false}
       afterClose={onClose}
       footer={null}
+      transitionName="animation-move-down"
       centered>
       <Form
         form={form}