Adds new useSecurityAssistantOverlay hook for programmatically openin…

…g overlay with conversationId and promptContextId
andrew-goldstein · May 12, 2023 · a3ddec0 · a3ddec0
1 parent 07ac4f3
commit a3ddec0
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 35 deletions.
diff --git a/...ugins/security_solution/public/security_assistant/assistant_overlay/assistant_overlay.tsx b/...ugins/security_solution/public/security_assistant/assistant_overlay/assistant_overlay.tsx
@@ -5,13 +5,15 @@
  * 2.0.
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { EuiModal, EuiSpacer } from '@elastic/eui';
 
 import useEvent from 'react-use/lib/useEvent';
 import styled from 'styled-components';
 import { SecurityAssistant } from '../security_assistant';
 import { QuickPrompts } from './quick_prompts';
+import type { ShowAssistantOverlayProps } from '../security_assistant_context';
+import { useSecurityAssistantContext } from '../security_assistant_context';
 
 const isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0;
 
@@ -30,6 +32,27 @@ interface AssistantOverlayProps {}
 export const AssistantOverlay: React.FC<AssistantOverlayProps> = React.memo(({}) => {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [input, setInput] = useState<string | undefined>();
+  const [conversationId, setConversationId] = useState<string | undefined>('default');
+  const [promptContextId, setPromptContextId] = useState<string | undefined>();
+  const { setShowAssistantOverlay } = useSecurityAssistantContext();
+
+  // Bind `showAssistantOverlay` in SecurityAssistantContext to this modal instance
+  const showOverlay = useCallback(
+    () =>
+      ({
+        showOverlay: so,
+        promptContextId: pid,
+        conversationId: cid,
+      }: ShowAssistantOverlayProps) => {
+        setIsModalVisible(so);
+        setPromptContextId(pid);
+        setConversationId(cid);
+      },
+    [setIsModalVisible]
+  );
+  useEffect(() => {
+    setShowAssistantOverlay(showOverlay);
+  }, [setShowAssistantOverlay, showOverlay]);
 
   // Register keyboard listener to show the modal when cmd + / is pressed
   const onKeyDown = useCallback(
@@ -46,6 +69,8 @@ export const AssistantOverlay: React.FC<AssistantOverlayProps> = React.memo(({})
   // Modal control functions
   const cleanupAndCloseModal = useCallback(() => {
     setIsModalVisible(false);
+    setPromptContextId(undefined);
+    setConversationId('default');
   }, [setIsModalVisible]);
 
   const handleCloseModal = useCallback(() => {
@@ -56,7 +81,7 @@ export const AssistantOverlay: React.FC<AssistantOverlayProps> = React.memo(({})
     <>
       {isModalVisible && (
         <StyledEuiModal onClose={handleCloseModal}>
-          <SecurityAssistant />
+          <SecurityAssistant conversationId={conversationId} promptContextId={promptContextId} />
 
           <EuiSpacer size="xs" />
 

diff --git a/...y_solution/public/security_assistant/assistant_overlay/use_security_assistant_overlay.tsx b/...y_solution/public/security_assistant/assistant_overlay/use_security_assistant_overlay.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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 { useSecurityAssistantContext } from '../security_assistant_context';
+
+interface UserSecurityAssistantOverlayProps {
+  promptContextId?: string;
+  conversationId?: string;
+}
+interface UserSecurityAssistantOverlay {
+  showSecurityAssistantOverlay: (showOverlay: boolean) => void;
+}
+
+export const useSecurityAssistantOverlay = ({
+  promptContextId,
+  conversationId,
+}: UserSecurityAssistantOverlayProps): UserSecurityAssistantOverlay => {
+  const { showAssistantOverlay } = useSecurityAssistantContext();
+
+  const showSecurityAssistantOverlay = useCallback(
+    (showOverlay: boolean) => {
+      showAssistantOverlay({ showOverlay, promptContextId, conversationId });
+    },
+    [conversationId, promptContextId, showAssistantOverlay]
+  );
+
+  return { showSecurityAssistantOverlay };
+};
diff --git a/x-pack/plugins/security_solution/public/security_assistant/new_chat/index.tsx b/x-pack/plugins/security_solution/public/security_assistant/new_chat/index.tsx
@@ -5,46 +5,31 @@
  * 2.0.
  */
 
-import { EuiButtonEmpty, EuiPopover } from '@elastic/eui';
-import React, { useCallback, useMemo, useState } from 'react';
-import styled from 'styled-components';
+import { EuiButtonEmpty } from '@elastic/eui';
+import React, { useCallback, useMemo } from 'react';
 
-import { SecurityAssistant } from '../security_assistant';
 import * as i18n from './translations';
-
-const SecurityAssistantContainer = styled.div`
-  max-height: 1020px;
-  max-width: 600px;
-`;
+import { useSecurityAssistantOverlay } from '../assistant_overlay/use_security_assistant_overlay';
 
 const NewChatComponent: React.FC<{
   promptContextId: string;
 }> = ({ promptContextId }) => {
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const closePopover = () => setIsPopoverOpen(false);
+  const { showSecurityAssistantOverlay } = useSecurityAssistantOverlay({
+    promptContextId,
+    conversationId: 'alertSummary',
+  });
 
-  const onStartConversation = useCallback(() => setIsPopoverOpen((isOpen) => !isOpen), []);
+  const showOverlay = useCallback(() => {
+    showSecurityAssistantOverlay(true);
+  }, [showSecurityAssistantOverlay]);
 
-  const NewChatButton = useMemo(
+  return useMemo(
     () => (
-      <EuiButtonEmpty onClick={onStartConversation} iconType="discuss">
+      <EuiButtonEmpty onClick={showOverlay} iconType="discuss">
         {i18n.NEW_CHAT}
       </EuiButtonEmpty>
     ),
-    [onStartConversation]
-  );
-
-  return (
-    <EuiPopover
-      button={NewChatButton}
-      closePopover={closePopover}
-      isOpen={isPopoverOpen}
-      panelPaddingSize="none"
-    >
-      <SecurityAssistantContainer>
-        <SecurityAssistant promptContextId={promptContextId} conversationId={'alertSummary'} />
-      </SecurityAssistantContainer>
-    </EuiPopover>
+    [showOverlay]
   );
 };
 

diff --git a/x-pack/plugins/security_solution/public/security_assistant/security_assistant.tsx b/x-pack/plugins/security_solution/public/security_assistant/security_assistant.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import type { EuiCommentProps } from '@elastic/eui';
 import {
@@ -85,8 +85,10 @@ export const SecurityAssistant: React.FC<SecurityAssistantProps> =
       const { isLoading, sendMessages } = useSendMessages();
 
       const [selectedConversationId, setSelectedConversationId] = useState<string>(conversationId);
-      const currentConversation =
-        conversations[selectedConversationId] ?? createConversation({ conversationId });
+      const currentConversation = useMemo(
+        () => conversations[selectedConversationId] ?? createConversation({ conversationId }),
+        [conversationId, conversations, createConversation, selectedConversationId]
+      );
 
       const { cases } = useKibana().services;
       const bottomRef = useRef<HTMLDivElement | null>(null);
@@ -217,7 +219,8 @@ export const SecurityAssistant: React.FC<SecurityAssistantProps> =
       ////
 
       useEffect(() => {
-        if (currentConversation.messages.length > 0) {
+        // Adding `conversationId !== selectedConversationId` to prevent auto-run still executing after changing selected conversation
+        if (currentConversation.messages.length || conversationId !== selectedConversationId) {
           return;
         }
 
@@ -232,7 +235,14 @@ export const SecurityAssistant: React.FC<SecurityAssistantProps> =
         };
 
         autoRunOnOpen();
-      }, [currentConversation.messages, promptContexts, promptContextId, handleSendMessage]);
+      }, [
+        currentConversation.messages,
+        promptContexts,
+        promptContextId,
+        handleSendMessage,
+        conversationId,
+        selectedConversationId,
+      ]);
 
       return (
         <EuiPanel>

diff --git a/.../plugins/security_solution/public/security_assistant/security_assistant_context/index.tsx b/.../plugins/security_solution/public/security_assistant/security_assistant_context/index.tsx
@@ -20,6 +20,17 @@ import type { Conversation } from './types';
 import { DEFAULT_CONVERSATION_STATE } from '../use_conversation';
 import { useLocalStorage } from '../../common/components/local_storage';
 
+export interface ShowAssistantOverlayProps {
+  showOverlay: boolean;
+  promptContextId?: string;
+  conversationId?: string;
+}
+
+type ShowAssistantOverlay = ({
+  showOverlay,
+  promptContextId,
+  conversationId,
+}: ShowAssistantOverlayProps) => void;
 interface SecurityAssistantProviderProps {
   apiConfig: SecurityAssistantUiSettings;
   children: React.ReactNode;
@@ -35,6 +46,8 @@ interface UseSecurityAssistantContext {
   conversationIds: string[];
   conversations: Record<string, Conversation>;
   setConversations: React.Dispatch<React.SetStateAction<Record<string, Conversation>>>;
+  showAssistantOverlay: ShowAssistantOverlay;
+  setShowAssistantOverlay: (showAssistantOverlay: ShowAssistantOverlay) => void;
 }
 
 export const SECURITY_ASSISTANT_UI_SETTING_KEY = 'securityAssistant';
@@ -84,6 +97,13 @@ export const SecurityAssistantProvider: React.FC<SecurityAssistantProviderProps>
     },
   });
 
+  /**
+   * Global Assistant Overlay actions
+   */
+  const [showAssistantOverlay, setShowAssistantOverlay] = useState<ShowAssistantOverlay>(
+    (showAssistant) => {}
+  );
+
   const value = useMemo(
     () => ({
       apiConfig,
@@ -94,6 +114,8 @@ export const SecurityAssistantProvider: React.FC<SecurityAssistantProviderProps>
       setConversations,
       conversationIds: Object.keys(conversations).sort(),
       conversations,
+      showAssistantOverlay,
+      setShowAssistantOverlay,
     }),
     [
       apiConfig,
@@ -103,6 +125,8 @@ export const SecurityAssistantProvider: React.FC<SecurityAssistantProviderProps>
       unRegisterPromptContext,
       setConversations,
       conversations,
+      showAssistantOverlay,
+      setShowAssistantOverlay,
     ]
   );