[Search][Getting Started] Chat first view (elastic#270500)

## Summary

Implementing a chat first approach for the search solution getting
started page.

Note: this page is only visible when the feature flag is enabled, which
it is currently off for everyone.

### Screenshots
<img width="1465" height="810" alt="image"
src="https://github.com/user-attachments/assets/5d4d872d-6f9d-4bdf-85e9-b3661b5a4b67"
/>
<img width="1465" height="810" alt="image"
src="https://github.com/user-attachments/assets/41af62c0-f95a-4bbd-bbe5-0dd7fe76023f"
/>
<img width="1465" height="810" alt="image"
src="https://github.com/user-attachments/assets/b7722ab3-6b1f-478c-beb7-4e2966f3a2bb"
/>

### Testing

1. Run Kibana with serverless elasticsearch & eis enabled
2. Enabled the feature flag in kibana.dev.yaml:
```yaml
feature_flags.overrides:
  searchSolution.gettingStartedChatEnabled: true
```

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [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/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] ~If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~
- [ ] ~This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.~
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] ~The PR description includes the appropriate Release Notes
section, and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)~
- [ ] ~Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.~

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

Author: 3 people

packages/kbn-optimizer/limits.yml

@@ -154,7 +154,7 @@ pageLoadAssetSize:
   screenshotMode: 2351
   screenshotting: 3252
   searchAssistant: 7079
-  searchGettingStarted: 6678
+  searchGettingStarted: 7548
   searchHomepage: 9005
   searchInferenceEndpoints: 9765
   searchNavigation: 8900

x-pack/platform/plugins/shared/agent_builder/public/index.ts

@@ -16,14 +16,15 @@ import type {
 import { AgentBuilderPlugin } from './plugin';
 import { AGENTBUILDER_FEATURE_ID, AGENTBUILDER_APP_ID, uiPrivileges } from '../common/features';
 import { type CreateSkillResponse, SKILLS_API_PATH } from '../common/http_api/skills';
+import { MCP_SERVER_PATH } from '../common/mcp';
 
 export type {
   AgentBuilderPluginSetup,
   AgentBuilderPluginStart,
   PublicEmbeddableConversationProps,
 } from './types';
 export type { EmbeddableConversationProps } from './embeddable/types';
-export { AGENTBUILDER_FEATURE_ID, AGENTBUILDER_APP_ID, uiPrivileges };
+export { AGENTBUILDER_FEATURE_ID, AGENTBUILDER_APP_ID, uiPrivileges, MCP_SERVER_PATH };
 export { type CreateSkillResponse, SKILLS_API_PATH };
 export { ConversationInputShell } from '@kbn/agent-builder-browser';
 export type { ConversationInputShellProps } from '@kbn/agent-builder-browser';

x-pack/solutions/search/plugins/search_getting_started/kibana.jsonc

@@ -20,10 +20,13 @@
       "cloud",
       "console",
       "searchNavigation",
+      "spaces",
       "usageCollection"
     ],
     "requiredBundles": [
-      "kibanaReact"
+      "agentBuilder",
+      "kibanaReact",
+      "spaces",
     ]
   }
 }

x-pack/solutions/search/plugins/search_getting_started/moon.yml

@@ -45,6 +45,10 @@ dependsOn:
   - '@kbn/scout-search'
   - '@kbn/search-agent'
   - '@kbn/shared-ux-ai-components'
+  - '@kbn/agent-builder-plugin'
+  - '@kbn/spaces-plugin'
+  - '@kbn/deeplinks-agent-builder'
+  - '@kbn/agent-builder-common'
 tags:
   - plugin
   - prod

