elastic · patrykkopycinski · May 30, 2024 · May 30, 2024 · May 31, 2024 · May 31, 2024
@@ -141,7 +141,7 @@
               ],
               "id": "ml",
               "size": {
-                "value": 1024,
+                "value": 4096,
                 "resource": "memory"
               }
             }

diff --git a/package.json b/package.json
@@ -80,14 +80,14 @@
   "resolutions": {
     "**/@bazel/typescript/protobufjs": "6.11.4",
     "**/@hello-pangea/dnd": "16.6.0",
-    "**/@langchain/core": "0.2.3",
     "**/@types/node": "20.10.5",
     "**/@typescript-eslint/utils": "5.62.0",
     "**/chokidar": "^3.5.3",
     "**/d3-scale/**/d3-color": "npm:@elastic/kibana-d3-color@2.0.1",
     "**/globule/minimatch": "^3.1.2",
     "**/hoist-non-react-statics": "^3.3.2",
     "**/isomorphic-fetch/node-fetch": "^2.6.7",
+    "**/langchain": "0.2.8",
     "**/react-intl/**/@types/react": "^17.0.45",
     "**/remark-parse/trim": "1.0.1",
     "**/sharp": "0.32.6",
@@ -932,10 +932,10 @@
     "@kbn/watcher-plugin": "link:x-pack/plugins/watcher",
     "@kbn/xstate-utils": "link:packages/kbn-xstate-utils",
     "@kbn/zod-helpers": "link:packages/kbn-zod-helpers",
-    "@langchain/community": "^0.2.4",
-    "@langchain/core": "0.2.3",
-    "@langchain/langgraph": "^0.0.23",
-    "@langchain/openai": "^0.0.34",
+    "@langchain/community": "^0.2.16",
+    "@langchain/core": "^0.2.11",
+    "@langchain/langgraph": "^0.0.25",
+    "@langchain/openai": "^0.1.3",
     "@langtrase/trace-attributes": "^3.0.8",
     "@launchdarkly/node-server-sdk": "^9.4.6",
     "@loaders.gl/core": "^3.4.7",
@@ -1072,7 +1072,7 @@
     "jsonwebtoken": "^9.0.2",
     "jsts": "^1.6.2",
     "kea": "^2.6.0",
-    "langchain": "0.2.3",
+    "langchain": "^0.2.8",
     "langsmith": "^0.1.30",
     "launchdarkly-js-client-sdk": "^3.4.0",
     "launchdarkly-node-server-sdk": "^7.0.3",

@@ -6,11 +6,10 @@
  */
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { EuiModal, EuiFlyoutResizable, useEuiTheme } from '@elastic/eui';
-
+import { EuiModal, EuiFlyoutResizable } from '@elastic/eui';
 import useEvent from 'react-use/lib/useEvent';
 // eslint-disable-next-line @kbn/eslint/module_migration
-import styled from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
 import { css } from '@emotion/react';
 import {
   ShowAssistantOverlayProps,
@@ -37,8 +36,13 @@ export interface Props {
   currentUserAvatar?: UserAvatar;
 }
 
+export const UnifiedTimelineGlobalStyles = createGlobalStyle`
+  body:has(.timeline-portal-overlay-mask) .euiOverlayMask {
+    z-index: 1003 !important;
+  }
+`;
+
 export const AssistantOverlay = React.memo<Props>(({ isFlyoutMode, currentUserAvatar }) => {
-  const { euiTheme } = useEuiTheme();
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [conversationTitle, setConversationTitle] = useState<string | undefined>(
     WELCOME_CONVERSATION_TITLE
@@ -132,32 +136,33 @@ export const AssistantOverlay = React.memo<Props>(({ isFlyoutMode, currentUserAv
 
   if (isFlyoutMode) {
     return (
-      <EuiFlyoutResizable
-        ref={flyoutRef}
-        css={css`
-          max-inline-size: calc(100% - 20px);
-          min-inline-size: 400px;
-          > div {
-            height: 100%;
-          }
-        `}
-        onClose={handleCloseModal}
-        data-test-subj="ai-assistant-flyout"
-        paddingSize="none"
-        hideCloseButton
-        // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
-        maskProps={{ style: `z-index: ${(euiTheme.levels.flyout as number) + 3}` }} // we need this flyout to be above the timeline flyout (which has a z-index of 1002)
-      >
-        <Assistant
-          conversationTitle={conversationTitle}
-          promptContextId={promptContextId}
-          onCloseFlyout={handleCloseModal}
-          isFlyoutMode={isFlyoutMode}
-          chatHistoryVisible={chatHistoryVisible}
-          setChatHistoryVisible={toggleChatHistory}
-          currentUserAvatar={currentUserAvatar}
-        />
-      </EuiFlyoutResizable>
+      <>
+        <EuiFlyoutResizable
+          ref={flyoutRef}
+          css={css`
+            max-inline-size: calc(100% - 20px);
+            min-inline-size: 400px;
+            > div {
+              height: 100%;
+            }
+          `}
+          onClose={handleCloseModal}
+          data-test-subj="ai-assistant-flyout"
+          paddingSize="none"
+          hideCloseButton
+        >
+          <Assistant
+            conversationTitle={conversationTitle}
+            promptContextId={promptContextId}
+            onCloseFlyout={handleCloseModal}
+            isFlyoutMode={isFlyoutMode}
+            chatHistoryVisible={chatHistoryVisible}
+            setChatHistoryVisible={toggleChatHistory}
+            currentUserAvatar={currentUserAvatar}
+          />
+        </EuiFlyoutResizable>
+        <UnifiedTimelineGlobalStyles />
+      </>
     );
   }
 

@@ -519,14 +519,6 @@ const AssistantComponent: React.FC<Props> = ({
     isFetchedAnonymizationFields,
   ]);
 
-  useEffect(() => {}, [
-    areConnectorsFetched,
-    connectors,
-    conversationsLoaded,
-    currentConversation,
-    isLoading,
-  ]);
-
   const createCodeBlockPortals = useCallback(
     () =>
       messageCodeBlocks?.map((codeBlocks: CodeBlockDetails[], i: number) => {

@@ -88,11 +88,11 @@ describe('useConversation helpers', () => {
 
   describe('analyzeMarkdown', () => {
     it('should identify dsl Query successfully.', () => {
-      const result = analyzeMarkdown(markDownWithDSLQuery);
+      const result = analyzeMarkdown(markDownWithDSLQuery, new Date().toISOString());
       expect(result[0].type).toBe('dsl');
     });
     it('should identify kql Query successfully.', () => {
-      const result = analyzeMarkdown(markDownWithKQLQuery);
+      const result = analyzeMarkdown(markDownWithKQLQuery, new Date().toISOString());
       expect(result[0].type).toBe('kql');
     });
   });

@@ -14,6 +14,7 @@ import { getGenAiConfig } from '../../connectorland/helpers';
 export interface CodeBlockDetails {
   type: QueryType;
   content: string;
+  timestamp: string;
   start: number;
   end: number;
   getControlContainer?: () => Element | undefined;
@@ -22,6 +23,20 @@ export interface CodeBlockDetails {
 
 export type QueryType = 'eql' | 'esql' | 'kql' | 'dsl' | 'json' | 'no-type' | 'sql';
 
+// If your codeblocks aren't getting tagged with the right language, add keywords to the array.
+export const MARKDOWN_TYPES = {
+  eql: ['Event Query Language', 'EQL sequence query', 'EQL'],
+  esql: ['Elasticsearch Query Language', 'ESQL', 'ES|QL', 'SQL'],
+  kql: ['Kibana Query Language', 'KQL Query', 'KQL'],
+  dsl: [
+    'Elasticsearch QueryDSL',
+    'Elasticsearch Query DSL',
+    'Elasticsearch DSL',
+    'Query DSL',
+    'DSL',
+  ],
+};
+
 /**
  * `analyzeMarkdown` is a helper that enriches content returned from a query
  * with action buttons
@@ -31,29 +46,16 @@ export type QueryType = 'eql' | 'esql' | 'kql' | 'dsl' | 'json' | 'no-type' | 's
  *
  * @param markdown
  */
-export const analyzeMarkdown = (markdown: string): CodeBlockDetails[] => {
+export const analyzeMarkdown = (markdown: string, timestamp: string): CodeBlockDetails[] => {
   const codeBlockRegex = /```(\w+)?\s([\s\S]*?)```/g;
   const matches = [...markdown.matchAll(codeBlockRegex)];
-  // If your codeblocks aren't getting tagged with the right language, add keywords to the array.
-  const types = {
-    eql: ['Event Query Language', 'EQL sequence query', 'EQL'],
-    esql: ['Elasticsearch Query Language', 'ESQL', 'ES|QL', 'SQL'],
-    kql: ['Kibana Query Language', 'KQL Query', 'KQL'],
-    dsl: [
-      'Elasticsearch QueryDSL',
-      'Elasticsearch Query DSL',
-      'Elasticsearch DSL',
-      'Query DSL',
-      'DSL',
-    ],
-  };
 
   const result: CodeBlockDetails[] = matches.map((match) => {
     let type = match[1] || 'no-type';
     if (type === 'no-type' || type === 'json') {
       const start = match.index || 0;
       const precedingText = markdown.slice(0, start);
-      for (const [typeKey, keywords] of Object.entries(types)) {
+      for (const [typeKey, keywords] of Object.entries(MARKDOWN_TYPES)) {
         if (keywords.some((kw) => precedingText.toLowerCase().includes(kw.toLowerCase()))) {
           type = typeKey;
           break;
@@ -64,7 +66,7 @@ export const analyzeMarkdown = (markdown: string): CodeBlockDetails[] => {
     const content = match[2].trim();
     const start = match.index || 0;
     const end = start + match[0].length;
-    return { type: type as QueryType, content, start, end };
+    return { type: type as QueryType, content, start, end, timestamp };
   });
 
   return result;

@@ -16,7 +16,7 @@ export interface InvokeAIActionParamsSchema {
     function_call?: {
       arguments: string;
       name: string;
-    };
+    } | null;
     tool_calls?: Array<{
       id: string;
 

@@ -12,8 +12,15 @@ const mockTimelineComponent = (name: string) => <span data-test-subj={name}>{nam
 
 export const timelineIntegrationMock = {
   editor_plugins: {
-    parsingPlugin: jest.fn(),
-    processingPluginRenderer: () => mockTimelineComponent('plugin-renderer'),
+    parsingPlugins: {
+      timeline: jest.fn(),
+      customCodeBlock: jest.fn(),
+    },
+    processingPluginRenderer: {
+      timeline: () => mockTimelineComponent('plugin-renderer'),
+      esql: () => mockTimelineComponent('esql-plugin-renderer'),
+      customCodeBlock: () => mockTimelineComponent('custom-code-block-plugin-renderer'),
+    },
     uiPlugin: {
       name: 'mock-timeline',
       button: { label: 'mock-timeline-button', iconType: 'mock-timeline-icon' },

@@ -40,7 +40,9 @@ const MarkdownEditorComponent = forwardRef<MarkdownEditorRef, MarkdownEditorProp
       astRef.current = ast;
     }, []);
 
-    const { parsingPlugins, processingPlugins, uiPlugins } = usePlugins(disabledUiPlugins);
+    const { parsingPlugins, processingPlugins, uiPlugins } = usePlugins({
+      disabledPlugins: disabledUiPlugins,
+    });
     const editorRef = useRef<EuiMarkdownEditorRef>(null);
 
     useLensButtonToggle({

@@ -16,6 +16,7 @@ interface Props {
   children: string;
   disableLinks?: boolean;
   textSize?: EuiMarkdownFormatProps['textSize'];
+  timestamp?: string;
 }
 
 const withDisabledLinks = (disableLinks?: boolean): React.FC<EuiLinkAnchorProps> => {
@@ -28,8 +29,13 @@ const withDisabledLinks = (disableLinks?: boolean): React.FC<EuiLinkAnchorProps>
   return MarkdownLinkProcessingComponent;
 };
 
-const MarkdownRendererComponent: React.FC<Props> = ({ children, disableLinks, textSize }) => {
-  const { processingPlugins, parsingPlugins } = usePlugins();
+const MarkdownRendererComponent: React.FC<Props> = ({
+  children,
+  disableLinks,
+  textSize,
+  timestamp,
+}) => {
+  const { processingPlugins, parsingPlugins } = usePlugins({ timestamp });
   // Deep clone of the processing plugins to prevent affecting the markdown editor.
   const processingPluginList = cloneDeep(processingPlugins);
   // This line of code is TS-compatible and it will break if [1][1] change in the future.

@@ -20,15 +20,21 @@ export const getContentWrapperCss = (euiTheme: EuiThemeComputed<{}>) => css`
   -webkit-box-orient: vertical;
 `;
 
-const ScrollableMarkdownRenderer = ({ content }: { content: string }) => {
+const ScrollableMarkdownRenderer = ({
+  content,
+  timestamp,
+}: {
+  content: string;
+  timestamp?: string;
+}) => {
   const { euiTheme } = useEuiTheme();
   return (
     <div
       className={'eui-xScroll'}
       css={getContentWrapperCss(euiTheme)}
       data-test-subj="scrollable-markdown"
     >
-      <MarkdownRenderer>{content}</MarkdownRenderer>
+      <MarkdownRenderer timestamp={timestamp}>{content}</MarkdownRenderer>
     </div>
   );
 };

@@ -21,7 +21,13 @@ export type TemporaryProcessingPluginsType = [
   [
     typeof rehype2react,
     Parameters<typeof rehype2react>[0] & {
-      components: { a: FunctionComponent<EuiLinkAnchorProps>; lens: unknown; timeline: unknown };
+      components: {
+        a: FunctionComponent<EuiLinkAnchorProps>;
+        lens: unknown;
+        timeline: unknown;
+        customCodeBlock: unknown;
+        esql: unknown;
+      };
     }
   ],
   ...PluggableList

@@ -17,7 +17,13 @@ import { KibanaServices, useApplicationCapabilities } from '../../common/lib/kib
 import * as lensMarkdownPlugin from './plugins/lens';
 import { ID as LensPluginId } from './plugins/lens/constants';
 
-export const usePlugins = (disabledPlugins?: string[]) => {
+export const usePlugins = ({
+  disabledPlugins,
+  timestamp,
+}: {
+  disabledPlugins?: string[];
+  timestamp?: string;
+} = {}) => {
   const kibanaConfig = KibanaServices.getConfig();
   const timelinePlugins = useTimelineContext()?.editor_plugins;
   const appCapabilities = useApplicationCapabilities();
@@ -31,10 +37,18 @@ export const usePlugins = (disabledPlugins?: string[]) => {
     if (timelinePlugins) {
       uiPlugins.push(timelinePlugins.uiPlugin);
 
-      parsingPlugins.push(timelinePlugins.parsingPlugin);
+      parsingPlugins.unshift(timelinePlugins.parsingPlugins.customCodeBlock);
+      parsingPlugins.push(timelinePlugins.parsingPlugins.timeline);
 
       // This line of code is TS-compatible and it will break if [1][1] change in the future.
-      processingPlugins[1][1].components.timeline = timelinePlugins.processingPluginRenderer;
+      processingPlugins[1][1].components.timeline =
+        timelinePlugins.processingPluginRenderer.timeline;
+      processingPlugins[1][1].components.esql = (props: {
+        value: string;
+        actionsDisabled: boolean;
+      }) => timelinePlugins.processingPluginRenderer.esql({ timestamp: timestamp ?? '', ...props });
+      processingPlugins[1][1].components.customCodeBlock =
+        timelinePlugins.processingPluginRenderer.customCodeBlock;
     }
 
     if (
@@ -59,5 +73,6 @@ export const usePlugins = (disabledPlugins?: string[]) => {
     disabledPlugins,
     kibanaConfig?.markdownPlugins?.lens,
     timelinePlugins,
+    timestamp,
   ]);
 };