@salesforcedevs/docs-components 1.28.7-alpha.9 → 1.29.0-aitoolbar-alpha

package/src/modules/doc/banner/banner.ts

@@ -0,0 +1,73 @@
+import { LightningElement, api } from "lwc";
+
+const BANNER_STORAGE_PREFIX = "doc-banner-";
+
+export default class Banner extends LightningElement {
+    @api message = "";
+
+    @api buttonLabel = "";
+
+    @api buttonHref = "";
+
+    @api secondaryLabel = "";
+
+    @api dismissStorageKey = "";
+
+    private _dismissed = false;
+
+    connectedCallback() {
+        if (this.dismissStorageKey && window?.sessionStorage) {
+            this._dismissed =
+                window.sessionStorage.getItem(
+                    `${BANNER_STORAGE_PREFIX}${this.dismissStorageKey}`
+                ) === "true";
+        }
+    }
+
+    renderedCallback() {
+        if (this.message) {
+            const messageElement = this.template.querySelector(".message");
+            if (messageElement) {
+                messageElement.innerHTML = this.message;
+            }
+        }
+    }
+
+    get showBanner(): boolean {
+        return !this._dismissed;
+    }
+
+    get hasPrimaryButton(): boolean {
+        return !!(this.buttonLabel && this.buttonHref);
+    }
+
+    get hasSecondaryAction(): boolean {
+        return !!this.secondaryLabel;
+    }
+
+    private dismissBanner() {
+        if (this.dismissStorageKey && window?.sessionStorage) {
+            window.sessionStorage.setItem(
+                `${BANNER_STORAGE_PREFIX}${this.dismissStorageKey}`,
+                "true"
+            );
+        }
+        this._dismissed = true;
+        this.dispatchEvent(
+            new CustomEvent("dismissbanner", {
+                bubbles: true,
+                composed: true
+            })
+        );
+    }
+
+    @api
+    handleSecondaryClick() {
+        this.dismissBanner();
+    }
+
+    @api
+    handleCloseClick() {
+        this.dismissBanner();
+    }
+}

package/src/modules/doc/contentLayout/contentLayout.html

@@ -1,34 +1,21 @@
 <template>
     <div class="content">
-        <template lwc:if={showDataCloudSidebar}>
-            <dx-sidebar
-                class="is-sticky left-nav-bar"
-                trees={sidebarContent}
-                value={sidebarValue}
-                header={sidebarHeader}
-                ontogglesidebar={onToggleSidebar}
-            >
-                <slot name="sidebar-header" slot="version-picker"></slot>
-            </dx-sidebar>
-        </template>
-        <template lwc:if={showOldSidebar}>
-            <dx-sidebar-old
-                class="is-sticky left-nav-bar"
-                trees={sidebarContent}
-                value={sidebarValue}
-                header={sidebarHeader}
-                ontogglesidebar={onToggleSidebar}
-                languages={languages}
-                language={language}
-                bail-href={bailHref}
-                bail-label={bailLabel}
-                dev-center={devCenter}
-                brand={brand}
-                empty-state-message={emptyStateMessage}
-            >
-                <slot name="sidebar-header" slot="version-picker"></slot>
-            </dx-sidebar-old>
-        </template>
+        <dx-sidebar-old
+            class="is-sticky left-nav-bar"
+            trees={sidebarContent}
+            value={sidebarValue}
+            header={sidebarHeader}
+            ontogglesidebar={onToggleSidebar}
+            languages={languages}
+            language={language}
+            bail-href={bailHref}
+            bail-label={bailLabel}
+            dev-center={devCenter}
+            brand={brand}
+            empty-state-message={emptyStateMessage}
+        >
+            <slot name="sidebar-header" slot="version-picker"></slot>
+        </dx-sidebar-old>
         <div class="content-body-doc-phase-container">
             <div class="doc-phase-wrapper">
                 <slot name="doc-phase"></slot>
@@ -56,7 +43,7 @@
                                 ></path>
                             </g>
                         </svg>
-                        {readingTime} minute read
+                        {readingTimeLabel}
                     </div>
                     <div class="share-below-read" lwc:if={showSocialShare}>
                         <doc-social-share

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -1,12 +1,15 @@
 /* eslint-disable @lwc/lwc/no-document-query */
