= ({
setIsSettingsModalVisible={setIsSettingsModalVisible}
onConversationSelected={onConversationSelected}
conversations={conversations}
+ conversationsLoaded={conversationsLoaded}
refetchConversationsState={refetchConversationsState}
isFlyoutMode={false}
/>
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/badges/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/badges/index.tsx
new file mode 100644
index 0000000000000..3a93da1e6f72a
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/badges/index.tsx
@@ -0,0 +1,23 @@
+/*
+ * 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 { EuiBadge } from '@elastic/eui';
+import React from 'react';
+
+export const BadgesColumn: React.FC<{ items: string[] | null | undefined; prefix: string }> =
+ React.memo(({ items, prefix }) =>
+ items && items.length > 0 ? (
+
+ {items.map((c, idx) => (
+
+ {c}
+
+ ))}
+
+ ) : null
+ );
+BadgesColumn.displayName = 'BadgesColumn';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/flyout/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/flyout/index.tsx
new file mode 100644
index 0000000000000..e749fb483d504
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/flyout/index.tsx
@@ -0,0 +1,85 @@
+/*
+ * 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 {
+ EuiButton,
+ EuiButtonEmpty,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFlyout,
+ EuiFlyoutBody,
+ EuiFlyoutFooter,
+ EuiFlyoutHeader,
+ EuiTitle,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
+import React from 'react';
+import * as i18n from './translations';
+
+interface Props {
+ children: React.ReactNode;
+ title: string;
+ flyoutVisible: boolean;
+ onClose: () => void;
+ onSaveCancelled: () => void;
+ onSaveConfirmed: () => void;
+}
+
+const FlyoutComponent: React.FC = ({
+ title,
+ flyoutVisible,
+ children,
+ onClose,
+ onSaveCancelled,
+ onSaveConfirmed,
+}) => {
+ return flyoutVisible ? (
+
+
+
+ {title}
+
+
+ {children}
+
+
+
+
+ {i18n.FLYOUT_CANCEL_BUTTON_TITLE}
+
+
+
+
+ {i18n.FLYOUT_SAVE_BUTTON_TITLE}
+
+
+
+
+
+ ) : null;
+};
+
+export const Flyout = React.memo(FlyoutComponent);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/flyout/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/flyout/translations.ts
new file mode 100644
index 0000000000000..f25348cd8b5d6
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/flyout/translations.ts
@@ -0,0 +1,22 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const FLYOUT_SAVE_BUTTON_TITLE = i18n.translate(
+ 'xpack.elasticAssistant.assistant.settings.flyout.saveButtonTitle',
+ {
+ defaultMessage: 'Save',
+ }
+);
+
+export const FLYOUT_CANCEL_BUTTON_TITLE = i18n.translate(
+ 'xpack.elasticAssistant.assistant.settings.flyout.cancelButtonTitle',
+ {
+ defaultMessage: 'Cancel',
+ }
+);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/flyout/use_flyout_modal_visibility.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/flyout/use_flyout_modal_visibility.ts
new file mode 100644
index 0000000000000..ad3da6b12242e
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/flyout/use_flyout_modal_visibility.ts
@@ -0,0 +1,29 @@
+/*
+ * 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 { useMemo, useState } from 'react';
+
+export const useFlyoutModalVisibility = () => {
+ const [isFlyoutOpen, setIsFlyoutOpen] = useState(false);
+
+ const openFlyout = () => {
+ setIsFlyoutOpen(true);
+ };
+
+ const closeFlyout = () => {
+ setIsFlyoutOpen(false);
+ };
+
+ return useMemo(
+ () => ({
+ isFlyoutOpen,
+ openFlyout,
+ closeFlyout,
+ }),
+ [isFlyoutOpen]
+ );
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/pagination/use_session_pagination.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/pagination/use_session_pagination.ts
new file mode 100644
index 0000000000000..daaccc1fc6992
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/pagination/use_session_pagination.ts
@@ -0,0 +1,65 @@
+/*
+ * 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 { Direction } from '@elastic/eui';
+import { useCallback, useMemo } from 'react';
+import useSessionStorage from 'react-use/lib/useSessionStorage';
+import { DEFAULT_ASSISTANT_NAMESPACE } from '../../../../../assistant_context/constants';
+import { DEFAULT_PAGE_SIZE } from '../../../../settings/const';
+
+export const DEFAULT_TABLE_OPTIONS = {
+ page: { size: DEFAULT_PAGE_SIZE, index: 0 },
+ sort: { field: '', direction: 'asc' as const },
+};
+
+export const useSessionPagination = ({
+ defaultTableOptions,
+ nameSpace = DEFAULT_ASSISTANT_NAMESPACE,
+ storageKey,
+}: {
+ defaultTableOptions: {
+ page: { size: number; index: number };
+ sort: { field: string; direction: Direction };
+ };
+ nameSpace?: string;
+ storageKey: string;
+}) => {
+ const [sessionStorageTableOptions = defaultTableOptions, setSessionStorageTableOptions] =
+ useSessionStorage(`${nameSpace}.${storageKey}`, defaultTableOptions);
+
+ const pagination = useMemo(
+ () => ({
+ initialPageSize: sessionStorageTableOptions.page.size,
+ pageSizeOptions: [5, 10, DEFAULT_PAGE_SIZE, 50],
+ pageIndex: sessionStorageTableOptions.page.index,
+ }),
+ [sessionStorageTableOptions]
+ );
+
+ const sorting = useMemo(
+ () => ({
+ sort: sessionStorageTableOptions.sort,
+ }),
+ [sessionStorageTableOptions.sort]
+ );
+
+ const onTableChange = useCallback(
+ ({ page, sort }) => {
+ setSessionStorageTableOptions({
+ page,
+ sort,
+ });
+ },
+ [setSessionStorageTableOptions]
+ );
+
+ return {
+ onTableChange,
+ pagination,
+ sorting,
+ };
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/row_actions/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/row_actions/index.tsx
new file mode 100644
index 0000000000000..b2d31ec80433f
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/row_actions/index.tsx
@@ -0,0 +1,89 @@
+/*
+ * 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 { EuiButtonEmpty, EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiPopover } from '@elastic/eui';
+import React, { useCallback, useState } from 'react';
+import * as i18n from './translations';
+
+interface Props {
+ isDeletable?: boolean;
+ isEditable?: boolean;
+ onDelete?: (rowItem: T) => void;
+ onEdit?: (rowItem: T) => void;
+ rowItem: T;
+}
+
+type RowActionsComponentType = (props: Props) => JSX.Element;
+
+const RowActionsComponent = ({
+ isDeletable = true,
+ isEditable = true,
+ onDelete,
+ onEdit,
+ rowItem,
+}: Props) => {
+ const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+ const closePopover = useCallback(() => setIsPopoverOpen(false), []);
+ const handleEdit = useCallback(() => {
+ closePopover();
+ onEdit?.(rowItem);
+ }, [closePopover, onEdit, rowItem]);
+
+ const handleDelete = useCallback(() => {
+ closePopover();
+ onDelete?.(rowItem);
+ }, [closePopover, onDelete, rowItem]);
+
+ const onButtonClick = useCallback(() => setIsPopoverOpen((prevState) => !prevState), []);
+ return onEdit || onDelete ? (
+
+ }
+ isOpen={isPopoverOpen}
+ closePopover={closePopover}
+ anchorPosition="downLeft"
+ >
+
+ {onEdit != null && (
+
+
+ {i18n.EDIT_BUTTON}
+
+
+ )}
+ {onDelete != null && (
+
+
+ {i18n.DELETE_BUTTON}
+
+
+ )}
+
+
+ ) : null;
+};
+
+// casting to correctly infer the param of onEdit and onDelete when reusing this component
+export const RowActions = React.memo(RowActionsComponent) as RowActionsComponentType;
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/row_actions/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/row_actions/translations.ts
new file mode 100644
index 0000000000000..1a2430cb6428c
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/row_actions/translations.ts
@@ -0,0 +1,22 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const EDIT_BUTTON = i18n.translate(
+ 'xpack.elasticAssistant.assistant.settings.editButtonTitle',
+ {
+ defaultMessage: 'Edit',
+ }
+);
+
+export const DELETE_BUTTON = i18n.translate(
+ 'xpack.elasticAssistant.assistant.settings.deleteButtonTitle',
+ {
+ defaultMessage: 'Delete',
+ }
+);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_selector_settings/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_selector_settings/index.tsx
index 286be81f531f3..f4b8f9a79412f 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_selector_settings/index.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_selector_settings/index.tsx
@@ -8,7 +8,6 @@
import {
EuiButtonIcon,
EuiComboBox,
- EuiComboBoxOptionOption,
EuiFlexGroup,
EuiFlexItem,
EuiFormRow,
@@ -21,6 +20,7 @@ import { css } from '@emotion/react';
import { Conversation } from '../../../..';
import * as i18n from '../conversation_selector/translations';
import { SystemPromptSelectorOption } from '../../prompt_editor/system_prompt/system_prompt_modal/system_prompt_selector/system_prompt_selector';
+import { ConversationSelectorSettingsOption } from './types';
interface Props {
conversations: Record;
@@ -49,10 +49,6 @@ const getNextConversationTitle = (
: conversationTitles[conversationTitles.indexOf(selectedConversationTitle) + 1];
};
-export type ConversationSelectorSettingsOption = EuiComboBoxOptionOption<{
- isDefault: boolean;
-}>;
-
/**
* A disconnected variant of the ConversationSelector component that allows for
* modifiable settings without persistence. Also changes some styling and removes
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_selector_settings/types.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_selector_settings/types.ts
new file mode 100644
index 0000000000000..548149ffe0c7b
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_selector_settings/types.ts
@@ -0,0 +1,12 @@
+/*
+ * 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 { EuiComboBoxOptionOption } from '@elastic/eui';
+
+export type ConversationSelectorSettingsOption = EuiComboBoxOptionOption<{
+ isDefault: boolean;
+}>;
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_settings.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_settings.test.tsx
index 10fbcdbb842a7..104b55987bc42 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_settings.test.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_settings.test.tsx
@@ -180,7 +180,10 @@ describe('ConversationSettings', () => {
);
fireEvent.click(getByTestId('change-new-convo'));
- expect(onSelectedConversationChange).toHaveBeenCalledWith({ ...mockConvo, id: '' });
+ expect(onSelectedConversationChange).toHaveBeenCalledWith({
+ ...mockConvo,
+ id: mockConvo.title,
+ });
expect(setConversationsSettingsBulkActions).toHaveBeenCalledWith({
create: {
[mockConvo.title]: { ...mockConvo, id: '' },
@@ -205,7 +208,7 @@ describe('ConversationSettings', () => {
...mockConvos,
[newConvo.title]: newConvo,
});
- expect(onSelectedConversationChange).toHaveBeenCalledWith(newConvo);
+ expect(onSelectedConversationChange).toHaveBeenCalledWith({ ...newConvo, id: newConvo.title });
});
it('Deleting a conversation removes it from the convo settings', () => {
const { getByTestId } = render(
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_settings.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_settings.tsx
index 179ff7524bd88..adf2e012c0b8f 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_settings.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_settings.tsx
@@ -6,37 +6,35 @@
*/
import {
- EuiFormRow,
- EuiLink,
EuiTitle,
EuiText,
EuiHorizontalRule,
EuiSpacer,
+ EuiFormRow,
EuiSwitch,
} from '@elastic/eui';
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
import { HttpSetup } from '@kbn/core-http-browser';
-import { FormattedMessage } from '@kbn/i18n-react';
-import { OpenAiProviderType } from '@kbn/stack-connectors-plugin/public/common';
-import { noop } from 'lodash/fp';
+
import { ActionTypeRegistryContract } from '@kbn/triggers-actions-ui-plugin/public';
import { Conversation, Prompt } from '../../../..';
import * as i18n from './translations';
-import * as i18nModel from '../../../connectorland/models/model_selector/translations';
-import { AIConnector, ConnectorSelector } from '../../../connectorland/connector_selector';
-import { SelectSystemPrompt } from '../../prompt_editor/system_prompt/select_system_prompt';
-import { ModelSelector } from '../../../connectorland/models/model_selector/model_selector';
+import { AIConnector } from '../../../connectorland/connector_selector';
+
import { ConversationSelectorSettings } from '../conversation_selector_settings';
-import { getDefaultSystemPrompt } from '../../use_conversation/helpers';
-import { useLoadConnectors } from '../../../connectorland/use_load_connectors';
-import { getGenAiConfig } from '../../../connectorland/helpers';
+
import { ConversationsBulkActions } from '../../api';
+import { useConversationDeleted } from './use_conversation_deleted';
+import { ConversationSettingsEditor } from './conversation_settings_editor';
+import { useConversationChanged } from './use_conversation_changed';
+import { getConversationApiConfig } from '../../use_conversation/helpers';
export interface ConversationSettingsProps {
actionTypeRegistry: ActionTypeRegistryContract;
allSystemPrompts: Prompt[];
+ connectors?: AIConnector[];
conversationSettings: Record;
conversationsSettingsBulkActions: ConversationsBulkActions;
defaultConnector?: AIConnector;
@@ -60,6 +58,7 @@ export const ConversationSettings: React.FC = React.m
({
allSystemPrompts,
assistantStreamingEnabled,
+ connectors,
defaultConnector,
selectedConversation,
onSelectedConversationChange,
@@ -72,300 +71,39 @@ export const ConversationSettings: React.FC = React.m
conversationsSettingsBulkActions,
setConversationsSettingsBulkActions,
}) => {
- const defaultSystemPrompt = useMemo(() => {
- return getDefaultSystemPrompt({ allSystemPrompts, conversation: undefined });
- }, [allSystemPrompts]);
-
- const selectedSystemPrompt = useMemo(() => {
- return getDefaultSystemPrompt({ allSystemPrompts, conversation: selectedConversation });
- }, [allSystemPrompts, selectedConversation]);
+ const onConversationSelectionChange = useConversationChanged({
+ allSystemPrompts,
+ conversationSettings,
+ conversationsSettingsBulkActions,
+ defaultConnector,
+ setConversationSettings,
+ setConversationsSettingsBulkActions,
+ onSelectedConversationChange,
+ });
- const { data: connectors, isSuccess: areConnectorsFetched } = useLoadConnectors({
- http,
+ const onConversationDeleted = useConversationDeleted({
+ conversationSettings,
+ conversationsSettingsBulkActions,
+ setConversationSettings,
+ setConversationsSettingsBulkActions,
});
- const selectedConversationId = useMemo(
+ const selectedConversationWithApiConfig = useMemo(
() =>
- selectedConversation?.id === ''
- ? selectedConversation.title
- : (selectedConversation?.id as string),
- [selectedConversation]
- );
-
- // Conversation callbacks
- // When top level conversation selection changes
- const onConversationSelectionChange = useCallback(
- (c?: Conversation | string) => {
- const isNew = typeof c === 'string';
-
- const newSelectedConversation: Conversation | undefined = isNew
+ selectedConversation
? {
- id: '',
- title: c ?? '',
- category: 'assistant',
- messages: [],
- replacements: {},
- ...(defaultConnector
- ? {
- apiConfig: {
- connectorId: defaultConnector.id,
- actionTypeId: defaultConnector.actionTypeId,
- provider: defaultConnector.apiProvider,
- defaultSystemPromptId: defaultSystemPrompt?.id,
- },
- }
- : {}),
+ ...selectedConversation,
+ ...getConversationApiConfig({
+ allSystemPrompts,
+ conversation: selectedConversation,
+ connectors,
+ defaultConnector,
+ }),
}
- : c;
-
- if (newSelectedConversation && (isNew || newSelectedConversation.id === '')) {
- setConversationSettings({
- ...conversationSettings,
- [isNew ? c : newSelectedConversation.title]: newSelectedConversation,
- });
- setConversationsSettingsBulkActions({
- ...conversationsSettingsBulkActions,
- create: {
- ...(conversationsSettingsBulkActions.create ?? {}),
- [newSelectedConversation.title]: newSelectedConversation,
- },
- });
- } else if (newSelectedConversation != null) {
- setConversationSettings((prev) => {
- return {
- ...prev,
- [newSelectedConversation.id]: newSelectedConversation,
- };
- });
- }
-
- onSelectedConversationChange(newSelectedConversation);
- },
- [
- conversationSettings,
- conversationsSettingsBulkActions,
- defaultConnector,
- defaultSystemPrompt?.id,
- onSelectedConversationChange,
- setConversationSettings,
- setConversationsSettingsBulkActions,
- ]
+ : selectedConversation,
+ [allSystemPrompts, connectors, defaultConnector, selectedConversation]
);
- const onConversationDeleted = useCallback(
- (conversationTitle: string) => {
- const conversationId =
- Object.values(conversationSettings).find((c) => c.title === conversationTitle)?.id ?? '';
- const updatedConversationSettings = { ...conversationSettings };
- delete updatedConversationSettings[conversationId];
- setConversationSettings(updatedConversationSettings);
-
- setConversationsSettingsBulkActions({
- ...conversationsSettingsBulkActions,
- delete: {
- ids: [...(conversationsSettingsBulkActions.delete?.ids ?? []), conversationId],
- },
- });
- },
- [
- conversationSettings,
- conversationsSettingsBulkActions,
- setConversationSettings,
- setConversationsSettingsBulkActions,
- ]
- );
-
- const handleOnSystemPromptSelectionChange = useCallback(
- (systemPromptId?: string | undefined) => {
- if (selectedConversation != null && selectedConversation.apiConfig) {
- const updatedConversation = {
- ...selectedConversation,
- apiConfig: {
- ...selectedConversation.apiConfig,
- defaultSystemPromptId: systemPromptId,
- },
- };
- setConversationSettings({
- ...conversationSettings,
- [updatedConversation.id]: updatedConversation,
- });
- if (selectedConversation.id !== '') {
- setConversationsSettingsBulkActions({
- ...conversationsSettingsBulkActions,
- update: {
- ...(conversationsSettingsBulkActions.update ?? {}),
- [updatedConversation.id]: {
- ...updatedConversation,
- ...(conversationsSettingsBulkActions.update
- ? conversationsSettingsBulkActions.update[updatedConversation.id] ?? {}
- : {}),
- apiConfig: {
- ...updatedConversation.apiConfig,
- ...((conversationsSettingsBulkActions.update
- ? conversationsSettingsBulkActions.update[updatedConversation.id] ?? {}
- : {}
- ).apiConfig ?? {}),
- defaultSystemPromptId: systemPromptId,
- },
- },
- },
- });
- } else {
- setConversationsSettingsBulkActions({
- ...conversationsSettingsBulkActions,
- create: {
- ...(conversationsSettingsBulkActions.create ?? {}),
- [updatedConversation.id]: updatedConversation,
- },
- });
- }
- }
- },
- [
- conversationSettings,
- conversationsSettingsBulkActions,
- selectedConversation,
- setConversationSettings,
- setConversationsSettingsBulkActions,
- ]
- );
-
- const selectedConnector = useMemo(() => {
- const selectedConnectorId = selectedConversation?.apiConfig?.connectorId;
- if (areConnectorsFetched) {
- return connectors?.find((c) => c.id === selectedConnectorId);
- }
- return undefined;
- }, [areConnectorsFetched, connectors, selectedConversation?.apiConfig?.connectorId]);
-
- const selectedProvider = useMemo(
- () => selectedConversation?.apiConfig?.provider,
- [selectedConversation?.apiConfig?.provider]
- );
-
- const handleOnConnectorSelectionChange = useCallback(
- (connector) => {
- if (selectedConversation != null) {
- const config = getGenAiConfig(connector);
- const updatedConversation = {
- ...selectedConversation,
- apiConfig: {
- ...selectedConversation.apiConfig,
- connectorId: connector.id,
- actionTypeId: connector.actionTypeId,
- provider: config?.apiProvider,
- model: config?.defaultModel,
- },
- };
- setConversationSettings({
- ...conversationSettings,
- [selectedConversationId]: updatedConversation,
- });
- if (selectedConversation.id !== '') {
- setConversationsSettingsBulkActions({
- ...conversationsSettingsBulkActions,
- update: {
- ...(conversationsSettingsBulkActions.update ?? {}),
- [updatedConversation.id]: {
- ...updatedConversation,
- ...(conversationsSettingsBulkActions.update
- ? conversationsSettingsBulkActions.update[updatedConversation.id] ?? {}
- : {}),
- apiConfig: {
- ...updatedConversation.apiConfig,
- ...((conversationsSettingsBulkActions.update
- ? conversationsSettingsBulkActions.update[updatedConversation.id] ?? {}
- : {}
- ).apiConfig ?? {}),
- connectorId: connector?.id,
- actionTypeId: connector?.actionTypeId,
- provider: config?.apiProvider,
- model: config?.defaultModel,
- },
- },
- },
- });
- } else {
- setConversationsSettingsBulkActions({
- ...conversationsSettingsBulkActions,
- create: {
- ...(conversationsSettingsBulkActions.create ?? {}),
- [updatedConversation.id]: updatedConversation,
- },
- });
- }
- }
- },
- [
- conversationSettings,
- conversationsSettingsBulkActions,
- selectedConversation,
- selectedConversationId,
- setConversationSettings,
- setConversationsSettingsBulkActions,
- ]
- );
-
- const selectedModel = useMemo(() => {
- const connectorModel = getGenAiConfig(selectedConnector)?.defaultModel;
- // Prefer conversation configuration over connector default
- return selectedConversation?.apiConfig?.model ?? connectorModel;
- }, [selectedConnector, selectedConversation?.apiConfig?.model]);
-
- const handleOnModelSelectionChange = useCallback(
- (model?: string) => {
- if (selectedConversation != null && selectedConversation.apiConfig) {
- const updatedConversation = {
- ...selectedConversation,
- apiConfig: {
- ...selectedConversation.apiConfig,
- model,
- },
- };
- setConversationSettings({
- ...conversationSettings,
- [updatedConversation.id]: updatedConversation,
- });
- if (selectedConversation.id !== '') {
- setConversationsSettingsBulkActions({
- ...conversationsSettingsBulkActions,
- update: {
- ...(conversationsSettingsBulkActions.update ?? {}),
- [updatedConversation.id]: {
- ...updatedConversation,
- ...(conversationsSettingsBulkActions.update
- ? conversationsSettingsBulkActions.update[updatedConversation.id] ?? {}
- : {}),
- apiConfig: {
- ...updatedConversation.apiConfig,
- ...((conversationsSettingsBulkActions.update
- ? conversationsSettingsBulkActions.update[updatedConversation.id] ?? {}
- : {}
- ).apiConfig ?? {}),
- model,
- },
- },
- },
- });
- } else {
- setConversationsSettingsBulkActions({
- ...conversationsSettingsBulkActions,
- create: {
- ...(conversationsSettingsBulkActions.create ?? {}),
- [updatedConversation.id]: updatedConversation,
- },
- });
- }
- }
- },
- [
- conversationSettings,
- conversationsSettingsBulkActions,
- selectedConversation,
- setConversationSettings,
- setConversationsSettingsBulkActions,
- ]
- );
return (
<>
@@ -382,67 +120,18 @@ export const ConversationSettings: React.FC = React.m
onConversationSelectionChange={onConversationSelectionChange}
/>
-
-
-
-
-
-
-
- }
- >
-
-
+
- {selectedConnector?.isPreconfigured === false &&
- selectedProvider === OpenAiProviderType.OpenAi && (
-
-
-
- )}
{i18n.SETTINGS_ALL_TITLE}
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_settings_editor.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_settings_editor.tsx
new file mode 100644
index 0000000000000..a0ddd33b34d05
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_settings_editor.tsx
@@ -0,0 +1,328 @@
+/*
+ * 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, EuiLink } from '@elastic/eui';
+import React, { useCallback, useMemo } from 'react';
+
+import { HttpSetup } from '@kbn/core-http-browser';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { OpenAiProviderType } from '@kbn/stack-connectors-plugin/public/common';
+import { noop } from 'lodash/fp';
+import { Conversation, Prompt } from '../../../..';
+import * as i18n from './translations';
+import * as i18nModel from '../../../connectorland/models/model_selector/translations';
+
+import { ConnectorSelector } from '../../../connectorland/connector_selector';
+import { SelectSystemPrompt } from '../../prompt_editor/system_prompt/select_system_prompt';
+import { ModelSelector } from '../../../connectorland/models/model_selector/model_selector';
+import { useLoadConnectors } from '../../../connectorland/use_load_connectors';
+import { getGenAiConfig } from '../../../connectorland/helpers';
+import { ConversationsBulkActions } from '../../api';
+import { getDefaultSystemPrompt } from '../../use_conversation/helpers';
+
+export interface ConversationSettingsEditorProps {
+ allSystemPrompts: Prompt[];
+ conversationSettings: Record;
+ conversationsSettingsBulkActions: ConversationsBulkActions;
+ http: HttpSetup;
+ isDisabled?: boolean;
+ isFlyoutMode: boolean;
+ selectedConversation?: Conversation;
+ setConversationSettings: React.Dispatch>>;
+ setConversationsSettingsBulkActions: React.Dispatch<
+ React.SetStateAction
+ >;
+}
+
+/**
+ * Settings for adding/removing conversation and configuring default system prompt and connector.
+ */
+export const ConversationSettingsEditor: React.FC = React.memo(
+ ({
+ allSystemPrompts,
+ selectedConversation,
+ conversationSettings,
+ http,
+ isDisabled = false,
+ isFlyoutMode,
+ setConversationSettings,
+ conversationsSettingsBulkActions,
+ setConversationsSettingsBulkActions,
+ }) => {
+ const { data: connectors, isSuccess: areConnectorsFetched } = useLoadConnectors({
+ http,
+ });
+
+ const selectedSystemPrompt = useMemo(() => {
+ return getDefaultSystemPrompt({ allSystemPrompts, conversation: selectedConversation });
+ }, [allSystemPrompts, selectedConversation]);
+ const handleOnSystemPromptSelectionChange = useCallback(
+ (systemPromptId?: string | undefined) => {
+ if (selectedConversation != null && selectedConversation.apiConfig) {
+ const updatedConversation = {
+ ...selectedConversation,
+ apiConfig: {
+ ...selectedConversation.apiConfig,
+ defaultSystemPromptId: systemPromptId,
+ },
+ };
+ setConversationSettings({
+ ...conversationSettings,
+ [updatedConversation.id || updatedConversation.title]: updatedConversation,
+ });
+ if (selectedConversation.id !== '') {
+ setConversationsSettingsBulkActions({
+ ...conversationsSettingsBulkActions,
+ update: {
+ ...(conversationsSettingsBulkActions.update ?? {}),
+ [updatedConversation.id]: {
+ ...updatedConversation,
+ ...(conversationsSettingsBulkActions.update
+ ? conversationsSettingsBulkActions.update[updatedConversation.id] ?? {}
+ : {}),
+ apiConfig: {
+ ...updatedConversation.apiConfig,
+ ...((conversationsSettingsBulkActions.update
+ ? conversationsSettingsBulkActions.update[updatedConversation.id] ?? {}
+ : {}
+ ).apiConfig ?? {}),
+ defaultSystemPromptId: systemPromptId,
+ },
+ },
+ },
+ });
+ } else {
+ setConversationsSettingsBulkActions({
+ ...conversationsSettingsBulkActions,
+ create: {
+ ...(conversationsSettingsBulkActions.create ?? {}),
+ [updatedConversation.title]: updatedConversation,
+ },
+ });
+ }
+ }
+ },
+ [
+ conversationSettings,
+ conversationsSettingsBulkActions,
+ selectedConversation,
+ setConversationSettings,
+ setConversationsSettingsBulkActions,
+ ]
+ );
+
+ const selectedConnector = useMemo(() => {
+ const selectedConnectorId: string | undefined = selectedConversation?.apiConfig?.connectorId;
+ if (areConnectorsFetched) {
+ return connectors?.find((c) => c.id === selectedConnectorId);
+ }
+ return undefined;
+ }, [areConnectorsFetched, connectors, selectedConversation?.apiConfig?.connectorId]);
+
+ const selectedProvider = useMemo(
+ () => selectedConversation?.apiConfig?.provider,
+ [selectedConversation?.apiConfig?.provider]
+ );
+
+ const selectedConversationId = useMemo(
+ () =>
+ selectedConversation?.id === ''
+ ? selectedConversation.title
+ : (selectedConversation?.id as string),
+ [selectedConversation]
+ );
+ const handleOnConnectorSelectionChange = useCallback(
+ (connector) => {
+ if (selectedConversation != null) {
+ const config = getGenAiConfig(connector);
+ const updatedConversation = {
+ ...selectedConversation,
+ apiConfig: {
+ ...selectedConversation.apiConfig,
+ connectorId: connector.id,
+ actionTypeId: connector.actionTypeId,
+ provider: config?.apiProvider,
+ model: config?.defaultModel,
+ },
+ };
+ setConversationSettings({
+ ...conversationSettings,
+ [selectedConversationId]: updatedConversation,
+ });
+ if (selectedConversation.id !== '') {
+ setConversationsSettingsBulkActions({
+ ...conversationsSettingsBulkActions,
+ update: {
+ ...(conversationsSettingsBulkActions.update ?? {}),
+ [updatedConversation.id || updatedConversation.title]: {
+ ...updatedConversation,
+ ...(conversationsSettingsBulkActions.update
+ ? conversationsSettingsBulkActions.update[updatedConversation.id] ?? {}
+ : {}),
+ apiConfig: {
+ ...updatedConversation.apiConfig,
+ ...((conversationsSettingsBulkActions.update
+ ? conversationsSettingsBulkActions.update[updatedConversation.id] ?? {}
+ : {}
+ ).apiConfig ?? {}),
+ connectorId: connector?.id,
+ actionTypeId: connector?.actionTypeId,
+ provider: config?.apiProvider,
+ model: config?.defaultModel,
+ },
+ },
+ },
+ });
+ } else {
+ setConversationsSettingsBulkActions({
+ ...conversationsSettingsBulkActions,
+ create: {
+ ...(conversationsSettingsBulkActions.create ?? {}),
+ [updatedConversation.title || updatedConversation.id]: updatedConversation,
+ },
+ });
+ }
+ }
+ },
+ [
+ conversationSettings,
+ conversationsSettingsBulkActions,
+ selectedConversation,
+ selectedConversationId,
+ setConversationSettings,
+ setConversationsSettingsBulkActions,
+ ]
+ );
+
+ const selectedModel = useMemo(() => {
+ const connectorModel = getGenAiConfig(selectedConnector)?.defaultModel;
+ // Prefer conversation configuration over connector default
+ return selectedConversation?.apiConfig?.model ?? connectorModel;
+ }, [selectedConnector, selectedConversation?.apiConfig?.model]);
+
+ const handleOnModelSelectionChange = useCallback(
+ (model?: string) => {
+ if (selectedConversation != null && selectedConversation.apiConfig) {
+ const updatedConversation = {
+ ...selectedConversation,
+ apiConfig: {
+ ...selectedConversation.apiConfig,
+ model,
+ },
+ };
+ setConversationSettings({
+ ...conversationSettings,
+ [updatedConversation.id || updatedConversation.title]: updatedConversation,
+ });
+ if (selectedConversation.id !== '') {
+ setConversationsSettingsBulkActions({
+ ...conversationsSettingsBulkActions,
+ update: {
+ ...(conversationsSettingsBulkActions.update ?? {}),
+ [updatedConversation.id]: {
+ ...updatedConversation,
+ ...(conversationsSettingsBulkActions.update
+ ? conversationsSettingsBulkActions.update[updatedConversation.id] ?? {}
+ : {}),
+ apiConfig: {
+ ...updatedConversation.apiConfig,
+ ...((conversationsSettingsBulkActions.update
+ ? conversationsSettingsBulkActions.update[updatedConversation.id] ?? {}
+ : {}
+ ).apiConfig ?? {}),
+ model,
+ },
+ },
+ },
+ });
+ } else {
+ setConversationsSettingsBulkActions({
+ ...conversationsSettingsBulkActions,
+ create: {
+ ...(conversationsSettingsBulkActions.create ?? {}),
+ [updatedConversation.id || updatedConversation.title]: updatedConversation,
+ },
+ });
+ }
+ }
+ },
+ [
+ conversationSettings,
+ conversationsSettingsBulkActions,
+ selectedConversation,
+ setConversationSettings,
+ setConversationsSettingsBulkActions,
+ ]
+ );
+ return (
+ <>
+
+
+
+
+
+
+
+ }
+ >
+
+
+
+ {selectedConnector?.isPreconfigured === false &&
+ selectedProvider === OpenAiProviderType.OpenAi && (
+
+
+
+ )}
+
+ );
+ }
+);
+ConversationSettingsEditor.displayName = 'ConversationSettingsEditor';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_streaming_switch.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_streaming_switch.tsx
new file mode 100644
index 0000000000000..3f8fa6fba4ae5
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_streaming_switch.tsx
@@ -0,0 +1,59 @@
+/*
+ * 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, EuiText, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import React from 'react';
+import { STREAMING_TITLE, STREAMING_HELP_TEXT_TITLE } from './translations';
+
+interface Props {
+ assistantStreamingEnabled: boolean;
+ setAssistantStreamingEnabled: React.Dispatch>;
+ compressed?: boolean;
+}
+
+const ConversationStreamingSwitchComponent: React.FC = ({
+ assistantStreamingEnabled,
+ compressed,
+ setAssistantStreamingEnabled,
+}) => {
+ const { euiTheme } = useEuiTheme();
+
+ return (
+
+ {STREAMING_TITLE}
+
+ }
+ >
+ {STREAMING_HELP_TEXT_TITLE}}
+ checked={assistantStreamingEnabled}
+ onChange={(e) => setAssistantStreamingEnabled(e.target.checked)}
+ compressed={compressed}
+ />
+
+ );
+};
+
+export const ConversationStreamingSwitch = React.memo(ConversationStreamingSwitchComponent);
+
+ConversationStreamingSwitch.displayName = 'ConversationStreamingSwitch';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/use_conveersation_changed.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/use_conveersation_changed.test.tsx
new file mode 100644
index 0000000000000..091c691d8e324
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/use_conveersation_changed.test.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 { renderHook, act } from '@testing-library/react-hooks';
+import { useConversationChanged } from './use_conversation_changed';
+import { customConvo } from '../../../mock/conversation';
+import { mockConnectors } from '../../../mock/connectors';
+import { mockSystemPrompts } from '../../../mock/system_prompt';
+import { getDefaultSystemPrompt } from '../../use_conversation/helpers';
+import { Conversation, ConversationsBulkActions } from '../../../..';
+
+jest.mock('../../use_conversation/helpers', () => ({
+ getDefaultSystemPrompt: jest.fn(),
+}));
+
+const mockAllSystemPrompts = mockSystemPrompts;
+
+const mockDefaultConnector = mockConnectors[0];
+
+const mockConversationSettings = {};
+const mockConversationsSettingsBulkActions: ConversationsBulkActions = {};
+const mockSetConversationSettings = jest.fn();
+const mockSetConversationsSettingsBulkActions = jest.fn();
+const mockOnSelectedConversationChange = jest.fn();
+
+describe('useConversationChanged', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ (getDefaultSystemPrompt as jest.Mock).mockReturnValue(mockAllSystemPrompts[2]);
+ });
+
+ test('should return a function', () => {
+ const { result } = renderHook(() =>
+ useConversationChanged({
+ allSystemPrompts: mockAllSystemPrompts,
+ conversationSettings: mockConversationSettings,
+ conversationsSettingsBulkActions: mockConversationsSettingsBulkActions,
+ defaultConnector: mockDefaultConnector,
+ setConversationSettings: mockSetConversationSettings,
+ setConversationsSettingsBulkActions: mockSetConversationsSettingsBulkActions,
+ onSelectedConversationChange: mockOnSelectedConversationChange,
+ })
+ );
+
+ expect(typeof result.current).toBe('function');
+ });
+
+ test('should handle new conversation selection', () => {
+ const newConversationTitle = 'New Conversation';
+ const { result } = renderHook(() =>
+ useConversationChanged({
+ allSystemPrompts: mockAllSystemPrompts,
+ conversationSettings: mockConversationSettings,
+ conversationsSettingsBulkActions: mockConversationsSettingsBulkActions,
+ defaultConnector: mockDefaultConnector,
+ setConversationSettings: mockSetConversationSettings,
+ setConversationsSettingsBulkActions: mockSetConversationsSettingsBulkActions,
+ onSelectedConversationChange: mockOnSelectedConversationChange,
+ })
+ );
+
+ act(() => {
+ result.current(newConversationTitle);
+ });
+
+ const expectedNewConversation: Conversation = {
+ id: '',
+ title: newConversationTitle,
+ category: 'assistant',
+ messages: [],
+ replacements: {},
+ apiConfig: {
+ connectorId: mockDefaultConnector.id,
+ actionTypeId: mockDefaultConnector.actionTypeId,
+ provider: mockDefaultConnector.apiProvider,
+ defaultSystemPromptId: mockAllSystemPrompts[2].id,
+ },
+ };
+
+ expect(mockSetConversationSettings).toHaveBeenCalledWith({
+ ...mockConversationSettings,
+ [newConversationTitle]: expectedNewConversation,
+ });
+ expect(mockSetConversationsSettingsBulkActions).toHaveBeenCalledWith({
+ ...mockConversationsSettingsBulkActions,
+ create: {
+ ...(mockConversationsSettingsBulkActions.create ?? {}),
+ [newConversationTitle]: expectedNewConversation,
+ },
+ });
+ expect(mockOnSelectedConversationChange).toHaveBeenCalledWith({
+ ...expectedNewConversation,
+ id: expectedNewConversation.title,
+ });
+ });
+
+ test('should handle existing conversation selection', () => {
+ const existingConversation = { ...customConvo, id: 'mock-id' };
+
+ const { result } = renderHook(() =>
+ useConversationChanged({
+ allSystemPrompts: mockAllSystemPrompts,
+ conversationSettings: mockConversationSettings,
+ conversationsSettingsBulkActions: mockConversationsSettingsBulkActions,
+ defaultConnector: mockDefaultConnector,
+ setConversationSettings: mockSetConversationSettings,
+ setConversationsSettingsBulkActions: mockSetConversationsSettingsBulkActions,
+ onSelectedConversationChange: mockOnSelectedConversationChange,
+ })
+ );
+
+ act(() => {
+ result.current(existingConversation);
+ });
+
+ expect(mockSetConversationSettings.mock.calls[0][0](mockConversationSettings)).toEqual({
+ ...mockConversationSettings,
+ [existingConversation.id]: existingConversation,
+ });
+ expect(mockOnSelectedConversationChange).toHaveBeenCalledWith(existingConversation);
+ });
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/use_conversation_changed.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/use_conversation_changed.tsx
new file mode 100644
index 0000000000000..670832ac83798
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/use_conversation_changed.tsx
@@ -0,0 +1,104 @@
+/*
+ * 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 { useCallback, useMemo } from 'react';
+import { Conversation, Prompt } from '../../../..';
+import { getDefaultSystemPrompt } from '../../use_conversation/helpers';
+import { ConversationsBulkActions } from '../../api';
+import { AIConnector } from '../../../connectorland/connector_selector';
+
+interface Props {
+ allSystemPrompts: Prompt[];
+ conversationSettings: Record;
+ conversationsSettingsBulkActions: ConversationsBulkActions;
+ defaultConnector?: AIConnector;
+ setConversationSettings: React.Dispatch>>;
+ setConversationsSettingsBulkActions: React.Dispatch<
+ React.SetStateAction
+ >;
+ onSelectedConversationChange: (conversation?: Conversation) => void;
+}
+
+type OnConversationSelectionChange = (c?: string | Conversation) => void;
+
+export const useConversationChanged = ({
+ allSystemPrompts,
+ conversationSettings,
+ conversationsSettingsBulkActions,
+ defaultConnector,
+ setConversationSettings,
+ setConversationsSettingsBulkActions,
+ onSelectedConversationChange,
+}: Props) => {
+ const defaultSystemPrompt = useMemo(() => {
+ return getDefaultSystemPrompt({ allSystemPrompts, conversation: undefined });
+ }, [allSystemPrompts]);
+
+ // Conversation callbacks
+ // When top level conversation selection changes
+ const onConversationSelectionChange: OnConversationSelectionChange = useCallback(
+ (c = '') => {
+ const isNew = typeof c === 'string';
+ const newSelectedConversation: Conversation | undefined = isNew
+ ? {
+ id: '',
+ title: c ?? '',
+ category: 'assistant',
+ messages: [],
+ replacements: {},
+ ...(defaultConnector
+ ? {
+ apiConfig: {
+ connectorId: defaultConnector.id,
+ actionTypeId: defaultConnector.actionTypeId,
+ provider: defaultConnector.apiProvider,
+ defaultSystemPromptId: defaultSystemPrompt?.id,
+ },
+ }
+ : {}),
+ }
+ : c;
+
+ if (newSelectedConversation && (isNew || newSelectedConversation.id === '')) {
+ setConversationSettings({
+ ...conversationSettings,
+ [isNew ? c : newSelectedConversation.title]: newSelectedConversation,
+ });
+ setConversationsSettingsBulkActions({
+ ...conversationsSettingsBulkActions,
+ create: {
+ ...(conversationsSettingsBulkActions.create ?? {}),
+ [newSelectedConversation.title]: newSelectedConversation,
+ },
+ });
+ } else if (newSelectedConversation != null) {
+ setConversationSettings((prev) => {
+ return {
+ ...prev,
+ [newSelectedConversation.id]: newSelectedConversation,
+ };
+ });
+ }
+
+ onSelectedConversationChange({
+ ...newSelectedConversation,
+ id: newSelectedConversation.id || newSelectedConversation.title,
+ });
+ },
+ [
+ conversationSettings,
+ conversationsSettingsBulkActions,
+ defaultConnector,
+ defaultSystemPrompt?.id,
+ onSelectedConversationChange,
+ setConversationSettings,
+ setConversationsSettingsBulkActions,
+ ]
+ );
+
+ return onConversationSelectionChange;
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/use_conversation_deleted.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/use_conversation_deleted.tsx
new file mode 100644
index 0000000000000..c8e5fcfbab01e
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/use_conversation_deleted.tsx
@@ -0,0 +1,56 @@
+/*
+ * 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 { useCallback } from 'react';
+import { Conversation, ConversationsBulkActions } from '../../../..';
+
+interface Props {
+ conversationSettings: Record;
+ conversationsSettingsBulkActions: ConversationsBulkActions;
+ setConversationSettings: React.Dispatch>>;
+ setConversationsSettingsBulkActions: React.Dispatch<
+ React.SetStateAction
+ >;
+}
+
+export const useConversationDeleted = ({
+ conversationSettings,
+ conversationsSettingsBulkActions,
+ setConversationSettings,
+ setConversationsSettingsBulkActions,
+}: Props) => {
+ const onConversationDeleted = useCallback(
+ (conversationTitle: string) => {
+ const conversationId = Object.values(conversationSettings).find(
+ (c) => c.title === conversationTitle
+ )?.id;
+ // If matching conversation is not found, do nothing
+ if (!conversationId) {
+ return;
+ }
+
+ const updatedConversationSettings = { ...conversationSettings };
+ delete updatedConversationSettings[conversationId];
+
+ setConversationSettings(updatedConversationSettings);
+ setConversationsSettingsBulkActions({
+ ...conversationsSettingsBulkActions,
+ delete: {
+ ids: [...(conversationsSettingsBulkActions.delete?.ids ?? []), conversationId],
+ },
+ });
+ },
+ [
+ conversationSettings,
+ conversationsSettingsBulkActions,
+ setConversationSettings,
+ setConversationsSettingsBulkActions,
+ ]
+ );
+
+ return onConversationDeleted;
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/use_conversation_deletex.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/use_conversation_deletex.test.tsx
new file mode 100644
index 0000000000000..f96de69b8ae7c
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/use_conversation_deletex.test.tsx
@@ -0,0 +1,94 @@
+/*
+ * 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 { renderHook, act } from '@testing-library/react-hooks';
+import { useConversationDeleted } from './use_conversation_deleted';
+import { customConvo, alertConvo, welcomeConvo } from '../../../mock/conversation';
+import { Conversation, ConversationsBulkActions } from '../../../..';
+
+const customConveId = '1';
+const alertConvoId = '2';
+const welcomeConvoId = '3';
+const mockConversationSettings: Record = {
+ [customConveId]: { ...customConvo, id: customConveId },
+ [alertConvoId]: { ...alertConvo, id: alertConvoId },
+ [welcomeConvoId]: { ...welcomeConvo, id: welcomeConvoId },
+};
+
+const mockConversationsSettingsBulkActions: ConversationsBulkActions = {
+ create: {},
+ update: {},
+ delete: { ids: [] },
+};
+
+const mockSetConversationSettings = jest.fn();
+const mockSetConversationsSettingsBulkActions = jest.fn();
+
+describe('useConversationDeleted', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ test('should return a function', () => {
+ const { result } = renderHook(() =>
+ useConversationDeleted({
+ conversationSettings: mockConversationSettings,
+ conversationsSettingsBulkActions: mockConversationsSettingsBulkActions,
+ setConversationSettings: mockSetConversationSettings,
+ setConversationsSettingsBulkActions: mockSetConversationsSettingsBulkActions,
+ })
+ );
+
+ expect(typeof result.current).toBe('function');
+ });
+
+ test('should handle conversation deletion', () => {
+ const conversationTitleToDelete = customConvo.title;
+ const { result } = renderHook(() =>
+ useConversationDeleted({
+ conversationSettings: mockConversationSettings,
+ conversationsSettingsBulkActions: mockConversationsSettingsBulkActions,
+ setConversationSettings: mockSetConversationSettings,
+ setConversationsSettingsBulkActions: mockSetConversationsSettingsBulkActions,
+ })
+ );
+
+ act(() => {
+ result.current(conversationTitleToDelete);
+ });
+
+ const expectedConversationSettings = { ...mockConversationSettings };
+ delete expectedConversationSettings[customConveId];
+ expect(mockSetConversationSettings).toHaveBeenCalledWith(expectedConversationSettings);
+
+ expect(mockSetConversationsSettingsBulkActions).toHaveBeenCalledWith({
+ ...mockConversationsSettingsBulkActions,
+ delete: {
+ ids: [customConveId],
+ },
+ });
+ });
+
+ test('should do nothing when no matching conversation title exists', () => {
+ const conversationTitleToDelete = 'Non-existent Conversation';
+ const { result } = renderHook(() =>
+ useConversationDeleted({
+ conversationSettings: mockConversationSettings,
+ conversationsSettingsBulkActions: mockConversationsSettingsBulkActions,
+ setConversationSettings: mockSetConversationSettings,
+ setConversationsSettingsBulkActions: mockSetConversationsSettingsBulkActions,
+ })
+ );
+
+ act(() => {
+ result.current(conversationTitleToDelete);
+ });
+
+ expect(mockSetConversationSettings).not.toHaveBeenCalled();
+
+ expect(mockSetConversationsSettingsBulkActions).not.toHaveBeenCalled();
+ });
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings_management/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings_management/index.tsx
new file mode 100644
index 0000000000000..c4b2f834ecec5
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings_management/index.tsx
@@ -0,0 +1,252 @@
+/*
+ * 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, EuiConfirmModal, EuiInMemoryTable } from '@elastic/eui';
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { Conversation } from '../../../assistant_context/types';
+import { ConversationTableItem, useConversationsTable } from './use_conversations_table';
+import { ConversationStreamingSwitch } from '../conversation_settings/conversation_streaming_switch';
+import { AIConnector } from '../../../connectorland/connector_selector';
+import * as i18n from './translations';
+
+import { Prompt } from '../../types';
+import { ConversationsBulkActions } from '../../api';
+import { useAssistantContext } from '../../../assistant_context';
+import { useConversationDeleted } from '../conversation_settings/use_conversation_deleted';
+import { useFlyoutModalVisibility } from '../../common/components/assistant_settings_management/flyout/use_flyout_modal_visibility';
+import { Flyout } from '../../common/components/assistant_settings_management/flyout';
+import { CANCEL, DELETE } from '../../settings/translations';
+import { ConversationSettingsEditor } from '../conversation_settings/conversation_settings_editor';
+import { useConversationChanged } from '../conversation_settings/use_conversation_changed';
+import { CONVERSATION_TABLE_SESSION_STORAGE_KEY } from '../../../assistant_context/constants';
+import { useSessionPagination } from '../../common/components/assistant_settings_management/pagination/use_session_pagination';
+import { DEFAULT_PAGE_SIZE } from '../../settings/const';
+interface Props {
+ allSystemPrompts: Prompt[];
+ assistantStreamingEnabled: boolean;
+ connectors: AIConnector[] | undefined;
+ conversationSettings: Record;
+ conversationsSettingsBulkActions: ConversationsBulkActions;
+ conversationsLoaded: boolean;
+ defaultConnector?: AIConnector;
+ handleSave: (shouldRefetchConversation?: boolean) => void;
+ isDisabled?: boolean;
+ isFlyoutMode: boolean;
+ onCancelClick: () => void;
+ setAssistantStreamingEnabled: React.Dispatch>;
+ setConversationSettings: React.Dispatch>>;
+ setConversationsSettingsBulkActions: React.Dispatch<
+ React.SetStateAction
+ >;
+ selectedConversation: Conversation | undefined;
+ onSelectedConversationChange: (conversation?: Conversation) => void;
+}
+
+export const DEFAULT_TABLE_OPTIONS = {
+ page: { size: DEFAULT_PAGE_SIZE, index: 0 },
+ sort: { field: 'createdAt', direction: 'desc' as const },
+};
+
+const ConversationSettingsManagementComponent: React.FC = ({
+ allSystemPrompts,
+ assistantStreamingEnabled,
+ connectors,
+ defaultConnector,
+ conversationSettings,
+ conversationsSettingsBulkActions,
+ conversationsLoaded,
+ handleSave,
+ isDisabled,
+ isFlyoutMode,
+ onSelectedConversationChange,
+ onCancelClick,
+ selectedConversation,
+ setAssistantStreamingEnabled,
+ setConversationSettings,
+ setConversationsSettingsBulkActions,
+}) => {
+ const { http, nameSpace, actionTypeRegistry } = useAssistantContext();
+
+ const {
+ isFlyoutOpen: editFlyoutVisible,
+ openFlyout: openEditFlyout,
+ closeFlyout: closeEditFlyout,
+ } = useFlyoutModalVisibility();
+ const [deletedConversation, setDeletedConversation] = useState();
+
+ const {
+ isFlyoutOpen: deleteConfirmModalVisibility,
+ openFlyout: openConfirmModal,
+ closeFlyout: closeConfirmModal,
+ } = useFlyoutModalVisibility();
+
+ const onConversationSelectionChange = useConversationChanged({
+ allSystemPrompts,
+ conversationSettings,
+ conversationsSettingsBulkActions,
+ defaultConnector,
+ setConversationSettings,
+ setConversationsSettingsBulkActions,
+ onSelectedConversationChange,
+ });
+
+ const onEditActionClicked = useCallback(
+ (rowItem: ConversationTableItem) => {
+ openEditFlyout();
+ onConversationSelectionChange(rowItem);
+ },
+ [onConversationSelectionChange, openEditFlyout]
+ );
+
+ const onConversationDeleted = useConversationDeleted({
+ conversationSettings,
+ conversationsSettingsBulkActions,
+ setConversationSettings,
+ setConversationsSettingsBulkActions,
+ });
+
+ const onDeleteActionClicked = useCallback(
+ (rowItem: ConversationTableItem) => {
+ setDeletedConversation(rowItem);
+ onConversationDeleted(rowItem.title);
+
+ closeEditFlyout();
+ openConfirmModal();
+ },
+ [closeEditFlyout, onConversationDeleted, openConfirmModal]
+ );
+
+ const onDeleteConfirmed = useCallback(() => {
+ if (Object.keys(conversationsSettingsBulkActions).length === 0) {
+ return;
+ }
+ closeConfirmModal();
+ handleSave(true);
+ setConversationsSettingsBulkActions({});
+ }, [
+ closeConfirmModal,
+ conversationsSettingsBulkActions,
+ handleSave,
+ setConversationsSettingsBulkActions,
+ ]);
+
+ const onDeleteCancelled = useCallback(() => {
+ setDeletedConversation(null);
+ closeConfirmModal();
+ onCancelClick();
+ }, [closeConfirmModal, onCancelClick]);
+
+ const { getConversationsList, getColumns } = useConversationsTable();
+
+ const { onTableChange, pagination, sorting } = useSessionPagination({
+ nameSpace,
+ storageKey: CONVERSATION_TABLE_SESSION_STORAGE_KEY,
+ defaultTableOptions: DEFAULT_TABLE_OPTIONS,
+ });
+
+ const conversationOptions = getConversationsList({
+ allSystemPrompts,
+ actionTypeRegistry,
+ connectors,
+ conversations: conversationSettings,
+ defaultConnector,
+ });
+
+ const onSaveCancelled = useCallback(() => {
+ closeEditFlyout();
+ onCancelClick();
+ }, [closeEditFlyout, onCancelClick]);
+
+ const onSaveConfirmed = useCallback(() => {
+ closeEditFlyout();
+ handleSave(true);
+ setConversationsSettingsBulkActions({});
+ }, [closeEditFlyout, handleSave, setConversationsSettingsBulkActions]);
+
+ const columns = useMemo(
+ () =>
+ getColumns({
+ conversations: conversationSettings,
+ onDeleteActionClicked,
+ onEditActionClicked,
+ }),
+ [conversationSettings, getColumns, onDeleteActionClicked, onEditActionClicked]
+ );
+
+ const confirmationTitle = useMemo(
+ () =>
+ deletedConversation?.title
+ ? i18n.DELETE_CONVERSATION_CONFIRMATION_TITLE(deletedConversation?.title)
+ : i18n.DELETE_CONVERSATION_CONFIRMATION_DEFAULT_TITLE,
+ [deletedConversation?.title]
+ );
+
+ if (!conversationsLoaded) {
+ return null;
+ }
+
+ return (
+ <>
+
+
+
+
+
+ {editFlyoutVisible && (
+
+
+
+ )}
+ {deleteConfirmModalVisibility && deletedConversation?.title && (
+
+
+
+ )}
+
+ );
+};
+
+export const ConversationSettingsManagement = React.memo(ConversationSettingsManagementComponent);
+
+ConversationSettingsManagement.displayName = 'ConversationSettingsManagement';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings_management/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings_management/translations.ts
new file mode 100644
index 0000000000000..5761ba8e6e99f
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings_management/translations.ts
@@ -0,0 +1,63 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const CONVERSATIONS_TABLE_COLUMN_NAME = i18n.translate(
+ 'xpack.elasticAssistant.assistant.conversationSettings.column.name',
+ {
+ defaultMessage: 'Name',
+ }
+);
+
+export const CONVERSATIONS_TABLE_COLUMN_SYSTEM_PROMPT = i18n.translate(
+ 'xpack.elasticAssistant.assistant.conversationSettings.column.systemPrompt',
+ {
+ defaultMessage: 'System prompt',
+ }
+);
+
+export const CONVERSATIONS_TABLE_COLUMN_CONNECTOR = i18n.translate(
+ 'xpack.elasticAssistant.assistant.conversationSettings.column.connector',
+ {
+ defaultMessage: 'Connector',
+ }
+);
+
+export const CONVERSATIONS_TABLE_COLUMN_UPDATED_AT = i18n.translate(
+ 'xpack.elasticAssistant.assistant.conversationSettings.column.updatedAt',
+ {
+ defaultMessage: 'Date updated',
+ }
+);
+
+export const CONVERSATIONS_TABLE_COLUMN_ACTIONS = i18n.translate(
+ 'xpack.elasticAssistant.assistant.conversationSettings.column.actions',
+ {
+ defaultMessage: 'Actions',
+ }
+);
+
+export const CONVERSATIONS_FLYOUT_DEFAULT_TITLE = i18n.translate(
+ 'xpack.elasticAssistant.assistant.conversationSettings.flyout.defaultTitle',
+ {
+ defaultMessage: 'Conversation',
+ }
+);
+
+export const DELETE_CONVERSATION_CONFIRMATION_DEFAULT_TITLE = i18n.translate(
+ 'xpack.elasticAssistant.assistant.conversationSettings.deleteConfirmation.defaultTitle',
+ {
+ defaultMessage: 'Delete conversation?',
+ }
+);
+
+export const DELETE_CONVERSATION_CONFIRMATION_TITLE = (conversationTitle: string) =>
+ i18n.translate('xpack.elasticAssistant.assistant.conversationSettings.deleteConfirmation.Title', {
+ values: { conversationTitle },
+ defaultMessage: 'Delete "{conversationTitle}"?',
+ });
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings_management/use_conversations_table.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings_management/use_conversations_table.test.tsx
new file mode 100644
index 0000000000000..465ffa792fb0b
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings_management/use_conversations_table.test.tsx
@@ -0,0 +1,91 @@
+/*
+ * 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 { renderHook } from '@testing-library/react-hooks';
+import {
+ useConversationsTable,
+ GetConversationsListParams,
+ ConversationTableItem,
+} from './use_conversations_table';
+import { alertConvo, welcomeConvo, customConvo } from '../../../mock/conversation';
+import { mockActionTypes, mockConnectors } from '../../../mock/connectors';
+import { mockSystemPrompts } from '../../../mock/system_prompt';
+import { ActionTypeRegistryContract } from '@kbn/triggers-actions-ui-plugin/public';
+import * as i18n from './translations';
+import { EuiTableFieldDataColumnType } from '@elastic/eui';
+
+const mockActionTypeRegistry: ActionTypeRegistryContract = {
+ has: jest
+ .fn()
+ .mockImplementation((id: string) =>
+ mockActionTypes.some((actionType: { id: string }) => actionType.id === id)
+ ),
+ get: jest
+ .fn()
+ .mockImplementation((id: string) =>
+ mockActionTypes.find((actionType: { id: string }) => actionType.id === id)
+ ),
+ list: jest.fn().mockReturnValue(mockActionTypes),
+ register: jest.fn(),
+};
+
+describe('useConversationsTable', () => {
+ it('should return columns', () => {
+ const { result } = renderHook(() => useConversationsTable());
+ const columns = result.current.getColumns({
+ onDeleteActionClicked: jest.fn(),
+ onEditActionClicked: jest.fn(),
+ });
+
+ expect(columns).toHaveLength(5);
+
+ expect(columns[0].name).toBe(i18n.CONVERSATIONS_TABLE_COLUMN_NAME);
+ expect((columns[1] as EuiTableFieldDataColumnType).field).toBe(
+ 'systemPromptTitle'
+ );
+ expect((columns[2] as EuiTableFieldDataColumnType).field).toBe(
+ 'connectorTypeTitle'
+ );
+ expect((columns[3] as EuiTableFieldDataColumnType).field).toBe(
+ 'updatedAt'
+ );
+ expect(columns[4].name).toBe(i18n.CONVERSATIONS_TABLE_COLUMN_ACTIONS);
+ });
+
+ it('should return a list of conversations', () => {
+ const alertConvoId = 'alert-convo-id';
+ const welcomeConvoId = 'welcome-convo-id';
+ const customConvoId = 'custom-convo-id';
+ const params: GetConversationsListParams = {
+ allSystemPrompts: mockSystemPrompts,
+ actionTypeRegistry: mockActionTypeRegistry,
+ connectors: mockConnectors,
+ conversations: {
+ [alertConvoId]: { ...alertConvo, id: alertConvoId },
+ [welcomeConvoId]: { ...welcomeConvo, id: welcomeConvoId },
+ [customConvoId]: { ...customConvo, id: customConvoId },
+ },
+ defaultConnector: mockConnectors[0],
+ };
+
+ const { result } = renderHook(() => useConversationsTable());
+ const conversationsList: ConversationTableItem[] = result.current.getConversationsList(params);
+
+ expect(conversationsList).toHaveLength(3);
+
+ expect(conversationsList[0].title).toBe(alertConvo.title);
+ expect(conversationsList[0].connectorTypeTitle).toBe('OpenAI');
+ expect(conversationsList[0].systemPromptTitle).toBe('Mock system prompt');
+
+ expect(conversationsList[1].title).toBe(welcomeConvo.title);
+ expect(conversationsList[1].connectorTypeTitle).toBe('OpenAI');
+ expect(conversationsList[1].systemPromptTitle).toBe('Mock system prompt');
+
+ expect(conversationsList[2].title).toBe(customConvo.title);
+ expect(conversationsList[2].connectorTypeTitle).toBe('OpenAI');
+ expect(conversationsList[2].systemPromptTitle).toBe('Mock system prompt');
+ });
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings_management/use_conversations_table.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings_management/use_conversations_table.tsx
new file mode 100644
index 0000000000000..fb705db6bb33c
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings_management/use_conversations_table.tsx
@@ -0,0 +1,157 @@
+/*
+ * 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, { useCallback } from 'react';
+
+import { ActionTypeRegistryContract } from '@kbn/triggers-actions-ui-plugin/public';
+import { EuiBadge, EuiBasicTableColumn, EuiLink } from '@elastic/eui';
+
+import { FormattedDate } from '@kbn/i18n-react';
+import { Conversation } from '../../../assistant_context/types';
+import { AIConnector } from '../../../connectorland/connector_selector';
+import { getConnectorTypeTitle } from '../../../connectorland/helpers';
+import { Prompt } from '../../../..';
+import {
+ getConversationApiConfig,
+ getInitialDefaultSystemPrompt,
+} from '../../use_conversation/helpers';
+import * as i18n from './translations';
+import { RowActions } from '../../common/components/assistant_settings_management/row_actions';
+
+const emptyConversations = {};
+
+export interface GetConversationsListParams {
+ allSystemPrompts: Prompt[];
+ actionTypeRegistry: ActionTypeRegistryContract;
+ connectors: AIConnector[] | undefined;
+ conversations: Record;
+ defaultConnector?: AIConnector;
+}
+
+export type ConversationTableItem = Conversation & {
+ connectorTypeTitle?: string | null;
+ systemPromptTitle?: string | null;
+};
+
+export const useConversationsTable = () => {
+ const getColumns = useCallback(
+ ({
+ onDeleteActionClicked,
+ onEditActionClicked,
+ }): Array> => {
+ return [
+ {
+ name: i18n.CONVERSATIONS_TABLE_COLUMN_NAME,
+ render: (conversation: ConversationTableItem) => (
+ onEditActionClicked(conversation)}>
+ {conversation.title}
+
+ ),
+ sortable: ({ title }: ConversationTableItem) => title,
+ },
+ {
+ field: 'systemPromptTitle',
+ name: i18n.CONVERSATIONS_TABLE_COLUMN_SYSTEM_PROMPT,
+ align: 'left',
+ render: (systemPromptTitle: ConversationTableItem['systemPromptTitle']) =>
+ systemPromptTitle ? {systemPromptTitle} : null,
+ sortable: true,
+ },
+ {
+ field: 'connectorTypeTitle',
+ name: i18n.CONVERSATIONS_TABLE_COLUMN_CONNECTOR,
+ align: 'left',
+ render: (connectorTypeTitle: ConversationTableItem['connectorTypeTitle']) =>
+ connectorTypeTitle ? {connectorTypeTitle} : null,
+ sortable: true,
+ },
+ {
+ field: 'updatedAt',
+ name: i18n.CONVERSATIONS_TABLE_COLUMN_UPDATED_AT,
+ align: 'center',
+ render: (updatedAt: ConversationTableItem['updatedAt']) =>
+ updatedAt ? (
+
+
+
+ ) : null,
+ sortable: true,
+ },
+ {
+ name: i18n.CONVERSATIONS_TABLE_COLUMN_ACTIONS,
+ width: '120px',
+ align: 'center',
+ render: (conversation: ConversationTableItem) => {
+ const isDeletable = !conversation.isDefault;
+ return (
+
+ rowItem={conversation}
+ onDelete={isDeletable ? onDeleteActionClicked : undefined}
+ onEdit={onEditActionClicked}
+ isDeletable={isDeletable}
+ />
+ );
+ },
+ },
+ ];
+ },
+ []
+ );
+ const getConversationsList = useCallback(
+ ({
+ allSystemPrompts,
+ actionTypeRegistry,
+ connectors,
+ conversations = emptyConversations,
+ defaultConnector,
+ }: GetConversationsListParams): ConversationTableItem[] =>
+ Object.values(conversations).map((conversation) => {
+ const conversationApiConfig = getConversationApiConfig({
+ allSystemPrompts,
+ connectors,
+ conversation,
+ defaultConnector,
+ });
+ const connector: AIConnector | undefined = connectors?.find(
+ (c) => c.id === conversationApiConfig.apiConfig?.connectorId
+ );
+ const connectorTypeTitle = getConnectorTypeTitle(connector, actionTypeRegistry);
+
+ const systemPrompt: Prompt | undefined = allSystemPrompts.find(
+ ({ id }) => id === conversation.apiConfig?.defaultSystemPromptId
+ );
+ const defaultSystemPrompt = getInitialDefaultSystemPrompt({
+ allSystemPrompts,
+ conversation,
+ });
+
+ const systemPromptTitle =
+ systemPrompt?.label ||
+ systemPrompt?.name ||
+ defaultSystemPrompt?.label ||
+ defaultSystemPrompt?.name;
+
+ return {
+ ...conversation,
+ connectorTypeTitle,
+ systemPromptTitle,
+ ...conversationApiConfig,
+ };
+ }),
+ []
+ );
+
+ return {
+ getColumns,
+ getConversationsList,
+ };
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/index.tsx
index dd96b4883c969..830c5d2b7080a 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/index.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/index.tsx
@@ -947,6 +947,7 @@ const AssistantComponent: React.FC = ({
setChatHistoryVisible={setChatHistoryVisible}
onConversationSelected={handleOnConversationSelected}
conversations={conversations}
+ conversationsLoaded={conversationsLoaded}
refetchConversationsState={refetchConversationsState}
onConversationCreate={handleCreateConversation}
isAssistantEnabled={isAssistantEnabled}
@@ -1115,6 +1116,7 @@ const AssistantComponent: React.FC = ({
showAnonymizedValues={showAnonymizedValues}
title={title}
conversations={conversations}
+ conversationsLoaded={conversationsLoaded}
onConversationDeleted={handleOnConversationDeleted}
refetchConversationsState={refetchConversationsState}
/>
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx
index a2b8d0e1c4b7b..2cbbdf68b307c 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx
@@ -24,9 +24,9 @@ import * as i18n from '../translations';
import type { Prompt } from '../../../types';
import { useAssistantContext } from '../../../../assistant_context';
import { useConversation } from '../../../use_conversation';
-import { SYSTEM_PROMPTS_TAB } from '../../../settings/assistant_settings';
import { TEST_IDS } from '../../../constants';
import { PROMPT_CONTEXT_SELECTOR_PREFIX } from '../../../quick_prompts/prompt_context_selector/translations';
+import { SYSTEM_PROMPTS_TAB } from '../../../settings/const';
export interface Props {
allSystemPrompts: Prompt[];
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_editor.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_editor.tsx
new file mode 100644
index 0000000000000..3fd7dfeb00e73
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_editor.tsx
@@ -0,0 +1,333 @@
+/*
+ * 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, { useCallback, useMemo } from 'react';
+import {
+ EuiFormRow,
+ EuiTextArea,
+ EuiCheckbox,
+ EuiIcon,
+ EuiFlexGroup,
+ EuiFlexItem,
+} from '@elastic/eui';
+
+import { keyBy } from 'lodash/fp';
+
+import { css } from '@emotion/react';
+import { ApiConfig } from '@kbn/elastic-assistant-common';
+import { AIConnector } from '../../../../connectorland/connector_selector';
+import { Conversation, Prompt } from '../../../../..';
+import * as i18n from './translations';
+import { ConversationMultiSelector } from './conversation_multi_selector/conversation_multi_selector';
+import { SystemPromptSelector } from './system_prompt_selector/system_prompt_selector';
+import { TEST_IDS } from '../../../constants';
+import { ConversationsBulkActions } from '../../../api';
+import { getSelectedConversations } from '../system_prompt_settings_management/utils';
+import { useSystemPromptEditor } from './use_system_prompt_editor';
+import { getConversationApiConfig } from '../../../use_conversation/helpers';
+
+interface Props {
+ connectors: AIConnector[] | undefined;
+ conversationSettings: Record;
+ conversationsSettingsBulkActions: ConversationsBulkActions;
+ onSelectedSystemPromptChange: (systemPrompt?: Prompt) => void;
+ selectedSystemPrompt: Prompt | undefined;
+ setUpdatedSystemPromptSettings: React.Dispatch>;
+ setConversationSettings: React.Dispatch>>;
+ systemPromptSettings: Prompt[];
+ setConversationsSettingsBulkActions: React.Dispatch<
+ React.SetStateAction
+ >;
+ defaultConnector?: AIConnector;
+ resetSettings?: () => void;
+}
+
+/**
+ * Settings for adding/removing system prompts. Configure name, prompt and default conversations.
+ */
+export const SystemPromptEditorComponent: React.FC = ({
+ connectors,
+ conversationSettings,
+ onSelectedSystemPromptChange,
+ selectedSystemPrompt,
+ setUpdatedSystemPromptSettings,
+ setConversationSettings,
+ systemPromptSettings,
+ conversationsSettingsBulkActions,
+ setConversationsSettingsBulkActions,
+ defaultConnector,
+ resetSettings,
+}) => {
+ // Prompt
+ const promptContent = useMemo(
+ // Fixing Cursor Jump in text area
+ () => systemPromptSettings.find((sp) => sp.id === selectedSystemPrompt?.id)?.content ?? '',
+ [selectedSystemPrompt?.id, systemPromptSettings]
+ );
+
+ const handlePromptContentChange = useCallback(
+ (e: React.ChangeEvent) => {
+ if (selectedSystemPrompt != null) {
+ setUpdatedSystemPromptSettings((prev): Prompt[] => {
+ const alreadyExists = prev.some((sp) => sp.id === selectedSystemPrompt.id);
+
+ if (alreadyExists) {
+ return prev.map((sp): Prompt => {
+ if (sp.id === selectedSystemPrompt.id) {
+ return {
+ ...sp,
+ content: e.target.value,
+ };
+ }
+ return sp;
+ });
+ }
+
+ return prev;
+ });
+ }
+ },
+ [selectedSystemPrompt, setUpdatedSystemPromptSettings]
+ );
+
+ const conversationsWithApiConfig = Object.entries(conversationSettings).reduce<
+ Record
+ >((acc, [key, conversation]) => {
+ acc[key] = {
+ ...conversation,
+ ...getConversationApiConfig({
+ allSystemPrompts: systemPromptSettings,
+ connectors,
+ conversation,
+ defaultConnector,
+ }),
+ };
+ return acc;
+ }, {});
+ // Conversations this system prompt should be a default for
+ const conversationOptions = useMemo(
+ () => Object.values(conversationsWithApiConfig),
+ [conversationsWithApiConfig]
+ );
+
+ const selectedConversations = useMemo(() => {
+ return selectedSystemPrompt != null
+ ? getSelectedConversations(
+ systemPromptSettings,
+ conversationsWithApiConfig,
+ selectedSystemPrompt.id
+ )
+ : [];
+ }, [conversationsWithApiConfig, selectedSystemPrompt, systemPromptSettings]);
+
+ const handleConversationSelectionChange = useCallback(
+ (currentPromptConversations: Conversation[]) => {
+ const currentPromptConversationTitles = currentPromptConversations.map(
+ (convo) => convo.title
+ );
+
+ const getDefaultSystemPromptId = (convo: Conversation) =>
+ currentPromptConversationTitles.includes(convo.title)
+ ? selectedSystemPrompt?.id
+ : convo.apiConfig && convo.apiConfig.defaultSystemPromptId === selectedSystemPrompt?.id
+ ? // remove the default System Prompt if it is assigned to a conversation
+ // but that conversation is not in the currentPromptConversationList
+ // This means conversation was removed in the current transaction
+ systemPromptSettings?.[0].id
+ : // leave it as it is .. if that conversation was neither added nor removed.
+ convo.apiConfig?.defaultSystemPromptId;
+
+ if (selectedSystemPrompt != null) {
+ setConversationSettings((prev) =>
+ keyBy(
+ 'title',
+ /*
+ * updatedConversationWithPrompts calculates the present of prompt for
+ * each conversation. Based on the values of selected conversation, it goes
+ * through each conversation adds/removed the selected prompt on each conversation.
+ *
+ * */
+ Object.values(prev).map((convo) => ({
+ ...convo,
+ ...(convo.apiConfig
+ ? {
+ apiConfig: {
+ ...convo.apiConfig,
+ defaultSystemPromptId: getDefaultSystemPromptId(convo),
+ },
+ }
+ : {
+ apiConfig: {
+ defaultSystemPromptId: getDefaultSystemPromptId(convo),
+ connectorId: defaultConnector?.id ?? '',
+ actionTypeId: defaultConnector?.actionTypeId ?? '',
+ },
+ }),
+ }))
+ )
+ );
+
+ let updatedConversationsSettingsBulkActions = { ...conversationsSettingsBulkActions };
+ Object.values(conversationsWithApiConfig).forEach((convo) => {
+ const getApiConfigWithSelectedPrompt = (): ApiConfig | {} => {
+ if (convo.apiConfig) {
+ return {
+ apiConfig: {
+ ...getConversationApiConfig({
+ allSystemPrompts: systemPromptSettings,
+ connectors,
+ conversation: convo,
+ defaultConnector,
+ }).apiConfig,
+ defaultSystemPromptId: getDefaultSystemPromptId(convo),
+ },
+ };
+ }
+
+ return {};
+ };
+ const createOperation =
+ convo.id === ''
+ ? {
+ create: {
+ ...(updatedConversationsSettingsBulkActions.create ?? {}),
+ [convo.title]: {
+ ...convo,
+ ...(convo.apiConfig ? getApiConfigWithSelectedPrompt() : {}),
+ },
+ },
+ }
+ : {};
+ const updateOperation =
+ convo.id !== ''
+ ? {
+ update: {
+ ...(updatedConversationsSettingsBulkActions.update ?? {}),
+ [convo.id]: {
+ ...(updatedConversationsSettingsBulkActions.update
+ ? updatedConversationsSettingsBulkActions.update[convo.id] ?? {}
+ : {}),
+ ...getApiConfigWithSelectedPrompt(),
+ },
+ },
+ }
+ : {};
+
+ updatedConversationsSettingsBulkActions = {
+ ...updatedConversationsSettingsBulkActions,
+ ...createOperation,
+ ...updateOperation,
+ };
+ });
+
+ setConversationsSettingsBulkActions(updatedConversationsSettingsBulkActions);
+ }
+ },
+ [
+ connectors,
+ conversationsSettingsBulkActions,
+ conversationsWithApiConfig,
+ defaultConnector,
+ selectedSystemPrompt,
+ setConversationSettings,
+ setConversationsSettingsBulkActions,
+ systemPromptSettings,
+ ]
+ );
+
+ // Whether this system prompt should be the default for new conversations
+ const isNewConversationDefault = useMemo(
+ () => selectedSystemPrompt?.isNewConversationDefault ?? false,
+ [selectedSystemPrompt?.isNewConversationDefault]
+ );
+
+ const handleNewConversationDefaultChange = useCallback(
+ (e) => {
+ const isChecked = e.target.checked;
+
+ if (selectedSystemPrompt != null) {
+ setUpdatedSystemPromptSettings((prev) => {
+ return prev.map((pp) => {
+ return {
+ ...pp,
+ isNewConversationDefault: selectedSystemPrompt.id === pp.id && isChecked,
+ };
+ });
+ });
+ }
+ },
+ [selectedSystemPrompt, setUpdatedSystemPromptSettings]
+ );
+
+ const { onSystemPromptSelectionChange, onSystemPromptDeleted } = useSystemPromptEditor({
+ setUpdatedSystemPromptSettings,
+ onSelectedSystemPromptChange,
+ });
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+ {i18n.SYSTEM_PROMPT_DEFAULT_NEW_CONVERSATION}
+
+
+
+
+ }
+ checked={isNewConversationDefault}
+ onChange={handleNewConversationDefaultChange}
+ />
+
+
+ );
+};
+
+export const SystemPromptEditor = React.memo(SystemPromptEditorComponent);
+
+SystemPromptEditor.displayName = 'SystemPromptEditor';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_selector/system_prompt_selector.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_selector/system_prompt_selector.test.tsx
index d8d14a8ffebe0..45f320528ec64 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_selector/system_prompt_selector.test.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_selector/system_prompt_selector.test.tsx
@@ -23,7 +23,7 @@ describe('SystemPromptSelector', () => {
beforeEach(() => {
jest.clearAllMocks();
});
- it('Selects an existing quick prompt', () => {
+ it('Selects an existing system prompt', () => {
const { getByTestId } = render();
expect(getByTestId('comboBoxSearchInput')).toHaveValue(mockSystemPrompts[0].name);
fireEvent.click(getByTestId('comboBoxToggleListButton'));
@@ -33,7 +33,7 @@ describe('SystemPromptSelector', () => {
it('Deletes a system prompt that is not selected', () => {
const { getByTestId, getAllByTestId } = render();
fireEvent.click(getByTestId('comboBoxToggleListButton'));
- // there is only one delete quick prompt because there is only one custom option
+ // there is only one delete system prompt because there is only one custom option
fireEvent.click(getAllByTestId('delete-prompt')[1]);
expect(onSystemPromptDeleted).toHaveBeenCalledWith(mockSystemPrompts[1].name);
expect(onSystemPromptSelectionChange).not.toHaveBeenCalled();
@@ -41,12 +41,12 @@ describe('SystemPromptSelector', () => {
it('Deletes a system prompt that is selected', () => {
const { getByTestId, getAllByTestId } = render();
fireEvent.click(getByTestId('comboBoxToggleListButton'));
- // there is only one delete quick prompt because there is only one custom option
+ // there is only one delete system prompt because there is only one custom option
fireEvent.click(getAllByTestId('delete-prompt')[0]);
expect(onSystemPromptDeleted).toHaveBeenCalledWith(mockSystemPrompts[0].name);
expect(onSystemPromptSelectionChange).toHaveBeenCalledWith(undefined);
});
- it('Selects existing quick prompt from the search input', () => {
+ it('Selects existing system prompt from the search input', () => {
const { getByTestId } = render();
fireEvent.change(getByTestId('comboBoxSearchInput'), {
target: { value: mockSystemPrompts[1].name },
@@ -58,6 +58,22 @@ describe('SystemPromptSelector', () => {
});
expect(onSystemPromptSelectionChange).toHaveBeenCalledWith(mockSystemPrompts[1]);
});
+ it('Reset settings every time before selecting an system prompt from the input if resetSettings is provided', () => {
+ const mockResetSettings = jest.fn();
+ const { getByTestId } = render(
+
+ );
+ // changing the selection
+ fireEvent.change(getByTestId('comboBoxSearchInput'), {
+ target: { value: mockSystemPrompts[1].name },
+ });
+ fireEvent.keyDown(getByTestId('comboBoxSearchInput'), {
+ key: 'Enter',
+ code: 'Enter',
+ charCode: 13,
+ });
+ expect(mockResetSettings).toHaveBeenCalled();
+ });
it('Creates a new system prompt', () => {
const { getByTestId } = render();
const customOption = 'Cool new prompt';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_selector/system_prompt_selector.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_selector/system_prompt_selector.tsx
index 1ec1c4b721065..53b6414d05b53 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_selector/system_prompt_selector.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_selector/system_prompt_selector.tsx
@@ -26,11 +26,12 @@ import { SYSTEM_PROMPT_DEFAULT_NEW_CONVERSATION } from '../translations';
export const SYSTEM_PROMPT_SELECTOR_CLASSNAME = 'systemPromptSelector';
interface Props {
+ autoFocus?: boolean;
onSystemPromptDeleted: (systemPromptTitle: string) => void;
onSystemPromptSelectionChange: (systemPrompt?: Prompt | string) => void;
- systemPrompts: Prompt[];
- autoFocus?: boolean;
+ resetSettings?: () => void;
selectedSystemPrompt?: Prompt;
+ systemPrompts: Prompt[];
}
export type SystemPromptSelectorOption = EuiComboBoxOptionOption<{
@@ -44,10 +45,11 @@ export type SystemPromptSelectorOption = EuiComboBoxOptionOption<{
export const SystemPromptSelector: React.FC = React.memo(
({
autoFocus = false,
- systemPrompts,
onSystemPromptDeleted,
onSystemPromptSelectionChange,
+ resetSettings,
selectedSystemPrompt,
+ systemPrompts,
}) => {
// Form options
const [options, setOptions] = useState(
@@ -76,6 +78,8 @@ export const SystemPromptSelector: React.FC = React.memo(
const handleSelectionChange = useCallback(
(systemPromptSelectorOption: SystemPromptSelectorOption[]) => {
+ // Reset settings on every selection change to avoid option saved automatically on settings management page
+ resetSettings?.();
const newSystemPrompt =
systemPromptSelectorOption.length === 0
? undefined
@@ -83,7 +87,7 @@ export const SystemPromptSelector: React.FC = React.memo(
systemPromptSelectorOption[0]?.label;
onSystemPromptSelectionChange(newSystemPrompt);
},
- [onSystemPromptSelectionChange, systemPrompts]
+ [onSystemPromptSelectionChange, resetSettings, systemPrompts]
);
// Callback for when user types to create a new system prompt
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_settings.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_settings.test.tsx
index 3892383b3d584..be9e33f615e4b 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_settings.test.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_settings.test.tsx
@@ -25,6 +25,7 @@ const setConversationSettings = jest.fn().mockImplementation((fn) => {
});
const testProps = {
+ connectors: [],
conversationSettings: {
[welcomeConvo.title]: welcomeConvo,
},
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_settings.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_settings.tsx
index 88f00de57f444..b7f66acba85c7 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_settings.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_settings.tsx
@@ -5,51 +5,19 @@
* 2.0.
*/
-import React, { useCallback, useMemo } from 'react';
-import {
- EuiFormRow,
- EuiTextArea,
- EuiCheckbox,
- EuiIcon,
- EuiFlexGroup,
- EuiFlexItem,
- EuiTitle,
- EuiText,
- EuiHorizontalRule,
- EuiSpacer,
-} from '@elastic/eui';
+import React from 'react';
+import { EuiTitle, EuiText, EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
-import { keyBy } from 'lodash/fp';
-
-import { css } from '@emotion/react';
-import { ApiConfig } from '@kbn/elastic-assistant-common';
-import { AIConnector } from '../../../../connectorland/connector_selector';
-import { Conversation, Prompt } from '../../../../..';
import * as i18n from './translations';
-import { ConversationMultiSelector } from './conversation_multi_selector/conversation_multi_selector';
-import { SystemPromptSelector } from './system_prompt_selector/system_prompt_selector';
-import { TEST_IDS } from '../../../constants';
-import { ConversationsBulkActions } from '../../../api';
-
-interface Props {
- conversationSettings: Record;
- conversationsSettingsBulkActions: ConversationsBulkActions;
- onSelectedSystemPromptChange: (systemPrompt?: Prompt) => void;
- selectedSystemPrompt: Prompt | undefined;
- setUpdatedSystemPromptSettings: React.Dispatch>;
- setConversationSettings: React.Dispatch>>;
- systemPromptSettings: Prompt[];
- setConversationsSettingsBulkActions: React.Dispatch<
- React.SetStateAction
- >;
- defaultConnector?: AIConnector;
-}
+import { SystemPromptEditor } from './system_prompt_editor';
+import { SystemPromptSettingsProps } from './types';
/**
* Settings for adding/removing system prompts. Configure name, prompt and default conversations.
*/
-export const SystemPromptSettings: React.FC = React.memo(
+export const SystemPromptSettings: React.FC = React.memo(
({
+ connectors,
conversationSettings,
onSelectedSystemPromptChange,
selectedSystemPrompt,
@@ -60,226 +28,6 @@ export const SystemPromptSettings: React.FC = React.memo(
setConversationsSettingsBulkActions,
defaultConnector,
}) => {
- // Prompt
- const promptContent = useMemo(
- () => selectedSystemPrompt?.content ?? '',
- [selectedSystemPrompt?.content]
- );
-
- const handlePromptContentChange = useCallback(
- (e: React.ChangeEvent) => {
- if (selectedSystemPrompt != null) {
- setUpdatedSystemPromptSettings((prev): Prompt[] => {
- const alreadyExists = prev.some((sp) => sp.id === selectedSystemPrompt.id);
-
- if (alreadyExists) {
- return prev.map((sp): Prompt => {
- if (sp.id === selectedSystemPrompt.id) {
- return {
- ...sp,
- content: e.target.value,
- };
- }
- return sp;
- });
- }
-
- return prev;
- });
- }
- },
- [selectedSystemPrompt, setUpdatedSystemPromptSettings]
- );
-
- // Conversations this system prompt should be a default for
- const conversationOptions = useMemo(
- () => Object.values(conversationSettings),
- [conversationSettings]
- );
- const selectedConversations = useMemo(() => {
- return selectedSystemPrompt != null
- ? Object.values(conversationSettings).filter(
- (conversation) =>
- conversation.apiConfig?.defaultSystemPromptId === selectedSystemPrompt.id
- )
- : [];
- }, [conversationSettings, selectedSystemPrompt]);
-
- const handleConversationSelectionChange = useCallback(
- (currentPromptConversations: Conversation[]) => {
- const currentPromptConversationTitles = currentPromptConversations.map(
- (convo) => convo.title
- );
- const getDefaultSystemPromptId = (convo: Conversation) =>
- currentPromptConversationTitles.includes(convo.title)
- ? selectedSystemPrompt?.id
- : convo.apiConfig && convo.apiConfig.defaultSystemPromptId === selectedSystemPrompt?.id
- ? // remove the default System Prompt if it is assigned to a conversation
- // but that conversation is not in the currentPromptConversationList
- // This means conversation was removed in the current transaction
- undefined
- : // leave it as it is .. if that conversation was neither added nor removed.
- convo.apiConfig?.defaultSystemPromptId;
-
- if (selectedSystemPrompt != null) {
- setConversationSettings((prev) =>
- keyBy(
- 'title',
- /*
- * updatedConversationWithPrompts calculates the present of prompt for
- * each conversation. Based on the values of selected conversation, it goes
- * through each conversation adds/removed the selected prompt on each conversation.
- *
- * */
- Object.values(prev).map((convo) => ({
- ...convo,
- ...(convo.apiConfig
- ? {
- apiConfig: {
- ...convo.apiConfig,
- defaultSystemPromptId: getDefaultSystemPromptId(convo),
- },
- }
- : {
- apiConfig: {
- defaultSystemPromptId: getDefaultSystemPromptId(convo),
- connectorId: defaultConnector?.id ?? '',
- actionTypeId: defaultConnector?.actionTypeId ?? '',
- },
- }),
- }))
- )
- );
-
- let updatedConversationsSettingsBulkActions = { ...conversationsSettingsBulkActions };
- Object.values(conversationSettings).forEach((convo) => {
- const getApiConfig = (): ApiConfig | {} => {
- if (convo.apiConfig) {
- return {
- apiConfig: {
- ...convo.apiConfig,
- defaultSystemPromptId: getDefaultSystemPromptId(convo),
- },
- };
- }
- return {};
- };
- const createOperation =
- convo.id === ''
- ? {
- create: {
- ...(updatedConversationsSettingsBulkActions.create ?? {}),
- [convo.id]: {
- ...convo,
- ...(convo.apiConfig
- ? {
- apiConfig: {
- ...convo.apiConfig,
- defaultSystemPromptId: getDefaultSystemPromptId(convo),
- },
- }
- : {}),
- },
- },
- }
- : {};
-
- const updateOperation =
- convo.id !== ''
- ? {
- update: {
- ...(updatedConversationsSettingsBulkActions.update ?? {}),
- [convo.id]: {
- ...(updatedConversationsSettingsBulkActions.update
- ? updatedConversationsSettingsBulkActions.update[convo.id] ?? {}
- : {}),
- ...getApiConfig(),
- },
- },
- }
- : {};
-
- updatedConversationsSettingsBulkActions = {
- ...updatedConversationsSettingsBulkActions,
- ...createOperation,
- ...updateOperation,
- };
- });
- setConversationsSettingsBulkActions(updatedConversationsSettingsBulkActions);
- }
- },
- [
- conversationSettings,
- conversationsSettingsBulkActions,
- defaultConnector?.actionTypeId,
- defaultConnector?.id,
- selectedSystemPrompt,
- setConversationSettings,
- setConversationsSettingsBulkActions,
- ]
- );
-
- // Whether this system prompt should be the default for new conversations
- const isNewConversationDefault = useMemo(
- () => selectedSystemPrompt?.isNewConversationDefault ?? false,
- [selectedSystemPrompt?.isNewConversationDefault]
- );
-
- const handleNewConversationDefaultChange = useCallback(
- (e) => {
- const isChecked = e.target.checked;
-
- if (selectedSystemPrompt != null) {
- setUpdatedSystemPromptSettings((prev) => {
- return prev.map((pp) => {
- return {
- ...pp,
- isNewConversationDefault: selectedSystemPrompt.id === pp.id && isChecked,
- };
- });
- });
- }
- },
- [selectedSystemPrompt, setUpdatedSystemPromptSettings]
- );
-
- // When top level system prompt selection changes
- const onSystemPromptSelectionChange = useCallback(
- (systemPrompt?: Prompt | string) => {
- const isNew = typeof systemPrompt === 'string';
- const newSelectedSystemPrompt: Prompt | undefined = isNew
- ? {
- id: systemPrompt ?? '',
- content: '',
- name: systemPrompt ?? '',
- promptType: 'system',
- }
- : systemPrompt;
-
- if (newSelectedSystemPrompt != null) {
- setUpdatedSystemPromptSettings((prev) => {
- const alreadyExists = prev.some((sp) => sp.id === newSelectedSystemPrompt.id);
-
- if (!alreadyExists) {
- return [...prev, newSelectedSystemPrompt];
- }
-
- return prev;
- });
- }
-
- onSelectedSystemPromptChange(newSelectedSystemPrompt);
- },
- [onSelectedSystemPromptChange, setUpdatedSystemPromptSettings]
- );
-
- const onSystemPromptDeleted = useCallback(
- (id: string) => {
- setUpdatedSystemPromptSettings((prev) => prev.filter((sp) => sp.id !== id));
- },
- [setUpdatedSystemPromptSettings]
- );
-
return (
<>
@@ -289,59 +37,18 @@ export const SystemPromptSettings: React.FC = React.memo(
{i18n.SETTINGS_DESCRIPTION}
-
-
-
-
-
-
-
-
-
-
-
-
- {i18n.SYSTEM_PROMPT_DEFAULT_NEW_CONVERSATION}
-
-
-
-
- }
- checked={isNewConversationDefault}
- onChange={handleNewConversationDefaultChange}
- />
-
+
);
}
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/types.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/types.ts
new file mode 100644
index 0000000000000..63025566c9400
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/types.ts
@@ -0,0 +1,24 @@
+/*
+ * 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 { AIConnector } from '../../../../connectorland/connector_selector';
+import { Conversation, Prompt } from '../../../../..';
+import { ConversationsBulkActions } from '../../../api';
+
+export interface SystemPromptSettingsProps {
+ connectors: AIConnector[] | undefined;
+ conversationSettings: Record;
+ conversationsSettingsBulkActions: ConversationsBulkActions;
+ onSelectedSystemPromptChange: (systemPrompt?: Prompt) => void;
+ selectedSystemPrompt: Prompt | undefined;
+ setUpdatedSystemPromptSettings: React.Dispatch>;
+ setConversationSettings: React.Dispatch>>;
+ systemPromptSettings: Prompt[];
+ setConversationsSettingsBulkActions: React.Dispatch<
+ React.SetStateAction
+ >;
+ defaultConnector?: AIConnector;
+}
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/use_system_prompt_editor.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/use_system_prompt_editor.test.tsx
new file mode 100644
index 0000000000000..85efe99979650
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/use_system_prompt_editor.test.tsx
@@ -0,0 +1,107 @@
+/*
+ * 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 { renderHook, act } from '@testing-library/react-hooks';
+import { useSystemPromptEditor } from './use_system_prompt_editor';
+import { Prompt } from '../../../types';
+import {
+ mockSystemPrompt,
+ mockSuperheroSystemPrompt,
+ mockSystemPrompts,
+} from '../../../../mock/system_prompt';
+
+// Mock functions for the tests
+const mockOnSelectedSystemPromptChange = jest.fn();
+const mockSetUpdatedSystemPromptSettings = jest.fn();
+const mockPreviousSystemPrompts = [...mockSystemPrompts];
+
+describe('useSystemPromptEditor', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ test('should delete a system prompt by id', () => {
+ const { result } = renderHook(() =>
+ useSystemPromptEditor({
+ onSelectedSystemPromptChange: mockOnSelectedSystemPromptChange,
+ setUpdatedSystemPromptSettings: mockSetUpdatedSystemPromptSettings,
+ })
+ );
+
+ act(() => {
+ result.current.onSystemPromptDeleted('mock-system-prompt-1');
+ });
+
+ expect(
+ mockSetUpdatedSystemPromptSettings.mock.calls[0][0]?.(mockPreviousSystemPrompts)
+ ).toEqual(mockSystemPrompts.filter((sp) => sp.id !== 'mock-system-prompt-1'));
+ });
+
+ test('should handle selection of an existing system prompt', () => {
+ const existingPrompt: Prompt = mockSystemPrompt;
+ const { result } = renderHook(() =>
+ useSystemPromptEditor({
+ onSelectedSystemPromptChange: mockOnSelectedSystemPromptChange,
+ setUpdatedSystemPromptSettings: mockSetUpdatedSystemPromptSettings,
+ })
+ );
+
+ act(() => {
+ result.current.onSystemPromptSelectionChange(existingPrompt);
+ });
+
+ expect(mockOnSelectedSystemPromptChange).toHaveBeenCalledWith(existingPrompt);
+ expect(
+ mockSetUpdatedSystemPromptSettings.mock.calls[0][0]?.(mockPreviousSystemPrompts)
+ ).toEqual(mockSystemPrompts);
+ });
+
+ test('should handle selection of a new system prompt', () => {
+ const newPromptId = 'new-system-prompt';
+ const { result } = renderHook(() =>
+ useSystemPromptEditor({
+ onSelectedSystemPromptChange: mockOnSelectedSystemPromptChange,
+ setUpdatedSystemPromptSettings: mockSetUpdatedSystemPromptSettings,
+ })
+ );
+
+ act(() => {
+ result.current.onSystemPromptSelectionChange(newPromptId);
+ });
+
+ const newPrompt: Prompt = {
+ id: newPromptId,
+ content: '',
+ name: newPromptId,
+ promptType: 'system',
+ };
+
+ expect(mockOnSelectedSystemPromptChange).toHaveBeenCalledWith(newPrompt);
+ expect(
+ mockSetUpdatedSystemPromptSettings.mock.calls[0][0]?.(mockPreviousSystemPrompts)
+ ).toEqual([...mockSystemPrompts, newPrompt]);
+ });
+
+ test('should handle prompt selection with an existing system prompt id', () => {
+ const { result } = renderHook(() =>
+ useSystemPromptEditor({
+ onSelectedSystemPromptChange: mockOnSelectedSystemPromptChange,
+ setUpdatedSystemPromptSettings: mockSetUpdatedSystemPromptSettings,
+ })
+ );
+
+ const expectedPrompt: Prompt = mockSuperheroSystemPrompt;
+
+ act(() => {
+ result.current.onSystemPromptSelectionChange(expectedPrompt);
+ });
+
+ expect(mockOnSelectedSystemPromptChange).toHaveBeenCalledWith(expectedPrompt);
+ expect(
+ mockSetUpdatedSystemPromptSettings.mock.calls[0][0]?.(mockPreviousSystemPrompts)
+ ).toContain(expectedPrompt);
+ });
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/use_system_prompt_editor.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/use_system_prompt_editor.tsx
new file mode 100644
index 0000000000000..87e284d6dcf25
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/use_system_prompt_editor.tsx
@@ -0,0 +1,58 @@
+/*
+ * 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 { useCallback } from 'react';
+import { Prompt } from '../../../types';
+
+interface Props {
+ setUpdatedSystemPromptSettings: React.Dispatch>;
+ onSelectedSystemPromptChange: (systemPrompt?: Prompt) => void;
+}
+
+export const useSystemPromptEditor = ({
+ setUpdatedSystemPromptSettings,
+ onSelectedSystemPromptChange,
+}: Props) => {
+ // When top level system prompt selection changes
+ const onSystemPromptSelectionChange = useCallback(
+ (systemPrompt?: Prompt | string) => {
+ const isNew = typeof systemPrompt === 'string';
+ const newSelectedSystemPrompt: Prompt | undefined = isNew
+ ? {
+ id: systemPrompt ?? '',
+ content: '',
+ name: systemPrompt ?? '',
+ promptType: 'system',
+ }
+ : systemPrompt;
+
+ if (newSelectedSystemPrompt != null) {
+ setUpdatedSystemPromptSettings((prev) => {
+ const alreadyExists = prev.some((sp) => sp.id === newSelectedSystemPrompt.id);
+
+ if (!alreadyExists) {
+ return [...prev, newSelectedSystemPrompt];
+ }
+
+ return prev;
+ });
+ }
+
+ onSelectedSystemPromptChange(newSelectedSystemPrompt);
+ },
+ [onSelectedSystemPromptChange, setUpdatedSystemPromptSettings]
+ );
+
+ const onSystemPromptDeleted = useCallback(
+ (id: string) => {
+ setUpdatedSystemPromptSettings((prev) => prev.filter((sp) => sp.id !== id));
+ },
+ [setUpdatedSystemPromptSettings]
+ );
+
+ return { onSystemPromptSelectionChange, onSystemPromptDeleted };
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/default_conversations_column.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/default_conversations_column.tsx
new file mode 100644
index 0000000000000..7567775909a09
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/default_conversations_column.tsx
@@ -0,0 +1,50 @@
+/*
+ * 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 { EuiBadge, EuiLink } from '@elastic/eui';
+import React, { useCallback, useState } from 'react';
+
+interface Props {
+ defaultConversations: string[];
+}
+
+export const DefaultConversationsColumn: React.FC = React.memo(
+ ({ defaultConversations }) => {
+ const maxConversationsToShow = 5;
+ const isOverflow = defaultConversations.length > maxConversationsToShow;
+
+ const [isExpanded, setIsExpanded] = useState(false);
+
+ const currentDisplaying = isExpanded
+ ? defaultConversations.length
+ : Math.min(maxConversationsToShow, defaultConversations.length);
+ const itemsToDisplay = defaultConversations.slice(0, currentDisplaying - 1);
+
+ const toggleContent = useCallback((prev) => {
+ setIsExpanded(!prev);
+ }, []);
+
+ if (!defaultConversations || defaultConversations?.length === 0) {
+ return null;
+ }
+
+ return (
+ <>
+ {itemsToDisplay.map((c, idx) => (
+
+ {c}
+
+ ))}
+ {isOverflow && (
+ {isExpanded ? 'Show less' : 'Show All'}
+ )}
+
+ );
+ }
+);
+
+DefaultConversationsColumn.displayName = 'DefaultConversationsColumn';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/index.tsx
new file mode 100644
index 0000000000000..e0f27f3fa8c7d
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/index.tsx
@@ -0,0 +1,224 @@
+/*
+ * 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 {
+ EuiInMemoryTable,
+ EuiPanel,
+ EuiConfirmModal,
+ EuiButton,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiSpacer,
+} from '@elastic/eui';
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { Conversation, ConversationsBulkActions, useAssistantContext } from '../../../../..';
+import { SYSTEM_PROMPT_TABLE_SESSION_STORAGE_KEY } from '../../../../assistant_context/constants';
+import { AIConnector } from '../../../../connectorland/connector_selector';
+import { Flyout } from '../../../common/components/assistant_settings_management/flyout';
+import { useFlyoutModalVisibility } from '../../../common/components/assistant_settings_management/flyout/use_flyout_modal_visibility';
+import {
+ DEFAULT_TABLE_OPTIONS,
+ useSessionPagination,
+} from '../../../common/components/assistant_settings_management/pagination/use_session_pagination';
+import { CANCEL, DELETE } from '../../../settings/translations';
+import { Prompt } from '../../../types';
+import { SystemPromptEditor } from '../system_prompt_modal/system_prompt_editor';
+import { SETTINGS_TITLE } from '../system_prompt_modal/translations';
+import { useSystemPromptEditor } from '../system_prompt_modal/use_system_prompt_editor';
+import * as i18n from './translations';
+import { useSystemPromptTable } from './use_system_prompt_table';
+
+interface Props {
+ connectors: AIConnector[] | undefined;
+ conversationSettings: Record;
+ conversationsSettingsBulkActions: ConversationsBulkActions;
+ onSelectedSystemPromptChange: (systemPrompt?: Prompt) => void;
+ selectedSystemPrompt: Prompt | undefined;
+ setUpdatedSystemPromptSettings: React.Dispatch>;
+ setConversationSettings: React.Dispatch>>;
+ systemPromptSettings: Prompt[];
+ setConversationsSettingsBulkActions: React.Dispatch<
+ React.SetStateAction
+ >;
+ defaultConnector?: AIConnector;
+ handleSave: (shouldRefetchConversation?: boolean) => void;
+ onCancelClick: () => void;
+ resetSettings: () => void;
+}
+
+const SystemPromptSettingsManagementComponent = ({
+ connectors,
+ conversationSettings,
+ onSelectedSystemPromptChange,
+ setUpdatedSystemPromptSettings,
+ setConversationSettings,
+ selectedSystemPrompt,
+ systemPromptSettings,
+ conversationsSettingsBulkActions,
+ setConversationsSettingsBulkActions,
+ defaultConnector,
+ handleSave,
+ onCancelClick,
+ resetSettings,
+}: Props) => {
+ const { nameSpace } = useAssistantContext();
+ const { isFlyoutOpen: editFlyoutVisible, openFlyout, closeFlyout } = useFlyoutModalVisibility();
+ const {
+ isFlyoutOpen: deleteConfirmModalVisibility,
+ openFlyout: openConfirmModal,
+ closeFlyout: closeConfirmModal,
+ } = useFlyoutModalVisibility();
+ const [deletedPrompt, setDeletedPrompt] = useState();
+
+ const onCreate = useCallback(() => {
+ onSelectedSystemPromptChange({
+ id: '',
+ content: '',
+ name: '',
+ promptType: 'system',
+ });
+ openFlyout();
+ }, [onSelectedSystemPromptChange, openFlyout]);
+
+ const { onSystemPromptSelectionChange, onSystemPromptDeleted } = useSystemPromptEditor({
+ setUpdatedSystemPromptSettings,
+ onSelectedSystemPromptChange,
+ });
+
+ const onEditActionClicked = useCallback(
+ (prompt: Prompt) => {
+ onSystemPromptSelectionChange(prompt);
+ openFlyout();
+ },
+ [onSystemPromptSelectionChange, openFlyout]
+ );
+
+ const onDeleteActionClicked = useCallback(
+ (prompt: Prompt) => {
+ setDeletedPrompt(prompt);
+ onSystemPromptDeleted(prompt.id);
+ openConfirmModal();
+ },
+ [onSystemPromptDeleted, openConfirmModal]
+ );
+
+ const onDeleteCancelled = useCallback(() => {
+ setDeletedPrompt(null);
+ closeConfirmModal();
+ onCancelClick();
+ }, [closeConfirmModal, onCancelClick]);
+
+ const onDeleteConfirmed = useCallback(() => {
+ closeConfirmModal();
+ handleSave(true);
+ setConversationsSettingsBulkActions({});
+ }, [closeConfirmModal, handleSave, setConversationsSettingsBulkActions]);
+
+ const onSaveCancelled = useCallback(() => {
+ closeFlyout();
+ onCancelClick();
+ }, [closeFlyout, onCancelClick]);
+
+ const onSaveConfirmed = useCallback(() => {
+ closeFlyout();
+ handleSave(true);
+ setConversationsSettingsBulkActions({});
+ }, [closeFlyout, handleSave, setConversationsSettingsBulkActions]);
+
+ const confirmationTitle = useMemo(
+ () =>
+ deletedPrompt?.name
+ ? i18n.DELETE_SYSTEM_PROMPT_MODAL_TITLE(deletedPrompt?.name)
+ : i18n.DELETE_SYSTEM_PROMPT_MODAL_DEFAULT_TITLE,
+ [deletedPrompt?.name]
+ );
+
+ const { getColumns, getSystemPromptsList } = useSystemPromptTable();
+
+ const { onTableChange, pagination, sorting } = useSessionPagination({
+ defaultTableOptions: DEFAULT_TABLE_OPTIONS,
+ nameSpace,
+ storageKey: SYSTEM_PROMPT_TABLE_SESSION_STORAGE_KEY,
+ });
+
+ const columns = useMemo(
+ () => getColumns({ onEditActionClicked, onDeleteActionClicked }),
+ [getColumns, onEditActionClicked, onDeleteActionClicked]
+ );
+ const systemPromptListItems = useMemo(
+ () =>
+ getSystemPromptsList({
+ connectors,
+ conversationSettings,
+ defaultConnector,
+ systemPromptSettings,
+ }),
+ [getSystemPromptsList, connectors, conversationSettings, defaultConnector, systemPromptSettings]
+ );
+
+ return (
+ <>
+
+
+
+
+ {SETTINGS_TITLE}
+
+
+
+
+
+
+
+
+
+
+ {deleteConfirmModalVisibility && deletedPrompt?.name && (
+
+ {i18n.DELETE_SYSTEM_PROMPT_MODAL_DESCRIPTION}
+
+ )}
+
+ );
+};
+
+export const SystemPromptSettingsManagement = React.memo(SystemPromptSettingsManagementComponent);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/translations.ts
new file mode 100644
index 0000000000000..b1ff676486954
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/translations.ts
@@ -0,0 +1,58 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const SYSTEM_PROMPTS_TABLE_COLUMN_NAME = i18n.translate(
+ 'xpack.elasticAssistant.assistant.promptsTable.systemPromptsTableColumnName',
+ {
+ defaultMessage: 'Name',
+ }
+);
+
+export const SYSTEM_PROMPTS_TABLE_COLUMN_DEFAULT_CONVERSATIONS = i18n.translate(
+ 'xpack.elasticAssistant.assistant.promptsTable.systemPromptsTableColumnDefaultConversations',
+ {
+ defaultMessage: 'Default conversations',
+ }
+);
+
+export const SYSTEM_PROMPTS_TABLE_COLUMN_CREATED_ON = i18n.translate(
+ 'xpack.elasticAssistant.assistant.promptsTable.systemPromptsTableColumnCreatedOn',
+ {
+ defaultMessage: 'Created on',
+ }
+);
+
+export const SYSTEM_PROMPTS_TABLE_COLUMN_ACTIONS = i18n.translate(
+ 'xpack.elasticAssistant.assistant.promptsTable.systemPromptsTableColumnActions',
+ {
+ defaultMessage: 'Actions',
+ }
+);
+
+export const DELETE_SYSTEM_PROMPT_MODAL_TITLE = (prompt: string) =>
+ i18n.translate(
+ 'xpack.elasticAssistant.assistant.promptEditor.modal.deleteSystemPromptConfirmationTitle',
+ {
+ values: { prompt },
+ defaultMessage: 'Delete "{prompt}"?',
+ }
+ );
+
+export const DELETE_SYSTEM_PROMPT_MODAL_DEFAULT_TITLE = i18n.translate(
+ 'xpack.elasticAssistant.assistant.promptEditor.modal.deleteSystemPromptConfirmationDefaultTitle',
+ {
+ defaultMessage: 'Delete system prompt?',
+ }
+);
+
+export const DELETE_SYSTEM_PROMPT_MODAL_DESCRIPTION = i18n.translate(
+ 'xpack.elasticAssistant.assistant.promptEditor.modal.deleteSystemPromptConfirmationMessage',
+ {
+ defaultMessage: 'You cannot recover the prompt once deleted',
+ }
+);
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/use_system_prompt_table.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/use_system_prompt_table.test.tsx
new file mode 100644
index 0000000000000..90cea2319714d
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/use_system_prompt_table.test.tsx
@@ -0,0 +1,107 @@
+/*
+ * 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 { renderHook } from '@testing-library/react-hooks';
+import { useSystemPromptTable } from './use_system_prompt_table';
+import { Prompt } from '../../../types';
+import { Conversation } from '../../../../assistant_context/types';
+import { AIConnector } from '../../../../connectorland/connector_selector';
+import { customConvo, welcomeConvo } from '../../../../mock/conversation';
+import { mockConnectors } from '../../../../mock/connectors';
+import { ApiConfig } from '@kbn/elastic-assistant-common';
+
+// Mock data for tests
+const mockSystemPrompts: Prompt[] = [
+ {
+ id: 'prompt-1',
+ content: 'Prompt 1',
+ name: 'Prompt 1',
+ promptType: 'user',
+ },
+ {
+ id: 'prompt-2',
+ content: 'Prompt 2',
+ name: 'Prompt 2',
+ promptType: 'user',
+ isNewConversationDefault: true,
+ },
+];
+
+const mockConversationSettings: Record = {
+ 'conv-1': {
+ ...welcomeConvo,
+ id: 'conv-1',
+ apiConfig: {
+ ...welcomeConvo.apiConfig,
+ defaultSystemPromptId: 'prompt-1',
+ } as ApiConfig,
+ },
+ 'conv-2': {
+ ...customConvo,
+ id: 'conv-2',
+ apiConfig: {
+ ...customConvo.apiConfig,
+ defaultSystemPromptId: 'prompt-2',
+ } as ApiConfig,
+ },
+};
+
+const mockAiConnectors: AIConnector[] = [...mockConnectors];
+
+const mockDefaultConnector: AIConnector = {
+ id: 'default-connector',
+ actionTypeId: '.gen-ai',
+ apiProvider: 'OpenAI',
+} as AIConnector;
+
+describe('useSystemPromptTable', () => {
+ const { result } = renderHook(() => useSystemPromptTable());
+
+ describe('getColumns', () => {
+ it('should return columns with correct render functions', () => {
+ const onEditActionClicked = jest.fn();
+ const onDeleteActionClicked = jest.fn();
+ const columns = result.current.getColumns({
+ onEditActionClicked,
+ onDeleteActionClicked,
+ });
+
+ expect(columns).toHaveLength(3);
+ expect(columns[0].name).toBe('Name');
+ expect(columns[1].name).toBe('Default conversations');
+ expect(columns[2].name).toBe('Actions');
+ });
+ });
+
+ describe('getSystemPromptsList', () => {
+ it('should return system prompts with associated default conversations', () => {
+ const systemPromptsList = result.current.getSystemPromptsList({
+ connectors: mockAiConnectors,
+ conversationSettings: mockConversationSettings,
+ defaultConnector: mockDefaultConnector,
+ systemPromptSettings: mockSystemPrompts,
+ });
+
+ expect(systemPromptsList).toHaveLength(2);
+ expect(systemPromptsList[0].defaultConversations).toEqual(['Welcome']);
+ expect(systemPromptsList[1].defaultConversations).toEqual(['Custom option']);
+ });
+
+ it('should return empty defaultConversations if no conversations match', () => {
+ const systemPromptsList = result.current.getSystemPromptsList({
+ connectors: [],
+ conversationSettings: {},
+ defaultConnector: undefined,
+ systemPromptSettings: mockSystemPrompts,
+ });
+
+ systemPromptsList.forEach((prompt) => {
+ expect(prompt.defaultConversations).toEqual([]);
+ });
+ });
+ });
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/use_system_prompt_table.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/use_system_prompt_table.tsx
new file mode 100644
index 0000000000000..7cf907bb7adf5
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/use_system_prompt_table.tsx
@@ -0,0 +1,135 @@
+/*
+ * 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 { EuiBasicTableColumn, EuiIcon, EuiLink } from '@elastic/eui';
+import React, { useCallback } from 'react';
+import { Conversation } from '../../../../assistant_context/types';
+import { AIConnector } from '../../../../connectorland/connector_selector';
+import { BadgesColumn } from '../../../common/components/assistant_settings_management/badges';
+import { RowActions } from '../../../common/components/assistant_settings_management/row_actions';
+import { Prompt } from '../../../types';
+import {
+ getConversationApiConfig,
+ getInitialDefaultSystemPrompt,
+} from '../../../use_conversation/helpers';
+import { SYSTEM_PROMPT_DEFAULT_NEW_CONVERSATION } from '../system_prompt_modal/translations';
+import * as i18n from './translations';
+import { getSelectedConversations } from './utils';
+
+type ConversationsWithSystemPrompt = Record<
+ string,
+ Conversation & { systemPrompt: Prompt | undefined }
+>;
+
+type SystemPromptTableItem = Prompt & { defaultConversations: string[] };
+
+export const useSystemPromptTable = () => {
+ const getColumns = useCallback(
+ ({
+ onEditActionClicked,
+ onDeleteActionClicked,
+ }: {
+ onEditActionClicked: (prompt: SystemPromptTableItem) => void;
+ onDeleteActionClicked: (prompt: SystemPromptTableItem) => void;
+ }): Array> => [
+ {
+ align: 'left',
+ name: i18n.SYSTEM_PROMPTS_TABLE_COLUMN_NAME,
+ truncateText: { lines: 3 },
+ render: (prompt: SystemPromptTableItem) =>
+ prompt?.name ? (
+ onEditActionClicked(prompt)}>
+ {prompt?.name}
+ {prompt.isNewConversationDefault && (
+
+ )}
+
+ ) : null,
+ sortable: ({ name }: SystemPromptTableItem) => name,
+ },
+ {
+ align: 'left',
+ name: i18n.SYSTEM_PROMPTS_TABLE_COLUMN_DEFAULT_CONVERSATIONS,
+ render: ({ defaultConversations, id }: SystemPromptTableItem) => (
+
+ ),
+ },
+ /* TODO: enable when createdAt is added
+ {
+ align: 'left',
+ field: 'createdAt',
+ name: i18n.SYSTEM_PROMPTS_TABLE_COLUMN_CREATED_ON,
+ },
+ */
+ {
+ align: 'center',
+ name: 'Actions',
+ width: '120px',
+ render: (prompt: SystemPromptTableItem) => {
+ const isDeletable = !prompt.isDefault;
+ return (
+
+ rowItem={prompt}
+ onEdit={onEditActionClicked}
+ onDelete={isDeletable ? onDeleteActionClicked : undefined}
+ isDeletable={isDeletable}
+ />
+ );
+ },
+ },
+ ],
+ []
+ );
+
+ const getSystemPromptsList = ({
+ connectors,
+ conversationSettings,
+ defaultConnector,
+ systemPromptSettings,
+ }: {
+ connectors: AIConnector[] | undefined;
+ conversationSettings: Record;
+ defaultConnector: AIConnector | undefined;
+ systemPromptSettings: Prompt[];
+ }): SystemPromptTableItem[] => {
+ const conversationsWithApiConfig = Object.entries(
+ conversationSettings
+ ).reduce((acc, [key, conversation]) => {
+ const defaultSystemPrompt = getInitialDefaultSystemPrompt({
+ allSystemPrompts: systemPromptSettings,
+ conversation,
+ });
+
+ acc[key] = {
+ ...conversation,
+ ...getConversationApiConfig({
+ allSystemPrompts: systemPromptSettings,
+ connectors,
+ conversation,
+ defaultConnector,
+ }),
+ systemPrompt: defaultSystemPrompt,
+ };
+ return acc;
+ }, {});
+ return systemPromptSettings.map((systemPrompt) => {
+ return {
+ ...systemPrompt,
+ defaultConversations: getSelectedConversations(
+ systemPromptSettings,
+ conversationsWithApiConfig,
+ systemPrompt?.id
+ ).map(({ title }) => title),
+ };
+ });
+ };
+
+ return { getColumns, getSystemPromptsList };
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/utils.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/utils.test.tsx
new file mode 100644
index 0000000000000..5f10e3bb59c65
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/utils.test.tsx
@@ -0,0 +1,70 @@
+/*
+ * 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 { ProviderEnum } from '@kbn/elastic-assistant-common';
+import { mockSystemPrompts } from '../../../../mock/system_prompt';
+import { PromptType } from '../../../types';
+import { getSelectedConversations } from './utils';
+describe('getSelectedConversations', () => {
+ const allSystemPrompts = [...mockSystemPrompts];
+ const conversationSettings = {
+ '8f1e3218-0b02-480a-8791-78c1ed5f3708': {
+ timestamp: '2024-06-25T12:33:26.779Z',
+ createdAt: '2024-06-25T12:33:26.779Z' as unknown as Date,
+ users: [
+ {
+ id: 'u_mGBROF_q5bmFCATbLXAcCwKa0k8JvONAwSruelyKA5E_0',
+ name: 'elastic',
+ },
+ ],
+ title: 'New chat',
+ category: 'assistant',
+ apiConfig: {
+ connectorId: 'acdeb074-f863-4e04-a22b-014391dd1be4',
+ actionTypeId: '.gen-ai',
+ provider: ProviderEnum.OpenAI,
+ defaultSystemPromptId: 'mock-system-prompt-1',
+ model: 'gpt-4',
+ },
+ messages: [],
+ updatedAt: '2024-06-25T18:35:28.217Z' as unknown as Date,
+ namespace: 'default',
+ id: '8f1e3218-0b02-480a-8791-78c1ed5f3708',
+ replacements: {},
+ systemPrompt: {
+ id: 'mock-system-prompt-1',
+ content:
+ 'You are a helpful, expert assistant who answers questions about Elastic Security. Do not answer questions unrelated to Elastic Security.\nProvide the most detailed and relevant answer possible, as if you were relaying this information back to a cyber security expert.\nIf you answer a question related to KQL, EQL, or ES|QL, it should be immediately usable within an Elastic Security timeline; please always format the output correctly with back ticks. Any answer provided for Query DSL should also be usable in a security timeline. This means you should only ever include the "filter" portion of the query. xxx',
+ name: 'Enhanced system prompt',
+ promptType: 'system' as PromptType,
+ isDefault: true,
+ isNewConversationDefault: true,
+ },
+ },
+ };
+ test('should return selected conversations', () => {
+ const systemPromptId = 'mock-system-prompt-1';
+
+ const conversations = getSelectedConversations(
+ allSystemPrompts,
+ conversationSettings,
+ systemPromptId
+ );
+
+ expect(conversations).toEqual(Object.values(conversationSettings));
+ });
+ test('should return empty array if no conversations are selected', () => {
+ const systemPromptId = 'ooo';
+
+ const conversations = getSelectedConversations(
+ allSystemPrompts,
+ conversationSettings,
+ systemPromptId
+ );
+
+ expect(conversations).toEqual([]);
+ });
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/utils.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/utils.tsx
new file mode 100644
index 0000000000000..5fde200db9b17
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_settings_management/utils.tsx
@@ -0,0 +1,22 @@
+/*
+ * 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 { Conversation } from '../../../../assistant_context/types';
+import { Prompt } from '../../../types';
+
+export const getSelectedConversations = (
+ allSystemPrompts: Prompt[],
+ conversationSettings: Record,
+ systemPromptId: string
+) => {
+ return Object.values(conversationSettings).filter((conversation) => {
+ const conversationSystemPrompt = allSystemPrompts.find(
+ (prompt) => prompt.id === conversation?.apiConfig?.defaultSystemPromptId
+ );
+ return conversationSystemPrompt?.id === systemPromptId;
+ });
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_selector/quick_prompt_selector.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_selector/quick_prompt_selector.test.tsx
index 6e24d662955b1..04ccd478e3bc5 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_selector/quick_prompt_selector.test.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_selector/quick_prompt_selector.test.tsx
@@ -53,6 +53,22 @@ describe('QuickPromptSelector', () => {
title: 'A_CUSTOM_OPTION',
});
});
+ it('Reset settings every time before selecting an system prompt from the input if resetSettings is provided', () => {
+ const mockResetSettings = jest.fn();
+ const { getByTestId } = render(
+
+ );
+ // changing the selection
+ fireEvent.change(getByTestId('comboBoxSearchInput'), {
+ target: { value: MOCK_QUICK_PROMPTS[1].title },
+ });
+ fireEvent.keyDown(getByTestId('comboBoxSearchInput'), {
+ key: 'Enter',
+ code: 'Enter',
+ charCode: 13,
+ });
+ expect(mockResetSettings).toHaveBeenCalled();
+ });
it('Creates a new quick prompt', () => {
const { getByTestId } = render();
const customOption = 'Cool new prompt';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_selector/quick_prompt_selector.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_selector/quick_prompt_selector.tsx
index 5aaff2bbc8fc9..3fb0ba17cf4bf 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_selector/quick_prompt_selector.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_selector/quick_prompt_selector.tsx
@@ -26,6 +26,7 @@ interface Props {
onQuickPromptDeleted: (quickPromptTitle: string) => void;
onQuickPromptSelectionChange: (quickPrompt?: QuickPrompt | string) => void;
quickPrompts: QuickPrompt[];
+ resetSettings?: () => void;
selectedQuickPrompt?: QuickPrompt;
}
@@ -40,6 +41,7 @@ export const QuickPromptSelector: React.FC = React.memo(
quickPrompts,
onQuickPromptDeleted,
onQuickPromptSelectionChange,
+ resetSettings,
selectedQuickPrompt,
}) => {
// Form options
@@ -69,6 +71,8 @@ export const QuickPromptSelector: React.FC = React.memo(
const handleSelectionChange = useCallback(
(quickPromptSelectorOption: QuickPromptSelectorOption[]) => {
+ // Reset settings on every selection change to avoid option saved automatically on settings management page
+ resetSettings?.();
const newQuickPrompt =
quickPromptSelectorOption.length === 0
? undefined
@@ -76,7 +80,7 @@ export const QuickPromptSelector: React.FC = React.memo(
quickPromptSelectorOption[0]?.label;
onQuickPromptSelectionChange(newQuickPrompt);
},
- [onQuickPromptSelectionChange, quickPrompts]
+ [onQuickPromptSelectionChange, resetSettings, quickPrompts]
);
// Callback for when user types to create a new quick prompt
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_settings/quick_prompt_editor.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_settings/quick_prompt_editor.tsx
new file mode 100644
index 0000000000000..4300e53525b33
--- /dev/null
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_settings/quick_prompt_editor.tsx
@@ -0,0 +1,195 @@
+/*
+ * 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, { memo, useCallback, useMemo } from 'react';
+import { EuiFormRow, EuiColorPicker, EuiTextArea } from '@elastic/eui';
+
+import { EuiSetColorMethod } from '@elastic/eui/src/services/color_picker/color_picker';
+import { css } from '@emotion/react';
+import { PromptContextTemplate } from '../../../..';
+import * as i18n from './translations';
+import { QuickPrompt } from '../types';
+import { QuickPromptSelector } from '../quick_prompt_selector/quick_prompt_selector';
+import { PromptContextSelector } from '../prompt_context_selector/prompt_context_selector';
+import { useAssistantContext } from '../../../assistant_context';
+import { useQuickPromptEditor } from './use_quick_prompt_editor';
+
+const DEFAULT_COLOR = '#D36086';
+
+interface Props {
+ onSelectedQuickPromptChange: (quickPrompt?: QuickPrompt) => void;
+ quickPromptSettings: QuickPrompt[];
+ resetSettings?: () => void;
+ selectedQuickPrompt: QuickPrompt | undefined;
+ setUpdatedQuickPromptSettings: React.Dispatch>;
+}
+
+const QuickPromptSettingsEditorComponent = ({
+ onSelectedQuickPromptChange,
+ quickPromptSettings,
+ resetSettings,
+ selectedQuickPrompt,
+ setUpdatedQuickPromptSettings,
+}: Props) => {
+ const { basePromptContexts } = useAssistantContext();
+
+ // Prompt
+ const prompt = useMemo(
+ // Fixing Cursor Jump in text area
+ () => quickPromptSettings.find((p) => p.title === selectedQuickPrompt?.title)?.prompt ?? '',
+ [selectedQuickPrompt?.title, quickPromptSettings]
+ );
+
+ const handlePromptChange = useCallback(
+ (e: React.ChangeEvent) => {
+ if (selectedQuickPrompt != null) {
+ setUpdatedQuickPromptSettings((prev) => {
+ const alreadyExists = prev.some((qp) => qp.title === selectedQuickPrompt.title);
+
+ if (alreadyExists) {
+ return prev.map((qp) => {
+ if (qp.title === selectedQuickPrompt.title) {
+ return {
+ ...qp,
+ prompt: e.target.value,
+ };
+ }
+ return qp;
+ });
+ }
+
+ return prev;
+ });
+ }
+ },
+ [selectedQuickPrompt, setUpdatedQuickPromptSettings]
+ );
+
+ // Color
+ const selectedColor = useMemo(
+ () => selectedQuickPrompt?.color ?? DEFAULT_COLOR,
+ [selectedQuickPrompt?.color]
+ );
+
+ const handleColorChange = useCallback(
+ (color, { hex, isValid }) => {
+ if (selectedQuickPrompt != null) {
+ setUpdatedQuickPromptSettings((prev) => {
+ const alreadyExists = prev.some((qp) => qp.title === selectedQuickPrompt.title);
+
+ if (alreadyExists) {
+ return prev.map((qp) => {
+ if (qp.title === selectedQuickPrompt.title) {
+ return {
+ ...qp,
+ color,
+ };
+ }
+ return qp;
+ });
+ }
+ return prev;
+ });
+ }
+ },
+ [selectedQuickPrompt, setUpdatedQuickPromptSettings]
+ );
+
+ // Prompt Contexts
+ const selectedPromptContexts = useMemo(
+ () =>
+ basePromptContexts.filter((bpc) =>
+ selectedQuickPrompt?.categories?.some((cat) => bpc?.category === cat)
+ ) ?? [],
+ [basePromptContexts, selectedQuickPrompt?.categories]
+ );
+
+ const onPromptContextSelectionChange = useCallback(
+ (pc: PromptContextTemplate[]) => {
+ if (selectedQuickPrompt != null) {
+ setUpdatedQuickPromptSettings((prev) => {
+ const alreadyExists = prev.some((qp) => qp.title === selectedQuickPrompt.title);
+
+ if (alreadyExists) {
+ return prev.map((qp) => {
+ if (qp.title === selectedQuickPrompt.title) {
+ return {
+ ...qp,
+ categories: pc.map((p) => p.category),
+ };
+ }
+ return qp;
+ });
+ }
+ return prev;
+ });
+ }
+ },
+ [selectedQuickPrompt, setUpdatedQuickPromptSettings]
+ );
+
+ // When top level quick prompt selection changes
+ const { onQuickPromptDeleted, onQuickPromptSelectionChange } = useQuickPromptEditor({
+ onSelectedQuickPromptChange,
+ setUpdatedQuickPromptSettings,
+ });
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+export const QuickPromptSettingsEditor = memo(QuickPromptSettingsEditorComponent);
+
+QuickPromptSettingsEditor.displayName = 'QuickPromptSettingsEditor';
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_settings/quick_prompt_settings.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_settings/quick_prompt_settings.tsx
index 38bbb0e6899be..4b8b6a8f8039d 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_settings/quick_prompt_settings.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_settings/quick_prompt_settings.tsx
@@ -5,27 +5,12 @@
* 2.0.
*/
-import React, { useCallback, useMemo } from 'react';
-import {
- EuiFormRow,
- EuiColorPicker,
- EuiTextArea,
- EuiTitle,
- EuiText,
- EuiHorizontalRule,
- EuiSpacer,
-} from '@elastic/eui';
+import React from 'react';
+import { EuiTitle, EuiText, EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
-import { EuiSetColorMethod } from '@elastic/eui/src/services/color_picker/color_picker';
-import { css } from '@emotion/react';
-import { PromptContextTemplate } from '../../../..';
import * as i18n from './translations';
import { QuickPrompt } from '../types';
-import { QuickPromptSelector } from '../quick_prompt_selector/quick_prompt_selector';
-import { PromptContextSelector } from '../prompt_context_selector/prompt_context_selector';
-import { useAssistantContext } from '../../../assistant_context';
-
-const DEFAULT_COLOR = '#D36086';
+import { QuickPromptSettingsEditor } from './quick_prompt_editor';
interface Props {
onSelectedQuickPromptChange: (quickPrompt?: QuickPrompt) => void;
@@ -44,136 +29,6 @@ export const QuickPromptSettings: React.FC = React.memo(
selectedQuickPrompt,
setUpdatedQuickPromptSettings,
}) => {
- const { basePromptContexts } = useAssistantContext();
-
- // Prompt
- const prompt = useMemo(() => selectedQuickPrompt?.prompt ?? '', [selectedQuickPrompt?.prompt]);
-
- const handlePromptChange = useCallback(
- (e: React.ChangeEvent) => {
- if (selectedQuickPrompt != null) {
- setUpdatedQuickPromptSettings((prev) => {
- const alreadyExists = prev.some((qp) => qp.title === selectedQuickPrompt.title);
-
- if (alreadyExists) {
- return prev.map((qp) => {
- if (qp.title === selectedQuickPrompt.title) {
- return {
- ...qp,
- prompt: e.target.value,
- };
- }
- return qp;
- });
- }
-
- return prev;
- });
- }
- },
- [selectedQuickPrompt, setUpdatedQuickPromptSettings]
- );
-
- // Color
- const selectedColor = useMemo(
- () => selectedQuickPrompt?.color ?? DEFAULT_COLOR,
- [selectedQuickPrompt?.color]
- );
-
- const handleColorChange = useCallback(
- (color, { hex, isValid }) => {
- if (selectedQuickPrompt != null) {
- setUpdatedQuickPromptSettings((prev) => {
- const alreadyExists = prev.some((qp) => qp.title === selectedQuickPrompt.title);
-
- if (alreadyExists) {
- return prev.map((qp) => {
- if (qp.title === selectedQuickPrompt.title) {
- return {
- ...qp,
- color,
- };
- }
- return qp;
- });
- }
- return prev;
- });
- }
- },
- [selectedQuickPrompt, setUpdatedQuickPromptSettings]
- );
-
- // Prompt Contexts
- const selectedPromptContexts = useMemo(
- () =>
- basePromptContexts.filter((bpc) =>
- selectedQuickPrompt?.categories?.some((cat) => bpc?.category === cat)
- ) ?? [],
- [basePromptContexts, selectedQuickPrompt?.categories]
- );
-
- const onPromptContextSelectionChange = useCallback(
- (pc: PromptContextTemplate[]) => {
- if (selectedQuickPrompt != null) {
- setUpdatedQuickPromptSettings((prev) => {
- const alreadyExists = prev.some((qp) => qp.title === selectedQuickPrompt.title);
-
- if (alreadyExists) {
- return prev.map((qp) => {
- if (qp.title === selectedQuickPrompt.title) {
- return {
- ...qp,
- categories: pc.map((p) => p.category),
- };
- }
- return qp;
- });
- }
- return prev;
- });
- }
- },
- [selectedQuickPrompt, setUpdatedQuickPromptSettings]
- );
-
- // When top level quick prompt selection changes
- const onQuickPromptSelectionChange = useCallback(
- (quickPrompt?: QuickPrompt | string) => {
- const isNew = typeof quickPrompt === 'string';
- const newSelectedQuickPrompt: QuickPrompt | undefined = isNew
- ? {
- title: quickPrompt ?? '',
- prompt: '',
- color: DEFAULT_COLOR,
- categories: [],
- }
- : quickPrompt;
-
- if (newSelectedQuickPrompt != null) {
- setUpdatedQuickPromptSettings((prev) => {
- const alreadyExists = prev.some((qp) => qp.title === newSelectedQuickPrompt.title);
-
- if (!alreadyExists) {
- return [...prev, newSelectedQuickPrompt];
- }
-
- return prev;
- });
- }
-
- onSelectedQuickPromptChange(newSelectedQuickPrompt);
- },
- [onSelectedQuickPromptChange, setUpdatedQuickPromptSettings]
- );
-
- const onQuickPromptDeleted = useCallback(
- (title: string) => {
- setUpdatedQuickPromptSettings((prev) => prev.filter((qp) => qp.title !== title));
- },
- [setUpdatedQuickPromptSettings]
- );
-
return (
<>
@@ -183,52 +38,12 @@ export const QuickPromptSettings: React.FC = React.memo(