pmuellr
diff --git a/‎x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_actions_menu.tsx‎
Lines changed: 162 additions & 119 deletions b/‎x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_actions_menu.tsx‎
Lines changed: 162 additions & 119 deletions
diff --git a/‎x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_body.tsx‎
Lines changed: 4 additions & 0 deletions b/‎x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_body.tsx‎
Lines changed: 4 additions & 0 deletions
diff --git a/‎x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_flyout.tsx‎
Lines changed: 8 additions & 0 deletions b/‎x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_flyout.tsx‎
Lines changed: 8 additions & 0 deletions
@@ -5,39 +5,43 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { i18n } from '@kbn/i18n';
+import { EuiButtonIcon, EuiContextMenu, EuiPopover, EuiToolTip } from '@elastic/eui';
+import { navigateToSettingsManagementApp } from '@kbn/observability-ai-assistant-plugin/public';
 import {
-  EuiButtonEmpty,
-  EuiButtonIcon,
-  EuiContextMenu,
-  EuiPanel,
-  EuiPopover,
-  EuiToolTip,
-} from '@elastic/eui';
-import {
-  ConnectorSelectorBase,
-  navigateToConnectorsManagementApp,
-  navigateToSettingsManagementApp,
-} from '@kbn/observability-ai-assistant-plugin/public';
+  ConnectorSelectable,
+  type ConnectorSelectableComponentProps,
+} from '@kbn/ai-assistant-connector-selector-action';
+import type { ApplicationStart } from '@kbn/core/public';
+import type { ActionConnector } from '@kbn/triggers-actions-ui-plugin/public';
+import { isSupportedConnectorType } from '@kbn/inference-common';
+import { GenerativeAIForObservabilityConnectorFeatureId } from '@kbn/actions-plugin/common';
 import type { UseGenAIConnectorsResult } from '../hooks/use_genai_connectors';
 import { useKibana } from '../hooks/use_kibana';
 import { useKnowledgeBase } from '../hooks';
 