x-pack/solutions/search/plugins/search_getting_started/public/components/chat/agent_prompt.test.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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 { render, screen, fireEvent } from '@testing-library/react';
+import { I18nProvider } from '@kbn/i18n-react';
+import { EuiThemeProvider } from '@elastic/eui';
+import { GettingStartedAgentPrompt } from './agent_prompt';
+import { useUsageTracker } from '../../contexts/usage_tracker_context';
+
+jest.mock('../../contexts/usage_tracker_context', () => ({
+  useUsageTracker: jest.fn(),
+}));
+
+const mockUseUsageTracker = useUsageTracker as jest.Mock;
+
+const renderComponent = () =>
+  render(
+    <I18nProvider>
+      <EuiThemeProvider>
+        <GettingStartedAgentPrompt />
+      </EuiThemeProvider>
+    </I18nProvider>
+  );
+
+describe('GettingStartedAgentPrompt', () => {
+  beforeEach(() => {
+    mockUseUsageTracker.mockReturnValue({ click: jest.fn(), count: jest.fn(), load: jest.fn() });
+  });
+
+  it('does not render the modal on initial mount', () => {
+    renderComponent();
+
+    expect(screen.queryByTestId('promptModalCode')).not.toBeInTheDocument();
+  });
+
+  it('opens the modal when the Copy prompt button is clicked', () => {
+    renderComponent();
+
+    fireEvent.click(screen.getByTestId('chatFirstAgentInstallBtn'));
+
+    expect(screen.getByTestId('promptModalCode')).toBeInTheDocument();
+  });
+
+  it('renders the modal with prompt content when opened', () => {
+    renderComponent();
+
+    fireEvent.click(screen.getByTestId('chatFirstAgentInstallBtn'));
+
+    expect(screen.getByTestId('promptModalCode')).not.toBeEmptyDOMElement();
+  });
+
+  it('closes the modal when the Close button is clicked', () => {
+    renderComponent();
+
+    fireEvent.click(screen.getByTestId('chatFirstAgentInstallBtn'));
+    expect(screen.getByTestId('promptModalCode')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('promptModalCloseBtn'));
+    expect(screen.queryByTestId('promptModalCode')).not.toBeInTheDocument();
+  });
+});

x-pack/solutions/search/plugins/search_getting_started/public/components/chat/agent_prompt.tsx