-import { LightningElement, api, track } from "lwc";
-import { closest } from "kagekiri";
-import { fetchHasResults } from "dxUtils/dataCloudSearch";
+import { LightningElement, api, createElement, track } from "lwc";
+import { closest, querySelector } from "kagekiri";
 import { toJson, normalizeBoolean } from "dxUtils/normalizers";
 import { highlightTerms } from "dxUtils/highlight";
 import { SearchSyncer } from "docUtils/searchSyncer";
 import type { OptionWithLink } from "typings/custom";
 import { buildDocLinkClickHandler } from "dxUtils/analytics";
+import AiToolbar from "doc/aiToolbar";
+
+const AI_TOOLBAR_TAG = "doc-ai-toolbar";
+const PAGE_HEADING_SELECTOR = "h1";
 
 type AnchorMap = { [key: string]: { intersect: boolean; id: string } };
 
@@ -29,6 +32,35 @@ const HIGHLIGHTABLE_SELECTOR = [
 ].join(",");
 export const OBSERVER_ATTACH_WAIT_TIME = 500;
 
+const DEFAULT_READING_TIME_LOCALE = "en-us";
+
+/**
+ * Localized "minute read" templates. `{minutes}` is replaced with the rounded
+ * reading-time value. Only displayed when reading time is greater than 1, so
+ * plural forms are always appropriate. Keys match the locales declared in
+ * sfdocs (and the doc-locale-banner) so that a localized document automatically
+ * gets a localized reading-time label.
+ */
+export const READING_TIME_LABELS: Record<string, string> = {
+    "en-us": "{minutes} minute read",
+    "ja-jp": "読了時間 {minutes} 分",
+    "zh-cn": "阅读时间 {minutes} 分钟",
+    "zh-tw": "閱讀時間 {minutes} 分鐘",
+    "fr-fr": "Lecture de {minutes} minutes",
+    "de-de": "{minutes} Minuten Lesezeit",
+    "it-it": "{minutes} minuti di lettura",
+    "ko-kr": "읽는 데 {minutes}분",
+    "pt-br": "{minutes} minutos de leitura",
+    "es-mx": "{minutes} minutos de lectura",
+    "es-es": "{minutes} minutos de lectura",
+    "ru-ru": "Время чтения: {minutes} мин",
+    "fi-fi": "{minutes} minuutin lukuaika",
+    "da-dk": "{minutes} minutters læsning",
+    "sv-se": "{minutes} minuters läsning",
+    "nl-nl": "{minutes} minuten leestijd",
+    "nb-no": "{minutes} minutters lesetid"
+};
+
 export default class ContentLayout extends LightningElement {
     @api sidebarValue!: string;
     @api sidebarHeader!: string;
@@ -67,6 +99,17 @@ export default class ContentLayout extends LightningElement {
     /** Optional origin URL for the footer MFE (e.g. wp-json endpoint). Passed through to dx-footer. */
     @api origin: string | null = null;
 
+    /** Controls whether the AI toolbar is displayed. */
+    @api
+    get showAiToolbar() {
+        return this._showAiToolbar;
+    }
+    set showAiToolbar(value) {
+        this._showAiToolbar = normalizeBoolean(value);
+        this.updateAiToolbar();
+    }
+    private _showAiToolbar = false;
+
     @api
     get breadcrumbs() {
         return this._breadcrumbs;
@@ -109,24 +152,9 @@ export default class ContentLayout extends LightningElement {
         );
     }
 
-    /** Show Data Cloud sidebar only when not using old sidebar and the page has searchable results. */
-    protected get showDataCloudSidebar(): boolean {
-        return !this.useOldSidebar && this.hasDataCloudResults === true;
-    }
-
-    /** Show legacy sidebar when explicitly requested or when Data Cloud has no results. Don't show until we know (avoids flash). */
-    protected get showOldSidebar(): boolean {
-        return (
-            this.useOldSidebar === true || this.hasDataCloudResults === false
-        );
-    }
-
     @track
     protected _sidebarContent: unknown;
 
-    @track
-    protected hasDataCloudResults: boolean | null = null;
-
     protected _breadcrumbs = null;
 
     @track
@@ -139,6 +167,7 @@ export default class ContentLayout extends LightningElement {
     protected hasRendered: boolean = false;
     protected contentLoaded: boolean = false;
     protected sidebarOpen: boolean = false;
+    protected aiToolbarElement: HTMLElement | null = null;
 
     get shouldDisplayFeedback() {
         return this.contentLoaded && typeof Sprig !== "undefined";
@@ -189,6 +218,19 @@ export default class ContentLayout extends LightningElement {
         return this.readingTime != null && this.readingTime > 1;
     }
 
+    /**
+     * Localized "X minute read" string for the current document language.
+     * Falls back to the default (en-us) template when the language is missing
+     * or has no translation.
+     */
+    get readingTimeLabel(): string {
+        const localeKey = (this.language || "").toLowerCase();
+        const template =
+            READING_TIME_LABELS[localeKey] ||
+            READING_TIME_LABELS[DEFAULT_READING_TIME_LOCALE];
+        return template.replace("{minutes}", String(this.readingTime));
+    }
+
     /** When origin is provided, pass it to the footer; otherwise use dx-footer's default. */
     get effectiveFooterOrigin(): string {
         return (
@@ -197,11 +239,6 @@ export default class ContentLayout extends LightningElement {
     }
 
     connectedCallback(): void {
-        if (!this.useOldSidebar) {
-            fetchHasResults().then((hasResults: boolean) => {
-                this.hasDataCloudResults = hasResults;
-            });
-        }
         const hasParentHighlightListener = closest(
             "doc-xml-content",
             this.template.host
@@ -236,6 +273,8 @@ export default class ContentLayout extends LightningElement {
         window.addEventListener("scroll", this.adjustNavPosition);
         window.addEventListener("resize", this.adjustNavPosition);
 
+        this.updateAiToolbar();
+
         if (!this.hasRendered) {
             this.hasRendered = true;
             this.restoreScroll();
@@ -245,6 +284,45 @@ export default class ContentLayout extends LightningElement {
         }
     }
 
+    /**
+     * Inserts the AI toolbar into the slotted content immediately after the
+     * first H1 found inside this layout.
+     */
+    protected updateAiToolbar(): void {
+        if (!this.showAiToolbar) {
+            this.removeAiToolbar();
+            return;
+        }
+
+        const heading = querySelector(
+            PAGE_HEADING_SELECTOR,
+            this.template.host
+        ) as HTMLElement | null;
+
+        if (!heading) {
+            return;
+        }
+
+        if (this.aiToolbarElement?.previousElementSibling === heading) {
+            return;
+        }
+
+        this.removeAiToolbar();
+
+        const toolbar = createElement(AI_TOOLBAR_TAG, {
+            is: AiToolbar
+        }) as unknown as HTMLElement;
+        heading.parentNode?.insertBefore(toolbar, heading.nextSibling);
+        this.aiToolbarElement = toolbar;
+    }
+
+    protected removeAiToolbar(): void {
+        if (this.aiToolbarElement) {
+            this.aiToolbarElement.remove();
+            this.aiToolbarElement = null;
+        }
+    }
+
     disconnectedCallback(): void {
         this.disconnectObserver();
         window.removeEventListener(
@@ -260,6 +338,8 @@ export default class ContentLayout extends LightningElement {
 
         // Remove link click handler
         this.template.removeEventListener("click", this.handleLinkClick);
+
+        this.removeAiToolbar();
     }
 
     restoreScroll() {
@@ -278,9 +358,7 @@ export default class ContentLayout extends LightningElement {
         We have to account for the global nav changing height due to animations.
     */
     adjustNavPosition = () => {
-        const sidebarEl =
-            this.template.querySelector("dx-sidebar") ||
-            this.template.querySelector("dx-sidebar-old");
+        const sidebarEl = this.template.querySelector("dx-sidebar-old");
         const globalNavEl = document.querySelector(
             "hgf-c360nav"
         ) as HTMLElement;
@@ -504,6 +582,7 @@ export default class ContentLayout extends LightningElement {
 
     onSlotChange(): void {
         this.updateRNB();
+        this.updateAiToolbar();
         this.contentLoaded = true;
     }
 

package/src/modules/doc/header/header.html

@@ -13,7 +13,6 @@
                         onclick={onLinkClick}
                         class="dev-center-content"
                     >
-                        <dx-icon symbol="back"></dx-icon>
                         <dx-icon
                             class="brand-icon"
                             lwc:if={devCenter.icon}

package/src/modules/doc/localeBanner/localeBanner.css

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}

package/src/modules/doc/localeBanner/localeBanner.html

@@ -0,0 +1,9 @@
+<template>
+    <doc-banner
+        message={bannerMessage}
+        button-label={bannerButtonLabel}
+        button-href={bannerButtonHref}
+        secondary-label={bannerSecondaryLabel}
+        dismiss-storage-key={dismissStorageKey}
+    ></doc-banner>
+</template>

package/src/modules/doc/localeBanner/localeBanner.ts

@@ -0,0 +1,195 @@
+import { LightningElement, api } from "lwc";
+
+interface LocaleStrings {
+    messageText: string;
+    linkUrl: string;
+    linkText: string;
+    buttonLabel: string;
+    secondaryLabel: string;
+}
+
+const DEFAULT_LOCALE = "en-us";
+
+const LOCALE_STRINGS: Record<string, LocaleStrings> = {
+    "en-us": {
+        messageText:
+            "This text has been translated using Salesforce machine translation system. More details {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1",
+        linkText: "here",
+        buttonLabel: "Switch to English",
+        secondaryLabel: "Not Now"
+    },
+    "ja-jp": {
+        messageText:
+            "この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細は{link}をご参照ください。",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=ja",
+        linkText: "こちら",
+        buttonLabel: "英語に切り替える",
+        secondaryLabel: "今はしません"
+    },
+    "zh-cn": {
+        messageText:
+            "此文本已使用 Salesforce 机器翻译系统进行翻译。如需了解更多详情，请点击{link}。",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=zh_CN",
+        linkText: "此处",
+        buttonLabel: "切换为英语",
+        secondaryLabel: "而非现在"
+    },
+    "zh-tw": {
+        messageText:
+            "此文已使用 Salesforce 機器翻譯系統翻譯。更多詳細資料請參見{link}。",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=zh_TW",
+        linkText: "此處",
+        buttonLabel: "切換至英文",
+        secondaryLabel: "不要現在"
+    },
+    "fr-fr": {
+        messageText:
+            "Ce texte a été traduit à l’aide du système de traduction automatique de Salesforce. Plus de détails, consultez {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=fr",
+        linkText: "cette page",
+        buttonLabel: "Basculer vers la page en anglais",
+        secondaryLabel: "Pas maintenant"
+    },
+    "de-de": {
+        messageText:
+            "Dieser Text wurde mit dem maschinellen Übersetzungssystem von Salesforce übersetzt. Weitere Details finden Sie {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=de",
+        linkText: "hier",
+        buttonLabel: "Zu Englisch wechseln",
+        secondaryLabel: "Nicht jetzt"
+    },
+    "it-it": {
+        messageText:
+            "Questo testo è stato tradotto utilizzando il sistema di traduzione automatica di Salesforce. Ulteriori dettagli sono disponibili {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=it",
+        linkText: "qui",
+        buttonLabel: "Passa all'inglese",
+        secondaryLabel: "Non ora"
+    },
+    "ko-kr": {
+        messageText:
+            "본 텍스트는 Salesforce 기계 번역 시스템으로 번역되었습니다. 자세한 내용은 {link}를 참조하세요.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=ko",
+        linkText: "여기",
+        buttonLabel: "영어로 전환",
+        secondaryLabel: "지금 안 함"
+    },
+    "pt-br": {
+        messageText:
+            "Este texto foi traduzido pelo sistema de tradução automática da Salesforce. Mais detalhes {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=pt_BR",
+        linkText: "aqui",
+        buttonLabel: "Alternar para inglês",
+        secondaryLabel: "Agora não"
+    },
+    "es-mx": {
+        messageText:
+            "Este texto se tradujo con el sistema de traducción automática de Salesforce. Obtenga más detalles {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=es_MX",
+        linkText: "aquí",
+        buttonLabel: "Cambiar a inglés",
+        secondaryLabel: "Ahora no"
+    },
+    "es-es": {
+        messageText:
+            "Este texto se ha traducido utilizando un sistema de traducción automática de Salesforce. Más información {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=es",
+        linkText: "aquí",
+        buttonLabel: "Cambiar a inglés",
+        secondaryLabel: "Ahora no"
+    },
+    "ru-ru": {
+        messageText:
+            "Данный текст был переведен при помощи системы машинного перевода Salesforce. Дополнительные сведения см. {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=ru",
+        linkText: "здесь",
+        buttonLabel: "Переключить на английский",
+        secondaryLabel: "Не сейчас"
+    },
+    "fi-fi": {
+        messageText:
+            "Tämä teksti on käännetty Salesforcen konekäännösjärjestelmän avulla. Katso lisätietoja {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=fi",
+        linkText: "täältä",
+        buttonLabel: "Vaihda englantiin",
+        secondaryLabel: "Ei nyt"
+    },
+    "da-dk": {
+        messageText:
+            "Denne tekst er oversat ved hjælp af Salesforce-maskinoversættelsessystem. Du finder flere detaljer {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=da",
+        linkText: "her",
+        buttonLabel: "Skift til engelsk",
+        secondaryLabel: "Ikke nu"
+    },
+    "sv-se": {
+        messageText:
+            "Den här texten har översatts med Salesforces maskinöversättningssystem. Mer information {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=sv",
+        linkText: "här",
+        buttonLabel: "Byt till engelska",
+        secondaryLabel: "Inte nu"
+    },
+    "nl-nl": {
+        messageText:
+            "Deze tekst werd vertaald aan de hand van het systeem voor automatische vertaling van Salesforce. U vindt {link} meer details.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=nl_NL",
+        linkText: "hier",
+        buttonLabel: "Overschakelen op Engels",
+        secondaryLabel: "Niet nu"
+    },
+    "nb-no": {
+        messageText:
+            "Denne teksten er oversatt med Salesforce maskinoversettingssystem. Flere detaljer {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=no",
+        linkText: "her",
+        buttonLabel: "Bytt til engelsk",
+        secondaryLabel: "Ikke nå"
+    }
+};
+
+export default class LocaleBanner extends LightningElement {
+    @api locale = DEFAULT_LOCALE;
+    @api targetHref = "";
+    @api dismissStorageKey = "";
+
+    get localeData(): LocaleStrings {
+        return LOCALE_STRINGS[this.locale] || LOCALE_STRINGS[DEFAULT_LOCALE];
+    }
+
+    get bannerMessage(): string {
+        const data = this.localeData;
+        const link = `<a href="${data.linkUrl}">${data.linkText}</a>`;
+        return data.messageText.replace("{link}", link);
+    }
+
+    get bannerButtonLabel(): string {
+        return this.localeData.buttonLabel;
+    }
+
+    get bannerButtonHref(): string {
+        return this.targetHref;
+    }
+
+    get bannerSecondaryLabel(): string {
+        return this.localeData.secondaryLabel;
+    }
+}

package/src/modules/doc/lwcContentLayout/lwcContentLayout.html

@@ -1,7 +1,6 @@
 <template>
     <div class="content">
         <dx-sidebar-old
-            lwc:if={useOldSidebar}
             class="is-sticky left-nav-bar"
             trees={sidebarContent}
             value={sidebarValue}
@@ -16,16 +15,6 @@
         >
             <slot name="sidebar-header" slot="version-picker"></slot>
         </dx-sidebar-old>
-        <dx-sidebar
-            lwc:else
-            class="is-sticky left-nav-bar"
-            trees={sidebarContent}
-            value={sidebarValue}
-            header={sidebarHeader}
-            ontogglesidebar={onToggleSidebar}
-        >
-            <slot name="sidebar-header" slot="version-picker"></slot>
-        </dx-sidebar>
         <div class="content-body-doc-phase-container">
             <div class="doc-phase-wrapper">
                 <slot name="doc-phase"></slot>
@@ -52,7 +41,7 @@
                                 ></path>
                             </g>
                         </svg>
-                        {readingTime} minute read
+                        {readingTimeLabel}
                     </div>
                     <slot onslotchange={onSlotChange}></slot>
                     <doc-sprig-survey
@@ -68,7 +57,10 @@
                 </div>
             </div>
             <div lwc:if={showFooter} class="footer-container">
-                <dx-footer variant="no-signup"></dx-footer>
+                <dx-footer
+                    variant="no-signup"
+                    mfe-config-origin={effectiveFooterOrigin}
+                ></dx-footer>
             </div>
         </div>
     </div>

package/src/modules/doc/lwcContentLayout/lwcContentLayout.ts

@@ -1,3 +1,4 @@
+import { api } from "lwc";
 import ContentLayout from "doc/contentLayout";
 import cx from "classnames";
 
@@ -15,6 +16,16 @@ export default class LwcContentLayout extends ContentLayout {
     private allTabsCache: any[] | null = null;
     private mainSlotCache: any = null;
 
+    /** Optional origin URL for the footer MFE (e.g. wp-json endpoint). Passed through to dx-footer. */
+    @api origin: string | null = null;
+
+    /** When origin is provided, pass it to the footer; otherwise use dx-footer's default. */
+    get effectiveFooterOrigin(): string {
+        return (
+            this.origin ?? `${window.location.origin}/developer/en-us/wp-json`
+        );
+    }
+
     private setRNBByTab() {
         const tabPanelListItem = this.getTabPanelList();
         this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB;