[8.9] ESRE landing page panels and links (#159851)

## Summary This PR follows #159809 and adds content to the expandable accordion sections. The 1st accorion (ELSER) is open by default on page visit. We're also adding links in the sections, which point to documentation or to internal Kibana pages (e.g. Behavioral Analytics, Trained Models). New entries are being added to the doc links files. ![ESRE_panels](a50c5705-0192-4a86-8444-9d4b1a9859b2) ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Liam Thompson <32779855+leemthompo@users.noreply.github.com>
2025-04-23 09:19:04 -04:00 · 2023-06-20 12:47:00 -04:00 · 2023-06-20 12:47:00 -04:00 · 2422c017c7
commit 2422c017c7
parent f233933562
13 changed files with 743 additions and 25 deletions
--- a/packages/kbn-doc-links/src/get_doc_links.ts
+++ b/packages/kbn-doc-links/src/get_doc_links.ts
@ -29,6 +29,7 @@ export const getDocLinks = ({ kibanaBranch }: GetDocLinkOptions): DocLinks => {
  const SECURITY_SOLUTION_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/security/${DOC_LINK_VERSION}/`;
  const APP_SEARCH_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/app-search/${DOC_LINK_VERSION}/`;
  const ENTERPRISE_SEARCH_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/enterprise-search/${DOC_LINK_VERSION}/`;
+  const ESRE_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/esre/${DOC_LINK_VERSION}/`;
  const WORKPLACE_SEARCH_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/workplace-search/${DOC_LINK_VERSION}/`;
  const SEARCH_UI_DOCS = `${DOCS_WEBSITE_URL}search-ui/`;
  const MACHINE_LEARNING_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/machine-learning/${DOC_LINK_VERSION}/`;
@ -153,11 +154,17 @@ export const getDocLinks = ({ kibanaBranch }: GetDocLinkOptions): DocLinks => {
      crawlerOverview: `${ENTERPRISE_SEARCH_DOCS}crawler.html`,
      deployTrainedModels: `${MACHINE_LEARNING_DOCS}ml-nlp-deploy-models.html`,
      documentLevelSecurity: `${ELASTICSEARCH_DOCS}document-level-security.html`,
-      elser: `${MACHINE_LEARNING_DOCS}ml-nlp-elser.html`,
+      elser: `${ENTERPRISE_SEARCH_DOCS}elser-text-expansion.html`,
      engines: `${ENTERPRISE_SEARCH_DOCS}engines.html`,
+      esre: `${ESRE_DOCS}index.html`,
+      esreFaq: `${ESRE_DOCS}faq.html`,
+      esreHelp: `${ESRE_DOCS}help.html`,
+      esreLearn: `${ESRE_DOCS}learn.html`,
      indexApi: `${ELASTICSEARCH_DOCS}docs-index_.html`,
      ingestionApis: `${ENTERPRISE_SEARCH_DOCS}ingestion-apis.html`,
      ingestPipelines: `${ENTERPRISE_SEARCH_DOCS}ingest-pipelines.html`,
+      knnSearch: `${ELASTICSEARCH_DOCS}knn-search.html`,
+      knnSearchCombine: `${ELASTICSEARCH_DOCS}knn-search.html#_combine_approximate_knn_with_other_features`,
      languageAnalyzers: `${ELASTICSEARCH_DOCS}analysis-lang-analyzer.html`,
      languageClients: `${ENTERPRISE_SEARCH_DOCS}programming-language-clients.html`,
      licenseManagement: `${ENTERPRISE_SEARCH_DOCS}license-management.html`,
@ -168,7 +175,9 @@ export const getDocLinks = ({ kibanaBranch }: GetDocLinkOptions): DocLinks => {
      searchApplications: `${ENTERPRISE_SEARCH_DOCS}search-applications.html`,
      searchTemplates: `${ELASTICSEARCH_DOCS}search-template.html`,
      start: `${ENTERPRISE_SEARCH_DOCS}start.html`,
+      supportedNlpModels: `${MACHINE_LEARNING_DOCS}ml-nlp-model-ref.html`,
      syncRules: `${ENTERPRISE_SEARCH_DOCS}sync-rules.html`,
+      trainedModels: `${MACHINE_LEARNING_DOCS}ml-trained-models.html`,
      troubleshootSetup: `${ENTERPRISE_SEARCH_DOCS}troubleshoot-setup.html`,
      usersAccess: `${ENTERPRISE_SEARCH_DOCS}users-access.html`,
    },
@ -371,6 +380,7 @@ export const getDocLinks = ({ kibanaBranch }: GetDocLinkOptions): DocLinks => {
      remoteClusters: `${ELASTICSEARCH_DOCS}remote-clusters.html`,
      remoteClustersProxy: `${ELASTICSEARCH_DOCS}remote-clusters.html#proxy-mode`,
      remoteClusersProxySettings: `${ELASTICSEARCH_DOCS}remote-clusters-settings.html#remote-cluster-proxy-settings`,
+      rrf: `${ELASTICSEARCH_DOCS}rrf.html`,
      scriptParameters: `${ELASTICSEARCH_DOCS}modules-scripting-using.html#prefer-params`,
      secureCluster: `${ELASTICSEARCH_DOCS}secure-cluster.html`,
      shardAllocationSettings: `${ELASTICSEARCH_DOCS}modules-cluster.html#cluster-shard-allocation-settings`,
--- a/packages/kbn-doc-links/src/types.ts
+++ b/packages/kbn-doc-links/src/types.ts
@ -140,9 +140,15 @@ export interface DocLinks {
    readonly documentLevelSecurity: string;
    readonly elser: string;
    readonly engines: string;
+    readonly esre: string;
+    readonly esreFaq: string;
+    readonly esreHelp: string;
+    readonly esreLearn: string;
    readonly indexApi: string;
    readonly ingestionApis: string;
    readonly ingestPipelines: string;
+    readonly knnSearch: string;
+    readonly knnSearchCombine: string;
    readonly languageAnalyzers: string;
    readonly languageClients: string;
    readonly licenseManagement: string;
@ -153,7 +159,9 @@ export interface DocLinks {
    readonly searchApplications: string;
    readonly searchTemplates: string;
    readonly start: string;
+    readonly supportedNlpModels: string;
    readonly syncRules: string;
+    readonly trainedModels: string;
    readonly troubleshootSetup: string;
    readonly usersAccess: string;
  };
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/routes.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/routes.ts
@ -27,3 +27,5 @@ export const OLD_SEARCH_INDEX_CRAWLER_DOMAIN_DETAIL_PATH = `${SEARCH_INDEX_PATH}

 export const ML_MANAGE_TRAINED_MODELS_PATH = '/app/ml/trained_models';
 export const ML_NOTIFICATIONS_PATH = '/app/ml/notifications';
+
+export const DEV_TOOLS_CONSOLE_PATH = '/app/dev_tools#/console';
--- a/x-pack/plugins/enterprise_search/public/applications/esre/components/esre_guide/elser_panel.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/esre/components/esre_guide/elser_panel.tsx
@ -0,0 +1,125 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { generatePath } from 'react-router-dom';
+
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiSpacer,
+  EuiSteps,
+  EuiText,
+} from '@elastic/eui';
+import { EuiContainedStepProps } from '@elastic/eui/src/components/steps/steps';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import { ENTERPRISE_SEARCH_CONTENT_PLUGIN } from '../../../../../common/constants';
+import { NEW_INDEX_PATH } from '../../../enterprise_search_content/routes';
+import { docLinks } from '../../../shared/doc_links';
+import { EuiLinkTo } from '../../../shared/react_router_helpers';
+
+const steps: EuiContainedStepProps[] = [
+  {
+    title: i18n.translate('xpack.enterpriseSearch.esre.elserPanel.step1.title', {
+      defaultMessage: 'Create an index',
+    }),
+    children: (
+      <EuiLinkTo
+        to={generatePath(ENTERPRISE_SEARCH_CONTENT_PLUGIN.URL + NEW_INDEX_PATH)}
+        shouldNotCreateHref
+      >
+        <EuiButton iconType="plusInCircle">
+          {i18n.translate('xpack.enterpriseSearch.esre.elserPanel.step1.buttonLabel', {
+            defaultMessage: 'Create an index',
+          })}
+        </EuiButton>
+      </EuiLinkTo>
+    ),
+    status: 'incomplete',
+  },
+  {
+    title: i18n.translate('xpack.enterpriseSearch.esre.elserPanel.step2.title', {
+      defaultMessage: "Navigate to index's Pipelines tab",
+    }),
+    children: (
+      <EuiText>
+        <p>
+          <FormattedMessage
+            id="xpack.enterpriseSearch.esre.elserPanel.step2.description"
+            defaultMessage="After creating an index, select it and click the tab called {pipelinesName}."
+            values={{
+              pipelinesName: (
+                <strong>
+                  &quot;
+                  {i18n.translate(
+                    'xpack.enterpriseSearch.esre.elserPanel.step2.description.pipelinesName',
+                    {
+                      defaultMessage: 'Pipelines',
+                    }
+                  )}
+                  &quot;
+                </strong>
+              ),
+            }}
+          />
+        </p>
+      </EuiText>
+    ),
+    status: 'incomplete',
+  },
+  {
+    title: i18n.translate('xpack.enterpriseSearch.esre.elserPanel.step3.title', {
+      defaultMessage: 'Follow the on-screen instructions to deploy ELSER',
+    }),
+    children: (
+      <EuiText>
+        <p>
+          <FormattedMessage
+            id="xpack.enterpriseSearch.esre.elserPanel.step3.description"
+            defaultMessage="Locate the panel that allows you to one click deploy ELSER and create an inference pipeline using that model."
+          />
+        </p>
+      </EuiText>
+    ),
+    status: 'incomplete',
+  },
+];
+
+export const ElserPanel: React.FC = () => (
+  <>
+    <EuiSpacer />
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem grow={false}>
+        <EuiText>
+          <p>
+            <FormattedMessage
+              id="xpack.enterpriseSearch.esre.elser.description"
+              defaultMessage="Effortlessly deploy the {elser} for instant text semantic search capabilities in just a few clicks. This model expands your document and query text using the 'text_expansion' field, delivering seamless search out of the box."
+              values={{
+                elser: (
+                  <EuiLink target="_blank" href={docLinks.elser} external={false}>
+                    {i18n.translate('xpack.enterpriseSearch.esre.elser.description.elserLinkText', {
+                      defaultMessage: 'Elastic Learned Sparse Encoder',
+                    })}
+                  </EuiLink>
+                ),
+              }}
+            />
+          </p>
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiSteps steps={steps} titleSize="xs" />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </>
+);
--- a/x-pack/plugins/enterprise_search/public/applications/esre/components/esre_guide/esre_docs_section.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/esre/components/esre_guide/esre_docs_section.tsx
@ -7,10 +7,13 @@

 import React from 'react';

-import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText, EuiTitle } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiPanel, EuiText, EuiTitle } from '@elastic/eui';

+import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';

+import { docLinks } from '../../../shared/doc_links';
+
 export const EsreDocsSection: React.FC = () => (
  <EuiFlexGroup alignItems="center">
    <EuiFlexItem grow={4}>
@ -30,7 +33,19 @@ export const EsreDocsSection: React.FC = () => (
            <p>
              <FormattedMessage
                id="xpack.enterpriseSearch.esre.esreDocsSection.description"
-                defaultMessage="To learn more about how to get started with ESRE, and test these tools with concrete examples, visit the ESRE documentation."
+                defaultMessage="To learn more about how to get started with ESRE, and test these tools with concrete examples, visit the {esreDocumentation}."
+                values={{
+                  esreDocumentation: (
+                    <EuiLink target="_blank" href={docLinks.esre} external>
+                      {i18n.translate(
+                        'xpack.enterpriseSearch.esre.esreDocsSection.description.esreLinkText',
+                        {
+                          defaultMessage: 'ESRE documentation',
+                        }
+                      )}
+                    </EuiLink>
+                  ),
+                }}
              />
            </p>
          </EuiText>
@ -57,7 +72,19 @@ export const EsreDocsSection: React.FC = () => (
                  <p>
                    <FormattedMessage
                      id="xpack.enterpriseSearch.esre.esreDocsSection.learn.description"
-                      defaultMessage="These are complex topics, so we've curated some learning topics to help you get started."
+                      defaultMessage="These are complex topics, so we've curated some {learningTopics} to help you get started."
+                      values={{
+                        learningTopics: (
+                          <EuiLink target="_blank" href={docLinks.esreLearn} external={false}>
+                            {i18n.translate(
+                              'xpack.enterpriseSearch.esre.esreDocsSection.learn.learningTopicsLinkText',
+                              {
+                                defaultMessage: 'learning topics',
+                              }
+                            )}
+                          </EuiLink>
+                        ),
+                      }}
                    />
                  </p>
                </EuiText>
@ -83,7 +110,19 @@ export const EsreDocsSection: React.FC = () => (
                  <p>
                    <FormattedMessage
                      id="xpack.enterpriseSearch.esre.esreDocsSection.faq.description"
-                      defaultMessage="Learn what ESRE is (and isn't) from these frequently asked questions."
+                      defaultMessage="Learn what ESRE is (and isn't) from these {frequentlyAskedQuestions}."
+                      values={{
+                        frequentlyAskedQuestions: (
+                          <EuiLink target="_blank" href={docLinks.esreFaq} external={false}>
+                            {i18n.translate(
+                              'xpack.enterpriseSearch.esre.esreDocsSection.learn.frequentlyAskedQuestionsLinkText',
+                              {
+                                defaultMessage: 'frequently asked questions',
+                              }
+                            )}
+                          </EuiLink>
+                        ),
+                      }}
                    />
                  </p>
                </EuiText>
@ -109,7 +148,19 @@ export const EsreDocsSection: React.FC = () => (
                  <p>
                    <FormattedMessage
                      id="xpack.enterpriseSearch.esre.esreDocsSection.help.description"
-                      defaultMessage="Need help? Check out the ESRE discuss forum!"
+                      defaultMessage="Need help? Check out the {discussForum}!"
+                      values={{
+                        discussForum: (
+                          <EuiLink target="_blank" href={docLinks.esreHelp} external={false}>
+                            {i18n.translate(
+                              'xpack.enterpriseSearch.esre.esreDocsSection.learn.discussForumLinkText',
+                              {
+                                defaultMessage: 'ESRE discuss forum',
+                              }
+                            )}
+                          </EuiLink>
+                        ),
+                      }}
                    />
                  </p>
                </EuiText>
--- a/x-pack/plugins/enterprise_search/public/applications/esre/components/esre_guide/linear_combination_panel.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/esre/components/esre_guide/linear_combination_panel.tsx
@ -0,0 +1,82 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { generatePath } from 'react-router-dom';
+
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiSpacer,
+  EuiSteps,
+  EuiText,
+} from '@elastic/eui';
+import { EuiContainedStepProps } from '@elastic/eui/src/components/steps/steps';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import { DEV_TOOLS_CONSOLE_PATH } from '../../../enterprise_search_content/routes';
+import { docLinks } from '../../../shared/doc_links';
+import { EuiLinkTo } from '../../../shared/react_router_helpers';
+
+const steps: EuiContainedStepProps[] = [
+  {
+    title: i18n.translate('xpack.enterpriseSearch.esre.linearCombinationPanel.step1.title', {
+      defaultMessage: 'Discover how to use linear combination in _search queries',
+    }),
+    children: (
+      <EuiLink href={docLinks.knnSearchCombine} target="_blank" external>
+        {i18n.translate(
+          'xpack.enterpriseSearch.esre.linearCombinationPanel.step1.knnSearchCombineLinkText',
+          {
+            defaultMessage: 'Combine approximate kNN with other features',
+          }
+        )}
+      </EuiLink>
+    ),
+    status: 'incomplete',
+  },
+  {
+    title: i18n.translate('xpack.enterpriseSearch.esre.linearCombinationPanel.step2.title', {
+      defaultMessage: 'Try it today in Console',
+    }),
+    children: (
+      <EuiLinkTo to={generatePath(DEV_TOOLS_CONSOLE_PATH)} shouldNotCreateHref>
+        <EuiButton>
+          {i18n.translate('xpack.enterpriseSearch.esre.linearCombinationPanel.step2.buttonLabel', {
+            defaultMessage: 'Open Console',
+          })}
+        </EuiButton>
+      </EuiLinkTo>
+    ),
+    status: 'incomplete',
+  },
+];
+
+export const LinearCombinationPanel: React.FC = () => (
+  <>
+    <EuiSpacer />
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem grow={false}>
+        <EuiText>
+          <p>
+            <FormattedMessage
+              id="xpack.enterpriseSearch.esre.linearCombinationPanel.description"
+              defaultMessage="Used to calculate a similarity score or distance between data points. Combines attributes or features using weights, which enables customized relevance factors."
+            />
+          </p>
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiSteps steps={steps} titleSize="xs" />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </>
+);
--- a/x-pack/plugins/enterprise_search/public/applications/esre/components/esre_guide/measure_performance_section.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/esre/components/esre_guide/measure_performance_section.tsx
@ -6,11 +6,25 @@
 */
 import React from 'react';

-import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSteps, EuiText, EuiTitle } from '@elastic/eui';
+import { generatePath } from 'react-router-dom';
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiPanel,
+  EuiSteps,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
 import { EuiContainedStepProps } from '@elastic/eui/src/components/steps/steps';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';

+import { ANALYTICS_PLUGIN } from '../../../../../common/constants';
+import { docLinks } from '../../../shared/doc_links';
+import { EuiLinkTo } from '../../../shared/react_router_helpers';
+
 const steps: EuiContainedStepProps[] = [
  {
    title: i18n.translate('xpack.enterpriseSearch.esre.measurePerformanceSection.step1.title', {
@ -19,7 +33,19 @@ const steps: EuiContainedStepProps[] = [
    children: (
      <FormattedMessage
        id="xpack.enterpriseSearch.esre.measurePerformanceSection.step1.description"
-        defaultMessage="Visit Behavioral Analytics and create your first collection"
+        defaultMessage="Visit {behavioralAnalytics} and create your first collection"
+        values={{
+          behavioralAnalytics: (
+            <EuiLinkTo to={generatePath(ANALYTICS_PLUGIN.URL)} shouldNotCreateHref>
+              {i18n.translate(
+                'xpack.enterpriseSearch.esre.measurePerformanceSection.step1.behavioralAnalyticsLinkText',
+                {
+                  defaultMessage: 'Behavioral Analytics',
+                }
+              )}
+            </EuiLinkTo>
+          ),
+        }}
      />
    ),
    status: 'incomplete',
@ -69,7 +95,19 @@ export const MeasurePerformanceSection: React.FC = () => (
            <p>
              <FormattedMessage
                id="xpack.enterpriseSearch.esre.measurePerformanceSection.description"
-                defaultMessage="Use Behavioral Analytics dashboards and tools to visualize user behavior and measure the impact of your changes."
+                defaultMessage="Use {behavioralAnalytics} dashboards and tools to visualize user behavior and measure the impact of your changes."
+                values={{
+                  behavioralAnalytics: (
+                    <EuiLink target="_blank" href={docLinks.behavioralAnalytics} external>
+                      {i18n.translate(
+                        'xpack.enterpriseSearch.esre.measurePerformanceSection.behavioralAnalyticsLinkText',
+                        {
+                          defaultMessage: 'Behavioral Analytics',
+                        }
+                      )}
+                    </EuiLink>
+                  ),
+                }}
              />
            </p>
          </EuiText>
--- a/x-pack/plugins/enterprise_search/public/applications/esre/components/esre_guide/nlp_enrichment_panel.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/esre/components/esre_guide/nlp_enrichment_panel.tsx
@ -0,0 +1,150 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { generatePath } from 'react-router-dom';
+
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiSpacer,
+  EuiSteps,
+  EuiText,
+} from '@elastic/eui';
+import { EuiContainedStepProps } from '@elastic/eui/src/components/steps/steps';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import { ENTERPRISE_SEARCH_CONTENT_PLUGIN } from '../../../../../common/constants';
+import {
+  ML_MANAGE_TRAINED_MODELS_PATH,
+  NEW_INDEX_PATH,
+} from '../../../enterprise_search_content/routes';
+import { docLinks } from '../../../shared/doc_links';
+import { EuiLinkTo } from '../../../shared/react_router_helpers';
+
+const steps: EuiContainedStepProps[] = [
+  {
+    title: i18n.translate('xpack.enterpriseSearch.esre.nlpEnrichmentPanel.step1.title', {
+      defaultMessage: 'Learn how to upload ML models',
+    }),
+    children: (
+      <EuiFlexGroup direction="column">
+        <EuiFlexItem>
+          <EuiLink href={docLinks.supportedNlpModels} target="_blank" external>
+            {i18n.translate(
+              'xpack.enterpriseSearch.esre.nlpEnrichmentPanel.step1.supportedNlpModelsLinkText',
+              { defaultMessage: 'Supported NLP models' }
+            )}
+          </EuiLink>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiLink href={docLinks.trainedModels} target="_blank" external>
+            {i18n.translate(
+              'xpack.enterpriseSearch.esre.nlpEnrichmentPanel.step1.guideToTrainedModelsLinkText',
+              { defaultMessage: 'Guide to trained models' }
+            )}
+          </EuiLink>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiLinkTo to={generatePath(ML_MANAGE_TRAINED_MODELS_PATH)} shouldNotCreateHref>
+            <EuiButton iconType="eye">
+              {i18n.translate('xpack.enterpriseSearch.esre.nlpEnrichmentPanel.step1.buttonLabel', {
+                defaultMessage: 'View trained models',
+              })}
+            </EuiButton>
+          </EuiLinkTo>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    ),
+    status: 'incomplete',
+  },
+  {
+    title: i18n.translate('xpack.enterpriseSearch.esre.nlpEnrichmentPanel.step2.title', {
+      defaultMessage: 'Create an index',
+    }),
+    children: (
+      <EuiLinkTo
+        to={generatePath(ENTERPRISE_SEARCH_CONTENT_PLUGIN.URL + NEW_INDEX_PATH)}
+        shouldNotCreateHref
+      >
+        <EuiButton iconType="plusInCircle">
+          {i18n.translate('xpack.enterpriseSearch.esre.nlpEnrichmentPanel.step2.buttonLabel', {
+            defaultMessage: 'Create an index',
+          })}
+        </EuiButton>
+      </EuiLinkTo>
+    ),
+    status: 'incomplete',
+  },
+  {
+    title: i18n.translate('xpack.enterpriseSearch.esre.nlpEnrichmentPanel.step3.title', {
+      defaultMessage: 'Create an ML inference pipeline',
+    }),
+    children: (
+      <EuiText>
+        <p>
+          <FormattedMessage
+            id="xpack.enterpriseSearch.esre.nlpEnrichmentPanel.step3.description"
+            defaultMessage="Navigate to your index's {pipelinesName} tab to create an inference pipeline that uses your deployed model."
+            values={{
+              pipelinesName: (
+                <strong>
+                  &quot;
+                  {i18n.translate(
+                    'xpack.enterpriseSearch.esre.nlpEnrichmentPanel.step3.description.pipelinesName',
+                    {
+                      defaultMessage: 'Pipelines',
+                    }
+                  )}
+                  &quot;
+                </strong>
+              ),
+            }}
+          />
+        </p>
+      </EuiText>
+    ),
+    status: 'incomplete',
+  },
+];
+
+export const NlpEnrichmentPanel: React.FC = () => (
+  <>
+    <EuiSpacer />
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem grow={false}>
+        <EuiText>
+          <p>
+            <FormattedMessage
+              id="xpack.enterpriseSearch.esre.nlpEnrichmentPanel.description"
+              defaultMessage="Use Natural Language Processing (NLP) tools like sentiment analysis, summarization, or Named Entity Recognition to enhance the relevance of your search results. NLP uses several {supportedMlModels} you can load to intelligently analyze and enrich documents with additional fields."
+              values={{
+                supportedMlModels: (
+                  <EuiLink target="_blank" href={docLinks.supportedNlpModels} external={false}>
+                    {i18n.translate(
+                      'xpack.enterpriseSearch.esre.nlpEnrichmentPanel.description.supportedMlModelsLinkText',
+                      {
+                        defaultMessage: 'supported ML models',
+                      }
+                    )}
+                  </EuiLink>
+                ),
+              }}
+            />
+          </p>
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiSteps steps={steps} titleSize="xs" />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </>
+);
--- a/x-pack/plugins/enterprise_search/public/applications/esre/components/esre_guide/rank_aggregation_section.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/esre/components/esre_guide/rank_aggregation_section.tsx
@ -15,6 +15,8 @@ import linearCombinationIllustration from '../../../../assets/images/linear.svg'
 import rrfRankingIllustration from '../../../../assets/images/rrf.svg';

 import { EsreGuideAccordion } from './esre_guide_accordion';
+import { LinearCombinationPanel } from './linear_combination_panel';
+import { RrfRankingPanel } from './rrf_ranking_panel';

 export const RankAggregationSection: React.FC = () => (
  <EuiFlexGroup alignItems="center">
@ -58,9 +60,7 @@ export const RankAggregationSection: React.FC = () => (
              }
            )}
          >
-            <>
-              <p>Placeholder</p>
-            </>
+            <RrfRankingPanel />
          </EsreGuideAccordion>
        </EuiFlexItem>
        <EuiFlexItem grow={false}>
@ -77,9 +77,7 @@ export const RankAggregationSection: React.FC = () => (
              }
            )}
          >
-            <>
-              <p>Placeholder</p>
-            </>
+            <LinearCombinationPanel />
          </EsreGuideAccordion>
        </EuiFlexItem>
      </EuiFlexGroup>
--- a/x-pack/plugins/enterprise_search/public/applications/esre/components/esre_guide/rrf_ranking_panel.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/esre/components/esre_guide/rrf_ranking_panel.tsx
@ -0,0 +1,88 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { generatePath } from 'react-router-dom';
+
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiSpacer,
+  EuiSteps,
+  EuiText,
+} from '@elastic/eui';
+import { EuiContainedStepProps } from '@elastic/eui/src/components/steps/steps';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import { DEV_TOOLS_CONSOLE_PATH } from '../../../enterprise_search_content/routes';
+import { docLinks } from '../../../shared/doc_links';
+import { EuiLinkTo } from '../../../shared/react_router_helpers';
+
+const steps: EuiContainedStepProps[] = [
+  {
+    title: i18n.translate('xpack.enterpriseSearch.esre.rrfRankingPanel.step1.title', {
+      defaultMessage: 'Discover examples of using RRF in _search queries',
+    }),
+    children: (
+      <EuiLink href={docLinks.rrf} target="_blank" external>
+        {i18n.translate('xpack.enterpriseSearch.esre.rrfRankingPanel.step1.rrfDocsLinkText', {
+          defaultMessage: 'Reciprocal Rank Fusion documentations',
+        })}
+      </EuiLink>
+    ),
+    status: 'incomplete',
+  },
+  {
+    title: i18n.translate('xpack.enterpriseSearch.esre.rrfRankingPanel.step2.title', {
+      defaultMessage: 'Try it today in Console',
+    }),
+    children: (
+      <EuiLinkTo to={generatePath(DEV_TOOLS_CONSOLE_PATH)} shouldNotCreateHref>
+        <EuiButton>
+          {i18n.translate('xpack.enterpriseSearch.esre.rrfRankingPanel.step2.buttonLabel', {
+            defaultMessage: 'Open Console',
+          })}
+        </EuiButton>
+      </EuiLinkTo>
+    ),
+    status: 'incomplete',
+  },
+];
+
+export const RrfRankingPanel: React.FC = () => (
+  <>
+    <EuiSpacer />
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem grow={false}>
+        <EuiText>
+          <p>
+            <FormattedMessage
+              id="xpack.enterpriseSearch.esre.rrfRankingPanel.description"
+              defaultMessage="Use {rrf} to combine rankings from multiple result sets with different relevance indicators, with no fine tuning required."
+              values={{
+                rrf: (
+                  <EuiLink target="_blank" href={docLinks.rrf} external={false}>
+                    {i18n.translate('xpack.enterpriseSearch.esre.rrfRankingPanel.rrfLinkText', {
+                      defaultMessage: 'Reciprocal Rank Fusion (RRF)',
+                    })}
+                  </EuiLink>
+                ),
+              }}
+            />
+          </p>
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiSteps steps={steps} titleSize="xs" />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </>
+);
--- a/x-pack/plugins/enterprise_search/public/applications/esre/components/esre_guide/semantic_search_section.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/esre/components/esre_guide/semantic_search_section.tsx
@ -15,7 +15,10 @@ import elserIllustration from '../../../../assets/images/elser.svg';
 import nlpEnrichmentIllustration from '../../../../assets/images/nlp.svg';
 import vectorSearchIllustration from '../../../../assets/images/vector.svg';

+import { ElserPanel } from './elser_panel';
 import { EsreGuideAccordion } from './esre_guide_accordion';
+import { NlpEnrichmentPanel } from './nlp_enrichment_panel';
+import { VectorSearchPanel } from './vector_search_panel';

 export const SemanticSearchSection: React.FC = () => (
  <EuiFlexGroup alignItems="center">
@ -57,9 +60,7 @@ export const SemanticSearchSection: React.FC = () => (
              defaultMessage: 'Instant semantic search capabilities',
            })}
          >
-            <>
-              <p>Placeholder</p>
-            </>
+            <ElserPanel />
          </EsreGuideAccordion>
        </EuiFlexItem>
        <EuiFlexItem grow={false}>
@ -76,14 +77,12 @@ export const SemanticSearchSection: React.FC = () => (
              }
            )}
          >
-            <>
-              <p>Placeholder</p>
-            </>
+            <VectorSearchPanel />
          </EsreGuideAccordion>
        </EuiFlexItem>
        <EuiFlexItem grow={false}>
          <EsreGuideAccordion
-            id="vectorSearchAccordion"
+            id="nlpEnrichmentAccordion"
            icon={nlpEnrichmentIllustration}
            title={i18n.translate('xpack.enterpriseSearch.esre.nlpEnrichmentAccordion.title', {
              defaultMessage: 'NLP Enrichment',
@ -95,9 +94,7 @@ export const SemanticSearchSection: React.FC = () => (
              }
            )}
          >
-            <>
-              <p>Placeholder</p>
-            </>
+            <NlpEnrichmentPanel />
          </EsreGuideAccordion>
        </EuiFlexItem>
      </EuiFlexGroup>
--- a/x-pack/plugins/enterprise_search/public/applications/esre/components/esre_guide/vector_search_panel.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/esre/components/esre_guide/vector_search_panel.tsx
@ -0,0 +1,142 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { generatePath } from 'react-router-dom';
+
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiSpacer,
+  EuiSteps,
+  EuiText,
+} from '@elastic/eui';
+import { EuiContainedStepProps } from '@elastic/eui/src/components/steps/steps';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import { ENTERPRISE_SEARCH_CONTENT_PLUGIN } from '../../../../../common/constants';
+import {
+  ML_MANAGE_TRAINED_MODELS_PATH,
+  NEW_INDEX_PATH,
+} from '../../../enterprise_search_content/routes';
+import { docLinks } from '../../../shared/doc_links';
+import { EuiLinkTo } from '../../../shared/react_router_helpers';
+
+const steps: EuiContainedStepProps[] = [
+  {
+    title: i18n.translate('xpack.enterpriseSearch.esre.vectorSearchPanel.step1.title', {
+      defaultMessage: 'Learn how to upload ML models',
+    }),
+    children: (
+      <EuiFlexGroup direction="column">
+        <EuiFlexItem>
+          <EuiLink href={docLinks.trainedModels} target="_blank" external>
+            {i18n.translate(
+              'xpack.enterpriseSearch.esre.vectorSearchPanel.step1.guideToTrainedModelsLinkText',
+              { defaultMessage: 'Guide to trained models' }
+            )}
+          </EuiLink>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiLinkTo to={generatePath(ML_MANAGE_TRAINED_MODELS_PATH)} shouldNotCreateHref>
+            <EuiButton iconType="eye">
+              {i18n.translate('xpack.enterpriseSearch.esre.vectorSearchPanel.step1.buttonLabel', {
+                defaultMessage: 'View trained models',
+              })}
+            </EuiButton>
+          </EuiLinkTo>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    ),
+    status: 'incomplete',
+  },
+  {
+    title: i18n.translate('xpack.enterpriseSearch.esre.vectorSearchPanel.step2.title', {
+      defaultMessage: 'Create an index',
+    }),
+    children: (
+      <EuiLinkTo
+        to={generatePath(ENTERPRISE_SEARCH_CONTENT_PLUGIN.URL + NEW_INDEX_PATH)}
+        shouldNotCreateHref
+      >
+        <EuiButton iconType="plusInCircle">
+          {i18n.translate('xpack.enterpriseSearch.esre.vectorSearchPanel.step2.buttonLabel', {
+            defaultMessage: 'Create an index',
+          })}
+        </EuiButton>
+      </EuiLinkTo>
+    ),
+    status: 'incomplete',
+  },
+  {
+    title: i18n.translate('xpack.enterpriseSearch.esre.vectorSearchPanel.step3.title', {
+      defaultMessage: 'Create a ML inference pipeline',
+    }),
+    children: (
+      <EuiText>
+        <p>
+          <FormattedMessage
+            id="xpack.enterpriseSearch.esre.vectorSearchPanel.step3.description"
+            defaultMessage="Navigate to your index's {pipelinesName} tab to create an inference pipeline that uses your deployed model."
+            values={{
+              pipelinesName: (
+                <strong>
+                  &quot;
+                  {i18n.translate(
+                    'xpack.enterpriseSearch.esre.vectorSearchPanel.step3.description.pipelinesName',
+                    {
+                      defaultMessage: 'Pipelines',
+                    }
+                  )}
+                  &quot;
+                </strong>
+              ),
+            }}
+          />
+        </p>
+      </EuiText>
+    ),
+    status: 'incomplete',
+  },
+];
+
+export const VectorSearchPanel: React.FC = () => (
+  <>
+    <EuiSpacer />
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem grow={false}>
+        <EuiText>
+          <p>
+            <FormattedMessage
+              id="xpack.enterpriseSearch.esre.vectorSearchPanel.description"
+              defaultMessage="Use {vectorDbCapabilities} by adding embeddings from your ML models. Deploy trained models on Elastic ML nodes and set up inference pipelines to automatically add embeddings when you ingest documents, so you can use the kNN vector search method in _search."
+              values={{
+                vectorDbCapabilities: (
+                  <EuiLink target="_blank" href={docLinks.knnSearch} external={false}>
+                    {i18n.translate(
+                      'xpack.enterpriseSearch.esre.vectorSearchPanel.description.vectorDbCapabilitiesLinkText',
+                      {
+                        defaultMessage: "Elasticsearch's vector DB capabilities",
+                      }
+                    )}
+                  </EuiLink>
+                ),
+              }}
+            />
+          </p>
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiSteps steps={steps} titleSize="xs" />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </>
+);
--- a/x-pack/plugins/enterprise_search/public/applications/shared/doc_links/doc_links.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/doc_links/doc_links.ts
@ -94,10 +94,16 @@ class DocLinks {
  public enterpriseSearchMailService: string;
  public enterpriseSearchTroubleshootSetup: string;
  public enterpriseSearchUsersAccess: string;
+  public esre: string;
+  public esreFaq: string;
+  public esreHelp: string;
+  public esreLearn: string;
  public indexApi: string;
  public ingestionApis: string;
  public ingestPipelines: string;
  public kibanaSecurity: string;
+  public knnSearch: string;
+  public knnSearchCombine: string;
  public languageAnalyzers: string;
  public languageClients: string;
  public licenseManagement: string;
@ -105,13 +111,16 @@ class DocLinks {
  public mlDocumentEnrichment: string;
  public pluginsIngestAttachment: string;
  public queryDsl: string;
+  public rrf: string;
  public searchApplications: string;
  public searchApplicationsTemplates: string;
  public searchTemplates: string;
  public searchUIAppSearch: string;
  public searchUIElasticsearch: string;
  public start: string;
+  public supportedNlpModels: string;
  public syncRules: string;
+  public trainedModels: string;
  public workplaceSearchApiKeys: string;
  public workplaceSearchBox: string;
  public workplaceSearchConfluenceCloud: string;
@ -235,10 +244,16 @@ class DocLinks {
    this.enterpriseSearchMailService = '';
    this.enterpriseSearchTroubleshootSetup = '';
    this.enterpriseSearchUsersAccess = '';
+    this.esre = '';
+    this.esreFaq = '';
+    this.esreHelp = '';
+    this.esreLearn = '';
    this.indexApi = '';
    this.ingestionApis = '';
    this.ingestPipelines = '';
    this.kibanaSecurity = '';
+    this.knnSearch = '';
+    this.knnSearchCombine = '';
    this.languageAnalyzers = '';
    this.languageClients = '';
    this.licenseManagement = '';
@ -246,13 +261,16 @@ class DocLinks {
    this.mlDocumentEnrichment = '';
    this.pluginsIngestAttachment = '';
    this.queryDsl = '';
+    this.rrf = '';
    this.searchUIAppSearch = '';
    this.searchUIElasticsearch = '';
    this.searchApplicationsTemplates = '';
    this.searchApplications = '';
    this.searchTemplates = '';
    this.start = '';
+    this.supportedNlpModels = '';
    this.syncRules = '';
+    this.trainedModels = '';
    this.workplaceSearchApiKeys = '';
    this.workplaceSearchBox = '';
    this.workplaceSearchConfluenceCloud = '';
@ -378,10 +396,16 @@ class DocLinks {
    this.enterpriseSearchMailService = docLinks.links.enterpriseSearch.mailService;
    this.enterpriseSearchTroubleshootSetup = docLinks.links.enterpriseSearch.troubleshootSetup;
    this.enterpriseSearchUsersAccess = docLinks.links.enterpriseSearch.usersAccess;
+    this.esre = docLinks.links.enterpriseSearch.esre;
+    this.esreFaq = docLinks.links.enterpriseSearch.esreFaq;
+    this.esreHelp = docLinks.links.enterpriseSearch.esreHelp;
+    this.esreLearn = docLinks.links.enterpriseSearch.esreLearn;
    this.indexApi = docLinks.links.enterpriseSearch.indexApi;
    this.ingestionApis = docLinks.links.enterpriseSearch.ingestionApis;
    this.ingestPipelines = docLinks.links.enterpriseSearch.ingestPipelines;
    this.kibanaSecurity = docLinks.links.kibana.xpackSecurity;
+    this.knnSearch = docLinks.links.enterpriseSearch.knnSearch;
+    this.knnSearchCombine = docLinks.links.enterpriseSearch.knnSearchCombine;
    this.languageAnalyzers = docLinks.links.enterpriseSearch.languageAnalyzers;
    this.languageClients = docLinks.links.enterpriseSearch.languageClients;
    this.licenseManagement = docLinks.links.enterpriseSearch.licenseManagement;
@ -389,13 +413,16 @@ class DocLinks {
    this.mlDocumentEnrichment = docLinks.links.enterpriseSearch.mlDocumentEnrichment;
    this.pluginsIngestAttachment = docLinks.links.plugins.ingestAttachment;
    this.queryDsl = docLinks.links.query.queryDsl;
+    this.rrf = docLinks.links.elasticsearch.rrf;
    this.searchUIAppSearch = docLinks.links.searchUI.appSearch;
    this.searchUIElasticsearch = docLinks.links.searchUI.elasticsearch;
    this.searchApplicationsTemplates = docLinks.links.enterpriseSearch.searchApplicationsTemplates;
    this.searchApplications = docLinks.links.enterpriseSearch.searchApplications;
    this.searchTemplates = docLinks.links.enterpriseSearch.searchTemplates;
    this.start = docLinks.links.enterpriseSearch.start;
+    this.supportedNlpModels = docLinks.links.enterpriseSearch.supportedNlpModels;
    this.syncRules = docLinks.links.enterpriseSearch.syncRules;
+    this.trainedModels = docLinks.links.enterpriseSearch.trainedModels;
    this.workplaceSearchApiKeys = docLinks.links.workplaceSearch.apiKeys;
    this.workplaceSearchBox = docLinks.links.workplaceSearch.box;
    this.workplaceSearchConfluenceCloud = docLinks.links.workplaceSearch.confluenceCloud;