@@ -0,0 +1,62 @@
+/*
+ * 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, { useState } from 'react';
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { buildPrompt } from '../agent_install/util';
+import { PromptModal } from '../agent_install/prompt_modal';
+
+export const GettingStartedAgentPrompt = () => {
+  const [isPromptModalOpen, setIsPromptModalOpen] = useState(false);
+
+  return (
+    <>
+      <EuiFlexGroup direction="column" gutterSize="xs">
+        <EuiFlexItem>
+          <EuiTitle size="xxs">
+            <h5>
+              {i18n.translate('xpack.search.gettingStarted.chat.agentPrompt.title', {
+                defaultMessage: 'Prompt your agent',
+              })}
+            </h5>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiText color="subdued" size="xs">
+            <p>
+              {i18n.translate('xpack.search.gettingStarted.chat.agentPrompt.description', {
+                defaultMessage:
+                  'Set up our official optimized Elasticsearch skills in your preferred agentic code workflow.',
+              })}
+            </p>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiSpacer size="s" />
+        <EuiFlexItem>
+          <span>
+            <EuiButton
+              color="text"
+              onClick={() => setIsPromptModalOpen(true)}
+              iconType="copy"
+              size="s"
+              data-test-subj="chatFirstAgentInstallBtn"
+            >
+              {i18n.translate('xpack.search.gettingStarted.chat.agentPrompt.cta', {
+                defaultMessage: 'Copy prompt',
+              })}
+            </EuiButton>
+          </span>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      {isPromptModalOpen && (
+        <PromptModal prompt={buildPrompt('cli')} onClose={() => setIsPromptModalOpen(false)} />
+      )}
+    </>
+  );
+};

x-pack/solutions/search/plugins/search_getting_started/public/components/chat/chat_content.tsx

@@ -0,0 +1,34 @@
+/*
+ * 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 { EuiFlexGrid, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+import { ChatElasticsearchConnectionDetails } from './connection_details';
+import { ConversationPrompt } from './conversation_prompt';
+import { ChatColumnsGrid, ChatContentSeparator } from './styles';
+import { GettingStartedAgentPrompt } from './agent_prompt';
+
+export const GettingStartedChatContent = () => {
+  return (
+    <EuiFlexGrid data-test-subj="gettingStartedChatContent" columns={2} css={ChatColumnsGrid}>
+      <EuiFlexItem css={ChatContentSeparator}>
+        <ConversationPrompt />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiFlexGroup direction="column" gutterSize="l">
+          <EuiFlexItem>
+            <ChatElasticsearchConnectionDetails />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <GettingStartedAgentPrompt />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexGrid>
+  );
+};

x-pack/solutions/search/plugins/search_getting_started/public/components/chat/chat_header.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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 { EuiFlexGrid, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { DeploymentStatusBadges } from '../header/deployment_status_badges';
+import { ChatColumnsGrid, ChatStretchedFlexItem } from './styles';
+
+export const ChatHeader = () => {
+  return (
+    <EuiFlexGroup gutterSize="l" alignItems="flexStart" direction="column">
+      <EuiFlexItem css={ChatStretchedFlexItem}>
+        <DeploymentStatusBadges />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiFlexGrid columns={2} css={ChatColumnsGrid}>
+          <EuiFlexItem>
+            <EuiTitle size="l">
+              <h1>
+                {i18n.translate('xpack.search.gettingStarted.chatPage.title', {
+                  defaultMessage: 'Bring your data and start building your next search experience.',
+                })}
+              </h1>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGrid>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

x-pack/solutions/search/plugins/search_getting_started/public/components/chat/connection_details.test.tsx

@@ -0,0 +1,103 @@
+/*
+ * 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 { render, screen, fireEvent } from '@testing-library/react';
+import { I18nProvider } from '@kbn/i18n-react';
+import { EuiThemeProvider } from '@elastic/eui';
+import { ChatElasticsearchConnectionDetails } from './connection_details';
+import { useElasticsearchUrl } from '../../hooks/use_elasticsearch_url';
+import { useAgentBuilderMcpUrl } from '../../hooks/use_mcp_url';
+
+jest.mock('../../hooks/use_elasticsearch_url');
+jest.mock('../../hooks/use_mcp_url');
+jest.mock('@kbn/search-api-keys-components', () => ({
+  ApiKeyForm: () => <div data-test-subj="apiKeyForm" />,
+}));
+
+const mockUseElasticsearchUrl = useElasticsearchUrl as jest.Mock;
+const mockUseAgentBuilderMcpUrl = useAgentBuilderMcpUrl as jest.Mock;
+
+const MOCK_ES_URL = 'https://my-deployment.es.us-east-1.aws.elastic.cloud';
+const MOCK_MCP_URL = 'https://my-kibana.kb.us-east-1.aws.elastic.cloud/api/agent_builder/mcp';
+
+const renderComponent = () =>
+  render(
+    <I18nProvider>
+      <EuiThemeProvider>
+        <ChatElasticsearchConnectionDetails />
+      </EuiThemeProvider>
+    </I18nProvider>
+  );
+
+describe('ChatElasticsearchConnectionDetails', () => {
+  beforeEach(() => {
+    mockUseElasticsearchUrl.mockReturnValue(MOCK_ES_URL);
+    mockUseAgentBuilderMcpUrl.mockReturnValue(MOCK_MCP_URL);
+  });
+
+  it('shows the Elasticsearch URL by default', () => {
+    renderComponent();
+
+    expect(screen.getByTestId('endpointValueField')).toHaveTextContent(MOCK_ES_URL);
+    expect(screen.queryByTestId('mcpEndpointValueField')).not.toBeInTheDocument();
+  });
+
+  it('switches to the MCP URL when the MCP badge is clicked', () => {
+    renderComponent();
+
+    fireEvent.click(screen.getByTestId('viewMCPUrlBtn'));
+
+    expect(screen.getByTestId('mcpEndpointValueField')).toHaveTextContent(MOCK_MCP_URL);
+    expect(screen.queryByTestId('endpointValueField')).not.toBeInTheDocument();
+  });
+
+  it('switches back to the Elasticsearch URL when the Elasticsearch badge is clicked', () => {
+    renderComponent();
+
+    fireEvent.click(screen.getByTestId('viewMCPUrlBtn'));
+    fireEvent.click(screen.getByTestId('viewElasticsearchUrlBtn'));
+
+    expect(screen.getByTestId('endpointValueField')).toHaveTextContent(MOCK_ES_URL);
+    expect(screen.queryByTestId('mcpEndpointValueField')).not.toBeInTheDocument();
+  });
+
+  describe('badge colors', () => {
+    it('Elasticsearch badge is default color and MCP badge is hollow on initial render', () => {
+      renderComponent();
+
+      const esBadge = screen.getByTestId('viewElasticsearchUrlBtn');
+      const mcpBadge = screen.getByTestId('viewMCPUrlBtn');
+
+      // EuiBadge uses CSS-in-JS; check the className string for the variant name
+      expect(esBadge.closest('.euiBadge')?.className).not.toContain('hollow');
+      expect(mcpBadge.closest('.euiBadge')?.className).toContain('hollow');
+    });
+
+    it('MCP badge becomes default color and Elasticsearch badge becomes hollow after switching', () => {
+      renderComponent();
+
+      fireEvent.click(screen.getByTestId('viewMCPUrlBtn'));
+
+      const esBadge = screen.getByTestId('viewElasticsearchUrlBtn');
+      const mcpBadge = screen.getByTestId('viewMCPUrlBtn');
+
+      expect(mcpBadge.closest('.euiBadge')?.className).not.toContain('hollow');
+      expect(esBadge.closest('.euiBadge')?.className).toContain('hollow');
+    });
+  });
+
+  it('always renders the ApiKeyForm regardless of URL view', () => {
+    renderComponent();
+
+    expect(screen.getByTestId('apiKeyForm')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('viewMCPUrlBtn'));
+
+    expect(screen.getByTestId('apiKeyForm')).toBeInTheDocument();
+  });
+});