feat: add confirm ui (#4625)

web/app/components/app/overview/appCard.tsx

@@ -22,6 +22,7 @@ import Tag from '@/app/components/base/tag'
 import Switch from '@/app/components/base/switch'
 import Divider from '@/app/components/base/divider'
 import CopyFeedback from '@/app/components/base/copy-feedback'
+import Confirm from '@/app/components/base/confirm'
 import ShareQRCode from '@/app/components/base/qrcode'
 import SecretKeyButton from '@/app/components/develop/secret-key/secret-key-button'
 import type { AppDetailResponse } from '@/models/app'
@@ -57,6 +58,8 @@ function AppCard({
   const [showEmbedded, setShowEmbedded] = useState(false)
   const [showCustomizeModal, setShowCustomizeModal] = useState(false)
   const [genLoading, setGenLoading] = useState(false)
+  const [showConfirmDelete, setShowConfirmDelete] = useState(false)
+
   const { t } = useTranslation()
 
   const OPERATIONS_MAP = useMemo(() => {
@@ -176,14 +179,28 @@ function AppCard({
                 className={'hover:bg-gray-200'}
               />
               {/* button copy link/ button regenerate */}
+              {showConfirmDelete && (
+                <Confirm
+                  type='warning'
+                  title={t('appOverview.overview.appInfo.regenerate')}
+                  content={''}
+                  isShow={showConfirmDelete}
+                  onClose={() => setShowConfirmDelete(false)}
+                  onConfirm={() => {
+                    onGenCode()
+                    setShowConfirmDelete(false)
+                  }}
+                  onCancel={() => setShowConfirmDelete(false)}
+                />
+              )}
               {isApp && isCurrentWorkspaceManager && (
                 <Tooltip
                   content={t('appOverview.overview.appInfo.regenerate') || ''}
                   selector={`code-generate-${randomString(8)}`}
                 >
                   <div
                     className="w-8 h-8 ml-0.5 cursor-pointer hover:bg-gray-200 rounded-lg"
-                    onClick={onGenCode}
+                    onClick={() => setShowConfirmDelete(true)}
                   >
                     <div
                       className={`w-full h-full ${style.refreshIcon} ${

web/i18n/de-DE/app-overview.ts

@@ -1,142 +1,143 @@
-const translation = {
-  welcome: {
-    firstStepTip: 'Um zu beginnen,',
-    enterKeyTip: 'geben Sie unten Ihren OpenAI-API-Schlüssel ein',
-    getKeyTip: 'Holen Sie sich Ihren API-Schlüssel vom OpenAI-Dashboard',
-    placeholder: 'Ihr OpenAI-API-Schlüssel (z.B. sk-xxxx)',
-  },
-  apiKeyInfo: {
-    cloud: {
-      trial: {
-        title: 'Sie nutzen das Testkontingent von {{providerName}}.',
-        description: 'Das Testkontingent wird für Ihre Testnutzung bereitgestellt. Bevor das Testkontingent aufgebraucht ist, richten Sie bitte Ihren eigenen Modellanbieter ein oder kaufen zusätzliches Kontingent.',
-      },
-      exhausted: {
-        title: 'Ihr Testkontingent wurde aufgebraucht, bitte richten Sie Ihren APIKey ein.',
-        description: 'Ihr Testkontingent ist aufgebraucht. Bitte richten Sie Ihren eigenen Modellanbieter ein oder kaufen zusätzliches Kontingent.',
-      },
-    },
-    selfHost: {
-      title: {
-        row1: 'Um zu beginnen,',
-        row2: 'richten Sie zuerst Ihren Modellanbieter ein.',
-      },
-    },
-    callTimes: 'Aufrufzeiten',
-    usedToken: 'Verwendetes Token',
-    setAPIBtn: 'Zum Einrichten des Modellanbieters gehen',
-    tryCloud: 'Oder probieren Sie die Cloud-Version von Dify mit kostenlosem Angebot aus',
-  },
-  overview: {
-    title: 'Übersicht',
-    appInfo: {
-      explanation: 'Einsatzbereite AI-WebApp',
-      accessibleAddress: 'Öffentliche URL',
-      preview: 'Vorschau',
-      regenerate: 'Regenerieren',
-      preUseReminder: 'Bitte aktivieren Sie WebApp, bevor Sie fortfahren.',
-      settings: {
-        entry: 'Einstellungen',
-        title: 'WebApp-Einstellungen',
-        webName: 'WebApp-Name',
-        webDesc: 'WebApp-Beschreibung',
-        webDescTip: 'Dieser Text wird auf der Clientseite angezeigt und bietet grundlegende Anleitungen zur Verwendung der Anwendung',
-        webDescPlaceholder: 'Geben Sie die Beschreibung der WebApp ein',
-        language: 'Sprache',
-        more: {
-          entry: 'Mehr Einstellungen anzeigen',
-          copyright: 'Urheberrecht',
-          copyRightPlaceholder: 'Geben Sie den Namen des Autors oder der Organisation ein',
-          privacyPolicy: 'Datenschutzrichtlinie',
-          privacyPolicyPlaceholder: 'Geben Sie den Link zur Datenschutzrichtlinie ein',
-          privacyPolicyTip: 'Hilft Besuchern zu verstehen, welche Daten die Anwendung sammelt, siehe Difys <privacyPolicyLink>Datenschutzrichtlinie</privacyPolicyLink>.',
-          customDisclaimer: 'Benutzerdefinierte Haftungsausschluss',
-          customDisclaimerPlaceholder: 'Geben Sie den benutzerdefinierten Haftungsausschluss-Text ein',
-          customDisclaimerTip: 'Der ben userdefinierte Haftungsausschluss-Text wird auf der Clientseite angezeigt und bietet zusätzliche Informationen über die Anwendung',
-        },
-      },
-      embedded: {
-        entry: 'Eingebettet',
-        title: 'Einbetten auf der Website',
-        explanation: 'Wählen Sie die Art und Weise, wie die Chat-App auf Ihrer Website eingebettet wird',
-        iframe: 'Um die Chat-App an einer beliebigen Stelle auf Ihrer Website hinzuzufügen, fügen Sie diesen iframe in Ihren HTML-Code ein.',
-        scripts: 'Um eine Chat-App unten rechts auf Ihrer Website hinzuzufügen, fügen Sie diesen Code in Ihren HTML-Code ein.',
-        chromePlugin: 'Installieren Sie die Dify Chatbot Chrome-Erweiterung',
-        copied: 'Kopiert',
-        copy: 'Kopieren',
-      },
-      qrcode: {
-        title: 'QR-Code zum Teilen',
-        scan: 'Teilen Sie die Anwendung per Scan',
-        download: 'QR-Code herunterladen',
-      },
-      customize: {
-        way: 'Art',
-        entry: 'Anpassen',
-        title: 'AI-WebApp anpassen',
-        explanation: 'Sie können das Frontend der Web-App an Ihre Szenarien und Stilbedürfnisse anpassen.',
-        way1: {
-          name: 'Forken Sie den Client-Code, ändern Sie ihn und deployen Sie ihn auf Vercel (empfohlen)',
-          step1: 'Forken Sie den Client-Code und ändern Sie ihn',
-          step1Tip: 'Klicken Sie hier, um den Quellcode in Ihr GitHub-Konto zu forken und den Code zu ändern',
-          step1Operation: 'Dify-WebClient',
-          step2: 'Deployen auf Vercel',
-          step2Tip: 'Klicken Sie hier, um das Repository in Vercel zu importieren und zu deployen',
-          step2Operation: 'Repository importieren',
-          step3: 'Umgebungsvariablen konfigurieren',
-          step3Tip: 'Fügen Sie die folgenden Umgebungsvariablen in Vercel hinzu',
-        },
-        way2: {
-          name: 'Clientseitigen Code schreiben, um die API aufzurufen, und ihn auf einem Server deployen',
-          operation: 'Dokumentation',
-        },
-      },
-    },
-    apiInfo: {
-      title: 'Backend-Service-API',
-      explanation: 'Einfach in Ihre Anwendung integrierbar',
-      accessibleAddress: 'Service-API-Endpunkt',
-      doc: 'API-Referenz',
-    },
-    status: {
-      running: 'In Betrieb',
-      disable: 'Deaktivieren',
-    },
-  },
-  analysis: {
-    title: 'Analyse',
-    ms: 'ms',
-    tokenPS: 'Token/s',
-    totalMessages: {
-      title: 'Gesamtnachrichten',
-      explanation: 'Tägliche AI-Interaktionszählung; Prompt-Engineering/Debugging ausgenommen.',
-    },
-    activeUsers: {
-      title: 'Aktive Benutzer',
-      explanation: 'Einzigartige Benutzer, die mit AI Q&A führen; Prompt-Engineering/Debugging ausgenommen.',
-    },
-    tokenUsage: {
-      title: 'Token-Verbrauch',
-      explanation: 'Spiegelt den täglichen Token-Verbrauch des Sprachmodells für die Anwendung wider, nützlich für Kostenkontrollzwecke.',
-      consumed: 'Verbraucht',
-    },
-    avgSessionInteractions: {
-      title: 'Durchschn. Sitzungsinteraktionen',
-      explanation: 'Fortlaufende Benutzer-KI-Kommunikationszählung; für konversationsbasierte Apps.',
-    },
-    userSatisfactionRate: {
-      title: 'Benutzerzufriedenheitsrate',
-      explanation: 'Die Anzahl der Likes pro 1.000 Nachrichten. Dies zeigt den Anteil der Antworten an, mit denen die Benutzer sehr zufrieden sind.',
-    },
-    avgResponseTime: {
-      title: 'Durchschn. Antwortzeit',
-      explanation: 'Zeit (ms) für die AI, um zu verarbeiten/antworten; für textbasierte Apps.',
-    },
-    tps: {
-      title: 'Token-Ausgabegeschwindigkeit',
-      explanation: 'Misst die Leistung des LLM. Zählt die Token-Ausgabegeschwindigkeit des LLM vom Beginn der Anfrage bis zum Abschluss der Ausgabe.',
-    },
-  },
-}
-
-export default translation
+const translation = {
+  welcome: {
+    firstStepTip: 'Um zu beginnen,',
+    enterKeyTip: 'geben Sie unten Ihren OpenAI-API-Schlüssel ein',
+    getKeyTip: 'Holen Sie sich Ihren API-Schlüssel vom OpenAI-Dashboard',
+    placeholder: 'Ihr OpenAI-API-Schlüssel (z.B. sk-xxxx)',
+  },
+  apiKeyInfo: {
+    cloud: {
+      trial: {
+        title: 'Sie nutzen das Testkontingent von {{providerName}}.',
+        description: 'Das Testkontingent wird für Ihre Testnutzung bereitgestellt. Bevor das Testkontingent aufgebraucht ist, richten Sie bitte Ihren eigenen Modellanbieter ein oder kaufen zusätzliches Kontingent.',
+      },
+      exhausted: {
+        title: 'Ihr Testkontingent wurde aufgebraucht, bitte richten Sie Ihren APIKey ein.',
+        description: 'Ihr Testkontingent ist aufgebraucht. Bitte richten Sie Ihren eigenen Modellanbieter ein oder kaufen zusätzliches Kontingent.',
+      },
+    },
+    selfHost: {
+      title: {
+        row1: 'Um zu beginnen,',
+        row2: 'richten Sie zuerst Ihren Modellanbieter ein.',
+      },
+    },
+    callTimes: 'Aufrufzeiten',
+    usedToken: 'Verwendetes Token',
+    setAPIBtn: 'Zum Einrichten des Modellanbieters gehen',
+    tryCloud: 'Oder probieren Sie die Cloud-Version von Dify mit kostenlosem Angebot aus',
+  },
+  overview: {
+    title: 'Übersicht',
+    appInfo: {
+      explanation: 'Einsatzbereite AI-WebApp',
+      accessibleAddress: 'Öffentliche URL',
+      preview: 'Vorschau',
+      regenerate: 'Regenerieren',
+      regenerateNotice: 'Möchten Sie die öffentliche URL neu generieren?',
+      preUseReminder: 'Bitte aktivieren Sie WebApp, bevor Sie fortfahren.',
+      settings: {
+        entry: 'Einstellungen',
+        title: 'WebApp-Einstellungen',
+        webName: 'WebApp-Name',
+        webDesc: 'WebApp-Beschreibung',
+        webDescTip: 'Dieser Text wird auf der Clientseite angezeigt und bietet grundlegende Anleitungen zur Verwendung der Anwendung',
+        webDescPlaceholder: 'Geben Sie die Beschreibung der WebApp ein',
+        language: 'Sprache',
+        more: {
+          entry: 'Mehr Einstellungen anzeigen',
+          copyright: 'Urheberrecht',
+          copyRightPlaceholder: 'Geben Sie den Namen des Autors oder der Organisation ein',
+          privacyPolicy: 'Datenschutzrichtlinie',
+          privacyPolicyPlaceholder: 'Geben Sie den Link zur Datenschutzrichtlinie ein',
+          privacyPolicyTip: 'Hilft Besuchern zu verstehen, welche Daten die Anwendung sammelt, siehe Difys <privacyPolicyLink>Datenschutzrichtlinie</privacyPolicyLink>.',
+          customDisclaimer: 'Benutzerdefinierte Haftungsausschluss',
+          customDisclaimerPlaceholder: 'Geben Sie den benutzerdefinierten Haftungsausschluss-Text ein',
+          customDisclaimerTip: 'Der ben userdefinierte Haftungsausschluss-Text wird auf der Clientseite angezeigt und bietet zusätzliche Informationen über die Anwendung',
+        },
+      },
+      embedded: {
+        entry: 'Eingebettet',
+        title: 'Einbetten auf der Website',
+        explanation: 'Wählen Sie die Art und Weise, wie die Chat-App auf Ihrer Website eingebettet wird',
+        iframe: 'Um die Chat-App an einer beliebigen Stelle auf Ihrer Website hinzuzufügen, fügen Sie diesen iframe in Ihren HTML-Code ein.',
+        scripts: 'Um eine Chat-App unten rechts auf Ihrer Website hinzuzufügen, fügen Sie diesen Code in Ihren HTML-Code ein.',
+        chromePlugin: 'Installieren Sie die Dify Chatbot Chrome-Erweiterung',
+        copied: 'Kopiert',
+        copy: 'Kopieren',
+      },
+      qrcode: {
+        title: 'QR-Code zum Teilen',
+        scan: 'Teilen Sie die Anwendung per Scan',
+        download: 'QR-Code herunterladen',
+      },
+      customize: {
+        way: 'Art',
+        entry: 'Anpassen',
+        title: 'AI-WebApp anpassen',
+        explanation: 'Sie können das Frontend der Web-App an Ihre Szenarien und Stilbedürfnisse anpassen.',
+        way1: {
+          name: 'Forken Sie den Client-Code, ändern Sie ihn und deployen Sie ihn auf Vercel (empfohlen)',
+          step1: 'Forken Sie den Client-Code und ändern Sie ihn',
+          step1Tip: 'Klicken Sie hier, um den Quellcode in Ihr GitHub-Konto zu forken und den Code zu ändern',
+          step1Operation: 'Dify-WebClient',
+          step2: 'Deployen auf Vercel',
+          step2Tip: 'Klicken Sie hier, um das Repository in Vercel zu importieren und zu deployen',
+          step2Operation: 'Repository importieren',
+          step3: 'Umgebungsvariablen konfigurieren',
+          step3Tip: 'Fügen Sie die folgenden Umgebungsvariablen in Vercel hinzu',
+        },
+        way2: {
+          name: 'Clientseitigen Code schreiben, um die API aufzurufen, und ihn auf einem Server deployen',
+          operation: 'Dokumentation',
+        },
+      },
+    },
+    apiInfo: {
+      title: 'Backend-Service-API',
+      explanation: 'Einfach in Ihre Anwendung integrierbar',
+      accessibleAddress: 'Service-API-Endpunkt',
+      doc: 'API-Referenz',
+    },
+    status: {
+      running: 'In Betrieb',
+      disable: 'Deaktivieren',
+    },
+  },
+  analysis: {
+    title: 'Analyse',
+    ms: 'ms',
+    tokenPS: 'Token/s',
+    totalMessages: {
+      title: 'Gesamtnachrichten',
+      explanation: 'Tägliche AI-Interaktionszählung; Prompt-Engineering/Debugging ausgenommen.',
+    },
+    activeUsers: {
+      title: 'Aktive Benutzer',
+      explanation: 'Einzigartige Benutzer, die mit AI Q&A führen; Prompt-Engineering/Debugging ausgenommen.',
+    },
+    tokenUsage: {
+      title: 'Token-Verbrauch',
+      explanation: 'Spiegelt den täglichen Token-Verbrauch des Sprachmodells für die Anwendung wider, nützlich für Kostenkontrollzwecke.',
+      consumed: 'Verbraucht',
+    },
+    avgSessionInteractions: {
+      title: 'Durchschn. Sitzungsinteraktionen',
+      explanation: 'Fortlaufende Benutzer-KI-Kommunikationszählung; für konversationsbasierte Apps.',
+    },
+    userSatisfactionRate: {
+      title: 'Benutzerzufriedenheitsrate',
+      explanation: 'Die Anzahl der Likes pro 1.000 Nachrichten. Dies zeigt den Anteil der Antworten an, mit denen die Benutzer sehr zufrieden sind.',
+    },
+    avgResponseTime: {
+      title: 'Durchschn. Antwortzeit',
+      explanation: 'Zeit (ms) für die AI, um zu verarbeiten/antworten; für textbasierte Apps.',
+    },
+    tps: {
+      title: 'Token-Ausgabegeschwindigkeit',
+      explanation: 'Misst die Leistung des LLM. Zählt die Token-Ausgabegeschwindigkeit des LLM vom Beginn der Anfrage bis zum Abschluss der Ausgabe.',
+    },
+  },
+}
+
+export default translation

web/i18n/en-US/app-overview.ts

@@ -34,6 +34,7 @@ const translation = {
       accessibleAddress: 'Public URL',
       preview: 'Preview',
       regenerate: 'Regenerate',
+      regenerateNotice: 'Do you want to regenerate the public URL?',
       preUseReminder: 'Please enable WebApp before continuing.',
       settings: {
         entry: 'Settings',

web/i18n/fr-FR/app-overview.ts

@@ -34,6 +34,7 @@ const translation = {
       accessibleAddress: 'URL publique',
       preview: 'Aperçu',
       regenerate: 'Regénérer',
+      regenerateNotice: 'Voulez-vous régénérer l\'URL publique ?',
       preUseReminder: 'Veuillez activer WebApp avant de continuer.',
       settings: {
         entry: 'Paramètres',

web/i18n/ja-JP/app-overview.ts

@@ -34,6 +34,7 @@ const translation = {
       accessibleAddress: '公開URL',
       preview: 'プレビュー',
       regenerate: '再生成',
+      regenerateNotice: '公開URLを再生成しますか？',
       preUseReminder: '続行する前にWebAppを有効にしてください。',
       settings: {
         entry: '設定',

web/i18n/ko-KR/app-overview.ts

@@ -34,6 +34,7 @@ const translation = {
       accessibleAddress: '공개 URL',
       preview: '미리보기',
       regenerate: '재생성',
+      regenerateNotice: '공개 URL을 재생성하시겠습니까?',
       preUseReminder: '계속하기 전에 웹앱을 활성화하세요.',
       settings: {
         entry: '설정',

web/i18n/pl-PL/app-overview.ts

@@ -37,6 +37,7 @@ const translation = {
       accessibleAddress: 'Publiczny adres URL',
       preview: 'Podgląd',
       regenerate: 'Wygeneruj ponownie',
+      regenerateNotice: 'Czy chcesz wygenerować ponownie publiczny adres URL?',
       preUseReminder: 'Przed kontynuowaniem włącz aplikację WebApp.',
       settings: {
         entry: 'Ustawienia',

web/i18n/pt-BR/app-overview.ts

@@ -34,6 +34,7 @@ const translation = {
       accessibleAddress: 'URL Pública',
       preview: 'Visualização',
       regenerate: 'Regenerar',
+      regenerateNotice: 'Você deseja regenerar a URL pública?',
       preUseReminder: 'Por favor, ative o WebApp antes de continuar.',
       settings: {
         entry: 'Configurações',

web/i18n/ro-RO/app-overview.ts

@@ -34,6 +34,7 @@ const translation = {
       accessibleAddress: 'URL public',
       preview: 'Previzualizare',
       regenerate: 'Regenerare',
+      regenerateNotice: 'Doriți să regenerați URL-ul public?',
       preUseReminder: 'Activați aplicația web înainte de a continua.',
       settings: {
         entry: 'Setări',

web/i18n/uk-UA/app-overview.ts

@@ -34,6 +34,7 @@ const translation = {
       accessibleAddress: 'Публічний URL',
       preview: 'Попередній перегляд',
       regenerate: 'Відновити',
+      regenerateNotice: 'Бажаєте згенерувати новий публічний URL?',
       preUseReminder: 'Будь ласка, активуйте веб-додаток перед продовженням.',
       settings: {
         entry: 'Налаштування',