Add streaming to AI Insights

x-pack/solutions/observability/plugins/observability_agent_builder/kibana.jsonc

@@ -22,7 +22,7 @@
       "licensing"
     ],
     "optionalPlugins": ["ml", "spaces"],
-    "requiredBundles": ["kibanaReact"],
+    "requiredBundles": ["kibanaReact", "kibanaUtils"],
     "extraPublicDirs": []
   }
 }

x-pack/solutions/observability/plugins/observability_agent_builder/moon.yml

@@ -55,8 +55,10 @@ dependsOn:
   - '@kbn/licensing-types'
   - '@kbn/licensing-plugin'
   - '@kbn/observability-nav-icons'
-  - '@kbn/server-route-repository-client'
   - '@kbn/agent-builder-browser'
+  - '@kbn/sse-utils-server'
+  - '@kbn/kibana-utils-plugin'
+  - '@kbn/server-route-repository-client'
 tags:
   - plugin
   - prod

x-pack/solutions/observability/plugins/observability_agent_builder/public/components/ai_insight/ai_insight.test.tsx

@@ -0,0 +1,164 @@
+/*
+ * 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 from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { EuiThemeProvider } from '@elastic/eui';
+import { AIChatExperience } from '@kbn/ai-assistant-common';
+import { useUiSetting$ } from '@kbn/kibana-react-plugin/public';
+import { AiInsight } from './ai_insight';
+import { useKibana } from '../../hooks/use_kibana';
+import { useLicense } from '../../hooks/use_license';
+import { useGenAIConnectors } from '../../hooks/use_genai_connectors';
+import { useStreamingAiInsight } from '../../hooks/use_streaming_ai_insight';
+
+jest.mock('@kbn/kibana-react-plugin/public', () => ({
+  useUiSetting$: jest.fn(),
+}));
+
+jest.mock('../../hooks/use_kibana');
+jest.mock('../../hooks/use_license');
+jest.mock('../../hooks/use_genai_connectors');
+jest.mock('../../hooks/use_streaming_ai_insight');
+
+const mockUseUiSetting$ = useUiSetting$ as jest.Mock;
+const mockUseKibana = useKibana as jest.Mock;
+const mockUseLicense = useLicense as jest.Mock;
+const mockUseGenAIConnectors = useGenAIConnectors as jest.Mock;
+const mockUseStreamingAiInsight = useStreamingAiInsight as jest.Mock;
+const mockCreateStream = jest.fn();
+const AiInsightTest = AiInsight as React.ComponentType<any>;
+
+const renderComponent = () =>
+  render(
+    <EuiThemeProvider>
+      <AiInsightTest
+        title="AI Insight"
+        createStream={mockCreateStream}
+        buildAttachments={jest.fn().mockReturnValue([])}
+      />
+    </EuiThemeProvider>
+  );
+
+const mockOpenConversationFlyout = jest.fn();
+
+const baseStreamingState = () => ({
+  isLoading: false,
+  error: undefined as string | undefined,
+  summary: '',
+  context: '',
+  wasStopped: false,
+  fetch: jest.fn(),
+  stop: jest.fn(),
+  regenerate: jest.fn(),
+});
+
+const createStreamingState = (overrides: Partial<ReturnType<typeof baseStreamingState>> = {}) => ({
+  ...baseStreamingState(),
+  ...overrides,
+});
+
+describe('AiInsight', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockUseUiSetting$.mockReturnValue([AIChatExperience.Agent]);
+    mockUseKibana.mockReturnValue({
+      services: {
+        agentBuilder: {
+          openConversationFlyout: mockOpenConversationFlyout,
+        },
+        application: {
+          capabilities: {
+            agentBuilder: { show: true },
+          },
+        },
+      },
+    });
+    mockUseLicense.mockReturnValue({
+      getLicense: () => ({
+        hasAtLeast: () => true,
+      }),
+    });
+    mockUseGenAIConnectors.mockReturnValue({
+      hasConnectors: true,
+    });
+    mockUseStreamingAiInsight.mockReturnValue(createStreamingState());
+  });
+
+  it('fetches insights when the accordion is opened', () => {
+    const fetch = jest.fn();
+    mockUseStreamingAiInsight.mockReturnValue(createStreamingState({ fetch }));
+
+    const { container, unmount } = renderComponent();
+    const toggle = container.querySelector('[data-test-subj="agentBuilderAiInsight"]');
+
+    expect(toggle).toBeTruthy();
+    fireEvent.click(toggle!);
+
+    expect(fetch).toHaveBeenCalledTimes(1);
+    unmount();
+  });
+
+  it('shows error banner and retries on click', () => {
+    const fetch = jest.fn();
+    mockUseStreamingAiInsight.mockReturnValue(createStreamingState({ error: 'Boom', fetch }));
+
+    const { container, unmount } = renderComponent();
+    const toggle = container.querySelector('[data-test-subj="agentBuilderAiInsight"]');
+    fireEvent.click(toggle!);
+
+    const retryButton = container.querySelector(
+      '[data-test-subj="AiInsightErrorBannerRetryButton"]'
+    );
+
+    expect(retryButton).toBeTruthy();
+    fireEvent.click(retryButton!);
+
+    expect(fetch).toHaveBeenCalledTimes(1);
+    unmount();
+  });
+
+  it('renders regenerate and start conversation actions when summary exists', () => {
+    const regenerate = jest.fn();
+    const buildAttachments = jest.fn().mockReturnValue([{ type: 'test', data: {} }]);
+    mockUseStreamingAiInsight.mockReturnValue(
+      createStreamingState({ summary: 'Hello world', context: 'context', regenerate })
+    );
+
+    const { container, unmount } = render(
+      <EuiThemeProvider>
+        <AiInsightTest
+          title="AI Insight"
+          createStream={mockCreateStream}
+          buildAttachments={buildAttachments}
+        />
+      </EuiThemeProvider>
+    );
+
+    const toggle = container.querySelector('[data-test-subj="agentBuilderAiInsight"]');
+    fireEvent.click(toggle!);
+
+    const regenerateButton = container.querySelector(
+      '[data-test-subj="observabilityAgentBuilderRegenerateButton"]'
+    );
+    fireEvent.click(regenerateButton!);
+    expect(regenerate).toHaveBeenCalledTimes(1);
+
+    const startConversationButton = container.querySelector(
+      '[data-test-subj="aiAgentStartConversationButton"]'
+    );
+    fireEvent.click(startConversationButton!);
+
+    expect(buildAttachments).toHaveBeenCalledWith('Hello world', 'context');
+    expect(mockOpenConversationFlyout).toHaveBeenCalledWith({
+      newConversation: true,
+      attachments: [{ type: 'test', data: {} }],
+    });
+    unmount();
+  });
+});

x-pack/solutions/observability/plugins/observability_agent_builder/public/components/ai_insight/ai_insight.tsx

@@ -14,24 +14,26 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiText,
-  EuiSkeletonText,
-  EuiMarkdownFormat,
+  EuiButtonEmpty,
+  EuiHorizontalRule,
   useEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useUiSetting$ } from '@kbn/kibana-react-plugin/public';
 import { AIChatExperience } from '@kbn/ai-assistant-common';
 import { AI_CHAT_EXPERIENCE_TYPE } from '@kbn/management-settings-ids';
+import { EuiMarkdownFormat } from '@elastic/eui';
+import type { Observable } from 'rxjs';
 import { useKibana } from '../../hooks/use_kibana';
 import { useLicense } from '../../hooks/use_license';
+import {
+  useStreamingAiInsight,
+  type InsightStreamEvent,
+} from '../../hooks/use_streaming_ai_insight';
 import { useGenAIConnectors } from '../../hooks/use_genai_connectors';
 import { StartConversationButton } from './start_conversation_button';
 import { AiInsightErrorBanner } from './ai_insight_error_banner';
-
-export interface AiInsightResponse {
-  summary: string;
-  context: string;
-}
+import { useMarkdownPluginsWithCursor, CURSOR } from './loading_cursor';
 
 export interface AiInsightAttachment {
   type: string;
@@ -41,17 +43,13 @@ export interface AiInsightAttachment {
 
 export interface AiInsightProps {
   title: string;
-  fetchInsight: () => Promise<AiInsightResponse>;
+  createStream: (signal: AbortSignal) => Observable<InsightStreamEvent>;
   buildAttachments: (summary: string, context: string) => AiInsightAttachment[];
 }
 
-export function AiInsight({ title, fetchInsight, buildAttachments }: AiInsightProps) {
+export function AiInsight({ title, createStream, buildAttachments }: AiInsightProps) {
   const { euiTheme } = useEuiTheme();
   const [isOpen, setIsOpen] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | undefined>(undefined);
-  const [summary, setSummary] = useState('');
-  const [context, setContext] = useState('');
 
   const {
     services: { agentBuilder, application },
@@ -68,19 +66,12 @@ export function AiInsight({ title, fetchInsight, buildAttachments }: AiInsightPr
   const hasEnterpriseLicense = license?.hasAtLeast('enterprise');
   const hasAgentBuilderAccess = application?.capabilities.agentBuilder?.show === true;
 
-  const handleFetchInsight = useCallback(async () => {
-    setIsLoading(true);
-    setError(undefined);
-    try {
-      const response = await fetchInsight();
-      setSummary(response.summary);
-      setContext(response.context);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Failed to load AI insight');
-    } finally {
-      setIsLoading(false);
-    }
-  }, [fetchInsight]);
+  const { isLoading, error, summary, context, wasStopped, fetch, stop, regenerate } =
+    useStreamingAiInsight(createStream);
+
+  const { parsingPluginList, processingPluginList } = useMarkdownPluginsWithCursor(
+    euiTheme.colors.text
+  );
 
   const handleStartConversation = useCallback(() => {
     if (!agentBuilder?.openConversationFlyout) return;
@@ -142,31 +133,98 @@ export function AiInsight({ title, fetchInsight, buildAttachments }: AiInsightPr
         onToggle={(open) => {
           setIsOpen(open);
           if (open && !error && !summary && !isLoading) {
-            handleFetchInsight();
+            fetch();
           }
         }}
       >
         <EuiSpacer size="m" />
         <EuiPanel color="subdued">
-          {isLoading ? (
-            <EuiSkeletonText lines={3} />
-          ) : error ? (
-            <AiInsightErrorBanner error={error} onRetry={handleFetchInsight} />
+          {error ? (
+            <AiInsightErrorBanner error={error} onRetry={fetch} />
           ) : (
-            <EuiMarkdownFormat textSize="s">{summary}</EuiMarkdownFormat>
+            <EuiText size="s">
+              <EuiMarkdownFormat
+                textSize="s"
+                parsingPluginList={parsingPluginList}
+                processingPluginList={processingPluginList}
+              >
+                {`${summary}${isLoading ? CURSOR : ''}`}
+              </EuiMarkdownFormat>
+            </EuiText>
           )}
-        </EuiPanel>
 
-        {!isLoading && Boolean(summary && summary.trim()) ? (
-          <>
-            <EuiSpacer size="m" />
-            <EuiFlexGroup justifyContent="flexEnd" gutterSize="s" responsive={false}>
-              <EuiFlexItem grow={false}>
-                <StartConversationButton onClick={handleStartConversation} />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </>
-        ) : null}
+          {isLoading ? (
+            <>
+              <EuiSpacer size="m" />
+              <EuiHorizontalRule margin="none" />
+              <EuiSpacer size="s" />
+              <EuiFlexGroup justifyContent="flexStart" gutterSize="s" responsive={false}>
+                <EuiFlexItem grow={false}>
+                  <EuiButtonEmpty
+                    data-test-subj="observabilityAgentBuilderStopGeneratingButton"
+                    color="text"
+                    iconType="stop"
+                    size="s"
+                    onClick={stop}
+                  >
+                    {i18n.translate(
+                      'xpack.observabilityAgentBuilder.aiInsight.stopGeneratingButton',
+                      {
+                        defaultMessage: 'Stop generating',
+                      }
+                    )}
+                  </EuiButtonEmpty>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </>
+          ) : wasStopped ? (
+            <>
+              <EuiSpacer size="m" />
+              <EuiHorizontalRule margin="none" />
+              <EuiSpacer size="s" />
+              <EuiFlexGroup justifyContent="flexEnd" gutterSize="s" responsive={false}>
+                <EuiFlexItem grow={false}>
+                  <EuiButtonEmpty
+                    data-test-subj="observabilityAgentBuilderRegenerateButton"
+                    size="s"
+                    iconType="sparkles"
+                    onClick={regenerate}
+                  >
+                    {i18n.translate('xpack.observabilityAgentBuilder.aiInsight.regenerateButton', {
+                      defaultMessage: 'Regenerate',
+                    })}
+                  </EuiButtonEmpty>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <StartConversationButton onClick={handleStartConversation} />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </>
+          ) : Boolean(summary && summary.trim()) ? (
+            <>
+              <EuiSpacer size="m" />
+              <EuiHorizontalRule margin="none" />
+              <EuiSpacer size="s" />
+              <EuiFlexGroup justifyContent="flexEnd" gutterSize="s" responsive={false}>
+                <EuiFlexItem grow={false}>
+                  <EuiButtonEmpty
+                    data-test-subj="observabilityAgentBuilderRegenerateButton"
+                    size="s"
+                    iconType="sparkles"
+                    onClick={regenerate}
+                  >
+                    {i18n.translate('xpack.observabilityAgentBuilder.aiInsight.regenerateButton', {
+                      defaultMessage: 'Regenerate',
+                    })}
+                  </EuiButtonEmpty>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <StartConversationButton onClick={handleStartConversation} />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </>
+          ) : null}
+        </EuiPanel>
       </EuiAccordion>
     </EuiPanel>
   );

x-pack/solutions/observability/plugins/observability_agent_builder/public/components/ai_insight/index.ts

@@ -5,11 +5,6 @@
  * 2.0.
  */
 
-export {
-  AiInsight,
-  type AiInsightProps,
-  type AiInsightResponse,
-  type AiInsightAttachment,
-} from './ai_insight';
+export { AiInsight, type AiInsightProps, type AiInsightAttachment } from './ai_insight';
 export { AiInsightErrorBanner, type AiInsightErrorBannerProps } from './ai_insight_error_banner';
 export { StartConversationButton } from './start_conversation_button';