[AI Infra] Chat experience documentation links

src/platform/packages/shared/kbn-doc-links/src/get_doc_links.ts

@@ -1056,6 +1056,7 @@ export const getDocLinks = ({ kibanaBranch, buildFlavor }: GetDocLinkOptions): D
       mcpServer: `${ELASTIC_DOCS}solutions/search/agent-builder/mcp-server`,
       a2aServer: `${ELASTIC_DOCS}solutions/search/agent-builder/a2a-server`,
       limitationsKnownIssues: `${ELASTIC_DOCS}solutions/search/agent-builder/limitations-known-issues`,
+      learnMore: `${ELASTIC_DOCS}explore-analyze/ai-features/ai-agent-or-ai-assistant`,
     },
     inferenceManagement: {
       inferenceAPIDocumentation: isServerless

src/platform/packages/shared/kbn-doc-links/src/types.ts

@@ -710,6 +710,7 @@ export interface DocLinks {
     readonly mcpServer: string;
     readonly a2aServer: string;
     readonly limitationsKnownIssues: string;
+    readonly learnMore: string;
   };
   readonly indexManagement: {
     readonly componentTemplate: string;

src/platform/plugins/shared/ai_assistant_management/selection/public/components/navigation_control/index.tsx

@@ -58,6 +58,7 @@ export const AIAssistantHeaderButton: React.FC<AIAssistantHeaderButtonProps> = (
 
   const { getUrlForApp } = coreStart.application;
   const { toasts } = coreStart.notifications;
+  const { links: docLinks } = coreStart.docLinks;
 
   const hasAgentBuilder = coreStart.application.capabilities.agentBuilder?.show === true;
   const isAiAgentsEnabled = getIsAiAgentsEnabled(coreStart.featureFlags);
@@ -160,9 +161,8 @@ export const AIAssistantHeaderButton: React.FC<AIAssistantHeaderButtonProps> = (
                       </EuiLink>
                     ),
                     learnMoreLink: (
-                      // TODO: Update link when documentation is ready
                       <EuiLink
-                        href="#"
+                        href={docLinks.agentBuilder.learnMore}
                         target="_blank"
                         data-test-subj="aiAgentBuilderLearnMoreLink"
                       >
@@ -299,6 +299,7 @@ export const AIAssistantHeaderButton: React.FC<AIAssistantHeaderButtonProps> = (
         <AIAgentConfirmationModal
           onConfirm={handleConfirmAgent}
           onCancel={() => setConfirmModalOpen(false)}
+          docLinks={docLinks}
         />
       )}
     </>

src/platform/plugins/shared/ai_assistant_management/selection/server/plugin.test.ts

@@ -73,12 +73,19 @@ describe('plugin', () => {
       });
 
       // Second call: Chat Experience setting
-      expect(coreSetup.uiSettings.register).toHaveBeenNthCalledWith(2, {
-        [PREFERRED_CHAT_EXPERIENCE_SETTING_KEY]: {
-          ...chatExperienceSetting,
-          value: AIChatExperience.Classic,
-        },
-      });
+      expect(coreSetup.uiSettings.register).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({
+          [PREFERRED_CHAT_EXPERIENCE_SETTING_KEY]: expect.objectContaining({
+            name: chatExperienceSetting.name,
+            description: chatExperienceSetting.description,
+            type: chatExperienceSetting.type,
+            options: chatExperienceSetting.options,
+            optionLabels: chatExperienceSetting.optionLabels,
+            value: AIChatExperience.Classic,
+          }),
+        })
+      );
     });
   });
 });

src/platform/plugins/shared/ai_assistant_management/selection/server/src/settings/chat_experience_setting.ts

@@ -8,23 +8,17 @@
  */
 
 import { i18n } from '@kbn/i18n';
-
 import { schema } from '@kbn/config-schema';
 import type { UiSettingsParams } from '@kbn/core-ui-settings-common';
 import { AIChatExperience } from '@kbn/ai-assistant-common';
 import { AI_AGENT, CHAT_EXPERIENCE_TITLE, CLASSIC_AI_ASSISTANT } from './translations';
 