+type ConnectorLists = [
+  preConfigured: ConnectorSelectableComponentProps['preConfiguredConnectors'],
+  custom: ConnectorSelectableComponentProps['customConnectors']
+];
 export function ChatActionsMenu({
   connectors,
   conversationId,
   disabled,
   onCopyConversationClick,
+  navigateToConnectorsManagementApp,
 }: {
   connectors: UseGenAIConnectorsResult;
   conversationId?: string;
   disabled: boolean;
   onCopyConversationClick: () => void;
+  navigateToConnectorsManagementApp: (application: ApplicationStart) => void;
 }) {
-  const { application, http } = useKibana().services;
+  const { application, http, triggersActionsUi } = useKibana().services;
   const knowledgeBase = useKnowledgeBase();
   const [isOpen, setIsOpen] = useState(false);
+  const [connectorFlyoutOpen, setConnectorFlyoutOpen] = useState(false);
 
   const toggleActionsMenu = () => {
     setIsOpen(!isOpen);
@@ -51,118 +55,157 @@ export function ChatActionsMenu({
     );
   };
 
+  const [preConfiguredConnectors, customConnectors] = useMemo<ConnectorLists>(() => {
+    if (!connectors.connectors) return [[], []];
+
+    return connectors.connectors.reduce<ConnectorLists>(
+      ([pre, custom], { id, name, isPreconfigured }) => {
+        const item = { value: id, label: name };
+        return isPreconfigured ? [[...pre, item], custom] : [pre, [...custom, item]];
+      },
+      [[], []]
+    );
+  }, [connectors.connectors]);
+
+  const ConnectorFlyout = useMemo(
+    () => triggersActionsUi.getAddConnectorFlyout,
+    [triggersActionsUi]
+  );
+
+  const onConnectorCreated = (createdConnector: ActionConnector) => {
+    setConnectorFlyoutOpen(false);
+
+    if (isSupportedConnectorType(createdConnector.actionTypeId)) {
+      connectors.reloadConnectors();
+    }
+  };
+
   return (
-    <EuiPopover
-      isOpen={isOpen}
-      button={
-        <EuiToolTip
-          content={i18n.translate('xpack.aiAssistant.chatActionsMenu.euiToolTip.moreActionsLabel', {
-            defaultMessage: 'More actions',
-          })}
-          display="block"
-        >
-          <EuiButtonIcon
-            data-test-subj="observabilityAiAssistantChatActionsMenuButtonIcon"
-            disabled={disabled}
-            iconType="boxesVertical"
-            onClick={toggleActionsMenu}
-            aria-label={i18n.translate(
-              'xpack.aiAssistant.chatActionsMenu.euiButtonIcon.menuLabel',
-              { defaultMessage: 'Menu' }
+    <>
+      <EuiPopover
+        isOpen={isOpen}
+        button={
+          <EuiToolTip
+            content={i18n.translate(
+              'xpack.aiAssistant.chatActionsMenu.euiToolTip.moreActionsLabel',
+              {
+                defaultMessage: 'More actions',
+              }
             )}
-          />
-        </EuiToolTip>
-      }
-      panelPaddingSize="none"
-      closePopover={toggleActionsMenu}
-    >
-      <EuiContextMenu
-        initialPanelId={0}
-        panels={[
-          {
-            id: 0,
-            title: i18n.translate('xpack.aiAssistant.chatHeader.actions.title', {
-              defaultMessage: 'Actions',
-            }),
-            items: [
-              ...(knowledgeBase?.status.value?.enabled
-                ? [
-                    {
-                      name: i18n.translate('xpack.aiAssistant.chatHeader.actions.knowledgeBase', {
-                        defaultMessage: 'Manage knowledge base',
-                      }),
-                      onClick: () => {
-                        toggleActionsMenu();
-                        handleNavigateToSettingsKnowledgeBase();
+            display="block"
+          >
+            <EuiButtonIcon
+              data-test-subj="observabilityAiAssistantChatActionsMenuButtonIcon"
+              disabled={disabled}
+              iconType="boxesVertical"
+              onClick={toggleActionsMenu}
+              aria-label={i18n.translate(
+                'xpack.aiAssistant.chatActionsMenu.euiButtonIcon.menuLabel',
+                { defaultMessage: 'Menu' }
+              )}
+            />
+          </EuiToolTip>
+        }
+        panelPaddingSize="none"
+        closePopover={toggleActionsMenu}
+      >
+        <EuiContextMenu
+          initialPanelId={0}
+          panels={[
+            {
+              id: 0,
+              title: i18n.translate('xpack.aiAssistant.chatHeader.actions.title', {
+                defaultMessage: 'Actions',
+              }),
+              items: [
+                ...(knowledgeBase?.status.value?.enabled
+                  ? [
+                      {
+                        name: i18n.translate('xpack.aiAssistant.chatHeader.actions.knowledgeBase', {
+                          defaultMessage: 'Manage knowledge base',
+                        }),
+                        onClick: () => {
+                          toggleActionsMenu();
+                          handleNavigateToSettingsKnowledgeBase();
+                        },
                       },
-                    },
-                  ]
-                : []),
-              {
-                name: i18n.translate('xpack.aiAssistant.chatHeader.actions.settings', {
-                  defaultMessage: 'AI Assistant Settings',
-                }),
-                onClick: () => {
-                  toggleActionsMenu();
-                  navigateToSettingsManagementApp(application!);
+                    ]
+                  : []),
+                {
+                  name: i18n.translate('xpack.aiAssistant.chatHeader.actions.settings', {
+                    defaultMessage: 'AI Assistant Settings',
+                  }),
+                  onClick: () => {
+                    toggleActionsMenu();
+                    navigateToSettingsManagementApp(application!);
+                  },
                 },
-              },
-              {
-                name: (
-                  <div className="eui-textTruncate">
-                    {i18n.translate('xpack.aiAssistant.chatHeader.actions.connector', {
-                      defaultMessage: 'Connector',
-                    })}{' '}
-                    <strong>
-                      {
-                        connectors.connectors?.find(({ id }) => id === connectors.selectedConnector)
-                          ?.name
-                      }
-                    </strong>
-                  </div>
-                ),
-                panel: 1,
-              },
-              {
-                name: i18n.translate('xpack.aiAssistant.chatHeader.actions.copyConversation', {
-                  defaultMessage: 'Copy conversation',
-                }),
-                disabled: !conversationId,
-                onClick: () => {
-                  toggleActionsMenu();
-                  onCopyConversationClick();
+                {
+                  name: (
+                    <div className="eui-textTruncate">
+                      {i18n.translate('xpack.aiAssistant.chatHeader.actions.connector', {
+                        defaultMessage: 'Connector',
+                      })}{' '}
+                      <strong>
+                        {
+                          connectors.connectors?.find(
+                            ({ id }) => id === connectors.selectedConnector
+                          )?.name
+                        }
+                      </strong>
+                    </div>
+                  ),
+                  panel: !connectors.isConnectorSelectionRestricted ? 1 : undefined,
                 },
-              },
-            ],
-          },
-          {
-            id: 1,
-            width: 256,
-            title: i18n.translate('xpack.aiAssistant.chatHeader.actions.connector', {
-              defaultMessage: 'Connector',
-            }),
-            content: (
-              <EuiPanel>
-                <ConnectorSelectorBase {...connectors} />
-
-                <EuiButtonEmpty
-                  flush="left"
-                  size="xs"
-                  data-test-subj="settingsTabGoToConnectorsButton"
-                  onClick={() => {
+                {
+                  name: i18n.translate('xpack.aiAssistant.chatHeader.actions.copyConversation', {
+                    defaultMessage: 'Copy conversation',
+                  }),
+                  disabled: !conversationId,
+                  onClick: () => {
+                    toggleActionsMenu();
+                    onCopyConversationClick();
+                  },
+                },
+              ],
+            },
+            {
+              id: 1,
+              width: 256,
+              title: i18n.translate('xpack.aiAssistant.chatHeader.actions.connector', {
+                defaultMessage: 'Connector',
+              }),
+              content: (
+                <ConnectorSelectable
+                  customConnectors={customConnectors}
+                  preConfiguredConnectors={preConfiguredConnectors}
+                  value={connectors.selectedConnector}
+                  defaultConnectorId={connectors.defaultConnector}
+                  onValueChange={(id: string) => {
+                    connectors.selectConnector(id);
+                    toggleActionsMenu();
+                  }}
+                  onAddConnectorClick={() => {
+                    toggleActionsMenu();
+                    setConnectorFlyoutOpen(true);
+                  }}
+                  onManageConnectorsClick={() => {
                     toggleActionsMenu();
                     navigateToConnectorsManagementApp(application!);
                   }}
-                >
-                  {i18n.translate('xpack.aiAssistant.settingsPage.goToConnectorsButtonLabel', {
-                    defaultMessage: 'Manage connectors',
-                  })}
-                </EuiButtonEmpty>
-              </EuiPanel>
-            ),
-          },
-        ]}
-      />
-    </EuiPopover>
+                />
+              ),
+            },
+          ]}
+        />
+      </EuiPopover>
+      {connectorFlyoutOpen && (
+        <ConnectorFlyout
+          featureId={GenerativeAIForObservabilityConnectorFeatureId}
+          onConnectorCreated={onConnectorCreated}
+          onClose={() => setConnectorFlyoutOpen(false)}
+        />
+      )}
+    </>
   );
 }
@@ -35,6 +35,7 @@ import type { AuthenticatedUser } from '@kbn/security-plugin/common';
 import { findLastIndex } from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { ChatFeedback } from '@kbn/observability-ai-assistant-plugin/public/analytics/schemas/chat_feedback';
+import type { ApplicationStart } from '@kbn/core/public';
 import type { UseKnowledgeBaseResult } from '../hooks/use_knowledge_base';
 import { ASSISTANT_SETUP_TITLE, EMPTY_CONVERSATION_TITLE, UPGRADE_LICENSE_TITLE } from '../i18n';
 import { useAIAssistantChatService } from '../hooks/use_ai_assistant_chat_service';
@@ -121,6 +122,7 @@ export function ChatBody({
   onConversationUpdate,
   onToggleFlyoutPositionMode,
   navigateToConversation,
+  navigateToConnectorsManagementApp,
 }: {
   connectors: ReturnType<typeof useGenAIConnectors>;
   currentUser?: Pick<AuthenticatedUser, 'full_name' | 'username'>;
@@ -133,6 +135,7 @@ export function ChatBody({
   onConversationUpdate: (conversation: { conversation: Conversation['conversation'] }) => void;
   onToggleFlyoutPositionMode?: (flyoutPositionMode: FlyoutPositionMode) => void;
   navigateToConversation?: (conversationId?: string) => void;
+  navigateToConnectorsManagementApp: (application: ApplicationStart) => void;
 }) {
   const license = useLicense();
   const hasCorrectLicense = license?.hasAtLeast('enterprise');
@@ -579,6 +582,7 @@ export function ChatBody({
             initialMessages?.length && !initialConversationId ? undefined : navigateToConversation
           }
           isConversationApp={!showLinkToConversationsApp}
+          navigateToConnectorsManagementApp={navigateToConnectorsManagementApp}
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
 
@@ -19,6 +19,8 @@ import { i18n } from '@kbn/i18n';
 import { Message } from '@kbn/observability-ai-assistant-plugin/common';
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
+import type { ApplicationStart } from '@kbn/core/public';
+import { navigateToConnectorsManagementApp } from '@kbn/observability-ai-assistant-plugin/public';
 import { useConversationKey } from '../hooks/use_conversation_key';
 import { useConversationList } from '../hooks/use_conversation_list';
 import { useCurrentUser } from '../hooks/use_current_user';
@@ -142,6 +144,11 @@ export function ChatFlyout({
     onFlyoutPositionModeChange?.(newFlyoutPositionMode);
   };
 
+  const navigateToConnectorsManagementAppHandler = (application: ApplicationStart) => {
+    onClose();
+    navigateToConnectorsManagementApp(application);
+  };
+
   return isOpen ? (
     <ObservabilityAIAssistantMultipaneFlyoutContext.Provider
       value={{
@@ -287,6 +294,7 @@ export function ChatFlyout({
                     }
                   : undefined
               }
+              navigateToConnectorsManagementApp={navigateToConnectorsManagementAppHandler}
             />
           </EuiFlexItem>