Ai settings with knowledge base

x-pack/packages/kbn-elastic-assistant/impl/alerts/settings/alerts_settings.tsx

@@ -5,67 +5,33 @@
  * 2.0.
  */
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiRange,
-  EuiSpacer,
-  EuiSwitch,
-  EuiSwitchEvent,
-  EuiText,
-  useGeneratedHtmlId,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSpacer, EuiText } from '@elastic/eui';
 import { css } from '@emotion/react';
-import React, { useCallback } from 'react';
+import React from 'react';
 
 import { KnowledgeBaseConfig } from '../../assistant/types';
+import { AlertsRange } from '../../knowledge_base/alerts_range';
+import { AlertsSwitch } from '../../knowledge_base/alerts_switch';
 import * as i18n from '../../knowledge_base/translations';
 
 export const MIN_LATEST_ALERTS = 10;
 export const MAX_LATEST_ALERTS = 100;
 export const TICK_INTERVAL = 10;
 export const RANGE_CONTAINER_WIDTH = 300; // px
-const LABEL_WRAPPER_MIN_WIDTH = 95; // px
 
 interface Props {
   knowledgeBase: KnowledgeBaseConfig;
   setUpdatedKnowledgeBaseSettings: React.Dispatch<React.SetStateAction<KnowledgeBaseConfig>>;
 }
 
 const AlertsSettingsComponent = ({ knowledgeBase, setUpdatedKnowledgeBaseSettings }: Props) => {
-  const inputRangeSliderId = useGeneratedHtmlId({ prefix: 'inputRangeSlider' });
-
-  const onEnableAlertsChange = useCallback(
-    (event: EuiSwitchEvent) => {
-      setUpdatedKnowledgeBaseSettings({
-        ...knowledgeBase,
-        isEnabledRAGAlerts: event.target.checked,
-      });
-    },
-    [knowledgeBase, setUpdatedKnowledgeBaseSettings]
-  );
-
   return (
     <>
-      <EuiFormRow
-        display="columnCompressedSwitch"
-        label={i18n.ALERTS_LABEL}
-        css={css`
-          .euiFormRow__labelWrapper {
-            min-width: ${LABEL_WRAPPER_MIN_WIDTH}px !important;
-          }
-        `}
-      >
-        <EuiSwitch
-          checked={knowledgeBase.isEnabledRAGAlerts}
-          compressed
-          data-test-subj="alertsSwitch"
-          label={i18n.ALERTS_LABEL}
-          onChange={onEnableAlertsChange}
-          showLabel={false}
-        />
-      </EuiFormRow>
+      <AlertsSwitch
+        isEnabledRAGAlerts={knowledgeBase.isEnabledRAGAlerts}
+        setUpdatedKnowledgeBaseSettings={setUpdatedKnowledgeBaseSettings}
+        knowledgeBase={knowledgeBase}
+      />
 
       <EuiSpacer size="xs" />
 
@@ -77,22 +43,9 @@ const AlertsSettingsComponent = ({ knowledgeBase, setUpdatedKnowledgeBaseSetting
           grow={false}
         >
           <EuiSpacer size="xs" />
-          <EuiRange
-            aria-label={i18n.ALERTS_RANGE}
-            compressed
-            data-test-subj="alertsRange"
-            id={inputRangeSliderId}
-            max={MAX_LATEST_ALERTS}
-            min={MIN_LATEST_ALERTS}
-            onChange={(e) =>
-              setUpdatedKnowledgeBaseSettings({
-                ...knowledgeBase,
-                latestAlerts: Number(e.currentTarget.value),
-              })
-            }
-            showTicks
-            step={TICK_INTERVAL}
-            value={knowledgeBase.latestAlerts}
+          <AlertsRange
+            knowledgeBase={knowledgeBase}
+            setUpdatedKnowledgeBaseSettings={setUpdatedKnowledgeBaseSettings}
           />
           <EuiSpacer size="s" />
         </EuiFlexItem>

x-pack/packages/kbn-elastic-assistant/impl/alerts/settings/alerts_settings_management.tsx

@@ -0,0 +1,53 @@
+/*
+ * 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 { EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import React from 'react';
+import { KnowledgeBaseConfig } from '../../assistant/types';
+import { AlertsRange } from '../../knowledge_base/alerts_range';
+import { AlertsSwitch } from '../../knowledge_base/alerts_switch';
+import * as i18n from '../../knowledge_base/translations';
+
+interface Props {
+  knowledgeBase: KnowledgeBaseConfig;
+  setUpdatedKnowledgeBaseSettings: React.Dispatch<React.SetStateAction<KnowledgeBaseConfig>>;
+}
+
+export const AlertsSettingsManagement: React.FC<Props> = React.memo(
+  ({ knowledgeBase, setUpdatedKnowledgeBaseSettings }) => {
+    return (
+      <EuiPanel hasShadow={false} hasBorder paddingSize="l" title={i18n.ALERTS_LABEL}>
+        <EuiTitle size="m">
+          <h3>{i18n.ALERTS_LABEL}</h3>
+        </EuiTitle>
+        <EuiSpacer size="m" />
+        <EuiText size="m">
+          <span>
+            {i18n.LATEST_AND_RISKIEST_OPEN_ALERTS(knowledgeBase.latestAlerts)}
+            {i18n.YOUR_ANONYMIZATION_SETTINGS}
+          </span>
+        </EuiText>
+        <EuiSpacer size="m" />
+        <AlertsSwitch
+          isEnabledRAGAlerts={knowledgeBase.isEnabledRAGAlerts}
+          compressed={false}
+          setUpdatedKnowledgeBaseSettings={setUpdatedKnowledgeBaseSettings}
+          knowledgeBase={knowledgeBase}
+          showLabel={true}
+        />
+        <EuiSpacer size="l" />
+        <AlertsRange
+          knowledgeBase={knowledgeBase}
+          setUpdatedKnowledgeBaseSettings={setUpdatedKnowledgeBaseSettings}
+          compressed={false}
+        />
+      </EuiPanel>
+    );
+  }
+);
+
+AlertsSettingsManagement.displayName = 'AlertsSettingsManagement';

x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/flyout/index.tsx

@@ -22,7 +22,7 @@ import * as i18n from './translations';
 
 interface Props {
   children: React.ReactNode;
-  title: string;
+  title?: string;
   flyoutVisible: boolean;
   onClose: () => void;
   onSaveCancelled: () => void;

x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings_management.tsx

@@ -19,6 +19,8 @@ import { ConversationSettingsManagement } from '../conversations/conversation_se
 import { QuickPromptSettingsManagement } from '../quick_prompts/quick_prompt_settings_management';
 import { SystemPromptSettingsManagement } from '../prompt_editor/system_prompt/system_prompt_settings_management';
 import { AnonymizationSettingsManagement } from '../../data_anonymization/settings/anonymization_settings_management';
+import { KnowledgeBaseSettingsManagement } from '../../knowledge_base/knowledge_base_settings_management';
+import { EvaluationSettings } from '.';
 
 import {
   ANONYMIZATION_TAB,
@@ -29,8 +31,6 @@ import {
   QUICK_PROMPTS_TAB,
   SYSTEM_PROMPTS_TAB,
 } from './const';
-import { KnowledgeBaseSettingsManagement } from '../../knowledge_base/knowledge_base_settings_management';
-import { EvaluationSettings } from '.';
 
 interface Props {
   selectedConversation: Conversation;

x-pack/packages/kbn-elastic-assistant/impl/knowledge_base/alerts_range.tsx

@@ -0,0 +1,60 @@
+/*
+ * 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 { EuiRange, useGeneratedHtmlId } from '@elastic/eui';
+import { css } from '@emotion/react';
+import React from 'react';
+import {
+  MAX_LATEST_ALERTS,
+  MIN_LATEST_ALERTS,
+  TICK_INTERVAL,
+} from '../alerts/settings/alerts_settings';
+import { KnowledgeBaseConfig } from '../assistant/types';
+import { ALERTS_RANGE } from './translations';
+
+interface Props {
+  knowledgeBase: KnowledgeBaseConfig;
+  setUpdatedKnowledgeBaseSettings: React.Dispatch<React.SetStateAction<KnowledgeBaseConfig>>;
+  compressed?: boolean;
+}
+
+const MAX_ALERTS_RANGE_WIDTH = 649; // px
+
+export const AlertsRange: React.FC<Props> = React.memo(
+  ({ knowledgeBase, setUpdatedKnowledgeBaseSettings, compressed = true }) => {
+    const inputRangeSliderId = useGeneratedHtmlId({ prefix: 'inputRangeSlider' });
+
+    return (
+      <EuiRange
+        aria-label={ALERTS_RANGE}
+        compressed={compressed}
+        data-test-subj="alertsRange"
+        id={inputRangeSliderId}
+        max={MAX_LATEST_ALERTS}
+        min={MIN_LATEST_ALERTS}
+        onChange={(e) =>
+          setUpdatedKnowledgeBaseSettings({
+            ...knowledgeBase,
+            latestAlerts: Number(e.currentTarget.value),
+          })
+        }
+        showTicks
+        step={TICK_INTERVAL}
+        value={knowledgeBase.latestAlerts}
+        css={css`
+          max-inline-size: ${MAX_ALERTS_RANGE_WIDTH}px;
+          & .euiRangeTrack {
+            margin-inline-start: 0;
+            margin-inline-end: 0;
+          }
+        `}
+      />
+    );
+  }
+);
+
+AlertsRange.displayName = 'AlertsRange';

x-pack/packages/kbn-elastic-assistant/impl/knowledge_base/alerts_switch.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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 { EuiFormRow, EuiSwitch, EuiSwitchEvent, EuiText, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/css';
+import React, { useCallback } from 'react';
+import { KnowledgeBaseConfig } from '../assistant/types';
+import { SEND_ALERTS_LABEL } from './translations';
+
+interface Props {
+  compressed?: boolean;
+  isEnabledRAGAlerts: boolean;
+  knowledgeBase: KnowledgeBaseConfig;
+  setUpdatedKnowledgeBaseSettings: React.Dispatch<React.SetStateAction<KnowledgeBaseConfig>>;
+  showLabel?: boolean;
+}
+const LABEL_WRAPPER_MIN_WIDTH = 95; // px
+
+export const AlertsSwitch: React.FC<Props> = React.memo(
+  ({
+    isEnabledRAGAlerts,
+    compressed = true,
+    setUpdatedKnowledgeBaseSettings,
+    knowledgeBase,
+    showLabel,
+  }) => {
+    const { euiTheme } = useEuiTheme();
+
+    const onEnableAlertsChange = useCallback(
+      (event: EuiSwitchEvent) => {
+        setUpdatedKnowledgeBaseSettings({
+          ...knowledgeBase,
+          isEnabledRAGAlerts: event.target.checked,
+        });
+      },
+      [knowledgeBase, setUpdatedKnowledgeBaseSettings]
+    );
+    return (
+      <EuiFormRow
+        display={compressed ? 'columnCompressedSwitch' : 'row'}
+        css={css`
+          .euiFormRow__labelWrapper {
+            min-width: ${LABEL_WRAPPER_MIN_WIDTH}px !important;
+          }
+        `}
+      >
+        <EuiSwitch
+          checked={isEnabledRAGAlerts}
+          compressed={compressed}
+          data-test-subj="alertsSwitch"
+          label={<EuiText size="s">{SEND_ALERTS_LABEL}</EuiText>}
+          onChange={onEnableAlertsChange}
+          showLabel={showLabel}
+          labelProps={
+            compressed
+              ? {}
+              : {
+                  style: {
+                    paddingLeft: euiTheme.size.base,
+                  },
+                }
+          }
+        />
+      </EuiFormRow>
+    );
+  }
+);
+AlertsSwitch.displayName = 'AlertsSwitch';

x-pack/packages/kbn-elastic-assistant/impl/knowledge_base/const.ts

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+export const ESQL_RESOURCE = 'esql';
+export const KNOWLEDGE_BASE_INDEX_PATTERN_OLD = '.kibana-elastic-ai-assistant-kb';
+export const KNOWLEDGE_BASE_INDEX_PATTERN = '.kibana-elastic-ai-assistant-knowledge-base-(SPACE)';