SITES-27490: V2 alert

.localizationManifest.json

@@ -1,9 +1,15 @@
 {
   "metadata": {
-    "total": 7,
+    "total": 8,
     "packageName": "app"
   },
   "components": {
+    "AdditionalContextInput.l10n": {
+      "__default__": "web-src/src/components/__localization__/AdditionalContextInput.l10n/en_us.json",
+      "__destination__": "web-src/src/components/__localization__/AdditionalContextInput.l10n",
+      "__source__": "web-src/src/components/__localization__/AdditionalContextInput.l10n/jl10n.json",
+      "__import__": "web-src/src/components/__localization__/AdditionalContextInput.l10n/index.js"
+    },
     "App.l10n": {
       "__default__": "web-src/src/components/__localization__/App.l10n/en_us.json",
       "__destination__": "web-src/src/components/__localization__/App.l10n",

web-src/src/components/App.l10n.js

@@ -12,6 +12,16 @@
 
 export const intlMessages = {
   app: {
+    newVersionAlert: {
+      defaultMessage: 'We have a new version of Generate Variations in beta! You can access as a bookmarklet {bookmarkletLink} or enable it in Universal Editor {universalEditorLink}.',
+      id: 'app.newVersionAlert',
+      description: 'Alert banner for new improved version of Generate Variations',
+    },
+    newVersionAlertCta: {
+      defaultMessage: 'here',
+      id: 'app.newVersionAlertCta',
+      description: 'CTA for new improved version of Generate Variations',
+    },
     name: {
       defaultMessage: 'Generate Variations',
       id: 'app.name',

web-src/src/components/PromptTemplateLibraryPanel.js

@@ -9,18 +9,79 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import { Grid, Heading, ProgressCircle } from '@adobe/react-spectrum';
+import {
+  Grid, Heading, ProgressCircle, Text,
+  Link,
+  Button,
+} from '@adobe/react-spectrum';
 
-import React, { Suspense } from 'react';
+import React, { Suspense, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useIntl } from 'react-intl';
-
+import { css } from '@emotion/css';
+import Close from '@spectrum-icons/workflow/Close';
 import { intlMessages } from './App.l10n.js';
 import { WelcomeBanner } from './WelcomeBanner.js';
 import { PromptTemplatesView } from './PromptTemplatesView.js';
 
+const styles = {
+  newVersionAlert: css`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    color: white;
+    background-color: #0569E3;
+    margin-bottom: 14px;
+    padding: 8px 64px 8px 16px;
+    border-radius: 4px;
+    min-height: 48px;
+
+    &.hidden {
+      display: none;
+    }
+  `,
+  newVersionAlertCta: css`
+    text-decoration: underline;
+  `,
+  newVersionAlertCloseContainer: css`
+    display: flex;
+    align-items: center;
+    border-inline-start-color: #fff3;
+    border-inline-start-style: solid;
+    border-inline-start-width: 1px;
+    padding-inline-start: 8px;
+    margin-inline-start: 8px;
+    position: absolute;
+    right: 8px;
+    min-height: 32px;
+    height: 80%;
+
+    @media (max-width: 1190px) {
+      align-items: flex-start;
+    }
+  `,
+  newVersionAlertClose: css`
+    margin: 2px;
+    border: none;
+    border-radius: 100%;
+
+    & svg {
+      width: 12px;
+      height: 12px;
+      padding: 4px 5px;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  `,
+};
+
 export function PromptTemplateLibraryPanel({ props }) {
   const { formatMessage } = useIntl();
+  const [isNewVersionAlertOpen, setIsNewVersionAlertOpen] = useState(true);
 
   return (
     <Grid
@@ -33,13 +94,24 @@ export function PromptTemplateLibraryPanel({ props }) {
       }}>
 
       <div tabIndex={0}>
+        <div className={`${styles.newVersionAlert} ${isNewVersionAlertOpen ? '' : 'hidden'}`}>
+          <Text>{formatMessage(intlMessages.app.newVersionAlert, {
+            bookmarkletLink: <Link variant='overBackground' UNSAFE_className={styles.newVersionAlertCta} href='https://experience.adobe.com/solutions/aem-sites-genai-aem-genai-variations-mfe/static-assets/resources/early-access.html' target='_blank' rel='noreferrer'>{formatMessage(intlMessages.app.newVersionAlertCta)}</Link>,
+            universalEditorLink: <Link variant='overBackground' UNSAFE_className={styles.newVersionAlertCta} href='https://experience.adobe.com/#/@sitesinternal/aem/extension-manager/universal-editor' target='_blank' rel='noreferrer'>{formatMessage(intlMessages.app.newVersionAlertCta)}</Link>,
+          })}</Text>
+          <div className={styles.newVersionAlertCloseContainer}>
+            <Button variant='secondary' staticColor='white' UNSAFE_className={styles.newVersionAlertClose} onPress={() => { setIsNewVersionAlertOpen(false); }}>
+              <Close />
+            </Button>
+          </div>
+        </div>
         <WelcomeBanner />
 
         <Heading level={3} alignSelf={'start'}>{formatMessage(intlMessages.app.promptTemplatesLibraryPanelLabel)}</Heading>
 
         <ErrorBoundary fallback={<div>Something went wrong</div>}>
           <Suspense fallback={<ProgressCircle isIndeterminate />}>
-            <PromptTemplatesView/>
+            <PromptTemplatesView />
           </Suspense>
         </ErrorBoundary>
       </div>

web-src/src/components/__localization__/AdditionalContextInput.l10n/de_de.json

@@ -0,0 +1,8 @@
+{
+  "contentFetchFailedToastMessage": "Inhalt konnte nicht von URL abgerufen werden: {url}",
+  "contentFetchedSuccessfullyToastMessage": "Inhalt erfolgreich abgerufen",
+  "domainKnowledgeUrlContextualHelpTitle": "URL",
+  "domainKnowledgeUrlDescription": "Geben Sie eine URL ein, unter der das System den Inhalt abschlüsseln soll, um weitere Hintergrundinformationen oder spezifische Details zur Erstellung des Inhalts anzugeben. Max. 1500 Zeichen.",
+  "domainKnowledgeUrlLabel": "URL für Domänenwissen",
+  "fetchButtonLabel": "Abrufen"
+}

web-src/src/components/__localization__/AdditionalContextInput.l10n/en_us.json

@@ -0,0 +1,8 @@
+{
+  "contentFetchFailedToastMessage": "Failed to fetch content from URL: {url}",
+  "contentFetchedSuccessfullyToastMessage": "Content fetched successfully",
+  "domainKnowledgeUrlContextualHelpTitle": "URL",
+  "domainKnowledgeUrlDescription": "Enter a URL for the system to scrape content to provide more background information or specific details to guide the creation of the content. Max 1500 characters.",
+  "domainKnowledgeUrlLabel": "URL for Domain Knowledge",
+  "fetchButtonLabel": "Fetch"
+}

web-src/src/components/__localization__/AdditionalContextInput.l10n/es_es.json

@@ -0,0 +1,8 @@
+{
+  "contentFetchFailedToastMessage": "Error al recuperar el contenido de la dirección URL: {url}",
+  "contentFetchedSuccessfullyToastMessage": "Contenido recuperado correctamente",
+  "domainKnowledgeUrlContextualHelpTitle": "URL",
+  "domainKnowledgeUrlDescription": "Introduzca una URL para que el sistema analice el contenido para proporcionar más información básica o detalles específicos que guíen la creación del contenido. Máx. 1500 caracteres.",
+  "domainKnowledgeUrlLabel": "URL para conocimiento del dominio",
+  "fetchButtonLabel": "Buscar"
+}

web-src/src/components/__localization__/AdditionalContextInput.l10n/fr_fr.json

@@ -0,0 +1,8 @@
+{
+  "contentFetchFailedToastMessage": "Impossible de récupérer le contenu de l'URL : {url}",
+  "contentFetchedSuccessfullyToastMessage": "Contenu récupéré avec succès",
+  "domainKnowledgeUrlContextualHelpTitle": "URL",
+  "domainKnowledgeUrlDescription": "Entrez une URL pour que le système extraie le contenu afin de fournir des informations plus générales ou des détails spécifiques pour guider la création du contenu. 1 500 caractères maximum.",
+  "domainKnowledgeUrlLabel": "URL des connaissances du domaine",
+  "fetchButtonLabel": "Récupérer"
+}

web-src/src/components/__localization__/AdditionalContextInput.l10n/index.js

@@ -0,0 +1,12 @@
+/* istanbul ignore file */
+/* eslint camelcase: 0 */
+export { default as en_US } from './en_us.json';
+export { default as fr_FR } from './fr_fr.json';
+export { default as de_DE } from './de_de.json';
+export { default as ja_JP } from './ja_jp.json';
+export { default as it_IT } from './it_it.json';
+export { default as es_ES } from './es_es.json';
+export { default as pt_BR } from './pt_br.json';
+export { default as zh_CN } from './zh_cn.json';
+export { default as zh_TW } from './zh_tw.json';
+export { default as ko_KR } from './ko_kr.json';

web-src/src/components/__localization__/AdditionalContextInput.l10n/it_it.json

@@ -0,0 +1,8 @@
+{
+  "contentFetchFailedToastMessage": "Impossibile recuperare il contenuto dall'URL: {url}",
+  "contentFetchedSuccessfullyToastMessage": "Contenuto recuperato correttamente",
+  "domainKnowledgeUrlContextualHelpTitle": "URL",
+  "domainKnowledgeUrlDescription": "Inserisci un URL per il sistema in cui raccogliere i contenuti per fornire ulteriori informazioni di base o dettagli specifici che guidino la creazione dei contenuti. Max. 1500 caratteri.",
+  "domainKnowledgeUrlLabel": "URL per conoscenza dominio",
+  "fetchButtonLabel": "Fetch"
+}

web-src/src/components/__localization__/AdditionalContextInput.l10n/ja_jp.json

@@ -0,0 +1,8 @@
+{
+  "contentFetchFailedToastMessage": "URL {url} からコンテンツを取得できませんでした",
+  "contentFetchedSuccessfullyToastMessage": "コンテンツを取得しました",
+  "domainKnowledgeUrlContextualHelpTitle": "URL",
+  "domainKnowledgeUrlDescription": "コンテンツをスクレープして、より多くの背景情報やコンテンツ作成のガイドとなる具体的な詳細を提供するためのシステムの URL を入力します。最大 1500 文字。",
+  "domainKnowledgeUrlLabel": "ドメイン知識の URL",
+  "fetchButtonLabel": "取得"
+}

web-src/src/components/__localization__/AdditionalContextInput.l10n/jl10n.json

@@ -0,0 +1,26 @@
+{
+  "contentFetchFailedToastMessage": {
+    "__value__": "Failed to fetch content from URL: {url}",
+    "__desc__": "Toast message displayed when content fetch fails"
+  },
+  "contentFetchedSuccessfullyToastMessage": {
+    "__value__": "Content fetched successfully",
+    "__desc__": "Toast message displayed when content is fetched successfully"
+  },
+  "domainKnowledgeUrlContextualHelpTitle": {
+    "__value__": "URL",
+    "__desc__": "Title for Domain Knowledge URL input"
+  },
+  "domainKnowledgeUrlDescription": {
+    "__value__": "Enter a URL for the system to scrape content to provide more background information or specific details to guide the creation of the content. Max 1500 characters.",
+    "__desc__": "Description for Domain Knowledge URL input"
+  },
+  "domainKnowledgeUrlLabel": {
+    "__value__": "URL for Domain Knowledge",
+    "__desc__": "Label for Domain Knowledge URL input"
+  },
+  "fetchButtonLabel": {
+    "__value__": "Fetch",
+    "__desc__": "Label for Fetch button"
+  }
+}

web-src/src/components/__localization__/AdditionalContextInput.l10n/ko_kr.json

@@ -0,0 +1,8 @@
+{
+  "contentFetchFailedToastMessage": "URL에서 콘텐츠를 가져오지 못함: {url}",
+  "contentFetchedSuccessfullyToastMessage": "컨텐츠를 성공적으로 가져왔습니다.",
+  "domainKnowledgeUrlContextualHelpTitle": "URL",
+  "domainKnowledgeUrlDescription": "시스템에서 콘텐츠를 스크랩하여 더 많은 배경 정보나 콘텐츠 생성을 안내하는 특정 세부 정보를 제공하는 URL을 입력합니다. 최대 1500자.",
+  "domainKnowledgeUrlLabel": "도메인 정보에 대한 URL",
+  "fetchButtonLabel": "가져오기"
+}

web-src/src/components/__localization__/AdditionalContextInput.l10n/pt_br.json

@@ -0,0 +1,8 @@
+{
+  "contentFetchFailedToastMessage": "Falha ao buscar conteúdo da URL: {url}",
+  "contentFetchedSuccessfullyToastMessage": "Conteúdo buscado com sucesso",
+  "domainKnowledgeUrlContextualHelpTitle": "URL",
+  "domainKnowledgeUrlDescription": "Insira uma URL para o sistema remover conteúdo para fornecer mais informações de plano de fundo ou detalhes específicos para orientar a criação do conteúdo. Máximo de 1500 caracteres.",
+  "domainKnowledgeUrlLabel": "URL para conhecimento de domínio",
+  "fetchButtonLabel": "Buscar"
+}

web-src/src/components/__localization__/AdditionalContextInput.l10n/zh_cn.json

@@ -0,0 +1,8 @@
+{
+  "contentFetchFailedToastMessage": "无法从URL获取内容： {url}",
+  "contentFetchedSuccessfullyToastMessage": "已成功获取内容",
+  "domainKnowledgeUrlContextualHelpTitle": "URL",
+  "domainKnowledgeUrlDescription": "输入系统用来清除内容的URL，以提供更多背景信息或特定详细信息来指导内容的创建。最多1500个字符。",
+  "domainKnowledgeUrlLabel": "域知识的URL",
+  "fetchButtonLabel": "获取"
+}

web-src/src/components/__localization__/AdditionalContextInput.l10n/zh_tw.json

@@ -0,0 +1,8 @@
+{
+  "contentFetchFailedToastMessage": "無法從URL {url}擷取內容",
+  "contentFetchedSuccessfullyToastMessage": "已成功擷取內容",
+  "domainKnowledgeUrlContextualHelpTitle": "URL",
+  "domainKnowledgeUrlDescription": "輸入系統的URL以清除內容，提供更多背景資訊或具體細節來指導內容的建立。最多1500個字元。",
+  "domainKnowledgeUrlLabel": "網域知識的URL",
+  "fetchButtonLabel": "擷取"
+}

web-src/src/components/__localization__/App.l10n/de_de.json

@@ -1,29 +1,31 @@
 {
-  "app.accessBoundaryNoAccessMessage": "Entschuldigung, es scheint, dass Sie nicht berechtigt sind, diese Funktion zu verwenden.{newLine}Versuchen Sie, eine andere Organisation auszuwählen, oder wenden Sie sich an Ihren Administrator, um Zugriff anzufordern.",
+  "app.accessBoundaryNoAccessMessage": "Leider sind Sie offenbar nicht berechtigt, diese Funktion zu verwenden.{newLine}Wählen Sie eine andere Organisation aus oder wenden Sie sich an Ihre Admins, um Zugriff anzufordern.",
   "app.cancelActionLabel": "Abbrechen",
   "app.consentDialogAgreeButtonLabel": "Zustimmen",
   "app.consentDialogCancelButtonLabel": "Abbrechen",
   "app.consentDialogContent": "<p>Mit der generativen KI-Technologie können Sie auf ganz neue Weise kreativ sein.</p><p>Indem Sie auf „Zustimmen“ klicken, stimmen Sie den {legalTermsLink} sowie Folgendem zu:</p><ul><li>Alle Prompts sowie Kontext- oder Zusatzinformationen oder andere Eingaben, die Sie für diese Funktion bereitstellen, (a) müssen mit einem bestimmten Kontext verknüpft sein, zu dem Ihre Branding-Materialien, Website-Inhalte, Daten, Schemata für solche Daten, Vorlagen oder andere vertrauenswürdige Dokumente gehören können, und (b) dürfen keine personenbezogenen Informationen enthalten (personenbezogene Informationen umfassen alles, was mit einer bestimmten Person in Verbindung gebracht werden kann).</li><li>Sie sollten jede Ausgabe aus dieser Funktion auf ihre Genauigkeit überprüfen und sicherstellen, dass sie für Ihren Anwendungsfall geeignet ist.</li></ul>",
-  "app.consentDialogHeading": "Generative KI in Adobe-Apps",
+  "app.consentDialogHeading": "Generative KI in Adobe-Anwendungen",
   "app.deleteActionLabel": "Löschen",
   "app.deleteActionTitle": "Löschen",
   "app.deletePromptTemplateButtonLabel": "Löschen",
   "app.deletePromptTemplateFailedToast": "Prompt-Vorlage konnte nicht gelöscht werden",
   "app.deletePromptTemplateQuestion": "Möchten Sie dieses Prompt wirklich löschen?",
   "app.description": "Erstellen Sie schnell hochwertige Inhalte und messen Sie diese dann mit Experimenten oder veröffentlichen Sie sie auf Ihrer Website.",
-  "app.errorOccurredWhileGeneratingResults": "Fehler beim Generieren der Ergebnisse",
-  "app.errorOccurredWhileSendingFeedback": "Fehler beim Senden von Feedback",
-  "app.genAIContentManagementPolicyFilteredResults": "Die Antwort wurde aufgrund der Eingabeaufforderung gefiltert, die die Inhaltsverwaltungsrichtlinie von Generative AI auslöste. Ändern Sie die Eingabeaufforderung und versuchen Sie es erneut.",
+  "app.errorOccurredWhileGeneratingResults": "Beim Generieren der Ergebnisse ist ein Fehler aufgetreten",
+  "app.errorOccurredWhileSendingFeedback": "Beim Senden von Feedback ist ein Fehler aufgetreten",
+  "app.genAIContentManagementPolicyFilteredResults": "Die Antwort wurde gefiltert, da der Prompt die Content-Management-Richtlinie der generativen KI ausgelöst hat. Ändern Sie den Prompt und versuchen Sie es erneut.",
   "app.invalidAccessToken": "Das Zugriffs-Token ist ungültig",
-  "app.missingAccessToken": "Das Zugriffs-Token wurde nicht bereitgestellt.",
+  "app.missingAccessToken": "Das Zugriffs-Token wurde nicht bereitgestellt",
   "app.name": "Varianten erstellen",
+  "app.newVersionAlert": "Wir haben eine neue Version von Generate Variations in der Beta-Version! Sie können als Lesezeichen auf {bookmarkletLink} or enable it in Universal Editor {universalEditorLink} zugreifen.",
+  "app.newVersionAlertCta": "hier",
   "app.noAccessDialogContent": "Sie haben keinen Zugriff auf dieses Produkt",
   "app.noAccessDialogHeading": "Zugriff verweigert",
   "app.noAccessMessage": "Um <strong>Varianten generieren</strong> zu verwenden, müssen Sie den Benutzerrichtlinien für generative KI zustimmen.{newLine}Aktualisieren Sie diese Seite, um <strong>zuzustimmen</strong>.",
   "app.noProductAccess": "Profil hat keinen Zugriff auf das Produkt",
   "app.profileFetchFailed": "Profil konnte nicht abgerufen werden",
   "app.promptTemplatesLibraryPanelLabel": "Prompt-Vorlagen",
-  "app.rateLimitExceeded": "Ratenlimit der generativen KI überschritten. Bitte warten Sie eine Minute und versuchen Sie es erneut.",
-  "app.requestTimeout": "Zeitüberschreitung bei Anfrage von Generative AI. Versuchen Sie es erneut, indem Sie die Anzahl der Varianten verringern.",
-  "app.unexpectedErrorEncountered": "Entschuldigung! Ein unerwarteter Fehler ist aufgetreten. Versuchen Sie es später erneut."
+  "app.rateLimitExceeded": "Ratenbegrenzung der generativen KI überschritten. Bitte warten Sie eine Minute und versuchen Sie es erneut.",
+  "app.requestTimeout": "Zeitüberschreitung bei der Anfrage der generativen KI. Versuchen Sie es erneut, indem Sie die Anzahl der Varianten verringern.",
+  "app.unexpectedErrorEncountered": "Leider ist ein unerwarteter Fehler aufgetreten. Bitte versuchen Sie es später erneut."
 }

web-src/src/components/__localization__/App.l10n/en_us.json

@@ -17,6 +17,8 @@
   "app.invalidAccessToken": "The access token is not valid",
   "app.missingAccessToken": "The access token is not provided",
   "app.name": "Generate Variations",
+  "app.newVersionAlert": "We have a new version of Generate Variations in beta! You can access as a bookmarklet {bookmarkletLink} or enable it in Universal Editor {universalEditorLink}.",
+  "app.newVersionAlertCta": "here",
   "app.noAccessDialogContent": "You have no access to this product",
   "app.noAccessDialogHeading": "Access Denied",
   "app.noAccessMessage": "To use <strong>Generate Variations</strong> you must agree to the Generative AI User Guidelines.{newLine}Refresh this page to <strong>Agree</strong>.",