@salesforcedevs/docs-components 0.0.1-edit → 0.0.1-superscript

package/src/modules/doc/xmlContent/xmlContent.ts

@@ -1,9 +1,7 @@
 /* eslint-disable @lwc/lwc/no-document-query */
 import { api, track } from "lwc";
-import { normalizeBoolean } from "dxUtils/normalizers";
 import { FetchContent } from "./utils";
 import {
-    CoveoAdvancedQueryXMLConfig,
     DocLanguage,
     DocVersion,
     TreeNode,
@@ -11,11 +9,12 @@ import {
     SiderbarFooter,
     HistoryState,
     PageReference,
-    TocMap
+    TocMap,
+    ContentData
 } from "./types";
 import { SearchSyncer } from "docUtils/searchSyncer";
 import { LightningElementWithState } from "dxBaseElements/lightningElementWithState";
-import { logCoveoPageView, oldVersionDocInfo } from "docUtils/utils";
+import { oldVersionDocInfo } from "docUtils/utils";
 import { Breadcrumb, DocPhaseInfo, Language } from "typings/custom";
 import { track as trackGTM } from "dxUtils/analytics";
 import DOMPurify from "dompurify";
@@ -41,11 +40,8 @@ export default class DocXmlContent extends LightningElementWithState<{
     internalLinkClicked: boolean;
 }> {
     @api apiDomain = "https://developer.salesforce.com";
-    @api coveoOrganizationId!: string;
-    @api coveoPublicAccessToken!: string;
-    @api coveoAnalyticsToken!: string;
-    @api coveoSearchHub!: string;
     @api hideFooter = false;
+    @api displayReadingTime = false;
 
     @api
     get allLanguages(): Array<Language> {
@@ -58,21 +54,13 @@ export default class DocXmlContent extends LightningElementWithState<{
         }
     }
 
-    @api
-    get enableCoveo() {
-        return this._enableCoveo;
-    }
-
-    set enableCoveo(value) {
-        this._enableCoveo = normalizeBoolean(value);
-    }
-
     private availableLanguages: Array<DocLanguage> = [];
     @track private availableVersions: Array<DocVersion> = [];
     private contentProvider?: FetchContent;
     private docContent = "";
     private language?: DocLanguage | null = null;
-    private loaded = false;
+    private displayContent = false;
+    private display404 = false;
     private _pageHeader?: Header;
     private pdfUrl = "";
     private tocMap: TocMap = {};
@@ -81,7 +69,6 @@ export default class DocXmlContent extends LightningElementWithState<{
     private docTitle = "";
     private _pathName = "";
     private listenerAttached = false;
-    private _enableCoveo?: boolean = false;
     private sidebarFooterContent: SiderbarFooter = { ...defaultSidebarFooter };
     private latestVersion = false;
     private previewVersion = false;
@@ -90,6 +77,10 @@ export default class DocXmlContent extends LightningElementWithState<{
         return !this.hideFooter;
     }
 
+    private get computedReadingTime(): number | undefined {
+        return this.displayReadingTime ? this.readingTime : undefined;
+    }
+
     private searchSyncer = new SearchSyncer({
         callbacks: {
             onSearchChange: (nextSearchString: string): void => {
@@ -161,6 +152,7 @@ export default class DocXmlContent extends LightningElementWithState<{
 
     @track private pageReference: PageReference = {};
     @track breadcrumbs: Array<Breadcrumb> = [];
+    @track readingTime?: number;
 
     constructor() {
         super();
@@ -185,7 +177,13 @@ export default class DocXmlContent extends LightningElementWithState<{
             this.apiDomain,
             this.allLanguages
         );
-        this.fetchDocument().then(() => (this.loaded = true));
+        this.fetchDocument().then((content: any) => {
+            if (content) {
+                this.displayContent = true;
+            } else {
+                this.display404 = true;
+            }
+        });
         window.addEventListener("popstate", this.handlePopState);
 
         this.searchSyncer.init();
@@ -252,35 +250,13 @@ export default class DocXmlContent extends LightningElementWithState<{
         // Coveo is enabled and the version is greater than  51 (within the latest 3 versions)
         // TODO: we need a better fix for version number check
         return !(
-            this.enableCoveo &&
-            this.coveoOrganizationId &&
-            this.coveoPublicAccessToken &&
-            (!this.version?.releaseVersion ||
-                (this.version?.releaseVersion &&
-                    parseInt(
-                        this.version.releaseVersion.replace("v", ""),
-                        10
-                    ) >= 53))
+            !this.version?.releaseVersion ||
+            (this.version?.releaseVersion &&
+                parseInt(this.version.releaseVersion.replace("v", ""), 10) >=
+                    53)
         );
     }
 
-    private get coveoAdvancedQueryConfig(): CoveoAdvancedQueryXMLConfig {
-        const config: {
-            locale?: string;
-            topicid?: string;
-            version?: string;
-        } = {
-            locale: this.languageId,
-            topicid: this.deliverable
-        };
-
-        if (this.releaseVersionId && this.releaseVersionId !== "noversion") {
-            config.version = this.releaseVersionId;
-        }
-
-        return config;
-    }
-
     private get pageHeader(): Header {
         if (!this._pageHeader) {
             this._pageHeader = document.querySelector("doc-header")!;
@@ -385,7 +361,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         );
         this.pageReference.docId = this.language!.url;
 
-        trackGTM(event.target!, "custEv_ctaLinkClick", {
+        trackGTM(event.target!, "custEv_linkClick", {
             click_text: event.detail,
             element_title: "language selector",
             click_url: `${window.location.origin}${this.pageReferenceToString(
@@ -463,7 +439,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         );
     }
 
-    async fetchDocument(): Promise<void> {
+    async fetchDocument(): Promise<string> {
         this.setState({
             isFetchingDocument: true
         });
@@ -477,7 +453,7 @@ export default class DocXmlContent extends LightningElementWithState<{
             this.setState({
                 isFetchingDocument: false
             });
-            return;
+            return "";
         }
 
         this.docTitle = data.docTitle;
@@ -509,11 +485,11 @@ export default class DocXmlContent extends LightningElementWithState<{
             data.id
         ) {
             try {
-                await this.fetchContent();
+                const moreData = await this.fetchContent();
                 this.setState({
                     isFetchingDocument: false
                 });
-                return;
+                return moreData.content;
             } catch (error) {
                 this.pageReference.contentDocumentId = `${data.id}.htm`;
                 this.pageReference.hash = "";
@@ -523,13 +499,27 @@ export default class DocXmlContent extends LightningElementWithState<{
         }
 
         this.docContent = data.content;
+        this.calculateReadingTime(data.content);
         this.addMetatags();
         this.setState({
             isFetchingDocument: false
         });
+
+        // Track page view when a new document is loaded
+        trackGTM(this.template.host, "doc_page_view", {
+            page_path: this.pageReferenceToString(this.pageReference),
+            doc_id: this.pageReference.docId,
+            content_document_id: this.pageReference.contentDocumentId,
+            deliverable: this.pageReference.deliverable,
+            language: this.language?.id,
+            version: this.version?.id,
+            article_name: this.getArticleName()
+        });
+
+        return data.content;
     }
 
-    async fetchContent(): Promise<void> {
+    async fetchContent(): Promise<ContentData> {
         this.setState({
             isFetchingContent: true
         });
@@ -544,15 +534,31 @@ export default class DocXmlContent extends LightningElementWithState<{
 
         if (data) {
             this.docContent = data.content;
+            this.calculateReadingTime(data.content);
             this.addMetatags();
 
             if (!this.pageReference.hash) {
                 document.body.scrollIntoView();
             }
+
+            // Track page view when new content is loaded (navigation within same document)
+            // Note: breadcrumbs will be built after this in updatePageReference,
+            // but we need to build them here to get article_name
+            this.buildBreadcrumbs();
+            trackGTM(this.template.host, "doc_page_view", {
+                page_path: this.pageReferenceToString(this.pageReference),
+                doc_id: this.pageReference.docId,
+                content_document_id: this.pageReference.contentDocumentId,
+                deliverable: this.pageReference.deliverable,
+                language: this.language?.id,
+                version: this.version?.id,
+                article_name: this.getArticleName()
+            });
         }
         this.setState({
             isFetchingContent: false
         });
+        return data;
     }
 
     updateHeaderAndSidebarFooter(): void {
@@ -579,7 +585,6 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     updateUrl(method = HistoryState.PUSH_STATE): void {
-        logCoveoPageView(this.coveoOrganizationId, this.coveoAnalyticsToken);
         window.history[method](
             {},
             "docs",
@@ -665,6 +670,15 @@ export default class DocXmlContent extends LightningElementWithState<{
         return this.breadcrumbs && this.breadcrumbs.length > 1;
     }
 
+    private getArticleName(): string | undefined {
+        if (!this.breadcrumbs || this.breadcrumbs.length === 0) {
+            return undefined;
+        }
+        // Join all breadcrumb labels with "/" to create article name
+        // e.g., "Tooling API Objects/FieldDefinition"
+        return this.breadcrumbs.map((crumb) => crumb.label).join("/");
+    }
+
     private buildBreadcrumbs(): void {
         const { contentDocumentId } = this.pageReference;
         if (!contentDocumentId) {
@@ -789,4 +803,32 @@ export default class DocXmlContent extends LightningElementWithState<{
     private get showVersionPicker(): boolean {
         return !this.disableVersion;
     }
+
+    private calculateReadingTime(content: string): void {
+        if (!this.displayReadingTime) {
+            this.readingTime = undefined;
+            return;
+        }
+
+        if (!content) {
+            this.readingTime = undefined;
+            return;
+        }
+
+        // Strip HTML tags and get text content
+        const div = document.createElement("div");
+        div.innerHTML = DOMPurify.sanitize(content);
+        const textContent = div.textContent || div.innerText || "";
+
+        // Count words (split by whitespace and filter out empty strings)
+        const wordCount = textContent
+            .trim()
+            .split(/\s+/)
+            .filter((word) => word.length > 0).length;
+
+        // Calculate reading time: (wordCount / 240) + 1, rounded
+        const readingTimeMinutes = Math.round(wordCount / 240 + 1);
+        this.readingTime =
+            readingTimeMinutes > 0 ? readingTimeMinutes : undefined;
+    }
 }

package/src/modules/docHelpers/amfStyle/amfStyle.css

@@ -174,8 +174,6 @@ api-security-documentation {
     --http-code-snippet-container-background-color: rgb(250 250 250);
     --http-code-snippet-container-padding: var(--dx-g-spacing-md);
 
-    /* prism */
-
     /* --code-operator-value-background-color */
 }
 

package/src/modules/docHelpers/contentLayoutStyle/contentLayoutStyle.css

@@ -24,6 +24,19 @@ doc-breadcrumbs {
     margin-bottom: var(--dx-g-spacing-2xl);
 }
 
+.read {
+    display: flex;
+    align-items: center;
+    gap: var(--dx-g-spacing-xs, 8px);
+    margin-bottom: var(--dx-g-spacing-lg, 16px);
+    color: var(--dx-g-gray-30, #3e3e3c);
+    font-size: var(--dx-g-font-size-sm, 14px);
+}
+
+.read svg {
+    flex-shrink: 0;
+}
+
 dx-sidebar,
 dx-sidebar-old {
     --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
@@ -57,6 +70,22 @@ dx-toc {
 .content-body-doc-phase-container {
     flex: 1;
     border-left: 1px solid var(--dx-g-gray-90);
+    min-width: 0;
+}
+
+.doc-phase-wrapper,
+.version-wrapper {
+    /* NOTE: If you are changing z-index value here, ensure it's less than z-index of dx-sidebar in contentLayout.css */
+    z-index: var(--dx-g-z-index-100);
+}
+
+.doc-phase-wrapper {
+    position: sticky;
+}
+
+/* We don't want second component to sticky */
+.version-wrapper {
+    position: static;
 }
 
 .content-body-container {
@@ -74,9 +103,10 @@ dx-toc {
 
 .content-body {
     margin: var(--dx-g-spacing-md) 0 0;
-    max-width: 900px;
+    max-width: 1000px;
     flex: 1;
     width: 0;
+    word-break: break-word;
 }
 
 .is-sticky {
@@ -116,6 +146,7 @@ dx-toc {
 
     .content-body-container {
         padding-right: 0;
+        padding-left: 0;
         overflow-x: auto;
         margin-bottom: calc(var(--dx-g-spacing-5xl) + 4px);
     }

package/src/modules/doc/chat/README.md

@@ -1,179 +0,0 @@
-# Sliding Chat Component (doc-chat)
-
-A self-contained sliding chat component with a floating trigger button that can be embedded in any layout, perfect for customer support, documentation help, or any conversational interface.
-
-## Features
-
-- 🎯 **Sliding Component**: Slides in/out with smooth animations
-- 🔘 **Floating Trigger**: Built-in floating button to open chat (bottom-right corner)
-- 💬 **Real-time Chat**: Interactive messaging with typing indicators
-- 🎨 **Modern Design**: Clean, responsive interface with subtle animations
-- ⚙️ **Configurable**: Customizable title, placeholder, and assistant name
-- 📱 **Mobile Friendly**: Full-width on mobile devices
-- ♿ **Accessible**: ARIA labels and keyboard navigation
-- 🎭 **Storybook Ready**: Multiple story variations for testing
-
-## Basic Usage
-
-The component is completely self-contained with a built-in floating trigger button:
-
-```html
-<doc-chat
-    title="Customer Support"
-    placeholder="How can we help you today?"
-    assistant-name="Support Bot"
-    is-open="false"
-    show-timestamp="true"
-></doc-chat>
-```
-
-That's it! The component will automatically show a floating chat button in the bottom-right corner when closed, and slide in the chat interface when opened.
-
-## Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `title` | String | `"Chat"` | Title displayed in the chat header |
-| `placeholder` | String | `"Type your message..."` | Placeholder text for input field |
-| `assistant-name` | String | `"Assistant"` | Name of the assistant/bot |
-| `disabled` | Boolean | `false` | Disables the chat functionality |
-| `show-timestamp` | Boolean | `false` | Shows timestamps on messages |
-| `is-open` | Boolean | `false` | Controls sidebar visibility |
-
-## Methods
-
-| Method | Description |
-|--------|-------------|
-| `openChat()` | Opens the chat sidebar |
-| `closeChat()` | Closes the chat sidebar |
-
-## Events
-
-| Event | Description | Detail |
-|-------|-------------|--------|
-| `chatopened` | Fired when chat is opened | `{ opened: true }` |
-| `chatclosed` | Fired when chat is closed | `{ closed: true }` |
-
-## Integration Example
-
-### Simple Integration (Self-Contained)
-```html
-<!-- The component includes its own trigger button -->
-<doc-chat
-    title="Customer Support"
-    placeholder="How can we help you today?"
-    assistant-name="Support Bot"
-    show-timestamp="true"
-    is-open="false"
-></doc-chat>
-```
-
-### Advanced Integration (With Custom Triggers)
-```html
-<!-- Optional: Custom trigger button -->
-<button id="chat-trigger" onclick="openSupportChat()">
-    💬 Need Help?
-</button>
-
-<!-- Chat component -->
-<doc-chat
-    id="support-chat"
-    title="Customer Support"
-    placeholder="How can we help you today?"
-    assistant-name="Support Bot"
-    show-timestamp="true"
-    is-open="false"
-></doc-chat>
-```
-
-### JavaScript
-```javascript
-// Optional: Custom trigger function
-function openSupportChat() {
-    const chat = document.getElementById('support-chat');
-    chat.openChat();
-}
-
-// Listen for chat events
-document.getElementById('support-chat').addEventListener('chatclosed', (event) => {
-    console.log('Chat was closed');
-});
-
-document.getElementById('support-chat').addEventListener('chatopened', (event) => {
-    console.log('Chat was opened');
-});
-```
-
-## Styling
-
-The component uses CSS custom properties for easy theming:
-
-```css
-doc-chat {
-    --chat-width: 400px;
-    --chat-z-index: 1000;
-    --chat-transition-duration: 0.3s;
-    --chat-header-bg: #f8f9fa;
-    --chat-primary-color: #0066cc;
-    --chat-border-color: #e0e0e0;
-}
-```
-
-## Responsive Behavior
-
-- **Desktop**: Fixed width component (400px)
-- **Tablet**: Full width component
-- **Mobile**: Full width component
-
-## Accessibility
-
-- ARIA labels for screen readers
-- Keyboard navigation support
-- High contrast mode support
-- Reduced motion preferences respected
-
-## Assistant Response Simulation
-
-The component includes a built-in response simulation system that responds to:
-
-- **Greetings**: "Hello", "Hi" → Friendly greeting
-- **Help requests**: "Help" → Assistance offer
-- **Documentation**: "Documentation", "Docs" → Navigation help
-- **General messages**: Contextual responses
-
-### Replacing with Real API
-
-To integrate with a real chat API, replace the `simulateAssistantResponse` method:
-
-```javascript
-// Replace this method in your extended component
-simulateAssistantResponse(userMessage) {
-    // Call your chat API
-    fetch('/api/chat', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ message: userMessage })
-    })
-    .then(response => response.json())
-    .then(data => {
-        this.addMessage(data.response, 'assistant');
-    });
-}
-```
-
-## Browser Support
-
-- Chrome 80+
-- Firefox 72+
-- Safari 13+
-- Edge 80+
-
-## Examples
-
-Check out the Storybook examples for various use cases:
-
-- **Default**: Basic chat setup
-- **With Timestamps**: Shows message timestamps
-- **Interactive Demo**: Fully functional example
-- **Mobile View**: Mobile device simulation
-- **Chat Trigger Example**: Integration patterns