-// Define the chatExperienceSetting with proper typing
 export const chatExperienceSetting: Omit<UiSettingsParams<AIChatExperience>, 'value'> = {
   name: CHAT_EXPERIENCE_TITLE,
   description: i18n.translate(
     'aiAssistantManagementSelection.preferredChatExperienceSettingDescription',
     {
-      defaultMessage: 'Choose which chat experience to use for everyone in this space. {link}',
-      values: {
-        // TODO: add the actual link when available
-        link: '<a href="" target="_blank" rel="noopener noreferrer" class="euiLink euiLink--primary">Learn more</a>',
-      },
+      defaultMessage: 'Choose which chat experience to use for all users in this space.',
     }
   ),
   schema: schema.oneOf(

src/platform/plugins/shared/ai_assistant_management/selection/server/src/settings/translations.ts

@@ -42,9 +42,9 @@ export const CHAT_EXPERIENCE_TITLE = i18n.translate(
 
 export const CLASSIC_AI_ASSISTANT = i18n.translate(
   'aiAssistantManagementSelection.preferredAIAssistantTypeSettingValueClassic',
-  { defaultMessage: 'Classic AI Assistant (default)' }
+  { defaultMessage: 'Classic AI Assistant' }
 );
 export const AI_AGENT = i18n.translate(
   'aiAssistantManagementSelection.preferredAIAssistantTypeSettingValueAgent',
-  { defaultMessage: 'AI Agent' }
+  { defaultMessage: 'AI Agent (Beta)' }
 );

x-pack/platform/packages/shared/ai-assistant/ai-agent-confirmation-modal/ai_agent_confirmation_modal.test.tsx

@@ -10,15 +10,26 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { AIAgentConfirmationModal } from './ai_agent_confirmation_modal';
 import { I18nProvider } from '@kbn/i18n-react';
+import type { DocLinks } from '@kbn/doc-links';
 
 describe('AIAgentConfirmationModal', () => {
   const mockOnConfirm = jest.fn();
   const mockOnCancel = jest.fn();
 
+  const mockDocLinks: DocLinks = {
+    agentBuilder: {
+      learnMore: 'https://www.elastic.co/docs/explore-analyze/ai-features/ai-agent-or-ai-assistant',
+    },
+  } as DocLinks;
+
   const renderComponent = () => {
     return render(
       <I18nProvider>
-        <AIAgentConfirmationModal onConfirm={mockOnConfirm} onCancel={mockOnCancel} />
+        <AIAgentConfirmationModal
+          onConfirm={mockOnConfirm}
+          onCancel={mockOnCancel}
+          docLinks={mockDocLinks}
+        />
       </I18nProvider>
     );
   };

x-pack/platform/packages/shared/ai-assistant/ai-agent-confirmation-modal/ai_agent_confirmation_modal.tsx

@@ -17,18 +17,20 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
+import type { DocLinks } from '@kbn/doc-links';
 
 export interface AIAgentConfirmationModalProps {
   onConfirm: () => void;
   onCancel: () => void;
+  docLinks: DocLinks;
 }
 
 export const AIAgentConfirmationModal: React.FC<AIAgentConfirmationModalProps> = ({
   onConfirm,
   onCancel,
+  docLinks,
 }) => {
   const confirmModalTitleId = useGeneratedHtmlId({ prefix: 'aiAgentConfirmModalTitle' });
-
   return (
     <EuiConfirmModal
       title={
@@ -75,9 +77,8 @@ export const AIAgentConfirmationModal: React.FC<AIAgentConfirmationModalProps> =
             br: <br />,
             bold: (str) => <strong>{str}</strong>,
             learnMoreLink: (
-              // TODO: Update link when documentation is ready
               <EuiLink
-                href="#"
+                href={docLinks.agentBuilder.learnMore}
                 target="_blank"
                 data-test-subj="AIAgentConfirmationModalLearnMoreLink"
               >

x-pack/platform/packages/shared/ai-assistant/ai-agent-confirmation-modal/moon.yml

@@ -20,6 +20,7 @@ project:
 dependsOn:
   - '@kbn/i18n'
   - '@kbn/i18n-react'
+  - '@kbn/doc-links'
 tags:
   - shared-browser
   - package

x-pack/platform/packages/shared/ai-assistant/ai-agent-confirmation-modal/tsconfig.json

@@ -22,5 +22,6 @@
   "kbn_references": [
     "@kbn/i18n",
     "@kbn/i18n-react",
+    "@kbn/doc-links",
   ]
 }

x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/settings/settings_context_menu/settings_context_menu.tsx

@@ -44,6 +44,7 @@ export const AssistantSettingsContextMenu: React.FC<Params> = React.memo(
       showAssistantOverlay,
       settings,
       toasts,
+      docLinks,
     } = useAssistantContext();
 
     const [isPopoverOpen, setPopover] = useState(false);
@@ -281,6 +282,7 @@ export const AssistantSettingsContextMenu: React.FC<Params> = React.memo(
           <AIAgentConfirmationModal
             onConfirm={handleConfirmAIAgent}
             onCancel={handleCancelAIAgent}
+            docLinks={docLinks.links}
           />
         )}
       </>

x-pack/platform/plugins/private/gen_ai_settings/public/components/chat_experience/chat_experience.tsx

@@ -5,7 +5,9 @@
  * 2.0.
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
+import { EuiLink } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { FieldRow, FieldRowProvider } from '@kbn/management-settings-components-field-row';
 import { AI_CHAT_EXPERIENCE_TYPE } from '@kbn/management-settings-ids';
 import { AIChatExperience } from '@kbn/ai-assistant-common';
@@ -22,8 +24,9 @@ export const ChatExperience: React.FC = () => {
 
   const [isConfirmModalOpen, setConfirmModalOpen] = useState(false);
   const isAiAgentsEnabled = getIsAiAgentsEnabled(featureFlags);
+  const field = fields[AI_CHAT_EXPERIENCE_TYPE];
+  const canEditAdvancedSettings = Boolean(application.capabilities.advancedSettings?.save);
 
-  // Show confirmation modal for AI Agents selection
   const wrappedHandleFieldChange: typeof handleFieldChange = useCallback(
     (id, change) => {
       if (id === AI_CHAT_EXPERIENCE_TYPE && change?.unsavedValue === AIChatExperience.Agent) {
@@ -44,15 +47,38 @@ export const ChatExperience: React.FC = () => {
     handleFieldChange(AI_CHAT_EXPERIENCE_TYPE, undefined);
   }, [handleFieldChange]);
 
-  // Don't render if AI Agents feature is disabled
-  if (!isAiAgentsEnabled) {
+  const description = useMemo(
+    () => (
+      <FormattedMessage
+        id="aiAssistantManagementSelection.preferredChatExperienceSettingDescription"
+        defaultMessage="Choose which chat experience to use for everyone in this space. {learnMoreLink}"
+        values={{
+          learnMoreLink: (
+            <EuiLink
+              href={docLinks.links.agentBuilder.learnMore}
+              target="_blank"
+              data-test-subj="aiAgentBuilderLearnMoreLink"
+            >
+              <FormattedMessage
+                id="aiAssistantManagementSelection.preferredChatExperienceSettingDescription.learnMoreLink"
+                defaultMessage="Learn more"
+              />
+            </EuiLink>
+          ),
+        }}
+      />
+    ),
+    [docLinks.links.agentBuilder.learnMore]
+  );
+
+  if (!isAiAgentsEnabled || !field) {
     return null;
   }
 
-  const field = fields[AI_CHAT_EXPERIENCE_TYPE];
-  if (!field) return null;
-
-  const canEditAdvancedSettings = application.capabilities.advancedSettings?.save;
+  const fieldWithDescription = {
+    ...field,
+    description,
+  };
 
   return (
     <>
@@ -62,15 +88,19 @@ export const ChatExperience: React.FC = () => {
         validateChange={(key: string, value: any) => settings.client.validateValue(key, value)}
       >
         <FieldRow
-          field={field}
-          isSavingEnabled={!!canEditAdvancedSettings}
+          field={fieldWithDescription}
+          isSavingEnabled={canEditAdvancedSettings}
           onFieldChange={wrappedHandleFieldChange}
           unsavedChange={unsavedChanges[AI_CHAT_EXPERIENCE_TYPE]}
         />
       </FieldRowProvider>
 
       {isConfirmModalOpen && (
-        <AIAgentConfirmationModal onConfirm={handleConfirmAgent} onCancel={handleCancelAgent} />
+        <AIAgentConfirmationModal
+          onConfirm={handleConfirmAgent}
+          onCancel={handleCancelAgent}
+          docLinks={docLinks.links}
+        />
       )}
     </>
   );

x-pack/platform/plugins/private/gen_ai_settings/public/components/gen_ai_settings_app.tsx

@@ -111,10 +111,9 @@ export const GenAiSettingsApp: React.FC<GenAiSettingsAppProps> = ({ setBreadcrum
         <p>
           <FormattedMessage
             id="genAiSettings.aiConnectorDescription"
-            defaultMessage={`A large language model (LLM) is required to power the AI Assistant and AI-powered features.
-              By default, Elastic uses its Elastic Managed LLM connector ({additionalCostsIncur}) when no custom connectors are available.
-              When available, Elastic uses the last used custom connector. Set up your own connectors or disable the AI Assistant from the AI feature visibility setting below.
-              Select a default AI connector to enforce the choice for your space. {manageConnectors}`}
+            defaultMessage={`AI-powered features require a large language model (LLM) connector. You can use the Elastic Managed LLM ({atAdditionalCost}) or configure a third-party connector. 
+              When you set a default AI connector, it is pre-selected for all of these features in this space. 
+              If you haven't set a default, the most recently used connector is selected automatically. {manageConnectors}`}
             values={{
               manageConnectors: (
                 <EuiLink
@@ -131,12 +130,14 @@ export const GenAiSettingsApp: React.FC<GenAiSettingsAppProps> = ({ setBreadcrum
                   />
                 </EuiLink>
               ),
-              additionalCostsIncur: (
-                // TODO: Update link when documentation is ready
-                <EuiLink href="#" target="_blank">
+              atAdditionalCost: (
+                <EuiLink
+                  href={docLinks?.links?.observability?.elasticManagedLlmUsageCost}
+                  target="_blank"
+                >
                   <FormattedMessage
-                    id="genAiSettings.additionalCostsLink"
-                    defaultMessage="additional costs incur"
+                    id="genAiSettings.additionalCostLink"
+                    defaultMessage="at additional cost"
                   />
                 </EuiLink>
               ),
@@ -329,7 +330,7 @@ export const GenAiSettingsApp: React.FC<GenAiSettingsAppProps> = ({ setBreadcrum
                       ) : (
                         <FormattedMessage
                           id="genAiSettings.showAIAssistantDescriptionLabel"
-                          defaultMessage="Enable or disable AI-powered features in {space} settings."
+                          defaultMessage="You can enable or disable AI-powered features from the {space} settings page."
                           values={{
                             space: (
                               <strong>
@@ -353,11 +354,14 @@ export const GenAiSettingsApp: React.FC<GenAiSettingsAppProps> = ({ setBreadcrum
                   </EuiFormRow>
                 </EuiDescribedFormGroup>
               )}
+              {showChatExperienceSetting && <EuiSpacer size="l" />}
               {showChatExperienceSetting && (
                 <EuiFlexItem>
                   <ChatExperience />
                 </EuiFlexItem>
               )}
+              {!isAgentExperience && <EuiSpacer size="l" />}
+              {!isAgentExperience && <EuiSpacer size="l" />}
               {showAiAssistantsVisibilitySetting && (
                 <EuiFlexItem>
                   <AIAssistantVisibility />